@defra/forms-model 3.0.566 → 3.0.568

package/dist/types/form/form-editor/preview/uk-address.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"uk-address.d.ts","sourceRoot":"","sources":["../../../../../src/form/form-editor/preview/uk-address.js"],"names":[],"mappings":"AAKA;;GAEG;AACH;IACE;;OAEG;IACH,uBAFW,uBAAuB,EAKjC;IADC,wCAA6D;CAahE;AAED;IAOE,4BAA0B;IAe1B;;OAEG;IACH,2BAFW,OAAO,EAKjB;IAVD,yBAKW,OAAO,CAHjB;IAUD;;OAEG;IACH;;;;;;;;;;;;;;MAKC;CACF;sCAGoE,yCAAyC;0CApEpE,4CAA4C;6CAqE1C,2BAA2B;iCAvEtC,qDAAqD"}
+{"version":3,"file":"uk-address.d.ts","sourceRoot":"","sources":["../../../../../src/form/form-editor/preview/uk-address.js"],"names":[],"mappings":"AAKA;;GAEG;AACH;IACE;;OAEG;IACH,uBAFW,uBAAuB,EAKjC;IADC,wCAA6D;CAahE;AAED;IAOE,4BAA0B;IAe1B;;OAEG;IACH,2BAFW,OAAO,EAKjB;IAVD,yBAKW,OAAO,CAHjB;IAUD;;OAEG;IACH;;;;;;;;;;;;;;;;;;;;;MAKC;CACF;sCAGoE,yCAAyC;0CApEpE,4CAA4C;6CAqE1C,2BAA2B;iCAvEtC,qDAAqD"}

