ng-zorro-antd/bundles/ng-zorro-antd-image.umd.min.js

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

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/cdk/bidi"),require("@angular/core"),require("ng-zorro-antd/core/config"),require("ng-zorro-antd/core/util"),require("rxjs"),require("rxjs/operators"),require("@angular/cdk/overlay"),require("@angular/cdk/portal"),require("@angular/cdk/keycodes"),require("ng-zorro-antd/core/animation"),require("@angular/cdk/drag-drop"),require("@angular/common"),require("ng-zorro-antd/icon"),require("ng-zorro-antd/pipes")):"function"==typeof define&&define.amd?define("ng-zorro-antd/image",["exports","@angular/cdk/bidi","@angular/core","ng-zorro-antd/core/config","ng-zorro-antd/core/util","rxjs","rxjs/operators","@angular/cdk/overlay","@angular/cdk/portal","@angular/cdk/keycodes","ng-zorro-antd/core/animation","@angular/cdk/drag-drop","@angular/common","ng-zorro-antd/icon","ng-zorro-antd/pipes"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self)["ng-zorro-antd"]=e["ng-zorro-antd"]||{},e["ng-zorro-antd"].image={}),e.ng.cdk.bidi,e.ng.core,e["ng-zorro-antd"].core.config,e["ng-zorro-antd"].core.util,e.rxjs,e.rxjs.operators,e.ng.cdk.overlay,e.ng.cdk.portal,e.ng.cdk.keycodes,e["ng-zorro-antd"].core.animation,e.ng.cdk.dragDrop,e.ng.common,e["ng-zorro-antd"].icon,e["ng-zorro-antd"].pipes)}(this,(function(e,t,n,i,o,r,a,s,c,p,l,d,h,g,u){"use strict";
/*! *****************************************************************************
    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.
    ***************************************************************************** */function m(e,t,n,i){var o,r=arguments.length,a=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(r<3?o(a):r>3?o(t,n,a):o(t,n))||a);return r>3&&a&&Object.defineProperty(t,n,a),a}function f(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}Object.create;Object.create;var v=function(){function e(){this.images=[]}return e.prototype.addImage=function(e){this.images.push(e)},e}();v.decorators=[{type:n.Component,args:[{selector:"nz-image-group",exportAs:"nzImageGroup",template:"<ng-content></ng-content>",preserveWhitespaces:!1,changeDetection:n.ChangeDetectionStrategy.OnPush,encapsulation:n.ViewEncapsulation.None}]}];var y={enter:"fade-enter",enterActive:"fade-enter-active",leave:"fade-leave",leaveActive:"fade-leave-active"},z="ant-image-preview-mask",w="image",b=function(){this.nzKeyboard=!0,this.nzNoAnimation=!1,this.nzMaskClosable=!0,this.nzCloseOnNavigation=!0},k=function(){function e(e,t,n){var i=this;this.previewInstance=e,this.config=t,this.overlayRef=n,n.keydownEvents().pipe(a.filter((function(e){return i.config.nzKeyboard&&e.keyCode===p.ESCAPE&&!p.hasModifierKey(e)}))).subscribe((function(e){e.preventDefault(),i.close()})),n.detachments().subscribe((function(){i.overlayRef.dispose()})),e.containerClick.pipe(a.take(1)).subscribe((function(){i.close()})),e.closeClick.pipe(a.take(1)).subscribe((function(){i.close()})),e.animationStateChanged.pipe(a.filter((function(e){return"done"===e.phaseName&&"leave"===e.toState})),a.take(1)).subscribe((function(){i.dispose()}))}return e.prototype.switchTo=function(e){this.previewInstance.switchTo(e)},e.prototype.next=function(){this.previewInstance.next()},e.prototype.prev=function(){this.previewInstance.prev()},e.prototype.close=function(){this.previewInstance.startLeaveAnimation()},e.prototype.dispose=function(){this.overlayRef.dispose()},e}();function C(e){var t={};return e.width<=e.clientWidth&&e.height<=e.clientHeight&&(t={x:0,y:0}),(e.width>e.clientWidth||e.height>e.clientHeight)&&(t={x:O(e.left,e.width,e.clientWidth),y:O(e.top,e.height,e.clientHeight)}),t}function I(e){var t=e.getBoundingClientRect(),n=document.documentElement;return{left:t.left+(window.pageXOffset||n.scrollLeft)-(n.clientLeft||document.body.clientLeft||0),top:t.top+(window.pageYOffset||n.scrollTop)-(n.clientTop||document.body.clientTop||0)}}function D(){return{width:document.documentElement.clientWidth,height:window.innerHeight||document.documentElement.clientHeight}}function O(e,t,n){var i=e+t,o=(t-n)/2,r=null;return t>n?(e>0&&(r=o),e<0&&i<n&&(r=-o)):(e<0||i>n)&&(r=e<0?o:-o),r}var S={x:0,y:0},P=function(){function e(e,t,i,o){var a,s,c=this;this.cdr=e,this.nzConfigService=t,this.config=i,this.overlayRef=o,this.images=[],this.index=0,this.isDragging=!1,this.visible=!0,this.animationState="enter",this.animationStateChanged=new n.EventEmitter,this.previewImageTransform="",this.previewImageWrapperTransform="",this.operations=[{icon:"close",onClick:function(){c.onClose()},type:"close"},{icon:"zoom-in",onClick:function(){c.onZoomIn()},type:"zoomIn"},{icon:"zoom-out",onClick:function(){c.onZoomOut()},type:"zoomOut"},{icon:"rotate-right",onClick:function(){c.onRotateRight()},type:"rotateRight"},{icon:"rotate-left",onClick:function(){c.onRotateLeft()},type:"rotateLeft"}],this.zoomOutDisabled=!1,this.position=Object.assign({},S),this.containerClick=new n.EventEmitter,this.closeClick=new n.EventEmitter,this.destroy$=new r.Subject,this.zoom=null!==(a=this.config.nzZoom)&&void 0!==a?a:1,this.rotate=null!==(s=this.config.nzRotate)&&void 0!==s?s:0,this.updateZoomOutDisabled(),this.updatePreviewImageTransform(),this.updatePreviewImageWrapperTransform()}return Object.defineProperty(e.prototype,"animationDisabled",{get:function(){var e;return null!==(e=this.config.nzNoAnimation)&&void 0!==e&&e},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"maskClosable",{get:function(){var e,t,n=this.nzConfigService.getConfigForComponent(w)||{};return null===(t=null!==(e=this.config.nzMaskClosable)&&void 0!==e?e:n.nzMaskClosable)||void 0===t||t},enumerable:!1,configurable:!0}),e.prototype.setImages=function(e){this.images=e,this.cdr.markForCheck()},e.prototype.switchTo=function(e){this.index=e,this.cdr.markForCheck()},e.prototype.next=function(){this.index<this.images.length-1&&(this.reset(),this.index++,this.updatePreviewImageTransform(),this.updatePreviewImageWrapperTransform(),this.updateZoomOutDisabled(),this.cdr.markForCheck())},e.prototype.prev=function(){this.index>0&&(this.reset(),this.index--,this.updatePreviewImageTransform(),this.updatePreviewImageWrapperTransform(),this.updateZoomOutDisabled(),this.cdr.markForCheck())},e.prototype.markForCheck=function(){this.cdr.markForCheck()},e.prototype.onClose=function(){this.closeClick.emit()},e.prototype.onZoomIn=function(){this.zoom+=1,this.updatePreviewImageTransform(),this.updateZoomOutDisabled(),this.position=Object.assign({},S)},e.prototype.onZoomOut=function(){this.zoom>1&&(this.zoom-=1,this.updatePreviewImageTransform(),this.updateZoomOutDisabled(),this.position=Object.assign({},S))},e.prototype.onRotateRight=function(){this.rotate+=90,this.updatePreviewImageTransform()},e.prototype.onRotateLeft=function(){this.rotate-=90,this.updatePreviewImageTransform()},e.prototype.onSwitchLeft=function(e){e.preventDefault(),e.stopPropagation(),this.prev()},e.prototype.onSwitchRight=function(e){e.preventDefault(),e.stopPropagation(),this.next()},e.prototype.onContainerClick=function(e){e.target===e.currentTarget&&this.maskClosable&&this.containerClick.emit()},e.prototype.onAnimationStart=function(e){"enter"===e.toState?this.setEnterAnimationClass():"leave"===e.toState&&this.setLeaveAnimationClass(),this.animationStateChanged.emit(e)},e.prototype.onAnimationDone=function(e){"enter"===e.toState?this.setEnterAnimationClass():"leave"===e.toState&&this.setLeaveAnimationClass(),this.animationStateChanged.emit(e)},e.prototype.startLeaveAnimation=function(){this.animationState="leave",this.cdr.markForCheck()},e.prototype.onDragStarted=function(){this.isDragging=!0},e.prototype.onDragReleased=function(){this.isDragging=!1;var e=this.imageRef.nativeElement.offsetWidth*this.zoom,t=this.imageRef.nativeElement.offsetHeight*this.zoom,n=I(this.imageRef.nativeElement),i=n.left,r=n.top,a=D(),s=a.width,c=a.height,p=this.rotate%180!=0,l=C({width:p?t:e,height:p?e:t,left:i,top:r,clientWidth:s,clientHeight:c});(o.isNotNil(l.x)||o.isNotNil(l.y))&&(this.position=Object.assign(Object.assign({},this.position),l))},e.prototype.ngOnDestroy=function(){this.destroy$.next(),this.destroy$.complete()},e.prototype.updatePreviewImageTransform=function(){this.previewImageTransform="scale3d("+this.zoom+", "+this.zoom+", 1) rotate("+this.rotate+"deg)"},e.prototype.updatePreviewImageWrapperTransform=function(){this.previewImageWrapperTransform="translate3d("+this.position.x+"px, "+this.position.y+"px, 0)"},e.prototype.updateZoomOutDisabled=function(){this.zoomOutDisabled=this.zoom<=1},e.prototype.setEnterAnimationClass=function(){if(!this.animationDisabled){var e=this.overlayRef.backdropElement;e&&(e.classList.add(y.enter),e.classList.add(y.enterActive))}},e.prototype.setLeaveAnimationClass=function(){if(!this.animationDisabled){var e=this.overlayRef.backdropElement;e&&(e.classList.add(y.leave),e.classList.add(y.leaveActive))}},e.prototype.reset=function(){this.zoom=1,this.rotate=0,this.position=Object.assign({},S)},e}();P.decorators=[{type:n.Component,args:[{selector:"nz-image-preview",exportAs:"nzImagePreview",animations:[l.fadeMotion],template:'\n    <div class="ant-image-preview">\n      <div tabindex="0" aria-hidden="true" style="width: 0; height: 0; overflow: hidden; outline: none;"></div>\n      <div class="ant-image-preview-content">\n        <div class="ant-image-preview-body">\n          <ul class="ant-image-preview-operations">\n            <li\n              class="ant-image-preview-operations-operation"\n              [class.ant-image-preview-operations-operation-disabled]="zoomOutDisabled && option.type === \'zoomOut\'"\n              (click)="option.onClick()"\n              *ngFor="let option of operations"\n            >\n              <span class="ant-image-preview-operations-icon" nz-icon [nzType]="option.icon" nzTheme="outline"></span>\n            </li>\n          </ul>\n          <div\n            class="ant-image-preview-img-wrapper"\n            cdkDrag\n            [style.transform]="previewImageWrapperTransform"\n            [cdkDragFreeDragPosition]="position"\n            (mousedown)="onDragStarted()"\n            (cdkDragReleased)="onDragReleased()"\n          >\n            <ng-container *ngFor="let image of images; index as imageIndex">\n              <img\n                cdkDragHandle\n                class="ant-image-preview-img"\n                #imgRef\n                *ngIf="index === imageIndex"\n                [attr.src]="image.src"\n                [attr.alt]="image.alt"\n                [style.width]="image.width"\n                [style.height]="image.height"\n                [style.transform]="previewImageTransform"\n              />\n            </ng-container>\n          </div>\n          <ng-container *ngIf="images.length > 1">\n            <div\n              class="ant-image-preview-switch-left"\n              [class.ant-image-preview-switch-left-disabled]="index <= 0"\n              (click)="onSwitchLeft($event)"\n            >\n              <span nz-icon nzType="left" nzTheme="outline"></span>\n            </div>\n            <div\n              class="ant-image-preview-switch-right"\n              [class.ant-image-preview-switch-right-disabled]="index >= images.length - 1"\n              (click)="onSwitchRight($event)"\n            >\n              <span nz-icon nzType="right" nzTheme="outline"></span>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n      <div tabindex="0" aria-hidden="true" style="width: 0; height: 0; overflow: hidden; outline: none;"></div>\n    </div>\n  ',preserveWhitespaces:!1,changeDetection:n.ChangeDetectionStrategy.OnPush,encapsulation:n.ViewEncapsulation.None,host:{"[class.ant-image-preview-moving]":"isDragging","[style.zIndex]":"config.nzZIndex","[class.ant-image-preview-wrap]":"true","[@.disabled]":"config.nzNoAnimation","[@fadeMotion]":"animationState","(@fadeMotion.start)":"onAnimationStart($event)","(@fadeMotion.done)":"onAnimationDone($event)","(click)":"onContainerClick($event)",tabindex:"-1",role:"document"}}]}],P.ctorParameters=function(){return[{type:n.ChangeDetectorRef},{type:i.NzConfigService},{type:b},{type:s.OverlayRef}]},P.propDecorators={imageRef:[{type:n.ViewChild,args:["imgRef"]}]};var x=function(){function e(e,t,n,i){this.overlay=e,this.injector=t,this.nzConfigService=n,this.directionality=i}return e.prototype.preview=function(e,t){return this.display(e,t)},e.prototype.display=function(e,t){var n=Object.assign(Object.assign({},new b),null!=t?t:{}),i=this.createOverlay(n),o=this.attachPreviewComponent(i,n);o.setImages(e);var r=new k(o,n,i);return o.previewRef=r,r},e.prototype.attachPreviewComponent=function(e,t){var i=n.Injector.create({parent:this.injector,providers:[{provide:s.OverlayRef,useValue:e},{provide:b,useValue:t}]}),o=new c.ComponentPortal(P,null,i);return e.attach(o).instance},e.prototype.createOverlay=function(e){var t,n,i=this.nzConfigService.getConfigForComponent(w)||{},o=new s.OverlayConfig({hasBackdrop:!0,scrollStrategy:this.overlay.scrollStrategies.block(),positionStrategy:this.overlay.position().global(),disposeOnNavigation:null===(n=null!==(t=e.nzCloseOnNavigation)&&void 0!==t?t:i.nzCloseOnNavigation)||void 0===n||n,backdropClass:z,direction:e.nzDirection||i.nzDirection||this.directionality.value});return this.overlay.create(o)},e}();x.decorators=[{type:n.Injectable}],x.ctorParameters=function(){return[{type:s.Overlay},{type:n.Injector},{type:i.NzConfigService},{type:t.Directionality,decorators:[{type:n.Optional}]}]};var E=function(){function e(e,t,n,i,o,a){this.nzConfigService=e,this.elementRef=t,this.nzImageService=n,this.cdr=i,this.parentGroup=o,this.directionality=a,this._nzModuleName="image",this.nzSrc="",this.nzDisablePreview=!1,this.nzFallback=null,this.nzPlaceholder=null,this.status="normal",this.destroy$=new r.Subject}return Object.defineProperty(e.prototype,"previewable",{get:function(){return!this.nzDisablePreview&&"error"!==this.status},enumerable:!1,configurable:!0}),e.prototype.ngOnInit=function(){var e,t=this;this.backLoad(),this.parentGroup&&this.parentGroup.addImage(this),this.directionality&&(null===(e=this.directionality.change)||void 0===e||e.pipe(a.takeUntil(this.destroy$)).subscribe((function(e){t.dir=e,t.cdr.detectChanges()})),this.dir=this.directionality.value)},e.prototype.ngOnDestroy=function(){this.destroy$.next(),this.destroy$.complete()},e.prototype.onPreview=function(){var e=this;if(this.previewable)if(this.parentGroup){var t=this.parentGroup.images.filter((function(e){return e.previewable})),n=t.map((function(e){return{src:e.nzSrc}})),i=t.findIndex((function(t){return e===t}));this.nzImageService.preview(n,{nzDirection:this.dir}).switchTo(i)}else{n=[{src:this.nzSrc}];this.nzImageService.preview(n,{nzDirection:this.dir})}},e.prototype.getElement=function(){return this.elementRef},e.prototype.ngOnChanges=function(e){var t=e.nzSrc;t&&(this.getElement().nativeElement.src=t.currentValue,this.backLoad())},e.prototype.backLoad=function(){var e=this;this.backLoadImage=new Image,this.backLoadImage.src=this.nzSrc,this.status="loading",this.backLoadImage.complete?(this.status="normal",this.getElement().nativeElement.src=this.nzSrc):(this.nzPlaceholder?this.getElement().nativeElement.src=this.nzPlaceholder:this.getElement().nativeElement.src=this.nzSrc,this.backLoadImage.onload=function(){e.status="normal",e.getElement().nativeElement.src=e.nzSrc},this.backLoadImage.onerror=function(){e.status="error",e.nzFallback&&(e.getElement().nativeElement.src=e.nzFallback)})},e}();E.decorators=[{type:n.Directive,args:[{selector:"img[nz-image]",exportAs:"nzImage",host:{"(click)":"onPreview()"}}]}],E.ctorParameters=function(){return[{type:i.NzConfigService},{type:n.ElementRef},{type:x},{type:n.ChangeDetectorRef},{type:v,decorators:[{type:n.Optional}]},{type:t.Directionality,decorators:[{type:n.Optional}]}]},E.propDecorators={nzSrc:[{type:n.Input}],nzDisablePreview:[{type:n.Input}],nzFallback:[{type:n.Input}],nzPlaceholder:[{type:n.Input}]},m([o.InputBoolean(),i.WithConfig(),f("design:type",Boolean)],E.prototype,"nzDisablePreview",void 0),m([i.WithConfig(),f("design:type",Object)],E.prototype,"nzFallback",void 0),m([i.WithConfig(),f("design:type",Object)],E.prototype,"nzPlaceholder",void 0);var R=function(){};R.decorators=[{type:n.NgModule,args:[{imports:[t.BidiModule,s.OverlayModule,c.PortalModule,d.DragDropModule,h.CommonModule,g.NzIconModule,u.NzPipesModule],exports:[E,P,v],providers:[x],entryComponents:[P],declarations:[E,P,v]}]}],e.FADE_CLASS_NAME_MAP=y,e.IMAGE_PREVIEW_MASK_CLASS_NAME=z,e.NZ_CONFIG_MODULE_NAME=w,e.NzImageDirective=E,e.NzImageGroupComponent=v,e.NzImageModule=R,e.NzImagePreviewComponent=P,e.NzImagePreviewOptions=b,e.NzImagePreviewRef=k,e.NzImageService=x,e.getClientSize=D,e.getFitContentPosition=C,e.getOffset=I,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=ng-zorro-antd-image.umd.min.js.map