ngx-crystal-gallery
Version:
Responsive gallery with support for masonry layout and lightbox.
1 lines • 26.6 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"AdComponent":{"__symbolic":"interface"},"CrystalLightbox":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":18,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":28,"character":36},{"__symbolic":"reference","module":"@angular/core","name":"ApplicationRef","line":29,"character":18},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":30,"character":20}]}],"appendComponentToBody":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"getLightboxComponent":[{"__symbolic":"method"}],"applyConfigDefaults":[{"__symbolic":"method"}]}},"GalleryComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"crystal-gallery","template":"<div #contentWrapper [hidden]=\"isNgContent\">\n <ng-content></ng-content>\n</div>\n\n<masonry-layout \n class=\"cg-wrapper\"\n *ngIf=\"!isNgContent\" \n\n [max-height]=\"masonryMaxHeight\" \n [gutter]=\"masonryGutter\"\n [masonry]=\"masonryState\"\n [class-name]=\"'cg-image'\"\n [images]=\"images\"\n (events)=\"handleMasonryLayoutEvents($event)\"></masonry-layout>","styles":[":host{display:block;width:100%}:host .cg-wrapper{display:block;width:100%;overflow:hidden}:host .cg-wrapper.cg-show{height:auto;position:relative;display:table}:host .cg-image img{cursor:pointer;width:100%}"]}]}],"members":{"images":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":5},"arguments":["images"]}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":5},"arguments":["config"]}]}],"contentWrapper":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":26,"character":5},"arguments":["contentWrapper"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"CrystalLightbox"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":46,"character":22}]}],"showLightbox":[{"__symbolic":"method"}],"handleMasonryLayoutEvents":[{"__symbolic":"method"}]}},"CrystalGalleryModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":9,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"LightboxComponent"},{"__symbolic":"reference","name":"LightboxMobileComponent"},{"__symbolic":"reference","name":"GalleryComponent"},{"__symbolic":"reference","name":"MasonryLayoutComponent"},{"__symbolic":"reference","name":"ɵa"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":18,"character":8}],"exports":[{"__symbolic":"reference","name":"GalleryComponent"}],"providers":[{"__symbolic":"reference","name":"CrystalLightbox"}],"bootstrap":[],"entryComponents":[{"__symbolic":"reference","name":"LightboxComponent"},{"__symbolic":"reference","name":"LightboxMobileComponent"}]}]}],"members":{}},"LightboxComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":11,"character":1},"arguments":[{"selector":"crystal-lightbox","template":"<div class=\"cg-counter\" *ngIf=\"config.counter && images.length > 1\">{{counter}}</div>\n<div class=\"cg-description\" *ngIf=\"description\">{{description}}</div>\n\n<div \n\tclass=\"cg-close\" \n\t(click)=\"closeLightbox()\">Close</div>\n\n<div \n\tclass=\"cg-spinner\" \n\t *ngIf=\"!currImageLoaded\"></div>\n\n<div class=\"cg-wrapper\" #wrapper>\n\t<img \n\t\tclass=\"cg-curr-image\" \n\t\t#currImageElem \n\t\t[src]=\"currImagePath?.full\" \n\t\t[class.cg-show]=\"currImageLoaded\" \n\t\t(load)=\"onImageLoaded()\" />\n</div>\n\n<div \n\tclass=\"cg-prev\" \n\t[hidden]=\"isFirst && !config.loop\" \n\t(click)=\"prev()\"></div>\n<div \n\tclass=\"cg-next\" \n\t[hidden]=\"isLast && !config.loop\" \n\t(click)=\"next()\"></div>","styles":["._cg-spinner,._cg-spinner:after{border-radius:50%;width:36px;height:36px}._cg-spinner{margin:0 auto;font-size:10px;position:relative;text-indent:-9999em;border-top:4px solid rgba(255,255,255,.2);border-right:4px solid rgba(255,255,255,.2);border-bottom:4px solid rgba(255,255,255,.2);border-left:4px solid #fff;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-animation:.9s linear infinite load8;animation:.9s linear infinite load8}@-webkit-keyframes load8{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes load8{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.cg-spinner,.cg-spinner:after,.cg-spinner:before{border-radius:50%;width:10px;height:10px;-webkit-animation:1.5s ease-in-out infinite load7;animation:1.5s ease-in-out infinite load7}.cg-spinner{color:#fff;font-size:10px;margin:0 auto 20px;position:relative;text-indent:-9999em;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-animation-delay:-.16s;animation-delay:-.16s}.cg-spinner:after,.cg-spinner:before{content:\"\";position:absolute;top:0}.cg-spinner:before{left:-3em;-webkit-animation-delay:-.32s;animation-delay:-.32s}.cg-spinner:after{left:3em}@-webkit-keyframes load7{0%,100%,80%{box-shadow:0 2.5em 0 -1.3em}40%{box-shadow:0 2.5em 0 0}}@keyframes load7{0%,100%,80%{box-shadow:0 10px 0 -1.3em}40%{box-shadow:0 10px 0 0}}:host(.cg-show){opacity:1}:host(.cg-hide-controls) .cg-close,:host(.cg-hide-controls) .cg-next,:host(.cg-hide-controls) .cg-prev{opacity:0}:host{opacity:0;position:fixed;top:0;left:0;width:100%;height:100%;color:#fff;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:opacity .1s cubic-bezier(.645,.045,.355,1);z-index:10000;background-color:rgba(0,0,0,.85)}:host img{opacity:1;max-width:100%;max-height:100%;box-shadow:0 4px 15px 2px rgba(0,0,0,.35)}:host img.cg-curr-image.cg-show{opacity:1}:host img.cg-curr-image{opacity:0;z-index:10}:host .cg-wrapper.cg-hide{display:none}:host .cg-wrapper{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;top:0;left:0;width:100%;height:100%}:host .cg-spinner{position:absolute;top:50%;left:50%;margin-top:-15px;margin-left:-5px}:host .cg-counter{text-align:left;position:absolute;left:22px;top:13px;font-size:14px;text-shadow:0 0 1px rgba(0,0,0,.65);z-index:30}:host .cg-description{text-align:center;max-width:calc(100% - 200px);margin:0 auto;font-size:14px;line-height:43px;position:relative;z-index:50}:host .cg-close{position:absolute;top:0;right:0;padding:13px 22px;font-size:13px;text-transform:uppercase;cursor:pointer;opacity:.5;z-index:30;transition:opacity .1s ease-in-out;text-shadow:0 0 1px rgba(0,0,0,.65)}:host .cg-close:hover{opacity:1}:host .cg-next,:host .cg-prev{width:40%;height:100%;position:absolute;top:0;cursor:pointer;opacity:.5;z-index:20;transition:opacity .1s ease-in-out;-webkit-tap-highlight-color:rgba(255,255,255,0)}:host .cg-next:hover,:host .cg-prev:hover{opacity:1}:host .cg-prev{left:0;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAiCAYAAABbXymAAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjMzMTZCQzFERDgzMTExRTc5QUYxQTUxRDI5MkM5ODZCIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjMzMTZCQzFFRDgzMTExRTc5QUYxQTUxRDI5MkM5ODZCIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MzMxNkJDMUJEODMxMTFFNzlBRjFBNTFEMjkyQzk4NkIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MzMxNkJDMUNEODMxMTFFNzlBRjFBNTFEMjkyQzk4NkIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7VrwZKAAAClElEQVR42qzWSY8SQRgGYLoVHPeTXlwCiIwMArJGtiABNep4IGZi4oEfMJooLjePrnFGf5yJS0hYmq2b/aBxiQ6+lRRJdaUZq5vp5E2TLnioVFd9VZLN+iUxIdeMiW2fRVCmvz2DpJBVCk6X6SVBHQRLpVKb7Xb782g0Usrl8jM8W0P20+9YQn3JZPIhwN6MXoPBoI3nG8iKGZhF14A+AqrOmKtWq31F213kkOgQ69B0Ol0BqrFot9vV/H7/c7RfEoVZ1G+EdjqdvtfrfYn2K8gJkaHQodlstjIej/ssihdH0Ddov4acQo7QlycJo5PJhEc1j8fzmqJk2h1D7Lv1lkUv5nK5xzzaarWMUIcwms/nCTrgUbfbTdCrVtAAQafTqQ5VFEVdCi0UCk/Q0yGLNptN1el0vqLoaRHUxqPoKY/2KFo0g0r0ba4Wi8WnQEcs2mg0VAPULrJsZTqpNzDZ6yxar9dVl8tFVtR10SnFohJdgnZYuh9IkjSTZfknPn5DviO/kL/IjkgtIOhhJJ7JZF5gdU24hdDG6qqg/QJywEzlmg/FSTLhE4nE9nA4nHJFRvH5fJto94gOBfvyjtJxXI/H4x+A63re6/UUVDCCnzeDz6fbceQscjsWi703wFsM7hDBJQN8PRqNbmNn0OGapu0JfoviYx4PBAL30e5dCg+Hw0Z4e8/wfr/P451QKPRgaRzIFjDdksefsbjdKn5zER6JRMiwuP+3Ne2KB4PBLVVVR1xd+YK2O2bOFYvwd8CHbK/x/J6Zc8Ui/AZmxdtqtdrAwlFLpRLZrS/PYcnkEUuiY7hCS+g5sovT55+Qj7QS/jYD8zjp/UF6t9GS+oPed8zCLC5zJ0tSo//Q+8wKLHTw/ifAAMQVS4vHZR2VAAAAAElFTkSuQmCC) center left 22px no-repeat}:host .cg-next{right:0;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAiCAYAAABbXymAAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjEyNDE3MDE1RDgzMTExRTc5NjM4QTIzQzI2Rjc2Qjg2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjEyNDE3MDE2RDgzMTExRTc5NjM4QTIzQzI2Rjc2Qjg2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTI0MTcwMTNEODMxMTFFNzk2MzhBMjNDMjZGNzZCODYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTI0MTcwMTREODMxMTFFNzk2MzhBMjNDMjZGNzZCODYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7zv5BKAAACl0lEQVR42rTW224SQRwGcHZb8FT1Sm88BJCiFAE5JpyCBNRE8coYEy94AGqi9XDXS0+JVh/CB/EhiFET5LjAclgWjaa1aazfJDM6u6LuLjrJl2124cd0duY/I9h+NoELabtcTLcFCon0bw+SRE4h28hn2xyNoIvISrlcfqAoSluSpLepVKqCe6cRB/2MYAXei1wfjUbSLm34gX4ymbyN+z6rOBmC/ciNer3+fpdrwGXgd8h/YwVn8Dm/37/e6/UGOnyQTqfXrOBsKI4g571e76Nutzv8De43gwv05S0hx5CLwJ/iBWrwyWQyzGazpnHyITtyCDlBcI/H8wS4ZlhUVbWMO/R4p9P5Bc/lcnfx/Ow8+AW32z0LH+Xz+X+Dt9ttmcen0ynDA1bx4wR3Op2PW62WrOv5uFAo3JsXL1K8r+v5LNxmZrb8wJvNpn5YlGKxeJ/WFruZBcRPxUsul2u90WhocCyqBqk3dLGJiwbgb/T6FflCSqkoiluCIGjqNGzWgQUz9YR8aQ9yBqtyDQtH0q1KNZPJPMTzOHKA4oaHwuPz+SooUm0eHY/H00QisUEWFHKUDYVRdBmVr9Lv9/WoGo/HX+J5iY7/QSMvj003hnb0aCwWe4HnV5GTyGEj002DDgYDDYqdRo1Goxu0p3pU+BvqDQQCqzPQCUWvzINKejQcDltHQ6HQLaBdHh0Oh5ZRO0OBaFD8iIL7z82ibGtyRyKR1T+gl82g/GZ6Dev/HY/KsqwEg0FLKL/93+R7C3QM9Nk8KDtiOWq12jb2s2XS01Kp9Kparb7G/TfIR2QT2TF6UBS42bBEi/UK/SIBPyCfkC0zKA+z6rWPXm30tLlJr6ZQ/ZmYDYnI1eEdejV9Thb+18H7uwADAOG/Wcm4x+knAAAAAElFTkSuQmCC) center right 22px no-repeat}"]}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":5}}]}],"showLightbox":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":58,"character":5},"arguments":["class.cg-show"]}]}],"hideControls":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":59,"character":5},"arguments":["class.cg-hide-controls"]}]}],"hostStyleTransition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":60,"character":5},"arguments":["style.transition"]}]}],"hostStyleBackgroundColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":61,"character":5},"arguments":["style.backgroundColor"]}]}],"currImageElem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":63,"character":5},"arguments":["currImageElem"]}]}],"prevImageElem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":64,"character":5},"arguments":["prevImageElem"]}]}],"wrapperElem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":65,"character":5},"arguments":["wrapper"]}]}],"onKeyDown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":121,"character":5},"arguments":["window:keydown",["$event"]]}]}],"onMouseEnter":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":136,"character":5},"arguments":["mouseenter",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":141,"character":36},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":141,"character":61}]}],"ngOnInit":[{"__symbolic":"method"}],"closeLightbox":[{"__symbolic":"method"}],"next":[{"__symbolic":"method"}],"prev":[{"__symbolic":"method"}],"onImageLoaded":[{"__symbolic":"method"}],"setBackgroundOpacity":[{"__symbolic":"method"}],"setMaxDimensions":[{"__symbolic":"method"}],"setAnimationDuration":[{"__symbolic":"method"}]}},"LightboxMobileComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"crystal-lightbox-mobile","template":"<div class=\"cg-back\" (click)=\"closeLightbox()\"></div>\n\n<div \n\tclass=\"cg-wrapper\" \n\t[class.cg-landscape]=\"landscapeMode\"\n\tpinch [isLast]=\"isLast\" [isFirst]=\"isFirst\" (events)=\"handlePinchEvents($event)\"\n\t#wrapper>\n\t<div class=\"cg-image-wrap cg-prev-image\">\n\t\t<img \n\t\t\t*ngIf=\"prevImagePath\"\n\t\t\t[src]=\"prevImagePath.full\" \n\t\t\t[class.cg-hide]=\"!prevImage.loaded\"\n\t\t\t(load)=\"onImageLoaded('prevImage')\"\n\t\t/>\n\t\t<div class=\"cg-spinner\" *ngIf=\"!prevImage.loaded && prevImagePath\"></div>\n\t</div>\n\n\t<div class=\"cg-image-wrap cg-curr-image\" *ngIf=\"currImage.show\">\n\t\t<img \n\t\t\t[src]=\"currImagePath?.full\" \n\t\t\t[class.cg-hide]=\"!currImage.loaded\" \n\t\t\t(load)=\"onImageLoaded('currImage')\"\n\t\t/>\n\t\t<div class=\"cg-spinner\" *ngIf=\"!currImage.loaded\"></div>\n\t</div>\n\t\n\t<div class=\"cg-image-wrap cg-next-image\">\n\t\t<img \n\t\t\t*ngIf=\"nextImagePath\"\n\t\t\t[src]=\"nextImagePath.full\" \n\t\t\t[class.cg-hide]=\"!nextImage.loaded\" \n\t\t\t(load)=\"onImageLoaded('nextImage')\"\n\t\t/>\n\t\t<div class=\"cg-spinner\" *ngIf=\"!nextImage.loaded && nextImagePath\"></div>\n\t</div>\n</div>","styles":["._cg-spinner,._cg-spinner:after{border-radius:50%;width:36px;height:36px}._cg-spinner{margin:0 auto;font-size:10px;position:relative;text-indent:-9999em;border-top:4px solid rgba(255,255,255,.2);border-right:4px solid rgba(255,255,255,.2);border-bottom:4px solid rgba(255,255,255,.2);border-left:4px solid #fff;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-animation:.9s linear infinite load8;animation:.9s linear infinite load8}@-webkit-keyframes load8{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes load8{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.cg-spinner,.cg-spinner:after,.cg-spinner:before{border-radius:50%;width:10px;height:10px;-webkit-animation:1.5s ease-in-out infinite load7;animation:1.5s ease-in-out infinite load7}.cg-spinner{color:#fff;font-size:10px;margin:0 auto 20px;position:relative;text-indent:-9999em;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-animation-delay:-.16s;animation-delay:-.16s}.cg-spinner:after,.cg-spinner:before{content:\"\";position:absolute;top:0}.cg-spinner:before{left:-3em;-webkit-animation-delay:-.32s;animation-delay:-.32s}.cg-spinner:after{left:3em}@-webkit-keyframes load7{0%,100%,80%{box-shadow:0 2.5em 0 -1.3em}40%{box-shadow:0 2.5em 0 0}}@keyframes load7{0%,100%,80%{box-shadow:0 10px 0 -1.3em}40%{box-shadow:0 10px 0 0}}:host(.cg-show){opacity:1}:host(.cg-hide-controls) .cg-close,:host(.cg-hide-controls) .cg-next,:host(.cg-hide-controls) .cg-prev{opacity:0}:host{opacity:0;position:fixed;top:0;left:0;width:100%;height:100%;color:#fff;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:opacity .2s cubic-bezier(.645,.045,.355,1);z-index:10000;background-color:#000}:host .cg-back{background:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg width%3D%2210px%22 height%3D%2216px%22 viewBox%3D%220 0 10 16%22 version%3D%221.1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E %3C!-- Generator%3A sketchtool 40.2 (33826) - http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch --%3E %3Ctitle%3E11A73872-5EBF-46F6-B7C5-142D47A33339%3C%2Ftitle%3E %3Cdesc%3ECreated with sketchtool.%3C%2Fdesc%3E %3Cdefs%3E%3C%2Fdefs%3E %3Cg id%3D%22Interface-1280-x-800%22 stroke%3D%22none%22 stroke-width%3D%221%22 fill%3D%22none%22 fill-rule%3D%22evenodd%22%3E %3Cg id%3D%22Lot_viewpage_open%22 transform%3D%22translate(-111.000000%2C -296.000000)%22 fill%3D%22%23FFFFFF%22%3E %3Cg id%3D%22arrows-16px-1_minimal-left%22 transform%3D%22translate(111.000000%2C 296.000000)%22%3E %3Cpolygon id%3D%22Shape%22 points%3D%228.1 15.7 0.4 8 8.1 0.3 9.6 1.7 3.3 8 9.6 14.3%22%3E%3C%2Fpolygon%3E %3C%2Fg%3E %3C%2Fg%3E %3C%2Fg%3E%3C%2Fsvg%3E\") center/12px no-repeat;width:40px;height:40px;opacity:.9;position:fixed;top:0;left:0;z-index:1000}:host .cg-wrapper.cg-landscape .cg-image-wrap img{height:100%}:host .cg-wrapper{transition:none;width:100%;height:100%;display:block}:host .cg-wrapper .cg-image-wrap.cg-prev-image{-webkit-transform:translate3d(calc(-100% - 8px),0,0);transform:translate3d(calc(-100% - 8px),0,0)}:host .cg-wrapper .cg-image-wrap.cg-next-image{-webkit-transform:translate3d(calc(100% + 8px),0,0);transform:translate3d(calc(100% + 8px),0,0)}:host .cg-wrapper .cg-image-wrap{width:100%;height:100%;text-align:center;position:absolute;display:flex;align-items:center;justify-content:center}:host .cg-wrapper .cg-image-wrap img{max-width:100%;max-height:100%;width:auto;height:auto;position:relative}:host .cg-wrapper .cg-image-wrap img.cg-hide{display:none}"]}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":66,"character":5}}]}],"wrapperEl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":68,"character":5},"arguments":["wrapper"]}]}],"lightboxShown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":142,"character":5},"arguments":["class.cg-show"]}]}],"onWindowResize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":144,"character":5},"arguments":["window:resize",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":150,"character":36},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":150,"character":61}]}],"ngOnInit":[{"__symbolic":"method"}],"showLightbox":[{"__symbolic":"method"}],"closeLightbox":[{"__symbolic":"method"}],"slide":[{"__symbolic":"method"}],"afterSlide":[{"__symbolic":"method"}],"onImageLoaded":[{"__symbolic":"method"}],"handlePinchEvents":[{"__symbolic":"method"}],"defaultWrapperPosition":[{"__symbolic":"method"}]}},"Image":{"__symbolic":"interface"},"Images":{"__symbolic":"interface"},"MasonryLayoutComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":13,"character":1},"arguments":[{"selector":"masonry-layout","template":"<div \n\t[ngClass]=\"CLASS_NAME\"\n\t*ngFor=\"let image of images; let i = index;\"\n [style.width]=\"image.computedWidth\"\n [style.height]=\"image.computedHeight\"\n [style.float]=\"'left'\"\n [style.margin]=\"image.margin\"\n [style.background]=\"'#eeeeee'\"\n [style.lineHeight]=\"0\">\n\t<img \n #imageElem\n [src]=\"image.preview || image.full\" \n [style.width.%]=\"100\" \n [style.height]=\"'auto'\"\n [style.opacity]=\"0\"\n (click)=\"clickOnImage(image, i)\"\n (load)=\"onImageLoaded(imageElem)\" />\n</div>"}]}],"members":{"images":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":5},"arguments":["images"]}]}],"ENABLE_MASONRY":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":5},"arguments":["masonry"]}]}],"MAX_HEIGHT":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":5},"arguments":["max-height"]}]}],"CLASS_NAME":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":5},"arguments":["class-name"]}]}],"gutter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":5},"arguments":["gutter"]}]}],"events":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":55,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":63,"character":36}]}],"onWindowResize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":67,"character":5},"arguments":["window:resize",["$event"]]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"buildGrid":[{"__symbolic":"method"}],"setColDimensions":[{"__symbolic":"method"}],"getComputedWidth":[{"__symbolic":"method"}],"isLastChild":[{"__symbolic":"method"}],"getNodeMargin":[{"__symbolic":"method"}],"clickOnImage":[{"__symbolic":"method"}],"onImageLoaded":[{"__symbolic":"method"}]}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[pinch]"}]}],"members":{"isLast":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":5}}]}],"isFirst":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":5}}]}],"events":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":33,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":35,"character":36}]}],"touchstartHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":39,"character":5},"arguments":["touchstart",["$event"]]}]}],"touchmoveHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":44,"character":5},"arguments":["touchmove",["$event"]]}]}],"touchendHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":69,"character":5},"arguments":["touchend",["$event"]]}]}],"slide":[{"__symbolic":"method"}],"onSlide":[{"__symbolic":"method"}],"transformElem":[{"__symbolic":"method"}]}}},"origins":{"AdComponent":"./lib/dom.service","CrystalLightbox":"./lib/dom.service","GalleryComponent":"./lib/gallery.component","CrystalGalleryModule":"./lib/gallery.module","LightboxComponent":"./lib/lightbox.component","LightboxMobileComponent":"./lib/lightbox-mobile.component","Image":"./lib/masonry-layout.component","Images":"./lib/masonry-layout.component","MasonryLayoutComponent":"./lib/masonry-layout.component","ɵa":"./lib/pinch.directive"},"importAs":"ngx-crystal-gallery"}