Simplified carousel

removed keyboard support

libs/ui/src/lib/carousel/carousel-item.directive.ts

@@ -1,16 +1,8 @@
-import { FocusableOption } from '@angular/cdk/a11y';
 import { Directive, ElementRef, HostBinding } from '@angular/core';
 
 @Directive({
   selector: '[gf-carousel-item]'
 })
-export class CarouselItem implements FocusableOption {
+export class CarouselItem {
-  @HostBinding('attr.role') readonly role = 'listitem';
-  @HostBinding('tabindex') tabindex = '-1';
-
   public constructor(readonly element: ElementRef<HTMLElement>) {}
-
-  public focus() {
-    this.element.nativeElement.focus({ preventScroll: true });
-  }
 }

libs/ui/src/lib/carousel/carousel.component.html

@@ -11,12 +11,7 @@
   </button>
 }
 
-<div
+<div #contentWrapper class="overflow-hidden" role="region">
-  #contentWrapper
-  class="overflow-hidden"
-  role="region"
-  (keyup)="onKeydown($event)"
->
   <div #list class="d-flex carousel-content" role="list" tabindex="0">
     <ng-content></ng-content>
   </div>

libs/ui/src/lib/carousel/carousel.component.ts

@@ -1,25 +1,18 @@
-import { FocusKeyManager } from '@angular/cdk/a11y';
-import { LEFT_ARROW, RIGHT_ARROW, TAB } from '@angular/cdk/keycodes';
 import {
-  AfterContentInit,
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
   Component,
   contentChildren,
-  ContentChildren,
   ElementRef,
   HostBinding,
   Inject,
   Input,
   Optional,
-  QueryList,
   ViewChild
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
 
-import { CarouselItem } from './carousel-item.directive';
-
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [MatButtonModule],
@@ -29,9 +22,8 @@ import { CarouselItem } from './carousel-item.directive';
   styleUrls: ['./carousel.component.scss'],
   templateUrl: './carousel.component.html'
 })
-export class GfCarouselComponent implements AfterContentInit {
+export class GfCarouselComponent {
-  @ContentChildren(CarouselItem) public items!: QueryList<CarouselItem>;
+  public items = contentChildren('carouselItem', { read: ElementRef });
-  itemsSignal = contentChildren('carouselItem', { read: ElementRef });
 
   @HostBinding('class.animations-disabled')
   public readonly animationsDisabled: boolean;
@@ -44,7 +36,6 @@ export class GfCarouselComponent implements AfterContentInit {
   public showNextArrow = true;
 
   private index = 0;
-  private keyManager!: FocusKeyManager<CarouselItem>;
   private position = 0;
 
   public constructor(
@@ -53,12 +44,8 @@ export class GfCarouselComponent implements AfterContentInit {
     this.animationsDisabled = animationsModule === 'NoopAnimations';
   }
 
-  public ngAfterContentInit() {
-    this.keyManager = new FocusKeyManager<CarouselItem>(this.items);
-  }
-
   public next() {
-    for (let i = this.index; i < this.itemsSignal().length; i++) {
+    for (let i = this.index; i < this.items().length; i++) {
       if (this.isOutOfView(i)) {
         this.index = i;
         this.scrollToActiveItem();
@@ -67,31 +54,6 @@ export class GfCarouselComponent implements AfterContentInit {
     }
   }
 
-  public onKeydown({ keyCode }: KeyboardEvent) {
-    const manager = this.keyManager;
-    const previousActiveIndex = manager.activeItemIndex;
-
-    if (keyCode === LEFT_ARROW) {
-      manager.setPreviousItemActive();
-    } else if (keyCode === RIGHT_ARROW) {
-      manager.setNextItemActive();
-    } else if (keyCode === TAB && !manager.activeItem) {
-      manager.setFirstItemActive();
-    }
-
-    if (
-      manager.activeItemIndex != null &&
-      manager.activeItemIndex !== previousActiveIndex
-    ) {
-      this.index = manager.activeItemIndex;
-      this.updateItemTabIndices();
-
-      if (this.isOutOfView(this.index)) {
-        this.scrollToActiveItem();
-      }
-    }
-  }
-
   public previous() {
     for (let i = this.index; i > -1; i--) {
       if (this.isOutOfView(i)) {
@@ -103,7 +65,7 @@ export class GfCarouselComponent implements AfterContentInit {
   }
 
   private isOutOfView(index: number, side?: 'start' | 'end') {
-    const { offsetWidth, offsetLeft } = this.itemsSignal()[index].nativeElement;
+    const { offsetWidth, offsetLeft } = this.items()[index].nativeElement;
 
     if ((!side || side === 'start') && offsetLeft - this.position < 0) {
       return true;
@@ -121,32 +83,23 @@ export class GfCarouselComponent implements AfterContentInit {
       return;
     }
 
-    const itemsArray = this.itemsSignal();
     let targetItemIndex = this.index;
 
     if (this.index > 0 && !this.isOutOfView(this.index - 1)) {
       targetItemIndex =
-        itemsArray.findIndex((_, i) => !this.isOutOfView(i)) + 1;
+        this.items().findIndex((_, i) => !this.isOutOfView(i)) + 1;
     }
 
-    this.position = itemsArray[targetItemIndex].nativeElement.offsetLeft;
+    this.position = this.items()[targetItemIndex].nativeElement.offsetLeft;
     this.list.nativeElement.style.transform = `translateX(-${this.position}px)`;
     this.showPrevArrow = this.index > 0;
     this.showNextArrow = false;
 
-    for (let i = itemsArray.length - 1; i > -1; i--) {
+    for (let i = this.items().length - 1; i > -1; i--) {
       if (this.isOutOfView(i, 'end')) {
         this.showNextArrow = true;
         break;
       }
     }
   }
-
-  private updateItemTabIndices() {
-    this.items.forEach((item: CarouselItem) => {
-      if (this.keyManager != null) {
-        item.tabindex = item === this.keyManager.activeItem ? '0' : '-1';
-      }
-    });
-  }
 }