nextalys-carousel 0.0.52 → 0.0.55

package/lib/nxs-carousel/nxs-carousel-types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"nxs-carousel-types.d.ts","sourceRoot":"","sources":["../../../src/lib/nxs-carousel/nxs-carousel-types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"nxs-carousel-types.d.ts","sourceRoot":"","sources":["../../../src/lib/nxs-carousel/nxs-carousel-types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAEvC,MAAM,WAAW,gBAAgB;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;CACf;AACD,MAAM,WAAW,kBAAmB,SAAQ,aAAa;IACrD,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,aAAa,CAAC,EAAE;QACZ,IAAI,EAAE,OAAO,CAAC;QAAC,YAAY,CAAC,EAAE,OAAO,CAAC;QAAC,aAAa,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE;YAC3F,CAAC,IAAI,EAAE,MAAM,GAAG;gBACZ,YAAY,CAAC,EAAE,MAAM,CAAC;gBACtB,aAAa,EAAE,MAAM,GAAG,MAAM,CAAC;aAClC,CAAC;SACL,CAAC;KACL,CAAC;IACF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;OAGG;IACH,8BAA8B,CAAC,EAAE,MAAM,CAAC;IACxC,wBAAwB,CAAC,EAAE,kBAAkB,CAAC;IAC9C,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,qBAAqB,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;KAAE,CAAC;CAC9D;AACD,qBAAa,uBAAuB;IAChC,KAAK,CAAC,EAAE,OAAO,CAAS;CAC3B"}

package/lib/nxs-carousel/nxs-carousel.component.d.ts

@@ -1,44 +1,44 @@
-import { ElementRef, EventEmitter, NgZone } from '@angular/core';
-import { NxsCarouselOptions, NxsCarouselImage, SwiperInstance, NxsCarouselModuleConfig } from './nxs-carousel-types';
+import { EventEmitter, NgZone, TemplateRef } from '@angular/core';
+import { NxsCarouselOptions, NxsCarouselImage, NxsCarouselModuleConfig } from './nxs-carousel-types';
 import { MatDialog } from '@angular/material/dialog';
+import { Swiper, SwiperOptions } from 'swiper';
+import { SwiperComponent } from 'swiper/angular';
 export declare class NxsCarouselComponent {
     private matDialog;
     private zone;
     private platformId;
     private config?;
-    private mutationObserver;
-    recreateSliderSubscribed: boolean;
+    contents: TemplateRef<HTMLElement>;
+    swiperComponent?: SwiperComponent;
+    lazy: boolean;
     private eventsCollector;
     images: NxsCarouselImage[];
-    nxsSliderContainer: ElementRef<HTMLDivElement>;
-    nxsSlidesWrapper: ElementRef<HTMLDivElement>;
-    nxsThumbnailsSliderContainer: ElementRef<HTMLDivElement>;
-    nxsThumbnailsSlidesWrapper: ElementRef<HTMLDivElement>;
     options: NxsCarouselOptions;
+    thumbnailsOptions: SwiperOptions;
     set setOptions(val: NxsCarouselOptions);
-    set setImages(val: NxsCarouselImage[]);
     hasHtmlContent: boolean;
     slidesCount: number;
-    sliderInstance: SwiperInstance;
-    thumbnailsSliderInstance: SwiperInstance;
+    private swiperInstance;
+    thumbnailsSwiperInstance: Swiper;
     slideChange: EventEmitter<number>;
     currentSlide: number;
-    slideClick: EventEmitter<MouseEvent>;
+    slideClick: EventEmitter<MouseEvent | TouchEvent | PointerEvent>;
     isBrowser: boolean;
-    private swiperLibrary;
     constructor(matDialog: MatDialog, zone: NgZone, platformId: any, config?: NxsCarouselModuleConfig);
     private log;
-    onContentChange(changes: MutationRecord[]): void;
-    initSlides(): void;
+    private destroy;
     ngOnDestroy(): void;
-    private subscribeToSlideChanged;
     ngAfterViewInit(): void;
     getMainSliderHeight(): string;
     private setDefaultOptions;
+    private setThumbnailsOptions;
     showFullScreenCarousel(images: NxsCarouselImage[], wrapperClass?: string): void;
-    private createSlider;
     goToSlide(index: number, speed?: number): void;
     next(): void;
     previous(): void;
+    onSwiperThumbnails(instance: Swiper): void;
+    onSwiper(instance: Swiper): void;
+    private runInZone;
+    onSlideChange(instances: Swiper[]): void;
 }
 //# sourceMappingURL=nxs-carousel.component.d.ts.map

package/lib/nxs-carousel/nxs-carousel.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"nxs-carousel.component.d.ts","sourceRoot":"","sources":["../../../src/lib/nxs-carousel/nxs-carousel.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkD,UAAU,EAAU,YAAY,EAAiC,MAAM,EAAiB,MAAM,eAAe,CAAC;AACvK,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,cAAc,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAErH,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAGrD,qBAMa,oBAAoB;IA2CzB,OAAO,CAAC,SAAS;IACjB,OAAO,CAAC,IAAI;IACS,OAAO,CAAC,UAAU;IAC3B,OAAO,CAAC,MAAM,CAAC;IA7C/B,OAAO,CAAC,gBAAgB,CAAiC;IACzD,wBAAwB,UAAS;IACjC,OAAO,CAAC,eAAe,CAAyB;IACzC,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAGlC,kBAAkB,EAAE,UAAU,CAAC,cAAc,CAAC,CAAC;IAG/C,gBAAgB,EAAE,UAAU,CAAC,cAAc,CAAC,CAAC;IAI7C,4BAA4B,EAAE,UAAU,CAAC,cAAc,CAAC,CAAC;IAEzD,0BAA0B,EAAE,UAAU,CAAC,cAAc,CAAC,CAAC;IACvD,OAAO,EAAE,kBAAkB,CAAM;IACjC,IACI,UAAU,CAAC,GAAG,EAAE,kBAAkB,EAErC;IACD,IACI,SAAS,CAAC,GAAG,EAAE,gBAAgB,EAAE,EAIpC;IAED,cAAc,UAAS;IACvB,WAAW,EAAE,MAAM,CAAK;IACjB,cAAc,EAAE,cAAc,CAAC;IAC/B,wBAAwB,EAAE,cAAc,CAAC;IAGhD,WAAW,uBAA8B;IAClC,YAAY,SAAK;IAExB,UAAU,2BAAkC;IAC5C,SAAS,UAAS;IAClB,OAAO,CAAC,aAAa,CAAM;gBAGf,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,MAAM,EACS,UAAU,EAAE,GAAG,EACxB,MAAM,CAAC,EAAE,uBAAuB;IAQxD,OAAO,CAAC,GAAG;IAMX,eAAe,CAAC,OAAO,EAAE,cAAc,EAAE;IAIzC,UAAU;IAiDV,WAAW,IAAI,IAAI;IAUnB,OAAO,CAAC,uBAAuB;IAuC/B,eAAe,IAAI,IAAI;IAIvB,mBAAmB;IAanB,OAAO,CAAC,iBAAiB;IAgDlB,sBAAsB,CAAC,MAAM,EAAE,gBAAgB,EAAE,EAAE,YAAY,CAAC,EAAE,MAAM;IAW/E,OAAO,CAAC,YAAY;IAwEpB,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM;IAKvC,IAAI;IAKJ,QAAQ;CAKX"}
+{"version":3,"file":"nxs-carousel.component.d.ts","sourceRoot":"","sources":["../../../src/lib/nxs-carousel/nxs-carousel.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA0D,YAAY,EAAiC,MAAM,EAAmB,WAAW,EAAE,MAAM,eAAe,CAAC;AAC1K,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAErG,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAIrD,OAAmB,EAA0C,MAAM,EAAE,aAAa,EAAU,MAAM,QAAQ,CAAC;AAE3G,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAKjD,qBAMa,oBAAoB;IAgCzB,OAAO,CAAC,SAAS;IACjB,OAAO,CAAC,IAAI;IACS,OAAO,CAAC,UAAU;IAC3B,OAAO,CAAC,MAAM,CAAC;IAjC/B,QAAQ,EAAG,WAAW,CAAC,WAAW,CAAC,CAAC;IAEpC,eAAe,CAAC,EAAE,eAAe,CAAC;IAElC,IAAI,UAAQ;IACZ,OAAO,CAAC,eAAe,CAAyB;IAGzC,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAClC,OAAO,EAAE,kBAAkB,CAAQ;IACnC,iBAAiB,EAAE,aAAa,CAAQ;IACxC,IACI,UAAU,CAAC,GAAG,EAAE,kBAAkB,EAGrC;IAED,cAAc,UAAS;IACvB,WAAW,EAAE,MAAM,CAAK;IACxB,OAAO,CAAC,cAAc,CAAS;IAC/B,wBAAwB,EAAE,MAAM,CAAC;IAGjC,WAAW,uBAA8B;IAClC,YAAY,SAAK;IAExB,UAAU,uDAA8D;IACxE,SAAS,UAAS;gBAGN,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,MAAM,EACS,UAAU,EAAE,GAAG,EACxB,MAAM,CAAC,EAAE,uBAAuB;IAQxD,OAAO,CAAC,GAAG;IAKX,OAAO,CAAC,OAAO;IAMf,WAAW,IAAI,IAAI;IAGnB,eAAe,IAAI,IAAI;IAKvB,mBAAmB;IAanB,OAAO,CAAC,iBAAiB;IAmEzB,OAAO,CAAC,oBAAoB;IAqBrB,sBAAsB,CAAC,MAAM,EAAE,gBAAgB,EAAE,EAAE,YAAY,CAAC,EAAE,MAAM;IAW/E,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM;IAGvC,IAAI;IAGJ,QAAQ;IAGR,kBAAkB,CAAC,QAAQ,EAAE,MAAM;IAenC,QAAQ,CAAC,QAAQ,EAAE,MAAM;IAiBzB,OAAO,CAAC,SAAS;IAOjB,aAAa,CAAC,SAAS,EAAE,MAAM,EAAE;CASpC"}

package/lib/nxs-carousel/nxs-carousel.module.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"nxs-carousel.module.d.ts","sourceRoot":"","sources":["../../../src/lib/nxs-carousel/nxs-carousel.module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAO9D,OAAO,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAG/D,qBAgBa,iBAAiB;WACZ,OAAO,CAAC,MAAM,CAAC,EAAE,uBAAuB,GAAG,mBAAmB,CAAC,iBAAiB,CAAC;CAQlG"}
+{"version":3,"file":"nxs-carousel.module.d.ts","sourceRoot":"","sources":["../../../src/lib/nxs-carousel/nxs-carousel.module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAO9D,OAAO,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAI/D,qBAkBa,iBAAiB;WACZ,OAAO,CAAC,MAAM,CAAC,EAAE,uBAAuB,GAAG,mBAAmB,CAAC,iBAAiB,CAAC;CAQlG"}

package/lib/nxs-carousel/swiper-directives.d.ts

@@ -0,0 +1,3 @@
+export declare class NxsSwiperTemplateDirective {
+}
+//# sourceMappingURL=swiper-directives.d.ts.map

package/lib/nxs-carousel/swiper-directives.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"swiper-directives.d.ts","sourceRoot":"","sources":["../../../src/lib/nxs-carousel/swiper-directives.ts"],"names":[],"mappings":"AAEA,qBAGa,0BAA0B;CAAI"}

package/nextalys-carousel.d.ts

@@ -2,5 +2,6 @@
  * Generated bundle index. Do not edit.
  */
 export * from './public-api';
-export { NxsCarouselDialogComponent as ɵa } from './lib/nxs-carousel/nxs-carousel-dialog.component';
+export { NxsCarouselDialogComponent as ɵb } from './lib/nxs-carousel/nxs-carousel-dialog.component';
+export { NxsSwiperTemplateDirective as ɵa } from './lib/nxs-carousel/swiper-directives';
 //# sourceMappingURL=nextalys-carousel.d.ts.map

package/nextalys-carousel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"nextalys-carousel.d.ts","sourceRoot":"","sources":["../src/nextalys-carousel.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,cAAc,CAAC;AAE7B,OAAO,EAAC,0BAA0B,IAAI,EAAE,EAAC,MAAM,kDAAkD,CAAC"}
+{"version":3,"file":"nextalys-carousel.d.ts","sourceRoot":"","sources":["../src/nextalys-carousel.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,cAAc,CAAC;AAE7B,OAAO,EAAC,0BAA0B,IAAI,EAAE,EAAC,MAAM,kDAAkD,CAAC;AAClG,OAAO,EAAC,0BAA0B,IAAI,EAAE,EAAC,MAAM,sCAAsC,CAAC"}

package/nextalys-carousel.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"NxsCarouselComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"nxs-carousel","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":10,"character":19},"member":"None"},"template":"<div #nxsSliderContainer\n     [ngClass]=\"{'swiper-container':true,'nxs-slider-with-thumbnails':!!options.nxsThumbnails && options.nxsThumbnails.show}\"\n    [style.height]=\"getMainSliderHeight()\">\n    <div class=\"swiper-wrapper\" #nxsSlidesWrapper>\n        <ng-content>\n\n        </ng-content>\n    </div>\n    <!-- (cdkObserveContent)=\"onContentChange($event)\" -->\n    <!-- If we need pagination -->\n    <div class=\"swiper-pagination nxs-carousel-pagination\"\n        [style.display]=\"slidesCount>0 && options && options.nxsShowNavigationBullets ? '':'none'\"></div>\n\n    <!-- If we need navigation buttons -->\n    <ng-container *ngIf=\"options.nxsShowNavigationArrows\">\n        <div class=\"nxs-carousel-button-prev swiper-button-prev\"></div>\n        <div class=\"nxs-carousel-button-next swiper-button-next\"></div>\n    </ng-container>\n\n    <ng-container *ngIf=\"images && options.nxsShowImagesCount\">\n        <div class=\"nxs-image-counter\">\n            {{currentSlide+1}} / {{images.length}}\n        </div>\n    </ng-container>\n\n</div>\n\n<div #nxsThumbnailsSliderContainer\n    [style.display]=\"(images && !!options.nxsThumbnails && options.nxsThumbnails.show) ?'':'none'\"\n    [style.height]=\"(!!options.nxsThumbnails && options.nxsThumbnails.show && !!options.nxsThumbnails.percentHeight) ?  (options.nxsThumbnails.percentHeight + '%'):''\"\n    [style.top]=\"(!!options.nxsThumbnails && options.nxsThumbnails.show && !!options.nxsThumbnails.percentHeight && options.nxsThumbnails.onMainSlider) ?  ('-' + (options.nxsThumbnails.percentHeight) + '%'):''\"\n    [ngClass]=\"{'swiper-container':true, 'nxs-slider-thumbnails-container':true,'nxs-slider-thumbnails-on-main-slider':options.nxsThumbnails && options.nxsThumbnails.onMainSlider}\">\n    <div class=\"swiper-wrapper\" #nxsThumbnailsSlidesWrapper>\n\n    </div>\n\n</div>","styles":["nxs-carousel{display:block;height:100%;position:relative;--swiper-navigation-color:#fff;--swiper-theme-color:#fff}nxs-carousel .swiper-container{width:100%;display:block;position:relative;height:100%}nxs-carousel .swiper-container .swiper-wrapper .swiper-slide{height:100%;position:relative;width:100%;min-height:50px;background-size:cover;background-position:50%;background-repeat:no-repeat}nxs-carousel .swiper-container.nxs-slider-with-thumbnails{height:80%}nxs-carousel .swiper-container.nxs-slider-thumbnails-container{height:20%;background:transparent;padding:6px 0}nxs-carousel .swiper-container.nxs-slider-thumbnails-container .swiper-slide{cursor:pointer;border-radius:6px;margin:0 6px;border:2px solid transparent}nxs-carousel .swiper-container.nxs-slider-thumbnails-container .swiper-slide.swiper-slide-thumb-active{border:2px solid #add8e6}nxs-carousel .swiper-container.nxs-slider-thumbnails-on-main-slider{top:-20%}nxs-carousel .nxs-image-counter{position:absolute;top:0;right:0;color:#fff;padding:4px;font-weight:700;z-index:10}"]}]}],"members":{"nxsSliderContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":18,"character":5},"arguments":["nxsSliderContainer",{"static":true}]}]}],"nxsSlidesWrapper":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":21,"character":5},"arguments":["nxsSlidesWrapper",{"static":true}]}]}],"nxsThumbnailsSliderContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":25,"character":5},"arguments":["nxsThumbnailsSliderContainer",{"static":true}]}]}],"nxsThumbnailsSlidesWrapper":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":27,"character":5},"arguments":["nxsThumbnailsSlidesWrapper",{"static":true}]}]}],"setOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":5},"arguments":["options"]}]}],"setImages":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":5},"arguments":["images"]}]}],"hasHtmlContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":5}}]}],"slideChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":46,"character":5}}]}],"slideClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":49,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":57,"character":9},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"PLATFORM_ID","line":57,"character":16}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":58,"character":9}}]],"parameters":[{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialog","line":55,"character":27},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":56,"character":22},{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","name":"NxsCarouselModuleConfig"}]}],"log":[{"__symbolic":"method"}],"onContentChange":[{"__symbolic":"method"}],"initSlides":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"subscribeToSlideChanged":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"getMainSliderHeight":[{"__symbolic":"method"}],"setDefaultOptions":[{"__symbolic":"method"}],"showFullScreenCarousel":[{"__symbolic":"method"}],"createSlider":[{"__symbolic":"method"}],"goToSlide":[{"__symbolic":"method"}],"next":[{"__symbolic":"method"}],"previous":[{"__symbolic":"method"}]}},"NxsCarouselModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":10,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"NxsCarouselComponent"},{"__symbolic":"reference","name":"ɵa"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":16,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":17,"character":8},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":18,"character":8},{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialogModule","line":19,"character":8},{"__symbolic":"reference","module":"@angular/cdk/observers","name":"ObserversModule","line":20,"character":8}],"exports":[{"__symbolic":"reference","name":"NxsCarouselComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":["config"],"value":{"ngModule":{"__symbolic":"reference","name":"NxsCarouselModule"},"providers":[{"provide":{"__symbolic":"reference","name":"NxsCarouselModuleConfig"},"useValue":{"__symbolic":"reference","name":"config"}}]}}}},"NxsCarouselImage":{"__symbolic":"interface"},"SwiperInstance":{"__symbolic":"interface"},"NxsCarouselOptions":{"__symbolic":"interface"},"NxsCarouselModuleConfig":{"__symbolic":"class","members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"nxs-carousel-dialog","template":"\n    <div class=\"nxs-carousel-dialog-flex-wrapper\">\n    <div class=\"nxs-carousel-dialog-header\">\n        <button (click)=\"dialogRef.close()\" mat-icon-button><mat-icon>close</mat-icon></button>\n    </div>\n    <div [class]=\"wrapperClass\">\n    <nxs-carousel [options]=\"data.options\" [images]=\"data.images\"></nxs-carousel>\n    </div>\n</div>\n    ","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":22,"character":19},"member":"None"},"styles":[".nxs-carousel-dialog{max-width:98vw!important;width:98vw;height:98vh}.nxs-carousel-dialog .nxs-carousel-dialog-flex-wrapper{display:flex;height:100%;flex-direction:column}.nxs-carousel-dialog .nxs-carousel-dialog-flex-wrapper .nxs-carousel-wrapper{flex:auto}.nxs-carousel-dialog .nxs-carousel-dialog-header{position:relative;display:flex;justify-content:flex-end;padding-bottom:8px}.nxs-carousel-dialog mat-dialog-container{padding:20px}.nxs-carousel-dialog .nxs-carousel-wrapper{width:100%;margin:auto;height:100%}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":27,"character":9},"arguments":[{"__symbolic":"reference","module":"@angular/material/dialog","name":"MAT_DIALOG_DATA","line":27,"character":16}]}],null],"parameters":[{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","name":"MatDialogRef","module":"@angular/material/dialog","arguments":[{"__symbolic":"reference","name":"ɵa"}]}]}]}}},"origins":{"NxsCarouselComponent":"./lib/nxs-carousel/nxs-carousel.component","NxsCarouselModule":"./lib/nxs-carousel/nxs-carousel.module","NxsCarouselImage":"./lib/nxs-carousel/nxs-carousel-types","SwiperInstance":"./lib/nxs-carousel/nxs-carousel-types","NxsCarouselOptions":"./lib/nxs-carousel/nxs-carousel-types","NxsCarouselModuleConfig":"./lib/nxs-carousel/nxs-carousel-types","ɵa":"./lib/nxs-carousel/nxs-carousel-dialog.component"},"importAs":"nextalys-carousel"}
+{"__symbolic":"module","version":4,"metadata":{"NxsCarouselComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":14,"character":1},"arguments":[{"selector":"nxs-carousel","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":18,"character":19},"member":"None"},"template":"<div *ngIf=\"options\"\n    [ngClass]=\"{'swiper-container':true,'nxs-slider-with-thumbnails':!!options.nxsThumbnails && options.nxsThumbnails.show}\"\n    [style.height]=\"getMainSliderHeight()\">\n    <swiper [config]=\"options\" (swiper)=\"onSwiper($event)\" (slideChange)=\"onSlideChange($event)\"\n        [thumbs]=\"{ swiper: thumbnailsSwiperInstance }\">\n        <ng-container *ngIf=\"hasHtmlContent\">\n            <ng-template *ngFor=\"let slide of contents\" swiperSlide>\n                <ng-template [ngTemplateOutlet]=\"slide\" [ngTemplateOutletContext]=\"{\n                      $implicit: slide\n                    }\"></ng-template>\n            </ng-template>\n        </ng-container>\n        <ng-container *ngIf=\"!hasHtmlContent && images?.length\">\n            <ng-template swiperSlide *ngFor=\"let slideImage of images\">\n                <img class=\"nxs-image-slide swiper-lazy\" [attr.data-src]=\"slideImage.src\" />\n                <div class=\"swiper-lazy-preloader swiper-lazy-preloader-black\"></div>\n            </ng-template>\n        </ng-container>\n    </swiper>\n    <ng-container *ngIf=\"images && options.nxsShowImagesCount\">\n        <div class=\"nxs-image-counter\">\n            {{currentSlide+1}} / {{images.length}}\n        </div>\n    </ng-container>\n</div>\n\n<div *ngIf=\"thumbnailsOptions && images?.length\"\n    [style.height]=\"(!!options.nxsThumbnails && options.nxsThumbnails.show && !!options.nxsThumbnails.percentHeight) ?  (options.nxsThumbnails.percentHeight + '%'):''\"\n    [style.top]=\"(!!options.nxsThumbnails && options.nxsThumbnails.show && !!options.nxsThumbnails.percentHeight && options.nxsThumbnails.onMainSlider) ?  ('-' + (options.nxsThumbnails.percentHeight) + '%'):''\"\n    [ngClass]=\"{'swiper-container':true, 'nxs-slider-thumbnails-container':true,'nxs-slider-thumbnails-on-main-slider':options.nxsThumbnails && options.nxsThumbnails.onMainSlider}\">\n    <swiper [config]=\"thumbnailsOptions\" (swiper)=\"onSwiperThumbnails($event)\">\n        <ng-template swiperSlide *ngFor=\"let slideImage of images\">\n            <img class=\"nxs-image-slide swiper-lazy\" [attr.data-src]=\"slideImage.src\" />\n            <div class=\"swiper-lazy-preloader swiper-lazy-preloader-black\"></div>\n        </ng-template>\n    </swiper>\n</div>","styles":["@import \"~swiper/swiper.min.css\";@import \"~swiper/modules/navigation/navigation.min.css\";@import \"~swiper/modules/pagination/pagination.min.css\";@import \"~swiper/modules/lazy/lazy.min.css\";nxs-carousel{display:block;height:100%;position:relative;--swiper-navigation-color:#fff;--swiper-pagination-color:#fff;--swiper-theme-color:#fff}nxs-carousel .swiper-container{width:100%;height:100%;display:block;position:relative}nxs-carousel .swiper-container swiper{height:100%}nxs-carousel .swiper-container .swiper-wrapper .swiper-slide{height:100%;position:relative;width:100%;min-height:50px;background-size:cover;background-position:50%;background-repeat:no-repeat}nxs-carousel .swiper-container .nxs-image-slide{height:100%;-o-object-fit:cover;object-fit:cover;width:100%;-o-object-position:center;object-position:center}nxs-carousel .swiper-container.nxs-slider-with-thumbnails{height:80%}nxs-carousel .swiper-container.nxs-slider-thumbnails-container{height:20%;background:transparent;padding:6px 0}nxs-carousel .swiper-container.nxs-slider-thumbnails-container .swiper-slide{cursor:pointer;border-radius:6px;margin:0 6px;border:2px solid transparent}nxs-carousel .swiper-container.nxs-slider-thumbnails-container .swiper-slide.swiper-slide-thumb-active{border:2px solid #add8e6}nxs-carousel .swiper-container.nxs-slider-thumbnails-on-main-slider{top:-20%}nxs-carousel .nxs-image-counter{position:absolute;top:0;right:0;color:#fff;padding:4px;font-weight:700;z-index:10}"]}]}],"members":{"contents":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":21,"character":5},"arguments":[{"__symbolic":"reference","name":"ɵa"},{"read":{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","line":21,"character":57}}]}]}],"swiperComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":23,"character":5},"arguments":["swiper",{"static":false}]}]}],"lazy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":5}}]}],"images":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":5}}]}],"setOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":5},"arguments":["options"]}]}],"hasHtmlContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"slideChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":44,"character":5}}]}],"slideClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":47,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":54,"character":9},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"PLATFORM_ID","line":54,"character":16}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":55,"character":9}}]],"parameters":[{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialog","line":52,"character":27},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":53,"character":22},{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","name":"NxsCarouselModuleConfig"}]}],"log":[{"__symbolic":"method"}],"destroy":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"getMainSliderHeight":[{"__symbolic":"method"}],"setDefaultOptions":[{"__symbolic":"method"}],"setThumbnailsOptions":[{"__symbolic":"method"}],"showFullScreenCarousel":[{"__symbolic":"method"}],"goToSlide":[{"__symbolic":"method"}],"next":[{"__symbolic":"method"}],"previous":[{"__symbolic":"method"}],"onSwiperThumbnails":[{"__symbolic":"method"}],"onSwiper":[{"__symbolic":"method"}],"runInZone":[{"__symbolic":"method"}],"onSlideChange":[{"__symbolic":"method"}]}},"NxsCarouselModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":11,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"NxsCarouselComponent"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵa"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":18,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":19,"character":8},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":20,"character":8},{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialogModule","line":21,"character":8},{"__symbolic":"reference","module":"swiper/angular","name":"SwiperModule","line":22,"character":8}],"exports":[{"__symbolic":"reference","name":"NxsCarouselComponent"},{"__symbolic":"reference","name":"ɵa"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":["config"],"value":{"ngModule":{"__symbolic":"reference","name":"NxsCarouselModule"},"providers":[{"provide":{"__symbolic":"reference","name":"NxsCarouselModuleConfig"},"useValue":{"__symbolic":"reference","name":"config"}}]}}}},"NxsCarouselImage":{"__symbolic":"interface"},"NxsCarouselOptions":{"__symbolic":"interface"},"NxsCarouselModuleConfig":{"__symbolic":"class","members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[nxsSwiperTemplate]"}]}],"members":{}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"nxs-carousel-dialog","template":"\n    <div class=\"nxs-carousel-dialog-flex-wrapper\">\n    <div class=\"nxs-carousel-dialog-header\">\n        <button (click)=\"dialogRef.close()\" mat-icon-button><mat-icon>close</mat-icon></button>\n    </div>\n    <div [class]=\"wrapperClass\">\n    <nxs-carousel [options]=\"data.options\" [images]=\"data.images\"></nxs-carousel>\n    </div>\n</div>\n    ","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":22,"character":19},"member":"None"},"styles":[".nxs-carousel-dialog{max-width:98vw!important;width:98vw;height:98vh}.nxs-carousel-dialog .nxs-carousel-dialog-flex-wrapper{display:flex;height:100%;flex-direction:column}.nxs-carousel-dialog .nxs-carousel-dialog-flex-wrapper .nxs-carousel-wrapper{flex:auto}.nxs-carousel-dialog .nxs-carousel-dialog-header{position:relative;display:flex;justify-content:flex-end;padding-bottom:8px}.nxs-carousel-dialog mat-dialog-container{padding:20px}.nxs-carousel-dialog .nxs-carousel-wrapper{width:100%;margin:auto;height:100%}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":27,"character":9},"arguments":[{"__symbolic":"reference","module":"@angular/material/dialog","name":"MAT_DIALOG_DATA","line":27,"character":16}]}],null],"parameters":[{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","name":"MatDialogRef","module":"@angular/material/dialog","arguments":[{"__symbolic":"reference","name":"ɵb"}]}]}]}}},"origins":{"NxsCarouselComponent":"./lib/nxs-carousel/nxs-carousel.component","NxsCarouselModule":"./lib/nxs-carousel/nxs-carousel.module","NxsCarouselImage":"./lib/nxs-carousel/nxs-carousel-types","NxsCarouselOptions":"./lib/nxs-carousel/nxs-carousel-types","NxsCarouselModuleConfig":"./lib/nxs-carousel/nxs-carousel-types","ɵa":"./lib/nxs-carousel/swiper-directives","ɵb":"./lib/nxs-carousel/nxs-carousel-dialog.component"},"importAs":"nextalys-carousel"}

package/package.json

@@ -1,19 +1,9 @@
 {
   "name": "nextalys-carousel",
-  "version": "0.0.52",
-  "peerDependencies": {
-    "@angular/animations": "^9.0.0",
-    "@angular/cdk": "^9.0.0",
-    "@angular/common": "^9.0.0",
-    "@angular/core": "^9.0.0",
-    "@angular/forms": "^9.0.0",
-    "@angular/material": "^9.0.0",
-    "@angular/platform-browser": "^9.0.0",
-    "nextalys-js-helpers": "^0.0.95"
-  },
+  "version": "0.0.55",
   "dependencies": {
-    "swiper": "^5.3.7",
-    "tslib": "^2.0.0"
+    "swiper": "^8.1.6",
+    "tslib": "^2.2.0"
   },
   "main": "bundles/nextalys-carousel.umd.js",
   "module": "fesm2015/nextalys-carousel.js",