@defra/forms-model 3.0.580 → 3.0.582

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
 }