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

package/fesm2022/eui-ecl-components-ecl-quiz.mjs

@@ -1,11 +1,13 @@
 import * as i0 from '@angular/core';
-import { Directive, input, signal, output, computed, viewChild, ChangeDetectionStrategy, Component, booleanAttribute, viewChildren, inject, ChangeDetectorRef, ContentChildren, forwardRef } from '@angular/core';
-import { EclIconComponent } from '@eui/ecl/components/ecl-icon';
+import { Directive, input, signal, output, computed, viewChild, ChangeDetectionStrategy, Component, booleanAttribute, inject, ChangeDetectorRef, ElementRef, ContentChildren, forwardRef } from '@angular/core';
+import * as i1 from '@eui/ecl/components/ecl-slider';
+import { EUI_ECL_SLIDER } from '@eui/ecl/components/ecl-slider';
 import { ECLBaseDirective, EclRtlService } from '@eui/ecl/core';
-import { TranslatePipe } from '@ngx-translate/core';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 import { EmblaCarouselDirective } from 'embla-carousel-angular';
 import { Subject, takeUntil } from 'rxjs';
 import { outputToObservable } from '@angular/core/rxjs-interop';
+import { EclIconComponent } from '@eui/ecl/components/ecl-icon';
 
 /**
  * Structural directive that marks an `<ol>` element as the ECL quiz option list.
@@ -59,19 +61,46 @@ class EclQuizCardComponent extends ECLBaseDirective {
         ...(ngDevMode ? [{ debugName: "answerTitle" }] : /* istanbul ignore next */ []));
         /**
          * Category label displayed in the card header (poll variant).
+         *
+         * @deprecated Since the port of ECL PR #4681. Upstream ECL removed the
+         * category label (it is no longer part of the markup or styled by
+         * `@eui/styles`); the back of the card now relies on the answer title and
+         * the success/error result icons. This input is kept only to preserve the
+         * public API and no longer renders anything. To be removed in v22.x.
          */
         this.category = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "category" }] : /* istanbul ignore next */ []));
+        /**
+         * Image source for the card. When set together with a supported
+         * {@link imageDisplay} mode, a picture is rendered on the card.
+         */
+        this.imageSrc = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "imageSrc" }] : /* istanbul ignore next */ []));
+        /**
+         * Alternative text for the card image.
+         */
+        this.imageAlt = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "imageAlt" }] : /* istanbul ignore next */ []));
+        /**
+         * Controls where the image/illustration is displayed:
+         * - 'none': no image (default)
+         * - 'back': image only on the back; for poll variant an animated
+         *   question-mark illustration is shown on the front
+         * - 'always': image on both front and back
+         */
+        this.imageDisplay = input('none', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "imageDisplay" }] : /* istanbul ignore next */ []));
         /**
          * Icon name for the card header.
-         * Defaults to 'sparkle' for reveal, 'question' for poll.
+         * Defaults to 'sparkle' for reveal, 'question-mark' for poll.
          */
         this.icon = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
         /**
-         * Icon size for the card header.
+         * Icon size for the card header. When empty, a variant-based default is
+         * used ('xl' for poll, 'l' for reveal).
          */
-        this.iconSize = input('xl', /* @ts-ignore */
+        this.iconSize = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
         /**
          * The variant of the quiz, set by the parent EclQuizComponent.
@@ -89,12 +118,6 @@ class EclQuizCardComponent extends ECLBaseDirective {
          */
         this.isFirstCard = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isFirstCard" }] : /* istanbul ignore next */ []));
-        /**
-         * Whether all cards in the quiz have been flipped.
-         * Set by the parent EclQuizComponent to restore tabindex on category spans.
-         */
-        this.allCardsFlipped = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "allCardsFlipped" }] : /* istanbul ignore next */ []));
         /** Whether the card is currently flipped (showing back). */
         this.isFlipped = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isFlipped" }] : /* istanbul ignore next */ []));
@@ -106,9 +129,23 @@ class EclQuizCardComponent extends ECLBaseDirective {
         ...(ngDevMode ? [{ debugName: "questionId" }] : /* istanbul ignore next */ []));
         this.answerId = computed(() => `${this.id()}-answer`, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "answerId" }] : /* istanbul ignore next */ []));
