primeng 14.1.2 → 14.2.0

package/fesm2020/primeng-galleria.mjs

@@ -25,11 +25,11 @@ class Galleria {
         this.autoPlay = false;
         this.transitionInterval = 4000;
         this.showThumbnails = true;
-        this.thumbnailsPosition = "bottom";
-        this.verticalThumbnailViewPortHeight = "300px";
+        this.thumbnailsPosition = 'bottom';
+        this.verticalThumbnailViewPortHeight = '300px';
         this.showIndicators = false;
         this.showIndicatorsOnItem = false;
-        this.indicatorsPosition = "bottom";
+        this.indicatorsPosition = 'bottom';
         this.baseZIndex = 0;
         this.showTransitionOptions = '150ms cubic-bezier(0, 0, 0.2, 1)';
         this.hideTransitionOptions = '150ms cubic-bezier(0, 0, 0.2, 1)';
@@ -42,14 +42,12 @@ class Galleria {
     get activeIndex() {
         return this._activeIndex;
     }
-    ;
     set activeIndex(activeIndex) {
         this._activeIndex = activeIndex;
     }
     get visible() {
         return this._visible;
     }
-    ;
     set visible(visible) {
         this._visible = visible;
         if (this._visible && !this.maskVisible) {
@@ -132,10 +130,20 @@ class Galleria {
 }
 Galleria.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: Galleria, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.PrimeNGConfig }], target: i0.ɵɵFactoryTarget.Component });
 Galleria.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: Galleria, selector: "p-galleria", inputs: { activeIndex: "activeIndex", fullScreen: "fullScreen", id: "id", value: "value", numVisible: "numVisible", responsiveOptions: "responsiveOptions", showItemNavigators: "showItemNavigators", showThumbnailNavigators: "showThumbnailNavigators", showItemNavigatorsOnHover: "showItemNavigatorsOnHover", changeItemOnIndicatorHover: "changeItemOnIndicatorHover", circular: "circular", autoPlay: "autoPlay", transitionInterval: "transitionInterval", showThumbnails: "showThumbnails", thumbnailsPosition: "thumbnailsPosition", verticalThumbnailViewPortHeight: "verticalThumbnailViewPortHeight", showIndicators: "showIndicators", showIndicatorsOnItem: "showIndicatorsOnItem", indicatorsPosition: "indicatorsPosition", baseZIndex: "baseZIndex", maskClass: "maskClass", containerClass: "containerClass", containerStyle: "containerStyle", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", visible: "visible" }, outputs: { activeIndexChange: "activeIndexChange", visibleChange: "visibleChange" }, host: { classAttribute: "p-element" }, queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "mask", first: true, predicate: ["mask"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
-        <div *ngIf="fullScreen;else windowed">
-            <div *ngIf="maskVisible" #mask [ngClass]="{'p-galleria-mask p-component-overlay p-component-overlay-enter':true, 'p-galleria-visible': this.visible}" [class]="maskClass">
-                <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]="numVisible" (maskHide)="onMaskHide()" (activeItemChange)="onActiveItemChange($event)" [ngStyle]="containerStyle"></p-galleriaContent>
+        <div *ngIf="fullScreen; else windowed">
+            <div *ngIf="maskVisible" #mask [ngClass]="{ 'p-galleria-mask p-component-overlay p-component-overlay-enter': true, 'p-galleria-visible': this.visible }" [class]="maskClass">
+                <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]="numVisible"
+                    (maskHide)="onMaskHide()"
+                    (activeItemChange)="onActiveItemChange($event)"
+                    [ngStyle]="containerStyle"
+                ></p-galleriaContent>
             </div>
         </div>
 
