primeng/bundles/primeng-galleria.umd.min.js

[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primeng) [![Discord](https://img.shields.io/discord/557940238991753

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("primeng/api"),require("primeng/utils"),require("primeng/dom"),require("primeng/ripple")):"function"==typeof define&&define.amd?define("primeng/galleria",["exports","@angular/core","@angular/common","primeng/api","primeng/utils","primeng/dom","primeng/ripple"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self).primeng=e.primeng||{},e.primeng.galleria={}),e.ng.core,e.ng.common,e.primeng.api,e.primeng.utils,e.primeng.dom,e.primeng.ripple)}(this,(function(e,t,i,n,a,l,s){"use strict";
/*! *****************************************************************************
    Copyright (c) Microsoft Corporation.

    Permission to use, copy, modify, and/or distribute this software for any
    purpose with or without fee is hereby granted.

    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
    PERFORMANCE OF THIS SOFTWARE.
    ***************************************************************************** */Object.create;function r(e,t){var i="function"==typeof Symbol&&e[Symbol.iterator];if(!i)return e;var n,a,l=i.call(e),s=[];try{for(;(void 0===t||t-- >0)&&!(n=l.next()).done;)s.push(n.value)}catch(e){a={error:e}}finally{try{n&&!n.done&&(i=l.return)&&i.call(l)}finally{if(a)throw a.error}}return s}Object.create;var o=function(){function e(e,i){this.element=e,this.cd=i,this.fullScreen=!1,this.numVisible=3,this.showItemNavigators=!1,this.showThumbnailNavigators=!0,this.showItemNavigatorsOnHover=!1,this.changeItemOnIndicatorHover=!1,this.circular=!1,this.autoPlay=!1,this.transitionInterval=4e3,this.showThumbnails=!0,this.thumbnailsPosition="bottom",this.verticalThumbnailViewPortHeight="300px",this.showIndicators=!1,this.showIndicatorsOnItem=!1,this.indicatorsPosition="bottom",this.baseZIndex=0,this.activeIndexChange=new t.EventEmitter,this.visibleChange=new t.EventEmitter,this._visible=!1,this._activeIndex=0}return Object.defineProperty(e.prototype,"activeIndex",{get:function(){return this._activeIndex},set:function(e){this._activeIndex=e},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"visible",{get:function(){return this._visible},set:function(e){this._visible=e},enumerable:!1,configurable:!0}),e.prototype.ngAfterContentInit=function(){var e=this;this.templates.forEach((function(t){switch(t.getType()){case"header":e.headerFacet=t.template;break;case"footer":e.footerFacet=t.template;break;case"indicator":e.indicatorFacet=t.template;break;case"caption":e.captionFacet=t.template}}))},e.prototype.ngOnChanges=function(e){this.fullScreen&&e.visible&&(e.visible.currentValue?(l.DomHandler.addClass(document.body,"p-overflow-hidden"),this.zIndex=String(this.baseZIndex+ ++l.DomHandler.zindex)):l.DomHandler.removeClass(document.body,"p-overflow-hidden"))},e.prototype.onMaskHide=function(){this.visible=!1,this.visibleChange.emit(!1)},e.prototype.onActiveItemChange=function(e){this.activeIndex!==e&&(this.activeIndex=e,this.activeIndexChange.emit(e))},e.prototype.ngOnDestroy=function(){this.fullScreen&&l.DomHandler.removeClass(document.body,"p-overflow-hidden")},e}();o.decorators=[{type:t.Component,args:[{selector:"p-galleria",template:'\n        <div *ngIf="fullScreen;else windowed">\n            <div *ngIf="visible" #mask [ngClass]="{\'p-galleria-mask p-component-overlay\':true, \'p-galleria-visible\': this.visible}" [class]="maskClass" [ngStyle]="{\'zIndex\':zIndex}">\n                <p-galleriaContent [value]="value" [activeIndex]="activeIndex" (maskHide)="onMaskHide()" (activeItemChange)="onActiveItemChange($event)" [ngStyle]="containerStyle"></p-galleriaContent>\n            </div>\n        </div>\n\n        <ng-template #windowed>\n            <p-galleriaContent [value]="value" [activeIndex]="activeIndex" (activeItemChange)="onActiveItemChange($event)"></p-galleriaContent>\n        </ng-template>\n    ',changeDetection:t.ChangeDetectionStrategy.OnPush,encapsulation:t.ViewEncapsulation.None,styles:[".p-galleria-content,.p-galleria-item-wrapper{display:flex;flex-direction:column}.p-galleria-item-wrapper{position:relative}.p-galleria-item-container{display:flex;height:100%;position:relative}.p-galleria-item-nav{align-items:center;display:inline-flex;justify-content:center;margin-top:-.5rem;overflow:hidden;position:absolute;top:50%}.p-galleria-item-prev{border-bottom-left-radius:0;border-top-left-radius:0;left:0}.p-galleria-item-next{border-bottom-right-radius:0;border-top-right-radius:0;right:0}.p-galleria-item{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.p-galleria-item-nav-onhover .p-galleria-item-nav{opacity:0;pointer-events:none;transition:opacity .2s ease-in-out}.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav{opacity:1;pointer-events:all}.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled{pointer-events:none}.p-galleria-caption{bottom:0;left:0;position:absolute;width:100%}.p-galleria-thumbnail-wrapper{display:flex;flex-direction:column;flex-shrink:0;overflow:auto}.p-galleria-thumbnail-next,.p-galleria-thumbnail-prev{-ms-grid-row-align:center;align-self:center;flex:0 0 auto;overflow:hidden;position:relative}.p-galleria-thumbnail-next,.p-galleria-thumbnail-next span,.p-galleria-thumbnail-prev,.p-galleria-thumbnail-prev span{align-items:center;display:flex;justify-content:center}.p-galleria-thumbnail-container{display:flex;flex-direction:row}.p-galleria-thumbnail-items-container{overflow:hidden}.p-galleria-thumbnail-items{display:flex}.p-galleria-thumbnail-item{align-items:center;cursor:pointer;display:flex;justify-content:center;opacity:.5;overflow:auto}.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-left .p-galleria-item-wrapper,.p-galleria-thumbnails-right .p-galleria-content,.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{align-items:center;display:flex;justify-content:center}.p-galleria-indicator>button{align-items:center;display:inline-flex}.p-galleria-indicators-left .p-galleria-item-wrapper,.p-galleria-indicators-right .p-galleria-item-wrapper{align-items:center;flex-direction:row}.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{display:flex;position:absolute;z-index:1}.p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators{align-items:flex-start;left:0;top:0;width:100%}.p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators{align-items:flex-end;height:100%;right:0;top:0}.p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators{align-items:flex-end;bottom:0;left:0;width:100%}.p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators{align-items:flex-start;height:100%;left:0;top:0}.p-galleria-mask{background-color:transparent;height:100%;left:0;position:fixed;transition-property:background-color;width:100%}.p-galleria-close,.p-galleria-mask{align-items:center;display:flex;justify-content:center;top:0}.p-galleria-close{overflow:hidden;position:absolute;right:0}.p-galleria-mask .p-galleria-item-nav{margin-top:-.5rem;position:fixed;top:50%}.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}"]}]}],o.ctorParameters=function(){return[{type:t.ElementRef},{type:t.ChangeDetectorRef}]},o.propDecorators={activeIndex:[{type:t.Input}],fullScreen:[{type:t.Input}],id:[{type:t.Input}],value:[{type:t.Input}],numVisible:[{type:t.Input}],responsiveOptions:[{type:t.Input}],showItemNavigators:[{type:t.Input}],showThumbnailNavigators:[{type:t.Input}],showItemNavigatorsOnHover:[{type:t.Input}],changeItemOnIndicatorHover:[{type:t.Input}],circular:[{type:t.Input}],autoPlay:[{type:t.Input}],transitionInterval:[{type:t.Input}],showThumbnails:[{type:t.Input}],thumbnailsPosition:[{type:t.Input}],verticalThumbnailViewPortHeight:[{type:t.Input}],showIndicators:[{type:t.Input}],showIndicatorsOnItem:[{type:t.Input}],indicatorsPosition:[{type:t.Input}],baseZIndex:[{type:t.Input}],maskClass:[{type:t.Input}],containerClass:[{type:t.Input}],containerStyle:[{type:t.Input}],mask:[{type:t.ViewChild,args:["mask",{static:!1}]}],visible:[{type:t.Input}],activeIndexChange:[{type:t.Output}],visibleChange:[{type:t.Output}],templates:[{type:t.ContentChildren,args:[n.PrimeTemplate]}]};var p=function(){function e(e,i){this.galleria=e,this.cd=i,this.value=[],this.maskHide=new t.EventEmitter,this.activeItemChange=new t.EventEmitter,this.id=this.galleria.id||a.UniqueComponentId(),this.slideShowActicve=!1,this._activeIndex=0,this.slideShowActive=!0}return Object.defineProperty(e.prototype,"activeIndex",{get:function(){return this._activeIndex},set:function(e){this._activeIndex=e},enumerable:!1,configurable:!0}),e.prototype.galleriaClass=function(){var e=this.galleria.showThumbnails&&this.getPositionClass("p-galleria-thumbnails",this.galleria.thumbnailsPosition),t=this.galleria.showIndicators&&this.getPositionClass("p-galleria-indicators",this.galleria.indicatorsPosition);return(this.galleria.containerClass?this.galleria.containerClass+" ":"")+(e?e+" ":"")+(t?t+" ":"")},e.prototype.startSlideShow=function(){var e=this;this.interval=setInterval((function(){var t=e.galleria.circular&&e.value.length-1===e.activeIndex?0:e.activeIndex+1;e.onActiveIndexChange(t),e.activeIndex=t}),this.galleria.transitionInterval),this.slideShowActive=!0},e.prototype.stopSlideShow=function(){this.interval&&clearInterval(this.interval),this.slideShowActive=!1},e.prototype.getPositionClass=function(e,t){var i=["top","left","bottom","right"].find((function(e){return e===t}));return i?e+"-"+i:""},e.prototype.isVertical=function(){return"left"===this.galleria.thumbnailsPosition||"right"===this.galleria.thumbnailsPosition},e.prototype.onActiveIndexChange=function(e){this.activeIndex!==e&&(this.activeIndex=e,this.activeItemChange.emit(this.activeIndex))},e}();p.decorators=[{type:t.Component,args:[{selector:"p-galleriaContent",template:'\n        <div [attr.id]="id" *ngIf="value && value.length > 0" [ngClass]="{\'p-galleria p-component\': true, \'p-galleria-fullscreen\': this.galleria.fullScreen, \n            \'p-galleria-indicator-onitem\': this.galleria.showIndicatorsOnItem, \'p-galleria-item-nav-onhover\': this.galleria.showItemNavigatorsOnHover && !this.galleria.fullScreen}"\n            [ngStyle]="!galleria.fullScreen ? galleria.containerStyle : {}" [class]="galleriaClass()">\n            <button *ngIf="galleria.fullScreen" type="button" class="p-galleria-close p-link" (click)="maskHide.emit()" pRipple>\n                <span class="p-galleria-close-icon pi pi-times"></span>\n            </button>\n            <div *ngIf="galleria.templates && galleria.headerFacet" class="p-galleria-header">\n                <p-galleriaItemSlot type="header" [templates]="galleria.templates"></p-galleriaItemSlot>\n            </div>\n            <div class="p-galleria-content">\n                <p-galleriaItem [value]="value" [activeIndex]="activeIndex" [circular]="galleria.circular" [templates]="galleria.templates" (onActiveIndexChange)="onActiveIndexChange($event)" \n                    [showIndicators]="galleria.showIndicators" [changeItemOnIndicatorHover]="galleria.changeItemOnIndicatorHover" [indicatorFacet]="galleria.indicatorFacet"\n                    [captionFacet]="galleria.captionFacet" [showItemNavigators]="galleria.showItemNavigators" [autoPlay]="galleria.autoPlay" [slideShowActive]="slideShowActive"\n                    (startSlideShow)="startSlideShow()" (stopSlideShow)="stopSlideShow()"></p-galleriaItem>\n\n                <p-galleriaThumbnails *ngIf="galleria.showThumbnails" [containerId]="id" [value]="value" (onActiveIndexChange)="onActiveIndexChange($event)" [activeIndex]="activeIndex" [templates]="galleria.templates"\n                    [numVisible]="galleria.numVisible" [responsiveOptions]="galleria.responsiveOptions" [circular]="galleria.circular"\n                    [isVertical]="isVertical()" [contentHeight]="galleria.verticalThumbnailViewPortHeight" [showThumbnailNavigators]="galleria.showThumbnailNavigators"\n                    [slideShowActive]="slideShowActive" (stopSlideShow)="stopSlideShow()"></p-galleriaThumbnails>\n            </div>\n            <div *ngIf="galleria.templates && galleria.footerFacet" class="p-galleria-footer">\n                <p-galleriaItemSlot type="footer" [templates]="galleria.templates"></p-galleriaItemSlot>\n            </div>\n        </div>\n    ',changeDetection:t.ChangeDetectionStrategy.OnPush}]}],p.ctorParameters=function(){return[{type:o},{type:t.ChangeDetectorRef}]},p.propDecorators={activeIndex:[{type:t.Input}],value:[{type:t.Input}],maskHide:[{type:t.Output}],activeItemChange:[{type:t.Output}]};var h=function(){function e(){}return Object.defineProperty(e.prototype,"item",{get:function(){return this._item},set:function(e){var t=this;this._item=e,this.templates&&this.templates.forEach((function(e){if(e.getType()===t.type)switch(t.type){case"item":case"caption":case"thumbnail":t.context={$implicit:t.item},t.contentTemplate=e.template}}))},enumerable:!1,configurable:!0}),e.prototype.ngAfterContentInit=function(){var e=this;this.templates.forEach((function(t){if(t.getType()===e.type)switch(e.type){case"item":case"caption":case"thumbnail":e.context={$implicit:e.item},e.contentTemplate=t.template;break;case"indicator":e.context={$implicit:e.index},e.contentTemplate=t.template;break;default:e.context={},e.contentTemplate=t.template}}))},e}();h.decorators=[{type:t.Component,args:[{selector:"p-galleriaItemSlot",template:'\n        <ng-container *ngIf="contentTemplate">\n            <ng-container *ngTemplateOutlet="contentTemplate; context: context"></ng-container>\n        </ng-container>\n    ',changeDetection:t.ChangeDetectionStrategy.OnPush}]}],h.propDecorators={templates:[{type:t.Input}],index:[{type:t.Input}],item:[{type:t.Input}],type:[{type:t.Input}]};var c=function(){function e(){this.circular=!1,this.showItemNavigators=!1,this.showIndicators=!0,this.slideShowActive=!0,this.changeItemOnIndicatorHover=!0,this.autoPlay=!1,this.startSlideShow=new t.EventEmitter,this.stopSlideShow=new t.EventEmitter,this.onActiveIndexChange=new t.EventEmitter,this._activeIndex=0}return Object.defineProperty(e.prototype,"activeIndex",{get:function(){return this._activeIndex},set:function(e){this._activeIndex=e,this.activeItem=this.value[this._activeIndex]},enumerable:!1,configurable:!0}),e.prototype.ngOnInit=function(){this.autoPlay&&this.startSlideShow.emit()},e.prototype.next=function(){var e=this.activeIndex+1,t=this.circular&&this.value.length-1===this.activeIndex?0:e;this.onActiveIndexChange.emit(t)},e.prototype.prev=function(){var e=0!==this.activeIndex?this.activeIndex-1:0,t=this.circular&&0===this.activeIndex?this.value.length-1:e;this.onActiveIndexChange.emit(t)},e.prototype.stopTheSlideShow=function(){this.slideShowActive&&this.stopSlideShow&&this.stopSlideShow.emit()},e.prototype.navForward=function(e){this.stopTheSlideShow(),this.next(),e&&e.cancelable&&e.preventDefault()},e.prototype.navBackward=function(e){this.stopTheSlideShow(),this.prev(),e&&e.cancelable&&e.preventDefault()},e.prototype.onIndicatorClick=function(e){this.stopTheSlideShow(),this.onActiveIndexChange.emit(e)},e.prototype.onIndicatorMouseEnter=function(e){this.changeItemOnIndicatorHover&&(this.stopTheSlideShow(),this.onActiveIndexChange.emit(e))},e.prototype.onIndicatorKeyDown=function(e){this.stopTheSlideShow(),this.onActiveIndexChange.emit(e)},e.prototype.isNavForwardDisabled=function(){return!this.circular&&this.activeIndex===this.value.length-1},e.prototype.isNavBackwardDisabled=function(){return!this.circular&&0===this.activeIndex},e.prototype.isIndicatorItemActive=function(e){return this.activeIndex===e},e}();c.decorators=[{type:t.Component,args:[{selector:"p-galleriaItem",template:'\n        <div class="p-galleria-item-wrapper">\n            <div class="p-galleria-item-container">\n                <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>\n                    <span class="p-galleria-item-prev-icon pi pi-chevron-left"></span>\n                </button>\n                <p-galleriaItemSlot type="item" [item]="activeItem" [templates]="templates" class="p-galleria-item"></p-galleriaItemSlot>\n                <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>\n                    <span class="p-galleria-item-next-icon pi pi-chevron-right"></span>\n                </button>\n                <div class="p-galleria-caption" *ngIf="captionFacet">\n                    <p-galleriaItemSlot type="caption" [item]="activeItem" [templates]="templates"></p-galleriaItemSlot>\n                </div>\n            </div>\n            <ul *ngIf="showIndicators" class="p-galleria-indicators p-reset">\n                <li *ngFor="let item of value; let index = index;" tabindex="0"\n                    (click)="onIndicatorClick(index)" (mouseenter)="onIndicatorMouseEnter(index)" (keydown.enter)="onIndicatorKeyDown(index)"\n                    [ngClass]="{\'p-galleria-indicator\': true,\'p-highlight\': isIndicatorItemActive(index)}">\n                    <button type="button" tabIndex="-1" class="p-link" *ngIf="!indicatorFacet">\n                    </button>\n                    <p-galleriaItemSlot type="indicator" [index]="index" [templates]="templates"></p-galleriaItemSlot>\n                </li>\n            </ul>\n        </div>\n    ',changeDetection:t.ChangeDetectionStrategy.OnPush}]}],c.propDecorators={circular:[{type:t.Input}],value:[{type:t.Input}],showItemNavigators:[{type:t.Input}],showIndicators:[{type:t.Input}],slideShowActive:[{type:t.Input}],changeItemOnIndicatorHover:[{type:t.Input}],autoPlay:[{type:t.Input}],templates:[{type:t.Input}],indicatorFacet:[{type:t.Input}],captionFacet:[{type:t.Input}],startSlideShow:[{type:t.Output}],stopSlideShow:[{type:t.Output}],onActiveIndexChange:[{type:t.Output}],activeIndex:[{type:t.Input}]};var d=function(){function e(){this.isVertical=!1,this.slideShowActive=!1,this.circular=!1,this.contentHeight="300px",this.showThumbnailNavigators=!0,this.onActiveIndexChange=new t.EventEmitter,this.stopSlideShow=new t.EventEmitter,this.startPos=null,this.thumbnailsStyle=null,this.sortedResponsiveOptions=null,this.totalShiftedItems=0,this.page=0,this._numVisible=0,this.d_numVisible=0,this._oldNumVisible=0,this._activeIndex=0,this._oldactiveIndex=0}return Object.defineProperty(e.prototype,"numVisible",{get:function(){return this._numVisible},set:function(e){this._numVisible=e,this._oldNumVisible=this.d_numVisible,this.d_numVisible=e},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"activeIndex",{get:function(){return this._activeIndex},set:function(e){this._oldactiveIndex=this._activeIndex,this._activeIndex=e},enumerable:!1,configurable:!0}),e.prototype.ngOnInit=function(){this.createStyle(),this.calculatePosition(),this.responsiveOptions&&this.bindDocumentListeners()},e.prototype.ngAfterContentChecked=function(){var e=this.totalShiftedItems;this._oldNumVisible===this.d_numVisible&&this._oldactiveIndex===this._activeIndex||!this.itemsContainer||((e=this._activeIndex<=this.getMedianItemIndex()?0:this.value.length-this.d_numVisible+this.getMedianItemIndex()<this._activeIndex?this.d_numVisible-this.value.length:this.value.length-this.d_numVisible<this._activeIndex&&this.d_numVisible%2==0?-1*this._activeIndex+this.getMedianItemIndex()+1:-1*this._activeIndex+this.getMedianItemIndex())!==this.totalShiftedItems&&(this.totalShiftedItems=e),this.itemsContainer&&this.itemsContainer.nativeElement&&(this.itemsContainer.nativeElement.style.transform=this.isVertical?"translate3d(0, "+e*(100/this.d_numVisible)+"%, 0)":"translate3d("+e*(100/this.d_numVisible)+"%, 0, 0)"),this._oldactiveIndex!==this._activeIndex&&(l.DomHandler.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)},e.prototype.createStyle=function(){this.thumbnailsStyle||(this.thumbnailsStyle=document.createElement("style"),this.thumbnailsStyle.type="text/css",document.body.appendChild(this.thumbnailsStyle));var e="\n            #"+this.containerId+" .p-galleria-thumbnail-item {\n                flex: 1 0 "+100/this.d_numVisible+"%\n            }\n        ";if(this.responsiveOptions){this.sortedResponsiveOptions=function(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(r(arguments[t]));return e}(this.responsiveOptions),this.sortedResponsiveOptions.sort((function(e,t){var i=e.breakpoint,n=t.breakpoint;return-1*(null==i&&null!=n?-1:null!=i&&null==n?1:null==i&&null==n?0:"string"==typeof i&&"string"==typeof n?i.localeCompare(n,void 0,{numeric:!0}):i<n?-1:i>n?1:0)}));for(var t=0;t<this.sortedResponsiveOptions.length;t++){var i=this.sortedResponsiveOptions[t];e+="\n                    @media screen and (max-width: "+i.breakpoint+") {\n                        #"+this.containerId+" .p-galleria-thumbnail-item {\n                            flex: 1 0 "+100/i.numVisible+"%\n                        }\n                    }\n                "}}this.thumbnailsStyle.innerHTML=e},e.prototype.calculatePosition=function(){if(this.itemsContainer&&this.sortedResponsiveOptions){for(var e=window.innerWidth,t={numVisible:this._numVisible},i=0;i<this.sortedResponsiveOptions.length;i++){var n=this.sortedResponsiveOptions[i];parseInt(n.breakpoint,10)>=e&&(t=n)}this.d_numVisible!==t.numVisible&&(this.d_numVisible=t.numVisible)}},e.prototype.getTabIndex=function(e){return this.isItemActive(e)?0:null},e.prototype.navForward=function(e){this.stopTheSlideShow();var t=this._activeIndex+1;t+this.totalShiftedItems>this.getMedianItemIndex()&&(-1*this.totalShiftedItems<this.getTotalPageNumber()-1||this.circular)&&this.step(-1);var i=this.circular&&this.value.length-1===this._activeIndex?0:t;this.onActiveIndexChange.emit(i),e.cancelable&&e.preventDefault()},e.prototype.navBackward=function(e){this.stopTheSlideShow();var t=0!==this._activeIndex?this._activeIndex-1:0,i=t+this.totalShiftedItems;this.d_numVisible-i-1>this.getMedianItemIndex()&&(-1*this.totalShiftedItems!=0||this.circular)&&this.step(1);var n=this.circular&&0===this._activeIndex?this.value.length-1:t;this.onActiveIndexChange.emit(n),e.cancelable&&e.preventDefault()},e.prototype.onItemClick=function(e){this.stopTheSlideShow();var t=e;if(t!==this._activeIndex){var i=t+this.totalShiftedItems,n=0;t<this._activeIndex?(n=this.d_numVisible-i-1-this.getMedianItemIndex())>0&&-1*this.totalShiftedItems!=0&&this.step(n):(n=this.getMedianItemIndex()-i)<0&&-1*this.totalShiftedItems<this.getTotalPageNumber()-1&&this.step(n),this.activeIndex=t,this.onActiveIndexChange.emit(this.activeIndex)}},e.prototype.step=function(e){var t=this.totalShiftedItems+e;e<0&&-1*t+this.d_numVisible>this.value.length-1?t=this.d_numVisible-this.value.length:e>0&&t>0&&(t=0),this.circular&&(e<0&&this.value.length-1===this._activeIndex?t=0:e>0&&0===this._activeIndex&&(t=this.d_numVisible-this.value.length)),this.itemsContainer&&(l.DomHandler.removeClass(this.itemsContainer.nativeElement,"p-items-hidden"),this.itemsContainer.nativeElement.style.transform=this.isVertical?"translate3d(0, "+t*(100/this.d_numVisible)+"%, 0)":"translate3d("+t*(100/this.d_numVisible)+"%, 0, 0)",this.itemsContainer.nativeElement.style.transition="transform 500ms ease 0s"),this.totalShiftedItems=t},e.prototype.stopTheSlideShow=function(){this.slideShowActive&&this.stopSlideShow&&this.stopSlideShow.emit()},e.prototype.changePageOnTouch=function(e,t){t<0?this.navForward(e):this.navBackward(e)},e.prototype.getTotalPageNumber=function(){return this.value.length>this.d_numVisible?this.value.length-this.d_numVisible+1:0},e.prototype.getMedianItemIndex=function(){var e=Math.floor(this.d_numVisible/2);return this.d_numVisible%2?e:e-1},e.prototype.onTransitionEnd=function(){this.itemsContainer&&this.itemsContainer.nativeElement&&(l.DomHandler.addClass(this.itemsContainer.nativeElement,"p-items-hidden"),this.itemsContainer.nativeElement.style.transition="")},e.prototype.onTouchEnd=function(e){var t=e.changedTouches[0];this.isVertical?this.changePageOnTouch(e,t.pageY-this.startPos.y):this.changePageOnTouch(e,t.pageX-this.startPos.x)},e.prototype.onTouchMove=function(e){e.cancelable&&e.preventDefault()},e.prototype.onTouchStart=function(e){var t=e.changedTouches[0];this.startPos={x:t.pageX,y:t.pageY}},e.prototype.isNavBackwardDisabled=function(){return!this.circular&&0===this._activeIndex||this.value.length<=this.d_numVisible},e.prototype.isNavForwardDisabled=function(){return!this.circular&&this._activeIndex===this.value.length-1||this.value.length<=this.d_numVisible},e.prototype.firstItemAciveIndex=function(){return-1*this.totalShiftedItems},e.prototype.lastItemActiveIndex=function(){return this.firstItemAciveIndex()+this.d_numVisible-1},e.prototype.isItemActive=function(e){return this.firstItemAciveIndex()<=e&&this.lastItemActiveIndex()>=e},e.prototype.bindDocumentListeners=function(){var e=this;this.documentResizeListener||(this.documentResizeListener=function(){e.calculatePosition()},window.addEventListener("resize",this.documentResizeListener))},e.prototype.unbindDocumentListeners=function(){this.documentResizeListener&&(window.removeEventListener("resize",this.documentResizeListener),this.documentResizeListener=null)},e.prototype.ngOnDestroy=function(){this.responsiveOptions&&this.unbindDocumentListeners(),this.thumbnailsStyle&&this.thumbnailsStyle.parentNode.removeChild(this.thumbnailsStyle)},e}();d.decorators=[{type:t.Component,args:[{selector:"p-galleriaThumbnails",template:'\n        <div class="p-galleria-thumbnail-wrapper">\n            <div class="p-galleria-thumbnail-container">\n                <button *ngIf="showThumbnailNavigators" type="button" [ngClass]="{\'p-galleria-thumbnail-prev p-link\': true, \'p-disabled\': this.isNavBackwardDisabled()}" (click)="navBackward($event)" [disabled]="isNavBackwardDisabled()" pRipple>\n                    <span [ngClass]="{\'p-galleria-thumbnail-prev-icon pi\': true, \'pi-chevron-left\': !this.isVertical, \'pi-chevron-up\': this.isVertical}"></span>\n                </button>\n                <div class="p-galleria-thumbnail-items-container" [ngStyle]="{\'height\': isVertical ? contentHeight : \'\'}">\n                    <div #itemsContainer class="p-galleria-thumbnail-items" (transitionend)="onTransitionEnd()"\n                        (touchstart)="onTouchStart($event)" (touchmove)="onTouchMove($event)" (touchend)="onTouchEnd($event)">\n                        <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),\n                            \'p-galleria-thumbnail-item-start\': firstItemAciveIndex() === index, \'p-galleria-thumbnail-item-end\': lastItemActiveIndex() === index }">\n                            <div class="p-galleria-thumbnail-item-content" [attr.tabindex]="getTabIndex(index)" (click)="onItemClick(index)" (keydown.enter)="onItemClick(index)">\n                                <p-galleriaItemSlot type="thumbnail" [item]="item" [templates]="templates"></p-galleriaItemSlot>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <button *ngIf="showThumbnailNavigators" type="button" [ngClass]="{\'p-galleria-thumbnail-next p-link\': true, \'p-disabled\': this.isNavForwardDisabled()}" (click)="navForward($event)" [disabled]="isNavForwardDisabled()" pRipple>\n                    <span [ngClass]="{\'p-galleria-thumbnail-next-icon pi\': true, \'pi-chevron-right\': !this.isVertical, \'pi-chevron-down\': this.isVertical}"></span>\n                </button>\n            </div>\n        </div>\n    ',changeDetection:t.ChangeDetectionStrategy.OnPush}]}],d.propDecorators={containerId:[{type:t.Input}],value:[{type:t.Input}],isVertical:[{type:t.Input}],slideShowActive:[{type:t.Input}],circular:[{type:t.Input}],responsiveOptions:[{type:t.Input}],contentHeight:[{type:t.Input}],showThumbnailNavigators:[{type:t.Input}],templates:[{type:t.Input}],onActiveIndexChange:[{type:t.Output}],stopSlideShow:[{type:t.Output}],itemsContainer:[{type:t.ViewChild,args:["itemsContainer"]}],numVisible:[{type:t.Input}],activeIndex:[{type:t.Input}]};var u=function(){};u.decorators=[{type:t.NgModule,args:[{imports:[i.CommonModule,n.SharedModule,s.RippleModule],exports:[i.CommonModule,o,p,h,c,d,n.SharedModule],declarations:[o,p,h,c,d]}]}],e.Galleria=o,e.GalleriaContent=p,e.GalleriaItem=c,e.GalleriaItemSlot=h,e.GalleriaModule=u,e.GalleriaThumbnails=d,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=primeng-galleria.umd.min.js.map