UNPKG

ng-zorro-antd

Version:

An enterprise-class UI components based on Ant Design and Angular

24 lines (22 loc) 17.1 kB
!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("ng-zorro-antd/core/config"),require("ng-zorro-antd/core/services"),require("ng-zorro-antd/core/util"),require("rxjs"),require("rxjs/operators")):"function"==typeof define&&define.amd?define("ng-zorro-antd/carousel",["exports","@angular/cdk/platform","@angular/common","@angular/core","@angular/cdk/keycodes","ng-zorro-antd/core/config","ng-zorro-antd/core/services","ng-zorro-antd/core/util","rxjs","rxjs/operators"],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["ng-zorro-antd"].core.config,t["ng-zorro-antd"].core.services,t["ng-zorro-antd"].core.util,t.rxjs,t.rxjs.operators)}(this,(function(t,e,n,i,r,s,o,a,l,c){"use strict"; /*! ***************************************************************************** Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABLITY OR NON-INFRINGEMENT. See the Apache Version 2.0 License for specific language governing permissions and limitations under the License. ***************************************************************************** */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)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)};function u(t,e){function n(){this.constructor=t}h(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}function p(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 d(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)}var g=function(){function t(t,e){this.renderer=e,this._active=!1,this.el=t.nativeElement,this.renderer.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}(); /** * @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 f=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 u(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 l.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}(f),m=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.isDragging=!1,e.isTransitioning=!1,e}return u(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 l.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}(f);var v=new i.InjectionToken("nz-carousel-custom-strategies");var k=function(){function t(t,e,n,r,s,o,a,c){var h=this;this.nzConfigService=e,this.renderer=n,this.cdr=r,this.platform=s,this.resizeService=o,this.nzDragService=a,this.customStrategies=c,this.nzTransitionSpeed=500,this.nzBeforeChange=new i.EventEmitter,this.nzAfterChange=new i.EventEmitter,this.activeIndex=0,this.vertical=!1,this.destroy$=new l.Subject,this.gestureRect=null,this.pointerDelta=null,this.isTransiting=!1,this.isDragging=!1,this.pointerDown=function(t){h.isDragging||h.isTransiting||!h.nzEnableSwipe||(h.clearScheduledTransition(),h.gestureRect=h.slickListEl.getBoundingClientRect(),h.nzDragService.requestDraggingSequence(t).subscribe((function(t){h.pointerDelta=t,h.isDragging=!0,h.strategy.dragging(h.pointerDelta)}),(function(){}),(function(){if(h.nzEnableSwipe&&h.isDragging){var t=h.pointerDelta?h.pointerDelta.x:0;Math.abs(t)>h.gestureRect.width/3?h.goTo(t>0?h.activeIndex-1:h.activeIndex+1):h.goTo(h.activeIndex),h.gestureRect=null,h.pointerDelta=null}h.isDragging=!1})))},this.renderer.addClass(t.nativeElement,"ant-carousel"),this.el=t.nativeElement}return 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(c.takeUntil(this.destroy$)).subscribe((function(){t.markContentActive(0),t.syncStrategy()})),this.resizeService.subscribe().pipe(c.takeUntil(this.destroy$)).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.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 m(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.decorators=[{type:i.Component,args:[{changeDetection:i.ChangeDetectionStrategy.OnPush,encapsulation:i.ViewEncapsulation.None,selector:"nz-carousel",exportAs:"nzCarousel",preserveWhitespaces:!1,template:'\n <div class="slick-initialized slick-slider" [class.slick-vertical]="nzDotPosition === \'left\' || nzDotPosition === \'right\'">\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 *ngFor="let content of carouselContents; let i = index" [class.slick-active]="content.isActive" (click)="goTo(i)">\n <ng-template [ngTemplateOutlet]="nzDotRender || renderDotTemplate" [ngTemplateOutletContext]="{ $implicit: i }"> </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"}}]}],t.ctorParameters=function(){return[{type:i.ElementRef},{type:s.NzConfigService},{type:i.Renderer2},{type:i.ChangeDetectorRef},{type:e.Platform},{type:o.NzResizeService},{type:o.NzDragService},{type:Array,decorators:[{type:i.Optional},{type:i.Inject,args:[v]}]}]},t.propDecorators={carouselContents:[{type:i.ContentChildren,args:[g]}],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}],nzDotPosition:[{type:i.Input}],nzBeforeChange:[{type:i.Output}],nzAfterChange:[{type:i.Output}]},p([s.WithConfig("carousel","scrollx"),d("design:type",String)],t.prototype,"nzEffect",void 0),p([s.WithConfig("carousel",!0),a.InputBoolean(),d("design:type",Boolean)],t.prototype,"nzEnableSwipe",void 0),p([s.WithConfig("carousel",!0),a.InputBoolean(),d("design:type",Boolean)],t.prototype,"nzDots",void 0),p([s.WithConfig("carousel",!1),a.InputBoolean(),d("design:type",Boolean)],t.prototype,"nzAutoPlay",void 0),p([s.WithConfig("carousel",3e3),a.InputNumber(),d("design:type",Number)],t.prototype,"nzAutoPlaySpeed",void 0),p([a.InputNumber(),d("design:type",Object)],t.prototype,"nzTransitionSpeed",void 0),p([s.WithConfig("carousel","bottom"),d("design:type",String),d("design:paramtypes",[String])],t.prototype,"nzDotPosition",null),t}();var C=function(){function t(){}return t.decorators=[{type:i.NgModule,args:[{declarations:[k,g],exports:[k,g],imports:[n.CommonModule,e.PlatformModule]}]}],t}();t.NZ_CAROUSEL_CUSTOM_STRATEGIES=v,t.NzCarouselBaseStrategy=f,t.NzCarouselComponent=k,t.NzCarouselContentDirective=g,t.NzCarouselModule=C,Object.defineProperty(t,"__esModule",{value:!0})})); //# sourceMappingURL=ng-zorro-antd-carousel.umd.min.js.map