@clarivate/angular-image-viewer/clarivate-angular-image-viewer.metadata.json

A configurable Angular image viewer component, compatible with Angular 7.x+

{"__symbolic":"module","version":4,"metadata":{"AngularImageViewerModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"AngularImageViewerComponent"},{"__symbolic":"reference","name":"FullScreenDirective"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":9,"character":4},{"__symbolic":"reference","module":"@angular/cdk/drag-drop","name":"DragDropModule","line":10,"character":4}],"exports":[{"__symbolic":"reference","name":"AngularImageViewerComponent"},{"__symbolic":"reference","name":"FullScreenDirective"},{"__symbolic":"reference","module":"@angular/cdk/drag-drop","name":"DragDropModule","line":12,"character":62}]}]}],"members":{}},"AngularImageViewerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":33,"character":1},"arguments":[{"selector":"angular-image-viewer","template":"<div [appScreenfull]=\"fullscreen\" class=\"img-container\" [style.backgroundColor]=\"config.containerBackgroundColor\"\n    (wheel)=\"scrollZoom($event)\">\n    <div class=\"image-name\" *ngIf=\"imageName\">\n      <span>{{imageName}}</span>\n    </div>\n\n    <div cdkDrag class=\"drag-element\">\n        <img [src]=\"src[index]\" [ngStyle]=\"style\" alt=\"\"\n            (cdkDragStarted)=\"onDragStart($event)\"\n            (load)=\"onLoad()\" (loadstart)=\"onLoadStart()\" (error)=\"imageNotFound()\" />\n    </div>\n\n    <div class=\"spinner-container\" *ngIf=\"loading\">\n        <div class=\"spinner\"></div>\n    </div>\n\n    <div class=\"button-container\">\n        <button type=\"button\" id=\"ngx-fs-btn\" [class]=\"config.btnClass\" (click)=\"toggleFullscreen()\"\n        [style.color]=\"config.primaryColor\" *ngIf=\"config.allowFullscreen\">\n            <span [class]=\"config.btnIcons.fullscreen\"></span>\n        </button>\n\n        <div class=\"button-container-bottom\">\n            <button type=\"button\" [class]=\"config.btnClass\" *ngFor=\"let cBtn of config.customBtns\"\n            [style.color]=\"config.primaryColor\" (click)=\"fireCustomEvent(cBtn.name, index)\">\n                <span [class]=\"cBtn.icon\"></span>\n            </button>\n\n            <button type=\"button\" [class]=\"config.btnClass\" *ngIf=\"config.btnShow.rotateCounterClockwise\"\n            [style.color]=\"config.primaryColor\" (click)=\"rotateCounterClockwise()\">\n                <span [class]=\"config.btnIcons.rotateCounterClockwise\"></span>\n            </button>\n            <button type=\"button\" [class]=\"config.btnClass\" *ngIf=\"config.btnShow.rotateClockwise\"\n            [style.color]=\"config.primaryColor\" (click)=\"rotateClockwise()\">\n                <span [class]=\"config.btnIcons.rotateClockwise\"></span>\n            </button>\n\n            <div class=\"button-zoom-in-out-container\">\n                <button type=\"button\" [class]=\"config.btnClass\" *ngIf=\"config.btnShow.zoomIn\"\n                [style.color]=\"config.primaryColor\" (click)=\"zoomIn()\">\n                    <span [class]=\"config.btnIcons.zoomIn\"></span>\n                </button>\n                <button type=\"button\" [class]=\"config.btnClass\" *ngIf=\"config.btnShow.zoomOut\"\n                [style.color]=\"config.primaryColor\" (click)=\"zoomOut()\">\n                    <span [class]=\"config.btnIcons.zoomOut\"></span>\n                </button>\n            </div>\n        </div>\n    </div>\n\n    <div class=\"nav-button-container\" *ngIf=\"src.length > 1\">\n        <button type=\"button\" #prevImg [class]=\"config.btnClass\" (click)=\"prevImage($event); prevImg.blur()\"\n        [style.color]=\"config.primaryColor\"  [disabled]=\"index === 0\">\n            <span [class]=\"config.btnIcons.prev\"></span>\n        </button>\n        <button type=\"button\" #nextImg [class]=\"config.btnClass\" (click)=\"nextImage($event); nextImg.blur()\"\n        [style.color]=\"config.primaryColor\"  [disabled]=\"index === src.length - 1\">\n            <span [class]=\"config.btnIcons.next\"></span>\n        </button>\n    </div>\n    <div class=\"footer-section\">\n        <div class=\"image-txt-count-left-align\"><span>{{footerTexts[0]}} {{index + 1}} {{footerTexts[1]}} {{src.length}}</span></div>\n        <div class=\"footer-txt-right-align\">\n            <span class=\"footer-txt-right-align-title\" [style.color]=\"config.primaryColor\">{{footerTexts[2]}}</span>\n            <span class=\"footer-txt-right-align-note\">{{footerTexts[3]}}</span>\n        </div>\n    </div>\n</div>\n","styles":[".img-container{position:relative;width:100%;height:100%;display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;overflow:hidden}.img-container .drag-element{position:absolute;top:35px;right:78px;width:calc(100% - 156px);height:calc(100% - 85px);cursor:-webkit-grab;cursor:grab;text-align:center}.img-container .drag-element img{padding:0;max-width:100%;max-height:100%}.img-container .drag-element:active{cursor:-webkit-grabbing;cursor:grabbing}.img-container button{z-index:99}.img-container button:not(:disabled){cursor:pointer}#ngx-fs-btn{top:15px}button.default{height:24px;width:24px;border-radius:31px;opacity:.9;-webkit-transition:opacity .2s;transition:opacity .2s;font-size:12px;background:inherit;background-color:#fff;border:none;box-shadow:0 0 5px rgba(0,0,0,.3490196078)}button.default:focus{outline:0;opacity:1}button.default:hover{opacity:1}button.default:disabled{opacity:.3}.nav-button-container>button{position:relative;right:0;margin:0 10px}.nav-button-container{text-align:right;position:absolute;z-index:98;bottom:60px;left:0;right:10px}.nav-button-container button.default{height:30px;margin:0;font-size:14px}.nav-button-container button.default:first-child{border-radius:4px 0 0 4px}.nav-button-container button.default:last-child{margin-left:10px;border-radius:0 4px 4px 0}.button-container{position:absolute;top:10px;right:10px;width:24px;height:calc(100% - 115px);z-index:98}.button-container .button-container-bottom{position:absolute;bottom:0}.button-container .button-container-bottom button.default{margin-top:10px}.button-container .button-container-bottom .button-zoom-in-out-container{margin-top:15px}.button-container .button-container-bottom .button-zoom-in-out-container button.default{margin:0;border-radius:0;height:30px}.button-container .button-container-bottom .button-zoom-in-out-container button.default:first-child{margin-bottom:1px}.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}.footer-section{position:absolute;bottom:10px;left:0;width:100%;line-height:18px;z-index:98}.footer-section .image-txt-count-left-align{float:left;padding:0 10px;font-family:\"Source Sans Pro SemiBold\";font-size:14;color:#333}.footer-section .footer-txt-right-align{float:right;padding:0 10px;text-align:right}.footer-section .footer-txt-right-align span.footer-txt-right-align-title{display:block;font-family:\"Source Sans Pro SemiBold\";font-size:14}.footer-section .footer-txt-right-align span.footer-txt-right-align-note{color:#767676;font-family:\"Source Sans Pro\";font-size:12}.image-name{position:absolute;top:10px;left:10px;z-index:98;font-family:\"Source Sans Pro SemiBold\";font-size:16;color:#333}@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":{"cdkDrag":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":41,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/cdk/drag-drop","name":"CdkDrag","line":41,"character":13},{"static":true}]}]}],"src":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"screenHeightOccupied":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":3}}]}],"index":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":3}}]}],"imageName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":55,"character":3}}]}],"footerTexts":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":3}}]}],"indexChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":66,"character":3}}]}],"configChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":69,"character":3}}]}],"customImageEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":72,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":85,"character":15}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":85,"character":27},"arguments":["config"]}]],"parameters":[{"__symbolic":"reference","name":"ImageViewerConfig"}]}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"nextImage":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":101,"character":3},"arguments":["window:keyup.ArrowRight",["$event"]]}]}],"prevImage":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":112,"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"}],"imageNotFound":[{"__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":202,"character":3},"arguments":["mouseover"]}]}],"onMouseLeave":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":207,"character":3},"arguments":["mouseleave"]}]}],"canNavigate":[{"__symbolic":"method"}],"updateStyle":[{"__symbolic":"method"}],"mergeConfig":[{"__symbolic":"method"}]}},"ImageViewerConfig":{"__symbolic":"interface"},"CustomImageEvent":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[null,null]}]}},"FullScreenDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":3,"character":1},"arguments":[{"selector":"[appScreenfull]"}]}],"members":{"fullscreenState":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":3},"arguments":["appScreenfull"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":10,"character":26}]}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}]}}},"origins":{"AngularImageViewerModule":"./lib/angular-image-viewer.module","AngularImageViewerComponent":"./lib/angular-image-viewer.component","ImageViewerConfig":"./lib/models/image-viewer-config.model","CustomImageEvent":"./lib/models/custom-image-event-model","FullScreenDirective":"./lib/directives/full-screen.directive"},"importAs":"@clarivate/angular-image-viewer"}