@defra/forms-model 3.0.448 → 3.0.449

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'
+}

package/src/form/form-editor/preview/short-answer.js

@@ -0,0 +1,3 @@
+import { Question } from '~/src/form/form-editor/preview/question.js'
+
+export class ShortAnswerQuestion extends Question {}

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

@@ -0,0 +1,60 @@
+import {
+  type ListElement,
+  type ListItemReadonly
+} from '~/src/form/form-editor/types.js'
+
+export interface BaseSettings {
+  question: string
+  hintText: string
+  optional: boolean
+  shortDesc: string
+  items: ListElement[]
+}
+
+export interface DefaultComponent {
+  id?: string
+  text: string
+  classes: string
+}
+
+export interface GovukFieldset {
+  legend: DefaultComponent
+}
+
+export interface QuestionBaseModel {
+  id?: string
+  name?: string
+  label?: DefaultComponent
+  hint?: DefaultComponent
+  fieldset?: GovukFieldset
+  readonly items?: ListItemReadonly[]
+  text?: string
+  formGroup?: { afterInputs: { html: string } }
+}
+
+export type ListenerRow = [
+  HTMLInputElement | null,
+  (target: HTMLInputElement, e: Event) => void,
+  keyof HTMLElementEventMap
+]
+
+export interface QuestionElements {
+  readonly values: BaseSettings
+  setPreviewHTML(value: string): void
+}
+
+export interface RenderContext {
+  model: QuestionBaseModel
+}
+
+export interface HTMLBuilder {
+  buildHTML(questionTemplate: string, renderContext: RenderContext): string
+}
+
+export interface QuestionRenderer {
+  render(questionTemplate: string, questionBaseModel: QuestionBaseModel): void
+}
+
+export interface ListElements extends QuestionElements {
+  afterInputsHTML: string
+}

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

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

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

@@ -380,6 +380,12 @@ export interface QuestionSessionState {
   lastMoveDirection?: string
 }
 
+export interface GovukFieldItem {
+  text?: string
+  value?: string
+  checked?: boolean
+}
+
 export interface GovukField {
   id?: string
   name?: string
@@ -396,12 +402,25 @@ export interface GovukField {
     isPageHeading?: boolean
   }
   hint?: { text?: string; html?: string; classes?: string }
-  items?: { text?: string; value?: string; checked?: boolean }[]
+  items?: GovukFieldItem[]
   rows?: number
   type?: string
   customTemplate?: string
 }
 
+export type GovukFieldQuestionOptional = Omit<GovukField, 'name' | 'items'> & {
+  name: 'questionOptional'
+  items: [
+    {
+      text?: string
+      value?: string
+      checked: boolean
+    }
+  ]
+}
+
+export type GovukStringField = Omit<GovukField, 'value'> & { value: string }
+
 export interface FormEditorGovukField {
   question?: GovukField
   hintText?: GovukField

package/src/index.ts

@@ -12,6 +12,7 @@ export * from '~/src/form/form-metadata/index.js'
 export * from '~/src/form/form-submission/index.js'
 export * from '~/src/form/utils/index.js'
 export * from '~/src/form/form-editor/index.js'
+export * from '~/src/form/form-editor/preview/index.js'
 export * from '~/src/form/form-manager/types.js'
 export * from '~/src/pages/index.js'
 export * from '~/src/utils/helpers.js'
@@ -26,4 +27,5 @@ export type * from '~/src/conditions/types.js'
 export type * from '~/src/form/form-definition/types.js'
 export type * from '~/src/form/form-metadata/types.js'
 export type * from '~/src/form/form-submission/types.js'
+export type * from '~/src/form/form-editor/preview/types.js'
 export type * from '~/src/form/form-editor/types.js'