@@ -144,22 +152,27 @@ Galleria.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.
         </ng-template>
     `, isInline: true, styles: [".p-galleria-content{display:flex;flex-direction:column}.p-galleria-item-wrapper{display:flex;flex-direction:column;position:relative}.p-galleria-item-container{position:relative;display:flex;height:100%}.p-galleria-item-nav{position:absolute;top:50%;margin-top:-.5rem;display:inline-flex;justify-content:center;align-items:center;overflow:hidden}.p-galleria-item-prev{left:0;border-top-left-radius:0;border-bottom-left-radius:0}.p-galleria-item-next{right:0;border-top-right-radius:0;border-bottom-right-radius:0}.p-galleria-item{display:flex;justify-content:center;align-items:center;height:100%;width:100%}.p-galleria-item-nav-onhover .p-galleria-item-nav{pointer-events:none;opacity:0;transition:opacity .2s ease-in-out}.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav{pointer-events:all;opacity:1}.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled{pointer-events:none}.p-galleria-caption{position:absolute;bottom:0;left:0;width:100%}.p-galleria-thumbnail-wrapper{display:flex;flex-direction:column;overflow:auto;flex-shrink:0}.p-galleria-thumbnail-prev,.p-galleria-thumbnail-next{align-self:center;flex:0 0 auto;display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative}.p-galleria-thumbnail-prev span,.p-galleria-thumbnail-next span{display:flex;justify-content:center;align-items:center}.p-galleria-thumbnail-container{display:flex;flex-direction:row}.p-galleria-thumbnail-items-container{overflow:hidden;width:100%}.p-galleria-thumbnail-items{display:flex}.p-galleria-thumbnail-item{overflow:auto;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.5}.p-galleria-thumbnail-item:hover{opacity:1;transition:opacity .3s}.p-galleria-thumbnail-item-current{opacity:1}.p-galleria-thumbnails-left .p-galleria-content,.p-galleria-thumbnails-right .p-galleria-content,.p-galleria-thumbnails-left .p-galleria-item-wrapper,.p-galleria-thumbnails-right .p-galleria-item-wrapper{flex-direction:row}.p-galleria-thumbnails-left p-galleriaitem,.p-galleria-thumbnails-top p-galleriaitem{order:2}.p-galleria-thumbnails-left p-galleriathumbnails,.p-galleria-thumbnails-top p-galleriathumbnails{order:1}.p-galleria-thumbnails-left .p-galleria-thumbnail-container,.p-galleria-thumbnails-right .p-galleria-thumbnail-container{flex-direction:column;flex-grow:1}.p-galleria-thumbnails-left .p-galleria-thumbnail-items,.p-galleria-thumbnails-right .p-galleria-thumbnail-items{flex-direction:column;height:100%}.p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper,.p-galleria-thumbnails-right .p-galleria-thumbnail-wrapper{height:100%}.p-galleria-indicators{display:flex;align-items:center;justify-content:center}.p-galleria-indicator>button{display:inline-flex;align-items:center}.p-galleria-indicators-left .p-galleria-item-wrapper,.p-galleria-indicators-right .p-galleria-item-wrapper{flex-direction:row;align-items:center}.p-galleria-indicators-left .p-galleria-item-container,.p-galleria-indicators-top .p-galleria-item-container{order:2}.p-galleria-indicators-left .p-galleria-indicators,.p-galleria-indicators-top .p-galleria-indicators{order:1}.p-galleria-indicators-left .p-galleria-indicators,.p-galleria-indicators-right .p-galleria-indicators{flex-direction:column}.p-galleria-indicator-onitem .p-galleria-indicators{position:absolute;display:flex;z-index:1}.p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators{top:0;left:0;width:100%;align-items:flex-start}.p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators{right:0;top:0;height:100%;align-items:flex-end}.p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators{bottom:0;left:0;width:100%;align-items:flex-end}.p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators{left:0;top:0;height:100%;align-items:flex-start}.p-galleria-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:transparent;transition-property:background-color}.p-galleria-close{position:absolute;top:0;right:0;display:flex;justify-content:center;align-items:center;overflow:hidden}.p-galleria-mask .p-galleria-item-nav{position:fixed;top:50%;margin-top:-.5rem}.p-galleria-mask.p-galleria-mask-leave{background-color:transparent}.p-items-hidden .p-galleria-thumbnail-item{visibility:hidden}.p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active{visibility:visible}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i2.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(function () { return GalleriaContent; }), selector: "p-galleriaContent", inputs: ["activeIndex", "value", "numVisible"], outputs: ["maskHide", "activeItemChange"] }], animations: [
         trigger('animation', [
-            transition('void => visible', [
-                style({ transform: 'scale(0.7)', opacity: 0 }),
-                animate('{{showTransitionParams}}')
-            ]),
-            transition('visible => void', [
-                animate('{{hideTransitionParams}}', style({ transform: 'scale(0.7)', opacity: 0 }))
-            ])
+            transition('void => visible', [style({ transform: 'scale(0.7)', opacity: 0 }), animate('{{showTransitionParams}}')]),
+            transition('visible => void', [animate('{{hideTransitionParams}}', style({ transform: 'scale(0.7)', opacity: 0 }))])
         ])
     ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: Galleria, decorators: [{
             type: Component,
             args: [{ selector: 'p-galleria', template: `
-        <div *ngIf="fullScreen;else windowed">
-            <div *ngIf="maskVisible" #mask [ngClass]="{'p-galleria-mask p-component-overlay p-component-overlay-enter':true, 'p-galleria-visible': this.visible}" [class]="maskClass">
-                <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]="numVisible" (maskHide)="onMaskHide()" (activeItemChange)="onActiveItemChange($event)" [ngStyle]="containerStyle"></p-galleriaContent>
+        <div *ngIf="fullScreen; else windowed">
+            <div *ngIf="maskVisible" #mask [ngClass]="{ 'p-galleria-mask p-component-overlay p-component-overlay-enter': true, 'p-galleria-visible': this.visible }" [class]="maskClass">
+                <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]="numVisible"
+                    (maskHide)="onMaskHide()"
+                    (activeItemChange)="onActiveItemChange($event)"
+                    [ngStyle]="containerStyle"
+                ></p-galleriaContent>
             </div>
         </div>
 
