Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More

ng-gallery

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ng-gallery - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

@@ -1,2 +0,2 @@

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/cdk/keycodes"),require("@angular/cdk/overlay"),require("@angular/cdk/portal"),require("rxjs/BehaviorSubject"),require("@angular/animations"),require("rxjs/operators"),require("@angular/common"),require("rxjs/observable/of"),require("rxjs/observable/timer"),require("rxjs/observable/from"),require("rxjs/Subject"),require("rxjs/observable/zip"),require("rxjs/observable/fromEvent")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/cdk/keycodes","@angular/cdk/overlay","@angular/cdk/portal","rxjs/BehaviorSubject","@angular/animations","rxjs/operators","@angular/common","rxjs/observable/of","rxjs/observable/timer","rxjs/observable/from","rxjs/Subject","rxjs/observable/zip","rxjs/observable/fromEvent"],t):t(e["ng-gallery"]={},e.ng.core,e.ng.cdk.keycodes,e.ng.cdk.overlay,e.ng.cdk.portal,e.Rx,e.ng.animations,e.Rx.Observable.prototype,e.ng.common,e.Rx.Observable,e.Rx.Observable,e.Rx.Observable,e.Rx,e.Rx.Observable,e.Rx.Observable)}(this,function(e,t,n,i,r,o,a,l,s,c,p,f,d,g,y){"use strict";function u(e){return e&&"object"==typeof e&&!Array.isArray(e)}function b(e){for(var t=[],n=1;n<arguments.length;n++)t[n-1]=arguments[n];if(!t.length)return e;var i=t.shift();if(u(e)&&u(i))for(var r in i)u(i[r])?(e[r]||Object.assign(e,(o={},o[r]={},o)),b(e[r],i[r])):Object.assign(e,(a={},a[r]=i[r],a));return b.apply(void 0,[e].concat(t));var o,a}function m(t,n){return new e.Gallery(t,n)}var h=new t.InjectionToken("config");!function(e){e.INIT="init",e.LOAD="load",e.NEXT="next",e.PREV="prev",e.OTHER="other",e.PLAYING="playing",e.STOPPED="stopped",e.OPENED="opened",e.CLOSED="closed",e.LOADING_START="loading_start",e.LOADING_END="loading_end",e.BULLET_CLICK="bullet_click",e.THUMB_CLICK="thumb_click"}(e.GalleryAction||(e.GalleryAction={}));var x=this&&this.__decorate||function(e,t,n,i){var r,o=arguments.length,a=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,i);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(a=(o<3?r(a):o>3?r(t,n,a):r(t,n))||a);return o>3&&a&&Object.defineProperty(t,n,a),a},v=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};e.ɵn=function(){function e(){this.keyDown=new t.EventEmitter}return e.prototype.onKeyDown=function(e){this.keyDown.next(e)},e}(),x([t.Output(),v("design:type",Object)],e.ɵn.prototype,"keyDown",void 0),x([t.HostListener("document:keydown",["$event"]),v("design:type",Function),v("design:paramtypes",[KeyboardEvent]),v("design:returntype",void 0)],e.ɵn.prototype,"onKeyDown",null),e.ɵn=x([t.Component({selector:"gallery-lightbox",template:'\n <gallery [@slideGalleryIn] [isOverlay]="true"></gallery>',styles:["\n .g-backdrop {\n background-color: rgba(0, 0, 0, 0.8); }\n\n .g-overlay {\n margin: auto; }\n\n gallery-lightbox {\n position: relative;\n display: block;\n max-width: 94vh;\n max-height: 80vh; }\n gallery-lightbox gallery {\n border-radius: 1.32em;\n overflow: hidden;\n margin: 0;\n display: block;\n width: 100%;\n height: 100%;\n -webkit-box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);\n box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); }\n\n .cdk-overlay-container, .cdk-global-overlay-wrapper {\n pointer-events: none;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%; }\n\n .cdk-overlay-container {\n position: fixed;\n z-index: 1000; }\n\n .cdk-global-overlay-wrapper {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n position: absolute;\n z-index: 1000; }\n\n .cdk-overlay-pane {\n position: absolute;\n pointer-events: auto;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n z-index: 1000; }\n\n .cdk-overlay-backdrop {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 1000;\n pointer-events: auto;\n -webkit-tap-highlight-color: transparent;\n -webkit-transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n opacity: 0; }\n .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {\n opacity: 0.48; }\n\n .cdk-overlay-dark-backdrop {\n background: rgba(0, 0, 0, 0.6); }\n\n .cdk-overlay-transparent-backdrop {\n background: none; }\n\n .cdk-global-scrollblock {\n position: fixed;\n width: 100%;\n overflow-y: scroll; }\n "],changeDetection:t.ChangeDetectionStrategy.OnPush,encapsulation:t.ViewEncapsulation.None,animations:[a.trigger("slideGalleryIn",[a.state("void",a.style({transform:"translateY(25%) scale(0.9)",opacity:0})),a.state("enter",a.style({transform:"translateY(0%) scale(1)",opacity:1})),a.state("exit",a.style({transform:"translateY(25%)",opacity:0})),a.transition("* => *",a.animate("400ms cubic-bezier(0.25, 0.8, 0.25, 1)"))])]})],e.ɵn);var w={gestures:!0,style:{width:"600px",height:"460px",background:"#121519"},navigation:{},loader:{icon:"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' stroke='%23fff'%3E%3Cg fill='none' fill-rule='evenodd' stroke-width='2'%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='0s' dur='1.8s' values='1; 20' calcMode='spline' keyTimes='0; 1' keySplines='0.165, 0.84, 0.44, 1' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-opacity' begin='0s' dur='1.8s' values='1; 0' calcMode='spline' keyTimes='0; 1' keySplines='0.3, 0.61, 0.355, 1' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='-0.9s' dur='1.8s' values='1; 20' calcMode='spline' keyTimes='0; 1' keySplines='0.165, 0.84, 0.44, 1' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-opacity' begin='-0.9s' dur='1.8s' values='1; 0' calcMode='spline' keyTimes='0; 1' keySplines='0.3, 0.61, 0.355, 1' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"},description:{position:"bottom",overlay:!1,text:!0,counter:!0},player:{autoplay:!1,interval:3e3,progress:!1,position:"bottom"},thumbnails:{width:120,height:90,position:"top"},lightbox:{backdropClass:"g-backdrop",panelClass:"g-overlay",hasBackdrop:!0}},k=this&&this.__decorate||function(e,t,n,i){var r,o=arguments.length,a=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,i);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(a=(o<3?r(a):o>3?r(t,n,a):r(t,n))||a);return o>3&&a&&Object.defineProperty(t,n,a),a},I=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},j=this&&this.__param||function(e,t){return function(n,i){t(n,i,e)}};e.Gallery=function(){function t(t,n){var i=this;this.overlay=n,this._initialState={action:e.GalleryAction.INIT,currIndex:0,hasNext:!1,hasPrev:!1,play:!1,loading:!1},this.state=this._initialState,this.state$=new o.BehaviorSubject(this._initialState),this.config=w,this.config$=new o.BehaviorSubject(this.config),setTimeout(function(){return i.setConfig(t)})}return t.prototype.handleKeydown=function(e){switch(e.keyCode){case n.LEFT_ARROW:this.prev();break;case n.RIGHT_ARROW:case n.ENTER:this.next();break;case n.ESCAPE:this.close();break;default:return}},t.prototype.setState=function(e){this.state=Object.assign({},this.state,e),this.state$.next(this.state)},t.prototype.setConfig=function(e){this.config=b(w,e),this.config$.next(this.config),this._overlayConfig={backdropClass:this.config.lightbox.backdropClass,panelClass:this.config.lightbox.panelClass,hasBackdrop:this.config.lightbox.hasBackdrop,positionStrategy:this.overlay.position().global().centerHorizontally().centerVertically(),scrollStrategy:this.overlay.scrollStrategies.block()}},t.prototype.load=function(t){this.setState({action:e.GalleryAction.LOAD,items:t,hasNext:t.length>1})},t.prototype.set=function(t,n){this.setState({action:n||e.GalleryAction.OTHER,currIndex:t,hasNext:t<this.state.items.length-1,hasPrev:t>0,loading:!0})},t.prototype.next=function(){this.set(this.state.hasNext?this.state.currIndex+1:0,e.GalleryAction.NEXT)},t.prototype.prev=function(){this.set(this.state.hasPrev?this.state.currIndex-1:this.state.items.length-1,e.GalleryAction.PREV)},t.prototype.reset=function(){this.setState(this._initialState)},t.prototype.play=function(){this.setState({action:e.GalleryAction.PLAYING,play:!0})},t.prototype.stop=function(){this.setState({action:e.GalleryAction.STOPPED,play:!1})},t.prototype.open=function(t){var n=this;void 0===t&&(t=0),this.set(t,e.GalleryAction.OPENED),this._overlayRef=this.overlay.create(this._overlayConfig);var i=new r.ComponentPortal(e.ɵn),o=this._overlayRef.attach(i);this._overlayRef.backdropClick().subscribe(function(){return n.close()}),o.instance.keyDown.subscribe(function(e){return n.handleKeydown(e)})},t.prototype.close=function(){this.setState({action:e.GalleryAction.CLOSED,play:!1}),this._overlayRef.hasAttached()&&this._overlayRef.dispose()},t.prototype.initialized=function(){return this.state$.pipe(l.filter(function(t){return t.action===e.GalleryAction.INIT}))},t.prototype.loaded=function(){return this.state$.pipe(l.filter(function(t){return t.action===e.GalleryAction.LOAD}))},t.prototype.imageChanged=function(){return this.state$.pipe(l.filter(function(t){return t.action===(e.GalleryAction.NEXT||e.GalleryAction.PREV||e.GalleryAction.THUMB_CLICK||e.GalleryAction.BULLET_CLICK)}))},t.prototype.imageLoading=function(){return this.state$.pipe(l.filter(function(t){return t.action===(e.GalleryAction.LOADING_START||e.GalleryAction.LOADING_END)}))},t.prototype.navigationClick=function(){return this.state$.pipe(l.filter(function(t){return t.action===(e.GalleryAction.NEXT||e.GalleryAction.PREV)}))},t.prototype.thumbnailClick=function(){return this.state$.pipe(l.filter(function(t){return t.action===e.GalleryAction.THUMB_CLICK}))},t.prototype.bulletClick=function(){return this.state$.pipe(l.filter(function(t){return t.action===e.GalleryAction.BULLET_CLICK}))},t.prototype.opened=function(){return this.state$.pipe(l.filter(function(t){return t.action===e.GalleryAction.OPENED}))},t.prototype.closed=function(){return this.state$.pipe(l.filter(function(t){return t.action===e.GalleryAction.CLOSED}))},t.prototype.playing=function(){return this.state$.pipe(l.filter(function(t){return t.action===e.GalleryAction.PLAYING}))},t.prototype.stopped=function(){return this.state$.pipe(l.filter(function(t){return t.action===e.GalleryAction.STOPPED}))},t}(),e.Gallery=k([t.Injectable(),j(0,t.Inject(h)),I("design:paramtypes",[Object,i.Overlay])],e.Gallery);var O=this&&this.__decorate||function(e,t,n,i){var r,o=arguments.length,a=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,i);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(a=(o<3?r(a):o>3?r(t,n,a):r(t,n))||a);return o>3&&a&&Object.defineProperty(t,n,a),a},R=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};e.ɵd=function(){function e(e){this.gallery=e}return e.prototype.ngOnDestroy=function(){this.isOverlay?this.gallery.close():this.gallery.reset()},e}(),O([t.Input(),R("design:type",Boolean)],e.ɵd.prototype,"isOverlay",void 0),e.ɵd=O([t.Component({selector:"gallery",template:'\n <gallery-main [state]="gallery.state$ | async"\n [config]="gallery.config$ | async"\n [isOverlay]="isOverlay"></gallery-main>\n ',styles:["\n gallery {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n height: 100%;\n margin-bottom: 2em;\n z-index: 1;\n overflow: hidden; }\n gallery * {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n overflow: hidden; }\n\n .-bottom {\n bottom: 0; }\n "],changeDetection:t.ChangeDetectionStrategy.OnPush,encapsulation:t.ViewEncapsulation.None}),R("design:paramtypes",[e.Gallery])],e.ɵd);var C=this&&this.__decorate||function(e,t,n,i){var r,o=arguments.length,a=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,i);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(a=(o<3?r(a):o>3?r(t,n,a):r(t,n))||a);return o>3&&a&&Object.defineProperty(t,n,a),a},S=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};e.ɵe=function(){return function(e){this.gallery=e}}(),C([t.Input(),S("design:type",Object)],e.ɵe.prototype,"state",void 0),C([t.Input(),S("design:type",Object)],e.ɵe.prototype,"config",void 0),e.ɵe=C([t.Component({selector:"gallery-nav",template:'\n <div *ngIf="state.items.length" class="g-nav">\n\n <div class="g-nav-prev {{config.nextClass}}"\n (tapClick)="gallery.prev()">\n\n <i class="prev-arrow-ico"></i>\n </div>\n\n <div class="g-nav-next {{config.prevClass}}"\n (tapClick)="gallery.next()">\n\n <i class="next-arrow-ico"></i>\n </div>\n\n </div>\n ',styles:["\n gallery-nav {\n z-index: 15;\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex; }\n @media (max-width: 480px) {\n gallery-nav {\n display: none; } }\n\n .g-nav {\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n height: 100%;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-direction: row;\n flex-direction: row;\n opacity: 0;\n -webkit-transition: all linear 0.4s;\n transition: all linear 0.4s;\n cursor: pointer; }\n .g-nav:hover {\n opacity: 1; }\n .g-nav-next, .g-nav-prev {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n height: 100%;\n opacity: 0.7;\n position: relative;\n overflow: hidden;\n -webkit-transition: all 0.2s ease;\n transition: all 0.2s ease;\n z-index: 0; }\n .g-nav-next:hover, .g-nav-prev:hover {\n opacity: 1; }\n .g-nav-next {\n padding-right: 0.7em;\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end; }\n .g-nav-prev {\n padding-left: 0.7em;\n width: 20%; }\n\n .next-arrow-ico, .prev-arrow-ico {\n width: 45px;\n height: 80px; }\n\n .next-arrow-ico {\n background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PiAgPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQxNC40OTYgNDE0LjQ5NiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDE0LjQ5NiA0MTQuNDk2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+IDxkZWZzIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGZpbHRlciBpZD0iZHJvcHNoYWRvdyIgPiAgPGZlR2F1c3NpYW5CbHVyIGluPSJTb3VyY2VBbHBoYSIgc3RkRGV2aWF0aW9uPSIzIi8+ICAgPGZlT2Zmc2V0IGR4PSIyIiBkeT0iMiIgcmVzdWx0PSJvZmZzZXRibHVyIi8+ICAgPGZlTWVyZ2U+IDxmZU1lcmdlTm9kZS8+PGZlTWVyZ2VOb2RlIGluPSJTb3VyY2VHcmFwaGljIi8+ICAgPC9mZU1lcmdlPjwvZmlsdGVyPjwvZGVmcz4gIDxwb2x5Z29uIHN0eWxlPSJmaWxsOiNmZmY7IiBmaWx0ZXI9InVybCgjZHJvcHNoYWRvdykiIHBvaW50cz0iMTE4LjEyNiwwIDg5Ljc5NiwyOC4yMzggMjY4LjIyMywyMDcuMjQ4IDg5Ljc5NiwzODYuMjU4IDExOC4xMjYsNDE0LjQ5NiAzMjQuNywyMDcuMjQ4ICIvPjwvc3ZnPg==) no-repeat center center; }\n\n .prev-arrow-ico {\n background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0MTQuNDk2IDQxNC40OTYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQxNC40OTYgNDE0LjQ5NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxkZWZzIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGZpbHRlciBpZD0iZHJvcHNoYWRvdyIgPiAgPGZlR2F1c3NpYW5CbHVyIGluPSJTb3VyY2VBbHBoYSIgc3RkRGV2aWF0aW9uPSIzIi8+ICAgPGZlT2Zmc2V0IGR4PSIyIiBkeT0iMiIgcmVzdWx0PSJvZmZzZXRibHVyIi8+ICAgPGZlTWVyZ2U+IDxmZU1lcmdlTm9kZS8+PGZlTWVyZ2VOb2RlIGluPSJTb3VyY2VHcmFwaGljIi8+ICAgPC9mZU1lcmdlPjwvZmlsdGVyPjwvZGVmcz48cG9seWdvbiBzdHlsZT0iZmlsbDojZmZmOyIgZmlsdGVyPSJ1cmwoI2Ryb3BzaGFkb3cpIiBwb2ludHM9IjMyNC43LDI4LjIzOCAyOTYuMzcsMCA4OS43OTYsMjA3LjI0OCAyOTYuMzcsNDE0LjQ5NiAzMjQuNywzODYuMjU4IDE0Ni4yNzMsMjA3LjI0OCAiLz48L3N2Zz4=) no-repeat center center; }\n "],changeDetection:t.ChangeDetectionStrategy.OnPush,encapsulation:t.ViewEncapsulation.None}),S("design:paramtypes",[e.Gallery])],e.ɵe);var D=this&&this.__decorate||function(e,t,n,i){var r,o=arguments.length,a=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,i);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(a=(o<3?r(a):o>3?r(t,n,a):r(t,n))||a);return o>3&&a&&Object.defineProperty(t,n,a),a},P=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};e.ɵf=function(){function t(e,t,n){var i=this;this.gallery=e,this.el=t,this.renderer=n,this.state$=this.gallery.state$.pipe(l.switchMap(function(e){return c.of({position:i.translateThumbnails(e.currIndex),items:i.thumbnailsFactory(e)})}))}return t.prototype.translateThumbnails=function(e){var t="translate3d("+-(e*this.config.width+this.config.width/2)+"px, 0, 0)";return{mozTransform:t,oTransform:t,msTransform:t,webkitTransform:t,transform:t}},t.prototype.thumbnailsFactory=function(e){return e.items.map(function(t,n){return{index:n,activeClass:n===e.currIndex?" g-thumb-current":"",thumbnail:"url("+t.thumbnail+")"}})},t.prototype.setCurrentItem=function(t){this.gallery.set(t,e.GalleryAction.THUMB_CLICK)},t.prototype.ngOnInit=function(){var e=this,t="top"===this.config.position?0:2;if(this.renderer.setStyle(this.el.nativeElement,"-webkit-order",t),this.renderer.setStyle(this.el.nativeElement,"order",t),this.gallery.config.gestures){if("undefined"==typeof Hammer)throw Error("[NgGallery]: HammerJS is undefined, make sure it is loaded");var n=this.el.nativeElement,i=new Hammer(n);i.on("panstart",function(){e.renderer.removeClass(n,"-reset")}),i.on("panend",function(){e.renderer.addClass(n,"-reset")}),i.on("pan",function(t){var i="translate3d("+t.deltaX+"px, 0px, 0px)";e.renderer.setStyle(n,"mozTransform",i),e.renderer.setStyle(n,"oTransform",i),e.renderer.setStyle(n,"msTransform",i),e.renderer.setStyle(n,"webkitTransform",i),e.renderer.setStyle(n,"transform",i)}),i.on("swipeleft",function(){e.gallery.next()}),i.on("swiperight",function(){e.gallery.prev()})}},t}(),D([t.Input(),P("design:type",Object)],e.ɵf.prototype,"config",void 0),e.ɵf=D([t.Component({selector:"gallery-thumb",template:'\n <div *ngIf="state$ | async; let state"\n class="g-thumb-container {{config.className}}"\n [style.height.px]="config.height">\n\n <div class="g-thumbs" [ngStyle]="state.position">\n\n <div *ngFor="let item of state.items"\n class="g-thumb{{item.activeClass}}"\n [style.width.px]="config.width"\n [style.height.px]="config.height">\n\n <div class="g-thumb-image"\n [style.backgroundImage]="item.thumbnail"\n (tapClick)="setCurrentItem(item.index)">\n </div>\n </div>\n\n </div>\n\n </div>\n ',styles:["\n gallery-thumb {\n display: block;\n z-index: 1;\n overflow: unset; }\n\n .g-thumb-container {\n position: relative;\n z-index: 206;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n overflow: unset;\n margin: 20px 0; }\n\n .g-thumbs {\n position: absolute;\n top: 0;\n left: 50%;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-transition: -webkit-transform linear 300ms;\n transition: -webkit-transform linear 300ms;\n transition: transform linear 300ms;\n transition: transform linear 300ms, -webkit-transform linear 300ms;\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0); }\n\n .g-thumb {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n opacity: 0.5;\n padding: 6px;\n -webkit-transition: all ease 500ms;\n transition: all ease 500ms; }\n\n .g-thumb-current {\n opacity: 1;\n padding: 2px; }\n\n .g-thumb-image {\n cursor: pointer;\n width: 100%;\n height: 100%;\n border-radius: 3px;\n background-position: center center;\n background-size: cover;\n -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);\n box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);\n -webkit-transition: margin ease 600ms;\n transition: margin ease 600ms; }\n "],changeDetection:t.ChangeDetectionStrategy.OnPush,encapsulation:t.ViewEncapsulation.None}),P("design:paramtypes",[e.Gallery,t.ElementRef,t.Renderer2])],e.ɵf);var G=this&&this.__decorate||function(e,t,n,i){var r,o=arguments.length,a=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,i);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(a=(o<3?r(a):o>3?r(t,n,a):r(t,n))||a);return o>3&&a&&Object.defineProperty(t,n,a),a},N=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};e.ɵg=function(){function e(e,t){this.el=e,this.renderer=t}return e.prototype.ngOnInit=function(){var e=this.el.nativeElement;this.config.overlay&&this.renderer.setStyle(e,"position","absolute"),"top"===this.config.position?(this.renderer.setStyle(e,"-webkit-order",0),this.renderer.setStyle(e,"order",0),this.renderer.setStyle(e,"top",0),this.renderer.setStyle(e,"bottom","unset")):(this.renderer.setStyle(e,"-webkit-order",2),this.renderer.setStyle(e,"order",2),this.renderer.setStyle(e,"top","unset"),this.renderer.setStyle(e,"bottom",0))},e}(),G([t.Input(),N("design:type",Object)],e.ɵg.prototype,"state",void 0),G([t.Input(),N("design:type",Object)],e.ɵg.prototype,"config",void 0),e.ɵg=G([t.Component({selector:"gallery-text",template:'\n <div class="g-text-container {{config.className}}" [ngStyle]="config.style">\n\n <div *ngIf="config.text" class="g-text" [innerHtml]="state.items[state.currIndex]?.text"></div>\n\n <div *ngIf="config.counter" class="g-counter">\n {{(state.currIndex + 1) + \'/\' + state.items.length}}\n </div>\n </div>\n ',styles:["\n gallery-text {\n position: relative;\n left: 0;\n right: 0;\n z-index: 25; }\n\n .g-text-container {\n padding: 1em 2em;\n color: #ccc;\n font-size: 13px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-direction: row;\n flex-direction: row;\n -ms-flex-line-pack: center;\n align-content: center;\n background-clip: padding-box;\n -webkit-font-smoothing: antialiased; }\n\n .g-text {\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1; }\n .g-text a {\n color: #00b0e8; }\n "],changeDetection:t.ChangeDetectionStrategy.OnPush,encapsulation:t.ViewEncapsulation.None}),N("design:paramtypes",[t.ElementRef,t.Renderer2])],e.ɵg);var z=this&&this.__decorate||function(e,t,n,i){var r,o=arguments.length,a=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,i);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(a=(o<3?r(a):o>3?r(t,n,a):r(t,n))||a);return o>3&&a&&Object.defineProperty(t,n,a),a},E=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};e.ɵh=function(){function t(e){this.gallery=e}return t.prototype.onLoad=function(t){this.gallery.setState({action:t?e.GalleryAction.LOADING_START:e.GalleryAction.LOADING_END,loading:t})},t}(),z([t.Input(),E("design:type",Object)],e.ɵh.prototype,"current",void 0),z([t.Input(),E("design:type",Object)],e.ɵh.prototype,"config",void 0),e.ɵh=z([t.Component({selector:"gallery-items",template:'\n <div *ngIf="current" class="g-item">\n <div class="g-img"\n [style.backgroundSize]="config.imageSize"\n [lazyImage]="current.src"\n (loading)="onLoad($event)"></div>\n </div>\n ',styles:["\n gallery-items {\n z-index: 3;\n -webkit-box-ordinal-group: 2;\n -ms-flex-order: 1;\n order: 1;\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-transform: translate3d(0px, 0px, 0px);\n transform: translate3d(0px, 0px, 0px); }\n\n .g-item {\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n opacity: 1;\n -webkit-transition: opacity ease-in 300ms;\n transition: opacity ease-in 300ms; }\n .g-item .g-img {\n -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);\n box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);\n background-position: center center;\n background-size: contain;\n background-repeat: no-repeat;\n pointer-events: none;\n display: block;\n width: 100%;\n height: 100%; }\n "],changeDetection:t.ChangeDetectionStrategy.OnPush,encapsulation:t.ViewEncapsulation.None}),E("design:paramtypes",[e.Gallery])],e.ɵh);var Z=this&&this.__decorate||function(e,t,n,i){var r,o=arguments.length,a=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,i);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(a=(o<3?r(a):o>3?r(t,n,a):r(t,n))||a);return o>3&&a&&Object.defineProperty(t,n,a),a},_=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};e.ɵi=function(){function e(e,t){this.gallery=e,this.renderer=t}return e.prototype.ngOnInit=function(){this.config.icon&&this.renderer.setProperty(this.icon.nativeElement,"src",this.config.icon),this.config.className&&this.renderer.addClass(this.icon.nativeElement,this.config.className)},e}(),Z([t.Input(),_("design:type",Object)],e.ɵi.prototype,"config",void 0),Z([t.ViewChild("icon"),_("design:type",t.ElementRef)],e.ɵi.prototype,"icon",void 0),e.ɵi=Z([t.Component({selector:"gallery-loader",template:'\n <div class="g-loader">\n <img #icon class="g-loader-img">\n </div>\n ',styles:["\n gallery-loader {\n z-index: 50; }\n\n .g-loader {\n z-index: 50;\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n top: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n padding: 1em;\n -webkit-animation: fadeIn 1s;\n animation: fadeIn 1s; }\n\n .g-loader-img {\n width: 50px; }\n\n @-webkit-keyframes fadeIn {\n from {\n opacity: 0; }\n to {\n opacity: 1; } }\n\n @keyframes fadeIn {\n from {\n opacity: 0; }\n to {\n opacity: 1; } }\n "],changeDetection:t.ChangeDetectionStrategy.OnPush,encapsulation:t.ViewEncapsulation.None}),_("design:paramtypes",[e.Gallery,t.Renderer2])],e.ɵi);var T=this&&this.__decorate||function(e,t,n,i){var r,o=arguments.length,a=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,i);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(a=(o<3?r(a):o>3?r(t,n,a):r(t,n))||a);return o>3&&a&&Object.defineProperty(t,n,a),a},A=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};e.ɵj=function(){function t(e){this.gallery=e}return t.prototype.onTapClick=function(t){this.gallery.set(t,e.GalleryAction.BULLET_CLICK)},t}(),T([t.Input(),A("design:type",Object)],e.ɵj.prototype,"state",void 0),T([t.Input(),A("design:type",Object)],e.ɵj.prototype,"config",void 0),e.ɵj=T([t.Component({selector:"gallery-bullets",template:'\n <div class="g-bullets-container {{config.className}}"\n [class.-bottom]="config.position === \'bottom\'">\n <div class="g-bullet"\n *ngFor="let item of state.items; let i = index"\n [class.g-bullet-curr]="i === state.currIndex"\n (tapClick)="onTapClick(i)">\n\n <div class="g-bullet-inner" [ngStyle]="config.style"></div>\n\n </div>\n </div>\n ',styles:["\n .g-bullets-container {\n position: absolute;\n width: 100%;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center; }\n\n .g-bullet {\n cursor: pointer;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n z-index: 20; }\n\n .g-bullet-inner {\n margin: 1em;\n height: 4px;\n width: 4px;\n background-color: rgba(255, 255, 255, 0.5);\n border-radius: 2px;\n -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);\n box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);\n -webkit-transition: all ease 0.2s;\n transition: all ease 0.2s; }\n\n .g-bullet-curr .g-bullet-inner {\n -webkit-transform: scale(2);\n transform: scale(2);\n background-color: white; }\n "],changeDetection:t.ChangeDetectionStrategy.OnPush,encapsulation:t.ViewEncapsulation.None}),A("design:paramtypes",[e.Gallery])],e.ɵj);var M=this&&this.__decorate||function(e,t,n,i){var r,o=arguments.length,a=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,i);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(a=(o<3?r(a):o>3?r(t,n,a):r(t,n))||a);return o>3&&a&&Object.defineProperty(t,n,a),a},L=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};e.ɵk=function(){function e(e){this.gallery=e}return e.prototype.ngOnInit=function(){var e=this,t=this.config.interval/10,n=l.filter(function(e){return e.play&&!e.loading}),i=l.map(function(n){return{height:e.config.thickness+"px",backgroundColor:e.config.color,width:n+"%",transition:"width linear "+(n?t:0)+"ms"}}),r=l.map(function(n){return n*t*100/e.config.interval}),o=l.switchMap(function(){return p.timer(0,t).pipe(r,l.takeWhile(function(t){var n=t<=100;return n||e.gallery.next(),n&&e.gallery.state.play}),i)});this.progress$=this.gallery.state$.pipe(n,o),this.config.autoplay&&this.gallery.play()},e}(),M([t.Input(),L("design:type",Object)],e.ɵk.prototype,"config",void 0),e.ɵk=M([t.Component({selector:"gallery-player",template:'\n <div *ngIf="progress$ | async; let style"\n class="g-progress-bar"\n [class.-bottom]="config.position === \'bottom\'">\n\n <div *ngIf="config.progress"\n class="g-progress"\n [ngStyle]="style"></div>\n </div>\n ',styles:["\n .g-progress-bar {\n position: absolute;\n z-index: 70;\n left: 0;\n right: 0;\n overflow: unset;\n width: 100%; }\n\n .g-progress {\n width: 0;\n height: 2px;\n z-index: 60;\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n background-color: rgba(255, 255, 255, 0.8); }\n "],changeDetection:t.ChangeDetectionStrategy.OnPush,encapsulation:t.ViewEncapsulation.None}),L("design:paramtypes",[e.Gallery])],e.ɵk);var H=this&&this.__decorate||function(e,t,n,i){var r,o=arguments.length,a=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,i);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(a=(o<3?r(a):o>3?r(t,n,a):r(t,n))||a);return o>3&&a&&Object.defineProperty(t,n,a),a},V=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};e.ɵl=function(){return function(e){this.gallery=e}}(),H([t.Input(),V("design:type",Object)],e.ɵl.prototype,"state",void 0),H([t.Input(),V("design:type",Object)],e.ɵl.prototype,"config",void 0),H([t.Input(),V("design:type",Boolean)],e.ɵl.prototype,"isOverlay",void 0),e.ɵl=H([t.Component({selector:"gallery-main",template:'\n <div *ngIf="state.items?.length" class="g-container {{config.className}}" [ngStyle]="config.style">\n\n <gallery-thumb *ngIf="config.thumbnails" [config]="config.thumbnails"></gallery-thumb>\n\n <div class="g-box">\n\n <gallery-slider [state]="state" [config]="config" [class.-invisible]="state.loading"></gallery-slider>\n\n <gallery-bullets *ngIf="config.bullets" [state]="state" [config]="config.bullets"></gallery-bullets>\n\n <gallery-loader *ngIf="state.loading" [config]="config.loader"></gallery-loader>\n\n </div>\n\n <gallery-player *ngIf="config.player" [config]="config.player"></gallery-player>\n\n <gallery-text *ngIf="config.description" [state]="state" [config]="config.description"></gallery-text>\n\n <div *ngIf="isOverlay" class="g-btn-close" (tapClick)="gallery.close()"></div>\n\n </div>\n ',styles:["\n gallery-main {\n position: relative;\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n width: 100%;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center; }\n\n .g-container {\n overflow: hidden;\n position: relative;\n max-height: 100%;\n max-width: 100%;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column; }\n @media (max-width: 480px) {\n .g-container {\n width: 100% !important;\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n -webkit-box-orient: vertical !important;\n -webkit-box-direction: normal !important;\n -ms-flex-direction: column !important;\n flex-direction: column !important; } }\n\n .g-box {\n height: 100%; }\n\n .g-box, gallery-slider {\n position: relative;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n -webkit-box-ordinal-group: 2;\n -ms-flex-order: 1;\n order: 1;\n height: 100%; }\n\n .-reset {\n -webkit-transition: all linear 0.3s;\n transition: all linear 0.3s;\n -webkit-transform: translate3d(0px, 0px, 0px) !important;\n transform: translate3d(0px, 0px, 0px) !important; }\n\n /** Hide slider on loading */\n .-invisible {\n -webkit-transition: none !important;\n transition: none !important; }\n .-invisible .g-item {\n opacity: 0;\n -webkit-transition: none;\n transition: none; }\n\n .g-btn-close {\n position: absolute;\n right: 0.73em;\n top: 0.73em;\n z-index: 60;\n cursor: pointer;\n width: 30px;\n height: 30px;\n -webkit-transition: all linear 0.2s;\n transition: all linear 0.2s;\n background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUwIDUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MCA1MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxjaXJjbGUgc3R5bGU9ImZpbGw6I0Q3NUE0QTsiIGN4PSIyNSIgY3k9IjI1IiByPSIyNSIvPjxwb2x5bGluZSBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojRkZGRkZGO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwOyIgcG9pbnRzPSIxNiwzNCAyNSwyNSAzNCwxNiAiLz48cG9seWxpbmUgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6I0ZGRkZGRjtzdHJva2Utd2lkdGg6MjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDsiIHBvaW50cz0iMTYsMTYgMjUsMjUgMzQsMzQgIi8+PC9zdmc+); }\n .g-btn-close:active {\n -webkit-transform: rotate(180deg) scale(0.9);\n transform: rotate(180deg) scale(0.9); }\n\n .empty {\n color: white;\n background-color: #121519;\n position: absolute;\n width: 100%;\n height: 100%;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center; }\n "],changeDetection:t.ChangeDetectionStrategy.OnPush,encapsulation:t.ViewEncapsulation.None}),V("design:paramtypes",[e.Gallery])],e.ɵl);var W=this&&this.__decorate||function(e,t,n,i){var r,o=arguments.length,a=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,i);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(a=(o<3?r(a):o>3?r(t,n,a):r(t,n))||a);return o>3&&a&&Object.defineProperty(t,n,a),a},B=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};e.ɵm=function(){function e(e,t,n){this.gallery=e,this.el=t,this.renderer=n,this.showNav=new o.BehaviorSubject(!0)}return e.prototype.ngOnInit=function(){var e=this;if(this.config.gestures){if("undefined"==typeof Hammer)throw Error("[NgGallery]: HammerJS is undefined, make sure it is loaded");var t=new Hammer(this.el.nativeElement);t.on("panstart",function(){e.renderer.removeClass(e.el.nativeElement,"-reset"),e.showNav.next(!1)}),t.on("panend",function(){e.renderer.addClass(e.el.nativeElement,"-reset"),e.showNav.next(!0)}),t.on("pan",function(t){var n="translate3d("+t.deltaX+"px, 0px, 0px)";e.renderer.setStyle(e.el.nativeElement,"mozTransform",n),e.renderer.setStyle(e.el.nativeElement,"oTransform",n),e.renderer.setStyle(e.el.nativeElement,"msTransform",n),e.renderer.setStyle(e.el.nativeElement,"webkitTransform",n),e.renderer.setStyle(e.el.nativeElement,"transform",n)}),t.on("swipeleft",function(){e.gallery.next()}),t.on("swiperight",function(){e.gallery.prev()})}},e}(),W([t.Input(),B("design:type",Object)],e.ɵm.prototype,"state",void 0),W([t.Input(),B("design:type",Object)],e.ɵm.prototype,"config",void 0),e.ɵm=W([t.Component({selector:"gallery-slider",template:'\n <gallery-items [current]="state.items[state.currIndex]"\n [config]="config">\n </gallery-items>\n\n <gallery-nav *ngIf="config.navigation && (showNav | async)"\n [state]="state"\n [config]="config.navigation">\n </gallery-nav>\n ',changeDetection:t.ChangeDetectionStrategy.OnPush}),B("design:paramtypes",[e.Gallery,t.ElementRef,t.Renderer2])],e.ɵm);var Y=this&&this.__decorate||function(e,t,n,i){var r,o=arguments.length,a=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,i);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(a=(o<3?r(a):o>3?r(t,n,a):r(t,n))||a);return o>3&&a&&Object.defineProperty(t,n,a),a},J=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};e.ɵo=function(){function e(e,t,n){this.el=e,this.renderer=t,this.gallery=n}return e.prototype.ngOnInit=function(){var e=this;this.observer=new MutationObserver(function(t){t.forEach(function(t){var n=[],i=e.gallerize?e.gallerize.split(" ").map(function(e){return"."+e}):"",r=e.el.nativeElement.querySelectorAll("img"+i);r&&f.from(r).pipe(l.map(function(t,i){e.renderer.setStyle(t,"cursor","pointer"),e.renderer.setProperty(t,"onclick",function(){return e.gallery.open(i)}),n.push({src:t.hasAttribute("src-full")?t.getAttribute("src-full"):t.src,thumbnail:t.src,text:t.alt})}),l.finalize(function(){return e.gallery.load(n)})).subscribe()})});this.observer.observe(this.el.nativeElement,{attributes:!0,childList:!0,characterData:!0})},e.prototype.ngOnDestroy=function(){this.observer.disconnect()},e}(),Y([t.Input(),J("design:type",String)],e.ɵo.prototype,"gallerize",void 0),e.ɵo=Y([t.Directive({selector:"[gallerize]"}),J("design:paramtypes",[t.ElementRef,t.Renderer2,e.Gallery])],e.ɵo);var U=this&&this.__decorate||function(e,t,n,i){var r,o=arguments.length,a=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,i);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(a=(o<3?r(a):o>3?r(t,n,a):r(t,n))||a);return o>3&&a&&Object.defineProperty(t,n,a),a},$=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};e.ɵp=function(){function e(e,n,i){this.gallery=e,this.el=n,this.renderer=i,this.tapClick=new t.EventEmitter}return e.prototype.ngOnInit=function(){this.setTapEvent()},e.prototype.setTapEvent=function(){var e=this;if(this.gallery.config.gestures){if("undefined"==typeof Hammer)throw Error("[NgGallery]: HammerJS is undefined, make sure it is loaded");if("undefined"!=typeof Hammer){new Hammer(this.el.nativeElement).on("tap",function(){e.tapClick.emit(null)})}}else this.renderer.setProperty(this.el.nativeElement,"onclick",function(){e.tapClick.emit(null)})},e}(),U([t.Output(),$("design:type",Object)],e.ɵp.prototype,"tapClick",void 0),e.ɵp=U([t.Directive({selector:"[tapClick]"}),$("design:paramtypes",[e.Gallery,t.ElementRef,t.Renderer2])],e.ɵp);var q=this&&this.__decorate||function(e,t,n,i){var r,o=arguments.length,a=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,i);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(a=(o<3?r(a):o>3?r(t,n,a):r(t,n))||a);return o>3&&a&&Object.defineProperty(t,n,a),a},F=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};e.ɵq=function(){function e(e,n){var i=this;this.el=e,this.renderer=n,this.lazyWorker$=new d.Subject,this.loading=new t.EventEmitter;var r=this.renderer.createElement("img");this.lazyWorker$.pipe(l.switchMap(function(e){i.loading.emit(!0),r.src=e;var t=y.fromEvent(r,"load").pipe(l.tap(function(){i.renderer.setStyle(i.el.nativeElement,"backgroundImage","url("+e+")"),i.loading.emit(!1)})),n=y.fromEvent(r,"error").pipe(l.tap(function(){i.loading.emit(!1)}));return g.zip(t,n)})).subscribe()}return Object.defineProperty(e.prototype,"lazyImage",{set:function(e){this.getImage(e)},enumerable:!0,configurable:!0}),e.prototype.getImage=function(e){this.lazyWorker$.next(e)},e.prototype.ngOnDestroy=function(){this.lazyWorker$.unsubscribe()},e}(),q([t.Input("lazyImage"),F("design:type",Object),F("design:paramtypes",[Object])],e.ɵq.prototype,"lazyImage",null),q([t.Output(),F("design:type",Object)],e.ɵq.prototype,"loading",void 0),e.ɵq=q([t.Directive({selector:"[lazyImage]"}),F("design:paramtypes",[t.ElementRef,t.Renderer2])],e.ɵq);var X=this&&this.__decorate||function(e,t,n,i){var r,o=arguments.length,a=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,i);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(a=(o<3?r(a):o>3?r(t,n,a):r(t,n))||a);return o>3&&a&&Object.defineProperty(t,n,a),a};e.GalleryModule=Q=function(){function t(){}return t.forRoot=function(t){return{ngModule:Q,providers:[{provide:h,useValue:t},{provide:e.Gallery,useFactory:m,deps:[h,i.Overlay]}]}},t}(),e.GalleryModule=Q=X([t.NgModule({imports:[s.CommonModule,i.OverlayModule],declarations:[e.ɵd,e.ɵe,e.ɵf,e.ɵg,e.ɵh,e.ɵi,e.ɵj,e.ɵk,e.ɵl,e.ɵm,e.ɵn,e.ɵo,e.ɵp,e.ɵq],exports:[e.ɵd,e.ɵo],entryComponents:[e.ɵn]})],e.GalleryModule);var Q;e.ɵa=m,e.ɵb=h,Object.defineProperty(e,"__esModule",{value:!0})});
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@angular/core"),require("@angular/cdk/keycodes"),require("@angular/cdk/overlay"),require("@angular/cdk/portal"),require("rxjs/BehaviorSubject"),require("@angular/animations"),require("rxjs/operators"),require("@angular/common"),require("rxjs/observable/of"),require("rxjs/observable/timer"),require("rxjs/observable/from"),require("rxjs/Subject"),require("rxjs/observable/zip"),require("rxjs/observable/fromEvent")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/cdk/keycodes","@angular/cdk/overlay","@angular/cdk/portal","rxjs/BehaviorSubject","@angular/animations","rxjs/operators","@angular/common","rxjs/observable/of","rxjs/observable/timer","rxjs/observable/from","rxjs/Subject","rxjs/observable/zip","rxjs/observable/fromEvent"],n):n(e["ng-gallery"]={},e.ng.core,e.ng.cdk.keycodes,e.ng.cdk.overlay,e.ng.cdk.portal,e.Rx,e.ng.animations,e.Rx.Observable.prototype,e.ng.common,e.Rx.Observable,e.Rx.Observable,e.Rx.Observable,e.Rx,e.Rx.Observable,e.Rx.Observable)}(this,function(e,n,t,i,r,o,a,s,l,c,p,g,d,u,y){"use strict";function m(e){return e&&"object"==typeof e&&!Array.isArray(e)}function b(e){for(var n=[],t=1;t<arguments.length;t++)n[t-1]=arguments[t];if(!n.length)return e;var i=n.shift();if(m(e)&&m(i))for(var r in i)m(i[r])?(e[r]||Object.assign(e,(o={},o[r]={},o)),b(e[r],i[r])):Object.assign(e,(a={},a[r]=i[r],a));return b.apply(void 0,[e].concat(n));var o,a}function f(e,n){return new k(e,n)}var x=new n.InjectionToken("config"),h={INIT:"init",LOAD:"load",NEXT:"next",PREV:"prev",OTHER:"other",PLAYING:"playing",STOPPED:"stopped",OPENED:"opened",CLOSED:"closed",LOADING_START:"loading_start",LOADING_END:"loading_end",BULLET_CLICK:"bullet_click",THUMB_CLICK:"thumb_click"},v=function(){function e(){this.keyDown=new n.EventEmitter}return e.prototype.onKeyDown=function(e){this.keyDown.next(e)},e}();v.decorators=[{type:n.Component,args:[{selector:"gallery-lightbox",template:'\n <gallery [@slideGalleryIn] [isOverlay]="true"></gallery>',styles:[".g-backdrop {\n background-color: rgba(0, 0, 0, 0.8); }\n\n.g-overlay {\n margin: auto; }\n\ngallery-lightbox {\n position: relative;\n display: block;\n max-width: 94vh;\n max-height: 80vh; }\n gallery-lightbox gallery {\n border-radius: 1.32em;\n overflow: hidden;\n margin: 0;\n display: block;\n width: 100%;\n height: 100%;\n -webkit-box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);\n box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); }\n\n.cdk-overlay-container, .cdk-global-overlay-wrapper {\n pointer-events: none;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%; }\n\n.cdk-overlay-container {\n position: fixed;\n z-index: 1000; }\n\n.cdk-global-overlay-wrapper {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n position: absolute;\n z-index: 1000; }\n\n.cdk-overlay-pane {\n position: absolute;\n pointer-events: auto;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n z-index: 1000; }\n\n.cdk-overlay-backdrop {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 1000;\n pointer-events: auto;\n -webkit-tap-highlight-color: transparent;\n -webkit-transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n opacity: 0; }\n .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {\n opacity: 0.48; }\n\n.cdk-overlay-dark-backdrop {\n background: rgba(0, 0, 0, 0.6); }\n\n.cdk-overlay-transparent-backdrop {\n background: none; }\n\n.cdk-global-scrollblock {\n position: fixed;\n width: 100%;\n overflow-y: scroll; }\n"],changeDetection:n.ChangeDetectionStrategy.OnPush,encapsulation:n.ViewEncapsulation.None,animations:[a.trigger("slideGalleryIn",[a.state("void",a.style({transform:"translateY(25%) scale(0.9)",opacity:0})),a.state("enter",a.style({transform:"translateY(0%) scale(1)",opacity:1})),a.state("exit",a.style({transform:"translateY(25%)",opacity:0})),a.transition("* => *",a.animate("400ms cubic-bezier(0.25, 0.8, 0.25, 1)"))])]}]}],v.ctorParameters=function(){return[]},v.propDecorators={keyDown:[{type:n.Output}],onKeyDown:[{type:n.HostListener,args:["document:keydown",["$event"]]}]};var w={gestures:!0,style:{width:"600px",height:"460px",background:"#121519"},navigation:{},loader:{icon:"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' stroke='%23fff'%3E%3Cg fill='none' fill-rule='evenodd' stroke-width='2'%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='0s' dur='1.8s' values='1; 20' calcMode='spline' keyTimes='0; 1' keySplines='0.165, 0.84, 0.44, 1' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-opacity' begin='0s' dur='1.8s' values='1; 0' calcMode='spline' keyTimes='0; 1' keySplines='0.3, 0.61, 0.355, 1' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='-0.9s' dur='1.8s' values='1; 20' calcMode='spline' keyTimes='0; 1' keySplines='0.165, 0.84, 0.44, 1' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-opacity' begin='-0.9s' dur='1.8s' values='1; 0' calcMode='spline' keyTimes='0; 1' keySplines='0.3, 0.61, 0.355, 1' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"},description:{position:"bottom",overlay:!1,text:!0,counter:!0},player:{autoplay:!1,interval:3e3,progress:!1,position:"bottom"},thumbnails:{width:120,height:90,position:"top"},lightbox:{backdropClass:"g-backdrop",panelClass:"g-overlay",hasBackdrop:!0}},k=function(){function e(e,n){var t=this;this.overlay=n,this._initialState={action:h.INIT,currIndex:0,hasNext:!1,hasPrev:!1,play:!1,loading:!1},this.state=this._initialState,this.state$=new o.BehaviorSubject(this._initialState),this.config=w,this.config$=new o.BehaviorSubject(this.config),setTimeout(function(){return t.setConfig(e)})}return e.prototype.handleKeydown=function(e){switch(e.keyCode){case t.LEFT_ARROW:this.prev();break;case t.RIGHT_ARROW:case t.ENTER:this.next();break;case t.ESCAPE:this.close();break;default:return}},e.prototype.setState=function(e){this.state=Object.assign({},this.state,e),this.state$.next(this.state)},e.prototype.setConfig=function(e){this.config=b(w,e),this.config$.next(this.config),this._overlayConfig={backdropClass:this.config.lightbox.backdropClass,panelClass:this.config.lightbox.panelClass,hasBackdrop:this.config.lightbox.hasBackdrop,positionStrategy:this.overlay.position().global().centerHorizontally().centerVertically(),scrollStrategy:this.overlay.scrollStrategies.block()}},e.prototype.load=function(e){this.setState({action:h.LOAD,items:e,hasNext:e.length>1})},e.prototype.set=function(e,n){this.setState({action:n||h.OTHER,currIndex:e,hasNext:e<this.state.items.length-1,hasPrev:e>0,loading:!0})},e.prototype.next=function(){this.set(this.state.hasNext?this.state.currIndex+1:0,h.NEXT)},e.prototype.prev=function(){this.set(this.state.hasPrev?this.state.currIndex-1:this.state.items.length-1,h.PREV)},e.prototype.reset=function(){this.setState(this._initialState)},e.prototype.play=function(){this.setState({action:h.PLAYING,play:!0})},e.prototype.stop=function(){this.setState({action:h.STOPPED,play:!1})},e.prototype.open=function(e){var n=this;void 0===e&&(e=0),this.set(e,h.OPENED),this._overlayRef=this.overlay.create(this._overlayConfig);var t=new r.ComponentPortal(v),i=this._overlayRef.attach(t);this._overlayRef.backdropClick().subscribe(function(){return n.close()}),i.instance.keyDown.subscribe(function(e){return n.handleKeydown(e)})},e.prototype.close=function(){this.setState({action:h.CLOSED,play:!1}),this._overlayRef.hasAttached()&&this._overlayRef.dispose()},e.prototype.initialized=function(){return this.state$.pipe(s.filter(function(e){return e.action===h.INIT}))},e.prototype.loaded=function(){return this.state$.pipe(s.filter(function(e){return e.action===h.LOAD}))},e.prototype.imageChanged=function(){return this.state$.pipe(s.filter(function(e){return e.action===(h.NEXT||h.PREV||h.THUMB_CLICK||h.BULLET_CLICK)}))},e.prototype.imageLoading=function(){return this.state$.pipe(s.filter(function(e){return e.action===(h.LOADING_START||h.LOADING_END)}))},e.prototype.navigationClick=function(){return this.state$.pipe(s.filter(function(e){return e.action===(h.NEXT||h.PREV)}))},e.prototype.thumbnailClick=function(){return this.state$.pipe(s.filter(function(e){return e.action===h.THUMB_CLICK}))},e.prototype.bulletClick=function(){return this.state$.pipe(s.filter(function(e){return e.action===h.BULLET_CLICK}))},e.prototype.opened=function(){return this.state$.pipe(s.filter(function(e){return e.action===h.OPENED}))},e.prototype.closed=function(){return this.state$.pipe(s.filter(function(e){return e.action===h.CLOSED}))},e.prototype.playing=function(){return this.state$.pipe(s.filter(function(e){return e.action===h.PLAYING}))},e.prototype.stopped=function(){return this.state$.pipe(s.filter(function(e){return e.action===h.STOPPED}))},e}();k.decorators=[{type:n.Injectable}],k.ctorParameters=function(){return[{type:undefined,decorators:[{type:n.Inject,args:[x]}]},{type:i.Overlay}]};var I=function(){function e(e){this.gallery=e}return e.prototype.ngOnDestroy=function(){this.isOverlay?this.gallery.close():this.gallery.reset()},e}();I.decorators=[{type:n.Component,args:[{selector:"gallery",template:'\n <gallery-main [state]="gallery.state$ | async"\n [config]="gallery.config$ | async"\n [isOverlay]="isOverlay"></gallery-main>\n ',styles:["gallery {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n height: 100%;\n margin-bottom: 2em;\n z-index: 1;\n overflow: hidden; }\n gallery * {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n overflow: hidden; }\n\n.-bottom {\n bottom: 0; }\n"],changeDetection:n.ChangeDetectionStrategy.OnPush,encapsulation:n.ViewEncapsulation.None}]}],I.ctorParameters=function(){return[{type:k}]},I.propDecorators={isOverlay:[{type:n.Input}]};var C=function(){return function(e){this.gallery=e}}();C.decorators=[{type:n.Component,args:[{selector:"gallery-nav",template:'<div *ngIf="state.items.length" class="g-nav">\n\n <div class="g-nav-prev {{config.nextClass}}"\n (tapClick)="gallery.prev()">\n\n <i class="prev-arrow-ico"></i>\n </div>\n\n <div class="g-nav-next {{config.prevClass}}"\n (tapClick)="gallery.next()">\n\n <i class="next-arrow-ico"></i>\n </div>\n\n</div>\n',styles:["gallery-nav {\n z-index: 15;\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex; }\n @media (max-width: 480px) {\n gallery-nav {\n display: none; } }\n\n.g-nav {\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n height: 100%;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-direction: row;\n flex-direction: row;\n opacity: 0;\n -webkit-transition: all linear 0.4s;\n transition: all linear 0.4s;\n cursor: pointer; }\n .g-nav:hover {\n opacity: 1; }\n .g-nav-next, .g-nav-prev {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n height: 100%;\n opacity: 0.7;\n position: relative;\n overflow: hidden;\n -webkit-transition: all 0.2s ease;\n transition: all 0.2s ease;\n z-index: 0; }\n .g-nav-next:hover, .g-nav-prev:hover {\n opacity: 1; }\n .g-nav-next {\n padding-right: 0.7em;\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end; }\n .g-nav-prev {\n padding-left: 0.7em;\n width: 20%; }\n\n.next-arrow-ico, .prev-arrow-ico {\n width: 45px;\n height: 80px; }\n\n.next-arrow-ico {\n background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PiAgPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQxNC40OTYgNDE0LjQ5NiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDE0LjQ5NiA0MTQuNDk2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+IDxkZWZzIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGZpbHRlciBpZD0iZHJvcHNoYWRvdyIgPiAgPGZlR2F1c3NpYW5CbHVyIGluPSJTb3VyY2VBbHBoYSIgc3RkRGV2aWF0aW9uPSIzIi8+ICAgPGZlT2Zmc2V0IGR4PSIyIiBkeT0iMiIgcmVzdWx0PSJvZmZzZXRibHVyIi8+ICAgPGZlTWVyZ2U+IDxmZU1lcmdlTm9kZS8+PGZlTWVyZ2VOb2RlIGluPSJTb3VyY2VHcmFwaGljIi8+ICAgPC9mZU1lcmdlPjwvZmlsdGVyPjwvZGVmcz4gIDxwb2x5Z29uIHN0eWxlPSJmaWxsOiNmZmY7IiBmaWx0ZXI9InVybCgjZHJvcHNoYWRvdykiIHBvaW50cz0iMTE4LjEyNiwwIDg5Ljc5NiwyOC4yMzggMjY4LjIyMywyMDcuMjQ4IDg5Ljc5NiwzODYuMjU4IDExOC4xMjYsNDE0LjQ5NiAzMjQuNywyMDcuMjQ4ICIvPjwvc3ZnPg==) no-repeat center center; }\n\n.prev-arrow-ico {\n background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0MTQuNDk2IDQxNC40OTYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQxNC40OTYgNDE0LjQ5NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxkZWZzIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGZpbHRlciBpZD0iZHJvcHNoYWRvdyIgPiAgPGZlR2F1c3NpYW5CbHVyIGluPSJTb3VyY2VBbHBoYSIgc3RkRGV2aWF0aW9uPSIzIi8+ICAgPGZlT2Zmc2V0IGR4PSIyIiBkeT0iMiIgcmVzdWx0PSJvZmZzZXRibHVyIi8+ICAgPGZlTWVyZ2U+IDxmZU1lcmdlTm9kZS8+PGZlTWVyZ2VOb2RlIGluPSJTb3VyY2VHcmFwaGljIi8+ICAgPC9mZU1lcmdlPjwvZmlsdGVyPjwvZGVmcz48cG9seWdvbiBzdHlsZT0iZmlsbDojZmZmOyIgZmlsdGVyPSJ1cmwoI2Ryb3BzaGFkb3cpIiBwb2ludHM9IjMyNC43LDI4LjIzOCAyOTYuMzcsMCA4OS43OTYsMjA3LjI0OCAyOTYuMzcsNDE0LjQ5NiAzMjQuNywzODYuMjU4IDE0Ni4yNzMsMjA3LjI0OCAiLz48L3N2Zz4=) no-repeat center center; }\n"],changeDetection:n.ChangeDetectionStrategy.OnPush,encapsulation:n.ViewEncapsulation.None}]}],C.ctorParameters=function(){return[{type:k}]},C.propDecorators={state:[{type:n.Input}],config:[{type:n.Input}]};var S=function(){function e(e,n,t){var i=this;this.gallery=e,this.el=n,this.renderer=t,this.state$=this.gallery.state$.pipe(s.switchMap(function(e){return c.of({currIndex:e.currIndex,position:i.translateThumbnails(e.currIndex),items:i.thumbnailsFactory(e)})}))}return e.prototype.translateThumbnails=function(e){var n="translate3d("+-(e*this.config.width+this.config.width/2)+"px, 0, 0)";return{msTransform:n,webkitTransform:n,transform:n}},e.prototype.thumbnailsFactory=function(e){return e.items.map(function(n,t){return{index:t,activeClass:t===e.currIndex?" g-thumb-current":"",thumbnail:"url("+n.thumbnail+")"}})},e.prototype.setCurrentItem=function(e,n){e!==n&&this.gallery.set(e,h.THUMB_CLICK)},e.prototype.ngOnInit=function(){var e=this,n="top"===this.config.position?0:2;if(this.renderer.setStyle(this.el.nativeElement,"-webkit-order",n),this.renderer.setStyle(this.el.nativeElement,"order",n),this.gallery.config.gestures){if("undefined"==typeof Hammer)throw Error("[NgGallery]: HammerJS is undefined, make sure it is loaded");var t=this.el.nativeElement,i=new Hammer(t);i.on("panstart",function(){e.renderer.removeClass(t,"-reset")}),i.on("panend",function(){e.renderer.addClass(t,"-reset")}),i.on("pan",function(n){var i="translate3d("+n.deltaX+"px, 0px, 0px)";e.renderer.setStyle(t,"mozTransform",i),e.renderer.setStyle(t,"oTransform",i),e.renderer.setStyle(t,"msTransform",i),e.renderer.setStyle(t,"webkitTransform",i),e.renderer.setStyle(t,"transform",i)}),i.on("swipeleft",function(){e.gallery.next()}),i.on("swiperight",function(){e.gallery.prev()})}},e}();S.decorators=[{type:n.Component,args:[{selector:"gallery-thumb",template:'<div *ngIf="state$ | async; let state"\n class="g-thumb-container {{config.className}}"\n [style.height.px]="config.height">\n\n <div class="g-thumbs" [ngStyle]="state.position">\n\n <div *ngFor="let item of state.items"\n class="g-thumb{{item.activeClass}}"\n [style.width.px]="config.width"\n [style.height.px]="config.height">\n\n <div class="g-thumb-image"\n [style.backgroundImage]="item.thumbnail"\n (tapClick)="setCurrentItem(item.index, state.currIndex)">\n </div>\n </div>\n\n </div>\n\n</div>\n',styles:["gallery-thumb {\n display: block;\n z-index: 1;\n overflow: unset; }\n\n.g-thumb-container {\n position: relative;\n z-index: 206;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n overflow: unset;\n margin: 20px 0; }\n\n.g-thumbs {\n position: absolute;\n top: 0;\n left: 50%;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-transition: -webkit-transform linear 300ms;\n transition: -webkit-transform linear 300ms;\n transition: transform linear 300ms;\n transition: transform linear 300ms, -webkit-transform linear 300ms;\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0); }\n\n.g-thumb {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n opacity: 0.5;\n padding: 6px;\n -webkit-transition: all ease 500ms;\n transition: all ease 500ms; }\n\n.g-thumb-current {\n opacity: 1;\n padding: 2px; }\n\n.g-thumb-image {\n cursor: pointer;\n width: 100%;\n height: 100%;\n border-radius: 3px;\n background-position: center center;\n background-size: cover;\n -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);\n box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);\n -webkit-transition: margin ease 600ms;\n transition: margin ease 600ms; }\n"],changeDetection:n.ChangeDetectionStrategy.OnPush,encapsulation:n.ViewEncapsulation.None}]}],S.ctorParameters=function(){return[{type:k},{type:n.ElementRef},{type:n.Renderer2}]},S.propDecorators={config:[{type:n.Input}]};var D=function(){function e(e,n){this.el=e,this.renderer=n}return e.prototype.ngOnInit=function(){var e=this.el.nativeElement;this.config.overlay&&this.renderer.setStyle(e,"position","absolute"),"top"===this.config.position?(this.renderer.setStyle(e,"-webkit-order",0),this.renderer.setStyle(e,"order",0),this.renderer.setStyle(e,"top",0),this.renderer.setStyle(e,"bottom","unset")):(this.renderer.setStyle(e,"-webkit-order",2),this.renderer.setStyle(e,"order",2),this.renderer.setStyle(e,"top","unset"),this.renderer.setStyle(e,"bottom",0))},e}();D.decorators=[{type:n.Component,args:[{selector:"gallery-text",template:'<div class="g-text-container {{config.className}}" [ngStyle]="config.style">\n\n <div *ngIf="config.text" class="g-text" [innerHtml]="state.items[state.currIndex]?.text"></div>\n\n <div *ngIf="config.counter" class="g-counter">\n {{(state.currIndex + 1) + \'/\' + state.items.length}}\n </div>\n</div>\n\n',styles:["gallery-text {\n position: relative;\n left: 0;\n right: 0;\n z-index: 25; }\n\n.g-text-container {\n padding: 1em 2em;\n color: #ccc;\n font-size: 13px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-direction: row;\n flex-direction: row;\n -ms-flex-line-pack: center;\n align-content: center;\n background-clip: padding-box;\n -webkit-font-smoothing: antialiased; }\n\n.g-text {\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1; }\n .g-text a {\n color: #00b0e8; }\n"],changeDetection:n.ChangeDetectionStrategy.OnPush,encapsulation:n.ViewEncapsulation.None}]}],D.ctorParameters=function(){return[{type:n.ElementRef},{type:n.Renderer2}]},D.propDecorators={state:[{type:n.Input}],config:[{type:n.Input}]};var N=function(){function e(e){this.gallery=e}return e.prototype.onLoad=function(e){this.gallery.setState({action:e?h.LOADING_START:h.LOADING_END,loading:e})},e}();N.decorators=[{type:n.Component,args:[{selector:"gallery-items",template:'\n <div *ngIf="current" class="g-item">\n <div class="g-img"\n [style.backgroundSize]="config.imageSize"\n [lazyImage]="current.src"\n (loading)="onLoad($event)"></div>\n </div>\n ',styles:["gallery-items {\n z-index: 3;\n -webkit-box-ordinal-group: 2;\n -ms-flex-order: 1;\n order: 1;\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-transform: translate3d(0px, 0px, 0px);\n transform: translate3d(0px, 0px, 0px); }\n\n.g-item {\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n opacity: 1;\n -webkit-transition: opacity ease-in 300ms;\n transition: opacity ease-in 300ms; }\n .g-item .g-img {\n -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);\n box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);\n background-position: center center;\n background-size: contain;\n background-repeat: no-repeat;\n pointer-events: none;\n display: block;\n width: 100%;\n height: 100%; }\n"],changeDetection:n.ChangeDetectionStrategy.OnPush,encapsulation:n.ViewEncapsulation.None}]}],N.ctorParameters=function(){return[{type:k}]},N.propDecorators={current:[{type:n.Input}],config:[{type:n.Input}]};var z=function(){function e(e,n){this.gallery=e,this.renderer=n}return e.prototype.ngOnInit=function(){this.config.icon&&this.renderer.setProperty(this.icon.nativeElement,"src",this.config.icon),this.config.className&&this.renderer.addClass(this.icon.nativeElement,this.config.className)},e}();z.decorators=[{type:n.Component,args:[{selector:"gallery-loader",template:'\n <div class="g-loader">\n <img #icon class="g-loader-img">\n </div>\n ',styles:["gallery-loader {\n z-index: 50; }\n\n.g-loader {\n z-index: 50;\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n top: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n padding: 1em;\n -webkit-animation: fadeIn 1s;\n animation: fadeIn 1s; }\n\n.g-loader-img {\n width: 50px; }\n\n@-webkit-keyframes fadeIn {\n from {\n opacity: 0; }\n to {\n opacity: 1; } }\n\n@keyframes fadeIn {\n from {\n opacity: 0; }\n to {\n opacity: 1; } }\n"],changeDetection:n.ChangeDetectionStrategy.OnPush,encapsulation:n.ViewEncapsulation.None}]}],z.ctorParameters=function(){return[{type:k},{type:n.Renderer2}]},z.propDecorators={config:[{type:n.Input}],icon:[{type:n.ViewChild,args:["icon"]}]};var E=function(){function e(e){this.gallery=e}return e.prototype.onTapClick=function(e){e!==this.state.currIndex&&this.gallery.set(e,h.BULLET_CLICK)},e}();E.decorators=[{type:n.Component,args:[{selector:"gallery-bullets",template:'<div class="g-bullets-container {{config.className}}"\n [class.-bottom]="config.position === \'bottom\'">\n <div class="g-bullet"\n *ngFor="let item of state.items; let i = index"\n [class.g-bullet-curr]="i === state.currIndex"\n (tapClick)="onTapClick(i)">\n\n <div class="g-bullet-inner" [ngStyle]="config.style"></div>\n\n </div>\n</div>\n',styles:[".g-bullets-container {\n position: absolute;\n width: 100%;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center; }\n\n.g-bullet {\n cursor: pointer;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n z-index: 20; }\n\n.g-bullet-inner {\n margin: 1em;\n height: 4px;\n width: 4px;\n background-color: rgba(255, 255, 255, 0.5);\n border-radius: 2px;\n -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);\n box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);\n -webkit-transition: all ease 0.2s;\n transition: all ease 0.2s; }\n\n.g-bullet-curr .g-bullet-inner {\n -webkit-transform: scale(2);\n transform: scale(2);\n background-color: white; }\n"],changeDetection:n.ChangeDetectionStrategy.OnPush,encapsulation:n.ViewEncapsulation.None}]}],E.ctorParameters=function(){return[{type:k}]},E.propDecorators={state:[{type:n.Input}],config:[{type:n.Input}]};var P=function(){function e(e){this.gallery=e}return e.prototype.ngOnInit=function(){var e=this,n=this.config.interval/10,t=s.filter(function(e){return e.play&&!e.loading}),i=s.map(function(t){return{height:e.config.thickness+"px",backgroundColor:e.config.color,width:t+"%",transition:"width linear "+(t?n:0)+"ms"}}),r=s.map(function(t){return t*n*100/e.config.interval}),o=s.switchMap(function(){return p.timer(0,n).pipe(r,s.takeWhile(function(n){var t=n<=100;return t||e.gallery.next(),t&&e.gallery.state.play}),i)});this.progress$=this.gallery.state$.pipe(t,o),this.config.autoplay&&this.gallery.play()},e}();P.decorators=[{type:n.Component,args:[{selector:"gallery-player",template:'<div *ngIf="progress$ | async; let style"\n class="g-progress-bar"\n [class.-bottom]="config.position === \'bottom\'">\n\n <div *ngIf="config.progress"\n class="g-progress"\n [ngStyle]="style"></div>\n</div>\n',styles:[".g-progress-bar {\n position: absolute;\n z-index: 70;\n left: 0;\n right: 0;\n overflow: unset;\n width: 100%; }\n\n.g-progress {\n width: 0;\n height: 2px;\n z-index: 60;\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n background-color: rgba(255, 255, 255, 0.8); }\n"],changeDetection:n.ChangeDetectionStrategy.OnPush,encapsulation:n.ViewEncapsulation.None}]}],P.ctorParameters=function(){return[{type:k}]},P.propDecorators={config:[{type:n.Input}]};var O=function(){return function(e){this.gallery=e}}();O.decorators=[{type:n.Component,args:[{selector:"gallery-main",template:'<div *ngIf="state.items?.length" class="g-container {{config.className}}" [ngStyle]="config.style">\n\n <gallery-thumb *ngIf="config.thumbnails" [config]="config.thumbnails"></gallery-thumb>\n\n <div class="g-box">\n\n <gallery-slider [state]="state" [config]="config" [class.-invisible]="state.loading"></gallery-slider>\n\n <gallery-bullets *ngIf="config.bullets" [state]="state" [config]="config.bullets"></gallery-bullets>\n\n <gallery-loader *ngIf="state.loading" [config]="config.loader"></gallery-loader>\n\n </div>\n\n <gallery-player *ngIf="config.player" [config]="config.player"></gallery-player>\n\n <gallery-text *ngIf="config.description" [state]="state" [config]="config.description"></gallery-text>\n\n <div *ngIf="isOverlay" class="g-btn-close" (tapClick)="gallery.close()"></div>\n\n</div>\n',styles:["gallery-main {\n position: relative;\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n width: 100%;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center; }\n\n.g-container {\n overflow: hidden;\n position: relative;\n max-height: 100%;\n max-width: 100%;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column; }\n @media (max-width: 480px) {\n .g-container {\n width: 100% !important;\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n -webkit-box-orient: vertical !important;\n -webkit-box-direction: normal !important;\n -ms-flex-direction: column !important;\n flex-direction: column !important; } }\n\n.g-box {\n height: 100%; }\n\n.g-box, gallery-slider {\n position: relative;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n -webkit-box-ordinal-group: 2;\n -ms-flex-order: 1;\n order: 1;\n height: 100%; }\n\n.-reset {\n -webkit-transition: all linear 0.3s;\n transition: all linear 0.3s;\n -webkit-transform: translate3d(0px, 0px, 0px) !important;\n transform: translate3d(0px, 0px, 0px) !important; }\n\n/** Hide slider on loading */\n.-invisible {\n -webkit-transition: none !important;\n transition: none !important; }\n .-invisible .g-item {\n opacity: 0;\n -webkit-transition: none;\n transition: none; }\n\n.g-btn-close {\n position: absolute;\n right: 0.73em;\n top: 0.73em;\n z-index: 60;\n cursor: pointer;\n width: 30px;\n height: 30px;\n -webkit-transition: all linear 0.2s;\n transition: all linear 0.2s;\n background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUwIDUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MCA1MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxjaXJjbGUgc3R5bGU9ImZpbGw6I0Q3NUE0QTsiIGN4PSIyNSIgY3k9IjI1IiByPSIyNSIvPjxwb2x5bGluZSBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojRkZGRkZGO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwOyIgcG9pbnRzPSIxNiwzNCAyNSwyNSAzNCwxNiAiLz48cG9seWxpbmUgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6I0ZGRkZGRjtzdHJva2Utd2lkdGg6MjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDsiIHBvaW50cz0iMTYsMTYgMjUsMjUgMzQsMzQgIi8+PC9zdmc+); }\n .g-btn-close:active {\n -webkit-transform: rotate(180deg) scale(0.9);\n transform: rotate(180deg) scale(0.9); }\n\n.empty {\n color: white;\n background-color: #121519;\n position: absolute;\n width: 100%;\n height: 100%;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center; }\n"],changeDetection:n.ChangeDetectionStrategy.OnPush,encapsulation:n.ViewEncapsulation.None}]}],O.ctorParameters=function(){return[{type:k}]},O.propDecorators={state:[{type:n.Input}],config:[{type:n.Input}],isOverlay:[{type:n.Input}]};var j=function(){function e(e,n,t){this.gallery=e,this.el=n,this.renderer=t,this.showNav=new o.BehaviorSubject(!0)}return e.prototype.ngOnInit=function(){var e=this;if(this.config.gestures){if("undefined"==typeof Hammer)throw Error("[NgGallery]: HammerJS is undefined, make sure it is loaded");var n=new Hammer(this.el.nativeElement);n.on("panstart",function(){e.renderer.removeClass(e.el.nativeElement,"-reset"),e.showNav.next(!1)}),n.on("panend",function(){e.renderer.addClass(e.el.nativeElement,"-reset"),e.showNav.next(!0)}),n.on("pan",function(n){var t="translate3d("+n.deltaX+"px, 0px, 0px)";e.renderer.setStyle(e.el.nativeElement,"mozTransform",t),e.renderer.setStyle(e.el.nativeElement,"oTransform",t),e.renderer.setStyle(e.el.nativeElement,"msTransform",t),e.renderer.setStyle(e.el.nativeElement,"webkitTransform",t),e.renderer.setStyle(e.el.nativeElement,"transform",t)}),n.on("swipeleft",function(){e.gallery.next()}),n.on("swiperight",function(){e.gallery.prev()})}},e}();j.decorators=[{type:n.Component,args:[{selector:"gallery-slider",template:'<gallery-items [current]="state.items[state.currIndex]"\n [config]="config">\n</gallery-items>\n\n<gallery-nav *ngIf="config.navigation && (showNav | async)"\n [state]="state"\n [config]="config.navigation">\n</gallery-nav>\n',changeDetection:n.ChangeDetectionStrategy.OnPush}]}],j.ctorParameters=function(){return[{type:k},{type:n.ElementRef},{type:n.Renderer2}]},j.propDecorators={state:[{type:n.Input}],config:[{type:n.Input}]};var Z=function(){function e(e,n,t){this.el=e,this.renderer=n,this.gallery=t}return e.prototype.ngOnInit=function(){var e=this;this.observer=new MutationObserver(function(n){n.forEach(function(n){var t=[],i=e.gallerize?e.gallerize.split(" ").map(function(e){return"."+e}):"",r=e.el.nativeElement.querySelectorAll("img"+i);r&&g.from(r).pipe(s.map(function(n,i){e.renderer.setStyle(n,"cursor","pointer"),e.renderer.setProperty(n,"onclick",function(){return e.gallery.open(i)}),t.push({src:n.hasAttribute("src-full")?n.getAttribute("src-full"):n.src,thumbnail:n.src,text:n.alt})}),s.finalize(function(){return e.gallery.load(t)})).subscribe()})});this.observer.observe(this.el.nativeElement,{attributes:!0,childList:!0,characterData:!0})},e.prototype.ngOnDestroy=function(){this.observer.disconnect()},e}();Z.decorators=[{type:n.Directive,args:[{selector:"[gallerize]"}]}],Z.ctorParameters=function(){return[{type:n.ElementRef},{type:n.Renderer2},{type:k}]},Z.propDecorators={gallerize:[{type:n.Input}]};var T=function(){function e(e,t,i){this.gallery=e,this.el=t,this.renderer=i,this.tapClick=new n.EventEmitter}return e.prototype.ngOnInit=function(){this.setTapEvent()},e.prototype.setTapEvent=function(){var e=this;if(this.gallery.config.gestures){if("undefined"==typeof Hammer)throw Error("[NgGallery]: HammerJS is undefined, make sure it is loaded");if("undefined"!=typeof Hammer){new Hammer(this.el.nativeElement).on("tap",function(){e.tapClick.emit(null)})}}else this.renderer.setProperty(this.el.nativeElement,"onclick",function(){e.tapClick.emit(null)})},e}();T.decorators=[{type:n.Directive,args:[{selector:"[tapClick]"}]}],T.ctorParameters=function(){return[{type:k},{type:n.ElementRef},{type:n.Renderer2}]},T.propDecorators={tapClick:[{type:n.Output}]};var M=function(){function e(e,t){var i=this;this.el=e,this.renderer=t,this.lazyWorker$=new d.Subject,this.loading=new n.EventEmitter;var r=this.renderer.createElement("img");this.lazyWorker$.pipe(s.switchMap(function(e){i.loading.emit(!0),r.src=e;var n=y.fromEvent(r,"load").pipe(s.tap(function(){i.renderer.setStyle(i.el.nativeElement,"backgroundImage","url("+e+")"),i.loading.emit(!1)})),t=y.fromEvent(r,"error").pipe(s.tap(function(){i.loading.emit(!1)}));return u.zip(n,t)})).subscribe()}return Object.defineProperty(e.prototype,"lazyImage",{set:function(e){this.getImage(e)},enumerable:!0,configurable:!0}),e.prototype.getImage=function(e){this.lazyWorker$.next(e)},e.prototype.ngOnDestroy=function(){this.lazyWorker$.unsubscribe()},e}();M.decorators=[{type:n.Directive,args:[{selector:"[lazyImage]"}]}],M.ctorParameters=function(){return[{type:n.ElementRef},{type:n.Renderer2}]},M.propDecorators={lazyImage:[{type:n.Input,args:["lazyImage"]}],loading:[{type:n.Output}]};var G=function(){function e(){}return e.forRoot=function(n){return{ngModule:e,providers:[{provide:x,useValue:n},{provide:k,useFactory:f,deps:[x,i.Overlay]}]}},e}();G.decorators=[{type:n.NgModule,args:[{imports:[l.CommonModule,i.OverlayModule],declarations:[I,C,S,D,N,z,E,P,O,j,v,Z,T,M],exports:[I,Z],entryComponents:[v]}]}],G.ctorParameters=function(){return[]},e.Gallery=k,e.GalleryAction=h,e.GalleryModule=G,e.ɵj=E,e.ɵh=N,e.ɵn=v,e.ɵi=z,e.ɵl=O,e.ɵe=C,e.ɵk=P,e.ɵm=j,e.ɵg=D,e.ɵf=S,e.ɵd=I,e.ɵo=Z,e.ɵq=M,e.ɵp=T,e.ɵa=f,e.ɵb=x,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=ng-gallery.umd.min.js.map

@@ -23,8 +23,5 @@ import { ElementRef, Renderer2, OnInit } from '@angular/core';

* Centralize active thumbnail
* @param {number} i - Current index
* @returns any
* @param i - Current index
*/
translateThumbnails(i: number): {
mozTransform: string;
oTransform: string;
msTransform: string;

@@ -36,4 +33,3 @@ webkitTransform: string;

* Prepare thumbnails for rendering
* @param {GalleryState} state
* @returns any
* @param state
*/

@@ -47,6 +43,7 @@ thumbnailsFactory(state: GalleryState): {

* Set current gallery item
* @param {number} i - Item index
* @param i - Item index
* @param currIndex - current index
*/
setCurrentItem(i: number): void;
setCurrentItem(i: number, currIndex: number): void;
ngOnInit(): void;
}

@@ -7,5 +7,4 @@ import { ModuleWithProviders } from '@angular/core';

* Initialize Gallery with custom config
* @param {GalleryConfig} config
* @param {Overlay} overlay
* @returns {Gallery}
* @param config
* @param overlay
*/

@@ -12,0 +11,0 @@ export declare function galleryFactory(config: GalleryConfig, overlay: Overlay): Gallery;

@@ -1,1 +0,1 @@

{"__symbolic":"module","version":4,"metadata":{"Gallery":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","name":"ɵb"}]}],null],"parameters":[{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"Overlay"}]}],"handleKeydown":[{"__symbolic":"method"}],"setState":[{"__symbolic":"method"}],"setConfig":[{"__symbolic":"method"}],"load":[{"__symbolic":"method"}],"set":[{"__symbolic":"method"}],"next":[{"__symbolic":"method"}],"prev":[{"__symbolic":"method"}],"reset":[{"__symbolic":"method"}],"play":[{"__symbolic":"method"}],"stop":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"initialized":[{"__symbolic":"method"}],"loaded":[{"__symbolic":"method"}],"imageChanged":[{"__symbolic":"method"}],"imageLoading":[{"__symbolic":"method"}],"navigationClick":[{"__symbolic":"method"}],"thumbnailClick":[{"__symbolic":"method"}],"bulletClick":[{"__symbolic":"method"}],"opened":[{"__symbolic":"method"}],"closed":[{"__symbolic":"method"}],"playing":[{"__symbolic":"method"}],"stopped":[{"__symbolic":"method"}]}},"GalleryConfig":{"__symbolic":"interface"},"GalleryDescConfig":{"__symbolic":"interface"},"GalleryThumbConfig":{"__symbolic":"interface"},"GalleryNavConfig":{"__symbolic":"interface"},"GalleryLoaderConfig":{"__symbolic":"interface"},"GalleryPlayConfig":{"__symbolic":"interface"},"GalleryBulletConfig":{"__symbolic":"interface"},"GalleryLightboxConfig":{"__symbolic":"interface"},"GalleryState":{"__symbolic":"interface"},"GalleryItem":{"__symbolic":"interface"},"GalleryAction":{"INIT":"init","LOAD":"load","NEXT":"next","PREV":"prev","OTHER":"other","PLAYING":"playing","STOPPED":"stopped","OPENED":"opened","CLOSED":"closed","LOADING_START":"loading_start","LOADING_END":"loading_end","BULLET_CLICK":"bullet_click","THUMB_CLICK":"thumb_click"},"ɵa":{"__symbolic":"function","parameters":["config","overlay"],"value":{"__symbolic":"new","expression":{"__symbolic":"reference","name":"Gallery"},"arguments":[{"__symbolic":"reference","name":"config"},{"__symbolic":"reference","name":"overlay"}]}},"GalleryModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"OverlayModule"}],"declarations":[{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","name":"ɵg"},{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","name":"ɵi"},{"__symbolic":"reference","name":"ɵj"},{"__symbolic":"reference","name":"ɵk"},{"__symbolic":"reference","name":"ɵl"},{"__symbolic":"reference","name":"ɵm"},{"__symbolic":"reference","name":"ɵn"},{"__symbolic":"reference","name":"ɵo"},{"__symbolic":"reference","name":"ɵp"},{"__symbolic":"reference","name":"ɵq"}],"exports":[{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵo"}],"entryComponents":[{"__symbolic":"reference","name":"ɵn"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":["config"],"value":{"ngModule":{"__symbolic":"reference","name":"GalleryModule"},"providers":[{"provide":{"__symbolic":"reference","name":"ɵb"},"useValue":{"__symbolic":"reference","name":"config"}},{"provide":{"__symbolic":"reference","name":"Gallery"},"useFactory":{"__symbolic":"reference","name":"ɵa"},"deps":[{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"Overlay"}]}]}}}},"ɵb":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken"},"arguments":["config"]},"ɵd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gallery","template":"\n <gallery-main [state]=\"gallery.state$ | async\"\n [config]=\"gallery.config$ | async\"\n [isOverlay]=\"isOverlay\"></gallery-main>\n ","styles":["\n gallery {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n height: 100%;\n margin-bottom: 2em;\n z-index: 1;\n overflow: hidden; }\n gallery * {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n overflow: hidden; }\n\n .-bottom {\n bottom: 0; }\n "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"isOverlay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Gallery"}]}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ɵe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gallery-nav","template":"\n <div *ngIf=\"state.items.length\" class=\"g-nav\">\n\n <div class=\"g-nav-prev {{config.nextClass}}\"\n (tapClick)=\"gallery.prev()\">\n\n <i class=\"prev-arrow-ico\"></i>\n </div>\n\n <div class=\"g-nav-next {{config.prevClass}}\"\n (tapClick)=\"gallery.next()\">\n\n <i class=\"next-arrow-ico\"></i>\n </div>\n\n </div>\n ","styles":["\n gallery-nav {\n z-index: 15;\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex; }\n @media (max-width: 480px) {\n gallery-nav {\n display: none; } }\n\n .g-nav {\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n height: 100%;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-direction: row;\n flex-direction: row;\n opacity: 0;\n -webkit-transition: all linear 0.4s;\n transition: all linear 0.4s;\n cursor: pointer; }\n .g-nav:hover {\n opacity: 1; }\n .g-nav-next, .g-nav-prev {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n height: 100%;\n opacity: 0.7;\n position: relative;\n overflow: hidden;\n -webkit-transition: all 0.2s ease;\n transition: all 0.2s ease;\n z-index: 0; }\n .g-nav-next:hover, .g-nav-prev:hover {\n opacity: 1; }\n .g-nav-next {\n padding-right: 0.7em;\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end; }\n .g-nav-prev {\n padding-left: 0.7em;\n width: 20%; }\n\n .next-arrow-ico, .prev-arrow-ico {\n width: 45px;\n height: 80px; }\n\n .next-arrow-ico {\n background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PiAgPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQxNC40OTYgNDE0LjQ5NiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDE0LjQ5NiA0MTQuNDk2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+IDxkZWZzIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGZpbHRlciBpZD0iZHJvcHNoYWRvdyIgPiAgPGZlR2F1c3NpYW5CbHVyIGluPSJTb3VyY2VBbHBoYSIgc3RkRGV2aWF0aW9uPSIzIi8+ICAgPGZlT2Zmc2V0IGR4PSIyIiBkeT0iMiIgcmVzdWx0PSJvZmZzZXRibHVyIi8+ICAgPGZlTWVyZ2U+IDxmZU1lcmdlTm9kZS8+PGZlTWVyZ2VOb2RlIGluPSJTb3VyY2VHcmFwaGljIi8+ICAgPC9mZU1lcmdlPjwvZmlsdGVyPjwvZGVmcz4gIDxwb2x5Z29uIHN0eWxlPSJmaWxsOiNmZmY7IiBmaWx0ZXI9InVybCgjZHJvcHNoYWRvdykiIHBvaW50cz0iMTE4LjEyNiwwIDg5Ljc5NiwyOC4yMzggMjY4LjIyMywyMDcuMjQ4IDg5Ljc5NiwzODYuMjU4IDExOC4xMjYsNDE0LjQ5NiAzMjQuNywyMDcuMjQ4ICIvPjwvc3ZnPg==) no-repeat center center; }\n\n .prev-arrow-ico {\n background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0MTQuNDk2IDQxNC40OTYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQxNC40OTYgNDE0LjQ5NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxkZWZzIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGZpbHRlciBpZD0iZHJvcHNoYWRvdyIgPiAgPGZlR2F1c3NpYW5CbHVyIGluPSJTb3VyY2VBbHBoYSIgc3RkRGV2aWF0aW9uPSIzIi8+ICAgPGZlT2Zmc2V0IGR4PSIyIiBkeT0iMiIgcmVzdWx0PSJvZmZzZXRibHVyIi8+ICAgPGZlTWVyZ2U+IDxmZU1lcmdlTm9kZS8+PGZlTWVyZ2VOb2RlIGluPSJTb3VyY2VHcmFwaGljIi8+ICAgPC9mZU1lcmdlPjwvZmlsdGVyPjwvZGVmcz48cG9seWdvbiBzdHlsZT0iZmlsbDojZmZmOyIgZmlsdGVyPSJ1cmwoI2Ryb3BzaGFkb3cpIiBwb2ludHM9IjMyNC43LDI4LjIzOCAyOTYuMzcsMCA4OS43OTYsMjA3LjI0OCAyOTYuMzcsNDE0LjQ5NiAzMjQuNywzODYuMjU4IDE0Ni4yNzMsMjA3LjI0OCAiLz48L3N2Zz4=) no-repeat center center; }\n "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"state":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Gallery"}]}]}},"ɵf":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gallery-thumb","template":"\n <div *ngIf=\"state$ | async; let state\"\n class=\"g-thumb-container {{config.className}}\"\n [style.height.px]=\"config.height\">\n\n <div class=\"g-thumbs\" [ngStyle]=\"state.position\">\n\n <div *ngFor=\"let item of state.items\"\n class=\"g-thumb{{item.activeClass}}\"\n [style.width.px]=\"config.width\"\n [style.height.px]=\"config.height\">\n\n <div class=\"g-thumb-image\"\n [style.backgroundImage]=\"item.thumbnail\"\n (tapClick)=\"setCurrentItem(item.index)\">\n </div>\n </div>\n\n </div>\n\n </div>\n ","styles":["\n gallery-thumb {\n display: block;\n z-index: 1;\n overflow: unset; }\n\n .g-thumb-container {\n position: relative;\n z-index: 206;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n overflow: unset;\n margin: 20px 0; }\n\n .g-thumbs {\n position: absolute;\n top: 0;\n left: 50%;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-transition: -webkit-transform linear 300ms;\n transition: -webkit-transform linear 300ms;\n transition: transform linear 300ms;\n transition: transform linear 300ms, -webkit-transform linear 300ms;\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0); }\n\n .g-thumb {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n opacity: 0.5;\n padding: 6px;\n -webkit-transition: all ease 500ms;\n transition: all ease 500ms; }\n\n .g-thumb-current {\n opacity: 1;\n padding: 2px; }\n\n .g-thumb-image {\n cursor: pointer;\n width: 100%;\n height: 100%;\n border-radius: 3px;\n background-position: center center;\n background-size: cover;\n -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);\n box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);\n -webkit-transition: margin ease 600ms;\n transition: margin ease 600ms; }\n "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Gallery"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"translateThumbnails":[{"__symbolic":"method"}],"thumbnailsFactory":[{"__symbolic":"method"}],"setCurrentItem":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵg":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gallery-text","template":"\n <div class=\"g-text-container {{config.className}}\" [ngStyle]=\"config.style\">\n\n <div *ngIf=\"config.text\" class=\"g-text\" [innerHtml]=\"state.items[state.currIndex]?.text\"></div>\n\n <div *ngIf=\"config.counter\" class=\"g-counter\">\n {{(state.currIndex + 1) + '/' + state.items.length}}\n </div>\n </div>\n ","styles":["\n gallery-text {\n position: relative;\n left: 0;\n right: 0;\n z-index: 25; }\n\n .g-text-container {\n padding: 1em 2em;\n color: #ccc;\n font-size: 13px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-direction: row;\n flex-direction: row;\n -ms-flex-line-pack: center;\n align-content: center;\n background-clip: padding-box;\n -webkit-font-smoothing: antialiased; }\n\n .g-text {\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1; }\n .g-text a {\n color: #00b0e8; }\n "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"state":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵh":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gallery-items","template":"\n <div *ngIf=\"current\" class=\"g-item\">\n <div class=\"g-img\"\n [style.backgroundSize]=\"config.imageSize\"\n [lazyImage]=\"current.src\"\n (loading)=\"onLoad($event)\"></div>\n </div>\n ","styles":["\n gallery-items {\n z-index: 3;\n -webkit-box-ordinal-group: 2;\n -ms-flex-order: 1;\n order: 1;\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-transform: translate3d(0px, 0px, 0px);\n transform: translate3d(0px, 0px, 0px); }\n\n .g-item {\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n opacity: 1;\n -webkit-transition: opacity ease-in 300ms;\n transition: opacity ease-in 300ms; }\n .g-item .g-img {\n -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);\n box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);\n background-position: center center;\n background-size: contain;\n background-repeat: no-repeat;\n pointer-events: none;\n display: block;\n width: 100%;\n height: 100%; }\n "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"current":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Gallery"}]}],"onLoad":[{"__symbolic":"method"}]}},"ɵi":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gallery-loader","template":"\n <div class=\"g-loader\">\n <img #icon class=\"g-loader-img\">\n </div>\n ","styles":["\n gallery-loader {\n z-index: 50; }\n\n .g-loader {\n z-index: 50;\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n top: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n padding: 1em;\n -webkit-animation: fadeIn 1s;\n animation: fadeIn 1s; }\n\n .g-loader-img {\n width: 50px; }\n\n @-webkit-keyframes fadeIn {\n from {\n opacity: 0; }\n to {\n opacity: 1; } }\n\n @keyframes fadeIn {\n from {\n opacity: 0; }\n to {\n opacity: 1; } }\n "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"icon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["icon"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Gallery"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵj":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gallery-bullets","template":"\n <div class=\"g-bullets-container {{config.className}}\"\n [class.-bottom]=\"config.position === 'bottom'\">\n <div class=\"g-bullet\"\n *ngFor=\"let item of state.items; let i = index\"\n [class.g-bullet-curr]=\"i === state.currIndex\"\n (tapClick)=\"onTapClick(i)\">\n\n <div class=\"g-bullet-inner\" [ngStyle]=\"config.style\"></div>\n\n </div>\n </div>\n ","styles":["\n .g-bullets-container {\n position: absolute;\n width: 100%;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center; }\n\n .g-bullet {\n cursor: pointer;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n z-index: 20; }\n\n .g-bullet-inner {\n margin: 1em;\n height: 4px;\n width: 4px;\n background-color: rgba(255, 255, 255, 0.5);\n border-radius: 2px;\n -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);\n box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);\n -webkit-transition: all ease 0.2s;\n transition: all ease 0.2s; }\n\n .g-bullet-curr .g-bullet-inner {\n -webkit-transform: scale(2);\n transform: scale(2);\n background-color: white; }\n "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"state":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Gallery"}]}],"onTapClick":[{"__symbolic":"method"}]}},"ɵk":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gallery-player","template":"\n <div *ngIf=\"progress$ | async; let style\"\n class=\"g-progress-bar\"\n [class.-bottom]=\"config.position === 'bottom'\">\n\n <div *ngIf=\"config.progress\"\n class=\"g-progress\"\n [ngStyle]=\"style\"></div>\n </div>\n ","styles":["\n .g-progress-bar {\n position: absolute;\n z-index: 70;\n left: 0;\n right: 0;\n overflow: unset;\n width: 100%; }\n\n .g-progress {\n width: 0;\n height: 2px;\n z-index: 60;\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n background-color: rgba(255, 255, 255, 0.8); }\n "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Gallery"}]}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵl":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gallery-main","template":"\n <div *ngIf=\"state.items?.length\" class=\"g-container {{config.className}}\" [ngStyle]=\"config.style\">\n\n <gallery-thumb *ngIf=\"config.thumbnails\" [config]=\"config.thumbnails\"></gallery-thumb>\n\n <div class=\"g-box\">\n\n <gallery-slider [state]=\"state\" [config]=\"config\" [class.-invisible]=\"state.loading\"></gallery-slider>\n\n <gallery-bullets *ngIf=\"config.bullets\" [state]=\"state\" [config]=\"config.bullets\"></gallery-bullets>\n\n <gallery-loader *ngIf=\"state.loading\" [config]=\"config.loader\"></gallery-loader>\n\n </div>\n\n <gallery-player *ngIf=\"config.player\" [config]=\"config.player\"></gallery-player>\n\n <gallery-text *ngIf=\"config.description\" [state]=\"state\" [config]=\"config.description\"></gallery-text>\n\n <div *ngIf=\"isOverlay\" class=\"g-btn-close\" (tapClick)=\"gallery.close()\"></div>\n\n </div>\n ","styles":["\n gallery-main {\n position: relative;\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n width: 100%;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center; }\n\n .g-container {\n overflow: hidden;\n position: relative;\n max-height: 100%;\n max-width: 100%;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column; }\n @media (max-width: 480px) {\n .g-container {\n width: 100% !important;\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n -webkit-box-orient: vertical !important;\n -webkit-box-direction: normal !important;\n -ms-flex-direction: column !important;\n flex-direction: column !important; } }\n\n .g-box {\n height: 100%; }\n\n .g-box, gallery-slider {\n position: relative;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n -webkit-box-ordinal-group: 2;\n -ms-flex-order: 1;\n order: 1;\n height: 100%; }\n\n .-reset {\n -webkit-transition: all linear 0.3s;\n transition: all linear 0.3s;\n -webkit-transform: translate3d(0px, 0px, 0px) !important;\n transform: translate3d(0px, 0px, 0px) !important; }\n\n /** Hide slider on loading */\n .-invisible {\n -webkit-transition: none !important;\n transition: none !important; }\n .-invisible .g-item {\n opacity: 0;\n -webkit-transition: none;\n transition: none; }\n\n .g-btn-close {\n position: absolute;\n right: 0.73em;\n top: 0.73em;\n z-index: 60;\n cursor: pointer;\n width: 30px;\n height: 30px;\n -webkit-transition: all linear 0.2s;\n transition: all linear 0.2s;\n background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUwIDUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MCA1MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxjaXJjbGUgc3R5bGU9ImZpbGw6I0Q3NUE0QTsiIGN4PSIyNSIgY3k9IjI1IiByPSIyNSIvPjxwb2x5bGluZSBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojRkZGRkZGO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwOyIgcG9pbnRzPSIxNiwzNCAyNSwyNSAzNCwxNiAiLz48cG9seWxpbmUgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6I0ZGRkZGRjtzdHJva2Utd2lkdGg6MjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDsiIHBvaW50cz0iMTYsMTYgMjUsMjUgMzQsMzQgIi8+PC9zdmc+); }\n .g-btn-close:active {\n -webkit-transform: rotate(180deg) scale(0.9);\n transform: rotate(180deg) scale(0.9); }\n\n .empty {\n color: white;\n background-color: #121519;\n position: absolute;\n width: 100%;\n height: 100%;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center; }\n "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"state":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"isOverlay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Gallery"}]}]}},"ɵm":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gallery-slider","template":"\n <gallery-items [current]=\"state.items[state.currIndex]\"\n [config]=\"config\">\n </gallery-items>\n\n <gallery-nav *ngIf=\"config.navigation && (showNav | async)\"\n [state]=\"state\"\n [config]=\"config.navigation\">\n </gallery-nav>\n ","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"state":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Gallery"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵn":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gallery-lightbox","template":"\n <gallery [@slideGalleryIn] [isOverlay]=\"true\"></gallery>","styles":["\n .g-backdrop {\n background-color: rgba(0, 0, 0, 0.8); }\n\n .g-overlay {\n margin: auto; }\n\n gallery-lightbox {\n position: relative;\n display: block;\n max-width: 94vh;\n max-height: 80vh; }\n gallery-lightbox gallery {\n border-radius: 1.32em;\n overflow: hidden;\n margin: 0;\n display: block;\n width: 100%;\n height: 100%;\n -webkit-box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);\n box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); }\n\n .cdk-overlay-container, .cdk-global-overlay-wrapper {\n pointer-events: none;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%; }\n\n .cdk-overlay-container {\n position: fixed;\n z-index: 1000; }\n\n .cdk-global-overlay-wrapper {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n position: absolute;\n z-index: 1000; }\n\n .cdk-overlay-pane {\n position: absolute;\n pointer-events: auto;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n z-index: 1000; }\n\n .cdk-overlay-backdrop {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 1000;\n pointer-events: auto;\n -webkit-tap-highlight-color: transparent;\n -webkit-transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n opacity: 0; }\n .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {\n opacity: 0.48; }\n\n .cdk-overlay-dark-backdrop {\n background: rgba(0, 0, 0, 0.6); }\n\n .cdk-overlay-transparent-backdrop {\n background: none; }\n\n .cdk-global-scrollblock {\n position: fixed;\n width: 100%;\n overflow-y: scroll; }\n "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"},"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger"},"arguments":["slideGalleryIn",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state"},"arguments":["void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style"},"arguments":[{"transform":"translateY(25%) scale(0.9)","opacity":0}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state"},"arguments":["enter",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style"},"arguments":[{"transform":"translateY(0%) scale(1)","opacity":1}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state"},"arguments":["exit",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style"},"arguments":[{"transform":"translateY(25%)","opacity":0}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition"},"arguments":["* => *",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate"},"arguments":["400ms cubic-bezier(0.25, 0.8, 0.25, 1)"]}]}]]}]}]}],"members":{"keyDown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onKeyDown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:keydown",["$event"]]}]}]}},"ɵo":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[gallerize]"}]}],"members":{"gallerize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"},{"__symbolic":"reference","name":"Gallery"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ɵp":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[tapClick]"}]}],"members":{"tapClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Gallery"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngOnInit":[{"__symbolic":"method"}],"setTapEvent":[{"__symbolic":"method"}]}},"ɵq":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[lazyImage]"}]}],"members":{"lazyImage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["lazyImage"]}]}],"loading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"getImage":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}},"origins":{"Gallery":"./services/gallery.service","GalleryConfig":"./models/gallery.config","GalleryDescConfig":"./models/gallery.config","GalleryThumbConfig":"./models/gallery.config","GalleryNavConfig":"./models/gallery.config","GalleryLoaderConfig":"./models/gallery.config","GalleryPlayConfig":"./models/gallery.config","GalleryBulletConfig":"./models/gallery.config","GalleryLightboxConfig":"./models/gallery.config","GalleryState":"./models/gallery.models","GalleryItem":"./models/gallery.models","GalleryAction":"./models/gallery.models","ɵa":"./gallery.module","GalleryModule":"./gallery.module","ɵb":"./services/gallery.token","ɵc":"./models","ɵd":"./components/gallery/gallery.component","ɵe":"./components/gallery-nav/gallery-nav.component","ɵf":"./components/gallery-thumb/gallery-thumb.component","ɵg":"./components/gallery-text/gallery-text.component","ɵh":"./components/gallery-items/gallery-items.component","ɵi":"./components/gallery-loader/gallery-loader.component","ɵj":"./components/gallery-bullets/gallery-bullets.component","ɵk":"./components/gallery-player/gallery-player.component","ɵl":"./components/gallery-main/gallery-main.component","ɵm":"./components/gallery-slider/gallery-slider.component","ɵn":"./components/gallery-lightbox/gallery-lightbox.component","ɵo":"./directives/gallerize.directive","ɵp":"./directives/tap.directive","ɵq":"./directives/lazy.directive"},"importAs":"ng-gallery"}
{"__symbolic":"module","version":4,"metadata":{"Gallery":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","name":"ɵb"}]}],null],"parameters":[{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"Overlay"}]}],"handleKeydown":[{"__symbolic":"method"}],"setState":[{"__symbolic":"method"}],"setConfig":[{"__symbolic":"method"}],"load":[{"__symbolic":"method"}],"set":[{"__symbolic":"method"}],"next":[{"__symbolic":"method"}],"prev":[{"__symbolic":"method"}],"reset":[{"__symbolic":"method"}],"play":[{"__symbolic":"method"}],"stop":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"initialized":[{"__symbolic":"method"}],"loaded":[{"__symbolic":"method"}],"imageChanged":[{"__symbolic":"method"}],"imageLoading":[{"__symbolic":"method"}],"navigationClick":[{"__symbolic":"method"}],"thumbnailClick":[{"__symbolic":"method"}],"bulletClick":[{"__symbolic":"method"}],"opened":[{"__symbolic":"method"}],"closed":[{"__symbolic":"method"}],"playing":[{"__symbolic":"method"}],"stopped":[{"__symbolic":"method"}]}},"GalleryConfig":{"__symbolic":"interface"},"GalleryDescConfig":{"__symbolic":"interface"},"GalleryThumbConfig":{"__symbolic":"interface"},"GalleryNavConfig":{"__symbolic":"interface"},"GalleryLoaderConfig":{"__symbolic":"interface"},"GalleryPlayConfig":{"__symbolic":"interface"},"GalleryBulletConfig":{"__symbolic":"interface"},"GalleryLightboxConfig":{"__symbolic":"interface"},"GalleryState":{"__symbolic":"interface"},"GalleryItem":{"__symbolic":"interface"},"GalleryAction":{"INIT":"init","LOAD":"load","NEXT":"next","PREV":"prev","OTHER":"other","PLAYING":"playing","STOPPED":"stopped","OPENED":"opened","CLOSED":"closed","LOADING_START":"loading_start","LOADING_END":"loading_end","BULLET_CLICK":"bullet_click","THUMB_CLICK":"thumb_click"},"ɵa":{"__symbolic":"function","parameters":["config","overlay"],"value":{"__symbolic":"new","expression":{"__symbolic":"reference","name":"Gallery"},"arguments":[{"__symbolic":"reference","name":"config"},{"__symbolic":"reference","name":"overlay"}]}},"GalleryModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"OverlayModule"}],"declarations":[{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","name":"ɵg"},{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","name":"ɵi"},{"__symbolic":"reference","name":"ɵj"},{"__symbolic":"reference","name":"ɵk"},{"__symbolic":"reference","name":"ɵl"},{"__symbolic":"reference","name":"ɵm"},{"__symbolic":"reference","name":"ɵn"},{"__symbolic":"reference","name":"ɵo"},{"__symbolic":"reference","name":"ɵp"},{"__symbolic":"reference","name":"ɵq"}],"exports":[{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵo"}],"entryComponents":[{"__symbolic":"reference","name":"ɵn"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":["config"],"value":{"ngModule":{"__symbolic":"reference","name":"GalleryModule"},"providers":[{"provide":{"__symbolic":"reference","name":"ɵb"},"useValue":{"__symbolic":"reference","name":"config"}},{"provide":{"__symbolic":"reference","name":"Gallery"},"useFactory":{"__symbolic":"reference","name":"ɵa"},"deps":[{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"Overlay"}]}]}}}},"ɵb":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken"},"arguments":["config"]},"ɵd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gallery","template":"\n <gallery-main [state]=\"gallery.state$ | async\"\n [config]=\"gallery.config$ | async\"\n [isOverlay]=\"isOverlay\"></gallery-main>\n ","styles":["gallery {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n height: 100%;\n margin-bottom: 2em;\n z-index: 1;\n overflow: hidden; }\n gallery * {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n overflow: hidden; }\n\n.-bottom {\n bottom: 0; }\n"],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"isOverlay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Gallery"}]}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ɵe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gallery-nav","template":"<div *ngIf=\"state.items.length\" class=\"g-nav\">\n\n <div class=\"g-nav-prev {{config.nextClass}}\"\n (tapClick)=\"gallery.prev()\">\n\n <i class=\"prev-arrow-ico\"></i>\n </div>\n\n <div class=\"g-nav-next {{config.prevClass}}\"\n (tapClick)=\"gallery.next()\">\n\n <i class=\"next-arrow-ico\"></i>\n </div>\n\n</div>\n","styles":["gallery-nav {\n z-index: 15;\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex; }\n @media (max-width: 480px) {\n gallery-nav {\n display: none; } }\n\n.g-nav {\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n height: 100%;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-direction: row;\n flex-direction: row;\n opacity: 0;\n -webkit-transition: all linear 0.4s;\n transition: all linear 0.4s;\n cursor: pointer; }\n .g-nav:hover {\n opacity: 1; }\n .g-nav-next, .g-nav-prev {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n height: 100%;\n opacity: 0.7;\n position: relative;\n overflow: hidden;\n -webkit-transition: all 0.2s ease;\n transition: all 0.2s ease;\n z-index: 0; }\n .g-nav-next:hover, .g-nav-prev:hover {\n opacity: 1; }\n .g-nav-next {\n padding-right: 0.7em;\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end; }\n .g-nav-prev {\n padding-left: 0.7em;\n width: 20%; }\n\n.next-arrow-ico, .prev-arrow-ico {\n width: 45px;\n height: 80px; }\n\n.next-arrow-ico {\n background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PiAgPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQxNC40OTYgNDE0LjQ5NiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDE0LjQ5NiA0MTQuNDk2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+IDxkZWZzIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGZpbHRlciBpZD0iZHJvcHNoYWRvdyIgPiAgPGZlR2F1c3NpYW5CbHVyIGluPSJTb3VyY2VBbHBoYSIgc3RkRGV2aWF0aW9uPSIzIi8+ICAgPGZlT2Zmc2V0IGR4PSIyIiBkeT0iMiIgcmVzdWx0PSJvZmZzZXRibHVyIi8+ICAgPGZlTWVyZ2U+IDxmZU1lcmdlTm9kZS8+PGZlTWVyZ2VOb2RlIGluPSJTb3VyY2VHcmFwaGljIi8+ICAgPC9mZU1lcmdlPjwvZmlsdGVyPjwvZGVmcz4gIDxwb2x5Z29uIHN0eWxlPSJmaWxsOiNmZmY7IiBmaWx0ZXI9InVybCgjZHJvcHNoYWRvdykiIHBvaW50cz0iMTE4LjEyNiwwIDg5Ljc5NiwyOC4yMzggMjY4LjIyMywyMDcuMjQ4IDg5Ljc5NiwzODYuMjU4IDExOC4xMjYsNDE0LjQ5NiAzMjQuNywyMDcuMjQ4ICIvPjwvc3ZnPg==) no-repeat center center; }\n\n.prev-arrow-ico {\n background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0MTQuNDk2IDQxNC40OTYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQxNC40OTYgNDE0LjQ5NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxkZWZzIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGZpbHRlciBpZD0iZHJvcHNoYWRvdyIgPiAgPGZlR2F1c3NpYW5CbHVyIGluPSJTb3VyY2VBbHBoYSIgc3RkRGV2aWF0aW9uPSIzIi8+ICAgPGZlT2Zmc2V0IGR4PSIyIiBkeT0iMiIgcmVzdWx0PSJvZmZzZXRibHVyIi8+ICAgPGZlTWVyZ2U+IDxmZU1lcmdlTm9kZS8+PGZlTWVyZ2VOb2RlIGluPSJTb3VyY2VHcmFwaGljIi8+ICAgPC9mZU1lcmdlPjwvZmlsdGVyPjwvZGVmcz48cG9seWdvbiBzdHlsZT0iZmlsbDojZmZmOyIgZmlsdGVyPSJ1cmwoI2Ryb3BzaGFkb3cpIiBwb2ludHM9IjMyNC43LDI4LjIzOCAyOTYuMzcsMCA4OS43OTYsMjA3LjI0OCAyOTYuMzcsNDE0LjQ5NiAzMjQuNywzODYuMjU4IDE0Ni4yNzMsMjA3LjI0OCAiLz48L3N2Zz4=) no-repeat center center; }\n"],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"state":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Gallery"}]}]}},"ɵf":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gallery-thumb","template":"<div *ngIf=\"state$ | async; let state\"\n class=\"g-thumb-container {{config.className}}\"\n [style.height.px]=\"config.height\">\n\n <div class=\"g-thumbs\" [ngStyle]=\"state.position\">\n\n <div *ngFor=\"let item of state.items\"\n class=\"g-thumb{{item.activeClass}}\"\n [style.width.px]=\"config.width\"\n [style.height.px]=\"config.height\">\n\n <div class=\"g-thumb-image\"\n [style.backgroundImage]=\"item.thumbnail\"\n (tapClick)=\"setCurrentItem(item.index, state.currIndex)\">\n </div>\n </div>\n\n </div>\n\n</div>\n","styles":["gallery-thumb {\n display: block;\n z-index: 1;\n overflow: unset; }\n\n.g-thumb-container {\n position: relative;\n z-index: 206;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n overflow: unset;\n margin: 20px 0; }\n\n.g-thumbs {\n position: absolute;\n top: 0;\n left: 50%;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-transition: -webkit-transform linear 300ms;\n transition: -webkit-transform linear 300ms;\n transition: transform linear 300ms;\n transition: transform linear 300ms, -webkit-transform linear 300ms;\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0); }\n\n.g-thumb {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n opacity: 0.5;\n padding: 6px;\n -webkit-transition: all ease 500ms;\n transition: all ease 500ms; }\n\n.g-thumb-current {\n opacity: 1;\n padding: 2px; }\n\n.g-thumb-image {\n cursor: pointer;\n width: 100%;\n height: 100%;\n border-radius: 3px;\n background-position: center center;\n background-size: cover;\n -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);\n box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);\n -webkit-transition: margin ease 600ms;\n transition: margin ease 600ms; }\n"],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Gallery"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"translateThumbnails":[{"__symbolic":"method"}],"thumbnailsFactory":[{"__symbolic":"method"}],"setCurrentItem":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵg":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gallery-text","template":"<div class=\"g-text-container {{config.className}}\" [ngStyle]=\"config.style\">\n\n <div *ngIf=\"config.text\" class=\"g-text\" [innerHtml]=\"state.items[state.currIndex]?.text\"></div>\n\n <div *ngIf=\"config.counter\" class=\"g-counter\">\n {{(state.currIndex + 1) + '/' + state.items.length}}\n </div>\n</div>\n\n","styles":["gallery-text {\n position: relative;\n left: 0;\n right: 0;\n z-index: 25; }\n\n.g-text-container {\n padding: 1em 2em;\n color: #ccc;\n font-size: 13px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-direction: row;\n flex-direction: row;\n -ms-flex-line-pack: center;\n align-content: center;\n background-clip: padding-box;\n -webkit-font-smoothing: antialiased; }\n\n.g-text {\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1; }\n .g-text a {\n color: #00b0e8; }\n"],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"state":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵh":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gallery-items","template":"\n <div *ngIf=\"current\" class=\"g-item\">\n <div class=\"g-img\"\n [style.backgroundSize]=\"config.imageSize\"\n [lazyImage]=\"current.src\"\n (loading)=\"onLoad($event)\"></div>\n </div>\n ","styles":["gallery-items {\n z-index: 3;\n -webkit-box-ordinal-group: 2;\n -ms-flex-order: 1;\n order: 1;\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-transform: translate3d(0px, 0px, 0px);\n transform: translate3d(0px, 0px, 0px); }\n\n.g-item {\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n opacity: 1;\n -webkit-transition: opacity ease-in 300ms;\n transition: opacity ease-in 300ms; }\n .g-item .g-img {\n -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);\n box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);\n background-position: center center;\n background-size: contain;\n background-repeat: no-repeat;\n pointer-events: none;\n display: block;\n width: 100%;\n height: 100%; }\n"],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"current":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Gallery"}]}],"onLoad":[{"__symbolic":"method"}]}},"ɵi":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gallery-loader","template":"\n <div class=\"g-loader\">\n <img #icon class=\"g-loader-img\">\n </div>\n ","styles":["gallery-loader {\n z-index: 50; }\n\n.g-loader {\n z-index: 50;\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n top: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n padding: 1em;\n -webkit-animation: fadeIn 1s;\n animation: fadeIn 1s; }\n\n.g-loader-img {\n width: 50px; }\n\n@-webkit-keyframes fadeIn {\n from {\n opacity: 0; }\n to {\n opacity: 1; } }\n\n@keyframes fadeIn {\n from {\n opacity: 0; }\n to {\n opacity: 1; } }\n"],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"icon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["icon"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Gallery"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵj":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gallery-bullets","template":"<div class=\"g-bullets-container {{config.className}}\"\n [class.-bottom]=\"config.position === 'bottom'\">\n <div class=\"g-bullet\"\n *ngFor=\"let item of state.items; let i = index\"\n [class.g-bullet-curr]=\"i === state.currIndex\"\n (tapClick)=\"onTapClick(i)\">\n\n <div class=\"g-bullet-inner\" [ngStyle]=\"config.style\"></div>\n\n </div>\n</div>\n","styles":[".g-bullets-container {\n position: absolute;\n width: 100%;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center; }\n\n.g-bullet {\n cursor: pointer;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n z-index: 20; }\n\n.g-bullet-inner {\n margin: 1em;\n height: 4px;\n width: 4px;\n background-color: rgba(255, 255, 255, 0.5);\n border-radius: 2px;\n -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);\n box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);\n -webkit-transition: all ease 0.2s;\n transition: all ease 0.2s; }\n\n.g-bullet-curr .g-bullet-inner {\n -webkit-transform: scale(2);\n transform: scale(2);\n background-color: white; }\n"],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"state":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Gallery"}]}],"onTapClick":[{"__symbolic":"method"}]}},"ɵk":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gallery-player","template":"<div *ngIf=\"progress$ | async; let style\"\n class=\"g-progress-bar\"\n [class.-bottom]=\"config.position === 'bottom'\">\n\n <div *ngIf=\"config.progress\"\n class=\"g-progress\"\n [ngStyle]=\"style\"></div>\n</div>\n","styles":[".g-progress-bar {\n position: absolute;\n z-index: 70;\n left: 0;\n right: 0;\n overflow: unset;\n width: 100%; }\n\n.g-progress {\n width: 0;\n height: 2px;\n z-index: 60;\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n background-color: rgba(255, 255, 255, 0.8); }\n"],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Gallery"}]}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵl":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gallery-main","template":"<div *ngIf=\"state.items?.length\" class=\"g-container {{config.className}}\" [ngStyle]=\"config.style\">\n\n <gallery-thumb *ngIf=\"config.thumbnails\" [config]=\"config.thumbnails\"></gallery-thumb>\n\n <div class=\"g-box\">\n\n <gallery-slider [state]=\"state\" [config]=\"config\" [class.-invisible]=\"state.loading\"></gallery-slider>\n\n <gallery-bullets *ngIf=\"config.bullets\" [state]=\"state\" [config]=\"config.bullets\"></gallery-bullets>\n\n <gallery-loader *ngIf=\"state.loading\" [config]=\"config.loader\"></gallery-loader>\n\n </div>\n\n <gallery-player *ngIf=\"config.player\" [config]=\"config.player\"></gallery-player>\n\n <gallery-text *ngIf=\"config.description\" [state]=\"state\" [config]=\"config.description\"></gallery-text>\n\n <div *ngIf=\"isOverlay\" class=\"g-btn-close\" (tapClick)=\"gallery.close()\"></div>\n\n</div>\n","styles":["gallery-main {\n position: relative;\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n width: 100%;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center; }\n\n.g-container {\n overflow: hidden;\n position: relative;\n max-height: 100%;\n max-width: 100%;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column; }\n @media (max-width: 480px) {\n .g-container {\n width: 100% !important;\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n -webkit-box-orient: vertical !important;\n -webkit-box-direction: normal !important;\n -ms-flex-direction: column !important;\n flex-direction: column !important; } }\n\n.g-box {\n height: 100%; }\n\n.g-box, gallery-slider {\n position: relative;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n -webkit-box-ordinal-group: 2;\n -ms-flex-order: 1;\n order: 1;\n height: 100%; }\n\n.-reset {\n -webkit-transition: all linear 0.3s;\n transition: all linear 0.3s;\n -webkit-transform: translate3d(0px, 0px, 0px) !important;\n transform: translate3d(0px, 0px, 0px) !important; }\n\n/** Hide slider on loading */\n.-invisible {\n -webkit-transition: none !important;\n transition: none !important; }\n .-invisible .g-item {\n opacity: 0;\n -webkit-transition: none;\n transition: none; }\n\n.g-btn-close {\n position: absolute;\n right: 0.73em;\n top: 0.73em;\n z-index: 60;\n cursor: pointer;\n width: 30px;\n height: 30px;\n -webkit-transition: all linear 0.2s;\n transition: all linear 0.2s;\n background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUwIDUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MCA1MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxjaXJjbGUgc3R5bGU9ImZpbGw6I0Q3NUE0QTsiIGN4PSIyNSIgY3k9IjI1IiByPSIyNSIvPjxwb2x5bGluZSBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojRkZGRkZGO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwOyIgcG9pbnRzPSIxNiwzNCAyNSwyNSAzNCwxNiAiLz48cG9seWxpbmUgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6I0ZGRkZGRjtzdHJva2Utd2lkdGg6MjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDsiIHBvaW50cz0iMTYsMTYgMjUsMjUgMzQsMzQgIi8+PC9zdmc+); }\n .g-btn-close:active {\n -webkit-transform: rotate(180deg) scale(0.9);\n transform: rotate(180deg) scale(0.9); }\n\n.empty {\n color: white;\n background-color: #121519;\n position: absolute;\n width: 100%;\n height: 100%;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center; }\n"],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"state":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"isOverlay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Gallery"}]}]}},"ɵm":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gallery-slider","template":"<gallery-items [current]=\"state.items[state.currIndex]\"\n [config]=\"config\">\n</gallery-items>\n\n<gallery-nav *ngIf=\"config.navigation && (showNav | async)\"\n [state]=\"state\"\n [config]=\"config.navigation\">\n</gallery-nav>\n","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"state":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Gallery"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵn":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gallery-lightbox","template":"\n <gallery [@slideGalleryIn] [isOverlay]=\"true\"></gallery>","styles":[".g-backdrop {\n background-color: rgba(0, 0, 0, 0.8); }\n\n.g-overlay {\n margin: auto; }\n\ngallery-lightbox {\n position: relative;\n display: block;\n max-width: 94vh;\n max-height: 80vh; }\n gallery-lightbox gallery {\n border-radius: 1.32em;\n overflow: hidden;\n margin: 0;\n display: block;\n width: 100%;\n height: 100%;\n -webkit-box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);\n box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); }\n\n.cdk-overlay-container, .cdk-global-overlay-wrapper {\n pointer-events: none;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%; }\n\n.cdk-overlay-container {\n position: fixed;\n z-index: 1000; }\n\n.cdk-global-overlay-wrapper {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n position: absolute;\n z-index: 1000; }\n\n.cdk-overlay-pane {\n position: absolute;\n pointer-events: auto;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n z-index: 1000; }\n\n.cdk-overlay-backdrop {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 1000;\n pointer-events: auto;\n -webkit-tap-highlight-color: transparent;\n -webkit-transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n opacity: 0; }\n .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {\n opacity: 0.48; }\n\n.cdk-overlay-dark-backdrop {\n background: rgba(0, 0, 0, 0.6); }\n\n.cdk-overlay-transparent-backdrop {\n background: none; }\n\n.cdk-global-scrollblock {\n position: fixed;\n width: 100%;\n overflow-y: scroll; }\n"],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"},"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger"},"arguments":["slideGalleryIn",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state"},"arguments":["void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style"},"arguments":[{"transform":"translateY(25%) scale(0.9)","opacity":0}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state"},"arguments":["enter",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style"},"arguments":[{"transform":"translateY(0%) scale(1)","opacity":1}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state"},"arguments":["exit",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style"},"arguments":[{"transform":"translateY(25%)","opacity":0}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition"},"arguments":["* => *",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate"},"arguments":["400ms cubic-bezier(0.25, 0.8, 0.25, 1)"]}]}]]}]}]}],"members":{"keyDown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onKeyDown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:keydown",["$event"]]}]}]}},"ɵo":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[gallerize]"}]}],"members":{"gallerize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"},{"__symbolic":"reference","name":"Gallery"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ɵp":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[tapClick]"}]}],"members":{"tapClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Gallery"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngOnInit":[{"__symbolic":"method"}],"setTapEvent":[{"__symbolic":"method"}]}},"ɵq":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[lazyImage]"}]}],"members":{"lazyImage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["lazyImage"]}]}],"loading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"getImage":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}},"origins":{"Gallery":"./services/gallery.service","GalleryConfig":"./models/gallery.config","GalleryDescConfig":"./models/gallery.config","GalleryThumbConfig":"./models/gallery.config","GalleryNavConfig":"./models/gallery.config","GalleryLoaderConfig":"./models/gallery.config","GalleryPlayConfig":"./models/gallery.config","GalleryBulletConfig":"./models/gallery.config","GalleryLightboxConfig":"./models/gallery.config","GalleryState":"./models/gallery.models","GalleryItem":"./models/gallery.models","GalleryAction":"./models/gallery.models","ɵa":"./gallery.module","GalleryModule":"./gallery.module","ɵb":"./services/gallery.token","ɵc":"./models","ɵd":"./components/gallery/gallery.component","ɵe":"./components/gallery-nav/gallery-nav.component","ɵf":"./components/gallery-thumb/gallery-thumb.component","ɵg":"./components/gallery-text/gallery-text.component","ɵh":"./components/gallery-items/gallery-items.component","ɵi":"./components/gallery-loader/gallery-loader.component","ɵj":"./components/gallery-bullets/gallery-bullets.component","ɵk":"./components/gallery-player/gallery-player.component","ɵl":"./components/gallery-main/gallery-main.component","ɵm":"./components/gallery-slider/gallery-slider.component","ɵn":"./components/gallery-lightbox/gallery-lightbox.component","ɵo":"./directives/gallerize.directive","ɵp":"./directives/tap.directive","ɵq":"./directives/lazy.directive"},"importAs":"ng-gallery"}

