@acorex/modules 21.0.0-next.14 → 21.0.0-next.16

package/fesm2022/{acorex-modules-assessment-management-acorex-modules-assessment-management-ClgGS32i.mjs → acorex-modules-assessment-management-acorex-modules-assessment-management-HgaOIA2U.mjs}

@@ -15,7 +15,7 @@ import * as i1$4 from '@acorex/components/form';
 import { AXFormModule } from '@acorex/components/form';
 import * as i4 from '@acorex/core/translation';
 import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
-import { AXPStateMessageComponent, AXPStopwatchComponent, AXPThemeLayoutBlockComponent } from '@acorex/platform/layout/components';
+import { AXPStateMessageComponent, AXPThemeLayoutBlockComponent, AXPStopwatchComponent } from '@acorex/platform/layout/components';
 import * as i2 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 import { AXToastService } from '@acorex/components/toast';
@@ -33,6 +33,7 @@ import * as i1$3 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
 import { provideCommandSetups } from '@acorex/platform/runtime';
 import { AXPPageLayoutBaseComponent, AXPPageLayoutComponent, AXPPageLayoutBase } from '@acorex/platform/layout/views';
+import { DomSanitizer } from '@angular/platform-browser';
 
 //#region ----   Root Configuration   ----
 const config = { i18n: 'assessment-management' };
@@ -85,13 +86,13 @@ class AXMAssessmentManagementEntityProvider {
         if (moduleName === RootConfig.module.name) {
             switch (entityName) {
                 case RootConfig.entities.questionBankItem.name:
-                    return (await import('./acorex-modules-assessment-management-question-bank-item.entity-BWYLXvCp.mjs')).factory(this.injector);
+                    return (await import('./acorex-modules-assessment-management-question-bank-item.entity-vNxSmJuv.mjs')).factory(this.injector);
                 case RootConfig.entities.questionnaire.name:
-                    return (await import('./acorex-modules-assessment-management-questionnaire.entity-C8sX0d_p.mjs')).factory(this.injector);
+                    return (await import('./acorex-modules-assessment-management-questionnaire.entity-DFQIvlza.mjs')).factory(this.injector);
                 case RootConfig.entities.assessmentCase.name:
-                    return (await import('./acorex-modules-assessment-management-assessment-case.entity-CjhC5YAF.mjs')).factory(this.injector);
+                    return (await import('./acorex-modules-assessment-management-assessment-case.entity-CsCMlcvF.mjs')).factory(this.injector);
                 case RootConfig.entities.assessmentSession.name:
-                    return (await import('./acorex-modules-assessment-management-assessment-session.entity-B_IDiEzp.mjs')).factory(this.injector);
+                    return (await import('./acorex-modules-assessment-management-assessment-session.entity-BkNVe3FO.mjs')).factory(this.injector);
             }
         }
         return null;
@@ -526,13 +527,13 @@ const AXMQuestionnaireBuilderWidget = {
     ],
     components: {
         view: {
-            component: () => import('./acorex-modules-assessment-management-questionnaire-builder-view.component-meuUo7Vx.mjs').then((c) => c.AXMQuestionnaireBuilderWidgetViewComponent),
+            component: () => import('./acorex-modules-assessment-management-questionnaire-builder-view.component-DDqDjzwH.mjs').then((c) => c.AXMQuestionnaireBuilderWidgetViewComponent),
         },
         edit: {
-            component: () => import('./acorex-modules-assessment-management-questionnaire-builder-edit.component-3wVcKQGE.mjs').then((c) => c.AXMQuestionnaireBuilderWidgetEditComponent),
+            component: () => import('./acorex-modules-assessment-management-questionnaire-builder-edit.component-CbfHOFT1.mjs').then((c) => c.AXMQuestionnaireBuilderWidgetEditComponent),
         },
         print: {
-            component: () => import('./acorex-modules-assessment-management-questionnaire-builder-edit.component-3wVcKQGE.mjs').then((c) => c.AXMQuestionnaireBuilderWidgetEditComponent),
+            component: () => import('./acorex-modules-assessment-management-questionnaire-builder-edit.component-CbfHOFT1.mjs').then((c) => c.AXMQuestionnaireBuilderWidgetEditComponent),
         },
     },
 };
@@ -679,16 +680,16 @@ const AXMAnswersViewerWidget = {
     ],
     components: {
         designer: {
-            component: () => import('./acorex-modules-assessment-management-answers-viewer-widget-edit.component-vVfXtden.mjs').then((c) => c.AXMAnswersViewerWidgetEditComponent),
+            component: () => import('./acorex-modules-assessment-management-answers-viewer-widget-edit.component-DC2Ep3r1.mjs').then((c) => c.AXMAnswersViewerWidgetEditComponent),
         },
         view: {
-            component: () => import('./acorex-modules-assessment-management-answers-viewer-widget-view.component-C75zxKgV.mjs').then((c) => c.AXMAnswersViewerWidgetViewComponent),
+            component: () => import('./acorex-modules-assessment-management-answers-viewer-widget-view.component-iKqac5PE.mjs').then((c) => c.AXMAnswersViewerWidgetViewComponent),
         },
         edit: {
-            component: () => import('./acorex-modules-assessment-management-answers-viewer-widget-edit.component-vVfXtden.mjs').then((c) => c.AXMAnswersViewerWidgetEditComponent),
+            component: () => import('./acorex-modules-assessment-management-answers-viewer-widget-edit.component-DC2Ep3r1.mjs').then((c) => c.AXMAnswersViewerWidgetEditComponent),
         },
         column: {
-            component: () => import('./acorex-modules-assessment-management-answers-viewer-widget-column.component-UmXUT6Xn.mjs').then((c) => c.AXMAnswersViewerWidgetColumnComponent),
+            component: () => import('./acorex-modules-assessment-management-answers-viewer-widget-column.component-DyxE9Xec.mjs').then((c) => c.AXMAnswersViewerWidgetColumnComponent),
         },
     },
 };
@@ -1879,6 +1880,7 @@ const AXMQuestionnaireViewerViewModel = signalStore(withState(() => ({
                         description: question.question.description,
                         answer: answer,
                         isRequired: question.isRequired,
+                        question,
                     });
                 }
             }