@@ -168,16 +181,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
         </ng-template>
     `, animations: [
                         trigger('animation', [
-                            transition('void => visible', [
-                                style({ transform: 'scale(0.7)', opacity: 0 }),
-                                animate('{{showTransitionParams}}')
-                            ]),
-                            transition('visible => void', [
-                                animate('{{hideTransitionParams}}', style({ transform: 'scale(0.7)', opacity: 0 }))
-                            ])
+                            transition('void => visible', [style({ transform: 'scale(0.7)', opacity: 0 }), animate('{{showTransitionParams}}')]),
+                            transition('visible => void', [animate('{{hideTransitionParams}}', style({ transform: 'scale(0.7)', opacity: 0 }))])
                         ])
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
-                        'class': 'p-element'
+                        class: 'p-element'
                     }, styles: [".p-galleria-content{display:flex;flex-direction:column}.p-galleria-item-wrapper{display:flex;flex-direction:column;position:relative}.p-galleria-item-container{position:relative;display:flex;height:100%}.p-galleria-item-nav{position:absolute;top:50%;margin-top:-.5rem;display:inline-flex;justify-content:center;align-items:center;overflow:hidden}.p-galleria-item-prev{left:0;border-top-left-radius:0;border-bottom-left-radius:0}.p-galleria-item-next{right:0;border-top-right-radius:0;border-bottom-right-radius:0}.p-galleria-item{display:flex;justify-content:center;align-items:center;height:100%;width:100%}.p-galleria-item-nav-onhover .p-galleria-item-nav{pointer-events:none;opacity:0;transition:opacity .2s ease-in-out}.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav{pointer-events:all;opacity:1}.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled{pointer-events:none}.p-galleria-caption{position:absolute;bottom:0;left:0;width:100%}.p-galleria-thumbnail-wrapper{display:flex;flex-direction:column;overflow:auto;flex-shrink:0}.p-galleria-thumbnail-prev,.p-galleria-thumbnail-next{align-self:center;flex:0 0 auto;display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative}.p-galleria-thumbnail-prev span,.p-galleria-thumbnail-next span{display:flex;justify-content:center;align-items:center}.p-galleria-thumbnail-container{display:flex;flex-direction:row}.p-galleria-thumbnail-items-container{overflow:hidden;width:100%}.p-galleria-thumbnail-items{display:flex}.p-galleria-thumbnail-item{overflow:auto;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.5}.p-galleria-thumbnail-item:hover{opacity:1;transition:opacity .3s}.p-galleria-thumbnail-item-current{opacity:1}.p-galleria-thumbnails-left .p-galleria-content,.p-galleria-thumbnails-right .p-galleria-content,.p-galleria-thumbnails-left .p-galleria-item-wrapper,.p-galleria-thumbnails-right .p-galleria-item-wrapper{flex-direction:row}.p-galleria-thumbnails-left p-galleriaitem,.p-galleria-thumbnails-top p-galleriaitem{order:2}.p-galleria-thumbnails-left p-galleriathumbnails,.p-galleria-thumbnails-top p-galleriathumbnails{order:1}.p-galleria-thumbnails-left .p-galleria-thumbnail-container,.p-galleria-thumbnails-right .p-galleria-thumbnail-container{flex-direction:column;flex-grow:1}.p-galleria-thumbnails-left .p-galleria-thumbnail-items,.p-galleria-thumbnails-right .p-galleria-thumbnail-items{flex-direction:column;height:100%}.p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper,.p-galleria-thumbnails-right .p-galleria-thumbnail-wrapper{height:100%}.p-galleria-indicators{display:flex;align-items:center;justify-content:center}.p-galleria-indicator>button{display:inline-flex;align-items:center}.p-galleria-indicators-left .p-galleria-item-wrapper,.p-galleria-indicators-right .p-galleria-item-wrapper{flex-direction:row;align-items:center}.p-galleria-indicators-left .p-galleria-item-container,.p-galleria-indicators-top .p-galleria-item-container{order:2}.p-galleria-indicators-left .p-galleria-indicators,.p-galleria-indicators-top .p-galleria-indicators{order:1}.p-galleria-indicators-left .p-galleria-indicators,.p-galleria-indicators-right .p-galleria-indicators{flex-direction:column}.p-galleria-indicator-onitem .p-galleria-indicators{position:absolute;display:flex;z-index:1}.p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators{top:0;left:0;width:100%;align-items:flex-start}.p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators{right:0;top:0;height:100%;align-items:flex-end}.p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators{bottom:0;left:0;width:100%;align-items:flex-end}.p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators{left:0;top:0;height:100%;align-items:flex-start}.p-galleria-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:transparent;transition-property:background-color}.p-galleria-close{position:absolute;top:0;right:0;display:flex;justify-content:center;align-items:center;overflow:hidden}.p-galleria-mask .p-galleria-item-nav{position:fixed;top:50%;margin-top:-.5rem}.p-galleria-mask.p-galleria-mask-leave{background-color:transparent}.p-items-hidden .p-galleria-thumbnail-item{visibility:hidden}.p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active{visibility:visible}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.PrimeNGConfig }]; }, propDecorators: { activeIndex: [{
                 type: Input
@@ -257,18 +265,17 @@ class GalleriaContent {
     get activeIndex() {
         return this._activeIndex;
     }
-    ;
     set activeIndex(activeIndex) {
         this._activeIndex = activeIndex;
     }
     galleriaClass() {
         const thumbnailsPosClass = this.galleria.showThumbnails && this.getPositionClass('p-galleria-thumbnails', this.galleria.thumbnailsPosition);
         const indicatorPosClass = this.galleria.showIndicators && this.getPositionClass('p-galleria-indicators', this.galleria.indicatorsPosition);
-        return (this.galleria.containerClass ? this.galleria.containerClass + " " : '') + (thumbnailsPosClass ? thumbnailsPosClass + " " : '') + (indicatorPosClass ? indicatorPosClass + " " : '');
+        return (this.galleria.containerClass ? this.galleria.containerClass + ' ' : '') + (thumbnailsPosClass ? thumbnailsPosClass + ' ' : '') + (indicatorPosClass ? indicatorPosClass + ' ' : '');
     }
     startSlideShow() {
         this.interval = setInterval(() => {
-            let activeIndex = (this.galleria.circular && (this.value.length - 1) === this.activeIndex) ? 0 : (this.activeIndex + 1);
+            let activeIndex = this.galleria.circular && this.value.length - 1 === this.activeIndex ? 0 : this.activeIndex + 1;
             this.onActiveIndexChange(activeIndex);
             this.activeIndex = activeIndex;
         }, this.galleria.transitionInterval);
@@ -282,7 +289,7 @@ class GalleriaContent {
     }
     getPositionClass(preClassName, position) {
         const positions = ['top', 'left', 'bottom', 'right'];
-        const pos = positions.find(item => item === position);
+        const pos = positions.find((item) => item === position);
         return pos ? `${preClassName}-${pos}` : '';
     }
     isVertical() {
@@ -297,9 +304,18 @@ class GalleriaContent {
 }
 GalleriaContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: GalleriaContent, deps: [{ token: Galleria }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 GalleriaContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: GalleriaContent, selector: "p-galleriaContent", inputs: { activeIndex: "activeIndex", value: "value", numVisible: "numVisible" }, outputs: { maskHide: "maskHide", activeItemChange: "activeItemChange" }, ngImport: i0, template: `