-        /** Whether the category span currently has focus (for tabindex management). */
-        this.categoryHasFocus = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "categoryHasFocus" }] : /* istanbul ignore next */ []));
+        /** Whether a picture is available to render. */
+        this.hasPicture = computed(() => !!this.imageSrc(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasPicture" }] : /* istanbul ignore next */ []));
+        /** Whether the picture should be rendered on the front face. */
+        this.showFrontPicture = computed(() => this.hasPicture() && this.imageDisplay() === 'always', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showFrontPicture" }] : /* istanbul ignore next */ []));
+        /** Whether the picture should be rendered on the back face. */
+        this.showBackPicture = computed(() => this.hasPicture() && (this.imageDisplay() === 'always' || this.imageDisplay() === 'back'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showBackPicture" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the animated question-mark illustration should be shown on the
+         * front of a poll card (poll variant with 'back' image display).
+         */
+        this.showIllustration = computed(() => this.variant() === 'poll' && this.imageDisplay() === 'back', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showIllustration" }] : /* istanbul ignore next */ []));
+        /** Indices used to render the illustration's repeated question-mark shapes. */
+        this.illustrationMarks = Array.from({ length: 18 }, (_unused, i) => i + 1);
         /** Index of the selected option (poll variant). */
         this.selectedOptionIndex = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectedOptionIndex" }] : /* istanbul ignore next */ []));
@@ -126,10 +163,8 @@ class EclQuizCardComponent extends ECLBaseDirective {
         ...(ngDevMode ? [{ debugName: "answerElementRef" }] : /* istanbul ignore next */ []));
         this.contentElementRef = viewChild('contentElement', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "contentElementRef" }] : /* istanbul ignore next */ []));
-        this.categorySuccessRef = viewChild('categorySuccess', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "categorySuccessRef" }] : /* istanbul ignore next */ []));
-        this.categoryErrorRef = viewChild('categoryError', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "categoryErrorRef" }] : /* istanbul ignore next */ []));
+        this.answerTitleRef = viewChild('answerTitleEl', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "answerTitleRef" }] : /* istanbul ignore next */ []));
         this.cssClasses = computed(() => [
             super.getCssClasses('ecl-quiz-card'),
             this.isFlipped() ? 'ecl-quiz-card__flipped' : '',
@@ -182,11 +217,11 @@ class EclQuizCardComponent extends ECLBaseDirective {
         if (this.icon()) {
             return this.icon();
         }
-        return this.variant() === 'poll' ? 'question' : 'sparkle';
+        return this.variant() === 'poll' ? 'question-mark' : 'sparkle';
     }
     /** Get the resolved icon size. */
     getIconSize() {
-        return this.iconSize() || (this.variant() === 'poll' ? '2xl' : 'xl');
+        return this.iconSize() || (this.variant() === 'poll' ? 'xl' : 'l');
     }
     /**
      * Handle click on the card itself (reveal variant).
@@ -216,7 +251,7 @@ class EclQuizCardComponent extends ECLBaseDirective {
         this.selectedOptionIndex.set(optionIndex);
         this.isCorrect.set(optionsList[optionIndex]?.match ?? false);
         this.flipCard();
-        this.focusCategoryAfterFlip();
+        this.focusAnswerTitleAfterFlip();
     }
     /**
      * Handle keyboard on option (poll variant).
@@ -227,12 +262,6 @@ class EclQuizCardComponent extends ECLBaseDirective {
             this.onOptionClick(optionIndex);
         }
     }
-    /**
-     * Handle blur on the category span. Sets tabindex to -1 so it leaves the tab order.
-     */
-    onCategoryBlur() {
-        this.categoryHasFocus.set(false);
-    }
     /**
      * Flip the card between front and back.
      */
@@ -246,20 +275,19 @@ class EclQuizCardComponent extends ECLBaseDirective {
         this.cardFlip.emit(event);
     }
     /**
-     * Focus the correct/incorrect category span after the card flips in poll variant.
+     * Focus the answer title after the card flips in poll variant.
      * Uses requestAnimationFrame to ensure the DOM has updated (inert removed from back face).
      */
-    focusCategoryAfterFlip() {
-        this.categoryHasFocus.set(true);
+    focusAnswerTitleAfterFlip() {
         requestAnimationFrame(() => {
-            const ref = this.isCorrect() ? this.categorySuccessRef() : this.categoryErrorRef();
+            const ref = this.answerTitleRef();
             if (ref?.nativeElement) {
                 ref.nativeElement.focus();
             }
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclQuizCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EclQuizCardComponent, isStandalone: true, selector: "li[eclQuizCard]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, question: { classPropertyName: "question", publicName: "question", isSignal: true, isRequired: false, transformFunction: null }, answer: { classPropertyName: "answer", publicName: "answer", isSignal: true, isRequired: false, transformFunction: null }, answerTitle: { classPropertyName: "answerTitle", publicName: "answerTitle", isSignal: true, isRequired: false, transformFunction: null }, category: { classPropertyName: "category", publicName: "category", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardFlip: "cardFlip" }, host: { listeners: { "click": "onClick()", "keydown": "onKeydown($event)" }, properties: { "attr.id": "id()", "attr.aria-labelledby": "questionId()", "class": "cssClasses()", "attr.tabindex": "tabIndex()", "style.transform": "styleTransform" } }, viewQueries: [{ propertyName: "frontElementRef", first: true, predicate: ["frontElement"], descendants: true, isSignal: true }, { propertyName: "backElementRef", first: true, predicate: ["backElement"], descendants: true, isSignal: true }, { propertyName: "questionElementRef", first: true, predicate: ["questionElement"], descendants: true, isSignal: true }, { propertyName: "answerElementRef", first: true, predicate: ["answerElement"], descendants: true, isSignal: true }, { propertyName: "contentElementRef", first: true, predicate: ["contentElement"], descendants: true, isSignal: true }, { propertyName: "categorySuccessRef", first: true, predicate: ["categorySuccess"], descendants: true, isSignal: true }, { propertyName: "categoryErrorRef", first: true, predicate: ["categoryError"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<article class=\"ecl-quiz-card__content\" #contentElement>\n    <!-- Front face -->\n    <div class=\"ecl-quiz-card__front\" #frontElement [hidden]=\"isFlipped()\" [inert]=\"isFlipped()\">\n        <div class=\"ecl-quiz-card__header\">\n            <div class=\"ecl-quiz-card__icon\">\n                <ecl-icon [icon]=\"getIconName()\" [size]=\"getIconSize()\" iconSet=\"phosphor\">\n                </ecl-icon>\n            </div>\n            @if (category()) {\n            <span class=\"ecl-quiz-card__category\">{{ category() }}</span>\n            }\n        </div>\n\n        @if (variant() === 'reveal') {\n        <div class=\"ecl-quiz-card__question\" [id]=\"questionId()\" #questionElement>{{ question() }}</div>\n        <!-- Reveal variant: flip label -->\n        <div class=\"ecl-quiz-card__flip\">\n            {{ 'ecl.quiz.REVEAL-ANSWER' | translate }}\n            <ecl-icon iconSet=\"phosphor\" icon=\"arrow-clockwise\" size=\"m\"></ecl-icon>\n        </div>\n        } @else {\n        <!-- Poll variant: options -->\n        <fieldset [attr.aria-describedby]=\"isFirstCard() ? id() + '-skip-instructions' : null\">\n            <legend class=\"ecl-quiz-card__question\" [id]=\"questionId()\" #questionElement>{{ question() }}</legend>\n            <ol class=\"ecl-quiz-card__options\" type=\"A\">\n                @for (option of options(); let i = $index; track i) {\n                <li class=\"ecl-quiz-card__option\" [attr.data-match]=\"option.match\" (mouseup)=\"onOptionClick(i)\">\n                    <label class=\"ecl-quiz-card__label\">\n                        <input type=\"radio\" [name]=\"id() + '-options'\" [attr.data-match]=\"option.match\"\n                            [attr.tabindex]=\"isFlipped() ? -1 : null\" (keydown)=\"onOptionKeydown($event, i)\">\n                        {{ option.text }}</label>\n                    @if (i === 0 && isFirstCard()) {\n                    <span class=\"ecl-quiz__skip\" [id]=\"id() + '-skip-instructions'\">{{ 'ecl.quiz.SKIP-INSTRUCTIONS' |\n                        translate }}</span>\n                    }\n                </li>\n                }\n            </ol>\n        </fieldset>\n        }\n    </div>\n\n    <!-- Back face -->\n    <div class=\"ecl-quiz-card__back\" #backElement [hidden]=\"!isFlipped()\" [inert]=\"!isFlipped()\" style\n        [class.ecl-quiz-card--correct]=\"variant() === 'poll' && isCorrect() === true\">\n        <div class=\"ecl-quiz-card__header\">\n            @if (variant() === 'reveal') {\n            <div class=\"ecl-quiz-card__icon\">\n                <ecl-icon [icon]=\"getIconName()\" [size]=\"getIconSize()\" iconSet=\"phosphor\">\n                </ecl-icon>\n            </div>\n            } @else {\n            <!-- Poll variant: success/error icons and category labels -->\n            <div class=\"ecl-quiz-card__icon\">\n                <ecl-icon icon=\"check-circle\" iconSet=\"phosphor\" size=\"2xl\" class=\"ecl-quiz-card__icon--success\">\n                </ecl-icon>\n                <ecl-icon icon=\"x-circle\" size=\"2xl\" iconSet=\"phosphor\" class=\"ecl-quiz-card__icon--error\">\n                </ecl-icon>\n            </div>\n            <span #categorySuccess class=\"ecl-quiz-card__category ecl-quiz-card__category--success\"\n                [attr.tabindex]=\"(allCardsFlipped() || categoryHasFocus()) && isCorrect() === true ? 0 : -1\"\n                (blur)=\"onCategoryBlur()\">{{\n                'ecl.quiz.CORRECT' | translate }}</span>\n            <span #categoryError class=\"ecl-quiz-card__category ecl-quiz-card__category--error\"\n                [attr.tabindex]=\"(allCardsFlipped() || categoryHasFocus()) && isCorrect() === false ? 0 : -1\"\n                (blur)=\"onCategoryBlur()\">{{\n                'ecl.quiz.INCORRECT' | translate }}</span>\n            <span class=\"ecl-quiz-card__sr-status\" role=\"status\" aria-atomic=\"true\">{{ isFlipped() ? (isCorrect() ===\n                true ? ('ecl.quiz.CORRECT' | translate) : ('ecl.quiz.INCORRECT' | translate)) : '' }}</span>\n            }\n        </div>\n\n        <div class=\"ecl-quiz-card__answer\" [id]=\"answerId()\" #answerElement>\n            @if (answerTitle()) {\n            <div class=\"ecl-quiz-card__answer-title\">{{ answerTitle() }}</div>\n            }\n            {{ answer() }}\n        </div>\n\n        @if (variant() === 'reveal') {\n        <!-- Reveal variant: go back label -->\n        <div class=\"ecl-quiz-card__flip\">\n            {{ 'ecl.quiz.FLIP-BACK' | translate }}\n            <ecl-icon icon=\"arrow-clockwise\" size=\"m\" iconSet=\"phosphor\"></ecl-icon>\n        </div>\n        } @else {\n        <!-- Poll variant: options list on back (showing selected state) -->\n        <ol class=\"ecl-quiz-card__options\" type=\"A\">\n            @for (option of options(); let i = $index; track i) {\n            <li class=\"ecl-quiz-card__option\" [class.ecl-quiz-card__option--selected]=\"selectedOptionIndex() === i\"\n                [attr.data-match]=\"option.match\">\n                @if (selectedOptionIndex() === i) {\n                    @if (!option.match) {\n                        <span class=\"ecl-quiz-card__option-assistive-label\">{{ 'ecl.quiz.YOUR-INCORRECT-ANSWER' | translate }}</span>\n                    }\n                    @if (option.match) {\n                        <span class=\"ecl-quiz-card__option-assistive-label\">{{ 'ecl.quiz.YOUR-CORRECT-ANSWER' | translate }}</span>\n                    }\n                } @else if (option.match) {\n                    <span class=\"ecl-quiz-card__option-assistive-label\">{{ 'ecl.quiz.CORRECT-ANSWER' | translate }}</span>\n                }\n                {{ option.text }}\n                @if (selectedOptionIndex() === i && !option.match) {\n                    <span class=\"ecl-quiz-card__option-icon\">\n                        <ecl-icon icon=\"x-circle\" size=\"s\" iconSet=\"phosphor\"\n                            class=\"ecl-quiz-card__option-icon--error\"></ecl-icon>\n                    </span>\n                }\n                @if (option.match) {\n                    <span class=\"ecl-quiz-card__option-icon\">\n                        <ecl-icon icon=\"check-circle\" size=\"s\" iconSet=\"phosphor\"\n                            class=\"ecl-quiz-card__option-icon--success\"></ecl-icon>\n                    </span>\n                }\n            </li>\n            }\n        </ol>\n        }\n    </div>\n</article>", dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EclQuizCardComponent, isStandalone: true, selector: "li[eclQuizCard]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, question: { classPropertyName: "question", publicName: "question", isSignal: true, isRequired: false, transformFunction: null }, answer: { classPropertyName: "answer", publicName: "answer", isSignal: true, isRequired: false, transformFunction: null }, answerTitle: { classPropertyName: "answerTitle", publicName: "answerTitle", isSignal: true, isRequired: false, transformFunction: null }, category: { classPropertyName: "category", publicName: "category", isSignal: true, isRequired: false, transformFunction: null }, imageSrc: { classPropertyName: "imageSrc", publicName: "imageSrc", isSignal: true, isRequired: false, transformFunction: null }, imageAlt: { classPropertyName: "imageAlt", publicName: "imageAlt", isSignal: true, isRequired: false, transformFunction: null }, imageDisplay: { classPropertyName: "imageDisplay", publicName: "imageDisplay", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardFlip: "cardFlip" }, host: { listeners: { "click": "onClick()", "keydown": "onKeydown($event)" }, properties: { "attr.id": "id()", "attr.aria-labelledby": "questionId()", "class": "cssClasses()", "attr.tabindex": "tabIndex()", "style.transform": "styleTransform" } }, viewQueries: [{ propertyName: "frontElementRef", first: true, predicate: ["frontElement"], descendants: true, isSignal: true }, { propertyName: "backElementRef", first: true, predicate: ["backElement"], descendants: true, isSignal: true }, { propertyName: "questionElementRef", first: true, predicate: ["questionElement"], descendants: true, isSignal: true }, { propertyName: "answerElementRef", first: true, predicate: ["answerElement"], descendants: true, isSignal: true }, { propertyName: "contentElementRef", first: true, predicate: ["contentElement"], descendants: true, isSignal: true }, { propertyName: "answerTitleRef", first: true, predicate: ["answerTitleEl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<article class=\"ecl-quiz-card__content\" #contentElement>\n    <!-- Front face -->\n    <div class=\"ecl-quiz-card__front\" #frontElement [hidden]=\"isFlipped()\" [inert]=\"isFlipped()\">\n        @if (showFrontPicture()) {\n        <picture class=\"ecl-picture ecl-quiz-card__picture\">\n            <img class=\"ecl-quiz-card__image\" [src]=\"imageSrc()\" [alt]=\"imageAlt()\">\n        </picture>\n        } @else if (showIllustration()) {\n        <div class=\"ecl-quiz-card__illustration-container\">\n            <svg viewBox=\"0 0 500 140\" preserveAspectRatio=\"none\" aria-hidden=\"true\"\n                class=\"ecl-quiz-card__illustration\">\n                <defs>\n                    <g id=\"question-mark\">\n                        <path\n                            d=\"M0 0c0 4.343-3.728 7.939-8.531 8.464V9.75a1.22 1.22 0 0 1-2.438 0V7.313a1.22 1.22 0 0 1 1.219-1.22c4.033 0 7.312-2.732 7.312-6.093s-3.279-6.094-7.312-6.094-7.312 2.733-7.312 6.094a1.22 1.22 0 0 1-2.438 0c0-4.704 4.374-8.531 9.75-8.531S0-4.704 0 0Zm-9.75 14.625a2.438 2.438 0 1 0 0 4.875 2.438 2.438 0 0 0 0-4.875Z\" />\n                    </g>\n                </defs>\n                @for (mark of illustrationMarks; track mark) {\n                <use href=\"#question-mark\" [attr.class]=\"'qm qm-' + mark\" />\n                }\n            </svg>\n        </div>\n        }\n        <div class=\"ecl-quiz-card__padded\">\n            <div class=\"ecl-quiz-card__header\">\n                @if (!showIllustration()) {\n                <div class=\"ecl-quiz-card__icon\">\n                    <ecl-icon [icon]=\"getIconName()\" [size]=\"getIconSize()\" iconSet=\"phosphor\">\n                    </ecl-icon>\n                </div>\n                }\n            </div>\n\n            @if (variant() === 'reveal') {\n            <div class=\"ecl-quiz-card__question\" [id]=\"questionId()\" #questionElement>{{ question() }}</div>\n            <!-- Reveal variant: flip label -->\n            <div class=\"ecl-quiz-card__flip\">\n                {{ 'ecl.quiz.REVEAL-ANSWER' | translate }}\n                <ecl-icon iconSet=\"phosphor\" icon=\"arrow-clockwise\" size=\"m\"></ecl-icon>\n            </div>\n            } @else {\n            <!-- Poll variant: options -->\n            <fieldset [attr.aria-describedby]=\"isFirstCard() ? id() + '-skip-instructions' : null\">\n                <legend class=\"ecl-quiz-card__question\" [id]=\"questionId()\" #questionElement>{{ question() }}</legend>\n                <ol class=\"ecl-quiz-card__options\" type=\"A\">\n                    @for (option of options(); let i = $index; track i) {\n                    <li class=\"ecl-quiz-card__option\" [attr.data-match]=\"option.match\" (mouseup)=\"onOptionClick(i)\">\n                        <label class=\"ecl-quiz-card__label\">\n                            <input type=\"radio\" [name]=\"id() + '-options'\" [attr.data-match]=\"option.match\"\n                                [attr.tabindex]=\"isFlipped() ? -1 : null\" (keydown)=\"onOptionKeydown($event, i)\">\n                            {{ option.text }}</label>\n                        @if (i === 0 && isFirstCard()) {\n                        <span class=\"ecl-quiz__skip\" [id]=\"id() + '-skip-instructions'\">{{ 'ecl.quiz.SKIP-INSTRUCTIONS' |\n                            translate }}</span>\n                        }\n                    </li>\n                    }\n                </ol>\n            </fieldset>\n            }\n        </div>\n    </div>\n\n    <!-- Back face -->\n    <div class=\"ecl-quiz-card__back\" #backElement [hidden]=\"!isFlipped()\" [inert]=\"!isFlipped()\" style\n        [class.ecl-quiz-card--correct]=\"variant() === 'poll' && isCorrect() === true\">\n        @if (showBackPicture()) {\n        <picture class=\"ecl-picture ecl-quiz-card__picture\">\n            <img class=\"ecl-quiz-card__image\" [src]=\"imageSrc()\" [alt]=\"imageAlt()\">\n        </picture>\n        }\n        <div class=\"ecl-quiz-card__padded\">\n            <div class=\"ecl-quiz-card__header\">\n                @if (variant() === 'reveal') {\n                <div class=\"ecl-quiz-card__icon\">\n                    <ecl-icon [icon]=\"getIconName()\" [size]=\"getIconSize()\" iconSet=\"phosphor\">\n                    </ecl-icon>\n                </div>\n                } @else {\n                <!-- Poll variant: success/error icons -->\n                <div class=\"ecl-quiz-card__icon\">\n                    <ecl-icon icon=\"check-circle\" iconSet=\"phosphor\" size=\"xl\" class=\"ecl-quiz-card__icon--success\">\n                    </ecl-icon>\n                    <ecl-icon icon=\"x-circle\" size=\"xl\" iconSet=\"phosphor\" class=\"ecl-quiz-card__icon--error\">\n                    </ecl-icon>\n                </div>\n                }\n            </div>\n\n            <div class=\"ecl-quiz-card__answer\" [id]=\"answerId()\" #answerElement>\n                <div class=\"ecl-quiz-card__answer-content\">\n                    @if (answerTitle()) {\n                    <div class=\"ecl-quiz-card__answer-title\" tabindex=\"0\" #answerTitleEl>{{ answerTitle() }}</div>\n                    }\n                    {{ answer() }}\n                </div>\n            </div>\n\n            @if (variant() === 'reveal') {\n            <!-- Reveal variant: go back label -->\n            <div class=\"ecl-quiz-card__flip\">\n                {{ 'ecl.quiz.FLIP-BACK' | translate }}\n                <ecl-icon icon=\"arrow-clockwise\" size=\"m\" iconSet=\"phosphor\"></ecl-icon>\n            </div>\n            } @else {\n            <!-- Poll variant: options list on back (showing selected state) -->\n            <ol class=\"ecl-quiz-card__options\" type=\"A\">\n                @for (option of options(); let i = $index; track i) {\n                <li class=\"ecl-quiz-card__option\" [class.ecl-quiz-card__option--selected]=\"selectedOptionIndex() === i\"\n                    [attr.data-match]=\"option.match\">\n                    @if (selectedOptionIndex() === i) {\n                        @if (!option.match) {\n                            <span class=\"ecl-quiz-card__option-assistive-label\">{{ 'ecl.quiz.YOUR-INCORRECT-ANSWER' | translate }}</span>\n                        }\n                        @if (option.match) {\n                            <span class=\"ecl-quiz-card__option-assistive-label\">{{ 'ecl.quiz.YOUR-CORRECT-ANSWER' | translate }}</span>\n                        }\n                    } @else if (option.match) {\n                        <span class=\"ecl-quiz-card__option-assistive-label\">{{ 'ecl.quiz.CORRECT-ANSWER' | translate }}</span>\n                    }\n                    {{ option.text }}\n                    @if (selectedOptionIndex() === i && !option.match) {\n                        <span class=\"ecl-quiz-card__option-icon\">\n                            <ecl-icon icon=\"x-circle\" size=\"s\" iconSet=\"phosphor\"\n                                class=\"ecl-quiz-card__option-icon--error\"></ecl-icon>\n                        </span>\n                    }\n                    @if (option.match) {\n                        <span class=\"ecl-quiz-card__option-icon\">\n                            <ecl-icon icon=\"check-circle\" size=\"s\" iconSet=\"phosphor\"\n                                class=\"ecl-quiz-card__option-icon--success\"></ecl-icon>\n                        </span>\n                    }\n                </li>\n                }\n            </ol>\n            }\n        </div>\n    </div>\n</article>\n", dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclQuizCardComponent, decorators: [{
             type: Component,
@@ -271,8 +299,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                         '[style.transform]': 'styleTransform',
                         '(click)': 'onClick()',
                         '(keydown)': 'onKeydown($event)',
-                    }, imports: [EclIconComponent, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"ecl-quiz-card__content\" #contentElement>\n    <!-- Front face -->\n    <div class=\"ecl-quiz-card__front\" #frontElement [hidden]=\"isFlipped()\" [inert]=\"isFlipped()\">\n        <div class=\"ecl-quiz-card__header\">\n            <div class=\"ecl-quiz-card__icon\">\n                <ecl-icon [icon]=\"getIconName()\" [size]=\"getIconSize()\" iconSet=\"phosphor\">\n                </ecl-icon>\n            </div>\n            @if (category()) {\n            <span class=\"ecl-quiz-card__category\">{{ category() }}</span>\n            }\n        </div>\n\n        @if (variant() === 'reveal') {\n        <div class=\"ecl-quiz-card__question\" [id]=\"questionId()\" #questionElement>{{ question() }}</div>\n        <!-- Reveal variant: flip label -->\n        <div class=\"ecl-quiz-card__flip\">\n            {{ 'ecl.quiz.REVEAL-ANSWER' | translate }}\n            <ecl-icon iconSet=\"phosphor\" icon=\"arrow-clockwise\" size=\"m\"></ecl-icon>\n        </div>\n        } @else {\n        <!-- Poll variant: options -->\n        <fieldset [attr.aria-describedby]=\"isFirstCard() ? id() + '-skip-instructions' : null\">\n            <legend class=\"ecl-quiz-card__question\" [id]=\"questionId()\" #questionElement>{{ question() }}</legend>\n            <ol class=\"ecl-quiz-card__options\" type=\"A\">\n                @for (option of options(); let i = $index; track i) {\n                <li class=\"ecl-quiz-card__option\" [attr.data-match]=\"option.match\" (mouseup)=\"onOptionClick(i)\">\n                    <label class=\"ecl-quiz-card__label\">\n                        <input type=\"radio\" [name]=\"id() + '-options'\" [attr.data-match]=\"option.match\"\n                            [attr.tabindex]=\"isFlipped() ? -1 : null\" (keydown)=\"onOptionKeydown($event, i)\">\n                        {{ option.text }}</label>\n                    @if (i === 0 && isFirstCard()) {\n                    <span class=\"ecl-quiz__skip\" [id]=\"id() + '-skip-instructions'\">{{ 'ecl.quiz.SKIP-INSTRUCTIONS' |\n                        translate }}</span>\n                    }\n                </li>\n                }\n            </ol>\n        </fieldset>\n        }\n    </div>\n\n    <!-- Back face -->\n    <div class=\"ecl-quiz-card__back\" #backElement [hidden]=\"!isFlipped()\" [inert]=\"!isFlipped()\" style\n        [class.ecl-quiz-card--correct]=\"variant() === 'poll' && isCorrect() === true\">\n        <div class=\"ecl-quiz-card__header\">\n            @if (variant() === 'reveal') {\n            <div class=\"ecl-quiz-card__icon\">\n                <ecl-icon [icon]=\"getIconName()\" [size]=\"getIconSize()\" iconSet=\"phosphor\">\n                </ecl-icon>\n            </div>\n            } @else {\n            <!-- Poll variant: success/error icons and category labels -->\n            <div class=\"ecl-quiz-card__icon\">\n                <ecl-icon icon=\"check-circle\" iconSet=\"phosphor\" size=\"2xl\" class=\"ecl-quiz-card__icon--success\">\n                </ecl-icon>\n                <ecl-icon icon=\"x-circle\" size=\"2xl\" iconSet=\"phosphor\" class=\"ecl-quiz-card__icon--error\">\n                </ecl-icon>\n            </div>\n            <span #categorySuccess class=\"ecl-quiz-card__category ecl-quiz-card__category--success\"\n                [attr.tabindex]=\"(allCardsFlipped() || categoryHasFocus()) && isCorrect() === true ? 0 : -1\"\n                (blur)=\"onCategoryBlur()\">{{\n                'ecl.quiz.CORRECT' | translate }}</span>\n            <span #categoryError class=\"ecl-quiz-card__category ecl-quiz-card__category--error\"\n                [attr.tabindex]=\"(allCardsFlipped() || categoryHasFocus()) && isCorrect() === false ? 0 : -1\"\n                (blur)=\"onCategoryBlur()\">{{\n                'ecl.quiz.INCORRECT' | translate }}</span>\n            <span class=\"ecl-quiz-card__sr-status\" role=\"status\" aria-atomic=\"true\">{{ isFlipped() ? (isCorrect() ===\n                true ? ('ecl.quiz.CORRECT' | translate) : ('ecl.quiz.INCORRECT' | translate)) : '' }}</span>\n            }\n        </div>\n\n        <div class=\"ecl-quiz-card__answer\" [id]=\"answerId()\" #answerElement>\n            @if (answerTitle()) {\n            <div class=\"ecl-quiz-card__answer-title\">{{ answerTitle() }}</div>\n            }\n            {{ answer() }}\n        </div>\n\n        @if (variant() === 'reveal') {\n        <!-- Reveal variant: go back label -->\n        <div class=\"ecl-quiz-card__flip\">\n            {{ 'ecl.quiz.FLIP-BACK' | translate }}\n            <ecl-icon icon=\"arrow-clockwise\" size=\"m\" iconSet=\"phosphor\"></ecl-icon>\n        </div>\n        } @else {\n        <!-- Poll variant: options list on back (showing selected state) -->\n        <ol class=\"ecl-quiz-card__options\" type=\"A\">\n            @for (option of options(); let i = $index; track i) {\n            <li class=\"ecl-quiz-card__option\" [class.ecl-quiz-card__option--selected]=\"selectedOptionIndex() === i\"\n                [attr.data-match]=\"option.match\">\n                @if (selectedOptionIndex() === i) {\n                    @if (!option.match) {\n                        <span class=\"ecl-quiz-card__option-assistive-label\">{{ 'ecl.quiz.YOUR-INCORRECT-ANSWER' | translate }}</span>\n                    }\n                    @if (option.match) {\n                        <span class=\"ecl-quiz-card__option-assistive-label\">{{ 'ecl.quiz.YOUR-CORRECT-ANSWER' | translate }}</span>\n                    }\n                } @else if (option.match) {\n                    <span class=\"ecl-quiz-card__option-assistive-label\">{{ 'ecl.quiz.CORRECT-ANSWER' | translate }}</span>\n                }\n                {{ option.text }}\n                @if (selectedOptionIndex() === i && !option.match) {\n                    <span class=\"ecl-quiz-card__option-icon\">\n                        <ecl-icon icon=\"x-circle\" size=\"s\" iconSet=\"phosphor\"\n                            class=\"ecl-quiz-card__option-icon--error\"></ecl-icon>\n                    </span>\n                }\n                @if (option.match) {\n                    <span class=\"ecl-quiz-card__option-icon\">\n                        <ecl-icon icon=\"check-circle\" size=\"s\" iconSet=\"phosphor\"\n                            class=\"ecl-quiz-card__option-icon--success\"></ecl-icon>\n                    </span>\n                }\n            </li>\n            }\n        </ol>\n        }\n    </div>\n</article>" }]
-        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], question: [{ type: i0.Input, args: [{ isSignal: true, alias: "question", required: false }] }], answer: [{ type: i0.Input, args: [{ isSignal: true, alias: "answer", required: false }] }], answerTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "answerTitle", required: false }] }], category: [{ type: i0.Input, args: [{ isSignal: true, alias: "category", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], cardFlip: [{ type: i0.Output, args: ["cardFlip"] }], frontElementRef: [{ type: i0.ViewChild, args: ['frontElement', { isSignal: true }] }], backElementRef: [{ type: i0.ViewChild, args: ['backElement', { isSignal: true }] }], questionElementRef: [{ type: i0.ViewChild, args: ['questionElement', { isSignal: true }] }], answerElementRef: [{ type: i0.ViewChild, args: ['answerElement', { isSignal: true }] }], contentElementRef: [{ type: i0.ViewChild, args: ['contentElement', { isSignal: true }] }], categorySuccessRef: [{ type: i0.ViewChild, args: ['categorySuccess', { isSignal: true }] }], categoryErrorRef: [{ type: i0.ViewChild, args: ['categoryError', { isSignal: true }] }] } });
+                    }, imports: [EclIconComponent, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"ecl-quiz-card__content\" #contentElement>\n    <!-- Front face -->\n    <div class=\"ecl-quiz-card__front\" #frontElement [hidden]=\"isFlipped()\" [inert]=\"isFlipped()\">\n        @if (showFrontPicture()) {\n        <picture class=\"ecl-picture ecl-quiz-card__picture\">\n            <img class=\"ecl-quiz-card__image\" [src]=\"imageSrc()\" [alt]=\"imageAlt()\">\n        </picture>\n        } @else if (showIllustration()) {\n        <div class=\"ecl-quiz-card__illustration-container\">\n            <svg viewBox=\"0 0 500 140\" preserveAspectRatio=\"none\" aria-hidden=\"true\"\n                class=\"ecl-quiz-card__illustration\">\n                <defs>\n                    <g id=\"question-mark\">\n                        <path\n                            d=\"M0 0c0 4.343-3.728 7.939-8.531 8.464V9.75a1.22 1.22 0 0 1-2.438 0V7.313a1.22 1.22 0 0 1 1.219-1.22c4.033 0 7.312-2.732 7.312-6.093s-3.279-6.094-7.312-6.094-7.312 2.733-7.312 6.094a1.22 1.22 0 0 1-2.438 0c0-4.704 4.374-8.531 9.75-8.531S0-4.704 0 0Zm-9.75 14.625a2.438 2.438 0 1 0 0 4.875 2.438 2.438 0 0 0 0-4.875Z\" />\n                    </g>\n                </defs>\n                @for (mark of illustrationMarks; track mark) {\n                <use href=\"#question-mark\" [attr.class]=\"'qm qm-' + mark\" />\n                }\n            </svg>\n        </div>\n        }\n        <div class=\"ecl-quiz-card__padded\">\n            <div class=\"ecl-quiz-card__header\">\n                @if (!showIllustration()) {\n                <div class=\"ecl-quiz-card__icon\">\n                    <ecl-icon [icon]=\"getIconName()\" [size]=\"getIconSize()\" iconSet=\"phosphor\">\n                    </ecl-icon>\n                </div>\n                }\n            </div>\n\n            @if (variant() === 'reveal') {\n            <div class=\"ecl-quiz-card__question\" [id]=\"questionId()\" #questionElement>{{ question() }}</div>\n            <!-- Reveal variant: flip label -->\n            <div class=\"ecl-quiz-card__flip\">\n                {{ 'ecl.quiz.REVEAL-ANSWER' | translate }}\n                <ecl-icon iconSet=\"phosphor\" icon=\"arrow-clockwise\" size=\"m\"></ecl-icon>\n            </div>\n            } @else {\n            <!-- Poll variant: options -->\n            <fieldset [attr.aria-describedby]=\"isFirstCard() ? id() + '-skip-instructions' : null\">\n                <legend class=\"ecl-quiz-card__question\" [id]=\"questionId()\" #questionElement>{{ question() }}</legend>\n                <ol class=\"ecl-quiz-card__options\" type=\"A\">\n                    @for (option of options(); let i = $index; track i) {\n                    <li class=\"ecl-quiz-card__option\" [attr.data-match]=\"option.match\" (mouseup)=\"onOptionClick(i)\">\n                        <label class=\"ecl-quiz-card__label\">\n                            <input type=\"radio\" [name]=\"id() + '-options'\" [attr.data-match]=\"option.match\"\n                                [attr.tabindex]=\"isFlipped() ? -1 : null\" (keydown)=\"onOptionKeydown($event, i)\">\n                            {{ option.text }}</label>\n                        @if (i === 0 && isFirstCard()) {\n                        <span class=\"ecl-quiz__skip\" [id]=\"id() + '-skip-instructions'\">{{ 'ecl.quiz.SKIP-INSTRUCTIONS' |\n                            translate }}</span>\n                        }\n                    </li>\n                    }\n                </ol>\n            </fieldset>\n            }\n        </div>\n    </div>\n\n    <!-- Back face -->\n    <div class=\"ecl-quiz-card__back\" #backElement [hidden]=\"!isFlipped()\" [inert]=\"!isFlipped()\" style\n        [class.ecl-quiz-card--correct]=\"variant() === 'poll' && isCorrect() === true\">\n        @if (showBackPicture()) {\n        <picture class=\"ecl-picture ecl-quiz-card__picture\">\n            <img class=\"ecl-quiz-card__image\" [src]=\"imageSrc()\" [alt]=\"imageAlt()\">\n        </picture>\n        }\n        <div class=\"ecl-quiz-card__padded\">\n            <div class=\"ecl-quiz-card__header\">\n                @if (variant() === 'reveal') {\n                <div class=\"ecl-quiz-card__icon\">\n                    <ecl-icon [icon]=\"getIconName()\" [size]=\"getIconSize()\" iconSet=\"phosphor\">\n                    </ecl-icon>\n                </div>\n                } @else {\n                <!-- Poll variant: success/error icons -->\n                <div class=\"ecl-quiz-card__icon\">\n                    <ecl-icon icon=\"check-circle\" iconSet=\"phosphor\" size=\"xl\" class=\"ecl-quiz-card__icon--success\">\n                    </ecl-icon>\n                    <ecl-icon icon=\"x-circle\" size=\"xl\" iconSet=\"phosphor\" class=\"ecl-quiz-card__icon--error\">\n                    </ecl-icon>\n                </div>\n                }\n            </div>\n\n            <div class=\"ecl-quiz-card__answer\" [id]=\"answerId()\" #answerElement>\n                <div class=\"ecl-quiz-card__answer-content\">\n                    @if (answerTitle()) {\n                    <div class=\"ecl-quiz-card__answer-title\" tabindex=\"0\" #answerTitleEl>{{ answerTitle() }}</div>\n                    }\n                    {{ answer() }}\n                </div>\n            </div>\n\n            @if (variant() === 'reveal') {\n            <!-- Reveal variant: go back label -->\n            <div class=\"ecl-quiz-card__flip\">\n                {{ 'ecl.quiz.FLIP-BACK' | translate }}\n                <ecl-icon icon=\"arrow-clockwise\" size=\"m\" iconSet=\"phosphor\"></ecl-icon>\n            </div>\n            } @else {\n            <!-- Poll variant: options list on back (showing selected state) -->\n            <ol class=\"ecl-quiz-card__options\" type=\"A\">\n                @for (option of options(); let i = $index; track i) {\n                <li class=\"ecl-quiz-card__option\" [class.ecl-quiz-card__option--selected]=\"selectedOptionIndex() === i\"\n                    [attr.data-match]=\"option.match\">\n                    @if (selectedOptionIndex() === i) {\n                        @if (!option.match) {\n                            <span class=\"ecl-quiz-card__option-assistive-label\">{{ 'ecl.quiz.YOUR-INCORRECT-ANSWER' | translate }}</span>\n                        }\n                        @if (option.match) {\n                            <span class=\"ecl-quiz-card__option-assistive-label\">{{ 'ecl.quiz.YOUR-CORRECT-ANSWER' | translate }}</span>\n                        }\n                    } @else if (option.match) {\n                        <span class=\"ecl-quiz-card__option-assistive-label\">{{ 'ecl.quiz.CORRECT-ANSWER' | translate }}</span>\n                    }\n                    {{ option.text }}\n                    @if (selectedOptionIndex() === i && !option.match) {\n                        <span class=\"ecl-quiz-card__option-icon\">\n                            <ecl-icon icon=\"x-circle\" size=\"s\" iconSet=\"phosphor\"\n                                class=\"ecl-quiz-card__option-icon--error\"></ecl-icon>\n                        </span>\n                    }\n                    @if (option.match) {\n                        <span class=\"ecl-quiz-card__option-icon\">\n                            <ecl-icon icon=\"check-circle\" size=\"s\" iconSet=\"phosphor\"\n                                class=\"ecl-quiz-card__option-icon--success\"></ecl-icon>\n                        </span>\n                    }\n                </li>\n                }\n            </ol>\n            }\n        </div>\n    </div>\n</article>\n" }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], question: [{ type: i0.Input, args: [{ isSignal: true, alias: "question", required: false }] }], answer: [{ type: i0.Input, args: [{ isSignal: true, alias: "answer", required: false }] }], answerTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "answerTitle", required: false }] }], category: [{ type: i0.Input, args: [{ isSignal: true, alias: "category", required: false }] }], imageSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageSrc", required: false }] }], imageAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageAlt", required: false }] }], imageDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageDisplay", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], cardFlip: [{ type: i0.Output, args: ["cardFlip"] }], frontElementRef: [{ type: i0.ViewChild, args: ['frontElement', { isSignal: true }] }], backElementRef: [{ type: i0.ViewChild, args: ['backElement', { isSignal: true }] }], questionElementRef: [{ type: i0.ViewChild, args: ['questionElement', { isSignal: true }] }], answerElementRef: [{ type: i0.ViewChild, args: ['answerElement', { isSignal: true }] }], contentElementRef: [{ type: i0.ViewChild, args: ['contentElement', { isSignal: true }] }], answerTitleRef: [{ type: i0.ViewChild, args: ['answerTitleEl', { isSignal: true }] }] } });
 
 /**
  * An ECL quiz carousel component that renders a sequence of `li[eclQuizCard]` cards with navigation dots and previous/next buttons.
@@ -323,10 +351,10 @@ class EclQuizComponent extends ECLBaseDirective {
         ...(ngDevMode ? [{ debugName: "showControls" }] : /* istanbul ignore next */ []));
         this.emblaRef = viewChild(EmblaCarouselDirective, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "emblaRef" }] : /* istanbul ignore next */ []));
