@planning-inspectorate/dynamic-forms 3.16.0 → 3.18.0

package/src/components/checkbox/question.test.js

@@ -53,36 +53,187 @@ describe('./src/dynamic-forms/components/checkbox/question.js', () => {
 		assert.deepStrictEqual(question.validators, [...VALIDATORS, new ValidOptionValidator()]);
 		assert.deepStrictEqual(question.options, OPTIONS);
 	});
+	it('should allow capitaliseAnswer override', () => {
+		const question = new CheckboxQuestion({
+			...CHECKBOX_PARAMS,
+			capitaliseAnswer: true
+		});
 
-	it('should return option label when formatAnswerForSummary is called with one answer', () => {
-		const question = new CheckboxQuestion(CHECKBOX_PARAMS);
-		question.getAction = () => {};
-		const formattedAnswer = question.formatAnswerForSummary({}, JOURNEY, '1');
-		assert.strictEqual(formattedAnswer[0].value, 'a');
+		assert.strictEqual(question.capitaliseAnswer, true);
 	});
 
-	it('should return formatted option labels when formatAnswerForSummary is called with a string representing several non-conditional answers', () => {
-		const question = new CheckboxQuestion(CHECKBOX_PARAMS);
-		question.getAction = () => {};
-		const formattedAnswer = question.formatAnswerForSummary({}, JOURNEY, '1,2');
-		assert.strictEqual(formattedAnswer[0].value, 'a<br>b');
-	});
+	describe('formatAnswer', () => {
+		it('should delegate simple string answers to parent class', () => {
+			const question = new CheckboxQuestion(CHECKBOX_PARAMS);
+			// Simple string should use parent's formatAnswer
+			const result = question.formatAnswer('1,2');
+			assert.strictEqual(result, 'a<br>b');
+		});
 
-	it('should return formatted option labels when formatAnswerForSummary is called with a string representing several answers including a conditional', () => {
-		const question = new CheckboxQuestion(CHECKBOX_PARAMS);
-		question.getAction = () => {};
-		const formattedAnswer = question.formatAnswerForSummary({}, JOURNEY, '1,2,3');
-		assert.strictEqual(formattedAnswer[0].value, `a<br>b<br>c<br>${CONDITIONAL_ANSWER_TEXT}`);
-	});
+		it('should format single answer with conditional', () => {
+			const question = new CheckboxQuestion(CHECKBOX_PARAMS);
+			const answer = {
+				value: '3',
+				conditional: {
+					3: 'conditional details'
+				}
+			};
+			const result = question.formatAnswer(answer);
+			assert.strictEqual(result, 'c<br>conditional details');
+		});
 
-	it('should return a formatted option label when formatAnswerForSummary is called with a single conditional answer', () => {
-		const question = new CheckboxQuestion(CHECKBOX_PARAMS);
-		const conditionalAnswer = {
-			value: '3',
-			conditional: CONDITIONAL_ANSWER_TEXT
-		};
-		question.getAction = () => {};
-		const formattedAnswer = question.formatAnswerForSummary({}, JOURNEY, conditionalAnswer);
-		assert.strictEqual(formattedAnswer[0].value, `c<br>${CONDITIONAL_ANSWER_TEXT}`);
+		it('should format single answer with conditional and label', () => {
+			const optionsWithLabel = [
+				{ text: 'Option A', value: 'a' },
+				{
+					text: 'Option B',
+					value: 'b',
+					conditional: {
+						fieldName: 'details',
+						label: 'Please provide details:'
+					}
+				}
+			];
+			const question = new CheckboxQuestion({
+				...CHECKBOX_PARAMS,
+				options: optionsWithLabel
+			});
+			const answer = {
+				value: 'b',
+				conditional: {
+					b: 'my details'
+				}
+			};
+			const result = question.formatAnswer(answer);
+			assert.strictEqual(result, 'Option B<br>Please provide details: my details');
+		});
+
+		it('should format multiple answers where one has conditional', () => {
+			const question = new CheckboxQuestion(CHECKBOX_PARAMS);
+			const answer = {
+				value: '1,3',
+				conditional: {
+					3: 'conditional for c'
+				}
+			};
+			const result = question.formatAnswer(answer);
+			assert.strictEqual(result, 'a<br>c<br>conditional for c');
+		});
+
+		it('should format multiple answers with multiple conditionals', () => {
+			const optionsWithMultipleConditionals = [
+				{
+					text: 'Option A',
+					value: 'a',
+					conditional: { fieldName: 'details-a' }
+				},
+				{ text: 'Option B', value: 'b' },
+				{
+					text: 'Option C',
+					value: 'c',
+					conditional: { fieldName: 'details-c' }
+				}
+			];
+			const question = new CheckboxQuestion({
+				...CHECKBOX_PARAMS,
+				options: optionsWithMultipleConditionals
+			});
+			const answer = {
+				value: 'a,c',
+				conditional: {
+					a: 'details for A',
+					c: 'details for C'
+				}
+			};
+			const result = question.formatAnswer(answer);
+			assert.strictEqual(result, 'Option A<br>details for A<br>Option C<br>details for C');
+		});
+
+		it('should handle object answer with empty conditional', () => {
+			const question = new CheckboxQuestion(CHECKBOX_PARAMS);
+			const answer = {
+				value: '1,2',
+				conditional: {}
+			};
+			const result = question.formatAnswer(answer);
+			assert.strictEqual(result, 'a<br>b');
+		});
+
+		it('should handle object answer with null conditional', () => {
+			const question = new CheckboxQuestion(CHECKBOX_PARAMS);
+			const answer = {
+				value: '1,2',
+				conditional: null
+			};
+			const result = question.formatAnswer(answer);
+			assert.strictEqual(result, 'a<br>b');
+		});
+
+		it('should fall back to value when option not found in object answer', () => {
+			const question = new CheckboxQuestion(CHECKBOX_PARAMS);
+			const answer = {
+				value: 'unknown',
+				conditional: {}
+			};
+			const result = question.formatAnswer(answer);
+			assert.strictEqual(result, 'unknown');
+		});
+
+		it('should escape HTML in option text', () => {
+			const question = new CheckboxQuestion({
+				...CHECKBOX_PARAMS,
+				options: [{ text: '<script>alert("xss")</script>', value: '1' }]
+			});
+			const result = question.formatAnswer('1');
+			assert.strictEqual(result, '&lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;');
+		});
+
+		it('should escape HTML in conditional value', () => {
+			const question = new CheckboxQuestion({
+				...CHECKBOX_PARAMS,
+				options: [
+					{
+						text: 'Option',
+						value: '1',
+						conditional: { fieldName: 'details', type: 'text' }
+					}
+				]
+			});
+			const answer = {
+				value: '1',
+				conditional: { 1: '<img src=x onerror=alert(1)>' }
+			};
+			const result = question.formatAnswer(answer);
+			assert.strictEqual(result, 'Option<br>&lt;img src=x onerror=alert(1)&gt;');
+		});
+
+		it('should escape HTML in conditional label', () => {
+			const question = new CheckboxQuestion({
+				...CHECKBOX_PARAMS,
+				options: [
+					{
+						text: 'Option',
+						value: '1',
+						conditional: { fieldName: 'details', type: 'text', label: '<b>Label</b>' }
+					}
+				]
+			});
+			const answer = {
+				value: '1',
+				conditional: { 1: 'safe value' }
+			};
+			const result = question.formatAnswer(answer);
+			assert.strictEqual(result, 'Option<br>&lt;b&gt;Label&lt;/b&gt; safe value');
+		});
+
+		it('should escape HTML in fallback value when option not found', () => {
+			const question = new CheckboxQuestion(CHECKBOX_PARAMS);
+			const answer = {
+				value: '<script>xss</script>',
+				conditional: {}
+			};
+			const result = question.formatAnswer(answer);
+			assert.strictEqual(result, '&lt;script&gt;xss&lt;/script&gt;');
+		});
 	});
 });

package/src/components/date/question.d.ts

@@ -16,14 +16,6 @@ export class DateQuestion extends Question {
     answerForViewModel(answers: any, isPayload: any): {
         [x: string]: any;
     };
-    /**
-     * returns the formatted answers values to be used to build task list elements
-     */
-    formatAnswerForSummary(sectionSegment: any, journey: any, answer: any): {
-        key: string;
-        value: string;
-        action: import("../../index.js").ActionView | import("../../index.js").ActionView[] | undefined;
-    }[];
 }
 export default DateQuestion;
 import { Question } from '../../questions/question.js';

package/src/components/date/question.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"question.d.ts","sourceRoot":"","sources":["question.js"],"names":[],"mappings":"AAKA;;GAEG;AACH;IACC;;OAEG;IACH,6CAFW,OAAO,+BAA+B,EAAE,kBAAkB,EAQpE;IADA,mBAA4B;IAW7B;;;;;OAKG,CACH,mBAJW,OAAO,SAAS,EAAE,OAAO,mBACzB,OAAO,mBAAmB,EAAE,eAAe,GACzC,OAAO,CAAE,MAAM,CAAC,CAY5B;IAED;;MAwBC;IAED;;OAEG;IACH;;;;QAaC;CACD;;yBAxFwB,6BAA6B"}
+{"version":3,"file":"question.d.ts","sourceRoot":"","sources":["question.js"],"names":[],"mappings":"AAKA;;GAEG;AACH;IACC;;OAEG;IACH,6CAFW,OAAO,+BAA+B,EAAE,kBAAkB,EAQpE;IADA,mBAA4B;IAW7B;;;;;OAKG,CACH,mBAJW,OAAO,SAAS,EAAE,OAAO,mBACzB,OAAO,mBAAmB,EAAE,eAAe,GACzC,OAAO,CAAE,MAAM,CAAC,CAY5B;IAED;;MAwBC;CAWD;;yBAhFwB,6BAA6B"}

package/src/components/date/question.js

@@ -71,21 +71,13 @@ export class DateQuestion extends Question {
 	}
 
 	/**
-	 * returns the formatted answers values to be used to build task list elements
+	 * Formats a date answer for display in the summary.
+	 * @param {unknown} answer - the date value
+	 * @returns {string} the formatted date
 	 */
-	formatAnswerForSummary(sectionSegment, journey, answer) {
-		let formattedAnswer;
-
-		if (answer) {
-			formattedAnswer = formatDateForDisplay(answer, { format: this.dateFormat });
-		} else {
-			formattedAnswer = this.notStartedText;
-		}
-
-		const action = this.getAction(sectionSegment, journey, answer);
-		const key = this.title ?? this.question;
-
-		return [{ key: key, value: formattedAnswer, action: action }];
+	formatAnswer(answer) {
+		if (!answer) return this.notStartedText;
+		return formatDateForDisplay(answer, { format: this.dateFormat });
 	}
 }
 

package/src/components/date-period/question.d.ts

@@ -25,17 +25,13 @@ export class DatePeriodQuestion extends Question {
     answerForViewModel(answers: any, isPayload: any): {
         [x: string]: any;
     };
-    /**
-     * @param {import('#question').QuestionViewModel} viewModel
-     */
-    addCustomDataToViewModel(viewModel: import("#question").QuestionViewModel): void;
     /**
      * returns the formatted answers values to be used to build task list elements
      */
     formatAnswerForSummary(sectionSegment: any, journey: any, answer: any): {
         key: string;
         value: string;
-        action: import("../../index.js").ActionView | import("../../index.js").ActionView[] | undefined;
+        action: import("#typedefs/question-types.d.ts").ActionView | import("#typedefs/question-types.d.ts").ActionView[] | undefined;
     }[];
 }
 export default DatePeriodQuestion;

package/src/components/date-period/question.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"question.d.ts","sourceRoot":"","sources":["question.js"],"names":[],"mappings":"AAOA;;;GAGG;AACH;IACC;;OAEG;IACH,mGAFW,OAAO,+BAA+B,EAAE,wBAAwB,EAuB1E;IAPA,mBAA4B;IAC5B;;;MAAsD;IAEtD,8BAA0B;IAC1B,4BAAsB;IACtB,kEAA+D;IAC/D,gEAA2D;IAkB5D;;;;;OAKG,CACH,mBAJW,OAAO,SAAS,EAAE,OAAO,mBACzB,OAAO,mBAAmB,EAAE,eAAe,GACzC,OAAO,CAAE,MAAM,CAAC,CAgC5B;IAED;;MAuCC;IAED;;OAEG;IACH,oCAFW,OAAO,WAAW,EAAE,iBAAiB,QAM/C;IAED;;OAEG;IACH;;;;QAyBC;CACD;;yBAzKwB,WAAW"}
+{"version":3,"file":"question.d.ts","sourceRoot":"","sources":["question.js"],"names":[],"mappings":"AAOA;;;GAGG;AACH;IACC;;OAEG;IACH,mGAFW,OAAO,+BAA+B,EAAE,wBAAwB,EAuB1E;IAPA,mBAA4B;IAC5B;;;MAAsD;IAEtD,8BAA0B;IAC1B,4BAAsB;IACtB,kEAA+D;IAC/D,gEAA2D;IAkB5D;;;;;OAKG,CACH,mBAJW,OAAO,SAAS,EAAE,OAAO,mBACzB,OAAO,mBAAmB,EAAE,eAAe,GACzC,OAAO,CAAE,MAAM,CAAC,CAgC5B;IAED;;MAuCC;IAWD;;OAEG;IACH;;;;QAyBC;CACD;;yBAzKwB,WAAW"}

