@tedi-design-system/angular 3.0.0 → 3.1.0-rc.1

package/fesm2022/tedi-design-system-angular-tedi.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, inject, ElementRef, signal, isSignal, Injectable, Pipe, Renderer2, model, forwardRef, ViewChild, HostBinding, Attribute, Injector, ViewContainerRef, runInInjectionContext, effect, ContentChildren, output, TemplateRef, Directive, ContentChild, HostListener } from '@angular/core';
+import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, inject, ElementRef, signal, isSignal, Injectable, Pipe, Renderer2, TemplateRef, Directive, viewChild, contentChildren, HostListener, contentChild, model, forwardRef, ViewChild, HostBinding, Attribute, Injector, ViewContainerRef, runInInjectionContext, effect, ContentChildren, output, ContentChild } from '@angular/core';
 import * as i1 from '@angular/cdk/layout';
+import { NgTemplateOutlet, NgClass, DOCUMENT, NgFor, NgIf } from '@angular/common';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { NgClass, DOCUMENT, NgTemplateOutlet, NgFor, NgIf } from '@angular/common';
 import { trigger, state, transition, style, animate } from '@angular/animations';
 import * as i1$1 from 'ngx-float-ui';
 import { NgxFloatUiModule } from 'ngx-float-ui';
@@ -748,6 +748,41 @@ const translationsMap = {
         en: (isOpen) => (isOpen ? "Close menu" : "Open menu"),
         ru: (isOpen) => (isOpen ? "Закрыть меню" : "Открыть меню"),
     },
+    carousel: {
+        description: "Label for carousel",
+        components: ["CarouselContent"],
+        et: "Karussell",
+        en: "Carousel",
+        ru: "Карусель",
+    },
+    "carousel.slide": {
+        description: "Label for carousel slide",
+        components: ["CarouselContent"],
+        et: (slideNumber, totalNumber) => `Slaid ${slideNumber} / ${totalNumber}`,
+        en: (slideNumber, totalNumber) => `Slide ${slideNumber} of ${totalNumber}`,
+        ru: (slideNumber, totalNumber) => `Слайд ${slideNumber} из ${totalNumber}`,
+    },
+    "carousel.moveForward": {
+        description: "Label for carousel next button",
+        components: ["CarouselIndicators", "CarouselNavigation"],
+        et: "Liigu edasi",
+        en: "Move forward",
+        ru: "Двигаться вперед",
+    },
+    "carousel.moveBack": {
+        description: "Label for carousel previous button",
+        components: ["CarouselIndicators", "CarouselNavigation"],
+        et: "Liigu tagasi",
+        en: "Move back",
+        ru: "Двигаться назад",
+    },
+    "carousel.showSlide": {
+        description: "Label for carousel slide indicator",
+        components: ["CarouselIndicators"],
+        et: (slideNumber) => `Vaata slaidi ${slideNumber}`,
+        en: (slideNumber) => `Show slide ${slideNumber}`,
+        ru: (slideNumber) => `Показать слайд ${slideNumber}`,
+    },
 };
 
 class TediTranslationService {
@@ -771,12 +806,12 @@ class TediTranslationService {
     }
     track(key, ...args) {
         return computed(() => {
-            const resolvedArgs = args.map(arg => isSignal(arg) ? arg() : arg);
+            const resolvedArgs = args.map((arg) => isSignal(arg) ? arg() : arg);
             return this.translate(key, ...resolvedArgs);
         });
     }
     addTranslations(newTranslations) {
-        this.translations.update(prev => ({ ...prev, ...newTranslations }));
+        this.translations.update((prev) => ({ ...prev, ...newTranslations }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TediTranslationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TediTranslationService, providedIn: "root" });
@@ -1020,6 +1055,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                     providedIn: "root",
                 }]
         }], ctorParameters: () => [{ type: i1.BreakpointObserver }] });
+function breakpointInput(input) {
+    if (typeof input === "object" && input !== null && "xs" in input) {
+        return input;
+    }
+    return { xs: input };
+}
 
 class TextGroupComponent {
     type = input("horizontal");
@@ -1079,6 +1120,425 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
             args: [{ selector: "tedi-text-group-value", template: `<ng-content />`, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["tedi-text-group{display:block}.tedi-text-group--horizontal{display:flex;gap:1rem;align-items:flex-start}tedi-text-group-label{display:flex;width:var(--_label-width);flex-shrink:0}tedi-text-group-value{display:flex;align-items:center}tedi-text-group-value{gap:var(--text-group-value-inner-spacing-mobile)}@media (min-width: 576px){tedi-text-group-value{gap:var(--text-group-value-inner-spacing-tablet)}}@media (min-width: 992px){tedi-text-group-value{gap:var(--text-group-value-inner-spacing-desktop)}}\n"] }]
         }] });
 
