@defra/forms-model 3.0.580 → 3.0.581

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

@@ -14,7 +14,15 @@ import {
   DeclarationComponentPreviewElements,
   DeclarationQuestion
 } from '~/src/form/form-editor/preview/declaration.js'
+import {
+  EastingNorthingComponentPreviewElements,
+  EastingNorthingQuestion
+} from '~/src/form/form-editor/preview/easting-northing.js'
 import { EmailAddressQuestion } from '~/src/form/form-editor/preview/email-address.js'
+import {
+  LatLongComponentPreviewElements,
+  LatLongQuestion
+} from '~/src/form/form-editor/preview/lat-long.js'
 import {
   ListComponentElements,
   ListQuestion,
@@ -23,10 +31,18 @@ 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 {
+  NationalGridComponentPreviewElements,
+  NationalGridQuestion
+} from '~/src/form/form-editor/preview/national-grid.js'
 import {
   NumberComponentPreviewElements,
   NumberOnlyQuestion
 } from '~/src/form/form-editor/preview/number-only.js'
+import {
+  OsGridRefComponentPreviewElements,
+  OsGridRefQuestion
+} from '~/src/form/form-editor/preview/os-grid-ref.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'
@@ -63,10 +79,10 @@ const InputFieldComponentDictionary = {
   [ComponentType.YesNoField]: YesNoQuestion,
   [ComponentType.DeclarationField]: DeclarationQuestion,
   [ComponentType.FileUploadField]: SupportingEvidenceQuestion,
-  [ComponentType.EastingNorthingField]: ShortAnswerQuestion,
-  [ComponentType.OsGridRefField]: ShortAnswerQuestion,
-  [ComponentType.NationalGridFieldNumberField]: ShortAnswerQuestion,
-  [ComponentType.LatLongField]: ShortAnswerQuestion
+  [ComponentType.EastingNorthingField]: EastingNorthingQuestion,
+  [ComponentType.OsGridRefField]: OsGridRefQuestion,
+  [ComponentType.NationalGridFieldNumberField]: NationalGridQuestion,
+  [ComponentType.LatLongField]: LatLongQuestion
 }
 
 /**
@@ -102,6 +118,25 @@ const ComponentToPreviewQuestion = {
   [ComponentType.YesNoField]: (component, _definition) => {
     const componentCoerced = /** @type {YesNoFieldComponent} */ (component)
     return new QuestionComponentElements(componentCoerced)
+  },
+  [ComponentType.EastingNorthingField]: (component, _definition) => {
+    const componentCoerced = /** @type {EastingNorthingFieldComponent} */ (
+      component
+    )
+    return new EastingNorthingComponentPreviewElements(componentCoerced)
+  },
+  [ComponentType.OsGridRefField]: (component, _definition) => {
+    const componentCoerced = /** @type {OsGridRefFieldComponent} */ (component)
+    return new OsGridRefComponentPreviewElements(componentCoerced)
+  },
+  [ComponentType.NationalGridFieldNumberField]: (component, _definition) => {
+    const componentCoerced =
+      /** @type {NationalGridFieldNumberFieldComponent} */ (component)
+    return new NationalGridComponentPreviewElements(componentCoerced)
+  },
+  [ComponentType.LatLongField]: (component, _definition) => {
+    const componentCoerced = /** @type {LatLongFieldComponent} */ (component)
+    return new LatLongComponentPreviewElements(componentCoerced)
   }
 }
 
