@eui/ecl 21.3.2 → 21.3.3-snapshot-1782299250059

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

@@ -1,11 +1,27 @@
 import * as i0 from '@angular/core';
-import { input, EventEmitter, booleanAttribute, HostListener, HostBinding, Input, ViewChild, Output, ChangeDetectionStrategy, Component, signal, inject, ChangeDetectorRef, ViewChildren, forwardRef, ContentChildren } from '@angular/core';
+import { HostBinding, Directive, input, computed, EventEmitter, signal, ViewChild, Output, ChangeDetectionStrategy, Component, inject, ChangeDetectorRef, ViewChildren, forwardRef, ContentChildren } from '@angular/core';
 import { EclIconComponent } from '@eui/ecl/components/ecl-icon';
 import { ECLBaseDirective } from '@eui/ecl/core';
 import * as i1 from '@ngx-translate/core';
-import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
 import { EmblaCarouselDirective } from 'embla-carousel-angular';
 
+class EclQuizListDirective {
+    constructor() {
+        this.hasClass = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: EclQuizListDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: EclQuizListDirective, isStandalone: true, selector: "ol[eclQuizList]", host: { properties: { "class.ecl-quiz__list": "this.hasClass" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: EclQuizListDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ol[eclQuizList]',
+                }]
+        }], propDecorators: { hasClass: [{
+                type: HostBinding,
+                args: ['class.ecl-quiz__list']
+            }] } });
 /**
  * ECL Quiz Card component – represents a single card in the quiz.
  *
@@ -15,6 +31,19 @@ import { EmblaCarouselDirective } from 'embla-carousel-angular';
 class EclQuizCardComponent extends ECLBaseDirective {
     constructor() {
         super(...arguments);
+        /**
+         * Unique identifier for the card, used for accessibility attributes.
+         * If not provided, a unique ID is generated automatically.
+         */
+        this.id = input(`ecl-quiz-card-${crypto.randomUUID()}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        /**
+         * Unique identifier for the question element.
+         */
+        this.questionId = computed(() => `${this.id()}-question`, ...(ngDevMode ? [{ debugName: "questionId" }] : /* istanbul ignore next */ []));
+        /**
+         * Unique identifier for the answer element.
+         */
+        this.answerId = computed(() => `${this.id()}-answer`, ...(ngDevMode ? [{ debugName: "answerId" }] : /* istanbul ignore next */ []));
         /**
          * The question text displayed on the front of the card.
          */
@@ -49,29 +78,22 @@ class EclQuizCardComponent extends ECLBaseDirective {
          * Options for the poll variant. Each option has text and a match flag.
          */
         this.options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
-        /**
-         * Whether this card is currently active/visible in the slider.
-         */
-        this.isActive = false;
         /**
          * Emitted when the card is flipped.
          */
         this.cardFlip = new EventEmitter();
         /** Whether the card is currently flipped (showing back). */
-        this.isFlipped = false;
+        this.isFlipped = signal(false, ...(ngDevMode ? [{ debugName: "isFlipped" }] : /* istanbul ignore next */ []));
         /** Index of the selected option (poll variant). */
-        this.selectedOptionIndex = null;
+        this.selectedOptionIndex = signal(null, ...(ngDevMode ? [{ debugName: "selectedOptionIndex" }] : /* istanbul ignore next */ []));
         /** Whether the selected option is correct (poll variant). */
-        this.isCorrect = null;
-        this.role = 'group';
-        this.ariaRoleDescription = null;
-        this.ariaHidden = null;
+        this.isCorrect = signal(null, ...(ngDevMode ? [{ debugName: "isCorrect" }] : /* istanbul ignore next */ []));
         this.styleTransform = 'translate3d(0px, 0px, 0px)';
     }
     get cssClasses() {
         return [
             super.getCssClasses('ecl-quiz-card'),
-            this.isFlipped ? 'ecl-quiz-card__flipped' : '',
+            this.isFlipped() ? 'ecl-quiz-card__flipped' : '',
         ]
             .join(' ')
             .trim();
@@ -79,9 +101,6 @@ class EclQuizCardComponent extends ECLBaseDirective {
     get tabIndex() {
         return this.variant === 'reveal' ? 0 : null;
     }
-    get ariaPressed() {
-        return this.variant === 'reveal' ? String(this.isFlipped) : null;
-    }
     /**
      * Handle click on the card itself (reveal variant).
      */
@@ -103,12 +122,12 @@ class EclQuizCardComponent extends ECLBaseDirective {
      * Handle option click (poll variant).
      */
     onOptionClick(optionIndex) {
-        if (this.isFlipped) {
+        if (this.isFlipped()) {
             return;
         }
         const optionsList = this.options();
-        this.selectedOptionIndex = optionIndex;
-        this.isCorrect = optionsList[optionIndex]?.match ?? false;
+        this.selectedOptionIndex.set(optionIndex);
+        this.isCorrect.set(optionsList[optionIndex]?.match ?? false);
         this.flipCard();
     }
     /**
@@ -124,11 +143,11 @@ class EclQuizCardComponent extends ECLBaseDirective {
      * Flip the card between front and back.
      */
     flipCard() {
-        this.isFlipped = !this.isFlipped;
-        const event = { flipped: this.isFlipped };
+        this.isFlipped.update(v => !v);
+        const event = { flipped: this.isFlipped() };
         if (this.variant === 'poll') {
-            event.selectedOptionIndex = this.selectedOptionIndex;
-            event.isCorrect = this.isCorrect;
+            event.selectedOptionIndex = this.selectedOptionIndex();
+            event.isCorrect = this.isCorrect();
         }
         this.cardFlip.emit(event);
     }
@@ -164,15 +183,20 @@ class EclQuizCardComponent extends ECLBaseDirective {
         return this.iconSize() || (this.variant === 'poll' ? '2xl' : 'xl');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: EclQuizCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: EclQuizCardComponent, isStandalone: true, selector: "div[eclQuizCard]", inputs: { 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 }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, ariaHidden: { classPropertyName: "ariaHidden", publicName: "ariaHidden", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { cardFlip: "cardFlip" }, host: { listeners: { "click": "onClick()", "keydown": "onKeydown($event)" }, properties: { "class": "this.cssClasses", "attr.role": "this.role", "attr.aria-roledescription": "this.ariaRoleDescription", "attr.aria-hidden": "this.ariaHidden", "attr.tabindex": "this.tabIndex", "attr.aria-pressed": "this.ariaPressed", "style.tranform": "this.styleTransform" } }, viewQueries: [{ propertyName: "frontElementRef", first: true, predicate: ["frontElement"], descendants: true }, { propertyName: "backElementRef", first: true, predicate: ["backElement"], descendants: true }, { propertyName: "questionElementRef", first: true, predicate: ["questionElement"], descendants: true }, { propertyName: "answerElementRef", first: true, predicate: ["answerElement"], descendants: true }, { propertyName: "contentElementRef", first: true, predicate: ["contentElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-quiz-card__content\" #contentElement>\n    <!-- Front face -->\n    <div class=\"ecl-quiz-card__front\" #frontElement [hidden]=\"isFlipped\">\n        <div class=\"ecl-quiz-card__header\">\n            <div class=\"ecl-quiz-card__icon\">\n                <ecl-icon\n                    [icon]=\"getIconName()\"\n                    [size]=\"getIconSize()\"\n                    iconSet=\"phosphor\">\n                </ecl-icon>\n            </div>\n            @if (category()) {\n            <span class=\"ecl-quiz-card__category\">{{ category() }}</span>\n            }\n        </div>\n\n        <div class=\"ecl-quiz-card__question\" #questionElement>{{ question() }}</div>\n\n        @if (variant === 'reveal') {\n        <!-- Reveal variant: flip label -->\n        <div class=\"ecl-quiz-card__flip\">\n            {{ 'ecl.quiz.CLICK-TO-REVEAL' | translate }}\n            <ecl-icon iconSet=\"phosphor\" icon=\"arrow-clockwise\" size=\"m\"></ecl-icon>\n        </div>\n        } @else {\n        <!-- Poll variant: options -->\n        <div class=\"ecl-quiz-card__options\">\n            @for (option of options(); let i = $index; track i) {\n            <div\n                class=\"ecl-quiz-card__option\"\n                role=\"button\"\n                [attr.tabindex]=\"0\"\n                [attr.aria-pressed]=\"selectedOptionIndex === i ? 'true' : 'false'\"\n                [attr.data-match]=\"option.match\"\n                (click)=\"onOptionClick(i)\"\n                (keydown)=\"onOptionKeydown($event, i)\">\n                {{ option.text }}\n            </div>\n            }\n        </div>\n        }\n    </div>\n\n    <!-- Back face -->\n    <div\n        class=\"ecl-quiz-card__back\"\n        #backElement\n        [hidden]=\"!isFlipped\"\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\n                    [icon]=\"getIconName()\"\n                    [size]=\"getIconSize()\"\n                    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\n                    icon=\"check-circle\"\n                    iconSet=\"phosphor\"\n                    size=\"2xl\"\n                    class=\"ecl-quiz-card__icon--success\">\n                </ecl-icon>\n                <ecl-icon\n                    icon=\"x-circle\"\n                    size=\"2xl\"\n                    iconSet=\"phosphor\"\n                    class=\"ecl-quiz-card__icon--error\">\n                </ecl-icon>\n            </div>\n            <span class=\"ecl-quiz-card__category ecl-quiz-card__category--success\">Correct</span>\n            <span class=\"ecl-quiz-card__category ecl-quiz-card__category--error\">Incorrect</span>\n            }\n        </div>\n\n        <div class=\"ecl-quiz-card__answer\" #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.GO-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        <div class=\"ecl-quiz-card__options\" role=\"list\">\n            @for (option of options(); let i = $index; track i) {\n            <div\n                class=\"ecl-quiz-card__option\"\n                role=\"listitem\"\n                [class.ecl-quiz-card__option--selected]=\"selectedOptionIndex === i\"\n                [attr.data-match]=\"option.match\">\n                {{ option.text }}\n            </div>\n            }\n        </div>\n        }\n    </div>\n</div>\n", dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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 }, { propertyName: "backElementRef", first: true, predicate: ["backElement"], descendants: true }, { propertyName: "questionElementRef", first: true, predicate: ["questionElement"], descendants: true }, { propertyName: "answerElementRef", first: true, predicate: ["answerElement"], descendants: true }, { propertyName: "contentElementRef", first: true, predicate: ["contentElement"], descendants: 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()\">\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.CLICK-TO-REVEAL' | translate }}\n            <ecl-icon iconSet=\"phosphor\" icon=\"arrow-clockwise\" size=\"m\"></ecl-icon>\n        </div>\n        } @else {\n        <!-- Poll variant: options -->\n        <fieldset>\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\"\n                    (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\"\n                            (keydown)=\"onOptionKeydown($event, i)\">\n                        {{ option.text }}</label>\n                </li>\n                }\n            </ol>\n        </fieldset>\n        }\n    </div>\n\n    <!-- Back face -->\n    <div class=\"ecl-quiz-card__back\" #backElement [hidden]=\"!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 class=\"ecl-quiz-card__category ecl-quiz-card__category--success\" [attr.tabindex]=\"isFlipped() && isCorrect() === true ? 0 : null\">Correct</span>\n            <span class=\"ecl-quiz-card__category ecl-quiz-card__category--error\" [attr.tabindex]=\"isFlipped() && isCorrect() === false ? 0 : null\">Incorrect</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.GO-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\"\n                [class.ecl-quiz-card__option--selected]=\"selectedOptionIndex() === i\" [attr.data-match]=\"option.match\">\n                {{ option.text }}\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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: EclQuizCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'div[eclQuizCard]', imports: [EclIconComponent, TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ecl-quiz-card__content\" #contentElement>\n    <!-- Front face -->\n    <div class=\"ecl-quiz-card__front\" #frontElement [hidden]=\"isFlipped\">\n        <div class=\"ecl-quiz-card__header\">\n            <div class=\"ecl-quiz-card__icon\">\n                <ecl-icon\n                    [icon]=\"getIconName()\"\n                    [size]=\"getIconSize()\"\n                    iconSet=\"phosphor\">\n                </ecl-icon>\n            </div>\n            @if (category()) {\n            <span class=\"ecl-quiz-card__category\">{{ category() }}</span>\n            }\n        </div>\n\n        <div class=\"ecl-quiz-card__question\" #questionElement>{{ question() }}</div>\n\n        @if (variant === 'reveal') {\n        <!-- Reveal variant: flip label -->\n        <div class=\"ecl-quiz-card__flip\">\n            {{ 'ecl.quiz.CLICK-TO-REVEAL' | translate }}\n            <ecl-icon iconSet=\"phosphor\" icon=\"arrow-clockwise\" size=\"m\"></ecl-icon>\n        </div>\n        } @else {\n        <!-- Poll variant: options -->\n        <div class=\"ecl-quiz-card__options\">\n            @for (option of options(); let i = $index; track i) {\n            <div\n                class=\"ecl-quiz-card__option\"\n                role=\"button\"\n                [attr.tabindex]=\"0\"\n                [attr.aria-pressed]=\"selectedOptionIndex === i ? 'true' : 'false'\"\n                [attr.data-match]=\"option.match\"\n                (click)=\"onOptionClick(i)\"\n                (keydown)=\"onOptionKeydown($event, i)\">\n                {{ option.text }}\n            </div>\n            }\n        </div>\n        }\n    </div>\n\n    <!-- Back face -->\n    <div\n        class=\"ecl-quiz-card__back\"\n        #backElement\n        [hidden]=\"!isFlipped\"\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\n                    [icon]=\"getIconName()\"\n                    [size]=\"getIconSize()\"\n                    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\n                    icon=\"check-circle\"\n                    iconSet=\"phosphor\"\n                    size=\"2xl\"\n                    class=\"ecl-quiz-card__icon--success\">\n                </ecl-icon>\n                <ecl-icon\n                    icon=\"x-circle\"\n                    size=\"2xl\"\n                    iconSet=\"phosphor\"\n                    class=\"ecl-quiz-card__icon--error\">\n                </ecl-icon>\n            </div>\n            <span class=\"ecl-quiz-card__category ecl-quiz-card__category--success\">Correct</span>\n            <span class=\"ecl-quiz-card__category ecl-quiz-card__category--error\">Incorrect</span>\n            }\n        </div>\n\n        <div class=\"ecl-quiz-card__answer\" #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.GO-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        <div class=\"ecl-quiz-card__options\" role=\"list\">\n            @for (option of options(); let i = $index; track i) {\n            <div\n                class=\"ecl-quiz-card__option\"\n                role=\"listitem\"\n                [class.ecl-quiz-card__option--selected]=\"selectedOptionIndex === i\"\n                [attr.data-match]=\"option.match\">\n                {{ option.text }}\n            </div>\n            }\n        </div>\n        }\n    </div>\n</div>\n" }]
-        }], propDecorators: { 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 }] }], isActive: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], cardFlip: [{
+            args: [{ selector: 'li[eclQuizCard]', host: {
+                        '[attr.id]': 'id()',
+                        '[attr.aria-labelledby]': 'questionId()',
+                        '[class]': 'cssClasses',
+                        '[attr.tabindex]': 'tabIndex',
+                        '[style.transform]': 'styleTransform',
+                        '(click)': 'onClick()',
+                        '(keydown)': 'onKeydown($event)',
+                    }, imports: [EclIconComponent, TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"ecl-quiz-card__content\" #contentElement>\n    <!-- Front face -->\n    <div class=\"ecl-quiz-card__front\" #frontElement [hidden]=\"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.CLICK-TO-REVEAL' | translate }}\n            <ecl-icon iconSet=\"phosphor\" icon=\"arrow-clockwise\" size=\"m\"></ecl-icon>\n        </div>\n        } @else {\n        <!-- Poll variant: options -->\n        <fieldset>\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\"\n                    (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\"\n                            (keydown)=\"onOptionKeydown($event, i)\">\n                        {{ option.text }}</label>\n                </li>\n                }\n            </ol>\n        </fieldset>\n        }\n    </div>\n\n    <!-- Back face -->\n    <div class=\"ecl-quiz-card__back\" #backElement [hidden]=\"!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 class=\"ecl-quiz-card__category ecl-quiz-card__category--success\" [attr.tabindex]=\"isFlipped() && isCorrect() === true ? 0 : null\">Correct</span>\n            <span class=\"ecl-quiz-card__category ecl-quiz-card__category--error\" [attr.tabindex]=\"isFlipped() && isCorrect() === false ? 0 : null\">Incorrect</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.GO-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\"\n                [class.ecl-quiz-card__option--selected]=\"selectedOptionIndex() === i\" [attr.data-match]=\"option.match\">\n                {{ option.text }}\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: Output
             }], frontElementRef: [{
                 type: ViewChild,
@@ -189,35 +213,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             }], contentElementRef: [{
                 type: ViewChild,
                 args: ['contentElement']
-            }], cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], role: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], ariaRoleDescription: [{
-                type: HostBinding,
-                args: ['attr.aria-roledescription']
-            }], ariaHidden: [{
-                type: HostBinding,
-                args: ['attr.aria-hidden']
-            }, {
-                type: Input
-            }], tabIndex: [{
-                type: HostBinding,
-                args: ['attr.tabindex']
-            }], ariaPressed: [{
-                type: HostBinding,
-                args: ['attr.aria-pressed']
-            }], styleTransform: [{
-                type: HostBinding,
-                args: ['style.tranform']
-            }], onClick: [{
-                type: HostListener,
-                args: ['click']
-            }], onKeydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
             }] } });
 
 /**
@@ -242,8 +237,6 @@ class EclQuizComponent extends ECLBaseDirective {
         this.activeIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
         /** Total number of snap points. */
         this.totalSnaps = signal(0, ...(ngDevMode ? [{ debugName: "totalSnaps" }] : /* istanbul ignore next */ []));
-        /** Live region text for screen readers. */
-        this.liveRegionText = signal('', ...(ngDevMode ? [{ debugName: "liveRegionText" }] : /* istanbul ignore next */ []));
         /** Counter text for mobile display. */
         this.counterText = signal('', ...(ngDevMode ? [{ debugName: "counterText" }] : /* istanbul ignore next */ []));
         /** Whether the previous button is disabled. */
@@ -253,7 +246,6 @@ class EclQuizComponent extends ECLBaseDirective {
         /** Whether navigation controls should be shown. */
         this.showControls = signal(false, ...(ngDevMode ? [{ debugName: "showControls" }] : /* istanbul ignore next */ []));
         this.cd = inject(ChangeDetectorRef);
-        this.translateService = inject(TranslateService);
         /** Subscribed Embla events. */
         this.subscribeToEvents = ['select', 'init', 'reInit'];
     }
@@ -265,10 +257,6 @@ class EclQuizComponent extends ECLBaseDirective {
             .join(' ')
             .trim();
     }
-    // @HostBinding('attr.data-ecl-auto-init')
-    // get autoInit(): string {
-    //     return 'Quiz';
-    // }
     ngAfterContentInit() {
         if (this.cards && this.cards.length > 1) {
             this.showControls.set(true);
@@ -425,7 +413,6 @@ class EclQuizComponent extends ECLBaseDirective {
         this.nextDisabled.set(!canScrollNext);
         this.showControls.set(canScrollPrev || canScrollNext);
         this.updateCounter();
-        this.updateLiveRegion();
     }
     /** Update the counter text (mobile). */
     updateCounter() {
@@ -433,13 +420,6 @@ class EclQuizComponent extends ECLBaseDirective {
         const current = this.activeIndex() + 1;
         this.counterText.set(`${current} / ${total}`);
     }
-    /** Update the live region for screen readers. */
-    updateLiveRegion() {
-        const totalCards = this.getCardsCount();
-        const totalGroups = this.totalSnaps();
-        const currentGroup = this.activeIndex() + 1;
-        this.liveRegionText.set(this.translateService.instant('ecl.quiz.SHOWING-SLIDE', { current: currentGroup, totalSlides: totalCards, totalGroups }));
-    }
     /** Move focus to the last dot button when Escape is pressed. */
     escapeSlider() {
         if (this.dotButtons && this.dotButtons.length > 0) {
@@ -447,50 +427,46 @@ class EclQuizComponent extends ECLBaseDirective {
             lastDot.nativeElement.focus();
         }
     }
-    /** Propagate the variant and aria-roledescription to all child cards. */
+    /** Propagate the variant to all child cards. */
     propagateVariant() {
         const v = this.variant();
-        const isCarousel = this.cards.length > 1;
         this.cards?.forEach(card => {
             card.variant = v;
-            card.ariaRoleDescription = isCarousel ? 'slide' : null;
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: EclQuizComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: EclQuizComponent, isStandalone: true, selector: "div[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 } }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "cards", predicate: i0.forwardRef(() => EclQuizCardComponent) }], viewQueries: [{ propertyName: "emblaRef", first: true, predicate: EmblaCarouselDirective, descendants: true }, { propertyName: "dotButtons", predicate: ["dotButton"], descendants: 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    <div class=\"ecl-quiz__list\">\n        <ng-content></ng-content>\n    </div>\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        <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]=\"'ecl.quiz.GO-TO-SLIDE' | translate: { current: dotIndex + 1, total: totalSnaps() }\"\n            (click)=\"goTo(dotIndex)\">\n        </button>\n        }\n    </div>\n\n    <button\n        class=\"ecl-quiz__next\"\n        [disabled]=\"nextDisabled()\"\n        (click)=\"onNextClick()\">\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<div class=\"ecl-quiz__live-region\" aria-live=\"polite\" aria-atomic=\"true\">{{ liveRegionText() }}</div>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { 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: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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 } }, 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 }, { propertyName: "dotButtons", predicate: ["dotButton"], descendants: 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        <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]=\"'ecl.quiz.GO-TO-SLIDE' | translate: { current: dotIndex + 1, total: totalSnaps() }\"\n            (click)=\"goTo(dotIndex)\">\n        </button>\n        }\n    </div>\n\n    <button\n        class=\"ecl-quiz__next\"\n        [disabled]=\"nextDisabled()\"\n        (click)=\"onNextClick()\">\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: "ngmodule", type: TranslateModule }, { 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: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: EclQuizComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'div[eclQuiz]', imports: [
+            args: [{ selector: 'section[eclQuiz]', host: {
+                        '[class]': 'cssClasses',
+                        '(keydown)': 'onKeydown($event)',
+                    }, imports: [
                         TranslateModule,
                         EclIconComponent,
                         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    <div class=\"ecl-quiz__list\">\n        <ng-content></ng-content>\n    </div>\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        <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]=\"'ecl.quiz.GO-TO-SLIDE' | translate: { current: dotIndex + 1, total: totalSnaps() }\"\n            (click)=\"goTo(dotIndex)\">\n        </button>\n        }\n    </div>\n\n    <button\n        class=\"ecl-quiz__next\"\n        [disabled]=\"nextDisabled()\"\n        (click)=\"onNextClick()\">\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<div class=\"ecl-quiz__live-region\" aria-live=\"polite\" aria-atomic=\"true\">{{ liveRegionText() }}</div>\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<div class=\"ecl-quiz__pager\">\n    <button\n        class=\"ecl-quiz__prev\"\n        [disabled]=\"prevDisabled()\"\n        (click)=\"onPrevClick()\">\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]=\"'ecl.quiz.GO-TO-SLIDE' | translate: { current: dotIndex + 1, total: totalSnaps() }\"\n            (click)=\"goTo(dotIndex)\">\n        </button>\n        }\n    </div>\n\n    <button\n        class=\"ecl-quiz__next\"\n        [disabled]=\"nextDisabled()\"\n        (click)=\"onNextClick()\">\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" }]
         }], 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 }] }], cards: [{
                 type: ContentChildren,
-                args: [forwardRef(() => EclQuizCardComponent)]
+                args: [forwardRef(() => EclQuizCardComponent), { descendants: true }]
             }], emblaRef: [{
                 type: ViewChild,
                 args: [EmblaCarouselDirective]
             }], dotButtons: [{
                 type: ViewChildren,
                 args: ['dotButton']
-            }], cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], onKeydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
             }] } });
 
 const EUI_ECL_QUIZ = [
     EclQuizComponent,
     EclQuizCardComponent,
+    EclQuizListDirective,
 ];
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { EUI_ECL_QUIZ, EclQuizCardComponent, EclQuizComponent };
+export { EUI_ECL_QUIZ, EclQuizCardComponent, EclQuizComponent, EclQuizListDirective };
 //# sourceMappingURL=eui-ecl-components-ecl-quiz.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"eui-ecl-components-ecl-quiz.mjs","sources":["../../components/ecl-quiz/ecl-quiz-card.component.ts","../../components/ecl-quiz/ecl-quiz-card.component.html","../../components/ecl-quiz/ecl-quiz.component.ts","../../components/ecl-quiz/ecl-quiz.component.html","../../components/ecl-quiz/index.ts","../../components/ecl-quiz/eui-ecl-components-ecl-quiz.ts"],"sourcesContent":["import {\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    EventEmitter,\n    HostBinding,\n    HostListener,\n    Input,\n    Output,\n    ViewChild,\n    booleanAttribute,\n    input,\n} from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclIconComponent } from '@eui/ecl/components/ecl-icon';\nimport { TranslateModule } from '@ngx-translate/core';\n\nexport interface EclQuizCardFlipEvent {\n    flipped: boolean;\n    selectedOptionIndex?: number;\n    isCorrect?: boolean;\n}\n\n/**\n * ECL Quiz Card component – represents a single card in the quiz.\n *\n * For the 'reveal' variant, the entire card is clickable to flip.\n * For the 'poll' variant, individual options trigger the flip.\n */\n@Component({\n    selector: 'div[eclQuizCard]',\n    templateUrl: './ecl-quiz-card.component.html',\n    imports: [EclIconComponent, TranslateModule],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EclQuizCardComponent extends ECLBaseDirective {\n\n    /**\n     * The question text displayed on the front of the card.\n     */\n    question = input<string>('');\n\n    /**\n     * The answer text displayed on the back of the card.\n     * Used in 'reveal' variant or as explanation in 'poll' variant.\n     */\n    answer = input<string>('');\n\n    /**\n     * The answer title (e.g. \"The correct answer is A.\") for poll variant.\n     */\n    answerTitle = input<string>('');\n\n    /**\n     * Category label displayed in the card header (poll variant).\n     */\n    category = input<string>('');\n\n    /**\n     * Icon name for the card header.\n     * Defaults to 'sparkle' for reveal, 'question' for poll.\n     */\n    icon = input<string>('');\n\n    /**\n     * Icon size for the card header.\n     */\n    iconSize = input<'xs' | 's' | 'm' | 'l' | 'xl' | '2xl'>('xl');\n\n    /**\n     * The variant of the quiz, set by the parent EclQuizComponent.\n     */\n    variant: 'poll' | 'reveal' = 'reveal';\n\n    /**\n     * Options for the poll variant. Each option has text and a match flag.\n     */\n    options = input<Array<{ text: string; match: boolean }>>([]);\n\n    /**\n     * Whether this card is currently active/visible in the slider.\n     */\n    @Input({ transform: booleanAttribute }) isActive = false;\n\n    /**\n     * Emitted when the card is flipped.\n     */\n    @Output() cardFlip = new EventEmitter<EclQuizCardFlipEvent>();\n\n    @ViewChild('frontElement') frontElementRef: ElementRef;\n    @ViewChild('backElement') backElementRef: ElementRef;\n    @ViewChild('questionElement') questionElementRef: ElementRef;\n    @ViewChild('answerElement') answerElementRef: ElementRef;\n    @ViewChild('contentElement') contentElementRef: ElementRef;\n\n    /** Whether the card is currently flipped (showing back). */\n    isFlipped = false;\n\n    /** Index of the selected option (poll variant). */\n    selectedOptionIndex: number | null = null;\n\n    /** Whether the selected option is correct (poll variant). */\n    isCorrect: boolean | null = null;\n\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-quiz-card'),\n            this.isFlipped ? 'ecl-quiz-card__flipped' : '',\n        ]\n            .join(' ')\n            .trim();\n    }\n\n    @HostBinding('attr.role')\n    role = 'group';\n\n    @HostBinding('attr.aria-roledescription')\n    ariaRoleDescription: string | null = null;\n\n    @HostBinding('attr.aria-hidden')\n    @Input() ariaHidden: string | null = null;\n\n    @HostBinding('attr.tabindex')\n    get tabIndex(): number | null {\n        return this.variant === 'reveal' ? 0 : null;\n    }\n\n    @HostBinding('attr.aria-pressed')\n    get ariaPressed(): string | null {\n        return this.variant === 'reveal' ? String(this.isFlipped) : null;\n    }\n\n    @HostBinding('style.tranform')\n    styleTransform = 'translate3d(0px, 0px, 0px)';\n\n    /**\n     * Handle click on the card itself (reveal variant).\n     */\n    @HostListener('click')\n    onClick(): void {\n        if (this.variant === 'reveal') {\n            this.flipCard();\n        }\n    }\n\n    /**\n     * Handle keyboard events (Enter/Space to flip for reveal variant).\n     */\n    @HostListener('keydown', ['$event'])\n    onKeydown(event: KeyboardEvent): void {\n        if (this.variant === 'reveal' && (event.key === 'Enter' || event.key === ' ')) {\n            event.preventDefault();\n            this.flipCard();\n        }\n    }\n\n    /**\n     * Handle option click (poll variant).\n     */\n    onOptionClick(optionIndex: number): void {\n        if (this.isFlipped) {\n            return;\n        }\n        const optionsList = this.options();\n        this.selectedOptionIndex = optionIndex;\n        this.isCorrect = optionsList[optionIndex]?.match ?? false;\n        this.flipCard();\n    }\n\n    /**\n     * Handle keyboard on option (poll variant).\n     */\n    onOptionKeydown(event: KeyboardEvent, optionIndex: number): void {\n        if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            this.onOptionClick(optionIndex);\n        }\n    }\n\n    /**\n     * Flip the card between front and back.\n     */\n    flipCard(): void {\n        this.isFlipped = !this.isFlipped;\n        const event: EclQuizCardFlipEvent = { flipped: this.isFlipped };\n        if (this.variant === 'poll') {\n            event.selectedOptionIndex = this.selectedOptionIndex;\n            event.isCorrect = this.isCorrect;\n        }\n        this.cardFlip.emit(event);\n    }\n\n    /** Get the native front element for height calculations. */\n    getFrontElement(): HTMLElement | null {\n        return this.frontElementRef?.nativeElement ?? null;\n    }\n\n    /** Get the native back element for height calculations. */\n    getBackElement(): HTMLElement | null {\n        return this.backElementRef?.nativeElement ?? null;\n    }\n\n    /** Get the native question element for height calculations. */\n    getQuestionElement(): HTMLElement | null {\n        return this.questionElementRef?.nativeElement ?? null;\n    }\n\n    /** Get the native answer element for height calculations. */\n    getAnswerElement(): HTMLElement | null {\n        return this.answerElementRef?.nativeElement ?? null;\n    }\n\n    /** Get the native content element for height calculations. */\n    getContentElement(): HTMLElement | null {\n        return this.contentElementRef?.nativeElement ?? null;\n    }\n\n    /** Get the resolved icon name based on variant. */\n    getIconName(): string {\n        if (this.icon()) {\n            return this.icon();\n        }\n        return this.variant === 'poll' ? 'question' : 'sparkle';\n    }\n\n    /** Get the resolved icon size. */\n    getIconSize(): string {\n        return this.iconSize() || (this.variant === 'poll' ? '2xl' : 'xl');\n    }\n}\n","<div class=\"ecl-quiz-card__content\" #contentElement>\n    <!-- Front face -->\n    <div class=\"ecl-quiz-card__front\" #frontElement [hidden]=\"isFlipped\">\n        <div class=\"ecl-quiz-card__header\">\n            <div class=\"ecl-quiz-card__icon\">\n                <ecl-icon\n                    [icon]=\"getIconName()\"\n                    [size]=\"getIconSize()\"\n                    iconSet=\"phosphor\">\n                </ecl-icon>\n            </div>\n            @if (category()) {\n            <span class=\"ecl-quiz-card__category\">{{ category() }}</span>\n            }\n        </div>\n\n        <div class=\"ecl-quiz-card__question\" #questionElement>{{ question() }}</div>\n\n        @if (variant === 'reveal') {\n        <!-- Reveal variant: flip label -->\n        <div class=\"ecl-quiz-card__flip\">\n            {{ 'ecl.quiz.CLICK-TO-REVEAL' | translate }}\n            <ecl-icon iconSet=\"phosphor\" icon=\"arrow-clockwise\" size=\"m\"></ecl-icon>\n        </div>\n        } @else {\n        <!-- Poll variant: options -->\n        <div class=\"ecl-quiz-card__options\">\n            @for (option of options(); let i = $index; track i) {\n            <div\n                class=\"ecl-quiz-card__option\"\n                role=\"button\"\n                [attr.tabindex]=\"0\"\n                [attr.aria-pressed]=\"selectedOptionIndex === i ? 'true' : 'false'\"\n                [attr.data-match]=\"option.match\"\n                (click)=\"onOptionClick(i)\"\n                (keydown)=\"onOptionKeydown($event, i)\">\n                {{ option.text }}\n            </div>\n            }\n        </div>\n        }\n    </div>\n\n    <!-- Back face -->\n    <div\n        class=\"ecl-quiz-card__back\"\n        #backElement\n        [hidden]=\"!isFlipped\"\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\n                    [icon]=\"getIconName()\"\n                    [size]=\"getIconSize()\"\n                    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\n                    icon=\"check-circle\"\n                    iconSet=\"phosphor\"\n                    size=\"2xl\"\n                    class=\"ecl-quiz-card__icon--success\">\n                </ecl-icon>\n                <ecl-icon\n                    icon=\"x-circle\"\n                    size=\"2xl\"\n                    iconSet=\"phosphor\"\n                    class=\"ecl-quiz-card__icon--error\">\n                </ecl-icon>\n            </div>\n            <span class=\"ecl-quiz-card__category ecl-quiz-card__category--success\">Correct</span>\n            <span class=\"ecl-quiz-card__category ecl-quiz-card__category--error\">Incorrect</span>\n            }\n        </div>\n\n        <div class=\"ecl-quiz-card__answer\" #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.GO-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        <div class=\"ecl-quiz-card__options\" role=\"list\">\n            @for (option of options(); let i = $index; track i) {\n            <div\n                class=\"ecl-quiz-card__option\"\n                role=\"listitem\"\n                [class.ecl-quiz-card__option--selected]=\"selectedOptionIndex === i\"\n                [attr.data-match]=\"option.match\">\n                {{ option.text }}\n            </div>\n            }\n        </div>\n        }\n    </div>\n</div>\n","import {\n    AfterContentInit,\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ContentChildren,\n    ElementRef,\n    forwardRef,\n    HostBinding,\n    HostListener,\n    inject,\n    input,\n    QueryList,\n    signal,\n    ViewChild,\n    ViewChildren\n} from '@angular/core';\nimport { EclIconComponent } from '@eui/ecl/components/ecl-icon';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { TranslateModule, TranslateService } from '@ngx-translate/core';\nimport { EmblaCarouselDirective, EmblaCarouselType, EmblaEventType } from 'embla-carousel-angular';\nimport { EclQuizCardComponent } from './ecl-quiz-card.component';\n\n/**\n * ECL Quiz component – renders a carousel of quiz cards with navigation.\n * Supports two variants: 'reveal' (flip cards) and 'poll' (multiple choice).\n *\n * Uses Embla Carousel (via embla-carousel-angular) to match the ECL vanilla\n * implementation which also uses Embla internally.\n */\n@Component({\n    selector: 'div[eclQuiz]',\n    templateUrl: './ecl-quiz.component.html',\n    imports: [\n        TranslateModule,\n        EclIconComponent,\n        EmblaCarouselDirective,\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EclQuizComponent extends ECLBaseDirective implements AfterContentInit, AfterViewInit {\n\n    /** Quiz variant: 'reveal' for flip cards, 'poll' for multiple choice. */\n    variant = input<'poll' | 'reveal'>('reveal');\n\n    /** Title displayed in the quiz header. */\n    eclTitle = input<string>('');\n\n    /** Description displayed below the title. */\n    eclDescription = input<string>('');\n\n    /** Embla carousel options matching ECL's configuration. */\n    emblaOptions = { loop: false, align: 'start' as const };\n\n    @ContentChildren(forwardRef(() => EclQuizCardComponent))\n    cards: QueryList<EclQuizCardComponent>;\n\n    @ViewChild(EmblaCarouselDirective) emblaRef: EmblaCarouselDirective;\n    @ViewChildren('dotButton') dotButtons: QueryList<ElementRef>;\n\n    /** Current snap index. */\n    activeIndex = signal(0);\n\n    /** Total number of snap points. */\n    totalSnaps = signal(0);\n\n    /** Live region text for screen readers. */\n    liveRegionText = signal('');\n\n    /** Counter text for mobile display. */\n    counterText = signal('');\n\n    /** Whether the previous button is disabled. */\n    prevDisabled = signal(true);\n\n    /** Whether the next button is disabled. */\n    nextDisabled = signal(true);\n\n    /** Whether navigation controls should be shown. */\n    showControls = signal(false);\n\n    private cd = inject(ChangeDetectorRef);\n    private translateService = inject(TranslateService);\n    private emblaApi: EmblaCarouselType | undefined;\n\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-quiz'),\n            `ecl-quiz--${this.variant()}`,\n        ]\n            .join(' ')\n            .trim();\n    }\n\n    // @HostBinding('attr.data-ecl-auto-init')\n    // get autoInit(): string {\n    //     return 'Quiz';\n    // }\n\n    ngAfterContentInit(): void {\n        if (this.cards && this.cards.length > 1) {\n            this.showControls.set(true);\n        }\n        this.propagateVariant();\n        this.cards.changes.subscribe(() => this.propagateVariant());\n    }\n\n    ngAfterViewInit(): void {\n        // Give Embla time to initialize\n        setTimeout(() => {\n            this.initEmbla();\n        });\n    }\n\n    /** Handle keyboard events. */\n    @HostListener('keydown', ['$event'])\n    onKeydown(event: KeyboardEvent): void {\n        if (event.key === 'Escape') {\n            this.escapeSlider();\n        }\n    }\n\n    /** Navigate to the previous snap. */\n    onPrevClick(): void {\n        if (this.emblaRef) {\n            this.emblaRef.scrollPrev();\n        }\n    }\n\n    /** Navigate to the next snap. */\n    onNextClick(): void {\n        if (this.emblaRef) {\n            this.emblaRef.scrollNext();\n        }\n    }\n\n    /** Navigate to a specific snap index. */\n    goTo(index: number): void {\n        if (this.emblaRef) {\n            this.emblaRef.scrollTo(index);\n        }\n    }\n\n    /** Returns the total number of cards. */\n    getCardsCount(): number {\n        return this.cards?.length ?? 0;\n    }\n\n    /** Returns an array of indices for dot rendering. */\n    getDotIndices(): number[] {\n        return Array.from({ length: this.totalSnaps() }, (_, i) => i);\n    }\n\n    /** Called by the emblaChange event from the directive. */\n    onEmblaChange(eventName: string): void {\n        if (!this.emblaApi) {\n            this.emblaApi = this.emblaRef?.emblaApi;\n        }\n        if (!this.emblaApi) {\n            return;\n        }\n\n        if (eventName === 'select' || eventName === 'init' || eventName === 'reInit') {\n            this.syncState();\n        }\n\n        if (eventName === 'reInit') {\n            this.checkHeight();\n        }\n    }\n\n    /** Subscribed Embla events. */\n    subscribeToEvents: EmblaEventType[] = ['select', 'init', 'reInit'];\n\n    /**\n     * Equalizes the height of all cards based on the tallest content.\n     * Mirrors the ECL vanilla `checkHeight()` logic.\n     */\n    checkHeight(): void {\n        if (!this.cards || this.cards.length === 0) {\n            return;\n        }\n\n        let maxTextHeight = 0;\n        let maxHeight = 0;\n\n        const cardsArray = this.cards.toArray();\n\n        // First pass: find the tallest question/answer text\n        cardsArray.forEach((card) => {\n            const frontEl = card.getFrontElement();\n            const backEl = card.getBackElement();\n            const questionEl = card.getQuestionElement();\n            const answerEl = card.getAnswerElement();\n\n            if (!frontEl || !backEl || !questionEl || !answerEl) {\n                return;\n            }\n\n            frontEl.style.position = 'static';\n            backEl.style.position = 'static';\n\n            questionEl.style.minHeight = '';\n            answerEl.style.minHeight = '';\n\n            const heightQuestion = questionEl.scrollHeight;\n            const heightAnswer = answerEl.scrollHeight;\n            const heightText = Math.max(heightQuestion, heightAnswer);\n\n            if (heightText > maxTextHeight) {\n                maxTextHeight = heightText;\n            }\n\n            frontEl.style.position = '';\n            backEl.style.position = '';\n        });\n\n        // Second pass: apply min-height and find tallest card\n        cardsArray.forEach((card) => {\n            const frontEl = card.getFrontElement();\n            const backEl = card.getBackElement();\n            const questionEl = card.getQuestionElement();\n            const answerEl = card.getAnswerElement();\n            const contentEl = card.getContentElement();\n\n            if (!frontEl || !backEl || !questionEl || !answerEl || !contentEl) {\n                return;\n            }\n\n            frontEl.style.position = 'static';\n            backEl.style.position = 'static';\n            contentEl.style.height = '';\n\n            questionEl.style.minHeight = maxTextHeight + 'px';\n            answerEl.style.minHeight = maxTextHeight + 'px';\n\n            const heightFront = frontEl.scrollHeight;\n            const heightBack = backEl.scrollHeight;\n            const height = Math.max(heightFront, heightBack);\n\n            const minHeight = parseFloat(getComputedStyle(frontEl).getPropertyValue('min-height')) || 345;\n\n            if (height > minHeight && height > maxHeight) {\n                maxHeight = height;\n            }\n\n            frontEl.style.position = '';\n            backEl.style.position = '';\n        });\n\n        // Third pass: apply uniform height\n        if (maxHeight > 0) {\n            cardsArray.forEach((card) => {\n                const contentEl = card.getContentElement();\n                if (contentEl) {\n                    contentEl.style.height = maxHeight + 'px';\n                }\n            });\n        }\n    }\n\n    /** Initialize Embla and wire up state syncing. */\n    private initEmbla(): void {\n        if (!this.emblaRef) {\n            return;\n        }\n\n        this.emblaApi = this.emblaRef.emblaApi;\n\n        if (!this.emblaApi) {\n            return;\n        }\n\n        this.syncState();\n        this.checkHeight();\n        this.cd.detectChanges();\n    }\n\n    /** Sync component state from Embla API. */\n    private syncState(): void {\n        if (!this.emblaApi) {\n            return;\n        }\n\n        const snapList = this.emblaApi.scrollSnapList();\n        const selectedSnap = this.emblaApi.selectedScrollSnap();\n        const canScrollPrev = this.emblaApi.canScrollPrev();\n        const canScrollNext = this.emblaApi.canScrollNext();\n\n        this.totalSnaps.set(snapList.length);\n        this.activeIndex.set(selectedSnap);\n        this.prevDisabled.set(!canScrollPrev);\n        this.nextDisabled.set(!canScrollNext);\n        this.showControls.set(canScrollPrev || canScrollNext);\n\n        this.updateCounter();\n        this.updateLiveRegion();\n    }\n\n    /** Update the counter text (mobile). */\n    private updateCounter(): void {\n        const total = this.totalSnaps();\n        const current = this.activeIndex() + 1;\n        this.counterText.set(`${current} / ${total}`);\n    }\n\n    /** Update the live region for screen readers. */\n    private updateLiveRegion(): void {\n        const totalCards = this.getCardsCount();\n        const totalGroups = this.totalSnaps();\n        const currentGroup = this.activeIndex() + 1;\n        this.liveRegionText.set(\n            this.translateService.instant('ecl.quiz.SHOWING-SLIDE', { current: currentGroup, totalSlides: totalCards, totalGroups })\n        );\n    }\n\n    /** Move focus to the last dot button when Escape is pressed. */\n    private escapeSlider(): void {\n        if (this.dotButtons && this.dotButtons.length > 0) {\n            const lastDot = this.dotButtons.last;\n            lastDot.nativeElement.focus();\n        }\n    }\n\n    /** Propagate the variant and aria-roledescription to all child cards. */\n    private propagateVariant(): void {\n        const v = this.variant();\n        const isCarousel = this.cards.length > 1;\n        this.cards?.forEach(card => {\n            card.variant = v;\n            card.ariaRoleDescription = isCarousel ? 'slide' : null;\n        });\n    }\n}\n","@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    <div class=\"ecl-quiz__list\">\n        <ng-content></ng-content>\n    </div>\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        <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]=\"'ecl.quiz.GO-TO-SLIDE' | translate: { current: dotIndex + 1, total: totalSnaps() }\"\n            (click)=\"goTo(dotIndex)\">\n        </button>\n        }\n    </div>\n\n    <button\n        class=\"ecl-quiz__next\"\n        [disabled]=\"nextDisabled()\"\n        (click)=\"onNextClick()\">\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<div class=\"ecl-quiz__live-region\" aria-live=\"polite\" aria-atomic=\"true\">{{ liveRegionText() }}</div>\n","import { EclQuizComponent } from './ecl-quiz.component';\nimport { EclQuizCardComponent } from './ecl-quiz-card.component';\n\nexport * from './ecl-quiz.component';\nexport * from './ecl-quiz-card.component';\n\nexport const EUI_ECL_QUIZ = [\n  EclQuizComponent,\n  EclQuizCardComponent,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"eui-ecl-components-ecl-quiz.mjs","sources":["../../components/ecl-quiz/ecl-quiz-card.component.ts","../../components/ecl-quiz/ecl-quiz-card.component.html","../../components/ecl-quiz/ecl-quiz.component.ts","../../components/ecl-quiz/ecl-quiz.component.html","../../components/ecl-quiz/index.ts","../../components/ecl-quiz/eui-ecl-components-ecl-quiz.ts"],"sourcesContent":["import {\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    Directive,\n    ElementRef,\n    EventEmitter,\n    HostBinding,\n    HostListener,\n    input,\n    Output,\n    signal,\n    ViewChild\n} from '@angular/core';\nimport { EclIconComponent } from '@eui/ecl/components/ecl-icon';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { TranslateModule } from '@ngx-translate/core';\n\nexport interface EclQuizCardFlipEvent {\n    flipped: boolean;\n    selectedOptionIndex?: number;\n    isCorrect?: boolean;\n}\n\n@Directive({\n    selector: 'ol[eclQuizList]',\n})\nexport class EclQuizListDirective {\n    @HostBinding('class.ecl-quiz__list') hasClass = true;\n}\n\n/**\n * ECL Quiz Card component – represents a single card in the quiz.\n *\n * For the 'reveal' variant, the entire card is clickable to flip.\n * For the 'poll' variant, individual options trigger the flip.\n */\n@Component({\n    selector: 'li[eclQuizCard]',\n    host: {\n        '[attr.id]': 'id()',\n        '[attr.aria-labelledby]': 'questionId()',\n        '[class]': 'cssClasses',\n        '[attr.tabindex]': 'tabIndex',\n        '[style.transform]': 'styleTransform',\n        '(click)': 'onClick()',\n        '(keydown)': 'onKeydown($event)',\n    },\n    templateUrl: './ecl-quiz-card.component.html',\n    imports: [EclIconComponent, TranslateModule],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EclQuizCardComponent extends ECLBaseDirective {\n\n    /**\n     * Unique identifier for the card, used for accessibility attributes.\n     * If not provided, a unique ID is generated automatically.\n     */\n    id = input<string>(`ecl-quiz-card-${crypto.randomUUID()}`);\n\n    /**\n     * Unique identifier for the question element.\n     */\n    questionId = computed(() => `${this.id()}-question`);\n\n    /**\n     * Unique identifier for the answer element.\n     */\n    answerId = computed(() => `${this.id()}-answer`);\n\n    /**\n     * The question text displayed on the front of the card.\n     */\n    question = input<string>('');\n\n    /**\n     * The answer text displayed on the back of the card.\n     * Used in 'reveal' variant or as explanation in 'poll' variant.\n     */\n    answer = input<string>('');\n\n    /**\n     * The answer title (e.g. \"The correct answer is A.\") for poll variant.\n     */\n    answerTitle = input<string>('');\n\n    /**\n     * Category label displayed in the card header (poll variant).\n     */\n    category = input<string>('');\n\n    /**\n     * Icon name for the card header.\n     * Defaults to 'sparkle' for reveal, 'question' for poll.\n     */\n    icon = input<string>('');\n\n    /**\n     * Icon size for the card header.\n     */\n    iconSize = input<'xs' | 's' | 'm' | 'l' | 'xl' | '2xl'>('xl');\n\n    /**\n     * The variant of the quiz, set by the parent EclQuizComponent.\n     */\n    variant: 'poll' | 'reveal' = 'reveal';\n\n    /**\n     * Options for the poll variant. Each option has text and a match flag.\n     */\n    options = input<Array<{ text: string; match: boolean }>>([]);\n\n    /**\n     * Emitted when the card is flipped.\n     */\n    @Output() cardFlip = new EventEmitter<EclQuizCardFlipEvent>();\n\n    @ViewChild('frontElement') frontElementRef: ElementRef;\n    @ViewChild('backElement') backElementRef: ElementRef;\n    @ViewChild('questionElement') questionElementRef: ElementRef;\n    @ViewChild('answerElement') answerElementRef: ElementRef;\n    @ViewChild('contentElement') contentElementRef: ElementRef;\n\n    /** Whether the card is currently flipped (showing back). */\n    isFlipped = signal(false);\n\n    /** Index of the selected option (poll variant). */\n    selectedOptionIndex = signal<number | null>(null);\n\n    /** Whether the selected option is correct (poll variant). */\n    isCorrect = signal<boolean | null>(null);\n\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-quiz-card'),\n            this.isFlipped() ? 'ecl-quiz-card__flipped' : '',\n        ]\n            .join(' ')\n            .trim();\n    }\n\n    get tabIndex(): number | null {\n        return this.variant === 'reveal' ? 0 : null;\n    }\n\n    readonly styleTransform = 'translate3d(0px, 0px, 0px)';\n\n    /**\n     * Handle click on the card itself (reveal variant).\n     */\n    onClick(): void {\n        if (this.variant === 'reveal') {\n            this.flipCard();\n        }\n    }\n\n    /**\n     * Handle keyboard events (Enter/Space to flip for reveal variant).\n     */\n    onKeydown(event: KeyboardEvent): void {\n        if (this.variant === 'reveal' && (event.key === 'Enter' || event.key === ' ')) {\n            event.preventDefault();\n            this.flipCard();\n        }\n    }\n\n    /**\n     * Handle option click (poll variant).\n     */\n    onOptionClick(optionIndex: number): void {\n        if (this.isFlipped()) {\n            return;\n        }\n        const optionsList = this.options();\n        this.selectedOptionIndex.set(optionIndex);\n        this.isCorrect.set(optionsList[optionIndex]?.match ?? false);\n        this.flipCard();\n    }\n\n    /**\n     * Handle keyboard on option (poll variant).\n     */\n    onOptionKeydown(event: KeyboardEvent, optionIndex: number): void {\n        if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            this.onOptionClick(optionIndex);\n        }\n    }\n\n    /**\n     * Flip the card between front and back.\n     */\n    flipCard(): void {\n        this.isFlipped.update(v => !v);\n        const event: EclQuizCardFlipEvent = { flipped: this.isFlipped() };\n        if (this.variant === 'poll') {\n            event.selectedOptionIndex = this.selectedOptionIndex();\n            event.isCorrect = this.isCorrect();\n        }\n        this.cardFlip.emit(event);\n    }\n\n    /** Get the native front element for height calculations. */\n    getFrontElement(): HTMLElement | null {\n        return this.frontElementRef?.nativeElement ?? null;\n    }\n\n    /** Get the native back element for height calculations. */\n    getBackElement(): HTMLElement | null {\n        return this.backElementRef?.nativeElement ?? null;\n    }\n\n    /** Get the native question element for height calculations. */\n    getQuestionElement(): HTMLElement | null {\n        return this.questionElementRef?.nativeElement ?? null;\n    }\n\n    /** Get the native answer element for height calculations. */\n    getAnswerElement(): HTMLElement | null {\n        return this.answerElementRef?.nativeElement ?? null;\n    }\n\n    /** Get the native content element for height calculations. */\n    getContentElement(): HTMLElement | null {\n        return this.contentElementRef?.nativeElement ?? null;\n    }\n\n    /** Get the resolved icon name based on variant. */\n    getIconName(): string {\n        if (this.icon()) {\n            return this.icon();\n        }\n        return this.variant === 'poll' ? 'question' : 'sparkle';\n    }\n\n    /** Get the resolved icon size. */\n    getIconSize(): string {\n        return this.iconSize() || (this.variant === 'poll' ? '2xl' : 'xl');\n    }\n}\n","<article class=\"ecl-quiz-card__content\" #contentElement>\n    <!-- Front face -->\n    <div class=\"ecl-quiz-card__front\" #frontElement [hidden]=\"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.CLICK-TO-REVEAL' | translate }}\n            <ecl-icon iconSet=\"phosphor\" icon=\"arrow-clockwise\" size=\"m\"></ecl-icon>\n        </div>\n        } @else {\n        <!-- Poll variant: options -->\n        <fieldset>\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\"\n                    (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\"\n                            (keydown)=\"onOptionKeydown($event, i)\">\n                        {{ option.text }}</label>\n                </li>\n                }\n            </ol>\n        </fieldset>\n        }\n    </div>\n\n    <!-- Back face -->\n    <div class=\"ecl-quiz-card__back\" #backElement [hidden]=\"!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 class=\"ecl-quiz-card__category ecl-quiz-card__category--success\" [attr.tabindex]=\"isFlipped() && isCorrect() === true ? 0 : null\">Correct</span>\n            <span class=\"ecl-quiz-card__category ecl-quiz-card__category--error\" [attr.tabindex]=\"isFlipped() && isCorrect() === false ? 0 : null\">Incorrect</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.GO-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\"\n                [class.ecl-quiz-card__option--selected]=\"selectedOptionIndex() === i\" [attr.data-match]=\"option.match\">\n                {{ option.text }}\n            </li>\n            }\n        </ol>\n        }\n    </div>\n</article>","import {\n    AfterContentInit,\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ContentChildren,\n    ElementRef,\n    forwardRef,\n    HostBinding,\n    inject,\n    input,\n    QueryList,\n    signal,\n    ViewChild,\n    ViewChildren\n} from '@angular/core';\nimport { EclIconComponent } from '@eui/ecl/components/ecl-icon';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { EmblaCarouselDirective, EmblaCarouselType, EmblaEventType } from 'embla-carousel-angular';\nimport { EclQuizCardComponent } from './ecl-quiz-card.component';\n\n/**\n * ECL Quiz component – renders a carousel of quiz cards with navigation.\n * Supports two variants: 'reveal' (flip cards) and 'poll' (multiple choice).\n *\n * Uses Embla Carousel (via embla-carousel-angular) to match the ECL vanilla\n * implementation which also uses Embla internally.\n */\n@Component({\n    selector: 'section[eclQuiz]',\n    templateUrl: './ecl-quiz.component.html',\n    host: {\n        '[class]': 'cssClasses',\n        '(keydown)': 'onKeydown($event)',\n    },\n    imports: [\n        TranslateModule,\n        EclIconComponent,\n        EmblaCarouselDirective,\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EclQuizComponent extends ECLBaseDirective implements AfterContentInit, AfterViewInit {\n\n    /** Quiz variant: 'reveal' for flip cards, 'poll' for multiple choice. */\n    variant = input<'poll' | 'reveal'>('reveal');\n\n    /** Title displayed in the quiz header. */\n    eclTitle = input<string>('');\n\n    /** Description displayed below the title. */\n    eclDescription = input<string>('');\n\n    /** Embla carousel options matching ECL's configuration. */\n    emblaOptions = { loop: false, align: 'start' as const };\n\n    @ContentChildren(forwardRef(() => EclQuizCardComponent), { descendants: true })\n    cards: QueryList<EclQuizCardComponent>;\n\n    @ViewChild(EmblaCarouselDirective) emblaRef: EmblaCarouselDirective;\n    @ViewChildren('dotButton') dotButtons: QueryList<ElementRef>;\n\n    /** Current snap index. */\n    activeIndex = signal(0);\n\n    /** Total number of snap points. */\n    totalSnaps = signal(0);\n\n    /** Counter text for mobile display. */\n    counterText = signal('');\n\n    /** Whether the previous button is disabled. */\n    prevDisabled = signal(true);\n\n    /** Whether the next button is disabled. */\n    nextDisabled = signal(true);\n\n    /** Whether navigation controls should be shown. */\n    showControls = signal(false);\n\n    private cd = inject(ChangeDetectorRef);\n    private emblaApi: EmblaCarouselType | undefined;\n\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-quiz'),\n            `ecl-quiz--${this.variant()}`,\n        ]\n            .join(' ')\n            .trim();\n    }\n\n    ngAfterContentInit(): void {\n        if (this.cards && this.cards.length > 1) {\n            this.showControls.set(true);\n        }\n        this.propagateVariant();\n        this.cards.changes.subscribe(() => this.propagateVariant());\n    }\n\n    ngAfterViewInit(): void {\n        // Give Embla time to initialize\n        setTimeout(() => {\n            this.initEmbla();\n        });\n    }\n\n    /** Handle keyboard events. */\n    onKeydown(event: KeyboardEvent): void {\n        if (event.key === 'Escape') {\n            this.escapeSlider();\n        }\n    }\n\n    /** Navigate to the previous snap. */\n    onPrevClick(): void {\n        if (this.emblaRef) {\n            this.emblaRef.scrollPrev();\n        }\n    }\n\n    /** Navigate to the next snap. */\n    onNextClick(): void {\n        if (this.emblaRef) {\n            this.emblaRef.scrollNext();\n        }\n    }\n\n    /** Navigate to a specific snap index. */\n    goTo(index: number): void {\n        if (this.emblaRef) {\n            this.emblaRef.scrollTo(index);\n        }\n    }\n\n    /** Returns the total number of cards. */\n    getCardsCount(): number {\n        return this.cards?.length ?? 0;\n    }\n\n    /** Returns an array of indices for dot rendering. */\n    getDotIndices(): number[] {\n        return Array.from({ length: this.totalSnaps() }, (_, i) => i);\n    }\n\n    /** Called by the emblaChange event from the directive. */\n    onEmblaChange(eventName: string): void {\n        if (!this.emblaApi) {\n            this.emblaApi = this.emblaRef?.emblaApi;\n        }\n        if (!this.emblaApi) {\n            return;\n        }\n\n        if (eventName === 'select' || eventName === 'init' || eventName === 'reInit') {\n            this.syncState();\n        }\n\n        if (eventName === 'reInit') {\n            this.checkHeight();\n        }\n    }\n\n    /** Subscribed Embla events. */\n    subscribeToEvents: EmblaEventType[] = ['select', 'init', 'reInit'];\n\n    /**\n     * Equalizes the height of all cards based on the tallest content.\n     * Mirrors the ECL vanilla `checkHeight()` logic.\n     */\n    checkHeight(): void {\n        if (!this.cards || this.cards.length === 0) {\n            return;\n        }\n\n        let maxTextHeight = 0;\n        let maxHeight = 0;\n\n        const cardsArray = this.cards.toArray();\n\n        // First pass: find the tallest question/answer text\n        cardsArray.forEach((card) => {\n            const frontEl = card.getFrontElement();\n            const backEl = card.getBackElement();\n            const questionEl = card.getQuestionElement();\n            const answerEl = card.getAnswerElement();\n\n            if (!frontEl || !backEl || !questionEl || !answerEl) {\n                return;\n            }\n\n            frontEl.style.position = 'static';\n            backEl.style.position = 'static';\n\n            questionEl.style.minHeight = '';\n            answerEl.style.minHeight = '';\n\n            const heightQuestion = questionEl.scrollHeight;\n            const heightAnswer = answerEl.scrollHeight;\n            const heightText = Math.max(heightQuestion, heightAnswer);\n\n            if (heightText > maxTextHeight) {\n                maxTextHeight = heightText;\n            }\n\n            frontEl.style.position = '';\n            backEl.style.position = '';\n        });\n\n        // Second pass: apply min-height and find tallest card\n        cardsArray.forEach((card) => {\n            const frontEl = card.getFrontElement();\n            const backEl = card.getBackElement();\n            const questionEl = card.getQuestionElement();\n            const answerEl = card.getAnswerElement();\n            const contentEl = card.getContentElement();\n\n            if (!frontEl || !backEl || !questionEl || !answerEl || !contentEl) {\n                return;\n            }\n\n            frontEl.style.position = 'static';\n            backEl.style.position = 'static';\n            contentEl.style.height = '';\n\n            questionEl.style.minHeight = maxTextHeight + 'px';\n            answerEl.style.minHeight = maxTextHeight + 'px';\n\n            const heightFront = frontEl.scrollHeight;\n            const heightBack = backEl.scrollHeight;\n            const height = Math.max(heightFront, heightBack);\n\n            const minHeight = parseFloat(getComputedStyle(frontEl).getPropertyValue('min-height')) || 345;\n\n            if (height > minHeight && height > maxHeight) {\n                maxHeight = height;\n            }\n\n            frontEl.style.position = '';\n            backEl.style.position = '';\n        });\n\n        // Third pass: apply uniform height\n        if (maxHeight > 0) {\n            cardsArray.forEach((card) => {\n                const contentEl = card.getContentElement();\n                if (contentEl) {\n                    contentEl.style.height = maxHeight + 'px';\n                }\n            });\n        }\n    }\n\n    /** Initialize Embla and wire up state syncing. */\n    private initEmbla(): void {\n        if (!this.emblaRef) {\n            return;\n        }\n\n        this.emblaApi = this.emblaRef.emblaApi;\n\n        if (!this.emblaApi) {\n            return;\n        }\n\n        this.syncState();\n        this.checkHeight();\n        this.cd.detectChanges();\n    }\n\n    /** Sync component state from Embla API. */\n    private syncState(): void {\n        if (!this.emblaApi) {\n            return;\n        }\n\n        const snapList = this.emblaApi.scrollSnapList();\n        const selectedSnap = this.emblaApi.selectedScrollSnap();\n        const canScrollPrev = this.emblaApi.canScrollPrev();\n        const canScrollNext = this.emblaApi.canScrollNext();\n\n        this.totalSnaps.set(snapList.length);\n        this.activeIndex.set(selectedSnap);\n        this.prevDisabled.set(!canScrollPrev);\n        this.nextDisabled.set(!canScrollNext);\n        this.showControls.set(canScrollPrev || canScrollNext);\n\n        this.updateCounter();\n    }\n\n    /** Update the counter text (mobile). */\n    private updateCounter(): void {\n        const total = this.totalSnaps();\n        const current = this.activeIndex() + 1;\n        this.counterText.set(`${current} / ${total}`);\n    }\n\n    /** Move focus to the last dot button when Escape is pressed. */\n    private escapeSlider(): void {\n        if (this.dotButtons && this.dotButtons.length > 0) {\n            const lastDot = this.dotButtons.last;\n            lastDot.nativeElement.focus();\n        }\n    }\n\n    /** Propagate the variant to all child cards. */\n    private propagateVariant(): void {\n        const v = this.variant();\n        this.cards?.forEach(card => {\n            card.variant = v;\n        });\n    }\n}\n","@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        <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]=\"'ecl.quiz.GO-TO-SLIDE' | translate: { current: dotIndex + 1, total: totalSnaps() }\"\n            (click)=\"goTo(dotIndex)\">\n        </button>\n        }\n    </div>\n\n    <button\n        class=\"ecl-quiz__next\"\n        [disabled]=\"nextDisabled()\"\n        (click)=\"onNextClick()\">\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","import { EclQuizComponent } from './ecl-quiz.component';\nimport { EclQuizCardComponent, EclQuizListDirective } from './ecl-quiz-card.component';\n\nexport * from './ecl-quiz.component';\nexport * from './ecl-quiz-card.component';\n\nexport const EUI_ECL_QUIZ = [\n  EclQuizComponent,\n  EclQuizCardComponent,\n  EclQuizListDirective,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}