primeng/fesm2022/primeng-galleria.mjs.map

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

{"version":3,"file":"primeng-galleria.mjs","sources":["../../src/galleria/style/galleriastyle.ts","../../src/galleria/galleria.ts","../../src/galleria/primeng-galleria.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { BaseStyle } from 'primeng/base';\n\nconst theme = ({ dt }) => `\n.p-galleria {\n    overflow: hidden;\n    border-style: solid;\n    border-width: ${dt('galleria.border.width')};\n    border-color: ${dt('galleria.border.color')};\n    border-radius: ${dt('galleria.border.radius')};\n}\n\n.p-galleria-content {\n    display: flex;\n    flex-direction: column;\n}\n\n.p-galleria-items-container {\n    display: flex;\n    flex-direction: column;\n    position: relative;\n}\n\n.p-galleria-items {\n    position: relative;\n    display: flex;\n    height: 100%;\n}\n\n.p-galleria-nav-button {\n    position: absolute;\n    top: 50%;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    overflow: hidden;\n    background: ${dt('galleria.nav.button.background')};\n    color: ${dt('galleria.nav.button.color')};\n    width: ${dt('galleria.nav.button.size')};\n    height: ${dt('galleria.nav.button.size')};\n    transition: background ${dt('galleria.transition.duration')}, color ${dt('galleria.transition.duration')}, outline-color ${dt('galleria.transition.duration')}, box-shadow ${dt('galleria.transition.duration')};\n    margin: calc(-1 * calc(${dt('galleria.nav.button.size')}) / 2) ${dt('galleria.nav.button.gutter')} 0 ${dt('galleria.nav.button.gutter')};\n    padding: 0;\n    user-select: none;\n    border: 0 none;\n    cursor: pointer;\n    outline-color: transparent;\n}\n\n.p-galleria-nav-button:not(.p-disabled):hover {\n    background: ${dt('galleria.nav.button.hover.background')};\n    color: ${dt('galleria.nav.button.hover.color')};\n}\n\n.p-galleria-nav-button:not(.p-disabled):focus-visible {\n    box-shadow: ${dt('galleria.nav.button.focus.ring.shadow')};\n    outline: ${dt('galleria.nav.button.focus.ring.width')} ${dt('galleria.nav.button.focus.ring.style')} ${dt('galleria.nav.button.focus.ring.color')};\n    outline-offset: ${dt('galleria.nav.button.focus.ring.offset')};\n}\n\n.p-galleria-next-icon,\n.p-galleria-prev-icon {\n    font-size: ${dt('galleria.nav.icon.size')};\n    width: ${dt('galleria.nav.icon.size')};\n    height: ${dt('galleria.nav.icon.size')};\n}\n\n.p-galleria-prev-button {\n    border-radius: ${dt('galleria.nav.button.prev.border.radius')};\n    left: 0;\n}\n\n.p-galleria-next-button {\n    border-radius: ${dt('galleria.nav.button.next.border.radius')};\n    right: 0;\n}\n\n.p-galleria-prev-button:dir(rtl) {\n    left: auto;\n    right: 0;\n    transform: rotate(180deg);\n}\n\n.p-galleria-next-button:dir(rtl) {\n    right: auto;\n    left: 0;\n    transform: rotate(180deg);\n}\n\n.p-galleria-item {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100%;\n    width: 100%;\n}\n\n.p-galleria-hover-navigators .p-galleria-nav-button {\n    pointer-events: none;\n    opacity: 0;\n    transition: opacity ${dt('galleria.transition.duration')} ease-in-out;\n}\n\n.p-galleria-hover-navigators .p-galleria-items-container:hover .p-galleria-nav-button {\n    pointer-events: all;\n    opacity: 1;\n}\n\n.p-galleria-hover-navigators .p-galleria-items-container:hover .p-galleria-nav-button.p-disabled {\n    pointer-events: none;\n}\n\n.p-galleria-caption {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    background: ${dt('galleria.caption.background')};\n    color: ${dt('galleria.caption.color')};\n    padding: ${dt('galleria.caption.padding')};\n}\n\n.p-galleria-thumbnails {\n    display: flex;\n    flex-direction: column;\n    overflow: auto;\n    flex-shrink: 0;\n}\n\n.p-galleria-thumbnail-nav-button {\n    align-self: center;\n    flex: 0 0 auto;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    overflow: hidden;\n    position: relative;\n    margin: 0 ${dt('galleria.thumbnail.nav.button.gutter')};\n    padding: 0;\n    border: none;\n    user-select: none;\n    cursor: pointer;\n    background: transparent;\n    color: ${dt('galleria.thumbnail.nav.button.color')};\n    width: ${dt('galleria.thumbnail.nav.button.size')};\n    height: ${dt('galleria.thumbnail.nav.button.size')};\n    transition: background ${dt('galleria.transition.duration')}, color ${dt('galleria.transition.duration')}, outline-color ${dt('galleria.transition.duration')};\n    outline-color: transparent;\n    border-radius: ${dt('galleria.thumbnail.nav.button.border.radius')};\n}\n\n.p-galleria-thumbnail-nav-button:hover {\n    background: ${dt('galleria.thumbnail.nav.button.hover.background')};\n    color: ${dt('galleria.thumbnail.nav.button.hover.color')};\n}\n\n.p-galleria-thumbnail-nav-button:focus-visible {\n    box-shadow: ${dt('galleria.thumbnail.nav.button.focus.ring.shadow')};\n    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')};\n    outline-offset: ${dt('galleria.thumbnail.nav.button.focus.ring.offset')};\n}\n\n.p-galleria-thumbnail-nav-button .p-galleria-thumbnail-next-icon,\n.p-galleria-thumbnail-nav-button .p-galleria-thumbnail-prev-icon {\n    font-size: ${dt('galleria.thumbnail.nav.button.icon.size')};\n    width: ${dt('galleria.thumbnail.nav.button.icon.size')};\n    height: ${dt('galleria.thumbnail.nav.button.icon.size')};\n}\n\n.p-galleria-thumbnails-content {\n    display: flex;\n    flex-direction: row;\n    background: ${dt('galleria.thumbnails.content.background')};\n    padding: ${dt('galleria.thumbnails.content.padding')};\n}\n\n.p-galleria-thumbnails-viewport {\n    overflow: hidden;\n    width: 100%;\n}\n\n.p-galleria:not(.p-galleria-thumbnails-right):not(.p-galleria-thumbnails-left) .p-galleria-thumbnail-prev-button:dir(rtl),\n.p-galleria:not(.p-galleria-thumbnails-right):not(.p-galleria-thumbnails-left) .p-galleria-thumbnail-next-button:dir(rtl) {\n    transform: rotate(180deg);\n}\n\n.p-galleria-thumbnail-items {\n    display: flex;\n}\n\n.p-galleria-thumbnail-item {\n    overflow: auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    opacity: 0.5;\n}\n\n.p-galleria-thumbnail {\n    outline-color: transparent;\n}\n\n.p-galleria-thumbnail-item:hover {\n    opacity: 1;\n    transition: opacity 0.3s;\n}\n\n.p-galleria-thumbnail-item-current {\n    opacity: 1;\n}\n\n.p-galleria-thumbnails-left .p-galleria-content,\n.p-galleria-thumbnails-right .p-galleria-content {\n    flex-direction: row;\n}\n\n.p-galleria-thumbnails-left .p-galleria-items-container,\n.p-galleria-thumbnails-right .p-galleria-items-container {\n    flex-direction: row;\n}\n\n.p-galleria-thumbnails-left .p-galleria-items-container,\n.p-galleria-thumbnails-top .p-galleria-items-container {\n    order: 2;\n}\n\n.p-galleria-thumbnails-left .p-galleria-thumbnails,\n.p-galleria-thumbnails-top .p-galleria-thumbnails {\n    order: 1;\n}\n\n.p-galleria-thumbnails-left .p-galleria-thumbnails-content,\n.p-galleria-thumbnails-right .p-galleria-thumbnails-content {\n    flex-direction: column;\n    flex-grow: 1;\n}\n\n.p-galleria-thumbnails-left .p-galleria-thumbnail-items,\n.p-galleria-thumbnails-right .p-galleria-thumbnail-items {\n    flex-direction: column;\n    height: 100%;\n}\n\n.p-galleria-indicator-list {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: ${dt('galleria.indicator.list.padding')};\n    gap: ${dt('galleria.indicator.list.gap')};\n    margin: 0;\n    list-style: none;\n}\n\n.p-galleria-indicator-button {\n    display: inline-flex;\n    align-items: center;\n    background: ${dt('galleria.indicator.button.background')};\n    width: ${dt('galleria.indicator.button.width')};\n    height: ${dt('galleria.indicator.button.height')};\n    transition: background ${dt('galleria.transition.duration')}, color ${dt('galleria.transition.duration')}, outline-color ${dt('galleria.transition.duration')}, box-shadow ${dt('galleria.transition.duration')};\n    outline-color: transparent;\n    border-radius: ${dt('galleria.indicator.button.border.radius')};\n    margin: 0;\n    padding: 0;\n    border: none;\n    user-select: none;\n    cursor: pointer;\n}\n\n.p-galleria-indicator-button:hover {\n    background: ${dt('galleria.indicator.button.hover.background')};\n}\n\n.p-galleria-indicator-button:focus-visible {\n    box-shadow: ${dt('galleria.indicator.button.focus.ring.shadow')};\n    outline: ${dt('galleria.indicator.button.focus.ring.width')} ${dt('galleria.indicator.button.focus.ring.style')} ${dt('galleria.indicator.button.focus.ring.color')};\n    outline-offset: ${dt('galleria.indicator.button.focus.ring.offset')};\n}\n\n.p-galleria-indicator-active .p-galleria-indicator-button {\n    background: ${dt('galleria.indicator.button.active.background')};\n}\n\n.p-galleria-indicators-left .p-galleria-items-container,\n.p-galleria-indicators-right .p-galleria-items-container {\n    flex-direction: row;\n    align-items: center;\n}\n\n.p-galleria-indicators-left .p-galleria-items,\n.p-galleria-indicators-top .p-galleria-items {\n    order: 2;\n}\n\n.p-galleria-indicators-left .p-galleria-indicator-list,\n.p-galleria-indicators-top .p-galleria-indicator-list {\n    order: 1;\n}\n\n.p-galleria-indicators-left .p-galleria-indicator-list,\n.p-galleria-indicators-right .p-galleria-indicator-list {\n    flex-direction: column;\n}\n\n.p-galleria-inset-indicators .p-galleria-indicator-list {\n    position: absolute;\n    display: flex;\n    z-index: 1;\n    background: ${dt('galleria.inset.indicator.list.background')};\n}\n\n.p-galleria-inset-indicators .p-galleria-indicator-button {\n    background: ${dt('galleria.inset.indicator.button.background')};\n}\n\n.p-galleria-inset-indicators .p-galleria-indicator-button:hover {\n    background: ${dt('galleria.inset.indicator.button.hover.background')};\n}\n\n.p-galleria-inset-indicators .p-galleria-indicator-active .p-galleria-indicator-button {\n    background: ${dt('galleria.inset.indicator.button.active.background')};\n}\n\n.p-galleria-inset-indicators.p-galleria-indicators-top .p-galleria-indicator-list {\n    top: 0;\n    left: 0;\n    width: 100%;\n    align-items: flex-start;\n}\n\n.p-galleria-inset-indicators.p-galleria-indicators-right .p-galleria-indicator-list {\n    right: 0;\n    top: 0;\n    height: 100%;\n    align-items: flex-end;\n}\n\n.p-galleria-inset-indicators.p-galleria-indicators-bottom .p-galleria-indicator-list {\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    align-items: flex-end;\n}\n\n.p-galleria-inset-indicators.p-galleria-indicators-left .p-galleria-indicator-list {\n    left: 0;\n    top: 0;\n    height: 100%;\n    align-items: flex-start;\n}\n\n.p-galleria-mask {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.p-galleria-close-button {\n    position: absolute;\n    top: 0;\n    right: 0;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    overflow: hidden;\n    margin: ${dt('galleria.close.button.gutter')};\n    background: ${dt('galleria.close.button.background')};\n    color: ${dt('galleria.close.button.color')};\n    width: ${dt('galleria.close.button.size')};\n    height: ${dt('galleria.close.button.size')};\n    padding: 0;\n    border: none;\n    user-select: none;\n    cursor: pointer;\n    border-radius: ${dt('galleria.close.button.border.radius')};\n    outline-color: transparent;\n    transition: background ${dt('galleria.transition.duration')}, color ${dt('galleria.transition.duration')}, outline-color ${dt('galleria.transition.duration')};\n}\n\n.p-galleria-close-icon {\n    font-size: ${dt('galleria.close.button.icon.size')};\n    width: ${dt('galleria.close.button.icon.size')};\n    height: ${dt('galleria.close.button.icon.size')};\n}\n\n.p-galleria-close-button:hover {\n    background: ${dt('galleria.close.button.hover.background')};\n    color: ${dt('galleria.close.button.hover.color')};\n}\n\n.p-galleria-close-button:focus-visible {\n    box-shadow: ${dt('galleria.close.button.focus.ring.shadow')};\n    outline: ${dt('galleria.close.button.focus.ring.width')} ${dt('galleria.close.button.focus.ring.style')} ${dt('galleria.close.button.focus.ring.color')};\n    outline-offset: ${dt('galleria.close.button.focus.ring.offset')};\n}\n\n.p-galleria-mask .p-galleria-nav-button {\n    position: fixed;\n    top: 50%;\n}\n\n.p-galleria-enter-active {\n    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n}\n\n.p-galleria-leave-active {\n    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.p-galleria-enter-from,\n.p-galleria-leave-to {\n    opacity: 0;\n    transform: scale(0.7);\n}\n\n.p-galleria-enter-active .p-galleria-nav-button {\n    opacity: 0;\n}\n\n.p-items-hidden .p-galleria-thumbnail-item {\n    visibility: hidden;\n}\n\n.p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active {\n    visibility: visible;\n}\n`;\n\nconst classes = {\n    mask: 'p-galleria-mask p-overlay-mask p-overlay-mask-enter',\n    root: ({ instance }) => {\n        const thumbnailsPosClass = instance.$attrs.showThumbnails && instance.getPositionClass('p-galleria-thumbnails', instance.$attrs.thumbnailsPosition);\n        const indicatorPosClass = instance.$attrs.showIndicators && instance.getPositionClass('p-galleria-indicators', instance.$attrs.indicatorsPosition);\n\n        return [\n            'p-galleria p-component',\n            {\n                'p-galleria-fullscreen': instance.$attrs.fullScreen,\n                'p-galleria-inset-indicators': instance.$attrs.showIndicatorsOnItem,\n                'p-galleria-hover-navigators': instance.$attrs.showItemNavigatorsOnHover && !instance.$attrs.fullScreen\n            },\n            thumbnailsPosClass,\n            indicatorPosClass\n        ];\n    },\n    closeButton: 'p-galleria-close-button',\n    closeIcon: 'p-galleria-close-icon',\n    header: 'p-galleria-header',\n    content: 'p-galleria-content',\n    footer: 'p-galleria-footer',\n    itemsContainer: 'p-galleria-items-container',\n    items: 'p-galleria-items',\n    prevButton: ({ instance }) => [\n        'p-galleria-prev-button p-galleria-nav-button',\n        {\n            'p-disabled': instance.isNavBackwardDisabled()\n        }\n    ],\n    prevIcon: 'p-galleria-prev-icon',\n    item: 'p-galleria-item',\n    nextButton: ({ instance }) => [\n        'p-galleria-next-button p-galleria-nav-button',\n        {\n            'p-disabled': instance.isNavForwardDisabled()\n        }\n    ],\n    nextIcon: 'p-galleria-next-icon',\n    caption: 'p-galleria-caption',\n    indicatorList: 'p-galleria-indicator-list',\n    indicator: ({ instance, index }) => [\n        'p-galleria-indicator',\n        {\n            'p-galleria-indicator-active': instance.isIndicatorItemActive(index)\n        }\n    ],\n    indicatorButton: 'p-galleria-indicator-button',\n    thumbnails: 'p-galleria-thumbnails',\n    thumbnailContent: 'p-galleria-thumbnails-content',\n    thumbnailPrevButton: ({ instance }) => [\n        'p-galleria-thumbnail-prev-button p-galleria-thumbnail-nav-button',\n        {\n            'p-disabled': instance.isNavBackwardDisabled()\n        }\n    ],\n    thumbnailPrevIcon: 'p-galleria-thumbnail-prev-icon',\n    thumbnailsViewport: 'p-galleria-thumbnails-viewport',\n    thumbnailItems: 'p-galleria-thumbnail-items',\n    thumbnailItem: ({ instance, index, activeIndex }) => [\n        'p-galleria-thumbnail-item',\n        {\n            'p-galleria-thumbnail-item-current': activeIndex === index,\n            'p-galleria-thumbnail-item-active': instance.isItemActive(index),\n            'p-galleria-thumbnail-item-start': instance.firstItemAciveIndex() === index,\n            'p-galleria-thumbnail-item-end': instance.lastItemActiveIndex() === index\n        }\n    ],\n    thumbnail: 'p-galleria-thumbnail',\n    thumbnailNextButton: ({ instance }) => [\n        'p-galleria-thumbnail-next-button  p-galleria-thumbnail-nav-button',\n        {\n            'p-disabled': instance.isNavForwardDisabled()\n        }\n    ],\n    thumbnailNextIcon: 'p-galleria-thumbnail-next-icon'\n};\n\n@Injectable()\nexport class GalleriaStyle extends BaseStyle {\n    name = 'galleria';\n\n    theme = theme;\n\n    classes = classes;\n}\n\n/**\n *\n * Galleria is an advanced content gallery component.\n *\n * [Live Demo](https://www.primeng.org/galleria/)\n *\n * @module galleriastyle\n *\n */\nexport enum GalleriaClasses {\n    /**\n     * Class name of the mask element\n     */\n    mask = 'p-galleria-mask',\n    /**\n     * Class name of the root element\n     */\n    root = 'p-galleria',\n    /**\n     * Class name of the close button element\n     */\n    closeButton = 'p-galleria-close-button',\n    /**\n     * Class name of the close icon element\n     */\n    closeIcon = 'p-galleria-close-icon',\n    /**\n     * Class name of the header element\n     */\n    header = 'p-galleria-header',\n    /**\n     * Class name of the content element\n     */\n    content = 'p-galleria-content',\n    /**\n     * Class name of the footer element\n     */\n    footer = 'p-galleria-footer',\n    /**\n     * Class name of the items container element\n     */\n    itemsContainer = 'p-galleria-items-container',\n    /**\n     * Class name of the items element\n     */\n    items = 'p-galleria-items',\n    /**\n     * Class name of the previous item button element\n     */\n    prevButton = 'p-galleria-prev-button',\n    /**\n     * Class name of the previous item icon element\n     */\n    prevIcon = 'p-galleria-prev-icon',\n    /**\n     * Class name of the item element\n     */\n    item = 'p-galleria-item',\n    /**\n     * Class name of the next item button element\n     */\n    nextButton = 'p-galleria-next-button',\n    /**\n     * Class name of the next item icon element\n     */\n    nextIcon = 'p-galleria-next-icon',\n    /**\n     * Class name of the caption element\n     */\n    caption = 'p-galleria-caption',\n    /**\n     * Class name of the indicator list element\n     */\n    indicatorList = 'p-galleria-indicator-list',\n    /**\n     * Class name of the indicator element\n     */\n    indicator = 'p-galleria-indicator',\n    /**\n     * Class name of the indicator button element\n     */\n    indicatorButton = 'p-galleria-indicator-button',\n    /**\n     * Class name of the thumbnails element\n     */\n    thumbnails = 'p-galleria-thumbnails',\n    /**\n     * Class name of the thumbnail content element\n     */\n    thumbnailContent = 'p-galleria-thumbnails-content',\n    /**\n     * Class name of the previous thumbnail button element\n     */\n    previousThumbnailButton = 'p-galleria-thumbnail-prev-button',\n    /**\n     * Class name of the previous thumbnail icon element\n     */\n    previousThumbnailIcon = 'p-galleria-thumbnail-prev-icon',\n    /**\n     * Class name of the thumbnails viewport element\n     */\n    thumbnailsViewport = 'p-galleria-thumbnails-viewport',\n    /**\n     * Class name of the thumbnail items element\n     */\n    thumbnailItems = 'p-galleria-thumbnail-items',\n    /**\n     * Class name of the thumbnail item element\n     */\n    thumbnailItem = 'p-galleria-thumbnail-item',\n    /**\n     * Class name of the thumbnail element\n     */\n    thumbnail = 'p-galleria-thumbnail',\n    /**\n     * Class name of the next thumbnail button element\n     */\n    nextThumbnailButton = 'p-galleria-thumbnail-next-button',\n    /**\n     * Class name of the next thumbnail icon element\n     */\n    nextThumbnailIcon = 'p-galleria-thumbnail-next-icon'\n}\n\nexport interface GalleriaStyle extends BaseStyle {}\n","import { animate, AnimationEvent, style, transition, trigger } from '@angular/animations';\nimport { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common';\nimport {\n    AfterContentChecked,\n    AfterViewInit,\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ContentChild,\n    ContentChildren,\n    DoCheck,\n    ElementRef,\n    EventEmitter,\n    forwardRef,\n    HostListener,\n    Inject,\n    inject,\n    Input,\n    KeyValueDiffers,\n    NgModule,\n    numberAttribute,\n    OnChanges,\n    OnDestroy,\n    OnInit,\n    Output,\n    PLATFORM_ID,\n    QueryList,\n    Renderer2,\n    SimpleChanges,\n    TemplateRef,\n    ViewChild,\n    ViewEncapsulation\n} from '@angular/core';\nimport { addClass, blockBodyScroll, find, findSingle, focus, getAttribute, removeClass, setAttribute, unblockBodyScroll, uuid } from '@primeuix/utils';\nimport { PrimeTemplate, SharedModule } from 'primeng/api';\nimport { BaseComponent } from 'primeng/basecomponent';\nimport { FocusTrap } from 'primeng/focustrap';\nimport { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, TimesIcon, WindowMaximizeIcon, WindowMinimizeIcon } from 'primeng/icons';\nimport { Ripple } from 'primeng/ripple';\nimport { VoidListener } from 'primeng/ts-helpers';\nimport { ZIndexUtils } from 'primeng/utils';\nimport { GalleriaResponsiveOptions } from './galleria.interface';\nimport { GalleriaStyle } from './style/galleriastyle';\n\n/**\n * Galleria is an advanced content gallery component.\n * @group Components\n */\n@Component({\n    selector: 'p-galleria',\n    standalone: false,\n    template: `\n        <div *ngIf=\"fullScreen; else windowed\" #container>\n            <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\">\n                <p-galleriaContent\n                    *ngIf=\"visible\"\n                    [@animation]=\"{\n                        value: 'visible',\n                        params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions }\n                    }\"\n                    (@animation.start)=\"onAnimationStart($event)\"\n                    (@animation.done)=\"onAnimationEnd($event)\"\n                    [value]=\"value\"\n                    [activeIndex]=\"activeIndex\"\n                    [numVisible]=\"numVisibleLimit || numVisible\"\n                    (maskHide)=\"onMaskHide()\"\n                    (activeItemChange)=\"onActiveItemChange($event)\"\n                    [ngStyle]=\"containerStyle\"\n                    [fullScreen]=\"fullScreen\"\n                ></p-galleriaContent>\n            </div>\n        </div>\n\n        <ng-template #windowed>\n            <p-galleriaContent [value]=\"value\" [activeIndex]=\"activeIndex\" [numVisible]=\"numVisibleLimit || numVisible\" (activeItemChange)=\"onActiveItemChange($event)\"></p-galleriaContent>\n        </ng-template>\n    `,\n    animations: [\n        trigger('animation', [\n            transition('void => visible', [style({ transform: 'scale(0.7)', opacity: 0 }), animate('{{showTransitionParams}}')]),\n            transition('visible => void', [animate('{{hideTransitionParams}}', style({ transform: 'scale(0.7)', opacity: 0 }))])\n        ])\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    providers: [GalleriaStyle]\n})\nexport class Galleria extends BaseComponent implements OnChanges, OnDestroy {\n    /**\n     * Index of the first item.\n     * @group Props\n     */\n    @Input() get activeIndex(): number {\n        return this._activeIndex;\n    }\n    set activeIndex(activeIndex) {\n        this._activeIndex = activeIndex;\n    }\n    /**\n     * Whether to display the component on fullscreen.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) fullScreen: boolean = false;\n    /**\n     * Unique identifier of the element.\n     * @group Props\n     */\n    @Input() id: string | undefined;\n    /**\n     * An array of objects to display.\n     * @group Props\n     */\n    @Input() value: any[] | undefined;\n    /**\n     * Number of items per page.\n     * @group Props\n     */\n    @Input({ transform: numberAttribute }) numVisible: number = 3;\n    /**\n     * An array of options for responsive design.\n     * @see {GalleriaResponsiveOptions}\n     * @group Props\n     */\n    @Input() responsiveOptions: GalleriaResponsiveOptions[] | undefined;\n    /**\n     * Whether to display navigation buttons in item section.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) showItemNavigators: boolean = false;\n    /**\n     * Whether to display navigation buttons in thumbnail container.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) showThumbnailNavigators: boolean = true;\n    /**\n     * Whether to display navigation buttons on item hover.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) showItemNavigatorsOnHover: boolean = false;\n    /**\n     * When enabled, item is changed on indicator hover.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) changeItemOnIndicatorHover: boolean = false;\n    /**\n     * Defines if scrolling would be infinite.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) circular: boolean = false;\n    /**\n     * Items are displayed with a slideshow in autoPlay mode.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) autoPlay: boolean = false;\n    /**\n     * When enabled, autorun should stop by click.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) shouldStopAutoplayByClick: boolean = true;\n    /**\n     * Time in milliseconds to scroll items.\n     * @group Props\n     */\n    @Input({ transform: numberAttribute }) transitionInterval: number = 4000;\n    /**\n     * Whether to display thumbnail container.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) showThumbnails: boolean = true;\n    /**\n     * Position of thumbnails.\n     * @group Props\n     */\n    @Input() thumbnailsPosition: 'bottom' | 'top' | 'left' | 'right' | undefined = 'bottom';\n    /**\n     * Height of the viewport in vertical thumbnail.\n     * @group Props\n     */\n    @Input() verticalThumbnailViewPortHeight: string = '300px';\n    /**\n     * Whether to display indicator container.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) showIndicators: boolean = false;\n    /**\n     * When enabled, indicator container is displayed on item container.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) showIndicatorsOnItem: boolean = false;\n    /**\n     * Position of indicators.\n     * @group Props\n     */\n    @Input() indicatorsPosition: 'bottom' | 'top' | 'left' | 'right' | undefined = 'bottom';\n    /**\n     * Base zIndex value to use in layering.\n     * @group Props\n     */\n    @Input({ transform: numberAttribute }) baseZIndex: number = 0;\n    /**\n     * Style class of the mask on fullscreen mode.\n     * @group Props\n     */\n    @Input() maskClass: string | undefined;\n    /**\n     * Style class of the component on fullscreen mode. Otherwise, the 'class' property can be used.\n     * @group Props\n     */\n    @Input() containerClass: string | undefined;\n    /**\n     * Inline style of the component on fullscreen mode. Otherwise, the 'style' property can be used.\n     * @group Props\n     */\n    @Input() containerStyle: { [klass: string]: any } | null | undefined;\n    /**\n     * Transition options of the show animation.\n     * @group Props\n     */\n    @Input() showTransitionOptions: string = '150ms cubic-bezier(0, 0, 0.2, 1)';\n    /**\n     * Transition options of the hide animation.\n     * @group Props\n     */\n    @Input() hideTransitionOptions: string = '150ms cubic-bezier(0, 0, 0.2, 1)';\n    /**\n     * Specifies the visibility of the mask on fullscreen mode.\n     * @group Props\n     */\n    @Input() get visible(): boolean {\n        return this._visible;\n    }\n    set visible(visible: boolean) {\n        this._visible = visible;\n\n        if (this._visible && !this.maskVisible) {\n            this.maskVisible = true;\n        }\n    }\n    /**\n     * Callback to invoke on active index change.\n     * @param {number} number - Active index.\n     * @group Emits\n     */\n    @Output() activeIndexChange: EventEmitter<number> = new EventEmitter<number>();\n    /**\n     * Callback to invoke on visiblity change.\n     * @param {boolean} boolean - Visible value.\n     * @group Emits\n     */\n    @Output() visibleChange: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n    @ViewChild('mask') mask: ElementRef | undefined;\n\n    @ViewChild('container') container: ElementRef | undefined;\n\n    _visible: boolean = false;\n\n    _activeIndex: number = 0;\n\n    @ContentChild('header', { descendants: false }) headerTemplate: TemplateRef<any> | undefined;\n    headerFacet: any;\n\n    @ContentChild('footer', { descendants: false, static: false }) footerTemplate: TemplateRef<any> | undefined;\n    footerFacet: any;\n\n    @ContentChild('indicator', { descendants: false }) indicatorTemplate: TemplateRef<any> | undefined;\n    indicatorFacet: any;\n\n    @ContentChild('caption', { descendants: false }) captionTemplate: TemplateRef<any> | undefined;\n    captionFacet: any;\n\n    @ContentChild('closeicon', { descendants: false }) _closeIconTemplate: TemplateRef<any> | undefined;\n    closeIconTemplate: TemplateRef<any> | undefined;\n\n    @ContentChild('previousthumbnailicon', { descendants: false }) _previousThumbnailIconTemplate: TemplateRef<any> | undefined;\n    previousThumbnailIconTemplate: TemplateRef<any> | undefined;\n\n    @ContentChild('nextthumbnailicon', { descendants: false }) _nextThumbnailIconTemplate: TemplateRef<any> | undefined;\n    nextThumbnailIconTemplate: TemplateRef<any> | undefined;\n\n    @ContentChild('itempreviousicon', { descendants: false }) _itemPreviousIconTemplate: TemplateRef<any> | undefined;\n    itemPreviousIconTemplate: TemplateRef<any> | undefined;\n\n    @ContentChild('itemnexticon', { descendants: false }) _itemNextIconTemplate: TemplateRef<any> | undefined;\n    itemNextIconTemplate: TemplateRef<any> | undefined;\n\n    @ContentChild('item', { descendants: false }) _itemTemplate: TemplateRef<any> | undefined;\n    itemTemplate: TemplateRef<any> | undefined;\n\n    @ContentChild('thumbnail', { descendants: false, static: false }) _thumbnailTemplate: TemplateRef<any> | undefined;\n    thumbnailTemplate: TemplateRef<any> | undefined;\n\n    maskVisible: boolean = false;\n\n    numVisibleLimit = 0;\n\n    _componentStyle = inject(GalleriaStyle);\n\n    constructor(\n        @Inject(PLATFORM_ID) public platformId: any,\n        public element: ElementRef,\n        public cd: ChangeDetectorRef\n    ) {\n        super();\n    }\n\n    @ContentChildren(PrimeTemplate) templates: QueryList<PrimeTemplate> | undefined;\n\n    ngAfterContentInit() {\n        this.templates?.forEach((item) => {\n            switch (item.getType()) {\n                case 'header':\n                    this.headerFacet = item.template;\n                    break;\n\n                case 'footer':\n                    this.footerFacet = item.template;\n                    break;\n\n                case 'indicator':\n                    this.indicatorFacet = item.template;\n                    break;\n\n                case 'closeicon':\n                    this.closeIconTemplate = item.template;\n                    break;\n\n                case 'itemnexticon':\n                    this.itemNextIconTemplate = item.template;\n                    break;\n\n                case 'itempreviousicon':\n                    this.itemPreviousIconTemplate = item.template;\n                    break;\n\n                case 'previousthumbnailicon':\n                    this.previousThumbnailIconTemplate = item.template;\n                    break;\n\n                case 'nextthumbnailicon':\n                    this.nextThumbnailIconTemplate = item.template;\n                    break;\n\n                case 'caption':\n                    this.captionFacet = item.template;\n                    break;\n\n                case 'item':\n                    this.itemTemplate = item.template;\n                    break;\n\n                case 'thumbnail':\n                    this.thumbnailTemplate = item.template;\n                    break;\n            }\n        });\n    }\n\n    ngOnChanges(simpleChanges: SimpleChanges) {\n        super.ngOnChanges(simpleChanges);\n        if (simpleChanges.value && simpleChanges.value.currentValue?.length < this.numVisible) {\n            this.numVisibleLimit = simpleChanges.value.currentValue.length;\n        } else {\n            this.numVisibleLimit = 0;\n        }\n    }\n\n    onMaskHide() {\n        this.visible = false;\n        this.visibleChange.emit(false);\n    }\n\n    onActiveItemChange(index: number) {\n        if (this.activeIndex !== index) {\n            this.activeIndex = index;\n            this.activeIndexChange.emit(index);\n        }\n    }\n\n    onAnimationStart(event: AnimationEvent) {\n        switch (event.toState) {\n            case 'visible':\n                this.enableModality();\n                setTimeout(() => {\n                    focus(<any>findSingle(this.container.nativeElement, '[data-pc-section=\"closebutton\"]'));\n                }, 25);\n                break;\n\n            case 'void':\n                addClass(this.mask?.nativeElement, 'p-overlay-mask-leave');\n                break;\n        }\n    }\n\n    onAnimationEnd(event: AnimationEvent) {\n        switch (event.toState) {\n            case 'void':\n                this.disableModality();\n                break;\n        }\n    }\n\n    enableModality() {\n        blockBodyScroll();\n        this.cd.markForCheck();\n\n        if (this.mask) {\n            ZIndexUtils.set('modal', this.mask.nativeElement, this.baseZIndex || this.config.zIndex.modal);\n        }\n    }\n\n    disableModality() {\n        unblockBodyScroll();\n        this.maskVisible = false;\n        this.cd.markForCheck();\n\n        if (this.mask) {\n            ZIndexUtils.clear(this.mask.nativeElement);\n        }\n    }\n\n    ngOnDestroy() {\n        if (this.fullScreen) {\n            removeClass(this.document.body, 'p-overflow-hidden');\n        }\n\n        if (this.mask) {\n            this.disableModality();\n        }\n    }\n}\n\n@Component({\n    selector: 'p-galleriaContent',\n    standalone: false,\n    template: `\n        <div\n            [attr.id]=\"id\"\n            [attr.role]=\"'region'\"\n            *ngIf=\"value && value.length > 0\"\n            [ngClass]=\"{\n                'p-galleria p-component': true,\n                'p-galleria-fullscreen': this.galleria.fullScreen,\n                'p-galleria-inset-indicators': this.galleria.showIndicatorsOnItem,\n                'p-galleria-hover-navigators': this.galleria.showItemNavigatorsOnHover && !this.galleria.fullScreen\n            }\"\n            [ngStyle]=\"!galleria.fullScreen ? galleria.containerStyle : {}\"\n            [class]=\"galleriaClass()\"\n            pFocusTrap\n            [pFocusTrapDisabled]=\"!fullScreen\"\n        >\n            <button *ngIf=\"galleria.fullScreen\" type=\"button\" class=\"p-galleria-close-button\" (click)=\"maskHide.emit()\" [attr.aria-label]=\"closeAriaLabel()\" [attr.data-pc-section]=\"'closebutton'\">\n                <TimesIcon *ngIf=\"!galleria.closeIconTemplate && !galleria._closeIconTemplate\" [styleClass]=\"'p-galleria-close-icon'\" />\n                <ng-template *ngTemplateOutlet=\"galleria.closeIconTemplate || galleria._closeIconTemplate\"></ng-template>\n            </button>\n            <div *ngIf=\"galleria.templates && (galleria.headerFacet || galleria.headerTemplate)\" class=\"p-galleria-header\">\n                <p-galleriaItemSlot type=\"header\" [templates]=\"galleria.templates\"></p-galleriaItemSlot>\n            </div>\n            <div class=\"p-galleria-content\" [attr.aria-live]=\"galleria.autoPlay ? 'polite' : 'off'\">\n                <p-galleriaItem\n                    [id]=\"id\"\n                    [value]=\"value\"\n                    [activeIndex]=\"activeIndex\"\n                    [circular]=\"galleria.circular\"\n                    [templates]=\"galleria.templates\"\n                    (onActiveIndexChange)=\"onActiveIndexChange($event)\"\n                    [showIndicators]=\"galleria.showIndicators\"\n                    [changeItemOnIndicatorHover]=\"galleria.changeItemOnIndicatorHover\"\n                    [indicatorFacet]=\"galleria.indicatorFacet\"\n                    [captionFacet]=\"galleria.captionFacet\"\n                    [showItemNavigators]=\"galleria.showItemNavigators\"\n                    [autoPlay]=\"galleria.autoPlay\"\n                    [slideShowActive]=\"slideShowActive\"\n                    (startSlideShow)=\"startSlideShow()\"\n                    (stopSlideShow)=\"stopSlideShow()\"\n                ></p-galleriaItem>\n\n                <p-galleriaThumbnails\n                    *ngIf=\"galleria.showThumbnails\"\n                    [containerId]=\"id\"\n                    [value]=\"value\"\n                    (onActiveIndexChange)=\"onActiveIndexChange($event)\"\n                    [activeIndex]=\"activeIndex\"\n                    [templates]=\"galleria.templates\"\n                    [numVisible]=\"numVisible\"\n                    [responsiveOptions]=\"galleria.responsiveOptions\"\n                    [circular]=\"galleria.circular\"\n                    [isVertical]=\"isVertical()\"\n                    [contentHeight]=\"galleria.verticalThumbnailViewPortHeight\"\n                    [showThumbnailNavigators]=\"galleria.showThumbnailNavigators\"\n                    [slideShowActive]=\"slideShowActive\"\n                    (stopSlideShow)=\"stopSlideShow()\"\n                ></p-galleriaThumbnails>\n            </div>\n            <div *ngIf=\"shouldRenderFooter()\" class=\"p-galleria-footer\">\n                <p-galleriaItemSlot type=\"footer\" [templates]=\"galleria.templates\"></p-galleriaItemSlot>\n            </div>\n        </div>\n    `,\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class GalleriaContent extends BaseComponent implements DoCheck {\n    @Input() get activeIndex(): number {\n        return this._activeIndex;\n    }\n    set activeIndex(activeIndex: number) {\n        this._activeIndex = activeIndex;\n    }\n\n    @Input() value: any[] = [];\n\n    @Input({ transform: numberAttribute }) numVisible: number | undefined;\n\n    @Input({ transform: booleanAttribute }) fullScreen: boolean;\n\n    @Output() maskHide: EventEmitter<boolean> = new EventEmitter();\n\n    @Output() activeItemChange: EventEmitter<number> = new EventEmitter();\n\n    @ViewChild('closeButton') closeButton: ElementRef | undefined;\n\n    id: string;\n\n    _activeIndex: number = 0;\n\n    slideShowActive: boolean = true;\n\n    interval: any;\n\n    styleClass: string | undefined;\n\n    private differ: any;\n\n    constructor(\n        public galleria: Galleria,\n        public cd: ChangeDetectorRef,\n        private differs: KeyValueDiffers,\n        private elementRef: ElementRef\n    ) {\n        super();\n        this.id = this.galleria.id || uuid('pn_id_');\n        this.differ = this.differs.find(this.galleria).create();\n    }\n\n    // For custom fullscreen\n    @HostListener('document:fullscreenchange', ['$event'])\n    handleFullscreenChange(event: Event) {\n        if (document?.fullscreenElement === this.elementRef.nativeElement?.children[0]) {\n            this.fullScreen = true;\n        } else {\n            this.fullScreen = false;\n        }\n    }\n\n    ngDoCheck(): void {\n        if (isPlatformBrowser(this.galleria.platformId)) {\n            const changes = this.differ.diff(this.galleria as unknown as Record<string, unknown>);\n            if (changes && changes.forEachItem.length > 0) {\n                // Because we change the properties of the parent component,\n                // and the children take our entity from the injector.\n                // We can tell the children to redraw themselves when we change the properties of the parent component.\n                // Since we have an onPush strategy\n                this.cd.markForCheck();\n            }\n        }\n    }\n\n    shouldRenderFooter() {\n        return (this.galleria.footerFacet && this.galleria.templates.toArray().length > 0) || this.galleria.footerTemplate;\n    }\n\n    galleriaClass() {\n        const thumbnailsPosClass = this.galleria.showThumbnails && this.getPositionClass('p-galleria-thumbnails', this.galleria.thumbnailsPosition as string);\n        const indicatorPosClass = this.galleria.showIndicators && this.getPositionClass('p-galleria-indicators', this.galleria.indicatorsPosition as string);\n\n        return (this.galleria.containerClass ? this.galleria.containerClass + ' ' : '') + (thumbnailsPosClass ? thumbnailsPosClass + ' ' : '') + (indicatorPosClass ? indicatorPosClass + ' ' : '');\n    }\n\n    startSlideShow() {\n        if (isPlatformBrowser(this.galleria.platformId)) {\n            this.interval = setInterval(() => {\n                let activeIndex = this.galleria.circular && this.value.length - 1 === this.activeIndex ? 0 : this.activeIndex + 1;\n                this.onActiveIndexChange(activeIndex);\n                this.activeIndex = activeIndex;\n            }, this.galleria.transitionInterval);\n\n            this.slideShowActive = true;\n        }\n    }\n\n    stopSlideShow() {\n        if (this.galleria.autoPlay && !this.galleria.shouldStopAutoplayByClick) {\n            return;\n        }\n\n        if (this.interval) {\n            clearInterval(this.interval);\n        }\n\n        this.slideShowActive = false;\n    }\n\n    getPositionClass(preClassName: string, position: string) {\n        const positions = ['top', 'left', 'bottom', 'right'];\n        const pos = positions.find((item) => item === position);\n\n        return pos ? `${preClassName}-${pos}` : '';\n    }\n\n    isVertical() {\n        return this.galleria.thumbnailsPosition === 'left' || this.galleria.thumbnailsPosition === 'right';\n    }\n\n    onActiveIndexChange(index: number) {\n        if (this.activeIndex !== index) {\n            this.activeIndex = index;\n            this.activeItemChange.emit(this.activeIndex);\n        }\n    }\n\n    closeAriaLabel() {\n        return this.config.translation.aria ? this.config.translation.aria.close : undefined;\n    }\n}\n\n@Component({\n    selector: 'p-galleriaItemSlot',\n    standalone: false,\n    template: `\n        <ng-container *ngIf=\"shouldRender()\">\n            <ng-container *ngTemplateOutlet=\"contentTemplate; context: context\"></ng-container>\n        </ng-container>\n    `,\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class GalleriaItemSlot {\n    @Input() templates: QueryList<PrimeTemplate> | undefined;\n\n    @Input({ transform: numberAttribute }) index: number | undefined;\n\n    @Input() get item(): any {\n        return this._item;\n    }\n\n    shouldRender() {\n        return (\n            this.contentTemplate ||\n            this.galleria._itemTemplate ||\n            this.galleria.itemTemplate ||\n            this.galleria.captionTemplate ||\n            this.galleria.captionTemplate ||\n            this.galleria.captionFacet ||\n            this.galleria.thumbnailTemplate ||\n            this.galleria._thumbnailTemplate ||\n            this.galleria.footerTemplate\n        );\n    }\n\n    galleria: Galleria = inject(Galleria);\n\n    set item(item: any) {\n        this._item = item;\n        if (this.templates && this.templates?.toArray().length > 0) {\n            this.templates.forEach((item) => {\n                if (item.getType() === this.type) {\n                    switch (this.type) {\n                        case 'item':\n                        case 'caption':\n                        case 'thumbnail':\n                            this.context = { $implicit: this.item };\n                            this.contentTemplate = item.template;\n                            break;\n                        case 'footer':\n                            this.context = { $implicit: this.item };\n                            this.contentTemplate = item.template;\n                            break;\n                    }\n                }\n            });\n        } else {\n            this.getContentTemplate();\n        }\n    }\n\n    getContentTemplate() {\n        switch (this.type) {\n            case 'item':\n                this.context = { $implicit: this.item };\n                this.contentTemplate = this.galleria._itemTemplate || this.galleria.itemTemplate;\n                break;\n            case 'caption':\n                this.context = { $implicit: this.item };\n                this.contentTemplate = this.galleria.captionTemplate || this.galleria.captionFacet;\n                break;\n            case 'thumbnail':\n                this.context = { $implicit: this.item };\n                this.contentTemplate = this.galleria.thumbnailTemplate || this.galleria._thumbnailTemplate;\n                break;\n            case 'indicator':\n                this.context = { $implicit: this.index };\n                this.contentTemplate = this.galleria.indicatorTemplate || this.galleria.indicatorFacet;\n                break;\n            case 'footer':\n                this.context = { $implicit: this.item };\n                this.contentTemplate = this.galleria.footerTemplate || this.galleria.footerFacet;\n                break;\n            default:\n                this.context = { $implicit: this.item };\n                this.contentTemplate = this.galleria._itemTemplate || this.galleria.itemTemplate;\n        }\n    }\n\n    @Input() type: string | undefined;\n\n    contentTemplate: TemplateRef<any> | undefined;\n\n    context: any;\n\n    _item: any;\n\n    ngAfterContentInit() {\n        if (this.templates && this.templates.toArray().length > 0) {\n            this.templates?.forEach((item) => {\n                if (item.getType() === this.type) {\n                    switch (this.type) {\n                        case 'item':\n                        case 'caption':\n                        case 'thumbnail':\n                            this.context = { $implicit: this.item };\n                            this.contentTemplate = item.template;\n                            break;\n\n                        case 'indicator':\n                            this.context = { $implicit: this.index };\n                            this.contentTemplate = item.template;\n                            break;\n\n                        case 'footer':\n                            this.context = { $implicit: this.item };\n                            this.contentTemplate = item.template;\n                            break;\n\n                        default:\n                            this.context = { $implicit: this.item };\n                            this.contentTemplate = item.template;\n                            break;\n                    }\n                }\n            });\n        } else {\n            this.getContentTemplate();\n        }\n    }\n}\n\n@Component({\n    selector: 'p-galleriaItem',\n    standalone: false,\n    template: `\n        <div class=\"p-galleria-items\">\n            <button\n                *ngIf=\"showItemNavigators\"\n                type=\"button\"\n                role=\"navigation\"\n                [ngClass]=\"{ 'p-galleria-prev-button p-galleria-nav-button': true, 'p-disabled': this.isNavBackwardDisabled() }\"\n                (click)=\"navBackward($event)\"\n                [disabled]=\"isNavBackwardDisabled()\"\n                (focus)=\"onButtonFocus('left')\"\n                (blur)=\"onButtonBlur('left')\"\n            >\n                <ChevronLeftIcon *ngIf=\"!galleria.itemPreviousIconTemplate && !galleria._itemPreviousIconTemplate\" [styleClass]=\"'p-galleria-prev-icon'\" />\n                <ng-template *ngTemplateOutlet=\"galleria.itemPreviousIconTemplate || galleria._itemPreviousIconTemplate\"></ng-template>\n            </button>\n            <div [id]=\"id + '_item_' + activeIndex\" role=\"group\" class=\"p-galleria-item\" [attr.aria-label]=\"ariaSlideNumber(activeIndex + 1)\" [attr.aria-roledescription]=\"ariaSlideLabel()\">\n                <p-galleriaItemSlot type=\"item\" [item]=\"activeItem\" [templates]=\"templates\" class=\"p-galleria-item\"></p-galleriaItemSlot>\n            </div>\n            <button\n                *ngIf=\"showItemNavigators\"\n                type=\"button\"\n                [ngClass]=\"{ 'p-galleria-next-button p-galleria-nav-button': true, 'p-disabled': this.isNavForwardDisabled() }\"\n                (click)=\"navForward($event)\"\n                [disabled]=\"isNavForwardDisabled()\"\n                role=\"navigation\"\n                (focus)=\"onButtonFocus('right')\"\n                (blur)=\"onButtonBlur('right')\"\n            >\n                <ChevronRightIcon *ngIf=\"!galleria.itemNextIconTemplate && !galleria._itemNextIconTemplate\" [styleClass]=\"'p-galleria-next-icon'\" />\n                <ng-template *ngTemplateOutlet=\"galleria.itemNextIconTemplate || galleria._itemNextIconTemplate\"></ng-template>\n            </button>\n            <div class=\"p-galleria-caption\" *ngIf=\"captionFacet || galleria.captionTemplate\">\n                <p-galleriaItemSlot type=\"caption\" [item]=\"activeItem\" [templates]=\"templates\