package/src/components/date-period/question.js

@@ -131,7 +131,7 @@ export class DatePeriodQuestion extends Question {
 	}
 
 	/**
-	 * @param {import('#question').QuestionViewModel} viewModel
+	 * @param {import('#typedefs/question-types.d.ts').QuestionViewModel} viewModel
 	 */
 	addCustomDataToViewModel(viewModel) {
 		viewModel.labels = this.labels;

package/src/components/date-time/question.d.ts

@@ -16,14 +16,6 @@ export class DateTimeQuestion extends Question {
     answerForViewModel(answers: any, isPayload: any): {
         [x: string]: any;
     };
-    /**
-     * returns the formatted answers values to be used to build task list elements
-     */
-    formatAnswerForSummary(sectionSegment: any, journey: any, answer: any): {
-        key: string;
-        value: string;
-        action: import("../../index.js").ActionView | import("../../index.js").ActionView[] | undefined;
-    }[];
     #private;
 }
 export default DateTimeQuestion;

package/src/components/date-time/question.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"question.d.ts","sourceRoot":"","sources":["question.js"],"names":[],"mappings":"AAMA;IACC,kBAAiB;IACjB,kBAAiB;IAEjB;;OAEG;IACH,yDAFW,OAAO,+BAA+B,EAAE,sBAAsB,EASxE;IAFA,mBAA4B;IAC5B,mBAA4B;IAkB7B;;;;;OAKG,CACH,mBAJW,OAAO,SAAS,EAAE,OAAO,mBACzB,eAAe,GACb,OAAO,CAAE,MAAM,CAAC,CAqB5B;IAED;;MAqCC;IAED;;OAEG;IACH;;;;QAQC;;CAsBD;;yBAxIwB,6BAA6B"}
+{"version":3,"file":"question.d.ts","sourceRoot":"","sources":["question.js"],"names":[],"mappings":"AAMA;IACC,kBAAiB;IACjB,kBAAiB;IAEjB;;OAEG;IACH,yDAFW,OAAO,+BAA+B,EAAE,sBAAsB,EASxE;IAFA,mBAA4B;IAC5B,mBAA4B;IAkB7B;;;;;OAKG,CACH,mBAJW,OAAO,SAAS,EAAE,OAAO,mBACzB,eAAe,GACb,OAAO,CAAE,MAAM,CAAC,CAqB5B;IAED;;MAqCC;;CA2BD;;yBAhIwB,6BAA6B"}

