ng-mat-carousel/bundles/ng-mat-carousel.umd.min.js

Carousel component for Angular using Material Design.

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/animations"),require("@angular/cdk/a11y"),require("@angular/common"),require("@angular/core"),require("rxjs"),require("rxjs/operators"),require("@angular/platform-browser"),require("@angular/material/button"),require("@angular/material/icon")):"function"==typeof define&&define.amd?define("ng-mat-carousel",["exports","@angular/animations","@angular/cdk/a11y","@angular/common","@angular/core","rxjs","rxjs/operators","@angular/platform-browser","@angular/material/button","@angular/material/icon"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self)["ng-mat-carousel"]={},t.ng.animations,t.ng.cdk.a11y,t.ng.common,t.ng.core,t.rxjs,t.rxjs.operators,t.ng.platformBrowser,t.ng.material.button,t.ng.material.icon)}(this,(function(t,e,n,i,r,o,s,a,l,u){"use strict";var c=function(){function t(t){this.sanitizer=t,this.overlayColor="#00000040",this.hideOverlay=!1,this.ariaLabel="",this.disabled=!1,this.load=!1}return t.prototype.ngOnInit=function(){this.image&&(this.image=this.sanitizer.bypassSecurityTrustStyle('url("'+this.image+'")'))},t}();c.decorators=[{type:r.Component,args:[{selector:"mat-carousel-slide",template:'<ng-template>\n  <div class="carousel-slide" [style.background-image]="image">\n    <div class="carousel-slide-content"><ng-content></ng-content></div>\n    <div\n      *ngIf="!hideOverlay"\n      class="carousel-slide-overlay"\n      [attr.aria-label] = "ariaLabel"\n      [style.background-color]="overlayColor"\n    ></div>\n  </div>\n</ng-template>\n',styles:[".carousel-slide{background-position:50%;background-repeat:no-repeat;background-size:cover}.carousel-slide,.carousel-slide-overlay{height:100%;position:absolute;width:100%;z-index:auto}.carousel-slide-content{height:100%;position:absolute;width:100%;z-index:1}"]}]}],c.ctorParameters=function(){return[{type:a.DomSanitizer}]},c.propDecorators={image:[{type:r.Input}],overlayColor:[{type:r.Input}],hideOverlay:[{type:r.Input}],ariaLabel:[{type:r.Input}],disabled:[{type:r.Input}],load:[{type:r.Input}],templateRef:[{type:r.ViewChild,args:[r.TemplateRef]}]};var p={left:0,right:1,index:2};p[p.left]="left",p[p.right]="right",p[p.index]="index";var d=function(){function t(t,e,n){this.animationBuilder=t,this.renderer=e,this.platformId=n,this.timings="250ms ease-in",this.lazyLoad=!1,this.hideArrows=!0,this.hideIndicators=!0,this.ariaLabel="Sliding carousel",this.color="accent",this.maintainAspectRatio=!0,this.proportion=25,this.slideHeight="100%",this.useKeyboard=!1,this.useMouseWheel=!1,this.changeEmitter=new r.EventEmitter,this._autoplay=!0,this.autoplay$=new o.Subject,this.interval$=new o.BehaviorSubject(5e3),this.slides$=new o.BehaviorSubject(null),this._maxWidth="auto",this.maxWidth$=new o.Subject,this._loop=!0,this.loop$=new o.Subject,this._orientation="ltr",this.orientation$=new o.Subject,this.timerStop$=new o.Subject,this.destroy$=new o.Subject,this.playing=!1}return Object.defineProperty(t.prototype,"autoplay",{set:function(t){this.autoplay$.next(t),this._autoplay=t},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"interval",{set:function(t){this.interval$.next(t)},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"loop",{get:function(){return this._loop},set:function(t){this.loop$.next(t),this._loop=t},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"maxWidth",{get:function(){return this._maxWidth},set:function(t){this._maxWidth=t,this.maxWidth$.next()},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"slides",{set:function(t){this.slides$.next(t)},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"orientation",{get:function(){return this._orientation},set:function(t){this.orientation$.next(t),this._orientation=t},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"currentIndex",{get:function(){return this.listKeyManager?this.listKeyManager.activeItemIndex:0},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"currentSlide",{get:function(){return this.listKeyManager?this.listKeyManager.activeItem:null},enumerable:!1,configurable:!0}),t.prototype.onKeyUp=function(t){this.useKeyboard&&!this.playing&&this.listKeyManager.onKeydown(t)},t.prototype.onMouseEnter=function(){this.stopTimer()},t.prototype.onMouseLeave=function(){this.startTimer(this._autoplay)},t.prototype.onMouseWheel=function(t){if(this.useMouseWheel){t.preventDefault();var e=Math.sign(t.deltaY);e>0?this.next():e<0&&this.previous()}},t.prototype.onResize=function(t){var e=this.getWidth();e!==this.width&&(this.width=e,this.slideTo(0))},t.prototype.ngAfterContentInit=function(){var t=this;this.lazyLoad?(this.slidesList.first.load=!0,setTimeout((function(){t.slidesList.find((function(e,n){return n===1%t.slidesList.length})).load=!0,t.slidesList.find((function(e,n){return n===(t.slidesList.length-1)%t.slidesList.length})).load=!0}),this.interval$.getValue()/2)):this.slidesList.forEach((function(t){return t.load=!0})),this.listKeyManager=new n.ListKeyManager(this.slidesList).withVerticalOrientation(!1).withHorizontalOrientation(this._orientation).withWrap(this._loop),this.listKeyManager.updateActiveItem(0),this.listKeyManager.change.pipe(s.takeUntil(this.destroy$)).subscribe((function(){return t.playAnimation()}))},t.prototype.ngAfterViewInit=function(){var t=this;this.width=this.getWidth(),this.autoplay$.pipe(s.takeUntil(this.destroy$)).subscribe((function(e){t.stopTimer(),t.startTimer(e)})),this.interval$.pipe(s.takeUntil(this.destroy$)).subscribe((function(e){t.stopTimer(),t.resetTimer(e),t.startTimer(t._autoplay)})),this.maxWidth$.pipe(s.takeUntil(this.destroy$)).subscribe((function(){return t.slideTo(0)})),this.loop$.pipe(s.takeUntil(this.destroy$)).subscribe((function(e){return t.listKeyManager.withWrap(e)})),this.orientation$.pipe(s.takeUntil(this.destroy$)).subscribe((function(e){return t.listKeyManager.withHorizontalOrientation(e)})),this.slides$.pipe(s.takeUntil(this.destroy$),s.filter((function(e){return e&&e<t.slidesList.length}))).subscribe((function(e){return t.resetSlides(e)}))},t.prototype.ngOnDestroy=function(){this.destroy$.next(),this.destroy$.complete()},t.prototype.next=function(){this.goto(p.right)},t.prototype.previous=function(){this.goto(p.left)},t.prototype.slideTo=function(t){this.goto(p.index,t)},t.prototype.onPan=function(t,e){if(!(Math.abs(t.velocityY)>Math.abs(t.velocityX))){var n=t.deltaX;this.isOutOfBounds()&&(n*=.2),this.renderer.setStyle(e,"cursor","grabbing"),this.renderer.setStyle(this.carouselList.nativeElement,"transform",this.getTranslation(this.getOffset()+n))}},t.prototype.onPanEnd=function(t,e){if(this.renderer.removeStyle(e,"cursor"),!this.isOutOfBounds()&&Math.abs(t.deltaX)>.25*this.getWidth())return t.deltaX<=0?void this.next():void this.previous();this.playAnimation()},t.prototype.isOutOfBounds=function(){var t=("rtl"===this.orientation?-1:1)*(this.carouselList.nativeElement.getBoundingClientRect().left-this.carouselList.nativeElement.offsetParent.getBoundingClientRect().left),e=this.slidesList.length-1,n=-this.getWidth()*e;return 0===this.listKeyManager.activeItemIndex&&t>=0||this.listKeyManager.activeItemIndex===e&&t<=n},t.prototype.isVisible=function(){if(!i.isPlatformBrowser(this.platformId))return!1;var t=this.carouselContainer.nativeElement,e=window.pageYOffset,n=e+window.innerHeight,r=t.getBoundingClientRect(),o=e+r.top;return o+r.height<=n||o>=e},t.prototype.getOffset=function(){var t=this.listKeyManager.activeItemIndex*this.getWidth();return("rtl"===this.orientation?1:-1)*t},t.prototype.getTranslation=function(t){return"translateX("+t+"px)"},t.prototype.getWidth=function(){return this.carouselContainer.nativeElement.clientWidth},t.prototype.goto=function(t,e){if(!this.playing){var n="rtl"===this.orientation;switch(t){case p.left:return n?this.listKeyManager.setNextItemActive():this.listKeyManager.setPreviousItemActive();case p.right:return n?this.listKeyManager.setPreviousItemActive():this.listKeyManager.setNextItemActive();case p.index:return this.listKeyManager.setActiveItem(e)}}},t.prototype.playAnimation=function(){var t=this,n=this.getTranslation(this.getOffset()),i=this.animationBuilder.build(e.animate(this.timings,e.style({transform:n}))).create(this.carouselList.nativeElement);i.onStart((function(){t.playing=!0})),i.onDone((function(){t.changeEmitter.emit(t.currentIndex),t.playing=!1,t.lazyLoad&&(t.slidesList.find((function(e,n){return n===(t.currentIndex+1)%t.slidesList.length})).load=!0,t.slidesList.find((function(e,n){return n===(t.currentIndex-1+t.slidesList.length)%t.slidesList.length})).load=!0,t.slidesList.find((function(e,n){return n===t.currentIndex})).load=!0),t.renderer.setStyle(t.carouselList.nativeElement,"transform",n),i.destroy()})),i.play()},t.prototype.resetSlides=function(t){this.slidesList.reset(this.slidesList.toArray().slice(0,t))},t.prototype.resetTimer=function(t){this.timer$=o.interval(t)},t.prototype.startTimer=function(t){var e=this;t&&this.timer$.pipe(s.takeUntil(this.timerStop$),s.takeUntil(this.destroy$),s.filter((function(){return e.isVisible()}))).subscribe((function(){e.listKeyManager.withWrap(!0).setNextItemActive(),e.listKeyManager.withWrap(e.loop)}))},t.prototype.stopTimer=function(){this.timerStop$.next()},t}();d.decorators=[{type:r.Component,args:[{selector:"mat-carousel",template:'<div\n  #carouselContainer\n  class="carousel"\n  tabindex="0"\n  [style.max-width]="maxWidth"\n  [style.height]="!maintainAspectRatio ? \'100%\' : \'auto\'"\n>\n  <ul\n    #carouselList\n    class="carousel-list"\n    role="listbox"\n    [attr.aria-label]="ariaLabel"\n    [style.flex-direction]="orientation === \'rtl\' ? \'row-reverse\' : \'row\'"\n    [style.height]="!maintainAspectRatio ? \'100%\' : \'auto\'"\n  >\n    <li\n      #carouselSlide\n      *ngFor="let slide of slidesList"\n      class="carousel-slide"\n      role="option"\n      [style.padding-bottom]="maintainAspectRatio && proportion ? proportion + \'%\': \'0px\'"\n      [style.height]="!maintainAspectRatio && slideHeight ? slideHeight : \'0px\'"\n      (panleft)="onPan($event, carouselSlide)"\n      (panright)="onPan($event, carouselSlide)"\n      (panend)="onPanEnd($event, carouselSlide)"\n      (pancancel)="onPanEnd($event, carouselSlide)"\n    >\n      <ng-container *ngIf="slide.load" [ngTemplateOutlet]="slide.templateRef"></ng-container>\n    </li>\n  </ul>\n\n  <button\n    *ngIf="!hideArrows"\n    mat-icon-button\n    type="button"\n    tabindex="-1"\n    aria-label="Previous slide"\n    [color]="color"\n    [disabled]="!loop && currentIndex == 0"\n    (click)="previous()"\n  >\n    <mat-icon\n      *ngIf="svgIconOverrides?.arrowBack; else: defaultArrowBack"\n      [svgIcon]="svgIconOverrides.arrowBack"\n    ></mat-icon>\n    <ng-template #defaultArrowBack>\n      <mat-icon>arrow_back</mat-icon>\n    </ng-template>\n  </button>\n  <button\n    *ngIf="!hideArrows"\n    mat-icon-button\n    type="button"\n    tabindex="-1"\n    aria-label="Next slide"\n    [color]="color"\n    [disabled]="!loop && currentIndex == slidesList.length - 1"\n    (click)="next()"\n  >\n    <mat-icon\n      *ngIf="svgIconOverrides?.arrowForward; else: defaultArrowForward"\n      [svgIcon]="svgIconOverrides.arrowForward"\n    ></mat-icon>\n    <ng-template #defaultArrowForward>\n      <mat-icon>arrow_forward</mat-icon>\n    </ng-template>\n  </button>\n\n  <div\n    *ngIf="!hideIndicators"\n    class="carousel-indicators"\n    tabindex="-1"\n    [style.flex-direction]="orientation === \'rtl\' ? \'row-reverse\' : \'row\'"\n  >\n    <button\n      *ngFor="let slide of slidesList; let i = index"\n      type="button"\n      tabindex="-1"\n      mat-mini-fab\n      [color]="color"\n      [attr.aria-label]="\'Slide #\' + i"\n      [disabled]="i == currentIndex"\n      (click)="slideTo(i)"\n      (focus)="carouselContainer.focus()"\n    ></button>\n  </div>\n</div>\n',styles:[".carousel{outline:none;overflow:hidden;position:relative;width:100%}.carousel>button{position:absolute;top:50%;transform:translateY(-50%);z-index:1}.carousel>button:first-of-type{left:30px}.carousel>button:last-of-type{right:30px}.carousel-list{list-style:none;margin:0;padding:0}.carousel-list,.carousel-slide{display:flex;position:relative;width:100%}.carousel-slide{flex-shrink:0;height:0}.carousel-slide:hover{cursor:-webkit-grab;cursor:grab}.carousel-indicators{bottom:15px;display:flex;left:50%;outline:none;position:absolute;transform:translateX(-50%);z-index:1}.carousel-indicators>button{height:10px;margin:7.5px;width:10px}"]}]}],d.ctorParameters=function(){return[{type:e.AnimationBuilder},{type:r.Renderer2},{type:void 0,decorators:[{type:r.Inject,args:[r.PLATFORM_ID]}]}]},d.propDecorators={timings:[{type:r.Input}],lazyLoad:[{type:r.Input}],svgIconOverrides:[{type:r.Input}],autoplay:[{type:r.Input}],interval:[{type:r.Input}],loop:[{type:r.Input}],hideArrows:[{type:r.Input}],hideIndicators:[{type:r.Input}],ariaLabel:[{type:r.Input}],color:[{type:r.Input}],maxWidth:[{type:r.Input}],maintainAspectRatio:[{type:r.Input}],proportion:[{type:r.Input}],slideHeight:[{type:r.Input}],slides:[{type:r.Input}],useKeyboard:[{type:r.Input}],useMouseWheel:[{type:r.Input}],orientation:[{type:r.Input}],changeEmitter:[{type:r.Output}],slidesList:[{type:r.ContentChildren,args:[c]}],carouselContainer:[{type:r.ViewChild,args:["carouselContainer"]}],carouselList:[{type:r.ViewChild,args:["carouselList"]}],onKeyUp:[{type:r.HostListener,args:["keyup",["$event"]]}],onMouseEnter:[{type:r.HostListener,args:["mouseenter"]}],onMouseLeave:[{type:r.HostListener,args:["mouseleave"]}],onMouseWheel:[{type:r.HostListener,args:["mousewheel",["$event"]]}],onResize:[{type:r.HostListener,args:["window:resize",["$event"]]}]};
/*! *****************************************************************************
    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.
    ***************************************************************************** */
