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

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

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("primeng/api"),require("primeng/ripple"),require("@angular/common"),require("primeng/utils")):"function"==typeof define&&define.amd?define("primeng/carousel",["exports","@angular/core","primeng/api","primeng/ripple","@angular/common","primeng/utils"],e):e(((t="undefined"!=typeof globalThis?globalThis:t||self).primeng=t.primeng||{},t.primeng.carousel={}),t.ng.core,t.primeng.api,t.primeng.ripple,t.ng.common,t.primeng.utils)}(this,(function(t,e,i,n,s,o){"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 a(t,e){var i="function"==typeof Symbol&&t[Symbol.iterator];if(!i)return t;var n,s,o=i.call(t),a=[];try{for(;(void 0===e||e-- >0)&&!(n=o.next()).done;)a.push(n.value)}catch(t){s={error:t}}finally{try{n&&!n.done&&(i=o.return)&&i.call(o)}finally{if(s)throw s.error}}return a}function l(){for(var t=[],e=0;e<arguments.length;e++)t=t.concat(a(arguments[e]));return t}Object.create;var r=function(){function t(t,i,n){this.el=t,this.zone=i,this.cd=n,this.orientation="horizontal",this.verticalViewPortHeight="300px",this.contentClass="",this.indicatorsContentClass="",this.circular=!1,this.autoplayInterval=0,this.onPage=new e.EventEmitter,this._numVisible=1,this._numScroll=1,this._oldNumScroll=0,this.prevState={numScroll:0,numVisible:0,value:[]},this.defaultNumScroll=1,this.defaultNumVisible=1,this._page=0,this.isRemainingItemsAdded=!1,this.remainingItems=0,this.swipeThreshold=20,this.totalShiftedItems=this.page*this.numScroll*-1}return Object.defineProperty(t.prototype,"page",{get:function(){return this._page},set:function(t){this.isCreated&&t!==this._page&&(this.autoplayInterval&&(this.stopAutoplay(),this.allowAutoplay=!1),t>this._page&&t<=this.totalDots()-1?this.step(-1,t):t<this._page&&this.step(1,t)),this._page=t},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"numVisible",{get:function(){return this._numVisible},set:function(t){this._numVisible=t},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"numScroll",{get:function(){return this._numVisible},set:function(t){this._numScroll=t},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"value",{get:function(){return this._value},set:function(t){this._value=t},enumerable:!1,configurable:!0}),t.prototype.ngOnChanges=function(t){t.value&&this.circular&&this._value&&this.setCloneItems(),this.isCreated&&(t.numVisible&&(this.responsiveOptions&&(this.defaultNumVisible=this.numVisible),this.isCircular()&&this.setCloneItems(),this.createStyle(),this.calculatePosition()),t.numScroll&&this.responsiveOptions&&(this.defaultNumScroll=this.numScroll))},t.prototype.ngAfterContentInit=function(){var t=this;this.id=o.UniqueComponentId(),this.allowAutoplay=!!this.autoplayInterval,this.circular&&this.setCloneItems(),this.responsiveOptions&&(this.defaultNumScroll=this._numScroll,this.defaultNumVisible=this._numVisible),this.createStyle(),this.calculatePosition(),this.responsiveOptions&&this.bindDocumentListeners(),this.templates.forEach((function(e){switch(e.getType()){case"item":t.itemTemplate=e.template;break;case"header":t.headerTemplate=e.template;break;case"footer":t.footerTemplate=e.template;break;default:t.itemTemplate=e.template}}))},t.prototype.ngAfterContentChecked=function(){var t=this.isCircular(),e=this.totalShiftedItems;if(this.value&&this.itemsContainer&&(this.prevState.numScroll!==this._numScroll||this.prevState.numVisible!==this._numVisible||this.prevState.value.length!==this.value.length)){this.autoplayInterval&&this.stopAutoplay(),this.remainingItems=(this.value.length-this._numVisible)%this._numScroll;var i=this._page;0!==this.totalDots()&&i>=this.totalDots()&&(i=this.totalDots()-1,this._page=i,this.onPage.emit({page:this.page})),e=i*this._numScroll*-1,t&&(e-=this._numVisible),i===this.totalDots()-1&&this.remainingItems>0?(e+=-1*this.remainingItems+this._numScroll,this.isRemainingItemsAdded=!0):this.isRemainingItemsAdded=!1,e!==this.totalShiftedItems&&(this.totalShiftedItems=e),this._oldNumScroll=this._numScroll,this.prevState.numScroll=this._numScroll,this.prevState.numVisible=this._numVisible,this.prevState.value=this._value,this.totalDots()>0&&this.itemsContainer.nativeElement&&(this.itemsContainer.nativeElement.style.transform=this.isVertical()?"translate3d(0, "+e*(100/this._numVisible)+"%, 0)":"translate3d("+e*(100/this._numVisible)+"%, 0, 0)"),this.isCreated=!0,this.autoplayInterval&&this.isAutoplay()&&this.startAutoplay()}t&&(0===this.page?e=-1*this._numVisible:0===e&&(e=-1*this.value.length,this.remainingItems>0&&(this.isRemainingItemsAdded=!0)),e!==this.totalShiftedItems&&(this.totalShiftedItems=e))},t.prototype.createStyle=function(){this.carouselStyle||(this.carouselStyle=document.createElement("style"),this.carouselStyle.type="text/css",document.body.appendChild(this.carouselStyle));var t="\n            #"+this.id+" .p-carousel-item {\n\t\t\t\tflex: 1 0 "+100/this.numVisible+"%\n\t\t\t}\n        ";if(this.responsiveOptions){this.responsiveOptions.sort((function(t,e){var i=t.breakpoint,n=e.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 e=0;e<this.responsiveOptions.length;e++){var i=this.responsiveOptions[e];t+="\n                    @media screen and (max-width: "+i.breakpoint+") {\n                        #"+this.id+" .p-carousel-item {\n                            flex: 1 0 "+100/i.numVisible+"%\n                        }\n                    }\n                "}}this.carouselStyle.innerHTML=t},t.prototype.calculatePosition=function(){if(this.responsiveOptions){for(var t=window.innerWidth,e={numVisible:this.defaultNumVisible,numScroll:this.defaultNumScroll},i=0;i<this.responsiveOptions.length;i++){var n=this.responsiveOptions[i];parseInt(n.breakpoint,10)>=t&&(e=n)}if(this._numScroll!==e.numScroll){var s=this._page;s=Math.floor(s*this._numScroll/e.numScroll);var o=e.numScroll*this.page*-1;this.isCircular()&&(o-=e.numVisible),this.totalShiftedItems=o,this._numScroll=e.numScroll,this._page=s,this.onPage.emit({page:this.page})}this._numVisible!==e.numVisible&&(this._numVisible=e.numVisible,this.setCloneItems()),this.cd.markForCheck()}},t.prototype.setCloneItems=function(){var t,e;this.clonedItemsForStarting=[],this.clonedItemsForFinishing=[],this.isCircular()&&((t=this.clonedItemsForStarting).push.apply(t,l(this.value.slice(-1*this._numVisible))),(e=this.clonedItemsForFinishing).push.apply(e,l(this.value.slice(0,this._numVisible))))},t.prototype.firstIndex=function(){return this.isCircular()?-1*(this.totalShiftedItems+this.numVisible):-1*this.totalShiftedItems},t.prototype.lastIndex=function(){return this.firstIndex()+this.numVisible-1},t.prototype.totalDots=function(){return this.value?Math.ceil((this.value.length-this._numVisible)/this._numScroll)+1:0},t.prototype.totalDotsArray=function(){var t=this.totalDots();return t<=0?[]:Array(t).fill(0)},t.prototype.isVertical=function(){return"vertical"===this.orientation},t.prototype.isCircular=function(){return this.circular&&this.value&&this.value.length>=this.numVisible},t.prototype.isAutoplay=function(){return this.autoplayInterval&&this.allowAutoplay},t.prototype.isForwardNavDisabled=function(){return this.isEmpty()||this._page>=this.totalDots()-1&&!this.isCircular()},t.prototype.isBackwardNavDisabled=function(){return this.isEmpty()||this._page<=0&&!this.isCircular()},t.prototype.isEmpty=function(){return!this.value||0===this.value.length},t.prototype.navForward=function(t,e){(this.isCircular()||this._page<this.totalDots()-1)&&this.step(-1,e),this.autoplayInterval&&(this.stopAutoplay(),this.allowAutoplay=!1),t&&t.cancelable&&t.preventDefault()},t.prototype.navBackward=function(t,e){(this.isCircular()||0!==this._page)&&this.step(1,e),this.autoplayInterval&&(this.stopAutoplay(),this.allowAutoplay=!1),t&&t.cancelable&&t.preventDefault()},t.prototype.onDotClick=function(t,e){var i=this._page;this.autoplayInterval&&(this.stopAutoplay(),this.allowAutoplay=!1),e>i?this.navForward(t,e):e<i&&this.navBackward(t,e)},t.prototype.step=function(t,e){var i=this.totalShiftedItems,n=this.isCircular();if(null!=e)i=this._numScroll*e*-1,n&&(i-=this._numVisible),this.isRemainingItemsAdded=!1;else{i+=this._numScroll*t,this.isRemainingItemsAdded&&(i+=this.remainingItems-this._numScroll*t,this.isRemainingItemsAdded=!1);var s=n?i+this._numVisible:i;e=Math.abs(Math.floor(s/this._numScroll))}n&&this.page===this.totalDots()-1&&-1===t?(i=-1*(this.value.length+this._numVisible),e=0):n&&0===this.page&&1===t?(i=0,e=this.totalDots()-1):e===this.totalDots()-1&&this.remainingItems>0&&(i+=-1*this.remainingItems-this._numScroll*t,this.isRemainingItemsAdded=!0),this.itemsContainer&&(this.itemsContainer.nativeElement.style.transform=this.isVertical()?"translate3d(0, "+i*(100/this._numVisible)+"%, 0)":"translate3d("+i*(100/this._numVisible)+"%, 0, 0)",this.itemsContainer.nativeElement.style.transition="transform 500ms ease 0s"),this.totalShiftedItems=i,this._page=e,this.onPage.emit({page:this.page})},t.prototype.startAutoplay=function(){var t=this;this.interval=setInterval((function(){t.totalDots()>0&&(t.page===t.totalDots()-1?t.step(-1,0):t.step(-1,t.page+1))}),this.autoplayInterval)},t.prototype.stopAutoplay=function(){this.interval&&clearInterval(this.interval)},t.prototype.onTransitionEnd=function(){this.itemsContainer&&(this.itemsContainer.nativeElement.style.transition="",0!==this.page&&this.page!==this.totalDots()-1||!this.isCircular()||(this.itemsContainer.nativeElement.style.transform=this.isVertical()?"translate3d(0, "+this.totalShiftedItems*(100/this._numVisible)+"%, 0)":"translate3d("+this.totalShiftedItems*(100/this._numVisible)+"%, 0, 0)"))},t.prototype.onTouchStart=function(t){var e=t.changedTouches[0];this.startPos={x:e.pageX,y:e.pageY}},t.prototype.onTouchMove=function(t){t.cancelable&&t.preventDefault()},t.prototype.onTouchEnd=function(t){var e=t.changedTouches[0];this.isVertical()?this.changePageOnTouch(t,e.pageY-this.startPos.y):this.changePageOnTouch(t,e.pageX-this.startPos.x)},t.prototype.changePageOnTouch=function(t,e){Math.abs(e)>this.swipeThreshold&&(e<0?this.navForward(t):this.navBackward(t))},t.prototype.bindDocumentListeners=function(){var t=this;this.documentResizeListener||(this.documentResizeListener=function(e){t.calculatePosition()},window.addEventListener("resize",this.documentResizeListener))},t.prototype.unbindDocumentListeners=function(){this.documentResizeListener&&(window.removeEventListener("resize",this.documentResizeListener),this.documentResizeListener=null)},t.prototype.ngOnDestroy=function(){this.responsiveOptions&&this.unbindDocumentListeners(),this.autoplayInterval&&this.stopAutoplay()},t}();r.decorators=[{type:e.Component,args:[{selector:"p-carousel",template:'\n\t\t<div [attr.id]="id" [ngClass]="{\'p-carousel p-component\':true, \'p-carousel-vertical\': isVertical(), \'p-carousel-horizontal\': !isVertical()}" [ngStyle]="style" [class]="styleClass">\n\t\t\t<div class="p-carousel-header" *ngIf="headerFacet || headerTemplate">\n                <ng-content select="p-header"></ng-content>\n                <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>\n\t\t\t</div>\n\t\t\t<div [class]="contentClass" [ngClass]="\'p-carousel-content\'">\n\t\t\t\t<div class="p-carousel-container">\n\t\t\t\t\t<button type="button" [ngClass]="{\'p-carousel-prev p-link\':true, \'p-disabled\': isBackwardNavDisabled()}" [disabled]="isBackwardNavDisabled()" (click)="navBackward($event)" pRipple>\n\t\t\t\t\t\t<span [ngClass]="{\'p-carousel-prev-icon pi\': true, \'pi-chevron-left\': !isVertical(), \'pi-chevron-up\': isVertical()}"></span>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div class="p-carousel-items-content" [ngStyle]="{\'height\': isVertical() ? verticalViewPortHeight : \'auto\'}">\n\t\t\t\t\t\t<div #itemsContainer class="p-carousel-items-container" (transitionend)="onTransitionEnd()" (touchend)="onTouchEnd($event)" (touchstart)="onTouchStart($event)" (touchmove)="onTouchMove($event)">\n                            <div *ngFor="let item of clonedItemsForStarting; let index = index" [ngClass]= "{\'p-carousel-item p-carousel-item-cloned\': true,\n                                \'p-carousel-item-active\': (totalShiftedItems * -1) === (value.length),\n\t\t\t\t\t\t\t    \'p-carousel-item-start\': 0 === index,\n\t\t\t\t\t\t\t    \'p-carousel-item-end\': (clonedItemsForStarting.length - 1) === index}">\n\t\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item}"></ng-container>\n\t\t\t\t\t\t\t</div>\n                            <div *ngFor="let item of value; let index = index" [ngClass]= "{\'p-carousel-item\': true,\n                                \'p-carousel-item-active\': (firstIndex() <= index && lastIndex() >= index),\n\t\t\t\t\t\t\t    \'p-carousel-item-start\': firstIndex() === index,\n\t\t\t\t\t\t\t    \'p-carousel-item-end\': lastIndex() === index}">\n\t\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item}"></ng-container>\n\t\t\t\t\t\t\t</div>\n                            <div *ngFor="let item of clonedItemsForFinishing; let index = index" [ngClass]= "{\'p-carousel-item p-carousel-item-cloned\': true,\n                                \'p-carousel-item-active\': ((totalShiftedItems *-1) === numVisible),\n\t\t\t\t\t\t\t    \'p-carousel-item-start\': 0 === index,\n\t\t\t\t\t\t\t    \'p-carousel-item-end\': (clonedItemsForFinishing.length - 1) === index}">\n\t\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item}"></ng-container>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<button type="button" [ngClass]="{\'p-carousel-next p-link\': true, \'p-disabled\': isForwardNavDisabled()}" [disabled]="isForwardNavDisabled()" (click)="navForward($event)" pRipple>\n\t\t\t\t\t\t<span [ngClass]="{\'p-carousel-prev-icon pi\': true, \'pi-chevron-right\': !isVertical(), \'pi-chevron-down\': isVertical()}"></span>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t\t<ul [ngClass]="\'p-carousel-indicators p-reset\'" [class]="indicatorsContentClass">\n\t\t\t\t\t<li *ngFor="let totalDot of totalDotsArray(); let i = index" [ngClass]="{\'p-carousel-indicator\':true,\'p-highlight\': _page === i}">\n\t\t\t\t\t\t<button type="button" class="p-link" (click)="onDotClick($event, i)"></button>\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</div>\n\t\t\t<div class="p-carousel-footer" *ngIf="footerFacet || footerTemplate">\n                <ng-content select="p-footer"></ng-content>\n                <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>\n\t\t\t</div>\n\t\t</div>\n    ',changeDetection:e.ChangeDetectionStrategy.OnPush,encapsulation:e.ViewEncapsulation.None,styles:[".p-carousel,.p-carousel-content{display:flex;flex-direction:column}.p-carousel-content{overflow:auto}.p-carousel-next,.p-carousel-prev{-ms-grid-row-align:center;align-items:center;align-self:center;display:flex;flex-grow:0;flex-shrink:0;justify-content:center;overflow:hidden;position:relative}.p-carousel-container{display:flex;flex-direction:row}.p-carousel-items-content{overflow:hidden;width:100%}.p-carousel-indicators,.p-carousel-items-container{display:flex;flex-direction:row}.p-carousel-indicators{flex-wrap:wrap;justify-content:center}.p-carousel-indicator>button{align-items:center;display:flex;justify-content:center}.p-carousel-vertical .p-carousel-container{flex-direction:column}.p-carousel-vertical .p-carousel-items-container{flex-direction:column;height:100%}.p-items-hidden .p-carousel-item{visibility:hidden}.p-items-hidden .p-carousel-item.p-carousel-item-active{visibility:visible}"]}]}],r.ctorParameters=function(){return[{type:e.ElementRef},{type:e.NgZone},{type:e.ChangeDetectorRef}]},r.propDecorators={page:[{type:e.Input}],numVisible:[{type:e.Input}],numScroll:[{type:e.Input}],responsiveOptions:[{type:e.Input}],orientation:[{type:e.Input}],verticalViewPortHeight:[{type:e.Input}],contentClass:[{type:e.Input}],indicatorsContentClass:[{type:e.Input}],value:[{type:e.Input}],circular:[{type:e.Input}],autoplayInterval:[{type:e.Input}],style:[{type:e.Input}],styleClass:[{type:e.Input}],onPage:[{type:e.Output}],itemsContainer:[{type:e.ViewChild,args:["itemsContainer"]}],headerFacet:[{type:e.ContentChild,args:[i.Header]}],footerFacet:[{type:e.ContentChild,args:[i.Footer]}],templates:[{type:e.ContentChildren,args:[i.PrimeTemplate]}]};var u=function(){};u.decorators=[{type:e.NgModule,args:[{imports:[s.CommonModule,i.SharedModule,n.RippleModule],exports:[s.CommonModule,r,i.SharedModule],declarations:[r]}]}],t.Carousel=r,t.CarouselModule=u,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=primeng-carousel.umd.min.js.map