@defra/forms-model 3.0.481 → 3.0.483

package/dist/module/form/form-editor/preview/long-answer.js

@@ -1,10 +1,16 @@
+import { ComponentType } from "../../../components/enums.js";
+import { PreviewComponent } from "./preview.js";
 import { Question } from "./question.js";
 export class LongAnswerQuestion extends Question {
+  /**
+   * @type {ComponentType}
+   */
+  componentType = ComponentType.MultilineTextField;
   /**
    * @type {string}
    * @protected
    */
-  _questionTemplate = Question.PATH + 'textarea.njk';
+  _questionTemplate = PreviewComponent.PATH + 'textarea.njk';
   /**
    * @type {string}
    * @protected

package/dist/module/form/form-editor/preview/long-answer.js.map

@@ -1 +1 @@
-{"version":3,"file":"long-answer.js","names":["Question","LongAnswerQuestion","_questionTemplate","PATH","_fieldName"],"sources":["../../../../../src/form/form-editor/preview/long-answer.js"],"sourcesContent":["import { Question } from '~/src/form/form-editor/preview/question.js'\n\nexport class LongAnswerQuestion extends Question {\n  /**\n   * @type {string}\n   * @protected\n   */\n  _questionTemplate = Question.PATH + 'textarea.njk'\n  /**\n   * @type {string}\n   * @protected\n   */\n  _fieldName = 'longAnswerField'\n}\n"],"mappings":"AAAA,SAASA,QAAQ;AAEjB,OAAO,MAAMC,kBAAkB,SAASD,QAAQ,CAAC;EAC/C;AACF;AACA;AACA;EACEE,iBAAiB,GAAGF,QAAQ,CAACG,IAAI,GAAG,cAAc;EAClD;AACF;AACA;AACA;EACEC,UAAU,GAAG,iBAAiB;AAChC","ignoreList":[]}
+{"version":3,"file":"long-answer.js","names":["ComponentType","PreviewComponent","Question","LongAnswerQuestion","componentType","MultilineTextField","_questionTemplate","PATH","_fieldName"],"sources":["../../../../../src/form/form-editor/preview/long-answer.js"],"sourcesContent":["import { ComponentType } from '~/src/components/enums.js'\nimport { PreviewComponent } from '~/src/form/form-editor/preview/preview.js'\nimport { Question } from '~/src/form/form-editor/preview/question.js'\n\nexport class LongAnswerQuestion extends Question {\n  /**\n   * @type {ComponentType}\n   */\n  componentType = ComponentType.MultilineTextField\n  /**\n   * @type {string}\n   * @protected\n   */\n  _questionTemplate = PreviewComponent.PATH + 'textarea.njk'\n  /**\n   * @type {string}\n   * @protected\n   */\n  _fieldName = 'longAnswerField'\n}\n"],"mappings":"AAAA,SAASA,aAAa;AACtB,SAASC,gBAAgB;AACzB,SAASC,QAAQ;AAEjB,OAAO,MAAMC,kBAAkB,SAASD,QAAQ,CAAC;EAC/C;AACF;AACA;EACEE,aAAa,GAAGJ,aAAa,CAACK,kBAAkB;EAChD;AACF;AACA;AACA;EACEC,iBAAiB,GAAGL,gBAAgB,CAACM,IAAI,GAAG,cAAc;EAC1D;AACF;AACA;AACA;EACEC,UAAU,GAAG,iBAAiB;AAChC","ignoreList":[]}

package/dist/module/form/form-editor/preview/markdown.js

