@dereekb/dbx-form 13.3.1 → 13.4.0

package/fesm2022/dereekb-dbx-form-quiz.mjs

@@ -0,0 +1,773 @@
+import * as i0 from '@angular/core';
+import { Injectable, inject, input, effect, computed, Component, model } from '@angular/core';
+import { ComponentStore } from '@ngrx/component-store';
+import { asArray, range } from '@dereekb/util';
+import { map, combineLatest, distinctUntilChanged, shareReplay, switchMap, of, first } from 'rxjs';
+import { asObservable } from '@dereekb/rxjs';
+import { toObservable, toSignal } from '@angular/core/rxjs-interop';
+import * as i1$1 from '@dereekb/dbx-core';
+import { DbxInjectionComponent } from '@dereekb/dbx-core';
+import { NgTemplateOutlet } from '@angular/common';
+import * as i1 from '@dereekb/dbx-web';
+import { DbxButtonModule, DbxWindowKeyDownListenerDirective, DbxActionModule } from '@dereekb/dbx-web';
+
+/**
+ * NgRx ComponentStore that manages quiz lifecycle: question navigation, answer tracking,
+ * submission state, and navigation locking.
+ *
+ * Provided at the component level by `QuizComponent`.
+ *
+ * @example
+ * ```ts
+ * // Access from a child component via DI:
+ * readonly quizStore = inject(QuizStore);
+ * this.quizStore.startQuiz();
+ * this.quizStore.updateAnswerForCurrentQuestion(5);
+ * ```
+ */
+class QuizStore extends ComponentStore {
+    constructor() {
+        super({
+            quiz: undefined,
+            startedQuiz: false,
+            submittedQuiz: false,
+            answers: new Map(),
+            questionIndex: undefined,
+            unansweredQuestions: [],
+            completedQuestions: [],
+            questionMap: undefined,
+            autoAdvanceToNextQuestion: true,
+            allowVisitingPreviousQuestion: true,
+            allowSkipQuestion: false
+        });
+    }
+    quiz$ = this.select((state) => state.quiz);
+    titleDetails$ = this.quiz$.pipe(map((quiz) => quiz?.titleDetails));
+    questions$ = this.quiz$.pipe(map((quiz) => quiz?.questions ?? []));
+    startedQuiz$ = this.select((state) => state.startedQuiz);
+    lockQuizNavigation$ = this.select((state) => state.lockQuizNavigation);
+    submittedQuiz$ = this.select((state) => state.submittedQuiz);
+    answers$ = this.select((state) => state.answers);
+    questionIndex$ = this.select((state) => state.questionIndex ?? 0);
+    completedQuestions$ = this.select((state) => state.completedQuestions);
+    unansweredQuestions$ = this.select((state) => state.unansweredQuestions);
+    hasAnswerForEachQuestion$ = this.select((state) => state.unansweredQuestions.length === 0);
+    isAtEndOfQuestions$ = this.select((state) => (state.questionIndex ?? 0) >= (state.quiz?.questions.length ?? 0));
+    canGoToPreviousQuestion$ = this.select((state) => !state.lockQuizNavigation && state.allowVisitingPreviousQuestion && state.questionIndex != null && state.questionIndex > 0);
+    canGoToNextQuestion$ = this.select((state) => {
+        const newQuestionIndex = computeAdvanceIndexOnState(state, 1);
+        return !state.lockQuizNavigation && state.questionIndex != null && newQuestionIndex != null && newQuestionIndex > state.questionIndex;
+    });
+    currentQuestion$ = combineLatest([this.questions$, this.questionIndex$]).pipe(map(([questions, questionIndex]) => {
+        const question = questions[questionIndex];
+        let result;
+        if (question) {
+            result = {
+                ...question,
+                index: questionIndex
+            };
+        }
+        return result;
+    }), distinctUntilChanged(), shareReplay(1));
+    /**
+     * Returns a reactive observable of the answer for a given question, looked up by id, index, or the current question.
+     *
+     * @example
+     * ```ts
+     * // By current question:
+     * store.answerForQuestion({ currentIndex: true }).subscribe(answer => console.log(answer));
+     * // By question id:
+     * store.answerForQuestion({ id: 'q1' }).subscribe(answer => console.log(answer));
+     * ```
+     */
+    answerForQuestion(lookupInput) {
+        return asObservable(lookupInput).pipe(switchMap((lookup) => {
+            const { id, index, currentIndex } = lookup;
+            let result;
+            if (currentIndex) {
+                result = this.currentQuestion$.pipe(switchMap((question) => this.answerForQuestion({ index: question?.index })));
+            }
+            else if (id != null) {
+                result = this.answers$.pipe(map((answers) => answers.get(id)));
+            }
+            else if (index != null) {
+                result = this.questions$.pipe(switchMap((questions) => {
+                    const question = questions[index];
+                    let result;
+                    if (question) {
+                        result = this.answerForQuestion({ id: question.id });
+                    }
+                    else {
+                        result = of(undefined);
+                    }
+                    return result;
+                }));
+            }
+            else {
+                result = of(undefined);
+            }
+            return result;
+        }), distinctUntilChanged(), shareReplay(1));
+    }
+    startQuiz = this.updater((state) => startQuizOnState(state));
+    setQuiz = this.updater((state, quiz) => setQuizOnState(state, quiz));
+    /**
+     * Resets the quiz entirely, back to the pre-quiz state.
+     */
+    resetQuiz = this.updater((state) => resetQuizOnState(state));
+    /**
+     * Restarts the quiz to the first question.
+     */
+    restartQuizToFirstQuestion = this.updater((state) => restartQuizToFirstQuestionOnState(state));
+    setAnswers = this.updater((state, answers) => setAnswersOnState(state, answers));
+    updateAnswers = this.updater((state, answers) => updateAnswersOnState(state, answers));
+    updateAnswerForCurrentQuestion = this.updater((state, answerData) => updateAnswerForCurrentQuestionOnState(state, answerData));
+    setQuestionIndex = this.updater((state, questionIndex) => ({ ...state, questionIndex }));
+    setAutoAdvanceToNextQuestion = this.updater((state, autoAdvanceToNextQuestion) => ({ ...state, autoAdvanceToNextQuestion }));
+    setAllowSkipQuestion = this.updater((state, allowSkipQuestion) => ({ ...state, allowSkipQuestion }));
+    setAllowVisitingPreviousQuestion = this.updater((state, allowVisitingPreviousQuestion) => ({ ...state, allowVisitingPreviousQuestion }));
+    goToNextQuestion = this.updater((state) => advanceQuestionOnState(state, 1));
+    goToPreviousQuestion = this.updater((state) => advanceQuestionOnState(state, -1));
+    setLockQuizNavigation = this.updater((state, lockQuizNavigation) => ({ ...state, lockQuizNavigation }));
+    setSubmittedQuiz = this.updater((state, submittedQuiz) => ({ ...state, submittedQuiz }));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: QuizStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: QuizStore });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: QuizStore, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+function computeAdvanceIndexOnState(state, advancement) {
+    const { questionIndex, allowSkipQuestion, unansweredQuestions, lockQuizNavigation } = state;
+    const maxQuestionIndex = state.quiz?.questions.length;
+    let newQuestionIndex;
+    if (maxQuestionIndex != null && questionIndex != null && !lockQuizNavigation) {
+        let maxAllowedIndex = maxQuestionIndex;
+        if (!allowSkipQuestion) {
+            maxAllowedIndex = unansweredQuestions[0]?.index ?? maxQuestionIndex;
+        }
+        newQuestionIndex = Math.max(0, Math.min(maxAllowedIndex, questionIndex + advancement));
+    }
+    return newQuestionIndex;
+}
+function advanceQuestionOnState(state, advancement) {
+    const newQuestionIndex = computeAdvanceIndexOnState(state, advancement);
+    let nextState = state;
+    if (newQuestionIndex != null) {
+        nextState = {
+            ...state,
+            questionIndex: newQuestionIndex
+        };
+    }
+    return nextState;
+}
+function startQuizOnState(state) {
+    const { startedQuiz } = state;
+    let nextState = state;
+    if (!startedQuiz) {
+        nextState = {
+            ...state,
+            startedQuiz: true,
+            submittedQuiz: false,
+            lockQuizNavigation: false,
+            questionIndex: 0
+        };
+    }
+    return nextState;
+}
+function resetQuizOnState(state) {
+    return {
+        ...restartQuizToFirstQuestionOnState(state),
+        startedQuiz: false
+    };
+}
+function restartQuizToFirstQuestionOnState(state) {
+    return setAnswersOnState(startQuizOnState({
+        ...state,
+        startedQuiz: false
+    }), []);
+}
+function setQuizOnState(state, quiz) {
+    let questionMap = undefined;
+    const currentAnswers = Array.from(state.answers.values());
+    if (quiz?.questions) {
+        questionMap = new Map(quiz.questions.map((question) => [question.id, question]));
+    }
+    return setAnswersOnState({ ...state, quiz, questionMap }, currentAnswers);
+}
+function setAnswersOnState(state, newAnswers) {
+    return updateAnswersOnState({
+        ...state,
+        answers: new Map()
+    }, newAnswers);
+}
+function updateAnswerForCurrentQuestionOnState(state, answerData) {
+    const { questionIndex } = state;
+    let nextState = state;
+    if (questionIndex != null) {
+        const currentQuestion = state.quiz?.questions[questionIndex];
+        if (currentQuestion) {
+            const answer = {
+                id: currentQuestion.id,
+                data: answerData
+            };
+            nextState = updateAnswersOnState(state, [answer]);
+            if (state.autoAdvanceToNextQuestion) {
+                nextState.questionIndex = questionIndex + 1;
+            }
+        }
+    }
+    return nextState;
+}
+function updateAnswersOnState(state, inputAnswers) {
+    const { quiz, answers: currentAnswers } = state;
+    const answers = new Map(currentAnswers);
+    asArray(inputAnswers).forEach((answer) => {
+        answers.set(answer.id, answer);
+    });
+    const completedQuestions = [];
+    const unansweredQuestions = [];
+    if (quiz?.questions) {
+        quiz.questions.forEach((question, index) => {
+            if (answers.has(question.id)) {
+                completedQuestions.push({ id: question.id, index });
+            }
+            else {
+                unansweredQuestions.push({ id: question.id, index });
+            }
+        });
+    }
+    return { ...state, unansweredQuestions, completedQuestions, answers };
+}
+
+/**
+ * Abstract accessor injected into answer/question child components to read the current question
+ * and write answers back to the QuizStore without coupling to it directly.
+ *
+ * Use `provideCurrentQuestionQuizQuestionAccessor()` to bind this to the store's current question.
+ */
+class QuizQuestionAccessor {
+}
+/**
+ * Provides QuizQuestionAccessor bound to the current question in QuizStore.
+ *
+ * @usage
+ * ```typescript
+ * @Component({
+ *   providers: [QuizStore, provideCurrentQuestionQuizQuestionAccessor()]
+ * })
+ * ```
+ */
+function provideCurrentQuestionQuizQuestionAccessor() {
+    return {
+        provide: QuizQuestionAccessor,
+        useFactory: (quizStore) => {
+            return {
+                quiz$: quizStore.quiz$,
+                question$: quizStore.currentQuestion$,
+                answer$: quizStore.answerForQuestion({ currentIndex: true }),
+                setAnswer: (answer) => quizStore.updateAnswerForCurrentQuestion(answer),
+                setAnswerSource: (answer) => quizStore.updateAnswerForCurrentQuestion(answer)
+            };
+        },
+        deps: [QuizStore]
+    };
+}
+
+/**
+ * Top-level quiz container that orchestrates pre-quiz, active quiz, and post-quiz views.
+ *
+ * Provides its own `QuizStore` and `QuizQuestionAccessor`, so child components injected via
+ * `DbxInjectionComponent` can access quiz state directly through DI.
+ *
+ * Supports keyboard navigation: Enter (start / next), ArrowLeft (previous), ArrowRight (next).
+ *
+ * @example
+ * ```html
+ * <dbx-quiz [quiz]="myQuiz"></dbx-quiz>
+ * ```
+ */
+class QuizComponent {
+    quizStore = inject(QuizStore);
+    quiz = input.required(...(ngDevMode ? [{ debugName: "quiz" }] : []));
+    keysFilter = ['Enter', 'ArrowLeft', 'ArrowRight'];
+    quizEffect = effect(() => {
+        const quiz = this.quiz();
+        this.quizStore.setQuiz(quiz);
+    }, { ...(ngDevMode ? { debugName: "quizEffect" } : {}), allowSignalWrites: true });
+    quiz$ = toObservable(this.quiz);
+    quizTitleSignal = computed(() => this.quiz()?.titleDetails.title, ...(ngDevMode ? [{ debugName: "quizTitleSignal" }] : []));
+    currentQuestionSignal = toSignal(this.quizStore.currentQuestion$);
+    questionTitleSignal = computed(() => {
+        const currentQuestion = this.currentQuestionSignal();
+        return currentQuestion ? `Question ${currentQuestion.index + 1}` : '';
+    }, ...(ngDevMode ? [{ debugName: "questionTitleSignal" }] : []));
+    startedQuiz$ = this.quizStore.startedQuiz$;
+    currentQuestion$ = this.quizStore.currentQuestion$;
+    canGoToPreviousQuestionSignal = toSignal(this.quizStore.canGoToPreviousQuestion$, { initialValue: false });
+    canGoToNextQuestionSignal = toSignal(this.quizStore.canGoToNextQuestion$, { initialValue: false });
+    viewConfig$ = this.startedQuiz$.pipe(switchMap((started) => {
+        if (!started) {
+            return this.quiz$.pipe(map((quiz) => {
+                const viewConfig = {
+                    state: 'pre-quiz',
+                    preQuizComponent: quiz?.preQuizComponentConfig
+                };
+                return viewConfig;
+            }));
+        }
+        else {
+            return combineLatest([this.quiz$, this.currentQuestion$, this.quizStore.isAtEndOfQuestions$]).pipe(map(([quiz, currentQuestion, isAtEndOfQuestions]) => {
+                let viewConfig;
+                if (isAtEndOfQuestions) {
+                    viewConfig = {
+                        state: 'post-quiz',
+                        resultsComponent: quiz?.resultsComponentConfig
+                    };
+                }
+                else {
+                    viewConfig = {
+                        state: 'quiz',
+                        questionComponent: currentQuestion?.questionComponentConfig,
+                        answerComponent: currentQuestion?.answerComponentConfig
+                    };
+                }
+                return viewConfig;
+            }));
+        }
+    }));
+    viewConfigSignal = toSignal(this.viewConfig$, { initialValue: { state: 'init' } });
+    viewStateSignal = computed(() => this.viewConfigSignal()?.state ?? 'init', ...(ngDevMode ? [{ debugName: "viewStateSignal" }] : []));
+    preQuizComponentConfigSignal = computed(() => this.viewConfigSignal()?.preQuizComponent, ...(ngDevMode ? [{ debugName: "preQuizComponentConfigSignal" }] : []));
+    questionComponentConfigSignal = computed(() => this.viewConfigSignal()?.questionComponent, ...(ngDevMode ? [{ debugName: "questionComponentConfigSignal" }] : []));
+    answerComponentConfigSignal = computed(() => this.viewConfigSignal()?.answerComponent, ...(ngDevMode ? [{ debugName: "answerComponentConfigSignal" }] : []));
+    resultsComponentConfigSignal = computed(() => this.viewConfigSignal()?.resultsComponent, ...(ngDevMode ? [{ debugName: "resultsComponentConfigSignal" }] : []));
+    handleKeyDown(event) {
+        const code = event.code;
+        switch (code) {
+            case 'Enter':
+                this.quizStore.startedQuiz$.pipe(first()).subscribe((started) => {
+                    if (!started) {
+                        this.quizStore.startQuiz();
+                    }
+                    else {
+                        this.clickNextQuestion();
+                    }
+                });
+                break;
+            case 'ArrowLeft':
+                this.clickPreviousQuestion();
+                break;
+            case 'ArrowRight':
+                this.clickNextQuestion();
+                break;
+        }
+    }
+    clickPreviousQuestion() {
+        this.quizStore.goToPreviousQuestion();
+    }
+    clickNextQuestion() {
+        this.quizStore.goToNextQuestion();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: QuizComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: QuizComponent, isStandalone: true, selector: "dbx-quiz", inputs: { quiz: { classPropertyName: "quiz", publicName: "quiz", isSignal: true, isRequired: true, transformFunction: null } }, providers: [QuizStore, provideCurrentQuestionQuizQuestionAccessor()], ngImport: i0, template: "<div class=\"dbx-quiz\" (dbxWindowKeyDownListener)=\"handleKeyDown($event)\" [dbxWindowKeyDownFilter]=\"keysFilter\">\n  @switch (viewStateSignal()) {\n    @case ('pre-quiz') {\n      <ng-container *ngTemplateOutlet=\"preQuizTemplate\"></ng-container>\n    }\n    @case ('quiz') {\n      <ng-container *ngTemplateOutlet=\"quizTemplate\"></ng-container>\n    }\n    @case ('post-quiz') {\n      <ng-container *ngTemplateOutlet=\"postQuizTemplate\"></ng-container>\n    }\n  }\n</div>\n\n<!-- Pre-Quiz -->\n<ng-template #preQuizTemplate>\n  <div class=\"dbx-quiz-pre-quiz\">\n    <dbx-injection [config]=\"preQuizComponentConfigSignal()\"></dbx-injection>\n  </div>\n</ng-template>\n\n<!-- Quiz -->\n<ng-template #quizTemplate>\n  <div class=\"dbx-quiz-quiz\">\n    <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n    <div class=\"dbx-quiz-question dbx-pb3\">\n      <h4 class=\"dbx-quiz-question-title\">{{ questionTitleSignal() }}</h4>\n      <dbx-injection [config]=\"questionComponentConfigSignal()\"></dbx-injection>\n    </div>\n    <div class=\"dbx-quiz-answer dbx-pt3\">\n      <dbx-injection [config]=\"answerComponentConfigSignal()\"></dbx-injection>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Post-Quiz -->\n<ng-template #postQuizTemplate>\n  <div class=\"dbx-quiz-post-quiz\">\n    <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n    <dbx-injection [config]=\"resultsComponentConfigSignal()\"></dbx-injection>\n  </div>\n</ng-template>\n\n<!-- Header Template -->\n<ng-template #headerTemplate>\n  <div class=\"dbx-quiz-header\">\n    <div class=\"dbx-flex-group\">\n      <dbx-button [disabled]=\"!canGoToPreviousQuestionSignal()\" icon=\"arrow_back\" (buttonClick)=\"clickPreviousQuestion()\"></dbx-button>\n      <span class=\"spacer\"></span>\n      <span class=\"mat-h2\">{{ quizTitleSignal() }}</span>\n      <span class=\"spacer\"></span>\n      <dbx-button [disabled]=\"!canGoToNextQuestionSignal()\" icon=\"arrow_forward\" (buttonClick)=\"clickNextQuestion()\"></dbx-button>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "ngmodule", type: DbxButtonModule }, { kind: "component", type: i1.DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "mode"] }, { kind: "directive", type: DbxWindowKeyDownListenerDirective, selector: "[dbxWindowKeyDownListener]", inputs: ["dbxWindowKeyDownEnabled", "dbxWindowKeyDownFilter"], outputs: ["dbxWindowKeyDownListener"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: QuizComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dbx-quiz', imports: [DbxInjectionComponent, DbxButtonModule, DbxWindowKeyDownListenerDirective, NgTemplateOutlet], providers: [QuizStore, provideCurrentQuestionQuizQuestionAccessor()], standalone: true, template: "<div class=\"dbx-quiz\" (dbxWindowKeyDownListener)=\"handleKeyDown($event)\" [dbxWindowKeyDownFilter]=\"keysFilter\">\n  @switch (viewStateSignal()) {\n    @case ('pre-quiz') {\n      <ng-container *ngTemplateOutlet=\"preQuizTemplate\"></ng-container>\n    }\n    @case ('quiz') {\n      <ng-container *ngTemplateOutlet=\"quizTemplate\"></ng-container>\n    }\n    @case ('post-quiz') {\n      <ng-container *ngTemplateOutlet=\"postQuizTemplate\"></ng-container>\n    }\n  }\n</div>\n\n<!-- Pre-Quiz -->\n<ng-template #preQuizTemplate>\n  <div class=\"dbx-quiz-pre-quiz\">\n    <dbx-injection [config]=\"preQuizComponentConfigSignal()\"></dbx-injection>\n  </div>\n</ng-template>\n\n<!-- Quiz -->\n<ng-template #quizTemplate>\n  <div class=\"dbx-quiz-quiz\">\n    <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n    <div class=\"dbx-quiz-question dbx-pb3\">\n      <h4 class=\"dbx-quiz-question-title\">{{ questionTitleSignal() }}</h4>\n      <dbx-injection [config]=\"questionComponentConfigSignal()\"></dbx-injection>\n    </div>\n    <div class=\"dbx-quiz-answer dbx-pt3\">\n      <dbx-injection [config]=\"answerComponentConfigSignal()\"></dbx-injection>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Post-Quiz -->\n<ng-template #postQuizTemplate>\n  <div class=\"dbx-quiz-post-quiz\">\n    <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n    <dbx-injection [config]=\"resultsComponentConfigSignal()\"></dbx-injection>\n  </div>\n</ng-template>\n\n<!-- Header Template -->\n<ng-template #headerTemplate>\n  <div class=\"dbx-quiz-header\">\n    <div class=\"dbx-flex-group\">\n      <dbx-button [disabled]=\"!canGoToPreviousQuestionSignal()\" icon=\"arrow_back\" (buttonClick)=\"clickPreviousQuestion()\"></dbx-button>\n      <span class=\"spacer\"></span>\n      <span class=\"mat-h2\">{{ quizTitleSignal() }}</span>\n      <span class=\"spacer\"></span>\n      <dbx-button [disabled]=\"!canGoToNextQuestionSignal()\" icon=\"arrow_forward\" (buttonClick)=\"clickNextQuestion()\"></dbx-button>\n    </div>\n  </div>\n</ng-template>\n" }]
+        }], propDecorators: { quiz: [{ type: i0.Input, args: [{ isSignal: true, alias: "quiz", required: true }] }] } });
+
+/**
+ * Answer component that displays configurable number buttons.
+ *
+ * @usage
+ * Used as an answer component in a QuizQuestion's answerComponentConfig.
+ * Defaults to 1-5 range if no config is provided.
+ *
+ * ```typescript
+ * answerComponentConfig: {
+ *   componentClass: QuizAnswerNumberComponent,
+ *   init: (instance: QuizAnswerNumberComponent) => {
+ *     instance.config.set({ range: { start: 1, end: 11 } });
+ *   }
+ * }
+ * ```
+ */
+class QuizAnswerNumberComponent {
+    questionAccessor = inject(QuizQuestionAccessor);
+    config = model(...(ngDevMode ? [undefined, { debugName: "config" }] : []));
+    currentAnswerSignal = toSignal(this.questionAccessor.answer$);
+    currentAnswerValueSignal = computed(() => this.currentAnswerSignal()?.data, ...(ngDevMode ? [{ debugName: "currentAnswerValueSignal" }] : []));
+    choicesSignal = computed(() => {
+        const { range: inputRange, numbers: inputNumbers, preset } = this.config() ?? { preset: 'oneToFive' };
+        const currentAnswer = this.currentAnswerValueSignal();
+        let useRange;
+        let useNumbers;
+        if (preset) {
+            switch (preset) {
+                case 'oneToFive':
+                default:
+                    useRange = { start: 1, end: 6 };
+                    break;
+            }
+        }
+        else if (inputRange) {
+            useRange = inputRange;
+        }
+        else if (inputNumbers) {
+            useNumbers = inputNumbers;
+        }
+        let numbers;
+        if (useRange) {
+            numbers = range(useRange);
+        }
+        else if (useNumbers) {
+            numbers = useNumbers ?? [];
+        }
+        else {
+            numbers = [];
+        }
+        const choices = numbers.map((number) => {
+            return {
+                number,
+                selected: currentAnswer === number
+            };
+        });
+        return choices;
+    }, ...(ngDevMode ? [{ debugName: "choicesSignal" }] : []));
+    relevantKeysSignal = computed(() => {
+        const choices = this.choicesSignal();
+        return choices.map((choice) => choice.number.toString());
+    }, ...(ngDevMode ? [{ debugName: "relevantKeysSignal" }] : []));
+    clickedAnswer(answer) {
+        this.questionAccessor.setAnswer(answer);
+    }
+    handleKeyDown(event) {
+        const number = Number(event.key);
+        if (!isNaN(number)) {
+            this.clickedAnswer(number);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: QuizAnswerNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: QuizAnswerNumberComponent, isStandalone: true, selector: "ng-component", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { config: "configChange" }, ngImport: i0, template: "<div class=\"dbx-quiz-answer-number\" (dbxWindowKeyDownListener)=\"handleKeyDown($event)\" [dbxWindowKeyDownFilter]=\"relevantKeysSignal()\">\n  <div class=\"dbx-quiz-answer-number-buttons dbx-button-wrap-group\">\n    @for (choice of choicesSignal(); track choice.number) {\n      <dbx-button [color]=\"choice.selected ? 'accent' : 'primary'\" [raised]=\"true\" (buttonClick)=\"clickedAnswer(choice.number)\">{{ choice.number }}</dbx-button>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: DbxButtonModule }, { kind: "component", type: i1.DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "mode"] }, { kind: "directive", type: DbxWindowKeyDownListenerDirective, selector: "[dbxWindowKeyDownListener]", inputs: ["dbxWindowKeyDownEnabled", "dbxWindowKeyDownFilter"], outputs: ["dbxWindowKeyDownListener"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: QuizAnswerNumberComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [DbxButtonModule, DbxWindowKeyDownListenerDirective], standalone: true, template: "<div class=\"dbx-quiz-answer-number\" (dbxWindowKeyDownListener)=\"handleKeyDown($event)\" [dbxWindowKeyDownFilter]=\"relevantKeysSignal()\">\n  <div class=\"dbx-quiz-answer-number-buttons dbx-button-wrap-group\">\n    @for (choice of choicesSignal(); track choice.number) {\n      <dbx-button [color]=\"choice.selected ? 'accent' : 'primary'\" [raised]=\"true\" (buttonClick)=\"clickedAnswer(choice.number)\">{{ choice.number }}</dbx-button>\n    }\n  </div>\n</div>\n" }]
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }, { type: i0.Output, args: ["configChange"] }] } });
+
+const MULTIPLE_CHOICE_LETTERS = `abcdefghijklmnopqrstuvwxyz`;
+/**
+ * Answer component that displays multiple choice letter-labeled buttons.
+ *
+ * @usage
+ * Used as an answer component in a QuizQuestion's answerComponentConfig.
+ * Supports keyboard shortcuts (pressing the letter key selects that answer).
+ *
+ * ```typescript
+ * answerComponentConfig: {
+ *   componentClass: QuizAnswerMultipleChoiceComponent,
+ *   init: (instance: QuizAnswerMultipleChoiceComponent) => {
+ *     instance.config.set({
+ *       answerText: ['Option A', 'Option B', 'Option C'],
+ *       correctAnswerIndex: 1
+ *     });
+ *   }
+ * }
+ * ```
+ */
+class QuizAnswerMultipleChoiceComponent {
+    questionAccessor = inject(QuizQuestionAccessor);
+    config = model(...(ngDevMode ? [undefined, { debugName: "config" }] : []));
+    currentAnswerSignal = toSignal(this.questionAccessor.answer$);
+    currentAnswerValueSignal = computed(() => this.currentAnswerSignal()?.data, ...(ngDevMode ? [{ debugName: "currentAnswerValueSignal" }] : []));
+    choicesSignal = computed(() => {
+        const config = this.config();
+        const currentAnswer = this.currentAnswerValueSignal();
+        const answers = config?.answerText ?? [];
+        const correctAnswerIndex = config?.correctAnswerIndex;
+        const choices = answers.map((text, i) => {
+            const letter = MULTIPLE_CHOICE_LETTERS[i];
+            return {
+                letter: MULTIPLE_CHOICE_LETTERS[i].toUpperCase(),
+                text,
+                selected: currentAnswer?.letter === letter,
+                isCorrectAnswer: correctAnswerIndex === i
+            };
+        });
+        return choices;
+    }, ...(ngDevMode ? [{ debugName: "choicesSignal" }] : []));
+    relevantKeysSignal = computed(() => {
+        const answersCount = this.config()?.answerText.length ?? 0;
+        const relevantKeys = [];
+        const numbersRange = answersCount > 0 ? range(1, answersCount + 1) : [];
+        for (const number of numbersRange) {
+            const answerLetter = MULTIPLE_CHOICE_LETTERS[number - 1];
+            relevantKeys.push(answerLetter);
+        }
+        return relevantKeys;
+    }, ...(ngDevMode ? [{ debugName: "relevantKeysSignal" }] : []));
+    clickedAnswer(answer) {
+        this.questionAccessor.setAnswer(answer);
+    }
+    handleKeyDown(event) {
+        if (event.key.length === 1) {
+            const choices = this.choicesSignal();
+            const selectedLetter = event.key.toUpperCase();
+            const choice = choices.find((x) => x.letter === selectedLetter);
+            if (choice) {
+                this.clickedAnswer(choice);
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: QuizAnswerMultipleChoiceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: QuizAnswerMultipleChoiceComponent, isStandalone: true, selector: "ng-component", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { config: "configChange" }, ngImport: i0, template: "<div class=\"dbx-quiz-answer-multiplechoice\" (dbxWindowKeyDownListener)=\"handleKeyDown($event)\" [dbxWindowKeyDownFilter]=\"relevantKeysSignal()\">\n  <div class=\"dbx-quiz-answer-multiplechoice-buttons dbx-button-column dbx-button-wide\">\n    @for (choice of choicesSignal(); track choice.letter) {\n      <dbx-button class=\"dbx-w100\" [color]=\"choice.selected ? 'accent' : 'primary'\" [raised]=\"true\" (buttonClick)=\"clickedAnswer(choice)\">\n        <div class=\"dbx-quiz-answer-multiplechoice-button-content\">\n          <span class=\"dbx-quiz-answer-multiplechoice-button-letter\">{{ choice.letter }})</span>\n          <span class=\"dbx-quiz-answer-multiplechoice-button-text\">{{ choice.text }}</span>\n        </div>\n      </dbx-button>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: DbxButtonModule }, { kind: "component", type: i1.DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "mode"] }, { kind: "directive", type: DbxWindowKeyDownListenerDirective, selector: "[dbxWindowKeyDownListener]", inputs: ["dbxWindowKeyDownEnabled", "dbxWindowKeyDownFilter"], outputs: ["dbxWindowKeyDownListener"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: QuizAnswerMultipleChoiceComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [DbxButtonModule, DbxWindowKeyDownListenerDirective], standalone: true, template: "<div class=\"dbx-quiz-answer-multiplechoice\" (dbxWindowKeyDownListener)=\"handleKeyDown($event)\" [dbxWindowKeyDownFilter]=\"relevantKeysSignal()\">\n  <div class=\"dbx-quiz-answer-multiplechoice-buttons dbx-button-column dbx-button-wide\">\n    @for (choice of choicesSignal(); track choice.letter) {\n      <dbx-button class=\"dbx-w100\" [color]=\"choice.selected ? 'accent' : 'primary'\" [raised]=\"true\" (buttonClick)=\"clickedAnswer(choice)\">\n        <div class=\"dbx-quiz-answer-multiplechoice-button-content\">\n          <span class=\"dbx-quiz-answer-multiplechoice-button-letter\">{{ choice.letter }})</span>\n          <span class=\"dbx-quiz-answer-multiplechoice-button-text\">{{ choice.text }}</span>\n        </div>\n      </dbx-button>\n    }\n  </div>\n</div>\n" }]
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }, { type: i0.Output, args: ["configChange"] }] } });
+
+/**
+ * Pre-quiz intro component that displays the quiz title, subtitle, description, and a start button.
+ *
+ * @usage
+ * Used as a preQuizComponentConfig in a Quiz definition.
+ * Inherits title details from the quiz unless overridden via config.
+ *
+ * ```typescript
+ * preQuizComponentConfig: {
+ *   componentClass: QuizPreQuizIntroComponent,
+ *   init: (instance: QuizPreQuizIntroComponent) => {
+ *     instance.config.set({ subtitle: 'Custom subtitle' });
+ *   }
+ * }
+ * ```
+ */
+class QuizPreQuizIntroComponent {
+    quizStore = inject(QuizStore);
+    config = model(...(ngDevMode ? [undefined, { debugName: "config" }] : []));
+    quizTitleDetailsSignal = toSignal(this.quizStore.titleDetails$);
+    configSignal = computed(() => {
+        const config = this.config();
+        const titleDetails = this.quizTitleDetailsSignal();
+        return {
+            title: config?.title ?? titleDetails?.title,
+            subtitle: config?.subtitle ?? titleDetails?.subtitle,
+            description: config?.description ?? titleDetails?.description
+        };
+    }, ...(ngDevMode ? [{ debugName: "configSignal" }] : []));
+    titleSignal = computed(() => this.configSignal()?.title, ...(ngDevMode ? [{ debugName: "titleSignal" }] : []));
+    subtitleSignal = computed(() => this.configSignal()?.subtitle, ...(ngDevMode ? [{ debugName: "subtitleSignal" }] : []));
+    descriptionSignal = computed(() => this.configSignal()?.description, ...(ngDevMode ? [{ debugName: "descriptionSignal" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: QuizPreQuizIntroComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: QuizPreQuizIntroComponent, isStandalone: true, selector: "ng-component", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { config: "configChange" }, ngImport: i0, template: "<div>\n  <div>\n    <h1>{{ titleSignal() }}</h1>\n    <h2>{{ subtitleSignal() }}</h2>\n    <p>{{ descriptionSignal() }}</p>\n  </div>\n  <div>\n    <dbx-button [raised]=\"true\" (buttonClick)=\"quizStore.startQuiz()\" text=\"Start Quiz\"></dbx-button>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: DbxButtonModule }, { kind: "component", type: i1.DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "mode"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: QuizPreQuizIntroComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [DbxButtonModule], standalone: true, template: "<div>\n  <div>\n    <h1>{{ titleSignal() }}</h1>\n    <h2>{{ subtitleSignal() }}</h2>\n    <p>{{ descriptionSignal() }}</p>\n  </div>\n  <div>\n    <dbx-button [raised]=\"true\" (buttonClick)=\"quizStore.startQuiz()\" text=\"Start Quiz\"></dbx-button>\n  </div>\n</div>\n" }]
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }, { type: i0.Output, args: ["configChange"] }] } });
+
+/**
+ * Question component that displays text with optional prompt and guidance.
+ *
+ * @usage
+ * Used as a questionComponentConfig in a QuizQuestion definition.
+ *
+ * ```typescript
+ * questionComponentConfig: {
+ *   componentClass: QuizQuestionTextComponent,
+ *   init: (instance: QuizQuestionTextComponent) => {
+ *     instance.config.set({ text: 'How do you handle ambiguity?', prompt: 'Rate yourself:', guidance: '1=Never, 5=Always' });
+ *   }
+ * }
+ * ```
+ */
+class QuizQuestionTextComponent {
+    config = model(...(ngDevMode ? [undefined, { debugName: "config" }] : []));
+    promptSignal = computed(() => this.config()?.prompt, ...(ngDevMode ? [{ debugName: "promptSignal" }] : []));
+    textSignal = computed(() => this.config()?.text, ...(ngDevMode ? [{ debugName: "textSignal" }] : []));
+    guidanceSignal = computed(() => this.config()?.guidance, ...(ngDevMode ? [{ debugName: "guidanceSignal" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: QuizQuestionTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: QuizQuestionTextComponent, isStandalone: true, selector: "ng-component", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { config: "configChange" }, ngImport: i0, template: "<div class=\"dbx-quiz-question-text\">\n  <div class=\"dbx-quiz-question-text-content\">\n    @if (promptSignal() !== null) {\n      <div class=\"dbx-hint dbx-pb3\">{{ promptSignal() }}</div>\n    }\n    <div class=\"dbx-pb3\">{{ textSignal() }}</div>\n    @if (guidanceSignal() !== null) {\n      <div class=\"dbx-small dbx-hint\">{{ guidanceSignal() }}</div>\n    }\n  </div>\n</div>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: QuizQuestionTextComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, template: "<div class=\"dbx-quiz-question-text\">\n  <div class=\"dbx-quiz-question-text-content\">\n    @if (promptSignal() !== null) {\n      <div class=\"dbx-hint dbx-pb3\">{{ promptSignal() }}</div>\n    }\n    <div class=\"dbx-pb3\">{{ textSignal() }}</div>\n    @if (guidanceSignal() !== null) {\n      <div class=\"dbx-small dbx-hint\">{{ guidanceSignal() }}</div>\n    }\n  </div>\n</div>\n" }]
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }, { type: i0.Output, args: ["configChange"] }] } });
+
+/**
+ * Post-quiz component that handles quiz submission and displays pre/post submit content.
+ *
+ * @usage
+ * Use as a wrapper in your results component template:
+ *
+ * ```html
+ * <dbx-quiz-post-quiz [handleSubmitQuiz]="handleSubmitQuiz">
+ *   <div presubmit>Pre-submit content...</div>
+ *   <div postsubmit>Post-submit content (scores, etc.)...</div>
+ * </dbx-quiz-post-quiz>
+ * ```
+ */
+class DbxQuizPostQuizComponent {
+    quizStore = inject(QuizStore);
+    quizSubmittedSignal = toSignal(this.quizStore.submittedQuiz$);
+    stateSignal = computed(() => {
+        const submitted = this.quizSubmittedSignal();
+        if (submitted) {
+            return 'postsubmit';
+        }
+        else {
+            return 'presubmit';
+        }
+    }, ...(ngDevMode ? [{ debugName: "stateSignal" }] : []));
+    handleSubmitQuiz = input(...(ngDevMode ? [undefined, { debugName: "handleSubmitQuiz" }] : []));
+    handleSubmitQuizButton = (_, context) => {
+        this.quizStore.setLockQuizNavigation(true);
+        const handler = this.handleSubmitQuiz();
+        if (handler) {
+            return handler(_, context);
+        }
+        else {
+            context.reject();
+        }
+    };
+    handleSubmitQuizSuccess = () => {
+        this.quizStore.setSubmittedQuiz(true);
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DbxQuizPostQuizComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DbxQuizPostQuizComponent, isStandalone: true, selector: "dbx-quiz-post-quiz", inputs: { handleSubmitQuiz: { classPropertyName: "handleSubmitQuiz", publicName: "handleSubmitQuiz", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"dbx-post-quiz text-center\">\n  <h3>Quiz Completed</h3>\n  <div>\n    <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    @if (stateSignal() === 'presubmit') {\n      <ng-container *ngTemplateOutlet=\"preSubmitTemplate\"></ng-container>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"postSubmitTemplate\"></ng-container>\n    }\n  </div>\n</div>\n\n<!-- Pre-Submit -->\n<ng-template #preSubmitTemplate>\n  <ng-content select=\"[presubmit]\"></ng-content>\n  @if (handleSubmitQuiz()) {\n    <div class=\"dbx-post-quiz-submit\">\n      <div dbxAction dbxActionLogger dbxActionValue dbxActionSnackbarError [dbxActionHandler]=\"handleSubmitQuizButton\" [dbxActionSuccessHandler]=\"handleSubmitQuizSuccess\">\n        <dbx-button [disabled]=\"quizSubmittedSignal()\" [raised]=\"true\" dbxActionButton>Submit Quiz</dbx-button>\n      </div>\n    </div>\n  }\n</ng-template>\n\n<!-- Post-Submit -->\n<ng-template #postSubmitTemplate>\n  <ng-content select=\"[postsubmit]\"></ng-content>\n</ng-template>\n\n<!-- Content -->\n<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: DbxButtonModule }, { kind: "directive", type: i1$1.DbxActionButtonDirective, selector: "[dbxActionButton]" }, { kind: "component", type: i1.DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "mode"] }, { kind: "ngmodule", type: DbxActionModule }, { kind: "directive", type: i1$1.DbxActionDirective, selector: "dbx-action,[dbxAction]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i1$1.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i1$1.DbxActionValueDirective, selector: "dbxActionValue,[dbxActionValue]", inputs: ["dbxActionValue"] }, { kind: "directive", type: i1$1.DbxActionContextLoggerDirective, selector: "[dbxActionLogger],[dbxActionContextLogger]" }, { kind: "directive", type: i1$1.DbxActionSuccessHandlerDirective, selector: "[dbxActionSuccessHandler]", inputs: ["dbxActionSuccessHandler"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DbxQuizPostQuizComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dbx-quiz-post-quiz', imports: [DbxButtonModule, DbxActionModule, NgTemplateOutlet], standalone: true, template: "<div class=\"dbx-post-quiz text-center\">\n  <h3>Quiz Completed</h3>\n  <div>\n    <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    @if (stateSignal() === 'presubmit') {\n      <ng-container *ngTemplateOutlet=\"preSubmitTemplate\"></ng-container>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"postSubmitTemplate\"></ng-container>\n    }\n  </div>\n</div>\n\n<!-- Pre-Submit -->\n<ng-template #preSubmitTemplate>\n  <ng-content select=\"[presubmit]\"></ng-content>\n  @if (handleSubmitQuiz()) {\n    <div class=\"dbx-post-quiz-submit\">\n      <div dbxAction dbxActionLogger dbxActionValue dbxActionSnackbarError [dbxActionHandler]=\"handleSubmitQuizButton\" [dbxActionSuccessHandler]=\"handleSubmitQuizSuccess\">\n        <dbx-button [disabled]=\"quizSubmittedSignal()\" [raised]=\"true\" dbxActionButton>Submit Quiz</dbx-button>\n      </div>\n    </div>\n  }\n</ng-template>\n\n<!-- Post-Submit -->\n<ng-template #postSubmitTemplate>\n  <ng-content select=\"[postsubmit]\"></ng-content>\n</ng-template>\n\n<!-- Content -->\n<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n" }]
+        }], propDecorators: { handleSubmitQuiz: [{ type: i0.Input, args: [{ isSignal: true, alias: "handleSubmitQuiz", required: false }] }] } });
+
+/**
+ * Button component that restarts the quiz to the first question.
+ *
+ * @usage
+ * ```html
+ * <dbx-quiz-reset-button buttonText="Try Again"></dbx-quiz-reset-button>
+ * ```
+ */
+class DbxQuizResetButtonComponent {
+    quizStore = inject(QuizStore);
+    buttonText = input(`Restart Quiz`, ...(ngDevMode ? [{ debugName: "buttonText" }] : []));
+    handleResetQuizButton = (_, context) => {
+        this.quizStore.restartQuizToFirstQuestion();
+        context.success();
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DbxQuizResetButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: DbxQuizResetButtonComponent, isStandalone: true, selector: "dbx-quiz-reset-button", inputs: { buttonText: { classPropertyName: "buttonText", publicName: "buttonText", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="dbx-quiz-reset-button">
+      <div dbxAction dbxActionLogger dbxActionValue dbxActionSnackbarError [dbxActionHandler]="handleResetQuizButton">
+        <dbx-button [raised]="true" [text]="buttonText()" dbxActionButton></dbx-button>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: DbxButtonModule }, { kind: "directive", type: i1$1.DbxActionButtonDirective, selector: "[dbxActionButton]" }, { kind: "component", type: i1.DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "mode"] }, { kind: "ngmodule", type: DbxActionModule }, { kind: "directive", type: i1$1.DbxActionDirective, selector: "dbx-action,[dbxAction]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i1$1.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i1$1.DbxActionValueDirective, selector: "dbxActionValue,[dbxActionValue]", inputs: ["dbxActionValue"] }, { kind: "directive", type: i1$1.DbxActionContextLoggerDirective, selector: "[dbxActionLogger],[dbxActionContextLogger]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DbxQuizResetButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-quiz-reset-button',
+                    template: `
+    <div class="dbx-quiz-reset-button">
+      <div dbxAction dbxActionLogger dbxActionValue dbxActionSnackbarError [dbxActionHandler]="handleResetQuizButton">
+        <dbx-button [raised]="true" [text]="buttonText()" dbxActionButton></dbx-button>
+      </div>
+    </div>
+  `,
+                    imports: [DbxButtonModule, DbxActionModule],
+                    standalone: true
+                }]
+        }], propDecorators: { buttonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonText", required: false }] }] } });
+
+/**
+ * Generic quiz score display component.
+ *
+ * @usage
+ * ```html
+ * <dbx-quiz-score [input]="scoreInput"></dbx-quiz-score>
+ * ```
+ */
+class DbxQuizScoreComponent {
+    input = input(...(ngDevMode ? [undefined, { debugName: "input" }] : []));
+    scoreSignal = computed(() => this.input()?.score, ...(ngDevMode ? [{ debugName: "scoreSignal" }] : []));
+    maxScoreSignal = computed(() => this.input()?.maxScore, ...(ngDevMode ? [{ debugName: "maxScoreSignal" }] : []));
+    feedbackTextSignal = computed(() => this.input()?.feedbackText ?? '', ...(ngDevMode ? [{ debugName: "feedbackTextSignal" }] : []));
+    subtitleSignal = computed(() => this.input()?.subtitle, ...(ngDevMode ? [{ debugName: "subtitleSignal" }] : []));
+    showRetakeButtonSignal = computed(() => this.input()?.showRetakeButton, ...(ngDevMode ? [{ debugName: "showRetakeButtonSignal" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DbxQuizScoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DbxQuizScoreComponent, isStandalone: true, selector: "dbx-quiz-score", inputs: { input: { classPropertyName: "input", publicName: "input", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="dbx-quiz-score">
+      <h3 class="dbx-quiz-score-score">{{ scoreSignal() }}/{{ maxScoreSignal() }}</h3>
+      <p class="dbx-quiz-score-text">{{ feedbackTextSignal() }}</p>
+      @if (subtitleSignal()) {
+        <p class="dbx-quiz-score-subtitle">{{ subtitleSignal() }}</p>
+      }
+      @if (showRetakeButtonSignal()) {
+        <dbx-quiz-reset-button buttonText="Retake Quiz"></dbx-quiz-reset-button>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxQuizResetButtonComponent, selector: "dbx-quiz-reset-button", inputs: ["buttonText"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DbxQuizScoreComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-quiz-score',
+                    template: `
+    <div class="dbx-quiz-score">
+      <h3 class="dbx-quiz-score-score">{{ scoreSignal() }}/{{ maxScoreSignal() }}</h3>
+      <p class="dbx-quiz-score-text">{{ feedbackTextSignal() }}</p>
+      @if (subtitleSignal()) {
+        <p class="dbx-quiz-score-subtitle">{{ subtitleSignal() }}</p>
+      }
+      @if (showRetakeButtonSignal()) {
+        <dbx-quiz-reset-button buttonText="Retake Quiz"></dbx-quiz-reset-button>
+      }
+    </div>
+  `,
+                    imports: [DbxQuizResetButtonComponent],
+                    standalone: true
+                }]
+        }], propDecorators: { input: [{ type: i0.Input, args: [{ isSignal: true, alias: "input", required: false }] }] } });
+
+/**
+ * Creates a Likert scale question config with agreement prompt (Strongly Disagree to Strongly Agree).
+ *
+ * @example
+ * ```ts
+ * instance.config.set(quizAgreementPrompt('I feel confident leading under pressure.'));
+ * // { prompt: 'Please rate how much you agree...', text: '...', guidance: '1 = Strongly Disagree, 5 = Strongly Agree' }
+ * ```
+ */
+function quizAgreementPrompt(text) {
+    return {
+        prompt: 'Please rate how much you agree with the following statement:',
+        text,
+        guidance: '1 = Strongly Disagree, 5 = Strongly Agree'
+    };
+}
+/**
+ * Creates a Likert scale question config with frequency prompt (Never to Always).
+ *
+ * @example
+ * ```ts
+ * instance.config.set(quizFrequencyPrompt('I break vague direction into first steps.'));
+ * // { prompt: 'Please rate how much you agree...', text: '...', guidance: '1 = Never, 5 = Always' }
+ * ```
+ */
+function quizFrequencyPrompt(text) {
+    return {
+        prompt: 'Please rate how much you agree with the following statement:',
+        text,
+        guidance: '1 = Never, 5 = Always'
+    };
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DbxQuizPostQuizComponent, DbxQuizResetButtonComponent, DbxQuizScoreComponent, QuizAnswerMultipleChoiceComponent, QuizAnswerNumberComponent, QuizComponent, QuizPreQuizIntroComponent, QuizQuestionAccessor, QuizQuestionTextComponent, QuizStore, provideCurrentQuestionQuizQuestionAccessor, quizAgreementPrompt, quizFrequencyPrompt };
+//# sourceMappingURL=dereekb-dbx-form-quiz.mjs.map