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 { style } from '@primeuix/styles/galleria';\nimport { BaseStyle } from 'primeng/base';\n\nconst classes = {\n    mask: 'p-galleria-mask p-overlay-mask p-overlay-mask-enter',\n    root: ({ instance }) => {\n        const thumbnailsPosClass = instance.galleria.showThumbnails && instance.getPositionClass('p-galleria-thumbnails', instance.galleria.thumbnailsPosition);\n        const indicatorPosClass = instance.galleria.showIndicators && instance.getPositionClass('p-galleria-indicators', instance.galleria.indicatorsPosition);\n\n        return [\n            'p-galleria p-component',\n            {\n                'p-galleria-fullscreen': instance.galleria.fullScreen,\n                'p-galleria-inset-indicators': instance.galleria.showIndicatorsOnItem,\n                'p-galleria-hover-navigators': instance.galleria.showItemNavigatorsOnHover && !instance.galleria.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 = style;\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, 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    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    SimpleChanges,\n    TemplateRef,\n    ViewChild,\n    ViewEncapsulation\n} from '@angular/core';\nimport { addClass, find, findSingle, focus, getAttribute, removeClass, setAttribute, uuid } from '@primeuix/utils';\nimport { PrimeTemplate, SharedModule } from 'primeng/api';\nimport { BaseComponent } from 'primeng/basecomponent';\nimport { blockBodyScroll, unblockBodyScroll } from 'primeng/dom';\nimport { FocusTrap } from 'primeng/focustrap';\nimport { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, TimesIcon } 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]=\"cx('mask')\" [class]=\"maskClass\" [attr.role]=\"fullScreen ? 'dialog' : 'region'\" [attr.aria-modal]=\"fullScreen ? 'true' : undefined\" (click)=\"onMaskHide($event)\">\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(event?: MouseEvent) {\n        if (!event || event.target === event.currentTarget) {\n            this.visible = false;\n            this.visibleChange.emit(false);\n        }\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 [attr.id]=\"id\" [attr.role]=\"'region'\" *ngIf=\"value && value.length > 0\" [class]=\"cn(cx('root'), galleria.containerClass)\" [ngStyle]=\"!galleria.fullScreen ? galleria.containerStyle : {}\" pFocusTrap [pFocusTrapDisabled]=\"!fullScreen\">\n            <button *ngIf=\"galleria.fullScreen\" type=\"button\" [class]=\"cx('closeButton')\" (click)=\"maskHide.emit()\" [attr.aria-label]=\"closeAriaLabel()\" [attr.data-pc-section]=\"'closebutton'\">\n                <svg data-p-icon=\"times\" *ngIf=\"!galleria.closeIconTemplate && !galleria._closeIconTemplate\" [class]=\"cx('closeIcon')\" />\n                <ng-template *ngTemplateOutlet=\"galleria.closeIconTemplate || galleria._closeIconTemplate\"></ng-template>\n            </button>\n            <div *ngIf=\"galleria.templates && (galleria.headerFacet || galleria.headerTemplate)\" [class]=\"cx('header')\">\n                <p-galleriaItemSlot type=\"header\" [templates]=\"galleria.templates\"></p-galleriaItemSlot>\n            </div>\n            <div [class]=\"cx('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]=\"cx('footer')\">\n                <p-galleriaItemSlot type=\"footer\" [templates]=\"galleria.templates\"></p-galleriaItemSlot>\n            </div>\n        </div>\n    `,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    providers: [GalleriaStyle]\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    _componentStyle = inject(GalleriaStyle);\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    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]=\"cx('items')\">\n            <button *ngIf=\"showItemNavigators\" type=\"button\" role=\"navigation\" [class]=\"cx('prevButton')\" (click)=\"navBackward($event)\" (focus)=\"onButtonFocus('left')\" (blur)=\"onButtonBlur('left')\">\n                <svg data-p-icon=\"chevron-left\" *ngIf=\"!galleria.itemPreviousIconTemplate && !galleria._itemPreviousIconTemplate\" [class]=\"cx('prevIcon')\" />\n                <ng-template *ngTemplateOutlet=\"galleria.itemPreviousIconTemplate || galleria._itemPreviousIconTemplate\"></ng-template>\n            </button>\n            <div [id]=\"id + '_item_' + activeIndex\" role=\"group\" [class]=\"cx('item')\" [attr.aria-label]=\"ariaSlideNumber(activeIndex + 1)\" [attr.aria-roledescription]=\"ariaSlideLabel()\">\n                <p-galleriaItemSlot type=\"item\" [item]=\"activeItem\" [templates]=\"templates\" [class]=\"cx('item')\"></p-galleriaItemSlot>\n            </div>\n            <button *ngIf=\"showItemNavigators\" type=\"button\" [class]=\"cx('nextButton')\" (click)=\"navForward($event)\" role=\"navigation\" (focus)=\"onButtonFocus('right')\" (blur)=\"onButtonBlur('right')\">\n                <svg data-p-icon=\"chevron-right\" *ngIf=\"!galleria.itemNextIconTemplate && !galleria._itemNextIconTemplate\" [class]=\"cx('nextIcon')\" />\n                <ng-template *ngTemplateOutlet=\"galleria.itemNextIconTemplate || galleria._itemNextIconTemplate\"></ng-template>\n            </button>\n            <div [class]=\"cx('caption')\" *ngIf=\"captionFacet || galleria.captionTemplate\">\n                <p-galleriaItemSlot type=\"caption\" [item]=\"activeItem\" [templates]=\"templates\"></p-galleriaItemSlot>\n            </div>\n        </div>\n        <ul *ngIf=\"showIndicators\" [class]=\"cx('indicatorList')\">\n            <li\n                *ngFor=\"let item of value; let index = index\"\n                tabindex=\"0\"\n                (click)=\"onIndicatorClick(index)\"\n                (mouseenter)=\"onIndicatorMouseEnter(index)\"\n                (keydown)=\"onIndicatorKeyDown($event, index)\"\n                [class]=\"cx('indicator', { index })\"\n                [attr.aria-label]=\"ariaPageLabel(index + 1)\"\n                [attr.aria-selected]=\"activeIndex === index\"\n                [attr.aria-controls]=\"id + '_item_' + index\"\n            >\n                <button type=\"button\" tabIndex=\"-1\" [class]=\"cx('indicatorButton')\" *ngIf=\"!indicatorFacet && !galleria.indicatorTemplate\"></button>\n                <p-galleriaItemSlot type=\"indicator\" [index]=\"index\" [templates]=\"templates\"></p-galleriaItemSlot>\n            </li>\n        </ul>\n    `,\n    host: {\n        '[class]': \"cx('itemsContainer')\"\n    },\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    providers: [GalleriaStyle]\n})\nexport class GalleriaItem extends BaseComponent implements OnChanges {\n    @Input() id: string | undefined;\n\n    @Input({ transform: booleanAttribute }) circular: boolean = false;\n\n    @Input() value: any[] | undefined;\n\n    @Input({ transform: booleanAttribute }) showItemNavigators: boolean = false;\n\n    @Input({ transform: booleanAttribute }) showIndicators: boolean = true;\n\n    @Input({ transform: booleanAttribute }) slideShowActive: boolean = true;\n\n    @Input({ transform: booleanAttribute }) changeItemOnIndicatorHover: boolean = true;\n\n    @Input({ transform: booleanAttribute }) autoPlay: boolean = false;\n\n    @Input() templates: QueryList<PrimeTemplate> | undefined;\n\n    @Input() indicatorFacet: any;\n\n    @Input() captionFacet: any;\n\n    @Output() startSlideShow: EventEmitter<Event> = new EventEmitter();\n\n    @Output() stopSlideShow: EventEmitter<Event> = new EventEmitter();\n\n    @Output() onActiveIndexChange: EventEmitter<number> = new EventEmitter();\n\n    _componentStyle = inject(GalleriaStyle);\n\n    @Input() get activeIndex(): number {\n        return this._activeIndex;\n    }\n\n    set activeIndex(activeIndex) {\n        this._activeIndex = activeIndex;\n    }\n\n    get activeItem() {\n        return this.value && this.value[this._activeIndex];\n    }\n\n    _activeIndex: number = 0;\n\n    leftButtonFocused: boolean = false;\n\n    rightButtonFocused: boolean = false;\n\n    constructor(public galleria: Galleria) {\n        super();\n    }\n\n    ngOnChanges({ autoPlay }: SimpleChanges): void {\n        super.ngOnChanges({ autoPlay });\n        if (autoPlay?.currentValue) {\n            this.startSlideShow.emit();\n        }\n\n        if (autoPlay && autoPlay.currentValue === false) {\n            this.stopTheSlideShow();\n        }\n    }\n\n    next() {\n        let nextItemIndex = this.activeIndex + 1;\n        let activeIndex = this.circular && (<any[]>this.value).length - 1 === this.activeIndex ? 0 : nextItemIndex;\n        this.onActiveIndexChange.emit(activeIndex);\n    }\n\n    prev() {\n        let prevItemIndex = this.activeIndex !== 0 ? this.activeIndex - 1 : 0;\n        let activeIndex = this.circular && this.activeIndex === 0 ? (<any[]>this.value).length - 1 : prevItemIndex;\n        this.onActiveIndexChange.emit(activeIndex);\n    }\n\n    onButtonFocus(pos: 'left' | 'right') {\n        if (pos === 'left') {\n            this.leftButtonFocused = true;\n        } else this.rightButtonFocused = true;\n    }\n\n    onButtonBlur(pos: 'left' | 'right') {\n        if (pos === 'left') {\n            this.leftButtonFocused = false;\n        } else this.rightButtonFocused = false;\n    }\n\n    stopTheSlideShow() {\n        if (this.slideShowActive && this.stopSlideShow) {\n            this.stopSlideShow.emit();\n        }\n    }\n\n    navForward(e: MouseEvent) {\n        this.stopTheSlideShow();\n        this.next();\n\n        if (e && e.cancelable) {\n            e.preventDefault();\n        }\n    }\n\n    navBackward(e: MouseEvent) {\n        this.stopTheSlideShow();\n        this.prev();\n\n        if (e && e.cancelable) {\n            e.preventDefault();\n        }\n    }\n\n    onIndicatorClick(index: number) {\n        this.stopTheSlideShow();\n        this.onActiveIndexChange.emit(index);\n    }\n\n    onIndicatorMouseEnter(index: number) {\n        if (this.changeItemOnIndicatorHover) {\n            this.stopTheSlideShow();\n            this.onActiveIndexChange.emit(index);\n        }\n    }\n\n    onIndicatorKeyDown(event, index: number) {\n        switch (event.code) {\n            case 'Enter':\n            case 'Space':\n                this.stopTheSlideShow();\n                this.onActiveIndexChange.emit(index);\n                event.preventDefault();\n                break;\n\n            case 'ArrowDown':\n            case 'ArrowUp':\n                event.preventDefault();\n                break;\n\n            default:\n                break;\n        }\n    }\n\n    isNavForwardDisabled() {\n        return !this.circular && this.activeIndex === (<any[]>this.value).length - 1;\n    }\n\n    isNavBackwardDisabled() {\n        return !this.circular && this.activeIndex === 0;\n    }\n\n    isIndicatorItemActive(index: number) {\n        return this.activeIndex === index;\n    }\n\n    ariaSlideLabel() {\n        return this.galleria.config.translation.aria ? this.galleria.config.translation.aria.slide : undefined;\n    }\n\n    ariaSlideNumber(value) {\n        return this.galleria.config.translation.aria ? this.galleria.config.translation.aria.slideNumber.replace(/{slideNumber}/g, value) : undefined;\n    }\n\n    ariaPageLabel(value) {\n        return this.galleria.config.translation.aria ? this.galleria.config.translation.aria.pageLabel.replace(/{page}/g, value) : undefined;\n    }\n}\n\n@Component({\n    selector: 'p-galleriaThumbnails',\n    standalone: false,\n    template: `\n        <div [class]=\"cx('thumbnails')\">\n            <div [class]=\"cx('thumbnailContent')\">\n                <button *ngIf=\"showThumbnailNavigators\" type=\"button\" [class]=\"cx('thumbnailPrevButton')\" (click)=\"navBackward($event)\" pRipple [attr.aria-label]=\"ariaPrevButtonLabel()\">\n                    <ng-container *ngIf=\"!galleria.previousThumbnailIconTemplate && !galleria._previousThumbnailIconTemplate\">\n                        <svg data-p-icon=\"chevron-left\" *ngIf=\"!isVertical\" [class]=\"cx('thumbnailPrevIcon')\" />\n                        <svg data-p-icon=\"chevron-up\" *ngIf=\"isVertical\" [class]=\"cx('thumbnailPrevIcon')\" />\n                    </ng-container>\n                    <ng-template *ngTemplateOutlet=\"galleria.previousThumbnailIconTemplate || galleria._previousThumbnailIconTemplate\"></ng-template>\n                </button>\n                <div [class]=\"cx('thumbnailsViewport')\" [ngStyle]=\"{ height: isVertical ? contentHeight : '' }\">\n                    <div #itemsContainer [class]=\"cx('thumbnailItems')\" (transitionend)=\"onTransitionEnd()\" (touchstart)=\"onTouchStart($event)\" (touchmove)=\"onTouchMove($event)\" role=\"tablist\">\n                        <div\n                            *ngFor=\"let item of value; let index = index\"\n                            [class]=\"cx('thumbnailItem', { index, activeIndex })\"\n                            [attr.aria-selected]=\"activeIndex === index\"\n                            [attr.aria-controls]=\"containerId + '_item_' + index\"\n                            [attr.data-pc-section]=\"'thumbnailitem'\"\n                            [attr.data-p-active]=\"activeIndex === index\"\n                            (keydown)=\"onThumbnailKeydown($event, index)\"\n                        >\n                            <div\n                                [class]=\"cx('thumbnail')\"\n                                [attr.tabindex]=\"activeIndex === index ? 0 : -1\"\n                                [attr.aria-current]=\"activeIndex === index ? 'page' : undefined\"\n                                [attr.aria-label]=\"ariaPageLabel(index + 1)\"\n                                (click)=\"onItemClick(index)\"\n                                (touchend)=\"onItemClick(index)\"\n                                (keydown.enter)=\"onItemClick(index)\"\n                            >\n                                <p-galleriaItemSlot type=\"thumbnail\" [item]=\"item\" [templates]=\"templates\"></p-galleriaItemSlot>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <button *ngIf=\"showThumbnailNavigators\" type=\"button\" [class]=\"cx('thumbnailNextButton')\" (click)=\"navForward($event)\" pRipple [attr.aria-label]=\"ariaNextButtonLabel()\">\n                    <ng-container *ngIf=\"!galleria.nextThumbnailIconTemplate && !galleria._nextThumbnailIconTemplate\">\n                        <svg data-p-icon=\"chevron-right\" *ngIf=\"!isVertical\" [class]=\"cx('thumbnailNextIcon')\" />\n                        <svg data-p-icon=\"chevron-down\" *ngIf=\"isVertical\" [class]=\"cx('thumbnailNextIcon')\" />\n                    </ng-container>\n                    <ng-template *ngTemplateOutlet=\"galleria.nextThumbnailIconTemplate || galleria._nextThumbnailIconTemplate\"></ng-template>\n                </button>\n            </div>\n        </div>\n    `,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    providers: [GalleriaStyle]\n})\nexport class GalleriaThumbnails extends BaseComponent implements OnInit, AfterContentChecked, AfterViewInit, OnDestroy {\n    @Input() containerId: string | undefined;\n\n    @Input() value: any[] | undefined;\n\n    @Input({ transform: booleanAttribute }) isVertical: boolean = false;\n\n    @Input({ transform: booleanAttribute }) slideShowActive: boolean = false;\n\n    @Input({ transform: booleanAttribute }) circular: boolean = false;\n\n    @Input() responsiveOptions: GalleriaResponsiveOptions[] | undefined;\n\n    @Input() contentHeight: string = '300px';\n\n    @Input() showThumbnailNavigators = true;\n\n    @Input() templates: QueryList<PrimeTemplate> | undefined;\n\n    @Output() onActiveIndexChange: EventEmitter<number> = new EventEmitter();\n\n    @Output() stopSlideShow: EventEmitter<Event> = new EventEmitter();\n\n    @ViewChild('itemsContainer') itemsContainer: ElementRef | undefined;\n\n    @Input() get numVisible(): number {\n        return this._numVisible;\n    }\n\n    set numVisible(numVisible) {\n        this._numVisible = numVisible;\n        this._oldNumVisible = this.d_numVisible;\n        this.d_numVisible = numVisible;\n    }\n\n    @Input() get activeIndex(): number {\n        return this._activeIndex;\n    }\n\n    set activeIndex(activeIndex) {\n        this._oldactiveIndex = this._activeIndex;\n        this._activeIndex = activeIndex;\n    }\n\n    index: number | undefined;\n\n    startPos: { x: number; y: number } | null = null;\n\n    thumbnailsStyle: HTMLStyleElement | null = null;\n\n    sortedResponsiveOptions: GalleriaResponsiveOptions[] | null = null;\n\n    totalShiftedItems: number = 0;\n\n    page: number = 0;\n\n    documentResizeListener: VoidListener;\n\n    _numVisible: number = 0;\n\n    d_numVisible: number = 0;\n\n    _oldNumVisible: number = 0;\n\n    _activeIndex: number = 0;\n\n    _oldactiveIndex: number = 0;\n\n    _componentStyle = inject(GalleriaStyle);\n\n    constructor(public galleria: Galleria) {\n        super();\n    }\n\n    ngOnInit() {\n        super.ngOnInit();\n        if (isPlatformBrowser(this.platformId)) {\n            this.createStyle();\n\n            if (this.responsiveOptions) {\n                this.bindDocumentListeners();\n            }\n        }\n    }\n\n    ngAfterContentChecked() {\n        let totalShiftedItems = this.totalShiftedItems;\n\n        if ((this._oldNumVisible !== this.d_numVisible || this._oldactiveIndex !== this._activeIndex) && this.itemsContainer) {\n            if (this._activeIndex <= this.getMedianItemIndex()) {\n                totalShiftedItems = 0;\n            } else if ((<any[]>this.value).length - this.d_numVisible + this.getMedianItemIndex() < this._activeIndex) {\n                totalShiftedItems = this.d_numVisible - (<any[]>this.value).length;\n            } else if ((<any[]>this.value).length - this.d_numVisible < this._activeIndex && this.d_numVisible % 2 === 0) {\n                totalShiftedItems = this._activeIndex * -1 + this.getMedianItemIndex() + 1;\n            } else {\n                totalShiftedItems = this._activeIndex * -1 + this.getMedianItemIndex();\n            }\n\n            if (totalShiftedItems !== this.totalShiftedItems) {\n                this.totalShiftedItems = totalShiftedItems;\n            }\n\n            if (this.itemsContainer && this.itemsContainer.nativeElement) {\n                this.itemsContainer.nativeElement.style.transform = this.isVertical ? `translate3d(0, ${totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`;\n            }\n\n            if (this._oldactiveIndex !== this._activeIndex) {\n                removeClass(this.itemsContainer.nativeElement, 'p-items-hidden');\n                this.itemsContainer.nativeElement.style.transition = 'transform 500ms ease 0s';\n            }\n\n            this._oldactiveIndex = this._activeIndex;\n            this._oldNumVisible = this.d_numVisible;\n        }\n    }\n\n    ngAfterViewInit() {\n        super.ngAfterViewInit();\n        if (isPlatformBrowser(this.platformId)) {\n            this.calculatePosition();\n        }\n    }\n\n    createStyle() {\n        if (!this.thumbnailsStyle) {\n            this.thumbnailsStyle = this.document.createElement('style');\n            this.document.body.appendChild(this.thumbnailsStyle);\n        }\n\n        let innerHTML = `\n            #${this.containerId} .p-galleria-thumbnail-item {\n                flex: 1 0 ${100 / this.d_numVisible}%\n            }\n        `;\n\n        if (this.responsiveOptions) {\n