@eui/ecl 22.0.0-alpha.52 → 22.0.0-alpha.53

package/types/eui-ecl-components-ecl-story-card.d.ts

@@ -19,28 +19,37 @@ import { EmblaEventType } from 'embla-carousel';
  */
 declare class EclStoryCardItemComponent extends ECLBaseDirective {
     /** Short title displayed in the accordion tab button. */
-    gridTitle: _angular_core.InputSignal<string>;
+    readonly gridTitle: _angular_core.InputSignal<string>;
     /** Whether this item is currently expanded/selected. Set by the parent `EclStoryCardComponent`. */
-    isExpanded: _angular_core.WritableSignal<boolean>;
+    readonly isExpanded: _angular_core.WritableSignal<boolean>;
     /** Whether autoplay is active for this item (controls the loading bar animation). Set by parent. */
-    isAutoPlaying: _angular_core.WritableSignal<boolean>;
+    readonly isAutoPlaying: _angular_core.WritableSignal<boolean>;
     /** Zero-based index of this item in the list. Set by parent. */
-    index: _angular_core.WritableSignal<number>;
+    readonly index: _angular_core.WritableSignal<number>;
     /** Generated ID for the tab button element. Set by parent. */
-    tabId: _angular_core.WritableSignal<string>;
+    readonly tabId: _angular_core.WritableSignal<string>;
     /** ID of the controlled `tabpanel` (`eclStoryCardGridDetails`). Set by parent. */
-    panelId: _angular_core.WritableSignal<string>;
+    readonly panelId: _angular_core.WritableSignal<string>;
     /** Emitted when the tab button is clicked; payload is this item's index. */
-    itemClick: _angular_core.OutputEmitterRef<number>;
+    readonly itemClick: _angular_core.OutputEmitterRef<number>;
     /** Emitted when the loading bar CSS animation ends, signalling to advance to the next item. */
-    loadingBarAnimationEnd: _angular_core.OutputEmitterRef<void>;
+    readonly loadingBarAnimationEnd: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Emitted when a keydown occurs on the tab button. The parent story card
+     * orchestrates keyboard navigation (arrows, Home, End) across all items.
+     */
+    readonly keydownTab: _angular_core.OutputEmitterRef<KeyboardEvent>;
     /** Reference to the projected `picture[eclStoryCardPicture]` element for cloning into the mobile carousel. */
-    pictureRef: _angular_core.Signal<ElementRef<any>>;
+    readonly pictureRef: _angular_core.Signal<ElementRef<any>>;
+    private readonly buttonRef;
     readonly cssClasses: _angular_core.Signal<string>;
+    /** Move focus to this item's tab button. Called by the parent during keyboard navigation. */
+    focusButton(): void;
     protected onButtonClick(): void;
     protected onAnimationEnd(): void;
+    protected onKeydown(event: KeyboardEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EclStoryCardItemComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EclStoryCardItemComponent, "li[eclStoryCardItem]", never, { "gridTitle": { "alias": "gridTitle"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; "loadingBarAnimationEnd": "loadingBarAnimationEnd"; }, ["pictureRef"], ["picture[eclStoryCardPicture]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EclStoryCardItemComponent, "li[eclStoryCardItem]", never, { "gridTitle": { "alias": "gridTitle"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; "loadingBarAnimationEnd": "loadingBarAnimationEnd"; "keydownTab": "keydownTab"; }, ["pictureRef"], ["picture[eclStoryCardPicture]"], true, never>;
 }
 
 /**
@@ -55,30 +64,33 @@ declare class EclStoryCardItemComponent extends ECLBaseDirective {
  * - `linkRef` is a `contentChild` query used by the parent to clone the link into the mobile carousel.
  */
 declare class EclStoryCardGridDetailsComponent extends ECLBaseDirective {
+    /** Optional teaser label shown above the title. Hidden by CSS in the testimonial variant. */
+    readonly teaserLabel: _angular_core.InputSignal<string>;
     /** Title shown in the details panel. */
-    eclTitle: _angular_core.InputSignal<string>;
+    readonly eclTitle: _angular_core.InputSignal<string>;
     /** Description shown in the details panel. */
-    description: _angular_core.InputSignal<string>;
+    readonly description: _angular_core.InputSignal<string>;
     /** Author name for the testimonial variant. */
-    author: _angular_core.InputSignal<string>;
+    readonly author: _angular_core.InputSignal<string>;
     /** Author role/position for the testimonial variant. */
-    role: _angular_core.InputSignal<string>;
+    readonly role: _angular_core.InputSignal<string>;
     /** Publication source for the testimonial variant. */
-    source: _angular_core.InputSignal<string>;
+    readonly source: _angular_core.InputSignal<string>;
     /** Whether this panel is currently visible. Set by the parent `EclStoryCardComponent`. */
-    isActive: _angular_core.WritableSignal<boolean>;
+    readonly isActive: _angular_core.WritableSignal<boolean>;
     /** Whether the parent story card is in the `'testimonial'` variant. Set by parent. */
-    isTestimonial: _angular_core.WritableSignal<boolean>;
+    readonly isTestimonial: _angular_core.WritableSignal<boolean>;
     /** Zero-based index of this panel. Set by parent. */
-    index: _angular_core.WritableSignal<number>;
+    readonly index: _angular_core.WritableSignal<number>;
     /** Generated panel `id`. Set by parent. */
-    panelId: _angular_core.WritableSignal<string>;
+    readonly panelId: _angular_core.WritableSignal<string>;
     /** `id` of the controlling tab button. Set by parent. */
-    tabId: _angular_core.WritableSignal<string>;
+    readonly tabId: _angular_core.WritableSignal<string>;
     /** Reference to the projected `[eclStoryCardLink]` element for cloning into the mobile carousel. */
-    linkRef: _angular_core.Signal<ElementRef<any>>;
+    readonly linkRef: _angular_core.Signal<ElementRef<any>>;
+    constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EclStoryCardGridDetailsComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EclStoryCardGridDetailsComponent, "[eclStoryCardGridDetails]", never, { "eclTitle": { "alias": "eclTitle"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "author": { "alias": "author"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "source": { "alias": "source"; "required": false; "isSignal": true; }; }, {}, ["linkRef"], ["[eclStoryCardLink]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EclStoryCardGridDetailsComponent, "[eclStoryCardGridDetails]", never, { "teaserLabel": { "alias": "teaserLabel"; "required": false; "isSignal": true; }; "eclTitle": { "alias": "eclTitle"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "author": { "alias": "author"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "source": { "alias": "source"; "required": false; "isSignal": true; }; }, {}, ["linkRef"], ["[eclStoryCardLink]"], true, never>;
 }
 
 interface EclStoryCardSelectionEvent {
@@ -100,50 +112,50 @@ interface EclStoryCardSelectionEvent {
  */
 declare class EclStoryCardComponent extends ECLBaseDirective implements OnDestroy {
     /** Title displayed in the story card header. */
-    eclTitle: _angular_core.InputSignal<string>;
+    readonly eclTitle: _angular_core.InputSignal<string>;
     /** Description text displayed below the title. */
-    eclDescription: _angular_core.InputSignal<string>;
+    readonly eclDescription: _angular_core.InputSignal<string>;
     /** Variant of the story card: `'story'` (default) or `'testimonial'`. */
-    variant: _angular_core.InputSignal<"story" | "testimonial">;
+    readonly variant: _angular_core.InputSignal<"story" | "testimonial">;
     /** When `true`, enables autoplay for the desktop grid accordion. */
-    isAutoplay: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly isAutoplay: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Autoplay slide duration in milliseconds. Default: `10000`. */
-    autoplayDelay: _angular_core.InputSignal<number>;
+    readonly autoplayDelay: _angular_core.InputSignal<number>;
     /** HTML `id` for the component; all internal IDs derive from it. Auto-generated when omitted. */
-    eclId: _angular_core.InputSignal<string>;
+    readonly eclId: _angular_core.InputSignal<string>;
     /** Emitted when the active grid item index changes. Payload: `{ index: number }`. */
-    selectionChange: _angular_core.OutputEmitterRef<EclStoryCardSelectionEvent>;
-    private eclRtlService;
-    private generatedId;
-    protected componentId: _angular_core.Signal<string>;
-    protected titleId: _angular_core.Signal<string>;
+    readonly selectionChange: _angular_core.OutputEmitterRef<EclStoryCardSelectionEvent>;
+    private readonly eclRtlService;
+    private readonly translate;
+    private readonly generatedId;
+    protected readonly componentId: _angular_core.Signal<string>;
     /** Current RTL state, derived reactively from the RTL service. */
-    private isRtl;
+    private readonly isRtl;
     /** Embla carousel options. Direction tracks the RTL state reactively. */
-    protected emblaOptions: _angular_core.Signal<{
+    protected readonly emblaOptions: _angular_core.Signal<{
         loop: boolean;
         direction: "ltr" | "rtl";
     }>;
     /** Subscribed Embla events. */
-    protected subscribeToEvents: EmblaEventType[];
+    protected readonly subscribeToEvents: EmblaEventType[];
     /** Current carousel snap index. */
-    protected activeSlideIndex: _angular_core.WritableSignal<number>;
+    protected readonly activeSlideIndex: _angular_core.WritableSignal<number>;
     /** Total number of items. */
-    protected totalSlides: _angular_core.Signal<number>;
+    protected readonly totalSlides: _angular_core.Signal<number>;
     /** Previous button disabled state (carousel). */
-    protected prevDisabled: _angular_core.WritableSignal<boolean>;
+    protected readonly prevDisabled: _angular_core.WritableSignal<boolean>;
     /** Next button disabled state (carousel). */
-    protected nextDisabled: _angular_core.WritableSignal<boolean>;
+    protected readonly nextDisabled: _angular_core.WritableSignal<boolean>;
     /** Currently expanded grid item index. */
-    protected expandedIndex: _angular_core.WritableSignal<number>;
+    protected readonly expandedIndex: _angular_core.WritableSignal<number>;
     /** Whether grid autoplay is currently playing. */
-    protected isAutoPlaying: _angular_core.WritableSignal<boolean>;
-    protected items: _angular_core.Signal<readonly EclStoryCardItemComponent[]>;
-    protected detailsPanels: _angular_core.Signal<readonly EclStoryCardGridDetailsComponent[]>;
-    private emblaRef;
-    private carouselImageWrappers;
-    private carouselContentWrappers;
-    private setupTeardown$;
+    protected readonly isAutoPlaying: _angular_core.WritableSignal<boolean>;
+    protected readonly items: _angular_core.Signal<readonly EclStoryCardItemComponent[]>;
+    protected readonly detailsPanels: _angular_core.Signal<readonly EclStoryCardGridDetailsComponent[]>;
+    private readonly emblaRef;
+    private readonly carouselImageWrappers;
+    private readonly carouselContentWrappers;
+    private readonly setupTeardown$;
     private emblaApi;
     constructor();
     readonly cssClasses: _angular_core.Signal<string>;
@@ -163,6 +175,19 @@ declare class EclStoryCardComponent extends ECLBaseDirective implements OnDestro
     protected onGridPrevClick(): void;
     /** Go to the next grid item. */
     protected onGridNextClick(): void;
+    /**
+     * Orchestrates keyboard navigation across the grid tablist (WAI-ARIA tabs
+     * pattern). Moves focus only; selection still happens on click/Enter.
+     *
+     * - ArrowRight: focus the next tab, wrapping to the first.
+     * - ArrowLeft: focus the previous tab, wrapping to the last.
+     * - Home: focus the first tab.
+     * - End: focus the last tab.
+     *
+     * @param event the originating keydown from the focused item's button
+     * @param index the index of the item that emitted the event
+     */
+    private onGridItemKeydown;
     /** Handle animation end on the loading bar (advance to next). */
     private onLoadingBarAnimationEnd;
     /** Start autoplay. */
@@ -185,6 +210,11 @@ declare class EclStoryCardComponent extends ECLBaseDirective implements OnDestro
     protected goToSlide(index: number): void;
     /** Returns dot indices for rendering. */
     protected getDotIndices(): number[];
+    /**
+     * Pre-translated accessible label for each carousel dot, passed to the shared
+     * slider pager. Translated here since the pager receives plain strings.
+     */
+    protected readonly dotAriaLabels: _angular_core.Signal<string[]>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EclStoryCardComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<EclStoryCardComponent, "section[eclStoryCard]", never, { "eclTitle": { "alias": "eclTitle"; "required": false; "isSignal": true; }; "eclDescription": { "alias": "eclDescription"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "isAutoplay": { "alias": "isAutoplay"; "required": false; "isSignal": true; }; "autoplayDelay": { "alias": "autoplayDelay"; "required": false; "isSignal": true; }; "eclId": { "alias": "id"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; }, ["items", "detailsPanels"], ["ul[eclStoryCardList]", "[eclStoryCardGridDetails]"], true, never>;
 }

package/types/eui-ecl-components-ecl-story-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"eui-ecl-components-ecl-story-card.d.ts","sources":["../../components/ecl-story-card/ecl-story-card-item/ecl-story-card-item.component.ts","../../components/ecl-story-card/ecl-story-card-grid-details/ecl-story-card-grid-details.component.ts","../../components/ecl-story-card/ecl-story-card.component.ts","../../components/ecl-story-card/ecl-story-card-directives.ts","../../components/ecl-story-card/index.ts"],"mappings":";;;;;AAaA;;;;;;;;;;;;;AAaG;AACH,cASa,yBAA0B,SAAQ,gBAAgB;;AAG3D,eAAS,aAAA,CAAA,WAAA;;AAGT,gBAAU,aAAA,CAAA,cAAA;;AAGV,mBAAa,aAAA,CAAA,cAAA;;AAGb,WAAK,aAAA,CAAA,cAAA;;AAGL,WAAK,aAAA,CAAA,cAAA;;AAGL,aAAO,aAAA,CAAA,cAAA;;AAGP,eAAS,aAAA,CAAA,gBAAA;;AAGT,4BAAsB,aAAA,CAAA,gBAAA;;AAGtB,gBAAU,aAAA,CAAA,MAAA,CAAA,UAAA;yBAES,aAAA,CAAA,MAAA;;;oDA7BV,yBAAyB;sDAAzB,yBAAyB;AAyCrC;;AClED;;;;;;;;;;AAUG;AACH,cAYa,gCAAiC,SAAQ,gBAAgB;;AAGlE,cAAQ,aAAA,CAAA,WAAA;;AAGR,iBAAW,aAAA,CAAA,WAAA;;AAGX,YAAM,aAAA,CAAA,WAAA;;AAGN,UAAI,aAAA,CAAA,WAAA;;AAGJ,YAAM,aAAA,CAAA,WAAA;;AAGN,cAAQ,aAAA,CAAA,cAAA;;AAGR,mBAAa,aAAA,CAAA,cAAA;;AAGb,WAAK,aAAA,CAAA,cAAA;;AAGL,aAAO,aAAA,CAAA,cAAA;;AAGP,WAAK,aAAA,CAAA,cAAA;;AAGL,aAAO,aAAA,CAAA,MAAA,CAAA,UAAA;oDAjCE,gCAAgC;sDAAhC,gCAAgC;AAkC5C;;UCvCgB,0BAA0B;;AAE1C;AAED;;;;;;;;;;;;;AAaG;AACH,cAgBa,qBAAsB,SAAQ,gBAAiB,YAAW,SAAS;;AAG5E,cAAQ,aAAA,CAAA,WAAA;;AAGR,oBAAc,aAAA,CAAA,WAAA;;AAGd,aAAO,aAAA,CAAA,WAAA;;AAGP,gBAAU,aAAA,CAAA,wBAAA;;AAGV,mBAAa,aAAA,CAAA,WAAA;;AAGb,WAAK,aAAA,CAAA,WAAA;;AAGL,qBAAe,aAAA,CAAA,gBAAA,CAAA,0BAAA;;;2BAKM,aAAA,CAAA,MAAA;uBACJ,aAAA,CAAA,MAAA;;;;AAMjB,4BAAsB,aAAA,CAAA,MAAA;;AAAwC;AAG1D;;AAGJ,iCAA6B,cAAc;;gCAGjB,aAAA,CAAA,cAAA;;2BAGL,aAAA,CAAA,MAAA;;4BAGC,aAAA,CAAA,cAAA;;4BAGA,aAAA,CAAA,cAAA;;6BAGC,aAAA,CAAA,cAAA;;6BAGA,aAAA,CAAA,cAAA;qBAER,aAAA,CAAA,MAAA,UAAA,yBAAA;6BAEQ,aAAA,CAAA,MAAA,UAAA,gCAAA;;;;;;;yBAyBJ,aAAA,CAAA,MAAA;4BAMG,aAAA,CAAA,MAAA;AAEtB;AAKA;;;;AAIG;AACH;;AAqCA;;AAqBA;;;;;;AAwBA;;;;;;;;;AA6BA;AAuBA;;AAYA;;;;;;AAmBA;;AAKA;oDAlRS,qBAAqB;sDAArB,qBAAqB;AAqRjC;;ACjVD;;;AAGG;AACH,cAOa,yBAA0B,SAAQ,gBAAgB;oDAAlD,yBAAyB;sDAAzB,yBAAyB;AAA4B;AAElE;;;AAGG;AACH,cAMa,4BAA6B,SAAQ,gBAAgB;oDAArD,4BAA4B;sDAA5B,4BAA4B;AAA4B;AAErE;;;AAGG;AACH,cAMa,yBAA0B,SAAQ,gBAAgB;oDAAlD,yBAAyB;sDAAzB,yBAAyB;AAA4B;;ACxBlE,cAAa,kBAAkB,mBAAA,qBAAA,SAAA,yBAAA,SAAA,gCAAA,SAAA,yBAAA,SAAA,4BAAA,SAAA,yBAAA;;","names":[]}
+{"version":3,"file":"eui-ecl-components-ecl-story-card.d.ts","sources":["../../components/ecl-story-card/ecl-story-card-item/ecl-story-card-item.component.ts","../../components/ecl-story-card/ecl-story-card-grid-details/ecl-story-card-grid-details.component.ts","../../components/ecl-story-card/ecl-story-card.component.ts","../../components/ecl-story-card/ecl-story-card-directives.ts","../../components/ecl-story-card/index.ts"],"mappings":";;;;;AAcA;;;;;;;;;;;;;AAaG;AACH,cASa,yBAA0B,SAAQ,gBAAgB;;wBAGzC,aAAA,CAAA,WAAA;;yBAGC,aAAA,CAAA,cAAA;;4BAGG,aAAA,CAAA,cAAA;;oBAGR,aAAA,CAAA,cAAA;;oBAGA,aAAA,CAAA,cAAA;;sBAGE,aAAA,CAAA,cAAA;;wBAGE,aAAA,CAAA,gBAAA;;qCAGa,aAAA,CAAA,gBAAA;AAE/B;;;AAGG;yBACgB,aAAA,CAAA,gBAAA,CAAA,aAAA;;yBAGA,aAAA,CAAA,MAAA,CAAA,UAAA;AAEnB;yBAEmB,aAAA,CAAA,MAAA;;AAMnB;;;AAYA,+BAA2B,aAAa;oDAvD/B,yBAAyB;sDAAzB,yBAAyB;AA0DrC;;ACnFD;;;;;;;;;;AAUG;AACH,cAaa,gCAAiC,SAAQ,gBAAgB;;0BAG9C,aAAA,CAAA,WAAA;;uBAGH,aAAA,CAAA,WAAA;;0BAGG,aAAA,CAAA,WAAA;;qBAGL,aAAA,CAAA,WAAA;;mBAGF,aAAA,CAAA,WAAA;;qBAGE,aAAA,CAAA,WAAA;;uBAGE,aAAA,CAAA,cAAA;;4BAGK,aAAA,CAAA,cAAA;;oBAGR,aAAA,CAAA,cAAA;;sBAGE,aAAA,CAAA,cAAA;;oBAGF,aAAA,CAAA,cAAA;;sBAGE,aAAA,CAAA,MAAA,CAAA,UAAA;;oDApCP,gCAAgC;sDAAhC,gCAAgC;AAoD5C;;UC3DgB,0BAA0B;;AAE1C;AAED;;;;;;;;;;;;;AAaG;AACH,cAea,qBAAsB,SAAQ,gBAAiB,YAAW,SAAS;;uBAG3D,aAAA,CAAA,WAAA;;6BAGM,aAAA,CAAA,WAAA;;sBAGP,aAAA,CAAA,WAAA;;yBAGG,aAAA,CAAA,wBAAA;;4BAGG,aAAA,CAAA,WAAA;;oBAGR,aAAA,CAAA,WAAA;;8BAGU,aAAA,CAAA,gBAAA,CAAA,0BAAA;AAExB;AACA;AAEA;AACA,oCAA8B,aAAA,CAAA,MAAA;;AAG9B;;qCAG+B,aAAA,CAAA,MAAA;;AAAwC;AAGnE;;AAGJ,0CAAsC,cAAc;;AAGpD,yCAAmC,aAAA,CAAA,cAAA;;AAGnC,oCAA8B,aAAA,CAAA,MAAA;;AAG9B,qCAA+B,aAAA,CAAA,cAAA;;AAG/B,qCAA+B,aAAA,CAAA,cAAA;;AAG/B,sCAAgC,aAAA,CAAA,cAAA;;AAGhC,sCAAgC,aAAA,CAAA,cAAA;AAEhC,8BAAwB,aAAA,CAAA,MAAA,UAAA,yBAAA;AAExB,sCAAgC,aAAA,CAAA,MAAA,UAAA,gCAAA;AAEhC;AACA;AACA;AAEA;;;yBAmBmB,aAAA,CAAA,MAAA;4BAMG,aAAA,CAAA,MAAA;AAEtB;AAKA;;;;AAIG;AACH;;AAyCA;;AAqBA;;;;;AAuBA;;;;;;;;;;;AAWG;AACH;;AA+BA;;;;;;;;;AA6BA;AAuBA;;AAYA;;;;;;AAmBA;;AAKA;AAIA;;;AAGG;AACH,sCAAgC,aAAA,CAAA,MAAA;oDAxUvB,qBAAqB;sDAArB,qBAAqB;AAiVjC;;AC5YD;;;AAGG;AACH,cAOa,yBAA0B,SAAQ,gBAAgB;oDAAlD,yBAAyB;sDAAzB,yBAAyB;AAA4B;AAElE;;;AAGG;AACH,cAMa,4BAA6B,SAAQ,gBAAgB;oDAArD,4BAA4B;sDAA5B,4BAA4B;AAA4B;AAErE;;;AAGG;AACH,cAMa,yBAA0B,SAAQ,gBAAgB;oDAAlD,yBAAyB;sDAAzB,yBAAyB;AAA4B;;ACxBlE,cAAa,kBAAkB,mBAAA,qBAAA,SAAA,yBAAA,SAAA,gCAAA,SAAA,yBAAA,SAAA,4BAAA,SAAA,yBAAA;;","names":[]}