@planning-inspectorate/dynamic-forms 3.15.6 → 3.17.0

package/.gitattributes

@@ -1,2 +1,5 @@
+# Ensure all text files use LF line endings
+* text=auto eol=lf
+
 # snapshots always use \n
 test/snapshots/** text eol=lf

package/.prettierrc

@@ -7,5 +7,6 @@
 	"trailingComma": "none",
 	"bracketSpacing": true,
 	"arrowParens": "always",
+	"endOfLine": "lf",
 	"plugins": []
 }

package/README.md

@@ -286,6 +286,117 @@ const questionProps = {
 const questions = createQuestions(questionProps, questionClasses, {});
 ```
 
+### Custom Summary Formatting
+
+The `formatSummaryValue` option allows you to customise how answers are displayed on check-your-answers pages without needing to create a custom question class.
+
+#### Basic Usage
+
+Pass a `formatSummaryValue` function when creating a question:
+
+```javascript
+import { RadioQuestion } from '@planning-inspectorate/dynamic-forms';
+
+new RadioQuestion({
+    fieldName: 'status',
+    title: 'Application status',
+    question: 'What is the application status?',
+    options: [
+        { text: 'Approved', value: 'approved' },
+        { text: 'Rejected', value: 'rejected' }
+    ],
+    formatSummaryValue: ({ formattedAnswer }) => `<strong>${formattedAnswer}</strong>`
+});
+```
+
+#### Formatter Context
+
+The formatter function receives a context object with the following properties:
+
+| Property | Type | Description                                    |
+|----------|------|------------------------------------------------|
+| `answer` | `unknown` | The raw answer value                           |
+| `formattedAnswer` | `string` | The default formatted display value            |
+| `question` | `Question` | The question instance                          |
+| `journey` | `Journey` | The journey instance                           |
+| `sectionSegment` | `string` | The current section segment                    |
+| `selectedOptions` | `Option[] \| undefined` | For OptionsQuestions (such as Checkbox or Radio), the matched option object(s) as an array |
+
+#### Answer Formats
+
+Different options-based questions store answers in different formats. The `selectedOptions` array normalises these formats for your formatter:
+
+| Question Type | Answer Format | `selectedOptions` Result |
+|---------------|---------------|--------------------------|
+| **Radio / Select** | Single string value: `"approved"` | `[{ text: 'Approved', value: 'approved' }]` |
+| **Radio / Select** | Conditional object: `{ value: "yes", conditional: "details" }` | `[{ text: 'Yes', value: 'yes', conditional: {...} }]` |
+| **Checkbox** | Comma-separated string: `"option1,option2"` | `[{ text: 'Option 1', value: 'option1' }, { text: 'Option 2', value: 'option2' }]` |
+| **Checkbox** | Single conditional object: `{ value: "other", conditional: "details" }` | `[{ text: 'Other', value: 'other', conditional: {...} }]` |
+
+For single-select questions (Radio, Select), use `selectedOptions[0]` to access the selected option. For multi-select questions (Checkbox), iterate over the array.
+
+#### Examples
+
+**Bold formatting:**
+
+```javascript
+formatSummaryValue: ({ formattedAnswer }) => `<strong>${escapeHtml(formattedAnswer)}</strong>`
+```
+
+**Conditional styling based on answer:**
+
+```javascript
+formatSummaryValue: ({ selectedOptions }) => {
+    const selectedOption = selectedOptions[0];
+    const color = selectedOption?.value === 'approved' ? 'green' : 'red';
+    return `<span style="color: ${color}">${escapeHtml(selectedOption?.text ?? '-')}</span>`;
+}
+```
+
+**Adding a suffix from another answer:**
+
+```javascript
+const suffixes = { solid: ' (tonnes)', liquid: ' (litres)' };
+
+formatSummaryValue: ({ answer, formattedAnswer }) => {
+    const suffix = suffixes[answer] ?? '';
+    return `${formattedAnswer}${suffix}`;
+}
+```
+
+**Accessing other journey answers:**
+
+```javascript
+formatSummaryValue: ({ formattedAnswer, journey }) => {
+    const capacity = journey.response.answers.wasteCapacity;
+    return capacity ? `${formattedAnswer}: ${capacity}` : formattedAnswer;
+}
+```
+
+**Using selectedOptions for single-select questions (Radio/Select):**
+
+```javascript
+formatSummaryValue: ({ selectedOptions }) => {
+    const selectedOption = selectedOptions[0];
+    // Access the full option object including any custom properties
+    const warning = selectedOption?.warning;
+    return warning ? `${escapeHtml(selectedOption?.text ?? '-')} ⚠️` : escapeHtml(selectedOption?.text ?? '-');
+}
+```
+
+**Using selectedOptions for multi-select questions (Checkbox):**
+
+```javascript
+formatSummaryValue: ({ selectedOptions }) => {
+    // Join all selected option texts with custom formatting
+    return selectedOptions
+        .map(opt => `<span class="tag">${escapeHtml(opt.text)}</span>`)
+        .join(' ');
+}
+```
+
+> **Note:** `formattedAnswer` is already escaped by dynamic-forms; you are responsible for escaping any additional user-controlled values you include (for example `answer`, option text from `selectedOptions`, or values read from `journey.response.answers`).
+
 ## Contributing
 
 When contributing to this package, ensure changes are generic and not service-specific. Speak to the R&D devs if you are not sure. Prefer configuration over hardcoding values, and ensure the code is well documented. 
@@ -295,9 +406,17 @@ Commits must follow conventional commits, and the commit types will be used by s
 The package will be released automatically using semantic-release, on merge to main. This will include a git tag for the release, and publishing to NPM.
 
 ### Type safety
-We use JSDocs to describe the types used. This is helpful for the JavaScript developers, and *crucial* for this project being compatible with TypeScript. Type declarations for TypeScript users are auto-generated by `tsc` to create type declarations. So please:
-1. Add JSDocs annotations to your code, use `@import` or an inline import, i.e. `@param {import('#section').Section} section`. Avoid a top-level import, e.g. `@typedef {import('../validator/base-validator.js')} BaseValidator` - this seems to create confusion when the compiler auto-generates the type declarations.
-2. Maintain `index.js`. If you're adding code that users of this module will import, please make it is being exported in `index.js`.
+We use JSDocs to describe the types used. This is helpful for the JavaScript developers, and *crucial* for this project being compatible with TypeScript. Type declarations for TypeScript users are auto-generated by `tsc` inline alongside the source files.
+
+**Type definitions:**
+- Shared type definitions should be placed in the `typedefs/` folder (e.g. `typedefs/question-types.d.ts`)
+- New type definition files need a corresponding empty `.js` file, which needs to be exported from `index.js`, in order to be importable from the package root.
+- Types can be imported using path aliases, e.g. `@param {import('#typedefs/question-types.d.ts').SummaryRow[]} rows`
+
+**Best practices:**
+1. Always use inline imports for JSDoc types, e.g. `@param {import('#section').Section} section`
+2. Avoid top-level `@typedef` imports like `@typedef {import('../validator/base-validator.js')} BaseValidator` - these can create confusion when the compiler auto-generates declarations
+3. Maintain `index.js` - if you're adding code that users of this module will import, ensure it is exported in `index.js`
 
 Thank you for your co-operation and contributions!
 
@@ -313,7 +432,7 @@ To update any snapshots with rendering changes (or new questions), run `node --t
 
 When implement a new component, extend the base `Question` class. Common methods to override are:
 
-* `formatAnswerForSummary` - used for check-your-answers display
+* `formatAnswer` - used for check-your-answers display
 * `getDataToSave` - answer data to save
 * `addCustomDataToViewModel` - customise the view model with extra data/configuration
 * `answerForViewModel` - customise the view model answer value

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@planning-inspectorate/dynamic-forms",
-  "version": "3.15.6",
+  "version": "3.17.0",
   "description": "This package is for building GDS forms using a configuration-based approach.",
   "main": "./src/index.js",
   "type": "module",
-  "types": "./types/src/index.d.ts",
+  "types": "./src/index.d.ts",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Planning-Inspectorate/dynamic-forms.git"
@@ -17,7 +17,8 @@
     "lint": "npx eslint .",
     "format": "prettier --write .",
     "format-check": "prettier --check .",
-    "generate-types": "npx tsc --project tsconfig.json && node move-types.js",
+    "generate-types": "npx tsc --project tsconfig.json",
+    "reset-generated-types": "find . -name \"*.d.ts\" -not -path \"./typedefs/*\" -not -path \"./node_modules/*\" -delete && find . -name \"*.d.ts.map\" -not -path \"./node_modules/*\" -delete",
     "prepare": "node .husky/install.mjs",
     "test": "node --test",
     "test-coverage": "node --test --experimental-test-coverage"
@@ -30,7 +31,8 @@
     "nunjucks": "^3.2.4"
   },
   "imports": {
-    "#question-types": "./src/questions/question-types.d.ts",
+    "#question-types": "./typedefs/question-types.d.ts",
+    "#typedefs/*": "./typedefs/*",
     "#test/*": "./test/*",
     "#base-validator": "./src/validator/base-validator.js",
     "#journey": "./src/journey/journey.js",

package/{types/src → src}/components/address/question.d.ts

@@ -1,8 +1,8 @@
 export class AddressQuestion extends Question {
     /**
-     * @param {import('../../questions/question-props.d.ts').SiteAddressQuestionParams} params
+     * @param {import('#typedefs/question-props.d.ts').SiteAddressQuestionParams} params
      */
