UNPKG

ng-zorro-antd

Version:

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

17 lines (15 loc) 18.1 kB
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/cdk/bidi"),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/bidi","@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="undefined"!=typeof globalThis?globalThis:t||self)["ng-zorro-antd"]=t["ng-zorro-antd"]||{},t["ng-zorro-antd"].carousel={}),t.ng.cdk.bidi,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,h){"use strict";var u=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:!1,configurable:!0}),t}();u.decorators=[{type:r.Directive,args:[{selector:"[nz-carousel-content]",exportAs:"nzCarouselContent"}]}],u.ctorParameters=function(){return[{type:r.ElementRef},{type:r.Renderer2}]}; /*! ***************************************************************************** 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 p=function(t,e){return(p=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)};function d(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function n(){this.constructor=t}p(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}function g(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 f(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)}Object.create;Object.create;var y=function(){function t(t,e,n,i,r){this.cdr=e,this.renderer=n,this.platform=i,this.options=r,this.carouselComponent=t}return Object.defineProperty(t.prototype,"maxIndex",{get:function(){return this.length-1},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"firstEl",{get:function(){return this.contents[0].el},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"lastEl",{get:function(){return this.contents[this.maxIndex].el},enumerable:!1,configurable:!0}),t.prototype.withCarouselContents=function(t){var e=this,n=this.carouselComponent;if(this.slickListEl=n.slickListEl,this.slickTrackEl=n.slickTrackEl,this.contents=(null==t?void 0:t.toArray())||[],this.length=this.contents.length,this.platform.isBrowser){var i=n.el.getBoundingClientRect();this.unitWidth=i.width,this.unitHeight=i.height}else null==t||t.forEach((function(t,n){0===n?e.renderer.setStyle(t.el,"width","100%"):e.renderer.setStyle(t.el,"display","none")}))},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}(),m=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return d(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 c.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}(y),v=function(t){function e(e,n,i,r,s){var o=t.call(this,e,n,i,r,s)||this;return o.isDragging=!1,o.isTransitioning=!1,o}return d(e,t),Object.defineProperty(e.prototype,"vertical",{get:function(){return this.carouselComponent.vertical},enumerable:!1,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.platform.isBrowser&&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 c.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}(y),k=new r.InjectionToken("nz-carousel-custom-strategies"),C=function(){function t(t,e,n,i,s,o,a,l,h){var u=this;this.nzConfigService=e,this.renderer=n,this.cdr=i,this.platform=s,this.resizeService=o,this.nzDragService=a,this.directionality=l,this.customStrategies=h,this._nzModuleName="carousel",this.nzEffect="scrollx",this.nzEnableSwipe=!0,this.nzDots=!0,this.nzAutoPlay=!1,this.nzAutoPlaySpeed=3e3,this.nzTransitionSpeed=500,this.nzStrategyOptions=void 0,this._dotPosition="bottom",this.nzBeforeChange=new r.EventEmitter,this.nzAfterChange=new r.EventEmitter,this.activeIndex=0,this.vertical=!1,this.transitionInProgress=null,this.dir="ltr",this.destroy$=new c.Subject,this.gestureRect=null,this.pointerDelta=null,this.isTransiting=!1,this.isDragging=!1,this.onLiClick=function(t){"rtl"===u.dir?u.goTo(u.carouselContents.length-1-t):u.goTo(t)},this.pointerDown=function(t){u.isDragging||u.isTransiting||!u.nzEnableSwipe||(u.clearScheduledTransition(),u.gestureRect=u.slickListEl.getBoundingClientRect(),u.nzDragService.requestDraggingSequence(t).subscribe((function(t){var e;u.pointerDelta=t,u.isDragging=!0,null===(e=u.strategy)||void 0===e||e.dragging(u.pointerDelta)}),(function(){}),(function(){if(u.nzEnableSwipe&&u.isDragging){var t=u.pointerDelta?u.pointerDelta.x:0;Math.abs(t)>u.gestureRect.width/3?u.goTo(t>0?u.activeIndex-1:u.activeIndex+1):u.goTo(u.activeIndex),u.gestureRect=null,u.pointerDelta=null}u.isDragging=!1})))},this.nzDotPosition="bottom",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:!1,configurable:!0}),t.prototype.ngOnInit=function(){var t,e=this;this.dir=this.directionality.value,null===(t=this.directionality.change)||void 0===t||t.pipe(h.takeUntil(this.destroy$)).subscribe((function(t){e.dir=t,e.markContentActive(e.activeIndex),e.cdr.detectChanges()}))},t.prototype.ngAfterContentInit=function(){this.markContentActive(0)},t.prototype.ngAfterViewInit=function(){var t=this;this.slickListEl=this.slickList.nativeElement,this.slickTrackEl=this.slickTrack.nativeElement,this.carouselContents.changes.pipe(h.takeUntil(this.destroy$)).subscribe((function(){t.markContentActive(0),t.layout()})),this.resizeService.subscribe().pipe(h.takeUntil(this.destroy$)).subscribe((function(){t.layout()})),this.switchStrategy(),this.markContentActive(0),this.layout(),Promise.resolve().then((function(){t.layout()}))},t.prototype.ngOnChanges=function(t){var e=t.nzEffect,n=t.nzDotPosition;e&&!e.isFirstChange()&&(this.switchStrategy(),this.markContentActive(0),this.layout()),n&&!n.isFirstChange()&&(this.switchStrategy(),this.markContentActive(0),this.layout()),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===s.LEFT_ARROW?(t.preventDefault(),this.pre()):t.keyCode===s.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,this.platform):"scrollx"===this.nzEffect?new v(this,this.cdr,this.renderer,this.platform):new m(this,this.cdr,this.renderer,this.platform)},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){var e=this;this.activeIndex=t,this.carouselContents&&this.carouselContents.forEach((function(n,i){"rtl"===e.dir?n.isActive=t===e.carouselContents.length-1-i:n.isActive=t===i})),this.cdr.markForCheck()},t.prototype.layout=function(){this.strategy&&this.strategy.withCarouselContents(this.carouselContents)},t}();C.decorators=[{type:r.Component,args:[{changeDetection:r.ChangeDetectionStrategy.OnPush,encapsulation:r.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)="onLiClick(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","[class.ant-carousel-rtl]":"dir ==='rtl'"}}]}],C.ctorParameters=function(){return[{type:r.ElementRef},{type:o.NzConfigService},{type:r.Renderer2},{type:r.ChangeDetectorRef},{type:n.Platform},{type:a.NzResizeService},{type:a.NzDragService},{type:e.Directionality,decorators:[{type:r.Optional}]},{type:Array,decorators:[{type:r.Optional},{type:r.Inject,args:[k]}]}]},C.propDecorators={carouselContents:[{type:r.ContentChildren,args:[u]}],slickList:[{type:r.ViewChild,args:["slickList",{static:!1}]}],slickTrack:[{type:r.ViewChild,args:["slickTrack",{static:!1}]}],nzDotRender:[{type:r.Input}],nzEffect:[{type:r.Input}],nzEnableSwipe:[{type:r.Input}],nzDots:[{type:r.Input}],nzAutoPlay:[{type:r.Input}],nzAutoPlaySpeed:[{type:r.Input}],nzTransitionSpeed:[{type:r.Input}],nzStrategyOptions:[{type:r.Input}],nzDotPosition:[{type:r.Input}],nzBeforeChange:[{type:r.Output}],nzAfterChange:[{type:r.Output}]},g([o.WithConfig(),f("design:type",String)],C.prototype,"nzEffect",void 0),g([o.WithConfig(),l.InputBoolean(),f("design:type",Boolean)],C.prototype,"nzEnableSwipe",void 0),g([o.WithConfig(),l.InputBoolean(),f("design:type",Boolean)],C.prototype,"nzDots",void 0),g([o.WithConfig(),l.InputBoolean(),f("design:type",Boolean)],C.prototype,"nzAutoPlay",void 0),g([o.WithConfig(),l.InputNumber(),f("design:type",Number)],C.prototype,"nzAutoPlaySpeed",void 0),g([l.InputNumber(),f("design:type",Object)],C.prototype,"nzTransitionSpeed",void 0),g([o.WithConfig(),f("design:type",String),f("design:paramtypes",[String])],C.prototype,"nzDotPosition",null);var z=function(){};z.decorators=[{type:r.NgModule,args:[{declarations:[C,u],exports:[C,u],imports:[e.BidiModule,i.CommonModule,n.PlatformModule]}]}],t.NZ_CAROUSEL_CUSTOM_STRATEGIES=k,t.NzCarouselBaseStrategy=y,t.NzCarouselComponent=C,t.NzCarouselContentDirective=u,t.NzCarouselModule=z,Object.defineProperty(t,"__esModule",{value:!0})})); //# sourceMappingURL=ng-zorro-antd-carousel.umd.min.js.map