@@ -0,0 +1,53 @@
+import { ComponentType } from "../../../components/enums.js";
+import { Content } from "./content.js";
+import { PreviewComponent } from "./preview.js";
+import { markdownToHtml } from "../../../utils/markdown.js";
+
+/**
+ * @class Markdown
+ * @classdesc
+ * Base of Content preview classes
+ */
+export class Markdown extends Content {
+  /**
+   * @type {string}
+   * @protected
+   */
+  _fieldName = 'markdown';
+  /**
+   * @type {ComponentType}
+   */
+  componentType = ComponentType.Markdown;
+
+  /**
+   * @type {string}
+   * @protected
+   */
+  _questionTemplate = PreviewComponent.PATH + 'markdown.njk';
+  /**
+   * @param {QuestionElements} htmlElements
+   * @param {QuestionRenderer} questionRenderer
+   */
+  constructor(htmlElements, questionRenderer) {
+    super(htmlElements, questionRenderer);
+    const {
+      content
+    } = htmlElements.values;
+    this._content = markdownToHtml(content);
+  }
+
+  /**
+   * @param {string} value
+   * @protected
+   */
+  _setContent(value) {
+    super._setContent(markdownToHtml(value));
+  }
+}
+
+/**
+ * @import { ListenerRow, BaseSettings, QuestionElements, QuestionBaseModel, GovukFieldset, DefaultComponent, QuestionRenderer } from '~/src/form/form-editor/preview/types.js'
+ * @import { FormComponentsDef, ContentComponentsDef, ComponentDef } from '~/src/components/types.js'
+ * @import { ListElement, ListItemReadonly } from '~/src/form/form-editor/types.js'
+ */
+//# sourceMappingURL=markdown.js.map

package/dist/module/form/form-editor/preview/markdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown.js","names":["ComponentType","Content","PreviewComponent","markdownToHtml","Markdown","_fieldName","componentType","_questionTemplate","PATH","constructor","htmlElements","questionRenderer","content","values","_content","_setContent","value"],"sources":["../../../../../src/form/form-editor/preview/markdown.js"],"sourcesContent":["import { ComponentType } from '~/src/components/enums.js'\nimport { Content } from '~/src/form/form-editor/preview/content.js'\nimport { PreviewComponent } from '~/src/form/form-editor/preview/preview.js'\nimport { markdownToHtml } from '~/src/utils/markdown.js'\n\n/**\n * @class Markdown\n * @classdesc\n * Base of Content preview classes\n */\nexport class Markdown extends Content {\n  /**\n   * @type {string}\n   * @protected\n   */\n  _fieldName = 'markdown'\n  /**\n   * @type {ComponentType}\n   */\n  componentType = ComponentType.Markdown\n\n  /**\n   * @type {string}\n   * @protected\n   */\n  _questionTemplate = PreviewComponent.PATH + 'markdown.njk'\n  /**\n   * @param {QuestionElements} htmlElements\n   * @param {QuestionRenderer} questionRenderer\n   */\n  constructor(htmlElements, questionRenderer) {\n    super(htmlElements, questionRenderer)\n    const { content } = htmlElements.values\n    this._content = markdownToHtml(content)\n  }\n\n  /**\n   * @param {string} value\n   * @protected\n   */\n  _setContent(value) {\n    super._setContent(markdownToHtml(value))\n  }\n}\n\n/**\n * @import { ListenerRow, BaseSettings, QuestionElements, QuestionBaseModel, GovukFieldset, DefaultComponent, QuestionRenderer } from '~/src/form/form-editor/preview/types.js'\n * @import { FormComponentsDef, ContentComponentsDef, ComponentDef } from '~/src/components/types.js'\n * @import { ListElement, ListItemReadonly } from '~/src/form/form-editor/types.js'\n */\n"],"mappings":"AAAA,SAASA,aAAa;AACtB,SAASC,OAAO;AAChB,SAASC,gBAAgB;AACzB,SAASC,cAAc;;AAEvB;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,QAAQ,SAASH,OAAO,CAAC;EACpC;AACF;AACA;AACA;EACEI,UAAU,GAAG,UAAU;EACvB;AACF;AACA;EACEC,aAAa,GAAGN,aAAa,CAACI,QAAQ;;EAEtC;AACF;AACA;AACA;EACEG,iBAAiB,GAAGL,gBAAgB,CAACM,IAAI,GAAG,cAAc;EAC1D;AACF;AACA;AACA;EACEC,WAAWA,CAACC,YAAY,EAAEC,gBAAgB,EAAE;IAC1C,KAAK,CAACD,YAAY,EAAEC,gBAAgB,CAAC;IACrC,MAAM;MAAEC;IAAQ,CAAC,GAAGF,YAAY,CAACG,MAAM;IACvC,IAAI,CAACC,QAAQ,GAAGX,cAAc,CAACS,OAAO,CAAC;EACzC;;EAEA;AACF;AACA;AACA;EACEG,WAAWA,CAACC,KAAK,EAAE;IACjB,KAAK,CAACD,WAAW,CAACZ,cAAc,CAACa,KAAK,CAAC,CAAC;EAC1C;AACF;;AAEA;AACA;AACA;AACA;AACA","ignoreList":[]}

