@defra/forms-model 3.0.447 → 3.0.449

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,2BAA2B,CAAA;AACzC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,kCAAkC,CAAA;AAChD,cAAc,kCAAkC,CAAA;AAChD,cAAc,sBAAsB,CAAA;AACpC,cAAc,wBAAwB,CAAA;AACtC,cAAc,yBAAyB,CAAA;AAEvC,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,iCAAiC,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,mCAAmC,CAAA;AACjD,cAAc,qCAAqC,CAAA;AACnD,cAAc,2BAA2B,CAAA;AACzC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yCAAyC,CAAA;AACvD,cAAc,kCAAkC,CAAA;AAChD,cAAc,sBAAsB,CAAA;AACpC,cAAc,wBAAwB,CAAA;AACtC,cAAc,yBAAyB,CAAA;AAEvC,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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@defra/forms-model",
-  "version": "3.0.447",
+  "version": "3.0.449",
   "description": "A hapi plugin providing the model for Defra forms",
   "homepage": "https://github.com/DEFRA/forms-designer/tree/main/model#readme",
   "repository": {
@@ -15,7 +15,7 @@
   "types": "dist/types/index.d.ts",
   "scripts": {
     "build": "npm run build:types && npm run build:node && npm run build:schemas",
-    "build:node": "babel --delete-dir-on-start --extensions \".ts\" --ignore \"**/*.test.*\" --copy-files --no-copy-ignored --source-maps --out-dir ./dist/module ./src",
+    "build:node": "babel --delete-dir-on-start --extensions \".ts,.js\" --ignore \"**/*.test.*\" --copy-files --no-copy-ignored --source-maps --out-dir ./dist/module ./src",
     "build:types": "tsc --build --force tsconfig.build.json && tsc-alias --project tsconfig.build.json",
     "build:schemas": "node scripts/generate-schemas.js",
     "test": "jest --color --coverage --verbose",

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

@@ -361,7 +361,7 @@ const repeatSchema = Joi.object<RepeatSchema>()
       .description('Maximum number of repetitions allowed')
   })
 
