primeng 0.0.0-watch

package/fesm2022/primeng-galleria.mjs

@@ -0,0 +1,1874 @@
+import { trigger, transition, style as style$1, animate } from '@angular/animations';
+import * as i1 from '@angular/common';
+import { isPlatformBrowser, CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, inject, PLATFORM_ID, numberAttribute, booleanAttribute, ContentChildren, ContentChild, ViewChild, Output, Input, Inject, ViewEncapsulation, ChangeDetectionStrategy, Component, HostListener, NgModule } from '@angular/core';
+import { addClass, focus, findSingle, removeClass, uuid, setAttribute, find, getAttribute } from '@primeuix/utils';
+import { PrimeTemplate, SharedModule } from 'primeng/api';
+import { BaseComponent } from 'primeng/basecomponent';
+import { blockBodyScroll, unblockBodyScroll } from 'primeng/dom';
+import { FocusTrap } from 'primeng/focustrap';
+import { TimesIcon, ChevronRightIcon, ChevronLeftIcon, ChevronUpIcon, ChevronDownIcon } from 'primeng/icons';
+import { Ripple } from 'primeng/ripple';
+import { ZIndexUtils } from 'primeng/utils';
+import { style } from '@primeuix/styles/galleria';
+import { BaseStyle } from 'primeng/base';
+
+const classes = {
+    mask: 'p-galleria-mask p-overlay-mask p-overlay-mask-enter',
+    root: ({ instance }) => {
+        const thumbnailsPosClass = instance.galleria.showThumbnails && instance.getPositionClass('p-galleria-thumbnails', instance.galleria.thumbnailsPosition);
+        const indicatorPosClass = instance.galleria.showIndicators && instance.getPositionClass('p-galleria-indicators', instance.galleria.indicatorsPosition);
+        return [
+            'p-galleria p-component',
+            {
+                'p-galleria-fullscreen': instance.galleria.fullScreen,
+                'p-galleria-inset-indicators': instance.galleria.showIndicatorsOnItem,
+                'p-galleria-hover-navigators': instance.galleria.showItemNavigatorsOnHover && !instance.galleria.fullScreen
+            },
+            thumbnailsPosClass,
+            indicatorPosClass
+        ];
+    },
+    closeButton: 'p-galleria-close-button',
+    closeIcon: 'p-galleria-close-icon',
+    header: 'p-galleria-header',
+    content: 'p-galleria-content',
+    footer: 'p-galleria-footer',
+    itemsContainer: 'p-galleria-items-container',
+    items: 'p-galleria-items',
+    prevButton: ({ instance }) => [
+        'p-galleria-prev-button p-galleria-nav-button',
+        {
+            'p-disabled': instance.isNavBackwardDisabled()
+        }
+    ],
+    prevIcon: 'p-galleria-prev-icon',
+    item: 'p-galleria-item',
+    nextButton: ({ instance }) => [
+        'p-galleria-next-button p-galleria-nav-button',
+        {
+            'p-disabled': instance.isNavForwardDisabled()
+        }
+    ],
+    nextIcon: 'p-galleria-next-icon',
+    caption: 'p-galleria-caption',
+    indicatorList: 'p-galleria-indicator-list',
+    indicator: ({ instance, index }) => [
+        'p-galleria-indicator',
+        {
+            'p-galleria-indicator-active': instance.isIndicatorItemActive(index)
+        }
+    ],
+    indicatorButton: 'p-galleria-indicator-button',
+    thumbnails: 'p-galleria-thumbnails',
+    thumbnailContent: 'p-galleria-thumbnails-content',
+    thumbnailPrevButton: ({ instance }) => [
+        'p-galleria-thumbnail-prev-button p-galleria-thumbnail-nav-button',
+        {
+            'p-disabled': instance.isNavBackwardDisabled()
+        }
+    ],
+    thumbnailPrevIcon: 'p-galleria-thumbnail-prev-icon',
+    thumbnailsViewport: 'p-galleria-thumbnails-viewport',
+    thumbnailItems: 'p-galleria-thumbnail-items',
+    thumbnailItem: ({ instance, index, activeIndex }) => [
+        'p-galleria-thumbnail-item',
+        {
+            'p-galleria-thumbnail-item-current': activeIndex === index,
+            'p-galleria-thumbnail-item-active': instance.isItemActive(index),
+            'p-galleria-thumbnail-item-start': instance.firstItemAciveIndex() === index,
+            'p-galleria-thumbnail-item-end': instance.lastItemActiveIndex() === index
+        }
+    ],
+    thumbnail: 'p-galleria-thumbnail',
+    thumbnailNextButton: ({ instance }) => [
+        'p-galleria-thumbnail-next-button  p-galleria-thumbnail-nav-button',
+        {
+            'p-disabled': instance.isNavForwardDisabled()
+        }
+    ],
+    thumbnailNextIcon: 'p-galleria-thumbnail-next-icon'
+};
+class GalleriaStyle extends BaseStyle {
+    name = 'galleria';
+    theme = style;
+    classes = classes;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: GalleriaStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: GalleriaStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: GalleriaStyle, decorators: [{
+            type: Injectable
+        }] });
+/**
+ *
+ * Galleria is an advanced content gallery component.
+ *
+ * [Live Demo](https://www.primeng.org/galleria/)
+ *
+ * @module galleriastyle
+ *
+ */
+var GalleriaClasses;
+(function (GalleriaClasses) {
+    /**
+     * Class name of the mask element
+     */
+    GalleriaClasses["mask"] = "p-galleria-mask";
+    /**
+     * Class name of the root element
+     */
+    GalleriaClasses["root"] = "p-galleria";
+    /**
+     * Class name of the close button element
+     */
+    GalleriaClasses["closeButton"] = "p-galleria-close-button";
+    /**
+     * Class name of the close icon element
+     */
+    GalleriaClasses["closeIcon"] = "p-galleria-close-icon";
+    /**
+     * Class name of the header element
+     */
+    GalleriaClasses["header"] = "p-galleria-header";
+    /**
+     * Class name of the content element
+     */
+    GalleriaClasses["content"] = "p-galleria-content";
+    /**
+     * Class name of the footer element
+     */
+    GalleriaClasses["footer"] = "p-galleria-footer";
+    /**
+     * Class name of the items container element
+     */
+    GalleriaClasses["itemsContainer"] = "p-galleria-items-container";
+    /**
+     * Class name of the items element
+     */
+    GalleriaClasses["items"] = "p-galleria-items";
+    /**
+     * Class name of the previous item button element
+     */
+    GalleriaClasses["prevButton"] = "p-galleria-prev-button";
+    /**
+     * Class name of the previous item icon element
+     */
+    GalleriaClasses["prevIcon"] = "p-galleria-prev-icon";
+    /**
+     * Class name of the item element
+     */
+    GalleriaClasses["item"] = "p-galleria-item";
+    /**
+     * Class name of the next item button element
+     */
+    GalleriaClasses["nextButton"] = "p-galleria-next-button";
+    /**
+     * Class name of the next item icon element
+     */
+    GalleriaClasses["nextIcon"] = "p-galleria-next-icon";
+    /**
+     * Class name of the caption element
+     */
+    GalleriaClasses["caption"] = "p-galleria-caption";
+    /**
+     * Class name of the indicator list element
+     */
+    GalleriaClasses["indicatorList"] = "p-galleria-indicator-list";
+    /**
+     * Class name of the indicator element
+     */
+    GalleriaClasses["indicator"] = "p-galleria-indicator";
+    /**
+     * Class name of the indicator button element
+     */
+    GalleriaClasses["indicatorButton"] = "p-galleria-indicator-button";
+    /**
+     * Class name of the thumbnails element
+     */
+    GalleriaClasses["thumbnails"] = "p-galleria-thumbnails";
+    /**
+     * Class name of the thumbnail content element
+     */
+    GalleriaClasses["thumbnailContent"] = "p-galleria-thumbnails-content";
+    /**
+     * Class name of the previous thumbnail button element
+     */
+    GalleriaClasses["previousThumbnailButton"] = "p-galleria-thumbnail-prev-button";
+    /**
+     * Class name of the previous thumbnail icon element
+     */
+    GalleriaClasses["previousThumbnailIcon"] = "p-galleria-thumbnail-prev-icon";
+    /**
+     * Class name of the thumbnails viewport element
+     */
+    GalleriaClasses["thumbnailsViewport"] = "p-galleria-thumbnails-viewport";
+    /**
+     * Class name of the thumbnail items element
+     */
+    GalleriaClasses["thumbnailItems"] = "p-galleria-thumbnail-items";
+    /**
+     * Class name of the thumbnail item element
+     */
+    GalleriaClasses["thumbnailItem"] = "p-galleria-thumbnail-item";
+    /**
+     * Class name of the thumbnail element
+     */
+    GalleriaClasses["thumbnail"] = "p-galleria-thumbnail";
+    /**
+     * Class name of the next thumbnail button element
+     */
+    GalleriaClasses["nextThumbnailButton"] = "p-galleria-thumbnail-next-button";
+    /**
+     * Class name of the next thumbnail icon element
+     */
+    GalleriaClasses["nextThumbnailIcon"] = "p-galleria-thumbnail-next-icon";
+})(GalleriaClasses || (GalleriaClasses = {}));
+
+/**
+ * Galleria is an advanced content gallery component.
+ * @group Components
+ */
+class Galleria extends BaseComponent {
+    platformId;
+    element;
+    cd;
+    /**
+     * Index of the first item.
+     * @group Props
+     */
+    get activeIndex() {
+        return this._activeIndex;
+    }
+    set activeIndex(activeIndex) {
+        this._activeIndex = activeIndex;
+    }
+    /**
+     * Whether to display the component on fullscreen.
+     * @group Props
+     */
+    fullScreen = false;
+    /**
+     * Unique identifier of the element.
+     * @group Props
+     */
+    id;
+    /**
+     * An array of objects to display.
+     * @group Props
+     */
+    value;
+    /**
+     * Number of items per page.
+     * @group Props
+     */
+    numVisible = 3;
+    /**
+     * An array of options for responsive design.
+     * @see {GalleriaResponsiveOptions}
+     * @group Props
+     */
+    responsiveOptions;
+    /**
+     * Whether to display navigation buttons in item section.
+     * @group Props
+     */
+    showItemNavigators = false;
+    /**
+     * Whether to display navigation buttons in thumbnail container.
+     * @group Props
+     */
+    showThumbnailNavigators = true;
+    /**
+     * Whether to display navigation buttons on item hover.
+     * @group Props
+     */
+    showItemNavigatorsOnHover = false;
+    /**
+     * When enabled, item is changed on indicator hover.
+     * @group Props
+     */
+    changeItemOnIndicatorHover = false;
+    /**
+     * Defines if scrolling would be infinite.
+     * @group Props
+     */
+    circular = false;
+    /**
+     * Items are displayed with a slideshow in autoPlay mode.
+     * @group Props
+     */
+    autoPlay = false;
+    /**
+     * When enabled, autorun should stop by click.
+     * @group Props
+     */
+    shouldStopAutoplayByClick = true;
+    /**
+     * Time in milliseconds to scroll items.
+     * @group Props
+     */
+    transitionInterval = 4000;
+    /**
+     * Whether to display thumbnail container.
+     * @group Props
+     */
+    showThumbnails = true;
+    /**
+     * Position of thumbnails.
+     * @group Props
+     */
+    thumbnailsPosition = 'bottom';
+    /**
+     * Height of the viewport in vertical thumbnail.
+     * @group Props
+     */
+    verticalThumbnailViewPortHeight = '300px';
+    /**
+     * Whether to display indicator container.
+     * @group Props
+     */
+    showIndicators = false;
+    /**
+     * When enabled, indicator container is displayed on item container.
+     * @group Props
+     */
+    showIndicatorsOnItem = false;
+    /**
+     * Position of indicators.
+     * @group Props
+     */
+    indicatorsPosition = 'bottom';
+    /**
+     * Base zIndex value to use in layering.
+     * @group Props
+     */
+    baseZIndex = 0;
+    /**
+     * Style class of the mask on fullscreen mode.
+     * @group Props
+     */
+    maskClass;
+    /**
+     * Style class of the component on fullscreen mode. Otherwise, the 'class' property can be used.
+     * @group Props
+     */
+    containerClass;
+    /**
+     * Inline style of the component on fullscreen mode. Otherwise, the 'style' property can be used.
+     * @group Props
+     */
+    containerStyle;
+    /**
+     * Transition options of the show animation.
+     * @group Props
+     */
+    showTransitionOptions = '150ms cubic-bezier(0, 0, 0.2, 1)';
+    /**
+     * Transition options of the hide animation.
+     * @group Props
+     */
+    hideTransitionOptions = '150ms cubic-bezier(0, 0, 0.2, 1)';
+    /**
+     * Specifies the visibility of the mask on fullscreen mode.
+     * @group Props
+     */
+    get visible() {
+        return this._visible;
+    }
+    set visible(visible) {
+        this._visible = visible;
+        if (this._visible && !this.maskVisible) {
+            this.maskVisible = true;
+        }
+    }
+    /**
+     * Callback to invoke on active index change.
+     * @param {number} number - Active index.
+     * @group Emits
+     */
+    activeIndexChange = new EventEmitter();
+    /**
+     * Callback to invoke on visiblity change.
+     * @param {boolean} boolean - Visible value.
+     * @group Emits
+     */
+    visibleChange = new EventEmitter();
+    mask;
+    container;
+    _visible = false;
+    _activeIndex = 0;
+    headerTemplate;
+    headerFacet;
+    footerTemplate;
+    footerFacet;
+    indicatorTemplate;
+    indicatorFacet;
+    captionTemplate;
+    captionFacet;
+    _closeIconTemplate;
+    closeIconTemplate;
+    _previousThumbnailIconTemplate;
+    previousThumbnailIconTemplate;
+    _nextThumbnailIconTemplate;
+    nextThumbnailIconTemplate;
+    _itemPreviousIconTemplate;
+    itemPreviousIconTemplate;
+    _itemNextIconTemplate;
+    itemNextIconTemplate;
+    _itemTemplate;
+    itemTemplate;
+    _thumbnailTemplate;
+    thumbnailTemplate;
+    maskVisible = false;
+    numVisibleLimit = 0;
+    _componentStyle = inject(GalleriaStyle);
+    constructor(platformId, element, cd) {
+        super();
+        this.platformId = platformId;
+        this.element = element;
+        this.cd = cd;
+    }
+    templates;
+    ngAfterContentInit() {
+        this.templates?.forEach((item) => {
+            switch (item.getType()) {
+                case 'header':
+                    this.headerFacet = item.template;
+                    break;
+                case 'footer':
+                    this.footerFacet = item.template;
+                    break;
+                case 'indicator':
+                    this.indicatorFacet = item.template;
+                    break;
+                case 'closeicon':
+                    this.closeIconTemplate = item.template;
+                    break;
+                case 'itemnexticon':
+                    this.itemNextIconTemplate = item.template;
+                    break;
+                case 'itempreviousicon':
+                    this.itemPreviousIconTemplate = item.template;
+                    break;
+                case 'previousthumbnailicon':
+                    this.previousThumbnailIconTemplate = item.template;
+                    break;
+                case 'nextthumbnailicon':
+                    this.nextThumbnailIconTemplate = item.template;
+                    break;
+                case 'caption':
+                    this.captionFacet = item.template;
+                    break;
+                case 'item':
+                    this.itemTemplate = item.template;
+                    break;
+                case 'thumbnail':
+                    this.thumbnailTemplate = item.template;
+                    break;
+            }
+        });
+    }
+    ngOnChanges(simpleChanges) {
+        super.ngOnChanges(simpleChanges);
+        if (simpleChanges.value && simpleChanges.value.currentValue?.length < this.numVisible) {
+            this.numVisibleLimit = simpleChanges.value.currentValue.length;
+        }
+        else {
+            this.numVisibleLimit = 0;
+        }
+    }
+    onMaskHide(event) {
+        if (!event || event.target === event.currentTarget) {
+            this.visible = false;
+            this.visibleChange.emit(false);
+        }
+    }
+    onActiveItemChange(index) {
+        if (this.activeIndex !== index) {
+            this.activeIndex = index;
+            this.activeIndexChange.emit(index);
+        }
+    }
+    onAnimationStart(event) {
+        switch (event.toState) {
+            case 'visible':
+                this.enableModality();
+                setTimeout(() => {
+                    focus(findSingle(this.container.nativeElement, '[data-pc-section="closebutton"]'));
+                }, 25);
+                break;
+            case 'void':
+                addClass(this.mask?.nativeElement, 'p-overlay-mask-leave');
+                break;
+        }
+    }
+    onAnimationEnd(event) {
+        switch (event.toState) {
+            case 'void':
+                this.disableModality();
+                break;
+        }
+    }
+    enableModality() {
+        blockBodyScroll();
+        this.cd.markForCheck();
+        if (this.mask) {
+            ZIndexUtils.set('modal', this.mask.nativeElement, this.baseZIndex || this.config.zIndex.modal);
+        }
+    }
+    disableModality() {
+        unblockBodyScroll();
+        this.maskVisible = false;
+        this.cd.markForCheck();
+        if (this.mask) {
+            ZIndexUtils.clear(this.mask.nativeElement);
+        }
+    }
+    ngOnDestroy() {
+        if (this.fullScreen) {
+            removeClass(this.document.body, 'p-overflow-hidden');
+        }
+        if (this.mask) {
+            this.disableModality();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: Galleria, deps: [{ token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.2.4", type: Galleria, isStandalone: false, selector: "p-galleria", inputs: { activeIndex: "activeIndex", fullScreen: ["fullScreen", "fullScreen", booleanAttribute], id: "id", value: "value", numVisible: ["numVisible", "numVisible", numberAttribute], responsiveOptions: "responsiveOptions", showItemNavigators: ["showItemNavigators", "showItemNavigators", booleanAttribute], showThumbnailNavigators: ["showThumbnailNavigators", "showThumbnailNavigators", booleanAttribute], showItemNavigatorsOnHover: ["showItemNavigatorsOnHover", "showItemNavigatorsOnHover", booleanAttribute], changeItemOnIndicatorHover: ["changeItemOnIndicatorHover", "changeItemOnIndicatorHover", booleanAttribute], circular: ["circular", "circular", booleanAttribute], autoPlay: ["autoPlay", "autoPlay", booleanAttribute], shouldStopAutoplayByClick: ["shouldStopAutoplayByClick", "shouldStopAutoplayByClick", booleanAttribute], transitionInterval: ["transitionInterval", "transitionInterval", numberAttribute], showThumbnails: ["showThumbnails", "showThumbnails", booleanAttribute], thumbnailsPosition: "thumbnailsPosition", verticalThumbnailViewPortHeight: "verticalThumbnailViewPortHeight", showIndicators: ["showIndicators", "showIndicators", booleanAttribute], showIndicatorsOnItem: ["showIndicatorsOnItem", "showIndicatorsOnItem", booleanAttribute], indicatorsPosition: "indicatorsPosition", baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], maskClass: "maskClass", containerClass: "containerClass", containerStyle: "containerStyle", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", visible: "visible" }, outputs: { activeIndexChange: "activeIndexChange", visibleChange: "visibleChange" }, providers: [GalleriaStyle], queries: [{ propertyName: "headerTemplate", first: true, predicate: ["header"] }, { propertyName: "footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "indicatorTemplate", first: true, predicate: ["indicator"] }, { propertyName: "captionTemplate", first: true, predicate: ["caption"] }, { propertyName: "_closeIconTemplate", first: true, predicate: ["closeicon"] }, { propertyName: "_previousThumbnailIconTemplate", first: true, predicate: ["previousthumbnailicon"] }, { propertyName: "_nextThumbnailIconTemplate", first: true, predicate: ["nextthumbnailicon"] }, { propertyName: "_itemPreviousIconTemplate", first: true, predicate: ["itempreviousicon"] }, { propertyName: "_itemNextIconTemplate", first: true, predicate: ["itemnexticon"] }, { propertyName: "_itemTemplate", first: true, predicate: ["item"] }, { propertyName: "_thumbnailTemplate", first: true, predicate: ["thumbnail"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "mask", first: true, predicate: ["mask"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+        <div *ngIf="fullScreen; else windowed" #container>
+            <div *ngIf="maskVisible" #mask [ngClass]="cx('mask')" [class]="maskClass" [attr.role]="fullScreen ? 'dialog' : 'region'" [attr.aria-modal]="fullScreen ? 'true' : undefined" (click)="onMaskHide($event)">
+                <p-galleriaContent
+                    *ngIf="visible"
+                    [@animation]="{
+                        value: 'visible',
+                        params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions }
+                    }"
+                    (@animation.start)="onAnimationStart($event)"
+                    (@animation.done)="onAnimationEnd($event)"
+                    [value]="value"
+                    [activeIndex]="activeIndex"
+                    [numVisible]="numVisibleLimit || numVisible"
+                    (maskHide)="onMaskHide()"
+                    (activeItemChange)="onActiveItemChange($event)"
+                    [ngStyle]="containerStyle"
+                    [fullScreen]="fullScreen"
+                ></p-galleriaContent>
+            </div>
+        </div>
+
+        <ng-template #windowed>
+            <p-galleriaContent [value]="value" [activeIndex]="activeIndex" [numVisible]="numVisibleLimit || numVisible" (activeItemChange)="onActiveItemChange($event)"></p-galleriaContent>
+        </ng-template>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(() => GalleriaContent), selector: "p-galleriaContent", inputs: ["activeIndex", "value", "numVisible", "fullScreen"], outputs: ["maskHide", "activeItemChange"] }], animations: [
+            trigger('animation', [
+                transition('void => visible', [style$1({ transform: 'scale(0.7)', opacity: 0 }), animate('{{showTransitionParams}}')]),
+                transition('visible => void', [animate('{{hideTransitionParams}}', style$1({ transform: 'scale(0.7)', opacity: 0 }))])
+            ])
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: Galleria, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-galleria',
+                    standalone: false,
+                    template: `
+        <div *ngIf="fullScreen; else windowed" #container>
+            <div *ngIf="maskVisible" #mask [ngClass]="cx('mask')" [class]="maskClass" [attr.role]="fullScreen ? 'dialog' : 'region'" [attr.aria-modal]="fullScreen ? 'true' : undefined" (click)="onMaskHide($event)">
+                <p-galleriaContent
+                    *ngIf="visible"
+                    [@animation]="{
+                        value: 'visible',
+                        params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions }
+                    }"
+                    (@animation.start)="onAnimationStart($event)"
+                    (@animation.done)="onAnimationEnd($event)"
+                    [value]="value"
+                    [activeIndex]="activeIndex"
+                    [numVisible]="numVisibleLimit || numVisible"
+                    (maskHide)="onMaskHide()"
+                    (activeItemChange)="onActiveItemChange($event)"
+                    [ngStyle]="containerStyle"
+                    [fullScreen]="fullScreen"
+                ></p-galleriaContent>
+            </div>
+        </div>
+
+        <ng-template #windowed>
+            <p-galleriaContent [value]="value" [activeIndex]="activeIndex" [numVisible]="numVisibleLimit || numVisible" (activeItemChange)="onActiveItemChange($event)"></p-galleriaContent>
+        </ng-template>
+    `,
+                    animations: [
+                        trigger('animation', [
+                            transition('void => visible', [style$1({ transform: 'scale(0.7)', opacity: 0 }), animate('{{showTransitionParams}}')]),
+                            transition('visible => void', [animate('{{hideTransitionParams}}', style$1({ transform: 'scale(0.7)', opacity: 0 }))])
+                        ])
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    providers: [GalleriaStyle]
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { activeIndex: [{
+                type: Input
+            }], fullScreen: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], id: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], numVisible: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], responsiveOptions: [{
+                type: Input
+            }], showItemNavigators: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], showThumbnailNavigators: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], showItemNavigatorsOnHover: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], changeItemOnIndicatorHover: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], circular: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], autoPlay: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], shouldStopAutoplayByClick: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], transitionInterval: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], showThumbnails: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], thumbnailsPosition: [{
+                type: Input
+            }], verticalThumbnailViewPortHeight: [{
+                type: Input
+            }], showIndicators: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], showIndicatorsOnItem: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], indicatorsPosition: [{
+                type: Input
+            }], baseZIndex: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], maskClass: [{
+                type: Input
+            }], containerClass: [{
+                type: Input
+            }], containerStyle: [{
+                type: Input
+            }], showTransitionOptions: [{
+                type: Input
+            }], hideTransitionOptions: [{
+                type: Input
+            }], visible: [{
+                type: Input
+            }], activeIndexChange: [{
+                type: Output
+            }], visibleChange: [{
+                type: Output
+            }], mask: [{
+                type: ViewChild,
+                args: ['mask']
+            }], container: [{
+                type: ViewChild,
+                args: ['container']
+            }], headerTemplate: [{
+                type: ContentChild,
+                args: ['header', { descendants: false }]
+            }], footerTemplate: [{
+                type: ContentChild,
+                args: ['footer', { descendants: false, static: false }]
+            }], indicatorTemplate: [{
+                type: ContentChild,
+                args: ['indicator', { descendants: false }]
+            }], captionTemplate: [{
+                type: ContentChild,
+                args: ['caption', { descendants: false }]
+            }], _closeIconTemplate: [{
+                type: ContentChild,
+                args: ['closeicon', { descendants: false }]
+            }], _previousThumbnailIconTemplate: [{
+                type: ContentChild,
+                args: ['previousthumbnailicon', { descendants: false }]
+            }], _nextThumbnailIconTemplate: [{
+                type: ContentChild,
+                args: ['nextthumbnailicon', { descendants: false }]
+            }], _itemPreviousIconTemplate: [{
+                type: ContentChild,
+                args: ['itempreviousicon', { descendants: false }]
+            }], _itemNextIconTemplate: [{
+                type: ContentChild,
+                args: ['itemnexticon', { descendants: false }]
+            }], _itemTemplate: [{
+                type: ContentChild,
+                args: ['item', { descendants: false }]
+            }], _thumbnailTemplate: [{
+                type: ContentChild,
+                args: ['thumbnail', { descendants: false, static: false }]
+            }], templates: [{
+                type: ContentChildren,
+                args: [PrimeTemplate]
+            }] } });
+class GalleriaContent extends BaseComponent {
+    galleria;
+    cd;
+    differs;
+    elementRef;
+    get activeIndex() {
+        return this._activeIndex;
+    }
+    set activeIndex(activeIndex) {
+        this._activeIndex = activeIndex;
+    }
+    value = [];
+    numVisible;
+    fullScreen;
+    maskHide = new EventEmitter();
+    activeItemChange = new EventEmitter();
+    closeButton;
+    _componentStyle = inject(GalleriaStyle);
+    id;
+    _activeIndex = 0;
+    slideShowActive = true;
+    interval;
+    styleClass;
+    differ;
+    constructor(galleria, cd, differs, elementRef) {
+        super();
+        this.galleria = galleria;
+        this.cd = cd;
+        this.differs = differs;
+        this.elementRef = elementRef;
+        this.id = this.galleria.id || uuid('pn_id_');
+        this.differ = this.differs.find(this.galleria).create();
+    }
+    // For custom fullscreen
+    handleFullscreenChange(event) {
+        if (document?.fullscreenElement === this.elementRef.nativeElement?.children[0]) {
+            this.fullScreen = true;
+        }
+        else {
+            this.fullScreen = false;
+        }
+    }
+    ngDoCheck() {
+        if (isPlatformBrowser(this.galleria.platformId)) {
+            const changes = this.differ.diff(this.galleria);
+            if (changes && changes.forEachItem.length > 0) {
+                // Because we change the properties of the parent component,
+                // and the children take our entity from the injector.
+                // We can tell the children to redraw themselves when we change the properties of the parent component.
+                // Since we have an onPush strategy
+                this.cd.markForCheck();
+            }
+        }
+    }
+    shouldRenderFooter() {
+        return (this.galleria.footerFacet && this.galleria.templates.toArray().length > 0) || this.galleria.footerTemplate;
+    }
+    startSlideShow() {
+        if (isPlatformBrowser(this.galleria.platformId)) {
+            this.interval = setInterval(() => {
+                let activeIndex = this.galleria.circular && this.value.length - 1 === this.activeIndex ? 0 : this.activeIndex + 1;
+                this.onActiveIndexChange(activeIndex);
+                this.activeIndex = activeIndex;
+            }, this.galleria.transitionInterval);
+            this.slideShowActive = true;
+        }
+    }
+    stopSlideShow() {
+        if (this.galleria.autoPlay && !this.galleria.shouldStopAutoplayByClick) {
+            return;
+        }
+        if (this.interval) {
+            clearInterval(this.interval);
+        }
+        this.slideShowActive = false;
+    }
+    getPositionClass(preClassName, position) {
+        const positions = ['top', 'left', 'bottom', 'right'];
+        const pos = positions.find((item) => item === position);
+        return pos ? `${preClassName}-${pos}` : '';
+    }
+    isVertical() {
+        return this.galleria.thumbnailsPosition === 'left' || this.galleria.thumbnailsPosition === 'right';
+    }
+    onActiveIndexChange(index) {
+        if (this.activeIndex !== index) {
+            this.activeIndex = index;
+            this.activeItemChange.emit(this.activeIndex);
+        }
+    }
+    closeAriaLabel() {
+        return this.config.translation.aria ? this.config.translation.aria.close : undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: GalleriaContent, deps: [{ token: Galleria }, { token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.2.4", type: GalleriaContent, isStandalone: false, selector: "p-galleriaContent", inputs: { activeIndex: "activeIndex", value: "value", numVisible: ["numVisible", "numVisible", numberAttribute], fullScreen: ["fullScreen", "fullScreen", booleanAttribute] }, outputs: { maskHide: "maskHide", activeItemChange: "activeItemChange" }, host: { listeners: { "document:fullscreenchange": "handleFullscreenChange($event)" } }, providers: [GalleriaStyle], viewQueries: [{ propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+        <div [attr.id]="id" [attr.role]="'region'" *ngIf="value && value.length > 0" [class]="cn(cx('root'), galleria.containerClass)" [ngStyle]="!galleria.fullScreen ? galleria.containerStyle : {}" pFocusTrap [pFocusTrapDisabled]="!fullScreen">
+            <button *ngIf="galleria.fullScreen" type="button" [class]="cx('closeButton')" (click)="maskHide.emit()" [attr.aria-label]="closeAriaLabel()" [attr.data-pc-section]="'closebutton'">
+                <svg data-p-icon="times" *ngIf="!galleria.closeIconTemplate && !galleria._closeIconTemplate" [class]="cx('closeIcon')" />
+                <ng-template *ngTemplateOutlet="galleria.closeIconTemplate || galleria._closeIconTemplate"></ng-template>
+            </button>
+            <div *ngIf="galleria.templates && (galleria.headerFacet || galleria.headerTemplate)" [class]="cx('header')">
+                <p-galleriaItemSlot type="header" [templates]="galleria.templates"></p-galleriaItemSlot>
+            </div>
+            <div [class]="cx('content')" [attr.aria-live]="galleria.autoPlay ? 'polite' : 'off'">
+                <p-galleriaItem
+                    [id]="id"
+                    [value]="value"
+                    [activeIndex]="activeIndex"
+                    [circular]="galleria.circular"
+                    [templates]="galleria.templates"
+                    (onActiveIndexChange)="onActiveIndexChange($event)"
+                    [showIndicators]="galleria.showIndicators"
+                    [changeItemOnIndicatorHover]="galleria.changeItemOnIndicatorHover"
+                    [indicatorFacet]="galleria.indicatorFacet"
+                    [captionFacet]="galleria.captionFacet"
+                    [showItemNavigators]="galleria.showItemNavigators"
+                    [autoPlay]="galleria.autoPlay"
+                    [slideShowActive]="slideShowActive"
+                    (startSlideShow)="startSlideShow()"
+                    (stopSlideShow)="stopSlideShow()"
+                ></p-galleriaItem>
+
+                <p-galleriaThumbnails
+                    *ngIf="galleria.showThumbnails"
+                    [containerId]="id"
+                    [value]="value"
+                    (onActiveIndexChange)="onActiveIndexChange($event)"
+                    [activeIndex]="activeIndex"
+                    [templates]="galleria.templates"
+                    [numVisible]="numVisible"
+                    [responsiveOptions]="galleria.responsiveOptions"
+                    [circular]="galleria.circular"
+                    [isVertical]="isVertical()"
+                    [contentHeight]="galleria.verticalThumbnailViewPortHeight"
+                    [showThumbnailNavigators]="galleria.showThumbnailNavigators"
+                    [slideShowActive]="slideShowActive"
+                    (stopSlideShow)="stopSlideShow()"
+                ></p-galleriaThumbnails>
+            </div>
+            <div *ngIf="shouldRenderFooter()" [class]="cx('footer')">
+                <p-galleriaItemSlot type="footer" [templates]="galleria.templates"></p-galleriaItemSlot>
+            </div>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(() => TimesIcon), selector: "[data-p-icon=\"times\"]" }, { kind: "directive", type: i0.forwardRef(() => FocusTrap), selector: "[pFocusTrap]", inputs: ["pFocusTrapDisabled"] }, { kind: "component", type: i0.forwardRef(() => GalleriaItemSlot), selector: "p-galleriaItemSlot", inputs: ["templates", "index", "item", "type"] }, { kind: "component", type: i0.forwardRef(() => GalleriaItem), selector: "p-galleriaItem", inputs: ["id", "circular", "value", "showItemNavigators", "showIndicators", "slideShowActive", "changeItemOnIndicatorHover", "autoPlay", "templates", "indicatorFacet", "captionFacet", "activeIndex"], outputs: ["startSlideShow", "stopSlideShow", "onActiveIndexChange"] }, { kind: "component", type: i0.forwardRef(() => GalleriaThumbnails), selector: "p-galleriaThumbnails", inputs: ["containerId", "value", "isVertical", "slideShowActive", "circular", "responsiveOptions", "contentHeight", "showThumbnailNavigators", "templates", "numVisible", "activeIndex"], outputs: ["onActiveIndexChange", "stopSlideShow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: GalleriaContent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-galleriaContent',
+                    standalone: false,
+                    template: `
+        <div [attr.id]="id" [attr.role]="'region'" *ngIf="value && value.length > 0" [class]="cn(cx('root'), galleria.containerClass)" [ngStyle]="!galleria.fullScreen ? galleria.containerStyle : {}" pFocusTrap [pFocusTrapDisabled]="!fullScreen">
+            <button *ngIf="galleria.fullScreen" type="button" [class]="cx('closeButton')" (click)="maskHide.emit()" [attr.aria-label]="closeAriaLabel()" [attr.data-pc-section]="'closebutton'">
+                <svg data-p-icon="times" *ngIf="!galleria.closeIconTemplate && !galleria._closeIconTemplate" [class]="cx('closeIcon')" />
+                <ng-template *ngTemplateOutlet="galleria.closeIconTemplate || galleria._closeIconTemplate"></ng-template>
+            </button>
+            <div *ngIf="galleria.templates && (galleria.headerFacet || galleria.headerTemplate)" [class]="cx('header')">
+                <p-galleriaItemSlot type="header" [templates]="galleria.templates"></p-galleriaItemSlot>
+            </div>
+            <div [class]="cx('content')" [attr.aria-live]="galleria.autoPlay ? 'polite' : 'off'">
+                <p-galleriaItem
+                    [id]="id"
+                    [value]="value"
+                    [activeIndex]="activeIndex"
+                    [circular]="galleria.circular"
+                    [templates]="galleria.templates"
+                    (onActiveIndexChange)="onActiveIndexChange($event)"
+                    [showIndicators]="galleria.showIndicators"
+                    [changeItemOnIndicatorHover]="galleria.changeItemOnIndicatorHover"
+                    [indicatorFacet]="galleria.indicatorFacet"
+                    [captionFacet]="galleria.captionFacet"
+                    [showItemNavigators]="galleria.showItemNavigators"
+                    [autoPlay]="galleria.autoPlay"
+                    [slideShowActive]="slideShowActive"
+                    (startSlideShow)="startSlideShow()"
+                    (stopSlideShow)="stopSlideShow()"
+                ></p-galleriaItem>
+
+                <p-galleriaThumbnails
+                    *ngIf="galleria.showThumbnails"
+                    [containerId]="id"
+                    [value]="value"
+                    (onActiveIndexChange)="onActiveIndexChange($event)"
+                    [activeIndex]="activeIndex"
+                    [templates]="galleria.templates"
+                    [numVisible]="numVisible"
+                    [responsiveOptions]="galleria.responsiveOptions"
+                    [circular]="galleria.circular"
+                    [isVertical]="isVertical()"
+                    [contentHeight]="galleria.verticalThumbnailViewPortHeight"
+                    [showThumbnailNavigators]="galleria.showThumbnailNavigators"
+                    [slideShowActive]="slideShowActive"
+                    (stopSlideShow)="stopSlideShow()"
+                ></p-galleriaThumbnails>
+            </div>
+            <div *ngIf="shouldRenderFooter()" [class]="cx('footer')">
+                <p-galleriaItemSlot type="footer" [templates]="galleria.templates"></p-galleriaItemSlot>
+            </div>
+        </div>
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [GalleriaStyle]
+                }]
+        }], ctorParameters: () => [{ type: Galleria }, { type: i0.ChangeDetectorRef }, { type: i0.KeyValueDiffers }, { type: i0.ElementRef }], propDecorators: { activeIndex: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], numVisible: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], fullScreen: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], maskHide: [{
+                type: Output
+            }], activeItemChange: [{
+                type: Output
+            }], closeButton: [{
+                type: ViewChild,
+                args: ['closeButton']
+            }], handleFullscreenChange: [{
+                type: HostListener,
+                args: ['document:fullscreenchange', ['$event']]
+            }] } });
+class GalleriaItemSlot {
+    templates;
+    index;
+    get item() {
+        return this._item;
+    }
+    shouldRender() {
+        return (this.contentTemplate ||
+            this.galleria._itemTemplate ||
+            this.galleria.itemTemplate ||
+            this.galleria.captionTemplate ||
+            this.galleria.captionTemplate ||
+            this.galleria.captionFacet ||
+            this.galleria.thumbnailTemplate ||
+            this.galleria._thumbnailTemplate ||
+            this.galleria.footerTemplate);
+    }
+    galleria = inject(Galleria);
+    set item(item) {
+        this._item = item;
+        if (this.templates && this.templates?.toArray().length > 0) {
+            this.templates.forEach((item) => {
+                if (item.getType() === this.type) {
+                    switch (this.type) {
+                        case 'item':
+                        case 'caption':
+                        case 'thumbnail':
+                            this.context = { $implicit: this.item };
+                            this.contentTemplate = item.template;
+                            break;
+                        case 'footer':
+                            this.context = { $implicit: this.item };
+                            this.contentTemplate = item.template;
+                            break;
+                    }
+                }
+            });
+        }
+        else {
+            this.getContentTemplate();
+        }
+    }
+    getContentTemplate() {
+        switch (this.type) {
+            case 'item':
+                this.context = { $implicit: this.item };
+                this.contentTemplate = this.galleria._itemTemplate || this.galleria.itemTemplate;
+                break;
+            case 'caption':
+                this.context = { $implicit: this.item };
+                this.contentTemplate = this.galleria.captionTemplate || this.galleria.captionFacet;
+                break;
+            case 'thumbnail':
+                this.context = { $implicit: this.item };
+                this.contentTemplate = this.galleria.thumbnailTemplate || this.galleria._thumbnailTemplate;
+                break;
+            case 'indicator':
+                this.context = { $implicit: this.index };
+                this.contentTemplate = this.galleria.indicatorTemplate || this.galleria.indicatorFacet;
+                break;
+            case 'footer':
+                this.context = { $implicit: this.item };
+                this.contentTemplate = this.galleria.footerTemplate || this.galleria.footerFacet;
+                break;
+            default:
+                this.context = { $implicit: this.item };
+                this.contentTemplate = this.galleria._itemTemplate || this.galleria.itemTemplate;
+        }
+    }
+    type;
+    contentTemplate;
+    context;
+    _item;
+    ngAfterContentInit() {
+        if (this.templates && this.templates.toArray().length > 0) {
+            this.templates?.forEach((item) => {
+                if (item.getType() === this.type) {
+                    switch (this.type) {
+                        case 'item':
+                        case 'caption':
+                        case 'thumbnail':
+                            this.context = { $implicit: this.item };
+                            this.contentTemplate = item.template;
+                            break;
+                        case 'indicator':
+                            this.context = { $implicit: this.index };
+                            this.contentTemplate = item.template;
+                            break;
+                        case 'footer':
+                            this.context = { $implicit: this.item };
+                            this.contentTemplate = item.template;
+                            break;
+                        default:
+                            this.context = { $implicit: this.item };
+                            this.contentTemplate = item.template;
+                            break;
+                    }
+                }
+            });
+        }
+        else {
+            this.getContentTemplate();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: GalleriaItemSlot, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.2.4", type: GalleriaItemSlot, isStandalone: false, selector: "p-galleriaItemSlot", inputs: { templates: "templates", index: ["index", "index", numberAttribute], item: "item", type: "type" }, ngImport: i0, template: `
+        <ng-container *ngIf="shouldRender()">
+            <ng-container *ngTemplateOutlet="contentTemplate; context: context"></ng-container>
+        </ng-container>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: GalleriaItemSlot, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-galleriaItemSlot',
+                    standalone: false,
+                    template: `
+        <ng-container *ngIf="shouldRender()">
+            <ng-container *ngTemplateOutlet="contentTemplate; context: context"></ng-container>
+        </ng-container>
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], propDecorators: { templates: [{
+                type: Input
+            }], index: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], item: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }] } });
+class GalleriaItem extends BaseComponent {
+    galleria;
+    id;
+    circular = false;
+    value;
+    showItemNavigators = false;
+    showIndicators = true;
+    slideShowActive = true;
+    changeItemOnIndicatorHover = true;
+    autoPlay = false;
+    templates;
+    indicatorFacet;
+    captionFacet;
+    startSlideShow = new EventEmitter();
+    stopSlideShow = new EventEmitter();
+    onActiveIndexChange = new EventEmitter();
+    _componentStyle = inject(GalleriaStyle);
+    get activeIndex() {
+        return this._activeIndex;
+    }
+    set activeIndex(activeIndex) {
+        this._activeIndex = activeIndex;
+    }
+    get activeItem() {
+        return this.value && this.value[this._activeIndex];
+    }
+    _activeIndex = 0;
+    leftButtonFocused = false;
+    rightButtonFocused = false;
+    constructor(galleria) {
+        super();
+        this.galleria = galleria;
+    }
+    ngOnChanges({ autoPlay }) {
+        super.ngOnChanges({ autoPlay });
+        if (autoPlay?.currentValue) {
+            this.startSlideShow.emit();
+        }
+        if (autoPlay && autoPlay.currentValue === false) {
+            this.stopTheSlideShow();
+        }
+    }
+    next() {
+        let nextItemIndex = this.activeIndex + 1;
+        let activeIndex = this.circular && this.value.length - 1 === this.activeIndex ? 0 : nextItemIndex;
+        this.onActiveIndexChange.emit(activeIndex);
+    }
+    prev() {
+        let prevItemIndex = this.activeIndex !== 0 ? this.activeIndex - 1 : 0;
+        let activeIndex = this.circular && this.activeIndex === 0 ? this.value.length - 1 : prevItemIndex;
+        this.onActiveIndexChange.emit(activeIndex);
+    }
+    onButtonFocus(pos) {
+        if (pos === 'left') {
+            this.leftButtonFocused = true;
+        }
+        else
+            this.rightButtonFocused = true;
+    }
+    onButtonBlur(pos) {
+        if (pos === 'left') {
+            this.leftButtonFocused = false;
+        }
+        else
+            this.rightButtonFocused = false;
+    }
+    stopTheSlideShow() {
+        if (this.slideShowActive && this.stopSlideShow) {
+            this.stopSlideShow.emit();
+        }
+    }
+    navForward(e) {
+        this.stopTheSlideShow();
+        this.next();
+        if (e && e.cancelable) {
+            e.preventDefault();
+        }
+    }
+    navBackward(e) {
+        this.stopTheSlideShow();
+        this.prev();
+        if (e && e.cancelable) {
+            e.preventDefault();
+        }
+    }
+    onIndicatorClick(index) {
+        this.stopTheSlideShow();
+        this.onActiveIndexChange.emit(index);
+    }
+    onIndicatorMouseEnter(index) {
+        if (this.changeItemOnIndicatorHover) {
+            this.stopTheSlideShow();
+            this.onActiveIndexChange.emit(index);
+        }
+    }
+    onIndicatorKeyDown(event, index) {
+        switch (event.code) {
+            case 'Enter':
+            case 'Space':
+                this.stopTheSlideShow();
+                this.onActiveIndexChange.emit(index);
+                event.preventDefault();
+                break;
+            case 'ArrowDown':
+            case 'ArrowUp':
+                event.preventDefault();
+                break;
+            default:
+                break;
+        }
+    }
+    isNavForwardDisabled() {
+        return !this.circular && this.activeIndex === this.value.length - 1;
+    }
+    isNavBackwardDisabled() {
+        return !this.circular && this.activeIndex === 0;
+    }
+    isIndicatorItemActive(index) {
+        return this.activeIndex === index;
+    }
+    ariaSlideLabel() {
+        return this.galleria.config.translation.aria ? this.galleria.config.translation.aria.slide : undefined;
+    }
+    ariaSlideNumber(value) {
+        return this.galleria.config.translation.aria ? this.galleria.config.translation.aria.slideNumber.replace(/{slideNumber}/g, value) : undefined;
+    }
+    ariaPageLabel(value) {
+        return this.galleria.config.translation.aria ? this.galleria.config.translation.aria.pageLabel.replace(/{page}/g, value) : undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: GalleriaItem, deps: [{ token: Galleria }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.2.4", type: GalleriaItem, isStandalone: false, selector: "p-galleriaItem", inputs: { id: "id", circular: ["circular", "circular", booleanAttribute], value: "value", showItemNavigators: ["showItemNavigators", "showItemNavigators", booleanAttribute], showIndicators: ["showIndicators", "showIndicators", booleanAttribute], slideShowActive: ["slideShowActive", "slideShowActive", booleanAttribute], changeItemOnIndicatorHover: ["changeItemOnIndicatorHover", "changeItemOnIndicatorHover", booleanAttribute], autoPlay: ["autoPlay", "autoPlay", booleanAttribute], templates: "templates", indicatorFacet: "indicatorFacet", captionFacet: "captionFacet", activeIndex: "activeIndex" }, outputs: { startSlideShow: "startSlideShow", stopSlideShow: "stopSlideShow", onActiveIndexChange: "onActiveIndexChange" }, host: { properties: { "class": "cx('itemsContainer')" } }, providers: [GalleriaStyle], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+        <div [class]="cx('items')">
+            <button *ngIf="showItemNavigators" type="button" role="navigation" [class]="cx('prevButton')" (click)="navBackward($event)" (focus)="onButtonFocus('left')" (blur)="onButtonBlur('left')">
+                <svg data-p-icon="chevron-left" *ngIf="!galleria.itemPreviousIconTemplate && !galleria._itemPreviousIconTemplate" [class]="cx('prevIcon')" />
+                <ng-template *ngTemplateOutlet="galleria.itemPreviousIconTemplate || galleria._itemPreviousIconTemplate"></ng-template>
+            </button>
+            <div [id]="id + '_item_' + activeIndex" role="group" [class]="cx('item')" [attr.aria-label]="ariaSlideNumber(activeIndex + 1)" [attr.aria-roledescription]="ariaSlideLabel()">
+                <p-galleriaItemSlot type="item" [item]="activeItem" [templates]="templates" [class]="cx('item')"></p-galleriaItemSlot>
+            </div>
+            <button *ngIf="showItemNavigators" type="button" [class]="cx('nextButton')" (click)="navForward($event)" role="navigation" (focus)="onButtonFocus('right')" (blur)="onButtonBlur('right')">
+                <svg data-p-icon="chevron-right" *ngIf="!galleria.itemNextIconTemplate && !galleria._itemNextIconTemplate" [class]="cx('nextIcon')" />
+                <ng-template *ngTemplateOutlet="galleria.itemNextIconTemplate || galleria._itemNextIconTemplate"></ng-template>
+            </button>
+            <div [class]="cx('caption')" *ngIf="captionFacet || galleria.captionTemplate">
+                <p-galleriaItemSlot type="caption" [item]="activeItem" [templates]="templates"></p-galleriaItemSlot>
+            </div>
+        </div>
+        <ul *ngIf="showIndicators" [class]="cx('indicatorList')">
+            <li
+                *ngFor="let item of value; let index = index"
+                tabindex="0"
+                (click)="onIndicatorClick(index)"
+                (mouseenter)="onIndicatorMouseEnter(index)"
+                (keydown)="onIndicatorKeyDown($event, index)"
+                [class]="cx('indicator', { index })"
+                [attr.aria-label]="ariaPageLabel(index + 1)"
+                [attr.aria-selected]="activeIndex === index"
+                [attr.aria-controls]="id + '_item_' + index"
+            >
+                <button type="button" tabIndex="-1" [class]="cx('indicatorButton')" *ngIf="!indicatorFacet && !galleria.indicatorTemplate"></button>
+                <p-galleriaItemSlot type="indicator" [index]="index" [templates]="templates"></p-galleriaItemSlot>
+            </li>
+        </ul>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(() => ChevronRightIcon), selector: "[data-p-icon=\"chevron-right\"]" }, { kind: "component", type: i0.forwardRef(() => ChevronLeftIcon), selector: "[data-p-icon=\"chevron-left\"]" }, { kind: "component", type: i0.forwardRef(() => GalleriaItemSlot), selector: "p-galleriaItemSlot", inputs: ["templates", "index", "item", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: GalleriaItem, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-galleriaItem',
+                    standalone: false,
+                    template: `
+        <div [class]="cx('items')">
+            <button *ngIf="showItemNavigators" type="button" role="navigation" [class]="cx('prevButton')" (click)="navBackward($event)" (focus)="onButtonFocus('left')" (blur)="onButtonBlur('left')">
+                <svg data-p-icon="chevron-left" *ngIf="!galleria.itemPreviousIconTemplate && !galleria._itemPreviousIconTemplate" [class]="cx('prevIcon')" />
+                <ng-template *ngTemplateOutlet="galleria.itemPreviousIconTemplate || galleria._itemPreviousIconTemplate"></ng-template>
+            </button>
+            <div [id]="id + '_item_' + activeIndex" role="group" [class]="cx('item')" [attr.aria-label]="ariaSlideNumber(activeIndex + 1)" [attr.aria-roledescription]="ariaSlideLabel()">
+                <p-galleriaItemSlot type="item" [item]="activeItem" [templates]="templates" [class]="cx('item')"></p-galleriaItemSlot>
+            </div>
+            <button *ngIf="showItemNavigators" type="button" [class]="cx('nextButton')" (click)="navForward($event)" role="navigation" (focus)="onButtonFocus('right')" (blur)="onButtonBlur('right')">
+                <svg data-p-icon="chevron-right" *ngIf="!galleria.itemNextIconTemplate && !galleria._itemNextIconTemplate" [class]="cx('nextIcon')" />
+                <ng-template *ngTemplateOutlet="galleria.itemNextIconTemplate || galleria._itemNextIconTemplate"></ng-template>
+            </button>
+            <div [class]="cx('caption')" *ngIf="captionFacet || galleria.captionTemplate">
+                <p-galleriaItemSlot type="caption" [item]="activeItem" [templates]="templates"></p-galleriaItemSlot>
+            </div>
+        </div>
+        <ul *ngIf="showIndicators" [class]="cx('indicatorList')">
+            <li
+                *ngFor="let item of value; let index = index"
+                tabindex="0"
+                (click)="onIndicatorClick(index)"
+                (mouseenter)="onIndicatorMouseEnter(index)"
+                (keydown)="onIndicatorKeyDown($event, index)"
+                [class]="cx('indicator', { index })"
+                [attr.aria-label]="ariaPageLabel(index + 1)"
+                [attr.aria-selected]="activeIndex === index"
+                [attr.aria-controls]="id + '_item_' + index"
+            >
+                <button type="button" tabIndex="-1" [class]="cx('indicatorButton')" *ngIf="!indicatorFacet && !galleria.indicatorTemplate"></button>
+                <p-galleriaItemSlot type="indicator" [index]="index" [templates]="templates"></p-galleriaItemSlot>
+            </li>
+        </ul>
+    `,
+                    host: {
+                        '[class]': "cx('itemsContainer')"
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [GalleriaStyle]
+                }]
+        }], ctorParameters: () => [{ type: Galleria }], propDecorators: { id: [{
+                type: Input
+            }], circular: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], value: [{
+                type: Input
+            }], showItemNavigators: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], showIndicators: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], slideShowActive: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], changeItemOnIndicatorHover: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], autoPlay: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], templates: [{
+                type: Input
+            }], indicatorFacet: [{
+                type: Input
+            }], captionFacet: [{
+                type: Input
+            }], startSlideShow: [{
+                type: Output
+            }], stopSlideShow: [{
+                type: Output
+            }], onActiveIndexChange: [{
+                type: Output
+            }], activeIndex: [{
+                type: Input
+            }] } });
+class GalleriaThumbnails extends BaseComponent {
+    galleria;
+    containerId;
+    value;
+    isVertical = false;
+    slideShowActive = false;
+    circular = false;
+    responsiveOptions;
+    contentHeight = '300px';
+    showThumbnailNavigators = true;
+    templates;
+    onActiveIndexChange = new EventEmitter();
+    stopSlideShow = new EventEmitter();
+    itemsContainer;
+    get numVisible() {
+        return this._numVisible;
+    }
+    set numVisible(numVisible) {
+        this._numVisible = numVisible;
+        this._oldNumVisible = this.d_numVisible;
+        this.d_numVisible = numVisible;
+    }
+    get activeIndex() {
+        return this._activeIndex;
+    }
+    set activeIndex(activeIndex) {
+        this._oldactiveIndex = this._activeIndex;
+        this._activeIndex = activeIndex;
+    }
+    index;
+    startPos = null;
+    thumbnailsStyle = null;
+    sortedResponsiveOptions = null;
+    totalShiftedItems = 0;
+    page = 0;
+    documentResizeListener;
+    _numVisible = 0;
+    d_numVisible = 0;
+    _oldNumVisible = 0;
+    _activeIndex = 0;
+    _oldactiveIndex = 0;
+    _componentStyle = inject(GalleriaStyle);
+    constructor(galleria) {
+        super();
+        this.galleria = galleria;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        if (isPlatformBrowser(this.platformId)) {
+            this.createStyle();
+            if (this.responsiveOptions) {
+                this.bindDocumentListeners();
+            }
+        }
+    }
+    ngAfterContentChecked() {
+        let totalShiftedItems = this.totalShiftedItems;
+        if ((this._oldNumVisible !== this.d_numVisible || this._oldactiveIndex !== this._activeIndex) && this.itemsContainer) {
+            if (this._activeIndex <= this.getMedianItemIndex()) {
+                totalShiftedItems = 0;
+            }
+            else if (this.value.length - this.d_numVisible + this.getMedianItemIndex() < this._activeIndex) {
+                totalShiftedItems = this.d_numVisible - this.value.length;
+            }
+            else if (this.value.length - this.d_numVisible < this._activeIndex && this.d_numVisible % 2 === 0) {
+                totalShiftedItems = this._activeIndex * -1 + this.getMedianItemIndex() + 1;
+            }
+            else {
+                totalShiftedItems = this._activeIndex * -1 + this.getMedianItemIndex();
+            }
+            if (totalShiftedItems !== this.totalShiftedItems) {
+                this.totalShiftedItems = totalShiftedItems;
+            }
+            if (this.itemsContainer && this.itemsContainer.nativeElement) {
+                this.itemsContainer.nativeElement.style.transform = this.isVertical ? `translate3d(0, ${totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`;
+            }
+            if (this._oldactiveIndex !== this._activeIndex) {
+                removeClass(this.itemsContainer.nativeElement, 'p-items-hidden');
+                this.itemsContainer.nativeElement.style.transition = 'transform 500ms ease 0s';
+            }
+            this._oldactiveIndex = this._activeIndex;
+            this._oldNumVisible = this.d_numVisible;
+        }
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        if (isPlatformBrowser(this.platformId)) {
+            this.calculatePosition();
+        }
+    }
+    createStyle() {
+        if (!this.thumbnailsStyle) {
+            this.thumbnailsStyle = this.document.createElement('style');
+            setAttribute(this.thumbnailsStyle, 'nonce', this.galleria.config?.csp()?.nonce);
+            this.document.body.appendChild(this.thumbnailsStyle);
+        }
+        let innerHTML = `
+            #${this.containerId} .p-galleria-thumbnail-item {
+                flex: 1 0 ${100 / this.d_numVisible}%
+            }
+        `;
+        if (this.responsiveOptions) {
+            this.sortedResponsiveOptions = [...this.responsiveOptions];
+            this.sortedResponsiveOptions.sort((data1, data2) => {
+                const value1 = data1.breakpoint;
+                const value2 = data2.breakpoint;
+                let result = null;
+                if (value1 == null && value2 != null)
+                    result = -1;
+                else if (value1 != null && value2 == null)
+                    result = 1;
+                else if (value1 == null && value2 == null)
+                    result = 0;
+                else if (typeof value1 === 'string' && typeof value2 === 'string')
+                    result = value1.localeCompare(value2, undefined, { numeric: true });
+                else
+                    result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
+                return -1 * result;
+            });
+            for (let i = 0; i < this.sortedResponsiveOptions.length; i++) {
+                let res = this.sortedResponsiveOptions[i];
+                innerHTML += `
+                    @media screen and (max-width: ${res.breakpoint}) {
+                        #${this.containerId} .p-galleria-thumbnail-item {
+                            flex: 1 0 ${100 / res.numVisible}%
+                        }
+                    }
+                `;
+            }
+        }
+        this.thumbnailsStyle.innerHTML = innerHTML;
+        setAttribute(this.thumbnailsStyle, 'nonce', this.galleria.config?.csp()?.nonce);
+    }
+    calculatePosition() {
+        if (isPlatformBrowser(this.platformId)) {
+            if (this.itemsContainer && this.sortedResponsiveOptions) {
+                let windowWidth = window.innerWidth;
+                let matchedResponsiveData = {
+                    numVisible: this._numVisible
+                };
+                for (let i = 0; i < this.sortedResponsiveOptions.length; i++) {
+                    let res = this.sortedResponsiveOptions[i];
+                    if (parseInt(res.breakpoint, 10) >= windowWidth) {
+                        matchedResponsiveData = res;
+                    }
+                }
+                if (this.d_numVisible !== matchedResponsiveData.numVisible) {
+                    this.d_numVisible = matchedResponsiveData.numVisible;
+                    this.cd.markForCheck();
+                }
+            }
+        }
+    }
+    getTabIndex(index) {
+        return this.isItemActive(index) ? 0 : null;
+    }
+    navForward(e) {
+        this.stopTheSlideShow();
+        let nextItemIndex = this._activeIndex + 1;
+        if (nextItemIndex + this.totalShiftedItems > this.getMedianItemIndex() && (-1 * this.totalShiftedItems < this.getTotalPageNumber() - 1 || this.circular)) {
+            this.step(-1);
+        }
+        let activeIndex = this.circular && this.value.length - 1 === this._activeIndex ? 0 : nextItemIndex;
+        this.onActiveIndexChange.emit(activeIndex);
+        if (e.cancelable) {
+            e.preventDefault();
+        }
+    }
+    navBackward(e) {
+        this.stopTheSlideShow();
+        let prevItemIndex = this._activeIndex !== 0 ? this._activeIndex - 1 : 0;
+        let diff = prevItemIndex + this.totalShiftedItems;
+        if (this.d_numVisible - diff - 1 > this.getMedianItemIndex() && (-1 * this.totalShiftedItems !== 0 || this.circular)) {
+            this.step(1);
+        }
+        let activeIndex = this.circular && this._activeIndex === 0 ? this.value.length - 1 : prevItemIndex;
+        this.onActiveIndexChange.emit(activeIndex);
+        if (e.cancelable) {
+            e.preventDefault();
+        }
+    }
+    onItemClick(index) {
+        this.stopTheSlideShow();
+        let selectedItemIndex = index;
+        if (selectedItemIndex !== this._activeIndex) {
+            const diff = selectedItemIndex + this.totalShiftedItems;
+            let dir = 0;
+            if (selectedItemIndex < this._activeIndex) {
+                dir = this.d_numVisible - diff - 1 - this.getMedianItemIndex();
+                if (dir > 0 && -1 * this.totalShiftedItems !== 0) {
+                    this.step(dir);
+                }
+            }
+            else {
+                dir = this.getMedianItemIndex() - diff;
+                if (dir < 0 && -1 * this.totalShiftedItems < this.getTotalPageNumber() - 1) {
+                    this.step(dir);
+                }
+            }
+            this.activeIndex = selectedItemIndex;
+            this.onActiveIndexChange.emit(this.activeIndex);
+        }
+    }
+    onThumbnailKeydown(event, index) {
+        if (event.code === 'Enter' || event.code === 'Space') {
+            this.onItemClick(index);
+            event.preventDefault();
+        }
+        switch (event.code) {
+            case 'ArrowRight':
+                this.onRightKey();
+                break;
+            case 'ArrowLeft':
+                this.onLeftKey();
+                break;
+            case 'Home':
+                this.onHomeKey();
+                event.preventDefault();
+                break;
+            case 'End':
+                this.onEndKey();
+                event.preventDefault();
+                break;
+            case 'ArrowUp':
+            case 'ArrowDown':
+                event.preventDefault();
+                break;
+            case 'Tab':
+                this.onTabKey();
+                break;
+            default:
+                break;
+        }
+    }
+    onRightKey() {
+        const indicators = find(this.itemsContainer.nativeElement, '[data-pc-section="thumbnailitem"]');
+        const activeIndex = this.findFocusedIndicatorIndex();
+        this.changedFocusedIndicator(activeIndex, activeIndex + 1 === indicators.length ? indicators.length - 1 : activeIndex + 1);
+    }
+    onLeftKey() {
+        const activeIndex = this.findFocusedIndicatorIndex();
+        this.changedFocusedIndicator(activeIndex, activeIndex - 1 <= 0 ? 0 : activeIndex - 1);
+    }
+    onHomeKey() {
+        const activeIndex = this.findFocusedIndicatorIndex();
+        this.changedFocusedIndicator(activeIndex, 0);
+    }
+    onEndKey() {
+        const indicators = find(this.itemsContainer.nativeElement, '[data-pc-section="thumbnailitem"]');
+        const activeIndex = this.findFocusedIndicatorIndex();
+        this.changedFocusedIndicator(activeIndex, indicators.length - 1);
+    }
+    onTabKey() {
+        const indicators = [...find(this.itemsContainer.nativeElement, '[data-pc-section="thumbnailitem"]')];
+        const highlightedIndex = indicators.findIndex((ind) => getAttribute(ind, 'data-p-active') === true);
+        const activeIndicator = findSingle(this.itemsContainer.nativeElement, '[tabindex="0"]');
+        const activeIndex = indicators.findIndex((ind) => ind === activeIndicator.parentElement);
+        indicators[activeIndex].children[0].tabIndex = '-1';
+        indicators[highlightedIndex].children[0].tabIndex = '0';
+    }
+    findFocusedIndicatorIndex() {
+        const indicators = [...find(this.itemsContainer.nativeElement, '[data-pc-section="thumbnailitem"]')];
+        const activeIndicator = findSingle(this.itemsContainer.nativeElement, '[data-pc-section="thumbnailitem"] > [tabindex="0"]');
+        return indicators.findIndex((ind) => ind === activeIndicator.parentElement);
+    }
+    changedFocusedIndicator(prevInd, nextInd) {
+        const indicators = find(this.itemsContainer.nativeElement, '[data-pc-section="thumbnailitem"]');
+        indicators[prevInd].children[0].tabIndex = '-1';
+        indicators[nextInd].children[0].tabIndex = '0';
+        indicators[nextInd].children[0].focus();
+    }
+    step(dir) {
+        let totalShiftedItems = this.totalShiftedItems + dir;
+        if (dir < 0 && -1 * totalShiftedItems + this.d_numVisible > this.value.length - 1) {
+            totalShiftedItems = this.d_numVisible - this.value.length;
+        }
+        else if (dir > 0 && totalShiftedItems > 0) {
+            totalShiftedItems = 0;
+        }
+        if (this.circular) {
+            if (dir < 0 && this.value.length - 1 === this._activeIndex) {
+                totalShiftedItems = 0;
+            }
+            else if (dir > 0 && this._activeIndex === 0) {
+                totalShiftedItems = this.d_numVisible - this.value.length;
+            }
+        }
+        if (this.itemsContainer) {
+            removeClass(this.itemsContainer.nativeElement, 'p-items-hidden');
+            this.itemsContainer.nativeElement.style.transform = this.isVertical ? `translate3d(0, ${totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`;
+            this.itemsContainer.nativeElement.style.transition = 'transform 500ms ease 0s';
+        }
+        this.totalShiftedItems = totalShiftedItems;
+    }
+    stopTheSlideShow() {
+        if (this.slideShowActive && this.stopSlideShow) {
+            this.stopSlideShow.emit();
+        }
+    }
+    changePageOnTouch(e, diff) {
+        if (diff < 0) {
+            // left
+            this.navForward(e);
+        }
+        else {
+            // right
+            this.navBackward(e);
+        }
+    }
+    getTotalPageNumber() {
+        return this.value.length > this.d_numVisible ? this.value.length - this.d_numVisible + 1 : 0;
+    }
+    getMedianItemIndex() {
+        let index = Math.floor(this.d_numVisible / 2);
+        return this.d_numVisible % 2 ? index : index - 1;
+    }
+    onTransitionEnd() {
+        if (this.itemsContainer && this.itemsContainer.nativeElement) {
+            addClass(this.itemsContainer.nativeElement, 'p-items-hidden');
+            this.itemsContainer.nativeElement.style.transition = '';
+        }
+    }
+    onTouchEnd(e) {
+        let touchobj = e.changedTouches[0];
+        if (this.isVertical) {
+            this.changePageOnTouch(e, touchobj.pageY - this.startPos.y);
+        }
+        else {
+            this.changePageOnTouch(e, touchobj.pageX - this.startPos.x);
+        }
+    }
+    onTouchMove(e) {
+        if (e.cancelable) {
+            e.preventDefault();
+        }
+    }
+    onTouchStart(e) {
+        let touchobj = e.changedTouches[0];
+        this.startPos = {
+            x: touchobj.pageX,
+            y: touchobj.pageY
+        };
+    }
+    isNavBackwardDisabled() {
+        return (!this.circular && this._activeIndex === 0) || this.value.length <= this.d_numVisible;
+    }
+    isNavForwardDisabled() {
+        return (!this.circular && this._activeIndex === this.value.length - 1) || this.value.length <= this.d_numVisible;
+    }
+    firstItemAciveIndex() {
+        return this.totalShiftedItems * -1;
+    }
+    lastItemActiveIndex() {
+        return this.firstItemAciveIndex() + this.d_numVisible - 1;
+    }
+    isItemActive(index) {
+        return this.firstItemAciveIndex() <= index && this.lastItemActiveIndex() >= index;
+    }
+    bindDocumentListeners() {
+        if (isPlatformBrowser(this.platformId)) {
+            const window = this.document.defaultView || 'window';
+            this.documentResizeListener = this.renderer.listen(window, 'resize', () => {
+                this.calculatePosition();
+            });
+        }
+    }
+    unbindDocumentListeners() {
+        if (this.documentResizeListener) {
+            this.documentResizeListener();
+            this.documentResizeListener = null;
+        }
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        if (this.responsiveOptions) {
+            this.unbindDocumentListeners();
+        }
+        if (this.thumbnailsStyle) {
+            this.thumbnailsStyle.parentNode?.removeChild(this.thumbnailsStyle);
+        }
+    }
+    ariaPrevButtonLabel() {
+        return this.galleria.config.translation.aria ? this.galleria.config.translation.aria.prevPageLabel : undefined;
+    }
+    ariaNextButtonLabel() {
+        return this.galleria.config.translation.aria ? this.galleria.config.translation.aria.nextPageLabel : undefined;
+    }
+    ariaPageLabel(value) {
+        return this.galleria.config.translation.aria ? this.galleria.config.translation.aria.pageLabel.replace(/{page}/g, value) : undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: GalleriaThumbnails, deps: [{ token: Galleria }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.2.4", type: GalleriaThumbnails, isStandalone: false, selector: "p-galleriaThumbnails", inputs: { containerId: "containerId", value: "value", isVertical: ["isVertical", "isVertical", booleanAttribute], slideShowActive: ["slideShowActive", "slideShowActive", booleanAttribute], circular: ["circular", "circular", booleanAttribute], responsiveOptions: "responsiveOptions", contentHeight: "contentHeight", showThumbnailNavigators: "showThumbnailNavigators", templates: "templates", numVisible: "numVisible", activeIndex: "activeIndex" }, outputs: { onActiveIndexChange: "onActiveIndexChange", stopSlideShow: "stopSlideShow" }, providers: [GalleriaStyle], viewQueries: [{ propertyName: "itemsContainer", first: true, predicate: ["itemsContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+        <div [class]="cx('thumbnails')">
+            <div [class]="cx('thumbnailContent')">
+                <button *ngIf="showThumbnailNavigators" type="button" [class]="cx('thumbnailPrevButton')" (click)="navBackward($event)" pRipple [attr.aria-label]="ariaPrevButtonLabel()">
+                    <ng-container *ngIf="!galleria.previousThumbnailIconTemplate && !galleria._previousThumbnailIconTemplate">
+                        <svg data-p-icon="chevron-left" *ngIf="!isVertical" [class]="cx('thumbnailPrevIcon')" />
+                        <svg data-p-icon="chevron-up" *ngIf="isVertical" [class]="cx('thumbnailPrevIcon')" />
+                    </ng-container>
+                    <ng-template *ngTemplateOutlet="galleria.previousThumbnailIconTemplate || galleria._previousThumbnailIconTemplate"></ng-template>
+                </button>
+                <div [class]="cx('thumbnailsViewport')" [ngStyle]="{ height: isVertical ? contentHeight : '' }">
+                    <div #itemsContainer [class]="cx('thumbnailItems')" (transitionend)="onTransitionEnd()" (touchstart)="onTouchStart($event)" (touchmove)="onTouchMove($event)" role="tablist">
+                        <div
+                            *ngFor="let item of value; let index = index"
+                            [class]="cx('thumbnailItem', { index, activeIndex })"
+                            [attr.aria-selected]="activeIndex === index"
+                            [attr.aria-controls]="containerId + '_item_' + index"
+                            [attr.data-pc-section]="'thumbnailitem'"
+                            [attr.data-p-active]="activeIndex === index"
+                            (keydown)="onThumbnailKeydown($event, index)"
+                        >
+                            <div
+                                [class]="cx('thumbnail')"
+                                [attr.tabindex]="activeIndex === index ? 0 : -1"
+                                [attr.aria-current]="activeIndex === index ? 'page' : undefined"
+                                [attr.aria-label]="ariaPageLabel(index + 1)"
+                                (click)="onItemClick(index)"
+                                (touchend)="onItemClick(index)"
+                                (keydown.enter)="onItemClick(index)"
+                            >
+                                <p-galleriaItemSlot type="thumbnail" [item]="item" [templates]="templates"></p-galleriaItemSlot>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <button *ngIf="showThumbnailNavigators" type="button" [class]="cx('thumbnailNextButton')" (click)="navForward($event)" pRipple [attr.aria-label]="ariaNextButtonLabel()">
+                    <ng-container *ngIf="!galleria.nextThumbnailIconTemplate && !galleria._nextThumbnailIconTemplate">
+                        <svg data-p-icon="chevron-right" *ngIf="!isVertical" [class]="cx('thumbnailNextIcon')" />
+                        <svg data-p-icon="chevron-down" *ngIf="isVertical" [class]="cx('thumbnailNextIcon')" />
+                    </ng-container>
+                    <ng-template *ngTemplateOutlet="galleria.nextThumbnailIconTemplate || galleria._nextThumbnailIconTemplate"></ng-template>
+                </button>
+            </div>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => Ripple), selector: "[pRipple]" }, { kind: "component", type: i0.forwardRef(() => ChevronRightIcon), selector: "[data-p-icon=\"chevron-right\"]" }, { kind: "component", type: i0.forwardRef(() => ChevronUpIcon), selector: "[data-p-icon=\"chevron-up\"]" }, { kind: "component", type: i0.forwardRef(() => ChevronDownIcon), selector: "[data-p-icon=\"chevron-down\"]" }, { kind: "component", type: i0.forwardRef(() => ChevronLeftIcon), selector: "[data-p-icon=\"chevron-left\"]" }, { kind: "component", type: i0.forwardRef(() => GalleriaItemSlot), selector: "p-galleriaItemSlot", inputs: ["templates", "index", "item", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: GalleriaThumbnails, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-galleriaThumbnails',
+                    standalone: false,
+                    template: `
+        <div [class]="cx('thumbnails')">
+            <div [class]="cx('thumbnailContent')">
+                <button *ngIf="showThumbnailNavigators" type="button" [class]="cx('thumbnailPrevButton')" (click)="navBackward($event)" pRipple [attr.aria-label]="ariaPrevButtonLabel()">
+                    <ng-container *ngIf="!galleria.previousThumbnailIconTemplate && !galleria._previousThumbnailIconTemplate">
+                        <svg data-p-icon="chevron-left" *ngIf="!isVertical" [class]="cx('thumbnailPrevIcon')" />
+                        <svg data-p-icon="chevron-up" *ngIf="isVertical" [class]="cx('thumbnailPrevIcon')" />
+                    </ng-container>
+                    <ng-template *ngTemplateOutlet="galleria.previousThumbnailIconTemplate || galleria._previousThumbnailIconTemplate"></ng-template>
+                </button>
+                <div [class]="cx('thumbnailsViewport')" [ngStyle]="{ height: isVertical ? contentHeight : '' }">
+                    <div #itemsContainer [class]="cx('thumbnailItems')" (transitionend)="onTransitionEnd()" (touchstart)="onTouchStart($event)" (touchmove)="onTouchMove($event)" role="tablist">
+                        <div
+                            *ngFor="let item of value; let index = index"
+                            [class]="cx('thumbnailItem', { index, activeIndex })"
+                            [attr.aria-selected]="activeIndex === index"
+                            [attr.aria-controls]="containerId + '_item_' + index"
+                            [attr.data-pc-section]="'thumbnailitem'"
+                            [attr.data-p-active]="activeIndex === index"
+                            (keydown)="onThumbnailKeydown($event, index)"
+                        >
+                            <div
+                                [class]="cx('thumbnail')"
+                                [attr.tabindex]="activeIndex === index ? 0 : -1"
+                                [attr.aria-current]="activeIndex === index ? 'page' : undefined"
+                                [attr.aria-label]="ariaPageLabel(index + 1)"
+                                (click)="onItemClick(index)"
+                                (touchend)="onItemClick(index)"
+                                (keydown.enter)="onItemClick(index)"
+                            >
+                                <p-galleriaItemSlot type="thumbnail" [item]="item" [templates]="templates"></p-galleriaItemSlot>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <button *ngIf="showThumbnailNavigators" type="button" [class]="cx('thumbnailNextButton')" (click)="navForward($event)" pRipple [attr.aria-label]="ariaNextButtonLabel()">
+                    <ng-container *ngIf="!galleria.nextThumbnailIconTemplate && !galleria._nextThumbnailIconTemplate">
+                        <svg data-p-icon="chevron-right" *ngIf="!isVertical" [class]="cx('thumbnailNextIcon')" />
+                        <svg data-p-icon="chevron-down" *ngIf="isVertical" [class]="cx('thumbnailNextIcon')" />
+                    </ng-container>
+                    <ng-template *ngTemplateOutlet="galleria.nextThumbnailIconTemplate || galleria._nextThumbnailIconTemplate"></ng-template>
+                </button>
+            </div>
+        </div>
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [GalleriaStyle]
+                }]
+        }], ctorParameters: () => [{ type: Galleria }], propDecorators: { containerId: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], isVertical: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], slideShowActive: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], circular: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], responsiveOptions: [{
+                type: Input
+            }], contentHeight: [{
+                type: Input
+            }], showThumbnailNavigators: [{
+                type: Input
+            }], templates: [{
+                type: Input
+            }], onActiveIndexChange: [{
+                type: Output
+            }], stopSlideShow: [{
+                type: Output
+            }], itemsContainer: [{
+                type: ViewChild,
+                args: ['itemsContainer']
+            }], numVisible: [{
+                type: Input
+            }], activeIndex: [{
+                type: Input
+            }] } });
+class GalleriaModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: GalleriaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.4", ngImport: i0, type: GalleriaModule, declarations: [Galleria, GalleriaContent, GalleriaItemSlot, GalleriaItem, GalleriaThumbnails], imports: [CommonModule, SharedModule, Ripple, TimesIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, ChevronLeftIcon, FocusTrap], exports: [CommonModule, Galleria, GalleriaContent, GalleriaItemSlot, GalleriaItem, GalleriaThumbnails, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: GalleriaModule, imports: [CommonModule, SharedModule, TimesIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, ChevronLeftIcon, CommonModule, SharedModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: GalleriaModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, SharedModule, Ripple, TimesIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, ChevronLeftIcon, FocusTrap],
+                    exports: [CommonModule, Galleria, GalleriaContent, GalleriaItemSlot, GalleriaItem, GalleriaThumbnails, SharedModule],
+                    declarations: [Galleria, GalleriaContent, GalleriaItemSlot, GalleriaItem, GalleriaThumbnails]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Galleria, GalleriaClasses, GalleriaContent, GalleriaItem, GalleriaItemSlot, GalleriaModule, GalleriaStyle, GalleriaThumbnails };
+//# sourceMappingURL=primeng-galleria.mjs.map