package/dist/module/form/form-editor/preview/month-year.js

@@ -1,11 +1,16 @@
+import { ComponentType } from "../../../components/enums.js";
 import { FieldsetQuestion } from "./fieldset-question.js";
-import { Question } from "../../../index.js";
+import { PreviewComponent } from "./preview.js";
 export class MonthYearQuestion extends FieldsetQuestion {
+  /**
+   * @type {ComponentType}
+   */
+  componentType = ComponentType.MonthYearField;
   /**
    * @type {string}
    * @protected
    */
-  _questionTemplate = Question.PATH + 'monthyearfield.njk';
+  _questionTemplate = PreviewComponent.PATH + 'monthyearfield.njk';
   _fieldName = 'monthYear';
 
   /**

package/dist/module/form/form-editor/preview/month-year.js.map

@@ -1 +1 @@
-{"version":3,"file":"month-year.js","names":["FieldsetQuestion","Question","MonthYearQuestion","_questionTemplate","PATH","_fieldName","customRenderFields","items","name","classes"],"sources":["../../../../../src/form/form-editor/preview/month-year.js"],"sourcesContent":["import { FieldsetQuestion } from '~/src/form/form-editor/preview/fieldset-question.js'\nimport { Question } from '~/src/index.js'\n\nexport class MonthYearQuestion extends FieldsetQuestion {\n  /**\n   * @type {string}\n   * @protected\n   */\n  _questionTemplate = Question.PATH + 'monthyearfield.njk'\n  _fieldName = 'monthYear'\n\n  /**\n   * @returns {Partial<QuestionBaseModel>}\n   */\n  get customRenderFields() {\n    return {\n      items: [\n        { name: 'month', classes: 'govuk-input--width-2' },\n        { name: 'year', classes: 'govuk-input--width-4' }\n      ]\n    }\n  }\n}\n/**\n * @import { QuestionBaseModel } from '~/src/form/form-editor/preview/types.js'\n */\n"],"mappings":"AAAA,SAASA,gBAAgB;AACzB,SAASC,QAAQ;AAEjB,OAAO,MAAMC,iBAAiB,SAASF,gBAAgB,CAAC;EACtD;AACF;AACA;AACA;EACEG,iBAAiB,GAAGF,QAAQ,CAACG,IAAI,GAAG,oBAAoB;EACxDC,UAAU,GAAG,WAAW;;EAExB;AACF;AACA;EACE,IAAIC,kBAAkBA,CAAA,EAAG;IACvB,OAAO;MACLC,KAAK,EAAE,CACL;QAAEC,IAAI,EAAE,OAAO;QAAEC,OAAO,EAAE;MAAuB,CAAC,EAClD;QAAED,IAAI,EAAE,MAAM;QAAEC,OAAO,EAAE;MAAuB,CAAC;IAErD,CAAC;EACH;AACF;AACA;AACA;AACA","ignoreList":[]}
+{"version":3,"file":"month-year.js","names":["ComponentType","FieldsetQuestion","PreviewComponent","MonthYearQuestion","componentType","MonthYearField","_questionTemplate","PATH","_fieldName","customRenderFields","items","name","classes"],"sources":["../../../../../src/form/form-editor/preview/month-year.js"],"sourcesContent":["import { ComponentType } from '~/src/components/enums.js'\nimport { FieldsetQuestion } from '~/src/form/form-editor/preview/fieldset-question.js'\nimport { PreviewComponent } from '~/src/form/form-editor/preview/preview.js'\n\nexport class MonthYearQuestion extends FieldsetQuestion {\n  /**\n   * @type {ComponentType}\n   */\n  componentType = ComponentType.MonthYearField\n  /**\n   * @type {string}\n   * @protected\n   */\n  _questionTemplate = PreviewComponent.PATH + 'monthyearfield.njk'\n  _fieldName = 'monthYear'\n\n  /**\n   * @returns {Partial<QuestionBaseModel>}\n   */\n  get customRenderFields() {\n    return {\n      items: [\n        { name: 'month', classes: 'govuk-input--width-2' },\n        { name: 'year', classes: 'govuk-input--width-4' }\n      ]\n    }\n  }\n}\n/**\n * @import { QuestionBaseModel } from '~/src/form/form-editor/preview/types.js'\n */\n"],"mappings":"AAAA,SAASA,aAAa;AACtB,SAASC,gBAAgB;AACzB,SAASC,gBAAgB;AAEzB,OAAO,MAAMC,iBAAiB,SAASF,gBAAgB,CAAC;EACtD;AACF;AACA;EACEG,aAAa,GAAGJ,aAAa,CAACK,cAAc;EAC5C;AACF;AACA;AACA;EACEC,iBAAiB,GAAGJ,gBAAgB,CAACK,IAAI,GAAG,oBAAoB;EAChEC,UAAU,GAAG,WAAW;;EAExB;AACF;AACA;EACE,IAAIC,kBAAkBA,CAAA,EAAG;IACvB,OAAO;MACLC,KAAK,EAAE,CACL;QAAEC,IAAI,EAAE,OAAO;QAAEC,OAAO,EAAE;MAAuB,CAAC,EAClD;QAAED,IAAI,EAAE,MAAM;QAAEC,OAAO,EAAE;MAAuB,CAAC;IAErD,CAAC;EACH;AACF;AACA;AACA;AACA","ignoreList":[]}