+class CarouselSlideDirective {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CarouselSlideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: CarouselSlideDirective, isStandalone: true, selector: "[tediCarouselSlide]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CarouselSlideDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[tediCarouselSlide]",
+                    standalone: true,
+                }]
+        }] });
+
+class CarouselContentComponent {
+    /** Slides per view (minimum 1, can be fractional, e.g. 1.25 for peeking) */
+    slidesPerView = input({ xs: 1 }, { transform: (v) => breakpointInput(v) });
+    /** Gap between slides in px */
+    gap = input({ xs: 16 }, { transform: (v) => breakpointInput(v) });
+    /** Should carousel have fade? In mobile both left and right, in desktop only right. */
+    fade = input(false);
+    /** Transition duration in ms */
+    transitionMs = input(400);
+    translationService = inject(TediTranslationService);
+    breakpointService = inject(BreakpointService);
+    host = inject(ElementRef);
+    track = viewChild.required("track");
+    slides = contentChildren(CarouselSlideDirective);
+    trackIndex = signal(0);
+    animate = signal(false);
+    viewportWidth = signal(0);
+    windowBase = signal(0);
+    currentSlidesPerView = computed(() => {
+        if (this.slidesPerView().xxl &&
+            this.breakpointService.isAboveBreakpoint("xxl")()) {
+            return this.slidesPerView().xxl;
+        }
+        else if (this.slidesPerView().xl &&
+            this.breakpointService.isAboveBreakpoint("xl")()) {
+            return this.slidesPerView().xl;
+        }
+        else if (this.slidesPerView().lg &&
+            this.breakpointService.isAboveBreakpoint("lg")()) {
+            return this.slidesPerView().lg;
+        }
+        else if (this.slidesPerView().md &&
+            this.breakpointService.isAboveBreakpoint("md")()) {
+            return this.slidesPerView().md;
+        }
+        else if (this.slidesPerView().sm &&
+            this.breakpointService.isAboveBreakpoint("sm")()) {
+            return this.slidesPerView().sm;
+        }
+        else {
+            return this.slidesPerView().xs;
+        }
+    });
+    currentGap = computed(() => {
+        if (this.gap().xxl && this.breakpointService.isAboveBreakpoint("xxl")()) {
+            return this.gap().xxl;
+        }
+        else if (this.gap().xl &&
+            this.breakpointService.isAboveBreakpoint("xl")()) {
+            return this.gap().xl;
+        }
+        else if (this.gap().lg &&
+            this.breakpointService.isAboveBreakpoint("lg")()) {
+            return this.gap().lg;
+        }
+        else if (this.gap().md &&
+            this.breakpointService.isAboveBreakpoint("md")()) {
+            return this.gap().md;
+        }
+        else if (this.gap().sm &&
+            this.breakpointService.isAboveBreakpoint("sm")()) {
+            return this.gap().sm;
+        }
+        else {
+            return this.gap().xs;
+        }
+    });
+    buffer = computed(() => this.slides().length);
+    slideIndex = computed(() => {
+        const slidesCount = this.slides().length;
+        if (slidesCount === 0) {
+            return 0;
+        }
+        const i = Math.floor(this.trackIndex());
+        return ((i % slidesCount) + slidesCount) % slidesCount;
+    });
+    renderedIndices = computed(() => {
+        const slidesCount = this.slides().length;
+        if (!slidesCount) {
+            return [];
+        }
+        const total = 2 * this.buffer() + Math.ceil(this.currentSlidesPerView());
+        const start = this.windowBase() - this.buffer();
+        return Array.from({ length: total }, (_, i) => (((start + i) % slidesCount) + slidesCount) % slidesCount);
+    });
+    slideFlex = computed(() => {
+        const slidesPerView = this.currentSlidesPerView();
+        const gap = this.currentGap();
+        return `0 0 calc((100% - ${(slidesPerView - 1) * gap}px) / ${slidesPerView})`;
+    });
+    classes = computed(() => {
+        const classList = ["tedi-carousel__content"];
+        if (this.fade() && this.currentSlidesPerView() > 1) {
+            classList.push("tedi-carousel__content--fade-right");
+        }
+        else if (this.fade() && this.currentSlidesPerView() <= 1) {
+            classList.push("tedi-carousel__content--fade-x");
+        }
+        return classList.join(" ");
+    });
+    trackStyle = computed(() => {
+        const slidesPerView = this.currentSlidesPerView();
+        const gap = this.currentGap();
+        const viewportWidth = this.viewportWidth();
+        if (!viewportWidth) {
+            return {
+                gap: `${gap}px`,
+                transform: "translate3d(0,0,0)",
+                transition: "none",
+            };
+        }
+        const totalGapWidth = gap * (slidesPerView - 1);
+        const slideWidth = (viewportWidth - totalGapWidth) / slidesPerView;
+        const offsetSlides = this.trackIndex() - this.windowBase() + this.buffer();
+        const translateX = -offsetSlides * (slideWidth + gap);
+        return {
+            gap: `${gap}px`,
+            transform: `translate3d(${translateX}px, 0, 0)`,
+            transition: this.animate()
+                ? `transform ${this.transitionMs()}ms ease`
+                : "none",
+        };
+    });
+    locked = false;
+    dragging = false;
+    startX = 0;
+    startIndex = 0;
+    ro;
+    wheelTimeout;
+    scrollDelta = 0;
+    onWheel(event) {
+        const slidesCount = this.slides().length;
+        if (!slidesCount) {
+            return;
+        }
+        const delta = Math.abs(event.deltaX) > Math.abs(event.deltaY)
+            ? event.deltaX
+            : event.shiftKey
+                ? event.deltaY
+                : 0;
+        if (!delta) {
+            return;
+        }
+        event.preventDefault();
+        const cellWidth = (this.viewportWidth() -
+            this.currentGap() * (this.currentSlidesPerView() - 1)) /
+            this.currentSlidesPerView() +
+            this.currentGap();
+        if (!cellWidth) {
+            return;
+        }
+        const deltaSlides = delta / cellWidth;
+        this.scrollDelta += deltaSlides;
+        const maxDelta = this.buffer() * 0.9;
+        const min = this.windowBase() - maxDelta;
+        const max = this.windowBase() + maxDelta;
+        const unclamped = this.trackIndex() + deltaSlides;
+        const clamped = Math.min(Math.max(unclamped, min), max);
+        const wasClamped = clamped !== unclamped;
+        this.animate.set(false);
+        this.trackIndex.set(clamped);
+        clearTimeout(this.wheelTimeout);
+        this.wheelTimeout = setTimeout(() => {
+            this.animate.set(true);
+            const direction = Math.sign(this.scrollDelta);
+            const current = this.trackIndex();
+            let snapIndex = Math.round(current);
+            if (Math.abs(this.scrollDelta) > 0.3) {
+                snapIndex = direction > 0 ? Math.ceil(current) : Math.floor(current);
+            }
+            if (wasClamped) {
+                if (current <= min)
+                    snapIndex = Math.ceil(min);
+                if (current >= max)
+                    snapIndex = Math.floor(max);
+            }
+            const finalIndex = Math.min(Math.max(snapIndex, min), max);
+            this.trackIndex.set(finalIndex);
+            this.scrollDelta = 0;
+        }, 120);
+    }
+    onKeyDown(event) {
+        switch (event.key) {
+            case "ArrowRight":
+            case "PageDown":
+                event.preventDefault();
+                this.next();
+                break;
+            case "ArrowLeft":
+            case "PageUp":
+                event.preventDefault();
+                this.prev();
+                break;
+            case "Home":
+                event.preventDefault();
+                this.goToIndex(0);
+                break;
+            case "End": {
+                event.preventDefault();
+                this.goToIndex(this.slides().length - 1);
+                break;
+            }
+            default:
+                break;
+        }
+    }
+    onPointerDown(ev) {
+        if (!this.slides().length) {
+            return;
+        }
+        this.host.nativeElement.setPointerCapture(ev.pointerId);
+        this.dragging = true;
+        this.animate.set(false);
+        this.startX = ev.clientX;
+        this.startIndex = this.trackIndex();
+        this.windowBase.set(Math.floor(this.startIndex));
+    }
+    onPointerMove(ev) {
+        if (!this.dragging) {
+            return;
+        }
+        const dx = ev.clientX - this.startX;
+        const cellWidth = (this.viewportWidth() -
+            this.currentGap() * (this.currentSlidesPerView() - 1)) /
+            this.currentSlidesPerView() +
+            this.currentGap();
+        if (!cellWidth) {
+            return;
+        }
+        const deltaSlides = dx / cellWidth;
+        const targetIndex = this.startIndex - deltaSlides;
+        const maxDelta = this.buffer() * 0.9;
+        const min = this.windowBase() - maxDelta;
+        const max = this.windowBase() + maxDelta;
+        const clamped = Math.min(Math.max(targetIndex, min), max);
+        this.trackIndex.set(clamped);
+    }
+    onPointerUp() {
+        if (!this.dragging) {
+            return;
+        }
+        this.dragging = false;
+        this.animate.set(true);
+        this.trackIndex.set(Math.round(this.trackIndex()));
+    }
+    ngAfterViewInit() {
+        const viewport = this.host.nativeElement;
+        this.viewportWidth.set(viewport.clientWidth);
+        this.ro = new ResizeObserver(() => {
+            this.viewportWidth.set(viewport.clientWidth);
+        });
+        this.ro.observe(viewport);
+    }
+    ngOnDestroy() {
+        this.ro?.disconnect();
+    }
+    next() {
+        if (!this.slides().length || this.locked) {
+            return;
+        }
+        this.animate.set(true);
+        this.trackIndex.update((i) => i + 1);
+        this.lockNavigation();
+    }
+    prev() {
+        if (!this.slides().length || this.locked) {
+            return;
+        }
+        this.animate.set(true);
+        this.trackIndex.update((i) => i - 1);
+        this.lockNavigation();
+    }
+    goToIndex(index) {
+        const slidesCount = this.slides().length;
+        if (!slidesCount || this.locked) {
+            return;
+        }
+        const current = this.slideIndex();
+        const normalized = ((index % slidesCount) + slidesCount) % slidesCount;
+        const delta = normalized - current;
+        this.animate.set(true);
+        this.trackIndex.update((i) => i + delta);
+    }
+    onTransitionEnd(e) {
+        if (e.target !== this.track().nativeElement ||
+            e.propertyName !== "transform" ||
+            this.dragging) {
+            return;
+        }
+        this.animate.set(false);
+        this.windowBase.set(Math.floor(this.trackIndex()));
+    }
+    lockNavigation() {
+        this.locked = true;
+        setTimeout(() => (this.locked = false), this.transitionMs());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CarouselContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: CarouselContentComponent, isStandalone: true, selector: "tedi-carousel-content", inputs: { slidesPerView: { classPropertyName: "slidesPerView", publicName: "slidesPerView", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, fade: { classPropertyName: "fade", publicName: "fade", isSignal: true, isRequired: false, transformFunction: null }, transitionMs: { classPropertyName: "transitionMs", publicName: "transitionMs", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0", "role": "region", "aria-roledescription": "carousel", "aria-live": "off" }, listeners: { "wheel": "onWheel($event)", "keydown": "onKeyDown($event)", "pointerdown": "onPointerDown($event)", "pointermove": "onPointerMove($event)", "pointerup": "onPointerUp()", "pointercancel": "onPointerUp()", "lostpointercapture": "onPointerUp()" }, properties: { "attr.aria-label": "translationService.track('carousel')()", "class": "classes()" } }, queries: [{ propertyName: "slides", predicate: CarouselSlideDirective, isSignal: true }], viewQueries: [{ propertyName: "track", first: true, predicate: ["track"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #track\n  class=\"tedi-carousel__track\"\n  [style]=\"trackStyle()\"\n  (transitionend)=\"onTransitionEnd($event)\"\n>\n  @for (idx of renderedIndices(); track $index) {\n    <div\n      class=\"tedi-carousel__slide\"\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      [attr.aria-label]=\"\n        translationService.track('carousel.slide', idx + 1, slides().length)()\n      \"\n      [attr.aria-current]=\"idx === slideIndex() ? 'true' : null\"\n      [style.flex]=\"slideFlex()\"\n    >\n      <ng-container *ngTemplateOutlet=\"slides()[idx].template\"></ng-container>\n    </div>\n  }\n</div>\n", styles: [".tedi-carousel__content{width:100%;position:relative;overflow:hidden;touch-action:pan-y;cursor:grab}.tedi-carousel__content:focus-visible{outline:var(--borders-02) solid var(--primary-500);outline-offset:calc(-1 * var(--borders-03))}.tedi-carousel__content:active{cursor:grabbing}.tedi-carousel__content--fade-right{mask-image:linear-gradient(to right,black 90%,transparent 100%)}.tedi-carousel__content--fade-x{mask-image:linear-gradient(to right,black 85%,transparent 100%),linear-gradient(to left,black 85%,transparent 100%);mask-composite:intersect}.tedi-carousel__track{display:flex;will-change:transform}.tedi-carousel__slide{-webkit-user-select:none;user-select:none;-webkit-user-drag:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CarouselContentComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: "tedi-carousel-content", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet], host: {
+                        tabindex: "0",
+                        role: "region",
+                        "aria-roledescription": "carousel",
+                        "[attr.aria-label]": "translationService.track('carousel')()",
+                        "aria-live": "off",
+                        "[class]": "classes()",
+                    }, template: "<div\n  #track\n  class=\"tedi-carousel__track\"\n  [style]=\"trackStyle()\"\n  (transitionend)=\"onTransitionEnd($event)\"\n>\n  @for (idx of renderedIndices(); track $index) {\n    <div\n      class=\"tedi-carousel__slide\"\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      [attr.aria-label]=\"\n        translationService.track('carousel.slide', idx + 1, slides().length)()\n      \"\n      [attr.aria-current]=\"idx === slideIndex() ? 'true' : null\"\n      [style.flex]=\"slideFlex()\"\n    >\n      <ng-container *ngTemplateOutlet=\"slides()[idx].template\"></ng-container>\n    </div>\n  }\n</div>\n", styles: [".tedi-carousel__content{width:100%;position:relative;overflow:hidden;touch-action:pan-y;cursor:grab}.tedi-carousel__content:focus-visible{outline:var(--borders-02) solid var(--primary-500);outline-offset:calc(-1 * var(--borders-03))}.tedi-carousel__content:active{cursor:grabbing}.tedi-carousel__content--fade-right{mask-image:linear-gradient(to right,black 90%,transparent 100%)}.tedi-carousel__content--fade-x{mask-image:linear-gradient(to right,black 85%,transparent 100%),linear-gradient(to left,black 85%,transparent 100%);mask-composite:intersect}.tedi-carousel__track{display:flex;will-change:transform}.tedi-carousel__slide{-webkit-user-select:none;user-select:none;-webkit-user-drag:none}\n"] }]
+        }], propDecorators: { onWheel: [{
+                type: HostListener,
+                args: ["wheel", ["$event"]]
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ["keydown", ["$event"]]
+            }], onPointerDown: [{
+                type: HostListener,
+                args: ["pointerdown", ["$event"]]
+            }], onPointerMove: [{
+                type: HostListener,
+                args: ["pointermove", ["$event"]]
+            }], onPointerUp: [{
+                type: HostListener,
+                args: ["pointerup"]
+            }, {
+                type: HostListener,
+                args: ["pointercancel"]
+            }, {
+                type: HostListener,
+                args: ["lostpointercapture"]
+            }] } });
+
+class CarouselComponent {
+    carouselContent = contentChild.required(CarouselContentComponent);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: CarouselComponent, isStandalone: true, selector: "tedi-carousel", queries: [{ propertyName: "carouselContent", first: true, predicate: CarouselContentComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"tedi-carousel-header\" />\n<ng-content select=\"tedi-carousel-content\" />\n<ng-content select=\"tedi-carousel-footer\" />\n", styles: ["tedi-carousel{display:flex;flex-direction:column}tedi-carousel{gap:var(--layout-grid-gutters-08-mobile)}@media (min-width: 576px){tedi-carousel{gap:var(--layout-grid-gutters-08-tablet)}}@media (min-width: 992px){tedi-carousel{gap:var(--layout-grid-gutters-08-desktop)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CarouselComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: "tedi-carousel", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"tedi-carousel-header\" />\n<ng-content select=\"tedi-carousel-content\" />\n<ng-content select=\"tedi-carousel-footer\" />\n", styles: ["tedi-carousel{display:flex;flex-direction:column}tedi-carousel{gap:var(--layout-grid-gutters-08-mobile)}@media (min-width: 576px){tedi-carousel{gap:var(--layout-grid-gutters-08-tablet)}}@media (min-width: 992px){tedi-carousel{gap:var(--layout-grid-gutters-08-desktop)}}\n"] }]
+        }] });
+
+class CarouselFooterComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CarouselFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: CarouselFooterComponent, isStandalone: true, selector: "tedi-carousel-footer", ngImport: i0, template: "<ng-content />", isInline: true, styles: ["tedi-carousel-footer{display:flex;align-items:center;justify-content:space-between}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CarouselFooterComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: "tedi-carousel-footer", template: "<ng-content />", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["tedi-carousel-footer{display:flex;align-items:center;justify-content:space-between}\n"] }]
+        }] });
+
+class CarouselHeaderComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CarouselHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: CarouselHeaderComponent, isStandalone: true, selector: "tedi-carousel-header", ngImport: i0, template: "<ng-content />", isInline: true, styles: ["tedi-carousel-header{display:flex;align-items:flex-end;justify-content:space-between}tedi-carousel-header{gap:var(--layout-grid-gutters-16-mobile)}@media (min-width: 576px){tedi-carousel-header{gap:var(--layout-grid-gutters-16-tablet)}}@media (min-width: 992px){tedi-carousel-header{gap:var(--layout-grid-gutters-16-desktop)}}tedi-carousel-header{padding-bottom:var(--layout-grid-gutters-08-mobile)}@media (min-width: 576px){tedi-carousel-header{padding-bottom:var(--layout-grid-gutters-08-tablet)}}@media (min-width: 992px){tedi-carousel-header{padding-bottom:var(--layout-grid-gutters-08-desktop)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CarouselHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: "tedi-carousel-header", template: "<ng-content />", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["tedi-carousel-header{display:flex;align-items:flex-end;justify-content:space-between}tedi-carousel-header{gap:var(--layout-grid-gutters-16-mobile)}@media (min-width: 576px){tedi-carousel-header{gap:var(--layout-grid-gutters-16-tablet)}}@media (min-width: 992px){tedi-carousel-header{gap:var(--layout-grid-gutters-16-desktop)}}tedi-carousel-header{padding-bottom:var(--layout-grid-gutters-08-mobile)}@media (min-width: 576px){tedi-carousel-header{padding-bottom:var(--layout-grid-gutters-08-tablet)}}@media (min-width: 992px){tedi-carousel-header{padding-bottom:var(--layout-grid-gutters-08-desktop)}}\n"] }]
+        }] });
+
+class CarouselIndicatorsComponent {
+    /** Should show indicators with arrows? If yes, don't use carousel-navigation component */
+    withArrows = input(false);
+    /** Variant of indicators (dots and numbers) */
+    variant = input("dots");
+    translationService = inject(TediTranslationService);
+    carousel = inject(CarouselComponent);
+    indicatorsArray = computed(() => Array.from({ length: this.carousel.carouselContent().slides().length }, (_, i) => ({
+        index: i,
+        active: this.carousel.carouselContent().slideIndex() === i,
+    })));
+    activeSlideNumber = computed(() => this.carousel.carouselContent().slideIndex() + 1);
+    handleNext() {
+        this.carousel.carouselContent().next();
+    }
+    handlePrev() {
+        this.carousel.carouselContent().prev();
+    }
+    handleIndicatorClick(index) {
+        this.carousel.carouselContent().goToIndex(index);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CarouselIndicatorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: CarouselIndicatorsComponent, isStandalone: true, selector: "tedi-carousel-indicators", inputs: { withArrows: { classPropertyName: "withArrows", publicName: "withArrows", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (withArrows()) {\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"neutral\"\n    [attr.aria-label]=\"translationService.track('carousel.moveBack')()\"\n    (click)=\"handlePrev()\"\n  >\n    <tedi-icon name=\"arrow_back\" [size]=\"18\" />\n  </button>\n}\n\n@if (variant() === \"dots\") {\n  @for (indicator of indicatorsArray(); track indicator.index) {\n    <button\n      type=\"button\"\n      class=\"tedi-carousel__indicator\"\n      [attr.aria-label]=\"\n        translationService.track('carousel.showSlide', indicator.index + 1)()\n      \"\n      [ngClass]=\"indicator.active ? 'tedi-carousel__indicator--active' : null\"\n      (click)=\"handleIndicatorClick(indicator.index)\"\n    ></button>\n  }\n} @else if (activeSlideNumber()) {\n  <div>\n    <b tedi-text color=\"brand\">{{ activeSlideNumber() }}</b>\n    <span tedi-text color=\"tertiary\"> / {{ indicatorsArray().length }}</span>\n  </div>\n}\n\n@if (withArrows()) {\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"neutral\"\n    [attr.aria-label]=\"translationService.track('carousel.moveForward')()\"\n    (click)=\"handleNext()\"\n  >\n    <tedi-icon name=\"arrow_forward\" [size]=\"18\" />\n  </button>\n}\n", styles: ["tedi-carousel-indicators{display:flex;align-items:center;min-height:24px}tedi-carousel-indicators{gap:var(--layout-grid-gutters-04-mobile)}@media (min-width: 576px){tedi-carousel-indicators{gap:var(--layout-grid-gutters-04-tablet)}}@media (min-width: 992px){tedi-carousel-indicators{gap:var(--layout-grid-gutters-04-desktop)}}.tedi-carousel__indicator{width:22px;height:8px;border-radius:100px;border:1px solid var(--primary-600);background-color:transparent;cursor:pointer}.tedi-carousel__indicator:hover{border-color:var(--primary-700)}.tedi-carousel__indicator:active{border-color:var(--primary-800);background-color:var(--primary-800)}.tedi-carousel__indicator:focus-visible{outline:var(--borders-02) solid var(--primary-500);outline-offset:var(--borders-01)}.tedi-carousel__indicator--active{background-color:var(--primary-600)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CarouselIndicatorsComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: "tedi-carousel-indicators", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgClass, ButtonComponent, IconComponent, TextComponent], template: "@if (withArrows()) {\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"neutral\"\n    [attr.aria-label]=\"translationService.track('carousel.moveBack')()\"\n    (click)=\"handlePrev()\"\n  >\n    <tedi-icon name=\"arrow_back\" [size]=\"18\" />\n  </button>\n}\n\n@if (variant() === \"dots\") {\n  @for (indicator of indicatorsArray(); track indicator.index) {\n    <button\n      type=\"button\"\n      class=\"tedi-carousel__indicator\"\n      [attr.aria-label]=\"\n        translationService.track('carousel.showSlide', indicator.index + 1)()\n      \"\n      [ngClass]=\"indicator.active ? 'tedi-carousel__indicator--active' : null\"\n      (click)=\"handleIndicatorClick(indicator.index)\"\n    ></button>\n  }\n} @else if (activeSlideNumber()) {\n  <div>\n    <b tedi-text color=\"brand\">{{ activeSlideNumber() }}</b>\n    <span tedi-text color=\"tertiary\"> / {{ indicatorsArray().length }}</span>\n  </div>\n}\n\n@if (withArrows()) {\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"neutral\"\n    [attr.aria-label]=\"translationService.track('carousel.moveForward')()\"\n    (click)=\"handleNext()\"\n  >\n    <tedi-icon name=\"arrow_forward\" [size]=\"18\" />\n  </button>\n}\n", styles: ["tedi-carousel-indicators{display:flex;align-items:center;min-height:24px}tedi-carousel-indicators{gap:var(--layout-grid-gutters-04-mobile)}@media (min-width: 576px){tedi-carousel-indicators{gap:var(--layout-grid-gutters-04-tablet)}}@media (min-width: 992px){tedi-carousel-indicators{gap:var(--layout-grid-gutters-04-desktop)}}.tedi-carousel__indicator{width:22px;height:8px;border-radius:100px;border:1px solid var(--primary-600);background-color:transparent;cursor:pointer}.tedi-carousel__indicator:hover{border-color:var(--primary-700)}.tedi-carousel__indicator:active{border-color:var(--primary-800);background-color:var(--primary-800)}.tedi-carousel__indicator:focus-visible{outline:var(--borders-02) solid var(--primary-500);outline-offset:var(--borders-01)}.tedi-carousel__indicator--active{background-color:var(--primary-600)}\n"] }]
+        }] });
+
+class CarouselNavigationComponent {
+    translationService = inject(TediTranslationService);
+    carousel = inject(CarouselComponent);
+    handleNext() {
+        this.carousel.carouselContent().next();
+    }
+    handlePrev() {
+        this.carousel.carouselContent().prev();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CarouselNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: CarouselNavigationComponent, isStandalone: true, selector: "tedi-carousel-navigation", ngImport: i0, template: "<button\n  tedi-button\n  type=\"button\"\n  variant=\"secondary\"\n  [attr.aria-label]=\"translationService.track('carousel.moveBack')()\"\n  (click)=\"handlePrev()\"\n>\n  <tedi-icon name=\"arrow_back\" [size]=\"18\" />\n</button>\n<button\n  tedi-button\n  type=\"button\"\n  variant=\"secondary\"\n  [attr.aria-label]=\"translationService.track('carousel.moveForward')()\"\n  (click)=\"handleNext()\"\n>\n  <tedi-icon name=\"arrow_forward\" [size]=\"18\" />\n</button>\n", styles: ["tedi-carousel-navigation{display:flex;align-items:center}tedi-carousel-navigation{gap:var(--layout-grid-gutters-08-mobile)}@media (min-width: 576px){tedi-carousel-navigation{gap:var(--layout-grid-gutters-08-tablet)}}@media (min-width: 992px){tedi-carousel-navigation{gap:var(--layout-grid-gutters-08-desktop)}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CarouselNavigationComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: "tedi-carousel-navigation", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [ButtonComponent, IconComponent], template: "<button\n  tedi-button\n  type=\"button\"\n  variant=\"secondary\"\n  [attr.aria-label]=\"translationService.track('carousel.moveBack')()\"\n  (click)=\"handlePrev()\"\n>\n  <tedi-icon name=\"arrow_back\" [size]=\"18\" />\n</button>\n<button\n  tedi-button\n  type=\"button\"\n  variant=\"secondary\"\n  [attr.aria-label]=\"translationService.track('carousel.moveForward')()\"\n  (click)=\"handleNext()\"\n>\n  <tedi-icon name=\"arrow_forward\" [size]=\"18\" />\n</button>\n", styles: ["tedi-carousel-navigation{display:flex;align-items:center}tedi-carousel-navigation{gap:var(--layout-grid-gutters-08-mobile)}@media (min-width: 576px){tedi-carousel-navigation{gap:var(--layout-grid-gutters-08-tablet)}}@media (min-width: 992px){tedi-carousel-navigation{gap:var(--layout-grid-gutters-08-desktop)}}\n"] }]
+        }] });
+
 class FeedbackTextComponent {
     /**
      * Helper text
@@ -3131,5 +3591,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AlertComponent, BREAKPOINTS, BreakpointService, ButtonComponent, ClosingButtonComponent, ColComponent, CollapseComponent, FeedbackTextComponent, FooterBodyComponent, FooterBottomComponent, FooterComponent, FooterSectionComponent, FooterSideComponent, HeaderActionsComponent, HeaderComponent, HeaderContentComponent, HeaderLanguageComponent, HeaderLoginComponent, HeaderLogoutComponent, HeaderProfileComponent, HeaderRoleComponent, HideAtDirective, IconComponent, InfoButtonComponent, LabelComponent, LinkComponent, ListComponent, NumberFieldComponent, PopoverComponent, PopoverContentComponent, PopoverTriggerComponent, RowComponent, SeparatorComponent, ShowAtDirective, SideNavComponent, SideNavDropdownComponent, SideNavDropdownGroupComponent, SideNavDropdownItemComponent, SideNavGroupTitleComponent, SideNavItemComponent, SideNavOverlayComponent, SideNavToggleComponent, SpinnerComponent, TOOLTIP_ARROW_OFFSET, TOOLTIP_TIMEOUT_MS, TediTranslationPipe, TediTranslationService, TextComponent, TextGroupComponent, TextGroupLabelComponent, TextGroupValueComponent, TimelineComponent, TimelineDescriptionComponent, TimelineItemComponent, TimelineTitleComponent, ToggleComponent, TooltipComponent, TooltipContentComponent, TooltipTriggerComponent, VerticalSpacingDirective, VerticalSpacingItemDirective, generateUUID };
+export { AlertComponent, BREAKPOINTS, BreakpointService, ButtonComponent, CarouselComponent, CarouselContentComponent, CarouselFooterComponent, CarouselHeaderComponent, CarouselIndicatorsComponent, CarouselNavigationComponent, CarouselSlideDirective, ClosingButtonComponent, ColComponent, CollapseComponent, FeedbackTextComponent, FooterBodyComponent, FooterBottomComponent, FooterComponent, FooterSectionComponent, FooterSideComponent, HeaderActionsComponent, HeaderComponent, HeaderContentComponent, HeaderLanguageComponent, HeaderLoginComponent, HeaderLogoutComponent, HeaderProfileComponent, HeaderRoleComponent, HideAtDirective, IconComponent, InfoButtonComponent, LabelComponent, LinkComponent, ListComponent, NumberFieldComponent, PopoverComponent, PopoverContentComponent, PopoverTriggerComponent, RowComponent, SeparatorComponent, ShowAtDirective, SideNavComponent, SideNavDropdownComponent, SideNavDropdownGroupComponent, SideNavDropdownItemComponent, SideNavGroupTitleComponent, SideNavItemComponent, SideNavOverlayComponent, SideNavToggleComponent, SpinnerComponent, TOOLTIP_ARROW_OFFSET, TOOLTIP_TIMEOUT_MS, TediTranslationPipe, TediTranslationService, TextComponent, TextGroupComponent, TextGroupLabelComponent, TextGroupValueComponent, TimelineComponent, TimelineDescriptionComponent, TimelineItemComponent, TimelineTitleComponent, ToggleComponent, TooltipComponent, TooltipContentComponent, TooltipTriggerComponent, VerticalSpacingDirective, VerticalSpacingItemDirective, breakpointInput, generateUUID };
 //# sourceMappingURL=tedi-design-system-angular-tedi.mjs.map