package/src/components/date-time/question.js

@@ -102,19 +102,11 @@ export class DateTimeQuestion extends Question {
 	}
 
 	/**
-	 * returns the formatted answers values to be used to build task list elements
+	 * Formats a date-time answer for display in the summary.
+	 * @param {unknown} answer - the date value
+	 * @returns {string} the formatted date and time
 	 */
-	formatAnswerForSummary(sectionSegment, journey, answer) {
-		return [
-			{
-				key: this.title,
-				value: this.#formatDateTimeValue(answer),
-				action: this.getAction(sectionSegment, journey, answer)
-			}
-		];
-	}
-
-	#formatDateTimeValue(answer) {
+	formatAnswer(answer) {
 		if (!answer) return this.notStartedText;
 
 		const formattedDate = formatDateForDisplay(answer, { format: this.dateFormat });

package/src/components/email/question.d.ts

@@ -8,15 +8,6 @@ export class EmailQuestion extends SingleLineInputQuestion {
      * @param {import('#typedefs/question-props.d.ts').EmailQuestionParams} params
      */
     constructor(params: import("#typedefs/question-props.d.ts").EmailQuestionParams);
-    /**
-     * Override formatAnswerForSummary to prevent capitalization of email addresses
-     * Email addresses should remain in their original case (typically lowercase)
-     * @param {string} sectionSegment
-     * @param {import('#journey').Journey} journey
-     * @param {string} answer
-     * @returns {Array}
-     */
-    formatAnswerForSummary(sectionSegment: string, journey: import("#journey").Journey, answer: string): any[];
 }
 export default EmailQuestion;
 import SingleLineInputQuestion from '../single-line-input/question.js';

package/src/components/email/question.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"question.d.ts","sourceRoot":"","sources":["question.js"],"names":[],"mappings":"AAEA;;;;GAIG;AACH;IACC;;OAEG;IACH,oBAFW,OAAO,+BAA+B,EAAE,mBAAmB,EAmBrE;IAED;;;;;;;OAOG;IACH,uCALW,MAAM,WACN,OAAO,UAAU,EAAE,OAAO,UAC1B,MAAM,SAMhB;CACD;;oCA1CmC,kCAAkC"}
+{"version":3,"file":"question.d.ts","sourceRoot":"","sources":["question.js"],"names":[],"mappings":"AAEA;;;;GAIG;AACH;IACC;;OAEG;IACH,oBAFW,OAAO,+BAA+B,EAAE,mBAAmB,EAqBrE;CACD;;oCA/BmC,kCAAkC"}