var h=function(t,e){return(h=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])})(t,e)};Object.create;function y(t,e){var n="function"==typeof Symbol&&t[Symbol.iterator];if(!n)return t;var i,r,o=n.call(t),s=[];try{for(;(void 0===e||e-- >0)&&!(i=o.next()).done;)s.push(i.value)}catch(t){r={error:t}}finally{try{i&&!i.done&&(n=o.return)&&n.call(o)}finally{if(r)throw r.error}}return s}function f(){for(var t=[],e=0;e<arguments.length;e++)t=t.concat(y(arguments[e]));return t}Object.create;var g=function(t){function e(){var e=t.apply(this,f(arguments))||this;return e.overrides={pinch:{enable:!1},rotate:{enable:!1}},e}return function(t,e){function n(){this.constructor=t}h(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}(e,t),e}(a.HammerGestureConfig);g.decorators=[{type:r.Injectable}];var m=function(){function t(){}return t.forRoot=function(){return{ngModule:t,providers:[{provide:a.HAMMER_GESTURE_CONFIG,useClass:g}]}},t}();m.decorators=[{type:r.NgModule,args:[{declarations:[d,c],imports:[i.CommonModule,l.MatButtonModule,u.MatIconModule,a.HammerModule],exports:[d,c]}]}],t.MatCarouselComponent=d,t.MatCarouselHammerConfig=g,t.MatCarouselModule=m,t.MatCarouselSlideComponent=c,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=ng-mat-carousel.umd.min.js.map