@crystalui/angular-lightbox
Version:
Angular library for viewing images in a pop-up window with touch screen support.
16 lines (14 loc) • 34.9 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common"),require("rxjs")):"function"==typeof define&&define.amd?define("@crystalui/angular-lightbox",["exports","@angular/core","@angular/common","rxjs"],e):e(((t=t||self).crystalui=t.crystalui||{},t.crystalui["angular-lightbox"]={}),t.ng.core,t.ng.common,t.rxjs)}(this,(function(t,e,i,o){"use strict";
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */var n=function(t,e){return(n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)e.hasOwnProperty(i)&&(t[i]=e[i])})(t,e)};function r(t,e,i,o){var n,r=arguments.length,a=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,i,o);else for(var s=t.length-1;s>=0;s--)(n=t[s])&&(a=(r<3?n(a):r>3?n(e,i,a):n(e,i))||a);return r>3&&a&&Object.defineProperty(e,i,a),a}var a=function(){function t(){this.emitter=new o.ReplaySubject(1)}return t.prototype.emitChangeEvent=function(t){this.emitter.next(t)},t=r([e.Injectable()],t)}(),s=function(){function t(){}return t.mobileCheck=function(){var t,e=!1;return t=navigator.userAgent||navigator.vendor,(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(t)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(t.substr(0,4)))&&(e=!0),e},t}(),h=function(){function t(t){this.eventService=t,this.currentImageIndex=0,this.indexCurrentSlide=1,this.containerStyles={transition:"",transform:"",width:"",height:"",opacity:""},this.currImageLoadingState="not-loaded",this.isMobile=s.mobileCheck()}return Object.defineProperty(t.prototype,"lightboxImage",{get:function(){return this._lightboxImage},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"lightboxImageElement",{get:function(){if(this.lightboxImage)return this.lightboxImage.nativeElement},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"lightboxImageNaturalHeight",{get:function(){if(this.lightboxImageElement)return this.lightboxImageElement.naturalHeight},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"lightboxImageNaturalWidth",{get:function(){if(this.lightboxImageElement)return this.lightboxImageElement.naturalWidth},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"index",{get:function(){return this.currentImageIndex},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"properties",{get:function(){return this.lightboxData.properties},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"images",{get:function(){return this.lightboxData.images||[this.lightboxData.image]},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"thumbnailImage",{get:function(){return this.images[this.currentImageIndex].nativeElement},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"thumbnailImagePosition",{get:function(){return this.thumbnailImage.getBoundingClientRect()},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"virtualImageDimension",{get:function(){var t=this.lightboxImageNaturalHeight,e=t*this.imageAspectRatio,i=document.body.clientWidth,o=window.innerHeight;return this.isImageLargerWindow?(t>o&&(e=(t=o)*this.imageAspectRatio),e>i&&(t=(e=i)/this.imageAspectRatio)):(e=this.lightboxImageNaturalWidth,t=this.lightboxImageNaturalHeight),0===e||0===Number.parseInt(t)?{width:200,height:200}:{width:e,height:t}},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"containerInitialPosition",{get:function(){var t="initial-thumbnail-image"===this.showState?1:this.containerScale,e=this.thumbnailImagePosition.top;return"matrix("+t+", 0, 0, "+t+","+this.thumbnailImagePosition.left+","+e+")"},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"containerFullscreenPosition",{get:function(){return"translate3d("+(document.body.clientWidth-this.virtualImageDimension.width)/2+"px, "+(window.innerHeight-this.virtualImageDimension.height)/2+"px, 0)"},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"containerScale",{get:function(){return this.thumbnailImagePosition.width/this.virtualImageDimension.width},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"imageAspectRatio",{get:function(){return this.thumbnailImage.naturalWidth/this.thumbnailImage.naturalHeight},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"isImageLargerWindow",{get:function(){var t=this.lightboxImageNaturalWidth,e=this.lightboxImageNaturalHeight,i=document.body.clientWidth,o=window.innerHeight;return t>i||e>o},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"isFirstImage",{get:function(){return!this.properties.loop&&0===this.index},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"isLastImage",{get:function(){return!this.properties.loop&&this.index===this.latestImageIndex},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"latestImageIndex",{get:function(){return this.images.length-1},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"backgroundColor",{get:function(){var t=this.properties.backgroundOpacity;return"black"===this.properties.backgroundColor?"rgba(0, 0, 0, "+t+")":"rgba(255, 255, 255, "+t+")"},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"animationDuration",{get:function(){var t=this.properties.animationDuration;return"string"==typeof t?Number.parseInt(t):t},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"animationMode",{get:function(){return"error"===this.currImageLoadingState?"default":this.properties.animationMode},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"animationTimingFunction",{get:function(){return this.properties.animationTimingFunction},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"closeButtonText",{get:function(){return this.properties.closeButtonText},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"counterSeparator",{get:function(){return this.properties.counterSeparator},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"counter",{get:function(){return this.currentImageIndex+1+this.counterSeparator+this.images.length},enumerable:!0,configurable:!0}),t.prototype.emitState=function(t,e){"initial-virtual-image"!==e&&"initial-styles"!==e&&("initial-default"!==e&&"initial-thumbnail-image"!==e||(e="initial"),this.eventService.emitChangeEvent({type:t+":"+e}))},t.prototype.setShowState=function(t){this.showState=t,this.emitState("show-state",t)},t.prototype.setClosingState=function(t){this.closingState=t,this.emitState("closing-state",t)},t.prototype.setAnimationDuration=function(){this.hostStyleTransition="background-color "+this.animationDuration+"ms",this.containerStyles.transition="all "+this.animationDuration+"ms "+this.animationTimingFunction},t.prototype.setBackgroundColor=function(){this.hostStyleBackgroundColor=this.backgroundColor},t.prototype.getContainerHeight=function(){return this.thumbnailImagePosition.height/this.containerScale+"px"},t.prototype.showThumbnailImage=function(){this.thumbnailImage.style.opacity=""},t.prototype.hideThumbnailImage=function(){this.thumbnailImage.style.opacity=0},t.prototype.updateThumbnailPosition=function(){this.containerStyles.transform=this.containerInitialPosition},t.ctorParameters=function(){return[{type:a}]},r([e.Input()],t.prototype,"lightboxData",void 0),r([e.HostBinding("style.backgroundColor")],t.prototype,"hostStyleBackgroundColor",void 0),r([e.HostBinding("style.transition")],t.prototype,"hostStyleTransition",void 0),r([e.ViewChild("imageFirst",{static:!0})],t.prototype,"_imageFirst",void 0),r([e.ViewChild("imageSecond",{static:!0})],t.prototype,"_imageSecond",void 0),r([e.ViewChild("imageLast",{static:!0})],t.prototype,"_imageLast",void 0),r([e.ViewChild("lightboxImage",{static:!0})],t.prototype,"_lightboxImage",void 0),t=r([e.Component({selector:"lightbox-common",template:""})],t)}(),l=function(t){function i(i,o,n){var r=t.call(this,n)||this;return r.elementRef=i,r.ref=o,r.eventService=n,r.spinnerHeight=30,r.minTimeout=30,r.preloaderTimeout=100,r.spinnerStyles={transform:""},r.configThumbnailPreloader=!0,r.events=new e.EventEmitter,r.hostShown=!1,r.hideControls=!1,r}return function(t,e){function i(){this.constructor=t}n(t,e),t.prototype=null===e?Object.create(e):(i.prototype=e.prototype,new i)}(i,t),Object.defineProperty(i.prototype,"simpleMode",{get:function(){return this.properties.simpleMode},enumerable:!0,configurable:!0}),Object.defineProperty(i.prototype,"hostLightTheme",{get:function(){return"white"===this.properties.backgroundColor},enumerable:!0,configurable:!0}),Object.defineProperty(i.prototype,"currImagePath",{get:function(){var t,e=this.images[this.index];return!!e&&(e.fullImage&&e.fullImage.path?t=e.fullImage.path:e.thumbnailImage&&e.thumbnailImage.path?t=e.thumbnailImage.path:e.path&&(t=e.path),t)},enumerable:!0,configurable:!0}),Object.defineProperty(i.prototype,"prevImagePath",{get:function(){return this.images[this.prevIndex]},set:function(t){this.images[this.prevIndex]=t},enumerable:!0,configurable:!0}),Object.defineProperty(i.prototype,"isHiddenPrevArrow",{get:function(){return this.isFirstImage&&!this.properties.loop||this.isZoomIn},enumerable:!0,configurable:!0}),Object.defineProperty(i.prototype,"isHiddenNextArrow",{get:function(){return this.isLastImage&&!this.properties.loop||this.isZoomIn},enumerable:!0,configurable:!0}),Object.defineProperty(i.prototype,"isPreloader",{get:function(){return"zoom-preloader"===this.animationMode&&"animation-end"!=this.showState&&"loading"===this.currImageLoadingState},enumerable:!0,configurable:!0}),Object.defineProperty(i.prototype,"imageOrientation",{get:function(){return this.thumbnailImage.naturalWidth>this.thumbnailImage.naturalHeight?"horizontal":"vertical"},enumerable:!0,configurable:!0}),i.prototype.scrolling=function(){"initial-thumbnail-image"!==this.showState&&"initial-virtual-image"!==this.showState&&"animation"!==this.closingState||this.updateThumbnailPosition()},i.prototype.onKeyDown=function(t){switch(t.key){case"ArrowLeft":this.prev();break;case"ArrowRight":this.next();break;case"Escape":this.closeLightbox()}},i.prototype.onMouseEnter=function(t){this.hideControls=!1},i.prototype.transitionEnd=function(t){"transform"===t.propertyName&&this.hostAnimation&&(this.hostAnimation=!1)},i.prototype.ngOnInit=function(){this.currentImageIndex=this.properties.index,this.initialLightbox()},i.prototype.ngAfterViewInit=function(){var t=this;setTimeout((function(){"not-loaded"===t.currImageLoadingState&&(t.currImageLoadingState="loading")}),this.preloaderTimeout),"default"===this.animationMode&&setTimeout((function(){t.showLightboxAnimation()}),this.minTimeout)},i.prototype.onImageLoaded=function(){var t=this;"zoom-preloader"===this.animationMode&&"initial-thumbnail-image"===this.showState&&(this.initialLightboxVirtualImage(),setTimeout((function(){t.currImageLoadingState="uploaded",t.showLightboxAnimation(),t.properties.hideThumbnail&&t.hideThumbnailImage()}),this.minTimeout)),"animation-end"===this.showState&&(this.currImageLoadingState="uploaded",this.properties.hideThumbnail&&this.hideThumbnailImage()),this.ref.detectChanges()},i.prototype.onImageError=function(t){var e=this;this.currImageLoadingState="error",this.initialLightboxDefault(),setTimeout((function(){e.showLightboxAnimation()}),this.minTimeout)},i.prototype.onContainerClick=function(t){(t.target===this.lightboxContainerElem.nativeElement||this.simpleMode)&&this.closeLightbox()},i.prototype.initialLightbox=function(){switch(this.setMaxDimensions(),this.setAnimationDuration(),this.animationMode){case"zoom-preloader":this.initialLightboxThumbnailImage();break;case"default":this.initialLightboxDefault()}},i.prototype.initialLightboxDefault=function(){this.showState="initial-default",this.containerStyles={transform:"translate3d(0, 0, 0)",height:"100%",width:"100%",opacity:"0"}},i.prototype.initialLightboxVirtualImage=function(){this.setShowState("initial-virtual-image"),this.containerStyles={transform:this.containerInitialPosition,height:this.virtualImageDimension.height+"px",width:this.virtualImageDimension.width+"px"}},i.prototype.initialLightboxThumbnailImage=function(){this.setShowState("initial-thumbnail-image"),this.containerStyles={transform:this.containerInitialPosition,height:this.thumbnailImagePosition.height+"px",width:this.thumbnailImagePosition.width+"px"}},i.prototype.showLightboxAnimation=function(){this.hostAnimation=!0,this.setShowState("animation"),this.hostShown=!0,this.setBackgroundColor(),this.setAnimationDuration(),"zoom-preloader"===this.animationMode&&"error"!==this.currImageLoadingState&&(this.containerStyles.transform=this.containerFullscreenPosition),"default"===this.animationMode&&(this.containerStyles.opacity="1")},i.prototype.showLightboxAnimationEnd=function(){this.setShowState("animation-end"),this.containerStyles={transform:"translate3d(0, 0, 0)",height:"100%",width:"100%"}},i.prototype.closeLightbox=function(){this.setClosingState("initial"),this.hostShown=!1,this.closeLightboxInitial()},i.prototype.closeLightboxInitial=function(){var t=this;this.setClosingState("initial-styles"),"zoom-preloader"===this.animationMode&&(this.containerStyles={transform:this.containerFullscreenPosition,height:this.virtualImageDimension.height+"px",width:this.virtualImageDimension.width+"px"}),"default"===this.animationMode&&(this.containerStyles.opacity="1"),setTimeout((function(){t.closeLightboxAnimation()}),this.minTimeout)},i.prototype.closeLightboxAnimation=function(){this.setClosingState("animation"),"zoom-preloader"===this.animationMode&&(this.hostAnimation=!0,this.containerStyles={transform:this.containerInitialPosition,height:this.getContainerHeight(),width:this.getContainerWidth()},this.hostStyleBackgroundColor=""),"default"===this.animationMode&&(this.hostAnimation=!0,this.containerStyles.opacity="0",this.hostStyleBackgroundColor=""),this.setAnimationDuration(),0===this.animationDuration&&this.closeLightboxAnimationEnd()},i.prototype.closeLightboxAnimationEnd=function(){this.setClosingState("animation-end"),this.events.emit({type:"close"}),"zoom-preloader"===this.animationMode&&this.showThumbnailImage()},i.prototype.handleLightboxTransitionEnd=function(t){"animation"===this.showState&&this.showLightboxAnimationEnd(),"animation"===this.closingState&&this.closeLightboxAnimationEnd()},i.prototype.next=function(){var t=this;if("zoom-preloader"===this.animationMode&&this.showThumbnailImage(),this.isLastImage){if(!this.properties.loop)return;this.currentImageIndex=0}else this.currentImageIndex++,this.currImageLoadingState="loading";setTimeout((function(){"uploaded"!==t.currImageLoadingState&&(t.currImageLoadingState="loading")}),this.preloaderTimeout)},i.prototype.prev=function(){var t=this;if("zoom-preloader"===this.animationMode&&this.showThumbnailImage(),this.isFirstImage){if(!this.properties.loop)return;this.currentImageIndex=this.latestImageIndex}else this.currentImageIndex--,this.currImageLoadingState="loading";setTimeout((function(){"uploaded"!==t.currImageLoadingState&&(t.currImageLoadingState="loading")}),this.preloaderTimeout)},i.prototype.setMaxDimensions=function(){this.lightboxImage.nativeElement.style.maxHeight="calc("+this.properties.imageMaxHeight+")",this.lightboxImage.nativeElement.style.maxWidth=this.properties.imageMaxWidth},i.prototype.handlePinchZoomEvents=function(t){"zoom-in"===t.type&&(this.isZoomIn=!0),"zoom-out"===t.type&&(this.isZoomIn=!1)},i.prototype.getContainerWidth=function(){return this.thumbnailImagePosition.width/this.containerScale+"px"},i.ctorParameters=function(){return[{type:e.ElementRef},{type:e.ChangeDetectorRef},{type:a}]},r([e.HostBinding("class.lightbox-shown")],i.prototype,"hostShown",void 0),r([e.HostBinding("class.lightbox-hide-controls")],i.prototype,"hideControls",void 0),r([e.HostBinding("class.lightbox-animation")],i.prototype,"hostAnimation",void 0),r([e.HostBinding("class.lightbox-simple-mode")],i.prototype,"simpleMode",null),r([e.HostBinding("class.lightbox-light")],i.prototype,"hostLightTheme",null),r([e.HostBinding("style.backgroundColor")],i.prototype,"hostStyleBackgroundColor",void 0),r([e.ViewChild("prevImageElem",{static:!0})],i.prototype,"prevImageElem",void 0),r([e.ViewChild("lightboxContainer",{static:!0})],i.prototype,"lightboxContainerElem",void 0),r([e.HostListener("window:scroll")],i.prototype,"scrolling",null),r([e.HostListener("window:keydown",["$event"])],i.prototype,"onKeyDown",null),r([e.HostListener("mouseenter",["$event"])],i.prototype,"onMouseEnter",null),r([e.HostListener("transitionend",["$event"])],i.prototype,"transitionEnd",null),i=r([e.Component({selector:"crystal-lightbox",template:'<div class="lightbox-counter" *ngIf="properties.counter && images.length > 1">{{counter}}</div>\n<div class="lightbox-close" *ngIf="!simpleMode" (click)="closeLightbox()">{{closeButtonText}}</div>\n<div class="lightbox-spinner" \n\t*ngIf="currImageLoadingState === \'loading\' && showState === \'animation-end\'"></div>\n<div class="lightbox-container" \n\t#lightboxContainer\n\t[ngStyle]="containerStyles"\n\t(transitionend)="handleLightboxTransitionEnd($event)"\n\t(click)="onContainerClick($event)">\n\n\t<div class="lightbox-preloader" *ngIf="isPreloader">\n\t\t<div class="lightbox-spinner"></div>\n\t</div>\n\n\t<div class="lightbox-error" *ngIf="currImageLoadingState === \'error\' && !closingState">Failed to load image</div>\n\n\t<img class="lightbox-curr-image" \n\t\t#lightboxImage\n\t\t[src]="currImagePath" \n\t\t[class.lightbox-show]="currImageLoadingState === \'uploaded\'" \n\t\t(load)="onImageLoaded()"\n\t\t(error)="onImageError($event)" />\n</div>\n\n<div class="lightbox-prev" [hidden]="isHiddenPrevArrow" (click)="prev()"></div>\n<div class="lightbox-next" [hidden]="isHiddenNextArrow" (click)="next()"></div>',styles:['.lightbox-spinner,.lightbox-spinner:after,.lightbox-spinner:before{border-radius:50%;width:10px;height:10px;-webkit-animation:1.5s ease-in-out infinite lightbox-load;animation:1.5s ease-in-out infinite lightbox-load}.lightbox-spinner{color:#fff;font-size:10px;margin:0 auto 20px;position:relative;text-indent:-9999em;transform:translateZ(0);-webkit-animation-delay:-.16s;animation-delay:-.16s}.lightbox-spinner:after,.lightbox-spinner:before{content:"";position:absolute;top:0}.lightbox-spinner:before{left:-32px;-webkit-animation-delay:-.32s;animation-delay:-.32s}.lightbox-spinner:after{left:32px}@-webkit-keyframes lightbox-load{0%,100%,80%{box-shadow:0 2.5em 0 -1.3em}40%{box-shadow:0 2.5em 0 0}}@keyframes lightbox-load{0%,100%,80%{box-shadow:0 10px 0 -1.3em}40%{box-shadow:0 10px 0 0}}:host.lightbox-shown{opacity:1}:host.lightbox-shown .lightbox-close,:host.lightbox-shown .lightbox-next,:host.lightbox-shown .lightbox-prev{opacity:.5;transition-delay:.1s}:host.lightbox-shown .lightbox-close:hover,:host.lightbox-shown .lightbox-next:hover,:host.lightbox-shown .lightbox-prev:hover{opacity:1;transition-delay:0}:host.lightbox-shown .lightbox-counter{opacity:1}:host.lightbox-hide-controls .lightbox-close,:host.lightbox-hide-controls .lightbox-next,:host.lightbox-hide-controls .lightbox-prev{opacity:0}:host.lightbox-simple-mode .lightbox-container{cursor:zoom-out}:host:not(.lightbox-animation) .lightbox-container{display:flex;align-items:center;justify-content:center;top:0;left:0;height:100%}:host.lightbox-light{color:#000;text-shadow:none}:host{position:fixed;top:0;left:0;width:100%;height:100%;color:#fff;text-shadow:0 0 1px rgba(0,0,0,.65);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:10000}:host img{opacity:1;max-width:100%;max-height:100%}:host img.lightbox-curr-image.lightbox-show{opacity:1}:host img.lightbox-curr-image{opacity:0;z-index:10}:host .lightbox-container.lightbox-hide{display:none}:host .lightbox-container{position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transform-origin:top left}:host .lightbox-preloader{background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;width:100%;height:100%;position:absolute}:host .lightbox-spinner{position:absolute;top:51%;left:50%;margin-top:-15px;margin-left:-5px}:host .lightbox-preloader .lightbox-spinner{margin-top:-9px;margin-left:-3px}:host .lightbox-preloader .lightbox-spinner,:host .lightbox-preloader .lightbox-spinner:after,:host .lightbox-preloader .lightbox-spinner:before{width:6px;height:6px}:host .lightbox-preloader .lightbox-spinner:before{left:-21px}:host .lightbox-preloader .lightbox-spinner:after{left:21px}:host .lightbox-counter{text-align:left;position:absolute;left:22px;top:13px;font-size:14px;z-index:30}:host .lightbox-description{text-align:center;max-width:calc(100% - 200px);margin:0 auto;font-size:14px;line-height:43px;position:relative;z-index:50}:host .lightbox-error{color:rgba(255,255,255,.75);font-size:19px}:host .lightbox-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}:host .lightbox-next,:host .lightbox-prev{width:100px;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 .lightbox-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 .lightbox-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}:host .lightbox-close,:host .lightbox-counter,:host .lightbox-next,:host .lightbox-prev{opacity:0;transition:opacity 150ms cubic-bezier(.475,.105,.445,.945)}']})],i)}(h),p={loop:!1,index:0,counter:!1,imageMaxHeight:"100%",imageMaxWidth:"100%",animationDuration:350,animationMode:"zoom-preloader",animationTimingFunction:"cubic-bezier(0.475, 0.105, 0.445, 0.945)",closeButtonText:"Close",counterSeparator:"/",disable:!1,simpleMode:!1,backgroundColor:"black",backgroundOpacity:1,hideThumbnail:!0,gestureEnable:!1},g=function(){function t(t,e,i){this.componentFactoryResolver=t,this.appRef=e,this.injector=i}return t.prototype.appendComponentToBody=function(t,e){var i=this,o=this.componentFactoryResolver.resolveComponentFactory(t).create(this.injector);o.instance.lightboxData=e,this.appRef.attachView(o.hostView);var n=o.hostView.rootNodes[0];document.body.appendChild(n),o.instance.events.subscribe((function(t){"close"===t.type&&(i.appRef.detachView(o.hostView),o.destroy())}))},t.prototype.open=function(t){t.properties=this.applyPropertieDefaults(p,t.properties);var e=this.getLightboxComponent();this.appendComponentToBody(e,t)},t.prototype.getLightboxComponent=function(){return l},t.prototype.applyPropertieDefaults=function(t,e){return e||(e={}),e.index||(e.index=0),this._defaultProperties=Object.assign({},t),Object.assign(this._defaultProperties,e)},t.ctorParameters=function(){return[{type:e.ComponentFactoryResolver},{type:e.ApplicationRef},{type:e.Injector}]},t=r([e.Injectable()],t)}(),c=function(){function t(t,i,o){var n=this;this.lightbox=t,this.eventService=i,this.elementRef=o,this.properties={},this.events=new e.EventEmitter,this.hostLightboxGroup=!0,this.globalEventsSubscription=this.eventService.emitter.subscribe((function(t){n.handleGlobalEvents(t)}))}return Object.defineProperty(t.prototype,"hostSimpleMode",{get:function(){return this.simpleMode},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"isGroupImage",{get:function(){return this.elementRef.nativeElement.closest(".lightbox-group")},enumerable:!0,configurable:!0}),t.prototype.onClick=function(t){this.disable||(this.isGroupImage?this.eventService.emitChangeEvent({type:"thumbnail:click",elementRef:this.elementRef,properties:this.properties}):(this.image=this.getImage(),this.lightbox.open({images:[this.image],properties:this.properties,index:0})))},t.prototype.ngOnChanges=function(t){this.properties=Object.assign({},this.properties,this.getProperties(t))},t.prototype.handleGlobalEvents=function(t){this.events.emit(t)},t.prototype.getImage=function(){var t={},e=this.elementRef.nativeElement;return this.fullImage&&(t.fullImage=this.fullImage),t.thumbnailImage={path:e.src,height:e.naturalHeight,width:e.naturalWidth},t.nativeElement=e,t},t.prototype.getProperties=function(t){var e={};for(var i in t)"fullImage"!==i&&(e[i]=t[i].currentValue);return e},t.ctorParameters=function(){return[{type:g},{type:a},{type:e.ElementRef}]},r([e.Input()],t.prototype,"fullImage",void 0),r([e.Input()],t.prototype,"properties",void 0),r([e.Input()],t.prototype,"loop",void 0),r([e.Input()],t.prototype,"backgroundOpacity",void 0),r([e.Input()],t.prototype,"counter",void 0),r([e.Input()],t.prototype,"imageMaxHeight",void 0),r([e.Input()],t.prototype,"imageMaxWidth",void 0),r([e.Input()],t.prototype,"animationDuration",void 0),r([e.Input()],t.prototype,"animationMode",void 0),r([e.Input()],t.prototype,"animationTimingFunction",void 0),r([e.Input()],t.prototype,"closeButtonText",void 0),r([e.Input()],t.prototype,"counterSeparator",void 0),r([e.Input()],t.prototype,"disable",void 0),r([e.Input()],t.prototype,"simpleMode",void 0),r([e.Input()],t.prototype,"backgroundColor",void 0),r([e.Input()],t.prototype,"hideThumbnail",void 0),r([e.Input()],t.prototype,"gestureEnable",void 0),r([e.Output()],t.prototype,"events",void 0),r([e.HostBinding("class.lightbox-single")],t.prototype,"hostLightboxGroup",void 0),r([e.HostBinding("class.lightbox-simple-mode")],t.prototype,"hostSimpleMode",null),r([e.HostListener("click",["$event"])],t.prototype,"onClick",null),t=r([e.Directive({selector:"[lightbox]"})],t)}(),m=function(){function t(t,e){var i=this;this.eventService=t,this.lightbox=e,this.thumbnailImages=[],this.images=[],this.properties={},this.hostLightboxGroup=!0,this.globalEventsSubscription=this.eventService.emitter.subscribe((function(t){i.handleGlobalEvents(t)}))}return Object.defineProperty(t.prototype,"lightboxDirectiveList",{get:function(){return this._lightboxDirectiveList?this._lightboxDirectiveList.toArray():[]},enumerable:!0,configurable:!0}),t.prototype.handleGlobalEvents=function(t){if("thumbnail:click"===t.type){if(this.thumbnailImageElement=t.elementRef.nativeElement,this.thumbnailImages=this.getThumbnailImages(),this.thumbnailImageIndex=this.getThumbnailImageIndex(this.thumbnailImageElement),null==this.thumbnailImageIndex)return;this.thumbnailLightboxDirective=this.getThumbnailLightboxDirective(this.thumbnailImageIndex),this.images=this.getImages(),this.properties=t.properties,this.properties.index=this.thumbnailImageIndex,this.lightbox.open({images:this.images,properties:this.properties})}},t.prototype.getThumbnailImageIndex=function(t){for(var e=this.thumbnailImages,i=0;i<e.length;i++)if(t===e[i])return i},t.prototype.getThumbnailLightboxDirective=function(t){return this.lightboxDirectiveList[t]},t.prototype.getThumbnailImages=function(){var t=[];return this.lightboxDirectiveList.forEach((function(e){t.push(e.elementRef.nativeElement)})),t},t.prototype.getImages=function(){var t=[];return this.lightboxDirectiveList.forEach((function(e){var i={},o=e.elementRef.nativeElement;e.fullImage&&(i.fullImage=e.fullImage),i.thumbnailImage={path:o.src,height:o.naturalHeight,width:o.naturalWidth},i.nativeElement=o,t.push(i)})),t},t.ctorParameters=function(){return[{type:a},{type:g}]},r([e.HostBinding("class.lightbox-group")],t.prototype,"hostLightboxGroup",void 0),r([e.ContentChildren(c,{descendants:!0})],t.prototype,"_lightboxDirectiveList",void 0),t=r([e.Directive({selector:"[lightbox-group]"})],t)}(),u=function(){function t(){}return t=r([e.NgModule({declarations:[h,l,c,m],imports:[i.CommonModule],exports:[c,m],providers:[g,a],bootstrap:[],entryComponents:[l]})],t)}();t.CrystalLightboxModule=u,t.EventService=a,t.LightboxDirective=c,t.LightboxGroupDirective=m,t.ɵa=h,t.ɵb=l,t.ɵc=g,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=crystalui-angular-lightbox.umd.min.js.map