From 4bfa6ee1052c896f43120beb8889096ab1428157 Mon Sep 17 00:00:00 2001
From: "kirill.chirkov@home" <kirill.chirkov@outlook.com>
Date: Fri, 3 Dec 2021 11:03:37 +0300
Subject: [PATCH 1/2] feat: allow to disable keyboard navigation

---
 .../src/lib/private/models/carousel-config.ts |  6 ++++
 .../views/carousel-engine.component.ts        | 35 +++++++++++++------
 src/app/app.component.html                    |  3 ++
 src/app/app.component.ts                      |  2 ++
 4 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/projects/ng-carousel/src/lib/private/models/carousel-config.ts b/projects/ng-carousel/src/lib/private/models/carousel-config.ts
index 114b79e..b2b0dd8 100644
--- a/projects/ng-carousel/src/lib/private/models/carousel-config.ts
+++ b/projects/ng-carousel/src/lib/private/models/carousel-config.ts
@@ -86,6 +86,11 @@ export class CompleteCarouselConfig<T = any> {
      * Default: 5
      */
     threshold = 5;
+    /**
+     * Whether carousel is listening to arrow keypresses and navigates to prev and
+     * next slide accordingly after left or right arrow key is pressed
+     */
+    allowKeyboardNavigation = true;
 
     constructor(config?: CarouselConfig<T> | null) {
         this.items = config?.items ?? [];
@@ -99,6 +104,7 @@ export class CompleteCarouselConfig<T = any> {
         this.transitionDuration = extractCoerced(config?.transitionDuration, 600);
         this.shouldRecalculateOnResize = extractCoerced(config?.shouldRecalculateOnResize, true);
         this.recalculateDebounce = extractCoerced(config?.recalculateDebounce, 300);
+        this.allowKeyboardNavigation = extractCoerced(config?.allowKeyboardNavigation, true);
     }
 }
 
diff --git a/projects/ng-carousel/src/lib/private/views/carousel-engine.component.ts b/projects/ng-carousel/src/lib/private/views/carousel-engine.component.ts
index dd7d0e5..e543521 100644
--- a/projects/ng-carousel/src/lib/private/views/carousel-engine.component.ts
+++ b/projects/ng-carousel/src/lib/private/views/carousel-engine.component.ts
@@ -216,18 +216,31 @@ export class CarouselEngineComponent<T> implements OnInit, OnDestroy {
 
             return;
         }
-        this.keyboardListener = this.renderer.listen(
-            this.htmlElement,
-            'keydown',
-            (event: KeyboardEvent) => {
-                const key = event.key.toLowerCase();
-                if (['arrowright', 'right'].includes(key)) {
-                    this.carousel.next();
-                } else if (['arrowleft', 'left'].includes(key)) {
-                    this.carousel.prev();
+        this.carousel.carouselStateChanges()
+            .pipe(
+                map((state: CarouselState<T>) => state.config.allowKeyboardNavigation),
+                distinctUntilChanged(),
+                takeUntil(this.destroyed$),
+            )
+            .subscribe((canListen: boolean) => {
+                this.keyboardListener?.();
+                if (!canListen) {
+
+                    return;
                 }
-            }
-        );
+                this.keyboardListener = this.renderer.listen(
+                    this.htmlElement,
+                    'keydown',
+                    (event: KeyboardEvent) => {
+                        const key = event.key.toLowerCase();
+                        if (['arrowright', 'right'].includes(key)) {
+                            this.carousel.next();
+                        } else if (['arrowleft', 'left'].includes(key)) {
+                            this.carousel.prev();
+                        }
+                    }
+                );
+            });
     }
 
     /**
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 3ea0f6d..5c759d3 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -182,6 +182,9 @@ <h2>
                 <mat-checkbox formControlName="shouldRecalculateOnResize">
                     Autoresize
                 </mat-checkbox>
+                <mat-checkbox formControlName="allowKeyboardNavigation">
+                    Keyboard navigation
+                </mat-checkbox>
             </div>
         </form>
     </mat-card>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 8804c20..2dbc63c 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -27,6 +27,7 @@ export class AppComponent implements OnInit, OnDestroy {
         dragEnabled: true,
         shouldRecalculateOnResize: true,
         recalculateDebounce: 300,
+        allowKeyboardNavigation: true,
     };
     readonly configForm = new FormGroup({
         widthMode: new FormControl(this.config.widthMode),
@@ -39,6 +40,7 @@ export class AppComponent implements OnInit, OnDestroy {
         dragEnabled: new FormControl(this.config.dragEnabled),
         shouldRecalculateOnResize: new FormControl(this.config.shouldRecalculateOnResize),
         recalculateDebounce: new FormControl(this.config.recalculateDebounce),
+        allowKeyboardNavigation: new FormControl(this.config.allowKeyboardNavigation),
     });
     readonly slideWidth$ = this.slideWidthChanges();
     readonly widthMode$ = this.widthModeChanges();

From 5c0ae66405c3f372262c6781e129b9ed0c06a873 Mon Sep 17 00:00:00 2001
From: "kirill.chirkov@home" <kirill.chirkov@outlook.com>
Date: Fri, 3 Dec 2021 11:06:37 +0300
Subject: [PATCH 2/2] docs: allow to disable keyboard navigation

closes #106
---
 README.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/README.md b/README.md
index 4e9281f..134a624 100644
--- a/README.md
+++ b/README.md
@@ -169,6 +169,11 @@ Possible options:
     recalculateDebounce = 300;
     ```
     Specifies time for which carousel would wait after resize event to recalculate its positions. 0 means no debounce is applied.
+-
+    ```typescript
+    allowKeyboardNavigation = true;
+    ```
+    Whether carousel shoul listen to arrow keypresses and navigate to prev and next slide accordingly after left or right arrow key is pressed.
 
 #### Outputs
 `itemIndexChange`