@scicom-esolutions/ng-image-viewer/scicom-esolutions-ng-image-viewer.metadata.json

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

{"__symbolic":"module","version":4,"metadata":{"NgImageViewerService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]},"statics":{"ngInjectableDef":{}}},"NgImageViewerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":26,"character":1},"arguments":[{"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              <!-- Div below will be used to hide the 'ghost' image when dragging -->\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          <!--    <button type=\"button\" [class]=\"config.btnClass\" *ngFor=\"let cBtn of config.customBtns\"-->\n          <!--        (click)=\"fireCustomEvent(cBtn.name, index)\">-->\n          <!--        <span [class]=\"cBtn.icon\"></span>-->\n          <!--    </button>-->\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          <!--    <div class=\"nav-button-container\" *ngIf=\"src.length > 1\">-->\n          <!--        <button type=\"button\" [class]=\"config.btnClass\" (click)=\"prevImage($event)\" [disabled]=\"index === 0\">-->\n          <!--            <span [class]=\"config.btnIcons.prev\"></span>-->\n          <!--        </button>-->\n          <!--        <button type=\"button\" [class]=\"config.btnClass\" (click)=\"nextImage($event)\" [disabled]=\"index === src.length - 1\">-->\n          <!--            <span [class]=\"config.btnIcons.next\"></span>-->\n          <!--        </button>-->\n          <!--    </div>-->\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)}}"]}]}],"members":{"src":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":81,"character":3}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":84,"character":3}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":87,"character":3}}]}],"index":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":90,"character":3}}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":93,"character":3}}]}],"indexChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":96,"character":3}}]}],"configChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":99,"character":3}}]}],"customImageEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":102,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":116,"character":15}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":116,"character":27},"arguments":["config"]}]],"parameters":[{"__symbolic":"reference","name":"ɵa"}]}],"ngOnInit":[{"__symbolic":"method"}],"nextImage":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":124,"character":3},"arguments":["window:keyup.ArrowRight",["$event"]]}]}],"prevImage":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":134,"character":3},"arguments":["window:keyup.ArrowLeft",["$event"]]}]}],"zoomIn":[{"__symbolic":"method"}],"zoomOut":[{"__symbolic":"method"}],"scrollZoom":[{"__symbolic":"method"}],"rotateClockwise":[{"__symbolic":"method"}],"rotateCounterClockwise":[{"__symbolic":"method"}],"onLoad":[{"__symbolic":"method"}],"onLoadStart":[{"__symbolic":"method"}],"onDragOver":[{"__symbolic":"method"}],"onDragStart":[{"__symbolic":"method"}],"toggleFullscreen":[{"__symbolic":"method"}],"triggerIndexBinding":[{"__symbolic":"method"}],"triggerConfigBinding":[{"__symbolic":"method"}],"fireCustomEvent":[{"__symbolic":"method"}],"reset":[{"__symbolic":"method"}],"onMouseOver":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":229,"character":3},"arguments":["mouseover"]}]}],"onMouseLeave":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":234,"character":3},"arguments":["mouseleave"]}]}],"canNavigate":[{"__symbolic":"method"}],"updateStyle":[{"__symbolic":"method"}],"mergeConfig":[{"__symbolic":"method"}]}},"NgImageViewerModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"NgImageViewerComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":10,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":11,"character":4}],"exports":[{"__symbolic":"reference","name":"NgImageViewerComponent"}]}]}],"members":{}},"ɵa":{"__symbolic":"interface"}},"origins":{"NgImageViewerService":"./lib/ng-image-viewer.service","NgImageViewerComponent":"./lib/ng-image-viewer.component","NgImageViewerModule":"./lib/ng-image-viewer.module","ɵa":"./lib/model/image-viewer-config.model"},"importAs":"@scicom-esolutions/ng-image-viewer"}