-        this.dotButtons = viewChildren('dotButton', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "dotButtons" }] : /* istanbul ignore next */ []));
         this.cd = inject(ChangeDetectorRef);
         this.eclRtlService = inject(EclRtlService);
+        this.hostRef = inject(ElementRef);
+        this.translate = inject(TranslateService);
         this.destroy$ = new Subject();
         this.cssClasses = computed(() => [
             super.getCssClasses('ecl-quiz'),
@@ -346,6 +374,20 @@ class EclQuizComponent extends ECLBaseDirective {
         /** Number of visible slides per snap. */
         this.slidesPerSnap = signal(1, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "slidesPerSnap" }] : /* istanbul ignore next */ []));
+        /**
+         * Pre-translated accessible label for each dot, passed to the shared slider pager.
+         * Depends on the current slide grouping, so it is computed here (where that
+         * information lives) and translated imperatively.
+         */
+        this.dotAriaLabels = computed(() => {
+            // Read totalSnaps so the computed re-evaluates when the dot count changes.
+            const total = this.totalSnaps();
+            return Array.from({ length: total }, (_unused, dotIndex) => {
+                const { key, params } = this.getDotAriaLabel(dotIndex);
+                return this.translate.instant(key, params);
+            });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dotAriaLabels" }] : /* istanbul ignore next */ []));
     }
     /** Returns the aria-label for a dot button at the given snap index. */
     getDotAriaLabel(dotIndex) {
@@ -487,10 +529,10 @@ class EclQuizComponent extends ECLBaseDirective {
     }
     /** Move focus to the last dot button when Escape is pressed. */
     escapeSlider() {
-        const dots = this.dotButtons();
-        if (dots && dots.length > 0) {
+        const dots = this.hostRef.nativeElement.querySelectorAll('.ecl-slider-pager__dot');
+        if (dots.length > 0) {
             const lastDot = dots[dots.length - 1];
-            lastDot.nativeElement.focus();
+            lastDot.focus();
         }
     }
     /** Subscribe to cardFlip events on all cards to detect when all are flipped. */
@@ -504,17 +546,14 @@ class EclQuizComponent extends ECLBaseDirective {
             });
         });
     }
-    /** Check if all cards are flipped and propagate the state. */
+    /**
+     * Hook invoked when a poll card flips. The category/sr-status tabindex
+     * management was removed in line with upstream ECL (PR #4681), so there is
+     * no longer per-card state to propagate here. Retained as an extension
+     * point for future "all cards flipped" behaviour.
+     */
     checkAllCardsFlipped() {
-        if (!this.cards || this.variant() !== 'poll') {
-            return;
-        }
-        const allFlipped = this.cards.toArray().every(card => card.isFlipped());
-        if (allFlipped) {
-            this.cards.forEach(card => {
-                card.allCardsFlipped.set(true);
-            });
-        }
+        // Intentionally left blank.
     }
     /**
      * Equalizes the height of all cards based on the tallest content.
@@ -639,7 +678,7 @@ class EclQuizComponent extends ECLBaseDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclQuizComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EclQuizComponent, isStandalone: true, selector: "section[eclQuiz]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, eclTitle: { classPropertyName: "eclTitle", publicName: "eclTitle", isSignal: true, isRequired: false, transformFunction: null }, eclDescription: { classPropertyName: "eclDescription", publicName: "eclDescription", isSignal: true, isRequired: false, transformFunction: null }, isFullWidth: { classPropertyName: "isFullWidth", publicName: "isFullWidth", isSignal: true, isRequired: false, transformFunction: null }, hasBackground: { classPropertyName: "hasBackground", publicName: "hasBackground", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "cssClasses()" } }, queries: [{ propertyName: "cards", predicate: i0.forwardRef(() => EclQuizCardComponent), descendants: true }], viewQueries: [{ propertyName: "emblaRef", first: true, predicate: EmblaCarouselDirective, descendants: true, isSignal: true }, { propertyName: "dotButtons", predicate: ["dotButton"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (eclTitle() || eclDescription()) {\n<div class=\"ecl-quiz__header\">\n    @if (eclTitle()) {\n    <div class=\"ecl-quiz__title\">{{ eclTitle() }}</div>\n    }\n    @if (eclDescription()) {\n    <div class=\"ecl-quiz__description\">{{ eclDescription() }}</div>\n    }\n</div>\n}\n\n<div class=\"ecl-quiz__viewport\" data-ecl-quiz-slider\n    role=\"region\"\n    aria-label=\"Quiz slider\"\n    aria-roledescription=\"carousel\"\n    emblaCarousel\n    [options]=\"emblaOptions\"\n    [subscribeToEvents]=\"subscribeToEvents\"\n    (emblaChange)=\"onEmblaChange($event)\">\n        \n    <ng-content></ng-content>\n</div>\n\n@if (showControls()) {\n<div class=\"ecl-quiz__pager\">\n    <button\n        class=\"ecl-quiz__prev\"\n        [disabled]=\"prevDisabled()\"\n        (click)=\"onPrevClick()\"\n        [attr.aria-label]=\"'ecl.quiz.SHOW-PREV-SLIDE' | translate\">\n        <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-270\"></ecl-icon>\n        <span class=\"ecl-quiz__prev-label\">\n            {{ 'ecl.quiz.PREVIOUS' | translate }}\n        </span>\n    </button>\n\n    <div class=\"ecl-quiz__dots\">\n        @for (dotIndex of getDotIndices(); track dotIndex) {\n        <button\n            #dotButton\n            class=\"ecl-quiz__dot\"\n            [class.ecl-quiz__dot--active]=\"dotIndex === activeIndex()\"\n            [class.is-prev]=\"dotIndex === activeIndex() - 1\"\n            [attr.aria-label]=\"getDotAriaLabel(dotIndex).key | translate: getDotAriaLabel(dotIndex).params\"\n            (click)=\"goTo(dotIndex)\">\n        </button>\n        }\n    </div>\n\n    <button\n        class=\"ecl-quiz__next\"\n        [disabled]=\"nextDisabled()\"\n        (click)=\"onNextClick()\"\n        [attr.aria-label]=\"'ecl.quiz.SHOW-NEXT-SLIDE' | translate\">\n        <span class=\"ecl-quiz__next-label\">\n            {{ 'ecl.quiz.NEXT' | translate }}\n        </span>\n        <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-90\"></ecl-icon>\n    </button>\n</div>\n\n<div class=\"ecl-quiz__counter\">{{ counterText() }}</div>\n}\n\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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EclQuizComponent, isStandalone: true, selector: "section[eclQuiz]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, eclTitle: { classPropertyName: "eclTitle", publicName: "eclTitle", isSignal: true, isRequired: false, transformFunction: null }, eclDescription: { classPropertyName: "eclDescription", publicName: "eclDescription", isSignal: true, isRequired: false, transformFunction: null }, isFullWidth: { classPropertyName: "isFullWidth", publicName: "isFullWidth", isSignal: true, isRequired: false, transformFunction: null }, hasBackground: { classPropertyName: "hasBackground", publicName: "hasBackground", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "cssClasses()" } }, queries: [{ propertyName: "cards", predicate: i0.forwardRef(() => EclQuizCardComponent), descendants: true }], viewQueries: [{ propertyName: "emblaRef", first: true, predicate: EmblaCarouselDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (eclTitle() || eclDescription()) {\n<div class=\"ecl-quiz__header\">\n    @if (eclTitle()) {\n    <div class=\"ecl-quiz__title\">{{ eclTitle() }}</div>\n    }\n    @if (eclDescription()) {\n    <div class=\"ecl-quiz__description\">{{ eclDescription() }}</div>\n    }\n</div>\n}\n\n<div class=\"ecl-quiz__viewport\" data-ecl-quiz-slider\n    role=\"region\"\n    aria-label=\"Quiz slider\"\n    aria-roledescription=\"carousel\"\n    emblaCarousel\n    [options]=\"emblaOptions\"\n    [subscribeToEvents]=\"subscribeToEvents\"\n    (emblaChange)=\"onEmblaChange($event)\">\n        \n    <ng-content></ng-content>\n</div>\n\n@if (showControls()) {\n<ecl-slider-pager\n    class=\"ecl-quiz__pager\"\n    variant=\"dots\"\n    prevExtraClasses=\"ecl-quiz__prev\"\n    nextExtraClasses=\"ecl-quiz__next\"\n    dotsExtraClasses=\"ecl-quiz__dots\"\n    dotExtraClasses=\"ecl-quiz__dot\"\n    [activeIndex]=\"activeIndex()\"\n    [isPrevDisabled]=\"prevDisabled()\"\n    [isNextDisabled]=\"nextDisabled()\"\n    [dotIndices]=\"getDotIndices()\"\n    [dotAriaLabels]=\"dotAriaLabels()\"\n    (prev)=\"onPrevClick()\"\n    (next)=\"onNextClick()\"\n    (goTo)=\"goTo($event)\">\n</ecl-slider-pager>\n\n<div class=\"ecl-quiz__counter\">{{ counterText() }}</div>\n}\n\n", dependencies: [{ kind: "component", type: i1.EclSliderPagerComponent, selector: "ecl-slider-pager", inputs: ["size", "variant", "isPlaying", "isPrevDisabled", "isNextDisabled", "activeIndex", "dotIndices", "dotAriaLabels", "prevExtraClasses", "nextExtraClasses", "dotsExtraClasses", "dotExtraClasses", "playExtraClasses", "pauseExtraClasses"], outputs: ["prev", "next", "goTo", "play", "pause"] }, { kind: "directive", type: EmblaCarouselDirective, selector: "[emblaCarousel]", inputs: ["options", "plugins", "subscribeToEvents", "eventsThrottleTime"], outputs: ["emblaChange"], exportAs: ["emblaCarousel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclQuizComponent, decorators: [{
             type: Component,
@@ -647,14 +686,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                         '[class]': 'cssClasses()',
                         '(keydown)': 'onKeydown($event)',
                     }, imports: [
-                        TranslatePipe,
-                        EclIconComponent,
+                        ...EUI_ECL_SLIDER,
                         EmblaCarouselDirective,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (eclTitle() || eclDescription()) {\n<div class=\"ecl-quiz__header\">\n    @if (eclTitle()) {\n    <div class=\"ecl-quiz__title\">{{ eclTitle() }}</div>\n    }\n    @if (eclDescription()) {\n    <div class=\"ecl-quiz__description\">{{ eclDescription() }}</div>\n    }\n</div>\n}\n\n<div class=\"ecl-quiz__viewport\" data-ecl-quiz-slider\n    role=\"region\"\n    aria-label=\"Quiz slider\"\n    aria-roledescription=\"carousel\"\n    emblaCarousel\n    [options]=\"emblaOptions\"\n    [subscribeToEvents]=\"subscribeToEvents\"\n    (emblaChange)=\"onEmblaChange($event)\">\n        \n    <ng-content></ng-content>\n</div>\n\n@if (showControls()) {\n<div class=\"ecl-quiz__pager\">\n    <button\n        class=\"ecl-quiz__prev\"\n        [disabled]=\"prevDisabled()\"\n        (click)=\"onPrevClick()\"\n        [attr.aria-label]=\"'ecl.quiz.SHOW-PREV-SLIDE' | translate\">\n        <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-270\"></ecl-icon>\n        <span class=\"ecl-quiz__prev-label\">\n            {{ 'ecl.quiz.PREVIOUS' | translate }}\n        </span>\n    </button>\n\n    <div class=\"ecl-quiz__dots\">\n        @for (dotIndex of getDotIndices(); track dotIndex) {\n        <button\n            #dotButton\n            class=\"ecl-quiz__dot\"\n            [class.ecl-quiz__dot--active]=\"dotIndex === activeIndex()\"\n            [class.is-prev]=\"dotIndex === activeIndex() - 1\"\n            [attr.aria-label]=\"getDotAriaLabel(dotIndex).key | translate: getDotAriaLabel(dotIndex).params\"\n            (click)=\"goTo(dotIndex)\">\n        </button>\n        }\n    </div>\n\n    <button\n        class=\"ecl-quiz__next\"\n        [disabled]=\"nextDisabled()\"\n        (click)=\"onNextClick()\"\n        [attr.aria-label]=\"'ecl.quiz.SHOW-NEXT-SLIDE' | translate\">\n        <span class=\"ecl-quiz__next-label\">\n            {{ 'ecl.quiz.NEXT' | translate }}\n        </span>\n        <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-90\"></ecl-icon>\n    </button>\n</div>\n\n<div class=\"ecl-quiz__counter\">{{ counterText() }}</div>\n}\n\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (eclTitle() || eclDescription()) {\n<div class=\"ecl-quiz__header\">\n    @if (eclTitle()) {\n    <div class=\"ecl-quiz__title\">{{ eclTitle() }}</div>\n    }\n    @if (eclDescription()) {\n    <div class=\"ecl-quiz__description\">{{ eclDescription() }}</div>\n    }\n</div>\n}\n\n<div class=\"ecl-quiz__viewport\" data-ecl-quiz-slider\n    role=\"region\"\n    aria-label=\"Quiz slider\"\n    aria-roledescription=\"carousel\"\n    emblaCarousel\n    [options]=\"emblaOptions\"\n    [subscribeToEvents]=\"subscribeToEvents\"\n    (emblaChange)=\"onEmblaChange($event)\">\n        \n    <ng-content></ng-content>\n</div>\n\n@if (showControls()) {\n<ecl-slider-pager\n    class=\"ecl-quiz__pager\"\n    variant=\"dots\"\n    prevExtraClasses=\"ecl-quiz__prev\"\n    nextExtraClasses=\"ecl-quiz__next\"\n    dotsExtraClasses=\"ecl-quiz__dots\"\n    dotExtraClasses=\"ecl-quiz__dot\"\n    [activeIndex]=\"activeIndex()\"\n    [isPrevDisabled]=\"prevDisabled()\"\n    [isNextDisabled]=\"nextDisabled()\"\n    [dotIndices]=\"getDotIndices()\"\n    [dotAriaLabels]=\"dotAriaLabels()\"\n    (prev)=\"onPrevClick()\"\n    (next)=\"onNextClick()\"\n    (goTo)=\"goTo($event)\">\n</ecl-slider-pager>\n\n<div class=\"ecl-quiz__counter\">{{ counterText() }}</div>\n}\n\n" }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], eclTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "eclTitle", required: false }] }], eclDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "eclDescription", required: false }] }], isFullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFullWidth", required: false }] }], hasBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackground", required: false }] }], cards: [{
                 type: ContentChildren,
                 args: [forwardRef(() => EclQuizCardComponent), { descendants: true }]
-            }], emblaRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => EmblaCarouselDirective), { isSignal: true }] }], dotButtons: [{ type: i0.ViewChildren, args: ['dotButton', { isSignal: true }] }] } });
+            }], emblaRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => EmblaCarouselDirective), { isSignal: true }] }] } });
 
 const EUI_ECL_QUIZ = [
     EclQuizComponent,