@@ -1,1 +0,44 @@

{"name":"ng-gallery","description":"Angular image gallery simplifies the process of creating beautiful image gallery for the web and mobile devices.","version":"1.0.0","filename":"./src/ng-gallery.js","homepage":"http://github.com/murhafsousli/ng-gallery","author":{"name":"Murhaf Sousli","url":"http://github.com/murhafsousli"},"repository":{"type":"git","url":"git://github.com/murhafsousli/ng-gallery.git"},"bugs":{"url":"http://github.com/murhafsousli/ng-gallery/issues"},"license":"MIT","keywords":["angular","ionic","gallery","images","lightbox","modal","slider","overlay","slideshow","carousel","lazyload"],"private":false,"peerDependencies":{"@angular/common":">=5.0.0","@angular/animations":">=5.0.0","@angular/cdk":">=5.0.0-rc.1","@angular/material":">=5.0.0-rc.1"},"main":"bundles/ng-gallery.umd.js","module":"ng-gallery.es5.js","es2015":"ng-gallery.js","typings":"ng-gallery.d.ts","metadata":"ng-gallery.metadata.json"}
{
"name": "ng-gallery",
"description": "Angular image gallery simplifies the process of creating beautiful image gallery for the web and mobile devices.",
"version": "1.0.1",
"filename": "./src/ng-gallery.js",
"homepage": "http://github.com/murhafsousli/ng-gallery",
"author": {
"name": "Murhaf Sousli",
"url": "http://github.com/murhafsousli"
},
"repository": {
"type": "git",
"url": "git://github.com/murhafsousli/ng-gallery.git"
},
"bugs": {
"url": "http://github.com/murhafsousli/ng-gallery/issues"
},
"license": "MIT",
"keywords": [
"angular",
"ionic",
"gallery",
"images",
"lightbox",
"modal",
"slider",
"overlay",
"slideshow",
"carousel",
"lazyload"
],
"private": false,
"peerDependencies": {
"@angular/common": ">=5.0.0",
"@angular/animations": ">=5.0.0",
"@angular/cdk": ">=5.0.0",
"@angular/material": ">=5.0.0"
},
"main": "bundles/ng-gallery.umd.js",
"module": "esm5/ng-gallery.js",
"es2015": "esm2015/ng-gallery.js",
"typings": "ng-gallery.d.ts",
"metadata": "ng-gallery.metadata.json"
}
<p align="center">
<img height="150px" width="150px" src="https://rawgit.com/MurhafSousli/ng-gallery/master/assets/logo.svg" style="max-width:100%;">
<img height="150px" width="150px" src="https://rawgit.com/MurhafSousli/ng-gallery/master/src/assets/logo.svg" style="max-width:100%;">
</p>

