@tedi-design-system/angular 6.2.0-rc.5 → 6.2.0-rc.7

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, inject, ElementRef, Directive, Injectable, InjectionToken, REQUEST, PLATFORM_ID, effect, isSignal, Pipe, model, output, Injector, Renderer2, HostListener, viewChild, contentChild, contentChildren, forwardRef, ViewChild, TemplateRef, HostBinding, Attribute, ViewContainerRef, runInInjectionContext, ContentChildren, afterNextRender, ContentChild, makeEnvironmentProviders } from '@angular/core';
+import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, inject, ElementRef, Directive, Injectable, InjectionToken, REQUEST, PLATFORM_ID, effect, isSignal, Pipe, model, output, Injector, Renderer2, HostListener, viewChild, contentChild, contentChildren, forwardRef, ViewChild, TemplateRef, viewChildren, HostBinding, Attribute, ViewContainerRef, runInInjectionContext, ContentChildren, afterNextRender, ContentChild, makeEnvironmentProviders } from '@angular/core';
 import * as i1 from '@angular/cdk/layout';
 import { DOCUMENT, isPlatformBrowser, isPlatformServer, NgTemplateOutlet, NgClass, NgFor, NgIf } from '@angular/common';
 import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
@@ -4254,7 +4254,9 @@ class CarouselContentComponent {
     translationService = inject(TediTranslationService);
     breakpointService = inject(BreakpointService);
     host = inject(ElementRef);
+    liveAnnouncer = inject(LiveAnnouncer);
     track = viewChild.required("track");
+    slideElements = viewChildren("slide");
     slides = contentChildren(CarouselSlideDirective);
     trackIndex = signal(0);
     animate = signal(false);
@@ -4321,6 +4323,15 @@ class CarouselContentComponent {
     renderedActiveIndex = computed(() => {
         return this.trackIndex() - this.windowBase() + this.buffer();
     });
+    /**
+     * Checks if a slide at the given rendered index is currently visible in the viewport.
+     * Used to determine which slides should be accessible to screen readers.
+     */
+    isSlideVisible(renderedIndex) {
+        const activeIndex = this.renderedActiveIndex();
+        const slidesPerView = Math.ceil(this.currentSlidesPerView());
+        return renderedIndex >= activeIndex && renderedIndex < activeIndex + slidesPerView;
+    }
     renderedIndices = computed(() => {
         const slidesCount = this.slides().length;
         if (!slidesCount) {
@@ -4370,11 +4381,17 @@ class CarouselContentComponent {
     });
     locked = false;
     dragging = false;
+    pendingFocus = false;
     startX = 0;
     startIndex = 0;
     ro;
     wheelTimeout;
     scrollDelta = 0;
+    onScroll() {
+        // Prevent any scroll triggered by focus (e.g., VoiceOver navigation)
+        this.host.nativeElement.scrollLeft = 0;
+        this.host.nativeElement.scrollTop = 0;
+    }
     onWheel(event) {
         const slidesCount = this.slides().length;
         if (!slidesCount) {
@@ -4508,6 +4525,7 @@ class CarouselContentComponent {
         this.animate.set(true);
         this.trackIndex.update((i) => i + 1);
         this.lockNavigation();
+        this.announceSlideChange();
     }
     prev() {
         if (!this.slides().length || this.locked) {
@@ -4516,8 +4534,9 @@ class CarouselContentComponent {
         this.animate.set(true);
         this.trackIndex.update((i) => i - 1);
         this.lockNavigation();
+        this.announceSlideChange();
     }
-    goToIndex(index) {
+    goToIndex(index, options) {
         const slidesCount = this.slides().length;
         if (!slidesCount || this.locked) {
             return;
@@ -4527,6 +4546,26 @@ class CarouselContentComponent {
         const delta = normalized - current;
         this.animate.set(true);
         this.trackIndex.update((i) => i + delta);
+        if (options?.focusSlide) {
+            // Focus after transition completes so DOM positions are stable
+            this.pendingFocus = true;
+        }
+        else {
+            this.announceSlideChange();
+        }
+    }
+    /**
+     * Focuses the currently active slide for screen reader users.
+     * Uses preventScroll to avoid breaking carousel layout.
+     */
+    focusActiveSlide() {
+        setTimeout(() => {
+            const activeIndex = this.renderedActiveIndex();
+            const slideElement = this.slideElements()[activeIndex];
+            if (slideElement) {
+                slideElement.nativeElement.focus({ preventScroll: true });
+            }
+        });
     }
     onTransitionEnd(e) {
         if (e.target !== this.track().nativeElement ||
@@ -4536,13 +4575,29 @@ class CarouselContentComponent {
         }
         this.animate.set(false);
         this.windowBase.set(Math.floor(this.trackIndex()));
+        if (this.pendingFocus) {
+            this.pendingFocus = false;
+            this.focusActiveSlide();
+        }
     }
     lockNavigation() {
         this.locked = true;
         setTimeout(() => (this.locked = false), this.transitionMs());
     }
+    /**
+     * Announces the current slide position to screen readers via LiveAnnouncer.
+     * Called after navigation to inform users of the slide change.
+     */
+    announceSlideChange() {
+        setTimeout(() => {
+            const slideNumber = this.slideIndex() + 1;
+            const totalSlides = this.slides().length;
+            const message = this.translationService.translate("carousel.slide", slideNumber, totalSlides);
+            this.liveAnnouncer.announce(message, "polite");
+        }, 100);
+    }
     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      [attr.role]=\"$index === renderedActiveIndex() ? 'group' : 'presentation'\"\n      aria-roledescription=\"slide\"\n      [attr.aria-label]=\"\n        translationService.track('carousel.slide', idx + 1, slides().length)()\n      \"\n      [attr.aria-current]=\"$index === renderedActiveIndex() ? 'true' : null\"\n      [attr.aria-hidden]=\"$index === renderedActiveIndex() ? null : 'true'\"\n      [style.flex]=\"slideFlex()\"\n    >\n      <ng-container *ngTemplateOutlet=\"slides()[idx].template\"></ng-container>\n    </div>\n  }\n</div>\n", styles: [".tedi-carousel__content{position:relative;width:100%;overflow:hidden;touch-action:pan-y;cursor:grab}.tedi-carousel__content:focus-visible{outline:var(--borders-02) solid var(--tedi-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 });
+    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: { "scroll": "onScroll()", "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 }, { propertyName: "slideElements", predicate: ["slide"], 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      #slide\n      class=\"tedi-carousel__slide\"\n      [attr.role]=\"isSlideVisible($index) ? 'group' : 'presentation'\"\n      aria-roledescription=\"slide\"\n      [attr.aria-label]=\"\n        translationService.track('carousel.slide', idx + 1, slides().length)()\n      \"\n      [attr.aria-current]=\"$index === renderedActiveIndex() ? 'true' : null\"\n      [attr.aria-hidden]=\"isSlideVisible($index) ? null : 'true'\"\n      [attr.tabindex]=\"isSlideVisible($index) ? '-1' : 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{position:relative;width:100%;overflow:hidden;overscroll-behavior:contain;touch-action:pan-y;cursor:grab}.tedi-carousel__content:focus-visible{outline:var(--borders-02) solid var(--tedi-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;scroll-snap-align:none;scroll-margin:0;-webkit-user-drag:none}.tedi-carousel__slide:focus{outline:none}.tedi-carousel__slide:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--borders-03))}\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,
@@ -4553,8 +4608,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         "[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      [attr.role]=\"$index === renderedActiveIndex() ? 'group' : 'presentation'\"\n      aria-roledescription=\"slide\"\n      [attr.aria-label]=\"\n        translationService.track('carousel.slide', idx + 1, slides().length)()\n      \"\n      [attr.aria-current]=\"$index === renderedActiveIndex() ? 'true' : null\"\n      [attr.aria-hidden]=\"$index === renderedActiveIndex() ? null : 'true'\"\n      [style.flex]=\"slideFlex()\"\n    >\n      <ng-container *ngTemplateOutlet=\"slides()[idx].template\"></ng-container>\n    </div>\n  }\n</div>\n", styles: [".tedi-carousel__content{position:relative;width:100%;overflow:hidden;touch-action:pan-y;cursor:grab}.tedi-carousel__content:focus-visible{outline:var(--borders-02) solid var(--tedi-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: [{
+                    }, 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      #slide\n      class=\"tedi-carousel__slide\"\n      [attr.role]=\"isSlideVisible($index) ? 'group' : 'presentation'\"\n      aria-roledescription=\"slide\"\n      [attr.aria-label]=\"\n        translationService.track('carousel.slide', idx + 1, slides().length)()\n      \"\n      [attr.aria-current]=\"$index === renderedActiveIndex() ? 'true' : null\"\n      [attr.aria-hidden]=\"isSlideVisible($index) ? null : 'true'\"\n      [attr.tabindex]=\"isSlideVisible($index) ? '-1' : 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{position:relative;width:100%;overflow:hidden;overscroll-behavior:contain;touch-action:pan-y;cursor:grab}.tedi-carousel__content:focus-visible{outline:var(--borders-02) solid var(--tedi-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;scroll-snap-align:none;scroll-margin:0;-webkit-user-drag:none}.tedi-carousel__slide:focus{outline:none}.tedi-carousel__slide:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--borders-03))}\n"] }]
+        }], propDecorators: { onScroll: [{
+                type: HostListener,
+                args: ["scroll"]
+            }], onWheel: [{
                 type: HostListener,
                 args: ["wheel", ["$event"]]
             }], onKeyDown: [{
@@ -4624,7 +4682,7 @@ class CarouselIndicatorsComponent {
         this.carousel.carouselContent().prev();
     }
     handleIndicatorClick(index) {
-        this.carousel.carouselContent().goToIndex(index);
+        this.carousel.carouselContent().goToIndex(index, { focusSlide: true });
     }
     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;gap:var(--layout-grid-gutters-04);align-items:center;min-height:24px}.tedi-carousel__indicator{position:relative;width:24px;height:24px;cursor:pointer;background:none;border:none}.tedi-carousel__indicator:after{position:absolute;top:50%;left:50%;width:22px;height:8px;content:\"\";background-color:transparent;border:1px solid var(--tedi-primary-600);border-radius:100px;transform:translate(-50%,-50%)}.tedi-carousel__indicator:hover:after{border-color:var(--tedi-primary-700)}.tedi-carousel__indicator:active:after{background-color:var(--tedi-primary-800);border-color:var(--tedi-primary-800)}.tedi-carousel__indicator:focus-visible:after{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--borders-01)}.tedi-carousel__indicator--active:after{background-color:var(--tedi-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 });