@@ -150,5 +185,5 @@ export function mapComponentToPreviewQuestion(questionRenderer, definition) {
  * @import { Question } from '~/src/form/form-editor/preview/question.js'
  * @import { PreviewComponent } from '~/src/form/form-editor/preview/preview.js'
  * @import { FormDefinition } from '~/src/form/form-definition/types.js'
- * @import { AutocompleteFieldComponent, ComponentDef, DeclarationFieldComponent, NumberFieldComponent, SelectFieldComponent, UkAddressFieldComponent, YesNoFieldComponent } from '~/src/components/types.js'
+ * @import { AutocompleteFieldComponent, ComponentDef, DeclarationFieldComponent, EastingNorthingFieldComponent, LatLongFieldComponent, NationalGridFieldNumberFieldComponent, NumberFieldComponent, OsGridRefFieldComponent, SelectFieldComponent, UkAddressFieldComponent, YesNoFieldComponent } from '~/src/components/types.js'
  */

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

@@ -3,12 +3,16 @@ export * from '~/src/form/form-editor/preview/checkbox.js'
 export * from '~/src/form/form-editor/preview/checkbox-sortable.js'
 export * from '~/src/form/form-editor/preview/date-input.js'
 export * from '~/src/form/form-editor/preview/declaration.js'
+export * from '~/src/form/form-editor/preview/easting-northing.js'
 export * from '~/src/form/form-editor/preview/email-address.js'
+export * from '~/src/form/form-editor/preview/lat-long.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/markdown.js'
 export * from '~/src/form/form-editor/preview/month-year.js'
+export * from '~/src/form/form-editor/preview/national-grid.js'
 export * from '~/src/form/form-editor/preview/number-only.js'
+export * from '~/src/form/form-editor/preview/os-grid-ref.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'

package/src/form/form-editor/preview/lat-long.js

@@ -0,0 +1,55 @@
+import { ComponentType } from '~/src/components/enums.js'
+import {
+  createFieldClasses,
+  createLocationFieldModel
+} from '~/src/form/form-editor/preview/location-helpers.js'
+import {
+  LocationQuestion,
+  LocationQuestionComponentPreviewElements
+} from '~/src/form/form-editor/preview/location-question-base.js'
+import { PreviewComponent } from '~/src/form/form-editor/preview/preview.js'
+
+/**
+ * @implements {QuestionElements}
+ */
+export class LatLongComponentPreviewElements extends LocationQuestionComponentPreviewElements {}
+
+export class LatLongQuestion extends LocationQuestion {
+  /**
+   * @type {ComponentType}
+   */
+  componentType = ComponentType.LatLongField
+  /**
+   * @type {string}
+   * @protected
+   */
+  _questionTemplate = PreviewComponent.PATH + 'latlongfield.njk'
+  _fieldName = 'LatLongField'
+
+  /**
+   * @protected
+   * @returns {LatLongModel}
+   */
+  _renderInput() {
+    const baseModel = super._renderInput()
+    const locationModel = createLocationFieldModel(
+      baseModel,
+      /** @type {LocationElements} */ (this._htmlElements),
+      this._highlight,
+      this._instructionText,
+      this.titleText
+    )
+
+    return {
+      ...locationModel,
+      latitude: createFieldClasses('latitude', this._highlight),
+      longitude: createFieldClasses('longitude', this._highlight)
+    }
+  }
+}
+
+/**
+ * @import { LocationSettings, LocationElements, QuestionElements, QuestionRenderer } from '~/src/form/form-editor/preview/types.js'
+ * @import { LatLongModel } from '~/src/form/form-editor/macros/types.js'
+ * @import { LatLongFieldComponent } from '~/src/components/types.js'
+ */

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

@@ -0,0 +1,49 @@
+import { HIGHLIGHT_CLASS } from '~/src/form/form-editor/preview/constants.js'
+
+/**
+ * Creates the standard location field model with common properties
+ * @param {QuestionBaseModel} baseModel - The base model from super._renderInput()
+ * @param {LocationElements} htmlElements - The HTML elements containing values
+ * @param {string | null} highlight - The currently highlighted element
+ * @param {string} instructionText - The instruction text to display
+ * @param {string} titleText - The title text including optional suffix
+ * @returns {LocationFieldModel}
+ */
+export function createLocationFieldModel(
+  baseModel,
+  htmlElements,
+  highlight,
+  instructionText,
+  titleText
+) {
+  return {
+    ...baseModel,
+    userClasses: htmlElements.values.userClasses,
+    fieldset: {
+      legend: {
+        text: titleText,
+        classes: highlight === 'question' ? HIGHLIGHT_CLASS : ''
+      }
+    },
+    instructionText,
+    details: {
+      classes: highlight === 'instructionText' ? HIGHLIGHT_CLASS : ''
+    }
+  }
+}
+
+/**
+ * Creates field classes with highlight if needed
+ * @param {string} fieldName - The name of the field
+ * @param {string | null} highlight - The currently highlighted element
+ * @returns {{classes: string}}
+ */
+export function createFieldClasses(fieldName, highlight) {
+  return {
+    classes: highlight === fieldName ? HIGHLIGHT_CLASS : ''
+  }
+}
+
+/**
+ * @import { LocationElements, QuestionBaseModel, LocationFieldModel } from '~/src/form/form-editor/preview/types.js'
+ */

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

@@ -0,0 +1,65 @@
+import {
+  Question,
+  QuestionComponentElements
+} from '~/src/form/form-editor/preview/question.js'
+
+/**
+ * Base class for location question component preview elements with instruction text support
+ * @implements {QuestionElements}
+ */
+export class LocationQuestionComponentPreviewElements extends QuestionComponentElements {
+  /**
+   * @param {any} component - Component with options.instructionText
+   */
+  constructor(component) {
+    super(component)
+    this._instructionText = component.options.instructionText ?? ''
+  }
+
+  /**
+   * @protected
+   * @returns {LocationSettings}
+   */
+  _getValues() {
+    return {
+      ...super._getValues(),
+      instructionText: this._instructionText
+    }
+  }
+}
+
+/**
+ * Base class for location questions with instruction text support
+ */
+export class LocationQuestion extends Question {
+  /**
+   * @type {string}
+   * @protected
+   */
+  _instructionText = ''
+
+  /**
+   * @param {LocationElements} htmlElements
+   * @param {QuestionRenderer} questionRenderer
+   */
+  constructor(htmlElements, questionRenderer) {
+    super(htmlElements, questionRenderer)
+    this._instructionText = htmlElements.values.instructionText
+  }
+
+  get instructionText() {
+    return this._instructionText
+  }
+
+  /**
+   * @param {string} val
+   */
+  set instructionText(val) {
+    this._instructionText = val
+    this.render()
+  }
+}
+
+/**
+ * @import { LocationSettings, LocationElements, QuestionElements, QuestionRenderer } from '~/src/form/form-editor/preview/types.js'
+ */

package/src/form/form-editor/preview/national-grid.js

@@ -0,0 +1,56 @@
+import { ComponentType } from '~/src/components/enums.js'
+import { HIGHLIGHT_CLASS } from '~/src/form/form-editor/preview/constants.js'
+import { createLocationFieldModel } from '~/src/form/form-editor/preview/location-helpers.js'
+import {
+  LocationQuestion,
+  LocationQuestionComponentPreviewElements
+} from '~/src/form/form-editor/preview/location-question-base.js'
+import { PreviewComponent } from '~/src/form/form-editor/preview/preview.js'
+
+/**
+ * @implements {QuestionElements}
+ */
+export class NationalGridComponentPreviewElements extends LocationQuestionComponentPreviewElements {}
+
+export class NationalGridQuestion extends LocationQuestion {
+  /**
+   * @type {ComponentType}
+   */
+  componentType = ComponentType.NationalGridFieldNumberField
+  /**
+   * @type {string}
+   * @protected
+   */
+  _questionTemplate = PreviewComponent.PATH + 'nationalgridfieldnumberfield.njk'
+  _fieldName = 'NationalGridFieldNumberField'
+
+  /**
+   * @protected
+   * @returns {NationalGridModel}
+   */
+  _renderInput() {
+    const baseModel = super._renderInput()
+    const locationModel = createLocationFieldModel(
+      baseModel,
+      /** @type {LocationElements} */ (this._htmlElements),
+      this._highlight,
+      this._instructionText,
+      this.titleText
+    )
+
+    return {
+      ...locationModel,
+      label: {
+        text: this.titleText,
+        classes: this._highlight === 'question' ? HIGHLIGHT_CLASS : ''
+      },
+      inputClasses: this._highlight === 'input' ? HIGHLIGHT_CLASS : ''
+    }
+  }
+}
+
+/**
+ * @import { LocationSettings, LocationElements, QuestionElements, QuestionRenderer } from '~/src/form/form-editor/preview/types.js'
+ * @import { NationalGridModel } from '~/src/form/form-editor/macros/types.js'
+ * @import { NationalGridFieldNumberFieldComponent } from '~/src/components/types.js'
+ */

package/src/form/form-editor/preview/os-grid-ref.js

@@ -0,0 +1,56 @@
+import { ComponentType } from '~/src/components/enums.js'
+import { HIGHLIGHT_CLASS } from '~/src/form/form-editor/preview/constants.js'
+import { createLocationFieldModel } from '~/src/form/form-editor/preview/location-helpers.js'
+import {
+  LocationQuestion,
+  LocationQuestionComponentPreviewElements
+} from '~/src/form/form-editor/preview/location-question-base.js'
+import { PreviewComponent } from '~/src/form/form-editor/preview/preview.js'
+
+/**
+ * @implements {QuestionElements}
+ */
+export class OsGridRefComponentPreviewElements extends LocationQuestionComponentPreviewElements {}
+
+export class OsGridRefQuestion extends LocationQuestion {
+  /**
+   * @type {ComponentType}
+   */
+  componentType = ComponentType.OsGridRefField
+  /**
+   * @type {string}
+   * @protected
+   */
+  _questionTemplate = PreviewComponent.PATH + 'osgridreffield.njk'
+  _fieldName = 'OsGridRefField'
+
+  /**
+   * @protected
+   * @returns {OsGridRefModel}
+   */
+  _renderInput() {
+    const baseModel = super._renderInput()
+    const locationModel = createLocationFieldModel(
+      baseModel,
+      /** @type {LocationElements} */ (this._htmlElements),
+      this._highlight,
+      this._instructionText,
+      this.titleText
+    )
+
+    return {
+      ...locationModel,
+      label: {
+        text: this.titleText,
+        classes: this._highlight === 'question' ? HIGHLIGHT_CLASS : ''
+      },
+      inputClasses: this._highlight === 'input' ? HIGHLIGHT_CLASS : ''
+    }
+  }
+}
+
+/**
+ * @import { LocationSettings, LocationElements, QuestionElements, QuestionRenderer } from '~/src/form/form-editor/preview/types.js'
+ * @import { OsGridRefModel } from '~/src/form/form-editor/macros/types.js'
+ * @import { OsGridRefFieldComponent } from '~/src/components/types.js'
+ */

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

@@ -38,8 +38,8 @@ export interface GovukFieldset {
 }
 
 export type ListenerRow = [
-  HTMLInputElement | null,
-  (target: HTMLInputElement, e: Event) => void,
+  HTMLInputElement | HTMLTextAreaElement | null,
+  (target: HTMLInputElement | HTMLTextAreaElement, e: Event) => void,
   keyof HTMLElementEventMap
 ]
 
@@ -83,6 +83,28 @@ export interface NumberElements extends DomElementsBase {
   readonly values: NumberSettings
 }
 
+export interface LocationSettings extends BaseSettings {
+  instructionText: string
+}
+
+export interface LocationElements extends DomElementsBase {
+  readonly values: LocationSettings
+}
+
+export interface LocationFieldModel extends QuestionBaseModel {
+  userClasses: string
+  fieldset: {
+    legend: {
+      text: string
+      classes: string
+    }
+  }
+  instructionText: string
+  details: {
+    classes: string
+  }
+}
+
 export interface RenderBase {
   render(questionTemplate: string, renderContext: RenderContext): void
 }