package/src/components/email/question.js

@@ -21,25 +21,14 @@ export class EmailQuestion extends SingleLineInputQuestion {
 		const autocomplete = params.autocomplete || 'email';
 
 		super({
+			// Prevent capitalisation of email answers by default, but allow override
+			capitaliseAnswer: false,
 			...params,
 			viewFolder: 'single-line-input', // Reuse single-line-input template
 			inputAttributes: emailInputAttributes,
 			autocomplete: autocomplete
 		});
 	}
-
-	/**
-	 * Override formatAnswerForSummary to prevent capitalization of email addresses
-	 * Email addresses should remain in their original case (typically lowercase)
-	 * @param {string} sectionSegment
-	 * @param {import('#journey').Journey} journey
-	 * @param {string} answer
-	 * @returns {Array}
-	 */
-	formatAnswerForSummary(sectionSegment, journey, answer) {
-		// Call parent method with capitals=false to prevent email capitalization
-		return super.formatAnswerForSummary(sectionSegment, journey, answer, false);
-	}
 }
 
 export default EmailQuestion;

package/src/components/email/question.test.js

@@ -16,6 +16,25 @@ describe('src/dynamic-forms/components/email/question.js', () => {
 		assert.strictEqual(emailQuestion.autocomplete, 'email');
 	});
 
