@dereekb/dbx-form 13.7.0 → 13.9.0

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

@@ -135,10 +135,10 @@ class QuizStore extends ComponentStore {
     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.3", ngImport: i0, type: QuizStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: QuizStore });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: QuizStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: QuizStore });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: QuizStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: QuizStore, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 function computeAdvanceIndexOnState(state, advancement) {
@@ -322,25 +322,23 @@ class QuizComponent {
                 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;
-            }));
-        }
+        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" }] : /* istanbul ignore next */ []));
@@ -375,10 +373,10 @@ class QuizComponent {
     clickNextQuestion() {
         this.quizStore.goToNextQuestion();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: QuizComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", 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", "customContent", "allowClickPropagation", "mode"] }, { kind: "directive", type: DbxWindowKeyDownListenerDirective, selector: "[dbxWindowKeyDownListener]", inputs: ["dbxWindowKeyDownEnabled", "dbxWindowKeyDownFilter"], outputs: ["dbxWindowKeyDownListener"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: QuizComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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", "customContent", "allowClickPropagation", "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.3", ngImport: i0, type: QuizComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", 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 }] }] } });
@@ -454,10 +452,10 @@ class QuizAnswerNumberComponent {
             this.clickedAnswer(number);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: QuizAnswerNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", 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\" role=\"radiogroup\" aria-label=\"Answer choices\">\n    @for (choice of choicesSignal(); track choice.number) {\n      <dbx-button role=\"radio\" [attr.aria-checked]=\"choice.selected\" [attr.aria-label]=\"'' + choice.number\" [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", "customContent", "allowClickPropagation", "mode"] }, { kind: "directive", type: DbxWindowKeyDownListenerDirective, selector: "[dbxWindowKeyDownListener]", inputs: ["dbxWindowKeyDownEnabled", "dbxWindowKeyDownFilter"], outputs: ["dbxWindowKeyDownListener"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: QuizAnswerNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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\" role=\"radiogroup\" aria-label=\"Answer choices\">\n    @for (choice of choicesSignal(); track choice.number) {\n      <dbx-button role=\"radio\" [attr.aria-checked]=\"choice.selected\" [attr.aria-label]=\"'' + choice.number\" [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", "customContent", "allowClickPropagation", "mode"] }, { kind: "directive", type: DbxWindowKeyDownListenerDirective, selector: "[dbxWindowKeyDownListener]", inputs: ["dbxWindowKeyDownEnabled", "dbxWindowKeyDownFilter"], outputs: ["dbxWindowKeyDownListener"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: QuizAnswerNumberComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", 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\" role=\"radiogroup\" aria-label=\"Answer choices\">\n    @for (choice of choicesSignal(); track choice.number) {\n      <dbx-button role=\"radio\" [attr.aria-checked]=\"choice.selected\" [attr.aria-label]=\"'' + choice.number\" [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"] }] } });
@@ -526,10 +524,10 @@ class QuizAnswerMultipleChoiceComponent {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: QuizAnswerMultipleChoiceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", 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\" role=\"radiogroup\" aria-label=\"Answer choices\">\n    @for (choice of choicesSignal(); track choice.letter) {\n      <dbx-button class=\"dbx-w100\" role=\"radio\" [attr.aria-checked]=\"choice.selected\" [attr.aria-label]=\"choice.letter + ') ' + choice.text\" [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", "customContent", "allowClickPropagation", "mode"] }, { kind: "directive", type: DbxWindowKeyDownListenerDirective, selector: "[dbxWindowKeyDownListener]", inputs: ["dbxWindowKeyDownEnabled", "dbxWindowKeyDownFilter"], outputs: ["dbxWindowKeyDownListener"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: QuizAnswerMultipleChoiceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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\" role=\"radiogroup\" aria-label=\"Answer choices\">\n    @for (choice of choicesSignal(); track choice.letter) {\n      <dbx-button class=\"dbx-w100\" role=\"radio\" [attr.aria-checked]=\"choice.selected\" [attr.aria-label]=\"choice.letter + ') ' + choice.text\" [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", "customContent", "allowClickPropagation", "mode"] }, { kind: "directive", type: DbxWindowKeyDownListenerDirective, selector: "[dbxWindowKeyDownListener]", inputs: ["dbxWindowKeyDownEnabled", "dbxWindowKeyDownFilter"], outputs: ["dbxWindowKeyDownListener"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: QuizAnswerMultipleChoiceComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", 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\" role=\"radiogroup\" aria-label=\"Answer choices\">\n    @for (choice of choicesSignal(); track choice.letter) {\n      <dbx-button class=\"dbx-w100\" role=\"radio\" [attr.aria-checked]=\"choice.selected\" [attr.aria-label]=\"choice.letter + ') ' + choice.text\" [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"] }] } });
@@ -566,10 +564,10 @@ class QuizPreQuizIntroComponent {
     titleSignal = computed(() => this.configSignal()?.title, ...(ngDevMode ? [{ debugName: "titleSignal" }] : /* istanbul ignore next */ []));
     subtitleSignal = computed(() => this.configSignal()?.subtitle, ...(ngDevMode ? [{ debugName: "subtitleSignal" }] : /* istanbul ignore next */ []));
     descriptionSignal = computed(() => this.configSignal()?.description, ...(ngDevMode ? [{ debugName: "descriptionSignal" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: QuizPreQuizIntroComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.3", 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", "customContent", "allowClickPropagation", "mode"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: QuizPreQuizIntroComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", 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", "customContent", "allowClickPropagation", "mode"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: QuizPreQuizIntroComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", 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"] }] } });
