refactor(carousel): control flow, use @input() transform, ThemeDirective composition for dark prop

Author: xidedix

projects/coreui-angular/src/lib/carousel/carousel-indicators/carousel-indicators.component.html

@@ -5,7 +5,7 @@
       type="button"
       (click)="onClick(i)"
       [class]="{ active: active === i }"
-      [attr.aria-current]="active === i"
-    ></button>
+      [attr.aria-current]="active === i">
+    </button>
   }
 </div>

projects/coreui-angular/src/lib/carousel/carousel-item/carousel-item.component.html

@@ -1,4 +1,4 @@
+<!--todo ngIf-->
 @if (active) {
   <ng-content />
 }
-

projects/coreui-angular/src/lib/carousel/carousel-item/carousel-item.component.ts

@@ -1,5 +1,12 @@
-import { AfterViewInit, ChangeDetectorRef, Component, HostBinding, Input, OnDestroy } from '@angular/core';
-import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
+import {
+  AfterViewInit,
+  booleanAttribute,
+  ChangeDetectorRef,
+  Component,
+  HostBinding,
+  Input,
+  OnDestroy
+} from '@angular/core';
 import { Subscription } from 'rxjs';
 
 import { CarouselService } from '../carousel.service';
@@ -12,17 +19,15 @@ import { CarouselService } from '../carousel.service';
 })
 export class CarouselItemComponent implements OnDestroy, AfterViewInit {
 
-  static ngAcceptInputType_active: BooleanInput;
-
   index?: number;
   private carouselIndexSubscription?: Subscription;
 
   /**
    * @ignore
    */
-  @Input()
+  @Input({ transform: booleanAttribute })
   set active(value) {
-    this._active = coerceBooleanProperty(value);
+    this._active = value;
     this.changeDetectorRef.markForCheck();
   }
 

projects/coreui-angular/src/lib/carousel/carousel/carousel.component.ts

@@ -19,19 +19,34 @@ import { filter, finalize, withLatestFrom, zipWith } from 'rxjs/operators';
 import { IntersectionService } from '../../services';
 import { IListenersConfig, ListenersService } from '../../services';
 
+import { Triggers } from '../../coreui.types';
+import { ThemeDirective } from '../../shared/theme.directive';
 import { CarouselState } from '../carousel-state';
 import { CarouselService } from '../carousel.service';
 import { CarouselConfig } from '../carousel.config';
-import { Triggers } from '../../coreui.types';
 
 @Component({
   selector: 'c-carousel',
-  template: '<ng-content></ng-content>',
+  template: '<ng-content />',
   styleUrls: ['./carousel.component.scss'],
   providers: [CarouselService, CarouselState, CarouselConfig, ListenersService],
-  standalone: true
+  standalone: true,
+  hostDirectives: [
+    { directive: ThemeDirective, inputs: ['dark'] }
+  ]
 })
 export class CarouselComponent implements OnInit, OnDestroy, AfterContentInit {
+  constructor(
+    @Inject(CarouselConfig) private config: CarouselConfig,
+    private hostElement: ElementRef,
+    private carouselService: CarouselService,
+    private carouselState: CarouselState,
+    private intersectionService: IntersectionService,
+    private listenersService: ListenersService
+  ) {
+    Object.assign(this, config);
+  }
+
   /**
    * Index of the active item.
    * @type number
@@ -42,11 +57,6 @@ export class CarouselComponent implements OnInit, OnDestroy, AfterContentInit {
    * @type boolean
    */
   @Input() animate: boolean = true;
-  /**
-   * Add darker controls, indicators, and captions.
-   * @type boolean
-   */
-  @Input() dark?: boolean;
   /**
    * Carousel direction. [docs]
    * @type {'next' | 'prev'}
@@ -92,7 +102,6 @@ export class CarouselComponent implements OnInit, OnDestroy, AfterContentInit {
     return {
       carousel: true,
       slide: true,
-      'carousel-dark': !!this.dark,
       'carousel-fade': this.transition === 'crossfade'
     };
   }
@@ -102,17 +111,6 @@ export class CarouselComponent implements OnInit, OnDestroy, AfterContentInit {
   private swipeSubscription?: Subscription;
   readonly #destroyRef = inject(DestroyRef);
 
-  constructor(
-    @Inject(CarouselConfig) private config: CarouselConfig,
-    private hostElement: ElementRef,
-    private carouselService: CarouselService,
-    private carouselState: CarouselState,
-    private intersectionService: IntersectionService,
-    private listenersService: ListenersService
-  ) {
-    Object.assign(this, config);
-  }
-
   ngOnInit(): void {
     this.carouselStateSubscribe();
   }
@@ -190,6 +188,7 @@ export class CarouselComponent implements OnInit, OnDestroy, AfterContentInit {
   }
 
   private intersectionServiceSubscribe(): void {
+    this.intersectionService.createIntersectionObserver(this.hostElement);
     this.intersectionService.intersecting$
       .pipe(
         filter(next => next.hostElement === this.hostElement),
@@ -202,7 +201,6 @@ export class CarouselComponent implements OnInit, OnDestroy, AfterContentInit {
         this.visible = next.isIntersecting;
         next.isIntersecting ? this.setTimer() : this.resetTimer();
       });
-    this.intersectionService.createIntersectionObserver(this.hostElement);
   }
 
   private swipeSubscribe(subscribe: boolean = true): void {