package/dist/module/form/form-editor/preview/number-only.js

@@ -1,5 +1,10 @@
+import { ComponentType } from "../../../components/enums.js";
 import { Question } from "./question.js";
 export class NumberOnlyQuestion extends Question {
+  /**
+   * @type {ComponentType}
+   */
+  componentType = ComponentType.NumberField;
   /**
    * @returns {Partial<QuestionBaseModel>}
    */

package/dist/module/form/form-editor/preview/number-only.js.map

@@ -1 +1 @@
-{"version":3,"file":"number-only.js","names":["Question","NumberOnlyQuestion","customRenderFields","type"],"sources":["../../../../../src/form/form-editor/preview/number-only.js"],"sourcesContent":["import { Question } from '~/src/form/form-editor/preview/question.js'\n\nexport class NumberOnlyQuestion extends Question {\n  /**\n   * @returns {Partial<QuestionBaseModel>}\n   */\n  get customRenderFields() {\n    return {\n      type: 'number'\n    }\n  }\n}\n\n/**\n * @import { QuestionBaseModel } from '~/src/form/form-editor/preview/types.js'\n */\n"],"mappings":"AAAA,SAASA,QAAQ;AAEjB,OAAO,MAAMC,kBAAkB,SAASD,QAAQ,CAAC;EAC/C;AACF;AACA;EACE,IAAIE,kBAAkBA,CAAA,EAAG;IACvB,OAAO;MACLC,IAAI,EAAE;IACR,CAAC;EACH;AACF;;AAEA;AACA;AACA","ignoreList":[]}
+{"version":3,"file":"number-only.js","names":["ComponentType","Question","NumberOnlyQuestion","componentType","NumberField","customRenderFields","type"],"sources":["../../../../../src/form/form-editor/preview/number-only.js"],"sourcesContent":["import { ComponentType } from '~/src/components/enums.js'\nimport { Question } from '~/src/form/form-editor/preview/question.js'\n\nexport class NumberOnlyQuestion extends Question {\n  /**\n   * @type {ComponentType}\n   */\n  componentType = ComponentType.NumberField\n  /**\n   * @returns {Partial<QuestionBaseModel>}\n   */\n  get customRenderFields() {\n    return {\n      type: 'number'\n    }\n  }\n}\n\n/**\n * @import { QuestionBaseModel } from '~/src/form/form-editor/preview/types.js'\n */\n"],"mappings":"AAAA,SAASA,aAAa;AACtB,SAASC,QAAQ;AAEjB,OAAO,MAAMC,kBAAkB,SAASD,QAAQ,CAAC;EAC/C;AACF;AACA;EACEE,aAAa,GAAGH,aAAa,CAACI,WAAW;EACzC;AACF;AACA;EACE,IAAIC,kBAAkBA,CAAA,EAAG;IACvB,OAAO;MACLC,IAAI,EAAE;IACR,CAAC;EACH;AACF;;AAEA;AACA;AACA","ignoreList":[]}

package/dist/module/form/form-editor/preview/phone-number.js

@@ -1,6 +1,12 @@
+import { ComponentType } from "../../../components/enums.js";
+import { PreviewComponent } from "./preview.js";
 import { Question } from "./question.js";
 export class PhoneNumberQuestion extends Question {
-  _questionTemplate = Question.PATH + 'telephonenumberfield.njk';
+  /**
+   * @type {ComponentType}
+   */
+  componentType = ComponentType.TelephoneNumberField;
+  _questionTemplate = PreviewComponent.PATH + 'telephonenumberfield.njk';
   _fieldName = 'phoneNumberField';
 }
 

package/dist/module/form/form-editor/preview/phone-number.js.map

@@ -1 +1 @@
-{"version":3,"file":"phone-number.js","names":["Question","PhoneNumberQuestion","_questionTemplate","PATH","_fieldName"],"sources":["../../../../../src/form/form-editor/preview/phone-number.js"],"sourcesContent":["import { Question } from '~/src/form/form-editor/preview/question.js'\n\nexport class PhoneNumberQuestion extends Question {\n  _questionTemplate = Question.PATH + 'telephonenumberfield.njk'\n  _fieldName = 'phoneNumberField'\n}\n\n/**\n * @import { QuestionBaseModel } from '~/src/form/form-editor/preview/question.js'\n */\n"],"mappings":"AAAA,SAASA,QAAQ;AAEjB,OAAO,MAAMC,mBAAmB,SAASD,QAAQ,CAAC;EAChDE,iBAAiB,GAAGF,QAAQ,CAACG,IAAI,GAAG,0BAA0B;EAC9DC,UAAU,GAAG,kBAAkB;AACjC;;AAEA;AACA;AACA","ignoreList":[]}
+{"version":3,"file":"phone-number.js","names":["ComponentType","PreviewComponent","Question","PhoneNumberQuestion","componentType","TelephoneNumberField","_questionTemplate","PATH","_fieldName"],"sources":["../../../../../src/form/form-editor/preview/phone-number.js"],"sourcesContent":["import { ComponentType } from '~/src/components/enums.js'\nimport { PreviewComponent } from '~/src/form/form-editor/preview/preview.js'\nimport { Question } from '~/src/form/form-editor/preview/question.js'\n\nexport class PhoneNumberQuestion extends Question {\n  /**\n   * @type {ComponentType}\n   */\n  componentType = ComponentType.TelephoneNumberField\n  _questionTemplate = PreviewComponent.PATH + 'telephonenumberfield.njk'\n  _fieldName = 'phoneNumberField'\n}\n\n/**\n * @import { QuestionBaseModel } from '~/src/form/form-editor/preview/question.js'\n */\n"],"mappings":"AAAA,SAASA,aAAa;AACtB,SAASC,gBAAgB;AACzB,SAASC,QAAQ;AAEjB,OAAO,MAAMC,mBAAmB,SAASD,QAAQ,CAAC;EAChD;AACF;AACA;EACEE,aAAa,GAAGJ,aAAa,CAACK,oBAAoB;EAClDC,iBAAiB,GAAGL,gBAAgB,CAACM,IAAI,GAAG,0BAA0B;EACtEC,UAAU,GAAG,kBAAkB;AACjC;;AAEA;AACA;AACA","ignoreList":[]}

package/dist/module/form/form-editor/preview/preview.js

@@ -0,0 +1,212 @@
+import { ComponentType } from "../../../components/enums.js";
+import { HIGHLIGHT_CLASS } from "./constants.js";
+
+/**
+ * @abstract
+ */
+export class PreviewComponent {
+  static PATH = 'preview-components/';
+  /**
+   * @abstract
+   * @type {ComponentType}
+   */
+  componentType = ComponentType.Details;
+  /**
+   * @abstract
+   * @type {string}
+   * @protected
+   */
+  _questionTemplate = '';
+  /**
+   * @type { string|null }
+   * @protected
+   */
+  _highlight = null;
+  /**
+   * @abstract
+   * @type {string}
+   * @protected
+   */
+  _fieldName = '';
+  /**
+   * @type {QuestionRenderer}
+   * @protected
+   */
+  _questionRenderer;
+
+  /**
+   * @type {QuestionElements}
+   * @protected
+   */
+  _htmlElements;
+  /**
+   * @type {boolean}
+   * @protected
+   */
+  _highlighted = false;
+
+  /**
+   * @param {QuestionElements} htmlElements
+   * @param {QuestionRenderer} questionRenderer
+   */
+  constructor(htmlElements, questionRenderer) {
+    const {
+      question,
+      optional
+    } = htmlElements.values;
+
+    /**
+     * @type {QuestionElements}
+     * @protected
+     */
+    this._htmlElements = htmlElements;
+    /**
+     * @type {string}
+     * @private
+     */
+    this._question = question;
+    /**
+     * @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')
+      }
+    };
+  }
+
+  /**
+   * @returns {Partial<QuestionBaseModel>}
+   */
+  get customRenderFields() {
+    return {};
+  }
+
+  /**
+   *
+   * @returns {QuestionBaseModel}
+   * @protected
+   */
+  _renderInput() {
+    return {
+      id: this._fieldName,
+      name: this._fieldName,
+      classes: this._highlighted ? HIGHLIGHT_CLASS : ''
+    };
+  }
+
+  /**
+   * @type {QuestionBaseModel}
+   */
+  get renderInput() {
+    return {
+      ...this._renderInput(),
+      ...this.customRenderFields
+    };
+  }
+  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();
+  }
+  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();
+  }
+
+  /**
+   * no render
+   */
+  highlightContent() {
+    this._highlighted = true;
+  }
+
+  /**
+   * no render
+   */
+  unHighlightContent() {
+    this._highlighted = false;
+  }
+}
+
+/**
+ * @import { ListenerRow, BaseSettings, QuestionElements, QuestionBaseModel, GovukFieldset, DefaultComponent, QuestionRenderer } from '~/src/form/form-editor/preview/types.js'
+ * @import { FormComponentsDef, ContentComponentsDef, ComponentDef } from '~/src/components/types.js'
+ * @import { ListElement, ListItemReadonly } from '~/src/form/form-editor/types.js'
+ */
+//# sourceMappingURL=preview.js.map