@@ -594,10 +592,10 @@ class QuizQuestionTextComponent {
     promptSignal = computed(() => this.config()?.prompt, ...(ngDevMode ? [{ debugName: "promptSignal" }] : /* istanbul ignore next */ []));
     textSignal = computed(() => this.config()?.text, ...(ngDevMode ? [{ debugName: "textSignal" }] : /* istanbul ignore next */ []));
     guidanceSignal = computed(() => this.config()?.guidance, ...(ngDevMode ? [{ debugName: "guidanceSignal" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: QuizQuestionTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", 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\" role=\"group\" aria-label=\"Question\">\n  <div class=\"dbx-quiz-question-text-content\">\n    @if (promptSignal() !== null) {\n      <div class=\"dbx-hint dbx-pb3\" aria-label=\"Prompt\">{{ promptSignal() }}</div>\n    }\n    <div class=\"dbx-pb3\">{{ textSignal() }}</div>\n    @if (guidanceSignal() !== null) {\n      <div class=\"dbx-small dbx-hint\" role=\"note\">{{ guidanceSignal() }}</div>\n    }\n  </div>\n</div>\n" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: QuizQuestionTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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\" role=\"group\" aria-label=\"Question\">\n  <div class=\"dbx-quiz-question-text-content\">\n    @if (promptSignal() !== null) {\n      <div class=\"dbx-hint dbx-pb3\" aria-label=\"Prompt\">{{ promptSignal() }}</div>\n    }\n    <div class=\"dbx-pb3\">{{ textSignal() }}</div>\n    @if (guidanceSignal() !== null) {\n      <div class=\"dbx-small dbx-hint\" role=\"note\">{{ guidanceSignal() }}</div>\n    }\n  </div>\n</div>\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: QuizQuestionTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: QuizQuestionTextComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, template: "<div class=\"dbx-quiz-question-text\" role=\"group\" aria-label=\"Question\">\n  <div class=\"dbx-quiz-question-text-content\">\n    @if (promptSignal() !== null) {\n      <div class=\"dbx-hint dbx-pb3\" aria-label=\"Prompt\">{{ promptSignal() }}</div>\n    }\n    <div class=\"dbx-pb3\">{{ textSignal() }}</div>\n    @if (guidanceSignal() !== null) {\n      <div class=\"dbx-small dbx-hint\" role=\"note\">{{ 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"] }] } });
@@ -620,12 +618,7 @@ class DbxQuizPostQuizComponent {
     quizSubmittedSignal = toSignal(this.quizStore.submittedQuiz$);
     stateSignal = computed(() => {
         const submitted = this.quizSubmittedSignal();
-        if (submitted) {
-            return 'postsubmit';
-        }
-        else {
-            return 'presubmit';
-        }
+        return submitted ? 'postsubmit' : 'presubmit';
     }, ...(ngDevMode ? [{ debugName: "stateSignal" }] : /* istanbul ignore next */ []));
     handleSubmitQuiz = input(...(ngDevMode ? [undefined, { debugName: "handleSubmitQuiz" }] : /* istanbul ignore next */ []));
     handleSubmitQuizButton = (_, context) => {
@@ -634,17 +627,15 @@ class DbxQuizPostQuizComponent {
         if (handler) {
             return handler(_, context);
         }
-        else {
-            context.reject();
-        }
+        context.reject();
     };
     handleSubmitQuizSuccess = () => {
         this.quizStore.setSubmittedQuiz(true);
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxQuizPostQuizComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", 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\" role=\"status\" aria-live=\"polite\">\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]", inputs: ["dbxActionButtonEcho"] }, { kind: "component", type: i1.DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxQuizPostQuizComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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\" role=\"status\" aria-live=\"polite\">\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]", inputs: ["dbxActionButtonEcho"] }, { kind: "component", type: i1.DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "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.3", ngImport: i0, type: DbxQuizPostQuizComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", 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\" role=\"status\" aria-live=\"polite\">\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 }] }] } });
@@ -664,8 +655,8 @@ class DbxQuizResetButtonComponent {
         this.quizStore.restartQuizToFirstQuestion();
         context.success();
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxQuizResetButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.3", type: DbxQuizResetButtonComponent, isStandalone: true, selector: "dbx-quiz-reset-button", inputs: { buttonText: { classPropertyName: "buttonText", publicName: "buttonText", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxQuizResetButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", 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>
@@ -673,7 +664,7 @@ class DbxQuizResetButtonComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: DbxButtonModule }, { kind: "directive", type: i1$1.DbxActionButtonDirective, selector: "[dbxActionButton]", inputs: ["dbxActionButtonEcho"] }, { kind: "component", type: i1.DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "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.3", ngImport: i0, type: DbxQuizResetButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxQuizResetButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-quiz-reset-button',
@@ -704,8 +695,8 @@ class DbxQuizScoreComponent {
     feedbackTextSignal = computed(() => this.input()?.feedbackText ?? '', ...(ngDevMode ? [{ debugName: "feedbackTextSignal" }] : /* istanbul ignore next */ []));
     subtitleSignal = computed(() => this.input()?.subtitle, ...(ngDevMode ? [{ debugName: "subtitleSignal" }] : /* istanbul ignore next */ []));
     showRetakeButtonSignal = computed(() => this.input()?.showRetakeButton, ...(ngDevMode ? [{ debugName: "showRetakeButtonSignal" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxQuizScoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxQuizScoreComponent, isStandalone: true, selector: "dbx-quiz-score", inputs: { input: { classPropertyName: "input", publicName: "input", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxQuizScoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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>
@@ -718,7 +709,7 @@ class DbxQuizScoreComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "component", type: DbxQuizResetButtonComponent, selector: "dbx-quiz-reset-button", inputs: ["buttonText"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxQuizScoreComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxQuizScoreComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-quiz-score',