@scicom-esolutions/ng-image-viewer/bundles/scicom-esolutions-ng-image-viewer.umd.min.js

[](https://www.npmjs.com/package/@haseeamarathunga/ng-image-viewer) [](https://www.npmjs.com/pac

!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@angular/core"),require("@angular/common"),require("@angular/forms")):"function"==typeof define&&define.amd?define("@scicom-esolutions/ng-image-viewer",["exports","@angular/core","@angular/common","@angular/forms"],n):n(((t=t||self)["scicom-esolutions"]=t["scicom-esolutions"]||{},t["scicom-esolutions"]["ng-image-viewer"]={}),t.ng.core,t.ng.common,t.ng.forms)}(this,(function(t,n,o,e){"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 i=function(){return(i=Object.assign||function(t){for(var n,o=1,e=arguments.length;o<e;o++)for(var i in n=arguments[o])Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i]);return t}).apply(this,arguments)};var s=function(){function t(){}return t.decorators=[{type:n.Injectable,args:[{providedIn:"root"}]}],t.ctorParameters=function(){return[]},t.ngInjectableDef=n.ɵɵdefineInjectable({factory:function(){return new t},token:t,providedIn:"root"}),t}(),r=function(t,n){this.name=t,this.imageIndex=n};var a={btnClass:"default",zoomFactor:.1,containerBackgroundColor:"#ccc",wheelZoom:!0,allowFullscreen:!0,allowKeyboardNavigation:!0,btnShow:{zoomIn:!0,zoomOut:!0,rotateClockwise:!0,rotateCounterClockwise:!0},btnIcons:{zoomIn:"fa fa-plus",zoomOut:"fa fa-minus",rotateClockwise:"fa fa-repeat",rotateCounterClockwise:"fa fa-undo",fullscreen:"fa fa-refresh"}},c=function(){function t(t){this.moduleConfig=t,this.index=0,this.indexChange=new n.EventEmitter,this.configChange=new n.EventEmitter,this.customImageEvent=new n.EventEmitter,this.style={transform:"",msTransform:"",oTransform:"",webkitTransform:"",cursor:"pointer"},this.fullscreen=!1,this.loading=!0,this.scale=1,this.rotation=0,this.translateX=0,this.translateY=0,this.hovered=!1}return t.prototype.ngOnInit=function(){var t=this.mergeConfig(a,this.moduleConfig);this.config=this.mergeConfig(t,this.config),this.triggerConfigBinding()},t.prototype.nextImage=function(t){this.canNavigate(t)&&this.index<this.src.length-1&&(this.loading=!0,this.index++,this.triggerIndexBinding(),this.reset())},t.prototype.prevImage=function(t){this.canNavigate(t)&&this.index>0&&(this.loading=!0,this.index--,this.triggerIndexBinding(),this.reset())},t.prototype.zoomIn=function(){this.scale*=1+this.config.zoomFactor,this.updateStyle()},t.prototype.zoomOut=function(){this.scale>this.config.zoomFactor&&(this.scale/=1+this.config.zoomFactor),this.updateStyle()},t.prototype.scrollZoom=function(t){if(this.config.wheelZoom)return t.deltaY>0?this.zoomOut():this.zoomIn(),!1},t.prototype.rotateClockwise=function(){this.rotation+=90,this.updateStyle()},t.prototype.rotateCounterClockwise=function(){this.rotation-=90,this.updateStyle()},t.prototype.onLoad=function(){this.loading=!1},t.prototype.onLoadStart=function(){this.loading=!0},t.prototype.onDragOver=function(t){this.translateX+=t.clientX-this.prevX,this.translateY+=t.clientY-this.prevY,this.prevX=t.clientX,this.prevY=t.clientY,this.updateStyle()},t.prototype.onDragStart=function(t){this.prevX=t.clientX,this.prevY=t.clientY},t.prototype.toggleFullscreen=function(){this.translateX=0,this.translateY=0,this.scale=1,this.rotation=0,this.translateX=0,this.translateY=0,this.zoomIn(),this.zoomOut()},t.prototype.triggerIndexBinding=function(){this.indexChange.emit(this.index)},t.prototype.triggerConfigBinding=function(){this.configChange.next(this.config)},t.prototype.fireCustomEvent=function(t,n){this.customImageEvent.emit(new r(t,n))},t.prototype.reset=function(){this.scale=1,this.rotation=0,this.translateX=0,this.translateY=0,this.updateStyle()},t.prototype.onMouseOver=function(){this.hovered=!0},t.prototype.onMouseLeave=function(){this.hovered=!1},t.prototype.canNavigate=function(t){return null==t||this.config.allowKeyboardNavigation&&this.hovered},t.prototype.updateStyle=function(){this.style.transform="translate("+this.translateX+"px, "+this.translateY+"px) rotate("+this.rotation+"deg) scale("+this.scale+")",this.style.msTransform=this.style.transform,this.style.webkitTransform=this.style.transform,this.style.oTransform=this.style.transform},t.prototype.mergeConfig=function(t,n){var o=i({},t);return n&&(o=i({},t,n),n.btnIcons&&(o.btnIcons=i({},t.btnIcons,n.btnIcons))),o},t.decorators=[{type:n.Component,args:[{selector:"ng-image-viewer",template:'\n      <div class="img-container" [style.backgroundColor]="config.containerBackgroundColor"\n           (wheel)="scrollZoom($event)" (dragover)="onDragOver($event)">\n          <div [ngStyle]="{width: width+\'px\',height: height+\'px\'}">\n              <img [src]="src[index]"  [ngStyle]="style" alt="Image not found..." (dragstart)="onDragStart($event)"\n                   (load)="onLoad()" (loadstart)="onLoadStart()" />\n              \x3c!-- Div below will be used to hide the \'ghost\' image when dragging --\x3e\n          </div>\n          <div></div>\n          <div class="spinner-container" *ngIf="loading">\n              <div class="spinner"></div>\n          </div>\n\n          <button type="button" [class]="config.btnClass" *ngIf="config.btnShow.rotateCounterClockwise"\n                  (click)="rotateCounterClockwise()">\n              <span [class]="config.btnIcons.rotateCounterClockwise"></span>\n          </button>\n          <button type="button" [class]="config.btnClass" *ngIf="config.btnShow.rotateClockwise" (click)="rotateClockwise()">\n              <span [class]="config.btnIcons.rotateClockwise"></span>\n          </button>\n\n          <button type="button" [class]="config.btnClass" *ngIf="config.btnShow.zoomOut" (click)="zoomOut()">\n              <span [class]="config.btnIcons.zoomOut"></span>\n          </button>\n          <button type="button" [class]="config.btnClass" *ngIf="config.btnShow.zoomIn" (click)="zoomIn()">\n              <span [class]="config.btnIcons.zoomIn"></span>\n          </button>\n\n          \x3c!--    <button type="button" [class]="config.btnClass" *ngFor="let cBtn of config.customBtns"--\x3e\n          \x3c!--        (click)="fireCustomEvent(cBtn.name, index)">--\x3e\n          \x3c!--        <span [class]="cBtn.icon"></span>--\x3e\n          \x3c!--    </button>--\x3e\n\n          <button type="button" [class]="config.btnClass" (click)="toggleFullscreen()"\n                  *ngIf="config.allowFullscreen">\n              <span [class]="config.btnIcons.fullscreen"></span>\n          </button>\n\n          \x3c!--    <div class="nav-button-container" *ngIf="src.length > 1">--\x3e\n          \x3c!--        <button type="button" [class]="config.btnClass" (click)="prevImage($event)" [disabled]="index === 0">--\x3e\n          \x3c!--            <span [class]="config.btnIcons.prev"></span>--\x3e\n          \x3c!--        </button>--\x3e\n          \x3c!--        <button type="button" [class]="config.btnClass" (click)="nextImage($event)" [disabled]="index === src.length - 1">--\x3e\n          \x3c!--            <span [class]="config.btnIcons.next"></span>--\x3e\n          \x3c!--        </button>--\x3e\n          \x3c!--    </div>--\x3e\n      </div>\n  ',styles:[".img-container{height:100%;width:100%;overflow:hidden;position:relative}.img-container img{z-index:2;margin:0 auto;display:block;max-width:100%;max-height:100%;width:100%}.img-container button{z-index:99;position:absolute;right:15px}.img-container button:not(:disabled){cursor:pointer}.img-container>button:nth-of-type(1):not(#ngx-fs-btn){bottom:15px}.img-container>button:nth-of-type(2):not(#ngx-fs-btn){bottom:65px}.img-container>button:nth-of-type(3):not(#ngx-fs-btn){bottom:115px}.img-container>button:nth-of-type(4):not(#ngx-fs-btn){bottom:165px}.img-container>button:nth-of-type(5):not(#ngx-fs-btn){bottom:215px}.img-container>button:nth-of-type(6):not(#ngx-fs-btn){bottom:265px}.img-container>button:nth-of-type(7):not(#ngx-fs-btn){bottom:315px}#ngx-fs-btn{top:15px}button.default{height:40px;width:40px;border:1px solid #555;border-radius:50%;background-color:#fff;opacity:.7;transition:opacity .2s}button.default:hover{opacity:1}button.default:disabled{opacity:.25}.nav-button-container>button{position:relative;right:0;margin:0 10px}.nav-button-container{text-align:center;position:absolute;z-index:98;bottom:10px;left:0;right:0}.spinner-container{position:absolute;left:0;right:0;top:0;bottom:0;width:60px;height:60px;margin:auto;padding:10px;background-color:rgba(0,0,0,.4);border-radius:25%}.spinner{border-width:7px;border-style:solid;border-color:#ccc #ccc #222;border-radius:50%;height:100%;width:100%;box-sizing:border-box;-webkit-animation:2s linear infinite rotation;animation:2s linear infinite rotation}@keyframes rotation{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(359deg)}}@-webkit-keyframes rotation{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(359deg)}}"]}]}],t.ctorParameters=function(){return[{type:void 0,decorators:[{type:n.Optional},{type:n.Inject,args:["config"]}]}]},t.propDecorators={src:[{type:n.Input}],width:[{type:n.Input}],height:[{type:n.Input}],index:[{type:n.Input}],config:[{type:n.Input}],indexChange:[{type:n.Output}],configChange:[{type:n.Output}],customImageEvent:[{type:n.Output}],nextImage:[{type:n.HostListener,args:["window:keyup.ArrowRight",["$event"]]}],prevImage:[{type:n.HostListener,args:["window:keyup.ArrowLeft",["$event"]]}],onMouseOver:[{type:n.HostListener,args:["mouseover"]}],onMouseLeave:[{type:n.HostListener,args:["mouseleave"]}]},t}();var l=function(){function t(){}return t.decorators=[{type:n.NgModule,args:[{declarations:[c],imports:[o.CommonModule,e.FormsModule],exports:[c]}]}],t}();t.NgImageViewerComponent=c,t.NgImageViewerModule=l,t.NgImageViewerService=s,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=scicom-esolutions-ng-image-viewer.umd.min.js.map