ngx-image-viewer - npm Package Compare versions

Comparing version 1.0.8 to 1.0.9

bundles/ngx-image-viewer.umd.js

@@ -55,2 +55,3 @@ (function (global, factory) {
         this.fullscreen = false;
+        this.loading = false;
         this.scale = 1;
@@ -61,3 +62,2 @@ this.rotation = 0;
         this.hovered = false;
-        this.loading = false;
     }
@@ -64,0 +64,0 @@ /**

bundles/ngx-image-viewer.umd.min.js

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

ngx-image-viewer.es5.js

@@ -52,2 +52,3 @@ import { Component, Directive, ElementRef, EventEmitter, HostListener, Inject, Input, NgModule, Optional, Output } from '@angular/core';
         this.fullscreen = false;
+        this.loading = false;
         this.scale = 1;
@@ -58,3 +59,2 @@ this.rotation = 0;
         this.hovered = false;
-        this.loading = false;
     }
@@ -61,0 +61,0 @@ /**

ngx-image-viewer.js

@@ -53,2 +53,3 @@ import { Component, Directive, ElementRef, EventEmitter, HostListener, Inject, Input, NgModule, Optional, Output } from '@angular/core';
         this.fullscreen = false;
+        this.loading = false;
         this.scale = 1;
@@ -59,3 +60,2 @@ this.rotation = 0;
         this.hovered = false;
-        this.loading = false;
     }
@@ -62,0 +62,0 @@ /**

package.json

@@ -1,1 +0,1 @@
-{"name":"ngx-image-viewer","version":"1.0.8","license":"MIT","scripts":{"ng":"ng","start":"ng serve","build":"ng build","test":"ng test","lint":"ng lint","e2e":"ng e2e","packagr":"ng-packagr -p ng-package.json"},"private":false,"peerDependencies":{"@angular/core":">= 2.0.0","@angular/common":">= 2.0.0"},"repository":{"url":"https://github.com/jpilfold/ngx-image-viewer"},"devDependencies":{"@angular/animations":"^5.0.0","@angular/cli":"1.6.0","@angular/common":"^5.0.0","@angular/compiler":"^5.0.0","@angular/compiler-cli":"^5.0.0","@angular/core":"^5.0.0","@angular/forms":"^5.0.0","@angular/http":"^5.0.0","@angular/language-service":"^5.0.0","@angular/platform-browser":"^5.0.0","@angular/platform-browser-dynamic":"^5.0.0","@angular/router":"^5.0.0","@types/jasmine":"~2.5.53","@types/jasminewd2":"~2.0.2","@types/node":"~6.0.60","codelyzer":"^4.0.1","core-js":"^2.4.1","font-awesome":"^4.7.0","jasmine-core":"~2.6.2","jasmine-spec-reporter":"~4.1.0","karma":"~1.7.0","karma-chrome-launcher":"~2.1.1","karma-cli":"~1.0.1","karma-coverage-istanbul-reporter":"^1.2.1","karma-jasmine":"~1.1.0","karma-jasmine-html-reporter":"^0.2.2","ng-packagr":"^1.6.0","protractor":"~5.1.2","rxjs":"^5.5.2","ssri":"5.2.2","ts-node":"~3.2.0","tslint":"~5.7.0","typescript":"~2.4.2","zone.js":"^0.8.14"},"dependencies":{"screenfull":"^3.3.2"},"main":"bundles/ngx-image-viewer.umd.js","module":"ngx-image-viewer.es5.js","es2015":"ngx-image-viewer.js","typings":"ngx-image-viewer.d.ts","metadata":"ngx-image-viewer.metadata.json"}
+{"name":"ngx-image-viewer","version":"1.0.9","license":"MIT","scripts":{"ng":"ng","start":"ng serve","build":"ng build","test":"ng test","lint":"ng lint","e2e":"ng e2e","packagr":"ng-packagr -p ng-package.json"},"private":false,"peerDependencies":{"@angular/core":">= 2.0.0","@angular/common":">= 2.0.0"},"repository":{"url":"https://github.com/jpilfold/ngx-image-viewer"},"devDependencies":{"@angular/animations":"^5.0.0","@angular/cli":"1.6.0","@angular/common":"^5.0.0","@angular/compiler":"^5.0.0","@angular/compiler-cli":"^5.0.0","@angular/core":"^5.0.0","@angular/forms":"^5.0.0","@angular/http":"^5.0.0","@angular/language-service":"^5.0.0","@angular/platform-browser":"^5.0.0","@angular/platform-browser-dynamic":"^5.0.0","@angular/router":"^5.0.0","@types/jasmine":"~2.5.53","@types/jasminewd2":"~2.0.2","@types/node":"~6.0.60","codelyzer":"^4.0.1","core-js":"^2.4.1","font-awesome":"^4.7.0","jasmine-core":"~2.6.2","jasmine-spec-reporter":"~4.1.0","karma":"~1.7.0","karma-chrome-launcher":"~2.1.1","karma-cli":"~1.0.1","karma-coverage-istanbul-reporter":"^1.2.1","karma-jasmine":"~1.1.0","karma-jasmine-html-reporter":"^0.2.2","ng-packagr":"^1.6.0","protractor":"~5.1.2","rxjs":"^5.5.2","ssri":"5.2.2","ts-node":"~3.2.0","tslint":"~5.7.0","typescript":"~2.4.2","zone.js":"^0.8.14"},"dependencies":{"screenfull":"^3.3.2"},"main":"bundles/ngx-image-viewer.umd.js","module":"ngx-image-viewer.es5.js","es2015":"ngx-image-viewer.js","typings":"ngx-image-viewer.d.ts","metadata":"ngx-image-viewer.metadata.json"}

src/app/image-viewer/image-viewer.component.d.ts

@@ -18,2 +18,3 @@ import { OnInit, EventEmitter } from '@angular/core';
     fullscreen: boolean;
+    loading: boolean;
     private scale;
@@ -26,3 +27,2 @@ private rotation;
     private hovered;
-    private loading;
     constructor(moduleConfig: ImageViewerConfig);
@@ -29,0 +29,0 @@ ngOnInit(): void;

No alert changes

Worsened metrics

Total package byte prevSize

170760

No dependency changes