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
2,427 lines • 108 kB
JavaScript
import { trigger, transition, style, animate } from '@angular/animations';
import * as i1 from '@angular/common';
import { isPlatformBrowser, DOCUMENT, CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, EventEmitter, inject, PLATFORM_ID, numberAttribute, booleanAttribute, ContentChildren, ContentChild, ViewChild, Output, Input, Inject, ViewEncapsulation, ChangeDetectionStrategy, Component, HostListener, NgModule } from '@angular/core';
import { addClass, focus, findSingle, blockBodyScroll, unblockBodyScroll, removeClass, uuid, setAttribute, find, getAttribute } from '@primeuix/utils';
import { PrimeTemplate, SharedModule } from 'primeng/api';
import { BaseComponent } from 'primeng/basecomponent';
import { FocusTrap } from 'primeng/focustrap';
import { TimesIcon, ChevronRightIcon, ChevronLeftIcon, ChevronUpIcon, ChevronDownIcon, WindowMaximizeIcon, WindowMinimizeIcon } from 'primeng/icons';
import { Ripple } from 'primeng/ripple';
import { ZIndexUtils } from 'primeng/utils';
import { BaseStyle } from 'primeng/base';
const theme = ({ dt }) => `
.p-galleria {
overflow: hidden;
border-style: solid;
border-width: ${dt('galleria.border.width')};
border-color: ${dt('galleria.border.color')};
border-radius: ${dt('galleria.border.radius')};
}
.p-galleria-content {
display: flex;
flex-direction: column;
}
.p-galleria-items-container {
display: flex;
flex-direction: column;
position: relative;
}
.p-galleria-items {
position: relative;
display: flex;
height: 100%;
}
.p-galleria-nav-button {
position: absolute;
top: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
overflow: hidden;
background: ${dt('galleria.nav.button.background')};
color: ${dt('galleria.nav.button.color')};
width: ${dt('galleria.nav.button.size')};
height: ${dt('galleria.nav.button.size')};
transition: background ${dt('galleria.transition.duration')}, color ${dt('galleria.transition.duration')}, outline-color ${dt('galleria.transition.duration')}, box-shadow ${dt('galleria.transition.duration')};
margin: calc(-1 * calc(${dt('galleria.nav.button.size')}) / 2) ${dt('galleria.nav.button.gutter')} 0 ${dt('galleria.nav.button.gutter')};
padding: 0;
user-select: none;
border: 0 none;
cursor: pointer;
outline-color: transparent;
}
.p-galleria-nav-button:not(.p-disabled):hover {
background: ${dt('galleria.nav.button.hover.background')};
color: ${dt('galleria.nav.button.hover.color')};
}
.p-galleria-nav-button:not(.p-disabled):focus-visible {
box-shadow: ${dt('galleria.nav.button.focus.ring.shadow')};
outline: ${dt('galleria.nav.button.focus.ring.width')} ${dt('galleria.nav.button.focus.ring.style')} ${dt('galleria.nav.button.focus.ring.color')};
outline-offset: ${dt('galleria.nav.button.focus.ring.offset')};
}
.p-galleria-next-icon,
.p-galleria-prev-icon {
font-size: ${dt('galleria.nav.icon.size')};
width: ${dt('galleria.nav.icon.size')};
height: ${dt('galleria.nav.icon.size')};
}
.p-galleria-prev-button {
border-radius: ${dt('galleria.nav.button.prev.border.radius')};
left: 0;
}
.p-galleria-next-button {
border-radius: ${dt('galleria.nav.button.next.border.radius')};
right: 0;
}
.p-galleria-prev-button:dir(rtl) {
left: auto;
right: 0;
transform: rotate(180deg);
}
.p-galleria-next-button:dir(rtl) {
right: auto;
left: 0;
transform: rotate(180deg);
}
.p-galleria-item {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
}
.p-galleria-hover-navigators .p-galleria-nav-button {
pointer-events: none;
opacity: 0;
transition: opacity ${dt('galleria.transition.duration')} ease-in-out;
}
.p-galleria-hover-navigators .p-galleria-items-container:hover .p-galleria-nav-button {
pointer-events: all;
opacity: 1;
}
.p-galleria-hover-navigators .p-galleria-items-container:hover .p-galleria-nav-button.p-disabled {
pointer-events: none;
}
.p-galleria-caption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: ${dt('galleria.caption.background')};
color: ${dt('galleria.caption.color')};
padding: ${dt('galleria.caption.padding')};
}
.p-galleria-thumbnails {
display: flex;
flex-direction: column;
overflow: auto;
flex-shrink: 0;
}
.p-galleria-thumbnail-nav-button {
align-self: center;
flex: 0 0 auto;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
margin: 0 ${dt('galleria.thumbnail.nav.button.gutter')};
padding: 0;
border: none;
user-select: none;
cursor: pointer;
background: transparent;
color: ${dt('galleria.thumbnail.nav.button.color')};
width: ${dt('galleria.thumbnail.nav.button.size')};
height: ${dt('galleria.thumbnail.nav.button.size')};
transition: background ${dt('galleria.transition.duration')}, color ${dt('galleria.transition.duration')}, outline-color ${dt('galleria.transition.duration')};
outline-color: transparent;
border-radius: ${dt('galleria.thumbnail.nav.button.border.radius')};
}
.p-galleria-thumbnail-nav-button:hover {
background: ${dt('galleria.thumbnail.nav.button.hover.background')};
color: ${dt('galleria.thumbnail.nav.button.hover.color')};
}
.p-galleria-thumbnail-nav-button:focus-visible {
box-shadow: ${dt('galleria.thumbnail.nav.button.focus.ring.shadow')};
outline: ${dt('galleria.thumbnail.nav.button.focus.ring.width')} ${dt('galleria.thumbnail.nav.button.focus.ring.style')} ${dt('galleria.thumbnail.nav.button.focus.ring.color')};
outline-offset: ${dt('galleria.thumbnail.nav.button.focus.ring.offset')};
}
.p-galleria-thumbnail-nav-button .p-galleria-thumbnail-next-icon,
.p-galleria-thumbnail-nav-button .p-galleria-thumbnail-prev-icon {
font-size: ${dt('galleria.thumbnail.nav.button.icon.size')};
width: ${dt('galleria.thumbnail.nav.button.icon.size')};
height: ${dt('galleria.thumbnail.nav.button.icon.size')};
}
.p-galleria-thumbnails-content {
display: flex;
flex-direction: row;
background: ${dt('galleria.thumbnails.content.background')};
padding: ${dt('galleria.thumbnails.content.padding')};
}
.p-galleria-thumbnails-viewport {
overflow: hidden;
width: 100%;
}
.p-galleria:not(.p-galleria-thumbnails-right):not(.p-galleria-thumbnails-left) .p-galleria-thumbnail-prev-button:dir(rtl),
.p-galleria:not(.p-galleria-thumbnails-right):not(.p-galleria-thumbnails-left) .p-galleria-thumbnail-next-button:dir(rtl) {
transform: rotate(180deg);
}
.p-galleria-thumbnail-items {
display: flex;
}
.p-galleria-thumbnail-item {
overflow: auto;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0.5;
}
.p-galleria-thumbnail {
outline-color: transparent;
}
.p-galleria-thumbnail-item:hover {
opacity: 1;
transition: opacity 0.3s;
}
.p-galleria-thumbnail-item-current {
opacity: 1;
}
.p-galleria-thumbnails-left .p-galleria-content,
.p-galleria-thumbnails-right .p-galleria-content {
flex-direction: row;
}
.p-galleria-thumbnails-left .p-galleria-items-container,
.p-galleria-thumbnails-right .p-galleria-items-container {
flex-direction: row;
}
.p-galleria-thumbnails-left .p-galleria-items-container,
.p-galleria-thumbnails-top .p-galleria-items-container {
order: 2;
}
.p-galleria-thumbnails-left .p-galleria-thumbnails,
.p-galleria-thumbnails-top .p-galleria-thumbnails {
order: 1;
}
.p-galleria-thumbnails-left .p-galleria-thumbnails-content,
.p-galleria-thumbnails-right .p-galleria-thumbnails-content {
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-indicator-list {
display: flex;
align-items: center;
justify-content: center;
padding: ${dt('galleria.indicator.list.padding')};
gap: ${dt('galleria.indicator.list.gap')};
margin: 0;
list-style: none;
}
.p-galleria-indicator-button {
display: inline-flex;
align-items: center;
background: ${dt('galleria.indicator.button.background')};
width: ${dt('galleria.indicator.button.width')};
height: ${dt('galleria.indicator.button.height')};
transition: background ${dt('galleria.transition.duration')}, color ${dt('galleria.transition.duration')}, outline-color ${dt('galleria.transition.duration')}, box-shadow ${dt('galleria.transition.duration')};
outline-color: transparent;
border-radius: ${dt('galleria.indicator.button.border.radius')};
margin: 0;
padding: 0;
border: none;
user-select: none;
cursor: pointer;
}
.p-galleria-indicator-button:hover {
background: ${dt('galleria.indicator.button.hover.background')};
}
.p-galleria-indicator-button:focus-visible {
box-shadow: ${dt('galleria.indicator.button.focus.ring.shadow')};
outline: ${dt('galleria.indicator.button.focus.ring.width')} ${dt('galleria.indicator.button.focus.ring.style')} ${dt('galleria.indicator.button.focus.ring.color')};
outline-offset: ${dt('galleria.indicator.button.focus.ring.offset')};
}
.p-galleria-indicator-active .p-galleria-indicator-button {
background: ${dt('galleria.indicator.button.active.background')};
}
.p-galleria-indicators-left .p-galleria-items-container,
.p-galleria-indicators-right .p-galleria-items-container {
flex-direction: row;
align-items: center;
}
.p-galleria-indicators-left .p-galleria-items,
.p-galleria-indicators-top .p-galleria-items {
order: 2;
}
.p-galleria-indicators-left .p-galleria-indicator-list,
.p-galleria-indicators-top .p-galleria-indicator-list {
order: 1;
}
.p-galleria-indicators-left .p-galleria-indicator-list,
.p-galleria-indicators-right .p-galleria-indicator-list {
flex-direction: column;
}
.p-galleria-inset-indicators .p-galleria-indicator-list {
position: absolute;
display: flex;
z-index: 1;
background: ${dt('galleria.inset.indicator.list.background')};
}
.p-galleria-inset-indicators .p-galleria-indicator-button {
background: ${dt('galleria.inset.indicator.button.background')};
}
.p-galleria-inset-indicators .p-galleria-indicator-button:hover {
background: ${dt('galleria.inset.indicator.button.hover.background')};
}
.p-galleria-inset-indicators .p-galleria-indicator-active .p-galleria-indicator-button {
background: ${dt('galleria.inset.indicator.button.active.background')};
}
.p-galleria-inset-indicators.p-galleria-indicators-top .p-galleria-indicator-list {
top: 0;
left: 0;
width: 100%;
align-items: flex-start;
}
.p-galleria-inset-indicators.p-galleria-indicators-right .p-galleria-indicator-list {
right: 0;
top: 0;
height: 100%;
align-items: flex-end;
}
.p-galleria-inset-indicators.p-galleria-indicators-bottom .p-galleria-indicator-list {
bottom: 0;
left: 0;
width: 100%;
align-items: flex-end;
}
.p-galleria-inset-indicators.p-galleria-indicators-left .p-galleria-indicator-list {
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;
}
.p-galleria-close-button {
position: absolute;
top: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
margin: ${dt('galleria.close.button.gutter')};
background: ${dt('galleria.close.button.background')};
color: ${dt('galleria.close.button.color')};
width: ${dt('galleria.close.button.size')};
height: ${dt('galleria.close.button.size')};
padding: 0;
border: none;
user-select: none;
cursor: pointer;
border-radius: ${dt('galleria.close.button.border.radius')};
outline-color: transparent;
transition: background ${dt('galleria.transition.duration')}, color ${dt('galleria.transition.duration')}, outline-color ${dt('galleria.transition.duration')};
}
.p-galleria-close-icon {
font-size: ${dt('galleria.close.button.icon.size')};
width: ${dt('galleria.close.button.icon.size')};
height: ${dt('galleria.close.button.icon.size')};
}
.p-galleria-close-button:hover {
background: ${dt('galleria.close.button.hover.background')};
color: ${dt('galleria.close.button.hover.color')};
}
.p-galleria-close-button:focus-visible {
box-shadow: ${dt('galleria.close.button.focus.ring.shadow')};
outline: ${dt('galleria.close.button.focus.ring.width')} ${dt('galleria.close.button.focus.ring.style')} ${dt('galleria.close.button.focus.ring.color')};
outline-offset: ${dt('galleria.close.button.focus.ring.offset')};
}
.p-galleria-mask .p-galleria-nav-button {
position: fixed;
top: 50%;
}
.p-galleria-enter-active {
transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
}
.p-galleria-leave-active {
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.p-galleria-enter-from,
.p-galleria-leave-to {
opacity: 0;
transform: scale(0.7);
}
.p-galleria-enter-active .p-galleria-nav-button {
opacity: 0;
}
.p-items-hidden .p-galleria-thumbnail-item {
visibility: hidden;
}
.p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active {
visibility: visible;
}
`;
const classes = {
mask: 'p-galleria-mask p-overlay-mask p-overlay-mask-enter',
root: ({ instance }) => {
const thumbnailsPosClass = instance.$attrs.showThumbnails && instance.getPositionClass('p-galleria-thumbnails', instance.$attrs.thumbnailsPosition);
const indicatorPosClass = instance.$attrs.showIndicators && instance.getPositionClass('p-galleria-indicators', instance.$attrs.indicatorsPosition);
return [
'p-galleria p-component',
{
'p-galleria-fullscreen': instance.$attrs.fullScreen,
'p-galleria-inset-indicators': instance.$attrs.showIndicatorsOnItem,
'p-galleria-hover-navigators': instance.$attrs.showItemNavigatorsOnHover && !instance.$attrs.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';
theme = theme;
classes = classes;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: GalleriaStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: GalleriaStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.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 = {}));
/**
* Galleria is an advanced content gallery component.
* @group Components
*/
class Galleria extends BaseComponent {
platformId;
element;
cd;
/**
* 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;
_visible = false;
_activeIndex = 0;
headerTemplate;
headerFacet;
footerTemplate;
footerFacet;
indicatorTemplate;
indicatorFacet;
captionTemplate;
captionFacet;
_closeIconTemplate;
closeIconTemplate;
_previousThumbnailIconTemplate;
previousThumbnailIconTemplate;
_nextThumbnailIconTemplate;
nextThumbnailIconTemplate;
_itemPreviousIconTemplate;
itemPreviousIconTemplate;
_itemNextIconTemplate;
itemNextIconTemplate;
_itemTemplate;
itemTemplate;
_thumbnailTemplate;
thumbnailTemplate;
maskVisible = false;
numVisibleLimit = 0;
_componentStyle = inject(GalleriaStyle);
constructor(platformId, element, cd) {
super();
this.platformId = platformId;
this.element = element;
this.cd = cd;
}
templates;
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;
case 'item':
this.itemTemplate = item.template;
break;
case 'thumbnail':
this.thumbnailTemplate = item.template;
break;
}
});
}
ngOnChanges(simpleChanges) {
super.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(() => {
focus(findSingle(this.container.nativeElement, '[data-pc-section="closebutton"]'));
}, 25);
break;
case 'void':
addClass(this.mask?.nativeElement, 'p-overlay-mask-leave');
break;
}
}
onAnimationEnd(event) {
switch (event.toState) {
case 'void':
this.disableModality();
break;
}
}
enableModality() {
blockBodyScroll();
this.cd.markForCheck();
if (this.mask) {
ZIndexUtils.set('modal', this.mask.nativeElement, this.baseZIndex || this.config.zIndex.modal);
}
}
disableModality() {
unblockBodyScroll();
this.maskVisible = false;
this.cd.markForCheck();
if (this.mask) {
ZIndexUtils.clear(this.mask.nativeElement);
}
}
ngOnDestroy() {
if (this.fullScreen) {
removeClass(this.document.body, 'p-overflow-hidden');
}
if (this.mask) {
this.disableModality();
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: Galleria, deps: [{ token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.5", type: Galleria, isStandalone: false, 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" }, providers: [GalleriaStyle], 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: "mask", first: true, predicate: ["mask"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
<div *ngIf="fullScreen; else windowed" #container>
<div *ngIf="maskVisible" #mask [ngClass]="{ 'p-galleria-mask p-overlay-mask p-overlay-mask-enter': true }" [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, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.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: "19.2.5", ngImport: i0, type: Galleria, decorators: [{
type: Component,
args: [{
selector: 'p-galleria',
standalone: false,
template: `
<div *ngIf="fullScreen; else windowed" #container>
<div *ngIf="maskVisible" #mask [ngClass]="{ 'p-galleria-mask p-overlay-mask p-overlay-mask-enter': true }" [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,
providers: [GalleriaStyle]
}]
}], ctorParameters: () => [{ type: undefined, decorators: [{
type: Inject,
args: [PLATFORM_ID]
}] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], 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']
}], 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;
cd;
differs;
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, elementRef) {
super();
this.galleria = galleria;
this.cd = cd;
this.differs = differs;
this.elementRef = elementRef;
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.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();
}
}
}
shouldRenderFooter() {
return (this.galleria.footerFacet && this.galleria.templates.toArray().length > 0) || this.galleria.footerTemplate;
}
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: "19.2.5", ngImport: i0, type: GalleriaContent, deps: [{ token: Galleria }, { token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.5", type: GalleriaContent, isStandalone: false, 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 }], usesInheritance: 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-inset-indicators': this.galleria.showIndicatorsOnItem,
'p-galleria-hover-navigators': 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-button" (click)="maskHide.emit()" [attr.aria-label]="closeAriaLabel()" [attr.data-pc-section]="'closebutton'">
<TimesIcon *ngIf="!galleria.closeIconTemplate && !galleria._closeIconTemplate" [styleClass]="'p-galleria-close-icon'" />
<ng-template *ngTemplateOutlet="galleria.closeIconTemplate || galleria._closeIconTemplate"></ng-template>
</button>
<div *ngIf="galleria.templates && (galleria.headerFacet || galleria.headerTemplate)" 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="shouldRenderFooter()" class="p-galleria-footer">
<p-galleriaItemSlot type="footer" [templates]="galleria.templates"></p-galleriaItemSlot>
</div>
</div>
`, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(() => TimesIcon), selector: "TimesIcon" }, { kind: "directive", type: i0.forwardRef(() => 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: "19.2.5", ngImport: i0, type: GalleriaContent, decorators: [{
type: Component,
args: [{
selector: 'p-galleriaContent',
standalone: false,
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-inset-indicators': this.galleria.showIndicatorsOnItem,
'p-galleria-hover-navigators': 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-button" (click)="maskHide.emit()" [attr.aria-label]="closeAriaLabel()" [attr.data-pc-section]="'closebutton'">
<TimesIcon *ngIf="!galleria.closeIconTemplate && !galleria._closeIconTemplate" [styleClass]="'p-galleria-close-icon'" />
<ng-template *ngTemplateOutlet="galleria.closeIconTemplate || galleria._closeIconTemplate"></ng-template>
</button>
<div *ngIf="galleria.templates && (galleria.headerFacet || galleria.headerTemplate)" 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="shouldRenderFooter()" 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: 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']]
}] } });
class GalleriaItemSlot {
templates;
index;
get item() {
return this._item;
}
shouldRender() {
return (this.contentTemplate ||
this.galleria._itemTemplate ||
this.galleria.itemTemplate ||
this.galleria.captionTemplate ||
this.galleria.captionTemplate ||
this.galleria.captionFacet ||
this.galleria.thumbnailTemplate ||
this.galleria._thumbnailTemplate ||
this.galleria.footerTemplate);
}
galleria = inject(Galleria);
set item(item) {
this._item = item;
if (this.templates && this.templates?.toArray().length > 0) {
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 'footer':
this.context = { $implicit: this.item };
this.contentTemplate = item.template;
break;
}
}
});
}
else {
this.getContentTemplate();
}
}
getContentTemplate() {
switch (this.type) {
case 'item':
this.context = { $implicit: this.item };
this.contentTemplate = this.galleria._itemTemplate || this.galleria.itemTemplate;
break;
case 'caption':
this.context = { $implicit: this.item };
this.contentTemplate = this.galleria.captionTemplate || this.galleria.captionFacet;
break;
case 'thumbnail':
this.context = { $implicit: this.item };
this.contentTemplate = this.galleria.thumbnailTemplate || this.galleria._thumbnailTemplate;
break;
case 'indicator':
this.context = { $implicit: this.index };
this.contentTemplate = this.galleria.indicatorTemplate || this.galleria.indicatorFacet;
break;
case 'footer':
this.context = { $implicit: this.item };
this.contentTemplate = this.galleria.footerTemplate || this.galleria.footerFacet;
break;
default:
this.context = { $implicit: this.item };
this.contentTemplate = this.galleria._itemTemplate || this.galleria.itemTemplate;
}
}
type;
contentTemplate;
context;
_item;
ngAfterContentInit() {
if (this.templates && this.templates.toArray().length > 0) {
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;
case 'footer':
this.context = { $implicit: this.item };
this.contentTemplate = item.template;
break;
default:
this.context = { $implicit: this.item };
this.contentTemplate = item.template;
break;
}
}
});
}
else {
this.getContentTemplate();
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: GalleriaItemSlot, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.5", type: GalleriaItemSlot, isStandalone: false, selector: "p-galleriaItemSlot", inputs: { templates: "templates", index: ["index", "index", numberAttribute], item: "item", type: "type" }, ngImport: i0, template: `
<ng-container *ngIf="shouldRender()">
<ng-container *ngTemplateOutlet="contentTemplate; context: context"></ng-container>
</ng-container>
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: GalleriaItemSlot, decorators: [{
type: Component,
args: [{
selector: 'p-galleriaItemSlot',
standalone: false,
template: `
<ng-container *ngIf="shouldRender()">
<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
}] } });
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.translation.aria.slide : undefined;
}
ariaSlideNumber(value) {
return this.galleria.config.translation.aria ? this.galleria.config.translation.aria.slideNumber.replace(/{slideNumber}/g, value) : undefined;
}
ariaPageLabel(value) {
return this.galleria.config.translation.aria ? this.galleria.config.translation.aria.pageLabel.replace(/{page}/g, value) : undefined;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: GalleriaItem, deps: [{ token: Galleria }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.5", type: GalleriaItem, isStandalone: false, selector: "p-galleriaItem", inputs: { id: "id", circular: ["circular", "circular", booleanAttribute], value: "value", showItemNavigators: ["showItemNavigators", "showItemNavigators", booleanAttribute], showIndicators: ["showIndicators", "showIndicators", booleanAttribute], slideShowActive: ["slideShowActive", "slideShowActive", booleanAttribute], changeItemOnIndicatorHover: ["changeItemOnIndicatorHover", "changeItemOnIndicatorHover", booleanAttribute], autoPlay: ["autoPlay", "autoPlay", booleanAttribute], templates: "templates", indicatorFacet: "indicatorFacet", captionFacet: "captionFacet", activeIndex: "activeIndex" }, outputs: { startSlideShow: "startSlideShow", stopSlideShow: "stopSlideShow", onActiveIndexChange: "onActiveIndexChange" }, host: { classAttribute: "p-galleria-items-container" }, usesOnChanges: true, ngImport: i0, template: `
<div class="p-galleria-items">
<button
*ngIf="showItemNavigators"
type="button"
role="navigation"
[ngClass]="{ 'p-galleria-prev-button p-galleria-nav-button': true, 'p-disabled': this.isNavBackwardDisabled() }"
(click)="navBackward($event)"
[disabled]="isNavBackwardDisabled()"
(focus)="onButtonFocus('left')"
(blur)="onButtonBlur('left')"
>
<ChevronLeftIcon *ngIf="!galleria.itemPreviousIconTemplate && !galleria._itemPreviousIconTemplate" [styleClass]="'p-galleria-prev-icon'" />
<ng-template *ngTemplateOutlet="galleria.itemPreviousIconTemplate || galleria._itemPreviousIconTemplate"></ng-template>
</button>
<div [id]="id + '_item_' + activeIndex" role="group" class="p-galleria-item" [attr.aria-label]="ariaSlideNumber(activeIndex + 1)" [attr.aria-roledescription]="ariaSlideLabel()">
<p-galleriaItemSlot type="item" [item]="activeItem" [templates]="templates" class="p-galleria-item"></p-galleriaItemSlot>
</div>
<button
*ngIf="showItemNavigators"
type="button"
[ngClass]="{ 'p-galleria-next-button p-galleria-nav-button': true, 'p-disabled': this.isNavForwardDisabled() }"
(click)="navForward($event)"
[disabled]="isNavForwardDisabled()"
role="navigation"
(focus)="onButtonFocus('right')"
(blur)="onButtonBlur('right')"
>
<ChevronRightIcon *ngIf="!galleria.itemNextIconTemplate && !galleria._itemNextIconTemplate" [styleClass]="'p-galleria-next-icon'" />
<ng-template *ngTemplateOutlet="galleria.itemNextIconTemplate || galleria._itemNextIconTemplate"></ng-template>
</button>
<div class="p-galleria-caption" *ngIf="captionFacet || galleria.captionTemplate">
<p-galleriaItemSlot type="caption" [item]="activeItem" [templates]="templates"></p-galleriaItemSlot>
</div>
</div>
<ul *ngIf="showIndicators" class="p-galleria-indicator-list">
<li
*ngFor="let item of value; let index = index"
tabindex="0"
(click)="onIndicatorClick(index)"
(mouseenter)="onIndicatorMouseEnter(index)"
(keydown)="onIndicatorKeyDown($event, index)"
[ngClass]="{ 'p-galleria-indicator': true, 'p-galleria-indicator-active': isIndicatorItemActive(index) }"
[attr.aria-label]="ariaPageLabel(index + 1)"
[attr.aria-selected]="activeIndex === index"
[attr.aria-controls]="id + '_item_' + index"
>
<button type="button" tabIndex="-1" class="p-galleria-indicator-button" *ngIf="!indicatorFacet && !galleria.indicatorTemplate"></button>
<p-galleriaItemSlot type="indicator" [index]="index" [templates]="templates"></p-galleriaItemSlot>
</li>
</ul>
`, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(() => ChevronRightIcon), selector: "ChevronRightIcon" }, { kind: "component", type: i0.forwardRef(() => ChevronLeftIcon), selector: "ChevronLeftIcon" }, { kind: "component", type: i0.forwardRef(() => GalleriaItemSlot), selector: "p-galleriaItemSlot", inputs: ["templates", "index", "item", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: GalleriaItem, decorators: [{
type: Component,
args: [{
selector: 'p-galleriaItem',
standalone: false,
template: `
<div class="p-galleria-items">
<button
*ngIf="showItemNavigators"
type="button"
role="navigation"
[ngClass]="{ 'p-galleria-prev-button p-galleria-nav-button': true, 'p-disabled': this.isNavBackwardDisabled() }"
(click)="navBackward($event)"
[disabled]="isNavBackwardDisabled()"
(focus)="onButtonFocus('left')"
(blur)="onButtonBlur('left')"
>
<ChevronLeftIcon *ngIf="!galleria.itemPreviousIconTemplate && !galleria._itemPreviousIconTemplate" [styleClass]="'p-galleria-prev-icon'" />
<ng-template *ngTemplateOutlet="galleria.itemPreviousIconTemplate || galleria._itemPreviousIconTemplate"></ng-template>
</button>
<div [id]="id + '_item_' + activeIndex" role="group" class="p-galleria-item" [attr.aria-label]="ariaSlideNumber(activeIndex + 1)" [attr.aria-roledescription]="ariaSlideLabel()">
<p-galleriaItemSlot type="item" [item]="activeItem" [templates]="templates" class="p-galleria-item"></p-galleriaItemSlot>
</div>
<button
*ngIf="showItemNavigators"
type="button"
[ngClass]="{ 'p-galleria-next-button p-galleria-nav-button': true, 'p-disabled': this.isNavForwardDisabled() }"
(click)="navForward($event)"
[disabled]="isNavForwardDisabled()"
role="navigation"
(focus)="onButtonFocus('right')"
(blur)="onButtonBlur('right')"
>
<ChevronRightIcon *ngIf="!galleria.itemNextIconTemplate && !galleria._itemNextIconTemplate" [styleClass]="'p-galleria-next-icon'" />
<ng-template *ngTemplateOutlet="galleria.itemNextIconTemplate || galleria._itemNextIconTemplate"></ng-template>
</button>
<div class="p-galleria-caption" *ngIf="captionFacet || galleria.captionTemplate">
<p-galleriaItemSlot type="caption" [item]="activeItem" [templates]="templates"></p-galleriaItemSlot>
</div>
</div>
<ul *ngIf="showIndicators" class="p-galleria-indicator-list">
<li
*ngFor="let item of value; let index = index"
tabindex="0"
(click)="onIndicatorClick(index)"
(mouseenter)="onIndicatorMouseEnter(index)"
(keydown)="onIndicatorKeyDown($event, index)"
[ngClass]="{ 'p-galleria-indicator': true, 'p-galleria-indicator-active': isIndicatorItemActive(index) }"
[attr.aria-label]="ariaPageLabel(index + 1)"
[attr.aria-selected]="activeIndex === index"
[attr.aria-controls]="id + '_item_' + index"
>
<button type="button" tabIndex="-1" class="p-galleria-indicator-button" *ngIf="!indicatorFacet && !galleria.indicatorTemplate"></button>
<p-galleriaItemSlot type="indicator" [index]="index" [templates]="templates"></p-galleriaItemSlot>
</li>
</ul>
`,
host: {
class: 'p-galleria-items-container'
},
changeDetection: ChangeDetectionStrategy.OnPush
}]
}], ctorParameters: () => [{ type: Galleria }], propDecorators: { id: [{
type: Input
}], circular: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], value: [{
type: Input
}], showItemNavigators: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], showIndicators: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], slideShowActive: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], changeItemOnIndicatorHover: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], autoPlay: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], templates: [{
type: Input
}], indicatorFacet: [{
type: Input
}], captionFacet: [{
type: Input
}], startSlideShow: [{
type: Output
}], stopSlideShow: [{
type: Output
}], onActiveIndexChange: [{
type: Output
}], activeIndex: [{
type: Input
}] } });
class GalleriaThumbnails {
galleria;
document;
platformId;
renderer;
cd;
containerId;
value;
isVertical = false;
slideShowActive = false;
circular = false;
responsiveOptions;
contentHeight = '300px';
showThumbnailNavigators = true;
templates;
onActiveIndexChange = new EventEmitter();
stopSlideShow = new EventEmitter();
itemsContainer;
get numVisible() {
return this._numVisible;
}
set numVisible(numVisible) {
this._numVisible = numVisible;
this._oldNumVisible = this.d_numVisible;
this.d_numVisible = numVisible;
}
get activeIndex() {
return this._activeIndex;
}
set activeIndex(activeIndex) {
this._oldactiveIndex = this._activeIndex;
this._activeIndex = activeIndex;
}
index;
startPos = null;
thumbnailsStyle = null;
sortedResponsiveOptions = null;
totalShiftedItems = 0;
page = 0;
documentResizeListener;
_numVisible = 0;
d_numVisible = 0;
_oldNumVisible = 0;
_activeIndex = 0;
_oldactiveIndex = 0;
constructor(galleria, document, platformId, renderer, cd) {
this.galleria = galleria;
this.document = document;
this.platformId = platformId;
this.renderer = renderer;
this.cd = cd;
}
ngOnInit() {
if (isPlatformBrowser(this.platformId)) {
this.createStyle();
if (this.responsiveOptions) {
this.bindDocumentListeners();
}
}
}
ngAfterContentChecked() {
let totalShiftedItems = this.totalShiftedItems;
if ((this._oldNumVisible !== this.d_numVisible || this._oldactiveIndex !== this._activeIndex) && this.itemsContainer) {
if (this._activeIndex <= this.getMedianItemIndex()) {
totalShiftedItems = 0;
}
else if (this.value.length - this.d_numVisible + this.getMedianItemIndex() < this._activeIndex) {
totalShiftedItems = this.d_numVisible - this.value.length;
}
else if (this.value.length - this.d_numVisible < this._activeIndex && this.d_numVisible % 2 === 0) {
totalShiftedItems = this._activeIndex * -1 + this.getMedianItemIndex() + 1;
}
else {
totalShiftedItems = this._activeIndex * -1 + this.getMedianItemIndex();
}
if (totalShiftedItems !== this.totalShiftedItems) {
this.totalShiftedItems = totalShiftedItems;
}
if (this.itemsContainer && this.itemsContainer.nativeElement) {
this.itemsContainer.nativeElement.style.transform = this.isVertical ? `translate3d(0, ${totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`;
}
if (this._oldactiveIndex !== this._activeIndex) {
removeClass(this.itemsContainer.nativeElement, 'p-items-hidden');
this.itemsContainer.nativeElement.style.transition = 'transform 500ms ease 0s';
}
this._oldactiveIndex = this._activeIndex;
this._oldNumVisible = this.d_numVisible;
}
}
ngAfterViewInit() {
if (isPlatformBrowser(this.platformId)) {
this.calculatePosition();
}
}
createStyle() {
if (!this.thumbnailsStyle) {
this.thumbnailsStyle = this.document.createElement('style');
this.document.body.appendChild(this.thumbnailsStyle);
}
let innerHTML = `
#${this.containerId} .p-galleria-thumbnail-item {
flex: 1 0 ${100 / this.d_numVisible}%
}
`;
if (this.responsiveOptions) {
this.sortedResponsiveOptions = [...this.responsiveOptions];
this.sortedResponsiveOptions.sort((data1, data2) => {
const value1 = data1.breakpoint;
const value2 = data2.breakpoint;
let result = null;
if (value1 == null && value2 != null)
result = -1;
else if (value1 != null && value2 == null)
result = 1;
else if (value1 == null && value2 == null)
result = 0;
else if (typeof value1 === 'string' && typeof value2 === 'string')
result = value1.localeCompare(value2, undefined, { numeric: true });
else
result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
return -1 * result;
});
for (let i = 0; i < this.sortedResponsiveOptions.length; i++) {
let res = this.sortedResponsiveOptions[i];
innerHTML += `
@media screen and (max-width: ${res.breakpoint}) {
#${this.containerId} .p-galleria-thumbnail-item {
flex: 1 0 ${100 / res.numVisible}%
}
}
`;
}
}
this.thumbnailsStyle.innerHTML = innerHTML;
setAttribute(this.thumbnailsStyle, 'nonce', this.galleria.config?.csp()?.nonce);
}
calculatePosition() {
if (isPlatformBrowser(this.platformId)) {
if (this.itemsContainer && this.sortedResponsiveOptions) {
let windowWidth = window.innerWidth;
let matchedResponsiveData = {
numVisible: this._numVisible
};
for (let i = 0; i < this.sortedResponsiveOptions.length; i++) {
let res = this.sortedResponsiveOptions[i];
if (parseInt(res.breakpoint, 10) >= windowWidth) {
matchedResponsiveData = res;
}
}
if (this.d_numVisible !== matchedResponsiveData.numVisible) {
this.d_numVisible = matchedResponsiveData.numVisible;
this.cd.markForCheck();
}
}
}
}
getTabIndex(index) {
return this.isItemActive(index) ? 0 : null;
}
navForward(e) {
this.stopTheSlideShow();
let nextItemIndex = this._activeIndex + 1;
if (nextItemIndex + this.totalShiftedItems > this.getMedianItemIndex() && (-1 * this.totalShiftedItems < this.getTotalPageNumber() - 1 || this.circular)) {
this.step(-1);
}
let activeIndex = this.circular && this.value.length - 1 === this._activeIndex ? 0 : nextItemIndex;
this.onActiveIndexChange.emit(activeIndex);
if (e.cancelable) {
e.preventDefault();
}
}
navBackward(e) {
this.stopTheSlideShow();
let prevItemIndex = this._activeIndex !== 0 ? this._activeIndex - 1 : 0;
let diff = prevItemIndex + this.totalShiftedItems;
if (this.d_numVisible - diff - 1 > this.getMedianItemIndex() && (-1 * this.totalShiftedItems !== 0 || this.circular)) {
this.step(1);
}
let activeIndex = this.circular && this._activeIndex === 0 ? this.value.length - 1 : prevItemIndex;
this.onActiveIndexChange.emit(activeIndex);
if (e.cancelable) {
e.preventDefault();
}
}
onItemClick(index) {
this.stopTheSlideShow();
let selectedItemIndex = index;
if (selectedItemIndex !== this._activeIndex) {
const diff = selectedItemIndex + this.totalShiftedItems;
let dir = 0;
if (selectedItemIndex < this._activeIndex) {
dir = this.d_numVisible - diff - 1 - this.getMedianItemIndex();
if (dir > 0 && -1 * this.totalShiftedItems !== 0) {
this.step(dir);
}
}
else {
dir = this.getMedianItemIndex() - diff;
if (dir < 0 && -1 * this.totalShiftedItems < this.getTotalPageNumber() - 1) {
this.step(dir);
}
}
this.activeIndex = selectedItemIndex;
this.onActiveIndexChange.emit(this.activeIndex);
}
}
onThumbnailKeydown(event, index) {
if (event.code === 'Enter' || event.code === 'Space') {
this.onItemClick(index);
event.preventDefault();
}
switch (event.code) {
case 'ArrowRight':
this.onRightKey();
break;
case 'ArrowLeft':
this.onLeftKey();
break;
case 'Home':
this.onHomeKey();
event.preventDefault();
break;
case 'End':
this.onEndKey();
event.preventDefault();
break;
case 'ArrowUp':
case 'ArrowDown':
event.preventDefault();
break;
case 'Tab':
this.onTabKey();
break;
default:
break;
}
}
onRightKey() {
const indicators = find(this.itemsContainer.nativeElement, '[data-pc-section="thumbnailitem"]');
const activeIndex = this.findFocusedIndicatorIndex();
this.changedFocusedIndicator(activeIndex, activeIndex + 1 === indicators.length ? indicators.length - 1 : activeIndex + 1);
}
onLeftKey() {
const activeIndex = this.findFocusedIndicatorIndex();
this.changedFocusedIndicator(activeIndex, activeIndex - 1 <= 0 ? 0 : activeIndex - 1);
}
onHomeKey() {
const activeIndex = this.findFocusedIndicatorIndex();
this.changedFocusedIndicator(activeIndex, 0);
}
onEndKey() {
const indicators = find(this.itemsContainer.nativeElement, '[data-pc-section="thumbnailitem"]');
const activeIndex = this.findFocusedIndicatorIndex();
this.changedFocusedIndicator(activeIndex, indicators.length - 1);
}
onTabKey() {
const indicators = [...find(this.itemsContainer.nativeElement, '[data-pc-section="thumbnailitem"]')];
const highlightedIndex = indicators.findIndex((ind) => getAttribute(ind, 'data-p-active') === true);
const activeIndicator = findSingle(this.itemsContainer.nativeElement, '[tabindex="0"]');
const activeIndex = indicators.findIndex((ind) => ind === activeIndicator.parentElement);
indicators[activeIndex].children[0].tabIndex = '-1';
indicators[highlightedIndex].children[0].tabIndex = '0';
}
findFocusedIndicatorIndex() {
const indicators = [...find(this.itemsContainer.nativeElement, '[data-pc-section="thumbnailitem"]')];
const activeIndicator = findSingle(this.itemsContainer.nativeElement, '[data-pc-section="thumbnailitem"] > [tabindex="0"]');
return indicators.findIndex((ind) => ind === activeIndicator.parentElement);
}
changedFocusedIndicator(prevInd, nextInd) {
const indicators = find(this.itemsContainer.nativeElement, '[data-pc-section="thumbnailitem"]');
indicators[prevInd].children[0].tabIndex = '-1';
indicators[nextInd].children[0].tabIndex = '0';
indicators[nextInd].children[0].focus();
}
step(dir) {
let totalShiftedItems = this.totalShiftedItems + dir;
if (dir < 0 && -1 * totalShiftedItems + this.d_numVisible > this.value.length - 1) {
totalShiftedItems = this.d_numVisible - this.value.length;
}
else if (dir > 0 && totalShiftedItems > 0) {
totalShiftedItems = 0;
}
if (this.circular) {
if (dir < 0 && this.value.length - 1 === this._activeIndex) {
totalShiftedItems = 0;
}
else if (dir > 0 && this._activeIndex === 0) {
totalShiftedItems = this.d_numVisible - this.value.length;
}
}
if (this.itemsContainer) {
removeClass(this.itemsContainer.nativeElement, 'p-items-hidden');
this.itemsContainer.nativeElement.style.transform = this.isVertical ? `translate3d(0, ${totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`;
this.itemsContainer.nativeElement.style.transition = 'transform 500ms ease 0s';
}
this.totalShiftedItems = totalShiftedItems;
}
stopTheSlideShow() {
if (this.slideShowActive && this.stopSlideShow) {
this.stopSlideShow.emit();
}
}
changePageOnTouch(e, diff) {
if (diff < 0) {
// left
this.navForward(e);
}
else {
// right
this.navBackward(e);
}
}
getTotalPageNumber() {
return this.value.length > this.d_numVisible ? this.value.length - this.d_numVisible + 1 : 0;
}
getMedianItemIndex() {
let index = Math.floor(this.d_numVisible / 2);
return this.d_numVisible % 2 ? index : index - 1;
}
onTransitionEnd() {
if (this.itemsContainer && this.itemsContainer.nativeElement) {
addClass(this.itemsContainer.nativeElement, 'p-items-hidden');
this.itemsContainer.nativeElement.style.transition = '';
}
}
onTouchEnd(e) {
let touchobj = e.changedTouches[0];
if (this.isVertical) {
this.changePageOnTouch(e, touchobj.pageY - this.startPos.y);
}
else {
this.changePageOnTouch(e, touchobj.pageX - this.startPos.x);
}
}
onTouchMove(e) {
if (e.cancelable) {
e.preventDefault();
}
}
onTouchStart(e) {
let touchobj = e.changedTouches[0];
this.startPos = {
x: touchobj.pageX,
y: touchobj.pageY
};
}
isNavBackwardDisabled() {
return (!this.circular && this._activeIndex === 0) || this.value.length <= this.d_numVisible;
}
isNavForwardDisabled() {
return (!this.circular && this._activeIndex === this.value.length - 1) || this.value.length <= this.d_numVisible;
}
firstItemAciveIndex() {
return this.totalShiftedItems * -1;
}
lastItemActiveIndex() {
return this.firstItemAciveIndex() + this.d_numVisible - 1;
}
isItemActive(index) {
return this.firstItemAciveIndex() <= index && this.lastItemActiveIndex() >= index;
}
bindDocumentListeners() {
if (isPlatformBrowser(this.platformId)) {
const window = this.document.defaultView || 'window';
this.documentResizeListener = this.renderer.listen(window, 'resize', () => {
this.calculatePosition();
});
}
}
unbindDocumentListeners() {
if (this.documentResizeListener) {
this.documentResizeListener();
this.documentResizeListener = null;
}
}
ngOnDestroy() {
if (this.responsiveOptions) {
this.unbindDocumentListeners();
}
if (this.thumbnailsStyle) {
this.thumbnailsStyle.parentNode?.removeChild(this.thumbnailsStyle);
}
}
ariaPrevButtonLabel() {
return this.galleria.config.translation.aria ? this.galleria.config.translation.aria.prevPageLabel : undefined;
}
ariaNextButtonLabel() {
return this.galleria.config.translation.aria ? this.galleria.config.translation.aria.nextPageLabel : undefined;
}
ariaPageLabel(value) {
return this.galleria.config.translation.aria ? this.galleria.config.translation.aria.pageLabel.replace(/{page}/g, value) : undefined;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: GalleriaThumbnails, deps: [{ token: Galleria }, { token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.5", type: GalleriaThumbnails, isStandalone: false, selector: "p-galleriaThumbnails", inputs: { containerId: "containerId", value: "value", isVertical: ["isVertical", "isVertical", booleanAttribute], slideShowActive: ["slideShowActive", "slideShowActive", booleanAttribute], circular: ["circular", "circular", booleanAttribute], responsiveOptions: "responsiveOptions", contentHeight: "contentHeight", showThumbnailNavigators: "showThumbnailNavigators", templates: "templates", numVisible: "numVisible", activeIndex: "activeIndex" }, outputs: { onActiveIndexChange: "onActiveIndexChange", stopSlideShow: "stopSlideShow" }, viewQueries: [{ propertyName: "itemsContainer", first: true, predicate: ["itemsContainer"], descendants: true }], ngImport: i0, template: `
<div class="p-galleria-thumbnails">
<div class="p-galleria-thumbnails-content">
<button
*ngIf="showThumbnailNavigators"
type="button"
[ngClass]="{
'p-galleria-thumbnail-prev-button p-galleria-thumbnail-nav-button': true,
'p-disabled': this.isNavBackwardDisabled()
}"
(click)="navBackward($event)"
[disabled]="isNavBackwardDisabled()"
pRipple
[attr.aria-label]="ariaPrevButtonLabel()"
>
<ng-container *ngIf="!galleria.previousThumbnailIconTemplate && !galleria._previousThumbnailIconTemplate">
<ChevronLeftIcon *ngIf="!isVertical" [styleClass]="'p-galleria-thumbnail-prev-icon'" />
<ChevronUpIcon *ngIf="isVertical" [styleClass]="'p-galleria-thumbnail-prev-icon'" />
</ng-container>
<ng-template *ngTemplateOutlet="galleria.previousThumbnailIconTemplate || galleria._previousThumbnailIconTemplate"></ng-template>
</button>
<div class="p-galleria-thumbnails-viewport" [ngStyle]="{ height: isVertical ? contentHeight : '' }">
<div #itemsContainer class="p-galleria-thumbnail-items" (transitionend)="onTransitionEnd()" (touchstart)="onTouchStart($event)" (touchmove)="onTouchMove($event)" role="tablist">
<div
*ngFor="let item of value; let index = index"
[ngClass]="{
'p-galleria-thumbnail-item': true,
'p-galleria-thumbnail-item-current': activeIndex === index,
'p-galleria-thumbnail-item-active': isItemActive(index),
'p-galleria-thumbnail-item-start': firstItemAciveIndex() === index,
'p-galleria-thumbnail-item-end': lastItemActiveIndex() === index
}"
[attr.aria-selected]="activeIndex === index"
[attr.aria-controls]="containerId + '_item_' + index"
[attr.data-pc-section]="'thumbnailitem'"
[attr.data-p-active]="activeIndex === index"
(keydown)="onThumbnailKeydown($event, index)"
>
<div
class="p-galleria-thumbnail"
[attr.tabindex]="activeIndex === index ? 0 : -1"
[attr.aria-current]="activeIndex === index ? 'page' : undefined"
[attr.aria-label]="ariaPageLabel(index + 1)"
(click)="onItemClick(index)"
(touchend)="onItemClick(index)"
(keydown.enter)="onItemClick(index)"
>
<p-galleriaItemSlot type="thumbnail" [item]="item" [templates]="templates"></p-galleriaItemSlot>
</div>
</div>
</div>
</div>
<button
*ngIf="showThumbnailNavigators"
type="button"
[ngClass]="{
'p-galleria-thumbnail-next-button p-galleria-thumbnail-nav-button': true,
'p-disabled': this.isNavForwardDisabled()
}"
(click)="navForward($event)"
[disabled]="isNavForwardDisabled()"
pRipple
[attr.aria-label]="ariaNextButtonLabel()"
>
<ng-container *ngIf="!galleria.nextThumbnailIconTemplate && !galleria._nextThumbnailIconTemplate">
<ChevronRightIcon *ngIf="!isVertical" [ngClass]="'p-galleria-thumbnail-next-icon'" />
<ChevronDownIcon *ngIf="isVertical" [ngClass]="'p-galleria-thumbnail-next-icon'" />
</ng-container>
<ng-template *ngTemplateOutlet="galleria.nextThumbnailIconTemplate || galleria._nextThumbnailIconTemplate"></ng-template>
</button>
</div>
</div>
`, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => Ripple), selector: "[pRipple]" }, { kind: "component", type: i0.forwardRef(() => ChevronRightIcon), selector: "ChevronRightIcon" }, { kind: "component", type: i0.forwardRef(() => ChevronUpIcon), selector: "ChevronUpIcon" }, { kind: "component", type: i0.forwardRef(() => ChevronDownIcon), selector: "ChevronDownIcon" }, { kind: "component", type: i0.forwardRef(() => ChevronLeftIcon), selector: "ChevronLeftIcon" }, { kind: "component", type: i0.forwardRef(() => GalleriaItemSlot), selector: "p-galleriaItemSlot", inputs: ["templates", "index", "item", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: GalleriaThumbnails, decorators: [{
type: Component,
args: [{
selector: 'p-galleriaThumbnails',
standalone: false,
template: `
<div class="p-galleria-thumbnails">
<div class="p-galleria-thumbnails-content">
<button
*ngIf="showThumbnailNavigators"
type="button"
[ngClass]="{
'p-galleria-thumbnail-prev-button p-galleria-thumbnail-nav-button': true,
'p-disabled': this.isNavBackwardDisabled()
}"
(click)="navBackward($event)"
[disabled]="isNavBackwardDisabled()"
pRipple
[attr.aria-label]="ariaPrevButtonLabel()"
>
<ng-container *ngIf="!galleria.previousThumbnailIconTemplate && !galleria._previousThumbnailIconTemplate">
<ChevronLeftIcon *ngIf="!isVertical" [styleClass]="'p-galleria-thumbnail-prev-icon'" />
<ChevronUpIcon *ngIf="isVertical" [styleClass]="'p-galleria-thumbnail-prev-icon'" />
</ng-container>
<ng-template *ngTemplateOutlet="galleria.previousThumbnailIconTemplate || galleria._previousThumbnailIconTemplate"></ng-template>
</button>
<div class="p-galleria-thumbnails-viewport" [ngStyle]="{ height: isVertical ? contentHeight : '' }">
<div #itemsContainer class="p-galleria-thumbnail-items" (transitionend)="onTransitionEnd()" (touchstart)="onTouchStart($event)" (touchmove)="onTouchMove($event)" role="tablist">
<div
*ngFor="let item of value; let index = index"
[ngClass]="{
'p-galleria-thumbnail-item': true,
'p-galleria-thumbnail-item-current': activeIndex === index,
'p-galleria-thumbnail-item-active': isItemActive(index),
'p-galleria-thumbnail-item-start': firstItemAciveIndex() === index,
'p-galleria-thumbnail-item-end': lastItemActiveIndex() === index
}"
[attr.aria-selected]="activeIndex === index"
[attr.aria-controls]="containerId + '_item_' + index"
[attr.data-pc-section]="'thumbnailitem'"
[attr.data-p-active]="activeIndex === index"
(keydown)="onThumbnailKeydown($event, index)"
>
<div
class="p-galleria-thumbnail"
[attr.tabindex]="activeIndex === index ? 0 : -1"
[attr.aria-current]="activeIndex === index ? 'page' : undefined"
[attr.aria-label]="ariaPageLabel(index + 1)"
(click)="onItemClick(index)"
(touchend)="onItemClick(index)"
(keydown.enter)="onItemClick(index)"
>
<p-galleriaItemSlot type="thumbnail" [item]="item" [templates]="templates"></p-galleriaItemSlot>
</div>
</div>
</div>
</div>
<button
*ngIf="showThumbnailNavigators"
type="button"
[ngClass]="{
'p-galleria-thumbnail-next-button p-galleria-thumbnail-nav-button': true,
'p-disabled': this.isNavForwardDisabled()
}"
(click)="navForward($event)"
[disabled]="isNavForwardDisabled()"
pRipple
[attr.aria-label]="ariaNextButtonLabel()"
>
<ng-container *ngIf="!galleria.nextThumbnailIconTemplate && !galleria._nextThumbnailIconTemplate">
<ChevronRightIcon *ngIf="!isVertical" [ngClass]="'p-galleria-thumbnail-next-icon'" />
<ChevronDownIcon *ngIf="isVertical" [ngClass]="'p-galleria-thumbnail-next-icon'" />
</ng-container>
<ng-template *ngTemplateOutlet="galleria.nextThumbnailIconTemplate || galleria._nextThumbnailIconTemplate"></ng-template>
</button>
</div>
</div>
`,
changeDetection: ChangeDetectionStrategy.OnPush
}]
}], ctorParameters: () => [{ type: Galleria }, { type: Document, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }, { type: undefined, decorators: [{
type: Inject,
args: [PLATFORM_ID]
}] }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { containerId: [{
type: Input
}], value: [{
type: Input
}], isVertical: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], slideShowActive: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], circular: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], responsiveOptions: [{
type: Input
}], contentHeight: [{
type: Input
}], showThumbnailNavigators: [{
type: Input
}], templates: [{
type: Input
}], onActiveIndexChange: [{
type: Output
}], stopSlideShow: [{
type: Output
}], itemsContainer: [{
type: ViewChild,
args: ['itemsContainer']
}], numVisible: [{
type: Input
}], activeIndex: [{
type: Input
}] } });
class GalleriaModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: GalleriaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: GalleriaModule, declarations: [Galleria, GalleriaContent, GalleriaItemSlot, GalleriaItem, GalleriaThumbnails], imports: [CommonModule, SharedModule, Ripple, TimesIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, ChevronLeftIcon, WindowMaximizeIcon, WindowMinimizeIcon, FocusTrap], exports: [CommonModule, Galleria, GalleriaContent, GalleriaItemSlot, GalleriaItem, GalleriaThumbnails, SharedModule] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: GalleriaModule, imports: [CommonModule, SharedModule, TimesIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, ChevronLeftIcon, WindowMaximizeIcon, WindowMinimizeIcon, CommonModule, SharedModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: GalleriaModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, SharedModule, Ripple, TimesIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, ChevronLeftIcon, WindowMaximizeIcon, WindowMinimizeIcon, FocusTrap],
exports: [CommonModule, Galleria, GalleriaContent, GalleriaItemSlot, GalleriaItem, GalleriaThumbnails, SharedModule],
declarations: [Galleria, GalleriaContent, GalleriaItemSlot, GalleriaItem, GalleriaThumbnails]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { Galleria, GalleriaClasses, GalleriaContent, GalleriaItem, GalleriaItemSlot, GalleriaModule, GalleriaStyle, GalleriaThumbnails };
//# sourceMappingURL=primeng-galleria.mjs.map