package/dist/module/form/form-editor/preview/preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview.js","names":["ComponentType","HIGHLIGHT_CLASS","PreviewComponent","PATH","componentType","Details","_questionTemplate","_highlight","_fieldName","_questionRenderer","_htmlElements","_highlighted","constructor","htmlElements","questionRenderer","question","optional","values","_question","_optional","getHighlight","element","titleText","optionalText","label","text","classes","fieldSet","legend","customRenderFields","_renderInput","id","name","renderInput","render","value","highlight","highlightContent","unHighlightContent"],"sources":["../../../../../src/form/form-editor/preview/preview.js"],"sourcesContent":["import { ComponentType } from '~/src/components/enums.js'\nimport { HIGHLIGHT_CLASS } from '~/src/form/form-editor/preview/constants.js'\n\n/**\n * @abstract\n */\nexport class PreviewComponent {\n  static PATH = 'preview-components/'\n  /**\n   * @abstract\n   * @type {ComponentType}\n   */\n  componentType = ComponentType.Details\n  /**\n   * @abstract\n   * @type {string}\n   * @protected\n   */\n  _questionTemplate = ''\n  /**\n   * @type { string|null }\n   * @protected\n   */\n  _highlight = null\n  /**\n   * @abstract\n   * @type {string}\n   * @protected\n   */\n  _fieldName = ''\n  /**\n   * @type {QuestionRenderer}\n   * @protected\n   */\n  _questionRenderer\n\n  /**\n   * @type {QuestionElements}\n   * @protected\n   */\n  _htmlElements\n  /**\n   * @type {boolean}\n   * @protected\n   */\n  _highlighted = false\n\n  /**\n   * @param {QuestionElements} htmlElements\n   * @param {QuestionRenderer} questionRenderer\n   */\n  constructor(htmlElements, questionRenderer) {\n    const { question, optional } = htmlElements.values\n\n    /**\n     * @type {QuestionElements}\n     * @protected\n     */\n    this._htmlElements = htmlElements\n    /**\n     * @type {string}\n     * @private\n     */\n    this._question = question\n    /**\n     * @type {boolean}\n     * @private\n     */\n    this._optional = optional\n    /**\n     *\n     * @type {QuestionRenderer}\n     * @protected\n     */\n    this._questionRenderer = questionRenderer\n  }\n\n  /**\n   * @param {string} element\n   * @returns {string}\n   * @protected\n   */\n  getHighlight(element) {\n    return this._highlight === element ? ' highlight' : ''\n  }\n\n  get titleText() {\n    const optionalText = this._optional ? ' (optional)' : ''\n    return (!this._question ? 'Question' : this._question) + optionalText\n  }\n\n  /**\n   * @protected\n   * @type {DefaultComponent}\n   */\n  get label() {\n    return {\n      text: this.titleText,\n      classes: 'govuk-label--l' + this.getHighlight('question')\n    }\n  }\n\n  /**\n   * @protected\n   * @type {GovukFieldset}\n   */\n  get fieldSet() {\n    return {\n      legend: {\n        text: this.titleText,\n        classes: 'govuk-fieldset__legend--l' + this.getHighlight('question')\n      }\n    }\n  }\n\n  /**\n   * @returns {Partial<QuestionBaseModel>}\n   */\n  get customRenderFields() {\n    return {}\n  }\n\n  /**\n   *\n   * @returns {QuestionBaseModel}\n   * @protected\n   */\n  _renderInput() {\n    return {\n      id: this._fieldName,\n      name: this._fieldName,\n      classes: this._highlighted ? HIGHLIGHT_CLASS : ''\n    }\n  }\n\n  /**\n   * @type {QuestionBaseModel}\n   */\n  get renderInput() {\n    return {\n      ...this._renderInput(),\n      ...this.customRenderFields\n    }\n  }\n\n  render() {\n    this._questionRenderer.render(this._questionTemplate, this.renderInput)\n  }\n\n  /**\n   * @type {string}\n   */\n  get question() {\n    return this._question\n  }\n\n  /**\n   * @param {string} value\n   */\n  set question(value) {\n    this._question = value\n    this.render()\n  }\n\n  get optional() {\n    return this._optional\n  }\n\n  /**\n   * @param {boolean} value\n   */\n  set optional(value) {\n    this._optional = value\n    this.render()\n  }\n\n  /**\n   * @type {string | null}\n   */\n  get highlight() {\n    return this._highlight\n  }\n\n  /**\n   * @param {string | null} value\n   */\n  set highlight(value) {\n    this._highlight = value\n    this.render()\n  }\n\n  /**\n   * no render\n   */\n  highlightContent() {\n    this._highlighted = true\n  }\n\n  /**\n   * no render\n   */\n  unHighlightContent() {\n    this._highlighted = false\n  }\n}\n\n/**\n * @import { ListenerRow, BaseSettings, QuestionElements, QuestionBaseModel, GovukFieldset, DefaultComponent, QuestionRenderer } from '~/src/form/form-editor/preview/types.js'\n * @import { FormComponentsDef, ContentComponentsDef, ComponentDef } from '~/src/components/types.js'\n * @import { ListElement, ListItemReadonly } from '~/src/form/form-editor/types.js'\n */\n"],"mappings":"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","ignoreList":[]}

package/dist/module/form/form-editor/preview/question.js

@@ -1,3 +1,37 @@
+import { ComponentType } from "../../../components/enums.js";
+import { ComponentElements } from "./component-elements.js";
+import { PreviewComponent } from "./preview.js";
+
+/**
+ * @implements {QuestionElements}
+ */
+export class QuestionComponentElements extends ComponentElements {
+  /**
+   * @type {FormComponentsDef}
+   * @protected
+   */
+  _component;
+  /**
+   * @param {FormComponentsDef} component
+   */
+  constructor(component) {
+    super(component);
+    this._component = component;
+  }
+
+  /**
+   * @protected
+   * @returns {BaseSettings}
+   */
+  _getValues() {
+    return {
+      ...super._getValues(),
+      hintText: this._component.hint ?? '',
+      shortDesc: this._component.shortDescription ?? ''
+    };
+  }
+}
+
 /**
  * @class Question
  * @classdesc
@@ -8,110 +42,37 @@
  * the HTML.  Question classes should only be responsible for data and rendering as are reused in the
  * server side.
  */
-export class Question {
-  static PATH = 'preview-components/';
-
+export class Question extends PreviewComponent {
   /**
-   * @type {string}
-   * @protected
+   * @type {ComponentType}
    */
-  _questionTemplate = Question.PATH + 'textfield.njk';
+  componentType = ComponentType.TextField;
+
   /**
-   * @type { string|null }
+   * @type {string}
    * @protected
    */
-  _highlight = null;
+  _questionTemplate = PreviewComponent.PATH + 'textfield.njk';
   /**
    * @type {string}
    * @protected
    */
   _fieldName = 'inputField';
-  /**
-   * @type {QuestionRenderer}
-   * @protected
-   */
-  _questionRenderer;
-
-  /**
-   * @type {QuestionElements}
-   * @private
-   */
-  _htmlElements;
 
   /**
    * @param {QuestionElements} htmlElements
    * @param {QuestionRenderer} questionRenderer
    */
   constructor(htmlElements, questionRenderer) {
+    super(htmlElements, questionRenderer);
     const {
-      question,
-      hintText,
-      optional
+      hintText
     } = htmlElements.values;
-
-    /**
-     * @type {QuestionElements}
-     * @protected
-     */
-    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')
-      }
-    };
   }
 
   /**
@@ -127,42 +88,16 @@ export class Question {
   }
 
   /**
-   * @returns {Partial<QuestionBaseModel>}
-   */
-  get customRenderFields() {
-    return {};
-  }
-
-  /**
-   * @type {QuestionBaseModel}
+   * @returns {QuestionBaseModel}
+   * @protected
    */
-  get renderInput() {
+  _renderInput() {
     return {
-      id: this._fieldName,
-      name: this._fieldName,
+      ...super._renderInput(),
       label: this.label,
-      hint: this.hint,
-      ...this.customRenderFields
+      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}
@@ -178,36 +113,11 @@ export class Question {
     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 { FormComponentsDef, ContentComponentsDef, ComponentDef } from '~/src/components/types.js'
  * @import { ListElement, ListItemReadonly } from '~/src/form/form-editor/types.js'
  */
 //# sourceMappingURL=question.js.map