@@ -1989,15 +1991,19 @@ const AXMQuestionnaireViewerViewModel = signalStore(withState(() => ({
 class AXMQuestionnaireViewerQuestionComponent {
     constructor() {
         //#region ----   Services & Dependencies   ----
-        this.vm = inject(AXMQuestionnaireViewerViewModel);
+        this.vm = inject(AXMQuestionnaireViewerViewModel, { optional: true });
         //#endregion
         //#region ----   Inputs   ----
         this.question = input.required(...(ngDevMode ? [{ debugName: "question" }] : []));
+        /** Context data when used outside questionnaire viewer (e.g. review step). Used for isAnswered when vm is null. */
+        this.contextData = input(undefined, ...(ngDevMode ? [{ debugName: "contextData" }] : []));
         this.sectionOrder = input.required(...(ngDevMode ? [{ debugName: "sectionOrder" }] : []));
         this.questionIndex = input.required(...(ngDevMode ? [{ debugName: "questionIndex" }] : []));
         this.showQuestionNumbers = input(true, ...(ngDevMode ? [{ debugName: "showQuestionNumbers" }] : []));
         this.showQuestionCounter = input(false, ...(ngDevMode ? [{ debugName: "showQuestionCounter" }] : []));
         this.currentPosition = input(undefined, ...(ngDevMode ? [{ debugName: "currentPosition" }] : []));
+        /** Widget render mode: 'edit' for answering, 'view' for read-only display (e.g. review step). */
+        this.mode = input('edit', ...(ngDevMode ? [{ debugName: "mode" }] : []));
         //#endregion
         //#region ----   Computed Properties   ----
         /**
@@ -2005,21 +2011,19 @@ class AXMQuestionnaireViewerQuestionComponent {
          */
         this.isAnswered = computed(() => {
             const question = this.question();
-            const container = this.vm.widgetContainer();
-            if (!question || !container?.contextService)
+            const contextDataInput = this.contextData();
+            const container = this.vm?.widgetContainer();
+            const data = contextDataInput ?? container?.contextService?.data() ?? {};
+            if (!question || !question.question.interface?.path)
                 return false;
             try {
-                const contextService = container.contextService;
-                const data = contextService.data() || {};
-                const widgetPath = question.question.interface?.path;
-                if (!widgetPath)
-                    return false;
+                const widgetPath = question.question.interface.path;
                 const value = get(data, widgetPath);
                 const isEmpty = value === null ||
                     value === undefined ||
                     value === '' ||
                     (Array.isArray(value) && value.length === 0) ||
-                    (typeof value === 'object' && Object.keys(value).length === 0);
+                    (typeof value === 'object' && value !== null && Object.keys(value).length === 0);
                 return !isEmpty;
             }
             catch (error) {
@@ -2029,9 +2033,10 @@ class AXMQuestionnaireViewerQuestionComponent {
         }, ...(ngDevMode ? [{ debugName: "isAnswered" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXMQuestionnaireViewerQuestionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXMQuestionnaireViewerQuestionComponent, isStandalone: true, selector: "axm-questionnaire-viewer-question", inputs: { question: { classPropertyName: "question", publicName: "question", isSignal: true, isRequired: true, transformFunction: null }, sectionOrder: { classPropertyName: "sectionOrder", publicName: "sectionOrder", isSignal: true, isRequired: true, transformFunction: null }, questionIndex: { classPropertyName: "questionIndex", publicName: "questionIndex", isSignal: true, isRequired: true, transformFunction: null }, showQuestionNumbers: { classPropertyName: "showQuestionNumbers", publicName: "showQuestionNumbers", isSignal: true, isRequired: false, transformFunction: null }, showQuestionCounter: { classPropertyName: "showQuestionCounter", publicName: "showQuestionCounter", isSignal: true, isRequired: false, transformFunction: null }, currentPosition: { classPropertyName: "currentPosition", publicName: "currentPosition", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXMQuestionnaireViewerQuestionComponent, isStandalone: true, selector: "axm-questionnaire-viewer-question", inputs: { question: { classPropertyName: "question", publicName: "question", isSignal: true, isRequired: true, transformFunction: null }, contextData: { classPropertyName: "contextData", publicName: "contextData", isSignal: true, isRequired: false, transformFunction: null }, sectionOrder: { classPropertyName: "sectionOrder", publicName: "sectionOrder", isSignal: true, isRequired: true, transformFunction: null }, questionIndex: { classPropertyName: "questionIndex", publicName: "questionIndex", isSignal: true, isRequired: true, transformFunction: null }, showQuestionNumbers: { classPropertyName: "showQuestionNumbers", publicName: "showQuestionNumbers", isSignal: true, isRequired: false, transformFunction: null }, showQuestionCounter: { classPropertyName: "showQuestionCounter", publicName: "showQuestionCounter", isSignal: true, isRequired: false, transformFunction: null }, currentPosition: { classPropertyName: "currentPosition", publicName: "currentPosition", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
         <div class="__question-item" [class.__answered]="isAnswered()">
             <div class="__question-header">
+                @if (showQuestionNumbers() || (showQuestionCounter() && currentPosition())) {
                 <div class="__question-header-left">
                     @if (showQuestionNumbers()) {
                     <span class="__question-number">{{ sectionOrder() }}.{{ questionIndex() }}</span>
@@ -2042,6 +2047,7 @@ class AXMQuestionnaireViewerQuestionComponent {
                     </span>
                     }
                 </div>
+                }
                 <div class="__question-header-right">
                     <h3 class="__question-title">{{ question().question.title }}</h3>
                     @if (isAnswered()) {
@@ -2058,19 +2064,20 @@ class AXMQuestionnaireViewerQuestionComponent {
             <!-- Question Widget -->
             <div class="__question-widget">
                 @if (question().question.interface) {
-                <ng-container axp-widget-renderer [node]="question().question.interface" [mode]="'edit'"></ng-container>
+                <ng-container axp-widget-renderer [node]="question().question.interface" [mode]="mode()"></ng-container>
                 } @else {
                 <p class="__widget-placeholder">No widget interface configured</p>
                 }
             </div>
         </div>
-    `, isInline: true, styles: [".__question-item{padding:1rem;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}.__question-item.__answered{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-primary-300),var(--tw-border-opacity, 1));background-color:rgba(var(--ax-sys-color-primary-50),.3)}.__question-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.__question-header-left{display:flex;flex-shrink:0;align-items:center;gap:.75rem}.__question-number{font-size:.875rem;line-height:1.25rem;font-weight:600;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-600),var(--tw-text-opacity, 1))}.__question-counter{font-size:.75rem;line-height:1rem;font-weight:500;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.__question-header-right{display:flex;flex:1 1 0%;flex-wrap:wrap;align-items:flex-start;gap:.5rem}.__question-title{flex:1 1 0%;font-size:1rem;line-height:1.5rem;font-weight:500;--tw-text-opacity: 1;color:rgb(23 23 23 / var(--tw-text-opacity, 1))}.__answered-badge{border-radius:.25rem;padding:.25rem .5rem;font-size:.75rem;line-height:1rem;font-weight:500;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-100),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-success-800),var(--tw-text-opacity, 1))}.__required-badge{border-radius:.25rem;padding:.25rem .5rem;font-size:.75rem;line-height:1rem;font-weight:500;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-100),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-800),var(--tw-text-opacity, 1))}.__question-description{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__question-widget{margin-top:.5rem}.__widget-placeholder{border-radius:.25rem;border-width:1px;border-style:dashed;padding:1rem;font-size:.875rem;line-height:1.25rem;font-style:italic;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: i1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    `, isInline: true, styles: [".__question-item{padding:1rem;text-align:left;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}.__question-item.__answered{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-primary-300),var(--tw-border-opacity, 1));background-color:rgba(var(--ax-sys-color-primary-50),.3)}.__question-header{display:flex;width:100%;min-width:0px;align-items:flex-start;justify-content:space-between;gap:1rem}.__question-header-left{display:flex;flex-shrink:0;align-items:center;gap:.75rem}.__question-number{font-size:.875rem;line-height:1.25rem;font-weight:600;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-600),var(--tw-text-opacity, 1))}.__question-counter{font-size:.75rem;line-height:1rem;font-weight:500;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.__question-header-right{display:flex;min-width:0px;flex:1 1 0%;flex-wrap:wrap;align-items:flex-start;gap:.5rem}.__question-title{min-width:0px;flex:1 1 0%;text-align:left;font-size:1rem;line-height:1.5rem;font-weight:500;--tw-text-opacity: 1;color:rgb(23 23 23 / var(--tw-text-opacity, 1))}.__answered-badge{border-radius:.25rem;padding:.25rem .5rem;font-size:.75rem;line-height:1rem;font-weight:500;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-100),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-success-800),var(--tw-text-opacity, 1))}.__required-badge{border-radius:.25rem;padding:.25rem .5rem;font-size:.75rem;line-height:1rem;font-weight:500;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-100),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-800),var(--tw-text-opacity, 1))}.__question-description{margin-top:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__question-widget{margin-top:.75rem;text-align:left}.__widget-placeholder{border-radius:.25rem;border-width:1px;border-style:dashed;padding:1rem;font-size:.875rem;line-height:1.25rem;font-style:italic;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: i1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXMQuestionnaireViewerQuestionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axm-questionnaire-viewer-question', template: `
         <div class="__question-item" [class.__answered]="isAnswered()">
             <div class="__question-header">
+                @if (showQuestionNumbers() || (showQuestionCounter() && currentPosition())) {
                 <div class="__question-header-left">
                     @if (showQuestionNumbers()) {
                     <span class="__question-number">{{ sectionOrder() }}.{{ questionIndex() }}</span>
@@ -2081,6 +2088,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     </span>
                     }
                 </div>
+                }
                 <div class="__question-header-right">
                     <h3 class="__question-title">{{ question().question.title }}</h3>
                     @if (isAnswered()) {
@@ -2097,14 +2105,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             <!-- Question Widget -->
             <div class="__question-widget">
                 @if (question().question.interface) {
-                <ng-container axp-widget-renderer [node]="question().question.interface" [mode]="'edit'"></ng-container>
+                <ng-container axp-widget-renderer [node]="question().question.interface" [mode]="mode()"></ng-container>
                 } @else {
                 <p class="__widget-placeholder">No widget interface configured</p>
                 }
             </div>
         </div>
-    `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, AXTranslationModule, AXPWidgetCoreModule], styles: [".__question-item{padding:1rem;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}.__question-item.__answered{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-primary-300),var(--tw-border-opacity, 1));background-color:rgba(var(--ax-sys-color-primary-50),.3)}.__question-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.__question-header-left{display:flex;flex-shrink:0;align-items:center;gap:.75rem}.__question-number{font-size:.875rem;line-height:1.25rem;font-weight:600;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-600),var(--tw-text-opacity, 1))}.__question-counter{font-size:.75rem;line-height:1rem;font-weight:500;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.__question-header-right{display:flex;flex:1 1 0%;flex-wrap:wrap;align-items:flex-start;gap:.5rem}.__question-title{flex:1 1 0%;font-size:1rem;line-height:1.5rem;font-weight:500;--tw-text-opacity: 1;color:rgb(23 23 23 / var(--tw-text-opacity, 1))}.__answered-badge{border-radius:.25rem;padding:.25rem .5rem;font-size:.75rem;line-height:1rem;font-weight:500;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-100),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-success-800),var(--tw-text-opacity, 1))}.__required-badge{border-radius:.25rem;padding:.25rem .5rem;font-size:.75rem;line-height:1rem;font-weight:500;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-100),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-800),var(--tw-text-opacity, 1))}.__question-description{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__question-widget{margin-top:.5rem}.__widget-placeholder{border-radius:.25rem;border-width:1px;border-style:dashed;padding:1rem;font-size:.875rem;line-height:1.25rem;font-style:italic;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity, 1))}\n"] }]
-        }], propDecorators: { question: [{ type: i0.Input, args: [{ isSignal: true, alias: "question", required: true }] }], sectionOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionOrder", required: true }] }], questionIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "questionIndex", required: true }] }], showQuestionNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showQuestionNumbers", required: false }] }], showQuestionCounter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showQuestionCounter", required: false }] }], currentPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPosition", required: false }] }] } });
+    `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, AXTranslationModule, AXPWidgetCoreModule], styles: [".__question-item{padding:1rem;text-align:left;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}.__question-item.__answered{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-primary-300),var(--tw-border-opacity, 1));background-color:rgba(var(--ax-sys-color-primary-50),.3)}.__question-header{display:flex;width:100%;min-width:0px;align-items:flex-start;justify-content:space-between;gap:1rem}.__question-header-left{display:flex;flex-shrink:0;align-items:center;gap:.75rem}.__question-number{font-size:.875rem;line-height:1.25rem;font-weight:600;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-600),var(--tw-text-opacity, 1))}.__question-counter{font-size:.75rem;line-height:1rem;font-weight:500;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.__question-header-right{display:flex;min-width:0px;flex:1 1 0%;flex-wrap:wrap;align-items:flex-start;gap:.5rem}.__question-title{min-width:0px;flex:1 1 0%;text-align:left;font-size:1rem;line-height:1.5rem;font-weight:500;--tw-text-opacity: 1;color:rgb(23 23 23 / var(--tw-text-opacity, 1))}.__answered-badge{border-radius:.25rem;padding:.25rem .5rem;font-size:.75rem;line-height:1rem;font-weight:500;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-100),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-success-800),var(--tw-text-opacity, 1))}.__required-badge{border-radius:.25rem;padding:.25rem .5rem;font-size:.75rem;line-height:1rem;font-weight:500;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-100),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-800),var(--tw-text-opacity, 1))}.__question-description{margin-top:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__question-widget{margin-top:.75rem;text-align:left}.__widget-placeholder{border-radius:.25rem;border-width:1px;border-style:dashed;padding:1rem;font-size:.875rem;line-height:1.25rem;font-style:italic;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity, 1))}\n"] }]
+        }], propDecorators: { question: [{ type: i0.Input, args: [{ isSignal: true, alias: "question", required: true }] }], contextData: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextData", required: false }] }], sectionOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionOrder", required: true }] }], questionIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "questionIndex", required: true }] }], showQuestionNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showQuestionNumbers", required: false }] }], showQuestionCounter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showQuestionCounter", required: false }] }], currentPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPosition", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }] } });
 
 //#region ----   Imports   ----
 //#endregion
@@ -2144,7 +2152,7 @@ class AXMQuestionnaireViewerSinglePageViewComponent {
                 </div>
             </div>
             }
-    `, isInline: true, styles: ["axm-questionnaire-viewer-single-page-view{display:flex;height:100%;flex-direction:column;gap:1.5rem;overflow-y:auto;overflow-x:hidden;padding:1rem}axm-questionnaire-viewer-single-page-view .__single-page-section{display:flex}axm-questionnaire-viewer-single-page-view .__single-page-section{flex-direction:column}axm-questionnaire-viewer-single-page-view .__single-page-section{gap:1rem}axm-questionnaire-viewer-single-page-view .__single-page-section{flex-shrink:0}axm-questionnaire-viewer-single-page-view .__single-page-section{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}axm-questionnaire-viewer-single-page-view .__section-header{margin-bottom:.5rem}axm-questionnaire-viewer-single-page-view .__section-header{display:flex}axm-questionnaire-viewer-single-page-view .__section-header{flex-direction:column}axm-questionnaire-viewer-single-page-view .__section-header{gap:.125rem}axm-questionnaire-viewer-single-page-view .__section-title{font-size:1.25rem;line-height:1.75rem}axm-questionnaire-viewer-single-page-view .__section-title{font-weight:600}axm-questionnaire-viewer-single-page-view .__section-title{--tw-text-opacity: 1;color:rgb(23 23 23 / var(--tw-text-opacity, 1))}axm-questionnaire-viewer-single-page-view .__section-description{font-size:.875rem;line-height:1.25rem}axm-questionnaire-viewer-single-page-view .__section-description{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}axm-questionnaire-viewer-single-page-view .__questions-list{display:flex}axm-questionnaire-viewer-single-page-view .__questions-list{flex-direction:column}axm-questionnaire-viewer-single-page-view .__questions-list{gap:1rem}axm-questionnaire-viewer-single-page-view .__questions-list .__question-item{display:flex}axm-questionnaire-viewer-single-page-view .__questions-list .__question-item{flex-direction:column}axm-questionnaire-viewer-single-page-view .__questions-list .__question-item{gap:.75rem}axm-questionnaire-viewer-single-page-view .__questions-list .__question-item{border-radius:.25rem}axm-questionnaire-viewer-single-page-view .__questions-list .__question-item{border-width:1px}axm-questionnaire-viewer-single-page-view .__questions-list .__question-item{--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1))}axm-questionnaire-viewer-single-page-view .__questions-list .__question-item{padding:1rem}axm-questionnaire-viewer-single-page-view .__questions-list .__question-item{--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXMQuestionnaireViewerQuestionComponent, selector: "axm-questionnaire-viewer-question", inputs: ["question", "sectionOrder", "questionIndex", "showQuestionNumbers", "showQuestionCounter", "currentPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: ["axm-questionnaire-viewer-single-page-view{display:flex;height:100%;flex-direction:column;gap:1.5rem;overflow-y:auto;overflow-x:hidden;padding:1rem}axm-questionnaire-viewer-single-page-view .__single-page-section{display:flex}axm-questionnaire-viewer-single-page-view .__single-page-section{flex-direction:column}axm-questionnaire-viewer-single-page-view .__single-page-section{gap:1rem}axm-questionnaire-viewer-single-page-view .__single-page-section{flex-shrink:0}axm-questionnaire-viewer-single-page-view .__single-page-section{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}axm-questionnaire-viewer-single-page-view .__section-header{margin-bottom:.5rem}axm-questionnaire-viewer-single-page-view .__section-header{display:flex}axm-questionnaire-viewer-single-page-view .__section-header{flex-direction:column}axm-questionnaire-viewer-single-page-view .__section-header{gap:.125rem}axm-questionnaire-viewer-single-page-view .__section-title{font-size:1.25rem;line-height:1.75rem}axm-questionnaire-viewer-single-page-view .__section-title{font-weight:600}axm-questionnaire-viewer-single-page-view .__section-title{--tw-text-opacity: 1;color:rgb(23 23 23 / var(--tw-text-opacity, 1))}axm-questionnaire-viewer-single-page-view .__section-description{font-size:.875rem;line-height:1.25rem}axm-questionnaire-viewer-single-page-view .__section-description{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}axm-questionnaire-viewer-single-page-view .__questions-list{display:flex}axm-questionnaire-viewer-single-page-view .__questions-list{flex-direction:column}axm-questionnaire-viewer-single-page-view .__questions-list{gap:1rem}axm-questionnaire-viewer-single-page-view .__questions-list .__question-item{display:flex}axm-questionnaire-viewer-single-page-view .__questions-list .__question-item{flex-direction:column}axm-questionnaire-viewer-single-page-view .__questions-list .__question-item{gap:.75rem}axm-questionnaire-viewer-single-page-view .__questions-list .__question-item{border-radius:.25rem}axm-questionnaire-viewer-single-page-view .__questions-list .__question-item{border-width:1px}axm-questionnaire-viewer-single-page-view .__questions-list .__question-item{--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1))}axm-questionnaire-viewer-single-page-view .__questions-list .__question-item{padding:1rem}axm-questionnaire-viewer-single-page-view .__questions-list .__question-item{--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXMQuestionnaireViewerQuestionComponent, selector: "axm-questionnaire-viewer-question", inputs: ["question", "contextData", "sectionOrder", "questionIndex", "showQuestionNumbers", "showQuestionCounter", "currentPosition", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXMQuestionnaireViewerSinglePageViewComponent, decorators: [{
             type: Component,
@@ -2214,7 +2222,7 @@ class AXMQuestionnaireViewerPagePerGroupViewComponent {
                 </div>
             </div>
             }
-    `, isInline: true, styles: ["axm-questionnaire-viewer-page-per-group-view{display:flex;flex-direction:column;gap:1rem;padding:1rem}axm-questionnaire-viewer-page-per-group-view .__page-section{display:flex}axm-questionnaire-viewer-page-per-group-view .__page-section{flex-direction:column}axm-questionnaire-viewer-page-per-group-view .__page-section{gap:1rem}axm-questionnaire-viewer-page-per-group-view .__page-section{flex-shrink:0}axm-questionnaire-viewer-page-per-group-view .__page-section{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}axm-questionnaire-viewer-page-per-group-view .__section-header{display:flex}axm-questionnaire-viewer-page-per-group-view .__section-header{flex-shrink:0}axm-questionnaire-viewer-page-per-group-view .__section-header{flex-direction:column}axm-questionnaire-viewer-page-per-group-view .__section-header{gap:.125rem}axm-questionnaire-viewer-page-per-group-view .__section-title{font-size:1.5rem;line-height:2rem}axm-questionnaire-viewer-page-per-group-view .__section-title{font-weight:600}axm-questionnaire-viewer-page-per-group-view .__section-title{--tw-text-opacity: 1;color:rgb(23 23 23 / var(--tw-text-opacity, 1))}axm-questionnaire-viewer-page-per-group-view .__section-description{font-size:.875rem;line-height:1.25rem}axm-questionnaire-viewer-page-per-group-view .__section-description{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}axm-questionnaire-viewer-page-per-group-view .__questions-list{display:flex}axm-questionnaire-viewer-page-per-group-view .__questions-list{flex:1 1 0%}axm-questionnaire-viewer-page-per-group-view .__questions-list{flex-direction:column}axm-questionnaire-viewer-page-per-group-view .__questions-list{gap:1rem}axm-questionnaire-viewer-page-per-group-view .__questions-list .__question-item{display:flex}axm-questionnaire-viewer-page-per-group-view .__questions-list .__question-item{flex-direction:column}axm-questionnaire-viewer-page-per-group-view .__questions-list .__question-item{gap:.75rem}axm-questionnaire-viewer-page-per-group-view .__questions-list .__question-item{border-radius:.25rem}axm-questionnaire-viewer-page-per-group-view .__questions-list .__question-item{border-width:1px}axm-questionnaire-viewer-page-per-group-view .__questions-list .__question-item{--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1))}axm-questionnaire-viewer-page-per-group-view .__questions-list .__question-item{padding:1rem}axm-questionnaire-viewer-page-per-group-view .__questions-list .__question-item{--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity, 1))}axm-questionnaire-viewer-page-per-group-view .__navigation{display:flex}axm-questionnaire-viewer-page-per-group-view .__navigation{align-items:center}axm-questionnaire-viewer-page-per-group-view .__navigation{justify-content:space-between}axm-questionnaire-viewer-page-per-group-view .__navigation{border-top-width:1px}axm-questionnaire-viewer-page-per-group-view .__navigation{--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1))}axm-questionnaire-viewer-page-per-group-view .__navigation{padding:1rem}axm-questionnaire-viewer-page-per-group-view .__navigation{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXMQuestionnaireViewerQuestionComponent, selector: "axm-questionnaire-viewer-question", inputs: ["question", "sectionOrder", "questionIndex", "showQuestionNumbers", "showQuestionCounter", "currentPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: ["axm-questionnaire-viewer-page-per-group-view{display:flex;flex-direction:column;gap:1rem;padding:1rem}axm-questionnaire-viewer-page-per-group-view .__page-section{display:flex}axm-questionnaire-viewer-page-per-group-view .__page-section{flex-direction:column}axm-questionnaire-viewer-page-per-group-view .__page-section{gap:1rem}axm-questionnaire-viewer-page-per-group-view .__page-section{flex-shrink:0}axm-questionnaire-viewer-page-per-group-view .__page-section{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}axm-questionnaire-viewer-page-per-group-view .__section-header{display:flex}axm-questionnaire-viewer-page-per-group-view .__section-header{flex-shrink:0}axm-questionnaire-viewer-page-per-group-view .__section-header{flex-direction:column}axm-questionnaire-viewer-page-per-group-view .__section-header{gap:.125rem}axm-questionnaire-viewer-page-per-group-view .__section-title{font-size:1.5rem;line-height:2rem}axm-questionnaire-viewer-page-per-group-view .__section-title{font-weight:600}axm-questionnaire-viewer-page-per-group-view .__section-title{--tw-text-opacity: 1;color:rgb(23 23 23 / var(--tw-text-opacity, 1))}axm-questionnaire-viewer-page-per-group-view .__section-description{font-size:.875rem;line-height:1.25rem}axm-questionnaire-viewer-page-per-group-view .__section-description{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}axm-questionnaire-viewer-page-per-group-view .__questions-list{display:flex}axm-questionnaire-viewer-page-per-group-view .__questions-list{flex:1 1 0%}axm-questionnaire-viewer-page-per-group-view .__questions-list{flex-direction:column}axm-questionnaire-viewer-page-per-group-view .__questions-list{gap:1rem}axm-questionnaire-viewer-page-per-group-view .__questions-list .__question-item{display:flex}axm-questionnaire-viewer-page-per-group-view .__questions-list .__question-item{flex-direction:column}axm-questionnaire-viewer-page-per-group-view .__questions-list .__question-item{gap:.75rem}axm-questionnaire-viewer-page-per-group-view .__questions-list .__question-item{border-radius:.25rem}axm-questionnaire-viewer-page-per-group-view .__questions-list .__question-item{border-width:1px}axm-questionnaire-viewer-page-per-group-view .__questions-list .__question-item{--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1))}axm-questionnaire-viewer-page-per-group-view .__questions-list .__question-item{padding:1rem}axm-questionnaire-viewer-page-per-group-view .__questions-list .__question-item{--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity, 1))}axm-questionnaire-viewer-page-per-group-view .__navigation{display:flex}axm-questionnaire-viewer-page-per-group-view .__navigation{align-items:center}axm-questionnaire-viewer-page-per-group-view .__navigation{justify-content:space-between}axm-questionnaire-viewer-page-per-group-view .__navigation{border-top-width:1px}axm-questionnaire-viewer-page-per-group-view .__navigation{--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1))}axm-questionnaire-viewer-page-per-group-view .__navigation{padding:1rem}axm-questionnaire-viewer-page-per-group-view .__navigation{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXMQuestionnaireViewerQuestionComponent, selector: "axm-questionnaire-viewer-question", inputs: ["question", "contextData", "sectionOrder", "questionIndex", "showQuestionNumbers", "showQuestionCounter", "currentPosition", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXMQuestionnaireViewerPagePerGroupViewComponent, decorators: [{
             type: Component,
@@ -2281,7 +2289,7 @@ class AXMQuestionnaireViewerPagePerQuestionViewComponent {
             </axm-questionnaire-viewer-question>
         </div>
         }
-    `, isInline: true, styles: ["axm-questionnaire-viewer-page-per-question-view{display:flex;flex-direction:column;gap:1rem;padding:1rem;flex-shrink:0;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}axm-questionnaire-viewer-page-per-question-view .__section-header{display:flex}axm-questionnaire-viewer-page-per-question-view .__section-header{flex-shrink:0}axm-questionnaire-viewer-page-per-question-view .__section-header{flex-direction:column}axm-questionnaire-viewer-page-per-question-view .__section-header{gap:.125rem}axm-questionnaire-viewer-page-per-question-view .__section-title{font-size:1.25rem;line-height:1.75rem}axm-questionnaire-viewer-page-per-question-view .__section-title{font-weight:600}axm-questionnaire-viewer-page-per-question-view .__section-title{--tw-text-opacity: 1;color:rgb(23 23 23 / var(--tw-text-opacity, 1))}axm-questionnaire-viewer-page-per-question-view .__section-description{font-size:.875rem;line-height:1.25rem}axm-questionnaire-viewer-page-per-question-view .__section-description{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXMQuestionnaireViewerQuestionComponent, selector: "axm-questionnaire-viewer-question", inputs: ["question", "sectionOrder", "questionIndex", "showQuestionNumbers", "showQuestionCounter", "currentPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: ["axm-questionnaire-viewer-page-per-question-view{display:flex;flex-direction:column;gap:1rem;padding:1rem;flex-shrink:0;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}axm-questionnaire-viewer-page-per-question-view .__section-header{display:flex}axm-questionnaire-viewer-page-per-question-view .__section-header{flex-shrink:0}axm-questionnaire-viewer-page-per-question-view .__section-header{flex-direction:column}axm-questionnaire-viewer-page-per-question-view .__section-header{gap:.125rem}axm-questionnaire-viewer-page-per-question-view .__section-title{font-size:1.25rem;line-height:1.75rem}axm-questionnaire-viewer-page-per-question-view .__section-title{font-weight:600}axm-questionnaire-viewer-page-per-question-view .__section-title{--tw-text-opacity: 1;color:rgb(23 23 23 / var(--tw-text-opacity, 1))}axm-questionnaire-viewer-page-per-question-view .__section-description{font-size:.875rem;line-height:1.25rem}axm-questionnaire-viewer-page-per-question-view .__section-description{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXMQuestionnaireViewerQuestionComponent, selector: "axm-questionnaire-viewer-question", inputs: ["question", "contextData", "sectionOrder", "questionIndex", "showQuestionNumbers", "showQuestionCounter", "currentPosition", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXMQuestionnaireViewerPagePerQuestionViewComponent, decorators: [{
             type: Component,
@@ -2511,7 +2519,7 @@ class AXMQuestionnaireViewerSideMenuViewComponent {
             </div>
             }
         </div>
-    `, isInline: true, styles: [".__side-menu-container,.__drawer-container{display:flex;height:100%;width:100%;overflow:hidden}.__sidebar-drawer{height:100%;border-inline-end-width:1px;--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.__sidebar-content{height:100%;overflow-y:auto}.__desktop-sidebar{display:flex;height:100%;min-height:0px;flex-shrink:0;flex-direction:column;overflow:hidden;border-inline-end-width:1px;--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.__sidebar-tabs{--ax-comp-tabs-default-border-radius: 0;height:100%;min-height:0px;flex:1 1 0%;overflow-y:auto}.__sidebar-tabs ax-tab-item{margin-top:0;margin-bottom:0}.__sidebar-tabs ax-tab-item{padding-top:.75rem;padding-bottom:.75rem}.__sidebar-tabs ax-tab-item{font-weight:600}.__main-content{display:flex;height:100%;flex:1 1 0%;flex-direction:column;overflow:hidden}.__mobile-menu-button{flex-shrink:0;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1));padding:.5rem}.__questions-container{display:flex;min-height:0px;flex:1 1 0%;flex-direction:column;gap:1rem;overflow-y:auto;padding:1rem}.__section-header{margin-bottom:1rem;display:flex;flex-direction:column;gap:.125rem}.__section-title{font-size:1.5rem;line-height:2rem;font-weight:600;--tw-text-opacity: 1;color:rgb(23 23 23 / var(--tw-text-opacity, 1))}.__section-description{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__questions-list{display:flex;flex:1 1 0%;flex-direction:column;gap:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXMQuestionnaireViewerQuestionComponent, selector: "axm-questionnaire-viewer-question", inputs: ["question", "sectionOrder", "questionIndex", "showQuestionNumbers", "showQuestionCounter", "currentPosition"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i1$1.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i1$1.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "component", type: i3.AXDrawerComponent, selector: "ax-drawer", inputs: ["location", "showBackdrop", "mode", "transition", "closeOnBackdropClick", "backdropClass", "collapsed", "singleOpenMode"], outputs: ["onBackdropClick", "collapsedStateChanged"] }, { kind: "component", type: i3.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "ngmodule", type: AXDrawerDirectiveModule }, { kind: "directive", type: AXResizableDirective, selector: "[axResizable]", inputs: ["axResizable", "minWidth", "maxWidth", "dblClickAction", "width", "defaultWidth"], outputs: ["axResizableChange", "minWidthChange", "maxWidthChange", "dblClickActionChange", "widthChange", "defaultWidthChange", "onResizingStarted", "onResizingEnded", "onResizingDblClick"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    `, isInline: true, styles: [".__side-menu-container,.__drawer-container{display:flex;height:100%;width:100%;overflow:hidden}.__sidebar-drawer{height:100%;border-inline-end-width:1px;--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.__sidebar-content{height:100%;overflow-y:auto}.__desktop-sidebar{display:flex;height:100%;min-height:0px;flex-shrink:0;flex-direction:column;overflow:hidden;border-inline-end-width:1px;--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.__sidebar-tabs{--ax-comp-tabs-default-border-radius: 0;height:100%;min-height:0px;flex:1 1 0%;overflow-y:auto}.__sidebar-tabs ax-tab-item{margin-top:0;margin-bottom:0}.__sidebar-tabs ax-tab-item{padding-top:.75rem;padding-bottom:.75rem}.__sidebar-tabs ax-tab-item{font-weight:600}.__main-content{display:flex;height:100%;flex:1 1 0%;flex-direction:column;overflow:hidden}.__mobile-menu-button{flex-shrink:0;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1));padding:.5rem}.__questions-container{display:flex;min-height:0px;flex:1 1 0%;flex-direction:column;gap:1rem;overflow-y:auto;padding:1rem}.__section-header{margin-bottom:1rem;display:flex;flex-direction:column;gap:.125rem}.__section-title{font-size:1.5rem;line-height:2rem;font-weight:600;--tw-text-opacity: 1;color:rgb(23 23 23 / var(--tw-text-opacity, 1))}.__section-description{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__questions-list{display:flex;flex:1 1 0%;flex-direction:column;gap:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXMQuestionnaireViewerQuestionComponent, selector: "axm-questionnaire-viewer-question", inputs: ["question", "contextData", "sectionOrder", "questionIndex", "showQuestionNumbers", "showQuestionCounter", "currentPosition", "mode"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i1$1.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i1$1.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "component", type: i3.AXDrawerComponent, selector: "ax-drawer", inputs: ["location", "showBackdrop", "mode", "transition", "closeOnBackdropClick", "backdropClass", "collapsed", "singleOpenMode"], outputs: ["onBackdropClick", "collapsedStateChanged"] }, { kind: "component", type: i3.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "ngmodule", type: AXDrawerDirectiveModule }, { kind: "directive", type: AXResizableDirective, selector: "[axResizable]", inputs: ["axResizable", "minWidth", "maxWidth", "dblClickAction", "width", "defaultWidth"], outputs: ["axResizableChange", "minWidthChange", "maxWidthChange", "dblClickActionChange", "widthChange", "defaultWidthChange", "onResizingStarted", "onResizingEnded", "onResizingDblClick"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXMQuestionnaireViewerSideMenuViewComponent, decorators: [{
             type: Component,
@@ -2845,6 +2853,14 @@ class AXMQuestionnaireViewerComponent {
     getQuestionsWithAnswers() {
         return this.vm.getQuestionsWithAnswers();
     }
+    /**
+     * Get context data for review step (answers at widget paths).
+     * Must be called before transitioning to review while viewer is still rendered.
+     */
+    getReviewContext() {
+        const container = this.vm.widgetContainer();
+        return container?.contextService?.data() ?? {};
+    }
     /**
      * Submit questionnaire
      * Validates all questions before submitting
@@ -3053,19 +3069,19 @@ class AXMQuestionnaireViewerFeatureModule {
             provideCommandSetups([
                 {
                     key: `${RootConfig.module.name}.${RootConfig.entities.questionnaire.name}:Preview`,
-                    command: () => import('./acorex-modules-assessment-management-preview-questionnaire.command-BIXy9eut.mjs').then((c) => c.PreviewQuestionnaireCommand),
+                    command: () => import('./acorex-modules-assessment-management-preview-questionnaire.command-NcZlE6DU.mjs').then((c) => c.PreviewQuestionnaireCommand),
                 },
                 {
                     key: `${RootConfig.module.name}.${RootConfig.entities.assessmentSession.name}:ViewAnswers`,
-                    command: () => import('./acorex-modules-assessment-management-view-session-answers.command-Czq7cj9R.mjs').then((c) => c.ViewSessionAnswersCommand),
+                    command: () => import('./acorex-modules-assessment-management-view-session-answers.command-CMmE72Kt.mjs').then((c) => c.ViewSessionAnswersCommand),
                 },
                 {
                     key: `${RootConfig.module.name}.${RootConfig.entities.assessmentSession.name}:Fill`,
-                    command: () => import('./acorex-modules-assessment-management-fill-assessment-session.command-zT5u3h_s.mjs').then((c) => c.FillAssessmentSessionCommand),
+                    command: () => import('./acorex-modules-assessment-management-fill-assessment-session.command-Dgeh3E5f.mjs').then((c) => c.FillAssessmentSessionCommand),
                 },
                 {
                     key: `${RootConfig.module.name}.${RootConfig.entities.assessmentCase.name}:Fill`,
-                    command: () => import('./acorex-modules-assessment-management-fill-assessment-session.command-zT5u3h_s.mjs').then((c) => c.FillAssessmentSessionCommand),
+                    command: () => import('./acorex-modules-assessment-management-fill-assessment-session.command-Dgeh3E5f.mjs').then((c) => c.FillAssessmentSessionCommand),
                 },
             ]),
         ], imports: [AXPWidgetCoreModule.forChild({
@@ -3101,19 +3117,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         provideCommandSetups([
                             {
                                 key: `${RootConfig.module.name}.${RootConfig.entities.questionnaire.name}:Preview`,
-                                command: () => import('./acorex-modules-assessment-management-preview-questionnaire.command-BIXy9eut.mjs').then((c) => c.PreviewQuestionnaireCommand),
+                                command: () => import('./acorex-modules-assessment-management-preview-questionnaire.command-NcZlE6DU.mjs').then((c) => c.PreviewQuestionnaireCommand),
                             },
                             {
                                 key: `${RootConfig.module.name}.${RootConfig.entities.assessmentSession.name}:ViewAnswers`,
-                                command: () => import('./acorex-modules-assessment-management-view-session-answers.command-Czq7cj9R.mjs').then((c) => c.ViewSessionAnswersCommand),
+                                command: () => import('./acorex-modules-assessment-management-view-session-answers.command-CMmE72Kt.mjs').then((c) => c.ViewSessionAnswersCommand),
                             },
                             {
                                 key: `${RootConfig.module.name}.${RootConfig.entities.assessmentSession.name}:Fill`,
-                                command: () => import('./acorex-modules-assessment-management-fill-assessment-session.command-zT5u3h_s.mjs').then((c) => c.FillAssessmentSessionCommand),
+                                command: () => import('./acorex-modules-assessment-management-fill-assessment-session.command-Dgeh3E5f.mjs').then((c) => c.FillAssessmentSessionCommand),
                             },
                             {
                                 key: `${RootConfig.module.name}.${RootConfig.entities.assessmentCase.name}:Fill`,
-                                command: () => import('./acorex-modules-assessment-management-fill-assessment-session.command-zT5u3h_s.mjs').then((c) => c.FillAssessmentSessionCommand),
+                                command: () => import('./acorex-modules-assessment-management-fill-assessment-session.command-Dgeh3E5f.mjs').then((c) => c.FillAssessmentSessionCommand),
                             },
                         ]),
                     ],
@@ -3215,6 +3231,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 //#endregion
 
 //#region ----   Imports   ----
+/**
+ * Extract PrePostConfig from questionnaire entity.
+ */
+function toPrePostConfig(q) {
+    if (!q)
+        return null;
+    return {
+        preEnabled: q.preEnabled,
+        preContent: q.preContent,
+        postReviewEnabled: q.postReviewEnabled,
+        postSummaryEnabled: q.postSummaryEnabled,
+        postSummaryContent: q.postSummaryContent,
+        passingScore: q.passingScore,
+    };
+}
 //#endregion
 
 //#region ----   Types   ----
@@ -3223,31 +3254,253 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 //#region ----   Types   ----
 //#endregion
 
+//#region ----   Pre/Post Content Utilities   ----
+/**
+ * Resolve multi-language content to string for current locale.
+ * When content is Record<locale, string>, returns value for locale or fallback.
+ */
+function resolveMultiLanguageContent(content, currentLocale) {
+    if (content == null || content === '')
+        return '';
+    if (typeof content === 'string')
+        return content;
+    const record = content;
+    return record[currentLocale] ?? record['en-US'] ?? Object.values(record)[0] ?? '';
+}
+/**
+ * Resolve placeholders in summary content.
+ * Supported: {{score}}, {{passFail}}, {{totalQuestions}}, {{answeredCount}}
+ */
+function resolveSummaryPlaceholders(content, values) {
+    if (!content)
+        return '';
+    return content
+        .replace(/\{\{score\}\}/g, String(values.score ?? ''))
+        .replace(/\{\{passFail\}\}/g, values.passFail ?? '')
+        .replace(/\{\{totalQuestions\}\}/g, String(values.totalQuestions ?? ''))
+        .replace(/\{\{answeredCount\}\}/g, String(values.answeredCount ?? ''));
+}
+//#endregion
+
 //#region ----   Imports   ----
 //#endregion
 //#region ----   Component   ----
-class AXMQuestionnaireViewerPageComponent extends AXPPageLayoutBaseComponent {
-    //#endregion
-    //#region ----   Page Layout Overrides   ----
-    async getPageTitle() {
-        return this.translateService.translateAsync('@assessment-management:cases.actions.fill-assessment.title');
+/**
+ * Reusable pre-questionnaire (welcome) content component.
+ * Renders rich text content only. Start button is provided by the host footer.
+ * Use in page, popup, standalone, and preview views.
+ */
+class AXMPreQuestionnaireContentComponent {
+    constructor() {
+        //#region ----   Services & Dependencies   ----
+        this.sanitizer = inject(DomSanitizer);
+        this.translationService = inject(AXTranslationService);
+        //#endregion
+        //#region ----   Inputs   ----
+        /** Rich text content. Supports multi-language: Record<locale, string>. */
+        this.content = input(null, ...(ngDevMode ? [{ debugName: "content" }] : []));
+        /** Locale for multi-language content. Defaults to active lang. */
+        this.locale = input(undefined, ...(ngDevMode ? [{ debugName: "locale" }] : []));
+        //#endregion
+        //#region ----   Computed   ----
+        this.contentHtml = computed(() => {
+            const contentVal = this.content();
+            const localeVal = this.locale() ?? this.translationService.getActiveLang?.() ?? 'en-US';
+            const resolved = resolveMultiLanguageContent(contentVal, localeVal);
+            return resolved ? this.sanitizer.bypassSecurityTrustHtml(resolved) : '';
+        }, ...(ngDevMode ? [{ debugName: "contentHtml" }] : []));
     }
-    getPageBreadcrumbs() {
-        return [
-            {
-                title: '@assessment-management:cases.entities.assessment-case.plural',
-                command: { name: 'navigate', options: { path: this.getCasesListPath() } },
-            },
-            { title: '@assessment-management:cases.actions.fill-assessment.title' },
-        ];
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXMPreQuestionnaireContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: AXMPreQuestionnaireContentComponent, isStandalone: true, selector: "axm-pre-questionnaire-content", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "axm-pre-questionnaire-content" }, ngImport: i0, template: `
+    <div class="axm-pre-questionnaire-content ax-flex ax-flex-col ax-items-center ax-justify-center ax-p-8 ax-min-h-[200px]">
+      <div class="ax-max-w-2xl ax-w-full ax-prose" [innerHTML]="contentHtml()"></div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTranslationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXMPreQuestionnaireContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axm-pre-questionnaire-content',
+                    template: `
+    <div class="axm-pre-questionnaire-content ax-flex ax-flex-col ax-items-center ax-justify-center ax-p-8 ax-min-h-[200px]">
+      <div class="ax-max-w-2xl ax-w-full ax-prose" [innerHTML]="contentHtml()"></div>
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule, AXTranslationModule],
+                    encapsulation: ViewEncapsulation.None,
+                    host: { class: 'axm-pre-questionnaire-content' },
+                }]
+        }], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }] } });
+
+//#region ----   Imports   ----
+//#endregion
+//#region ----   Component   ----
+/**
+ * Reusable post-questionnaire component.
+ * Renders either review (Q&A list with widget-renderer in view mode) or summary (content).
+ * Edit, Submit, Done buttons are provided by the host footer.
+ * Use in page, popup, standalone, and preview views.
+ */
+class AXMPostQuestionnaireContentComponent {
+    constructor() {
+        //#region ----   Services & Dependencies   ----
+        this.sanitizer = inject(DomSanitizer);
+        this.translationService = inject(AXTranslationService);
+        //#endregion
+        //#region ----   Inputs   ----
+        /** Display mode: 'review' or 'summary'. */
+        this.mode = input('review', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+        /** Questions with answers for review mode. */
+        this.questionsWithAnswers = input([], ...(ngDevMode ? [{ debugName: "questionsWithAnswers" }] : []));
+        /** Context data for widget rendering in view mode (answers at widget paths). Required for proper display. */
+        this.reviewContext = input(null, ...(ngDevMode ? [{ debugName: "reviewContext" }] : []));
+        /** Summary content (rich text). Supports multi-language and placeholders. */
+        this.summaryContent = input(null, ...(ngDevMode ? [{ debugName: "summaryContent" }] : []));
+        /** Placeholder values for summary: score, passFail, totalQuestions, answeredCount. */
+        this.placeholderValues = input(null, ...(ngDevMode ? [{ debugName: "placeholderValues" }] : []));
+        /** Locale for multi-language content. Defaults to active lang. */
+        this.locale = input(undefined, ...(ngDevMode ? [{ debugName: "locale" }] : []));
+        //#endregion
+        //#region ----   Computed   ----
+        this.summaryContentHtml = computed(() => {
+            const content = this.summaryContent();
+            const values = this.placeholderValues();
+            const localeVal = this.locale() ?? this.translationService.getActiveLang?.() ?? 'en-US';
+            let resolved = resolveMultiLanguageContent(content, localeVal);
+            if (resolved && values) {
+                resolved = resolveSummaryPlaceholders(resolved, values);
+            }
+            if (!resolved && values) {
+                resolved = `<p>Your score: <strong>${values.score ?? '—'}%</strong></p><p>You answered <strong>${values.answeredCount ?? 0}</strong> of <strong>${values.totalQuestions ?? 0}</strong> questions.</p>`;
+            }
+            return resolved ? this.sanitizer.bypassSecurityTrustHtml(resolved) : '';
+        }, ...(ngDevMode ? [{ debugName: "summaryContentHtml" }] : []));
     }
-    async getBackButton() {
-        const title = await this.translateService.translateAsync('@assessment-management:cases.entities.assessment-case.plural');
-        return { title };
+    //#endregion
+    //#region ----   Helpers   ----
+    formatAnswer(answer) {
+        if (answer == null || answer === '')
+            return '—';
+        if (typeof answer === 'string')
+            return answer;
+        if (typeof answer === 'number' || typeof answer === 'boolean')
+            return String(answer);
+        if (Array.isArray(answer))
+            return answer.map((a) => (typeof a === 'object' ? JSON.stringify(a) : String(a))).join(', ');
+        if (typeof answer === 'object')
+            return JSON.stringify(answer);
+        return String(answer);
     }
-    onBackButtonClick() {
-        this.router.navigateByUrl(this.getCasesListPath());
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXMPostQuestionnaireContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXMPostQuestionnaireContentComponent, isStandalone: true, selector: "axm-post-questionnaire-content", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, questionsWithAnswers: { classPropertyName: "questionsWithAnswers", publicName: "questionsWithAnswers", isSignal: true, isRequired: false, transformFunction: null }, reviewContext: { classPropertyName: "reviewContext", publicName: "reviewContext", isSignal: true, isRequired: false, transformFunction: null }, summaryContent: { classPropertyName: "summaryContent", publicName: "summaryContent", isSignal: true, isRequired: false, transformFunction: null }, placeholderValues: { classPropertyName: "placeholderValues", publicName: "placeholderValues", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "axm-post-questionnaire-content" }, ngImport: i0, template: `
+    @if (mode() === 'review') {
+      <div class="axm-post-questionnaire-content __review ax-flex ax-flex-col ax-overflow-auto ax-min-h-full">
+        <div class="ax-p-4 ax-border-b">
+          <h2 class="ax-text-lg ax-font-semibold">{{ '@assessment-management:questionnaires.components.questionnaire-viewer.flow.review-title' | translate | async }}</h2>
+        </div>
+        <div class="ax-flex-1 ax-overflow-auto ax-p-4 ax-flex ax-flex-col ax-gap-4">
+          @if (reviewContext(); as ctx) {
+            <axp-widgets-container [context]="ctx" class="ax-flex ax-flex-col ax-gap-4">
+              @for (item of questionsWithAnswers(); track item.questionId; let idx = $index) {
+                @if (item.question?.question?.interface) {
+                  <div class="__review-question-card ax-bg-neutral-50 ax-rounded-lg ax-border ax-border-neutral-200 ax-overflow-hidden ax-shadow-sm">
+                    <axm-questionnaire-viewer-question
+                      [question]="item.question!"
+                      [sectionOrder]="1"
+                      [questionIndex]="idx + 1"
+                      [showQuestionNumbers]="false"
+                      [mode]="'view'"
+                      [contextData]="ctx"
+                    ></axm-questionnaire-viewer-question>
+                  </div>
+                } @else {
+                  <div class="__review-question-card ax-bg-neutral-50 ax-rounded-lg ax-border ax-border-neutral-200 ax-p-4 ax-shadow-sm">
+                    <div class="ax-font-medium ax-mb-2 ax-text-neutral-900">{{ item.title }}</div>
+                    <div class="ax-text-sm ax-text-neutral-600">{{ formatAnswer(item.answer) }}</div>
+                  </div>
+                }
+              }
+            </axp-widgets-container>
+          } @else {
+            @for (item of questionsWithAnswers(); track item.questionId) {
+              <div class="__review-question-card ax-bg-neutral-50 ax-rounded-lg ax-border ax-border-neutral-200 ax-p-4 ax-shadow-sm">
+                <div class="ax-font-medium ax-mb-2 ax-text-neutral-900">{{ item.title }}</div>
+                <div class="ax-text-sm ax-text-neutral-600">{{ formatAnswer(item.answer) }}</div>
+              </div>
+            }
+          }
+        </div>
+      </div>
+    } @else {
+      <div class="axm-post-questionnaire-content __summary ax-flex ax-flex-col ax-items-center ax-justify-center ax-p-8 ax-min-h-[200px]">
+        <h2 class="ax-text-xl ax-font-semibold ax-mb-4">{{ '@assessment-management:questionnaires.components.questionnaire-viewer.flow.summary-title' | translate | async }}</h2>
+        <div class="ax-max-w-2xl ax-w-full ax-prose" [innerHTML]="summaryContentHtml()"></div>
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "component", type: AXMQuestionnaireViewerQuestionComponent, selector: "axm-questionnaire-viewer-question", inputs: ["question", "contextData", "sectionOrder", "questionIndex", "showQuestionNumbers", "showQuestionCounter", "currentPosition", "mode"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXMPostQuestionnaireContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axm-post-questionnaire-content',
+                    template: `
+    @if (mode() === 'review') {
+      <div class="axm-post-questionnaire-content __review ax-flex ax-flex-col ax-overflow-auto ax-min-h-full">
+        <div class="ax-p-4 ax-border-b">
+          <h2 class="ax-text-lg ax-font-semibold">{{ '@assessment-management:questionnaires.components.questionnaire-viewer.flow.review-title' | translate | async }}</h2>
+        </div>
+        <div class="ax-flex-1 ax-overflow-auto ax-p-4 ax-flex ax-flex-col ax-gap-4">
+          @if (reviewContext(); as ctx) {
+            <axp-widgets-container [context]="ctx" class="ax-flex ax-flex-col ax-gap-4">
+              @for (item of questionsWithAnswers(); track item.questionId; let idx = $index) {
+                @if (item.question?.question?.interface) {
+                  <div class="__review-question-card ax-bg-neutral-50 ax-rounded-lg ax-border ax-border-neutral-200 ax-overflow-hidden ax-shadow-sm">
+                    <axm-questionnaire-viewer-question
+                      [question]="item.question!"
+                      [sectionOrder]="1"
+                      [questionIndex]="idx + 1"
+                      [showQuestionNumbers]="false"
+                      [mode]="'view'"
+                      [contextData]="ctx"
+                    ></axm-questionnaire-viewer-question>
+                  </div>
+                } @else {
+                  <div class="__review-question-card ax-bg-neutral-50 ax-rounded-lg ax-border ax-border-neutral-200 ax-p-4 ax-shadow-sm">
+                    <div class="ax-font-medium ax-mb-2 ax-text-neutral-900">{{ item.title }}</div>
+                    <div class="ax-text-sm ax-text-neutral-600">{{ formatAnswer(item.answer) }}</div>
+                  </div>
+                }
+              }
+            </axp-widgets-container>
+          } @else {
+            @for (item of questionsWithAnswers(); track item.questionId) {
+              <div class="__review-question-card ax-bg-neutral-50 ax-rounded-lg ax-border ax-border-neutral-200 ax-p-4 ax-shadow-sm">
+                <div class="ax-font-medium ax-mb-2 ax-text-neutral-900">{{ item.title }}</div>
+                <div class="ax-text-sm ax-text-neutral-600">{{ formatAnswer(item.answer) }}</div>
+              </div>
+            }
+          }
+        </div>
+      </div>
+    } @else {
+      <div class="axm-post-questionnaire-content __summary ax-flex ax-flex-col ax-items-center ax-justify-center ax-p-8 ax-min-h-[200px]">
+        <h2 class="ax-text-xl ax-font-semibold ax-mb-4">{{ '@assessment-management:questionnaires.components.questionnaire-viewer.flow.summary-title' | translate | async }}</h2>
+        <div class="ax-max-w-2xl ax-w-full ax-prose" [innerHTML]="summaryContentHtml()"></div>
+      </div>
     }
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule, AXTranslationModule, AXPWidgetCoreModule, AXMQuestionnaireViewerQuestionComponent],
+                    encapsulation: ViewEncapsulation.None,
+                    host: { class: 'axm-post-questionnaire-content' },
+                }]
+        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], questionsWithAnswers: [{ type: i0.Input, args: [{ isSignal: true, alias: "questionsWithAnswers", required: false }] }], reviewContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "reviewContext", required: false }] }], summaryContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "summaryContent", required: false }] }], placeholderValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderValues", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }] } });
+
+//#region ----   Imports   ----
+//#endregion
+//#region ----   Component   ----
+class AXMQuestionnaireViewerPageComponent extends AXPPageLayoutBaseComponent {
     //#endregion
     //#region ----   Lifecycle   ----
     constructor() {
@@ -3262,18 +3515,29 @@ class AXMQuestionnaireViewerPageComponent extends AXPPageLayoutBaseComponent {
         //#endregion
         //#region ----   State   ----
         this.structure = signal(null, ...(ngDevMode ? [{ debugName: "structure" }] : []));
+        this.questionnaire = signal(null, ...(ngDevMode ? [{ debugName: "questionnaire" }] : []));
         this.initialAnswers = signal({}, ...(ngDevMode ? [{ debugName: "initialAnswers" }] : []));
         this.viewerConfig = signal({ readonly: false }, ...(ngDevMode ? [{ debugName: "viewerConfig" }] : []));
+        this.prePostConfig = signal(null, ...(ngDevMode ? [{ debugName: "prePostConfig" }] : []));
         this.isLoading = signal(true, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
         this.loadError = signal(null, ...(ngDevMode ? [{ debugName: "loadError" }] : []));
-        this.isSubmitting = signal(false, ...(ngDevMode ? [{ debugName: "isSubmitting" }] : []));
         this.currentSessionId = signal(null, ...(ngDevMode ? [{ debugName: "currentSessionId" }] : []));
+        this.flowStep = signal('questions', ...(ngDevMode ? [{ debugName: "flowStep" }] : []));
+        this.reviewSnapshot = signal([], ...(ngDevMode ? [{ debugName: "reviewSnapshot" }] : []));
+        this.reviewContext = signal(null, ...(ngDevMode ? [{ debugName: "reviewContext" }] : []));
+        this.submitResult = signal(null, ...(ngDevMode ? [{ debugName: "submitResult" }] : []));
+        this.isSubmitting = signal(false, ...(ngDevMode ? [{ debugName: "isSubmitting" }] : []));
+        this.canNavigatePrevious = signal(false, ...(ngDevMode ? [{ debugName: "canNavigatePrevious" }] : []));
+        this.canNavigateNext = signal(false, ...(ngDevMode ? [{ debugName: "canNavigateNext" }] : []));
+        this.showNavigationButtons = signal(false, ...(ngDevMode ? [{ debugName: "showNavigationButtons" }] : []));
+        this.isLastStep = signal(false, ...(ngDevMode ? [{ debugName: "isLastStep" }] : []));
+        this.areAllRequiredQuestionsAnswered = signal(false, ...(ngDevMode ? [{ debugName: "areAllRequiredQuestionsAnswered" }] : []));
         //#endregion
         //#region ----   View References   ----
-        this.questionnaireViewer = viewChild('viewer', ...(ngDevMode ? [{ debugName: "questionnaireViewer" }] : []));
+        this.viewer = viewChild('viewer', ...(ngDevMode ? [{ debugName: "viewer" }] : []));
         //#endregion
         //#region ----   Computed   ----
-        this.viewerViewModel = computed(() => this.questionnaireViewer()?.viewmodel, ...(ngDevMode ? [{ debugName: "viewerViewModel" }] : []));
+        this.viewerViewModel = computed(() => this.viewer()?.viewmodel, ...(ngDevMode ? [{ debugName: "viewerViewModel" }] : []));
         this.totalQuestionsCount = computed(() => this.viewerViewModel()?.totalQuestionsCount() ?? 0, ...(ngDevMode ? [{ debugName: "totalQuestionsCount" }] : []));
         this.totalSectionsCount = computed(() => this.viewerViewModel()?.totalSectionsCount() ?? 0, ...(ngDevMode ? [{ debugName: "totalSectionsCount" }] : []));
         this.showTimer = computed(() => this.viewerViewModel()?.showTimer() ?? false, ...(ngDevMode ? [{ debugName: "showTimer" }] : []));
@@ -3282,21 +3546,24 @@ class AXMQuestionnaireViewerPageComponent extends AXPPageLayoutBaseComponent {
         this.showProgressBar = computed(() => this.viewerViewModel()?.showProgressBar() ?? false, ...(ngDevMode ? [{ debugName: "showProgressBar" }] : []));
         this.answeredQuestionsCount = computed(() => this.viewerViewModel()?.answeredQuestionsCount() ?? 0, ...(ngDevMode ? [{ debugName: "answeredQuestionsCount" }] : []));
         this.isReadonly = computed(() => this.viewerConfig()?.readonly ?? false, ...(ngDevMode ? [{ debugName: "isReadonly" }] : []));
-        this.canNavigatePrevious = signal(false, ...(ngDevMode ? [{ debugName: "canNavigatePrevious" }] : []));
-        this.canNavigateNext = signal(false, ...(ngDevMode ? [{ debugName: "canNavigateNext" }] : []));
-        this.showNavigationButtons = signal(false, ...(ngDevMode ? [{ debugName: "showNavigationButtons" }] : []));
-        this.isLastStep = signal(false, ...(ngDevMode ? [{ debugName: "isLastStep" }] : []));
-        this.areAllRequiredQuestionsAnswered = signal(false, ...(ngDevMode ? [{ debugName: "areAllRequiredQuestionsAnswered" }] : []));
+        this.showReviewButton = computed(() => this.isLastStep() && (this.prePostConfig()?.postReviewEnabled ?? false) && this.flowStep() === 'questions', ...(ngDevMode ? [{ debugName: "showReviewButton" }] : []));
+        /** Use answers from review context when returning from review; otherwise use initial answers. */
+        this.effectiveInitialAnswers = computed(() => {
+            const ctx = this.reviewContext();
+            if (!ctx)
+                return this.initialAnswers();
+            return ctx.answers ?? ctx;
+        }, ...(ngDevMode ? [{ debugName: "effectiveInitialAnswers" }] : []));
         effect(() => {
-            const viewer = this.questionnaireViewer();
-            if (viewer) {
-                const vm = viewer.viewmodel;
+            const v = this.viewer();
+            if (v) {
+                const vm = v.viewmodel;
                 this.canNavigatePrevious.set(vm.canNavigatePrevious());
                 this.canNavigateNext.set(vm.canNavigateNext());
-                const viewMode = viewer.viewMode;
+                const viewMode = v.viewMode;
                 this.showNavigationButtons.set(viewMode === 'page-per-group' || viewMode === 'page-per-question' || viewMode === 'side-menu');
-                this.isLastStep.set(viewer.isLastStep);
-                this.areAllRequiredQuestionsAnswered.set(viewer.areAllRequiredQuestionsAnswered);
+                this.isLastStep.set(v.isLastStep);
+                this.areAllRequiredQuestionsAnswered.set(v.areAllRequiredQuestionsAnswered);
             }
         });
     }
@@ -3329,8 +3596,7 @@ class AXMQuestionnaireViewerPageComponent extends AXPPageLayoutBaseComponent {
                 return;
             }
             let answers = {};
-            const existingSessionId = this.route.snapshot.queryParamMap.get('sessionId') ??
-                this.route.parent?.snapshot.queryParamMap.get('sessionId');
+            const existingSessionId = this.route.snapshot.queryParamMap.get('sessionId') ?? this.route.parent?.snapshot.queryParamMap.get('sessionId');
             if (existingSessionId) {
                 const session = await this.assessmentSessionService.getOne(existingSessionId);
                 if (session?.answers) {
@@ -3338,8 +3604,12 @@ class AXMQuestionnaireViewerPageComponent extends AXPPageLayoutBaseComponent {
                     this.currentSessionId.set(existingSessionId);
                 }
             }
+            this.questionnaire.set(questionnaire);
             this.structure.set(questionnaire.structure);
             this.initialAnswers.set(answers);
+            const cfg = toPrePostConfig(questionnaire);
+            this.prePostConfig.set(cfg);
+            this.flowStep.set(cfg?.preEnabled === true ? 'pre' : 'questions');
             this.viewerConfig.set({ readonly: false });
         }
         catch (err) {
@@ -3350,6 +3620,80 @@ class AXMQuestionnaireViewerPageComponent extends AXPPageLayoutBaseComponent {
         }
     }
     //#endregion
+    //#region ----   Submit Handler   ----
+    async saveSessionAndGetSummary(answers) {
+        const caseIdVal = this.route.snapshot.paramMap.get('caseId') ?? this.route.parent?.snapshot.paramMap.get('caseId');
+        const structureVal = this.structure();
+        const q = this.questionnaire();
+        if (!caseIdVal || !structureVal || !q)
+            return null;
+        const { answeredQuestionsCount, progressPercentage } = this.calculateProgress(structureVal, answers);
+        const responderId = this.authSession.user?.id;
+        if (!responderId) {
+            this.toastService.show({
+                color: 'danger',
+                title: await this.translateService.translateAsync('@general:messages.generic.error.title'),
+                content: await this.translateService.translateAsync('@general:messages.generic.error.description'),
+            });
+            return null;
+        }
+        const now = new Date();
+        const sessionIdVal = this.currentSessionId();
+        const role = 'responder';
+        const sessionData = {
+            caseId: caseIdVal,
+            responderId,
+            role,
+            answers,
+            progressPercentage,
+            answeredQuestionsCount,
+            lastSavedAt: now,
+        };
+        if (sessionIdVal) {
+            await this.assessmentSessionService.updateOne(sessionIdVal, sessionData);
+            this.toastService.show({
+                color: 'success',
+                title: await this.translateService.translateAsync('@general:messages.form.saved.success.title'),
+                content: await this.translateService.translateAsync('@general:messages.form.saved.success.description'),
+            });
+        }
+        else {
+            const newSessionData = { ...sessionData, startedAt: now };
+            await this.assessmentSessionService.insertOne(newSessionData);
+            this.toastService.show({
+                color: 'success',
+                title: await this.translateService.translateAsync('@assessment-management:sessions.states.submitted'),
+                content: '',
+            });
+        }
+        const passingScore = q.passingScore;
+        const passFail = passingScore != null
+            ? progressPercentage >= passingScore
+                ? ((await this.translateService.translateAsync('@assessment-management:questionnaires.components.questionnaire-viewer.flow.pass')) ?? 'Pass')
+                : ((await this.translateService.translateAsync('@assessment-management:questionnaires.components.questionnaire-viewer.flow.fail')) ?? 'Fail')
+            : undefined;
+        const totalQuestions = structureVal.sections?.reduce((s, sec) => s + (sec.items?.length ?? 0), 0) ?? 0;
+        return { score: progressPercentage, passFail, totalQuestions, answeredCount: answeredQuestionsCount };
+    }
+    //#endregion
+    //#region ----   Page Layout Overrides   ----
+    async getPageTitle() {
+        return this.translateService.translateAsync('@assessment-management:cases.actions.fill-assessment.title');
+    }
+    getPageBreadcrumbs() {
+        return [
+            { title: '@assessment-management:cases.entities.assessment-case.plural', command: { name: 'navigate', options: { path: this.getCasesListPath() } } },
+            { title: '@assessment-management:cases.actions.fill-assessment.title' },
+        ];
+    }
+    async getBackButton() {
+        const title = await this.translateService.translateAsync('@assessment-management:cases.entities.assessment-case.plural');
+        return { title };
+    }
+    onBackButtonClick() {
+        this.router.navigateByUrl(this.getCasesListPath());
+    }
+    //#endregion
     //#region ----   Helpers   ----
     getCasesListPath() {
         const app = this.authSession.application?.name ?? 'demo';
@@ -3365,13 +3709,8 @@ class AXMQuestionnaireViewerPageComponent extends AXPPageLayoutBaseComponent {
                 continue;
             for (const item of section.items) {
                 total++;
-                const answerPath = item.id ? `answers.${item.id}` : null;
-                const value = answerPath ? get(answers, answerPath) : null;
-                const isEmpty = value === null ||
-                    value === undefined ||
-                    value === '' ||
-                    (Array.isArray(value) && value.length === 0) ||
-                    (typeof value === 'object' && value !== null && Object.keys(value).length === 0);
+                const value = item.id ? (answers[item.id] ?? get(answers, `answers.${item.id}`)) : null;
+                const isEmpty = value === null || value === undefined || value === '' || (Array.isArray(value) && value.length === 0) || (typeof value === 'object' && value !== null && Object.keys(value).length === 0);
                 if (!isEmpty)
                     answered++;
             }
@@ -3382,79 +3721,69 @@ class AXMQuestionnaireViewerPageComponent extends AXPPageLayoutBaseComponent {
     //#endregion
     //#region ----   Event Handlers   ----
     handleAnswersChanged(_answers) { }
+    handleReviewClick() {
+        const viewer = this.viewer();
+        const items = viewer?.getQuestionsWithAnswers() ?? [];
+        const context = viewer?.getReviewContext() ?? null;
+        this.reviewSnapshot.set(items.map((q) => ({ questionId: q.questionId, title: q.title, answer: q.answer, question: q.question })));
+        this.reviewContext.set(context);
+        this.flowStep.set('review');
+    }
+    async handleReviewSubmit() {
+        const viewer = this.viewer();
+        if (!viewer)
+            return;
+        this.isSubmitting.set(true);
+        try {
+            const result = await viewer.submit();
+            if (result.success && result.answers) {
+                const summary = await this.saveSessionAndGetSummary(result.answers);
+                this.submitResult.set(summary ?? null);
+                if ((this.prePostConfig()?.postSummaryEnabled ?? false) && summary) {
+                    this.flowStep.set('summary');
+                }
+                else {
+                    this.handleDone();
+                }
+            }
+        }
+        finally {
+            this.isSubmitting.set(false);
+        }
+    }
     async handlePreviousClick() {
-        await this.questionnaireViewer()?.navigatePrevious();
+        await this.viewer()?.navigatePrevious();
     }
     async handleNextClick() {
-        await this.questionnaireViewer()?.navigateNext();
+        await this.viewer()?.navigateNext();
     }
     async handleSubmitClick() {
-        const viewer = this.questionnaireViewer();
+        const viewer = this.viewer();
         if (!viewer)
             return;
         this.isSubmitting.set(true);
         try {
             const result = await viewer.submit();
             if (result.success && result.answers) {
-                const caseIdVal = this.route.snapshot.paramMap.get('caseId') ?? this.route.parent?.snapshot.paramMap.get('caseId');
-                const structureVal = this.structure();
-                if (!caseIdVal || !structureVal)
-                    return;
-                const { answeredQuestionsCount, progressPercentage } = this.calculateProgress(structureVal, result.answers);
-                const responderId = this.authSession.user?.id;
-                if (!responderId) {
-                    this.toastService.show({
-                        color: 'danger',
-                        title: await this.translateService.translateAsync('@general:messages.generic.error.title'),
-                        content: await this.translateService.translateAsync('@general:messages.generic.error.description'),
-                    });
-                    return;
-                }
-                const now = new Date();
-                const sessionIdVal = this.currentSessionId();
-                const role = 'responder';
-                const sessionData = {
-                    caseId: caseIdVal,
-                    responderId,
-                    role,
-                    answers: result.answers,
-                    progressPercentage,
-                    answeredQuestionsCount,
-                    lastSavedAt: now,
-                };
-                if (sessionIdVal) {
-                    await this.assessmentSessionService.updateOne(sessionIdVal, sessionData);
-                    this.toastService.show({
-                        color: 'success',
-                        title: await this.translateService.translateAsync('@general:messages.form.saved.success.title'),
-                        content: await this.translateService.translateAsync('@general:messages.form.saved.success.description'),
-                    });
+                const summary = await this.saveSessionAndGetSummary(result.answers);
+                this.submitResult.set(summary ?? null);
+                if (this.prePostConfig()?.postSummaryEnabled) {
+                    this.flowStep.set('summary');
                 }
                 else {
-                    const newSessionData = {
-                        ...sessionData,
-                        startedAt: now,
-                    };
-                    await this.assessmentSessionService.insertOne(newSessionData);
-                    this.toastService.show({
-                        color: 'success',
-                        title: await this.translateService.translateAsync('@assessment-management:sessions.states.submitted'),
-                        content: '',
-                    });
+                    this.handleDone();
                 }
-                await this.router.navigateByUrl(this.getCasesListPath());
             }
         }
         finally {
             this.isSubmitting.set(false);
         }
     }
+    handleDone() {
+        this.router.navigateByUrl(this.getCasesListPath());
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXMQuestionnaireViewerPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXMQuestionnaireViewerPageComponent, isStandalone: true, selector: "axm-questionnaire-viewer-page", host: { classAttribute: "axm-questionnaire-viewer-page" }, providers: [
-            AXPWidgetCoreService,
-            AXPWidgetCoreContextStore,
-            { provide: AXPPageLayoutBase, useExisting: AXMQuestionnaireViewerPageComponent },
-        ], viewQueries: [{ propertyName: "questionnaireViewer", first: true, predicate: ["viewer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXMQuestionnaireViewerPageComponent, isStandalone: true, selector: "axm-questionnaire-viewer-page", host: { classAttribute: "axm-questionnaire-viewer-page" }, providers: [{ provide: AXPPageLayoutBase, useExisting: AXMQuestionnaireViewerPageComponent }], viewQueries: [{ propertyName: "viewer", first: true, predicate: ["viewer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <axp-page-layout>
       <axp-page-content class="ax-overflow-auto">
         @if (isLoading()) {
@@ -3466,25 +3795,43 @@ class AXMQuestionnaireViewerPageComponent extends AXPPageLayoutBaseComponent {
             {{ loadError() }}
           </div>
         } @else if (structure()) {
-          <div class="__main-container ax-h-full ax-flex ax-flex-col">
-            <div class="__header">
-              <div class="__header-top">
-                <div class="__header-meta">
-                  @if (totalQuestionsCount() > 0) {
-                    <span class="__meta-item">
-                      <i class="fa-light fa-list-check"></i>
-                      <span>{{ totalQuestionsCount() }} {{ totalQuestionsCount() === 1 ? 'Question' : 'Questions' }}</span>
-                    </span>
-                  }
-                  @if (totalSectionsCount() > 0) {
-                    <span class="__meta-item">
-                      <i class="fa-light fa-folder"></i>
-                      <span>{{ totalSectionsCount() }} {{ totalSectionsCount() === 1 ? 'Section' : 'Sections' }}</span>
-                    </span>
-                  }
-                </div>
-                @if (showTimer()) {
-                  <div class="__header-timer">
+          @if (flowStep() === 'pre') {
+            <axm-pre-questionnaire-content
+              [content]="prePostConfig()?.preContent"
+            ></axm-pre-questionnaire-content>
+          } @else if (flowStep() === 'summary') {
+            <axm-post-questionnaire-content
+              mode="summary"
+              [summaryContent]="prePostConfig()?.postSummaryContent"
+              [placeholderValues]="submitResult()"
+            ></axm-post-questionnaire-content>
+          } @else {
+            @if (flowStep() === 'review') {
+              <axm-post-questionnaire-content
+                mode="review"
+                [questionsWithAnswers]="reviewSnapshot()"
+                [reviewContext]="reviewContext()"
+              ></axm-post-questionnaire-content>
+            }
+            <div
+              class="__questions ax-flex ax-flex-col ax-min-h-full"
+              [class.ax-invisible]="flowStep() === 'review'"
+              [style.position]="flowStep() === 'review' ? 'fixed' : null"
+              [style.left]="flowStep() === 'review' ? '-9999px' : null"
+              [class.ax-size-0]="flowStep() === 'review'"
+              [class.ax-overflow-hidden]="flowStep() === 'review'"
+            >
+              <div class="__header ax-p-4 ax-border-b">
+                <div class="ax-flex ax-justify-between ax-items-center ax-gap-4">
+                  <div class="ax-flex ax-items-center ax-gap-4 ax-text-sm ax-text-neutral-600">
+                    @if (totalQuestionsCount() > 0) {
+                      <span><i class="fa-light fa-list-check ax-text-primary-600"></i> {{ totalQuestionsCount() }} {{ totalQuestionsCount() === 1 ? 'Question' : 'Questions' }}</span>
+                    }
+                    @if (totalSectionsCount() > 0) {
+                      <span><i class="fa-light fa-folder ax-text-primary-600"></i> {{ totalSectionsCount() }} {{ totalSectionsCount() === 1 ? 'Section' : 'Sections' }}</span>
+                    }
+                  </div>
+                  @if (showTimer()) {
                     <axp-stopwatch
                       [mode]="'count-down'"
                       [timeLimit]="timerTimeLimit()"
@@ -3493,68 +3840,67 @@ class AXMQuestionnaireViewerPageComponent extends AXPPageLayoutBaseComponent {
                       [showControls]="false"
                       [value]="timerElapsed()"
                       (valueChange)="viewerViewModel()!.updateTimerElapsed($event)"
-                    >
-                    </axp-stopwatch>
-                  </div>
-                }
+                    ></axp-stopwatch>
+                  }
+                </div>
+              </div>
+              <div class="__content ax-flex-1 ax-min-h-0">
+                <axm-questionnaire-viewer
+                  #viewer
+                  [structure]="structure()!"
+                  [config]="viewerConfig()"
+                  [initialAnswers]="effectiveInitialAnswers()"
+                  (answersChanged)="handleAnswersChanged($event)"
+                ></axm-questionnaire-viewer>
               </div>
             </div>
-
-            <div class="__content-wrapper">
-              <axm-questionnaire-viewer
-                #viewer
-                [structure]="structure()!"
-                [config]="viewerConfig()"
-                [initialAnswers]="initialAnswers()"
-                (answersChanged)="handleAnswersChanged($event)"
-              >
-              </axm-questionnaire-viewer>
-            </div>
-
-            <div class="__footer ax-flex ax-items-center ax-justify-between ax-gap-4 ax-p-4 ax-border-t">
-              <div class="ax-text-sm ax-font-mono ax-tabular-nums">
-                @if (viewerViewModel() && showProgressBar()) {
+          }
+        }
+      </axp-page-content>
+      @if (structure() && !isLoading() && !loadError()) {
+        <axp-page-footer class="--animated">
+          <axp-layout-prefix>
+            @if (flowStep() === 'questions') {
+              <div class="ax-text-sm ax-font-mono ax-tabular-nums ax-text-neutral-600">
+                @if (showProgressBar()) {
                   {{ answeredQuestionsCount() }} / {{ totalQuestionsCount() }}
                 }
               </div>
-              <div class="ax-flex ax-gap-2">
-                @if (showNavigationButtons()) {
-                  <ax-button
-                    look="solid"
-                    [disabled]="!canNavigatePrevious()"
-                    [text]="'@general:actions.previous.title' | translate | async"
-                    (onClick)="handlePreviousClick()"
-                  ></ax-button>
-                  @if (!isLastStep()) {
-                    <ax-button
-                      look="solid"
-                      color="primary"
-                      [disabled]="!canNavigateNext()"
-                      [text]="'@general:actions.next.title' | translate | async"
-                      (onClick)="handleNextClick()"
-                    ></ax-button>
-                  }
-                }
-                @if (isLastStep()) {
-                  <ax-button
-                    look="solid"
-                    color="primary"
-                    [text]="'@general:actions.submit.title' | translate | async"
-                    [disabled]="isReadonly() || isSubmitting() || !areAllRequiredQuestionsAnswered()"
-                    (onClick)="handleSubmitClick()"
-                  ></ax-button>
+            }
+          </axp-layout-prefix>
+          <axp-layout-suffix>
+            @if (flowStep() === 'pre') {
+              <ax-button look="solid" color="primary" [text]="'@assessment-management:questionnaires.components.questionnaire-viewer.flow.start' | translate | async" (onClick)="flowStep.set('questions')"></ax-button>
+            } @else if (flowStep() === 'questions') {
+              @if (showNavigationButtons()) {
+                <ax-button look="solid" [disabled]="!canNavigatePrevious()" [text]="'@general:actions.previous.title' | translate | async" (onClick)="handlePreviousClick()"></ax-button>
+                @if (!isLastStep()) {
+                  <ax-button look="solid" color="primary" [disabled]="!canNavigateNext()" [text]="'@general:actions.next.title' | translate | async" (onClick)="handleNextClick()"></ax-button>
                 }
-              </div>
-            </div>
-          </div>
-        }
-      </axp-page-content>
+              }
+              @if (isLastStep() && showReviewButton()) {
+                <ax-button look="solid" color="primary" [text]="'@assessment-management:questionnaires.components.questionnaire-viewer.flow.review' | translate | async" [disabled]="!areAllRequiredQuestionsAnswered()" (onClick)="handleReviewClick()"></ax-button>
+              }
+              @if (isLastStep() && !showReviewButton()) {
+                <ax-button look="solid" color="primary" [text]="'@general:actions.submit.title' | translate | async" [disabled]="isReadonly() || isSubmitting() || !areAllRequiredQuestionsAnswered()" (onClick)="handleSubmitClick()"></ax-button>
+              }
+            } @else if (flowStep() === 'review') {
+              <ax-button look="outline" [text]="'@assessment-management:questionnaires.components.questionnaire-viewer.flow.edit' | translate | async" (onClick)="flowStep.set('questions')"></ax-button>
+              <ax-button look="solid" color="primary" [text]="'@general:actions.submit.title' | translate | async" [disabled]="isSubmitting()" (onClick)="handleReviewSubmit()"></ax-button>
+            } @else if (flowStep() === 'summary') {
+              <ax-button look="solid" color="primary" [text]="'@assessment-management:questionnaires.components.questionnaire-viewer.flow.done' | translate | async" (onClick)="handleDone()"></ax-button>
+            }
+          </axp-layout-suffix>
+        </axp-page-footer>
+      }
     </axp-page-layout>
-  `, isInline: true, styles: ["axm-questionnaire-viewer-popup{display:flex;height:100%;flex-direction:column;overflow:hidden;max-height:80vh}axm-questionnaire-viewer-popup .__main-container{display:flex;min-height:0px;flex:1 1 0%;flex-direction:column;overflow:hidden}axm-questionnaire-viewer-popup .__header{display:flex;flex-shrink:0;flex-direction:column;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1));background-color:#fff;backdrop-filter:blur(8px)}axm-questionnaire-viewer-popup .__header .__header-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1rem}axm-questionnaire-viewer-popup .__header .__header-top .__header-meta{display:flex;align-items:center;gap:1rem;font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}axm-questionnaire-viewer-popup .__header .__header-top .__header-meta .__meta-item{display:flex;align-items:center;gap:.375rem}axm-questionnaire-viewer-popup .__header .__header-top .__header-meta .__meta-item i{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-600),var(--tw-text-opacity, 1))}axm-questionnaire-viewer-popup .__header .__header-top .__header-meta .__meta-item span{font-weight:500}axm-questionnaire-viewer-popup .__header .__header-top .__header-timer{display:flex;flex-shrink:0;align-items:center}axm-questionnaire-viewer-popup .__content-wrapper{display:flex;min-height:0px;flex:1 1 0%;overflow:hidden}axm-questionnaire-viewer-popup axm-questionnaire-viewer{display:flex;height:100%;flex:1 1 0%;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: AXMQuestionnaireViewerComponent, selector: "axm-questionnaire-viewer", inputs: ["questionnaireId", "structure", "config", "initialAnswers"], outputs: ["answersChanged", "questionAnswered"] }, { kind: "component", type: AXPStopwatchComponent, selector: "axp-stopwatch", inputs: ["mode", "timeLimit", "format", "autoStart", "showControls", "value"], outputs: ["valueChange", "timeUp"] }, { kind: "component", type: AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer-container,    axp-page-footer,    axp-page-header,    axp-page-header-container,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer-container,    axp-page-footer,    axp-page-header,    axp-page-header-container,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "component", type: AXPStopwatchComponent, selector: "axp-stopwatch", inputs: ["mode", "timeLimit", "format", "autoStart", "showControls", "value"], outputs: ["valueChange", "timeUp"] }, { kind: "component", type: AXMQuestionnaireViewerComponent, selector: "axm-questionnaire-viewer", inputs: ["questionnaireId", "structure", "config", "initialAnswers"], outputs: ["answersChanged", "questionAnswered"] }, { kind: "component", type: AXMPreQuestionnaireContentComponent, selector: "axm-pre-questionnaire-content", inputs: ["content", "locale"] }, { kind: "component", type: AXMPostQuestionnaireContentComponent, selector: "axm-post-questionnaire-content", inputs: ["mode", "questionsWithAnswers", "reviewContext", "summaryContent", "placeholderValues", "locale"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXMQuestionnaireViewerPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axm-questionnaire-viewer-page', template: `
+            args: [{
+                    selector: 'axm-questionnaire-viewer-page',
+                    template: `
     <axp-page-layout>
       <axp-page-content class="ax-overflow-auto">
         @if (isLoading()) {
@@ -3566,25 +3912,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             {{ loadError() }}
           </div>
         } @else if (structure()) {
-          <div class="__main-container ax-h-full ax-flex ax-flex-col">
-            <div class="__header">
-              <div class="__header-top">
-                <div class="__header-meta">
-                  @if (totalQuestionsCount() > 0) {
-                    <span class="__meta-item">
-                      <i class="fa-light fa-list-check"></i>
-                      <span>{{ totalQuestionsCount() }} {{ totalQuestionsCount() === 1 ? 'Question' : 'Questions' }}</span>
-                    </span>
-                  }
-                  @if (totalSectionsCount() > 0) {
-                    <span class="__meta-item">
-                      <i class="fa-light fa-folder"></i>
-                      <span>{{ totalSectionsCount() }} {{ totalSectionsCount() === 1 ? 'Section' : 'Sections' }}</span>
-                    </span>
-                  }
-                </div>
-                @if (showTimer()) {
-                  <div class="__header-timer">
+          @if (flowStep() === 'pre') {
+            <axm-pre-questionnaire-content
+              [content]="prePostConfig()?.preContent"
+            ></axm-pre-questionnaire-content>
+          } @else if (flowStep() === 'summary') {
+            <axm-post-questionnaire-content
+              mode="summary"
+              [summaryContent]="prePostConfig()?.postSummaryContent"
+              [placeholderValues]="submitResult()"
+            ></axm-post-questionnaire-content>
+          } @else {
+            @if (flowStep() === 'review') {
+              <axm-post-questionnaire-content
+                mode="review"
+                [questionsWithAnswers]="reviewSnapshot()"
+                [reviewContext]="reviewContext()"
+              ></axm-post-questionnaire-content>
+            }
+            <div
+              class="__questions ax-flex ax-flex-col ax-min-h-full"
+              [class.ax-invisible]="flowStep() === 'review'"
+              [style.position]="flowStep() === 'review' ? 'fixed' : null"
+              [style.left]="flowStep() === 'review' ? '-9999px' : null"
+              [class.ax-size-0]="flowStep() === 'review'"
+              [class.ax-overflow-hidden]="flowStep() === 'review'"
+            >
+              <div class="__header ax-p-4 ax-border-b">
+                <div class="ax-flex ax-justify-between ax-items-center ax-gap-4">
+                  <div class="ax-flex ax-items-center ax-gap-4 ax-text-sm ax-text-neutral-600">
+                    @if (totalQuestionsCount() > 0) {
+                      <span><i class="fa-light fa-list-check ax-text-primary-600"></i> {{ totalQuestionsCount() }} {{ totalQuestionsCount() === 1 ? 'Question' : 'Questions' }}</span>
+                    }
+                    @if (totalSectionsCount() > 0) {
+                      <span><i class="fa-light fa-folder ax-text-primary-600"></i> {{ totalSectionsCount() }} {{ totalSectionsCount() === 1 ? 'Section' : 'Sections' }}</span>
+                    }
+                  </div>
+                  @if (showTimer()) {
                     <axp-stopwatch
                       [mode]="'count-down'"
                       [timeLimit]="timerTimeLimit()"
@@ -3593,79 +3957,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                       [showControls]="false"
                       [value]="timerElapsed()"
                       (valueChange)="viewerViewModel()!.updateTimerElapsed($event)"
-                    >
-                    </axp-stopwatch>
-                  </div>
-                }
+                    ></axp-stopwatch>
+                  }
+                </div>
+              </div>
+              <div class="__content ax-flex-1 ax-min-h-0">
+                <axm-questionnaire-viewer
+                  #viewer
+                  [structure]="structure()!"
+                  [config]="viewerConfig()"
+                  [initialAnswers]="effectiveInitialAnswers()"
+                  (answersChanged)="handleAnswersChanged($event)"
+                ></axm-questionnaire-viewer>
               </div>
             </div>
-
-            <div class="__content-wrapper">
-              <axm-questionnaire-viewer
-                #viewer
-                [structure]="structure()!"
-                [config]="viewerConfig()"
-                [initialAnswers]="initialAnswers()"
-                (answersChanged)="handleAnswersChanged($event)"
-              >
-              </axm-questionnaire-viewer>
-            </div>
-
-            <div class="__footer ax-flex ax-items-center ax-justify-between ax-gap-4 ax-p-4 ax-border-t">
-              <div class="ax-text-sm ax-font-mono ax-tabular-nums">
-                @if (viewerViewModel() && showProgressBar()) {
+          }
+        }
+      </axp-page-content>
+      @if (structure() && !isLoading() && !loadError()) {
+        <axp-page-footer class="--animated">
+          <axp-layout-prefix>
+            @if (flowStep() === 'questions') {
+              <div class="ax-text-sm ax-font-mono ax-tabular-nums ax-text-neutral-600">
+                @if (showProgressBar()) {
                   {{ answeredQuestionsCount() }} / {{ totalQuestionsCount() }}
                 }
               </div>
-              <div class="ax-flex ax-gap-2">
-                @if (showNavigationButtons()) {
-                  <ax-button
-                    look="solid"
-                    [disabled]="!canNavigatePrevious()"
-                    [text]="'@general:actions.previous.title' | translate | async"
-                    (onClick)="handlePreviousClick()"
-                  ></ax-button>
-                  @if (!isLastStep()) {
-                    <ax-button
-                      look="solid"
-                      color="primary"
-                      [disabled]="!canNavigateNext()"
-                      [text]="'@general:actions.next.title' | translate | async"
-                      (onClick)="handleNextClick()"
-                    ></ax-button>
-                  }
-                }
-                @if (isLastStep()) {
-                  <ax-button
-                    look="solid"
-                    color="primary"
-                    [text]="'@general:actions.submit.title' | translate | async"
-                    [disabled]="isReadonly() || isSubmitting() || !areAllRequiredQuestionsAnswered()"
-                    (onClick)="handleSubmitClick()"
-                  ></ax-button>
+            }
+          </axp-layout-prefix>
+          <axp-layout-suffix>
+            @if (flowStep() === 'pre') {
+              <ax-button look="solid" color="primary" [text]="'@assessment-management:questionnaires.components.questionnaire-viewer.flow.start' | translate | async" (onClick)="flowStep.set('questions')"></ax-button>
+            } @else if (flowStep() === 'questions') {
+              @if (showNavigationButtons()) {
+                <ax-button look="solid" [disabled]="!canNavigatePrevious()" [text]="'@general:actions.previous.title' | translate | async" (onClick)="handlePreviousClick()"></ax-button>
+                @if (!isLastStep()) {
+                  <ax-button look="solid" color="primary" [disabled]="!canNavigateNext()" [text]="'@general:actions.next.title' | translate | async" (onClick)="handleNextClick()"></ax-button>
                 }
-              </div>
-            </div>
-          </div>
-        }
-      </axp-page-content>
+              }
+              @if (isLastStep() && showReviewButton()) {
+                <ax-button look="solid" color="primary" [text]="'@assessment-management:questionnaires.components.questionnaire-viewer.flow.review' | translate | async" [disabled]="!areAllRequiredQuestionsAnswered()" (onClick)="handleReviewClick()"></ax-button>
+              }
+              @if (isLastStep() && !showReviewButton()) {
+                <ax-button look="solid" color="primary" [text]="'@general:actions.submit.title' | translate | async" [disabled]="isReadonly() || isSubmitting() || !areAllRequiredQuestionsAnswered()" (onClick)="handleSubmitClick()"></ax-button>
+              }
+            } @else if (flowStep() === 'review') {
+              <ax-button look="outline" [text]="'@assessment-management:questionnaires.components.questionnaire-viewer.flow.edit' | translate | async" (onClick)="flowStep.set('questions')"></ax-button>
+              <ax-button look="solid" color="primary" [text]="'@general:actions.submit.title' | translate | async" [disabled]="isSubmitting()" (onClick)="handleReviewSubmit()"></ax-button>
+            } @else if (flowStep() === 'summary') {
+              <ax-button look="solid" color="primary" [text]="'@assessment-management:questionnaires.components.questionnaire-viewer.flow.done' | translate | async" (onClick)="handleDone()"></ax-button>
+            }
+          </axp-layout-suffix>
+        </axp-page-footer>
+      }
     </axp-page-layout>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [
                         CommonModule,
-                        AXButtonModule,
-                        AXDecoratorModule,
                         AXTranslationModule,
-                        AXPWidgetCoreModule,
-                        AXMQuestionnaireViewerComponent,
-                        AXPStopwatchComponent,
+                        AXButtonModule,
                         AXPPageLayoutComponent,
                         AXPThemeLayoutBlockComponent,
-                    ], providers: [
-                        AXPWidgetCoreService,
-                        AXPWidgetCoreContextStore,
-                        { provide: AXPPageLayoutBase, useExisting: AXMQuestionnaireViewerPageComponent },
-                    ], encapsulation: ViewEncapsulation.None, host: { class: 'axm-questionnaire-viewer-page' }, styles: ["axm-questionnaire-viewer-popup{display:flex;height:100%;flex-direction:column;overflow:hidden;max-height:80vh}axm-questionnaire-viewer-popup .__main-container{display:flex;min-height:0px;flex:1 1 0%;flex-direction:column;overflow:hidden}axm-questionnaire-viewer-popup .__header{display:flex;flex-shrink:0;flex-direction:column;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1));background-color:#fff;backdrop-filter:blur(8px)}axm-questionnaire-viewer-popup .__header .__header-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1rem}axm-questionnaire-viewer-popup .__header .__header-top .__header-meta{display:flex;align-items:center;gap:1rem;font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}axm-questionnaire-viewer-popup .__header .__header-top .__header-meta .__meta-item{display:flex;align-items:center;gap:.375rem}axm-questionnaire-viewer-popup .__header .__header-top .__header-meta .__meta-item i{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-600),var(--tw-text-opacity, 1))}axm-questionnaire-viewer-popup .__header .__header-top .__header-meta .__meta-item span{font-weight:500}axm-questionnaire-viewer-popup .__header .__header-top .__header-timer{display:flex;flex-shrink:0;align-items:center}axm-questionnaire-viewer-popup .__content-wrapper{display:flex;min-height:0px;flex:1 1 0%;overflow:hidden}axm-questionnaire-viewer-popup axm-questionnaire-viewer{display:flex;height:100%;flex:1 1 0%;overflow:hidden}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { questionnaireViewer: [{ type: i0.ViewChild, args: ['viewer', { isSignal: true }] }] } });
+                        AXPStopwatchComponent,
+                        AXMQuestionnaireViewerComponent,
+                        AXMPreQuestionnaireContentComponent,
+                        AXMPostQuestionnaireContentComponent,
+                    ],
+                    providers: [{ provide: AXPPageLayoutBase, useExisting: AXMQuestionnaireViewerPageComponent }],
+                    encapsulation: ViewEncapsulation.None,
+                    host: { class: 'axm-questionnaire-viewer-page' },
+                }]
+        }], ctorParameters: () => [], propDecorators: { viewer: [{ type: i0.ViewChild, args: ['viewer', { isSignal: true }] }] } });
 
 var questionnaireViewerPage_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -3675,10 +4038,6 @@ var questionnaireViewerPage_component = /*#__PURE__*/Object.freeze({
 //#region ----   Imports   ----
 //#endregion
 //#region ----   Component   ----
-/**
- * Standalone questionnaire viewer page for external access (e.g. shareable links).
- * Renders full-screen without app shell (no sidebar, no main header).
- */
 class AXMQuestionnaireViewerStandalonePageComponent {
     //#endregion
     //#region ----   Lifecycle   ----
@@ -3691,40 +4050,53 @@ class AXMQuestionnaireViewerStandalonePageComponent {
         //#endregion
         //#region ----   State   ----
         this.structure = signal(null, ...(ngDevMode ? [{ debugName: "structure" }] : []));
+        this.questionnaire = signal(null, ...(ngDevMode ? [{ debugName: "questionnaire" }] : []));
         this.initialAnswers = signal({}, ...(ngDevMode ? [{ debugName: "initialAnswers" }] : []));
+        this.prePostConfig = signal(null, ...(ngDevMode ? [{ debugName: "prePostConfig" }] : []));
         this.viewerConfig = signal({ readonly: false }, ...(ngDevMode ? [{ debugName: "viewerConfig" }] : []));
         this.isLoading = signal(true, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
         this.loadError = signal(null, ...(ngDevMode ? [{ debugName: "loadError" }] : []));
         this.isSubmitting = signal(false, ...(ngDevMode ? [{ debugName: "isSubmitting" }] : []));
+        this.flowStep = signal('questions', ...(ngDevMode ? [{ debugName: "flowStep" }] : []));
+        this.reviewSnapshot = signal([], ...(ngDevMode ? [{ debugName: "reviewSnapshot" }] : []));
+        this.reviewContext = signal(null, ...(ngDevMode ? [{ debugName: "reviewContext" }] : []));
+        this.submitResult = signal(null, ...(ngDevMode ? [{ debugName: "submitResult" }] : []));
+        this.canNavigatePrevious = signal(false, ...(ngDevMode ? [{ debugName: "canNavigatePrevious" }] : []));
+        this.canNavigateNext = signal(false, ...(ngDevMode ? [{ debugName: "canNavigateNext" }] : []));
+        this.showNavigationButtons = signal(false, ...(ngDevMode ? [{ debugName: "showNavigationButtons" }] : []));
+        this.isLastStep = signal(false, ...(ngDevMode ? [{ debugName: "isLastStep" }] : []));
+        this.areAllRequiredQuestionsAnswered = signal(false, ...(ngDevMode ? [{ debugName: "areAllRequiredQuestionsAnswered" }] : []));
         //#endregion
         //#region ----   View References   ----
-        this.questionnaireViewer = viewChild('viewer', ...(ngDevMode ? [{ debugName: "questionnaireViewer" }] : []));
+        this.viewer = viewChild('viewer', ...(ngDevMode ? [{ debugName: "viewer" }] : []));
         //#endregion
         //#region ----   Computed   ----
-        this.viewerViewModel = computed(() => this.questionnaireViewer()?.viewmodel, ...(ngDevMode ? [{ debugName: "viewerViewModel" }] : []));
+        this.viewerViewModel = computed(() => this.viewer()?.viewmodel, ...(ngDevMode ? [{ debugName: "viewerViewModel" }] : []));
         this.totalQuestionsCount = computed(() => this.viewerViewModel()?.totalQuestionsCount() ?? 0, ...(ngDevMode ? [{ debugName: "totalQuestionsCount" }] : []));
-        this.totalSectionsCount = computed(() => this.viewerViewModel()?.totalSectionsCount() ?? 0, ...(ngDevMode ? [{ debugName: "totalSectionsCount" }] : []));
         this.showTimer = computed(() => this.viewerViewModel()?.showTimer() ?? false, ...(ngDevMode ? [{ debugName: "showTimer" }] : []));
         this.timerTimeLimit = computed(() => this.viewerViewModel()?.timerTimeLimit(), ...(ngDevMode ? [{ debugName: "timerTimeLimit" }] : []));
         this.timerElapsed = computed(() => this.viewerViewModel()?.timerElapsed() ?? 0, ...(ngDevMode ? [{ debugName: "timerElapsed" }] : []));
         this.showProgressBar = computed(() => this.viewerViewModel()?.showProgressBar() ?? false, ...(ngDevMode ? [{ debugName: "showProgressBar" }] : []));
         this.answeredQuestionsCount = computed(() => this.viewerViewModel()?.answeredQuestionsCount() ?? 0, ...(ngDevMode ? [{ debugName: "answeredQuestionsCount" }] : []));
         this.isReadonly = computed(() => this.viewerConfig()?.readonly ?? false, ...(ngDevMode ? [{ debugName: "isReadonly" }] : []));
-        this.canNavigatePrevious = signal(false, ...(ngDevMode ? [{ debugName: "canNavigatePrevious" }] : []));
-        this.canNavigateNext = signal(false, ...(ngDevMode ? [{ debugName: "canNavigateNext" }] : []));
-        this.showNavigationButtons = signal(false, ...(ngDevMode ? [{ debugName: "showNavigationButtons" }] : []));
-        this.isLastStep = signal(false, ...(ngDevMode ? [{ debugName: "isLastStep" }] : []));
-        this.areAllRequiredQuestionsAnswered = signal(false, ...(ngDevMode ? [{ debugName: "areAllRequiredQuestionsAnswered" }] : []));
+        this.showReviewButton = computed(() => this.isLastStep() && (this.prePostConfig()?.postReviewEnabled ?? false) && this.flowStep() === 'questions', ...(ngDevMode ? [{ debugName: "showReviewButton" }] : []));
+        /** Use answers from review context when returning from review; otherwise use initial answers. */
+        this.effectiveInitialAnswers = computed(() => {
+            const ctx = this.reviewContext();
+            if (!ctx)
+                return this.initialAnswers();
+            return ctx.answers ?? ctx;
+        }, ...(ngDevMode ? [{ debugName: "effectiveInitialAnswers" }] : []));
         effect(() => {
-            const viewer = this.questionnaireViewer();
-            if (viewer) {
-                const vm = viewer.viewmodel;
+            const v = this.viewer();
+            if (v) {
+                const vm = v.viewmodel;
                 this.canNavigatePrevious.set(vm.canNavigatePrevious());
                 this.canNavigateNext.set(vm.canNavigateNext());
-                const viewMode = viewer.viewMode;
+                const viewMode = v.viewMode;
                 this.showNavigationButtons.set(viewMode === 'page-per-group' || viewMode === 'page-per-question' || viewMode === 'side-menu');
-                this.isLastStep.set(viewer.isLastStep);
-                this.areAllRequiredQuestionsAnswered.set(viewer.areAllRequiredQuestionsAnswered);
+                this.isLastStep.set(v.isLastStep);
+                this.areAllRequiredQuestionsAnswered.set(v.areAllRequiredQuestionsAnswered);
             }
         });
     }
@@ -3763,8 +4135,12 @@ class AXMQuestionnaireViewerStandalonePageComponent {
                 return;
             }
             const answers = session.answers ?? {};
+            const cfg = toPrePostConfig(questionnaire);
+            this.questionnaire.set(questionnaire);
             this.structure.set(questionnaire.structure);
             this.initialAnswers.set(answers);
+            this.prePostConfig.set(cfg);
+            this.flowStep.set(cfg?.preEnabled === true ? 'pre' : 'questions');
             this.viewerConfig.set({ readonly: false });
         }
         catch (err) {
@@ -3775,32 +4151,107 @@ class AXMQuestionnaireViewerStandalonePageComponent {
         }
     }
     //#endregion
+    //#region ----   Submit Handler   ----
+    async saveSessionAndGetSummary(answers) {
+        const sessionId = this.route.snapshot.paramMap.get('sessionId') ?? this.route.parent?.snapshot.paramMap.get('sessionId');
+        const structureVal = this.structure();
+        const q = this.questionnaire();
+        if (!sessionId || !structureVal || !q)
+            return null;
+        const { answeredQuestionsCount, progressPercentage } = this.calculateProgress(structureVal, answers);
+        const session = await this.sessionService.getOne(sessionId);
+        if (session) {
+            await this.sessionService.updateOne(sessionId, {
+                ...session,
+                answers,
+                progressPercentage,
+                answeredQuestionsCount,
+                lastSavedAt: new Date(),
+            });
+        }
+        const passingScore = q.passingScore;
+        const passFail = passingScore != null ? (progressPercentage >= passingScore ? 'Pass' : 'Fail') : undefined;
+        const totalQuestions = structureVal.sections?.reduce((s, sec) => s + (sec.items?.length ?? 0), 0) ?? 0;
+        return { score: progressPercentage, passFail, totalQuestions, answeredCount: answeredQuestionsCount };
+    }
+    //#endregion
+    //#region ----   Helpers   ----
+    calculateProgress(structure, answers) {
+        if (!structure?.sections?.length)
+            return { answeredQuestionsCount: 0, progressPercentage: 0 };
+        let answered = 0;
+        let total = 0;
+        for (const section of structure.sections) {
+            if (!section.items?.length)
+                continue;
+            for (const item of section.items) {
+                total++;
+                const value = item.id ? answers[item.id] : null;
+                const isEmpty = value === null ||
+                    value === undefined ||
+                    value === '' ||
+                    (Array.isArray(value) && value.length === 0) ||
+                    (typeof value === 'object' && value !== null && Object.keys(value).length === 0);
+                if (!isEmpty)
+                    answered++;
+            }
+        }
+        const progressPercentage = total > 0 ? Math.round((answered / total) * 100) : 0;
+        return { answeredQuestionsCount: answered, progressPercentage };
+    }
+    //#endregion
     //#region ----   Event Handlers   ----
-    handleAnswersChanged(_answers) { }
+    handleReviewClick() {
+        const viewer = this.viewer();
+        const items = viewer?.getQuestionsWithAnswers() ?? [];
+        const context = viewer?.getReviewContext() ?? null;
+        this.reviewSnapshot.set(items.map((q) => ({ questionId: q.questionId, title: q.title, answer: q.answer, question: q.question })));
+        this.reviewContext.set(context);
+        this.flowStep.set('review');
+    }
+    async handleReviewSubmit() {
+        const viewer = this.viewer();
+        if (!viewer)
+            return;
+        this.isSubmitting.set(true);
+        try {
+            const result = await viewer.submit();
+            if (result.success && result.answers) {
+                const summary = await this.saveSessionAndGetSummary(result.answers);
+                this.submitResult.set(summary ?? null);
+                if ((this.prePostConfig()?.postSummaryEnabled ?? false) && summary) {
+                    this.flowStep.set('summary');
+                }
+                else {
+                    this.handleDone();
+                }
+            }
+        }
+        finally {
+            this.isSubmitting.set(false);
+        }
+    }
     async handlePreviousClick() {
-        await this.questionnaireViewer()?.navigatePrevious();
+        await this.viewer()?.navigatePrevious();
     }
     async handleNextClick() {
-        await this.questionnaireViewer()?.navigateNext();
+        await this.viewer()?.navigateNext();
     }
     async handleSubmitClick() {
-        const viewer = this.questionnaireViewer();
+        const viewer = this.viewer();
         if (!viewer)
             return;
         this.isSubmitting.set(true);
         try {
             const result = await viewer.submit();
             if (result.success && result.answers) {
-                const sessionId = this.route.snapshot.paramMap.get('sessionId') ?? this.route.parent?.snapshot.paramMap.get('sessionId');
-                if (sessionId) {
-                    const session = await this.sessionService.getOne(sessionId);
-                    if (session) {
-                        await this.sessionService.updateOne(sessionId, {
-                            ...session,
-                            answers: result.answers,
-                            lastSavedAt: new Date(),
-                        });
-                    }
+                const summary = await this.saveSessionAndGetSummary(result.answers);
+                this.submitResult.set(summary ?? null);
+                if (this.prePostConfig()?.postSummaryEnabled && summary) {
+                    this.flowStep.set('summary');
+                }
+                else {
+                    this.handleDone();
                 }
             }
         }
@@ -3808,8 +4259,11 @@ class AXMQuestionnaireViewerStandalonePageComponent {
             this.isSubmitting.set(false);
         }
     }
+    handleDone() {
+        // Standalone: could navigate away or show message
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXMQuestionnaireViewerStandalonePageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXMQuestionnaireViewerStandalonePageComponent, isStandalone: true, selector: "axm-questionnaire-viewer-standalone-page", host: { classAttribute: "axm-questionnaire-viewer-standalone-page" }, providers: [AXPWidgetCoreService, AXPWidgetCoreContextStore], viewQueries: [{ propertyName: "questionnaireViewer", first: true, predicate: ["viewer"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXMQuestionnaireViewerStandalonePageComponent, isStandalone: true, selector: "axm-questionnaire-viewer-standalone-page", host: { classAttribute: "axm-questionnaire-viewer-standalone-page" }, providers: [AXPWidgetCoreService, AXPWidgetCoreContextStore], viewQueries: [{ propertyName: "viewer", first: true, predicate: ["viewer"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="__standalone ax-min-h-screen ax-flex ax-flex-col ax-bg-neutral-50">
       @if (isLoading()) {
         <div class="ax-flex ax-items-center ax-justify-center ax-flex-1 ax-min-h-[200px]">
@@ -3821,89 +4275,102 @@ class AXMQuestionnaireViewerStandalonePageComponent {
         </div>
       } @else if (structure()) {
         <div class="__main-container ax-flex-1 ax-flex ax-flex-col ax-max-w-4xl ax-mx-auto ax-w-full ax-p-4">
-          <div class="__header ax-mb-4">
-            <div class="__header-top ax-flex ax-justify-between ax-items-center ax-gap-4">
-              <div class="__header-meta ax-flex ax-items-center ax-gap-4 ax-text-sm ax-text-neutral-600">
-                @if (totalQuestionsCount() > 0) {
-                  <span class="__meta-item ax-flex ax-items-center ax-gap-1.5">
-                    <i class="fa-light fa-list-check ax-text-primary-600"></i>
-                    <span>{{ totalQuestionsCount() }} {{ totalQuestionsCount() === 1 ? 'Question' : 'Questions' }}</span>
-                  </span>
-                }
-                @if (totalSectionsCount() > 0) {
-                  <span class="__meta-item ax-flex ax-items-center ax-gap-1.5">
-                    <i class="fa-light fa-folder ax-text-primary-600"></i>
-                    <span>{{ totalSectionsCount() }} {{ totalSectionsCount() === 1 ? 'Section' : 'Sections' }}</span>
-                  </span>
-                }
-              </div>
-              @if (showTimer()) {
-                <div class="__header-timer">
-                  <axp-stopwatch
-                    [mode]="'count-down'"
-                    [timeLimit]="timerTimeLimit()"
-                    [format]="timerTimeLimit() && timerTimeLimit()! >= 3600 ? 'hh:mm:ss' : 'mm:ss'"
-                    [autoStart]="true"
-                    [showControls]="false"
-                    [value]="timerElapsed()"
-                    (valueChange)="viewerViewModel()!.updateTimerElapsed($event)"
-                  >
-                  </axp-stopwatch>
-                </div>
-              }
-            </div>
-          </div>
-
-          <div class="__content-wrapper ax-flex-1 ax-min-h-0">
-            <axm-questionnaire-viewer
-              #viewer
-              [structure]="structure()!"
-              [config]="viewerConfig()"
-              [initialAnswers]="initialAnswers()"
-              (answersChanged)="handleAnswersChanged($event)"
+          @if (flowStep() === 'pre') {
+            <axm-pre-questionnaire-content
+              [content]="prePostConfig()?.preContent"
+            ></axm-pre-questionnaire-content>
+          } @else if (flowStep() === 'summary') {
+            <axm-post-questionnaire-content
+              mode="summary"
+              [summaryContent]="prePostConfig()?.postSummaryContent"
+              [placeholderValues]="submitResult()"
+            ></axm-post-questionnaire-content>
+          } @else {
+            @if (flowStep() === 'review') {
+              <axm-post-questionnaire-content
+                mode="review"
+                [questionsWithAnswers]="reviewSnapshot()"
+                [reviewContext]="reviewContext()"
+              ></axm-post-questionnaire-content>
+            }
+            <div
+              class="__questions ax-flex ax-flex-col ax-min-h-full"
+              [class.ax-invisible]="flowStep() === 'review'"
+              [style.position]="flowStep() === 'review' ? 'fixed' : null"
+              [style.left]="flowStep() === 'review' ? '-9999px' : null"
+              [class.ax-size-0]="flowStep() === 'review'"
+              [class.ax-overflow-hidden]="flowStep() === 'review'"
             >
-            </axm-questionnaire-viewer>
-          </div>
-
-          <div class="__footer ax-flex ax-items-center ax-justify-between ax-gap-4 ax-py-4 ax-mt-4 ax-border-t ax-border-neutral-200">
-            <div class="ax-text-sm ax-font-mono ax-tabular-nums ax-text-neutral-600">
-              @if (viewerViewModel() && showProgressBar()) {
-                {{ answeredQuestionsCount() }} / {{ totalQuestionsCount() }}
-              }
+              <div class="__header ax-p-4 ax-border-b">
+                <div class="ax-flex ax-justify-between ax-items-center">
+                  <div class="ax-flex ax-items-center ax-gap-4 ax-text-sm ax-text-neutral-600">
+                    @if (totalQuestionsCount() > 0) {
+                      <span><i class="fa-light fa-list-check ax-text-primary-600"></i> {{ totalQuestionsCount() }} {{ totalQuestionsCount() === 1 ? 'Question' : 'Questions' }}</span>
+                    }
+                    @if (showTimer()) {
+                      <axp-stopwatch
+                        [mode]="'count-down'"
+                        [timeLimit]="timerTimeLimit()"
+                        [format]="timerTimeLimit() && timerTimeLimit()! >= 3600 ? 'hh:mm:ss' : 'mm:ss'"
+                        [autoStart]="true"
+                        [showControls]="false"
+                        [value]="timerElapsed()"
+                        (valueChange)="viewerViewModel()!.updateTimerElapsed($event)"
+                      ></axp-stopwatch>
+                    }
+                  </div>
+                </div>
+              </div>
+              <div class="__content ax-flex-1 ax-min-h-0">
+                <axm-questionnaire-viewer
+                  #viewer
+                  [structure]="structure()!"
+                  [config]="viewerConfig()"
+                  [initialAnswers]="effectiveInitialAnswers()"
+                ></axm-questionnaire-viewer>
+              </div>
             </div>
-            <div class="ax-flex ax-gap-2">
+          }
+        </div>
+      }
+      @if (structure() && (flowStep() === 'pre' || flowStep() === 'questions' || flowStep() === 'review' || flowStep() === 'summary')) {
+        <ax-footer class="ax-flex ax-items-center ax-justify-between ax-gap-4 ax-py-4 ax-mt-4 ax-px-4 ax-border-t ax-border-neutral-200">
+          <ax-prefix>
+            @if (flowStep() === 'questions') {
+              <div class="ax-text-sm ax-font-mono ax-tabular-nums ax-text-neutral-600">
+                @if (showProgressBar()) {
+                  {{ answeredQuestionsCount() }} / {{ totalQuestionsCount() }}
+                }
+              </div>
+            }
+          </ax-prefix>
+          <ax-suffix>
+            @if (flowStep() === 'pre') {
+              <ax-button look="solid" color="primary" [text]="'@assessment-management:questionnaires.components.questionnaire-viewer.flow.start' | translate | async" (onClick)="flowStep.set('questions')"></ax-button>
+            } @else if (flowStep() === 'questions') {
               @if (showNavigationButtons()) {
-                <ax-button
-                  look="solid"
-                  [disabled]="!canNavigatePrevious()"
-                  [text]="'@general:actions.previous.title' | translate | async"
-                  (onClick)="handlePreviousClick()"
-                ></ax-button>
+                <ax-button look="solid" [disabled]="!canNavigatePrevious()" [text]="'@general:actions.previous.title' | translate | async" (onClick)="handlePreviousClick()"></ax-button>
                 @if (!isLastStep()) {
-                  <ax-button
-                    look="solid"
-                    color="primary"
-                    [disabled]="!canNavigateNext()"
-                    [text]="'@general:actions.next.title' | translate | async"
-                    (onClick)="handleNextClick()"
-                  ></ax-button>
+                  <ax-button look="solid" color="primary" [disabled]="!canNavigateNext()" [text]="'@general:actions.next.title' | translate | async" (onClick)="handleNextClick()"></ax-button>
                 }
               }
-              @if (isLastStep()) {
-                <ax-button
-                  look="solid"
-                  color="primary"
-                  [text]="'@general:actions.submit.title' | translate | async"
-                  [disabled]="isReadonly() || isSubmitting() || !areAllRequiredQuestionsAnswered()"
-                  (onClick)="handleSubmitClick()"
-                ></ax-button>
+              @if (isLastStep() && showReviewButton()) {
+                <ax-button look="solid" color="primary" [text]="'@assessment-management:questionnaires.components.questionnaire-viewer.flow.review' | translate | async" [disabled]="!areAllRequiredQuestionsAnswered()" (onClick)="handleReviewClick()"></ax-button>
               }
-            </div>
-          </div>
-        </div>
+              @if (isLastStep() && !showReviewButton()) {
+                <ax-button look="solid" color="primary" [text]="'@general:actions.submit.title' | translate | async" [disabled]="isReadonly() || isSubmitting() || !areAllRequiredQuestionsAnswered()" (onClick)="handleSubmitClick()"></ax-button>
+              }
+            } @else if (flowStep() === 'review') {
+              <ax-button look="outline" [text]="'@assessment-management:questionnaires.components.questionnaire-viewer.flow.edit' | translate | async" (onClick)="flowStep.set('questions')"></ax-button>
+              <ax-button look="solid" color="primary" [text]="'@general:actions.submit.title' | translate | async" [disabled]="isSubmitting()" (onClick)="handleReviewSubmit()"></ax-button>
+            } @else if (flowStep() === 'summary') {
+              <ax-button look="solid" color="primary" [text]="'@assessment-management:questionnaires.components.questionnaire-viewer.flow.done' | translate | async" (onClick)="handleDone()"></ax-button>
+            }
+          </ax-suffix>
+        </ax-footer>
       }
     </div>
-  `, isInline: true, styles: ["axm-questionnaire-viewer-popup{display:flex;height:100%;flex-direction:column;overflow:hidden;max-height:80vh}axm-questionnaire-viewer-popup .__main-container{display:flex;min-height:0px;flex:1 1 0%;flex-direction:column;overflow:hidden}axm-questionnaire-viewer-popup .__header{display:flex;flex-shrink:0;flex-direction:column;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1));background-color:#fff;backdrop-filter:blur(8px)}axm-questionnaire-viewer-popup .__header .__header-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1rem}axm-questionnaire-viewer-popup .__header .__header-top .__header-meta{display:flex;align-items:center;gap:1rem;font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}axm-questionnaire-viewer-popup .__header .__header-top .__header-meta .__meta-item{display:flex;align-items:center;gap:.375rem}axm-questionnaire-viewer-popup .__header .__header-top .__header-meta .__meta-item i{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-600),var(--tw-text-opacity, 1))}axm-questionnaire-viewer-popup .__header .__header-top .__header-meta .__meta-item span{font-weight:500}axm-questionnaire-viewer-popup .__header .__header-top .__header-timer{display:flex;flex-shrink:0;align-items:center}axm-questionnaire-viewer-popup .__content-wrapper{display:flex;min-height:0px;flex:1 1 0%;overflow:hidden}axm-questionnaire-viewer-popup axm-questionnaire-viewer{display:flex;height:100%;flex:1 1 0%;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: AXMQuestionnaireViewerComponent, selector: "axm-questionnaire-viewer", inputs: ["questionnaireId", "structure", "config", "initialAnswers"], outputs: ["answersChanged", "questionAnswered"] }, { kind: "component", type: AXPStopwatchComponent, selector: "axp-stopwatch", inputs: ["mode", "timeLimit", "format", "autoStart", "showControls", "value"], outputs: ["valueChange", "timeUp"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: ["axm-questionnaire-viewer-popup{display:flex;height:100%;flex-direction:column;overflow:hidden;max-height:80vh}axm-questionnaire-viewer-popup .__main-container{display:flex;min-height:0px;flex:1 1 0%;flex-direction:column;overflow:hidden}axm-questionnaire-viewer-popup .__header{display:flex;flex-shrink:0;flex-direction:column;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1));background-color:#fff;backdrop-filter:blur(8px)}axm-questionnaire-viewer-popup .__header .__header-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1rem}axm-questionnaire-viewer-popup .__header .__header-top .__header-meta{display:flex;align-items:center;gap:1rem;font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}axm-questionnaire-viewer-popup .__header .__header-top .__header-meta .__meta-item{display:flex;align-items:center;gap:.375rem}axm-questionnaire-viewer-popup .__header .__header-top .__header-meta .__meta-item i{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-600),var(--tw-text-opacity, 1))}axm-questionnaire-viewer-popup .__header .__header-top .__header-meta .__meta-item span{font-weight:500}axm-questionnaire-viewer-popup .__header .__header-top .__header-timer{display:flex;flex-shrink:0;align-items:center}axm-questionnaire-viewer-popup .__content-wrapper{display:flex;min-height:0px;flex:1 1 0%;overflow:hidden}axm-questionnaire-viewer-popup axm-questionnaire-viewer{display:flex;height:100%;flex:1 1 0%;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: AXPStopwatchComponent, selector: "axp-stopwatch", inputs: ["mode", "timeLimit", "format", "autoStart", "showControls", "value"], outputs: ["valueChange", "timeUp"] }, { kind: "component", type: AXMQuestionnaireViewerComponent, selector: "axm-questionnaire-viewer", inputs: ["questionnaireId", "structure", "config", "initialAnswers"], outputs: ["answersChanged", "questionAnswered"] }, { kind: "component", type: AXMPreQuestionnaireContentComponent, selector: "axm-pre-questionnaire-content", inputs: ["content", "locale"] }, { kind: "component", type: AXMPostQuestionnaireContentComponent, selector: "axm-post-questionnaire-content", inputs: ["mode", "questionsWithAnswers", "reviewContext", "summaryContent", "placeholderValues", "locale"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXMQuestionnaireViewerStandalonePageComponent, decorators: [{
             type: Component,
@@ -3919,86 +4386,99 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         </div>
       } @else if (structure()) {
         <div class="__main-container ax-flex-1 ax-flex ax-flex-col ax-max-w-4xl ax-mx-auto ax-w-full ax-p-4">
-          <div class="__header ax-mb-4">
-            <div class="__header-top ax-flex ax-justify-between ax-items-center ax-gap-4">
-              <div class="__header-meta ax-flex ax-items-center ax-gap-4 ax-text-sm ax-text-neutral-600">
-                @if (totalQuestionsCount() > 0) {
-                  <span class="__meta-item ax-flex ax-items-center ax-gap-1.5">
-                    <i class="fa-light fa-list-check ax-text-primary-600"></i>
-                    <span>{{ totalQuestionsCount() }} {{ totalQuestionsCount() === 1 ? 'Question' : 'Questions' }}</span>
-                  </span>
-                }
-                @if (totalSectionsCount() > 0) {
-                  <span class="__meta-item ax-flex ax-items-center ax-gap-1.5">
-                    <i class="fa-light fa-folder ax-text-primary-600"></i>
-                    <span>{{ totalSectionsCount() }} {{ totalSectionsCount() === 1 ? 'Section' : 'Sections' }}</span>
-                  </span>
-                }
-              </div>
-              @if (showTimer()) {
-                <div class="__header-timer">
-                  <axp-stopwatch
-                    [mode]="'count-down'"
-                    [timeLimit]="timerTimeLimit()"
-                    [format]="timerTimeLimit() && timerTimeLimit()! >= 3600 ? 'hh:mm:ss' : 'mm:ss'"
-                    [autoStart]="true"
-                    [showControls]="false"
-                    [value]="timerElapsed()"
-                    (valueChange)="viewerViewModel()!.updateTimerElapsed($event)"
-                  >
-                  </axp-stopwatch>
-                </div>
-              }
-            </div>
-          </div>
-
-          <div class="__content-wrapper ax-flex-1 ax-min-h-0">
-            <axm-questionnaire-viewer
-              #viewer
-              [structure]="structure()!"
-              [config]="viewerConfig()"
-              [initialAnswers]="initialAnswers()"
-              (answersChanged)="handleAnswersChanged($event)"
+          @if (flowStep() === 'pre') {
+            <axm-pre-questionnaire-content
+              [content]="prePostConfig()?.preContent"
+            ></axm-pre-questionnaire-content>
+          } @else if (flowStep() === 'summary') {
+            <axm-post-questionnaire-content
+              mode="summary"
+              [summaryContent]="prePostConfig()?.postSummaryContent"
+              [placeholderValues]="submitResult()"
+            ></axm-post-questionnaire-content>
+          } @else {
+            @if (flowStep() === 'review') {
+              <axm-post-questionnaire-content
+                mode="review"
+                [questionsWithAnswers]="reviewSnapshot()"
+                [reviewContext]="reviewContext()"
+              ></axm-post-questionnaire-content>
+            }
+            <div
+              class="__questions ax-flex ax-flex-col ax-min-h-full"
+              [class.ax-invisible]="flowStep() === 'review'"
+              [style.position]="flowStep() === 'review' ? 'fixed' : null"
+              [style.left]="flowStep() === 'review' ? '-9999px' : null"
+              [class.ax-size-0]="flowStep() === 'review'"
+              [class.ax-overflow-hidden]="flowStep() === 'review'"
             >
-            </axm-questionnaire-viewer>
-          </div>
-
-          <div class="__footer ax-flex ax-items-center ax-justify-between ax-gap-4 ax-py-4 ax-mt-4 ax-border-t ax-border-neutral-200">
-            <div class="ax-text-sm ax-font-mono ax-tabular-nums ax-text-neutral-600">
-              @if (viewerViewModel() && showProgressBar()) {
-                {{ answeredQuestionsCount() }} / {{ totalQuestionsCount() }}
-              }
+              <div class="__header ax-p-4 ax-border-b">
+                <div class="ax-flex ax-justify-between ax-items-center">
+                  <div class="ax-flex ax-items-center ax-gap-4 ax-text-sm ax-text-neutral-600">
+                    @if (totalQuestionsCount() > 0) {
+                      <span><i class="fa-light fa-list-check ax-text-primary-600"></i> {{ totalQuestionsCount() }} {{ totalQuestionsCount() === 1 ? 'Question' : 'Questions' }}</span>
+                    }
+                    @if (showTimer()) {
+                      <axp-stopwatch
+                        [mode]="'count-down'"
+                        [timeLimit]="timerTimeLimit()"
+                        [format]="timerTimeLimit() && timerTimeLimit()! >= 3600 ? 'hh:mm:ss' : 'mm:ss'"
+                        [autoStart]="true"
+                        [showControls]="false"
+                        [value]="timerElapsed()"
+                        (valueChange)="viewerViewModel()!.updateTimerElapsed($event)"
+                      ></axp-stopwatch>
+                    }
+                  </div>
+                </div>
+              </div>
+              <div class="__content ax-flex-1 ax-min-h-0">
+                <axm-questionnaire-viewer
+                  #viewer
+                  [structure]="structure()!"
+                  [config]="viewerConfig()"
+                  [initialAnswers]="effectiveInitialAnswers()"
+                ></axm-questionnaire-viewer>
+              </div>
             </div>
-            <div class="ax-flex ax-gap-2">
+          }
+        </div>
+      }
+      @if (structure() && (flowStep() === 'pre' || flowStep() === 'questions' || flowStep() === 'review' || flowStep() === 'summary')) {
+        <ax-footer class="ax-flex ax-items-center ax-justify-between ax-gap-4 ax-py-4 ax-mt-4 ax-px-4 ax-border-t ax-border-neutral-200">
+          <ax-prefix>
+            @if (flowStep() === 'questions') {
+              <div class="ax-text-sm ax-font-mono ax-tabular-nums ax-text-neutral-600">
+                @if (showProgressBar()) {
+                  {{ answeredQuestionsCount() }} / {{ totalQuestionsCount() }}
+                }
+              </div>
+            }
+          </ax-prefix>
+          <ax-suffix>
+            @if (flowStep() === 'pre') {
+              <ax-button look="solid" color="primary" [text]="'@assessment-management:questionnaires.components.questionnaire-viewer.flow.start' | translate | async" (onClick)="flowStep.set('questions')"></ax-button>
+            } @else if (flowStep() === 'questions') {
               @if (showNavigationButtons()) {
-                <ax-button
-                  look="solid"
-                  [disabled]="!canNavigatePrevious()"
-                  [text]="'@general:actions.previous.title' | translate | async"
-                  (onClick)="handlePreviousClick()"
-                ></ax-button>
+                <ax-button look="solid" [disabled]="!canNavigatePrevious()" [text]="'@general:actions.previous.title' | translate | async" (onClick)="handlePreviousClick()"></ax-button>
                 @if (!isLastStep()) {
-                  <ax-button
-                    look="solid"
-                    color="primary"
-                    [disabled]="!canNavigateNext()"
-                    [text]="'@general:actions.next.title' | translate | async"
-                    (onClick)="handleNextClick()"
-                  ></ax-button>
+                  <ax-button look="solid" color="primary" [disabled]="!canNavigateNext()" [text]="'@general:actions.next.title' | translate | async" (onClick)="handleNextClick()"></ax-button>
                 }
               }
-              @if (isLastStep()) {
-                <ax-button
-                  look="solid"
-                  color="primary"
-                  [text]="'@general:actions.submit.title' | translate | async"
-                  [disabled]="isReadonly() || isSubmitting() || !areAllRequiredQuestionsAnswered()"
-                  (onClick)="handleSubmitClick()"
-                ></ax-button>
+              @if (isLastStep() && showReviewButton()) {
+                <ax-button look="solid" color="primary" [text]="'@assessment-management:questionnaires.components.questionnaire-viewer.flow.review' | translate | async" [disabled]="!areAllRequiredQuestionsAnswered()" (onClick)="handleReviewClick()"></ax-button>
               }
-            </div>
-          </div>
-        </div>
+              @if (isLastStep() && !showReviewButton()) {
+                <ax-button look="solid" color="primary" [text]="'@general:actions.submit.title' | translate | async" [disabled]="isReadonly() || isSubmitting() || !areAllRequiredQuestionsAnswered()" (onClick)="handleSubmitClick()"></ax-button>
+              }
+            } @else if (flowStep() === 'review') {
+              <ax-button look="outline" [text]="'@assessment-management:questionnaires.components.questionnaire-viewer.flow.edit' | translate | async" (onClick)="flowStep.set('questions')"></ax-button>
+              <ax-button look="solid" color="primary" [text]="'@general:actions.submit.title' | translate | async" [disabled]="isSubmitting()" (onClick)="handleReviewSubmit()"></ax-button>
+            } @else if (flowStep() === 'summary') {
+              <ax-button look="solid" color="primary" [text]="'@assessment-management:questionnaires.components.questionnaire-viewer.flow.done' | translate | async" (onClick)="handleDone()"></ax-button>
+            }
+          </ax-suffix>
+        </ax-footer>
       }
     </div>
   `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
@@ -4007,14 +4487,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         AXDecoratorModule,
                         AXTranslationModule,
                         AXPWidgetCoreModule,
-                        AXMQuestionnaireViewerComponent,
                         AXPStopwatchComponent,
+                        AXMQuestionnaireViewerComponent,
+                        AXMPreQuestionnaireContentComponent,
+                        AXMPostQuestionnaireContentComponent,
                     ], providers: [AXPWidgetCoreService, AXPWidgetCoreContextStore], encapsulation: ViewEncapsulation.None, host: { class: 'axm-questionnaire-viewer-standalone-page' }, styles: ["axm-questionnaire-viewer-popup{display:flex;height:100%;flex-direction:column;overflow:hidden;max-height:80vh}axm-questionnaire-viewer-popup .__main-container{display:flex;min-height:0px;flex:1 1 0%;flex-direction:column;overflow:hidden}axm-questionnaire-viewer-popup .__header{display:flex;flex-shrink:0;flex-direction:column;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1));background-color:#fff;backdrop-filter:blur(8px)}axm-questionnaire-viewer-popup .__header .__header-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1rem}axm-questionnaire-viewer-popup .__header .__header-top .__header-meta{display:flex;align-items:center;gap:1rem;font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}axm-questionnaire-viewer-popup .__header .__header-top .__header-meta .__meta-item{display:flex;align-items:center;gap:.375rem}axm-questionnaire-viewer-popup .__header .__header-top .__header-meta .__meta-item i{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-600),var(--tw-text-opacity, 1))}axm-questionnaire-viewer-popup .__header .__header-top .__header-meta .__meta-item span{font-weight:500}axm-questionnaire-viewer-popup .__header .__header-top .__header-timer{display:flex;flex-shrink:0;align-items:center}axm-questionnaire-viewer-popup .__content-wrapper{display:flex;min-height:0px;flex:1 1 0%;overflow:hidden}axm-questionnaire-viewer-popup axm-questionnaire-viewer{display:flex;height:100%;flex:1 1 0%;overflow:hidden}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { questionnaireViewer: [{ type: i0.ViewChild, args: ['viewer', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { viewer: [{ type: i0.ViewChild, args: ['viewer', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AXMQuestionnaireService as A, RootConfig as R, AXMAssessmentSessionService as a, AXMAssessmentCaseService as b, AXMQuestionBankItemService as c, AXMQuestionnaireViewerComponent as d, AXMAssessmentManagementEntityProvider as e, AXMAssessmentManagementFeatureDefinitionProvider as f, AXMAssessmentManagementFeatureKeys as g, AXMAssessmentManagementMenuProvider as h, AXPAssessmentManagementMenuKeys as i, AXMAssessmentManagementPermissionDefinitionProvider as j, AXMAssessmentManagementPermissionKeys as k, AXMAssessmentManagementSearchCommandProvider as l, AXMAssessmentManagementModule as m, AXMQuestionBankItemServiceImpl as n, AXMQuestionnaireServiceImpl as o, AXMAssessmentCaseServiceImpl as p, AXMAssessmentSessionServiceImpl as q, AXMQuestionnaireViewerPageComponent as r, AXMQuestionnaireViewerStandalonePageComponent as s };
-//# sourceMappingURL=acorex-modules-assessment-management-acorex-modules-assessment-management-ClgGS32i.mjs.map
+export { AXMQuestionnaireService as A, RootConfig as R, AXMAssessmentSessionService as a, AXMAssessmentCaseService as b, AXMQuestionBankItemService as c, AXMQuestionnaireViewerComponent as d, AXMPreQuestionnaireContentComponent as e, AXMPostQuestionnaireContentComponent as f, AXMAssessmentManagementEntityProvider as g, AXMAssessmentManagementFeatureDefinitionProvider as h, AXMAssessmentManagementFeatureKeys as i, AXMAssessmentManagementMenuProvider as j, AXPAssessmentManagementMenuKeys as k, AXMAssessmentManagementPermissionDefinitionProvider as l, AXMAssessmentManagementPermissionKeys as m, AXMAssessmentManagementSearchCommandProvider as n, AXMAssessmentManagementModule as o, AXMQuestionBankItemServiceImpl as p, AXMQuestionnaireServiceImpl as q, AXMAssessmentCaseServiceImpl as r, AXMAssessmentSessionServiceImpl as s, toPrePostConfig as t, AXMQuestionnaireViewerPageComponent as u, AXMQuestionnaireViewerStandalonePageComponent as v };
+//# sourceMappingURL=acorex-modules-assessment-management-acorex-modules-assessment-management-HgaOIA2U.mjs.map