@eui/ecl 21.2.6 → 21.2.7-snapshot-1780663563127

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

@@ -0,0 +1,496 @@
+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 { 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 { EmblaCarouselDirective } from 'embla-carousel-angular';
+
+/**
+ * ECL Quiz Card component – represents a single card in the quiz.
+ *
+ * For the 'reveal' variant, the entire card is clickable to flip.
+ * For the 'poll' variant, individual options trigger the flip.
+ */
+class EclQuizCardComponent extends ECLBaseDirective {
+    constructor() {
+        super(...arguments);
+        /**
+         * The question text displayed on the front of the card.
+         */
+        this.question = input('', ...(ngDevMode ? [{ debugName: "question" }] : /* istanbul ignore next */ []));
+        /**
+         * The answer text displayed on the back of the card.
+         * Used in 'reveal' variant or as explanation in 'poll' variant.
+         */
+        this.answer = input('', ...(ngDevMode ? [{ debugName: "answer" }] : /* istanbul ignore next */ []));
+        /**
+         * The answer title (e.g. "The correct answer is A.") for poll variant.
+         */
+        this.answerTitle = input('', ...(ngDevMode ? [{ debugName: "answerTitle" }] : /* istanbul ignore next */ []));
+        /**
+         * Category label displayed in the card header (poll variant).
+         */
+        this.category = input('', ...(ngDevMode ? [{ debugName: "category" }] : /* istanbul ignore next */ []));
+        /**
+         * Icon name for the card header.
+         * Defaults to 'sparkle' for reveal, 'question' for poll.
+         */
+        this.icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+        /**
+         * Icon size for the card header.
+         */
+        this.iconSize = input('xl', ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
+        /**
+         * The variant of the quiz, set by the parent EclQuizComponent.
+         */
+        this.variant = 'reveal';
+        /**
+         * 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;
+        /** Index of the selected option (poll variant). */
+        this.selectedOptionIndex = null;
+        /** Whether the selected option is correct (poll variant). */
+        this.isCorrect = null;
+        this.role = 'group';
+        this.ariaRoleDescription = null;
+        this.ariaHidden = null;
+        this.styleTransform = 'translate3d(0px, 0px, 0px)';
+    }
+    get cssClasses() {
+        return [
+            super.getCssClasses('ecl-quiz-card'),
+            this.isFlipped ? 'ecl-quiz-card__flipped' : '',
+        ]
+            .join(' ')
+            .trim();
+    }
+    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).
+     */
+    onClick() {
+        if (this.variant === 'reveal') {
+            this.flipCard();
+        }
+    }
+    /**
+     * Handle keyboard events (Enter/Space to flip for reveal variant).
+     */
+    onKeydown(event) {
+        if (this.variant === 'reveal' && (event.key === 'Enter' || event.key === ' ')) {
+            event.preventDefault();
+            this.flipCard();
+        }
+    }
+    /**
+     * Handle option click (poll variant).
+     */
+    onOptionClick(optionIndex) {
+        if (this.isFlipped) {
+            return;
+        }
+        const optionsList = this.options();
+        this.selectedOptionIndex = optionIndex;
+        this.isCorrect = optionsList[optionIndex]?.match ?? false;
+        this.flipCard();
+    }
+    /**
+     * Handle keyboard on option (poll variant).
+     */
+    onOptionKeydown(event, optionIndex) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.onOptionClick(optionIndex);
+        }
+    }
+    /**
+     * Flip the card between front and back.
+     */
+    flipCard() {
+        this.isFlipped = !this.isFlipped;
+        const event = { flipped: this.isFlipped };
+        if (this.variant === 'poll') {
+            event.selectedOptionIndex = this.selectedOptionIndex;
+            event.isCorrect = this.isCorrect;
+        }
+        this.cardFlip.emit(event);
+    }
+    /** Get the native front element for height calculations. */
+    getFrontElement() {
+        return this.frontElementRef?.nativeElement ?? null;
+    }
+    /** Get the native back element for height calculations. */
+    getBackElement() {
+        return this.backElementRef?.nativeElement ?? null;
+    }
+    /** Get the native question element for height calculations. */
+    getQuestionElement() {
+        return this.questionElementRef?.nativeElement ?? null;
+    }
+    /** Get the native answer element for height calculations. */
+    getAnswerElement() {
+        return this.answerElementRef?.nativeElement ?? null;
+    }
+    /** Get the native content element for height calculations. */
+    getContentElement() {
+        return this.contentElementRef?.nativeElement ?? null;
+    }
+    /** Get the resolved icon name based on variant. */
+    getIconName() {
+        if (this.icon()) {
+            return this.icon();
+        }
+        return this.variant === 'poll' ? 'question' : 'sparkle';
+    }
+    /** Get the resolved icon size. */
+    getIconSize() {
+        return this.iconSize() || (this.variant === 'poll' ? '2xl' : 'xl');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: EclQuizCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", 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: [{
+                type: Output
+            }], frontElementRef: [{
+                type: ViewChild,
+                args: ['frontElement']
+            }], backElementRef: [{
+                type: ViewChild,
+                args: ['backElement']
+            }], questionElementRef: [{
+                type: ViewChild,
+                args: ['questionElement']
+            }], answerElementRef: [{
+                type: ViewChild,
+                args: ['answerElement']
+            }], 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']]
+            }] } });
+
+/**
+ * ECL Quiz component – renders a carousel of quiz cards with navigation.
+ * Supports two variants: 'reveal' (flip cards) and 'poll' (multiple choice).
+ *
+ * Uses Embla Carousel (via embla-carousel-angular) to match the ECL vanilla
+ * implementation which also uses Embla internally.
+ */
+class EclQuizComponent extends ECLBaseDirective {
+    constructor() {
+        super(...arguments);
+        /** Quiz variant: 'reveal' for flip cards, 'poll' for multiple choice. */
+        this.variant = input('reveal', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        /** Title displayed in the quiz header. */
+        this.eclTitle = input('', ...(ngDevMode ? [{ debugName: "eclTitle" }] : /* istanbul ignore next */ []));
+        /** Description displayed below the title. */
+        this.eclDescription = input('', ...(ngDevMode ? [{ debugName: "eclDescription" }] : /* istanbul ignore next */ []));
+        /** Embla carousel options matching ECL's configuration. */
+        this.emblaOptions = { loop: false, align: 'start' };
+        /** Current snap index. */
+        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. */
+        this.prevDisabled = signal(true, ...(ngDevMode ? [{ debugName: "prevDisabled" }] : /* istanbul ignore next */ []));
+        /** Whether the next button is disabled. */
+        this.nextDisabled = signal(true, ...(ngDevMode ? [{ debugName: "nextDisabled" }] : /* istanbul ignore next */ []));
+        /** 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'];
+    }
+    get cssClasses() {
+        return [
+            super.getCssClasses('ecl-quiz'),
+            `ecl-quiz--${this.variant()}`,
+        ]
+            .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);
+        }
+        this.propagateVariant();
+        this.cards.changes.subscribe(() => this.propagateVariant());
+    }
+    ngAfterViewInit() {
+        // Give Embla time to initialize
+        setTimeout(() => {
+            this.initEmbla();
+        });
+    }
+    /** Handle keyboard events. */
+    onKeydown(event) {
+        if (event.key === 'Escape') {
+            this.escapeSlider();
+        }
+    }
+    /** Navigate to the previous snap. */
+    onPrevClick() {
+        if (this.emblaRef) {
+            this.emblaRef.scrollPrev();
+        }
+    }
+    /** Navigate to the next snap. */
+    onNextClick() {
+        if (this.emblaRef) {
+            this.emblaRef.scrollNext();
+        }
+    }
+    /** Navigate to a specific snap index. */
+    goTo(index) {
+        if (this.emblaRef) {
+            this.emblaRef.scrollTo(index);
+        }
+    }
+    /** Returns the total number of cards. */
+    getCardsCount() {
+        return this.cards?.length ?? 0;
+    }
+    /** Returns an array of indices for dot rendering. */
+    getDotIndices() {
+        return Array.from({ length: this.totalSnaps() }, (_, i) => i);
+    }
+    /** Called by the emblaChange event from the directive. */
+    onEmblaChange(eventName) {
+        if (!this.emblaApi) {
+            this.emblaApi = this.emblaRef?.emblaApi;
+        }
+        if (!this.emblaApi) {
+            return;
+        }
+        if (eventName === 'select' || eventName === 'init' || eventName === 'reInit') {
+            this.syncState();
+        }
+        if (eventName === 'reInit') {
+            this.checkHeight();
+        }
+    }
+    /**
+     * Equalizes the height of all cards based on the tallest content.
+     * Mirrors the ECL vanilla `checkHeight()` logic.
+     */
+    checkHeight() {
+        if (!this.cards || this.cards.length === 0) {
+            return;
+        }
+        let maxTextHeight = 0;
+        let maxHeight = 0;
+        const cardsArray = this.cards.toArray();
+        // First pass: find the tallest question/answer text
+        cardsArray.forEach((card) => {
+            const frontEl = card.getFrontElement();
+            const backEl = card.getBackElement();
+            const questionEl = card.getQuestionElement();
+            const answerEl = card.getAnswerElement();
+            if (!frontEl || !backEl || !questionEl || !answerEl) {
+                return;
+            }
+            frontEl.style.position = 'static';
+            backEl.style.position = 'static';
+            questionEl.style.minHeight = '';
+            answerEl.style.minHeight = '';
+            const heightQuestion = questionEl.scrollHeight;
+            const heightAnswer = answerEl.scrollHeight;
+            const heightText = Math.max(heightQuestion, heightAnswer);
+            if (heightText > maxTextHeight) {
+                maxTextHeight = heightText;
+            }
+            frontEl.style.position = '';
+            backEl.style.position = '';
+        });
+        // Second pass: apply min-height and find tallest card
+        cardsArray.forEach((card) => {
+            const frontEl = card.getFrontElement();
+            const backEl = card.getBackElement();
+            const questionEl = card.getQuestionElement();
+            const answerEl = card.getAnswerElement();
+            const contentEl = card.getContentElement();
+            if (!frontEl || !backEl || !questionEl || !answerEl || !contentEl) {
+                return;
+            }
+            frontEl.style.position = 'static';
+            backEl.style.position = 'static';
+            contentEl.style.height = '';
+            questionEl.style.minHeight = maxTextHeight + 'px';
+            answerEl.style.minHeight = maxTextHeight + 'px';
+            const heightFront = frontEl.scrollHeight;
+            const heightBack = backEl.scrollHeight;
+            const height = Math.max(heightFront, heightBack);
+            const minHeight = parseFloat(getComputedStyle(frontEl).getPropertyValue('min-height')) || 345;
+            if (height > minHeight && height > maxHeight) {
+                maxHeight = height;
+            }
+            frontEl.style.position = '';
+            backEl.style.position = '';
+        });
+        // Third pass: apply uniform height
+        if (maxHeight > 0) {
+            cardsArray.forEach((card) => {
+                const contentEl = card.getContentElement();
+                if (contentEl) {
+                    contentEl.style.height = maxHeight + 'px';
+                }
+            });
+        }
+    }
+    /** Initialize Embla and wire up state syncing. */
+    initEmbla() {
+        if (!this.emblaRef) {
+            return;
+        }
+        this.emblaApi = this.emblaRef.emblaApi;
+        if (!this.emblaApi) {
+            return;
+        }
+        this.syncState();
+        this.checkHeight();
+        this.cd.detectChanges();
+    }
+    /** Sync component state from Embla API. */
+    syncState() {
+        if (!this.emblaApi) {
+            return;
+        }
+        const snapList = this.emblaApi.scrollSnapList();
+        const selectedSnap = this.emblaApi.selectedScrollSnap();
+        const canScrollPrev = this.emblaApi.canScrollPrev();
+        const canScrollNext = this.emblaApi.canScrollNext();
+        this.totalSnaps.set(snapList.length);
+        this.activeIndex.set(selectedSnap);
+        this.prevDisabled.set(!canScrollPrev);
+        this.nextDisabled.set(!canScrollNext);
+        this.showControls.set(canScrollPrev || canScrollNext);
+        this.updateCounter();
+        this.updateLiveRegion();
+    }
+    /** Update the counter text (mobile). */
+    updateCounter() {
+        const total = this.totalSnaps();
+        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) {
+            const lastDot = this.dotButtons.last;
+            lastDot.nativeElement.focus();
+        }
+    }
+    /** Propagate the variant and aria-roledescription 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.15", ngImport: i0, type: EclQuizComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: EclQuizComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'div[eclQuiz]', 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" }]
+        }], 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)]
+            }], 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,
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { EUI_ECL_QUIZ, EclQuizCardComponent, EclQuizComponent };
+//# sourceMappingURL=eui-ecl-components-ecl-quiz.mjs.map

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

@@ -0,0 +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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"}

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

@@ -193,6 +193,7 @@ class EclRangeDirective extends ECLBaseDirective {
             return;
         this.container = this.renderer.createElement('div');
         this.renderer.addClass(this.container, 'ecl-range-container');
+        this.renderer.addClass(this.container, `ecl-range-container--${this.eclSize()}`);
         // Insert wrapper before input
         this.renderer.insertBefore(parent, this.container, input);
         // Move input inside wrapper