-        <div [attr.id]="id" *ngIf="value && value.length > 0" [ngClass]="{'p-galleria p-component': true, 'p-galleria-fullscreen': this.galleria.fullScreen,
-            'p-galleria-indicator-onitem': this.galleria.showIndicatorsOnItem, 'p-galleria-item-nav-onhover': this.galleria.showItemNavigatorsOnHover && !this.galleria.fullScreen}"
-            [ngStyle]="!galleria.fullScreen ? galleria.containerStyle : {}" [class]="galleriaClass()">
+        <div
+            [attr.id]="id"
+            *ngIf="value && value.length > 0"
+            [ngClass]="{
+                'p-galleria p-component': true,
+                'p-galleria-fullscreen': this.galleria.fullScreen,
+                'p-galleria-indicator-onitem': this.galleria.showIndicatorsOnItem,
+                'p-galleria-item-nav-onhover': this.galleria.showItemNavigatorsOnHover && !this.galleria.fullScreen
+            }"
+            [ngStyle]="!galleria.fullScreen ? galleria.containerStyle : {}"
+            [class]="galleriaClass()"
+        >
             <button *ngIf="galleria.fullScreen" type="button" class="p-galleria-close p-link" (click)="maskHide.emit()" pRipple>
                 <span class="p-galleria-close-icon pi pi-times"></span>
             </button>
@@ -307,15 +323,39 @@ GalleriaContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
                 <p-galleriaItemSlot type="header" [templates]="galleria.templates"></p-galleriaItemSlot>
             </div>
             <div class="p-galleria-content">
