@siemens/element-ng 49.10.0 → 49.12.0

package/fesm2022/siemens-element-ng-carousel.mjs

@@ -0,0 +1,541 @@
+import * as i0 from '@angular/core';
+import { inject, computed, ElementRef, signal, Directive, input, booleanAttribute, contentChildren, linkedSignal, DestroyRef, viewChild, ChangeDetectorRef, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { toSignal, toObservable } from '@angular/core/rxjs-interop';
+import { elementPause, elementPlay, elementRight2, elementLeft2 } from '@siemens/element-icons';
+import { addIcons, SiIconComponent } from '@siemens/element-ng/icon';
+import { SiResizeObserverDirective } from '@siemens/element-ng/resize-observer';
+import { t, injectSiTranslateService, SiTranslatePipe } from '@siemens/element-translate-ng/translate';
+import { switchMap } from 'rxjs';
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+class SiCarouselItemDirective {
+    carousel = inject(SiCarouselComponent);
+    isVisible = computed(() => {
+        if (this.carousel.currentActiveSlide() === this.elementRef) {
+            return true;
+        }
+        return false;
+    }, ...(ngDevMode ? [{ debugName: "isVisible" }] : []));
+    /** @internal */
+    elementRef = inject(ElementRef);
+    /** @internal */
+    order = signal(0, ...(ngDevMode ? [{ debugName: "order" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiCarouselItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: SiCarouselItemDirective, isStandalone: true, selector: "[siCarouselItem]", host: { attributes: { "role": "group" }, properties: { "style.order": "order()", "attr.aria-roledescription": "carousel.translatedSlideRoleDescription()", "attr.inert": "isVisible() ? null : \"\"", "attr.aria-hidden": "isVisible() ? null : \"true\"" }, styleAttribute: "flex-shrink: 0; flex-basis: 100%; scroll-snap-align: center;" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiCarouselItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[siCarouselItem]',
+                    host: {
+                        style: 'flex-shrink: 0; flex-basis: 100%; scroll-snap-align: center;',
+                        '[style.order]': 'order()',
+                        'role': 'group',
+                        '[attr.aria-roledescription]': 'carousel.translatedSlideRoleDescription()',
+                        '[attr.inert]': 'isVisible() ? null : ""',
+                        '[attr.aria-hidden]': 'isVisible() ? null : "true"'
+                    }
+                }]
+        }] });
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Maximum number of pagination dots shown in the pager.
+ */
+const MAX_PAGES = 5;
+/**
+ * Time constant (in milliseconds) for the exponential-smoothing scroll animation. Smaller values
+ * settle faster. The animation is retargetable, so rapid clicks keep adjusting the same animation
+ * towards the latest slide instead of starting separate, queued scrolls.
+ */
+const SCROLL_SMOOTHING_TAU = 100;
+/**
+ * Assumed duration (in milliseconds) of the first animation frame, used before two timestamps are
+ * available to measure a real delta. 16ms corresponds to one frame at ~60Hz, a safe default that
+ * keeps the first easing step the same size as a normal frame.
+ */
+const FIRST_FRAME_DELTA = 16;
+/**
+ * Distance (in CSS pixels) below which the viewport is considered to have reached its target. Less
+ * than a pixel is imperceptible, so the animation snaps to the target and stops instead of easing
+ * across ever-smaller, invisible fractions of a pixel forever.
+ */
+const SCROLL_SETTLE_THRESHOLD = 0.5;
+/**
+ * Per-frame progress (in CSS pixels) below which the animation is treated as stalled. The browser
+ * can cap `scrollLeft` a sub-pixel short of the computed target at the scroll boundary; without
+ * this guard the loop would never reach the target and would spin forever. Kept below
+ * {@link SCROLL_SETTLE_THRESHOLD} so it only triggers when real movement has effectively stopped.
+ */
+const SCROLL_STALL_THRESHOLD = 0.25;
+/**
+ * A carousel component for displaying slides with navigation controls and auto-play.
+ *
+ * Features horizontal scrolling with snap behavior, pagination dots, and ARIA accessibility.
+ * Suitable for dashboards, image galleries, and content showcases.
+ *
+ * @example
+ *
+ * ```typescript
+ * import { SiCarouselComponent, SiCarouselItemDirective } from '@siemens/element-ng/carousel';
+ *
+ * @Component({
+ *   imports: [SiCarouselComponent, SiCarouselItemDirective],
+ *   template: `
+ *     <si-carousel>
+ *       <div siCarouselItem><h2>Slide 1</h2></div>
+ *       <div siCarouselItem><h2>Slide 2</h2></div>
+ *       <div siCarouselItem><h2>Slide 3</h2></div>
+ *     </si-carousel>
+ *   `
+ * })
+ * export class MyComponent {}
+ * ```
+ */
+class SiCarouselComponent {
+    /**
+     * Controls whether pagination controls are shown.
+     * When `true`, the carousel shows one slide per page and hides pagination controls.
+     * @defaultValue false
+     * */
+    hidePageControls = input(false, { ...(ngDevMode ? { debugName: "hidePageControls" } : {}), transform: booleanAttribute });
+    /**
+     * Enables or configures auto-play for the carousel. When set to `true`, the carousel automatically
+     * navigates to the next slide every 5000 milliseconds (5 seconds). Pass a positive number to set a
+     * custom interval in milliseconds. Pass `false` to disable auto-play.
+     * @defaultValue false
+     * */
+    autoPlay = input(false, ...(ngDevMode ? [{ debugName: "autoPlay" }] : []));
+    /**
+     * Aria role of the carousel element. Can be set to 'region' or 'group' depending on the desired accessibility semantics.
+     * @defaultValue 'region'
+     * */
+    ariaRole = input('region', ...(ngDevMode ? [{ debugName: "ariaRole" }] : []));
+    /**
+     * Aria label for the previous button, used for accessibility purposes.
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_CAROUSEL.PREVIOUS:Previous slide`)
+     * ```
+     */
+    previousButtonAriaLabel = input(t(() => $localize `:@@SI_CAROUSEL.PREVIOUS:Previous slide`), ...(ngDevMode ? [{ debugName: "previousButtonAriaLabel" }] : []));
+    /**
+     * Aria label for the next button, used for accessibility purposes.
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_CAROUSEL.NEXT:Next slide`)
+     * ```
+     */
+    nextButtonAriaLabel = input(t(() => $localize `:@@SI_CAROUSEL.NEXT:Next slide`), ...(ngDevMode ? [{ debugName: "nextButtonAriaLabel" }] : []));
+    /**
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_CAROUSEL.SLIDE_PAGE:Slide {{page}} of {{total}}`)
+     * ```
+     */
+    slidePageAriaLabel = input(t(() => $localize `:@@SI_CAROUSEL.SLIDE_PAGE:Slide {{page}} of {{total}}`), ...(ngDevMode ? [{ debugName: "slidePageAriaLabel" }] : []));
+    /**
+     * Label for the play button when autoplay is paused.
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_CAROUSEL.PLAY:Play`)
+     * ```
+     */
+    playButtonLabel = input(t(() => $localize `:@@SI_CAROUSEL.PLAY:Play`), ...(ngDevMode ? [{ debugName: "playButtonLabel" }] : []));
+    /**
+     * Label for the pause button when autoplay is active.
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_CAROUSEL.PAUSE:Pause`)
+     * ```
+     */
+    pauseButtonLabel = input(t(() => $localize `:@@SI_CAROUSEL.PAUSE:Pause`), ...(ngDevMode ? [{ debugName: "pauseButtonLabel" }] : []));
+    /**
+     * Role description for the carousel container, used for accessibility purposes.
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_CAROUSEL.ROLE_DESCRIPTION:carousel`)
+     * ```
+     */
+    carouselRoleDescription = input(t(() => $localize `:@@SI_CAROUSEL.ROLE_DESCRIPTION:carousel`), ...(ngDevMode ? [{ debugName: "carouselRoleDescription" }] : []));
+    /**
+     * Role description for each slide, used for accessibility purposes.
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_CAROUSEL.SLIDE_ROLE_DESCRIPTION:Slide`)
+     * ```
+     */
+    slideRoleDescription = input(t(() => $localize `:@@SI_CAROUSEL.SLIDE_ROLE_DESCRIPTION:Slide`), ...(ngDevMode ? [{ debugName: "slideRoleDescription" }] : []));
+    /** @internal */
+    translatedSlideRoleDescription = toSignal(toObservable(this.slideRoleDescription).pipe(switchMap(key => this.translateService.translateAsync(key))), { initialValue: '' });
+    /** @internal */
+    currentActiveSlide = computed(() => {
+        const currentPage = this.currentPage();
+        if (currentPage !== null && this.items().length) {
+            return this.items()[currentPage].elementRef;
+        }
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "currentActiveSlide" }] : []));
+    translatedCarouselRoleDescription = toSignal(toObservable(this.carouselRoleDescription).pipe(switchMap(key => this.translateService.translateAsync(key))), { initialValue: '' });
+    items = contentChildren(SiCarouselItemDirective, ...(ngDevMode ? [{ debugName: "items" }] : []));
+    currentPage = linkedSignal(() => this.items().length ? 0 : null, ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
+    isPaused = signal(false, ...(ngDevMode ? [{ debugName: "isPaused" }] : []));
+    totalPages = computed(() => this.items().length, ...(ngDevMode ? [{ debugName: "totalPages" }] : []));
+    edgeLeftIndex = signal(0, ...(ngDevMode ? [{ debugName: "edgeLeftIndex" }] : []));
+    edgeRightIndex = signal(MAX_PAGES - 1, ...(ngDevMode ? [{ debugName: "edgeRightIndex" }] : []));
+    insufficientSpace = signal(false, ...(ngDevMode ? [{ debugName: "insufficientSpace" }] : []));
+    pageControlContainerMinWidth = signal(0, ...(ngDevMode ? [{ debugName: "pageControlContainerMinWidth" }] : []));
+    icons = addIcons({ elementLeft2, elementRight2, elementPlay, elementPause });
+    autoPlayDuration = computed(() => {
+        const autoPlayValue = this.autoPlay();
+        if (typeof autoPlayValue === 'boolean') {
+            return autoPlayValue ? 5000 : 0;
+        }
+        return autoPlayValue > 0 ? autoPlayValue : 0;
+    }, ...(ngDevMode ? [{ debugName: "autoPlayDuration" }] : []));
+    intervalId = null;
+    scrollObserver = null;
+    /** requestAnimationFrame id of the running scroll animation, or null when idle. */
+    animationFrameId = null;
+    /** Scroll position (`scrollLeft`) the running animation is easing towards. */
+    animationTargetLeft = 0;
+    /** Timestamp of the previous animation frame, used to make the easing frame-rate independent. */
+    lastFrameTime = 0;
+    /** Whether any slide's CSS order has been changed from its natural (source-index) position. */
+    ordersModified = false;
+    destroyRef = inject(DestroyRef);
+    viewport = viewChild.required('viewport');
+    pageControl = viewChild('pageControl', ...(ngDevMode ? [{ debugName: "pageControl" }] : []));
+    playPauseBtn = viewChild('playPauseBtn', ...(ngDevMode ? [{ debugName: "playPauseBtn" }] : []));
+    translateService = injectSiTranslateService();
+    cdRef = inject(ChangeDetectorRef);
+    constructor() {
+        effect(onCleanup => {
+            this.scheduleAutoPlay();
+            onCleanup(() => clearInterval(this.intervalId));
+        });
+        effect(() => {
+            // Reset to the first page if the current page becomes out of range due to items being added/removed.
+            const currentPage = this.currentPage();
+            if (currentPage !== null && currentPage >= this.totalPages()) {
+                this.cancelAnimation();
+                this.items().forEach((_, i) => this.setSlideOrder(i, i));
+                this.ordersModified = false;
+                this.goToPage(0);
+            }
+        });
+        effect(() => {
+            this.setupScrollObserver();
+        });
+        effect(() => {
+            // Establish the canonical track order (each slide's CSS order equals its source index) so the
+            // navigation maths stay consistent. Skipped while an order change is mid-flight, where the
+            // orders are intentionally extended and normalized once the animation settles.
+            const items = this.items();
+            if (this.ordersModified) {
+                return;
+            }
+            items.forEach((_, i) => this.setSlideOrder(i, i));
+        });
+        effect(() => {
+            this.updateEdgeIndices();
+        });
+        this.destroyRef.onDestroy(() => {
+            if (this.animationFrameId !== null) {
+                cancelAnimationFrame(this.animationFrameId);
+            }
+            this.scrollObserver?.disconnect();
+        });
+    }
+    goToPage(page, forceScroll = true) {
+        this.currentPage.set(page);
+        this.scheduleAutoPlay();
+        if (forceScroll) {
+            this.animateToSlide(page);
+        }
+    }
+    next() {
+        this.step(1);
+    }
+    previous() {
+        this.step(-1);
+    }
+    /** Navigates directly to a specific slide, used by the pagination dots. */
+    goToSlide(index) {
+        this.cancelAnimation();
+        this.normalizeOrders();
+        this.goToPage(index, true);
+    }
+    toggleAutoPlay() {
+        this.isPaused.update(paused => !paused);
+        if (this.isPaused()) {
+            this.stopAutoPlay();
+        }
+        else {
+            this.scheduleAutoPlay();
+        }
+    }
+    onResize(size) {
+        const pageControl = this.pageControl();
+        if (!pageControl) {
+            return;
+        }
+        const pageControlWidth = pageControl.nativeElement.offsetWidth;
+        if (this.autoPlay()) {
+            const playPauseBtnWidth = this.playPauseBtn()?.nativeElement.offsetWidth ?? 0;
+            const minWidth = pageControlWidth + playPauseBtnWidth;
+            if (minWidth > size.width - playPauseBtnWidth) {
+                this.insufficientSpace.set(true);
+            }
+            else {
+                this.insufficientSpace.set(false);
+            }
+            this.pageControlContainerMinWidth.set(minWidth);
+        }
+        else {
+            this.insufficientSpace.set(false);
+            this.pageControlContainerMinWidth.set(pageControlWidth);
+        }
+    }
+    /**
+     * Navigates a single slide forward (`1`) or backward (`-1`). Rapid clicks are intentionally not
+     * queued or throttled: each click advances {@link currentPage} immediately and retargets the
+     * running scroll animation (see {@link animateTo}) towards the new slide, so the carousel keeps
+     * gliding in the click direction without waiting for the previous scroll to finish.
+     *
+     * To keep the first/last wrap a continuous one-slide glide instead of a jump across the whole
+     * track, the target slide's CSS order is placed exactly one slot away from the current slide in
+     * the click direction (so it sits adjacent to it). The viewport scroll is compensated so this
+     * reorder is invisible. Orders may extend while the user keeps clicking; they are silently
+     * normalized once the animation settles (see {@link normalizeOrders}).
+     */
+    step(direction) {
+        const total = this.totalPages();
+        if (total <= 1) {
+            return;
+        }
+        const from = this.currentPage() ?? 0;
+        const to = (from + direction + total) % total;
+        // Ensure the target slide sits one slot away from the current slide in the click direction.
+        // For a normal step it already does; for a first/last wrap it does not, so move it there.
+        const desiredOrder = this.items()[from].order() + direction;
+        if (this.items()[to].order() !== desiredOrder) {
+            this.reorderSlide(to, desiredOrder, from);
+        }
+        this.currentPage.set(to);
+        this.scheduleAutoPlay();
+        this.animateToSlide(to);
+    }
+    /**
+     * Changes a slide's CSS order while keeping the picture stable. Reordering shifts slides along
+     * the flex track, so the scroll position is adjusted by the exact amount the anchor slide moved,
+     * making the relocation invisible and letting any in-flight animation continue seamlessly.
+     */
+    reorderSlide(index, order, anchorIndex) {
+        const viewport = this.viewport().nativeElement;
+        const anchor = this.items()[anchorIndex].elementRef.nativeElement;
+        const before = anchor.getBoundingClientRect().left;
+        this.setSlideOrder(index, order);
+        // Reading layout after the order change forces a synchronous reflow with the new positions.
+        const after = anchor.getBoundingClientRect().left;
+        viewport.scrollLeft += after - before;
+        this.ordersModified = true;
+    }
+    /**
+     * Sets the CSS order of a slide. The value is written to the DOM synchronously in addition to
+     * the signal, so a subsequent reflow/scroll uses the new order immediately instead of waiting
+     * for the asynchronous, signal-driven change detection update.
+     */
+    setSlideOrder(index, order) {
+        const slide = this.items()[index];
+        slide.order.set(order);
+        slide.elementRef.nativeElement.style.order = `${order}`;
+    }
+    /**
+     * Silently restores the canonical slide order (each slide's CSS order equals its source index).
+     * Reordering shifts the track, so it anchors on the current slide and compensates the scroll
+     * position to avoid any visible jump. Called once the scroll animation settles.
+     */
+    normalizeOrders() {
+        if (!this.ordersModified) {
+            return;
+        }
+        const items = this.items();
+        const viewport = this.viewport().nativeElement;
+        const current = this.currentPage();
+        const anchor = current !== null ? items[current]?.elementRef.nativeElement : undefined;
+        const before = anchor?.getBoundingClientRect().left ?? 0;
+        for (let i = 0; i < items.length; i++) {
+            if (items[i].order() !== i) {
+                this.setSlideOrder(i, i);
+            }
+        }
+        if (anchor) {
+            const after = anchor.getBoundingClientRect().left;
+            viewport.scrollLeft += after - before;
+        }
+        this.ordersModified = false;
+    }
+    /** Animates the viewport so the given slide is horizontally centered. */
+    animateToSlide(index) {
+        const viewport = this.viewport().nativeElement;
+        const slide = this.items()[index].elementRef.nativeElement;
+        const viewportRect = viewport.getBoundingClientRect();
+        const slideRect = slide.getBoundingClientRect();
+        const delta = slideRect.left + slideRect.width / 2 - (viewportRect.left + viewportRect.width / 2);
+        this.animateTo(viewport.scrollLeft + delta);
+    }
+    /**
+     * Eases `scrollLeft` towards `targetLeft` using a frame-rate independent exponential smoothing
+     * loop. The target can be updated mid-flight (rapid clicks), so the same animation simply chases
+     * the latest slide. Native scroll-snap and smooth scroll-behavior are disabled while animating so
+     * they do not fight the manual scrolling, and the scroll observer is paused to avoid feedback.
+     */
+    animateTo(targetLeft) {
+        this.animationTargetLeft = targetLeft;
+        if (this.animationFrameId !== null) {
+            return;
+        }
+        const viewport = this.viewport().nativeElement;
+        this.scrollObserver?.disconnect();
+        viewport.style.scrollSnapType = 'none';
+        viewport.style.scrollBehavior = 'auto';
+        this.lastFrameTime = 0;
+        this.animationFrameId = requestAnimationFrame(time => this.animationFrame(time));
+    }
+    animationFrame(now) {
+        const viewport = this.viewport().nativeElement;
+        const dt = this.lastFrameTime ? now - this.lastFrameTime : FIRST_FRAME_DELTA;
+        this.lastFrameTime = now;
+        const current = viewport.scrollLeft;
+        // Clamp the target to the scrollable range. A wrapped slide can be placed right at the track
+        // edge, where the rect-derived target may exceed the maximum by a sub-pixel; without clamping
+        // the loop would never reach it and never settle (leaving the order normalization undone).
+        const maxScrollLeft = viewport.scrollWidth - viewport.clientWidth;
+        const target = Math.max(0, Math.min(this.animationTargetLeft, maxScrollLeft));
+        const diff = target - current;
+        if (Math.abs(diff) < SCROLL_SETTLE_THRESHOLD) {
+            viewport.scrollLeft = target;
+            this.animationFrameId = null;
+            this.endAnimation();
+            return;
+        }
+        viewport.scrollLeft = current + diff * (1 - Math.exp(-dt / SCROLL_SMOOTHING_TAU));
+        // The browser can cap `scrollLeft` a sub-pixel short of the computed target (rounding at the
+        // scroll boundary). If a frame makes no real progress, treat the animation as settled instead
+        // of spinning forever.
+        if (Math.abs(viewport.scrollLeft - current) < SCROLL_STALL_THRESHOLD) {
+            this.animationFrameId = null;
+            this.endAnimation();
+            return;
+        }
+        this.animationFrameId = requestAnimationFrame(time => this.animationFrame(time));
+    }
+    /** Finalizes the animation: normalizes orders, restores native scrolling and the observer. */
+    endAnimation() {
+        this.normalizeOrders();
+        const viewport = this.viewport().nativeElement;
+        viewport.style.scrollSnapType = '';
+        viewport.style.scrollBehavior = '';
+        this.cdRef.markForCheck();
+        this.setupScrollObserver();
+    }
+    /** Stops the running scroll animation and restores native scrolling, without normalizing. */
+    cancelAnimation() {
+        if (this.animationFrameId !== null) {
+            cancelAnimationFrame(this.animationFrameId);
+            this.animationFrameId = null;
+        }
+        const viewport = this.viewport().nativeElement;
+        viewport.style.scrollSnapType = '';
+        viewport.style.scrollBehavior = '';
+        this.cdRef.markForCheck();
+    }
+    scheduleAutoPlay() {
+        if (this.intervalId) {
+            clearInterval(this.intervalId);
+        }
+        if (!this.autoPlayDuration() || this.items().length === 0 || this.isPaused()) {
+            return;
+        }
+        this.intervalId = setInterval(() => this.next(), this.autoPlayDuration());
+    }
+    stopAutoPlay() {
+        if (this.intervalId) {
+            clearInterval(this.intervalId);
+            this.intervalId = null;
+        }
+    }
+    setupScrollObserver() {
+        if (this.scrollObserver) {
+            this.scrollObserver.disconnect();
+        }
+        const items = this.items();
+        if (items.length === 0) {
+            return;
+        }
+        const viewport = this.viewport().nativeElement;
+        this.scrollObserver = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    const target = entry.target;
+                    const itemIndex = items.findIndex(item => item.elementRef.nativeElement === target);
+                    if (itemIndex !== -1) {
+                        this.goToPage(itemIndex, false);
+                    }
+                }
+            });
+        }, { root: viewport, threshold: 0.6, rootMargin: '0px' });
+        for (const item of items) {
+            this.scrollObserver.observe(item.elementRef.nativeElement);
+        }
+    }
+    updateEdgeIndices() {
+        const total = this.totalPages();
+        const current = this.currentPage();
+        if (current === null) {
+            return;
+        }
+        if (total <= MAX_PAGES) {
+            this.edgeLeftIndex.set(0);
+            this.edgeRightIndex.set(total - 1);
+            return;
+        }
+        if (current < this.edgeLeftIndex()) {
+            this.edgeLeftIndex.set(current);
+            this.edgeRightIndex.set(current + MAX_PAGES - 1);
+        }
+        if (current > this.edgeRightIndex()) {
+            this.edgeRightIndex.set(current);
+            this.edgeLeftIndex.set(current - MAX_PAGES + 1);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiCarouselComponent, isStandalone: true, selector: "si-carousel", inputs: { hidePageControls: { classPropertyName: "hidePageControls", publicName: "hidePageControls", isSignal: true, isRequired: false, transformFunction: null }, autoPlay: { classPropertyName: "autoPlay", publicName: "autoPlay", isSignal: true, isRequired: false, transformFunction: null }, ariaRole: { classPropertyName: "ariaRole", publicName: "ariaRole", isSignal: true, isRequired: false, transformFunction: null }, previousButtonAriaLabel: { classPropertyName: "previousButtonAriaLabel", publicName: "previousButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, nextButtonAriaLabel: { classPropertyName: "nextButtonAriaLabel", publicName: "nextButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, slidePageAriaLabel: { classPropertyName: "slidePageAriaLabel", publicName: "slidePageAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, playButtonLabel: { classPropertyName: "playButtonLabel", publicName: "playButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, pauseButtonLabel: { classPropertyName: "pauseButtonLabel", publicName: "pauseButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, carouselRoleDescription: { classPropertyName: "carouselRoleDescription", publicName: "carouselRoleDescription", isSignal: true, isRequired: false, transformFunction: null }, slideRoleDescription: { classPropertyName: "slideRoleDescription", publicName: "slideRoleDescription", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "ariaRole()", "attr.aria-roledescription": "translatedCarouselRoleDescription()", "style.min-width.px": "pageControlContainerMinWidth()" } }, queries: [{ propertyName: "items", predicate: SiCarouselItemDirective, isSignal: true }], viewQueries: [{ propertyName: "viewport", first: true, predicate: ["viewport"], descendants: true, isSignal: true }, { propertyName: "pageControl", first: true, predicate: ["pageControl"], descendants: true, isSignal: true }, { propertyName: "playPauseBtn", first: true, predicate: ["playPauseBtn"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"carousel-body d-flex flex-grow-1 align-items-center gap-2 min-h-0\">\n  <div #viewport class=\"carousel-viewport flex-grow-1 align-self-stretch\" tabindex=\"0\">\n    <div class=\"carousel-track h-100\">\n      <ng-content />\n    </div>\n  </div>\n</div>\n@if ((!hidePageControls() || autoPlay()) && totalPages() > 1) {\n  <div\n    class=\"position-relative d-flex justify-content-center align-items-center mt-4\"\n    (siResizeObserver)=\"onResize($event)\"\n  >\n    @if (!hidePageControls()) {\n      <div #pageControl class=\"d-flex align-items-center gap-2\">\n        <button\n          type=\"button\"\n          class=\"btn btn-icon btn-tertiary-ghost flex-shrink-0\"\n          [aria-label]=\"previousButtonAriaLabel() | translate\"\n          (click)=\"previous()\"\n        >\n          <si-icon [icon]=\"icons.elementLeft2\"\n        /></button>\n        <div class=\"d-flex align-items-center\">\n          <div\n            #dotBtn\n            class=\"btn btn-tertiary-ghost btn-icon btn-sm pe-none\"\n            [class.opacity-0]=\"totalPages() <= 5\"\n            [class.position-absolute]=\"totalPages() <= 5\"\n          >\n            <span class=\"carousel-pager-small-dot d-block rounded-circle\"></span>\n          </div>\n          <div\n            class=\"d-flex overflow-hidden\"\n            [style.width.px]=\"dotBtn.clientWidth * (totalPages() > 5 ? 5 : totalPages())\"\n          >\n            <div\n              class=\"d-flex page-buttons\"\n              [style.transform]=\"'translateX(-' + edgeLeftIndex() * dotBtn.clientWidth + 'px)'\"\n            >\n              @for (page of items(); track page) {\n                <button\n                  type=\"button\"\n                  class=\"btn btn-tertiary-ghost focus-inside btn-icon btn-sm d-flex align-items-center justify-content-center\"\n                  [aria-label]=\"\n                    slidePageAriaLabel() | translate: { page: $index + 1, total: totalPages() }\n                  \"\n                  [tabIndex]=\"$index >= edgeLeftIndex() && $index <= edgeRightIndex() ? 0 : -1\"\n                  [aria-current]=\"currentPage() === $index ? 'true' : 'false'\"\n                  (click)=\"goToSlide($index)\"\n                  ><span\n                    class=\"carousel-pager-dot d-block\"\n                    [class.active]=\"currentPage() === $index\"\n                    [class.rounded-circle]=\"currentPage() !== $index\"\n                  ></span\n                ></button>\n              }\n            </div>\n          </div>\n          <div\n            #dotBtn\n            class=\"btn btn-tertiary-ghost btn-icon btn-sm pe-none\"\n            [class.opacity-0]=\"totalPages() <= 5\"\n            [class.position-absolute]=\"totalPages() <= 5\"\n          >\n            <span class=\"carousel-pager-small-dot d-block rounded-circle\"></span>\n          </div>\n        </div>\n        <button\n          type=\"button\"\n          class=\"btn btn-icon btn-tertiary-ghost flex-shrink-0\"\n          [aria-label]=\"nextButtonAriaLabel() | translate\"\n          (click)=\"next()\"\n        >\n          <si-icon [icon]=\"icons.elementRight2\"\n        /></button>\n      </div>\n    }\n\n    @if (autoPlay()) {\n      <div\n        #playPauseBtn\n        class=\"position-absolute top-0 end-0\"\n        [class.invisible]=\"insufficientSpace()\"\n      >\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost ms-2\"\n          [aria-label]=\"(isPaused() ? playButtonLabel() : pauseButtonLabel()) | translate\"\n          (click)=\"toggleAutoPlay()\"\n        >\n          <si-icon class=\"icon\" [icon]=\"isPaused() ? icons.elementPlay : icons.elementPause\" />\n          <span aria-hidden=\"true\">{{\n            (isPaused() ? playButtonLabel() : pauseButtonLabel()) | translate\n          }}</span>\n        </button>\n      </div>\n      @if (insufficientSpace()) {\n        <button\n          type=\"button\"\n          class=\"btn btn-icon btn-tertiary-ghost flex-shrink-0 align-items-center position-absolute top-0 end-0 ms-2\"\n          [aria-label]=\"(isPaused() ? playButtonLabel() : pauseButtonLabel()) | translate\"\n          (click)=\"toggleAutoPlay()\"\n        >\n          <si-icon [icon]=\"isPaused() ? icons.elementPlay : icons.elementPause\" />\n        </button>\n      }\n    }\n  </div>\n}\n", styles: [":host{--si-carousel-gap: 16px;display:flex;flex-direction:column;flex:1 1 0}.carousel-viewport{min-block-size:0;overflow-y:hidden;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.page-buttons{transition:transform calc(.5s * var(--element-animations-enabled, 1)) ease}.carousel-track{display:flex;gap:var(--si-carousel-gap)}.carousel-pager-dot{inline-size:.375rem;block-size:.375rem;background-color:var(--element-ui-3);transition:background-color calc(.5s * var(--element-animations-enabled, 1)) ease}.carousel-pager-dot.active{transition:inline-size calc(.5s * var(--element-animations-enabled, 1)) ease,background-color calc(.5s * var(--element-animations-enabled, 1)) ease;inline-size:.75rem;background-color:var(--element-ui-0);border-radius:6.25rem}.carousel-pager-small-dot{background-color:var(--element-ui-3);inline-size:.25rem;block-size:.25rem}\n"], dependencies: [{ kind: "directive", type: SiResizeObserverDirective, selector: "[siResizeObserver]", inputs: ["resizeThrottle", "emitInitial"], outputs: ["siResizeObserver"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiCarouselComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-carousel', imports: [SiTranslatePipe, SiResizeObserverDirective, SiIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[attr.role]': 'ariaRole()',
+                        '[attr.aria-roledescription]': 'translatedCarouselRoleDescription()',
+                        '[style.min-width.px]': 'pageControlContainerMinWidth()'
+                    }, template: "<div class=\"carousel-body d-flex flex-grow-1 align-items-center gap-2 min-h-0\">\n  <div #viewport class=\"carousel-viewport flex-grow-1 align-self-stretch\" tabindex=\"0\">\n    <div class=\"carousel-track h-100\">\n      <ng-content />\n    </div>\n  </div>\n</div>\n@if ((!hidePageControls() || autoPlay()) && totalPages() > 1) {\n  <div\n    class=\"position-relative d-flex justify-content-center align-items-center mt-4\"\n    (siResizeObserver)=\"onResize($event)\"\n  >\n    @if (!hidePageControls()) {\n      <div #pageControl class=\"d-flex align-items-center gap-2\">\n        <button\n          type=\"button\"\n          class=\"btn btn-icon btn-tertiary-ghost flex-shrink-0\"\n          [aria-label]=\"previousButtonAriaLabel() | translate\"\n          (click)=\"previous()\"\n        >\n          <si-icon [icon]=\"icons.elementLeft2\"\n        /></button>\n        <div class=\"d-flex align-items-center\">\n          <div\n            #dotBtn\n            class=\"btn btn-tertiary-ghost btn-icon btn-sm pe-none\"\n            [class.opacity-0]=\"totalPages() <= 5\"\n            [class.position-absolute]=\"totalPages() <= 5\"\n          >\n            <span class=\"carousel-pager-small-dot d-block rounded-circle\"></span>\n          </div>\n          <div\n            class=\"d-flex overflow-hidden\"\n            [style.width.px]=\"dotBtn.clientWidth * (totalPages() > 5 ? 5 : totalPages())\"\n          >\n            <div\n              class=\"d-flex page-buttons\"\n              [style.transform]=\"'translateX(-' + edgeLeftIndex() * dotBtn.clientWidth + 'px)'\"\n            >\n              @for (page of items(); track page) {\n                <button\n                  type=\"button\"\n                  class=\"btn btn-tertiary-ghost focus-inside btn-icon btn-sm d-flex align-items-center justify-content-center\"\n                  [aria-label]=\"\n                    slidePageAriaLabel() | translate: { page: $index + 1, total: totalPages() }\n                  \"\n                  [tabIndex]=\"$index >= edgeLeftIndex() && $index <= edgeRightIndex() ? 0 : -1\"\n                  [aria-current]=\"currentPage() === $index ? 'true' : 'false'\"\n                  (click)=\"goToSlide($index)\"\n                  ><span\n                    class=\"carousel-pager-dot d-block\"\n                    [class.active]=\"currentPage() === $index\"\n                    [class.rounded-circle]=\"currentPage() !== $index\"\n                  ></span\n                ></button>\n              }\n            </div>\n          </div>\n          <div\n            #dotBtn\n            class=\"btn btn-tertiary-ghost btn-icon btn-sm pe-none\"\n            [class.opacity-0]=\"totalPages() <= 5\"\n            [class.position-absolute]=\"totalPages() <= 5\"\n          >\n            <span class=\"carousel-pager-small-dot d-block rounded-circle\"></span>\n          </div>\n        </div>\n        <button\n          type=\"button\"\n          class=\"btn btn-icon btn-tertiary-ghost flex-shrink-0\"\n          [aria-label]=\"nextButtonAriaLabel() | translate\"\n          (click)=\"next()\"\n        >\n          <si-icon [icon]=\"icons.elementRight2\"\n        /></button>\n      </div>\n    }\n\n    @if (autoPlay()) {\n      <div\n        #playPauseBtn\n        class=\"position-absolute top-0 end-0\"\n        [class.invisible]=\"insufficientSpace()\"\n      >\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost ms-2\"\n          [aria-label]=\"(isPaused() ? playButtonLabel() : pauseButtonLabel()) | translate\"\n          (click)=\"toggleAutoPlay()\"\n        >\n          <si-icon class=\"icon\" [icon]=\"isPaused() ? icons.elementPlay : icons.elementPause\" />\n          <span aria-hidden=\"true\">{{\n            (isPaused() ? playButtonLabel() : pauseButtonLabel()) | translate\n          }}</span>\n        </button>\n      </div>\n      @if (insufficientSpace()) {\n        <button\n          type=\"button\"\n          class=\"btn btn-icon btn-tertiary-ghost flex-shrink-0 align-items-center position-absolute top-0 end-0 ms-2\"\n          [aria-label]=\"(isPaused() ? playButtonLabel() : pauseButtonLabel()) | translate\"\n          (click)=\"toggleAutoPlay()\"\n        >\n          <si-icon [icon]=\"isPaused() ? icons.elementPlay : icons.elementPause\" />\n        </button>\n      }\n    }\n  </div>\n}\n", styles: [":host{--si-carousel-gap: 16px;display:flex;flex-direction:column;flex:1 1 0}.carousel-viewport{min-block-size:0;overflow-y:hidden;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.page-buttons{transition:transform calc(.5s * var(--element-animations-enabled, 1)) ease}.carousel-track{display:flex;gap:var(--si-carousel-gap)}.carousel-pager-dot{inline-size:.375rem;block-size:.375rem;background-color:var(--element-ui-3);transition:background-color calc(.5s * var(--element-animations-enabled, 1)) ease}.carousel-pager-dot.active{transition:inline-size calc(.5s * var(--element-animations-enabled, 1)) ease,background-color calc(.5s * var(--element-animations-enabled, 1)) ease;inline-size:.75rem;background-color:var(--element-ui-0);border-radius:6.25rem}.carousel-pager-small-dot{background-color:var(--element-ui-3);inline-size:.25rem;block-size:.25rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { hidePageControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePageControls", required: false }] }], autoPlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoPlay", required: false }] }], ariaRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaRole", required: false }] }], previousButtonAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousButtonAriaLabel", required: false }] }], nextButtonAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextButtonAriaLabel", required: false }] }], slidePageAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "slidePageAriaLabel", required: false }] }], playButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "playButtonLabel", required: false }] }], pauseButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pauseButtonLabel", required: false }] }], carouselRoleDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "carouselRoleDescription", required: false }] }], slideRoleDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "slideRoleDescription", required: false }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SiCarouselItemDirective), { isSignal: true }] }], viewport: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }], pageControl: [{ type: i0.ViewChild, args: ['pageControl', { isSignal: true }] }], playPauseBtn: [{ type: i0.ViewChild, args: ['playPauseBtn', { isSignal: true }] }] } });
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SiCarouselComponent, SiCarouselItemDirective };
+//# sourceMappingURL=siemens-element-ng-carousel.mjs.map