@@ -15,6 +15,2 @@ <h1 align="center">Angular Image Gallery</h1>

<p align="center">
<img src="assets/screenshot.png" style="max-width:100%;">
</p>
## Installation

@@ -24,8 +20,6 @@

`$ npm install --save @angular/cdk ngx-gallery`
`$ npm install --save @angular/cdk ng-gallery`
This plugin depends on Angular CDK for the lightbox feature, you don't need to import anything from the CDK, just make sure that it is installed in the project.
### SystemJS

@@ -35,11 +29,20 @@

In your systemjs config file, `map` needs to tell the System loader where to look for `ng-gallery`:
In your systemjs config file, `map` needs to tell the System loader where to look for `cdk` and `ng-gallery`:
```js
map: {
'@angular/cdk': 'node_modules/@angular/cdk/bundles/cdk.umd.js',
'@angular/cdk/bidi': 'node_modules/@angular/cdk/bundles/cdk-bidi.umd.js',
'@angular/cdk/coercion': 'node_modules/@angular/cdk/bundles/cdk-coercion.umd.js',
'@angular/cdk/keycodes': 'node_modules/@angular/cdk/bundles/cdk-keycodes.umd.js',
'@angular/cdk/platform': 'node_modules/@angular/cdk/bundles/cdk-platform.umd.js',
'@angular/cdk/portal': 'node_modules/@angular/cdk/bundles/cdk-portal.umd.js',
'@angular/cdk/overlay': 'node_modules/@angular/cdk/bundles/cdk-overlay.umd.js',
'@angular/cdk/scrolling': 'node_modules/@angular/cdk/bundles/cdk-scrolling.umd.js',
'ng-gallery': 'node_modules/ng-gallery/bundles/ng-gallery.umd.js',
}
```
Here is a [stackblitz](https://stackblitz.com/edit/ng-gallery)
Here is a [plunkr](https://plnkr.co/edit/D2bR0SQ5eI63e5BLbIrz?p=preview)/[stackblitz](https://stackblitz.com/edit/ng-gallery)
## Usage

@@ -54,7 +57,7 @@

import { GalleryModule } from 'ng-gallery';
export const config : GalleryConfig = {
// ...
}
@NgModule({

@@ -79,15 +82,14 @@ imports: [

Or if you want to open the gallery in an overlay, use the service `Gallery.open()`, see [gallery lightbox example](https://murhafsousli.github.io/ng-gallery/#/lightbox).
### Load image
### Load image
Use the service `Gallery` to load images
```js
```ts
import { Gallery, GalleryItem } from 'ng-gallery';
export class AppComponent implements OnInit {
constructor(public gallery: Gallery) { }
ngOnInit() {

@@ -102,3 +104,3 @@ const images: GalleryItem[] = [

];
this.gallery.load(images);

@@ -111,13 +113,16 @@ }

The directive `[gallerize]` will automatically detect all images inside the host element and hook them with the gallery lightbox.
The directive `[gallerize]` will automatically detect all images inside the host element and hook them with the gallery lightbox
This feature is useful in case you get the images as HTML string such as WordPress API
```html
<div gallerize>
<img src="assets/img/img3.jpg" alt="Spring">
<img src="assets/img/img4.jpg" alt="Fire">
<img src="assets/img/img5.jpg" alt="Peacock">
<img src="assets/img/thumb/img3.jpg" src-full="assets/img/img3.jpg" alt="Spring">
<img src="assets/img/thumb/img4.jpg" src-full="assets/img/img3.jpg" alt="Fire">
<img src="assets/img/thumb/img5.jpg" src-full="assets/img/img3.jpg" alt="Peacock">
</div>
```
If `src-full` attribute is not defined, `src` will beused for the full size.
You can also detect images using their class, `[gallerize]="'class-name'"`

@@ -133,45 +138,36 @@

### Listeners
## Gallery Functions
You can listen to gallery actions using the state
| Function Name | Description |
| --------------------------- | --------------------------------------------------- |
| **setConfig(config)** | Set gallery config |
| **load(items)** | Load new items and reset the state |
| **set(index)** | Set active item |
| **next()** | Set next item |
| **prev()** | Set prev item |
| **play()** | Start slide show |
| **stop()** | End slide show |
| **open(index?)** | Open gallery lightbox |
| **close()** | Close gallery lightbox |
| **reset()** | Reset gallery to initial state |
```ts
import { Gallery, GalleryAction } from 'ng-gallery';
## Gallery Events
export class AppComponent implements OnInit {
| Event Name | Description |
| --------------------------- | --------------------------------------------------- |
| **initialized()** | Emits when gallery is initialized/reset |
| **loaded()** | Emits when images is loaded into the gallery |
| **imageChanged()** | Emits when image is changed |
| **imageLoading()** | Emits when image lazy loading is started/completed |
| **navigationClick()** | Emits when navigation is clicked |
| **thumbnailClick()** | Emits when thumbnail is clicked |
| **bulletClick()** | Emits when bullet is clicked |
| **opened()** | Emits when lightbox is opened |
| **closed()** | Emits when lightbox is closed |
| **playing()** | Emits when slide show is started |
| **stopped()** | Emits when slide show is stopped |
constructor(public gallery: Gallery) {
}
ngOnInit() {
this.gallery.state$
.filter(state => state.action === GalleryAction.CLOSED)
.subscribe(state => {
// do something when lightbox is closed
});
}
```
## Gesture Support (optional)
#### Available events
- **INIT** : On state init/reset
- **LOAD** : When gallery is loaded with images
- **NEXT** : Next image
- **PREV** : Prev image
- **PLAYING** : slide-show started
- **STOPPED** : slide-show stopped
- **OPENED** : Lightbox opened
- **CLOSED** : Lightbox closed
- **LOADING_START** : On image lazy load started
- **LOADING_END** : On image lazy load finished
- **BULLET_CLICK** : On bullet click
- **THUMB_CLICK** : On thumbnail click
- **OTHER** : When action is not defined
### Gesture Support (optional)
Gallery Module relies on HammerJS for gestures, make sure it is loaded into the application.

@@ -195,3 +191,2 @@

## Issues

@@ -201,3 +196,2 @@

## Author

@@ -207,3 +201,3 @@

- [github/murhafsousli](https://github.com/MurhafSousli)
- [twitter/murhafsousli](https://twitter.com/MurhafSousli)
- [github/murhafsousli](https://github.com/MurhafSousli)
- [twitter/murhafsousli](https://twitter.com/MurhafSousli)

@@ -21,3 +21,3 @@ import { Overlay } from '@angular/cdk/overlay';

/** Handles global key presses while the lightbox is opened
* @param {KeyboardEvent} event
* @param event
*/

@@ -27,3 +27,3 @@ private handleKeydown(event);

* Set gallery state
* @param {GalleryState} state
* @param state
*/

@@ -33,3 +33,3 @@ setState(state: GalleryState): void;

* Set gallery config
* @param {GalleryConfig} config
* @param config
*/

@@ -39,3 +39,3 @@ setConfig(config: GalleryConfig): void;

* Load items and reset the state
* @param {GalleryItem[]} items - Gallery images data
* @param items - Gallery images data
*/

@@ -45,4 +45,4 @@ load(items: GalleryItem[]): void;

* Set active item
* @param {number} i - Active Index
* @param {GalleryAction} action - Action type
* @param i - Active Index
* @param action - Action type
*/

@@ -72,3 +72,3 @@ set(i: number, action?: GalleryAction): void;

* Open gallery lightbox
* @param {number} i - Image index
* @param i - Image index
*/

@@ -82,56 +82,45 @@ open(i?: number): void;

/**
* Emits gallery is initialized/reset
* @returns {Observable<GalleryState>}
* Stream that emits when gallery is initialized/reset
*/
initialized(): Observable<GalleryState>;
/**
* Emits when images is loaded into the gallery
* @returns {Observable<GalleryState>}
* Stream that emits when images is loaded into the gallery
*/
loaded(): Observable<GalleryState>;
/**
* Emits when image is changed
* @returns {Observable<GalleryState>}
* Stream that emits when image is changed
*/
imageChanged(): Observable<GalleryState>;
/**
* Emits when image lazy loading is started/completed
* @returns {Observable<GalleryState>}
* Stream that emits when image lazy loading is started/completed
*/
imageLoading(): Observable<GalleryState>;
/**
* Emits when navigation is clicked
* @returns {Observable<GalleryState>}
* Stream that emits when navigation is clicked
*/
navigationClick(): Observable<GalleryState>;
/**
* Emits when thumbnail is clicked
* @returns {Observable<GalleryState>}
* Stream that emits when thumbnail is clicked
*/
thumbnailClick(): Observable<GalleryState>;
/**
* Emits when bullet is clicked
* @returns {Observable<GalleryState>}
* Stream that emits when bullet is clicked
*/
bulletClick(): Observable<GalleryState>;
/**
* Emits when lightbox is opened
* @returns {Observable<GalleryState>}
* Stream that emits when lightbox is opened
*/
opened(): Observable<GalleryState>;
/**
* Emits when lightbox is closed
* @returns {Observable<GalleryState>}
* Stream that emits when lightbox is closed
*/
closed(): Observable<GalleryState>;
/**
* Emits when slide show is started
* @returns {Observable<GalleryState>}
* Stream that emits when slide show is started
*/
playing(): Observable<GalleryState>;
/**
* Emits when slide show is stopped
* @returns {Observable<GalleryState>}
* Stream that emits when slide show is stopped
*/
stopped(): Observable<GalleryState>;
}

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet