@defra/forms-model 3.0.452 → 3.0.454

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

@@ -85,6 +85,26 @@ export class QuestionPreviewElements {
   setPreviewHTML(_value) {
     // Not implemented for server side render
   }
+
+  /**
+   * @param {HTMLElement} _value
+   */
+  setPreviewDOM(_value) {
+    // Not implemented for server side render
+  }
+}
+
+/**
+ * @implements {AutocompleteElements}
+ */
+export class AutocompletePreviewElements extends QuestionPreviewElements {
+  /**
+   * @param {BaseSettings & {autocompleteOptions: string}} elements
+   */
+  constructor({ autocompleteOptions, ...elements }) {
+    super(elements)
+    this.autocompleteOptions = autocompleteOptions
+  }
 }
 
 export const baseElements = /** @type {BaseSettings} */ ({
@@ -95,7 +115,50 @@ export const baseElements = /** @type {BaseSettings} */ ({
   shortDesc: ''
 })
 
+const list1Id = '414d82a3-4cab-416a-bd54-6b86fbd51120'
+const list2Id = '801385a4-81e6-4171-96c3-6c6727d97f22'
+const list3Id = 'e6e3f621-b875-4ca3-a054-cca9149149dd'
+const list4Id = 'd71b3909-582f-4e90-b6f5-490b89a6eb8f'
+
+const listElementsBase = /** @type {BaseSettings} */ ({
+  ...baseElements,
+  items: [
+    {
+      label: { text: 'Treasure Hunting' },
+      text: 'Treasure Hunting',
+      value: 'Treasure Hunting',
+      id: list1Id
+    },
+    {
+      label: { text: 'Rescuing the princess' },
+      text: 'Rescuing the princess',
+      value: 'Rescuing the princess',
+      id: list2Id
+    },
+    {
+      label: { text: 'Saving a city' },
+      text: 'Saving a city',
+      value: 'Saving a city',
+      id: list3Id
+    },
+    {
+      label: { text: 'Defeating the baron' },
+      text: 'Defeating the baron',
+      value: 'Defeating the baron',
+      id: list4Id
+    }
+  ]
+})
+
+export const listElementsStub = {
+  list1Id,
+  list2Id,
+  list3Id,
+  list4Id,
+  baseElements: listElementsBase
+}
+
 /**
  * @import { ListElement } from  '~/src/form/form-editor/types.js'
- * @import { BaseSettings, ListElements, RenderContext, QuestionBaseModel, QuestionElements, QuestionRenderer } from  '~/src/form/form-editor/preview/types.js'
+ * @import { BaseSettings, ListElements, RenderContext, QuestionBaseModel, QuestionElements, QuestionRenderer, AutocompleteElements } from  '~/src/form/form-editor/preview/types.js'
  */

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

@@ -464,7 +464,7 @@ export const customValidator = Joi.extend((joi: Joi.Root) => {
 }) as CustomValidator
 
 export const autoCompleteOptionsSchema = customValidator
-  .dsv<{ text: string; value: string }>()
+  .dsv<{ text: string; value: string }[]>()
   .row(/\r?\n/)
   .col(':')
   .keys(['text', 'value'])

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

@@ -0,0 +1,67 @@
+import { autoCompleteOptionsSchema } from '~/src/form/form-editor/index.js'
+import { Question } from '~/src/form/form-editor/preview/question.js'
+
+export class AutocompleteQuestion extends Question {
+  _questionTemplate = Question.PATH + 'autocompletefield.njk'
+  /**
+   * @type {string}
+   * @protected
+   */
+  _fieldName = 'autoCompleteField'
+  /**
+   * @type {ListElement[]}
+   * @private
+   */
+  _autocompleteList = []
+
+  /**
+   * @param {AutocompleteElements} autocompleteElements
+   * @param {QuestionRenderer} questionRenderer
+   */
+  constructor(autocompleteElements, questionRenderer) {
+    super(autocompleteElements, questionRenderer)
+    this.setAutocompleteList(autocompleteElements.autocompleteOptions)
+  }
+
+  get autoCompleteList() {
+    return [{ id: '', value: '', text: '' }, ...this._autocompleteList]
+  }
+
+  /**
+   * @param {string} listHTML
+   */
+  setAutocompleteList(listHTML) {
+    const validationResult =
+      /** @type {ValidationResult<{text: string, value: string}[]>} */ (
+        autoCompleteOptionsSchema.validate(listHTML)
+      )
+
+    if (!validationResult.error) {
+      this._autocompleteList = validationResult.value.map(
+        ({ text, value }) => ({
+          id: text,
+          text,
+          value
+        })
+      )
+      this.render()
+    }
+  }
+
+  get renderInput() {
+    return {
+      id: this._fieldName,
+      name: this._fieldName,
+      attributes: { 'data-module': 'govuk-accessible-autocomplete' },
+      hint: this.hint,
+      label: this.label,
+      items: this.autoCompleteList
+    }
+  }
+}
+
+/**
+ * @import { ValidationResult } from 'joi'
+ * @import { ListElement } from '~/src/form/form-editor/types.js'
+ * @import { AutocompleteElements, QuestionRenderer } from '~/src/form/form-editor/preview/types.js'
+ */

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

@@ -0,0 +1,12 @@
+import { ListSortableQuestion } from '~/src/form/form-editor/preview/list-sortable.js'
+import { Question } from '~/src/form/form-editor/preview/question.js'
+
+export class CheckboxSortableQuestion extends ListSortableQuestion {
+  /**
+   * @type {string}
+   * @protected
+   */
+  _questionTemplate = Question.PATH + 'checkboxesfield.njk'
+  listRenderId = 'checkboxField'
+  listRenderName = 'checkboxField'
+}

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

@@ -1,10 +1,10 @@
 import { FieldsetQuestion } from '~/src/form/form-editor/preview/fieldset-question.js'
-
+import { Question } from '~/src/form/form-editor/preview/question.js'
 export class DateInputQuestion extends FieldsetQuestion {
   /**
    * @type {string}
    * @protected
    */
-  _questionTemplate = 'date-input.njk'
+  _questionTemplate = Question.PATH + 'date-input.njk'
   _fieldName = 'dateInput'
 }

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

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

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

@@ -1,3 +1,5 @@
+export * from '~/src/form/form-editor/preview/autocomplete.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/email-address.js'
 export * from '~/src/form/form-editor/preview/list.js'

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

@@ -3,7 +3,7 @@ import { Question } from '~/src/form/form-editor/preview/question.js'
 const DefaultListConst = {
   TextElementId: 'radioText',
   HintElementId: 'radioHint',
-  Template: 'radios.njk',
+  Template: Question.PATH + 'radios.njk',
   Input: 'listInput',
   RenderName: 'listInputField'
 }
@@ -55,6 +55,16 @@ export class ListQuestion extends Question {
     this._listElements = listElements
   }
 
+  /**
+   * @returns {{
+   *  formGroup?: {afterInputs: {html: string}};
+   *  hint: DefaultComponent;
+   *  name: string;
+   *  fieldset?: GovukFieldset;
+   *  id: string;
+   *  items: ListItemReadonly[]
+   * }}
+   */
   get renderInput() {
     const afterInputs =
       /** @type {{ formGroup?: { afterInputs: { html: string } } }} */ (
@@ -198,5 +208,5 @@ export class ListQuestion extends Question {
 
 /**
  * @import { ListElement, ListItemReadonly } from '~/src/form/form-editor/types.js'
- * @import { ListenerRow, ListElements, QuestionRenderer, HTMLBuilder } from '~/src/form/form-editor/preview/types.js'
+ * @import { ListenerRow, ListElements, QuestionRenderer, HTMLBuilder, DefaultComponent, GovukFieldset } from '~/src/form/form-editor/preview/types.js'
  */

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

@@ -5,7 +5,7 @@ export class LongAnswerQuestion extends Question {
    * @type {string}
    * @protected
    */
-  _questionTemplate = 'textarea.njk'
+  _questionTemplate = Question.PATH + 'textarea.njk'
   /**
    * @type {string}
    * @protected

package/src/form/form-editor/preview/month-year.js

@@ -1,11 +1,12 @@
 import { FieldsetQuestion } from '~/src/form/form-editor/preview/fieldset-question.js'
+import { Question } from '~/src/index.js'
 
 export class MonthYearQuestion extends FieldsetQuestion {
   /**
    * @type {string}
    * @protected
    */
-  _questionTemplate = 'monthyearfield.njk'
+  _questionTemplate = Question.PATH + 'monthyearfield.njk'
   _fieldName = 'monthYear'
 
   /**

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

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

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

@@ -9,11 +9,13 @@
  * server side.
  */
 export class Question {
+  static PATH = 'preview-components/'
+
   /**
    * @type {string}
    * @protected
    */
-  _questionTemplate = 'textfield.njk'
+  _questionTemplate = Question.PATH + 'textfield.njk'
   /**
    * @type { string|null }
    * @protected
@@ -30,6 +32,12 @@ export class Question {
    */
   _questionRenderer
 
+  /**
+   * @type {QuestionElements}
+   * @private
+   */
+  _htmlElements
+
   /**
    * @param {QuestionElements} htmlElements
    * @param {QuestionRenderer} questionRenderer
@@ -39,7 +47,7 @@ export class Question {
 
     /**
      * @type {QuestionElements}
-     * @private
+     * @protected
      */
     this._htmlElements = htmlElements
     /**

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

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

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

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

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

@@ -1,3 +1,4 @@
+import { type AutocompleteQuestion } from '~/src/form/form-editor/preview/autocomplete.js'
 import { type DateInputQuestion } from '~/src/form/form-editor/preview/date-input.js'
 import { type EmailAddressQuestion } from '~/src/form/form-editor/preview/email-address.js'
 import { type ListSortableQuestion } from '~/src/form/form-editor/preview/list-sortable.js'
@@ -52,6 +53,10 @@ export type ListenerRow = [
 export interface QuestionElements {
   readonly values: BaseSettings
   setPreviewHTML(value: string): void
+  setPreviewDOM(element: HTMLElement): void
+}
+export interface AutocompleteElements extends QuestionElements {
+  autocompleteOptions: string
 }
 
 export interface RenderContext {
@@ -80,3 +85,4 @@ export type PreviewQuestion =
   | RadioSortableQuestion
   | ShortAnswerQuestion
   | UkAddressQuestion
+  | AutocompleteQuestion

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

@@ -1,7 +1,8 @@
 import { FieldsetQuestion } from '~/src/form/form-editor/preview/fieldset-question.js'
+import { Question } from '~/src/index.js'
 
 export class UkAddressQuestion extends FieldsetQuestion {
-  _questionTemplate = 'ukaddressfield.njk'
+  _questionTemplate = Question.PATH + 'ukaddressfield.njk'
   _fieldName = 'addressField'
 }
 

package/src/form/form-editor/preview/yes-no.js

@@ -1,11 +1,12 @@
 import { FieldsetQuestion } from '~/src/form/form-editor/preview/fieldset-question.js'
+import { Question } from '~/src/index.js'
 
 export class YesNoQuestion extends FieldsetQuestion {
   /**
    * @type {string}
    * @protected
    */
-  _questionTemplate = 'radios.njk'
+  _questionTemplate = Question.PATH + 'radios.njk'
   _fieldName = 'yesNo'
 
   /**

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

@@ -350,7 +350,7 @@ export interface ListElement extends ListItem {
   readonly id: string
   text: string
   value: string | boolean
-  label: ListLabel
+  label?: ListLabel
 }
 
 export interface ReadonlyHint {
@@ -361,7 +361,7 @@ export interface ListItemReadonly extends ListElement {
   readonly text: string
   readonly hint?: ReadonlyHint
   readonly value: string | boolean
-  readonly label: ListLabel
+  readonly label?: ListLabel
 }
 
 export interface DateItem {