ng-gallery - npm Package Compare versions

Comparing version 1.0.0-beta.2 to 1.0.0-beta.3

models/gallery.config.d.ts

@@ -10,3 +10,3 @@ export interface GalleryConfig {
     player?: GalleryPlayConfig;
-    overlay?: GalleryOverlayConfig;
+    overlay?: GalleryLightboxConfig;
 }
@@ -49,3 +49,3 @@ export interface GalleryBulletConfig {
 }
-export interface GalleryOverlayConfig {
+export interface GalleryLightboxConfig {
     backdropClass?: string;
@@ -52,0 +52,0 @@ panelClass?: string;

ng-gallery.d.ts

@@ -7,6 +7,6 @@ /**
 export { GalleryItemsComponent as ɵg } from './components/gallery-items/gallery-items.component';
+export { GalleryLightboxComponent as ɵm } from './components/gallery-lightbox/gallery-lightbox.component';
 export { GalleryLoaderComponent as ɵh } from './components/gallery-loader/gallery-loader.component';
 export { GalleryMainComponent as ɵk } from './components/gallery-main/gallery-main.component';
 export { GalleryNavComponent as ɵd } from './components/gallery-nav/gallery-nav.component';
-export { GalleryOverlayComponent as ɵm } from './components/gallery-overlay/gallery-overlay.component';
 export { GalleryPlayerComponent as ɵj } from './components/gallery-player/gallery-player.component';
@@ -13,0 +13,0 @@ export { GallerySliderComponent as ɵl } from './components/gallery-slider/gallery-slider.component';

ng-gallery.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":3,"exports":[{"export":[{"name":"GalleryConfig","as":"GalleryConfig"},{"name":"GalleryDescConfig","as":"GalleryDescConfig"},{"name":"GalleryThumbConfig","as":"GalleryThumbConfig"},{"name":"GalleryNavConfig","as":"GalleryNavConfig"},{"name":"GalleryLoaderConfig","as":"GalleryLoaderConfig"},{"name":"GalleryPlayConfig","as":"GalleryPlayConfig"},{"name":"GalleryBulletConfig","as":"GalleryBulletConfig"},{"name":"GalleryState","as":"GalleryState"},{"name":"GalleryItem","as":"GalleryItem"}],"from":"./models"}],"metadata":{"ɵa":{"__symbolic":"function","parameters":["config","overlay","viewportRuler"],"value":{"__symbolic":"new","expression":{"__symbolic":"reference","name":"Gallery"},"arguments":[{"__symbolic":"reference","name":"config"},{"__symbolic":"reference","name":"overlay"},{"__symbolic":"reference","name":"viewportRuler"}]}},"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":"ɵb"},{"__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"}],"exports":[{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵn"}],"entryComponents":[{"__symbolic":"reference","name":"ɵm"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":["config"],"value":{"ngModule":{"__symbolic":"reference","name":"GalleryModule"},"providers":[{"provide":{"__symbolic":"reference","name":"ɵc"},"useValue":{"__symbolic":"reference","name":"config"}},{"provide":{"__symbolic":"reference","name":"Gallery"},"useFactory":{"__symbolic":"reference","name":"ɵa"},"deps":[{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"Overlay"},{"__symbolic":"reference","module":"@angular/cdk/scrolling","name":"ViewportRuler"}]}]}}}},"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":"ɵc"}]}],null,null],"parameters":[{"__symbolic":"reference","name":"GalleryConfig"},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"Overlay"},{"__symbolic":"reference","module":"@angular/cdk/scrolling","name":"ViewportRuler"}]}],"load":[{"__symbolic":"method"}],"set":[{"__symbolic":"method"}],"next":[{"__symbolic":"method"}],"prev":[{"__symbolic":"method"}],"reset":[{"__symbolic":"method"}],"setState":[{"__symbolic":"method"}],"setConfig":[{"__symbolic":"method"}],"play":[{"__symbolic":"method"}],"stop":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"handleKeydown":[{"__symbolic":"method"}],"playerWorker":[{"__symbolic":"method"}],"configWorker":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gallery","template":"<gallery-main [state]=\"gallery.state$ | async\" [config]=\"gallery.config$ | async\" [isOverlay]=\"isOverlay\"></gallery-main>","styles":["\n    gallery{display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;margin-bottom:2em;z-index:1;overflow:hidden}gallery *{-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}\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"}]}},"ɵc":{"__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-nav","template":"\n    <div *ngIf=\"state.items.length > 1\" class=\"g-nav\">\n\n      <div class=\"g-nav-prev\" (tapClick)=\"gallery.prev()\">\n        <i class=\"prev-arrow-ico\"></i>\n      </div>\n\n      <div class=\"g-nav-next\" (tapClick)=\"gallery.next()\">\n        <i class=\"next-arrow-ico\"></i>\n      </div>\n\n    </div>\n  ","styles":["\n    gallery-nav{z-index:1;position:absolute;left:0;right:0;top:0;bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex}@media (max-width:480px){gallery-nav{display:none}}.g-nav{-webkit-box-flex:1;-ms-flex:1;flex:1;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;opacity:0;-webkit-transition:all .4s linear;transition:all .4s linear;cursor:pointer}.g-nav:hover{opacity:1}.g-nav-next,.g-nav-prev{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;opacity:.7;position:relative;overflow:hidden;-webkit-transition:all .2s ease;transition:all .2s ease;z-index:0}.g-nav-next:hover,.g-nav-prev:hover{opacity:1}.g-nav-next{padding-right:.7em;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.g-nav-prev{padding-left:.7em;width:20%}.next-arrow-ico,.prev-arrow-ico{width:45px;height:80px}.next-arrow-ico{background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PiAgPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQxNC40OTYgNDE0LjQ5NiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDE0LjQ5NiA0MTQuNDk2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+IDxkZWZzIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGZpbHRlciBpZD0iZHJvcHNoYWRvdyIgPiAgPGZlR2F1c3NpYW5CbHVyIGluPSJTb3VyY2VBbHBoYSIgc3RkRGV2aWF0aW9uPSIzIi8+ICAgPGZlT2Zmc2V0IGR4PSIyIiBkeT0iMiIgcmVzdWx0PSJvZmZzZXRibHVyIi8+ICAgPGZlTWVyZ2U+IDxmZU1lcmdlTm9kZS8+PGZlTWVyZ2VOb2RlIGluPSJTb3VyY2VHcmFwaGljIi8+ICAgPC9mZU1lcmdlPjwvZmlsdGVyPjwvZGVmcz4gIDxwb2x5Z29uIHN0eWxlPSJmaWxsOiNmZmY7IiBmaWx0ZXI9InVybCgjZHJvcHNoYWRvdykiIHBvaW50cz0iMTE4LjEyNiwwIDg5Ljc5NiwyOC4yMzggMjY4LjIyMywyMDcuMjQ4IDg5Ljc5NiwzODYuMjU4IDExOC4xMjYsNDE0LjQ5NiAzMjQuNywyMDcuMjQ4ICIvPjwvc3ZnPg==) no-repeat 50%}.prev-arrow-ico{background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0MTQuNDk2IDQxNC40OTYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQxNC40OTYgNDE0LjQ5NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxkZWZzIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGZpbHRlciBpZD0iZHJvcHNoYWRvdyIgPiAgPGZlR2F1c3NpYW5CbHVyIGluPSJTb3VyY2VBbHBoYSIgc3RkRGV2aWF0aW9uPSIzIi8+ICAgPGZlT2Zmc2V0IGR4PSIyIiBkeT0iMiIgcmVzdWx0PSJvZmZzZXRibHVyIi8+ICAgPGZlTWVyZ2U+IDxmZU1lcmdlTm9kZS8+PGZlTWVyZ2VOb2RlIGluPSJTb3VyY2VHcmFwaGljIi8+ICAgPC9mZU1lcmdlPjwvZmlsdGVyPjwvZGVmcz48cG9seWdvbiBzdHlsZT0iZmlsbDojZmZmOyIgZmlsdGVyPSJ1cmwoI2Ryb3BzaGFkb3cpIiBwb2ludHM9IjMyNC43LDI4LjIzOCAyOTYuMzcsMCA4OS43OTYsMjA3LjI0OCAyOTYuMzcsNDE0LjQ5NiAzMjQuNywzODYuMjU4IDE0Ni4yNzMsMjA3LjI0OCAiLz48L3N2Zz4=) no-repeat 50%}\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"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Gallery"}]}]}},"ɵe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gallery-thumb","template":"\n    <div class=\"g-thumb-container\"\n         [style.height.px]=\"config.height\"\n         [style.margin.px]=\"config.space\">\n\n      <div class=\"g-thumbs\" [style.transform]=\"translateThumbs()\">\n\n        <div class=\"g-thumb\" *ngFor=\"let image of state.items; let i = index\"\n             [class.g-thumb-current]=\"i === state.currIndex\"\n             [style.width.px]=\"gallery.config.thumbnails.width\"\n             [style.height.px]=\"gallery.config.thumbnails.height\">\n\n          <div class=\"g-thumb-image\"\n               [style.backgroundImage]=\"getThumbImage(i)\"\n               (tapClick)=\"gallery.set(i)\">\n          </div>\n        </div>\n\n      </div>\n\n    </div>\n  ","styles":["\n    gallery-thumb{display:block;z-index:1}.g-thumb-container{position:relative;z-index:2;width:100%;height:100%;left:0}.g-thumb-container,.g-thumbs{top:0;display:-webkit-box;display:-ms-flexbox;display:flex}.g-thumbs{position:absolute;left:50%;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:-webkit-transform .3s ease-in;transition:-webkit-transform .3s ease-in;transition:transform .3s ease-in;transition:transform .3s ease-in,-webkit-transform .3s ease-in;-webkit-transform:translateZ(0);transform:translateZ(0)}.g-thumb{padding:8px;opacity:.5;-webkit-transition:all .2s linear;transition:all .2s linear}.g-thumb-image{cursor:pointer;width:100%;height:100%;background-position:50%;background-size:cover;-webkit-box-shadow:0 0 4px rgba(0,0,0,.3);box-shadow:0 0 4px rgba(0,0,0,.3)}.g-thumb-current{opacity:1;padding:2px}\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"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngOnInit":[{"__symbolic":"method"}],"translateThumbs":[{"__symbolic":"method"}],"getThumbImage":[{"__symbolic":"method"}]}},"ɵf":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gallery-text","template":"\n    <div class=\"g-text-container\" [ngStyle]=\"config.style\">\n      <div *ngIf=\"config.text\" class=\"g-text\" [innerHtml]=\"state.items[state.currIndex]?.text\">\n      </div>\n      <div *ngIf=\"config.counter\" class=\"g-number\">\n        {{(state.currIndex + 1) + '/' + state.items.length}}\n      </div>\n    </div>\n  ","styles":["\n    gallery-text{position:relative;left:0;right:0;z-index:1}.g-text-container{padding:1em 2em;color:#ccc;font-size:13px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-line-pack:center;align-content:center;background-clip:padding-box;-webkit-font-smoothing:antialiased}.g-text{-webkit-box-flex:1;-ms-flex:1;flex: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":{"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"}]}},"ɵg":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gallery-items","template":"\n    <div *ngIf=\"state.items[state.currIndex]; let curr\"\n         class=\"g-item\"\n         [class.g-lazyloaded]=\"!loading\">\n\n      <img [lazyImage]=\"curr.src\"\n           [alt]=\"curr.text\"\n           (loading)=\"loading = $event\">\n\n    </div>\n\n    <gallery-loader *ngIf=\"loading\" [config]=\"config.loader\"></gallery-loader>\n  ","styles":["\n    gallery-items{z-index:1;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;-webkit-box-flex:1;-ms-flex:1;flex:1;flex-direction:column;-webkit-transform:translateZ(0);transform:translateZ(0)}.g-item,gallery-items{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column}.g-item{position:absolute;left:0;right:0;top:0;bottom:0;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;opacity:0}.g-item.g-lazyloaded{opacity:1;-webkit-transition:opacity .3s ease-in;transition:opacity .3s ease-in}.g-item img{-webkit-box-shadow:0 0 4px rgba(0,0,0,.3);box-shadow:0 0 4px rgba(0,0,0,.3);pointer-events:none;display:block;max-width:100%;max-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":{"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"}]}],"ngOnChanges":[{"__symbolic":"method"}]}},"ɵh":{"__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 [src]=\"icon\" [style.width]=\"config.width\" [style.height]=\"config.height\"/>\n    </div>\n  ","styles":["\n    gallery-loader{z-index:1}.g-loader{z-index:2;position:absolute;width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:1em}\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"}],"getIcon":[{"__symbolic":"method"}]}},"ɵi":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gallery-bullets","template":"\n    <div class=\"g-bullets-container\" [ngStyle]=\"containerStyle\">\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)=\"gallery.set(i)\">\n\n        <div class=\"g-bullet-inner\" [ngStyle]=\"config.style\"></div>\n\n      </div>\n    </div>\n  ","styles":["\n    .g-bullets-container{position:absolute;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.g-bullet,.g-bullets-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.g-bullet{cursor:pointer;z-index:1}.g-bullet-inner{margin:1em;height:4px;width:4px;background-color:hsla(0,0%,100%,.5);border-radius:2px;-webkit-box-shadow:0 0 6px rgba(0,0,0,.8);box-shadow:0 0 6px rgba(0,0,0,.8);-webkit-transition:all .2s ease;transition:all .2s ease}.g-bullet-curr .g-bullet-inner{-webkit-transform:scale(1.5);transform:scale(1.5);background-color:#fff}\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"}]}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵj":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gallery-player","template":"\n    <div *ngIf=\"config.autoplay && config.progress\" class=\"g-progress-bar\">\n      <div class=\"g-progress\"\n           [ngClass]=\"getClasses(progress$ | async)\"\n           [style.transitionDuration]=\"config.interval + 'ms'\">\n\n      </div>\n    </div>\n  ","styles":["\n    gallery-player{position:absolute;z-index:1;left:0;right:0}.g-progress-bar{position:absolute;top:0;width:100%}.g-progress{width:100%;height:3px;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);z-index:2}.g-progress-initial{-webkit-transition-duration:0ms!important;transition-duration:0ms!important}.g-progress-done{-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform;-webkit-transition-timing-function:linear;transition-timing-function:linear;background-color:#bcc8ce;-webkit-transform:translateZ(0);transform:translateZ(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":{"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"}],"getClasses":[{"__symbolic":"method"}]}},"ɵk":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gallery-main","template":"\n    <div class=\"g-container\" *ngIf=\"state.items?.length; else empty\" [ngStyle]=\"config.style\">\n\n      <gallery-thumb *ngIf=\"config.thumbnails\" [state]=\"state\" [config]=\"config.thumbnails\"></gallery-thumb>\n\n      <div class=\"g-box\">\n\n        <gallery-slider [state]=\"state\" [config]=\"config\"></gallery-slider>\n\n        <gallery-bullets *ngIf=\"config.bullets\" [state]=\"state\" [config]=\"config.bullets\"></gallery-bullets>\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\n    <ng-template #empty>\n      <div class=\"empty\">\n        <ng-content></ng-content>\n      </div>\n    </ng-template>\n  ","styles":["\n    gallery-main{position:relative;-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}gallery-main *{-webkit-box-sizing:border-box;box-sizing:border-box}.g-container{overflow:hidden;position:relative;height:100%;width:100%;max-height:100%;max-width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@media (max-width:480px){.g-container{width:100%!important;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-orient:vertical!important;-webkit-box-direction:normal!important;-ms-flex-direction:column!important;flex-direction:column!important}}.g-box{height:100%}.g-box,gallery-slider{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;height:100%}.g-pan-reset{-webkit-transition:all .3s linear;transition:all .3s linear;-webkit-transform:translateZ(0)!important;transform:translateZ(0)!important}.g-swipe-invis .g-item img{opacity:0}gallery-items .g-pan-reset{-webkit-transition:none;transition:none}.g-btn-close{position:absolute;right:.73em;top:.73em;z-index:1;cursor:pointer;width:30px;height:30px;-webkit-transition:all .2s linear;transition:all .2s linear;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUwIDUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MCA1MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxjaXJjbGUgc3R5bGU9ImZpbGw6I0Q3NUE0QTsiIGN4PSIyNSIgY3k9IjI1IiByPSIyNSIvPjxwb2x5bGluZSBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojRkZGRkZGO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwOyIgcG9pbnRzPSIxNiwzNCAyNSwyNSAzNCwxNiAiLz48cG9seWxpbmUgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6I0ZGRkZGRjtzdHJva2Utd2lkdGg6MjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDsiIHBvaW50cz0iMTYsMTYgMjUsMjUgMzQsMzQgIi8+PC9zdmc+)}.g-btn-close:active{-webkit-transform:rotate(180deg) scale(.9);transform:rotate(180deg) scale(.9)}.empty{color:#fff;background-color:#121519;position:absolute;width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;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"}]}]}},"ɵl":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gallery-slider","template":"\n    <gallery-items [state]=\"state\" [config]=\"config\"></gallery-items>\n    <gallery-nav *ngIf=\"config.navigation && !panning\" [state]=\"state\"></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"}]}},"ɵm":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gallery-overlay","template":"<gallery [@slideGalleryIn] [isOverlay]=\"true\"></gallery>","styles":["\n    .g-backdrop{background-color:rgba(0,0,0,.7)}.g-overlay{margin:auto}gallery-overlay{position:relative;display:block}gallery-overlay gallery{border-radius:1.32em;overflow:hidden;margin:0;display:block;width:100%;height:100%;-webkit-box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12)}.cdk-global-overlay-wrapper,.cdk-overlay-container{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1}.cdk-global-overlay-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;z-index:1}.cdk-overlay-pane{-webkit-box-sizing:border-box;box-sizing:border-box}.cdk-overlay-backdrop,.cdk-overlay-pane{position:absolute;pointer-events:auto;z-index:1}.cdk-overlay-backdrop{top:0;bottom:0;left:0;right:0;-webkit-tap-highlight-color:transparent;-webkit-transition:opacity .4s cubic-bezier(.25,.8,.25,1);transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.48}.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.6)}.cdk-overlay-transparent-backdrop{background:none}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}\n  "],"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)"]}]}]]}],"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":{"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"]]}]}]}},"ɵn":{"__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"}]}},"ɵo":{"__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"}]}},"ɵp":{"__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":{"ɵa":"./gallery.module","GalleryModule":"./gallery.module","Gallery":"./services/gallery.service","ɵb":"./components/gallery/gallery.component","ɵc":"./services/gallery.token","ɵd":"./components/gallery-nav/gallery-nav.component","ɵe":"./components/gallery-thumb/gallery-thumb.component","ɵf":"./components/gallery-text/gallery-text.component","ɵg":"./components/gallery-items/gallery-items.component","ɵh":"./components/gallery-loader/gallery-loader.component","ɵi":"./components/gallery-bullets/gallery-bullets.component","ɵj":"./components/gallery-player/gallery-player.component","ɵk":"./components/gallery-main/gallery-main.component","ɵl":"./components/gallery-slider/gallery-slider.component","ɵm":"./components/gallery-overlay/gallery-overlay.component","ɵn":"./directives/gallerize.directive","ɵo":"./directives/tap.directive","ɵp":"./directives/lazy.directive"},"importAs":"ng-gallery"}
+{"__symbolic":"module","version":3,"exports":[{"export":[{"name":"GalleryConfig","as":"GalleryConfig"},{"name":"GalleryDescConfig","as":"GalleryDescConfig"},{"name":"GalleryThumbConfig","as":"GalleryThumbConfig"},{"name":"GalleryNavConfig","as":"GalleryNavConfig"},{"name":"GalleryLoaderConfig","as":"GalleryLoaderConfig"},{"name":"GalleryPlayConfig","as":"GalleryPlayConfig"},{"name":"GalleryBulletConfig","as":"GalleryBulletConfig"},{"name":"GalleryState","as":"GalleryState"},{"name":"GalleryItem","as":"GalleryItem"}],"from":"./models"}],"metadata":{"ɵa":{"__symbolic":"function","parameters":["config","overlay","viewportRuler"],"value":{"__symbolic":"new","expression":{"__symbolic":"reference","name":"Gallery"},"arguments":[{"__symbolic":"reference","name":"config"},{"__symbolic":"reference","name":"overlay"},{"__symbolic":"reference","name":"viewportRuler"}]}},"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":"ɵb"},{"__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"}],"exports":[{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵn"}],"entryComponents":[{"__symbolic":"reference","name":"ɵm"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":["config"],"value":{"ngModule":{"__symbolic":"reference","name":"GalleryModule"},"providers":[{"provide":{"__symbolic":"reference","name":"ɵc"},"useValue":{"__symbolic":"reference","name":"config"}},{"provide":{"__symbolic":"reference","name":"Gallery"},"useFactory":{"__symbolic":"reference","name":"ɵa"},"deps":[{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"Overlay"},{"__symbolic":"reference","module":"@angular/cdk/scrolling","name":"ViewportRuler"}]}]}}}},"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":"ɵc"}]}],null,null],"parameters":[{"__symbolic":"reference","name":"GalleryConfig"},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"Overlay"},{"__symbolic":"reference","module":"@angular/cdk/scrolling","name":"ViewportRuler"}]}],"load":[{"__symbolic":"method"}],"set":[{"__symbolic":"method"}],"next":[{"__symbolic":"method"}],"prev":[{"__symbolic":"method"}],"reset":[{"__symbolic":"method"}],"setState":[{"__symbolic":"method"}],"setConfig":[{"__symbolic":"method"}],"play":[{"__symbolic":"method"}],"stop":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"handleKeydown":[{"__symbolic":"method"}],"playerWorker":[{"__symbolic":"method"}],"configWorker":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gallery","template":"<gallery-main [state]=\"gallery.state$ | async\" [config]=\"gallery.config$ | async\" [isOverlay]=\"isOverlay\"></gallery-main>","styles":["\n    gallery{display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;margin-bottom:2em;z-index:1;overflow:hidden}gallery *{-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}\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"}]}},"ɵc":{"__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-nav","template":"\n    <div *ngIf=\"state.items.length > 1\" class=\"g-nav\">\n\n      <div class=\"g-nav-prev\" (tapClick)=\"gallery.prev()\">\n        <i class=\"prev-arrow-ico\"></i>\n      </div>\n\n      <div class=\"g-nav-next\" (tapClick)=\"gallery.next()\">\n        <i class=\"next-arrow-ico\"></i>\n      </div>\n\n    </div>\n  ","styles":["\n    gallery-nav{z-index:1;position:absolute;left:0;right:0;top:0;bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex}@media (max-width:480px){gallery-nav{display:none}}.g-nav{-webkit-box-flex:1;-ms-flex:1;flex:1;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;opacity:0;-webkit-transition:all .4s linear;transition:all .4s linear;cursor:pointer}.g-nav:hover{opacity:1}.g-nav-next,.g-nav-prev{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;opacity:.7;position:relative;overflow:hidden;-webkit-transition:all .2s ease;transition:all .2s ease;z-index:0}.g-nav-next:hover,.g-nav-prev:hover{opacity:1}.g-nav-next{padding-right:.7em;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.g-nav-prev{padding-left:.7em;width:20%}.next-arrow-ico,.prev-arrow-ico{width:45px;height:80px}.next-arrow-ico{background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PiAgPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQxNC40OTYgNDE0LjQ5NiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDE0LjQ5NiA0MTQuNDk2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+IDxkZWZzIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGZpbHRlciBpZD0iZHJvcHNoYWRvdyIgPiAgPGZlR2F1c3NpYW5CbHVyIGluPSJTb3VyY2VBbHBoYSIgc3RkRGV2aWF0aW9uPSIzIi8+ICAgPGZlT2Zmc2V0IGR4PSIyIiBkeT0iMiIgcmVzdWx0PSJvZmZzZXRibHVyIi8+ICAgPGZlTWVyZ2U+IDxmZU1lcmdlTm9kZS8+PGZlTWVyZ2VOb2RlIGluPSJTb3VyY2VHcmFwaGljIi8+ICAgPC9mZU1lcmdlPjwvZmlsdGVyPjwvZGVmcz4gIDxwb2x5Z29uIHN0eWxlPSJmaWxsOiNmZmY7IiBmaWx0ZXI9InVybCgjZHJvcHNoYWRvdykiIHBvaW50cz0iMTE4LjEyNiwwIDg5Ljc5NiwyOC4yMzggMjY4LjIyMywyMDcuMjQ4IDg5Ljc5NiwzODYuMjU4IDExOC4xMjYsNDE0LjQ5NiAzMjQuNywyMDcuMjQ4ICIvPjwvc3ZnPg==) no-repeat 50%}.prev-arrow-ico{background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0MTQuNDk2IDQxNC40OTYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQxNC40OTYgNDE0LjQ5NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxkZWZzIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGZpbHRlciBpZD0iZHJvcHNoYWRvdyIgPiAgPGZlR2F1c3NpYW5CbHVyIGluPSJTb3VyY2VBbHBoYSIgc3RkRGV2aWF0aW9uPSIzIi8+ICAgPGZlT2Zmc2V0IGR4PSIyIiBkeT0iMiIgcmVzdWx0PSJvZmZzZXRibHVyIi8+ICAgPGZlTWVyZ2U+IDxmZU1lcmdlTm9kZS8+PGZlTWVyZ2VOb2RlIGluPSJTb3VyY2VHcmFwaGljIi8+ICAgPC9mZU1lcmdlPjwvZmlsdGVyPjwvZGVmcz48cG9seWdvbiBzdHlsZT0iZmlsbDojZmZmOyIgZmlsdGVyPSJ1cmwoI2Ryb3BzaGFkb3cpIiBwb2ludHM9IjMyNC43LDI4LjIzOCAyOTYuMzcsMCA4OS43OTYsMjA3LjI0OCAyOTYuMzcsNDE0LjQ5NiAzMjQuNywzODYuMjU4IDE0Ni4yNzMsMjA3LjI0OCAiLz48L3N2Zz4=) no-repeat 50%}\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"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Gallery"}]}]}},"ɵe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gallery-thumb","template":"\n    <div class=\"g-thumb-container\"\n         [style.height.px]=\"config.height\"\n         [style.margin.px]=\"config.space\">\n\n      <div class=\"g-thumbs\" [style.transform]=\"translateThumbs()\">\n\n        <div class=\"g-thumb\" *ngFor=\"let image of state.items; let i = index\"\n             [class.g-thumb-current]=\"i === state.currIndex\"\n             [style.width.px]=\"gallery.config.thumbnails.width\"\n             [style.height.px]=\"gallery.config.thumbnails.height\">\n\n          <div class=\"g-thumb-image\"\n               [style.backgroundImage]=\"getThumbImage(i)\"\n               (tapClick)=\"gallery.set(i)\">\n          </div>\n        </div>\n\n      </div>\n\n    </div>\n  ","styles":["\n    gallery-thumb{display:block;z-index:1}.g-thumb-container{position:relative;z-index:2;width:100%;height:100%;left:0}.g-thumb-container,.g-thumbs{top:0;display:-webkit-box;display:-ms-flexbox;display:flex}.g-thumbs{position:absolute;left:50%;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:-webkit-transform .3s ease-in;transition:-webkit-transform .3s ease-in;transition:transform .3s ease-in;transition:transform .3s ease-in,-webkit-transform .3s ease-in;-webkit-transform:translateZ(0);transform:translateZ(0)}.g-thumb{padding:8px;opacity:.5;-webkit-transition:all .2s linear;transition:all .2s linear}.g-thumb-image{cursor:pointer;width:100%;height:100%;background-position:50%;background-size:cover;-webkit-box-shadow:0 0 4px rgba(0,0,0,.3);box-shadow:0 0 4px rgba(0,0,0,.3)}.g-thumb-current{opacity:1;padding:2px}\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"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngOnInit":[{"__symbolic":"method"}],"translateThumbs":[{"__symbolic":"method"}],"getThumbImage":[{"__symbolic":"method"}]}},"ɵf":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gallery-text","template":"\n    <div class=\"g-text-container\" [ngStyle]=\"config.style\">\n      <div *ngIf=\"config.text\" class=\"g-text\" [innerHtml]=\"state.items[state.currIndex]?.text\">\n      </div>\n      <div *ngIf=\"config.counter\" class=\"g-number\">\n        {{(state.currIndex + 1) + '/' + state.items.length}}\n      </div>\n    </div>\n  ","styles":["\n    gallery-text{position:relative;left:0;right:0;z-index:1}.g-text-container{padding:1em 2em;color:#ccc;font-size:13px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-line-pack:center;align-content:center;background-clip:padding-box;-webkit-font-smoothing:antialiased}.g-text{-webkit-box-flex:1;-ms-flex:1;flex: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":{"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"}]}},"ɵg":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gallery-items","template":"\n    <div *ngIf=\"state.items[state.currIndex]; let curr\"\n         class=\"g-item\"\n         [class.g-lazyloaded]=\"!loading\">\n\n      <img [lazyImage]=\"curr.src\"\n           [alt]=\"curr.text\"\n           (loading)=\"loading = $event\">\n\n    </div>\n\n    <gallery-loader *ngIf=\"loading\" [config]=\"config.loader\"></gallery-loader>\n  ","styles":["\n    gallery-items{z-index:1;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;-webkit-box-flex:1;-ms-flex:1;flex:1;flex-direction:column;-webkit-transform:translateZ(0);transform:translateZ(0)}.g-item,gallery-items{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column}.g-item{position:absolute;left:0;right:0;top:0;bottom:0;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;opacity:0}.g-item.g-lazyloaded{opacity:1;-webkit-transition:opacity .3s ease-in;transition:opacity .3s ease-in}.g-item img{-webkit-box-shadow:0 0 4px rgba(0,0,0,.3);box-shadow:0 0 4px rgba(0,0,0,.3);pointer-events:none;display:block;max-width:100%;max-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":{"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"}]}],"ngOnChanges":[{"__symbolic":"method"}]}},"ɵh":{"__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 [src]=\"icon\" [style.width]=\"config.width\" [style.height]=\"config.height\"/>\n    </div>\n  ","styles":["\n    gallery-loader{z-index:1}.g-loader{z-index:2;position:absolute;width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:1em}\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"}],"getIcon":[{"__symbolic":"method"}]}},"ɵi":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gallery-bullets","template":"\n    <div class=\"g-bullets-container\" [ngStyle]=\"containerStyle\">\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)=\"gallery.set(i)\">\n\n        <div class=\"g-bullet-inner\" [ngStyle]=\"config.style\"></div>\n\n      </div>\n    </div>\n  ","styles":["\n    .g-bullets-container{position:absolute;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.g-bullet,.g-bullets-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.g-bullet{cursor:pointer;z-index:1}.g-bullet-inner{margin:1em;height:4px;width:4px;background-color:hsla(0,0%,100%,.5);border-radius:2px;-webkit-box-shadow:0 0 6px rgba(0,0,0,.8);box-shadow:0 0 6px rgba(0,0,0,.8);-webkit-transition:all .2s ease;transition:all .2s ease}.g-bullet-curr .g-bullet-inner{-webkit-transform:scale(1.5);transform:scale(1.5);background-color:#fff}\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"}]}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵj":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gallery-player","template":"\n    <div *ngIf=\"config.autoplay && config.progress\" class=\"g-progress-bar\">\n      <div class=\"g-progress\"\n           [ngClass]=\"getClasses(progress$ | async)\"\n           [style.transitionDuration]=\"config.interval + 'ms'\">\n\n      </div>\n    </div>\n  ","styles":["\n    gallery-player{position:absolute;z-index:1;left:0;right:0}.g-progress-bar{position:absolute;top:0;width:100%}.g-progress{width:100%;height:3px;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);z-index:2}.g-progress-initial{-webkit-transition-duration:0ms!important;transition-duration:0ms!important}.g-progress-done{-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform;-webkit-transition-timing-function:linear;transition-timing-function:linear;background-color:#bcc8ce;-webkit-transform:translateZ(0);transform:translateZ(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":{"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"}],"getClasses":[{"__symbolic":"method"}]}},"ɵk":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gallery-main","template":"\n    <div class=\"g-container\" *ngIf=\"state.items?.length; else empty\" [ngStyle]=\"config.style\">\n\n      <gallery-thumb *ngIf=\"config.thumbnails\" [state]=\"state\" [config]=\"config.thumbnails\"></gallery-thumb>\n\n      <div class=\"g-box\">\n\n        <gallery-slider [state]=\"state\" [config]=\"config\"></gallery-slider>\n\n        <gallery-bullets *ngIf=\"config.bullets\" [state]=\"state\" [config]=\"config.bullets\"></gallery-bullets>\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\n    <ng-template #empty>\n      <div class=\"empty\">\n        <ng-content></ng-content>\n      </div>\n    </ng-template>\n  ","styles":["\n    gallery-main{position:relative;-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}gallery-main *{-webkit-box-sizing:border-box;box-sizing:border-box}.g-container{overflow:hidden;position:relative;height:100%;width:100%;max-height:100%;max-width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@media (max-width:480px){.g-container{width:100%!important;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-orient:vertical!important;-webkit-box-direction:normal!important;-ms-flex-direction:column!important;flex-direction:column!important}}.g-box{height:100%}.g-box,gallery-slider{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;height:100%}.g-pan-reset{-webkit-transition:all .3s linear;transition:all .3s linear;-webkit-transform:translateZ(0)!important;transform:translateZ(0)!important}.g-swipe-invis .g-item img{opacity:0}gallery-items .g-pan-reset{-webkit-transition:none;transition:none}.g-btn-close{position:absolute;right:.73em;top:.73em;z-index:1;cursor:pointer;width:30px;height:30px;-webkit-transition:all .2s linear;transition:all .2s linear;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUwIDUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MCA1MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxjaXJjbGUgc3R5bGU9ImZpbGw6I0Q3NUE0QTsiIGN4PSIyNSIgY3k9IjI1IiByPSIyNSIvPjxwb2x5bGluZSBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojRkZGRkZGO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwOyIgcG9pbnRzPSIxNiwzNCAyNSwyNSAzNCwxNiAiLz48cG9seWxpbmUgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6I0ZGRkZGRjtzdHJva2Utd2lkdGg6MjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDsiIHBvaW50cz0iMTYsMTYgMjUsMjUgMzQsMzQgIi8+PC9zdmc+)}.g-btn-close:active{-webkit-transform:rotate(180deg) scale(.9);transform:rotate(180deg) scale(.9)}.empty{color:#fff;background-color:#121519;position:absolute;width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;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"}]}]}},"ɵl":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gallery-slider","template":"\n    <gallery-items [state]=\"state\" [config]=\"config\"></gallery-items>\n    <gallery-nav *ngIf=\"config.navigation && !panning\" [state]=\"state\"></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"}]}},"ɵm":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gallery-lightbox","template":"<gallery [@slideGalleryIn] [isOverlay]=\"true\"></gallery>","styles":["\n    .g-backdrop{background-color:rgba(0,0,0,.7)}.g-overlay{margin:auto}gallery-lightbox{position:relative;display:block}gallery-lightbox gallery{border-radius:1.32em;overflow:hidden;margin:0;display:block;width:100%;height:100%;-webkit-box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12)}.cdk-global-overlay-wrapper,.cdk-overlay-container{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1}.cdk-global-overlay-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;z-index:1}.cdk-overlay-pane{-webkit-box-sizing:border-box;box-sizing:border-box}.cdk-overlay-backdrop,.cdk-overlay-pane{position:absolute;pointer-events:auto;z-index:1}.cdk-overlay-backdrop{top:0;bottom:0;left:0;right:0;-webkit-tap-highlight-color:transparent;-webkit-transition:opacity .4s cubic-bezier(.25,.8,.25,1);transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.48}.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.6)}.cdk-overlay-transparent-backdrop{background:none}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}\n  "],"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)"]}]}]]}],"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":{"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"]]}]}]}},"ɵn":{"__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"}]}},"ɵo":{"__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"}]}},"ɵp":{"__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":{"ɵa":"./gallery.module","GalleryModule":"./gallery.module","Gallery":"./services/gallery.service","ɵb":"./components/gallery/gallery.component","ɵc":"./services/gallery.token","ɵd":"./components/gallery-nav/gallery-nav.component","ɵe":"./components/gallery-thumb/gallery-thumb.component","ɵf":"./components/gallery-text/gallery-text.component","ɵg":"./components/gallery-items/gallery-items.component","ɵh":"./components/gallery-loader/gallery-loader.component","ɵi":"./components/gallery-bullets/gallery-bullets.component","ɵj":"./components/gallery-player/gallery-player.component","ɵk":"./components/gallery-main/gallery-main.component","ɵl":"./components/gallery-slider/gallery-slider.component","ɵm":"./components/gallery-lightbox/gallery-lightbox.component","ɵn":"./directives/gallerize.directive","ɵo":"./directives/tap.directive","ɵp":"./directives/lazy.directive"},"importAs":"ng-gallery"}

package.json

 {
   "name": "ng-gallery",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.3",
   "description": "Angular image gallery simplifies the process of creating beautiful image gallery for the web and mobile devices.",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -8,2 +8,3 @@ <p align="center">
 
+
 [![npm](https://img.shields.io/badge/demo-online-ed1c46.svg)](https://murhafsousli.github.io/ng-gallery/)
@@ -58,33 +59,43 @@ [![npm](https://img.shields.io/npm/v/ng-gallery.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/ng-gallery)
 
- - After that add `<gallery></gallery>` in the template, see [basic example](https://murhafsousli.github.io/ng-gallery/#/basic)
+ ### Basic
 
- - Or if you want to open the gallery in an overlay, use the service `gallery.open()`, see [gallery overlay example](https://murhafsousli.github.io/ng-gallery/#/modal)
+ Add gallery in the template using the component `<gallery></gallery>`, see [basic example](https://murhafsousli.github.io/ng-gallery/#/basic)
 
+ ### Lightbox
 
+ 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)
+
+
 Finally, load the images and there are two options:
  
- - Using GalleryService
+ ### Load image
+ 
+ Use the service `Gallery` to load images
 
 ```ts
-images = [
-  {
-    src: "",
-    text: "anything",
-    "thumbnails: ""
-  },
-  {
-    src: "",
-    text: "",
-    "thumbnails: ""
-  },
-];
+import { Gallery } from 'ng-gallery';
 
-constructor(private gallery: Gallery) { }
-
-ngOnInit() {
+export class AppComponent implements OnInit {
+  
+  constructor(public gallery: Gallery) { }
+  
+  ngOnInit() {
+    const images = [
+      {
+        src: 'assets/clouds.jpg',
+        thumbnail: 'assets/clouds.jpg',
+        text: 'Coulds'
+      },
+      // ...
+    ];
+    
     this.gallery.load(images);
+  }
 }
 ```
-- Using `[gallerize]` directive
 
+### Auto-detect
+
+Alternatively, you can load them automatically using `[gallerize]` directive, see [auto-detect example](https://murhafsousli.github.io/ng-gallery/#/auto-detect)
+
 ```html
@@ -122,8 +133,6 @@ <div gallerize>
 
-## Author
+## Support
 
- **[Murhaf Sousli](http://murhafsousli.com)**
+[![npm](https://c5.patreon.com/external/logo/become_a_patron_button.png)](https://www.patreon.com/bePatron?u=5594898)
 
- - [github/murhafsousli](https://github.com/MurhafSousli)
- - [twitter/murhafsousli](https://twitter.com/MurhafSousli)
 
@@ -134,1 +143,8 @@ ## Issues
 
+
+## Author
+
+ **[Murhaf Sousli](http://murhafsousli.com)**
+
+ - [github/murhafsousli](https://github.com/MurhafSousli)
+ - [twitter/murhafsousli](https://twitter.com/MurhafSousli)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3701460

increased by0.02%

Lines of code

33492

Number of lines in readme file

147

increased by12.21%

No dependency changes