defra_ruby_template 5.4.0 → 5.11.0

data/node_modules/govuk-frontend/dist/govuk/components/character-count/character-count.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"character-count.mjs","sources":["../../../../src/govuk/components/character-count/character-count.mjs"],"sourcesContent":["import { closestAttributeValue } from '../../common/closest-attribute-value.mjs'\nimport { mergeConfigs, validateConfig } from '../../common/index.mjs'\nimport { normaliseDataset } from '../../common/normalise-dataset.mjs'\nimport { ConfigError, ElementError } from '../../errors/index.mjs'\nimport { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs'\nimport { I18n } from '../../i18n.mjs'\n\n/**\n * Character count component\n *\n * Tracks the number of characters or words in the `.govuk-js-character-count`\n * `<textarea>` inside the element. Displays a message with the remaining number\n * of characters/words available, or the number of characters/words in excess.\n *\n * You can configure the message to only appear after a certain percentage\n * of the available characters/words has been entered.\n *\n * @preserve\n */\nexport class CharacterCount extends GOVUKFrontendComponent {\n  /** @private */\n  $module\n\n  /** @private */\n  $textarea\n\n  /** @private */\n  $visibleCountMessage\n\n  /** @private */\n  $screenReaderCountMessage\n\n  /**\n   * @private\n   * @type {number | null}\n   */\n  lastInputTimestamp = null\n\n  /** @private */\n  lastInputValue = ''\n\n  /**\n   * @private\n   * @type {number | null}\n   */\n  valueChecker = null\n\n  /**\n   * @private\n   * @type {CharacterCountConfig}\n   */\n  config\n\n  /** @private */\n  i18n\n\n  /** @private */\n  maxLength\n\n  /**\n   * @param {Element | null} $module - HTML element to use for character count\n   * @param {CharacterCountConfig} [config] - Character count config\n   */\n  constructor($module, config = {}) {\n    super()\n\n    if (!($module instanceof HTMLElement)) {\n      throw new ElementError({\n        componentName: 'Character count',\n        element: $module,\n        identifier: 'Root element (`$module`)'\n      })\n    }\n\n    const $textarea = $module.querySelector('.govuk-js-character-count')\n    if (\n      !(\n        $textarea instanceof HTMLTextAreaElement ||\n        $textarea instanceof HTMLInputElement\n      )\n    ) {\n      throw new ElementError({\n        componentName: 'Character count',\n        element: $textarea,\n        expectedType: 'HTMLTextareaElement or HTMLInputElement',\n        identifier: 'Form field (`.govuk-js-character-count`)'\n      })\n    }\n\n    // Read config set using dataset ('data-' values)\n    const datasetConfig = normaliseDataset(CharacterCount, $module.dataset)\n\n    // To ensure data-attributes take complete precedence, even if they change\n    // the type of count, we need to reset the `maxlength` and `maxwords` from\n    // the JavaScript config.\n    //\n    // We can't mutate `config`, though, as it may be shared across multiple\n    // components inside `initAll`.\n    /** @type {CharacterCountConfig} */\n    let configOverrides = {}\n    if ('maxwords' in datasetConfig || 'maxlength' in datasetConfig) {\n      configOverrides = {\n        maxlength: undefined,\n        maxwords: undefined\n      }\n    }\n\n    this.config = mergeConfigs(\n      CharacterCount.defaults,\n      config,\n      configOverrides,\n      datasetConfig\n    )\n\n    // Check for valid config\n    const errors = validateConfig(CharacterCount.schema, this.config)\n    if (errors[0]) {\n      throw new ConfigError(`Character count: ${errors[0]}`)\n    }\n\n    this.i18n = new I18n(this.config.i18n, {\n      // Read the fallback if necessary rather than have it set in the defaults\n      locale: closestAttributeValue($module, 'lang')\n    })\n\n    // Determine the limit attribute (characters or words)\n    this.maxLength = this.config.maxwords ?? this.config.maxlength ?? Infinity\n\n    this.$module = $module\n    this.$textarea = $textarea\n\n    const textareaDescriptionId = `${this.$textarea.id}-info`\n    const $textareaDescription = document.getElementById(textareaDescriptionId)\n    if (!$textareaDescription) {\n      throw new ElementError({\n        componentName: 'Character count',\n        element: $textareaDescription,\n        identifier: `Count message (\\`id=\"${textareaDescriptionId}\"\\`)`\n      })\n    }\n\n    // Inject a description for the textarea if none is present already\n    // for when the component was rendered with no maxlength, maxwords\n    // nor custom textareaDescriptionText\n    if (`${$textareaDescription.textContent}`.match(/^\\s*$/)) {\n      $textareaDescription.textContent = this.i18n.t('textareaDescription', {\n        count: this.maxLength\n      })\n    }\n\n    // Move the textarea description to be immediately after the textarea\n    // Kept for backwards compatibility\n    this.$textarea.insertAdjacentElement('afterend', $textareaDescription)\n\n    // Create the *screen reader* specific live-updating counter\n    // This doesn't need any styling classes, as it is never visible\n    const $screenReaderCountMessage = document.createElement('div')\n    $screenReaderCountMessage.className =\n      'govuk-character-count__sr-status govuk-visually-hidden'\n    $screenReaderCountMessage.setAttribute('aria-live', 'polite')\n    this.$screenReaderCountMessage = $screenReaderCountMessage\n    $textareaDescription.insertAdjacentElement(\n      'afterend',\n      $screenReaderCountMessage\n    )\n\n    // Create our live-updating counter element, copying the classes from the\n    // textarea description for backwards compatibility as these may have been\n    // configured\n    const $visibleCountMessage = document.createElement('div')\n    $visibleCountMessage.className = $textareaDescription.className\n    $visibleCountMessage.classList.add('govuk-character-count__status')\n    $visibleCountMessage.setAttribute('aria-hidden', 'true')\n    this.$visibleCountMessage = $visibleCountMessage\n    $textareaDescription.insertAdjacentElement('afterend', $visibleCountMessage)\n\n    // Hide the textarea description\n    $textareaDescription.classList.add('govuk-visually-hidden')\n\n    // Remove hard limit if set\n    this.$textarea.removeAttribute('maxlength')\n\n    this.bindChangeEvents()\n\n    // When the page is restored after navigating 'back' in some browsers the\n    // state of form controls is not restored until *after* the DOMContentLoaded\n    // event is fired, so we need to sync after the pageshow event.\n    window.addEventListener('pageshow', () => this.updateCountMessage())\n\n    // Although we've set up handlers to sync state on the pageshow event, init\n    // could be called after those events have fired, for example if they are\n    // added to the page dynamically, so update now too.\n    this.updateCountMessage()\n  }\n\n  /**\n   * Bind change events\n   *\n   * Set up event listeners on the $textarea so that the count messages update\n   * when the user types.\n   *\n   * @private\n   */\n  bindChangeEvents() {\n    this.$textarea.addEventListener('keyup', () => this.handleKeyUp())\n\n    // Bind focus/blur events to start/stop polling\n    this.$textarea.addEventListener('focus', () => this.handleFocus())\n    this.$textarea.addEventListener('blur', () => this.handleBlur())\n  }\n\n  /**\n   * Handle key up event\n   *\n   * Update the visible character counter and keep track of when the last update\n   * happened for each keypress\n   *\n   * @private\n   */\n  handleKeyUp() {\n    this.updateVisibleCountMessage()\n    this.lastInputTimestamp = Date.now()\n  }\n\n  /**\n   * Handle focus event\n   *\n   * Speech recognition software such as Dragon NaturallySpeaking will modify\n   * the fields by directly changing its `value`. These changes don't trigger\n   * events in JavaScript, so we need to poll to handle when and if they occur.\n   *\n   * Once the keyup event hasn't been detected for at least 1000 ms (1s), check\n   * if the textarea value has changed and update the count message if it has.\n   *\n   * This is so that the update triggered by the manual comparison doesn't\n   * conflict with debounced KeyboardEvent updates.\n   *\n   * @private\n   */\n  handleFocus() {\n    this.valueChecker = window.setInterval(() => {\n      if (\n        !this.lastInputTimestamp ||\n        Date.now() - 500 >= this.lastInputTimestamp\n      ) {\n        this.updateIfValueChanged()\n      }\n    }, 1000)\n  }\n\n  /**\n   * Handle blur event\n   *\n   * Stop checking the textarea value once the textarea no longer has focus\n   *\n   * @private\n   */\n  handleBlur() {\n    // Cancel value checking on blur\n    if (this.valueChecker) {\n      window.clearInterval(this.valueChecker)\n    }\n  }\n\n  /**\n   * Update count message if textarea value has changed\n   *\n   * @private\n   */\n  updateIfValueChanged() {\n    if (this.$textarea.value !== this.lastInputValue) {\n      this.lastInputValue = this.$textarea.value\n      this.updateCountMessage()\n    }\n  }\n\n  /**\n   * Update count message\n   *\n   * Helper function to update both the visible and screen reader-specific\n   * counters simultaneously (e.g. on init)\n   *\n   * @private\n   */\n  updateCountMessage() {\n    this.updateVisibleCountMessage()\n    this.updateScreenReaderCountMessage()\n  }\n\n  /**\n   * Update visible count message\n   *\n   * @private\n   */\n  updateVisibleCountMessage() {\n    const remainingNumber = this.maxLength - this.count(this.$textarea.value)\n    const isError = remainingNumber < 0\n\n    // If input is over the threshold, remove the disabled class which renders\n    // the counter invisible.\n    this.$visibleCountMessage.classList.toggle(\n      'govuk-character-count__message--disabled',\n      !this.isOverThreshold()\n    )\n\n    // Update styles\n    this.$textarea.classList.toggle('govuk-textarea--error', isError)\n    this.$visibleCountMessage.classList.toggle('govuk-error-message', isError)\n    this.$visibleCountMessage.classList.toggle('govuk-hint', !isError)\n\n    // Update message\n    this.$visibleCountMessage.textContent = this.getCountMessage()\n  }\n\n  /**\n   * Update screen reader count message\n   *\n   * @private\n   */\n  updateScreenReaderCountMessage() {\n    // If over the threshold, remove the aria-hidden attribute, allowing screen\n    // readers to announce the content of the element.\n    if (this.isOverThreshold()) {\n      this.$screenReaderCountMessage.removeAttribute('aria-hidden')\n    } else {\n      this.$screenReaderCountMessage.setAttribute('aria-hidden', 'true')\n    }\n\n    // Update message\n    this.$screenReaderCountMessage.textContent = this.getCountMessage()\n  }\n\n  /**\n   * Count the number of characters (or words, if `config.maxwords` is set)\n   * in the given text\n   *\n   * @private\n   * @param {string} text - The text to count the characters of\n   * @returns {number} the number of characters (or words) in the text\n   */\n  count(text) {\n    if (this.config.maxwords) {\n      const tokens = text.match(/\\S+/g) ?? [] // Matches consecutive non-whitespace chars\n      return tokens.length\n    }\n\n    return text.length\n  }\n\n  /**\n   * Get count message\n   *\n   * @private\n   * @returns {string} Status message\n   */\n  getCountMessage() {\n    const remainingNumber = this.maxLength - this.count(this.$textarea.value)\n    const countType = this.config.maxwords ? 'words' : 'characters'\n    return this.formatCountMessage(remainingNumber, countType)\n  }\n\n  /**\n   * Formats the message shown to users according to what's counted\n   * and how many remain\n   *\n   * @private\n   * @param {number} remainingNumber - The number of words/characaters remaining\n   * @param {string} countType - \"words\" or \"characters\"\n   * @returns {string} Status message\n   */\n  formatCountMessage(remainingNumber, countType) {\n    if (remainingNumber === 0) {\n      return this.i18n.t(`${countType}AtLimit`)\n    }\n\n    const translationKeySuffix =\n      remainingNumber < 0 ? 'OverLimit' : 'UnderLimit'\n\n    return this.i18n.t(`${countType}${translationKeySuffix}`, {\n      count: Math.abs(remainingNumber)\n    })\n  }\n\n  /**\n   * Check if count is over threshold\n   *\n   * Checks whether the value is over the configured threshold for the input.\n   * If there is no configured threshold, it is set to 0 and this function will\n   * always return true.\n   *\n   * @private\n   * @returns {boolean} true if the current count is over the config.threshold\n   *   (or no threshold is set)\n   */\n  isOverThreshold() {\n    // No threshold means we're always above threshold so save some computation\n    if (!this.config.threshold) {\n      return true\n    }\n\n    // Determine the remaining number of characters/words\n    const currentLength = this.count(this.$textarea.value)\n    const maxLength = this.maxLength\n\n    const thresholdValue = (maxLength * this.config.threshold) / 100\n\n    return thresholdValue <= currentLength\n  }\n\n  /**\n   * Name for the component used when initialising using data-module attributes.\n   */\n  static moduleName = 'govuk-character-count'\n\n  /**\n   * Character count default config\n   *\n   * @see {@link CharacterCountConfig}\n   * @constant\n   * @type {CharacterCountConfig}\n   */\n  static defaults = Object.freeze({\n    threshold: 0,\n    i18n: {\n      // Characters\n      charactersUnderLimit: {\n        one: 'You have %{count} character remaining',\n        other: 'You have %{count} characters remaining'\n      },\n      charactersAtLimit: 'You have 0 characters remaining',\n      charactersOverLimit: {\n        one: 'You have %{count} character too many',\n        other: 'You have %{count} characters too many'\n      },\n      // Words\n      wordsUnderLimit: {\n        one: 'You have %{count} word remaining',\n        other: 'You have %{count} words remaining'\n      },\n      wordsAtLimit: 'You have 0 words remaining',\n      wordsOverLimit: {\n        one: 'You have %{count} word too many',\n        other: 'You have %{count} words too many'\n      },\n      textareaDescription: {\n        other: ''\n      }\n    }\n  })\n\n  /**\n   * Character count config schema\n   *\n   * @constant\n   * @satisfies {Schema}\n   */\n  static schema = Object.freeze({\n    properties: {\n      i18n: { type: 'object' },\n      maxwords: { type: 'number' },\n      maxlength: { type: 'number' },\n      threshold: { type: 'number' }\n    },\n    anyOf: [\n      {\n        required: ['maxwords'],\n        errorMessage: 'Either \"maxlength\" or \"maxwords\" must be provided'\n      },\n      {\n        required: ['maxlength'],\n        errorMessage: 'Either \"maxlength\" or \"maxwords\" must be provided'\n      }\n    ]\n  })\n}\n\n/**\n * Character count config\n *\n * @see {@link CharacterCount.defaults}\n * @typedef {object} CharacterCountConfig\n * @property {number} [maxlength] - The maximum number of characters.\n *   If maxwords is provided, the maxlength option will be ignored.\n * @property {number} [maxwords] - The maximum number of words. If maxwords is\n *   provided, the maxlength option will be ignored.\n * @property {number} [threshold=0] - The percentage value of the limit at\n *   which point the count message is displayed. If this attribute is set, the\n *   count message will be hidden by default.\n * @property {CharacterCountTranslations} [i18n=CharacterCount.defaults.i18n] - Character count translations\n */\n\n/**\n * Character count translations\n *\n * @see {@link CharacterCount.defaults.i18n}\n * @typedef {object} CharacterCountTranslations\n *\n * Messages shown to users as they type. It provides feedback on how many words\n * or characters they have remaining or if they are over the limit. This also\n * includes a message used as an accessible description for the textarea.\n * @property {TranslationPluralForms} [charactersUnderLimit] - Message displayed\n *   when the number of characters is under the configured maximum, `maxlength`.\n *   This message is displayed visually and through assistive technologies. The\n *   component will replace the `%{count}` placeholder with the number of\n *   remaining characters. This is a [pluralised list of\n *   messages](https://frontend.design-system.service.gov.uk/localise-govuk-frontend).\n * @property {string} [charactersAtLimit] - Message displayed when the number of\n *   characters reaches the configured maximum, `maxlength`. This message is\n *   displayed visually and through assistive technologies.\n * @property {TranslationPluralForms} [charactersOverLimit] - Message displayed\n *   when the number of characters is over the configured maximum, `maxlength`.\n *   This message is displayed visually and through assistive technologies. The\n *   component will replace the `%{count}` placeholder with the number of\n *   remaining characters. This is a [pluralised list of\n *   messages](https://frontend.design-system.service.gov.uk/localise-govuk-frontend).\n * @property {TranslationPluralForms} [wordsUnderLimit] - Message displayed when\n *   the number of words is under the configured maximum, `maxlength`. This\n *   message is displayed visually and through assistive technologies. The\n *   component will replace the `%{count}` placeholder with the number of\n *   remaining words. This is a [pluralised list of\n *   messages](https://frontend.design-system.service.gov.uk/localise-govuk-frontend).\n * @property {string} [wordsAtLimit] - Message displayed when the number of\n *   words reaches the configured maximum, `maxlength`. This message is\n *   displayed visually and through assistive technologies.\n * @property {TranslationPluralForms} [wordsOverLimit] - Message displayed when\n *   the number of words is over the configured maximum, `maxlength`. This\n *   message is displayed visually and through assistive technologies. The\n *   component will replace the `%{count}` placeholder with the number of\n *   remaining words. This is a [pluralised list of\n *   messages](https://frontend.design-system.service.gov.uk/localise-govuk-frontend).\n * @property {TranslationPluralForms} [textareaDescription] - Message made\n *   available to assistive technologies, if none is already present in the\n *   HTML, to describe that the component accepts only a limited amount of\n *   content. It is visible on the page when JavaScript is unavailable. The\n *   component will replace the `%{count}` placeholder with the value of the\n *   `maxlength` or `maxwords` parameter.\n */\n\n/**\n * @typedef {import('../../common/index.mjs').Schema} Schema\n * @typedef {import('../../i18n.mjs').TranslationPluralForms} TranslationPluralForms\n */\n"],"names":["CharacterCount","GOVUKFrontendComponent","constructor","$module","config","_ref","_this$config$maxwords","$textarea","$visibleCountMessage","$screenReaderCountMessage","lastInputTimestamp","lastInputValue","valueChecker","i18n","maxLength","HTMLElement","ElementError","componentName","element","identifier","querySelector","HTMLTextAreaElement","HTMLInputElement","expectedType","datasetConfig","normaliseDataset","dataset","configOverrides","maxlength","undefined","maxwords","mergeConfigs","defaults","errors","validateConfig","schema","ConfigError","I18n","locale","closestAttributeValue","Infinity","textareaDescriptionId","id","$textareaDescription","document","getElementById","textContent","match","t","count","insertAdjacentElement","createElement","className","setAttribute","classList","add","removeAttribute","bindChangeEvents","window","addEventListener","updateCountMessage","handleKeyUp","handleFocus","handleBlur","updateVisibleCountMessage","Date","now","setInterval","updateIfValueChanged","clearInterval","value","updateScreenReaderCountMessage","remainingNumber","isError","toggle","isOverThreshold","getCountMessage","text","_text$match","tokens","length","countType","formatCountMessage","translationKeySuffix","Math","abs","threshold","currentLength","thresholdValue","moduleName","Object","freeze","charactersUnderLimit","one","other","charactersAtLimit","charactersOverLimit","wordsUnderLimit","wordsAtLimit","wordsOverLimit","textareaDescription","properties","type","anyOf","required","errorMessage"],"mappings":";;;;;;;AAOA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,cAAc,SAASC,sBAAsB,CAAC;AAwCzD;AACF;AACA;AACA;AACEC,EAAAA,WAAWA,CAACC,OAAO,EAAEC,MAAM,GAAG,EAAE,EAAE;IAAA,IAAAC,IAAA,EAAAC,qBAAA,CAAA;AAChC,IAAA,KAAK,EAAE,CAAA;AAAA,IAAA,IAAA,CA3CTH,OAAO,GAAA,KAAA,CAAA,CAAA;AAAA,IAAA,IAAA,CAGPI,SAAS,GAAA,KAAA,CAAA,CAAA;AAAA,IAAA,IAAA,CAGTC,oBAAoB,GAAA,KAAA,CAAA,CAAA;AAAA,IAAA,IAAA,CAGpBC,yBAAyB,GAAA,KAAA,CAAA,CAAA;IAAA,IAMzBC,CAAAA,kBAAkB,GAAG,IAAI,CAAA;IAAA,IAGzBC,CAAAA,cAAc,GAAG,EAAE,CAAA;IAAA,IAMnBC,CAAAA,YAAY,GAAG,IAAI,CAAA;AAAA,IAAA,IAAA,CAMnBR,MAAM,GAAA,KAAA,CAAA,CAAA;AAAA,IAAA,IAAA,CAGNS,IAAI,GAAA,KAAA,CAAA,CAAA;AAAA,IAAA,IAAA,CAGJC,SAAS,GAAA,KAAA,CAAA,CAAA;AASP,IAAA,IAAI,EAAEX,OAAO,YAAYY,WAAW,CAAC,EAAE;MACrC,MAAM,IAAIC,YAAY,CAAC;AACrBC,QAAAA,aAAa,EAAE,iBAAiB;AAChCC,QAAAA,OAAO,EAAEf,OAAO;AAChBgB,QAAAA,UAAU,EAAE,0BAAA;AACd,OAAC,CAAC,CAAA;AACJ,KAAA;AAEA,IAAA,MAAMZ,SAAS,GAAGJ,OAAO,CAACiB,aAAa,CAAC,2BAA2B,CAAC,CAAA;IACpE,IACE,EACEb,SAAS,YAAYc,mBAAmB,IACxCd,SAAS,YAAYe,gBAAgB,CACtC,EACD;MACA,MAAM,IAAIN,YAAY,CAAC;AACrBC,QAAAA,aAAa,EAAE,iBAAiB;AAChCC,QAAAA,OAAO,EAAEX,SAAS;AAClBgB,QAAAA,YAAY,EAAE,yCAAyC;AACvDJ,QAAAA,UAAU,EAAE,0CAAA;AACd,OAAC,CAAC,CAAA;AACJ,KAAA;IAGA,MAAMK,aAAa,GAAGC,gBAAgB,CAACzB,cAAc,EAAEG,OAAO,CAACuB,OAAO,CAAC,CAAA;IASvE,IAAIC,eAAe,GAAG,EAAE,CAAA;AACxB,IAAA,IAAI,UAAU,IAAIH,aAAa,IAAI,WAAW,IAAIA,aAAa,EAAE;AAC/DG,MAAAA,eAAe,GAAG;AAChBC,QAAAA,SAAS,EAAEC,SAAS;AACpBC,QAAAA,QAAQ,EAAED,SAAAA;OACX,CAAA;AACH,KAAA;AAEA,IAAA,IAAI,CAACzB,MAAM,GAAG2B,YAAY,CACxB/B,cAAc,CAACgC,QAAQ,EACvB5B,MAAM,EACNuB,eAAe,EACfH,aACF,CAAC,CAAA;IAGD,MAAMS,MAAM,GAAGC,cAAc,CAAClC,cAAc,CAACmC,MAAM,EAAE,IAAI,CAAC/B,MAAM,CAAC,CAAA;AACjE,IAAA,IAAI6B,MAAM,CAAC,CAAC,CAAC,EAAE;MACb,MAAM,IAAIG,WAAW,CAAE,CAAA,iBAAA,EAAmBH,MAAM,CAAC,CAAC,CAAE,CAAA,CAAC,CAAC,CAAA;AACxD,KAAA;IAEA,IAAI,CAACpB,IAAI,GAAG,IAAIwB,IAAI,CAAC,IAAI,CAACjC,MAAM,CAACS,IAAI,EAAE;AAErCyB,MAAAA,MAAM,EAAEC,qBAAqB,CAACpC,OAAO,EAAE,MAAM,CAAA;AAC/C,KAAC,CAAC,CAAA;IAGF,IAAI,CAACW,SAAS,GAAAT,CAAAA,IAAA,IAAAC,qBAAA,GAAG,IAAI,CAACF,MAAM,CAAC0B,QAAQ,KAAAxB,IAAAA,GAAAA,qBAAA,GAAI,IAAI,CAACF,MAAM,CAACwB,SAAS,KAAA,IAAA,GAAAvB,IAAA,GAAImC,QAAQ,CAAA;IAE1E,IAAI,CAACrC,OAAO,GAAGA,OAAO,CAAA;IACtB,IAAI,CAACI,SAAS,GAAGA,SAAS,CAAA;IAE1B,MAAMkC,qBAAqB,GAAI,CAAE,EAAA,IAAI,CAAClC,SAAS,CAACmC,EAAG,CAAM,KAAA,CAAA,CAAA;AACzD,IAAA,MAAMC,oBAAoB,GAAGC,QAAQ,CAACC,cAAc,CAACJ,qBAAqB,CAAC,CAAA;IAC3E,IAAI,CAACE,oBAAoB,EAAE;MACzB,MAAM,IAAI3B,YAAY,CAAC;AACrBC,QAAAA,aAAa,EAAE,iBAAiB;AAChCC,QAAAA,OAAO,EAAEyB,oBAAoB;QAC7BxB,UAAU,EAAG,wBAAuBsB,qBAAsB,CAAA,IAAA,CAAA;AAC5D,OAAC,CAAC,CAAA;AACJ,KAAA;IAKA,IAAK,CAAA,EAAEE,oBAAoB,CAACG,WAAY,CAAA,CAAC,CAACC,KAAK,CAAC,OAAO,CAAC,EAAE;MACxDJ,oBAAoB,CAACG,WAAW,GAAG,IAAI,CAACjC,IAAI,CAACmC,CAAC,CAAC,qBAAqB,EAAE;QACpEC,KAAK,EAAE,IAAI,CAACnC,SAAAA;AACd,OAAC,CAAC,CAAA;AACJ,KAAA;IAIA,IAAI,CAACP,SAAS,CAAC2C,qBAAqB,CAAC,UAAU,EAAEP,oBAAoB,CAAC,CAAA;AAItE,IAAA,MAAMlC,yBAAyB,GAAGmC,QAAQ,CAACO,aAAa,CAAC,KAAK,CAAC,CAAA;IAC/D1C,yBAAyB,CAAC2C,SAAS,GACjC,wDAAwD,CAAA;AAC1D3C,IAAAA,yBAAyB,CAAC4C,YAAY,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;IAC7D,IAAI,CAAC5C,yBAAyB,GAAGA,yBAAyB,CAAA;AAC1DkC,IAAAA,oBAAoB,CAACO,qBAAqB,CACxC,UAAU,EACVzC,yBACF,CAAC,CAAA;AAKD,IAAA,MAAMD,oBAAoB,GAAGoC,QAAQ,CAACO,aAAa,CAAC,KAAK,CAAC,CAAA;AAC1D3C,IAAAA,oBAAoB,CAAC4C,SAAS,GAAGT,oBAAoB,CAACS,SAAS,CAAA;AAC/D5C,IAAAA,oBAAoB,CAAC8C,SAAS,CAACC,GAAG,CAAC,+BAA+B,CAAC,CAAA;AACnE/C,IAAAA,oBAAoB,CAAC6C,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAA;IACxD,IAAI,CAAC7C,oBAAoB,GAAGA,oBAAoB,CAAA;AAChDmC,IAAAA,oBAAoB,CAACO,qBAAqB,CAAC,UAAU,EAAE1C,oBAAoB,CAAC,CAAA;AAG5EmC,IAAAA,oBAAoB,CAACW,SAAS,CAACC,GAAG,CAAC,uBAAuB,CAAC,CAAA;AAG3D,IAAA,IAAI,CAAChD,SAAS,CAACiD,eAAe,CAAC,WAAW,CAAC,CAAA;IAE3C,IAAI,CAACC,gBAAgB,EAAE,CAAA;IAKvBC,MAAM,CAACC,gBAAgB,CAAC,UAAU,EAAE,MAAM,IAAI,CAACC,kBAAkB,EAAE,CAAC,CAAA;IAKpE,IAAI,CAACA,kBAAkB,EAAE,CAAA;AAC3B,GAAA;AAUAH,EAAAA,gBAAgBA,GAAG;AACjB,IAAA,IAAI,CAAClD,SAAS,CAACoD,gBAAgB,CAAC,OAAO,EAAE,MAAM,IAAI,CAACE,WAAW,EAAE,CAAC,CAAA;AAGlE,IAAA,IAAI,CAACtD,SAAS,CAACoD,gBAAgB,CAAC,OAAO,EAAE,MAAM,IAAI,CAACG,WAAW,EAAE,CAAC,CAAA;AAClE,IAAA,IAAI,CAACvD,SAAS,CAACoD,gBAAgB,CAAC,MAAM,EAAE,MAAM,IAAI,CAACI,UAAU,EAAE,CAAC,CAAA;AAClE,GAAA;AAUAF,EAAAA,WAAWA,GAAG;IACZ,IAAI,CAACG,yBAAyB,EAAE,CAAA;AAChC,IAAA,IAAI,CAACtD,kBAAkB,GAAGuD,IAAI,CAACC,GAAG,EAAE,CAAA;AACtC,GAAA;AAiBAJ,EAAAA,WAAWA,GAAG;AACZ,IAAA,IAAI,CAAClD,YAAY,GAAG8C,MAAM,CAACS,WAAW,CAAC,MAAM;AAC3C,MAAA,IACE,CAAC,IAAI,CAACzD,kBAAkB,IACxBuD,IAAI,CAACC,GAAG,EAAE,GAAG,GAAG,IAAI,IAAI,CAACxD,kBAAkB,EAC3C;QACA,IAAI,CAAC0D,oBAAoB,EAAE,CAAA;AAC7B,OAAA;KACD,EAAE,IAAI,CAAC,CAAA;AACV,GAAA;AASAL,EAAAA,UAAUA,GAAG;IAEX,IAAI,IAAI,CAACnD,YAAY,EAAE;AACrB8C,MAAAA,MAAM,CAACW,aAAa,CAAC,IAAI,CAACzD,YAAY,CAAC,CAAA;AACzC,KAAA;AACF,GAAA;AAOAwD,EAAAA,oBAAoBA,GAAG;IACrB,IAAI,IAAI,CAAC7D,SAAS,CAAC+D,KAAK,KAAK,IAAI,CAAC3D,cAAc,EAAE;AAChD,MAAA,IAAI,CAACA,cAAc,GAAG,IAAI,CAACJ,SAAS,CAAC+D,KAAK,CAAA;MAC1C,IAAI,CAACV,kBAAkB,EAAE,CAAA;AAC3B,KAAA;AACF,GAAA;AAUAA,EAAAA,kBAAkBA,GAAG;IACnB,IAAI,CAACI,yBAAyB,EAAE,CAAA;IAChC,IAAI,CAACO,8BAA8B,EAAE,CAAA;AACvC,GAAA;AAOAP,EAAAA,yBAAyBA,GAAG;AAC1B,IAAA,MAAMQ,eAAe,GAAG,IAAI,CAAC1D,SAAS,GAAG,IAAI,CAACmC,KAAK,CAAC,IAAI,CAAC1C,SAAS,CAAC+D,KAAK,CAAC,CAAA;AACzE,IAAA,MAAMG,OAAO,GAAGD,eAAe,GAAG,CAAC,CAAA;AAInC,IAAA,IAAI,CAAChE,oBAAoB,CAAC8C,SAAS,CAACoB,MAAM,CACxC,0CAA0C,EAC1C,CAAC,IAAI,CAACC,eAAe,EACvB,CAAC,CAAA;IAGD,IAAI,CAACpE,SAAS,CAAC+C,SAAS,CAACoB,MAAM,CAAC,uBAAuB,EAAED,OAAO,CAAC,CAAA;IACjE,IAAI,CAACjE,oBAAoB,CAAC8C,SAAS,CAACoB,MAAM,CAAC,qBAAqB,EAAED,OAAO,CAAC,CAAA;IAC1E,IAAI,CAACjE,oBAAoB,CAAC8C,SAAS,CAACoB,MAAM,CAAC,YAAY,EAAE,CAACD,OAAO,CAAC,CAAA;IAGlE,IAAI,CAACjE,oBAAoB,CAACsC,WAAW,GAAG,IAAI,CAAC8B,eAAe,EAAE,CAAA;AAChE,GAAA;AAOAL,EAAAA,8BAA8BA,GAAG;AAG/B,IAAA,IAAI,IAAI,CAACI,eAAe,EAAE,EAAE;AAC1B,MAAA,IAAI,CAAClE,yBAAyB,CAAC+C,eAAe,CAAC,aAAa,CAAC,CAAA;AAC/D,KAAC,MAAM;MACL,IAAI,CAAC/C,yBAAyB,CAAC4C,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAA;AACpE,KAAA;IAGA,IAAI,CAAC5C,yBAAyB,CAACqC,WAAW,GAAG,IAAI,CAAC8B,eAAe,EAAE,CAAA;AACrE,GAAA;EAUA3B,KAAKA,CAAC4B,IAAI,EAAE;AACV,IAAA,IAAI,IAAI,CAACzE,MAAM,CAAC0B,QAAQ,EAAE;AAAA,MAAA,IAAAgD,WAAA,CAAA;AACxB,MAAA,MAAMC,MAAM,GAAA,CAAAD,WAAA,GAAGD,IAAI,CAAC9B,KAAK,CAAC,MAAM,CAAC,KAAA+B,IAAAA,GAAAA,WAAA,GAAI,EAAE,CAAA;MACvC,OAAOC,MAAM,CAACC,MAAM,CAAA;AACtB,KAAA;IAEA,OAAOH,IAAI,CAACG,MAAM,CAAA;AACpB,GAAA;AAQAJ,EAAAA,eAAeA,GAAG;AAChB,IAAA,MAAMJ,eAAe,GAAG,IAAI,CAAC1D,SAAS,GAAG,IAAI,CAACmC,KAAK,CAAC,IAAI,CAAC1C,SAAS,CAAC+D,KAAK,CAAC,CAAA;IACzE,MAAMW,SAAS,GAAG,IAAI,CAAC7E,MAAM,CAAC0B,QAAQ,GAAG,OAAO,GAAG,YAAY,CAAA;AAC/D,IAAA,OAAO,IAAI,CAACoD,kBAAkB,CAACV,eAAe,EAAES,SAAS,CAAC,CAAA;AAC5D,GAAA;AAWAC,EAAAA,kBAAkBA,CAACV,eAAe,EAAES,SAAS,EAAE;IAC7C,IAAIT,eAAe,KAAK,CAAC,EAAE;MACzB,OAAO,IAAI,CAAC3D,IAAI,CAACmC,CAAC,CAAE,CAAA,EAAEiC,SAAU,CAAA,OAAA,CAAQ,CAAC,CAAA;AAC3C,KAAA;IAEA,MAAME,oBAAoB,GACxBX,eAAe,GAAG,CAAC,GAAG,WAAW,GAAG,YAAY,CAAA;IAElD,OAAO,IAAI,CAAC3D,IAAI,CAACmC,CAAC,CAAE,CAAA,EAAEiC,SAAU,CAAA,EAAEE,oBAAqB,CAAA,CAAC,EAAE;AACxDlC,MAAAA,KAAK,EAAEmC,IAAI,CAACC,GAAG,CAACb,eAAe,CAAA;AACjC,KAAC,CAAC,CAAA;AACJ,GAAA;AAaAG,EAAAA,eAAeA,GAAG;AAEhB,IAAA,IAAI,CAAC,IAAI,CAACvE,MAAM,CAACkF,SAAS,EAAE;AAC1B,MAAA,OAAO,IAAI,CAAA;AACb,KAAA;IAGA,MAAMC,aAAa,GAAG,IAAI,CAACtC,KAAK,CAAC,IAAI,CAAC1C,SAAS,CAAC+D,KAAK,CAAC,CAAA;AACtD,IAAA,MAAMxD,SAAS,GAAG,IAAI,CAACA,SAAS,CAAA;IAEhC,MAAM0E,cAAc,GAAI1E,SAAS,GAAG,IAAI,CAACV,MAAM,CAACkF,SAAS,GAAI,GAAG,CAAA;IAEhE,OAAOE,cAAc,IAAID,aAAa,CAAA;AACxC,GAAA;AAmEF,CAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AA1gBavF,cAAc,CAyYlByF,UAAU,GAAG,uBAAuB,CAAA;AAzYhCzF,cAAc,CAkZlBgC,QAAQ,GAAG0D,MAAM,CAACC,MAAM,CAAC;AAC9BL,EAAAA,SAAS,EAAE,CAAC;AACZzE,EAAAA,IAAI,EAAE;AAEJ+E,IAAAA,oBAAoB,EAAE;AACpBC,MAAAA,GAAG,EAAE,uCAAuC;AAC5CC,MAAAA,KAAK,EAAE,wCAAA;KACR;AACDC,IAAAA,iBAAiB,EAAE,iCAAiC;AACpDC,IAAAA,mBAAmB,EAAE;AACnBH,MAAAA,GAAG,EAAE,sCAAsC;AAC3CC,MAAAA,KAAK,EAAE,uCAAA;KACR;AAEDG,IAAAA,eAAe,EAAE;AACfJ,MAAAA,GAAG,EAAE,kCAAkC;AACvCC,MAAAA,KAAK,EAAE,mCAAA;KACR;AACDI,IAAAA,YAAY,EAAE,4BAA4B;AAC1CC,IAAAA,cAAc,EAAE;AACdN,MAAAA,GAAG,EAAE,iCAAiC;AACtCC,MAAAA,KAAK,EAAE,kCAAA;KACR;AACDM,IAAAA,mBAAmB,EAAE;AACnBN,MAAAA,KAAK,EAAE,EAAA;AACT,KAAA;AACF,GAAA;AACF,CAAC,CAAC,CAAA;AA7aS9F,cAAc,CAqblBmC,MAAM,GAAGuD,MAAM,CAACC,MAAM,CAAC;AAC5BU,EAAAA,UAAU,EAAE;AACVxF,IAAAA,IAAI,EAAE;AAAEyF,MAAAA,IAAI,EAAE,QAAA;KAAU;AACxBxE,IAAAA,QAAQ,EAAE;AAAEwE,MAAAA,IAAI,EAAE,QAAA;KAAU;AAC5B1E,IAAAA,SAAS,EAAE;AAAE0E,MAAAA,IAAI,EAAE,QAAA;KAAU;AAC7BhB,IAAAA,SAAS,EAAE;AAAEgB,MAAAA,IAAI,EAAE,QAAA;AAAS,KAAA;GAC7B;AACDC,EAAAA,KAAK,EAAE,CACL;IACEC,QAAQ,EAAE,CAAC,UAAU,CAAC;AACtBC,IAAAA,YAAY,EAAE,mDAAA;AAChB,GAAC,EACD;IACED,QAAQ,EAAE,CAAC,WAAW,CAAC;AACvBC,IAAAA,YAAY,EAAE,mDAAA;GACf,CAAA;AAEL,CAAC,CAAC;;;;"}
+{"version":3,"file":"character-count.mjs","sources":["../../../../src/govuk/components/character-count/character-count.mjs"],"sourcesContent":["import { closestAttributeValue } from '../../common/closest-attribute-value.mjs'\nimport {\n  validateConfig,\n  ConfigurableComponent,\n  configOverride\n} from '../../common/configuration.mjs'\nimport { formatErrorMessage } from '../../common/index.mjs'\nimport { ConfigError, ElementError } from '../../errors/index.mjs'\nimport { I18n } from '../../i18n.mjs'\n\n/**\n * Character count component\n *\n * Tracks the number of characters or words in the `.govuk-js-character-count`\n * `<textarea>` inside the element. Displays a message with the remaining number\n * of characters/words available, or the number of characters/words in excess.\n *\n * You can configure the message to only appear after a certain percentage\n * of the available characters/words has been entered.\n *\n * @preserve\n * @augments ConfigurableComponent<CharacterCountConfig>\n */\nexport class CharacterCount extends ConfigurableComponent {\n  /** @private */\n  $textarea\n\n  /** @private */\n  $visibleCountMessage\n\n  /** @private */\n  $screenReaderCountMessage\n\n  /**\n   * @private\n   * @type {number | null}\n   */\n  lastInputTimestamp = null\n\n  /** @private */\n  lastInputValue = ''\n\n  /**\n   * @private\n   * @type {number | null}\n   */\n  valueChecker = null\n\n  /** @private */\n  i18n\n\n  /** @private */\n  maxLength;\n\n  /**\n   * Character count config override\n   *\n   * To ensure data-attributes take complete precedence, even if they change\n   * the type of count, we need to reset the `maxlength` and `maxwords` from\n   * the JavaScript config.\n   *\n   * @internal\n   * @param {CharacterCountConfig} datasetConfig - configuration specified by dataset\n   * @returns {CharacterCountConfig} - configuration to override by dataset\n   */\n  [configOverride](datasetConfig) {\n    let configOverrides = {}\n    if ('maxwords' in datasetConfig || 'maxlength' in datasetConfig) {\n      configOverrides = {\n        maxlength: undefined,\n        maxwords: undefined\n      }\n    }\n\n    return configOverrides\n  }\n\n  /**\n   * @param {Element | null} $root - HTML element to use for character count\n   * @param {CharacterCountConfig} [config] - Character count config\n   */\n  constructor($root, config = {}) {\n    super($root, config)\n\n    const $textarea = this.$root.querySelector('.govuk-js-character-count')\n    if (\n      !(\n        $textarea instanceof HTMLTextAreaElement ||\n        $textarea instanceof HTMLInputElement\n      )\n    ) {\n      throw new ElementError({\n        component: CharacterCount,\n        element: $textarea,\n        expectedType: 'HTMLTextareaElement or HTMLInputElement',\n        identifier: 'Form field (`.govuk-js-character-count`)'\n      })\n    }\n\n    // Check for valid config\n    const errors = validateConfig(CharacterCount.schema, this.config)\n    if (errors[0]) {\n      throw new ConfigError(formatErrorMessage(CharacterCount, errors[0]))\n    }\n\n    this.i18n = new I18n(this.config.i18n, {\n      // Read the fallback if necessary rather than have it set in the defaults\n      locale: closestAttributeValue(this.$root, 'lang')\n    })\n\n    // Determine the limit attribute (characters or words)\n    this.maxLength = this.config.maxwords ?? this.config.maxlength ?? Infinity\n\n    this.$textarea = $textarea\n\n    const textareaDescriptionId = `${this.$textarea.id}-info`\n    const $textareaDescription = document.getElementById(textareaDescriptionId)\n    if (!$textareaDescription) {\n      throw new ElementError({\n        component: CharacterCount,\n        element: $textareaDescription,\n        identifier: `Count message (\\`id=\"${textareaDescriptionId}\"\\`)`\n      })\n    }\n\n    // Pre-existing validation error rendered from server\n    this.$errorMessage = this.$root.querySelector('.govuk-error-message')\n\n    // Inject a description for the textarea if none is present already\n    // for when the component was rendered with no maxlength, maxwords\n    // nor custom textareaDescriptionText\n    if (`${$textareaDescription.textContent}`.match(/^\\s*$/)) {\n      $textareaDescription.textContent = this.i18n.t('textareaDescription', {\n        count: this.maxLength\n      })\n    }\n\n    // Move the textarea description to be immediately after the textarea\n    // Kept for backwards compatibility\n    this.$textarea.insertAdjacentElement('afterend', $textareaDescription)\n\n    // Create the *screen reader* specific live-updating counter\n    // This doesn't need any styling classes, as it is never visible\n    const $screenReaderCountMessage = document.createElement('div')\n    $screenReaderCountMessage.className =\n      'govuk-character-count__sr-status govuk-visually-hidden'\n    $screenReaderCountMessage.setAttribute('aria-live', 'polite')\n    this.$screenReaderCountMessage = $screenReaderCountMessage\n    $textareaDescription.insertAdjacentElement(\n      'afterend',\n      $screenReaderCountMessage\n    )\n\n    // Create our live-updating counter element, copying the classes from the\n    // textarea description for backwards compatibility as these may have been\n    // configured\n    const $visibleCountMessage = document.createElement('div')\n    $visibleCountMessage.className = $textareaDescription.className\n    $visibleCountMessage.classList.add('govuk-character-count__status')\n    $visibleCountMessage.setAttribute('aria-hidden', 'true')\n    this.$visibleCountMessage = $visibleCountMessage\n    $textareaDescription.insertAdjacentElement('afterend', $visibleCountMessage)\n\n    // Hide the textarea description\n    $textareaDescription.classList.add('govuk-visually-hidden')\n\n    // Remove hard limit if set\n    this.$textarea.removeAttribute('maxlength')\n\n    this.bindChangeEvents()\n\n    // When the page is restored after navigating 'back' in some browsers the\n    // state of form controls is not restored until *after* the DOMContentLoaded\n    // event is fired, so we need to sync after the pageshow event.\n    window.addEventListener('pageshow', () => this.updateCountMessage())\n\n    // Although we've set up handlers to sync state on the pageshow event, init\n    // could be called after those events have fired, for example if they are\n    // added to the page dynamically, so update now too.\n    this.updateCountMessage()\n  }\n\n  /**\n   * Bind change events\n   *\n   * Set up event listeners on the $textarea so that the count messages update\n   * when the user types.\n   *\n   * @private\n   */\n  bindChangeEvents() {\n    this.$textarea.addEventListener('keyup', () => this.handleKeyUp())\n\n    // Bind focus/blur events to start/stop polling\n    this.$textarea.addEventListener('focus', () => this.handleFocus())\n    this.$textarea.addEventListener('blur', () => this.handleBlur())\n  }\n\n  /**\n   * Handle key up event\n   *\n   * Update the visible character counter and keep track of when the last update\n   * happened for each keypress\n   *\n   * @private\n   */\n  handleKeyUp() {\n    this.updateVisibleCountMessage()\n    this.lastInputTimestamp = Date.now()\n  }\n\n  /**\n   * Handle focus event\n   *\n   * Speech recognition software such as Dragon NaturallySpeaking will modify\n   * the fields by directly changing its `value`. These changes don't trigger\n   * events in JavaScript, so we need to poll to handle when and if they occur.\n   *\n   * Once the keyup event hasn't been detected for at least 1000 ms (1s), check\n   * if the textarea value has changed and update the count message if it has.\n   *\n   * This is so that the update triggered by the manual comparison doesn't\n   * conflict with debounced KeyboardEvent updates.\n   *\n   * @private\n   */\n  handleFocus() {\n    this.valueChecker = window.setInterval(() => {\n      if (\n        !this.lastInputTimestamp ||\n        Date.now() - 500 >= this.lastInputTimestamp\n      ) {\n        this.updateIfValueChanged()\n      }\n    }, 1000)\n  }\n\n  /**\n   * Handle blur event\n   *\n   * Stop checking the textarea value once the textarea no longer has focus\n   *\n   * @private\n   */\n  handleBlur() {\n    // Cancel value checking on blur\n    if (this.valueChecker) {\n      window.clearInterval(this.valueChecker)\n    }\n  }\n\n  /**\n   * Update count message if textarea value has changed\n   *\n   * @private\n   */\n  updateIfValueChanged() {\n    if (this.$textarea.value !== this.lastInputValue) {\n      this.lastInputValue = this.$textarea.value\n      this.updateCountMessage()\n    }\n  }\n\n  /**\n   * Update count message\n   *\n   * Helper function to update both the visible and screen reader-specific\n   * counters simultaneously (e.g. on init)\n   *\n   * @private\n   */\n  updateCountMessage() {\n    this.updateVisibleCountMessage()\n    this.updateScreenReaderCountMessage()\n  }\n\n  /**\n   * Update visible count message\n   *\n   * @private\n   */\n  updateVisibleCountMessage() {\n    const remainingNumber = this.maxLength - this.count(this.$textarea.value)\n    const isError = remainingNumber < 0\n\n    // If input is over the threshold, remove the disabled class which renders\n    // the counter invisible.\n    this.$visibleCountMessage.classList.toggle(\n      'govuk-character-count__message--disabled',\n      !this.isOverThreshold()\n    )\n\n    // Update styles\n    if (!this.$errorMessage) {\n      // Only toggle the textarea error class if there isn't an error message\n      // already, as it may be unrelated to the limit (eg: allowed characters)\n      // and would set the border colour back to black.\n      this.$textarea.classList.toggle('govuk-textarea--error', isError)\n    }\n    this.$visibleCountMessage.classList.toggle('govuk-error-message', isError)\n    this.$visibleCountMessage.classList.toggle('govuk-hint', !isError)\n\n    // Update message\n    this.$visibleCountMessage.textContent = this.getCountMessage()\n  }\n\n  /**\n   * Update screen reader count message\n   *\n   * @private\n   */\n  updateScreenReaderCountMessage() {\n    // If over the threshold, remove the aria-hidden attribute, allowing screen\n    // readers to announce the content of the element.\n    if (this.isOverThreshold()) {\n      this.$screenReaderCountMessage.removeAttribute('aria-hidden')\n    } else {\n      this.$screenReaderCountMessage.setAttribute('aria-hidden', 'true')\n    }\n\n    // Update message\n    this.$screenReaderCountMessage.textContent = this.getCountMessage()\n  }\n\n  /**\n   * Count the number of characters (or words, if `config.maxwords` is set)\n   * in the given text\n   *\n   * @private\n   * @param {string} text - The text to count the characters of\n   * @returns {number} the number of characters (or words) in the text\n   */\n  count(text) {\n    if (this.config.maxwords) {\n      const tokens = text.match(/\\S+/g) ?? [] // Matches consecutive non-whitespace chars\n      return tokens.length\n    }\n\n    return text.length\n  }\n\n  /**\n   * Get count message\n   *\n   * @private\n   * @returns {string} Status message\n   */\n  getCountMessage() {\n    const remainingNumber = this.maxLength - this.count(this.$textarea.value)\n    const countType = this.config.maxwords ? 'words' : 'characters'\n    return this.formatCountMessage(remainingNumber, countType)\n  }\n\n  /**\n   * Formats the message shown to users according to what's counted\n   * and how many remain\n   *\n   * @private\n   * @param {number} remainingNumber - The number of words/characaters remaining\n   * @param {string} countType - \"words\" or \"characters\"\n   * @returns {string} Status message\n   */\n  formatCountMessage(remainingNumber, countType) {\n    if (remainingNumber === 0) {\n      return this.i18n.t(`${countType}AtLimit`)\n    }\n\n    const translationKeySuffix =\n      remainingNumber < 0 ? 'OverLimit' : 'UnderLimit'\n\n    return this.i18n.t(`${countType}${translationKeySuffix}`, {\n      count: Math.abs(remainingNumber)\n    })\n  }\n\n  /**\n   * Check if count is over threshold\n   *\n   * Checks whether the value is over the configured threshold for the input.\n   * If there is no configured threshold, it is set to 0 and this function will\n   * always return true.\n   *\n   * @private\n   * @returns {boolean} true if the current count is over the config.threshold\n   *   (or no threshold is set)\n   */\n  isOverThreshold() {\n    // No threshold means we're always above threshold so save some computation\n    if (!this.config.threshold) {\n      return true\n    }\n\n    // Determine the remaining number of characters/words\n    const currentLength = this.count(this.$textarea.value)\n    const maxLength = this.maxLength\n\n    const thresholdValue = (maxLength * this.config.threshold) / 100\n\n    return thresholdValue <= currentLength\n  }\n\n  /**\n   * Name for the component used when initialising using data-module attributes.\n   */\n  static moduleName = 'govuk-character-count'\n\n  /**\n   * Character count default config\n   *\n   * @see {@link CharacterCountConfig}\n   * @constant\n   * @type {CharacterCountConfig}\n   */\n  static defaults = Object.freeze({\n    threshold: 0,\n    i18n: {\n      // Characters\n      charactersUnderLimit: {\n        one: 'You have %{count} character remaining',\n        other: 'You have %{count} characters remaining'\n      },\n      charactersAtLimit: 'You have 0 characters remaining',\n      charactersOverLimit: {\n        one: 'You have %{count} character too many',\n        other: 'You have %{count} characters too many'\n      },\n      // Words\n      wordsUnderLimit: {\n        one: 'You have %{count} word remaining',\n        other: 'You have %{count} words remaining'\n      },\n      wordsAtLimit: 'You have 0 words remaining',\n      wordsOverLimit: {\n        one: 'You have %{count} word too many',\n        other: 'You have %{count} words too many'\n      },\n      textareaDescription: {\n        other: ''\n      }\n    }\n  })\n\n  /**\n   * Character count config schema\n   *\n   * @constant\n   * @satisfies {Schema<CharacterCountConfig>}\n   */\n  static schema = Object.freeze({\n    properties: {\n      i18n: { type: 'object' },\n      maxwords: { type: 'number' },\n      maxlength: { type: 'number' },\n      threshold: { type: 'number' }\n    },\n    anyOf: [\n      {\n        required: ['maxwords'],\n        errorMessage: 'Either \"maxlength\" or \"maxwords\" must be provided'\n      },\n      {\n        required: ['maxlength'],\n        errorMessage: 'Either \"maxlength\" or \"maxwords\" must be provided'\n      }\n    ]\n  })\n}\n\n/**\n * Character count config\n *\n * @see {@link CharacterCount.defaults}\n * @typedef {object} CharacterCountConfig\n * @property {number} [maxlength] - The maximum number of characters.\n *   If maxwords is provided, the maxlength option will be ignored.\n * @property {number} [maxwords] - The maximum number of words. If maxwords is\n *   provided, the maxlength option will be ignored.\n * @property {number} [threshold=0] - The percentage value of the limit at\n *   which point the count message is displayed. If this attribute is set, the\n *   count message will be hidden by default.\n * @property {CharacterCountTranslations} [i18n=CharacterCount.defaults.i18n] - Character count translations\n */\n\n/**\n * Character count translations\n *\n * @see {@link CharacterCount.defaults.i18n}\n * @typedef {object} CharacterCountTranslations\n *\n * Messages shown to users as they type. It provides feedback on how many words\n * or characters they have remaining or if they are over the limit. This also\n * includes a message used as an accessible description for the textarea.\n * @property {TranslationPluralForms} [charactersUnderLimit] - Message displayed\n *   when the number of characters is under the configured maximum, `maxlength`.\n *   This message is displayed visually and through assistive technologies. The\n *   component will replace the `%{count}` placeholder with the number of\n *   remaining characters. This is a [pluralised list of\n *   messages](https://frontend.design-system.service.gov.uk/localise-govuk-frontend).\n * @property {string} [charactersAtLimit] - Message displayed when the number of\n *   characters reaches the configured maximum, `maxlength`. This message is\n *   displayed visually and through assistive technologies.\n * @property {TranslationPluralForms} [charactersOverLimit] - Message displayed\n *   when the number of characters is over the configured maximum, `maxlength`.\n *   This message is displayed visually and through assistive technologies. The\n *   component will replace the `%{count}` placeholder with the number of\n *   remaining characters. This is a [pluralised list of\n *   messages](https://frontend.design-system.service.gov.uk/localise-govuk-frontend).\n * @property {TranslationPluralForms} [wordsUnderLimit] - Message displayed when\n *   the number of words is under the configured maximum, `maxlength`. This\n *   message is displayed visually and through assistive technologies. The\n *   component will replace the `%{count}` placeholder with the number of\n *   remaining words. This is a [pluralised list of\n *   messages](https://frontend.design-system.service.gov.uk/localise-govuk-frontend).\n * @property {string} [wordsAtLimit] - Message displayed when the number of\n *   words reaches the configured maximum, `maxlength`. This message is\n *   displayed visually and through assistive technologies.\n * @property {TranslationPluralForms} [wordsOverLimit] - Message displayed when\n *   the number of words is over the configured maximum, `maxlength`. This\n *   message is displayed visually and through assistive technologies. The\n *   component will replace the `%{count}` placeholder with the number of\n *   remaining words. This is a [pluralised list of\n *   messages](https://frontend.design-system.service.gov.uk/localise-govuk-frontend).\n * @property {TranslationPluralForms} [textareaDescription] - Message made\n *   available to assistive technologies, if none is already present in the\n *   HTML, to describe that the component accepts only a limited amount of\n *   content. It is visible on the page when JavaScript is unavailable. The\n *   component will replace the `%{count}` placeholder with the value of the\n *   `maxlength` or `maxwords` parameter.\n */\n\n/**\n * @import { Schema } from '../../common/configuration.mjs'\n * @import { TranslationPluralForms } from '../../i18n.mjs'\n */\n"],"names":["CharacterCount","ConfigurableComponent","configOverride","datasetConfig","configOverrides","maxlength","undefined","maxwords","constructor","$root","config","_ref","_this$config$maxwords","$textarea","$visibleCountMessage","$screenReaderCountMessage","lastInputTimestamp","lastInputValue","valueChecker","i18n","maxLength","querySelector","HTMLTextAreaElement","HTMLInputElement","ElementError","component","element","expectedType","identifier","errors","validateConfig","schema","ConfigError","formatErrorMessage","I18n","locale","closestAttributeValue","Infinity","textareaDescriptionId","id","$textareaDescription","document","getElementById","$errorMessage","textContent","match","t","count","insertAdjacentElement","createElement","className","setAttribute","classList","add","removeAttribute","bindChangeEvents","window","addEventListener","updateCountMessage","handleKeyUp","handleFocus","handleBlur","updateVisibleCountMessage","Date","now","setInterval","updateIfValueChanged","clearInterval","value","updateScreenReaderCountMessage","remainingNumber","isError","toggle","isOverThreshold","getCountMessage","text","_text$match","tokens","length","countType","formatCountMessage","translationKeySuffix","Math","abs","threshold","currentLength","thresholdValue","moduleName","defaults","Object","freeze","charactersUnderLimit","one","other","charactersAtLimit","charactersOverLimit","wordsUnderLimit","wordsAtLimit","wordsOverLimit","textareaDescription","properties","type","anyOf","required","errorMessage"],"mappings":"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"}

