@planning-inspectorate/dynamic-forms 3.15.3 → 3.15.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planning-inspectorate/dynamic-forms",
-  "version": "3.15.3",
+  "version": "3.15.5",
   "description": "This package is for building GDS forms using a configuration-based approach.",
   "main": "./src/index.js",
   "type": "module",

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

@@ -1,4 +1,4 @@
-import { Section } from '#src/section.js';
+import { Section } from '../../section.js';
 
 /**
  * Extends the Section class for extra logic around managing lists.

package/src/components/multi-field-input/index.njk

@@ -56,6 +56,8 @@
                                 text: inputField.hint
                             },
                             classes: inputField.classes or "govuk-input-!-width-three-quarters",
+                            inputmode: inputField.inputmode,
+                            pattern: inputField.pattern,
                             attributes: inputField.attributes
                         }) }}
                     {% endfor %}

package/src/questions/question-props.d.ts

@@ -77,6 +77,8 @@ interface InputField {
 	prefix?: Affix; // used to add a prefix to the field
 	hint?: string;
 	classes?: string;
+	inputmode?: 'decimal' | 'numeric';
+	pattern?: string; // Used for backwards-compatibility for older iOS devices in numeric input fields
 }
 
 /*

package/src/section.js

@@ -65,7 +65,7 @@ export class Section {
 	 * Add a condition to all questions in this section
 	 *
 	 * @param {QuestionCondition} shouldIncludeSection
-	 * @returns {Section}
+	 * @returns {this}
 	 */
 	withSectionCondition(shouldIncludeSection) {
 		if (this.questions.length > 0) {
@@ -134,7 +134,7 @@ export class Section {
 	/**
 	 * Fluent API method for attaching conditions to the previously added question
 	 * @param {QuestionCondition} shouldIncludeQuestion
-	 * @returns {Section}
+	 * @returns {this}
 	 */
 	withCondition(shouldIncludeQuestion) {
 		if (this.#conditionAdded) {
@@ -175,7 +175,7 @@ export class Section {
 	 * Fluent API method for starting a multi question condition
 	 * @param {string} conditionName
 	 * @param {QuestionCondition} shouldIncludeQuestion
-	 * @returns {Section}
+	 * @returns {this}
 	 */
 	startMultiQuestionCondition(conditionName, shouldIncludeQuestion) {
 		if (this.#multiQuestionConditions[conditionName]) {
@@ -188,7 +188,7 @@ export class Section {
 	/**
 	 * Fluent API method for ending a multi question condition
 	 * @param {string} conditionName
-	 * @returns {Section}
+	 * @returns {this}
 	 */
 	endMultiQuestionCondition(conditionName) {
 		if (!this.#multiQuestionConditions[conditionName]) {

package/test/questions.js

@@ -125,8 +125,8 @@ export const questionProps = {
 		url: 'companions',
 		label: 'Companions',
 		inputFields: [
-			{ fieldName: 'name', label: 'Name', type: COMPONENT_TYPES.TEXT_ENTRY },
-			{ fieldName: 'age', label: 'Age', type: COMPONENT_TYPES.NUMBER }
+			{ fieldName: 'name', label: 'Name' },
+			{ fieldName: 'age', label: 'Age', inputmode: 'numeric', pattern: '[0-9]*' }
 		]
 	},
 	nights: {

package/test/snapshots/companions.html

@@ -22,7 +22,7 @@
   <label class="govuk-label govuk-label" for="age">
     Age
   </label>
-  <input class="govuk-input govuk-input-!-width-three-quarters" id="age" name="age" type="text">
+  <input class="govuk-input govuk-input-!-width-three-quarters" id="age" name="age" type="text" pattern="[0-9]*" inputmode="numeric">
 </div>
 
 

package/test/utils/question-test-utils.js

@@ -80,6 +80,18 @@ export async function createAppWithQuestions(ctx, options) {
 	return server;
 }
 
+/**
+ * Returns a mock value for an input field based on its properties.
+ * @param {Object} field - An input field descriptor (not a full question)
+ * @returns {string|number}
+ */
+function mockInputFieldValue(field) {
+	if (field.inputmode === 'numeric' || field.pattern === '[0-9]*') {
+		return 1;
+	}
+	return 'test';
+}
+
 /**
  * Build a valid payload for a question.
  * @param {import('../src/questions/question-props.js').QuestionProps} q
@@ -128,7 +140,7 @@ export function mockAnswerBody(q) {
 		case COMPONENT_TYPES.MULTI_FIELD_INPUT: {
 			const res = {};
 			for (const field of q.inputFields) {
-				res[field.fieldName] = mockAnswer(field);
+				res[field.fieldName] = mockInputFieldValue(field);
 			}
 			return res;
 		}
@@ -191,7 +203,7 @@ export function mockAnswer(q) {
 			if (q.inputFields) {
 				let res = '';
 				for (const field of q.inputFields) {
-					res += mockAnswer(field) + '<br>';
+					res += mockInputFieldValue(field) + '<br>';
 				}
 				return res;
 			}

package/types/src/components/manage-list/manage-list-section.d.ts

@@ -19,5 +19,5 @@ export class ManageListSection extends Section {
      */
     addQuestion(question: import("../../questions/question.js").Question, manageListSection?: import("./manage-list-section.js").ManageListSection): this;
 }
-import { Section } from '#src/section.js';
+import { Section } from '../../section.js';
 //# sourceMappingURL=manage-list-section.d.ts.map

package/types/src/components/manage-list/manage-list-section.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"manage-list-section.d.ts","sourceRoot":"","sources":["../../../../src/components/manage-list/manage-list-section.js"],"names":[],"mappings":"AAEA;;GAEG;AACH;IACC,cAEC;IAED;;;;;;OAMG;IACH,2BAFa,OAAO,CAInB;IAED;;;;;OAKG;IACH,sBAJW,OAAO,6BAA6B,EAAE,QAAQ,sBAC9C,OAAO,0BAA0B,EAAE,iBAAiB,GAClD,IAAI,CAYhB;CACD;wBAtCuB,iBAAiB"}
+{"version":3,"file":"manage-list-section.d.ts","sourceRoot":"","sources":["../../../../src/components/manage-list/manage-list-section.js"],"names":[],"mappings":"AAEA;;GAEG;AACH;IACC,cAEC;IAED;;;;;;OAMG;IACH,2BAFa,OAAO,CAInB;IAED;;;;;OAKG;IACH,sBAJW,OAAO,6BAA6B,EAAE,QAAQ,sBAC9C,OAAO,0BAA0B,EAAE,iBAAiB,GAClD,IAAI,CAYhB;CACD;wBAtCuB,kBAAkB"}

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

@@ -26,6 +26,8 @@ export class MultiFieldInputQuestion extends Question {
         prefix?: import("../../questions/question-props.d.ts").Affix;
         hint?: string;
         classes?: string;
+        inputmode?: "decimal" | "numeric";
+        pattern?: string;
     }[];
     /**
      * returns the formatted answers values to be used to build task list elements

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

@@ -1 +1 @@
-{"version":3,"file":"question.d.ts","sourceRoot":"","sources":["../../../../src/components/multi-field-input/question.js"],"names":[],"mappings":"AAIA;;;;;;GAMG;AAEH;;GAEG;AACH;IACC;;OAEG;IACH,8CAFW,OAAO,qCAAqC,EAAE,6BAA6B,EAarF;IAJC,wEAA8B;IAchC;;;;;;;;;;;;QAOC;IAsBD;;;;;;;;;;;;;OAaG;IACH,wDAZW,OAAO,GAEL,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;;gCAvHY,OAAO,WAAW,EAAE,iBAAiB;sBACrC,OAAO,UAAU,EAAE,OAAO;8BAC1B,OAAO,mBAAmB,EAAE,eAAe;;;yBAP/B,WAAW"}
+{"version":3,"file":"question.d.ts","sourceRoot":"","sources":["../../../../src/components/multi-field-input/question.js"],"names":[],"mappings":"AAIA;;;;;;GAMG;AAEH;;GAEG;AACH;IACC;;OAEG;IACH,8CAFW,OAAO,qCAAqC,EAAE,6BAA6B,EAarF;IAJC,wEAA8B;IAchC;;;;;;;;;;;;;;QAOC;IAsBD;;;;;;;;;;;;;OAaG;IACH,wDAZW,OAAO,GAEL,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;;gCAvHY,OAAO,WAAW,EAAE,iBAAiB;sBACrC,OAAO,UAAU,EAAE,OAAO;8BAC1B,OAAO,mBAAmB,EAAE,eAAe;;;yBAP/B,WAAW"}

package/types/src/questions/question-props.d.ts

@@ -77,6 +77,8 @@ interface InputField {
 	prefix?: Affix; // used to add a prefix to the field
 	hint?: string;
 	classes?: string;
+	inputmode?: 'decimal' | 'numeric';
+	pattern?: string; // Used for backwards-compatibility for older iOS devices in numeric input fields
 }
 
 /*

package/types/src/section.d.ts

@@ -38,9 +38,9 @@ export class Section {
      * Add a condition to all questions in this section
      *
      * @param {QuestionCondition} shouldIncludeSection
-     * @returns {Section}
+     * @returns {this}
      */
-    withSectionCondition(shouldIncludeSection: QuestionCondition): Section;
+    withSectionCondition(shouldIncludeSection: QuestionCondition): this;
     /**
      * Fluent API method for adding questions
      * @param {import('./questions/question.js').Question} question
@@ -51,23 +51,23 @@ export class Section {
     /**
      * Fluent API method for attaching conditions to the previously added question
      * @param {QuestionCondition} shouldIncludeQuestion
-     * @returns {Section}
+     * @returns {this}
      */
-    withCondition(shouldIncludeQuestion: QuestionCondition): Section;
+    withCondition(shouldIncludeQuestion: QuestionCondition): this;
     withRequiredCondition(isQuestionMandatory: any, requiredFieldErrorMsg: any): this;
     /**
      * Fluent API method for starting a multi question condition
      * @param {string} conditionName
      * @param {QuestionCondition} shouldIncludeQuestion
-     * @returns {Section}
+     * @returns {this}
      */
-    startMultiQuestionCondition(conditionName: string, shouldIncludeQuestion: QuestionCondition): Section;
+    startMultiQuestionCondition(conditionName: string, shouldIncludeQuestion: QuestionCondition): this;
     /**
      * Fluent API method for ending a multi question condition
      * @param {string} conditionName
-     * @returns {Section}
+     * @returns {this}
      */
-    endMultiQuestionCondition(conditionName: string): Section;
+    endMultiQuestionCondition(conditionName: string): this;
     /**
      * Get the next question in this section given a questionParam (question fieldName)
      * @param {import('./section-types.d.ts').GetNextQuestionParams} params

package/types/src/section.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"section.d.ts","sourceRoot":"","sources":["../../src/section.js"],"names":[],"mappings":"AASA;;;;GAIG;AACH,6BAFU,MAAM,CAEuC;AAEvD;;;GAGG;AACH;IAgNC;;;;;OAKG;IACH,8FAHW,OAAO,sBAAsB,EAAE,2BAA2B,GACxD,QAAQ,GAAC,MAAM,GAAC,IAAI,CAoBhC;IAvMD;;;;OAIG;IACH,kBAHW,MAAM,WACN,MAAM,EAKhB;IAxCD;;OAEG;IACH,MAFU,MAAM,CAEX;IAEL;;OAEG;IACH,SAFU,MAAM,CAER;IAER;;OAEG;IACH,WAFU,KAAK,CAAC,QAAQ,CAAC,CAEV;IA6Bf;;;;;OAKG;IACH,2CAHW,iBAAiB,GACf,OAAO,CAcnB;IAED;;;;;OAKG;IACH,sBAJW,OAAO,yBAAyB,EAAE,QAAQ,sBAC1C,OAAO,iDAAiD,EAAE,iBAAiB,GACzE,IAAI,CAgBhB;IA8BD;;;;OAIG;IACH,qCAHW,iBAAiB,GACf,OAAO,CAanB;IAED,kFAoBC;IAED;;;;;OAKG;IACH,2CAJW,MAAM,yBACN,iBAAiB,GACf,OAAO,CAQnB;IAED;;;;OAIG;IACH,yCAHW,MAAM,GACJ,OAAO,CAQnB;IAED;;;;OAIG;IACH,wBAHW,OAAO,sBAAsB,EAAE,qBAAqB,GAClD,QAAQ,GAAC,MAAM,GAAC,IAAI,CAuBhC;IA4BD;;;;OAIG;IACH,2BAHW,eAAe,GACb,aAAa,CAoDzB;IAED;;;;OAIG;IACH,4BAHW,eAAe,GACb,OAAO,CAInB;;CAKD;6BAOS,aAAa;AALvB;;GAEG;AAEH;;GAEG;AACH;;;;GAIG;;;gCA7UU,CAAC,CAAC,QAAQ,EAAE,eAAe,KAAK,OAAO,CAAC;4BAmUxC,MAAM"}
+{"version":3,"file":"section.d.ts","sourceRoot":"","sources":["../../src/section.js"],"names":[],"mappings":"AASA;;;;GAIG;AACH,6BAFU,MAAM,CAEuC;AAEvD;;;GAGG;AACH;IAgNC;;;;;OAKG;IACH,8FAHW,OAAO,sBAAsB,EAAE,2BAA2B,GACxD,QAAQ,GAAC,MAAM,GAAC,IAAI,CAoBhC;IAvMD;;;;OAIG;IACH,kBAHW,MAAM,WACN,MAAM,EAKhB;IAxCD;;OAEG;IACH,MAFU,MAAM,CAEX;IAEL;;OAEG;IACH,SAFU,MAAM,CAER;IAER;;OAEG;IACH,WAFU,KAAK,CAAC,QAAQ,CAAC,CAEV;IA6Bf;;;;;OAKG;IACH,2CAHW,iBAAiB,GACf,IAAI,CAchB;IAED;;;;;OAKG;IACH,sBAJW,OAAO,yBAAyB,EAAE,QAAQ,sBAC1C,OAAO,iDAAiD,EAAE,iBAAiB,GACzE,IAAI,CAgBhB;IA8BD;;;;OAIG;IACH,qCAHW,iBAAiB,GACf,IAAI,CAahB;IAED,kFAoBC;IAED;;;;;OAKG;IACH,2CAJW,MAAM,yBACN,iBAAiB,GACf,IAAI,CAQhB;IAED;;;;OAIG;IACH,yCAHW,MAAM,GACJ,IAAI,CAQhB;IAED;;;;OAIG;IACH,wBAHW,OAAO,sBAAsB,EAAE,qBAAqB,GAClD,QAAQ,GAAC,MAAM,GAAC,IAAI,CAuBhC;IA4BD;;;;OAIG;IACH,2BAHW,eAAe,GACb,aAAa,CAoDzB;IAED;;;;OAIG;IACH,4BAHW,eAAe,GACb,OAAO,CAInB;;CAKD;6BAOS,aAAa;AALvB;;GAEG;AAEH;;GAEG;AACH;;;;GAIG;;;gCA7UU,CAAC,CAAC,QAAQ,EAAE,eAAe,KAAK,OAAO,CAAC;4BAmUxC,MAAM"}