@eui/ecl 23.0.0-alpha.10 → 23.0.0-alpha.11

package/fesm2022/eui-ecl-components-ecl-story-card.mjs

@@ -0,0 +1,505 @@
+import * as i0 from '@angular/core';
+import { Directive, input, signal, output, contentChild, ElementRef, computed, ChangeDetectionStrategy, Component, booleanAttribute, contentChildren, viewChild, viewChildren, inject, ChangeDetectorRef, afterNextRender, effect, untracked } from '@angular/core';
+import { EclIconComponent } from '@eui/ecl/components/ecl-icon';
+import { ECLBaseDirective, EclRtlService } from '@eui/ecl/core';
+import { TranslatePipe } from '@ngx-translate/core';
+import { EmblaCarouselDirective } from 'embla-carousel-angular';
+import { Subject, takeUntil } from 'rxjs';
+import { outputToObservable } from '@angular/core/rxjs-interop';
+
+/**
+ * Directive applied to the <ul> element that holds the story card items.
+ * Adds the grid container class and tablist role.
+ *
+ * @example
+ * <ul eclStoryCardList>...</ul>
+ */
+class EclStoryCardListDirective extends ECLBaseDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclStoryCardListDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: EclStoryCardListDirective, isStandalone: true, selector: "ul[eclStoryCardList]", host: { attributes: { "role": "tablist" }, properties: { "class": "getCssClasses(\"ecl-story-card__grid-container\")" } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclStoryCardListDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ul[eclStoryCardList]',
+                    host: {
+                        role: 'tablist',
+                        '[class]': 'getCssClasses("ecl-story-card__grid-container")',
+                    },
+                }]
+        }] });
+/**
+ * Directive applied to <picture> elements inside a story card item.
+ * Adds the ECL picture classes.
+ *
+ * @example
+ * <picture eclStoryCardPicture>
+ *   <source srcset="..." media="(max-width: 50rem)">
+ *   <img src="..." alt="...">
+ * </picture>
+ */
+class EclStoryCardPictureDirective extends ECLBaseDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclStoryCardPictureDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: EclStoryCardPictureDirective, isStandalone: true, selector: "picture[eclStoryCardPicture]", host: { properties: { "class": "getCssClasses(\"ecl-picture ecl-story-card__picture\")" } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclStoryCardPictureDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'picture[eclStoryCardPicture]',
+                    host: {
+                        '[class]': 'getCssClasses("ecl-picture ecl-story-card__picture")',
+                    },
+                }]
+        }] });
+/**
+ * Directive applied to <a> elements inside story card grid details.
+ * Adds the ECL link classes for the "Read more" link.
+ *
+ * @example
+ * <a eclStoryCardLink href="/example">Read more</a>
+ */
+class EclStoryCardLinkDirective extends ECLBaseDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclStoryCardLinkDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: EclStoryCardLinkDirective, isStandalone: true, selector: "[eclStoryCardLink]", host: { properties: { "class": "getCssClasses(\"ecl-link ecl-link--standalone ecl-link--icon ecl-story-card__link\")" } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclStoryCardLinkDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[eclStoryCardLink]',
+                    host: {
+                        '[class]': 'getCssClasses("ecl-link ecl-link--standalone ecl-link--icon ecl-story-card__link")',
+                    },
+                }]
+        }] });
+
+/**
+ * Component for a single story card grid item (tab).
+ * Applied to <li> elements within the story card list.
+ *
+ * The user provides:
+ * - `gridTitle`: the short label shown in the accordion tab button
+ * - A <picture eclStoryCardPicture> as projected content
+ *
+ * The component internally renders the button with role="tab",
+ * the loading bar, and the title wrapper.
+ *
+ * @example
+ * <li eclStoryCardItem gridTitle="why twelve">
+ *   <picture eclStoryCardPicture>
+ *     <img src="example.jpg" alt="Example">
+ *   </picture>
+ * </li>
+ */
+class EclStoryCardItemComponent extends ECLBaseDirective {
+    constructor() {
+        super(...arguments);
+        /** Short title displayed in the accordion tab button. */
+        this.gridTitle = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "gridTitle" }] : /* istanbul ignore next */ []));
+        /** Whether this item is currently expanded/selected. Set by parent. */
+        this.isExpanded = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
+        /** Whether autoplay is active (controls loading bar animation). Set by parent. */
+        this.isAutoPlaying = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isAutoPlaying" }] : /* istanbul ignore next */ []));
+        /** The index of this item within the list. Set by parent. */
+        this.index = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+        /** The generated ID for the tab button. Set by parent. */
+        this.tabId = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tabId" }] : /* istanbul ignore next */ []));
+        /** The ID of the controlled tabpanel. Set by parent. */
+        this.panelId = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "panelId" }] : /* istanbul ignore next */ []));
+        /** Emitted when the item's button is clicked. */
+        this.itemClick = output();
+        /** Emitted when the loading bar animation ends. */
+        this.loadingBarAnimationEnd = output();
+        /** Reference to the projected picture element for cloning into carousel. */
+        this.pictureRef = contentChild(EclStoryCardPictureDirective, { ...(ngDevMode ? { debugName: "pictureRef" } : /* istanbul ignore next */ {}), read: ElementRef });
+        this.cssClasses = computed(() => [
+            super.getCssClasses('ecl-story-card__grid-item'),
+            this.isExpanded() ? 'ecl-story-card__grid-item--expanded' : '',
+        ].join(' ').trim(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cssClasses" }] : /* istanbul ignore next */ []));
+    }
+    onButtonClick() {
+        this.itemClick.emit(this.index());
+    }
+    onAnimationEnd() {
+        this.loadingBarAnimationEnd.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclStoryCardItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EclStoryCardItemComponent, isStandalone: true, selector: "li[eclStoryCardItem]", inputs: { gridTitle: { classPropertyName: "gridTitle", publicName: "gridTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", loadingBarAnimationEnd: "loadingBarAnimationEnd" }, host: { attributes: { "role": "presentation" }, properties: { "class": "cssClasses()" } }, queries: [{ propertyName: "pictureRef", first: true, predicate: EclStoryCardPictureDirective, descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button class=\"ecl-story-card__grid-card\"\n    type=\"button\"\n    [attr.id]=\"tabId()\"\n    role=\"tab\"\n    [attr.aria-selected]=\"isExpanded()\"\n    [attr.aria-controls]=\"panelId()\"\n    (click)=\"onButtonClick()\">\n    <div class=\"ecl-story-card__grid-image\">\n        <ng-content select=\"picture[eclStoryCardPicture]\"></ng-content>\n        <div class=\"ecl-story-card__grid-loading-bar\">\n            <div class=\"ecl-story-card__grid-loading-bar-completion\"\n                [class.is-paused]=\"!isExpanded() || !isAutoPlaying()\"\n                (animationend)=\"onAnimationEnd()\">\n            </div>\n        </div>\n    </div>\n    <div class=\"ecl-story-card__grid-title-wrapper\">\n        @if (gridTitle()) {\n            <div class=\"ecl-story-card__grid-title\">{{ gridTitle() }}</div>\n        }\n    </div>\n</button>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclStoryCardItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'li[eclStoryCardItem]', host: {
+                        role: 'presentation',
+                        '[class]': 'cssClasses()',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button class=\"ecl-story-card__grid-card\"\n    type=\"button\"\n    [attr.id]=\"tabId()\"\n    role=\"tab\"\n    [attr.aria-selected]=\"isExpanded()\"\n    [attr.aria-controls]=\"panelId()\"\n    (click)=\"onButtonClick()\">\n    <div class=\"ecl-story-card__grid-image\">\n        <ng-content select=\"picture[eclStoryCardPicture]\"></ng-content>\n        <div class=\"ecl-story-card__grid-loading-bar\">\n            <div class=\"ecl-story-card__grid-loading-bar-completion\"\n                [class.is-paused]=\"!isExpanded() || !isAutoPlaying()\"\n                (animationend)=\"onAnimationEnd()\">\n            </div>\n        </div>\n    </div>\n    <div class=\"ecl-story-card__grid-title-wrapper\">\n        @if (gridTitle()) {\n            <div class=\"ecl-story-card__grid-title\">{{ gridTitle() }}</div>\n        }\n    </div>\n</button>\n" }]
+        }], propDecorators: { gridTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridTitle", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], loadingBarAnimationEnd: [{ type: i0.Output, args: ["loadingBarAnimationEnd"] }], pictureRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => EclStoryCardPictureDirective), { ...{ read: ElementRef }, isSignal: true }] }] } });
+
+/**
+ * Component for a story card grid details panel (tabpanel).
+ * Contains the expanded content: title, description, and optional link.
+ *
+ * For the 'testimonial' variant, additional inputs are available:
+ * - `author`: name of the author
+ * - `role`: role/position of the author
+ * - `source`: publication source
+ *
+ * @example
+ * <div eclStoryCardGridDetails
+ *      eclTitle="The European flag..."
+ *      description="It appears on official documents..."
+ *      author="John Doe"
+ *      role="Commissioner"
+ *      source="Published on The Guardian">
+ *   <a eclStoryCardLink eclLink variant="standalone" href="/example">
+ *     <span eclLinkLabel>Read more</span>
+ *     <ecl-icon icon="arrow-right" size="xs"></ecl-icon>
+ *   </a>
+ * </div>
+ */
+class EclStoryCardGridDetailsComponent extends ECLBaseDirective {
+    constructor() {
+        super(...arguments);
+        /** Title shown in the details panel. */
+        this.eclTitle = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "eclTitle" }] : /* istanbul ignore next */ []));
+        /** Description shown in the details panel. */
+        this.description = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+        /** Author name (testimonial variant). */
+        this.author = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "author" }] : /* istanbul ignore next */ []));
+        /** Author role/position (testimonial variant). */
+        this.role = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+        /** Publication source (testimonial variant). */
+        this.source = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "source" }] : /* istanbul ignore next */ []));
+        /** Whether this panel is currently visible. Set by parent. */
+        this.isActive = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
+        /** Whether the parent is in testimonial variant. Set by parent. */
+        this.isTestimonial = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isTestimonial" }] : /* istanbul ignore next */ []));
+        /** Index of this panel. Set by parent. */
+        this.index = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+        /** Generated panel ID. Set by parent. */
+        this.panelId = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "panelId" }] : /* istanbul ignore next */ []));
+        /** ID of the controlling tab. Set by parent. */
+        this.tabId = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tabId" }] : /* istanbul ignore next */ []));
+        /** Reference to the projected link element for cloning into carousel. */
+        this.linkRef = contentChild(EclStoryCardLinkDirective, { ...(ngDevMode ? { debugName: "linkRef" } : /* istanbul ignore next */ {}), read: ElementRef });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclStoryCardGridDetailsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EclStoryCardGridDetailsComponent, isStandalone: true, selector: "[eclStoryCardGridDetails]", inputs: { eclTitle: { classPropertyName: "eclTitle", publicName: "eclTitle", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, author: { classPropertyName: "author", publicName: "author", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "getCssClasses(\"ecl-story-card__grid-details\")", "attr.id": "panelId()", "attr.role": "\"tabpanel\"", "attr.aria-labelledby": "tabId()", "hidden": "!isActive()" } }, queries: [{ propertyName: "linkRef", first: true, predicate: EclStoryCardLinkDirective, descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<article class=\"ecl-story-card__grid-details-content\">\n    <div class=\"ecl-story-card__content\">\n        @if (isTestimonial()) {\n            <div class=\"ecl-story-card__content-icon\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"45\" viewBox=\"0 0 22 45\" fill=\"none\">\n                    <path d=\"M0 0H22V23.3143L0 44.5714V0Z\" fill=\"currentColor\"/>\n                </svg>\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"45\" viewBox=\"0 0 22 45\" fill=\"none\">\n                    <path d=\"M0 0H22V23.3143L0 44.5714V0Z\" fill=\"currentColor\"/>\n                </svg>\n            </div>\n        }\n        @if (eclTitle()) {\n            <div class=\"ecl-story-card__card-title\">{{ eclTitle() }}</div>\n        }\n        @if (author() || role() || source()) {\n            <div class=\"ecl-story-card__testimonial\">\n                @if (author()) {\n                    <span class=\"ecl-story-card__author\">{{ author() }}</span>\n                }\n                @if (role()) {\n                    <span class=\"ecl-story-card__role\">{{ role() }}</span>\n                }\n                @if (source()) {\n                    <cite class=\"ecl-story-card__source\">{{ source() }}</cite>\n                }\n            </div>\n        }\n        @if (description()) {\n            <div class=\"ecl-story-card__card-description\">{{ description() }}</div>\n        }\n        <ng-content select=\"[eclStoryCardLink]\"></ng-content>\n    </div>\n</article>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclStoryCardGridDetailsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '[eclStoryCardGridDetails]', host: {
+                        '[class]': 'getCssClasses("ecl-story-card__grid-details")',
+                        '[attr.id]': 'panelId()',
+                        '[attr.role]': '"tabpanel"',
+                        '[attr.aria-labelledby]': 'tabId()',
+                        '[hidden]': '!isActive()',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"ecl-story-card__grid-details-content\">\n    <div class=\"ecl-story-card__content\">\n        @if (isTestimonial()) {\n            <div class=\"ecl-story-card__content-icon\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"45\" viewBox=\"0 0 22 45\" fill=\"none\">\n                    <path d=\"M0 0H22V23.3143L0 44.5714V0Z\" fill=\"currentColor\"/>\n                </svg>\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"45\" viewBox=\"0 0 22 45\" fill=\"none\">\n                    <path d=\"M0 0H22V23.3143L0 44.5714V0Z\" fill=\"currentColor\"/>\n                </svg>\n            </div>\n        }\n        @if (eclTitle()) {\n            <div class=\"ecl-story-card__card-title\">{{ eclTitle() }}</div>\n        }\n        @if (author() || role() || source()) {\n            <div class=\"ecl-story-card__testimonial\">\n                @if (author()) {\n                    <span class=\"ecl-story-card__author\">{{ author() }}</span>\n                }\n                @if (role()) {\n                    <span class=\"ecl-story-card__role\">{{ role() }}</span>\n                }\n                @if (source()) {\n                    <cite class=\"ecl-story-card__source\">{{ source() }}</cite>\n                }\n            </div>\n        }\n        @if (description()) {\n            <div class=\"ecl-story-card__card-description\">{{ description() }}</div>\n        }\n        <ng-content select=\"[eclStoryCardLink]\"></ng-content>\n    </div>\n</article>\n" }]
+        }], propDecorators: { eclTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "eclTitle", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], author: [{ type: i0.Input, args: [{ isSignal: true, alias: "author", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }], linkRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => EclStoryCardLinkDirective), { ...{ read: ElementRef }, isSignal: true }] }] } });
+
+/**
+ * ECL Story Card component.
+ *
+ * Renders a desktop grid accordion (user-authored) and automatically
+ * generates a mobile carousel from the same data.
+ *
+ * Desktop: tablist/tab/tabpanel pattern with autoplay loading bar.
+ * Mobile: Embla carousel with prev/next and dot navigation.
+ *
+ * @example
+ * <section eclStoryCard isAutoplay [autoplayDelay]="10000"
+ *                 [eclTitle]="'Stories'" [eclDescription]="'...'">
+ *   <ul eclStoryCardList>
+ *     <li eclStoryCardItem gridTitle="why twelve">
+ *       <picture eclStoryCardPicture>...</picture>
+ *     </li>
+ *   </ul>
+ *   <div eclStoryCardGridDetails eclTitle="..." description="...">
+ *     <a eclStoryCardLink href="...">Read more</a>
+ *   </div>
+ * </section>
+ */
+class EclStoryCardComponent extends ECLBaseDirective {
+    constructor() {
+        super();
+        /** Title displayed in the story card header. */
+        this.eclTitle = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "eclTitle" }] : /* istanbul ignore next */ []));
+        /** Description displayed below the title. */
+        this.eclDescription = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "eclDescription" }] : /* istanbul ignore next */ []));
+        /** Variant of the story card: 'story' (default) or 'testimonial'. */
+        this.variant = input('story', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        /** Whether autoplay is enabled for the grid accordion. */
+        this.isAutoplay = input(false, { ...(ngDevMode ? { debugName: "isAutoplay" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Autoplay delay in milliseconds. Default: 10000. */
+        this.autoplayDelay = input(10000, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "autoplayDelay" }] : /* istanbul ignore next */ []));
+        /** ID for the component. All internal IDs derive from it. If not provided, auto-generated. */
+        this.eclId = input('', { ...(ngDevMode ? { debugName: "eclId" } : /* istanbul ignore next */ {}), alias: 'id' });
+        /** Emitted when the active grid item changes. */
+        this.selectionChange = output();
+        this.generatedId = `story-card-${crypto.randomUUID().slice(0, 8)}`;
+        this.componentId = computed(() => this.eclId() || this.generatedId, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "componentId" }] : /* istanbul ignore next */ []));
+        this.titleId = computed(() => `${this.componentId()}-title`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "titleId" }] : /* istanbul ignore next */ []));
+        /** Embla carousel options. */
+        this.emblaOptions = { loop: true, direction: 'ltr' };
+        /** Subscribed Embla events. */
+        this.subscribeToEvents = ['select', 'init', 'reInit'];
+        /** Current carousel snap index. */
+        this.activeSlideIndex = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeSlideIndex" }] : /* istanbul ignore next */ []));
+        /** Total number of items. */
+        this.totalSlides = computed(() => this.items().length, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "totalSlides" }] : /* istanbul ignore next */ []));
+        /** Previous button disabled state (carousel). */
+        this.prevDisabled = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "prevDisabled" }] : /* istanbul ignore next */ []));
+        /** Next button disabled state (carousel). */
+        this.nextDisabled = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nextDisabled" }] : /* istanbul ignore next */ []));
+        /** Currently expanded grid item index. */
+        this.expandedIndex = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expandedIndex" }] : /* istanbul ignore next */ []));
+        /** Whether grid autoplay is currently playing. */
+        this.isAutoPlaying = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isAutoPlaying" }] : /* istanbul ignore next */ []));
+        this.items = contentChildren(EclStoryCardItemComponent, { ...(ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {}), descendants: true });
+        this.detailsPanels = contentChildren(EclStoryCardGridDetailsComponent, { ...(ngDevMode ? { debugName: "detailsPanels" } : /* istanbul ignore next */ {}), descendants: true });
+        this.emblaRef = viewChild(EmblaCarouselDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "emblaRef" }] : /* istanbul ignore next */ []));
+        this.carouselImageWrappers = viewChildren('carouselImageWrapper', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "carouselImageWrappers" }] : /* istanbul ignore next */ []));
+        this.carouselContentWrappers = viewChildren('carouselContentWrapper', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "carouselContentWrappers" }] : /* istanbul ignore next */ []));
+        this.cd = inject(ChangeDetectorRef);
+        this.eclRtlService = inject(EclRtlService);
+        this.destroy$ = new Subject();
+        this.setupTeardown$ = new Subject();
+        this.cssClasses = computed(() => [
+            super.getCssClasses('ecl-story-card'),
+            this.eclDescription() ? 'ecl-story-card--has-description' : '',
+            this.variant() === 'testimonial' ? 'ecl-story-card--testimonial' : '',
+        ].join(' ').trim(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cssClasses" }] : /* istanbul ignore next */ []));
+        this.slideDuration = computed(() => `${this.autoplayDelay()}ms`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "slideDuration" }] : /* istanbul ignore next */ []));
+        afterNextRender(() => {
+            setTimeout(() => this.clonePicturesToCarousel());
+        });
+        effect(() => {
+            const itemsArray = this.items();
+            const detailsArray = this.detailsPanels();
+            untracked(() => {
+                this.setupGrid(itemsArray, detailsArray);
+            });
+        }, { allowSignalWrites: true });
+        this.eclRtlService.currentRtlState$.pipe(takeUntil(this.destroy$)).subscribe((isRtl) => {
+            const direction = isRtl ? 'rtl' : 'ltr';
+            if (this.emblaOptions.direction !== direction) {
+                this.emblaOptions = { ...this.emblaOptions, direction };
+                this.cd.detectChanges();
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.setupTeardown$.next();
+        this.setupTeardown$.complete();
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    /**
+     * Configures the grid accordion: assigns IDs, indices, and initial state
+     * to each item and details panel, subscribes to item interaction events,
+     * and starts autoplay if enabled.
+     */
+    setupGrid(itemsArray, detailsArray) {
+        this.setupTeardown$.next();
+        const id = this.componentId();
+        itemsArray.forEach((item, i) => {
+            item.index.set(i);
+            item.tabId.set(`${id}-tab-${i}`);
+            item.panelId.set(`${id}-details-${i}`);
+            item.isExpanded.set(i === this.expandedIndex());
+            item.isAutoPlaying.set(this.isAutoPlaying());
+            outputToObservable(item.itemClick).pipe(takeUntil(this.setupTeardown$)).subscribe((index) => this.onGridItemClick(index));
+            outputToObservable(item.loadingBarAnimationEnd).pipe(takeUntil(this.setupTeardown$)).subscribe(() => this.onLoadingBarAnimationEnd());
+        });
+        detailsArray.forEach((panel, i) => {
+            panel.index.set(i);
+            panel.panelId.set(`${id}-details-${i}`);
+            panel.tabId.set(`${id}-tab-${i}`);
+            panel.isActive.set(i === this.expandedIndex());
+            panel.isTestimonial.set(this.variant() === 'testimonial');
+        });
+        if (this.isAutoplay()) {
+            this.playAutoplay();
+        }
+    }
+    /** Set the expanded grid item by index. */
+    setGridItem(index) {
+        const itemsArray = this.items();
+        const detailsArray = this.detailsPanels();
+        if (itemsArray.length === 0)
+            return;
+        const nextIndex = ((index % itemsArray.length) + itemsArray.length) % itemsArray.length;
+        itemsArray.forEach((item, i) => {
+            item.isExpanded.set(i === nextIndex);
+            item.isAutoPlaying.set(this.isAutoPlaying());
+        });
+        detailsArray.forEach((panel, i) => {
+            panel.isActive.set(i === nextIndex);
+        });
+        this.expandedIndex.set(nextIndex);
+        this.selectionChange.emit({ index: nextIndex });
+    }
+    /** Handle click on a grid item button. */
+    onGridItemClick(index) {
+        const itemsArray = this.items();
+        const isCurrentlyExpanded = itemsArray[index]?.isExpanded();
+        if (isCurrentlyExpanded && !this.isAutoPlaying()) {
+            this.playAutoplay();
+        }
+        else {
+            this.pauseAutoplay();
+        }
+        this.setGridItem(index);
+    }
+    /** Go to the previous grid item. */
+    onGridPrevClick() {
+        this.setGridItem(this.expandedIndex() - 1);
+    }
+    /** Go to the next grid item. */
+    onGridNextClick() {
+        this.setGridItem(this.expandedIndex() + 1);
+    }
+    /** Handle animation end on the loading bar (advance to next). */
+    onLoadingBarAnimationEnd() {
+        if (this.isAutoPlaying()) {
+            this.setGridItem(this.expandedIndex() + 1);
+        }
+    }
+    /** Start autoplay. */
+    playAutoplay() {
+        if (this.items().length < 2)
+            return;
+        this.isAutoPlaying.set(true);
+        this.items().forEach(item => item.isAutoPlaying.set(true));
+    }
+    pauseAutoplay() {
+        this.isAutoPlaying.set(false);
+        this.items().forEach(item => item.isAutoPlaying.set(false));
+    }
+    /** Play button click. */
+    onPlayClick() {
+        this.playAutoplay();
+    }
+    /** Pause button click. */
+    onPauseClick() {
+        this.pauseAutoplay();
+    }
+    /** Clone each item's projected picture and link into the corresponding carousel slide. */
+    clonePicturesToCarousel() {
+        const imageWrappers = this.carouselImageWrappers();
+        const contentWrappers = this.carouselContentWrappers();
+        const itemsArray = this.items();
+        const detailsArray = this.detailsPanels();
+        itemsArray.forEach((item, i) => {
+            const pictureEl = item.pictureRef();
+            if (pictureEl && imageWrappers[i]) {
+                const clone = pictureEl.nativeElement.cloneNode(true);
+                imageWrappers[i].nativeElement.appendChild(clone);
+            }
+        });
+        detailsArray.forEach((panel, i) => {
+            const linkEl = panel.linkRef();
+            if (linkEl && contentWrappers[i]) {
+                const clone = linkEl.nativeElement.cloneNode(true);
+                contentWrappers[i].nativeElement.appendChild(clone);
+            }
+        });
+    }
+    onEmblaChange(eventName) {
+        if (!this.emblaApi) {
+            this.emblaApi = this.emblaRef()?.emblaApi;
+        }
+        if (!this.emblaApi)
+            return;
+        if (eventName === 'select' || eventName === 'init' || eventName === 'reInit') {
+            this.syncCarouselState();
+        }
+    }
+    /** Sync carousel state from Embla API. */
+    syncCarouselState() {
+        if (!this.emblaApi)
+            return;
+        this.activeSlideIndex.set(this.emblaApi.selectedScrollSnap());
+        this.prevDisabled.set(!this.emblaApi.canScrollPrev());
+        this.nextDisabled.set(!this.emblaApi.canScrollNext());
+    }
+    /** Navigate carousel to previous slide. */
+    onCarouselPrevClick() {
+        this.emblaRef()?.scrollPrev();
+    }
+    /** Navigate carousel to next slide. */
+    onCarouselNextClick() {
+        this.emblaRef()?.scrollNext();
+    }
+    /** Navigate carousel to a specific slide. */
+    goToSlide(index) {
+        this.emblaRef()?.scrollTo(index);
+    }
+    /** Returns dot indices for rendering. */
+    getDotIndices() {
+        return Array.from({ length: this.totalSlides() }, (_, i) => i);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclStoryCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EclStoryCardComponent, isStandalone: true, selector: "section[eclStoryCard]", inputs: { eclTitle: { classPropertyName: "eclTitle", publicName: "eclTitle", isSignal: true, isRequired: false, transformFunction: null }, eclDescription: { classPropertyName: "eclDescription", publicName: "eclDescription", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, isAutoplay: { classPropertyName: "isAutoplay", publicName: "isAutoplay", isSignal: true, isRequired: false, transformFunction: null }, autoplayDelay: { classPropertyName: "autoplayDelay", publicName: "autoplayDelay", isSignal: true, isRequired: false, transformFunction: null }, eclId: { classPropertyName: "eclId", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { properties: { "id": "componentId()", "class": "cssClasses()", "attr.aria-labelledby": "titleId()", "style.--ecl-story-card-slide-duration": "slideDuration()" } }, queries: [{ propertyName: "items", predicate: EclStoryCardItemComponent, descendants: true, isSignal: true }, { propertyName: "detailsPanels", predicate: EclStoryCardGridDetailsComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "emblaRef", first: true, predicate: EmblaCarouselDirective, descendants: true, isSignal: true }, { propertyName: "carouselImageWrappers", predicate: ["carouselImageWrapper"], descendants: true, isSignal: true }, { propertyName: "carouselContentWrappers", predicate: ["carouselContentWrapper"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (eclTitle() || eclDescription()) {\n<div class=\"ecl-story-card__header\">\n    @if (eclTitle()) {\n    <div class=\"ecl-story-card__title\" [attr.id]=\"titleId()\">{{ eclTitle() }}</div>\n    }\n    @if (eclDescription()) {\n    <div class=\"ecl-story-card__description\">{{ eclDescription() }}</div>\n    }\n</div>\n}\n\n<!-- Mobile: Embla Carousel (auto-generated from items + details) -->\n<div class=\"ecl-story-card__carousel\">\n    <div class=\"ecl-story-card__carousel-viewport\"\n        role=\"region\"\n        [attr.aria-label]=\"'ecl.story-card.SLIDER-LABEL' | translate\"\n        emblaCarousel\n        [options]=\"emblaOptions\"\n        [subscribeToEvents]=\"subscribeToEvents\"\n        (emblaChange)=\"onEmblaChange($event)\">\n        <ul class=\"ecl-story-card__carousel-container\">\n            @for (item of items(); track i; let i = $index) {\n            <li class=\"ecl-story-card__carousel-slide\"\n                [attr.aria-hidden]=\"i !== activeSlideIndex() ? true : null\">\n                <article class=\"ecl-story-card__card\">\n                    <div class=\"ecl-story-card__image-wrapper\" #carouselImageWrapper>\n                    </div>\n                    <div class=\"ecl-story-card__content\" #carouselContentWrapper>\n                        @if (detailsPanels()[i]; as panel) {\n                            @if (panel.eclTitle()) {\n                            <div class=\"ecl-story-card__card-title\">{{ panel.eclTitle() }}</div>\n                            }\n                            @if (panel.description()) {\n                            <div class=\"ecl-story-card__card-description\">{{ panel.description() }}</div>\n                            }\n                        }\n                    </div>\n                </article>\n            </li>\n            }\n        </ul>\n    </div>\n\n    <!-- Carousel Controls -->\n    @if (totalSlides() > 1) {\n    <div class=\"ecl-story-card__pager\">\n        <button class=\"ecl-story-card__prev\"\n            [disabled]=\"prevDisabled()\"\n            (click)=\"onCarouselPrevClick()\"\n            [attr.aria-label]=\"'ecl.story-card.SHOW-PREV-SLIDE' | translate\">\n            <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-270\"></ecl-icon>\n            <span class=\"ecl-story-card__prev-label\">\n                {{ 'ecl.story-card.PREVIOUS' | translate }}\n            </span>\n        </button>\n\n        <div class=\"ecl-story-card__dots\">\n            @for (dotIndex of getDotIndices(); track dotIndex) {\n            <button\n                #dotButton\n                class=\"ecl-story-card__dot\"\n                [class.ecl-story-card__dot--active]=\"dotIndex === activeSlideIndex()\"\n                [class.is-prev]=\"dotIndex === activeSlideIndex() - 1\"\n                [attr.aria-label]=\"'ecl.story-card.GO-TO-SLIDE' | translate: { current: dotIndex + 1, total: totalSlides() }\"\n                (click)=\"goToSlide(dotIndex)\">\n            </button>\n            }\n        </div>\n\n        <button class=\"ecl-story-card__next\"\n            [disabled]=\"nextDisabled()\"\n            (click)=\"onCarouselNextClick()\"\n            [attr.aria-label]=\"'ecl.story-card.SHOW-NEXT-SLIDE' | translate\">\n            <span class=\"ecl-story-card__next-label\">\n                {{ 'ecl.story-card.NEXT' | translate }}\n            </span>\n            <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-90\"></ecl-icon>\n        </button>\n    </div>\n    }\n</div>\n\n<!-- Desktop: Grid with Accordion (user-authored content projected here) -->\n<div class=\"ecl-story-card__grid\">\n    <ng-content select=\"ul[eclStoryCardList]\"></ng-content>\n    <ng-content select=\"[eclStoryCardGridDetails]\"></ng-content>\n\n    <!-- Grid Controls -->\n    @if (totalSlides() > 1) {\n    <div class=\"ecl-story-card__grid-controls\">\n        <button class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-story-card__grid-prev ecl-button--icon-only\"\n            type=\"button\"\n            (click)=\"onGridPrevClick()\"\n            [attr.aria-label]=\"'ecl.story-card.PREVIOUS' | translate\">\n            <span class=\"ecl-button__container\">\n                <span class=\"ecl-button__label\" data-ecl-label=\"true\">\n                    {{ 'ecl.story-card.PREVIOUS' | translate }}\n                </span>\n                <ecl-icon iconSet=\"phosphor\" icon=\"caret-left\" size=\"l\"></ecl-icon>\n            </span>\n        </button>\n\n        <button class=\"ecl-button ecl-button--secondary ecl-button--neutral ecl-story-card__grid-play ecl-button--icon-only\"\n            type=\"button\"\n            [style.display]=\"isAutoPlaying() ? 'none' : 'flex'\"\n            (click)=\"onPlayClick()\"\n            [attr.aria-label]=\"'ecl.story-card.PLAY' | translate\">\n            <span class=\"ecl-button__container\">\n                <span class=\"ecl-button__label\" data-ecl-label=\"true\">\n                    {{ 'ecl.story-card.PLAY' | translate }}\n                </span>\n                <ecl-icon iconSet=\"phosphor-fill\" icon=\"play\" size=\"l\"></ecl-icon>\n            </span>\n        </button>\n\n        <button class=\"ecl-button ecl-button--secondary ecl-button--neutral ecl-story-card__grid-pause ecl-button--icon-only\"\n            type=\"button\"\n            [style.display]=\"isAutoPlaying() ? 'flex' : 'none'\"\n            (click)=\"onPauseClick()\"\n            [attr.aria-label]=\"'ecl.story-card.PAUSE' | translate\">\n            <span class=\"ecl-button__container\">\n                <span class=\"ecl-button__label\" data-ecl-label=\"true\">\n                    {{ 'ecl.story-card.PAUSE' | translate }}\n                </span>\n                <ecl-icon iconSet=\"phosphor-fill\" icon=\"pause\" size=\"l\"></ecl-icon>\n            </span>\n        </button>\n\n        <button class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-story-card__grid-next ecl-button--icon-only\"\n            type=\"button\"\n            (click)=\"onGridNextClick()\"\n            [attr.aria-label]=\"'ecl.story-card.NEXT' | translate\">\n            <span class=\"ecl-button__container\">\n                <span class=\"ecl-button__label\" data-ecl-label=\"true\">\n                    {{ 'ecl.story-card.NEXT' | translate }}\n                </span>\n                <ecl-icon iconSet=\"phosphor\" icon=\"caret-right\" size=\"l\"></ecl-icon>\n            </span>\n        </button>\n    </div>\n    }\n</div>\n", dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "directive", type: EmblaCarouselDirective, selector: "[emblaCarousel]", inputs: ["options", "plugins", "subscribeToEvents", "eventsThrottleTime"], outputs: ["emblaChange"], exportAs: ["emblaCarousel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclStoryCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'section[eclStoryCard]', host: {
+                        '[id]': 'componentId()',
+                        '[class]': 'cssClasses()',
+                        '[attr.aria-labelledby]': 'titleId()',
+                        '[style.--ecl-story-card-slide-duration]': 'slideDuration()',
+                    }, imports: [
+                        TranslatePipe,
+                        EclIconComponent,
+                        EmblaCarouselDirective,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (eclTitle() || eclDescription()) {\n<div class=\"ecl-story-card__header\">\n    @if (eclTitle()) {\n    <div class=\"ecl-story-card__title\" [attr.id]=\"titleId()\">{{ eclTitle() }}</div>\n    }\n    @if (eclDescription()) {\n    <div class=\"ecl-story-card__description\">{{ eclDescription() }}</div>\n    }\n</div>\n}\n\n<!-- Mobile: Embla Carousel (auto-generated from items + details) -->\n<div class=\"ecl-story-card__carousel\">\n    <div class=\"ecl-story-card__carousel-viewport\"\n        role=\"region\"\n        [attr.aria-label]=\"'ecl.story-card.SLIDER-LABEL' | translate\"\n        emblaCarousel\n        [options]=\"emblaOptions\"\n        [subscribeToEvents]=\"subscribeToEvents\"\n        (emblaChange)=\"onEmblaChange($event)\">\n        <ul class=\"ecl-story-card__carousel-container\">\n            @for (item of items(); track i; let i = $index) {\n            <li class=\"ecl-story-card__carousel-slide\"\n                [attr.aria-hidden]=\"i !== activeSlideIndex() ? true : null\">\n                <article class=\"ecl-story-card__card\">\n                    <div class=\"ecl-story-card__image-wrapper\" #carouselImageWrapper>\n                    </div>\n                    <div class=\"ecl-story-card__content\" #carouselContentWrapper>\n                        @if (detailsPanels()[i]; as panel) {\n                            @if (panel.eclTitle()) {\n                            <div class=\"ecl-story-card__card-title\">{{ panel.eclTitle() }}</div>\n                            }\n                            @if (panel.description()) {\n                            <div class=\"ecl-story-card__card-description\">{{ panel.description() }}</div>\n                            }\n                        }\n                    </div>\n                </article>\n            </li>\n            }\n        </ul>\n    </div>\n\n    <!-- Carousel Controls -->\n    @if (totalSlides() > 1) {\n    <div class=\"ecl-story-card__pager\">\n        <button class=\"ecl-story-card__prev\"\n            [disabled]=\"prevDisabled()\"\n            (click)=\"onCarouselPrevClick()\"\n            [attr.aria-label]=\"'ecl.story-card.SHOW-PREV-SLIDE' | translate\">\n            <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-270\"></ecl-icon>\n            <span class=\"ecl-story-card__prev-label\">\n                {{ 'ecl.story-card.PREVIOUS' | translate }}\n            </span>\n        </button>\n\n        <div class=\"ecl-story-card__dots\">\n            @for (dotIndex of getDotIndices(); track dotIndex) {\n            <button\n                #dotButton\n                class=\"ecl-story-card__dot\"\n                [class.ecl-story-card__dot--active]=\"dotIndex === activeSlideIndex()\"\n                [class.is-prev]=\"dotIndex === activeSlideIndex() - 1\"\n                [attr.aria-label]=\"'ecl.story-card.GO-TO-SLIDE' | translate: { current: dotIndex + 1, total: totalSlides() }\"\n                (click)=\"goToSlide(dotIndex)\">\n            </button>\n            }\n        </div>\n\n        <button class=\"ecl-story-card__next\"\n            [disabled]=\"nextDisabled()\"\n            (click)=\"onCarouselNextClick()\"\n            [attr.aria-label]=\"'ecl.story-card.SHOW-NEXT-SLIDE' | translate\">\n            <span class=\"ecl-story-card__next-label\">\n                {{ 'ecl.story-card.NEXT' | translate }}\n            </span>\n            <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-90\"></ecl-icon>\n        </button>\n    </div>\n    }\n</div>\n\n<!-- Desktop: Grid with Accordion (user-authored content projected here) -->\n<div class=\"ecl-story-card__grid\">\n    <ng-content select=\"ul[eclStoryCardList]\"></ng-content>\n    <ng-content select=\"[eclStoryCardGridDetails]\"></ng-content>\n\n    <!-- Grid Controls -->\n    @if (totalSlides() > 1) {\n    <div class=\"ecl-story-card__grid-controls\">\n        <button class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-story-card__grid-prev ecl-button--icon-only\"\n            type=\"button\"\n            (click)=\"onGridPrevClick()\"\n            [attr.aria-label]=\"'ecl.story-card.PREVIOUS' | translate\">\n            <span class=\"ecl-button__container\">\n                <span class=\"ecl-button__label\" data-ecl-label=\"true\">\n                    {{ 'ecl.story-card.PREVIOUS' | translate }}\n                </span>\n                <ecl-icon iconSet=\"phosphor\" icon=\"caret-left\" size=\"l\"></ecl-icon>\n            </span>\n        </button>\n\n        <button class=\"ecl-button ecl-button--secondary ecl-button--neutral ecl-story-card__grid-play ecl-button--icon-only\"\n            type=\"button\"\n            [style.display]=\"isAutoPlaying() ? 'none' : 'flex'\"\n            (click)=\"onPlayClick()\"\n            [attr.aria-label]=\"'ecl.story-card.PLAY' | translate\">\n            <span class=\"ecl-button__container\">\n                <span class=\"ecl-button__label\" data-ecl-label=\"true\">\n                    {{ 'ecl.story-card.PLAY' | translate }}\n                </span>\n                <ecl-icon iconSet=\"phosphor-fill\" icon=\"play\" size=\"l\"></ecl-icon>\n            </span>\n        </button>\n\n        <button class=\"ecl-button ecl-button--secondary ecl-button--neutral ecl-story-card__grid-pause ecl-button--icon-only\"\n            type=\"button\"\n            [style.display]=\"isAutoPlaying() ? 'flex' : 'none'\"\n            (click)=\"onPauseClick()\"\n            [attr.aria-label]=\"'ecl.story-card.PAUSE' | translate\">\n            <span class=\"ecl-button__container\">\n                <span class=\"ecl-button__label\" data-ecl-label=\"true\">\n                    {{ 'ecl.story-card.PAUSE' | translate }}\n                </span>\n                <ecl-icon iconSet=\"phosphor-fill\" icon=\"pause\" size=\"l\"></ecl-icon>\n            </span>\n        </button>\n\n        <button class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-story-card__grid-next ecl-button--icon-only\"\n            type=\"button\"\n            (click)=\"onGridNextClick()\"\n            [attr.aria-label]=\"'ecl.story-card.NEXT' | translate\">\n            <span class=\"ecl-button__container\">\n                <span class=\"ecl-button__label\" data-ecl-label=\"true\">\n                    {{ 'ecl.story-card.NEXT' | translate }}\n                </span>\n                <ecl-icon iconSet=\"phosphor\" icon=\"caret-right\" size=\"l\"></ecl-icon>\n            </span>\n        </button>\n    </div>\n    }\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { eclTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "eclTitle", required: false }] }], eclDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "eclDescription", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], isAutoplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAutoplay", required: false }] }], autoplayDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoplayDelay", required: false }] }], eclId: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => EclStoryCardItemComponent), { ...{ descendants: true }, isSignal: true }] }], detailsPanels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => EclStoryCardGridDetailsComponent), { ...{ descendants: true }, isSignal: true }] }], emblaRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => EmblaCarouselDirective), { isSignal: true }] }], carouselImageWrappers: [{ type: i0.ViewChildren, args: ['carouselImageWrapper', { isSignal: true }] }], carouselContentWrappers: [{ type: i0.ViewChildren, args: ['carouselContentWrapper', { isSignal: true }] }] } });
+
+const EUI_ECL_STORY_CARD = [
+    EclStoryCardComponent,
+    EclStoryCardItemComponent,
+    EclStoryCardGridDetailsComponent,
+    EclStoryCardListDirective,
+    EclStoryCardPictureDirective,
+    EclStoryCardLinkDirective,
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { EUI_ECL_STORY_CARD, EclStoryCardComponent, EclStoryCardGridDetailsComponent, EclStoryCardItemComponent, EclStoryCardLinkDirective, EclStoryCardListDirective, EclStoryCardPictureDirective };
+//# sourceMappingURL=eui-ecl-components-ecl-story-card.mjs.map