package/dist/types/form/form-manager/errors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"errors.d.ts","sourceRoot":"","sources":["../../../../src/form/form-manager/errors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,GAAG,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,KAAK,CAAA;AAE1C,OAAO,EACL,mBAAmB,EAGnB,KAAK,wBAAwB,EAC9B,MAAM,kCAAkC,CAAA;AAEzC;;GAEG;AACH,eAAO,MAAM,WAAW,GACtB,YAAY,mBAAmB,GAAG,mBAAmB,EAAE,MAItC,QAAQ,GAAG,CAAC,WAAW,EAAE,sBAuC3C,CAAA;AAED;;GAEG;AACH,wBAAgB,SAAS,CACvB,eAAe,EAAE,eAAe,GAAG,SAAS,GAC3C,wBAAwB,EAAE,CA0C5B"}
+{"version":3,"file":"errors.d.ts","sourceRoot":"","sources":["../../../../src/form/form-manager/errors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,GAAG,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,KAAK,CAAA;AAE1C,OAAO,EACL,mBAAmB,EAGnB,KAAK,wBAAwB,EAC9B,MAAM,kCAAkC,CAAA;AAEzC;;GAEG;AACH,eAAO,MAAM,WAAW,GACtB,YAAY,mBAAmB,GAAG,mBAAmB,EAAE,MAItC,QAAQ,GAAG,CAAC,WAAW,EAAE,sBAiD3C,CAAA;AAED;;GAEG;AACH,wBAAgB,SAAS,CACvB,eAAe,EAAE,eAAe,GAAG,SAAS,GAC3C,wBAAwB,EAAE,CA8D5B"}

package/dist/types/form/form-manager/types.d.ts

@@ -14,7 +14,8 @@ export interface AddComponentQueryOptions {
 export declare enum FormDefinitionErrorType {
     Unique = "unique",// Unique constraint
     Ref = "ref",// Referential integrity
-    Type = "type"
+    Type = "type",// General schema type error
+    Incompatible = "incompatible"
 }
 export declare enum FormDefinitionError {
     UniquePageId = "unique_page_id",
@@ -37,6 +38,7 @@ export declare enum FormDefinitionError {
     RefConditionItemId = "ref_condition_item_id",
     RefConditionConditionId = "ref_condition_condition_id",
     RefPageComponentList = "ref_page_component_list",
+    IncompatibleConditionComponentType = "incompatible_condition_component_type",
     Other = "other"
 }
 export interface ErrorMatchValue {
@@ -54,6 +56,15 @@ export interface FormDefinitionErrorCauseDetailUnique {
 export interface FormDefinitionErrorCauseDetailRef {
     path: FormDefinitionErrorCauseDetailPath;
 }
+export interface FormDefinitionErrorCauseDetailIncompatible {
+    path: FormDefinitionErrorCauseDetailPath;
+    valueKey?: string;
+    incompatibleObject: {
+        key?: string;
+        value?: unknown;
+    };
+    reason: string;
+}
 export type FormDefinitionErrorCause = {
     id: FormDefinitionError;
     type: FormDefinitionErrorType.Unique;
@@ -69,5 +80,10 @@ export type FormDefinitionErrorCause = {
     type: FormDefinitionErrorType.Type;
     message: string;
     detail: Context | undefined;
+} | {
+    id: FormDefinitionError;
+    type: FormDefinitionErrorType.Incompatible;
+    message: string;
+    detail: FormDefinitionErrorCauseDetailIncompatible;
 };
 //# sourceMappingURL=types.d.ts.map

package/dist/types/form/form-manager/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/form/form-manager/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,KAAK,CAAA;AAElC,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,qCAAqC,CAAA;AACjE,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAE1D,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;IAClC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC1B;AAED,MAAM,WAAW,wBAAwB;IACvC,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAGD,oBAAY,uBAAuB;IACjC,MAAM,WAAW,CAAE,oBAAoB;IACvC,GAAG,QAAQ,CAAE,wBAAwB;IACrC,IAAI,SAAS;CACd;AAGD,oBAAY,mBAAmB;IAC7B,YAAY,mBAAmB;IAC/B,cAAc,qBAAqB;IACnC,qBAAqB,6BAA6B;IAClD,uBAAuB,+BAA+B;IACtD,iBAAiB,wBAAwB;IACzC,kBAAkB,yBAAyB;IAC3C,YAAY,mBAAmB;IAC/B,eAAe,sBAAsB;IACrC,cAAc,qBAAqB;IACnC,iBAAiB,wBAAwB;IACzC,0BAA0B,iCAAiC;IAC3D,gBAAgB,wBAAwB;IACxC,kBAAkB,0BAA0B;IAC5C,mBAAmB,2BAA2B;IAC9C,gBAAgB,uBAAuB;IACvC,uBAAuB,+BAA+B;IACtD,kBAAkB,0BAA0B;IAC5C,kBAAkB,0BAA0B;IAC5C,uBAAuB,+BAA+B;IACtD,oBAAoB,4BAA4B;IAChD,KAAK,UAAU;CAChB;AAED,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,uBAAuB,CAAA;CAC9B;AAED,MAAM,MAAM,oBAAoB,GAAG,MAAM,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAA;AAG/E,eAAO,MAAM,oBAAoB,EAAE,oBAqFlC,CAAA;AAED,MAAM,MAAM,kCAAkC,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;AAEpE,MAAM,WAAW,oCAAoC;IACnD,IAAI,EAAE,kCAAkC,CAAA;IACxC,GAAG,EAAE,MAAM,CAAA;IACX,OAAO,EAAE,MAAM,CAAA;CAChB;AAED,MAAM,WAAW,iCAAiC;IAChD,IAAI,EAAE,kCAAkC,CAAA;CACzC;AAED,MAAM,MAAM,wBAAwB,GAChC;IACE,EAAE,EAAE,mBAAmB,CAAA;IACvB,IAAI,EAAE,uBAAuB,CAAC,MAAM,CAAA;IACpC,OAAO,EAAE,MAAM,CAAA;IACf,MAAM,EAAE,oCAAoC,CAAA;CAC7C,GACD;IACE,EAAE,EAAE,mBAAmB,CAAA;IACvB,IAAI,EAAE,uBAAuB,CAAC,GAAG,CAAA;IACjC,OAAO,EAAE,MAAM,CAAA;IACf,MAAM,EAAE,iCAAiC,CAAA;CAC1C,GACD;IACE,EAAE,EAAE,mBAAmB,CAAA;IACvB,IAAI,EAAE,uBAAuB,CAAC,IAAI,CAAA;IAClC,OAAO,EAAE,MAAM,CAAA;IACf,MAAM,EAAE,OAAO,GAAG,SAAS,CAAA;CAC5B,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/form/form-manager/types.ts"],"names":[],"mappings":"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"}

package/dist/types/index.d.ts

@@ -8,6 +8,7 @@ export * from './components/index.js';
 export * from './conditions/index.js';
 export * from './form/form-definition/index.js';
 export * from './form/form-definition/types.js';
+export * from './form/form-definition/helpers.js';
 export * from './form/form-metadata/index.js';
 export * from './form/form-submission/index.js';
 export * from './form/form-submission/enums.js';

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,kCAAkC,CAAA;AAChD,cAAc,8BAA8B,CAAA;AAC5C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qCAAqC,CAAA;AACnD,cAAc,qCAAqC,CAAA;AACnD,cAAc,mCAAmC,CAAA;AACjD,cAAc,qCAAqC,CAAA;AACnD,cAAc,qCAAqC,CAAA;AACnD,cAAc,2BAA2B,CAAA;AACzC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yCAAyC,CAAA;AACvD,cAAc,kCAAkC,CAAA;AAChD,cAAc,mCAAmC,CAAA;AACjD,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,wBAAwB,CAAA;AACtC,cAAc,yBAAyB,CAAA;AACvC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,gCAAgC,CAAA;AAE9C,mBAAmB,uBAAuB,CAAA;AAC1C,mBAAmB,kCAAkC,CAAA;AACrD,mBAAmB,8BAA8B,CAAA;AACjD,mBAAmB,+BAA+B,CAAA;AAClD,mBAAmB,2BAA2B,CAAA;AAC9C,mBAAmB,2BAA2B,CAAA;AAC9C,mBAAmB,qCAAqC,CAAA;AACxD,mBAAmB,mCAAmC,CAAA;AACtD,mBAAmB,qCAAqC,CAAA;AACxD,mBAAmB,yCAAyC,CAAA;AAC5D,mBAAmB,iCAAiC,CAAA;AACpD,mBAAmB,wCAAwC,CAAA;AAC3D,mBAAmB,gCAAgC,CAAA;AACnD,mBAAmB,uBAAuB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,kCAAkC,CAAA;AAChD,cAAc,8BAA8B,CAAA;AAC5C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qCAAqC,CAAA;AACnD,cAAc,qCAAqC,CAAA;AACnD,cAAc,uCAAuC,CAAA;AACrD,cAAc,mCAAmC,CAAA;AACjD,cAAc,qCAAqC,CAAA;AACnD,cAAc,qCAAqC,CAAA;AACnD,cAAc,2BAA2B,CAAA;AACzC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yCAAyC,CAAA;AACvD,cAAc,kCAAkC,CAAA;AAChD,cAAc,mCAAmC,CAAA;AACjD,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,wBAAwB,CAAA;AACtC,cAAc,yBAAyB,CAAA;AACvC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,gCAAgC,CAAA;AAE9C,mBAAmB,uBAAuB,CAAA;AAC1C,mBAAmB,kCAAkC,CAAA;AACrD,mBAAmB,8BAA8B,CAAA;AACjD,mBAAmB,+BAA+B,CAAA;AAClD,mBAAmB,2BAA2B,CAAA;AAC9C,mBAAmB,2BAA2B,CAAA;AAC9C,mBAAmB,qCAAqC,CAAA;AACxD,mBAAmB,mCAAmC,CAAA;AACtD,mBAAmB,qCAAqC,CAAA;AACxD,mBAAmB,yCAAyC,CAAA;AAC5D,mBAAmB,iCAAiC,CAAA;AACpD,mBAAmB,wCAAwC,CAAA;AAC3D,mBAAmB,gCAAgC,CAAA;AACnD,mBAAmB,uBAAuB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@defra/forms-model",
-  "version": "3.0.566",
+  "version": "3.0.568",
   "description": "A hapi plugin providing the model for Defra forms",
   "homepage": "https://github.com/DEFRA/forms-designer/tree/main/model#readme",
   "types": "dist/types/index.d.ts",

package/src/form/form-definition/helpers.ts

@@ -0,0 +1,17 @@
+import { type FormDefinition } from '~/src/form/form-definition/types.js'
+
+/**
+ * TypeGuard to check if component is a ListComponentsDef
+ * @param { FormDefinition | undefined } definition
+ * @returns { definition is FormDefinition }
+ */
+export function isFormDefinition(
+  definition: FormDefinition | undefined
+): definition is FormDefinition {
+  if (!definition) {
+    return false
+  }
+  return (
+    'name' in definition && 'pages' in definition && 'conditions' in definition
+  )
+}

package/src/form/form-definition/index.ts

@@ -1,8 +1,9 @@
 import JoiDate from '@joi/date'
-import JoiBase, { type LanguageMessages } from 'joi'
+import JoiBase, { type CustomHelpers, type LanguageMessages } from 'joi'
 import { v4 as uuidV4 } from 'uuid'
 
 import { ComponentType } from '~/src/components/enums.js'
+import { isConditionalType } from '~/src/components/helpers.js'
 import {
   type ComponentDef,
   type ContentComponentsDef,
@@ -23,6 +24,7 @@ import {
   type RelativeDateValueData,
   type RelativeDateValueDataV2
 } from '~/src/conditions/types.js'
+import { isFormDefinition } from '~/src/form/form-definition/helpers.js'
 import {
   SchemaVersion,
   type ConditionWrapper,
@@ -42,9 +44,15 @@ import {
   type Section
 } from '~/src/form/form-definition/types.js'
 import { checkErrors } from '~/src/form/form-manager/errors.js'
-import { FormDefinitionError } from '~/src/form/form-manager/types.js'
+import {
+  FormDefinitionError,
+  FormDefinitionErrorType
+} from '~/src/form/form-manager/types.js'
 import { ControllerType } from '~/src/pages/enums.js'
-import { hasComponents } from '~/src/pages/helpers.js'
+import {
+  hasComponents,
+  hasComponentsEvenIfNoNext
+} from '~/src/pages/helpers.js'
 
 const Joi = JoiBase.extend(JoiDate) as JoiBase.Root
 
@@ -316,6 +324,48 @@ export const conditionDataSchemaV2 = Joi.object<ConditionDataV2>()
         'Value to compare the field against, either fixed or relative date'
       )
   })
+  .custom((value: ConditionDataV2, helpers: CustomHelpers<ConditionDataV2>) => {
+    const { componentId } = value
+    const definition = helpers.state.ancestors.find(isFormDefinition) as
+      | FormDefinition
+      | undefined
+
+    // Validation may not have been fired on the full FormDefinition
+    // therefore we are unable to verify at this point, but the 'save'
+    // will eventually validate the full FormDefinition
+    if (!definition) {
+      return value
+    }
+
+    const foundComponents = definition.pages
+      .map((page) =>
+        hasComponentsEvenIfNoNext(page)
+          ? page.components.find((comp) => comp.id === componentId)
+          : undefined
+      )
+      .filter(Boolean)
+
+    const foundComponentHandlesConditions = foundComponents.length
+      ? isConditionalType(foundComponents[0]?.type)
+      : false
+
+    return foundComponentHandlesConditions
+      ? value
+      : helpers.error('custom.incompatible', {
+          incompatibleObject: {
+            key: 'type',
+            value: foundComponents[0]
+          },
+          valueKey: 'componentId',
+          value: componentId,
+          errorType: FormDefinitionErrorType.Incompatible,
+          errorCode: FormDefinitionError.IncompatibleConditionComponentType,
+          reason: 'does not support conditions'
+        })
+  })
+  .messages({
+    'custom.incompatible': 'Incompatible data value'
+  })
 
 const conditionGroupSchema = Joi.object<ConditionGroupData>()
   .description('Group of conditions combined with logical operators')

package/src/form/form-editor/__stubs__/preview.js

@@ -85,6 +85,11 @@ export class QuestionPreviewElements {
    * @protected
    */
   _shortDesc = ''
+  /**
+   * @type {string}
+   * @protected
+   */
+  _userClasses = ''
   /**
    * @type {string}
    * @protected
@@ -111,6 +116,7 @@ export class QuestionPreviewElements {
     hintText,
     optional,
     shortDesc,
+    userClasses,
     usePostcodeLookup,
     items,
     content
@@ -119,6 +125,7 @@ export class QuestionPreviewElements {
     this._hintText = hintText
     this._optional = optional
     this._shortDesc = shortDesc
+    this._userClasses = userClasses
     this._items = items
     this._content = content
     this._usePostcodeLookup = usePostcodeLookup ?? false
@@ -133,6 +140,7 @@ export class QuestionPreviewElements {
       hintText: this._hintText,
       optional: this._optional,
       shortDesc: this._shortDesc,
+      userClasses: this._userClasses,
       usePostcodeLookup: this._usePostcodeLookup,
       items: this._items,
       content: this._content
@@ -204,11 +212,25 @@ export const baseElements = /** @type {BaseSettings} */ ({
   optional: false,
   question: 'Which quest would you like to pick?',
   hintText: 'Choose one adventure that best suits you.',
+  userClasses: '',
   shortDesc: '',
   content: '',
   largeTitle: true
 })
 
+export const numberElements = /** @type {NumberSettings} */ ({
+  items: [],
+  optional: false,
+  question: 'Which quest would you like to pick?',
+  hintText: 'Choose one adventure that best suits you.',
+  userClasses: '',
+  shortDesc: '',
+  content: '',
+  largeTitle: true,
+  prefix: '',
+  suffix: ''
+})
+
 const list1Id = '414d82a3-4cab-416a-bd54-6b86fbd51120'
 const list2Id = '801385a4-81e6-4171-96c3-6c6727d97f22'
 const list3Id = 'e6e3f621-b875-4ca3-a054-cca9149149dd'
@@ -267,8 +289,115 @@ export function buildPreviewShortAnswer(partialBaseElements, renderMock) {
   )
 }
 
+export class NumberPreviewElements {
+  /**
+   * @protected
+   */
+  _question = ''
+  /** @protected */
+  _hintText = ''
+  /** @protected */
+  _optional = false
+  /**
+   * @type {string}
+   * @protected
+   */
+  _shortDesc = ''
+  /**
+   * @type {string}
+   * @protected
+   */
+  _userClasses = ''
+  /**
+   * @type {string}
+   * @protected
+   */
+  _prefix = ''
+  /**
+   * @type {string}
+   * @protected
+   */
+  _suffix = ''
+  /**
+   * @type {string}
+   * @protected
+   */
+  _content = ''
+  /**
+   *
+   * @type {ListElement[]}
+   * @private
+   */
+  _items = []
+  /**
+   * @protected
+   * @type {boolean}
+   */
+  _usePostcodeLookup = false
+  afterInputsHTML = '<div class="govuk-inset-text">No items added yet.</div>'
+
+  /**
+   * @param {NumberSettings} baseSettings
+   */
+  constructor({
+    question,
+    hintText,
+    optional,
+    shortDesc,
+    userClasses,
+    prefix,
+    suffix,
+    usePostcodeLookup,
+    items,
+    content
+  }) {
+    this._question = question
+    this._hintText = hintText
+    this._optional = optional
+    this._shortDesc = shortDesc
+    this._userClasses = userClasses
+    this._prefix = prefix
+    this._suffix = suffix
+    this._items = items
+    this._content = content
+    this._usePostcodeLookup = usePostcodeLookup ?? false
+  }
+
+  /**
+   * @returns {NumberSettings}
+   */
+  get values() {
+    return {
+      question: this._question,
+      hintText: this._hintText,
+      optional: this._optional,
+      shortDesc: this._shortDesc,
+      userClasses: this._userClasses,
+      prefix: this._prefix,
+      suffix: this._suffix,
+      usePostcodeLookup: this._usePostcodeLookup,
+      items: this._items,
+      content: this._content
+    }
+  }
+
+  /**
+   * @param {string} _value
+   */
+  setPreviewHTML(_value) {
+    // Not implemented for server side render
+  }
+
+  /**
+   * @param {HTMLElement} _value
+   */
+  setPreviewDOM(_value) {
+    // Not implemented for server side render
+  }
+}
+
 /**
  * @import { ListElement } from  '~/src/form/form-editor/types.js'
  * @import { PagePreviewPanelMacro } from '~/src/form/form-editor/macros/types.js'
- * @import { BaseSettings, ListElements, RenderContext, QuestionBaseModel, QuestionElements, QuestionRenderer, AutocompleteElements, PageOverviewElements, PageRenderer } from  '~/src/form/form-editor/preview/types.js'
+ * @import { BaseSettings, ListElements, NumberSettings, RenderContext, QuestionBaseModel, QuestionRenderer, AutocompleteElements, PageOverviewElements, PageRenderer } from  '~/src/form/form-editor/preview/types.js'
  */

package/src/form/form-editor/index.ts

@@ -612,7 +612,10 @@ export function govukFieldValueIsString(
     'question',
     'hintText',
     'shortDescription',
-    'autoCompleteOptions'
+    'autoCompleteOptions',
+    'classes',
+    'prefix',
+    'suffix'
   ].includes(`${govukField.name}`)
 }
 

package/src/form/form-editor/macros/types.ts

@@ -55,6 +55,9 @@ export interface QuestionBaseModel {
   formGroup?: FormGroupAfterInput
   type?: 'text' | 'number' | 'boolean'
   classes?: string
+  previewClasses?: string
+  prefix?: { text: string }
+  suffix?: { text: string }
 }
 
 export interface AppPreviewPanelMacro extends AppPreviewPanelTabsMacro {

package/src/form/form-editor/preview/component-elements.js

@@ -26,6 +26,10 @@ export class ComponentElements {
       hintText: '',
       optional: !required,
       shortDesc: '',
+      userClasses:
+        this._component.options && 'classes' in this._component.options
+          ? (this._component.options.classes ?? '')
+          : '',
       items: [],
       content: ''
     }

package/src/form/form-editor/preview/helpers.js

@@ -19,7 +19,10 @@ import {
 import { LongAnswerQuestion } from '~/src/form/form-editor/preview/long-answer.js'
 import { Markdown } from '~/src/form/form-editor/preview/markdown.js'
 import { MonthYearQuestion } from '~/src/form/form-editor/preview/month-year.js'
-import { NumberOnlyQuestion } from '~/src/form/form-editor/preview/number-only.js'
+import {
+  NumberComponentPreviewElements,
+  NumberOnlyQuestion
+} from '~/src/form/form-editor/preview/number-only.js'
 import { PhoneNumberQuestion } from '~/src/form/form-editor/preview/phone-number.js'
 import { QuestionComponentElements } from '~/src/form/form-editor/preview/question.js'
 import { RadioQuestion } from '~/src/form/form-editor/preview/radio.js'
@@ -78,6 +81,8 @@ export function mapComponentToPreviewQuestion(questionRenderer, definition) {
         questionElements = new SelectComponentElements(component, list)
       } else if (component.type === ComponentType.UkAddressField) {
         questionElements = new UkAddressComponentPreviewElements(component)
+      } else if (component.type === ComponentType.NumberField) {
+        questionElements = new NumberComponentPreviewElements(component)
       } else if (hasSelectionFields(component) && hasListField(component)) {
         const list = findDefinitionListFromComponent(component, definition)
         questionElements = new ListComponentElements(component, list)

package/src/form/form-editor/preview/number-only.js

@@ -1,5 +1,34 @@
 import { ComponentType } from '~/src/components/enums.js'
-import { Question } from '~/src/form/form-editor/preview/question.js'
+import {
+  Question,
+  QuestionComponentElements
+} from '~/src/form/form-editor/preview/question.js'
+
+/**
+ * @implements {QuestionElements}
+ */
+export class NumberComponentPreviewElements extends QuestionComponentElements {
+  /**
+   * @param {NumberFieldComponent} component
+   */
+  constructor(component) {
+    super(component)
+    this._prefix = component.options.prefix
+    this._suffix = component.options.suffix
+  }
+
+  /**
+   * @protected
+   * @returns {NumberSettings}
+   */
+  _getValues() {
+    return {
+      ...super._getValues(),
+      prefix: this._prefix ?? '',
+      suffix: this._suffix ?? ''
+    }
+  }
+}
 
 export class NumberOnlyQuestion extends Question {
   /**
@@ -8,12 +37,14 @@ export class NumberOnlyQuestion extends Question {
   componentType = ComponentType.NumberField
 
   /**
-   * @param {QuestionElements} htmlElements
+   * @param {NumberElements} htmlElements
    * @param {QuestionRenderer} questionRenderer
    */
   constructor(htmlElements, questionRenderer) {
     super(htmlElements, questionRenderer)
     this._fieldName = 'numberField'
+    this._prefix = htmlElements.values.prefix
+    this._suffix = htmlElements.values.suffix
   }
 
   /**
@@ -24,8 +55,46 @@ export class NumberOnlyQuestion extends Question {
       type: 'number'
     }
   }
+
+  get prefix() {
+    return this._prefix
+  }
+
+  /**
+   * @param {string} val
+   */
+  set prefix(val) {
+    this._prefix = val
+    this.render()
+  }
+
+  get suffix() {
+    return this._suffix
+  }
+
+  /**
+   * @param {string} val
+   */
+  set suffix(val) {
+    this._suffix = val
+    this.render()
+  }
+
+  /**
+   * @protected
+   */
+  _renderInput() {
+    const prefixObj = this.prefix ? { prefix: { text: this.prefix } } : {}
+    const suffixObj = this.suffix ? { suffix: { text: this.suffix } } : {}
+    return {
+      ...super._renderInput(),
+      ...prefixObj,
+      ...suffixObj
+    }
+  }
 }
 
 /**
- * @import { QuestionElements, QuestionBaseModel, QuestionRenderer } from '~/src/form/form-editor/preview/types.js'
+ * @import { NumberSettings, NumberElements, QuestionBaseModel, QuestionElements, QuestionRenderer } from '~/src/form/form-editor/preview/types.js'
+ * @import { NumberFieldComponent } from '~/src/components/types.js'
  */

package/src/form/form-editor/preview/question.js

@@ -27,7 +27,8 @@ export class QuestionComponentElements extends ComponentElements {
     return {
       ...super._getValues(),
       hintText: this._component.hint ?? '',
-      shortDesc: this._component.shortDescription ?? ''
+      shortDesc: this._component.shortDescription ?? '',
+      userClasses: this._component.options.classes ?? ''
     }
   }
 }
@@ -65,12 +66,17 @@ export class Question extends PreviewComponent {
    */
   constructor(htmlElements, questionRenderer) {
     super(htmlElements, questionRenderer)
-    const { hintText } = htmlElements.values
+    const { hintText, userClasses } = htmlElements.values
     /**
      * @type {string}
      * @private
      */
     this._hintText = hintText
+    /**
+     * @type {string}
+     * @private
+     */
+    this._userClasses = userClasses
   }
 
   /**
@@ -94,7 +100,16 @@ export class Question extends PreviewComponent {
    * @protected
    */
   _renderInput() {
-    return { ...super._renderInput(), label: this.label, hint: this.hint }
+    const renderValues = {
+      ...super._renderInput(),
+      label: this.label,
+      hint: this.hint
+    }
+    return {
+      ...renderValues,
+      classes: this._userClasses,
+      previewClasses: renderValues.classes ?? ''
+    }
   }
 
   /**
@@ -111,6 +126,21 @@ export class Question extends PreviewComponent {
     this._hintText = value
     this.render()
   }
+
+  /**
+   * @type {string}
+   */
+  get userClasses() {
+    return this._userClasses
+  }
+
+  /**
+   * @param {string} value
+   */
+  set userClasses(value) {
+    this._userClasses = value
+    this.render()
+  }
 }
 
 /**

package/src/form/form-editor/preview/types.ts

@@ -20,6 +20,7 @@ export interface BaseSettings {
   hintText: string
   optional: boolean
   shortDesc: string
+  userClasses: string
   items: ListElement[]
   content: string
   attributes?: Record<string, string>
@@ -58,6 +59,15 @@ export interface AutocompleteElements extends QuestionElements {
   autocompleteOptions: string
 }
 
+export interface NumberSettings extends BaseSettings {
+  prefix: string
+  suffix: string
+}
+
+export interface NumberElements extends DomElementsBase {
+  readonly values: NumberSettings
+}
+
 export interface RenderBase {
   render(questionTemplate: string, renderContext: RenderContext): void
 }

package/src/form/form-manager/errors.ts

@@ -50,6 +50,16 @@ export const checkErrors = (
           return
         }
 
+        if (
+          errorDetails.type === FormDefinitionErrorType.Incompatible &&
+          err.code === 'custom.incompatible'
+          // Match any key
+        ) {
+          err.local.errorCode = formError
+          err.local.errorType = FormDefinitionErrorType.Incompatible
+          return
+        }
+
         err.local.errorType = FormDefinitionErrorType.Type
       }
     })
@@ -95,6 +105,26 @@ export function getErrors(
         }
       }
 
+      if (
+        detail.context?.errorType === FormDefinitionErrorType.Incompatible &&
+        detail.context.errorCode
+      ) {
+        return {
+          id: /** @type {FormDefinitionError} */ detail.context.errorCode,
+          type: FormDefinitionErrorType.Incompatible,
+          message: detail.message,
+          detail: {
+            path: detail.path,
+            key: detail.context.key,
+            valueKey: detail.context.valueKey,
+            value: detail.context.value,
+            label: detail.context.label,
+            incompatibleObject: detail.context.incompatibleObject,
+            reason: detail.context.reason
+          }
+        }
+      }
+
       // Catch all others
       return {
         id: FormDefinitionError.Other,