-    constructor(params: import("../../questions/question-props.d.ts").SiteAddressQuestionParams);
+    constructor(params: import("#typedefs/question-props.d.ts").SiteAddressQuestionParams);
     requiredFields: {
         addressLine1: boolean;
         addressLine2: boolean;
@@ -29,6 +29,10 @@ export class AddressQuestion extends Question {
     format(answer: {
         [x: string]: any;
     }): string;
+    /**
+     * returns the formatted answers values to be used to build task list elements
+     */
+    formatAnswer(answer: any): string;
     formatLabelFromRequiredFields(fieldName: any): "" | " (optional)";
 }
 export default AddressQuestion;

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

@@ -0,0 +1 @@
+{"version":3,"file":"question.d.ts","sourceRoot":"","sources":["question.js"],"names":[],"mappings":"AAOA;IACC;;OAEG;IACH,oBAFW,OAAO,+BAA+B,EAAE,yBAAyB,EAqB3E;IAXE;;;;;;kBAA8C;IAIhD;;;;;;MAMC;IAiBF;;;OAGG;IACH,4BAHW,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GACjB,GAAC,GAAC,MAAM,CAqBpB;IAqCD;;;OAGG;IACH;;eAUC;IAED;;OAEG;IACH,kCAIC;IAED,kEAMC;CACD;;yBA1IwB,WAAW"}

package/src/components/address/question.js

@@ -7,7 +7,7 @@ import AddressValidator from '../../validator/address-validator.js';
 
 export class AddressQuestion extends Question {
 	/**
-	 * @param {import('../../questions/question-props.d.ts').SiteAddressQuestionParams} params
+	 * @param {import('#typedefs/question-props.d.ts').SiteAddressQuestionParams} params
 	 */
 	constructor(params) {
 		super({
@@ -70,7 +70,7 @@ export class AddressQuestion extends Question {
 	}
 
 	/**
-	 * @param {import('#question').QuestionViewModel} viewModel
+	 * @param {import('#typedefs/question-types.d.ts').QuestionViewModel} viewModel
 	 */
 	addCustomDataToViewModel(viewModel) {
 		viewModel.question.labels = this.addressLabels;
@@ -122,25 +122,13 @@ export class AddressQuestion extends Question {
 
 	/**
 	 * returns the formatted answers values to be used to build task list elements
-	 * @type {Question['formatAnswerForSummary']}
 	 */
-	formatAnswerForSummary(sectionSegment, journey, answer) {
-		let formattedAnswer = this.notStartedText;
-
-		if (answer) {
-			formattedAnswer = nl2br(escape(this.format(answer)));
-		} else if (answer === null) {
-			formattedAnswer = '';
-		}
-
-		return [
-			{
-				key: `${this.title}`,
-				value: formattedAnswer,
-				action: this.getAction(sectionSegment, journey, answer)
-			}
-		];
+	formatAnswer(answer) {
+		if (answer === null) return '';
+		if (!answer) return this.notStartedText;
+		return nl2br(escape(this.format(answer)));
 	}
+
 	formatLabelFromRequiredFields(fieldName) {
 		if (this.requiredFields && this.requiredFields[fieldName]) {
 			return '';

package/{types/src → src}/components/boolean/question.d.ts

@@ -7,9 +7,9 @@ export function booleanToYesNoValue(value: any): "yes" | "no";
 export function booleanToYesNoOrNull(value: boolean | null): string | null;
 export class BooleanQuestion extends RadioQuestion {
     /**
-     * @param {import('../../questions/question-props.d.ts').BooleanQuestionParams} params
+     * @param {import('#typedefs/question-props.d.ts').BooleanQuestionParams} params
      */
-    constructor({ title, question, fieldName, url, hint, pageTitle, description, html, validators, interfaceType, options, editable, viewData }: import("../../questions/question-props.d.ts").BooleanQuestionParams);
+    constructor({ title, question, fieldName, url, hint, pageTitle, description, html, validators, interfaceType, options, editable, viewData }: import("#typedefs/question-props.d.ts").BooleanQuestionParams);
     interfaceType: "checkbox" | "radio";
     /**
      * Get the data to save from the request, returns an object of answers

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

@@ -0,0 +1 @@
+{"version":3,"file":"question.d.ts","sourceRoot":"","sources":["question.js"],"names":[],"mappings":"AAEA;;;GAGG;AAMI,sCAHI,MAAM,GAAC,GAAC,GACN,OAAO,CAOnB;AAEM,8DAEN;AAMM,4CAHI,OAAO,GAAC,IAAI,GACV,MAAM,GAAC,IAAI,CAOvB;AAED;IACC;;OAEG;IACH,6IAFW,OAAO,+BAA+B,EAAE,qBAAqB,EAmDvE;IADA,oCAAkC;IAGnC;;;;;OAKG,CACH,mBAJW,OAAO,SAAS,EAAE,OAAO,mBACzB,eAAe,GACb,OAAO,CAAC;QAAE,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;KAAE,CAAC,CAezD;CACD;;0BA5GyB,sBAAsB"}

package/src/components/boolean/question.js

@@ -33,7 +33,7 @@ export const booleanToYesNoOrNull = (value) => {
 
 export class BooleanQuestion extends RadioQuestion {
 	/**
-	 * @param {import('../../questions/question-props.d.ts').BooleanQuestionParams} params
+	 * @param {import('#typedefs/question-props.d.ts').BooleanQuestionParams} params
 	 */
 	constructor({
 		title,

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

@@ -0,0 +1,9 @@
+export class CheckboxQuestion extends OptionsQuestion {
+    /**
+     * @param {import('#typedefs/question-props.d.ts').CheckboxQuestionParams} params
+     */
+    constructor({ ...parentParams }: import("#typedefs/question-props.d.ts").CheckboxQuestionParams);
+}
+export default CheckboxQuestion;
+import OptionsQuestion from '../../questions/options-question.js';
+//# sourceMappingURL=question.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"question.d.ts","sourceRoot":"","sources":["question.js"],"names":[],"mappings":"AAKA;IACC;;OAEG;IACH,iCAFW,OAAO,+BAA+B,EAAE,sBAAsB,EAUxE;CA4CD;;4BA5D2B,qCAAqC"}

package/src/components/checkbox/question.js

@@ -1,80 +1,63 @@
+import escape from 'escape-html';
 import OptionsQuestion from '../../questions/options-question.js';
-import questionUtils from '../utils/question-utils.js';
 
 const defaultOptionJoinString = ',';
 
-/**
- * @typedef ConditionalAnswerObject
- * @type {object}
- * @property {string} value the checkbox answer
- * @property {string} conditional the conditional text input
- */
-
 export class CheckboxQuestion extends OptionsQuestion {
 	/**
-	 * @param {import('../../questions/question-props.d.ts').CheckboxQuestionParams} params
+	 * @param {import('#typedefs/question-props.d.ts').CheckboxQuestionParams} params
 	 */
-	constructor({ title, question, fieldName, url, pageTitle, description, options, validators, viewData }) {
+	constructor({ ...parentParams }) {
 		super({
-			title,
-			question,
+			...parentParams,
 			viewFolder: 'checkbox',
-			fieldName,
-			url,
-			pageTitle,
-			description,
-			options,
-			validators,
-			viewData
+			capitaliseAnswer: false
 		});
 
 		this.optionJoinString = defaultOptionJoinString;
 	}
 
 	/**
-	 * returns the formatted answers values to be used to build task list elements
-	 * @param {string | ConditionalAnswerObject } answer will be a single value string, a comma-separated string representing multiple values (one of which may be a conditional) or a single ConditionalAnswerObject
-	 * @param {import('#journey').Journey} journey
-	 * @param {String} sectionSegment
-	 * @returns {Array.<Object>}
+	 * Formats an answer value for display in the summary.
+	 * Handles object answers with conditional fields.
+	 * - Single value with conditional: { value: 'yes', conditional: { yes: 'details' } }
+	 * - Multiple values with conditionals: { value: 'yes,no', conditional: { yes: 'details1', no: 'details2' } }
+	 *
+	 * @param {unknown} answer - the raw answer value
+	 * @returns {string} the formatted answer for display
 	 */
-	formatAnswerForSummary(sectionSegment, journey, answer) {
-		if (!answer) {
-			return super.formatAnswerForSummary(sectionSegment, journey, answer, false);
+	formatAnswer(answer) {
+		if (answer === null || answer === undefined || answer === '') {
+			return this.notStartedText;
 		}
 
-		// answer is single ConditionalAnswerObject
-		if (answer?.conditional) {
-			const selectedOption = this.options.find((option) => option.value === answer.value);
-
-			const conditionalAnswerText = selectedOption.conditional?.label
-				? `${selectedOption.conditional.label} ${answer.conditional}`
-				: answer.conditional;
-
-			const formattedConditionalText = [selectedOption.text, conditionalAnswerText].join('\n');
-
-			return super.formatAnswerForSummary(sectionSegment, journey, formattedConditionalText, false);
+		// Handle simple string answers (e.g. '1,2')
+		if (typeof answer !== 'object' || answer.value === undefined) {
+			return super.formatAnswer(answer);
 		}
 
-		// answer is a string
-		const answerArray = answer.split(this.optionJoinString);
+		// Handle object answers with conditional fields
+		// TODO DF-51 treat as an array
+		const answerValues = String(answer.value)
+			.split(this.optionJoinString)
+			.map((v) => v.trim());
+		const conditionals = answer.conditional || {};
+
+		const formattedParts = answerValues.map((value) => {
+			const option = this.options.find((opt) => opt.value === value);
+			const optionText = escape(option ? option.text : value);
 
-		const formattedAnswer = this.options
-			.filter((option) => answerArray.includes(option.value))
-			.map((option) => {
-				if (option.conditional) {
-					const conditionalAnswer =
-						journey.response.answers[
-							questionUtils.getConditionalFieldName(this.fieldName, option.conditional.fieldName)
-						];
-					return [option.text, conditionalAnswer].join('\n');
-				}
+			// Check if this option has a conditional answer
+			const conditionalValue = conditionals[value];
+			if (conditionalValue) {
+				const label = option?.conditional?.label ? `${escape(option.conditional.label)} ` : '';
+				return `${optionText}<br>${label}${escape(conditionalValue)}`;
+			}
 
-				return option.text;
-			})
-			.join('\n');
+			return optionText;
+		});
 
-		return super.formatAnswerForSummary(sectionSegment, journey, formattedAnswer, false);
+		return formattedParts.join('<br>');
 	}
 }
 

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

@@ -54,35 +54,178 @@ describe('./src/dynamic-forms/components/checkbox/question.js', () => {
 		assert.deepStrictEqual(question.options, OPTIONS);
 	});
 
-	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');
-	});
+	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 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');
-	});
+		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 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 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 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 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/{types/src → src}/components/date/question.d.ts

@@ -3,9 +3,9 @@
  */
 export class DateQuestion extends Question {
     /**
-     * @param {import('../../questions/question-props.d.ts').DateQuestionParams} params
+     * @param {import('#typedefs/question-props.d.ts').DateQuestionParams} params
      */
-    constructor({ dateFormat, ...parentParams }: import("../../questions/question-props.d.ts").DateQuestionParams);
+    constructor({ dateFormat, ...parentParams }: import("#typedefs/question-props.d.ts").DateQuestionParams);
     dateFormat: string;
     /**
      * Get the data to save from the request, returns an object of answers

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

@@ -0,0 +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;CAWD;;yBAhFwB,6BAA6B"}