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

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.6.3.

{"__symbolic":"module","version":4,"metadata":{"ImageViewerModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":9,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵa"}],"imports":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"BrowserModule","line":14,"character":8}],"exports":[{"__symbolic":"reference","name":"ɵa"}],"providers":[]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"app-image-viewer","template":"<div *ngIf=\"imagesData.length\" id=\"image-grid\" class=\"image-grid\">\n  <div class=\"row no-gutters\">\n    <div *ngFor=\"let image of imagesData; let i = index\"\n         [ngClass]=\"{'image-expanded': image.height === '860px'}\"\n         [ngStyle]=\"{'height': image.height, 'width': '320px', 'outline': 'none'}\"\n         tabindex=\"{{i}}\">\n      <div class=\"col image-thumbnail\">\n          <span class=\"helper\"></span>\n          <a (keyup.enter)=\"openImageExpander(i)\" (click)=\"openImageExpander(i)\" ><img src=\"{{image.thumbnailUrl}}\" alt=\"img02\"/></a>\n      </div>\n      <div class=\"image-expander\" [ngStyle]=\"{'height': image.expanderHeight, 'background-color': expanderBgColor, 'color': expanderTextColor}\" >\n        <div class=\"image-expander-inner\" [ngStyle]=\"{'display': 'flex'}\">\n          <span class=\"image-position\" [ngStyle]=\"{'color': expanderTextColor}\">{{i+1}}/{{imagesData.length}}</span>\n          <span class=\"image-close\" [ngStyle]=\"{'color': expanderTextColor}\" (click)=\"closeImageExpander(i)\"></span>\n          <div class=\"image-fullimg\">\n            <img src=\"{{image.previewUrl}}\">\n          </div>\n          <div class=\"image-details\" [ngStyle]=\"{'color': expanderTextColor}\">\n            <ng-container *ngTemplateOutlet=\"parentTemplate; context: { $implicit: image }\">\n            </ng-container>\n          </div>\n          <a class=\"prev\" (click)=\"plusSlides(-1)\" *ngIf=\"showPrevButton()\">\n            <i class=\"fas fa-chevron-left\"></i>\n          </a>\n          <a class=\"next\" (click)=\"plusSlides(1)\" *ngIf=\"showNextButton()\">\n            <i class=\"fas fa-chevron-right\"></i>\n          </a>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>","styles":[".image-grid{list-style:none;padding:20px 0;margin:0 auto;width:100%}.image-grid div{display:inline-block;vertical-align:top;-webkit-transition:height 350ms ease;transition:height 350ms ease}.image-thumbnail{height:210px;max-width:310px;white-space:nowrap;text-align:center;display:inline-block;border:1px solid #eee;margin:5px;padding:0}.image-thumbnail:hover{-webkit-box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);border:1px solid #ff8200;cursor:pointer}img{background:#3a6f9a;vertical-align:middle;max-height:200px;max-width:300px}.helper{display:inline-block;height:100%;vertical-align:middle}.image-grid div>a,.image-grid div>a img{border:none;outline:0}.image-grid .image-expanded .image-thumbnail>a::after{top:auto;border:15px solid transparent;content:\" \";height:0;width:0;display:block;position:absolute;pointer-events:none;border-bottom-color:#505558;left:50%;margin:-20px 0 0 -15px}.image-expander{position:absolute;top:auto;left:0;width:100%;text-align:left;height:0;overflow:hidden;-webkit-transition:height 350ms ease;transition:height 350ms ease}.image-expander-inner{padding:50px 30px;height:100%}.image-close{position:absolute;width:40px;height:40px;top:20px;right:20px;cursor:pointer}.image-position{position:absolute;width:40px;height:40px;top:20px;left:20px;cursor:pointer;font-size:24px;color:#fff}.image-close::after,.image-close::before{content:'';position:absolute;width:100%;top:50%;height:1px;background:#fff;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.image-close::after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.image-close:hover::after,.image-close:hover::before{background:#ff8200}.image-details,.image-fullimg{width:50%;float:left;height:100%;overflow:hidden;position:relative;word-wrap:break-word}.image-details{padding:0 40px 0 20px;color:#fff}.image-fullimg{text-align:center}.image-fullimg img{display:inline-block;max-height:100%;max-width:100%}.image-details h3{font-weight:300;font-size:52px;padding:40px 0 10px;margin-bottom:10px}.image-details p{font-weight:400;font-size:16px;line-height:22px;color:#fff}.image-details a{font-weight:700;font-size:16px;color:#ff8200;text-transform:uppercase;letter-spacing:2px;padding:10px 20px;border:3px solid #333;display:inline-block;margin:30px 0 0;outline:0}.image-details a::before{content:'\\2192';display:inline-block;margin-right:10px}.image-details a:hover{border-color:#999;color:#fff}.prev{float:right;left:0;margin-left:16px;border-radius:3px 0 0 3px}.next{float:right;right:0;margin-right:16px;border-radius:0 3px 3px 0}.next,.prev{font-weight:700;font-size:24px;-webkit-transition:.6s ease;transition:.6s ease;background-color:#ff8200;color:#fff!important;cursor:pointer;position:absolute;top:40%;width:auto;padding:8px}.next:hover,.prev:hover{background-color:rgba(0,0,0,.8)}@media screen and (max-width:830px){.image-expander h3{font-size:32px}.image-expander p{font-size:13px}.image-expander a{font-size:12px}}@media screen and (max-width:650px){.image-fullimg{display:none!important}.image-details{float:none;width:100%!important}}"],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":45,"character":17},"member":"Emulated"}}]}],"members":{"images":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":3}}]}],"expanderBgColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":3}}]}],"expanderTextColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":3}}]}],"parentTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":53,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","line":53,"character":16}]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"getImagesData":[{"__symbolic":"method"}],"openImageExpander":[{"__symbolic":"method"}],"closeImageExpander":[{"__symbolic":"method"}],"plusSlides":[{"__symbolic":"method"}],"showPrevButton":[{"__symbolic":"method"}],"showNextButton":[{"__symbolic":"method"}],"getWinSize":[{"__symbolic":"method"}]}}},"origins":{"ImageViewerModule":"./src/app/image-viewer/image-viewer.module","ɵa":"./src/app/image-viewer/image-viewer.component"},"importAs":"angular-image-viewer"}