primeng/fesm2022/primeng-galleria.mjs

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

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"
                    (