data/node_modules/govuk-frontend/dist/govuk/components/character-count/fixtures.json

@@ -5,7 +5,6 @@
             "name": "default",
             "options": {
                 "name": "more-detail",
-                "id": "more-detail",
                 "maxlength": 10,
                 "label": {
                     "text": "Can you provide more detail?"
@@ -14,6 +13,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <label class=\"govuk-label\" for=\"more-detail\">\n    Can you provide more detail?\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"more-detail\" name=\"more-detail\" rows=\"5\" aria-describedby=\"more-detail-info\"></textarea>\n  <div id=\"more-detail-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 characters\n  </div>\n</div>"
         },
         {
@@ -30,6 +30,7 @@
             "hidden": false,
             "description": "with textarea description translated into Welsh.",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <label class=\"govuk-label\" for=\"custom-textarea-description\">\n    Can you provide more detail?\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"custom-textarea-description\" name=\"custom-textarea-description\" rows=\"5\" aria-describedby=\"custom-textarea-description-info\"></textarea>\n  <div id=\"custom-textarea-description-info\" class=\"govuk-hint govuk-character-count__message\">\n    Gallwch ddefnyddio hyd at 10 nod\n  </div>\n</div>"
         },
         {
@@ -48,8 +49,50 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <label class=\"govuk-label\" for=\"with-hint\">\n    Can you provide more detail?\n  </label>\n  <div id=\"with-hint-hint\" class=\"govuk-hint\">\n    Don&#39;t include personal or financial information, eg your National Insurance number or credit card details.\n  </div>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-hint\" name=\"with-hint\" rows=\"5\" aria-describedby=\"with-hint-info with-hint-hint\"></textarea>\n  <div id=\"with-hint-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 characters\n  </div>\n</div>"
         },
+        {
+            "name": "with error",
+            "options": {
+                "name": "with-error",
+                "id": "with-error",
+                "maxlength": 10,
+                "label": {
+                    "text": "Can you provide more detail?"
+                },
+                "errorMessage": {
+                    "text": "Please provide more detail"
+                }
+            },
+            "hidden": false,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "screenshot": false,
+            "html": "<div class=\"govuk-form-group govuk-form-group--error govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <label class=\"govuk-label\" for=\"with-error\">\n    Can you provide more detail?\n  </label>\n  <p id=\"with-error-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Please provide more detail\n  </p>\n  <textarea class=\"govuk-textarea govuk-textarea--error govuk-js-character-count\" id=\"with-error\" name=\"with-error\" rows=\"5\" aria-describedby=\"with-error-info with-error-error\"></textarea>\n  <div id=\"with-error-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 characters\n  </div>\n</div>"
+        },
+        {
+            "name": "with hint and error",
+            "options": {
+                "name": "with-error",
+                "id": "with-error",
+                "maxlength": 10,
+                "label": {
+                    "text": "Can you provide more detail?"
+                },
+                "errorMessage": {
+                    "text": "Please provide more detail"
+                },
+                "hint": {
+                    "text": "Don't include personal or financial information, eg your National Insurance number or credit card details."
+                }
+            },
+            "hidden": false,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "screenshot": false,
+            "html": "<div class=\"govuk-form-group govuk-form-group--error govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <label class=\"govuk-label\" for=\"with-error\">\n    Can you provide more detail?\n  </label>\n  <div id=\"with-error-hint\" class=\"govuk-hint\">\n    Don&#39;t include personal or financial information, eg your National Insurance number or credit card details.\n  </div>\n  <p id=\"with-error-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Please provide more detail\n  </p>\n  <textarea class=\"govuk-textarea govuk-textarea--error govuk-js-character-count\" id=\"with-error\" name=\"with-error\" rows=\"5\" aria-describedby=\"with-error-info with-error-hint with-error-error\"></textarea>\n  <div id=\"with-error-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 characters\n  </div>\n</div>"
+        },
         {
             "name": "with default value",
             "options": {
@@ -64,6 +107,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"100\">\n  <label class=\"govuk-label\" for=\"with-default-value\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-default-value\" name=\"default-value\" rows=\"5\" aria-describedby=\"with-default-value-info\">221B Baker Street\nLondon\nNW1 6XE\n</textarea>\n  <div id=\"with-default-value-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 100 characters\n  </div>\n</div>"
         },
         {
@@ -83,6 +127,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-form-group--error govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <label class=\"govuk-label\" for=\"exceeding-characters\">\n    Full address\n  </label>\n  <p id=\"exceeding-characters-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Please do not exceed the maximum allowed limit\n  </p>\n  <textarea class=\"govuk-textarea govuk-textarea--error govuk-js-character-count\" id=\"exceeding-characters\" name=\"exceeding\" rows=\"5\" aria-describedby=\"exceeding-characters-info exceeding-characters-error\">221B Baker Street\nLondon\nNW1 6XE\n</textarea>\n  <div id=\"exceeding-characters-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 characters\n  </div>\n</div>"
         },
         {
@@ -99,6 +144,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <label class=\"govuk-label\" for=\"custom-rows\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"custom-rows\" name=\"custom\" rows=\"8\" aria-describedby=\"custom-rows-info\"></textarea>\n  <div id=\"custom-rows-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 characters\n  </div>\n</div>"
         },
         {
@@ -116,6 +162,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <h1 class=\"govuk-label-wrapper\">\n    <label class=\"govuk-label govuk-label--l\" for=\"textarea-with-page-heading\">\n      Full address\n    </label>\n  </h1>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"textarea-with-page-heading\" name=\"address\" rows=\"5\" aria-describedby=\"textarea-with-page-heading-info\"></textarea>\n  <div id=\"textarea-with-page-heading-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 characters\n  </div>\n</div>"
         },
         {
@@ -131,6 +178,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"10\">\n  <label class=\"govuk-label\" for=\"word-count\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"word-count\" name=\"word-count\" rows=\"5\" aria-describedby=\"word-count-info\"></textarea>\n  <div id=\"word-count-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 words\n  </div>\n</div>"
         },
         {
@@ -147,6 +195,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\" data-threshold=\"75\">\n  <label class=\"govuk-label\" for=\"with-threshold\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-threshold\" name=\"with-threshold\" rows=\"5\" aria-describedby=\"with-threshold-info\"></textarea>\n  <div id=\"with-threshold-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 characters\n  </div>\n</div>"
         },
         {
@@ -180,6 +229,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\" data-i18n.characters-under-limit.other=\"%{count} characters to go\" data-i18n.characters-under-limit.one=\"One character to go\" data-i18n.characters-at-limit=\"Zero characters left\" data-i18n.characters-over-limit.other=\"%{count} characters too many\" data-i18n.characters-over-limit.one=\"One character too many\" data-i18n.words-under-limit.other=\"%{count} words to go\" data-i18n.words-under-limit.one=\"One word to go\" data-i18n.words-at-limit=\"Zero words left\" data-i18n.words-over-limit.other=\"%{count} words too many\" data-i18n.words-over-limit.one=\"One word too many\">\n  <label class=\"govuk-label\" for=\"with-translations\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-translations\" name=\"with-translations\" rows=\"5\" aria-describedby=\"with-translations-info\"></textarea>\n  <div id=\"with-translations-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 characters\n  </div>\n</div>"
         },
         {
@@ -196,8 +246,25 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <label class=\"govuk-label\" for=\"with-classes\">\n    With classes\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count app-character-count--custom-modifier\" id=\"with-classes\" name=\"with-classes\" rows=\"5\" aria-describedby=\"with-classes-info\"></textarea>\n  <div id=\"with-classes-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 characters\n  </div>\n</div>"
         },
+        {
+            "name": "id",
+            "options": {
+                "id": "character-count-id",
+                "name": "test-name",
+                "maxlength": 10,
+                "label": {
+                    "text": "With custom id"
+                }
+            },
+            "hidden": true,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "screenshot": false,
+            "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <label class=\"govuk-label\" for=\"character-count-id\">\n    With custom id\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"character-count-id\" name=\"test-name\" rows=\"5\" aria-describedby=\"character-count-id-info\"></textarea>\n  <div id=\"character-count-id-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 characters\n  </div>\n</div>"
+        },
         {
             "name": "attributes",
             "options": {
@@ -214,6 +281,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <label class=\"govuk-label\" for=\"with-attributes\">\n    With attributes\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-attributes\" name=\"with-attributes\" rows=\"5\" aria-describedby=\"with-attributes-info\" data-attribute=\"my data value\"></textarea>\n  <div id=\"with-attributes-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 characters\n  </div>\n</div>"
         },
         {
@@ -232,6 +300,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-character-count app-character-count--custom-modifier\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <label class=\"govuk-label\" for=\"with-formgroup\">\n    With formgroup\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-formgroup\" name=\"with-formgroup\" rows=\"5\" aria-describedby=\"with-formgroup-info\"></textarea>\n  <div id=\"with-formgroup-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 characters\n  </div>\n</div>"
         },
         {
@@ -250,6 +319,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <label class=\"govuk-label\" for=\"with-custom-countmessage-class\">\n    With custom countMessage class\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-custom-countmessage-class\" name=\"with-custom-countmessage-class\" rows=\"5\" aria-describedby=\"with-custom-countmessage-class-info\"></textarea>\n  <div id=\"with-custom-countmessage-class-info\" class=\"govuk-hint govuk-character-count__message app-custom-count-message\">\n    You can enter up to 10 characters\n  </div>\n</div>"
         },
         {
@@ -266,6 +336,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <label class=\"govuk-label\" for=\"with-spellcheck\">\n    With spellcheck\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-spellcheck\" name=\"with-spellcheck\" rows=\"5\" spellcheck=\"true\" aria-describedby=\"with-spellcheck-info\"></textarea>\n  <div id=\"with-spellcheck-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 characters\n  </div>\n</div>"
         },
         {
@@ -282,6 +353,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <label class=\"govuk-label\" for=\"without-spellcheck\">\n    Without spellcheck\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"without-spellcheck\" name=\"without-spellcheck\" rows=\"5\" spellcheck=\"false\" aria-describedby=\"without-spellcheck-info\"></textarea>\n  <div id=\"without-spellcheck-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 characters\n  </div>\n</div>"
         },
         {
@@ -301,6 +373,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-form-group--error govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <label class=\"govuk-label\" for=\"with-custom-error-class\">\n    With custom error class\n  </label>\n  <p id=\"with-custom-error-class-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n  <textarea class=\"govuk-textarea govuk-textarea--error govuk-js-character-count app-character-count--custom-modifier\" id=\"with-custom-error-class\" name=\"with-custom-error-class\" rows=\"5\" aria-describedby=\"with-custom-error-class-info with-custom-error-class-error\"></textarea>\n  <div id=\"with-custom-error-class-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 characters\n  </div>\n</div>"
         },
         {
@@ -316,6 +389,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <label class=\"govuk-label\" for=\"1_more-detail\">\n    Can you provide more detail?\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"1_more-detail\" name=\"more-detail\" rows=\"5\" aria-describedby=\"1_more-detail-info\"></textarea>\n  <div id=\"1_more-detail-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 characters\n  </div>\n</div>"
         },
         {
@@ -331,6 +405,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <label class=\"govuk-label\" for=\"user1.profile[address]\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"user1.profile[address]\" name=\"address\" rows=\"5\" aria-describedby=\"user1.profile[address]-info\"></textarea>\n  <div id=\"user1.profile[address]-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 characters\n  </div>\n</div>"
         },
         {
@@ -349,6 +424,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <label class=\"govuk-label\" for=\"maxlength-should-be-removed\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"maxlength-should-be-removed\" name=\"address\" rows=\"5\" aria-describedby=\"maxlength-should-be-removed-info\" maxlength=\"10\"></textarea>\n  <div id=\"maxlength-should-be-removed-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 characters\n  </div>\n</div>"
         },
         {
@@ -363,6 +439,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\">\n  <label class=\"govuk-label\" for=\"to-configure-in-javascript\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"to-configure-in-javascript\" name=\"address\" rows=\"5\" aria-describedby=\"to-configure-in-javascript-info\"></textarea>\n  <div id=\"to-configure-in-javascript-info\" class=\"govuk-hint govuk-character-count__message\">\n    \n  </div>\n</div>"
         },
         {
@@ -378,6 +455,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-i18n.textarea-description.other=\"No more than %{count} characters\">\n  <label class=\"govuk-label\" for=\"no-maximum\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"no-maximum\" name=\"no-maximum\" rows=\"5\" aria-describedby=\"no-maximum-info\"></textarea>\n  <div id=\"no-maximum-info\" class=\"govuk-hint govuk-character-count__message\">\n    \n  </div>\n</div>"
         },
         {
@@ -392,6 +470,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\">\n  <label class=\"govuk-label\" for=\"no-maximum\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"no-maximum\" name=\"no-maximum\" rows=\"5\" aria-describedby=\"no-maximum-info\"></textarea>\n  <div id=\"no-maximum-info\" class=\"govuk-hint govuk-character-count__message\">\n    \n  </div>\n</div>"
         }
     ]

data/node_modules/govuk-frontend/dist/govuk/components/character-count/macro-options.json

@@ -2,8 +2,8 @@
     {
         "name": "id",
         "type": "string",
-        "required": true,
-        "description": "The ID of the textarea."
+        "required": false,
+        "description": "The ID of the textarea. Defaults to the value of `name`."
     },
     {
         "name": "name",
@@ -164,7 +164,7 @@
         "name": "charactersUnderLimitText",
         "type": "object",
         "required": false,
-        "description": "Message displayed when the number of characters is under the configured maximum, `maxlength`. This message is displayed visually and through assistive technologies. The component will replace the `%{count}` placeholder with the number of remaining characters. This is a [pluralised list of messages](https://frontend.design-system.service.gov.uk/localise-govuk-frontend)."
+        "description": "Message displayed when the number of characters is under the configured maximum, `maxlength`. This message is displayed visually and through assistive technologies. The component will replace the `%{count}` placeholder with the number of remaining characters. [Our pluralisation rules apply to this macro option](https://frontend.design-system.service.gov.uk/localise-govuk-frontend/#understanding-pluralisation-rules)."
     },
     {
         "name": "charactersAtLimitText",
@@ -176,13 +176,13 @@
         "name": "charactersOverLimitText",
         "type": "object",
         "required": false,
-        "description": "Message displayed when the number of characters is over the configured maximum, `maxlength`. This message is displayed visually and through assistive technologies. The component will replace the `%{count}` placeholder with the number of characters above the maximum. This is a [pluralised list of messages](https://frontend.design-system.service.gov.uk/localise-govuk-frontend)."
+        "description": "Message displayed when the number of characters is over the configured maximum, `maxlength`. This message is displayed visually and through assistive technologies. The component will replace the `%{count}` placeholder with the number of characters above the maximum.[Our pluralisation rules apply to this macro option](https://frontend.design-system.service.gov.uk/localise-govuk-frontend/#understanding-pluralisation-rules)."
     },
     {
         "name": "wordsUnderLimitText",
         "type": "object",
         "required": false,
-        "description": "Message displayed when the number of words is under the configured maximum, `maxwords`. This message is displayed visually and through assistive technologies. The component will replace the `%{count}` placeholder with the number of remaining words. This is a [pluralised list of messages](https://frontend.design-system.service.gov.uk/localise-govuk-frontend)."
+        "description": "Message displayed when the number of words is under the configured maximum, `maxwords`. This message is displayed visually and through assistive technologies. The component will replace the `%{count}` placeholder with the number of remaining words. [Our pluralisation rules apply to this macro option](https://frontend.design-system.service.gov.uk/localise-govuk-frontend/#understanding-pluralisation-rules)."
     },
     {
         "name": "wordsAtLimitText",
@@ -194,6 +194,6 @@
         "name": "wordsOverLimitText",
         "type": "object",
         "required": false,
-        "description": "Message displayed when the number of words is over the configured maximum, `maxwords`. This message is displayed visually and through assistive technologies. The component will replace the `%{count}` placeholder with the number of characters above the maximum. This is a [pluralised list of messages](https://frontend.design-system.service.gov.uk/localise-govuk-frontend)."
+        "description": "Message displayed when the number of words is over the configured maximum, `maxwords`. This message is displayed visually and through assistive technologies. The component will replace the `%{count}` placeholder with the number of characters above the maximum. [Our pluralisation rules apply to this macro option](https://frontend.design-system.service.gov.uk/localise-govuk-frontend/#understanding-pluralisation-rules)."
     }
 ]

data/node_modules/govuk-frontend/dist/govuk/components/character-count/template-with-error.html

@@ -0,0 +1,12 @@
+<div class="govuk-form-group govuk-form-group--error govuk-character-count" data-module="govuk-character-count" data-maxlength="10">
+  <label class="govuk-label" for="with-error">
+    Can you provide more detail?
+  </label>
+  <p id="with-error-error" class="govuk-error-message">
+    <span class="govuk-visually-hidden">Error:</span> Please provide more detail
+  </p>
+  <textarea class="govuk-textarea govuk-textarea--error govuk-js-character-count" id="with-error" name="with-error" rows="5" aria-describedby="with-error-info with-error-error"></textarea>
+  <div id="with-error-info" class="govuk-hint govuk-character-count__message">
+    You can enter up to 10 characters
+  </div>
+</div>

data/node_modules/govuk-frontend/dist/govuk/components/character-count/template-with-hint-and-error.html

@@ -0,0 +1,15 @@
+<div class="govuk-form-group govuk-form-group--error govuk-character-count" data-module="govuk-character-count" data-maxlength="10">
+  <label class="govuk-label" for="with-error">
+    Can you provide more detail?
+  </label>
+  <div id="with-error-hint" class="govuk-hint">
+    Don&#39;t include personal or financial information, eg your National Insurance number or credit card details.
+  </div>
+  <p id="with-error-error" class="govuk-error-message">
+    <span class="govuk-visually-hidden">Error:</span> Please provide more detail
+  </p>
+  <textarea class="govuk-textarea govuk-textarea--error govuk-js-character-count" id="with-error" name="with-error" rows="5" aria-describedby="with-error-info with-error-hint with-error-error"></textarea>
+  <div id="with-error-info" class="govuk-hint govuk-character-count__message">
+    You can enter up to 10 characters
+  </div>
+</div>

data/node_modules/govuk-frontend/dist/govuk/components/character-count/template.njk

@@ -12,11 +12,12 @@
 {%- set textareaDescriptionLength = params.maxwords or params.maxlength -%}
 {%- set textareaDescriptionText = params.textareaDescriptionText or 'You can enter up to %{count} ' + ('words' if params.maxwords else 'characters') -%}
 {%- set textareaDescriptionTextNoLimit = textareaDescriptionText | replace('%{count}', textareaDescriptionLength) if not hasNoLimit -%}
+{%- set id = params.id if params.id else params.name -%}
 
 {%- set countMessageHtml %}
 {{ govukHint({
   text: textareaDescriptionTextNoLimit,
-  id: params.id + '-info',
+  id: id + '-info',
   classes: 'govuk-character-count__message' + (' ' + params.countMessage.classes if params.countMessage.classes)
 }) | trim }}
 {% if params.formGroup.afterInput %}
@@ -91,9 +92,9 @@
 {% endfor -%}
 
 {{ govukTextarea({
-  id: params.id,
+  id: id,
   name: params.name,
-  describedBy: params.id + '-info',
+  describedBy: id + '-info',
   rows: params.rows,
   spellcheck: params.spellcheck,
   value: params.value,
@@ -112,7 +113,7 @@
     classes: params.label.classes,
     isPageHeading: params.label.isPageHeading,
     attributes: params.label.attributes,
-    for: params.id
+    for: id
   },
   hint: params.hint,
   errorMessage: params.errorMessage,

data/node_modules/govuk-frontend/dist/govuk/components/checkboxes/_index.scss

@@ -159,7 +159,7 @@
   // to be an even number in order to be centred under the 40px checkbox or radio.
   $conditional-border-width: $govuk-border-width-narrow;
   // Calculate the amount of padding needed to keep the border centered against the checkbox.
-  $conditional-border-padding: ($govuk-checkboxes-size / 2) - ($conditional-border-width / 2);
+  $conditional-border-padding: ($govuk-touch-target-size / 2) - ($conditional-border-width / 2);
   // Move the border centered with the checkbox
   $conditional-margin-left: $conditional-border-padding;
   // Move the contents of the conditional inline with the label
@@ -255,6 +255,11 @@
       padding-left: ($govuk-touch-target-size - $input-offset) - ($margin-left + $conditional-border-width);
     }
 
+    .govuk-checkboxes__divider {
+      width: $govuk-small-checkboxes-size;
+      margin-bottom: govuk-spacing(1);
+    }
+
     // Hover state for small checkboxes.
     //
     // We use a hover state for small checkboxes because the touch target size