UNPKG

ng-zorro-antd

Version:

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

17 lines (15 loc) 17.6 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="undefined"!=typeof globalThis?globalThis: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";var h=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}();h.decorators=[{type:i.Directive,args:[{selector:"[nz-carousel-content]",exportAs:"nzCarouselContent"}]}],h.ctorParameters=function(){return[{type:i.ElementRef},{type:i.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 u=function(t,e){return(u=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 p(t,e){function n(){this.constructor=t}u(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}function d(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 g(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)}Object.create;function f(t,e){var n="function"==typeof Symbol&&t[Symbol.iterator];if(!n)return t;var i,r,s=n.call(t),o=[];try{for(;(void 0===e||e-- >0)&&!(i=s.next()).done;)o.push(i.value)}catch(t){r={error:t}}finally{try{i&&!i.done&&(n=s.return)&&n.call(s)}finally{if(r)throw r.error}}return o}function y(){for(var t=[],e=0;e<arguments.length;e++)t=t.concat(f(arguments[e]));return t}Object.create;var m=function(){function t(t,e,n,i){this.cdr=e,this.renderer=n,this.platform=i,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}(),v=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return p(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}(m),k=function(t){function e(){var e=t.apply(this,y(arguments))||this;return e.isDragging=!1,e.isTransitioning=!1,e}return p(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 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}(m),C=new i.InjectionToken("nz-carousel-custom-strategies"),S=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._nzModuleName="carousel",this.nzEffect="scrollx",this.nzEnableSwipe=!0,this.nzDots=!0,this.nzAutoPlay=!1,this.nzAutoPlaySpeed=3e3,this.nzTransitionSpeed=500,this._dotPosition="bottom",this.nzBeforeChange=new i.EventEmitter,this.nzAfterChange=new i.EventEmitter,this.activeIndex=0,this.vertical=!1,this.transitionInProgress=null,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){var e;h.pointerDelta=t,h.isDragging=!0,null===(e=h.strategy)||void 0===e||e.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.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.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(c.takeUntil(this.destroy$)).subscribe((function(){t.markContentActive(0),t.layout()})),this.resizeService.subscribe().pipe(c.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===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,this.platform):"scrollx"===this.nzEffect?new k(this,this.cdr,this.renderer,this.platform):new v(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){this.activeIndex=t,this.carouselContents&&this.carouselContents.forEach((function(e,n){e.isActive=t===n})),this.cdr.markForCheck()},t.prototype.layout=function(){this.strategy&&this.strategy.withCarouselContents(this.carouselContents)},t}();S.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"}}]}],S.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:[C]}]}]},S.propDecorators={carouselContents:[{type:i.ContentChildren,args:[h]}],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}]},d([s.WithConfig(),g("design:type",String)],S.prototype,"nzEffect",void 0),d([s.WithConfig(),a.InputBoolean(),g("design:type",Boolean)],S.prototype,"nzEnableSwipe",void 0),d([s.WithConfig(),a.InputBoolean(),g("design:type",Boolean)],S.prototype,"nzDots",void 0),d([s.WithConfig(),a.InputBoolean(),g("design:type",Boolean)],S.prototype,"nzAutoPlay",void 0),d([s.WithConfig(),a.InputNumber(),g("design:type",Number)],S.prototype,"nzAutoPlaySpeed",void 0),d([a.InputNumber(),g("design:type",Object)],S.prototype,"nzTransitionSpeed",void 0),d([s.WithConfig(),g("design:type",String),g("design:paramtypes",[String])],S.prototype,"nzDotPosition",null);var x=function(){};x.decorators=[{type:i.NgModule,args:[{declarations:[S,h],exports:[S,h],imports:[n.CommonModule,e.PlatformModule]}]}],t.NZ_CAROUSEL_CUSTOM_STRATEGIES=C,t.NzCarouselBaseStrategy=m,t.NzCarouselComponent=S,t.NzCarouselContentDirective=h,t.NzCarouselModule=x,Object.defineProperty(t,"__esModule",{value:!0})})); //# sourceMappingURL=ng-zorro-antd-carousel.umd.min.js.map