-const pageRepeatSchema = Joi.object<Repeat>()
+export const pageRepeatSchema = Joi.object<Repeat>()
   .description('Complete configuration for a repeatable page')
   .keys({
     options: repeatOptions

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

@@ -0,0 +1,101 @@
+/**
+ * @implements {QuestionRenderer}
+ */
+export class QuestionRendererStub {
+  /**
+   * @type {jest.Mock<void, [string, QuestionBaseModel]>}
+   */
+  renderMock
+
+  /**
+   * @param {jest.Mock<void, [string, QuestionBaseModel]>} renderMock
+   */
+  constructor(renderMock) {
+    this.renderMock = renderMock
+  }
+
+  /**
+   * @param {string} questionTemplate
+   * @param {QuestionBaseModel} questionBaseModel
+   */
+  render(questionTemplate, questionBaseModel) {
+    this.renderMock(questionTemplate, questionBaseModel)
+  }
+
+  /**
+   * @returns {string}
+   * @param {string} _questionTemplate
+   * @param {RenderContext} _renderContext
+   */
+  static buildHTML(_questionTemplate, _renderContext) {
+    return '**** BUILT HTML ****'
+  }
+}
+
+/**
+ * @implements {ListElements}
+ */
+export class QuestionPreviewElements {
+  /**
+   * @protected
+   */
+  _question = ''
+  /** @protected */
+  _hintText = ''
+  /** @protected */
+  _optional = false
+  /**
+   * @type {string}
+   * @protected
+   */
+  _shortDesc = ''
+  /**
+   *
+   * @type {ListElement[]}
+   * @private
+   */
+  _items = []
+
+  afterInputsHTML = '<div class="govuk-inset-text">No items added yet.</div>'
+
+  /**
+   * @param {BaseSettings} baseSettings
+   */
+  constructor({ question, hintText, optional, shortDesc, items }) {
+    this._question = question
+    this._hintText = hintText
+    this._optional = optional
+    this._shortDesc = shortDesc
+    this._items = items
+  }
+
+  get values() {
+    return {
+      question: this._question,
+      hintText: this._hintText,
+      optional: this._optional,
+      shortDesc: this._shortDesc,
+      items: this._items
+    }
+  }
+
+  /**
+   * @param {string} _value
+   */
+  setPreviewHTML(_value) {
+    // Not implemented for server side render
+  }
+}
+
+export const baseElements = /** @type {BaseSettings} */ ({
+  items: [],
+  optional: false,
+  question: 'Which quest would you like to pick?',
+  hintText: 'Choose one adventure that best suits you.',
+  shortDesc: ''
+})
+
+/**
+ * @import { ListElement } from  '~/src/form/form-editor/types.js'
+ * @import { BaseSettings, ListElements, RenderContext, QuestionBaseModel, QuestionElements, QuestionRenderer } from  '~/src/form/form-editor/preview/types.js'
+ */

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

@@ -5,7 +5,10 @@ import {
   type FormEditorInputCheckAnswersSettings,
   type FormEditorInputPage,
   type FormEditorInputPageSettings,
-  type FormEditorInputQuestion
+  type FormEditorInputQuestion,
+  type GovukField,
+  type GovukFieldQuestionOptional,
+  type GovukStringField
 } from '~/src/form/form-editor/types.js'
 
 export enum QuestionTypeSubGroup {
@@ -227,6 +230,27 @@ export const guidanceTextSchema = Joi.string()
   .trim()
   .description('Guidance text to assist users in completing the page')
 
+export const repeaterSchema = Joi.string()
+  .trim()
+  .optional()
+  .description(
+    'Combined min/max items and question set name for the repeater page'
+  )
+
+export const minItemsSchema = Joi.number()
+  .empty('')
+  .min(1)
+  .description('The minimum number of repeater items')
+
+export const maxItemsSchema = Joi.number()
+  .empty('')
+  .max(25)
+  .description('The maximum number of repeater items')
+
+export const questionSetNameSchema = Joi.string()
+  .trim()
+  .description('The repeater question set name')
+
 export const needDeclarationSchema = Joi.string()
   .trim()
   .required()
@@ -559,3 +583,21 @@ export const formEditorInputPageSettingsSchema =
     .keys(formEditorInputPageSettingsKeys)
     .required()
     .description('Settings for page content and display in the form editor')
+
+export function govukFieldValueIsString(
+  govukField: GovukField
+): govukField is GovukStringField {
+  return ['question', 'hintText', 'shortDescription'].includes(
+    `${govukField.name}`
+  )
+}
+
+export function govukFieldIsQuestionOptional(
+  govukField: GovukField
+): govukField is GovukFieldQuestionOptional {
+  if (govukField.name !== 'questionOptional') {
+    return false
+  }
+  const checkedValue = govukField.items?.[0].checked
+  return typeof checkedValue === 'boolean'
+}

package/src/form/form-editor/preview/date-input.js

@@ -0,0 +1,18 @@
+import { Question } from '~/src/form/form-editor/preview/question.js'
+
+export class DateInputQuestion extends Question {
+  /**
+   * @type {string}
+   * @protected
+   */
+  _questionTemplate = 'date-input.njk'
+
+  get renderInput() {
+    return {
+      id: 'dateInput',
+      name: 'dateInputField',
+      fieldset: this.fieldSet,
+      hint: this.hint
+    }
+  }
+}

package/src/form/form-editor/preview/email-address.js

@@ -0,0 +1,6 @@
+import { Question } from '~/src/form/form-editor/preview/question.js'
+
+export class EmailAddressQuestion extends Question {
+  _questionTemplate = 'emailaddressfield.njk'
+  _fieldName = 'emailAddressField'
+}

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

@@ -0,0 +1,10 @@
+export * from '~/src/form/form-editor/preview/date-input.js'
+export * from '~/src/form/form-editor/preview/email-address.js'
+export * from '~/src/form/form-editor/preview/list.js'
+export * from '~/src/form/form-editor/preview/list-sortable.js'
+export * from '~/src/form/form-editor/preview/phone-number.js'
+export * from '~/src/form/form-editor/preview/question.js'
+export * from '~/src/form/form-editor/preview/radio.js'
+export * from '~/src/form/form-editor/preview/radio-sortable.js'
+export * from '~/src/form/form-editor/preview/short-answer.js'
+export * from '~/src/form/form-editor/preview/uk-address.js'

package/src/form/form-editor/preview/list-sortable.js

@@ -0,0 +1,39 @@
+import { ListQuestion } from '~/src/form/form-editor/preview/list.js'
+
+export class ListSortableQuestion extends ListQuestion {
+  /**
+   * @param {ListElements} listElements
+   * @param {QuestionRenderer} questionRenderer
+   */
+  constructor(listElements, questionRenderer) {
+    super(listElements, questionRenderer)
+    const items = /** @type {ListElement[]} */ (listElements.values.items)
+    this._list = this.createListFromElements(items)
+    this._listElements = listElements
+  }
+
+  /**
+   * @returns {Map<string, ListElement>}
+   */
+  resyncPreviewAfterReorder() {
+    const newList = this._listElements.values.items
+    this._list = this.createListFromElements(newList)
+    this.render()
+    return this._list
+  }
+
+  get listElementObjects() {
+    return Array.from(this._list).map(([, value]) => ({
+      id: value.id,
+      text: value.text,
+      hint: value.hint?.text ? { text: value.hint.text } : undefined,
+      value: value.value
+    }))
+  }
+}
+
+/**
+ * @import {ListElement} from '~/src/form/form-editor/types.js'
+ * @import { QuestionRenderer, HTMLBuilder, ListElements, BaseSettings } from '~/src/form/form-editor/preview/types.js'
+ * @import { SortableEvent, SortableOptions } from 'sortablejs'
+ */

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

@@ -0,0 +1,202 @@
+import { Question } from '~/src/form/form-editor/preview/question.js'
+
+const DefaultListConst = {
+  TextElementId: 'radioText',
+  HintElementId: 'radioHint',
+  Template: 'radios.njk',
+  Input: 'listInput',
+  RenderName: 'listInputField'
+}
+
+/**
+ * @param {ListElement} listElement
+ * @returns {[string, ListElement]}
+ */
+export function listItemMapper(listElement) {
+  return [listElement.id, listElement]
+}
+
+/**
+ *
+ * @param { ListElement[]| undefined } listElements
+ * @returns {Map<string, ListElement>}
+ */
+export function listsElementToMap(listElements) {
+  const entries = listElements ? listElements.map(listItemMapper) : []
+  return new Map(entries)
+}
+
+export class ListQuestion extends Question {
+  /**
+   * @type {string}
+   * @protected
+   */
+  _questionTemplate = DefaultListConst.Template
+  /** @type {ListElements} */
+  _listElements
+  listRenderId = DefaultListConst.Input
+  listRenderName = DefaultListConst.RenderName
+
+  /**
+   * @type {Map<string, ListElement>}
+   * @protected
+   */
+  _list
+
+  /**
+   * @param {ListElements} listElements
+   * @param {QuestionRenderer} questionRenderer
+   */
+  constructor(listElements, questionRenderer) {
+    super(listElements, questionRenderer)
+
+    const items = /** @type {ListElement[]} */ (listElements.values.items)
+    this._list = this.createListFromElements(items)
+    this._listElements = listElements
+  }
+
+  get renderInput() {
+    const afterInputs =
+      /** @type {{ formGroup?: { afterInputs: { html: string } } }} */ (
+        this.list.length
+          ? {}
+          : {
+              formGroup: {
+                afterInputs: {
+                  html: this._listElements.afterInputsHTML
+                }
+              }
+            }
+      )
+
+    return {
+      id: this.listRenderId,
+      name: this.listRenderName,
+      fieldset: this.fieldSet,
+      hint: this.hint,
+      items: this.list,
+      ...afterInputs
+    }
+  }
+
+  /**
+   *
+   * @param {ListElement} listElement
+   */
+  push(listElement) {
+    this._list.set(listElement.id, listElement)
+    this.render()
+  }
+
+  /**
+   * @param {string} key
+   */
+  delete(key) {
+    this._list.delete(key)
+    this.render()
+  }
+
+  /**
+   * @param {ListElement[]} listElements
+   * @returns {Map<string, ListElement>}
+   */
+  createListFromElements(listElements) {
+    this._list = listsElementToMap(listElements)
+    return this._list
+  }
+
+  /**
+   * @returns {ListItemReadonly[]}
+   * @readonly
+   */
+  get list() {
+    const iterator = /** @type {MapIterator<ListElement>} */ (
+      this._list.values()
+    )
+    return Array.from(iterator).map((listItem) => {
+      const hintText =
+        this._highlight === `${listItem.id}-hint` && !listItem.hint?.text.length
+          ? 'Hint text'
+          : (listItem.hint?.text ?? '')
+
+      const hint = {
+        hint: hintText
+          ? {
+              text: hintText,
+              classes: this.getHighlight(listItem.id + '-hint')
+            }
+          : undefined
+      }
+
+      const text = listItem.text.length ? listItem.text : 'Item text'
+
+      return {
+        ...listItem,
+        text,
+        ...hint,
+        label: {
+          text: listItem.text,
+          classes: this.getHighlight(listItem.id + '-label')
+        }
+      }
+    })
+  }
+
+  /**
+   *
+   * @param {string | undefined} id
+   * @param {string} text
+   */
+  updateText(id, text) {
+    if (!id) {
+      return
+    }
+
+    const listItem = this._list.get(id)
+    if (listItem) {
+      listItem.text = text
+      this.render()
+    }
+  }
+
+  /**
+   *
+   * @param {string | undefined} id
+   * @param {string} hint
+   */
+  updateHint(id, hint) {
+    if (!id) {
+      return
+    }
+
+    const listItem = this._list.get(id)
+    if (listItem) {
+      listItem.hint = {
+        ...listItem.hint,
+        text: hint
+      }
+      this.render()
+    }
+  }
+
+  /**
+   * @param {string | undefined} id
+   * @param {string} value
+   */
+  updateValue(id, value) {
+    if (!id) {
+      return
+    }
+
+    const listItem = this._list.get(id)
+    if (listItem) {
+      listItem.value = value
+      this.render()
+    }
+  }
+}
+
+/**
+ * @import { ListElement, ListItemReadonly } from '~/src/form/form-editor/types.js'
+ * @import { ListenerRow, ListElements, QuestionRenderer, HTMLBuilder } from '~/src/form/form-editor/preview/types.js'
+ */

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

@@ -0,0 +1,10 @@
+import { Question } from '~/src/form/form-editor/preview/question.js'
+
+export class PhoneNumberQuestion extends Question {
+  _questionTemplate = 'telephonenumberfield.njk'
+  _fieldName = 'phoneNumberField'
+}
+
+/**
+ * @import { QuestionBaseModel } from '~/src/form/form-editor/preview/question.js'
+ */

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

@@ -0,0 +1,199 @@
+/**
+ * @class Question
+ * @classdesc
+ * A data object that has access to the underlying data via the QuestionElements object interface
+ * and the templating mechanism to render the HTML for the data.
+ *
+ * It does not have access to the DOM, but has access to QuestionElements.setPreviewHTML to update
+ * the HTML.  Question classes should only be responsible for data and rendering as are reused in the
+ * server side.
+ */
+export class Question {
+  /**
+   * @type {string}
+   * @protected
+   */
+  _questionTemplate = 'textfield.njk'
+  /**
+   * @type { string|null }
+   * @protected
+   */
+  _highlight = null
+  /**
+   * @type {string}
+   * @protected
+   */
+  _fieldName = 'inputField'
+  /**
+   * @type {QuestionRenderer}
+   * @protected
+   */
+  _questionRenderer
+
+  /**
+   * @param {QuestionElements} htmlElements
+   * @param {QuestionRenderer} questionRenderer
+   */
+  constructor(htmlElements, questionRenderer) {
+    const { question, hintText, optional } = htmlElements.values
+
+    /**
+     * @type {QuestionElements}
+     * @private
+     */
+    this._htmlElements = htmlElements
+    /**
+     * @type {string}
+     * @private
+     */
+    this._question = question
+    /**
+     * @type {string}
+     * @private
+     */
+    this._hintText = hintText
+    /**
+     * @type {boolean}
+     * @private
+     */
+    this._optional = optional
+    /**
+     *
+     * @type {QuestionRenderer}
+     * @protected
+     */
+    this._questionRenderer = questionRenderer
+  }
+
+  /**
+   * @param {string} element
+   * @returns {string}
+   * @protected
+   */
+  getHighlight(element) {
+    return this._highlight === element ? ' highlight' : ''
+  }
+
+  get titleText() {
+    const optionalText = this._optional ? ' (optional)' : ''
+    return (!this._question ? 'Question' : this._question) + optionalText
+  }
+
+  /**
+   * @protected
+   * @type {DefaultComponent}
+   */
+  get label() {
+    return {
+      text: this.titleText,
+      classes: 'govuk-label--l' + this.getHighlight('question')
+    }
+  }
+
+  /**
+   * @protected
+   * @type {GovukFieldset}
+   */
+  get fieldSet() {
+    return {
+      legend: {
+        text: this.titleText,
+        classes: 'govuk-fieldset__legend--l' + this.getHighlight('question')
+      }
+    }
+  }
+
+  /**
+   * @type {DefaultComponent}
+   * @protected
+   */
+  get hint() {
+    const text =
+      this._highlight === 'hintText' && !this._hintText.length
+        ? 'Hint text'
+        : this._hintText
+
+    return {
+      text,
+      classes: this.getHighlight('hintText')
+    }
+  }
+
+  /**
+   * @type {QuestionBaseModel}
+   */
+  get renderInput() {
+    return {
+      id: this._fieldName,
+      name: this._fieldName,
+      label: this.label,
+      hint: this.hint
+    }
+  }
+
+  render() {
+    this._questionRenderer.render(this._questionTemplate, this.renderInput)
+  }
+
+  /**
+   * @type {string}
+   */
+  get question() {
+    return this._question
+  }
+
+  /**
+   * @param {string} value
+   */
+  set question(value) {
+    this._question = value
+    this.render()
+  }
+
+  /**
+   * @type {string}
+   */
+  get hintText() {
+    return this._hintText
+  }
+
+  /**
+   * @param {string} value
+   */
+  set hintText(value) {
+    this._hintText = value
+    this.render()
+  }
+
+  get optional() {
+    return this._optional
+  }
+
+  /**
+   * @param {boolean} value
+   */
+  set optional(value) {
+    this._optional = value
+    this.render()
+  }
+
+  /**
+   * @type {string | null}
+   */
+  get highlight() {
+    return this._highlight
+  }
+
+  /**
+   * @param {string | null} value
+   */
+  set highlight(value) {
+    this._highlight = value
+    this.render()
+  }
+}
+
+/**
+ * @import { ListenerRow, BaseSettings, QuestionElements, QuestionBaseModel, GovukFieldset, DefaultComponent, QuestionRenderer } from '~/src/form/form-editor/preview/types.js'
+ * @import { ListElement, ListItemReadonly } from '~/src/form/form-editor/types.js'
+ */

package/src/form/form-editor/preview/radio-sortable.js

@@ -0,0 +1,5 @@
+import { ListSortableQuestion } from '~/src/form/form-editor/preview/list-sortable.js'
+
+export class RadioSortableQuestion extends ListSortableQuestion {
+  _questionTemplate = 'radios.njk'
+}

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

@@ -0,0 +1,5 @@
+import { ListQuestion } from '~/src/form/form-editor/preview/list.js'
+
+export class RadioQuestion extends ListQuestion {
+  _questionTemplate = 'radios.njk'
+}