carousel

1import {
2  ChangeDetectionStrategy,
3  Component,
4  input,
5  signal,
6  ViewEncapsulation,
7  output,
8  computed,
9  viewChild,
10  type InputSignal,
11  type Signal,
12} from '@angular/core';
13 
14import { NgIcon, provideIcons } from '@ng-icons/core';
15import { lucideChevronLeft, lucideChevronRight, lucideCircleSmall } from '@ng-icons/lucide';
16import type { ClassValue } from 'clsx';
17import type { EmblaCarouselType, EmblaEventType, EmblaOptionsType, EmblaPluginType } from 'embla-carousel';
18import { EmblaCarouselDirective } from 'embla-carousel-angular';
19 
20import { ZardButtonComponent } from '@/shared/components/button';
21import {
22  carouselNextButtonVariants,
23  carouselPreviousButtonVariants,
24  carouselVariants,
25  type ZardCarouselControlsVariants,
26  type ZardCarouselOrientationVariants,
27} from '@/shared/components/carousel/carousel.variants';
28import { mergeClasses } from '@/shared/utils/merge-classes';
29 
30@Component({
31  selector: 'z-carousel',
32  imports: [EmblaCarouselDirective, ZardButtonComponent, NgIcon],
33  template: `
34    <div class="relative">
35      <div
36        emblaCarousel
37        #emblaRef="emblaCarousel"
38        [class]="classes()"
39        [options]="options()"
40        [plugins]="zPlugins()"
41        [subscribeToEvents]="subscribeToEvents"
42        (emblaChange)="onEmblaChange($event, emblaRef.emblaApi!)"
43        aria-roledescription="carousel"
44        role="region"
45        tabindex="0"
46      >
47        <ng-content />
48 
49        @let controls = zControls();
50        @if (controls === 'button') {
51          <button
52            type="button"
53            z-button
54            zType="outline"
55            [class]="prevBtnClasses()"
56            [zDisabled]="!canScrollPrev()"
57            (click)="slidePrevious()"
58            aria-label="Previous slide"
59          >
60            <ng-icon name="lucideChevronLeft" class="size-4!" />
61          </button>
62          <button
63            type="button"
64            z-button
65            zType="outline"
66            [class]="nextBtnClasses()"
67            [zDisabled]="!canScrollNext()"
68            (click)="slideNext()"
69            aria-label="Next slide"
70          >
71            <ng-icon name="lucideChevronRight" class="size-4!" />
72          </button>
73        } @else if (controls === 'dot') {
74          <div class="mt-2 flex justify-center gap-1">
75            @for (dot of dots(); track $index) {
76              <button
77                type="button"
78                [class]="
79                  'block size-4 border-0 bg-transparent p-0 ' +
80// … truncated