UNPKG

ng2-image-viewer

Version:

<section> <p>This component uses the <a href="http://ignitersworld.com/lab/imageViewer.html">Image Viewer JS</a> in it's core.</p> <p>Ng2-Image Viewer uses MIT license, so you can use it as you wish, feel free to help contributing with the code.</p> <p>Th

2 lines (1 loc) 12 kB
{"__symbolic":"module","version":3,"metadata":{"ImageViewerModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":8}],"declarations":[{"__symbolic":"reference","name":"ImageViewerComponent"}],"exports":[{"__symbolic":"reference","name":"ImageViewerComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"ImageViewerModule"}}}}},"ImageViewerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":18,"character":1},"arguments":[{"selector":"app-image-viewer","template":"<div id=\"{{idContainer}}\" class=\"image-gallery-2\"> <div class=\"image-container\"></div> <div class=\"inline-icon\"> <div> <a class=\"image-viewer-tooltip\" (click)=\"showPDFOnly()\" *ngIf=\"showPDFOnlyOption\"> <span *ngIf=\"enableTooltip\" class=\"tooltiptext filterTooltip\"> <span>{{showPDFOnlyLabel}}:</span> <i class=\"material-icons\">{{showOnlyPDF ? 'check':'close'}}</i> </span> <i class=\"material-icons footer-icon\">picture_as_pdf</i> </a> </div> <div *ngIf=\"showOptions\" class=\"options-image-viewer\"> <a class=\"image-viewer-tooltip\" *ngIf=\"zoomInButton\" (click)=\"zoomIn()\" (mouseover)=\"atualizarCorHoverIn($event)\" (mouseout)=\"atualizarCorHoverOut($event)\"> <span *ngIf=\"enableTooltip\" class=\"tooltiptext\">{{zoomInTooltipLabel}}</span> <i class=\"material-icons footer-icon\">zoom_in</i> </a> <a class=\"image-viewer-tooltip\" *ngIf=\"zoomOutButton\" (click)=\"zoomOut()\" (mouseover)=\"atualizarCorHoverIn($event)\" (mouseout)=\"atualizarCorHoverOut($event)\"> <span *ngIf=\"enableTooltip\" class=\"tooltiptext\">{{zoomOutTooltipLabel}}</span> <i class=\"material-icons footer-icon\">zoom_out</i> </a> <a class=\"image-viewer-tooltip\" *ngIf=\"rotate\" (click)=\"rotacionarDireita()\" (mouseover)=\"atualizarCorHoverIn($event)\" (mouseout)=\"atualizarCorHoverOut($event)\"> <span *ngIf=\"enableTooltip\" class=\"tooltiptext\">{{rotateRightTooltipLabel}}</span> <i class=\"material-icons footer-icon\">rotate_right</i> </a> <a class=\"image-viewer-tooltip\" *ngIf=\"rotate\" (click)=\"rotacionarEsquerda()\" (mouseover)=\"atualizarCorHoverIn($event)\" (mouseout)=\"atualizarCorHoverOut($event)\"> <span *ngIf=\"enableTooltip\" class=\"tooltiptext\">{{rotateLeftTooltipLabel}}</span> <i class=\"material-icons footer-icon\">rotate_left</i> </a> <a class=\"image-viewer-tooltip\" *ngIf=\"resetZoom\" (click)=\"resetarZoom()\" (mouseover)=\"atualizarCorHoverIn($event)\" (mouseout)=\"atualizarCorHoverOut($event)\"> <span *ngIf=\"enableTooltip\" class=\"tooltiptext\">{{resetZoomTooltipLabel}}</span> <i class=\"material-icons footer-icon\">fullscreen_exit</i> </a> <a class=\"image-viewer-tooltip\" *ngIf=\"fullscreen\" (click)=\"mostrarFullscreen()\" (mouseover)=\"atualizarCorHoverIn($event)\" (mouseout)=\"atualizarCorHoverOut($event)\"> <span *ngIf=\"enableTooltip\" class=\"tooltiptext\">{{fullscreenTooltipLabel}}</span> <i class=\"material-icons footer-icon\">fullscreen</i> </a> <a class=\"image-viewer-tooltip\" target=\"_blank\" href=\"{{stringDownloadImagem}}\" download=\"{{defaultDownloadName}} {{indexImagemAtual}}.png\" *ngIf=\"download\" (mouseover)=\"atualizarCorHoverIn($event)\" (mouseout)=\"atualizarCorHoverOut($event)\"> <span *ngIf=\"enableTooltip\" class=\"tooltiptext\">{{isURlImagem() ? openInNewTabTooltipLabel : downloadTooltipLabel}}</span> <i class=\"material-icons footer-icon\">{{isURlImagem() ? 'open_in_browser' : 'file_download'}}</i> </a> </div> </div> <i class=\"material-icons prev\" (click)=\"imagemAnterior()\">keyboard_arrow_left</i> <i class=\"material-icons next\" (click)=\"proximaImagem()\">keyboard_arrow_right</i> <div class=\"footer-info\"> <span id=\"current\"></span>/<span class=\"total\"></span> </div> </div> ","styles":[".footer-icon { font-size: xx-large; } .image-viewer-tooltip { position: relative; display: inline-block; z-index: 1000; } .image-viewer-tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: 125%; left: 40%; margin-left: -60px; opacity: 0; transition: opacity 0.3s; } .image-viewer-tooltip .tooltiptext::after { content: \"\"; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; } .image-viewer-tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } "]}]}],"members":{"idContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":5}}]}],"images":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":5}}]}],"rotate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":5}}]}],"download":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":5}}]}],"fullscreen":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"resetZoom":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":5}}]}],"loadOnInit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"showOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":5}}]}],"zoomInButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":5}}]}],"zoomOutButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":5}}]}],"showPDFOnlyOption":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":5}}]}],"primaryColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":5}}]}],"buttonsColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":5}}]}],"buttonsHover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":5}}]}],"defaultDownloadName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":5}}]}],"rotateRightTooltipLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":5}}]}],"rotateLeftTooltipLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":5}}]}],"resetZoomTooltipLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":5}}]}],"fullscreenTooltipLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":5}}]}],"zoomInTooltipLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":5}}]}],"zoomOutTooltipLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":5}}]}],"downloadTooltipLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":5}}]}],"showPDFOnlyLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":55,"character":5}}]}],"openInNewTabTooltipLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":5}}]}],"enableTooltip":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":57,"character":5}}]}],"onNext":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":59,"character":5}}]}],"onPrevious":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":60,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":75,"character":34}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"inicializarCores":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"zoomIn":[{"__symbolic":"method"}],"zoomOut":[{"__symbolic":"method"}],"primaryColorChange":[{"__symbolic":"method"}],"buttonsColorChange":[{"__symbolic":"method"}],"defaultDownloadNameChange":[{"__symbolic":"method"}],"imagesChange":[{"__symbolic":"method"}],"isImagensPresentes":[{"__symbolic":"method"}],"inicializarImageViewer":[{"__symbolic":"method"}],"showImage":[{"__symbolic":"method"}],"carregarViewerPDF":[{"__symbolic":"method"}],"injetarIframe":[{"__symbolic":"method"}],"getTamanhoIframe":[{"__symbolic":"method"}],"esconderBotoesImageViewer":[{"__symbolic":"method"}],"isPDF":[{"__symbolic":"method"}],"isURlImagem":[{"__symbolic":"method"}],"prepararTrocaImagem":[{"__symbolic":"method"}],"limparCacheElementos":[{"__symbolic":"method"}],"proximaImagem":[{"__symbolic":"method"}],"imagemAnterior":[{"__symbolic":"method"}],"rotacionarDireita":[{"__symbolic":"method"}],"rotacionarEsquerda":[{"__symbolic":"method"}],"resetarZoom":[{"__symbolic":"method"}],"atualizarRotacao":[{"__symbolic":"method"}],"getScale":[{"__symbolic":"method"}],"isImagemSobrepondoNaVertical":[{"__symbolic":"method"}],"carregarImagem":[{"__symbolic":"method"}],"retirarAnimacao":[{"__symbolic":"method"}],"adicionarRotacao":[{"__symbolic":"method"}],"adicionarAnimacao":[{"__symbolic":"method"}],"mostrarFullscreen":[{"__symbolic":"method"}],"converterPDFBase64ParaBlob":[{"__symbolic":"method"}],"getImagemAtual":[{"__symbolic":"method"}],"base64ToArrayBuffer":[{"__symbolic":"method"}],"showPDFOnly":[{"__symbolic":"method"}],"setStyleClass":[{"__symbolic":"method"}],"atualizarCorHoverIn":[{"__symbolic":"method"}],"atualizarCorHoverOut":[{"__symbolic":"method"}],"getIdIframe":[{"__symbolic":"method"}]}}},"origins":{"ImageViewerModule":"./index","ImageViewerComponent":"./image-viewer.component"},"importAs":"ng2-image-viewer"}