+	it('should default capitaliseAnswer to false', () => {
+		const emailQuestion = new EmailQuestion({
+			title: 'Email Address',
+			question: 'What is your email address?',
+			fieldName: 'email'
+		});
+		assert.strictEqual(emailQuestion.capitaliseAnswer, false);
+	});
+
+	it('should allow capitaliseAnswer to be set via constructor', () => {
+		const emailQuestion = new EmailQuestion({
+			title: 'Email Address',
+			question: 'What is your email address?',
+			fieldName: 'email',
+			capitaliseAnswer: true
+		});
+		assert.strictEqual(emailQuestion.capitaliseAnswer, true);
+	});
+
 	it('should allow custom input attributes while preserving email defaults', () => {
 		const customAttributes = {
 			placeholder: 'Enter your email',

package/src/components/manage-list/answer-summary-list.njk

@@ -2,7 +2,7 @@
 {% for question in answers %}
     <li>
     {% for value in question %}
-        {{ value.answer }}{% if not loop.last %}<br>{% endif %}
+        {{ value.answer | safe }}{% if not loop.last %}<br>{% endif %}
 
     {% endfor %}
     </li>

package/src/components/manage-list/question.d.ts

@@ -11,10 +11,6 @@ export class ManageListQuestion extends Question {
      */
     constructor(params: import("#typedefs/question-props.d.ts").ManageListQuestionParams);
     get confirmationQuestionParam(): string;
-    /**
-     * @param {import('#question').QuestionViewModel} viewModel
-     */
-    addCustomDataToViewModel(viewModel: import("#question").QuestionViewModel): void;
     getDataToSave(req: any, journeyResponse: any): Promise<{
         answers: {
             [x: string]: any;
@@ -26,7 +22,7 @@ export class ManageListQuestion extends Question {
     formatAnswerForSummary(sectionSegment: any, journey: any, answer: any): {
         key: string;
         value: string;
-        action: import("../../index.js").ActionView | import("../../index.js").ActionView[] | undefined;
+        action: import("#typedefs/question-types.d.ts").ActionView | import("#typedefs/question-types.d.ts").ActionView[] | undefined;
     }[];
     renderConfirmationAction(res: any, itemToRemove: any, viewModel: any): void;
     set section(section: import("../../section.js").Section);

package/src/components/manage-list/question.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"question.d.ts","sourceRoot":"","sources":["question.js"],"names":[],"mappings":"AAKA;;;;;;GAMG;AAEH;IAOC;;OAEG;IACH,oBAFW,OAAO,+BAA+B,EAAE,wBAAwB,EAe1E;IAcD,wCAEC;IAED;;OAEG;IACH,oCAFW,OAAO,WAAW,EAAE,iBAAiB,QAmB/C;IAmCD;;;;OAMC;IAED;;OAEG;IACH;;;;QAsBC;IAED,4EAQC;IAoCD,yDAEC;IATD,kDAKC;;CAKD;;;;;;mBAxLa,MAAM;;;;;;;;;;;;;;yBAPK,WAAW"}
+{"version":3,"file":"question.d.ts","sourceRoot":"","sources":["question.js"],"names":[],"mappings":"AAKA;;;;;;GAMG;AAEH;IAOC;;OAEG;IACH,oBAFW,OAAO,+BAA+B,EAAE,wBAAwB,EAe1E;IAcD,wCAEC;IAyDD;;;;OAMC;IAED;;OAEG;IACH;;;;QAsBC;IAED,4EAQC;IAoCD,yDAEC;IATD,kDAKC;;CAKD;;;;;;mBAxLa,MAAM;;;;;;;;;;;;;;yBAPK,WAAW"}

package/src/components/manage-list/question.js

@@ -53,7 +53,7 @@ export class ManageListQuestion extends Question {
 	}
 
 	/**
-	 * @param {import('#question').QuestionViewModel} viewModel
+	 * @param {import('#typedefs/question-types.d.ts').QuestionViewModel} viewModel
 	 */
 	addCustomDataToViewModel(viewModel) {
 		viewModel.question.addAnotherLink = this.#addAnotherLink;

package/src/components/multi-field-input/question.d.ts

@@ -14,6 +14,7 @@ export class MultiFieldInputQuestion extends Question {
         formatJoinString?: string;
         formatPrefix?: string;
         formatTextFunction?: (text: string) => string;
+        formatSummaryValue?: (context: import("#typedefs/question-props.d.ts").InputFieldSummaryContext) => string;
         attributes?: Record<string, string>;
         suffix?: import("#typedefs/question-props.d.ts").Affix;
         prefix?: import("#typedefs/question-props.d.ts").Affix;
@@ -24,27 +25,11 @@ export class MultiFieldInputQuestion extends Question {
     }[];
     /**
      * returns the formatted answers values to be used to build task list elements
-     * @param {import('#journey').Journey} journey
      * @param {string} sectionSegment
-     * @returns {Array<{
-     *   key: string;
-     *   value: string | Object;
-     *   action: {
-     *     href: string;
-     *     text: string;
-     *     visuallyHiddenText: string;
-     *   };
-     * }>}
+     * @param {import('#journey').Journey} journey
+     * @returns {import('#typedefs/question-types.d.ts').SummaryRow[]}
      */
-    formatAnswerForSummary(sectionSegment: string, journey: import("#journey").Journey): Array<{
-        key: string;
-        value: string | Object;
-        action: {
-            href: string;
-            text: string;
-            visuallyHiddenText: string;
-        };
-    }>;
+    formatAnswerForSummary(sectionSegment: string, journey: import("#journey").Journey): import("#typedefs/question-types.d.ts").SummaryRow[];
     #private;
 }
 export default MultiFieldInputQuestion;

package/src/components/multi-field-input/question.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"question.d.ts","sourceRoot":"","sources":["question.js"],"names":[],"mappings":"AAIA;;GAEG;AACH;IACC;;OAEG;IACH,8CAFW,OAAO,+BAA+B,EAAE,6BAA6B,EAa/E;IAJC,kEAA8B;IAchC;;;;;;;;;;;;;;QAOC;IAsBD;;;;;;;;;;;;;OAaG;IACH,uCAXW,MAAM,WADN,OAAO,UAAU,EAAE,OAAO,GAExB,KAAK,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;QACZ,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QACvB,MAAM,EAAE;YACN,IAAI,EAAE,MAAM,CAAC;YACb,IAAI,EAAE,MAAM,CAAC;YACb,kBAAkB,EAAE,MAAM,CAAC;SAC5B,CAAC;KACH,CAAC,CAkBJ;;CAyBD;;yBApHwB,WAAW"}
+{"version":3,"file":"question.d.ts","sourceRoot":"","sources":["question.js"],"names":[],"mappings":"AAIA;;GAEG;AACH;IACC;;OAEG;IACH,8CAFW,OAAO,+BAA+B,EAAE,6BAA6B,EAe/E;IAJC,kEAA8B;IAchC;;;;;;;;;;;;;;;QAOC;IA4CD;;;;;OAKG;IACH,uCAJW,MAAM,WACN,OAAO,UAAU,EAAE,OAAO,GACxB,OAAO,+BAA+B,EAAE,UAAU,EAAE,CAuChE;;CAsDD;;yBAtLwB,WAAW"}

package/src/components/multi-field-input/question.js

@@ -1,6 +1,6 @@
 import { Question } from '#question';
 import escape from 'escape-html';
-import { nl2br } from '../../lib/utils.js';
+import { capitalize, nl2br } from '../../lib/utils.js';
 
 /**
  * @class
@@ -11,6 +11,8 @@ export class MultiFieldInputQuestion extends Question {
 	 */
 	constructor({ inputFields, ...parentParams }) {
 		super({
+			// default but allow overrides
+			capitaliseAnswer: false,
 			...parentParams,
 			viewFolder: 'multi-field-input'
 		});
@@ -59,36 +61,100 @@ export class MultiFieldInputQuestion extends Question {
 		return { answers };
 	}
 
+	/**
+	 * Formats an answer value for display in the summary.
+	 * Handles the ManageListSection edge case where nl2br should not be applied.
+	 *
+	 * @param {unknown} answer - the raw answer value (composed from multiple fields)
+	 * @returns {string} the formatted answer for display
+	 */
+	formatAnswer(answer) {
+		// Only show notStartedText for null/undefined, not for empty string
+		if (answer === null || answer === undefined) return this.notStartedText;
+		if (answer === '') return '';
+
+		// Coerce to string and apply optional capitalisation
+		let formatted = String(answer);
+		if (this.capitaliseAnswer) {
+			formatted = capitalize(formatted);
+		}
+
+		// Do not convert new lines to breaks in ManageListSection, as this causes a "doubled up" <br>
+		return this.isInManageListSection ? escape(formatted) : nl2br(escape(formatted));
+	}
+
 	/**
 	 * returns the formatted answers values to be used to build task list elements
-	 * @param {import('#journey').Journey} journey
 	 * @param {string} sectionSegment
-	 * @returns {Array<{
-	 *   key: string;
-	 *   value: string | Object;
-	 *   action: {
-	 *     href: string;
-	 *     text: string;
-	 *     visuallyHiddenText: string;
-	 *   };
-	 * }>}
+	 * @param {import('#journey').Journey} journey
+	 * @returns {import('#typedefs/question-types.d.ts').SummaryRow[]}
 	 */
 	formatAnswerForSummary(sectionSegment, journey) {
-		const summaryDetails = this.inputFields.reduce((acc, field) => {
-			const answer = this.#formatValue(journey.response.answers[field.fieldName], field.formatTextFunction);
-			return answer ? acc + (field.formatPrefix || '') + answer + (field.formatJoinString || '\n') : acc;
+		// Handle unanswered case - delegate to parent for notStartedText
+		if (this.#allQuestionsUnanswered(journey)) {
+			return super.formatAnswerForSummary(sectionSegment, journey, null);
+		}
+
+		// Default join string depends on context
+		const defaultJoinString = this.isInManageListSection ? '\n' : '<br>';
+
+		let summaryDetails = this.inputFields.reduce((accumulator, field) => {
+			const rawAnswer = journey.response.answers[field.fieldName];
+			if (rawAnswer === undefined || rawAnswer === null || rawAnswer === '') return accumulator;
+
+			const formatted = this.#formatFieldForSummary(rawAnswer, field, journey, sectionSegment);
+			return accumulator + (field.formatPrefix || '') + formatted + (field.formatJoinString ?? defaultJoinString);
 		}, '');
 
-		const formattedAnswer = this.#allQuestionsUnanswered(journey) ? this.notStartedText : summaryDetails || '';
+		// Remove trailing join string
+		if (summaryDetails.endsWith(defaultJoinString)) {
+			summaryDetails = summaryDetails.slice(0, -defaultJoinString.length);
+		}
 
-		return [
-			{
-				key: `${this.title}`,
-				// Do not convert new lines to breaks in ManageListSection, as this causes a "doubled up" <br>
-				value: this.isInManageListSection ? escape(formattedAnswer) : nl2br(escape(formattedAnswer)),
-				action: this.getAction(sectionSegment, journey, summaryDetails)
-			}
-		];
+		// Apply question-level formatSummaryValue if provided
+		const displayValue = this.formatSummaryValue
+			? this.formatSummaryValue({
+					answer: summaryDetails,
+					formattedAnswer: summaryDetails,
+					question: this,
+					journey,
+					sectionSegment
+				})
+			: summaryDetails;
+
+		// Build result directly - escaping already handled per-field
+		const action = this.getAction(sectionSegment, journey, summaryDetails);
+		const key = this.title ?? this.question;
+		return [{ key, value: displayValue || '', action }];
+	}
+
+	/**
+	 * Formats a single field value for summary display
+	 * @param {unknown} answer - the raw answer value
+	 * @param {import('#typedefs/question-props.d.ts').InputField} field - the input field config
+	 * @param {import('#journey').Journey} journey - the journey instance
+	 * @param {string} sectionSegment - the section segment
+	 * @returns {string}
+	 */
+	#formatFieldForSummary(answer, field, journey, sectionSegment) {
+		// Apply formatTextFunction (if provided) before escaping, same as answerForViewModel
+		const textFormattedAnswer = this.#formatValue(answer, field.formatTextFunction);
+		const formattedAnswer = escape(String(textFormattedAnswer));
+
+		// If formatSummaryValue is provided, use it with full context (output is not escaped)
+		if (typeof field.formatSummaryValue === 'function') {
+			return field.formatSummaryValue({
+				answer,
+				formattedAnswer,
+				question: this,
+				journey,
+				sectionSegment,
+				field
+			});
+		}
+
+		// Default: escaped, formatTextFunction-applied value
+		return formattedAnswer;
 	}
 
 	/**