Fixed merge conflict in the app index file

package.json

@@ -2,7 +2,7 @@
   "name": "ngx-swiper-wrapper",
   "description": "Angular wrapper library for Swiper",
   "bugs": "https://github.com/zefoy/ngx-swiper-wrapper/issues",
-  "version": "9.0.0",
+  "version": "9.1.0",
   "license": "MIT",
   "private": true,
   "scripts": {
@@ -48,7 +48,7 @@
     "@angular/platform-browser-dynamic": "^9.0.0",
     "core-js": "^3.6.0",
     "rxjs": "^6.5.0",
-    "swiper": "^5.3.1",
+    "swiper": "^6.1.2",
     "zone.js": "^0.10.0"
   },
   "devDependencies": {

projects/app/src/app/app.component.ts

@@ -1,7 +1,9 @@
 import { Component, ViewChild } from '@angular/core';
 
-import { SwiperComponent, SwiperDirective, SwiperConfigInterface,
-  SwiperScrollbarInterface, SwiperPaginationInterface } from 'ngx-swiper-wrapper';
+import { SwiperComponent, SwiperDirective } from 'ngx-swiper-wrapper';
+import { SwiperOptions } from 'swiper';
+import { PaginationOptions } from 'swiper/types/components/pagination';
+import { ScrollbarOptions } from 'swiper/types/components/scrollbar';
 
 @Component({
   selector: 'my-app',
@@ -25,8 +27,8 @@ export class AppComponent {
 
   public disabled: boolean = false;
 
-  public config: SwiperConfigInterface = {
-    a11y: true,
+  public config: SwiperOptions = {
+    a11y: { enabled: true },
     direction: 'horizontal',
     slidesPerView: 1,
     keyboard: true,
@@ -36,13 +38,13 @@ export class AppComponent {
     pagination: false
   };
 
-  private scrollbar: SwiperScrollbarInterface = {
+  private scrollbar: ScrollbarOptions = {
     el: '.swiper-scrollbar',
     hide: false,
     draggable: true
   };
 
-  private pagination: SwiperPaginationInterface = {
+  private pagination: PaginationOptions = {
     el: '.swiper-pagination',
     clickable: true,
     hideOnClick: false

projects/app/src/app/app.module.ts

@@ -9,6 +9,7 @@ import { SwiperModule, SwiperConfigInterface,
 
 import { AppComponent } from './app.component';
 
+// SwiperOptions from 'swiper' could also be used here instead of SwiperConfigInterface
 const DEFAULT_SWIPER_CONFIG: SwiperConfigInterface = {
   observer: true,
   direction: 'horizontal',

projects/lib/ng-package.json

@@ -6,8 +6,5 @@
     "umdModuleIds": {
       "swiper": "Swiper"
     }
-  },
-  "whitelistedNonPeerDependencies": [
-    "swiper"
-  ]
+  }
 }

projects/lib/package.json

@@ -2,16 +2,15 @@
   "name": "ngx-swiper-wrapper",
   "description": "Angular wrapper library for Swiper",
   "bugs": "https://github.com/zefoy/ngx-swiper-wrapper/issues",
-  "version": "9.0.1",
+  "version": "9.1.0",
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/zefoy/ngx-swiper-wrapper.git"
   },
-  "dependencies": {
-    "swiper": "^5.3.0"
-  },
+
   "peerDependencies": {
+    "swiper": "^6.1.2",
     "@angular/common": "^9.0.0",
     "@angular/core": "^9.0.0"
   }

projects/lib/src/lib/swiper.component.css

@@ -81,6 +81,10 @@ swiper > .swiper.s-wrapper.swiper-container-vertical > .swiper-button-next {
   transform: rotate(90deg);
 }
 
+.swiper-button-prev[hidden]::after,  .swiper-button-next[hidden]::after {
+  display: none;
+}
+
 swiper > .swiper.s-wrapper.swiper-container-vertical > .swiper-scrollbar {
   width: 8px;
 

projects/lib/src/lib/swiper.component.ts

@@ -4,18 +4,18 @@ import { NgZone, Inject, Optional, ElementRef, Component,
   AfterViewInit, OnDestroy, Input, Output, EventEmitter,
   ViewChild, ViewEncapsulation, ChangeDetectorRef } from '@angular/core';
 
-import { SwiperDirective } from './swiper.directive';
+import { SwiperOptions } from 'swiper';
 
-import { SWIPER_CONFIG, SwiperConfig, SwiperConfigInterface,
-  SwiperEvent, SwiperEvents } from './swiper.interfaces';
+import { SwiperDirective } from './swiper.directive';
+import { SWIPER_CONFIG, SwiperConfig, SwiperEventNames, SwiperEvent } from './swiper.interfaces';
 
 @Component({
   selector: 'swiper',
   exportAs: 'ngxSwiper',
   templateUrl: './swiper.component.html',
   styleUrls: [
     './swiper.component.css',
-    '../../../../node_modules/swiper/css/swiper.min.css'
+    '../../../../node_modules/swiper/swiper-bundle.css'
   ],
   encapsulation: ViewEncapsulation.None
 })
@@ -32,7 +32,7 @@ export class SwiperComponent implements AfterViewInit, OnDestroy {
 
   @Input() performance: boolean = false;
 
-  @Input() config?: SwiperConfigInterface;
+  @Input() config?: SwiperOptions;
 
   @Input() useSwiperClass: boolean = true;
 
@@ -75,6 +75,7 @@ export class SwiperComponent implements AfterViewInit, OnDestroy {
   @Output('setTransition'              ) S_SETTRANSITION                  = new EventEmitter<any>();
 
   @Output('fromEdge'                   ) S_FROMEDGE                       = new EventEmitter<any>();
+  @Output('toEdge'                     ) S_TOEDGE                         = new EventEmitter<any>();
   @Output('reachEnd'                   ) S_REACHEND                       = new EventEmitter<any>();
   @Output('reachBeginning'             ) S_REACHBEGINNING                 = new EventEmitter<any>();
 
@@ -114,10 +115,12 @@ export class SwiperComponent implements AfterViewInit, OnDestroy {
   @Output('slideNextTransitionStart'   ) S_SLIDENEXTTRANSITIONSTART       = new EventEmitter<any>();
   @Output('slideChangeTransitionEnd'   ) S_SLIDECHANGETRANSITIONEND       = new EventEmitter<any>();
   @Output('slideChangeTransitionStart' ) S_SLIDECHANGETRANSITIONSTART     = new EventEmitter<any>();
+  @Output('observerUpdate'             ) S_OBSERVERUPDATE                 = new EventEmitter<any>();
+
 
   constructor(private zone: NgZone, private cdRef: ChangeDetectorRef,
     @Inject(PLATFORM_ID) private platformId: Object,
-    @Optional() @Inject(SWIPER_CONFIG) private defaults: SwiperConfigInterface) {}
+    @Optional() @Inject(SWIPER_CONFIG) private defaults: SwiperOptions) {}
 
   ngAfterViewInit(): void {
     if (!isPlatformBrowser(this.platformId)) {
@@ -142,7 +145,7 @@ export class SwiperComponent implements AfterViewInit, OnDestroy {
 
         this.directiveRef.indexChange = this.indexChange;
 
-        SwiperEvents.forEach((eventName: SwiperEvent) => {
+        SwiperEventNames.forEach((eventName: SwiperEvent) => {
           if (this.directiveRef) {
             const output = `S_${eventName.replace('swiper', '').toUpperCase()}`;
 
@@ -166,7 +169,7 @@ export class SwiperComponent implements AfterViewInit, OnDestroy {
     }
   }
 
-  public getConfig(): SwiperConfigInterface {
+  public getConfig(): SwiperOptions {
     this.swiperConfig = new SwiperConfig(this.defaults);
 
     this.swiperConfig.assign(this.config); // Custom configuration
@@ -209,7 +212,7 @@ export class SwiperComponent implements AfterViewInit, OnDestroy {
       }
     }
 
-    return this.config as SwiperConfigInterface;
+    return this.config as SwiperOptions;
   }
 
   private updateClasses(): void {

projects/lib/src/lib/swiper.directive.ts

@@ -1,13 +1,12 @@
-import Swiper from 'swiper';
+import Swiper from 'swiper/bundle';
+import { SwiperOptions } from 'swiper';
 
 import { PLATFORM_ID } from '@angular/core';
 import { isPlatformBrowser } from '@angular/common';
 import { NgZone, Inject, Optional, ElementRef, Directive,
   AfterViewInit, OnDestroy, DoCheck, OnChanges, Input, Output, EventEmitter,
   SimpleChanges, KeyValueDiffer, KeyValueDiffers } from '@angular/core';
-
-import { SWIPER_CONFIG, SwiperConfig, SwiperConfigInterface,
-  SwiperEvent, SwiperEvents } from './swiper.interfaces';
+import { SWIPER_CONFIG, SwiperConfig, SwiperEvent, SwiperEventNames } from './swiper.interfaces';
 
 @Directive({
   selector: '[swiper]',
@@ -31,7 +30,7 @@ export class SwiperDirective implements AfterViewInit, OnDestroy, DoCheck, OnCha
 
   @Input() performance: boolean = false;
 
-  @Input('swiper') config?: SwiperConfigInterface;
+  @Input('swiper') config?: SwiperOptions;
 
   @Output() indexChange = new EventEmitter<number>();
 
@@ -58,6 +57,7 @@ export class SwiperDirective implements AfterViewInit, OnDestroy, DoCheck, OnCha
   @Output('setTransition'              ) S_SETTRANSITION                  = new EventEmitter<any>();
 
   @Output('fromEdge'                   ) S_FROMEDGE                       = new EventEmitter<any>();
+  @Output('toEdge'                     ) S_TOEDGE                         = new EventEmitter<any>();
   @Output('reachEnd'                   ) S_REACHEND                       = new EventEmitter<any>();
   @Output('reachBeginning'             ) S_REACHBEGINNING                 = new EventEmitter<any>();
 
@@ -97,10 +97,11 @@ export class SwiperDirective implements AfterViewInit, OnDestroy, DoCheck, OnCha
   @Output('slideNextTransitionStart'   ) S_SLIDENEXTTRANSITIONSTART       = new EventEmitter<any>();
   @Output('slideChangeTransitionEnd'   ) S_SLIDECHANGETRANSITIONEND       = new EventEmitter<any>();
   @Output('slideChangeTransitionStart' ) S_SLIDECHANGETRANSITIONSTART     = new EventEmitter<any>();
+  @Output('observerUpdate'             ) S_OBSERVERUPDATE                 = new EventEmitter<any>();
 
   constructor(@Inject(PLATFORM_ID) private platformId: Object, private zone: NgZone,
     private elementRef: ElementRef, private differs: KeyValueDiffers,
-    @Optional() @Inject(SWIPER_CONFIG) private defaults: SwiperConfigInterface) {}
+    @Optional() @Inject(SWIPER_CONFIG) private defaults: SwiperOptions) {}
 
   ngAfterViewInit(): void {
     if (!isPlatformBrowser(this.platformId)) {
@@ -158,7 +159,7 @@ export class SwiperDirective implements AfterViewInit, OnDestroy, DoCheck, OnCha
     }
 
     // Add native Swiper event handling
-    SwiperEvents.forEach((eventName: SwiperEvent) => {
+    SwiperEventNames.forEach((eventName: SwiperEvent) => {
       let swiperEvent = eventName.replace('swiper', '');
 
       swiperEvent = swiperEvent.charAt(0).toLowerCase() + swiperEvent.slice(1);