-                <p-galleriaItem [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-galleriaItem
+                    [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>
+                <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="galleria.templates && galleria.footerFacet" class="p-galleria-footer">
                 <p-galleriaItemSlot type="footer" [templates]="galleria.templates"></p-galleriaItemSlot>
@@ -327,9 +367,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
             args: [{
                     selector: 'p-galleriaContent',
                     template: `
-        <div [attr.id]="id" *ngIf="value && value.length > 0" [ngClass]="{'p-galleria p-component': true, 'p-galleria-fullscreen': this.galleria.fullScreen,
-            'p-galleria-indicator-onitem': this.galleria.showIndicatorsOnItem, 'p-galleria-item-nav-onhover': this.galleria.showItemNavigatorsOnHover && !this.galleria.fullScreen}"
-            [ngStyle]="!galleria.fullScreen ? galleria.containerStyle : {}" [class]="galleriaClass()">
+        <div
+            [attr.id]="id"
+            *ngIf="value && value.length > 0"
+            [ngClass]="{
+                'p-galleria p-component': true,
+                'p-galleria-fullscreen': this.galleria.fullScreen,
+                'p-galleria-indicator-onitem': this.galleria.showIndicatorsOnItem,
+                'p-galleria-item-nav-onhover': this.galleria.showItemNavigatorsOnHover && !this.galleria.fullScreen
+            }"
+            [ngStyle]="!galleria.fullScreen ? galleria.containerStyle : {}"
+            [class]="galleriaClass()"
+        >
             <button *ngIf="galleria.fullScreen" type="button" class="p-galleria-close p-link" (click)="maskHide.emit()" pRipple>
                 <span class="p-galleria-close-icon pi pi-times"></span>
             </button>
@@ -337,15 +386,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                 <p-galleriaItemSlot type="header" [templates]="galleria.templates"></p-galleriaItemSlot>
             </div>
             <div class="p-galleria-content">
-                <p-galleriaItem [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-galleriaItem
+                    [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>
+                <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="galleria.templates && galleria.footerFacet" class="p-galleria-footer">
                 <p-galleriaItemSlot type="footer" [templates]="galleria.templates"></p-galleriaItemSlot>
@@ -369,7 +442,6 @@ class GalleriaItemSlot {
     get item() {
         return this._item;
     }
-    ;
     set item(item) {
         this._item = item;
         if (this.templates) {
@@ -452,7 +524,6 @@ class GalleriaItem {
     get activeIndex() {
         return this._activeIndex;
     }
-    ;
     set activeIndex(activeIndex) {
         this._activeIndex = activeIndex;
     }
@@ -466,16 +537,12 @@ class GalleriaItem {
     }
     next() {
         let nextItemIndex = this.activeIndex + 1;
-        let activeIndex = this.circular && this.value.length - 1 === this.activeIndex
-            ? 0
-            : nextItemIndex;
+        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;
+        let activeIndex = this.circular && this.activeIndex === 0 ? this.value.length - 1 : prevItemIndex;
         this.onActiveIndexChange.emit(activeIndex);
     }
     stopTheSlideShow() {
@@ -512,7 +579,7 @@ class GalleriaItem {
         this.onActiveIndexChange.emit(index);
     }
     isNavForwardDisabled() {
-        return !this.circular && this.activeIndex === (this.value.length - 1);
+        return !this.circular && this.activeIndex === this.value.length - 1;
     }
     isNavBackwardDisabled() {
         return !this.circular && this.activeIndex === 0;
@@ -525,11 +592,25 @@ GalleriaItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "1
 GalleriaItem.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: GalleriaItem, selector: "p-galleriaItem", inputs: { circular: "circular", value: "value", showItemNavigators: "showItemNavigators", showIndicators: "showIndicators", slideShowActive: "slideShowActive", changeItemOnIndicatorHover: "changeItemOnIndicatorHover", autoPlay: "autoPlay", templates: "templates", indicatorFacet: "indicatorFacet", captionFacet: "captionFacet", activeIndex: "activeIndex" }, outputs: { startSlideShow: "startSlideShow", stopSlideShow: "stopSlideShow", onActiveIndexChange: "onActiveIndexChange" }, ngImport: i0, template: `
         <div class="p-galleria-item-wrapper">
             <div class="p-galleria-item-container">
-                <button *ngIf="showItemNavigators" type="button" [ngClass]="{'p-galleria-item-prev p-galleria-item-nav p-link': true, 'p-disabled': this.isNavBackwardDisabled()}" (click)="navBackward($event)" [disabled]="isNavBackwardDisabled()" pRipple>
+                <button
+                    *ngIf="showItemNavigators"
+                    type="button"
+                    [ngClass]="{ 'p-galleria-item-prev p-galleria-item-nav p-link': true, 'p-disabled': this.isNavBackwardDisabled() }"
+                    (click)="navBackward($event)"
+                    [disabled]="isNavBackwardDisabled()"
+                    pRipple
+                >
                     <span class="p-galleria-item-prev-icon pi pi-chevron-left"></span>
                 </button>
                 <p-galleriaItemSlot type="item" [item]="activeItem" [templates]="templates" class="p-galleria-item"></p-galleriaItemSlot>
-                <button *ngIf="showItemNavigators" type="button" [ngClass]="{'p-galleria-item-next p-galleria-item-nav p-link': true,'p-disabled': this.isNavForwardDisabled()}" (click)="navForward($event)"  [disabled]="isNavForwardDisabled()" pRipple>
+                <button
+                    *ngIf="showItemNavigators"
+                    type="button"
+                    [ngClass]="{ 'p-galleria-item-next p-galleria-item-nav p-link': true, 'p-disabled': this.isNavForwardDisabled() }"
+                    (click)="navForward($event)"
+                    [disabled]="isNavForwardDisabled()"
+                    pRipple
+                >
                     <span class="p-galleria-item-next-icon pi pi-chevron-right"></span>
                 </button>
                 <div class="p-galleria-caption" *ngIf="captionFacet">
@@ -537,11 +618,15 @@ GalleriaItem.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
                 </div>
             </div>
             <ul *ngIf="showIndicators" class="p-galleria-indicators p-reset">
-                <li *ngFor="let item of value; let index = index;" tabindex="0"
-                    (click)="onIndicatorClick(index)" (mouseenter)="onIndicatorMouseEnter(index)" (keydown.enter)="onIndicatorKeyDown(index)"
-                    [ngClass]="{'p-galleria-indicator': true,'p-highlight': isIndicatorItemActive(index)}">
-                    <button type="button" tabIndex="-1" class="p-link" *ngIf="!indicatorFacet">
-                    </button>
+                <li
+                    *ngFor="let item of value; let index = index"
+                    tabindex="0"
+                    (click)="onIndicatorClick(index)"
+                    (mouseenter)="onIndicatorMouseEnter(index)"
+                    (keydown.enter)="onIndicatorKeyDown(index)"
+                    [ngClass]="{ 'p-galleria-indicator': true, 'p-highlight': isIndicatorItemActive(index) }"
+                >
+                    <button type="button" tabIndex="-1" class="p-link" *ngIf="!indicatorFacet"></button>
                     <p-galleriaItemSlot type="indicator" [index]="index" [templates]="templates"></p-galleriaItemSlot>
                 </li>
             </ul>
@@ -554,11 +639,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                     template: `
         <div class="p-galleria-item-wrapper">
             <div class="p-galleria-item-container">
-                <button *ngIf="showItemNavigators" type="button" [ngClass]="{'p-galleria-item-prev p-galleria-item-nav p-link': true, 'p-disabled': this.isNavBackwardDisabled()}" (click)="navBackward($event)" [disabled]="isNavBackwardDisabled()" pRipple>
+                <button
+                    *ngIf="showItemNavigators"
+                    type="button"
+                    [ngClass]="{ 'p-galleria-item-prev p-galleria-item-nav p-link': true, 'p-disabled': this.isNavBackwardDisabled() }"
+                    (click)="navBackward($event)"
+                    [disabled]="isNavBackwardDisabled()"
+                    pRipple
+                >
                     <span class="p-galleria-item-prev-icon pi pi-chevron-left"></span>
                 </button>
                 <p-galleriaItemSlot type="item" [item]="activeItem" [templates]="templates" class="p-galleria-item"></p-galleriaItemSlot>
-                <button *ngIf="showItemNavigators" type="button" [ngClass]="{'p-galleria-item-next p-galleria-item-nav p-link': true,'p-disabled': this.isNavForwardDisabled()}" (click)="navForward($event)"  [disabled]="isNavForwardDisabled()" pRipple>
+                <button
+                    *ngIf="showItemNavigators"
+                    type="button"
+                    [ngClass]="{ 'p-galleria-item-next p-galleria-item-nav p-link': true, 'p-disabled': this.isNavForwardDisabled() }"
+                    (click)="navForward($event)"
+                    [disabled]="isNavForwardDisabled()"
+                    pRipple
+                >
                     <span class="p-galleria-item-next-icon pi pi-chevron-right"></span>
                 </button>
                 <div class="p-galleria-caption" *ngIf="captionFacet">
@@ -566,11 +665,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                 </div>
             </div>
             <ul *ngIf="showIndicators" class="p-galleria-indicators p-reset">
-                <li *ngFor="let item of value; let index = index;" tabindex="0"
-                    (click)="onIndicatorClick(index)" (mouseenter)="onIndicatorMouseEnter(index)" (keydown.enter)="onIndicatorKeyDown(index)"
-                    [ngClass]="{'p-galleria-indicator': true,'p-highlight': isIndicatorItemActive(index)}">
-                    <button type="button" tabIndex="-1" class="p-link" *ngIf="!indicatorFacet">
-                    </button>
+                <li
+                    *ngFor="let item of value; let index = index"
+                    tabindex="0"
+                    (click)="onIndicatorClick(index)"
+                    (mouseenter)="onIndicatorMouseEnter(index)"
+                    (keydown.enter)="onIndicatorKeyDown(index)"
+                    [ngClass]="{ 'p-galleria-indicator': true, 'p-highlight': isIndicatorItemActive(index) }"
+                >
+                    <button type="button" tabIndex="-1" class="p-link" *ngIf="!indicatorFacet"></button>
                     <p-galleriaItemSlot type="indicator" [index]="index" [templates]="templates"></p-galleriaItemSlot>
                 </li>
             </ul>
@@ -613,7 +716,7 @@ class GalleriaThumbnails {
         this.isVertical = false;
         this.slideShowActive = false;
         this.circular = false;
-        this.contentHeight = "300px";
+        this.contentHeight = '300px';
         this.showThumbnailNavigators = true;
         this.onActiveIndexChange = new EventEmitter();
         this.stopSlideShow = new EventEmitter();
@@ -631,7 +734,6 @@ class GalleriaThumbnails {
     get numVisible() {
         return this._numVisible;
     }
-    ;
     set numVisible(numVisible) {
         this._numVisible = numVisible;
         this._oldNumVisible = this.d_numVisible;
@@ -640,7 +742,6 @@ class GalleriaThumbnails {
     get activeIndex() {
         return this._activeIndex;
     }
-    ;
     set activeIndex(activeIndex) {
         this._oldactiveIndex = this._activeIndex;
         this._activeIndex = activeIndex;
@@ -661,10 +762,10 @@ class GalleriaThumbnails {
                 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;
+                totalShiftedItems = this._activeIndex * -1 + this.getMedianItemIndex() + 1;
             }
             else {
-                totalShiftedItems = (this._activeIndex * -1) + this.getMedianItemIndex();
+                totalShiftedItems = this._activeIndex * -1 + this.getMedianItemIndex();
             }
             if (totalShiftedItems !== this.totalShiftedItems) {
                 this.totalShiftedItems = totalShiftedItems;
@@ -691,7 +792,7 @@ class GalleriaThumbnails {
         }
         let innerHTML = `
             #${this.containerId} .p-galleria-thumbnail-item {
-                flex: 1 0 ${(100 / this.d_numVisible)}%
+                flex: 1 0 ${100 / this.d_numVisible}%
             }
         `;
         if (this.responsiveOptions) {
@@ -709,7 +810,7 @@ class GalleriaThumbnails {
                 else if (typeof value1 === 'string' && typeof value2 === 'string')
                     result = value1.localeCompare(value2, undefined, { numeric: true });
                 else
-                    result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;
+                    result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
                 return -1 * result;
             });
             for (let i = 0; i < this.sortedResponsiveOptions.length; i++) {
@@ -717,7 +818,7 @@ class GalleriaThumbnails {
                 innerHTML += `
                     @media screen and (max-width: ${res.breakpoint}) {
                         #${this.containerId} .p-galleria-thumbnail-item {
-                            flex: 1 0 ${(100 / res.numVisible)}%
+                            flex: 1 0 ${100 / res.numVisible}%
                         }
                     }
                 `;
@@ -749,10 +850,10 @@ class GalleriaThumbnails {
     navForward(e) {
         this.stopTheSlideShow();
         let nextItemIndex = this._activeIndex + 1;
-        if (nextItemIndex + this.totalShiftedItems > this.getMedianItemIndex() && ((-1 * this.totalShiftedItems) < this.getTotalPageNumber() - 1 || this.circular)) {
+        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;
+        let activeIndex = this.circular && this.value.length - 1 === this._activeIndex ? 0 : nextItemIndex;
         this.onActiveIndexChange.emit(activeIndex);
         if (e.cancelable) {
             e.preventDefault();
@@ -762,7 +863,7 @@ class GalleriaThumbnails {
         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)) {
+        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;
@@ -778,14 +879,14 @@ class GalleriaThumbnails {
             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) {
+                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) {
+                if (dir < 0 && -1 * this.totalShiftedItems < this.getTotalPageNumber() - 1) {
                     this.step(dir);
                 }
             }
@@ -795,7 +896,7 @@ class GalleriaThumbnails {
     }
     step(dir) {
         let totalShiftedItems = this.totalShiftedItems + dir;
-        if (dir < 0 && (-1 * totalShiftedItems) + this.d_numVisible > (this.value.length - 1)) {
+        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) {
@@ -822,19 +923,21 @@ class GalleriaThumbnails {
         }
     }
     changePageOnTouch(e, diff) {
-        if (diff < 0) { // left
+        if (diff < 0) {
+            // left
             this.navForward(e);
         }
-        else { // right
+        else {
+            // right
             this.navBackward(e);
         }
     }
     getTotalPageNumber() {
-        return this.value.length > this.d_numVisible ? (this.value.length - this.d_numVisible) + 1 : 0;
+        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;
+        return this.d_numVisible % 2 ? index : index - 1;
     }
     onTransitionEnd() {
         if (this.itemsContainer && this.itemsContainer.nativeElement) {
@@ -845,10 +948,10 @@ class GalleriaThumbnails {
     onTouchEnd(e) {
         let touchobj = e.changedTouches[0];
         if (this.isVertical) {
-            this.changePageOnTouch(e, (touchobj.pageY - this.startPos.y));
+            this.changePageOnTouch(e, touchobj.pageY - this.startPos.y);
         }
         else {
-            this.changePageOnTouch(e, (touchobj.pageX - this.startPos.x));
+            this.changePageOnTouch(e, touchobj.pageX - this.startPos.x);
         }
     }
     onTouchMove(e) {
@@ -864,10 +967,10 @@ class GalleriaThumbnails {
         };
     }
     isNavBackwardDisabled() {
-        return (!this.circular && this._activeIndex === 0) || (this.value.length <= this.d_numVisible);
+        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);
+        return (!this.circular && this._activeIndex === this.value.length - 1) || this.value.length <= this.d_numVisible;
     }
     firstItemAciveIndex() {
         return this.totalShiftedItems * -1;
@@ -905,22 +1008,29 @@ GalleriaThumbnails.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", versi
 GalleriaThumbnails.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: GalleriaThumbnails, selector: "p-galleriaThumbnails", inputs: { containerId: "containerId", value: "value", isVertical: "isVertical", slideShowActive: "slideShowActive", circular: "circular", responsiveOptions: "responsiveOptions", contentHeight: "contentHeight", showThumbnailNavigators: "showThumbnailNavigators", templates: "templates", numVisible: "numVisible", activeIndex: "activeIndex" }, outputs: { onActiveIndexChange: "onActiveIndexChange", stopSlideShow: "stopSlideShow" }, viewQueries: [{ propertyName: "itemsContainer", first: true, predicate: ["itemsContainer"], descendants: true }], ngImport: i0, template: `
         <div class="p-galleria-thumbnail-wrapper">
             <div class="p-galleria-thumbnail-container">
-                <button *ngIf="showThumbnailNavigators" type="button" [ngClass]="{'p-galleria-thumbnail-prev p-link': true, 'p-disabled': this.isNavBackwardDisabled()}" (click)="navBackward($event)" [disabled]="isNavBackwardDisabled()" pRipple>
-                    <span [ngClass]="{'p-galleria-thumbnail-prev-icon pi': true, 'pi-chevron-left': !this.isVertical, 'pi-chevron-up': this.isVertical}"></span>
+                <button *ngIf="showThumbnailNavigators" type="button" [ngClass]="{ 'p-galleria-thumbnail-prev p-link': true, 'p-disabled': this.isNavBackwardDisabled() }" (click)="navBackward($event)" [disabled]="isNavBackwardDisabled()" pRipple>
+                    <span [ngClass]="{ 'p-galleria-thumbnail-prev-icon pi': true, 'pi-chevron-left': !this.isVertical, 'pi-chevron-up': this.isVertical }"></span>
                 </button>
-                <div class="p-galleria-thumbnail-items-container" [ngStyle]="{'height': isVertical ? contentHeight : ''}">
-                    <div #itemsContainer class="p-galleria-thumbnail-items" (transitionend)="onTransitionEnd()"
-                        (touchstart)="onTouchStart($event)" (touchmove)="onTouchMove($event)" (touchend)="onTouchEnd($event)">
-                        <div *ngFor="let item of value; let index = index;" [ngClass]="{'p-galleria-thumbnail-item': true, 'p-galleria-thumbnail-item-current': activeIndex === index, 'p-galleria-thumbnail-item-active': isItemActive(index),
-                            'p-galleria-thumbnail-item-start': firstItemAciveIndex() === index, 'p-galleria-thumbnail-item-end': lastItemActiveIndex() === index }">
+                <div class="p-galleria-thumbnail-items-container" [ngStyle]="{ height: isVertical ? contentHeight : '' }">
+                    <div #itemsContainer class="p-galleria-thumbnail-items" (transitionend)="onTransitionEnd()" (touchstart)="onTouchStart($event)" (touchmove)="onTouchMove($event)" (touchend)="onTouchEnd($event)">
+                        <div
+                            *ngFor="let item of value; let index = index"
+                            [ngClass]="{
+                                'p-galleria-thumbnail-item': true,
+                                'p-galleria-thumbnail-item-current': activeIndex === index,
+                                'p-galleria-thumbnail-item-active': isItemActive(index),
+                                'p-galleria-thumbnail-item-start': firstItemAciveIndex() === index,
+                                'p-galleria-thumbnail-item-end': lastItemActiveIndex() === index
+                            }"
+                        >
                             <div class="p-galleria-thumbnail-item-content" [attr.tabindex]="getTabIndex(index)" (click)="onItemClick(index)" (keydown.enter)="onItemClick(index)">
                                 <p-galleriaItemSlot type="thumbnail" [item]="item" [templates]="templates"></p-galleriaItemSlot>
                             </div>
                         </div>
                     </div>
                 </div>
