ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
10 lines • 17.4 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/cdk/platform"),require("@angular/common"),require("@angular/core"),require("@angular/cdk/keycodes"),require("rxjs"),require("rxjs/operators"),require("ng-zorro-antd/core")):"function"==typeof define&&define.amd?define("ng-zorro-antd/carousel",["exports","@angular/cdk/platform","@angular/common","@angular/core","@angular/cdk/keycodes","rxjs","rxjs/operators","ng-zorro-antd/core"],e):e(((t=t||self)["ng-zorro-antd"]=t["ng-zorro-antd"]||{},t["ng-zorro-antd"].carousel={}),t.ng.cdk.platform,t.ng.common,t.ng.core,t.ng.cdk.keycodes,t.rxjs,t.rxjs.operators,t["ng-zorro-antd"].core)}(this,function(t,e,n,i,r,s,o,a){"use strict";var l=function(t,e){return(l=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)};function c(t,e){function n(){this.constructor=t}l(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}function h(t,e,n,i){var r,s=arguments.length,o=s<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(t,e,n,i);else for(var a=t.length-1;a>=0;a--)(r=t[a])&&(o=(s<3?r(o):s>3?r(e,n,o):r(e,n))||o);return s>3&&o&&Object.defineProperty(e,n,o),o}function p(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)}var u=function(){function t(t,e){this.elementRef=t,this.renderer=e,this.el=this.elementRef.nativeElement,this._active=!1,e.addClass(t.nativeElement,"slick-slide")}return Object.defineProperty(t.prototype,"isActive",{get:function(){return this._active},set:function(t){this._active=t,this.isActive?this.renderer.addClass(this.el,"slick-active"):this.renderer.removeClass(this.el,"slick-active")},enumerable:!0,configurable:!0}),t.decorators=[{type:i.Directive,args:[{selector:"[nz-carousel-content]",exportAs:"nzCarouselContent"}]}],t.ctorParameters=function(){return[{type:i.ElementRef},{type:i.Renderer2}]},t}();var d=new i.InjectionToken("nz-carousel-custom-strategies");
/**
* @license
* Copyright Alibaba.com All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
var g=function(){function t(t,e,n){this.cdr=e,this.renderer=n,this.carouselComponent=t}return Object.defineProperty(t.prototype,"maxIndex",{get:function(){return this.length-1},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"firstEl",{get:function(){return this.contents[0].el},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"lastEl",{get:function(){return this.contents[this.maxIndex].el},enumerable:!0,configurable:!0}),t.prototype.withCarouselContents=function(t){var e=this.carouselComponent,n=e.el.getBoundingClientRect();this.slickListEl=e.slickListEl,this.slickTrackEl=e.slickTrackEl,this.unitWidth=n.width,this.unitHeight=n.height,this.contents=t?t.toArray():[],this.length=this.contents.length},t.prototype.dragging=function(t){},t.prototype.dispose=function(){},t.prototype.getFromToInBoundary=function(t,e){var n=this.maxIndex+1;return{from:(t+n)%n,to:(e+n)%n}},t}();var y=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return c(e,t),e.prototype.withCarouselContents=function(e){var n=this;t.prototype.withCarouselContents.call(this,e),this.contents&&(this.slickTrackEl.style.width=this.length*this.unitWidth+"px",this.contents.forEach(function(t,e){n.renderer.setStyle(t.el,"opacity",n.carouselComponent.activeIndex===e?"1":"0"),n.renderer.setStyle(t.el,"position","relative"),n.renderer.setStyle(t.el,"width",n.unitWidth+"px"),n.renderer.setStyle(t.el,"left",-n.unitWidth*e+"px"),n.renderer.setStyle(t.el,"transition",["opacity 500ms ease 0s","visibility 500ms ease 0s"])}))},e.prototype.switch=function(t,e){var n=this,i=this.getFromToInBoundary(t,e).to,r=new s.Subject;return this.contents.forEach(function(t,e){n.renderer.setStyle(t.el,"opacity",i===e?"1":"0")}),setTimeout(function(){r.next(),r.complete()},this.carouselComponent.nzTransitionSpeed),r},e.prototype.dispose=function(){var e=this;this.contents.forEach(function(t){e.renderer.setStyle(t.el,"transition",null)}),t.prototype.dispose.call(this)},e}(g),f=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.isDragging=!1,e.isTransitioning=!1,e}return c(e,t),Object.defineProperty(e.prototype,"vertical",{get:function(){return this.carouselComponent.vertical},enumerable:!0,configurable:!0}),e.prototype.dispose=function(){t.prototype.dispose.call(this),this.renderer.setStyle(this.slickTrackEl,"transform",null)},e.prototype.withCarouselContents=function(e){var n=this;t.prototype.withCarouselContents.call(this,e);var i=this.carouselComponent.activeIndex;this.contents.length&&(this.renderer.setStyle(this.slickListEl,"height",this.unitHeight+"px"),this.vertical?(this.renderer.setStyle(this.slickTrackEl,"width",this.unitWidth+"px"),this.renderer.setStyle(this.slickTrackEl,"height",this.length*this.unitHeight+"px"),this.renderer.setStyle(this.slickTrackEl,"transform","translate3d(0, "+-i*this.unitHeight+"px, 0)")):(this.renderer.setStyle(this.slickTrackEl,"height",this.unitHeight+"px"),this.renderer.setStyle(this.slickTrackEl,"width",this.length*this.unitWidth+"px"),this.renderer.setStyle(this.slickTrackEl,"transform","translate3d("+-i*this.unitWidth+"px, 0, 0)")),this.contents.forEach(function(t){n.renderer.setStyle(t.el,"position","relative"),n.renderer.setStyle(t.el,"width",n.unitWidth+"px"),n.renderer.setStyle(t.el,"height",n.unitHeight+"px")}))},e.prototype.switch=function(t,e){var n=this,i=this.getFromToInBoundary(t,e).to,r=new s.Subject;return this.renderer.setStyle(this.slickTrackEl,"transition","transform "+this.carouselComponent.nzTransitionSpeed+"ms ease"),this.vertical?this.verticalTransform(t,e):this.horizontalTransform(t,e),this.isTransitioning=!0,this.isDragging=!1,setTimeout(function(){n.renderer.setStyle(n.slickTrackEl,"transition",null),n.contents.forEach(function(t){n.renderer.setStyle(t.el,n.vertical?"top":"left",null)}),n.vertical?n.renderer.setStyle(n.slickTrackEl,"transform","translate3d(0, "+-i*n.unitHeight+"px, 0)"):n.renderer.setStyle(n.slickTrackEl,"transform","translate3d("+-i*n.unitWidth+"px, 0, 0)"),n.isTransitioning=!1,r.next(),r.complete()},this.carouselComponent.nzTransitionSpeed),r.asObservable()},e.prototype.dragging=function(t){if(!this.isTransitioning){var e=this.carouselComponent.activeIndex;this.carouselComponent.vertical?(!this.isDragging&&this.length>2&&(e===this.maxIndex?this.prepareVerticalContext(!0):0===e&&this.prepareVerticalContext(!1)),this.renderer.setStyle(this.slickTrackEl,"transform","translate3d(0, "+(-e*this.unitHeight+t.x)+"px, 0)")):(!this.isDragging&&this.length>2&&(e===this.maxIndex?this.prepareHorizontalContext(!0):0===e&&this.prepareHorizontalContext(!1)),this.renderer.setStyle(this.slickTrackEl,"transform","translate3d("+(-e*this.unitWidth+t.x)+"px, 0, 0)")),this.isDragging=!0}},e.prototype.verticalTransform=function(t,e){var n=this.getFromToInBoundary(t,e),i=n.from,r=n.to;this.length>2&&e!==r?(this.prepareVerticalContext(r<i),this.renderer.setStyle(this.slickTrackEl,"transform","translate3d(0, "+-e*this.unitHeight+"px, 0)")):this.renderer.setStyle(this.slickTrackEl,"transform","translate3d(0, "+-r*this.unitHeight+"px, 0")},e.prototype.horizontalTransform=function(t,e){var n=this.getFromToInBoundary(t,e),i=n.from,r=n.to;this.length>2&&e!==r?(this.prepareHorizontalContext(r<i),this.renderer.setStyle(this.slickTrackEl,"transform","translate3d("+-e*this.unitWidth+"px, 0, 0)")):this.renderer.setStyle(this.slickTrackEl,"transform","translate3d("+-r*this.unitWidth+"px, 0, 0")},e.prototype.prepareVerticalContext=function(t){t?(this.renderer.setStyle(this.firstEl,"top",this.length*this.unitHeight+"px"),this.renderer.setStyle(this.lastEl,"top",null)):(this.renderer.setStyle(this.firstEl,"top",null),this.renderer.setStyle(this.lastEl,"top",-this.unitHeight*this.length+"px"))},e.prototype.prepareHorizontalContext=function(t){t?(this.renderer.setStyle(this.firstEl,"left",this.length*this.unitWidth+"px"),this.renderer.setStyle(this.lastEl,"left",null)):(this.renderer.setStyle(this.firstEl,"left",null),this.renderer.setStyle(this.lastEl,"left",-this.unitWidth*this.length+"px"))},e}(g);var m=function(){function t(t,e,n,r,o,l,c,h){var p=this;this.nzConfigService=t,this.renderer=n,this.cdr=r,this.platform=o,this.nzDomEventService=l,this.customStrategies=h,this.nzTransitionSpeed=500,this.nzBeforeChange=new i.EventEmitter,this.nzAfterChange=new i.EventEmitter,this.activeIndex=0,this.vertical=!1,this.destroy$=new s.Subject,this.gestureRect=null,this.pointerDelta=null,this.pointerPosition=null,this.isTransiting=!1,this.isDragging=!1,this.pointerDown=function(t){if(!p.isDragging&&!p.isTransiting&&p.nzEnableSwipe){var e=a.isTouchEvent(t)?t.touches[0]||t.changedTouches[0]:t;p.isDragging=!0,p.clearScheduledTransition(),p.gestureRect=p.slickListEl.getBoundingClientRect(),p.pointerPosition={x:e.clientX,y:e.clientY},p.document.addEventListener("mousemove",p.pointerMove),p.document.addEventListener("touchmove",p.pointerMove),p.document.addEventListener("mouseup",p.pointerUp),p.document.addEventListener("touchend",p.pointerUp)}},this.pointerMove=function(t){if(p.isDragging){var e=a.isTouchEvent(t)?t.touches[0]||t.changedTouches[0]:t;p.pointerDelta={x:e.clientX-p.pointerPosition.x,y:e.clientY-p.pointerPosition.y},Math.abs(p.pointerDelta.x)>5&&p.strategy.dragging(p.pointerDelta)}},this.pointerUp=function(){if(p.isDragging&&p.nzEnableSwipe){var t=p.pointerDelta?p.pointerDelta.x:0;Math.abs(t)>p.gestureRect.width/3?p.goTo(t>0?p.activeIndex-1:p.activeIndex+1):p.goTo(p.activeIndex),p.gestureRect=null,p.pointerDelta=null,p.isDragging=!1,p.dispose()}},this.document=c,this.renderer.addClass(e.nativeElement,"ant-carousel"),this.el=e.nativeElement}return Object.defineProperty(t.prototype,"nzVertical",{get:function(){return this.vertical},set:function(t){a.warnDeprecation("'nzVertical' is deprecated and will be removed in 9.0.0. Please use 'nzDotPosition' instead."),this.vertical=t},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"nzDotPosition",{get:function(){return this._dotPosition},set:function(t){this._dotPosition=t,this.vertical="left"===t||"right"===t},enumerable:!0,configurable:!0}),t.prototype.ngAfterContentInit=function(){this.markContentActive(0)},t.prototype.ngAfterViewInit=function(){var t=this;this.platform.isBrowser&&(this.slickListEl=this.slickList.nativeElement,this.slickTrackEl=this.slickTrack.nativeElement,this.carouselContents.changes.pipe(o.takeUntil(this.destroy$)).subscribe(function(){t.markContentActive(0),t.syncStrategy()}),this.nzDomEventService.registerResizeListener().pipe(o.takeUntil(this.destroy$),o.finalize(function(){return t.nzDomEventService.unregisterResizeListener()})).subscribe(function(){t.syncStrategy()}),this.switchStrategy(),this.markContentActive(0),this.syncStrategy(),Promise.resolve().then(function(){t.syncStrategy()}))},t.prototype.ngOnChanges=function(t){var e=t.nzEffect,n=t.nzDotPosition;e&&!e.isFirstChange()&&(this.switchStrategy(),this.markContentActive(0),this.syncStrategy()),n&&!n.isFirstChange()&&(this.switchStrategy(),this.markContentActive(0),this.syncStrategy()),this.nzAutoPlay&&this.nzAutoPlaySpeed?this.scheduleNextTransition():this.clearScheduledTransition()},t.prototype.ngOnDestroy=function(){this.clearScheduledTransition(),this.strategy&&this.strategy.dispose(),this.dispose(),this.destroy$.next(),this.destroy$.complete()},t.prototype.onKeyDown=function(t){t.keyCode===r.LEFT_ARROW?(t.preventDefault(),this.pre()):t.keyCode===r.RIGHT_ARROW&&(this.next(),t.preventDefault())},t.prototype.next=function(){this.goTo(this.activeIndex+1)},t.prototype.pre=function(){this.goTo(this.activeIndex-1)},t.prototype.goTo=function(t){var e=this;if(this.carouselContents&&this.carouselContents.length&&!this.isTransiting){var n=this.carouselContents.length,i=this.activeIndex,r=(t+n)%n;this.isTransiting=!0,this.nzBeforeChange.emit({from:i,to:r}),this.strategy.switch(this.activeIndex,t).subscribe(function(){e.scheduleNextTransition(),e.nzAfterChange.emit(t),e.isTransiting=!1}),this.markContentActive(r),this.cdr.markForCheck()}},t.prototype.switchStrategy=function(){var t=this;this.strategy&&this.strategy.dispose();var e=this.customStrategies?this.customStrategies.find(function(e){return e.name===t.nzEffect}):null;this.strategy=e?new e.strategy(this,this.cdr,this.renderer):"scrollx"===this.nzEffect?new f(this,this.cdr,this.renderer):new y(this,this.cdr,this.renderer)},t.prototype.scheduleNextTransition=function(){var t=this;this.clearScheduledTransition(),this.nzAutoPlay&&this.nzAutoPlaySpeed>0&&this.platform.isBrowser&&(this.transitionInProgress=setTimeout(function(){t.goTo(t.activeIndex+1)},this.nzAutoPlaySpeed))},t.prototype.clearScheduledTransition=function(){this.transitionInProgress&&(clearTimeout(this.transitionInProgress),this.transitionInProgress=null)},t.prototype.markContentActive=function(t){this.activeIndex=t,this.carouselContents&&this.carouselContents.forEach(function(e,n){e.isActive=t===n}),this.cdr.markForCheck()},t.prototype.syncStrategy=function(){this.strategy&&this.strategy.withCarouselContents(this.carouselContents)},t.prototype.dispose=function(){this.document.removeEventListener("mousemove",this.pointerMove),this.document.removeEventListener("touchmove",this.pointerMove),this.document.removeEventListener("touchend",this.pointerMove),this.document.removeEventListener("mouseup",this.pointerMove)},t.decorators=[{type:i.Component,args:[{changeDetection:i.ChangeDetectionStrategy.OnPush,encapsulation:i.ViewEncapsulation.None,selector:"nz-carousel",exportAs:"nzCarousel",preserveWhitespaces:!1,template:'<div class="slick-initialized slick-slider" [class.slick-vertical]="nzVertical">\n <div\n #slickList\n class="slick-list"\n tabindex="-1"\n (keydown)="onKeyDown($event)"\n (mousedown)="pointerDown($event)"\n (touchstart)="pointerDown($event)"\n >\n \x3c!-- Render carousel items. --\x3e\n <div class="slick-track" #slickTrack>\n <ng-content></ng-content>\n </div>\n </div>\n \x3c!-- Render dots. --\x3e\n <ul\n class="slick-dots"\n *ngIf="nzDots"\n [class.slick-dots-top]="nzDotPosition === \'top\'"\n [class.slick-dots-bottom]="nzDotPosition === \'bottom\'"\n [class.slick-dots-left]="nzDotPosition === \'left\'"\n [class.slick-dots-right]="nzDotPosition === \'right\'"\n >\n <li\n *ngFor="let content of carouselContents; let i = index"\n [class.slick-active]="content.isActive"\n (click)="goTo(i)"\n >\n <ng-template [ngTemplateOutlet]="nzDotRender || renderDotTemplate" [ngTemplateOutletContext]="{ $implicit: i }">\n </ng-template>\n </li>\n </ul>\n</div>\n\n<ng-template #renderDotTemplate let-index>\n <button>{{ index + 1 }}</button>\n</ng-template>\n',host:{"[class.ant-carousel-vertical]":"vertical"},styles:["\n nz-carousel {\n display: block;\n position: relative;\n overflow: hidden;\n width: 100%;\n height: 100%;\n }\n\n .slick-dots {\n display: block;\n }\n\n .slick-track {\n opacity: 1;\n }\n "]}]}],t.ctorParameters=function(){return[{type:a.NzConfigService},{type:i.ElementRef},{type:i.Renderer2},{type:i.ChangeDetectorRef},{type:e.Platform},{type:a.NzDomEventService},{type:void 0,decorators:[{type:i.Inject,args:[n.DOCUMENT]}]},{type:Array,decorators:[{type:i.Optional},{type:i.Inject,args:[d]}]}]},t.propDecorators={carouselContents:[{type:i.ContentChildren,args:[u]}],slickList:[{type:i.ViewChild,args:["slickList",{static:!1}]}],slickTrack:[{type:i.ViewChild,args:["slickTrack",{static:!1}]}],nzDotRender:[{type:i.Input}],nzEffect:[{type:i.Input}],nzEnableSwipe:[{type:i.Input}],nzDots:[{type:i.Input}],nzAutoPlay:[{type:i.Input}],nzAutoPlaySpeed:[{type:i.Input}],nzTransitionSpeed:[{type:i.Input}],nzVertical:[{type:i.Input}],nzDotPosition:[{type:i.Input}],nzBeforeChange:[{type:i.Output}],nzAfterChange:[{type:i.Output}]},h([a.WithConfig("scrollx"),p("design:type",String)],t.prototype,"nzEffect",void 0),h([a.WithConfig(!0),a.InputBoolean(),p("design:type",Boolean)],t.prototype,"nzEnableSwipe",void 0),h([a.WithConfig(!0),a.InputBoolean(),p("design:type",Boolean)],t.prototype,"nzDots",void 0),h([a.WithConfig(!1),a.InputBoolean(),p("design:type",Boolean)],t.prototype,"nzAutoPlay",void 0),h([a.WithConfig(3e3),a.InputNumber(),p("design:type",Number)],t.prototype,"nzAutoPlaySpeed",void 0),h([a.InputNumber(),p("design:type",Object)],t.prototype,"nzTransitionSpeed",void 0),h([a.InputBoolean(),p("design:type",Boolean),p("design:paramtypes",[Boolean])],t.prototype,"nzVertical",null),h([a.WithConfig("bottom"),p("design:type",String),p("design:paramtypes",[String])],t.prototype,"nzDotPosition",null),t}();var v=function(){function t(){}return t.decorators=[{type:i.NgModule,args:[{declarations:[m,u],exports:[m,u],imports:[n.CommonModule,e.PlatformModule]}]}],t}();t.NZ_CAROUSEL_CUSTOM_STRATEGIES=d,t.NzCarouselBaseStrategy=g,t.NzCarouselComponent=m,t.NzCarouselContentDirective=u,t.NzCarouselModule=v,Object.defineProperty(t,"__esModule",{value:!0})});
//# sourceMappingURL=ng-zorro-antd-carousel.umd.min.js.map