refactor(carousels): toggle interval example, aria-* example, cleanup

Author: xidedix

src/app/views/base/carousels/carousels.component.html

@@ -7,7 +7,7 @@
       <c-card-body>
         <p class="text-body-secondary small">Here’s a carousel with slides</p>
         <app-docs-example href="components/carousel">
-          <c-carousel (itemChange)="onItemChange($event)" [interval]="7000" transition="slide">
+          <c-carousel (itemChange)="onItemChange($event)" [interval]="7000">
             <c-carousel-inner>
               @for (slide of slides[0]; track slide.src) {
                 <c-carousel-item>
@@ -35,10 +35,10 @@
           Adding in the previous and next controls with <code>c-carousel-controls</code> component.
         </p>
         <app-docs-example href="components/carousel/#with-controls">
-          <c-carousel (itemChange)="onItemChange($event)" [interval]="0">
-            <c-carousel-inner>
-              @for (slide of slides[0]; track slide.src) {
-                <c-carousel-item>
+          <c-carousel (itemChange)="onItemChange($event)" [interval]="0" aria-roledescription="carousel" aria-label="CoreUI Angular Carousel Example">
+            <c-carousel-inner id="carousel-items">
+              @for (slide of slides[0]; track slide.src; let i = $index) {
+                <c-carousel-item aria-roledescription="slide" [attr.aria-label]="(i + 1).toString() + ' of '+ slides[0].length">
                   <img
                     [src]="slide.src"
                     alt="{{slide.title}}"
@@ -48,8 +48,8 @@
                 </c-carousel-item>
               }
             </c-carousel-inner>
-            <c-carousel-control caption="Previous" direction="prev" i18n-caption />
-            <c-carousel-control caption="Next" direction="next" i18n-caption />
+            <c-carousel-control caption="Previous" direction="prev" i18n-caption aria-controls="carousel-items" aria-label="Previous Slide" />
+            <c-carousel-control caption="Next" direction="next" i18n-caption aria-controls="carousel-items" aria-label="Next Slide" />
           </c-carousel>
         </app-docs-example>
       </c-card-body>
@@ -102,25 +102,26 @@
         </p>
         <app-docs-example href="components/carousel/#with-indicators">
           <c-carousel (itemChange)="onItemChange($event)" [activeIndex]="1" [dark]="true" [interval]="5000" direction="prev">
-            <c-carousel-indicators #indicators="cCarouselIndicators">
-              <ng-template cTemplateId="carouselIndicatorsTemplate">
-                @for (slide of slides[1]; track slide; let i = $index) {
-                  <button
-                    [attr.data-coreui-target]="i"
-                    type="button"
-                    (click)="indicators.onClick(i)"
-                    [class]="{ active: indicators.active === i, border: '1px' }"
-                    [attr.aria-current]="indicators.active === i">
-                    <img
-                      [src]="slide.src"
-                      alt="{{slide.title}}"
-                      class="d-flex w-100"
-                      loading="lazy"
-                    />
-                  </button>
-                }
-              </ng-template>
-            </c-carousel-indicators>
+            <c-carousel-indicators />
+<!--            <c-carousel-indicators #indicators="cCarouselIndicators">-->
+<!--              <ng-template cTemplateId="carouselIndicatorsTemplate">-->
+<!--                @for (slide of slides[1]; track slide; let i = $index) {-->
+<!--                  <button-->
+<!--                    [attr.data-coreui-target]="i"-->
+<!--                    type="button"-->
+<!--                    (click)="indicators.onClick(i)"-->
+<!--                    [class]="{ active: indicators.active === i, border: '1px' }"-->
+<!--                    [attr.aria-current]="indicators.active === i">-->
+<!--                    <img-->
+<!--                      [src]="slide.src"-->
+<!--                      alt="{{slide.title}}"-->
+<!--                      class="d-flex w-100"-->
+<!--                      loading="lazy"-->
+<!--                    />-->
+<!--                  </button>-->
+<!--                }-->
+<!--              </ng-template>-->
+<!--            </c-carousel-indicators>-->
             <c-carousel-inner>
               @for (slide of slides[0]; track slide.src) {
                 <c-carousel-item>
@@ -189,7 +190,7 @@ <h3>{{ slide.title }}</h3>
           with a fade transition instead of a slide.
         </p>
         <app-docs-example href="components/carousel/#crossfade">
-          <c-carousel (itemChange)="onItemChange($event)" [animate]="false" [interval]="5000" transition="crossfade">
+          <c-carousel (itemChange)="onItemChange($event)" [interval]="interval()" transition="crossfade">
             <c-carousel-inner>
               @for (slide of slides[0]; track slide.src) {
                 <c-carousel-item>
@@ -208,6 +209,9 @@ <h3>{{ slide.title }}</h3>
             <c-carousel-control caption="Previous" direction="prev" i18n-caption />
             <c-carousel-control caption="Next" direction="next" i18n-caption />
           </c-carousel>
+          <hr>
+          <button cButton (click)="toggleInterval()">Toggle interval</button>
+          {{ interval() }}
         </app-docs-example>
       </c-card-body>
     </c-card>

src/app/views/base/carousels/carousels.component.ts

@@ -1,7 +1,8 @@
-import { Component } from '@angular/core';
+import { Component, signal } from '@angular/core';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 import { DocsExampleComponent } from '@docs-components/public-api';
 import {
+  ButtonDirective,
   CardBodyComponent,
   CardComponent,
   CardHeaderComponent,
@@ -22,7 +23,7 @@ export type Slide = { id: number, src: SafeUrl | string, title: string, subtitle
   selector: 'app-carousels',
   templateUrl: './carousels.component.html',
   styleUrls: ['./carousels.component.scss'],
-  imports: [RowComponent, ColComponent, CardComponent, CardHeaderComponent, CardBodyComponent, DocsExampleComponent, CarouselComponent, CarouselInnerComponent, CarouselItemComponent, CarouselControlComponent, IconDirective, CarouselIndicatorsComponent, CarouselCaptionComponent]
+  imports: [RowComponent, ColComponent, CardComponent, CardHeaderComponent, CardBodyComponent, DocsExampleComponent, CarouselComponent, CarouselInnerComponent, CarouselItemComponent, CarouselControlComponent, CarouselIndicatorsComponent, CarouselCaptionComponent, ButtonDirective, IconDirective]
   // providers: [{ provide: CarouselConfig, useClass: CarouselCustomConfig  }]
 })
 export class CarouselsComponent {
@@ -77,7 +78,12 @@ export class CarouselsComponent {
   }
 
   onItemChange($event: any): void {
-    console.log('Carousel onItemChange', $event);
+    // console.log('Carousel onItemChange', $event);
   }
 
+  readonly interval = signal(5000);
+
+  toggleInterval() {
+    this.interval.update((value) => value ? 0 : 2500);
+  }
 }