-                <button *ngIf="showThumbnailNavigators" type="button" [ngClass]="{'p-galleria-thumbnail-next p-link': true, 'p-disabled': this.isNavForwardDisabled()}" (click)="navForward($event)" [disabled]="isNavForwardDisabled()" pRipple>
-                    <span [ngClass]="{'p-galleria-thumbnail-next-icon pi': true, 'pi-chevron-right': !this.isVertical, 'pi-chevron-down': this.isVertical}"></span>
+                <button *ngIf="showThumbnailNavigators" type="button" [ngClass]="{ 'p-galleria-thumbnail-next p-link': true, 'p-disabled': this.isNavForwardDisabled() }" (click)="navForward($event)" [disabled]="isNavForwardDisabled()" pRipple>
+                    <span [ngClass]="{ 'p-galleria-thumbnail-next-icon pi': true, 'pi-chevron-right': !this.isVertical, 'pi-chevron-down': this.isVertical }"></span>
                 </button>
             </div>
         </div>
@@ -932,22 +1042,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                     template: `
         <div class="p-galleria-thumbnail-wrapper">
             <div class="p-galleria-thumbnail-container">
-                <button *ngIf="showThumbnailNavigators" type="button" [ngClass]="{'p-galleria-thumbnail-prev p-link': true, 'p-disabled': this.isNavBackwardDisabled()}" (click)="navBackward($event)" [disabled]="isNavBackwardDisabled()" pRipple>
-                    <span [ngClass]="{'p-galleria-thumbnail-prev-icon pi': true, 'pi-chevron-left': !this.isVertical, 'pi-chevron-up': this.isVertical}"></span>
+                <button *ngIf="showThumbnailNavigators" type="button" [ngClass]="{ 'p-galleria-thumbnail-prev p-link': true, 'p-disabled': this.isNavBackwardDisabled() }" (click)="navBackward($event)" [disabled]="isNavBackwardDisabled()" pRipple>
+                    <span [ngClass]="{ 'p-galleria-thumbnail-prev-icon pi': true, 'pi-chevron-left': !this.isVertical, 'pi-chevron-up': this.isVertical }"></span>
                 </button>
-                <div class="p-galleria-thumbnail-items-container" [ngStyle]="{'height': isVertical ? contentHeight : ''}">
-                    <div #itemsContainer class="p-galleria-thumbnail-items" (transitionend)="onTransitionEnd()"
-                        (touchstart)="onTouchStart($event)" (touchmove)="onTouchMove($event)" (touchend)="onTouchEnd($event)">
-                        <div *ngFor="let item of value; let index = index;" [ngClass]="{'p-galleria-thumbnail-item': true, 'p-galleria-thumbnail-item-current': activeIndex === index, 'p-galleria-thumbnail-item-active': isItemActive(index),
-                            'p-galleria-thumbnail-item-start': firstItemAciveIndex() === index, 'p-galleria-thumbnail-item-end': lastItemActiveIndex() === index }">
+                <div class="p-galleria-thumbnail-items-container" [ngStyle]="{ height: isVertical ? contentHeight : '' }">
+                    <div #itemsContainer class="p-galleria-thumbnail-items" (transitionend)="onTransitionEnd()" (touchstart)="onTouchStart($event)" (touchmove)="onTouchMove($event)" (touchend)="onTouchEnd($event)">
+                        <div
+                            *ngFor="let item of value; let index = index"
+                            [ngClass]="{
+                                'p-galleria-thumbnail-item': true,
+                                'p-galleria-thumbnail-item-current': activeIndex === index,
+                                'p-galleria-thumbnail-item-active': isItemActive(index),
+                                'p-galleria-thumbnail-item-start': firstItemAciveIndex() === index,
+                                'p-galleria-thumbnail-item-end': lastItemActiveIndex() === index
+                            }"
+                        >
                             <div class="p-galleria-thumbnail-item-content" [attr.tabindex]="getTabIndex(index)" (click)="onItemClick(index)" (keydown.enter)="onItemClick(index)">
                                 <p-galleriaItemSlot type="thumbnail" [item]="item" [templates]="templates"></p-galleriaItemSlot>
                             </div>
                         </div>
                     </div>
                 </div>
-                <button *ngIf="showThumbnailNavigators" type="button" [ngClass]="{'p-galleria-thumbnail-next p-link': true, 'p-disabled': this.isNavForwardDisabled()}" (click)="navForward($event)" [disabled]="isNavForwardDisabled()" pRipple>
-                    <span [ngClass]="{'p-galleria-thumbnail-next-icon pi': true, 'pi-chevron-right': !this.isVertical, 'pi-chevron-down': this.isVertical}"></span>
+                <button *ngIf="showThumbnailNavigators" type="button" [ngClass]="{ 'p-galleria-thumbnail-next p-link': true, 'p-disabled': this.isNavForwardDisabled() }" (click)="navForward($event)" [disabled]="isNavForwardDisabled()" pRipple>
+                    <span [ngClass]="{ 'p-galleria-thumbnail-next-icon pi': true, 'pi-chevron-right': !this.isVertical, 'pi-chevron-down': this.isVertical }"></span>
                 </button>
             </div>
         </div>