ngx-com 0.0.19 → 0.0.21

package/fesm2022/ngx-com-components-carousel.mjs

@@ -0,0 +1,708 @@
+import { cva } from 'class-variance-authority';
+import * as i0 from '@angular/core';
+import { inject, ElementRef, Directive, TemplateRef, DestroyRef, Renderer2, input, booleanAttribute, model, contentChildren, contentChild, viewChild, signal, computed, linkedSignal, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { Platform } from '@angular/cdk/platform';
+import { ComIcon } from 'ngx-com/components/icon';
+
+// ─── Container ───
+const carouselContainerVariants = cva('relative overflow-hidden');
+// ─── Navigation Button ───
+const carouselNavButtonVariants = cva([
+    'absolute top-1/2 -translate-y-1/2 z-10',
+    'inline-flex items-center justify-center',
+    'h-10 w-10 rounded-control',
+    'bg-background text-foreground',
+    'border border-border-subtle shadow-sm',
+    'transition-colors duration-150',
+    'hover:bg-muted-hover',
+    'outline-none focus-visible:outline-[1px] focus-visible:outline-offset-2 focus-visible:outline-ring',
+    'disabled:bg-disabled disabled:text-disabled-foreground disabled:cursor-not-allowed disabled:shadow-none',
+], {
+    variants: {
+        position: {
+            prev: 'left-2',
+            next: 'right-2',
+        },
+    },
+    defaultVariants: {
+        position: 'prev',
+    },
+});
+// ─── Pagination Dot ───
+const carouselDotVariants = cva([
+    'inline-block h-2 w-2 rounded-pill',
+    'transition-colors duration-150',
+    'outline-none focus-visible:outline-[1px] focus-visible:outline-offset-2 focus-visible:outline-ring',
+], {
+    variants: {
+        active: {
+            true: 'bg-primary',
+            false: 'bg-muted hover:bg-muted-hover',
+        },
+    },
+    defaultVariants: {
+        active: false,
+    },
+});
+
+/**
+ * Marks an element as a carousel slide item.
+ *
+ * Apply this directive to each direct child element that should be
+ * treated as a slide within `<com-carousel>`.
+ *
+ * @example
+ * ```html
+ * <com-carousel>
+ *   <div comCarouselItem>Slide 1</div>
+ *   <div comCarouselItem>Slide 2</div>
+ * </com-carousel>
+ * ```
+ */
+class ComCarouselItem {
+    elementRef = inject(ElementRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCarouselItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ComCarouselItem, isStandalone: true, selector: "[comCarouselItem]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCarouselItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comCarouselItem]',
+                }]
+        }] });
+
+/**
+ * Template directive for a custom "previous" navigation button.
+ *
+ * The template receives a boolean context (`$implicit`) indicating
+ * whether the carousel can navigate backward.
+ *
+ * @example
+ * ```html
+ * <com-carousel>
+ *   <div comCarouselItem>Slide 1</div>
+ *   <ng-template comCarouselPrev let-canGo>
+ *     <button [disabled]="!canGo">Back</button>
+ *   </ng-template>
+ * </com-carousel>
+ * ```
+ */
+class ComCarouselPrevTpl {
+    templateRef = inject(TemplateRef);
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCarouselPrevTpl, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ComCarouselPrevTpl, isStandalone: true, selector: "ng-template[comCarouselPrev]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCarouselPrevTpl, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[comCarouselPrev]',
+                }]
+        }] });
+
+/**
+ * Template directive for a custom "next" navigation button.
+ *
+ * The template receives a boolean context (`$implicit`) indicating
+ * whether the carousel can navigate forward.
+ *
+ * @example
+ * ```html
+ * <com-carousel>
+ *   <div comCarouselItem>Slide 1</div>
+ *   <ng-template comCarouselNext let-canGo>
+ *     <button [disabled]="!canGo">Forward</button>
+ *   </ng-template>
+ * </com-carousel>
+ * ```
+ */
+class ComCarouselNextTpl {
+    templateRef = inject(TemplateRef);
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCarouselNextTpl, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ComCarouselNextTpl, isStandalone: true, selector: "ng-template[comCarouselNext]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCarouselNextTpl, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[comCarouselNext]',
+                }]
+        }] });
+
+/**
+ * Template directive for custom pagination indicators.
+ *
+ * Rendered once per "page" in the carousel. The template receives
+ * a context with the page index, active state, and total count.
+ *
+ * @example
+ * ```html
+ * <com-carousel>
+ *   <div comCarouselItem>Slide 1</div>
+ *   <div comCarouselItem>Slide 2</div>
+ *   <ng-template comCarouselPagination let-idx let-active="active">
+ *     <span
+ *       class="inline-block h-3 w-3 rounded-pill transition-colors"
+ *       [class]="active ? 'bg-primary' : 'bg-muted'"
+ *     ></span>
+ *   </ng-template>
+ * </com-carousel>
+ * ```
+ */
+class ComCarouselPaginationTpl {
+    templateRef = inject(TemplateRef);
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCarouselPaginationTpl, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ComCarouselPaginationTpl, isStandalone: true, selector: "ng-template[comCarouselPagination]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCarouselPaginationTpl, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[comCarouselPagination]',
+                }]
+        }] });
+
+/**
+ * Carousel component — a horizontal slider that navigates content screens
+ * using percentage-based CSS `transform: translateX()`.
+ *
+ * Items are projected via `ng-content` and marked with `comCarouselItem`.
+ * Navigation is screen-based: each index step moves one full viewport of items.
+ * Supports multi-item views, auto-play, loop, touch/swipe, keyboard
+ * navigation, and custom templates for navigation and pagination.
+ *
+ * @tokens `--color-background`, `--color-foreground`, `--color-muted`,
+ *         `--color-muted-hover`, `--color-primary`, `--color-border-subtle`,
+ *         `--color-ring`, `--color-disabled`, `--color-disabled-foreground`
+ *
+ * @example Basic usage
+ * ```html
+ * <com-carousel>
+ *   <div comCarouselItem>Slide 1</div>
+ *   <div comCarouselItem>Slide 2</div>
+ *   <div comCarouselItem>Slide 3</div>
+ * </com-carousel>
+ * ```
+ *
+ * @example Multiple items per view
+ * ```html
+ * <com-carousel [slidesPerView]="3">
+ *   @for (product of products(); track product.id) {
+ *     <com-card comCarouselItem>{{ product.name }}</com-card>
+ *   }
+ * </com-carousel>
+ * ```
+ *
+ * @example Auto-play with loop
+ * ```html
+ * <com-carousel autoPlay loop [autoPlayInterval]="4000">
+ *   <img comCarouselItem *ngFor="let img of images" [src]="img.url" [alt]="img.alt" />
+ * </com-carousel>
+ * ```
+ *
+ * @example Two-way index binding
+ * ```html
+ * <com-carousel [(index)]="currentSlide">
+ *   <div comCarouselItem>A</div>
+ *   <div comCarouselItem>B</div>
+ * </com-carousel>
+ * ```
+ *
+ * @example Custom navigation
+ * ```html
+ * <com-carousel>
+ *   <div comCarouselItem>Slide 1</div>
+ *   <ng-template comCarouselPrev let-canGo>
+ *     <button [disabled]="!canGo">Back</button>
+ *   </ng-template>
+ *   <ng-template comCarouselNext let-canGo>
+ *     <button [disabled]="!canGo">Forward</button>
+ *   </ng-template>
+ * </com-carousel>
+ * ```
+ *
+ * @example Custom pagination
+ * ```html
+ * <com-carousel>
+ *   <div comCarouselItem>Slide 1</div>
+ *   <ng-template comCarouselPagination let-idx let-active="active">
+ *     <span [class]="active ? 'bg-primary' : 'bg-muted'" class="h-3 w-3 rounded-pill inline-block"></span>
+ *   </ng-template>
+ * </com-carousel>
+ * ```
+ */
+class ComCarouselComponent {
+    destroyRef = inject(DestroyRef);
+    renderer = inject(Renderer2);
+    platform = inject(Platform);
+    hostEl = inject(ElementRef);
+    // ─── Inputs ───
+    /** Number of items visible at once. */
+    slidesPerView = input(1, ...(ngDevMode ? [{ debugName: "slidesPerView" }] : []));
+    /** Wrap from last to first and vice versa. */
+    loop = input(false, { ...(ngDevMode ? { debugName: "loop" } : {}), transform: booleanAttribute });
+    /** Enable auto-advancing slides. */
+    autoPlay = input(false, { ...(ngDevMode ? { debugName: "autoPlay" } : {}), transform: booleanAttribute });
+    /** Auto-play interval in milliseconds. */
+    autoPlayInterval = input(5000, ...(ngDevMode ? [{ debugName: "autoPlayInterval" }] : []));
+    /** Slide transition duration in milliseconds. */
+    transitionDuration = input(300, ...(ngDevMode ? [{ debugName: "transitionDuration" }] : []));
+    /** Show prev/next navigation buttons. */
+    showNavigation = input(true, { ...(ngDevMode ? { debugName: "showNavigation" } : {}), transform: booleanAttribute });
+    /** Show pagination dot indicators. */
+    showPagination = input(true, { ...(ngDevMode ? { debugName: "showPagination" } : {}), transform: booleanAttribute });
+    /** Accessible label for the carousel region. */
+    ariaLabel = input('Carousel', { ...(ngDevMode ? { debugName: "ariaLabel" } : {}), alias: 'aria-label' });
+    // ─── Model ───
+    /** Two-way bindable current screen index. */
+    index = model(0, ...(ngDevMode ? [{ debugName: "index" }] : []));
+    // ─── Content Children ───
+    items = contentChildren(ComCarouselItem, ...(ngDevMode ? [{ debugName: "items" }] : []));
+    customPrev = contentChild(ComCarouselPrevTpl, ...(ngDevMode ? [{ debugName: "customPrev" }] : []));
+    customNext = contentChild(ComCarouselNextTpl, ...(ngDevMode ? [{ debugName: "customNext" }] : []));
+    customPagination = contentChild(ComCarouselPaginationTpl, ...(ngDevMode ? [{ debugName: "customPagination" }] : []));
+    // ─── View Children ───
+    trackEl = viewChild('track', ...(ngDevMode ? [{ debugName: "trackEl" }] : []));
+    // ─── Internal State ───
+    paused = signal(false, ...(ngDevMode ? [{ debugName: "paused" }] : []));
+    animating = signal(true, ...(ngDevMode ? [{ debugName: "animating" }] : []));
+    autoPlayTimerId = null;
+    // ─── Computed ───
+    totalSlides = computed(() => this.items().length, ...(ngDevMode ? [{ debugName: "totalSlides" }] : []));
+    /** Total number of screens (pages). */
+    totalScreens = computed(() => Math.max(1, Math.ceil(this.totalSlides() / this.slidesPerView())), ...(ngDevMode ? [{ debugName: "totalScreens" }] : []));
+    maxIndex = computed(() => Math.max(0, this.totalScreens() - 1), ...(ngDevMode ? [{ debugName: "maxIndex" }] : []));
+    /** Clamp index when items or slidesPerView changes. */
+    clampedIndex = linkedSignal(() => {
+        const idx = this.index();
+        const max = this.maxIndex();
+        return Math.max(0, Math.min(idx, max));
+    }, ...(ngDevMode ? [{ debugName: "clampedIndex" }] : []));
+    canGoPrev = computed(() => this.loop() || this.clampedIndex() > 0, ...(ngDevMode ? [{ debugName: "canGoPrev" }] : []));
+    canGoNext = computed(() => this.loop() || this.clampedIndex() < this.maxIndex(), ...(ngDevMode ? [{ debugName: "canGoNext" }] : []));
+    pages = computed(() => Array.from({ length: this.totalScreens() }, (_, i) => i), ...(ngDevMode ? [{ debugName: "pages" }] : []));
+    /** Percentage-based translateX — each screen step moves by 100%. */
+    translateX = computed(() => `translateX(${-this.clampedIndex() * 100}%)`, ...(ngDevMode ? [{ debugName: "translateX" }] : []));
+    /** Item width as a percentage string. */
+    itemWidth = computed(() => `${100 / this.slidesPerView()}%`, ...(ngDevMode ? [{ debugName: "itemWidth" }] : []));
+    ariaLiveMode = computed(() => this.autoPlay() && !this.paused() ? 'off' : 'polite', ...(ngDevMode ? [{ debugName: "ariaLiveMode" }] : []));
+    // ─── CVA Classes ───
+    containerClasses = computed(() => carouselContainerVariants(), ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
+    prevButtonClasses = computed(() => carouselNavButtonVariants({ position: 'prev' }), ...(ngDevMode ? [{ debugName: "prevButtonClasses" }] : []));
+    nextButtonClasses = computed(() => carouselNavButtonVariants({ position: 'next' }), ...(ngDevMode ? [{ debugName: "nextButtonClasses" }] : []));
+    // ─── Template Contexts ───
+    prevContext = computed(() => ({
+        $implicit: this.canGoPrev(),
+        prev: () => this.prev(),
+    }), ...(ngDevMode ? [{ debugName: "prevContext" }] : []));
+    nextContext = computed(() => ({
+        $implicit: this.canGoNext(),
+        next: () => this.next(),
+    }), ...(ngDevMode ? [{ debugName: "nextContext" }] : []));
+    constructor() {
+        // Sync clamped index back to the model
+        effect(() => {
+            const clamped = this.clampedIndex();
+            if (this.index() !== clamped) {
+                this.index.set(clamped);
+            }
+        });
+        // Apply percentage-based width and ARIA attributes to each projected item
+        effect(() => {
+            const allItems = this.items();
+            const total = allItems.length;
+            const width = this.itemWidth();
+            allItems.forEach((item, i) => {
+                const el = item.elementRef.nativeElement;
+                this.renderer.setStyle(el, 'min-width', width);
+                this.renderer.setStyle(el, 'max-width', width);
+                this.renderer.setStyle(el, 'flex-shrink', '0');
+                this.renderer.setStyle(el, 'box-sizing', 'border-box');
+                this.renderer.setAttribute(el, 'role', 'group');
+                this.renderer.setAttribute(el, 'aria-roledescription', 'slide');
+                this.renderer.setAttribute(el, 'aria-label', `${i + 1} of ${total}`);
+            });
+        });
+        // Auto-play effect
+        effect(() => {
+            const shouldAutoPlay = this.autoPlay();
+            const isPaused = this.paused();
+            const interval = this.autoPlayInterval();
+            this.clearAutoPlay();
+            if (shouldAutoPlay && !isPaused) {
+                this.autoPlayTimerId = setInterval(() => {
+                    this.next();
+                }, interval);
+            }
+        });
+        this.destroyRef.onDestroy(() => {
+            this.clearAutoPlay();
+            this.cleanupSwipe();
+        });
+        // Set up touch/swipe after view init
+        if (this.platform.isBrowser) {
+            effect(() => {
+                const track = this.trackEl();
+                if (track) {
+                    this.setupSwipe(track.nativeElement);
+                }
+            });
+        }
+    }
+    // ─── Public Methods ───
+    /** Navigate to the next screen. */
+    next() {
+        const current = this.clampedIndex();
+        const max = this.maxIndex();
+        if (current < max) {
+            this.goToPage(current + 1);
+        }
+        else if (this.loop()) {
+            this.goToPage(0);
+        }
+    }
+    /** Navigate to the previous screen. */
+    prev() {
+        const current = this.clampedIndex();
+        if (current > 0) {
+            this.goToPage(current - 1);
+        }
+        else if (this.loop()) {
+            this.goToPage(this.maxIndex());
+        }
+    }
+    /** Navigate to a specific page index. */
+    goToPage(pageIndex) {
+        if (pageIndex >= 0 && pageIndex <= this.maxIndex()) {
+            this.animating.set(true);
+            this.index.set(pageIndex);
+        }
+    }
+    /** Get CVA classes for a pagination dot at the given index. */
+    getDotClasses(pageIndex) {
+        return carouselDotVariants({ active: pageIndex === this.clampedIndex() });
+    }
+    /** Build template context for a custom pagination dot. */
+    getPaginationContext(pageIndex) {
+        return {
+            $implicit: pageIndex,
+            active: pageIndex === this.clampedIndex(),
+            total: this.totalScreens(),
+            index: pageIndex,
+        };
+    }
+    /** Handle keyboard navigation on pagination dots. */
+    onPaginationKeydown(event, currentIndex) {
+        const total = this.totalScreens();
+        let targetIndex = null;
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowDown':
+                targetIndex = (currentIndex + 1) % total;
+                break;
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                targetIndex = (currentIndex - 1 + total) % total;
+                break;
+            case 'Home':
+                targetIndex = 0;
+                break;
+            case 'End':
+                targetIndex = total - 1;
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        this.goToPage(targetIndex);
+        this.focusDotAt(targetIndex);
+    }
+    // ─── Host Event Handlers ───
+    pauseAutoPlay() {
+        if (this.autoPlay()) {
+            this.paused.set(true);
+        }
+    }
+    resumeAutoPlay() {
+        if (this.autoPlay()) {
+            this.paused.set(false);
+        }
+    }
+    // ─── Private: Auto-play ───
+    clearAutoPlay() {
+        if (this.autoPlayTimerId !== null) {
+            clearInterval(this.autoPlayTimerId);
+            this.autoPlayTimerId = null;
+        }
+    }
+    // ─── Private: Touch/Swipe ───
+    swipeCleanupFns = [];
+    pointerStartX = 0;
+    pointerStartY = 0;
+    isSwiping = false;
+    setupSwipe(trackElement) {
+        this.cleanupSwipe();
+        const unlistenDown = this.renderer.listen(trackElement, 'pointerdown', (e) => {
+            this.pointerStartX = e.clientX;
+            this.pointerStartY = e.clientY;
+            this.isSwiping = true;
+            this.animating.set(false);
+        });
+        const unlistenMove = this.renderer.listen(trackElement, 'pointermove', (e) => {
+            if (!this.isSwiping)
+                return;
+            // Prevent vertical scroll when swiping horizontally
+            const dx = Math.abs(e.clientX - this.pointerStartX);
+            const dy = Math.abs(e.clientY - this.pointerStartY);
+            if (dx > dy && dx > 10) {
+                e.preventDefault();
+            }
+        });
+        const unlistenUp = this.renderer.listen(trackElement, 'pointerup', (e) => {
+            if (!this.isSwiping)
+                return;
+            this.isSwiping = false;
+            this.animating.set(true);
+            const delta = e.clientX - this.pointerStartX;
+            const threshold = 50;
+            if (delta < -threshold) {
+                this.next();
+            }
+            else if (delta > threshold) {
+                this.prev();
+            }
+        });
+        const unlistenCancel = this.renderer.listen(trackElement, 'pointercancel', () => {
+            this.isSwiping = false;
+            this.animating.set(true);
+        });
+        this.swipeCleanupFns = [unlistenDown, unlistenMove, unlistenUp, unlistenCancel];
+    }
+    cleanupSwipe() {
+        this.swipeCleanupFns.forEach((fn) => fn());
+        this.swipeCleanupFns = [];
+    }
+    // ─── Private: Focus Management ───
+    focusDotAt(index) {
+        const host = this.hostEl.nativeElement;
+        const dots = host.querySelectorAll('[role="tab"]');
+        const dot = dots[index];
+        dot?.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComCarouselComponent, isStandalone: true, selector: "com-carousel", inputs: { slidesPerView: { classPropertyName: "slidesPerView", publicName: "slidesPerView", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, autoPlay: { classPropertyName: "autoPlay", publicName: "autoPlay", isSignal: true, isRequired: false, transformFunction: null }, autoPlayInterval: { classPropertyName: "autoPlayInterval", publicName: "autoPlayInterval", isSignal: true, isRequired: false, transformFunction: null }, transitionDuration: { classPropertyName: "transitionDuration", publicName: "transitionDuration", isSignal: true, isRequired: false, transformFunction: null }, showNavigation: { classPropertyName: "showNavigation", publicName: "showNavigation", isSignal: true, isRequired: false, transformFunction: null }, showPagination: { classPropertyName: "showPagination", publicName: "showPagination", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { index: "indexChange" }, host: { attributes: { "role": "region" }, listeners: { "mouseenter": "pauseAutoPlay()", "mouseleave": "resumeAutoPlay()", "focusin": "pauseAutoPlay()", "focusout": "resumeAutoPlay()" }, properties: { "attr.aria-roledescription": "\"carousel\"", "attr.aria-label": "ariaLabel()" }, classAttribute: "com-carousel" }, queries: [{ propertyName: "items", predicate: ComCarouselItem, isSignal: true }, { propertyName: "customPrev", first: true, predicate: ComCarouselPrevTpl, descendants: true, isSignal: true }, { propertyName: "customNext", first: true, predicate: ComCarouselNextTpl, descendants: true, isSignal: true }, { propertyName: "customPagination", first: true, predicate: ComCarouselPaginationTpl, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "trackEl", first: true, predicate: ["track"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div [class]="containerClasses()">
+      <!-- Slide track -->
+      <div
+        #track
+        class="flex"
+        [style.transform]="translateX()"
+        [style.transition]="animating() ? 'transform ' + transitionDuration() + 'ms ease-out' : 'none'"
+        [attr.aria-live]="ariaLiveMode()"
+      >
+        <ng-content select="[comCarouselItem]" />
+      </div>
+
+      <!-- Navigation: Previous -->
+      @if (showNavigation()) {
+        @if (customPrev(); as prevTpl) {
+          <ng-container
+            [ngTemplateOutlet]="prevTpl.templateRef"
+            [ngTemplateOutletContext]="prevContext()"
+          />
+        } @else {
+          <button
+            type="button"
+            [class]="prevButtonClasses()"
+            [disabled]="!canGoPrev()"
+            [attr.aria-label]="'Previous slide'"
+            (click)="prev()"
+          >
+            <com-icon name="chevron-left" size="md" />
+          </button>
+        }
+      }
+
+      <!-- Navigation: Next -->
+      @if (showNavigation()) {
+        @if (customNext(); as nextTpl) {
+          <ng-container
+            [ngTemplateOutlet]="nextTpl.templateRef"
+            [ngTemplateOutletContext]="nextContext()"
+          />
+        } @else {
+          <button
+            type="button"
+            [class]="nextButtonClasses()"
+            [disabled]="!canGoNext()"
+            [attr.aria-label]="'Next slide'"
+            (click)="next()"
+          >
+            <com-icon name="chevron-right" size="md" />
+          </button>
+        }
+      }
+    </div>
+
+    <!-- Pagination -->
+    @if (showPagination() && totalScreens() > 1) {
+      <div
+        class="flex items-center justify-center gap-2 py-3"
+        role="tablist"
+        [attr.aria-label]="'Slide navigation'"
+      >
+        @for (page of pages(); track page; let i = $index) {
+          @if (customPagination(); as paginationTpl) {
+            <button
+              type="button"
+              role="tab"
+              [attr.aria-selected]="i === clampedIndex()"
+              [attr.aria-label]="'Go to slide ' + (i + 1)"
+              [tabindex]="i === clampedIndex() ? 0 : -1"
+              (click)="goToPage(i)"
+              (keydown)="onPaginationKeydown($event, i)"
+            >
+              <ng-container
+                [ngTemplateOutlet]="paginationTpl.templateRef"
+                [ngTemplateOutletContext]="getPaginationContext(i)"
+              />
+            </button>
+          } @else {
+            <button
+              type="button"
+              role="tab"
+              [attr.aria-selected]="i === clampedIndex()"
+              [attr.aria-label]="'Go to slide ' + (i + 1)"
+              [tabindex]="i === clampedIndex() ? 0 : -1"
+              [class]="getDotClasses(i)"
+              (click)="goToPage(i)"
+              (keydown)="onPaginationKeydown($event, i)"
+            ></button>
+          }
+        }
+      </div>
+    }
+  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ComIcon, selector: "com-icon", inputs: ["name", "img", "color", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCarouselComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'com-carousel', template: `
+    <div [class]="containerClasses()">
+      <!-- Slide track -->
+      <div
+        #track
+        class="flex"
+        [style.transform]="translateX()"
+        [style.transition]="animating() ? 'transform ' + transitionDuration() + 'ms ease-out' : 'none'"
+        [attr.aria-live]="ariaLiveMode()"
+      >
+        <ng-content select="[comCarouselItem]" />
+      </div>
+
+      <!-- Navigation: Previous -->
+      @if (showNavigation()) {
+        @if (customPrev(); as prevTpl) {
+          <ng-container
+            [ngTemplateOutlet]="prevTpl.templateRef"
+            [ngTemplateOutletContext]="prevContext()"
+          />
+        } @else {
+          <button
+            type="button"
+            [class]="prevButtonClasses()"
+            [disabled]="!canGoPrev()"
+            [attr.aria-label]="'Previous slide'"
+            (click)="prev()"
+          >
+            <com-icon name="chevron-left" size="md" />
+          </button>
+        }
+      }
+
+      <!-- Navigation: Next -->
+      @if (showNavigation()) {
+        @if (customNext(); as nextTpl) {
+          <ng-container
+            [ngTemplateOutlet]="nextTpl.templateRef"
+            [ngTemplateOutletContext]="nextContext()"
+          />
+        } @else {
+          <button
+            type="button"
+            [class]="nextButtonClasses()"
+            [disabled]="!canGoNext()"
+            [attr.aria-label]="'Next slide'"
+            (click)="next()"
+          >
+            <com-icon name="chevron-right" size="md" />
+          </button>
+        }
+      }
+    </div>
+
+    <!-- Pagination -->
+    @if (showPagination() && totalScreens() > 1) {
+      <div
+        class="flex items-center justify-center gap-2 py-3"
+        role="tablist"
+        [attr.aria-label]="'Slide navigation'"
+      >
+        @for (page of pages(); track page; let i = $index) {
+          @if (customPagination(); as paginationTpl) {
+            <button
+              type="button"
+              role="tab"
+              [attr.aria-selected]="i === clampedIndex()"
+              [attr.aria-label]="'Go to slide ' + (i + 1)"
+              [tabindex]="i === clampedIndex() ? 0 : -1"
+              (click)="goToPage(i)"
+              (keydown)="onPaginationKeydown($event, i)"
+            >
+              <ng-container
+                [ngTemplateOutlet]="paginationTpl.templateRef"
+                [ngTemplateOutletContext]="getPaginationContext(i)"
+              />
+            </button>
+          } @else {
+            <button
+              type="button"
+              role="tab"
+              [attr.aria-selected]="i === clampedIndex()"
+              [attr.aria-label]="'Go to slide ' + (i + 1)"
+              [tabindex]="i === clampedIndex() ? 0 : -1"
+              [class]="getDotClasses(i)"
+              (click)="goToPage(i)"
+              (keydown)="onPaginationKeydown($event, i)"
+            ></button>
+          }
+        }
+      </div>
+    }
+  `, imports: [NgTemplateOutlet, ComIcon], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'com-carousel',
+                        'role': 'region',
+                        '[attr.aria-roledescription]': '"carousel"',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '(mouseenter)': 'pauseAutoPlay()',
+                        '(mouseleave)': 'resumeAutoPlay()',
+                        '(focusin)': 'pauseAutoPlay()',
+                        '(focusout)': 'resumeAutoPlay()',
+                    }, styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { slidesPerView: [{ type: i0.Input, args: [{ isSignal: true, alias: "slidesPerView", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], autoPlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoPlay", required: false }] }], autoPlayInterval: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoPlayInterval", required: false }] }], transitionDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "transitionDuration", required: false }] }], showNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNavigation", required: false }] }], showPagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPagination", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }, { type: i0.Output, args: ["indexChange"] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ComCarouselItem), { isSignal: true }] }], customPrev: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComCarouselPrevTpl), { isSignal: true }] }], customNext: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComCarouselNextTpl), { isSignal: true }] }], customPagination: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComCarouselPaginationTpl), { isSignal: true }] }], trackEl: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }] } });
+
+// Public API for the carousel component
+// Variants
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ComCarouselComponent, ComCarouselItem, ComCarouselNextTpl, ComCarouselPaginationTpl, ComCarouselPrevTpl, carouselContainerVariants, carouselDotVariants, carouselNavButtonVariants };
+//# sourceMappingURL=ngx-com-components-carousel.mjs.map