@nationalarchives/frontend 1.6.0 → 1.6.2

package/nationalarchives/components/TextAreaCharacterCount/TextAreaCharacterCount.js

@@ -1,2 +1,2 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("TNAFrontend",[],t):"object"==typeof exports?exports.TNAFrontend=t():e.TNAFrontend=t()}(self,()=>(()=>{"use strict";const e={d:(t,r)=>{for(var a in r)e.o(r,a)&&!e.o(t,a)&&Object.defineProperty(t,a,{enumerable:!0,get:r[a]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}};let t={};e.r(t),e.d(t,{default:()=>r});class r{constructor(e,t={}){this.$module=e,this.$formFieldInput=this.$module&&this.$module.querySelector(".tna-textarea"),this.$formFieldCharacterCount=this.$module&&this.$module.querySelector(".tna-textarea-count"),this.$formFieldCharacterCountScreenReader=this.$module&&this.$module.querySelector(".tna-textarea-count__screen-reader-status"),this.max=parseInt(this.$formFieldInput?.dataset?.maxLength,10),this.countType=this.$formFieldInput?.dataset?.countType||"characters",this.$module&&this.$formFieldInput&&this.$formFieldCharacterCount&&this.$formFieldCharacterCountScreenReader&&this.max&&this.init(t)}init(e){this.threshold=e.threshold||parseInt(this.$formFieldInput?.dataset?.countThreshold,10)||0,this.debounceDuration=e.debounceDuration||parseInt(this.$formFieldInput?.dataset?.debounceDuration,10)||1e3,this.intervalChecker=e.intervalChecker||1e3,this.debounceTimeout=null,this.lastInputValue="",this.$formFieldInput.addEventListener("input",()=>{this.handleInput(),this.lastInputTimestamp=Date.now()}),this.$formFieldInput.addEventListener("focus",()=>{this.handleFocus()}),this.$formFieldInput.addEventListener("blur",()=>{this.handleBlur()}),this.updateVisualCharacterCount(),this.updateScreenReaderCharacterCount()}handleFocus(){this.valueChecker=window.setInterval(()=>{(!this.lastInputTimestamp||Date.now()-this.intervalChecker/2>=this.lastInputTimestamp)&&this.updateIfValueChanged()},this.intervalChecker)}handleBlur(){this.valueChecker&&window.clearInterval(this.valueChecker),this.updateScreenReaderCharacterCount()}updateIfValueChanged(){this.$formFieldInput.value!==this.lastInputValue&&(this.lastInputValue=this.$formFieldInput.value,this.updateVisualCharacterCount(),this.updateScreenReaderCharacterCount())}handleInput(){this.updateVisualCharacterCount(),clearTimeout(this.debounceTimeout),this.debounceTimeout=setTimeout(()=>{this.updateScreenReaderCharacterCount()},this.debounceDuration)}getCurrentLength(){if("words"===this.countType){const e=this.$formFieldInput.value.trim();return""===e?0:e.split(/\s+/).length}return this.$formFieldInput.value.length}getCurrentLengthMessage(){const e=this.getCurrentLength();let t=this.countType;return 1===Math.abs(this.max-e)&&(t=t.replace(/s$/,"")),e>this.max?`You have ${(new Intl.NumberFormat).format(e-this.max)} ${t} too many`:`You have ${(new Intl.NumberFormat).format(this.max-e)} ${t} remaining`}isOverThreshold(){return this.getCurrentLength()>this.max}updateVisualCharacterCount(){this.threshold&&(this.getCurrentLength()>this.max*(this.threshold/100)?this.showCharacterCount():this.hideCharacterCount()),this.$formFieldCharacterCount.innerText=this.getCurrentLengthMessage(),this.isOverThreshold()?(this.$formFieldInput.classList.add("tna-textarea--error"),this.$formFieldCharacterCount.classList.add("tna-textarea-count--error")):(this.$formFieldInput.classList.remove("tna-textarea--error"),this.$formFieldCharacterCount.classList.remove("tna-textarea-count--error"))}updateScreenReaderCharacterCount(){const e=this.getCurrentLengthMessage();this.$formFieldCharacterCountScreenReader.innerText=e}showCharacterCount(){this.$formFieldCharacterCount.removeAttribute("hidden"),this.$formFieldCharacterCountScreenReader.removeAttribute("aria-hidden")}hideCharacterCount(){this.$formFieldCharacterCount.setAttribute("hidden",""),this.$formFieldCharacterCountScreenReader.setAttribute("aria-hidden","true")}}return t})());
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("TNAFrontend",[],t):"object"==typeof exports?exports.TNAFrontend=t():e.TNAFrontend=t()}(self,()=>(()=>{"use strict";const e={d:(t,r)=>{for(var a in r)e.o(r,a)&&!e.o(t,a)&&Object.defineProperty(t,a,{enumerable:!0,get:r[a]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}};let t={};e.r(t),e.d(t,{default:()=>r});class r{constructor(e,t={}){this.$module=e,this.$formFieldInput=this.$module&&this.$module.querySelector(".tna-textarea"),this.$formFieldCharacterCount=this.$module&&this.$module.querySelector(".tna-textarea-count"),this.$formFieldCharacterCountScreenReader=this.$module&&this.$module.querySelector(".tna-textarea-count__screen-reader-status"),this.max=parseInt(this.$formFieldInput?.dataset?.maxLength,10),this.countType=this.$formFieldInput?.dataset?.countType||"characters",this.$module&&this.$formFieldInput&&this.$formFieldCharacterCount&&this.$formFieldCharacterCountScreenReader&&this.max&&this.init(t)}init(e){this.threshold=e.threshold||parseInt(this.$formFieldInput?.dataset?.countThreshold,10)||0,this.debounceDuration=e.debounceDuration||parseInt(this.$formFieldInput?.dataset?.debounceDuration,10)||1e3,this.intervalChecker=e.intervalChecker||1e3,this.debounceTimeout=null,this.lastInputValue="",this.$formFieldInput.addEventListener("input",()=>{this.handleInput(),this.lastInputTimestamp=Date.now()}),this.$formFieldInput.addEventListener("focus",()=>{this.handleFocus()}),this.$formFieldInput.addEventListener("blur",()=>{this.handleBlur()}),this.updateVisualCharacterCount(),this.updateScreenReaderCharacterCount()}handleFocus(){this.valueChecker=window.setInterval(()=>{(!this.lastInputTimestamp||Date.now()-this.intervalChecker/2>=this.lastInputTimestamp)&&this.updateIfValueChanged()},this.intervalChecker)}handleBlur(){this.valueChecker&&window.clearInterval(this.valueChecker),this.updateScreenReaderCharacterCount()}updateIfValueChanged(){this.$formFieldInput.value!==this.lastInputValue&&(this.lastInputValue=this.$formFieldInput.value,this.updateVisualCharacterCount(),this.updateScreenReaderCharacterCount())}handleInput(){this.updateVisualCharacterCount(),clearTimeout(this.debounceTimeout),this.debounceTimeout=setTimeout(()=>{this.updateScreenReaderCharacterCount()},this.debounceDuration)}getCurrentLength(){const e=this.$formFieldInput.value;if("words"===this.countType){const t=e.trim();return""===t?0:t.split(/\s+/).length}return Array.from(e).length}getCurrentLengthMessage(){const e=this.getCurrentLength();let t=this.countType;return 1===Math.abs(this.max-e)&&(t=t.replace(/s$/,"")),e>this.max?`You have ${(new Intl.NumberFormat).format(e-this.max)} ${t} too many`:`You have ${(new Intl.NumberFormat).format(this.max-e)} ${t} remaining`}isOverThreshold(){return this.getCurrentLength()>this.max}updateVisualCharacterCount(){this.threshold&&(this.getCurrentLength()>this.max*(this.threshold/100)?this.showCharacterCount():this.hideCharacterCount()),this.$formFieldCharacterCount.innerText=this.getCurrentLengthMessage(),this.isOverThreshold()?(this.$formFieldInput.classList.add("tna-textarea--error"),this.$formFieldCharacterCount.classList.add("tna-textarea-count--error")):(this.$formFieldInput.classList.remove("tna-textarea--error"),this.$formFieldCharacterCount.classList.remove("tna-textarea-count--error"))}updateScreenReaderCharacterCount(){const e=this.getCurrentLengthMessage();this.$formFieldCharacterCountScreenReader.innerText=e}showCharacterCount(){this.$formFieldCharacterCount.removeAttribute("hidden"),this.$formFieldCharacterCountScreenReader.removeAttribute("aria-hidden")}hideCharacterCount(){this.$formFieldCharacterCount.setAttribute("hidden",""),this.$formFieldCharacterCountScreenReader.setAttribute("aria-hidden","true")}}return t})());
 //# sourceMappingURL=TextAreaCharacterCount.js.map

package/nationalarchives/components/TextAreaCharacterCount/TextAreaCharacterCount.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/TextAreaCharacterCount/TextAreaCharacterCount.js","mappings":"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","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/textarea/TextAreaCharacterCount.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nconst __webpack_require__ = {};\n\n","// define getter/value functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop));","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","export default class TextAreaCharacterCount {\n  constructor($module, options = {}) {\n    this.$module = $module;\n    this.$formFieldInput =\n      this.$module && this.$module.querySelector(\".tna-textarea\");\n    this.$formFieldCharacterCount =\n      this.$module && this.$module.querySelector(\".tna-textarea-count\");\n    this.$formFieldCharacterCountScreenReader =\n      this.$module &&\n      this.$module.querySelector(\".tna-textarea-count__screen-reader-status\");\n    this.max = parseInt(this.$formFieldInput?.dataset?.maxLength, 10);\n    this.countType = this.$formFieldInput?.dataset?.countType || \"characters\";\n\n    if (\n      !this.$module ||\n      !this.$formFieldInput ||\n      !this.$formFieldCharacterCount ||\n      !this.$formFieldCharacterCountScreenReader ||\n      !this.max\n    ) {\n      return;\n    }\n\n    this.init(options);\n  }\n\n  init(options) {\n    this.threshold =\n      options.threshold ||\n      parseInt(this.$formFieldInput?.dataset?.countThreshold, 10) ||\n      /* eslint-disable-next-line no-magic-numbers */\n      0;\n    this.debounceDuration =\n      options.debounceDuration ||\n      parseInt(this.$formFieldInput?.dataset?.debounceDuration, 10) ||\n      /* eslint-disable-next-line no-magic-numbers */\n      1000;\n    /* eslint-disable-next-line no-magic-numbers */\n    this.intervalChecker = options.intervalChecker || 1000;\n    this.debounceTimeout = null;\n    this.lastInputValue = \"\";\n\n    this.$formFieldInput.addEventListener(\"input\", () => {\n      this.handleInput();\n      this.lastInputTimestamp = Date.now();\n    });\n    this.$formFieldInput.addEventListener(\"focus\", () => {\n      this.handleFocus();\n    });\n    this.$formFieldInput.addEventListener(\"blur\", () => {\n      this.handleBlur();\n    });\n    this.updateVisualCharacterCount();\n    this.updateScreenReaderCharacterCount();\n  }\n\n  handleFocus() {\n    this.valueChecker = window.setInterval(() => {\n      if (\n        !this.lastInputTimestamp ||\n        /* eslint-disable-next-line no-magic-numbers */\n        Date.now() - this.intervalChecker / 2 >= this.lastInputTimestamp\n      ) {\n        this.updateIfValueChanged();\n      }\n    }, this.intervalChecker);\n  }\n\n  handleBlur() {\n    if (this.valueChecker) {\n      window.clearInterval(this.valueChecker);\n    }\n    this.updateScreenReaderCharacterCount();\n  }\n\n  updateIfValueChanged() {\n    if (this.$formFieldInput.value !== this.lastInputValue) {\n      this.lastInputValue = this.$formFieldInput.value;\n      this.updateVisualCharacterCount();\n      this.updateScreenReaderCharacterCount();\n    }\n  }\n\n  handleInput() {\n    this.updateVisualCharacterCount();\n    clearTimeout(this.debounceTimeout);\n    this.debounceTimeout = setTimeout(() => {\n      this.updateScreenReaderCharacterCount();\n    }, this.debounceDuration);\n  }\n\n  getCurrentLength() {\n    if (this.countType === \"words\") {\n      const trimmedValue = this.$formFieldInput.value.trim();\n      if (trimmedValue === \"\") {\n        /* eslint-disable-next-line no-magic-numbers */\n        return 0;\n      }\n      return trimmedValue.split(/\\s+/).length;\n    }\n    return this.$formFieldInput.value.length;\n  }\n\n  getCurrentLengthMessage() {\n    const currentLength = this.getCurrentLength();\n    let typeLabel = this.countType;\n    /* eslint-disable-next-line no-magic-numbers */\n    if (Math.abs(this.max - currentLength) === 1) {\n      typeLabel = typeLabel.replace(/s$/, \"\");\n    }\n    if (currentLength > this.max) {\n      return `You have ${new Intl.NumberFormat().format(currentLength - this.max)} ${typeLabel} too many`;\n    }\n    return `You have ${new Intl.NumberFormat().format(this.max - currentLength)} ${typeLabel} remaining`;\n  }\n\n  isOverThreshold() {\n    return this.getCurrentLength() > this.max;\n  }\n\n  updateVisualCharacterCount() {\n    if (this.threshold) {\n      /* eslint-disable-next-line no-magic-numbers */\n      if (this.getCurrentLength() > this.max * (this.threshold / 100)) {\n        this.showCharacterCount();\n      } else {\n        this.hideCharacterCount();\n      }\n    }\n\n    this.$formFieldCharacterCount.innerText = this.getCurrentLengthMessage();\n    if (this.isOverThreshold()) {\n      this.$formFieldInput.classList.add(\"tna-textarea--error\");\n      this.$formFieldCharacterCount.classList.add(\"tna-textarea-count--error\");\n    } else {\n      this.$formFieldInput.classList.remove(\"tna-textarea--error\");\n      this.$formFieldCharacterCount.classList.remove(\n        \"tna-textarea-count--error\",\n      );\n    }\n  }\n\n  updateScreenReaderCharacterCount() {\n    const currentLengthMessage = this.getCurrentLengthMessage();\n    this.$formFieldCharacterCountScreenReader.innerText = currentLengthMessage;\n  }\n\n  showCharacterCount() {\n    this.$formFieldCharacterCount.removeAttribute(\"hidden\");\n    this.$formFieldCharacterCountScreenReader.removeAttribute(\"aria-hidden\");\n  }\n\n  hideCharacterCount() {\n    this.$formFieldCharacterCount.setAttribute(\"hidden\", \"\");\n    this.$formFieldCharacterCountScreenReader.setAttribute(\n      \"aria-hidden\",\n      \"true\",\n    );\n  }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","TextAreaCharacterCount","constructor","$module","options","this","$formFieldInput","querySelector","$formFieldCharacterCount","$formFieldCharacterCountScreenReader","max","parseInt","dataset","maxLength","countType","init","threshold","countThreshold","debounceDuration","intervalChecker","debounceTimeout","lastInputValue","addEventListener","handleInput","lastInputTimestamp","Date","now","handleFocus","handleBlur","updateVisualCharacterCount","updateScreenReaderCharacterCount","valueChecker","window","setInterval","updateIfValueChanged","clearInterval","clearTimeout","setTimeout","getCurrentLength","trimmedValue","trim","split","length","getCurrentLengthMessage","currentLength","typeLabel","Math","abs","replace","Intl","NumberFormat","format","isOverThreshold","showCharacterCount","hideCharacterCount","innerText","classList","add","remove","currentLengthMessage","removeAttribute","setAttribute"],"sourceRoot":""}
+{"version":3,"file":"components/TextAreaCharacterCount/TextAreaCharacterCount.js","mappings":"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","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/textarea/TextAreaCharacterCount.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nconst __webpack_require__ = {};\n\n","// define getter/value functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop));","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","export default class TextAreaCharacterCount {\n  constructor($module, options = {}) {\n    this.$module = $module;\n    this.$formFieldInput =\n      this.$module && this.$module.querySelector(\".tna-textarea\");\n    this.$formFieldCharacterCount =\n      this.$module && this.$module.querySelector(\".tna-textarea-count\");\n    this.$formFieldCharacterCountScreenReader =\n      this.$module &&\n      this.$module.querySelector(\".tna-textarea-count__screen-reader-status\");\n    this.max = parseInt(this.$formFieldInput?.dataset?.maxLength, 10);\n    this.countType = this.$formFieldInput?.dataset?.countType || \"characters\";\n\n    if (\n      !this.$module ||\n      !this.$formFieldInput ||\n      !this.$formFieldCharacterCount ||\n      !this.$formFieldCharacterCountScreenReader ||\n      !this.max\n    ) {\n      return;\n    }\n\n    this.init(options);\n  }\n\n  init(options) {\n    this.threshold =\n      options.threshold ||\n      parseInt(this.$formFieldInput?.dataset?.countThreshold, 10) ||\n      /* eslint-disable-next-line no-magic-numbers */\n      0;\n    this.debounceDuration =\n      options.debounceDuration ||\n      parseInt(this.$formFieldInput?.dataset?.debounceDuration, 10) ||\n      /* eslint-disable-next-line no-magic-numbers */\n      1000;\n    /* eslint-disable-next-line no-magic-numbers */\n    this.intervalChecker = options.intervalChecker || 1000;\n    this.debounceTimeout = null;\n    this.lastInputValue = \"\";\n\n    this.$formFieldInput.addEventListener(\"input\", () => {\n      this.handleInput();\n      this.lastInputTimestamp = Date.now();\n    });\n    this.$formFieldInput.addEventListener(\"focus\", () => {\n      this.handleFocus();\n    });\n    this.$formFieldInput.addEventListener(\"blur\", () => {\n      this.handleBlur();\n    });\n    this.updateVisualCharacterCount();\n    this.updateScreenReaderCharacterCount();\n  }\n\n  handleFocus() {\n    this.valueChecker = window.setInterval(() => {\n      if (\n        !this.lastInputTimestamp ||\n        /* eslint-disable-next-line no-magic-numbers */\n        Date.now() - this.intervalChecker / 2 >= this.lastInputTimestamp\n      ) {\n        this.updateIfValueChanged();\n      }\n    }, this.intervalChecker);\n  }\n\n  handleBlur() {\n    if (this.valueChecker) {\n      window.clearInterval(this.valueChecker);\n    }\n    this.updateScreenReaderCharacterCount();\n  }\n\n  updateIfValueChanged() {\n    if (this.$formFieldInput.value !== this.lastInputValue) {\n      this.lastInputValue = this.$formFieldInput.value;\n      this.updateVisualCharacterCount();\n      this.updateScreenReaderCharacterCount();\n    }\n  }\n\n  handleInput() {\n    this.updateVisualCharacterCount();\n    clearTimeout(this.debounceTimeout);\n    this.debounceTimeout = setTimeout(() => {\n      this.updateScreenReaderCharacterCount();\n    }, this.debounceDuration);\n  }\n\n  getCurrentLength() {\n    const rawValue = this.$formFieldInput.value;\n    if (this.countType === \"words\") {\n      const trimmedValue = rawValue.trim();\n      if (trimmedValue === \"\") {\n        /* eslint-disable-next-line no-magic-numbers */\n        return 0;\n      }\n      return trimmedValue.split(/\\s+/).length;\n    }\n    return Array.from(rawValue).length;\n  }\n\n  getCurrentLengthMessage() {\n    const currentLength = this.getCurrentLength();\n    let typeLabel = this.countType;\n    /* eslint-disable-next-line no-magic-numbers */\n    if (Math.abs(this.max - currentLength) === 1) {\n      typeLabel = typeLabel.replace(/s$/, \"\");\n    }\n    if (currentLength > this.max) {\n      return `You have ${new Intl.NumberFormat().format(currentLength - this.max)} ${typeLabel} too many`;\n    }\n    return `You have ${new Intl.NumberFormat().format(this.max - currentLength)} ${typeLabel} remaining`;\n  }\n\n  isOverThreshold() {\n    return this.getCurrentLength() > this.max;\n  }\n\n  updateVisualCharacterCount() {\n    if (this.threshold) {\n      /* eslint-disable-next-line no-magic-numbers */\n      if (this.getCurrentLength() > this.max * (this.threshold / 100)) {\n        this.showCharacterCount();\n      } else {\n        this.hideCharacterCount();\n      }\n    }\n\n    this.$formFieldCharacterCount.innerText = this.getCurrentLengthMessage();\n    if (this.isOverThreshold()) {\n      this.$formFieldInput.classList.add(\"tna-textarea--error\");\n      this.$formFieldCharacterCount.classList.add(\"tna-textarea-count--error\");\n    } else {\n      this.$formFieldInput.classList.remove(\"tna-textarea--error\");\n      this.$formFieldCharacterCount.classList.remove(\n        \"tna-textarea-count--error\",\n      );\n    }\n  }\n\n  updateScreenReaderCharacterCount() {\n    const currentLengthMessage = this.getCurrentLengthMessage();\n    this.$formFieldCharacterCountScreenReader.innerText = currentLengthMessage;\n  }\n\n  showCharacterCount() {\n    this.$formFieldCharacterCount.removeAttribute(\"hidden\");\n    this.$formFieldCharacterCountScreenReader.removeAttribute(\"aria-hidden\");\n  }\n\n  hideCharacterCount() {\n    this.$formFieldCharacterCount.setAttribute(\"hidden\", \"\");\n    this.$formFieldCharacterCountScreenReader.setAttribute(\n      \"aria-hidden\",\n      \"true\",\n    );\n  }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","TextAreaCharacterCount","constructor","$module","options","this","$formFieldInput","querySelector","$formFieldCharacterCount","$formFieldCharacterCountScreenReader","max","parseInt","dataset","maxLength","countType","init","threshold","countThreshold","debounceDuration","intervalChecker","debounceTimeout","lastInputValue","addEventListener","handleInput","lastInputTimestamp","Date","now","handleFocus","handleBlur","updateVisualCharacterCount","updateScreenReaderCharacterCount","valueChecker","window","setInterval","updateIfValueChanged","clearInterval","clearTimeout","setTimeout","getCurrentLength","rawValue","trimmedValue","trim","split","length","Array","from","getCurrentLengthMessage","currentLength","typeLabel","Math","abs","replace","Intl","NumberFormat","format","isOverThreshold","showCharacterCount","hideCharacterCount","innerText","classList","add","remove","currentLengthMessage","removeAttribute","setAttribute"],"sourceRoot":""}

package/nationalarchives/components/textarea/TextAreaCharacterCount.mjs

@@ -90,15 +90,16 @@ export default class TextAreaCharacterCount {
   }
 
   getCurrentLength() {
+    const rawValue = this.$formFieldInput.value;
     if (this.countType === "words") {
-      const trimmedValue = this.$formFieldInput.value.trim();
+      const trimmedValue = rawValue.trim();
       if (trimmedValue === "") {
         /* eslint-disable-next-line no-magic-numbers */
         return 0;
       }
       return trimmedValue.split(/\s+/).length;
     }
-    return this.$formFieldInput.value.length;
+    return Array.from(rawValue).length;
   }
 
   getCurrentLengthMessage() {

package/nationalarchives/components/textarea/fixtures.json

@@ -31,7 +31,7 @@
         "name": "feedback",
         "hint": "What did you think?"
       },
-      "html": "<div class=\"tna-form-item\"><div class=\"tna-form-item__header\"><label class=\"tna-form-item__label tna-heading-m\" for=\"feedback\">Enter your feedback</label></div><p id=\"feedback-hint\" class=\"tna-form-item__hint\">What did you think?</p><div class=\"tna-form-item__body\"><textarea id=\"feedback\" class=\"tna-textarea\" name=\"feedback\" spellcheck=\"false\" autocapitalize=\"off\" autocorrect=\"off\" rows=\"5\" aria-describedby=\"feedback-hint \"></textarea></div></div>"
+      "html": "<div class=\"tna-form-item\"><div class=\"tna-form-item__header\"><label class=\"tna-form-item__label tna-heading-m\" for=\"feedback\">Enter your feedback</label></div><p id=\"feedback-hint\" class=\"tna-form-item__hint\">What did you think?</p><div class=\"tna-form-item__body\"><textarea id=\"feedback\" class=\"tna-textarea\" name=\"feedback\" spellcheck=\"false\" autocapitalize=\"off\" autocorrect=\"off\" rows=\"5\" aria-describedby=\"feedback-hint  \"></textarea></div></div>"
     },
     {
       "name": "with an error",
@@ -44,7 +44,7 @@
           "text": "Enter some feedback"
         }
       },
-      "html": "<div class=\"tna-form-item tna-form-item--error\"><div class=\"tna-form-item__header\"><label class=\"tna-form-item__label tna-heading-m\" for=\"feedback\">Enter your feedback</label></div><p id=\"feedback-error\" class=\"tna-form-item__error\"><span class=\"tna-visually-hidden\">Error:</span> Enter some feedback</p><div class=\"tna-form-item__body\"><textarea id=\"feedback\" class=\"tna-textarea\" name=\"feedback\" spellcheck=\"false\" autocapitalize=\"off\" autocorrect=\"off\" rows=\"5\" aria-describedby=\" feedback-error\"></textarea></div></div>"
+      "html": "<div class=\"tna-form-item tna-form-item--error\"><div class=\"tna-form-item__header\"><label class=\"tna-form-item__label tna-heading-m\" for=\"feedback\">Enter your feedback</label></div><p id=\"feedback-error\" class=\"tna-form-item__error\"><span class=\"tna-visually-hidden\">Error:</span> Enter some feedback</p><div class=\"tna-form-item__body\"><textarea id=\"feedback\" class=\"tna-textarea\" name=\"feedback\" spellcheck=\"false\" autocapitalize=\"off\" autocorrect=\"off\" rows=\"5\" aria-describedby=\" feedback-error \"></textarea></div></div>"
     },
     {
       "name": "textarea size",
@@ -134,7 +134,7 @@
           "max": 200
         }
       },
-      "html": "<div class=\"tna-form-item\" data-module=\"tna-textarea-character-count\"><div class=\"tna-form-item__header\"><label class=\"tna-form-item__label tna-heading-m\" for=\"feedback\">Enter your feedback</label></div><div class=\"tna-form-item__body\"><textarea id=\"feedback\" class=\"tna-textarea\" name=\"feedback\" spellcheck=\"false\" autocapitalize=\"off\" autocorrect=\"off\" rows=\"5\" aria-describedby=\" \" data-max-length=\"200\"></textarea><div id=\"feedback-count\" class=\"tna-visually-hidden\">You can enter up to 200 characters</div><p class=\"tna-textarea-count\" aria-hidden=\"true\">You can enter up to 200 characters</p><div class=\"tna-textarea-count__screen-reader-status tna-visually-hidden\" aria-live=\"polite\">You can enter up to 200 characters</div></div></div>"
+      "html": "<div class=\"tna-form-item\" data-module=\"tna-textarea-character-count\"><div class=\"tna-form-item__header\"><label class=\"tna-form-item__label tna-heading-m\" for=\"feedback\">Enter your feedback</label></div><div class=\"tna-form-item__body\"><textarea id=\"feedback\" class=\"tna-textarea\" name=\"feedback\" spellcheck=\"false\" autocapitalize=\"off\" autocorrect=\"off\" rows=\"5\" aria-describedby=\"  feedback-count\" data-max-length=\"200\"></textarea><div id=\"feedback-count\" class=\"tna-visually-hidden\">You can enter up to 200 characters</div><p class=\"tna-textarea-count\" aria-hidden=\"true\">You can enter up to 200 characters</p><div class=\"tna-textarea-count__screen-reader-status tna-visually-hidden\" aria-live=\"polite\">You can enter up to 200 characters</div></div></div>"
     },
     {
       "name": "with word count",
@@ -148,7 +148,7 @@
           "countType": "words"
         }
       },
-      "html": "<div class=\"tna-form-item\" data-module=\"tna-textarea-character-count\"><div class=\"tna-form-item__header\"><label class=\"tna-form-item__label tna-heading-m\" for=\"feedback\">Enter your feedback</label></div><div class=\"tna-form-item__body\"><textarea id=\"feedback\" class=\"tna-textarea\" name=\"feedback\" spellcheck=\"false\" autocapitalize=\"off\" autocorrect=\"off\" rows=\"5\" aria-describedby=\" \" data-max-length=\"200\" data-count-type=\"words\"></textarea><div id=\"feedback-count\" class=\"tna-visually-hidden\">You can enter up to 200 words</div><p class=\"tna-textarea-count\" aria-hidden=\"true\">You can enter up to 200 words</p><div class=\"tna-textarea-count__screen-reader-status tna-visually-hidden\" aria-live=\"polite\">You can enter up to 200 words</div></div></div>"
+      "html": "<div class=\"tna-form-item\" data-module=\"tna-textarea-character-count\"><div class=\"tna-form-item__header\"><label class=\"tna-form-item__label tna-heading-m\" for=\"feedback\">Enter your feedback</label></div><div class=\"tna-form-item__body\"><textarea id=\"feedback\" class=\"tna-textarea\" name=\"feedback\" spellcheck=\"false\" autocapitalize=\"off\" autocorrect=\"off\" rows=\"5\" aria-describedby=\"  feedback-count\" data-max-length=\"200\" data-count-type=\"words\"></textarea><div id=\"feedback-count\" class=\"tna-visually-hidden\">You can enter up to 200 words</div><p class=\"tna-textarea-count\" aria-hidden=\"true\">You can enter up to 200 words</p><div class=\"tna-textarea-count__screen-reader-status tna-visually-hidden\" aria-live=\"polite\">You can enter up to 200 words</div></div></div>"
     },
     {
       "name": "with character count and custom debounce duration",
@@ -162,7 +162,7 @@
           "debounceDuration": 500
         }
       },
-      "html": "<div class=\"tna-form-item\" data-module=\"tna-textarea-character-count\"><div class=\"tna-form-item__header\"><label class=\"tna-form-item__label tna-heading-m\" for=\"feedback\">Enter your feedback</label></div><div class=\"tna-form-item__body\"><textarea id=\"feedback\" class=\"tna-textarea\" name=\"feedback\" spellcheck=\"false\" autocapitalize=\"off\" autocorrect=\"off\" rows=\"5\" aria-describedby=\" \" data-max-length=\"200\" data-debounce-duration=\"500\"></textarea><div id=\"feedback-count\" class=\"tna-visually-hidden\">You can enter up to 200 characters</div><p class=\"tna-textarea-count\" aria-hidden=\"true\">You can enter up to 200 characters</p><div class=\"tna-textarea-count__screen-reader-status tna-visually-hidden\" aria-live=\"polite\">You can enter up to 200 characters</div></div></div>"
+      "html": "<div class=\"tna-form-item\" data-module=\"tna-textarea-character-count\"><div class=\"tna-form-item__header\"><label class=\"tna-form-item__label tna-heading-m\" for=\"feedback\">Enter your feedback</label></div><div class=\"tna-form-item__body\"><textarea id=\"feedback\" class=\"tna-textarea\" name=\"feedback\" spellcheck=\"false\" autocapitalize=\"off\" autocorrect=\"off\" rows=\"5\" aria-describedby=\"  feedback-count\" data-max-length=\"200\" data-debounce-duration=\"500\"></textarea><div id=\"feedback-count\" class=\"tna-visually-hidden\">You can enter up to 200 characters</div><p class=\"tna-textarea-count\" aria-hidden=\"true\">You can enter up to 200 characters</p><div class=\"tna-textarea-count__screen-reader-status tna-visually-hidden\" aria-live=\"polite\">You can enter up to 200 characters</div></div></div>"
     },
     {
       "name": "with classes",

package/nationalarchives/components/textarea/template.njk

@@ -11,8 +11,12 @@
   attributes: params.formItemAttributes
 }, 'tna-textarea-character-count' if params.characterCount else ('tna-textarea-itemised-rows' if params.itemiseRows else '')) %}
   <textarea id="{{ params.id }}" class="tna-textarea{% if params.size %} tna-textarea--{{ params.size }}{% endif %}{% if params.classes %} {{ params.classes }}{% endif %}" name="{{ params.name }}" spellcheck="{{ params.spellcheck if params.spellcheck else false }}" autocapitalize="{{ params.autocapitalize if params.autocapitalize else 'off' }}" autocorrect="{{ 'on' if params.autocorrect else 'off' }}" rows="{{ params.rows if params.rows else 5 }}"
-  {%- if params.hint or params.error or params.characterCount %} aria-describedby="{%- if params.hint -%}{{ params.id }}-hint{%- endif %} {% if params.error -%}{{ params.id }}-error{%- endif -%} {% if params.params.characterCount -%}{{ params.id }}-count{%- endif -%}"{%- endif %}
-  {%- if params.characterCount %} data-max-length="{{ params.characterCount.max }}"{%- if params.characterCount.countType %} data-count-type="{{ params.characterCount.countType }}"{%- endif %}{%- if params.characterCount.threshold %} data-count-threshold="{{ params.characterCount.threshold }}"{%- endif %}{%- if params.characterCount.debounceDuration %} data-debounce-duration="{{ params.characterCount.debounceDuration }}"{%- endif %}{%- endif %}
+  {%- if params.hint or params.error or params.characterCount %} aria-describedby="{%- if params.hint -%}{{ params.id }}-hint{%- endif %} {% if params.error -%}{{ params.id }}-error{%- endif %} {% if params.characterCount -%}{{ params.id }}-count{%- endif -%}"{%- endif %}
+  {%- if params.characterCount %} data-max-length="{{ params.characterCount.max }}"
+  {%- if params.characterCount.countType %} data-count-type="{{ params.characterCount.countType }}"{%- endif %}
+  {%- if params.characterCount.threshold %} data-count-threshold="{{ params.characterCount.threshold }}"{%- endif %}
+  {%- if params.characterCount.debounceDuration %} data-debounce-duration="{{ params.characterCount.debounceDuration }}"{%- endif %}
+  {%- endif %}
   {%- for attribute, value in params.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>{{ params.value }}</textarea>
   {%- if params.characterCount %}
   {%- set characterCountMessage %}

package/nationalarchives/components/textarea/textarea.js

@@ -1,2 +1,2 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("TNAFrontend",[],e):"object"==typeof exports?exports.TNAFrontend=e():t.TNAFrontend=e()}(self,()=>(()=>{"use strict";var t={740(t,e,i){i.d(e,{default:()=>r});class r{constructor(t,e={}){this.$module=t,this.$formFieldInput=this.$module&&this.$module.querySelector(".tna-textarea"),this.$formFieldCharacterCount=this.$module&&this.$module.querySelector(".tna-textarea-count"),this.$formFieldCharacterCountScreenReader=this.$module&&this.$module.querySelector(".tna-textarea-count__screen-reader-status"),this.max=parseInt(this.$formFieldInput?.dataset?.maxLength,10),this.countType=this.$formFieldInput?.dataset?.countType||"characters",this.$module&&this.$formFieldInput&&this.$formFieldCharacterCount&&this.$formFieldCharacterCountScreenReader&&this.max&&this.init(e)}init(t){this.threshold=t.threshold||parseInt(this.$formFieldInput?.dataset?.countThreshold,10)||0,this.debounceDuration=t.debounceDuration||parseInt(this.$formFieldInput?.dataset?.debounceDuration,10)||1e3,this.intervalChecker=t.intervalChecker||1e3,this.debounceTimeout=null,this.lastInputValue="",this.$formFieldInput.addEventListener("input",()=>{this.handleInput(),this.lastInputTimestamp=Date.now()}),this.$formFieldInput.addEventListener("focus",()=>{this.handleFocus()}),this.$formFieldInput.addEventListener("blur",()=>{this.handleBlur()}),this.updateVisualCharacterCount(),this.updateScreenReaderCharacterCount()}handleFocus(){this.valueChecker=window.setInterval(()=>{(!this.lastInputTimestamp||Date.now()-this.intervalChecker/2>=this.lastInputTimestamp)&&this.updateIfValueChanged()},this.intervalChecker)}handleBlur(){this.valueChecker&&window.clearInterval(this.valueChecker),this.updateScreenReaderCharacterCount()}updateIfValueChanged(){this.$formFieldInput.value!==this.lastInputValue&&(this.lastInputValue=this.$formFieldInput.value,this.updateVisualCharacterCount(),this.updateScreenReaderCharacterCount())}handleInput(){this.updateVisualCharacterCount(),clearTimeout(this.debounceTimeout),this.debounceTimeout=setTimeout(()=>{this.updateScreenReaderCharacterCount()},this.debounceDuration)}getCurrentLength(){if("words"===this.countType){const t=this.$formFieldInput.value.trim();return""===t?0:t.split(/\s+/).length}return this.$formFieldInput.value.length}getCurrentLengthMessage(){const t=this.getCurrentLength();let e=this.countType;return 1===Math.abs(this.max-t)&&(e=e.replace(/s$/,"")),t>this.max?`You have ${(new Intl.NumberFormat).format(t-this.max)} ${e} too many`:`You have ${(new Intl.NumberFormat).format(this.max-t)} ${e} remaining`}isOverThreshold(){return this.getCurrentLength()>this.max}updateVisualCharacterCount(){this.threshold&&(this.getCurrentLength()>this.max*(this.threshold/100)?this.showCharacterCount():this.hideCharacterCount()),this.$formFieldCharacterCount.innerText=this.getCurrentLengthMessage(),this.isOverThreshold()?(this.$formFieldInput.classList.add("tna-textarea--error"),this.$formFieldCharacterCount.classList.add("tna-textarea-count--error")):(this.$formFieldInput.classList.remove("tna-textarea--error"),this.$formFieldCharacterCount.classList.remove("tna-textarea-count--error"))}updateScreenReaderCharacterCount(){const t=this.getCurrentLengthMessage();this.$formFieldCharacterCountScreenReader.innerText=t}showCharacterCount(){this.$formFieldCharacterCount.removeAttribute("hidden"),this.$formFieldCharacterCountScreenReader.removeAttribute("aria-hidden")}hideCharacterCount(){this.$formFieldCharacterCount.setAttribute("hidden",""),this.$formFieldCharacterCountScreenReader.setAttribute("aria-hidden","true")}}},371(t,e,i){i.d(e,{default:()=>r});class r{constructor(t,e={}){if(this.$module=t,this.$formFieldInput=this.$module&&this.$module.querySelector(".tna-textarea"),this.$formFieldInputHint=this.$module&&this.$module.querySelector(".tna-form-item__hint"),this.$formFieldBody=this.$module&&this.$module.querySelector(".tna-form-item__body"),!this.$module||!this.$formFieldInput||!this.$formFieldBody||null!==this.$formFieldInput.getAttribute("hidden"))return;if(!(this.$formFieldInput instanceof HTMLTextAreaElement))throw new Error("Expected a textarea element");const{enhancedHint:i}=e;this.enhancedHint=i||"Enter an item and press enter",this.values=this.$formFieldInput.value.split("\n").map(t=>t.trim()).filter(t=>t),this.id=this.$formFieldInput.id,this.init()}init(){this.$formFieldNewInput=document.createElement("input"),this.$formFieldNewInput.classList.add("tna-text-input"),["id","aria-describedby"].forEach(t=>{this.$formFieldNewInput.setAttribute(t,this.$formFieldInput.getAttribute(t)),this.$formFieldInput.removeAttribute(t)}),this.$formFieldBody.appendChild(this.$formFieldNewInput),this.$formFieldInput.setAttribute("hidden",""),this.$formFieldInput.addEventListener("keyup",()=>this.updateList()),this.$formFieldNewInput.addEventListener("keypress",t=>{"Enter"===t.key&&this.appendValue(t.target.value)}),this.$formFieldNewInputAddButton=document.createElement("button"),this.$formFieldNewInputAddButton.setAttribute("type","button"),this.$formFieldNewInputAddButton.classList.add("tna-button","tna-button--small"),this.$formFieldNewInputAddButtonInner=document.createElement("span"),this.$formFieldNewInputAddButtonInner.innerText="Add",this.$formFieldNewInputAddButtonInnerExtra=document.createElement("span"),this.$formFieldNewInputAddButtonInnerExtra.classList.add("tna-visually-hidden"),this.$formFieldNewInputAddButtonInnerExtra.innerText=" to list",this.$formFieldNewInputAddButtonInner.appendChild(this.$formFieldNewInputAddButtonInnerExtra),this.$formFieldNewInputAddButton.appendChild(this.$formFieldNewInputAddButtonInner),this.$formFieldBody.appendChild(this.$formFieldNewInputAddButton),this.$formFieldNewInputAddButton.addEventListener("click",()=>{this.appendValue(this.$formFieldNewInput.value)}),this.$formFieldLiveAria=document.createElement("div"),this.$formFieldLiveAria.setAttribute("aria-live","polite"),this.$formFieldLiveAria.classList.add("tna-visually-hidden"),this.$module.appendChild(this.$formFieldLiveAria),this.$formFieldCounter=document.createElement("p"),this.$formFieldCounter.id=`${this.id}-list-helper`,this.$formFieldCounter.classList.add("tna-!--margin-top-xs"),this.$module.appendChild(this.$formFieldCounter),this.$formFieldNewInput.setAttribute("aria-describedby",`${this.$formFieldNewInput.getAttribute("aria-describedby")} ${this.$formFieldCounter.id}`),this.$valuesList=document.createElement("ul"),this.$valuesList.classList.add("tna-compound-filters","tna-!--margin-top-xs"),this.$valuesList.addEventListener("blur",()=>{this.$valuesList.removeAttribute("tabindex"),this.updateAriaText("")}),this.$module.appendChild(this.$valuesList),this.$formFieldInputHint||(this.$formFieldInputHint=document.createElement("p"),this.$formFieldInputHint.classList.add("tna-form-item__hint"),this.$formFieldBody.parentNode.insertBefore(this.$formFieldInputHint,this.$formFieldBody)),this.$formFieldInputHint.innerText=this.enhancedHint,this.updateList()}updateAriaText(t){this.$formFieldLiveAria.innerText=t}normaliseValue(t){return t.replace(/\s{2,}/u," ").trim()}isValueInList(t){return this.values.map(t=>this.normaliseValue(t).toLowerCase()).includes(t.toLowerCase().trim())}appendValue(t){const e=this.normaliseValue(t);e?this.isValueInList(e)?this.updateAriaText(`'${e}' already added`):(this.values.push(e),this.$formFieldInput.value=this.values.join("\n"),this.updateList(),this.updateAriaText(`'${e}' added`)):this.updateAriaText("Enter an item to add"),this.$formFieldNewInput.value="",this.$formFieldNewInput.focus()}removeValue(t){const e=this.normaliseValue(t);e&&this.isValueInList(e)&&(this.values=this.values.filter(t=>t!==e),this.$formFieldInput.value=this.values.join("\n"),this.updateList(),this.updateAriaText(`'${e}' removed`)),this.values.length?(this.$valuesList.setAttribute("tabindex","0"),this.$valuesList.focus()):this.$formFieldNewInput.focus()}updateList(){this.$valuesList.innerHTML="",this.values.map(t=>{const e=document.createElement("li");e.classList.add("tna-compound-filters__item");const i=document.createElement("span");i.innerText=t,e.appendChild(i);const r=document.createElement("button");return r.innerText=`Remove '${t}'`,r.setAttribute("type","button"),r.classList.add("tna-compound-filters__link"),r.addEventListener("click",()=>{this.removeValue(t)}),e.appendChild(r),e}).forEach(t=>this.$valuesList.appendChild(t));let t="item";1!==this.values.length&&(t+="s");const e=`${(new Intl.NumberFormat).format(this.values.length)} ${t} added`;this.$formFieldCounter.innerText=e}}}};const e={};function i(r){const n=e[r];if(void 0!==n)return n.exports;const s=e[r]={exports:{}};return t[r](s,s.exports,i),s.exports}i.d=(t,e)=>{for(var r in e)i.o(e,r)&&!i.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:e[r]})},i.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),i.r=t=>{Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};let r={};i.r(r),i.d(r,{TextAreaCharacterCount:()=>n.default,TextAreaItemisedRows:()=>s.default});var n=i(740),s=i(371);return r})());
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("TNAFrontend",[],e):"object"==typeof exports?exports.TNAFrontend=e():t.TNAFrontend=e()}(self,()=>(()=>{"use strict";var t={740(t,e,i){i.d(e,{default:()=>r});class r{constructor(t,e={}){this.$module=t,this.$formFieldInput=this.$module&&this.$module.querySelector(".tna-textarea"),this.$formFieldCharacterCount=this.$module&&this.$module.querySelector(".tna-textarea-count"),this.$formFieldCharacterCountScreenReader=this.$module&&this.$module.querySelector(".tna-textarea-count__screen-reader-status"),this.max=parseInt(this.$formFieldInput?.dataset?.maxLength,10),this.countType=this.$formFieldInput?.dataset?.countType||"characters",this.$module&&this.$formFieldInput&&this.$formFieldCharacterCount&&this.$formFieldCharacterCountScreenReader&&this.max&&this.init(e)}init(t){this.threshold=t.threshold||parseInt(this.$formFieldInput?.dataset?.countThreshold,10)||0,this.debounceDuration=t.debounceDuration||parseInt(this.$formFieldInput?.dataset?.debounceDuration,10)||1e3,this.intervalChecker=t.intervalChecker||1e3,this.debounceTimeout=null,this.lastInputValue="",this.$formFieldInput.addEventListener("input",()=>{this.handleInput(),this.lastInputTimestamp=Date.now()}),this.$formFieldInput.addEventListener("focus",()=>{this.handleFocus()}),this.$formFieldInput.addEventListener("blur",()=>{this.handleBlur()}),this.updateVisualCharacterCount(),this.updateScreenReaderCharacterCount()}handleFocus(){this.valueChecker=window.setInterval(()=>{(!this.lastInputTimestamp||Date.now()-this.intervalChecker/2>=this.lastInputTimestamp)&&this.updateIfValueChanged()},this.intervalChecker)}handleBlur(){this.valueChecker&&window.clearInterval(this.valueChecker),this.updateScreenReaderCharacterCount()}updateIfValueChanged(){this.$formFieldInput.value!==this.lastInputValue&&(this.lastInputValue=this.$formFieldInput.value,this.updateVisualCharacterCount(),this.updateScreenReaderCharacterCount())}handleInput(){this.updateVisualCharacterCount(),clearTimeout(this.debounceTimeout),this.debounceTimeout=setTimeout(()=>{this.updateScreenReaderCharacterCount()},this.debounceDuration)}getCurrentLength(){const t=this.$formFieldInput.value;if("words"===this.countType){const e=t.trim();return""===e?0:e.split(/\s+/).length}return Array.from(t).length}getCurrentLengthMessage(){const t=this.getCurrentLength();let e=this.countType;return 1===Math.abs(this.max-t)&&(e=e.replace(/s$/,"")),t>this.max?`You have ${(new Intl.NumberFormat).format(t-this.max)} ${e} too many`:`You have ${(new Intl.NumberFormat).format(this.max-t)} ${e} remaining`}isOverThreshold(){return this.getCurrentLength()>this.max}updateVisualCharacterCount(){this.threshold&&(this.getCurrentLength()>this.max*(this.threshold/100)?this.showCharacterCount():this.hideCharacterCount()),this.$formFieldCharacterCount.innerText=this.getCurrentLengthMessage(),this.isOverThreshold()?(this.$formFieldInput.classList.add("tna-textarea--error"),this.$formFieldCharacterCount.classList.add("tna-textarea-count--error")):(this.$formFieldInput.classList.remove("tna-textarea--error"),this.$formFieldCharacterCount.classList.remove("tna-textarea-count--error"))}updateScreenReaderCharacterCount(){const t=this.getCurrentLengthMessage();this.$formFieldCharacterCountScreenReader.innerText=t}showCharacterCount(){this.$formFieldCharacterCount.removeAttribute("hidden"),this.$formFieldCharacterCountScreenReader.removeAttribute("aria-hidden")}hideCharacterCount(){this.$formFieldCharacterCount.setAttribute("hidden",""),this.$formFieldCharacterCountScreenReader.setAttribute("aria-hidden","true")}}},371(t,e,i){i.d(e,{default:()=>r});class r{constructor(t,e={}){if(this.$module=t,this.$formFieldInput=this.$module&&this.$module.querySelector(".tna-textarea"),this.$formFieldInputHint=this.$module&&this.$module.querySelector(".tna-form-item__hint"),this.$formFieldBody=this.$module&&this.$module.querySelector(".tna-form-item__body"),!this.$module||!this.$formFieldInput||!this.$formFieldBody||null!==this.$formFieldInput.getAttribute("hidden"))return;if(!(this.$formFieldInput instanceof HTMLTextAreaElement))throw new Error("Expected a textarea element");const{enhancedHint:i}=e;this.enhancedHint=i||"Enter an item and press enter",this.values=this.$formFieldInput.value.split("\n").map(t=>t.trim()).filter(t=>t),this.id=this.$formFieldInput.id,this.init()}init(){this.$formFieldNewInput=document.createElement("input"),this.$formFieldNewInput.classList.add("tna-text-input"),["id","aria-describedby"].forEach(t=>{this.$formFieldNewInput.setAttribute(t,this.$formFieldInput.getAttribute(t)),this.$formFieldInput.removeAttribute(t)}),this.$formFieldBody.appendChild(this.$formFieldNewInput),this.$formFieldInput.setAttribute("hidden",""),this.$formFieldInput.addEventListener("keyup",()=>this.updateList()),this.$formFieldNewInput.addEventListener("keypress",t=>{"Enter"===t.key&&this.appendValue(t.target.value)}),this.$formFieldNewInputAddButton=document.createElement("button"),this.$formFieldNewInputAddButton.setAttribute("type","button"),this.$formFieldNewInputAddButton.classList.add("tna-button","tna-button--small"),this.$formFieldNewInputAddButtonInner=document.createElement("span"),this.$formFieldNewInputAddButtonInner.innerText="Add",this.$formFieldNewInputAddButtonInnerExtra=document.createElement("span"),this.$formFieldNewInputAddButtonInnerExtra.classList.add("tna-visually-hidden"),this.$formFieldNewInputAddButtonInnerExtra.innerText=" to list",this.$formFieldNewInputAddButtonInner.appendChild(this.$formFieldNewInputAddButtonInnerExtra),this.$formFieldNewInputAddButton.appendChild(this.$formFieldNewInputAddButtonInner),this.$formFieldBody.appendChild(this.$formFieldNewInputAddButton),this.$formFieldNewInputAddButton.addEventListener("click",()=>{this.appendValue(this.$formFieldNewInput.value)}),this.$formFieldLiveAria=document.createElement("div"),this.$formFieldLiveAria.setAttribute("aria-live","polite"),this.$formFieldLiveAria.classList.add("tna-visually-hidden"),this.$module.appendChild(this.$formFieldLiveAria),this.$formFieldCounter=document.createElement("p"),this.$formFieldCounter.id=`${this.id}-list-helper`,this.$formFieldCounter.classList.add("tna-!--margin-top-xs"),this.$module.appendChild(this.$formFieldCounter),this.$formFieldNewInput.setAttribute("aria-describedby",`${this.$formFieldNewInput.getAttribute("aria-describedby")} ${this.$formFieldCounter.id}`),this.$valuesList=document.createElement("ul"),this.$valuesList.classList.add("tna-compound-filters","tna-!--margin-top-xs"),this.$valuesList.addEventListener("blur",()=>{this.$valuesList.removeAttribute("tabindex"),this.updateAriaText("")}),this.$module.appendChild(this.$valuesList),this.$formFieldInputHint||(this.$formFieldInputHint=document.createElement("p"),this.$formFieldInputHint.classList.add("tna-form-item__hint"),this.$formFieldBody.parentNode.insertBefore(this.$formFieldInputHint,this.$formFieldBody)),this.$formFieldInputHint.innerText=this.enhancedHint,this.updateList()}updateAriaText(t){this.$formFieldLiveAria.innerText=t}normaliseValue(t){return t.replace(/\s{2,}/u," ").trim()}isValueInList(t){return this.values.map(t=>this.normaliseValue(t).toLowerCase()).includes(t.toLowerCase().trim())}appendValue(t){const e=this.normaliseValue(t);e?this.isValueInList(e)?this.updateAriaText(`'${e}' already added`):(this.values.push(e),this.$formFieldInput.value=this.values.join("\n"),this.updateList(),this.updateAriaText(`'${e}' added`)):this.updateAriaText("Enter an item to add"),this.$formFieldNewInput.value="",this.$formFieldNewInput.focus()}removeValue(t){const e=this.normaliseValue(t);e&&this.isValueInList(e)&&(this.values=this.values.filter(t=>t!==e),this.$formFieldInput.value=this.values.join("\n"),this.updateList(),this.updateAriaText(`'${e}' removed`)),this.values.length?(this.$valuesList.setAttribute("tabindex","0"),this.$valuesList.focus()):this.$formFieldNewInput.focus()}updateList(){this.$valuesList.innerHTML="",this.values.map(t=>{const e=document.createElement("li");e.classList.add("tna-compound-filters__item");const i=document.createElement("span");i.innerText=t,e.appendChild(i);const r=document.createElement("button");return r.innerText=`Remove '${t}'`,r.setAttribute("type","button"),r.classList.add("tna-compound-filters__link"),r.addEventListener("click",()=>{this.removeValue(t)}),e.appendChild(r),e}).forEach(t=>this.$valuesList.appendChild(t));let t="item";1!==this.values.length&&(t+="s");const e=`${(new Intl.NumberFormat).format(this.values.length)} ${t} added`;this.$formFieldCounter.innerText=e}}}};const e={};function i(r){const n=e[r];if(void 0!==n)return n.exports;const s=e[r]={exports:{}};return t[r](s,s.exports,i),s.exports}i.d=(t,e)=>{for(var r in e)i.o(e,r)&&!i.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:e[r]})},i.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),i.r=t=>{Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};let r={};i.r(r),i.d(r,{TextAreaCharacterCount:()=>n.default,TextAreaItemisedRows:()=>s.default});var n=i(740),s=i(371);return r})());
 //# sourceMappingURL=textarea.js.map

package/nationalarchives/components/textarea/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/textarea/textarea.js","mappings":"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","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/./src/nationalarchives/components/textarea/TextAreaCharacterCount.mjs","webpack://TNAFrontend/./src/nationalarchives/components/textarea/TextAreaItemisedRows.mjs","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","export default class TextAreaCharacterCount {\n  constructor($module, options = {}) {\n    this.$module = $module;\n    this.$formFieldInput =\n      this.$module && this.$module.querySelector(\".tna-textarea\");\n    this.$formFieldCharacterCount =\n      this.$module && this.$module.querySelector(\".tna-textarea-count\");\n    this.$formFieldCharacterCountScreenReader =\n      this.$module &&\n      this.$module.querySelector(\".tna-textarea-count__screen-reader-status\");\n    this.max = parseInt(this.$formFieldInput?.dataset?.maxLength, 10);\n    this.countType = this.$formFieldInput?.dataset?.countType || \"characters\";\n\n    if (\n      !this.$module ||\n      !this.$formFieldInput ||\n      !this.$formFieldCharacterCount ||\n      !this.$formFieldCharacterCountScreenReader ||\n      !this.max\n    ) {\n      return;\n    }\n\n    this.init(options);\n  }\n\n  init(options) {\n    this.threshold =\n      options.threshold ||\n      parseInt(this.$formFieldInput?.dataset?.countThreshold, 10) ||\n      /* eslint-disable-next-line no-magic-numbers */\n      0;\n    this.debounceDuration =\n      options.debounceDuration ||\n      parseInt(this.$formFieldInput?.dataset?.debounceDuration, 10) ||\n      /* eslint-disable-next-line no-magic-numbers */\n      1000;\n    /* eslint-disable-next-line no-magic-numbers */\n    this.intervalChecker = options.intervalChecker || 1000;\n    this.debounceTimeout = null;\n    this.lastInputValue = \"\";\n\n    this.$formFieldInput.addEventListener(\"input\", () => {\n      this.handleInput();\n      this.lastInputTimestamp = Date.now();\n    });\n    this.$formFieldInput.addEventListener(\"focus\", () => {\n      this.handleFocus();\n    });\n    this.$formFieldInput.addEventListener(\"blur\", () => {\n      this.handleBlur();\n    });\n    this.updateVisualCharacterCount();\n    this.updateScreenReaderCharacterCount();\n  }\n\n  handleFocus() {\n    this.valueChecker = window.setInterval(() => {\n      if (\n        !this.lastInputTimestamp ||\n        /* eslint-disable-next-line no-magic-numbers */\n        Date.now() - this.intervalChecker / 2 >= this.lastInputTimestamp\n      ) {\n        this.updateIfValueChanged();\n      }\n    }, this.intervalChecker);\n  }\n\n  handleBlur() {\n    if (this.valueChecker) {\n      window.clearInterval(this.valueChecker);\n    }\n    this.updateScreenReaderCharacterCount();\n  }\n\n  updateIfValueChanged() {\n    if (this.$formFieldInput.value !== this.lastInputValue) {\n      this.lastInputValue = this.$formFieldInput.value;\n      this.updateVisualCharacterCount();\n      this.updateScreenReaderCharacterCount();\n    }\n  }\n\n  handleInput() {\n    this.updateVisualCharacterCount();\n    clearTimeout(this.debounceTimeout);\n    this.debounceTimeout = setTimeout(() => {\n      this.updateScreenReaderCharacterCount();\n    }, this.debounceDuration);\n  }\n\n  getCurrentLength() {\n    if (this.countType === \"words\") {\n      const trimmedValue = this.$formFieldInput.value.trim();\n      if (trimmedValue === \"\") {\n        /* eslint-disable-next-line no-magic-numbers */\n        return 0;\n      }\n      return trimmedValue.split(/\\s+/).length;\n    }\n    return this.$formFieldInput.value.length;\n  }\n\n  getCurrentLengthMessage() {\n    const currentLength = this.getCurrentLength();\n    let typeLabel = this.countType;\n    /* eslint-disable-next-line no-magic-numbers */\n    if (Math.abs(this.max - currentLength) === 1) {\n      typeLabel = typeLabel.replace(/s$/, \"\");\n    }\n    if (currentLength > this.max) {\n      return `You have ${new Intl.NumberFormat().format(currentLength - this.max)} ${typeLabel} too many`;\n    }\n    return `You have ${new Intl.NumberFormat().format(this.max - currentLength)} ${typeLabel} remaining`;\n  }\n\n  isOverThreshold() {\n    return this.getCurrentLength() > this.max;\n  }\n\n  updateVisualCharacterCount() {\n    if (this.threshold) {\n      /* eslint-disable-next-line no-magic-numbers */\n      if (this.getCurrentLength() > this.max * (this.threshold / 100)) {\n        this.showCharacterCount();\n      } else {\n        this.hideCharacterCount();\n      }\n    }\n\n    this.$formFieldCharacterCount.innerText = this.getCurrentLengthMessage();\n    if (this.isOverThreshold()) {\n      this.$formFieldInput.classList.add(\"tna-textarea--error\");\n      this.$formFieldCharacterCount.classList.add(\"tna-textarea-count--error\");\n    } else {\n      this.$formFieldInput.classList.remove(\"tna-textarea--error\");\n      this.$formFieldCharacterCount.classList.remove(\n        \"tna-textarea-count--error\",\n      );\n    }\n  }\n\n  updateScreenReaderCharacterCount() {\n    const currentLengthMessage = this.getCurrentLengthMessage();\n    this.$formFieldCharacterCountScreenReader.innerText = currentLengthMessage;\n  }\n\n  showCharacterCount() {\n    this.$formFieldCharacterCount.removeAttribute(\"hidden\");\n    this.$formFieldCharacterCountScreenReader.removeAttribute(\"aria-hidden\");\n  }\n\n  hideCharacterCount() {\n    this.$formFieldCharacterCount.setAttribute(\"hidden\", \"\");\n    this.$formFieldCharacterCountScreenReader.setAttribute(\n      \"aria-hidden\",\n      \"true\",\n    );\n  }\n}\n","export default class TextAreaItemisedRows {\n  constructor($module, options = {}) {\n    this.$module = $module;\n    this.$formFieldInput =\n      this.$module && this.$module.querySelector(\".tna-textarea\");\n    this.$formFieldInputHint =\n      this.$module && this.$module.querySelector(\".tna-form-item__hint\");\n    this.$formFieldBody =\n      this.$module && this.$module.querySelector(\".tna-form-item__body\");\n\n    if (\n      !this.$module ||\n      !this.$formFieldInput ||\n      !this.$formFieldBody ||\n      this.$formFieldInput.getAttribute(\"hidden\") !== null\n    ) {\n      return;\n    }\n\n    if (!(this.$formFieldInput instanceof HTMLTextAreaElement)) {\n      throw new Error(\"Expected a textarea element\");\n    }\n\n    const { enhancedHint } = options;\n    this.enhancedHint = enhancedHint || \"Enter an item and press enter\";\n\n    this.values = this.$formFieldInput.value\n      .split(\"\\n\")\n      .map((value) => value.trim())\n      .filter((value) => value);\n\n    this.id = this.$formFieldInput.id;\n\n    this.init();\n  }\n\n  init() {\n    this.$formFieldNewInput = document.createElement(\"input\");\n    this.$formFieldNewInput.classList.add(\"tna-text-input\");\n    [\"id\", \"aria-describedby\"].forEach((attribute) => {\n      this.$formFieldNewInput.setAttribute(\n        attribute,\n        this.$formFieldInput.getAttribute(attribute),\n      );\n      this.$formFieldInput.removeAttribute(attribute);\n    });\n    this.$formFieldBody.appendChild(this.$formFieldNewInput);\n    this.$formFieldInput.setAttribute(\"hidden\", \"\");\n    this.$formFieldInput.addEventListener(\"keyup\", () => this.updateList());\n    this.$formFieldNewInput.addEventListener(\"keypress\", (event) => {\n      if (event.key === \"Enter\") {\n        this.appendValue(event.target.value);\n      }\n    });\n\n    this.$formFieldNewInputAddButton = document.createElement(\"button\");\n    this.$formFieldNewInputAddButton.setAttribute(\"type\", \"button\");\n    this.$formFieldNewInputAddButton.classList.add(\n      \"tna-button\",\n      \"tna-button--small\",\n    );\n    this.$formFieldNewInputAddButtonInner = document.createElement(\"span\");\n    this.$formFieldNewInputAddButtonInner.innerText = \"Add\";\n    this.$formFieldNewInputAddButtonInnerExtra = document.createElement(\"span\");\n    this.$formFieldNewInputAddButtonInnerExtra.classList.add(\n      \"tna-visually-hidden\",\n    );\n    this.$formFieldNewInputAddButtonInnerExtra.innerText = \" to list\";\n    this.$formFieldNewInputAddButtonInner.appendChild(\n      this.$formFieldNewInputAddButtonInnerExtra,\n    );\n    this.$formFieldNewInputAddButton.appendChild(\n      this.$formFieldNewInputAddButtonInner,\n    );\n    this.$formFieldBody.appendChild(this.$formFieldNewInputAddButton);\n    this.$formFieldNewInputAddButton.addEventListener(\"click\", () => {\n      this.appendValue(this.$formFieldNewInput.value);\n    });\n\n    this.$formFieldLiveAria = document.createElement(\"div\");\n    this.$formFieldLiveAria.setAttribute(\"aria-live\", \"polite\");\n    this.$formFieldLiveAria.classList.add(\"tna-visually-hidden\");\n    this.$module.appendChild(this.$formFieldLiveAria);\n\n    this.$formFieldCounter = document.createElement(\"p\");\n    this.$formFieldCounter.id = `${this.id}-list-helper`;\n    this.$formFieldCounter.classList.add(\"tna-!--margin-top-xs\");\n    this.$module.appendChild(this.$formFieldCounter);\n\n    this.$formFieldNewInput.setAttribute(\n      \"aria-describedby\",\n      `${this.$formFieldNewInput.getAttribute(\"aria-describedby\")} ${\n        this.$formFieldCounter.id\n      }`,\n    );\n\n    this.$valuesList = document.createElement(\"ul\");\n    this.$valuesList.classList.add(\n      \"tna-compound-filters\",\n      \"tna-!--margin-top-xs\",\n    );\n    this.$valuesList.addEventListener(\"blur\", () => {\n      this.$valuesList.removeAttribute(\"tabindex\");\n      this.updateAriaText(\"\");\n    });\n    this.$module.appendChild(this.$valuesList);\n\n    if (!this.$formFieldInputHint) {\n      this.$formFieldInputHint = document.createElement(\"p\");\n      this.$formFieldInputHint.classList.add(\"tna-form-item__hint\");\n      this.$formFieldBody.parentNode.insertBefore(\n        this.$formFieldInputHint,\n        this.$formFieldBody,\n      );\n    }\n    this.$formFieldInputHint.innerText = this.enhancedHint;\n\n    this.updateList();\n  }\n\n  updateAriaText(content) {\n    this.$formFieldLiveAria.innerText = content;\n  }\n\n  /* eslint-disable-next-line class-methods-use-this */\n  normaliseValue(value) {\n    return value.replace(/\\s{2,}/u, \" \").trim();\n  }\n\n  isValueInList(value) {\n    return this.values\n      .map((eachValue) => this.normaliseValue(eachValue).toLowerCase())\n      .includes(value.toLowerCase().trim());\n  }\n\n  appendValue(value) {\n    const newValue = this.normaliseValue(value);\n    if (newValue) {\n      if (this.isValueInList(newValue)) {\n        this.updateAriaText(`'${newValue}' already added`);\n      } else {\n        this.values.push(newValue);\n        this.$formFieldInput.value = this.values.join(\"\\n\");\n        this.updateList();\n        this.updateAriaText(`'${newValue}' added`);\n      }\n    } else {\n      this.updateAriaText(\"Enter an item to add\");\n    }\n    this.$formFieldNewInput.value = \"\";\n    this.$formFieldNewInput.focus();\n  }\n\n  removeValue(value) {\n    const removeValue = this.normaliseValue(value);\n    if (removeValue && this.isValueInList(removeValue)) {\n      this.values = this.values.filter(\n        (existingValue) => existingValue !== removeValue,\n      );\n      this.$formFieldInput.value = this.values.join(\"\\n\");\n      this.updateList();\n      this.updateAriaText(`'${removeValue}' removed`);\n    }\n    if (this.values.length) {\n      this.$valuesList.setAttribute(\"tabindex\", \"0\");\n      this.$valuesList.focus();\n    } else {\n      this.$formFieldNewInput.focus();\n    }\n  }\n\n  updateList() {\n    this.$valuesList.innerHTML = \"\";\n    this.values\n      .map((value) => {\n        const $item = document.createElement(\"li\");\n        $item.classList.add(\"tna-compound-filters__item\");\n        const $itemLabel = document.createElement(\"span\");\n        $itemLabel.innerText = value;\n        $item.appendChild($itemLabel);\n\n        const $removeItemButton = document.createElement(\"button\");\n        $removeItemButton.innerText = `Remove '${value}'`;\n        $removeItemButton.setAttribute(\"type\", \"button\");\n        $removeItemButton.classList.add(\"tna-compound-filters__link\");\n        $removeItemButton.addEventListener(\"click\", () => {\n          this.removeValue(value);\n        });\n        $item.appendChild($removeItemButton);\n        return $item;\n      })\n      .forEach(($item) => this.$valuesList.appendChild($item));\n\n    let innerTextItemValue = \"item\";\n    /* eslint-disable-next-line no-magic-numbers */\n    if (this.values.length !== 1) {\n      innerTextItemValue += \"s\";\n    }\n    const innerTextValue = `${new Intl.NumberFormat().format(this.values.length)} ${innerTextItemValue} added`;\n    this.$formFieldCounter.innerText = innerTextValue;\n  }\n}\n","// The module cache\nconst __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tconst cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tconst module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define getter/value functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop));","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};"],"names":["root","factory","exports","module","define","amd","self","TextAreaCharacterCount","constructor","$module","options","this","$formFieldInput","querySelector","$formFieldCharacterCount","$formFieldCharacterCountScreenReader","max","parseInt","dataset","maxLength","countType","init","threshold","countThreshold","debounceDuration","intervalChecker","debounceTimeout","lastInputValue","addEventListener","handleInput","lastInputTimestamp","Date","now","handleFocus","handleBlur","updateVisualCharacterCount","updateScreenReaderCharacterCount","valueChecker","window","setInterval","updateIfValueChanged","clearInterval","value","clearTimeout","setTimeout","getCurrentLength","trimmedValue","trim","split","length","getCurrentLengthMessage","currentLength","typeLabel","Math","abs","replace","Intl","NumberFormat","format","isOverThreshold","showCharacterCount","hideCharacterCount","innerText","classList","add","remove","currentLengthMessage","removeAttribute","setAttribute","TextAreaItemisedRows","$formFieldInputHint","$formFieldBody","getAttribute","HTMLTextAreaElement","Error","enhancedHint","values","map","filter","id","$formFieldNewInput","document","createElement","forEach","attribute","appendChild","updateList","event","key","appendValue","target","$formFieldNewInputAddButton","$formFieldNewInputAddButtonInner","$formFieldNewInputAddButtonInnerExtra","$formFieldLiveAria","$formFieldCounter","$valuesList","updateAriaText","parentNode","insertBefore","content","normaliseValue","isValueInList","eachValue","toLowerCase","includes","newValue","push","join","focus","removeValue","existingValue","innerHTML","$item","$itemLabel","$removeItemButton","innerTextItemValue","innerTextValue","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","d","definition","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","r","Symbol","toStringTag"],"sourceRoot":""}
+{"version":3,"file":"components/textarea/textarea.js","mappings":"CAAA,SAAAA,EAAAC,GACA,iBAAAC,SAAA,iBAAAC,OACAA,OAAAD,QAAAD,IACA,mBAAAG,QAAAA,OAAAC,IACAD,OAAA,iBAAAH,GACA,iBAAAC,QACAA,QAAA,YAAAD,IAEAD,EAAA,YAAAC,GACC,CATD,CASCK,KAAA,I,4DCTc,MAAMC,EACnB,WAAAC,CAAYC,EAASC,EAAU,CAAC,GAC9BC,KAAKF,QAAUA,EACfE,KAAKC,gBACHD,KAAKF,SAAWE,KAAKF,QAAQI,cAAc,iBAC7CF,KAAKG,yBACHH,KAAKF,SAAWE,KAAKF,QAAQI,cAAc,uBAC7CF,KAAKI,qCACHJ,KAAKF,SACLE,KAAKF,QAAQI,cAAc,6CAC7BF,KAAKK,IAAMC,SAASN,KAAKC,iBAAiBM,SAASC,UAAW,IAC9DR,KAAKS,UAAYT,KAAKC,iBAAiBM,SAASE,WAAa,aAG1DT,KAAKF,SACLE,KAAKC,iBACLD,KAAKG,0BACLH,KAAKI,sCACLJ,KAAKK,KAKRL,KAAKU,KAAKX,EACZ,CAEA,IAAAW,CAAKX,GACHC,KAAKW,UACHZ,EAAQY,WACRL,SAASN,KAAKC,iBAAiBM,SAASK,eAAgB,KAExD,EACFZ,KAAKa,iBACHd,EAAQc,kBACRP,SAASN,KAAKC,iBAAiBM,SAASM,iBAAkB,KAE1D,IAEFb,KAAKc,gBAAkBf,EAAQe,iBAAmB,IAClDd,KAAKe,gBAAkB,KACvBf,KAAKgB,eAAiB,GAEtBhB,KAAKC,gBAAgBgB,iBAAiB,QAAS,KAC7CjB,KAAKkB,cACLlB,KAAKmB,mBAAqBC,KAAKC,QAEjCrB,KAAKC,gBAAgBgB,iBAAiB,QAAS,KAC7CjB,KAAKsB,gBAEPtB,KAAKC,gBAAgBgB,iBAAiB,OAAQ,KAC5CjB,KAAKuB,eAEPvB,KAAKwB,6BACLxB,KAAKyB,kCACP,CAEA,WAAAH,GACEtB,KAAK0B,aAAeC,OAAOC,YAAY,OAElC5B,KAAKmB,oBAENC,KAAKC,MAAQrB,KAAKc,gBAAkB,GAAKd,KAAKmB,qBAE9CnB,KAAK6B,wBAEN7B,KAAKc,gBACV,CAEA,UAAAS,GACMvB,KAAK0B,cACPC,OAAOG,cAAc9B,KAAK0B,cAE5B1B,KAAKyB,kCACP,CAEA,oBAAAI,GACM7B,KAAKC,gBAAgB8B,QAAU/B,KAAKgB,iBACtChB,KAAKgB,eAAiBhB,KAAKC,gBAAgB8B,MAC3C/B,KAAKwB,6BACLxB,KAAKyB,mCAET,CAEA,WAAAP,GACElB,KAAKwB,6BACLQ,aAAahC,KAAKe,iBAClBf,KAAKe,gBAAkBkB,WAAW,KAChCjC,KAAKyB,oCACJzB,KAAKa,iBACV,CAEA,gBAAAqB,GACE,MAAMC,EAAWnC,KAAKC,gBAAgB8B,MACtC,GAAuB,UAAnB/B,KAAKS,UAAuB,CAC9B,MAAM2B,EAAeD,EAASE,OAC9B,MAAqB,KAAjBD,EAEK,EAEFA,EAAaE,MAAM,OAAOC,MACnC,CACA,OAAOC,MAAMC,KAAKN,GAAUI,MAC9B,CAEA,uBAAAG,GACE,MAAMC,EAAgB3C,KAAKkC,mBAC3B,IAAIU,EAAY5C,KAAKS,UAKrB,OAH2C,IAAvCoC,KAAKC,IAAI9C,KAAKK,IAAMsC,KACtBC,EAAYA,EAAUG,QAAQ,KAAM,KAElCJ,EAAgB3C,KAAKK,IAChB,aAAY,IAAI2C,KAAKC,cAAeC,OAAOP,EAAgB3C,KAAKK,QAAQuC,aAE1E,aAAY,IAAII,KAAKC,cAAeC,OAAOlD,KAAKK,IAAMsC,MAAkBC,aACjF,CAEA,eAAAO,GACE,OAAOnD,KAAKkC,mBAAqBlC,KAAKK,GACxC,CAEA,0BAAAmB,GACMxB,KAAKW,YAEHX,KAAKkC,mBAAqBlC,KAAKK,KAAOL,KAAKW,UAAY,KACzDX,KAAKoD,qBAELpD,KAAKqD,sBAITrD,KAAKG,yBAAyBmD,UAAYtD,KAAK0C,0BAC3C1C,KAAKmD,mBACPnD,KAAKC,gBAAgBsD,UAAUC,IAAI,uBACnCxD,KAAKG,yBAAyBoD,UAAUC,IAAI,+BAE5CxD,KAAKC,gBAAgBsD,UAAUE,OAAO,uBACtCzD,KAAKG,yBAAyBoD,UAAUE,OACtC,6BAGN,CAEA,gCAAAhC,GACE,MAAMiC,EAAuB1D,KAAK0C,0BAClC1C,KAAKI,qCAAqCkD,UAAYI,CACxD,CAEA,kBAAAN,GACEpD,KAAKG,yBAAyBwD,gBAAgB,UAC9C3D,KAAKI,qCAAqCuD,gBAAgB,cAC5D,CAEA,kBAAAN,GACErD,KAAKG,yBAAyByD,aAAa,SAAU,IACrD5D,KAAKI,qCAAqCwD,aACxC,cACA,OAEJ,E,oCC/Ja,MAAMC,EACnB,WAAAhE,CAAYC,EAASC,EAAU,CAAC,GAS9B,GARAC,KAAKF,QAAUA,EACfE,KAAKC,gBACHD,KAAKF,SAAWE,KAAKF,QAAQI,cAAc,iBAC7CF,KAAK8D,oBACH9D,KAAKF,SAAWE,KAAKF,QAAQI,cAAc,wBAC7CF,KAAK+D,eACH/D,KAAKF,SAAWE,KAAKF,QAAQI,cAAc,yBAG1CF,KAAKF,UACLE,KAAKC,kBACLD,KAAK+D,gBAC0C,OAAhD/D,KAAKC,gBAAgB+D,aAAa,UAElC,OAGF,KAAMhE,KAAKC,2BAA2BgE,qBACpC,MAAM,IAAIC,MAAM,+BAGlB,MAAMC,aAAEA,GAAiBpE,EACzBC,KAAKmE,aAAeA,GAAgB,gCAEpCnE,KAAKoE,OAASpE,KAAKC,gBAAgB8B,MAChCO,MAAM,MACN+B,IAAKtC,GAAUA,EAAMM,QACrBiC,OAAQvC,GAAUA,GAErB/B,KAAKuE,GAAKvE,KAAKC,gBAAgBsE,GAE/BvE,KAAKU,MACP,CAEA,IAAAA,GACEV,KAAKwE,mBAAqBC,SAASC,cAAc,SACjD1E,KAAKwE,mBAAmBjB,UAAUC,IAAI,kBACtC,CAAC,KAAM,oBAAoBmB,QAASC,IAClC5E,KAAKwE,mBAAmBZ,aACtBgB,EACA5E,KAAKC,gBAAgB+D,aAAaY,IAEpC5E,KAAKC,gBAAgB0D,gBAAgBiB,KAEvC5E,KAAK+D,eAAec,YAAY7E,KAAKwE,oBACrCxE,KAAKC,gBAAgB2D,aAAa,SAAU,IAC5C5D,KAAKC,gBAAgBgB,iBAAiB,QAAS,IAAMjB,KAAK8E,cAC1D9E,KAAKwE,mBAAmBvD,iBAAiB,WAAa8D,IAClC,UAAdA,EAAMC,KACRhF,KAAKiF,YAAYF,EAAMG,OAAOnD,SAIlC/B,KAAKmF,4BAA8BV,SAASC,cAAc,UAC1D1E,KAAKmF,4BAA4BvB,aAAa,OAAQ,UACtD5D,KAAKmF,4BAA4B5B,UAAUC,IACzC,aACA,qBAEFxD,KAAKoF,iCAAmCX,SAASC,cAAc,QAC/D1E,KAAKoF,iCAAiC9B,UAAY,MAClDtD,KAAKqF,sCAAwCZ,SAASC,cAAc,QACpE1E,KAAKqF,sCAAsC9B,UAAUC,IACnD,uBAEFxD,KAAKqF,sCAAsC/B,UAAY,WACvDtD,KAAKoF,iCAAiCP,YACpC7E,KAAKqF,uCAEPrF,KAAKmF,4BAA4BN,YAC/B7E,KAAKoF,kCAEPpF,KAAK+D,eAAec,YAAY7E,KAAKmF,6BACrCnF,KAAKmF,4BAA4BlE,iBAAiB,QAAS,KACzDjB,KAAKiF,YAAYjF,KAAKwE,mBAAmBzC,SAG3C/B,KAAKsF,mBAAqBb,SAASC,cAAc,OACjD1E,KAAKsF,mBAAmB1B,aAAa,YAAa,UAClD5D,KAAKsF,mBAAmB/B,UAAUC,IAAI,uBACtCxD,KAAKF,QAAQ+E,YAAY7E,KAAKsF,oBAE9BtF,KAAKuF,kBAAoBd,SAASC,cAAc,KAChD1E,KAAKuF,kBAAkBhB,GAAK,GAAGvE,KAAKuE,iBACpCvE,KAAKuF,kBAAkBhC,UAAUC,IAAI,wBACrCxD,KAAKF,QAAQ+E,YAAY7E,KAAKuF,mBAE9BvF,KAAKwE,mBAAmBZ,aACtB,mBACA,GAAG5D,KAAKwE,mBAAmBR,aAAa,uBACtChE,KAAKuF,kBAAkBhB,MAI3BvE,KAAKwF,YAAcf,SAASC,cAAc,MAC1C1E,KAAKwF,YAAYjC,UAAUC,IACzB,uBACA,wBAEFxD,KAAKwF,YAAYvE,iBAAiB,OAAQ,KACxCjB,KAAKwF,YAAY7B,gBAAgB,YACjC3D,KAAKyF,eAAe,MAEtBzF,KAAKF,QAAQ+E,YAAY7E,KAAKwF,aAEzBxF,KAAK8D,sBACR9D,KAAK8D,oBAAsBW,SAASC,cAAc,KAClD1E,KAAK8D,oBAAoBP,UAAUC,IAAI,uBACvCxD,KAAK+D,eAAe2B,WAAWC,aAC7B3F,KAAK8D,oBACL9D,KAAK+D,iBAGT/D,KAAK8D,oBAAoBR,UAAYtD,KAAKmE,aAE1CnE,KAAK8E,YACP,CAEA,cAAAW,CAAeG,GACb5F,KAAKsF,mBAAmBhC,UAAYsC,CACtC,CAGA,cAAAC,CAAe9D,GACb,OAAOA,EAAMgB,QAAQ,UAAW,KAAKV,MACvC,CAEA,aAAAyD,CAAc/D,GACZ,OAAO/B,KAAKoE,OACTC,IAAK0B,GAAc/F,KAAK6F,eAAeE,GAAWC,eAClDC,SAASlE,EAAMiE,cAAc3D,OAClC,CAEA,WAAA4C,CAAYlD,GACV,MAAMmE,EAAWlG,KAAK6F,eAAe9D,GACjCmE,EACElG,KAAK8F,cAAcI,GACrBlG,KAAKyF,eAAe,IAAIS,qBAExBlG,KAAKoE,OAAO+B,KAAKD,GACjBlG,KAAKC,gBAAgB8B,MAAQ/B,KAAKoE,OAAOgC,KAAK,MAC9CpG,KAAK8E,aACL9E,KAAKyF,eAAe,IAAIS,aAG1BlG,KAAKyF,eAAe,wBAEtBzF,KAAKwE,mBAAmBzC,MAAQ,GAChC/B,KAAKwE,mBAAmB6B,OAC1B,CAEA,WAAAC,CAAYvE,GACV,MAAMuE,EAActG,KAAK6F,eAAe9D,GACpCuE,GAAetG,KAAK8F,cAAcQ,KACpCtG,KAAKoE,OAASpE,KAAKoE,OAAOE,OACvBiC,GAAkBA,IAAkBD,GAEvCtG,KAAKC,gBAAgB8B,MAAQ/B,KAAKoE,OAAOgC,KAAK,MAC9CpG,KAAK8E,aACL9E,KAAKyF,eAAe,IAAIa,eAEtBtG,KAAKoE,OAAO7B,QACdvC,KAAKwF,YAAY5B,aAAa,WAAY,KAC1C5D,KAAKwF,YAAYa,SAEjBrG,KAAKwE,mBAAmB6B,OAE5B,CAEA,UAAAvB,GACE9E,KAAKwF,YAAYgB,UAAY,GAC7BxG,KAAKoE,OACFC,IAAKtC,IACJ,MAAM0E,EAAQhC,SAASC,cAAc,MACrC+B,EAAMlD,UAAUC,IAAI,8BACpB,MAAMkD,EAAajC,SAASC,cAAc,QAC1CgC,EAAWpD,UAAYvB,EACvB0E,EAAM5B,YAAY6B,GAElB,MAAMC,EAAoBlC,SAASC,cAAc,UAQjD,OAPAiC,EAAkBrD,UAAY,WAAWvB,KACzC4E,EAAkB/C,aAAa,OAAQ,UACvC+C,EAAkBpD,UAAUC,IAAI,8BAChCmD,EAAkB1F,iBAAiB,QAAS,KAC1CjB,KAAKsG,YAAYvE,KAEnB0E,EAAM5B,YAAY8B,GACXF,IAER9B,QAAS8B,GAAUzG,KAAKwF,YAAYX,YAAY4B,IAEnD,IAAIG,EAAqB,OAEE,IAAvB5G,KAAKoE,OAAO7B,SACdqE,GAAsB,KAExB,MAAMC,EAAiB,IAAG,IAAI7D,KAAKC,cAAeC,OAAOlD,KAAKoE,OAAO7B,WAAWqE,UAChF5G,KAAKuF,kBAAkBjC,UAAYuD,CACrC,E,GCvMF,MAAAC,EAAA,GAGA,SAAAC,EAAAC,GAEA,MAAAC,EAAAH,EAAAE,GACA,QAAAE,IAAAD,EACA,OAAAA,EAAA1H,QAGA,MAAAC,EAAAsH,EAAAE,GAAA,CAGAzH,QAAA,IAOA,OAHA4H,EAAAH,GAAAxH,EAAAA,EAAAD,QAAAwH,GAGAvH,EAAAD,OACA,CCrBAwH,EAAAK,EAAA,CAAA7H,EAAA8H,KACA,QAAArC,KAAAqC,EACAN,EAAAO,EAAAD,EAAArC,KAAA+B,EAAAO,EAAA/H,EAAAyF,IACAuC,OAAAC,eAAAjI,EAAAyF,EAAA,CAAyCyC,YAAA,EAAAC,IAAAL,EAAArC,MCJzC+B,EAAAO,EAAA,CAAAK,EAAAC,IAAAL,OAAAM,UAAAC,eAAAC,KAAAJ,EAAAC,GCCAb,EAAAiB,EAAAzI,IACAgI,OAAAC,eAAAjI,EAAA0I,OAAAC,YAAA,CAAsDnG,MAAA,WACtDwF,OAAAC,eAAAjI,EAAA,cAAgDwC,OAAA,K","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/./src/nationalarchives/components/textarea/TextAreaCharacterCount.mjs","webpack://TNAFrontend/./src/nationalarchives/components/textarea/TextAreaItemisedRows.mjs","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","export default class TextAreaCharacterCount {\n  constructor($module, options = {}) {\n    this.$module = $module;\n    this.$formFieldInput =\n      this.$module && this.$module.querySelector(\".tna-textarea\");\n    this.$formFieldCharacterCount =\n      this.$module && this.$module.querySelector(\".tna-textarea-count\");\n    this.$formFieldCharacterCountScreenReader =\n      this.$module &&\n      this.$module.querySelector(\".tna-textarea-count__screen-reader-status\");\n    this.max = parseInt(this.$formFieldInput?.dataset?.maxLength, 10);\n    this.countType = this.$formFieldInput?.dataset?.countType || \"characters\";\n\n    if (\n      !this.$module ||\n      !this.$formFieldInput ||\n      !this.$formFieldCharacterCount ||\n      !this.$formFieldCharacterCountScreenReader ||\n      !this.max\n    ) {\n      return;\n    }\n\n    this.init(options);\n  }\n\n  init(options) {\n    this.threshold =\n      options.threshold ||\n      parseInt(this.$formFieldInput?.dataset?.countThreshold, 10) ||\n      /* eslint-disable-next-line no-magic-numbers */\n      0;\n    this.debounceDuration =\n      options.debounceDuration ||\n      parseInt(this.$formFieldInput?.dataset?.debounceDuration, 10) ||\n      /* eslint-disable-next-line no-magic-numbers */\n      1000;\n    /* eslint-disable-next-line no-magic-numbers */\n    this.intervalChecker = options.intervalChecker || 1000;\n    this.debounceTimeout = null;\n    this.lastInputValue = \"\";\n\n    this.$formFieldInput.addEventListener(\"input\", () => {\n      this.handleInput();\n      this.lastInputTimestamp = Date.now();\n    });\n    this.$formFieldInput.addEventListener(\"focus\", () => {\n      this.handleFocus();\n    });\n    this.$formFieldInput.addEventListener(\"blur\", () => {\n      this.handleBlur();\n    });\n    this.updateVisualCharacterCount();\n    this.updateScreenReaderCharacterCount();\n  }\n\n  handleFocus() {\n    this.valueChecker = window.setInterval(() => {\n      if (\n        !this.lastInputTimestamp ||\n        /* eslint-disable-next-line no-magic-numbers */\n        Date.now() - this.intervalChecker / 2 >= this.lastInputTimestamp\n      ) {\n        this.updateIfValueChanged();\n      }\n    }, this.intervalChecker);\n  }\n\n  handleBlur() {\n    if (this.valueChecker) {\n      window.clearInterval(this.valueChecker);\n    }\n    this.updateScreenReaderCharacterCount();\n  }\n\n  updateIfValueChanged() {\n    if (this.$formFieldInput.value !== this.lastInputValue) {\n      this.lastInputValue = this.$formFieldInput.value;\n      this.updateVisualCharacterCount();\n      this.updateScreenReaderCharacterCount();\n    }\n  }\n\n  handleInput() {\n    this.updateVisualCharacterCount();\n    clearTimeout(this.debounceTimeout);\n    this.debounceTimeout = setTimeout(() => {\n      this.updateScreenReaderCharacterCount();\n    }, this.debounceDuration);\n  }\n\n  getCurrentLength() {\n    const rawValue = this.$formFieldInput.value;\n    if (this.countType === \"words\") {\n      const trimmedValue = rawValue.trim();\n      if (trimmedValue === \"\") {\n        /* eslint-disable-next-line no-magic-numbers */\n        return 0;\n      }\n      return trimmedValue.split(/\\s+/).length;\n    }\n    return Array.from(rawValue).length;\n  }\n\n  getCurrentLengthMessage() {\n    const currentLength = this.getCurrentLength();\n    let typeLabel = this.countType;\n    /* eslint-disable-next-line no-magic-numbers */\n    if (Math.abs(this.max - currentLength) === 1) {\n      typeLabel = typeLabel.replace(/s$/, \"\");\n    }\n    if (currentLength > this.max) {\n      return `You have ${new Intl.NumberFormat().format(currentLength - this.max)} ${typeLabel} too many`;\n    }\n    return `You have ${new Intl.NumberFormat().format(this.max - currentLength)} ${typeLabel} remaining`;\n  }\n\n  isOverThreshold() {\n    return this.getCurrentLength() > this.max;\n  }\n\n  updateVisualCharacterCount() {\n    if (this.threshold) {\n      /* eslint-disable-next-line no-magic-numbers */\n      if (this.getCurrentLength() > this.max * (this.threshold / 100)) {\n        this.showCharacterCount();\n      } else {\n        this.hideCharacterCount();\n      }\n    }\n\n    this.$formFieldCharacterCount.innerText = this.getCurrentLengthMessage();\n    if (this.isOverThreshold()) {\n      this.$formFieldInput.classList.add(\"tna-textarea--error\");\n      this.$formFieldCharacterCount.classList.add(\"tna-textarea-count--error\");\n    } else {\n      this.$formFieldInput.classList.remove(\"tna-textarea--error\");\n      this.$formFieldCharacterCount.classList.remove(\n        \"tna-textarea-count--error\",\n      );\n    }\n  }\n\n  updateScreenReaderCharacterCount() {\n    const currentLengthMessage = this.getCurrentLengthMessage();\n    this.$formFieldCharacterCountScreenReader.innerText = currentLengthMessage;\n  }\n\n  showCharacterCount() {\n    this.$formFieldCharacterCount.removeAttribute(\"hidden\");\n    this.$formFieldCharacterCountScreenReader.removeAttribute(\"aria-hidden\");\n  }\n\n  hideCharacterCount() {\n    this.$formFieldCharacterCount.setAttribute(\"hidden\", \"\");\n    this.$formFieldCharacterCountScreenReader.setAttribute(\n      \"aria-hidden\",\n      \"true\",\n    );\n  }\n}\n","export default class TextAreaItemisedRows {\n  constructor($module, options = {}) {\n    this.$module = $module;\n    this.$formFieldInput =\n      this.$module && this.$module.querySelector(\".tna-textarea\");\n    this.$formFieldInputHint =\n      this.$module && this.$module.querySelector(\".tna-form-item__hint\");\n    this.$formFieldBody =\n      this.$module && this.$module.querySelector(\".tna-form-item__body\");\n\n    if (\n      !this.$module ||\n      !this.$formFieldInput ||\n      !this.$formFieldBody ||\n      this.$formFieldInput.getAttribute(\"hidden\") !== null\n    ) {\n      return;\n    }\n\n    if (!(this.$formFieldInput instanceof HTMLTextAreaElement)) {\n      throw new Error(\"Expected a textarea element\");\n    }\n\n    const { enhancedHint } = options;\n    this.enhancedHint = enhancedHint || \"Enter an item and press enter\";\n\n    this.values = this.$formFieldInput.value\n      .split(\"\\n\")\n      .map((value) => value.trim())\n      .filter((value) => value);\n\n    this.id = this.$formFieldInput.id;\n\n    this.init();\n  }\n\n  init() {\n    this.$formFieldNewInput = document.createElement(\"input\");\n    this.$formFieldNewInput.classList.add(\"tna-text-input\");\n    [\"id\", \"aria-describedby\"].forEach((attribute) => {\n      this.$formFieldNewInput.setAttribute(\n        attribute,\n        this.$formFieldInput.getAttribute(attribute),\n      );\n      this.$formFieldInput.removeAttribute(attribute);\n    });\n    this.$formFieldBody.appendChild(this.$formFieldNewInput);\n    this.$formFieldInput.setAttribute(\"hidden\", \"\");\n    this.$formFieldInput.addEventListener(\"keyup\", () => this.updateList());\n    this.$formFieldNewInput.addEventListener(\"keypress\", (event) => {\n      if (event.key === \"Enter\") {\n        this.appendValue(event.target.value);\n      }\n    });\n\n    this.$formFieldNewInputAddButton = document.createElement(\"button\");\n    this.$formFieldNewInputAddButton.setAttribute(\"type\", \"button\");\n    this.$formFieldNewInputAddButton.classList.add(\n      \"tna-button\",\n      \"tna-button--small\",\n    );\n    this.$formFieldNewInputAddButtonInner = document.createElement(\"span\");\n    this.$formFieldNewInputAddButtonInner.innerText = \"Add\";\n    this.$formFieldNewInputAddButtonInnerExtra = document.createElement(\"span\");\n    this.$formFieldNewInputAddButtonInnerExtra.classList.add(\n      \"tna-visually-hidden\",\n    );\n    this.$formFieldNewInputAddButtonInnerExtra.innerText = \" to list\";\n    this.$formFieldNewInputAddButtonInner.appendChild(\n      this.$formFieldNewInputAddButtonInnerExtra,\n    );\n    this.$formFieldNewInputAddButton.appendChild(\n      this.$formFieldNewInputAddButtonInner,\n    );\n    this.$formFieldBody.appendChild(this.$formFieldNewInputAddButton);\n    this.$formFieldNewInputAddButton.addEventListener(\"click\", () => {\n      this.appendValue(this.$formFieldNewInput.value);\n    });\n\n    this.$formFieldLiveAria = document.createElement(\"div\");\n    this.$formFieldLiveAria.setAttribute(\"aria-live\", \"polite\");\n    this.$formFieldLiveAria.classList.add(\"tna-visually-hidden\");\n    this.$module.appendChild(this.$formFieldLiveAria);\n\n    this.$formFieldCounter = document.createElement(\"p\");\n    this.$formFieldCounter.id = `${this.id}-list-helper`;\n    this.$formFieldCounter.classList.add(\"tna-!--margin-top-xs\");\n    this.$module.appendChild(this.$formFieldCounter);\n\n    this.$formFieldNewInput.setAttribute(\n      \"aria-describedby\",\n      `${this.$formFieldNewInput.getAttribute(\"aria-describedby\")} ${\n        this.$formFieldCounter.id\n      }`,\n    );\n\n    this.$valuesList = document.createElement(\"ul\");\n    this.$valuesList.classList.add(\n      \"tna-compound-filters\",\n      \"tna-!--margin-top-xs\",\n    );\n    this.$valuesList.addEventListener(\"blur\", () => {\n      this.$valuesList.removeAttribute(\"tabindex\");\n      this.updateAriaText(\"\");\n    });\n    this.$module.appendChild(this.$valuesList);\n\n    if (!this.$formFieldInputHint) {\n      this.$formFieldInputHint = document.createElement(\"p\");\n      this.$formFieldInputHint.classList.add(\"tna-form-item__hint\");\n      this.$formFieldBody.parentNode.insertBefore(\n        this.$formFieldInputHint,\n        this.$formFieldBody,\n      );\n    }\n    this.$formFieldInputHint.innerText = this.enhancedHint;\n\n    this.updateList();\n  }\n\n  updateAriaText(content) {\n    this.$formFieldLiveAria.innerText = content;\n  }\n\n  /* eslint-disable-next-line class-methods-use-this */\n  normaliseValue(value) {\n    return value.replace(/\\s{2,}/u, \" \").trim();\n  }\n\n  isValueInList(value) {\n    return this.values\n      .map((eachValue) => this.normaliseValue(eachValue).toLowerCase())\n      .includes(value.toLowerCase().trim());\n  }\n\n  appendValue(value) {\n    const newValue = this.normaliseValue(value);\n    if (newValue) {\n      if (this.isValueInList(newValue)) {\n        this.updateAriaText(`'${newValue}' already added`);\n      } else {\n        this.values.push(newValue);\n        this.$formFieldInput.value = this.values.join(\"\\n\");\n        this.updateList();\n        this.updateAriaText(`'${newValue}' added`);\n      }\n    } else {\n      this.updateAriaText(\"Enter an item to add\");\n    }\n    this.$formFieldNewInput.value = \"\";\n    this.$formFieldNewInput.focus();\n  }\n\n  removeValue(value) {\n    const removeValue = this.normaliseValue(value);\n    if (removeValue && this.isValueInList(removeValue)) {\n      this.values = this.values.filter(\n        (existingValue) => existingValue !== removeValue,\n      );\n      this.$formFieldInput.value = this.values.join(\"\\n\");\n      this.updateList();\n      this.updateAriaText(`'${removeValue}' removed`);\n    }\n    if (this.values.length) {\n      this.$valuesList.setAttribute(\"tabindex\", \"0\");\n      this.$valuesList.focus();\n    } else {\n      this.$formFieldNewInput.focus();\n    }\n  }\n\n  updateList() {\n    this.$valuesList.innerHTML = \"\";\n    this.values\n      .map((value) => {\n        const $item = document.createElement(\"li\");\n        $item.classList.add(\"tna-compound-filters__item\");\n        const $itemLabel = document.createElement(\"span\");\n        $itemLabel.innerText = value;\n        $item.appendChild($itemLabel);\n\n        const $removeItemButton = document.createElement(\"button\");\n        $removeItemButton.innerText = `Remove '${value}'`;\n        $removeItemButton.setAttribute(\"type\", \"button\");\n        $removeItemButton.classList.add(\"tna-compound-filters__link\");\n        $removeItemButton.addEventListener(\"click\", () => {\n          this.removeValue(value);\n        });\n        $item.appendChild($removeItemButton);\n        return $item;\n      })\n      .forEach(($item) => this.$valuesList.appendChild($item));\n\n    let innerTextItemValue = \"item\";\n    /* eslint-disable-next-line no-magic-numbers */\n    if (this.values.length !== 1) {\n      innerTextItemValue += \"s\";\n    }\n    const innerTextValue = `${new Intl.NumberFormat().format(this.values.length)} ${innerTextItemValue} added`;\n    this.$formFieldCounter.innerText = innerTextValue;\n  }\n}\n","// The module cache\nconst __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tconst cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tconst module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define getter/value functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop));","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};"],"names":["root","factory","exports","module","define","amd","self","TextAreaCharacterCount","constructor","$module","options","this","$formFieldInput","querySelector","$formFieldCharacterCount","$formFieldCharacterCountScreenReader","max","parseInt","dataset","maxLength","countType","init","threshold","countThreshold","debounceDuration","intervalChecker","debounceTimeout","lastInputValue","addEventListener","handleInput","lastInputTimestamp","Date","now","handleFocus","handleBlur","updateVisualCharacterCount","updateScreenReaderCharacterCount","valueChecker","window","setInterval","updateIfValueChanged","clearInterval","value","clearTimeout","setTimeout","getCurrentLength","rawValue","trimmedValue","trim","split","length","Array","from","getCurrentLengthMessage","currentLength","typeLabel","Math","abs","replace","Intl","NumberFormat","format","isOverThreshold","showCharacterCount","hideCharacterCount","innerText","classList","add","remove","currentLengthMessage","removeAttribute","setAttribute","TextAreaItemisedRows","$formFieldInputHint","$formFieldBody","getAttribute","HTMLTextAreaElement","Error","enhancedHint","values","map","filter","id","$formFieldNewInput","document","createElement","forEach","attribute","appendChild","updateList","event","key","appendValue","target","$formFieldNewInputAddButton","$formFieldNewInputAddButtonInner","$formFieldNewInputAddButtonInnerExtra","$formFieldLiveAria","$formFieldCounter","$valuesList","updateAriaText","parentNode","insertBefore","content","normaliseValue","isValueInList","eachValue","toLowerCase","includes","newValue","push","join","focus","removeValue","existingValue","innerHTML","$item","$itemLabel","$removeItemButton","innerTextItemValue","innerTextValue","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","d","definition","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","r","Symbol","toStringTag"],"sourceRoot":""}

package/nationalarchives/templates/layouts/_generic.njk

@@ -5,13 +5,13 @@
 {%- from "nationalarchives/components/header/macro.njk" import tnaHeader -%}
 {%- from "nationalarchives/components/skip-link/macro.njk" import tnaSkipLink -%}
 
-{%- from "nationalarchives/templates/macros/title.njk" import title -%}
+{%- from "nationalarchives/templates/macros/page-site-title-display.njk" import tnaPageSiteTitleDisplay -%}
 
 <!DOCTYPE html>
 <html lang="{{ htmlLang | default('en') }}" class="tna-template{% if theme and theme != 'light' %} tna-template--{{ theme }}-theme{% endif %}{% if themeAccent %} tna-template--{{ themeAccent }}-accent{% endif %}{% if htmlClasses %} {{ htmlClasses }}{% endif %}"{% for attribute, value in htmlAttributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>
   <head>
     <meta charset="utf-8">
-    <title>{% block pageTitle %}{{ title(pageTitle, siteTitle) }}{% endblock pageTitle %}</title>
+    <title>{% block pageTitle %}{{ tnaPageSiteTitleDisplay(pageTitle, siteTitle) }}{% endblock pageTitle %}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
     <meta name="theme-color" content="{{ themeColor | default('#010101') }}">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">

package/nationalarchives/templates/macros/{title.njk → page-site-title-display.njk}

@@ -1,4 +1,4 @@
-{% macro title(pageTitle, siteTitle, maxTitleLength, separator, ellipsis) %}
+{% macro tnaPageSiteTitleDisplay(pageTitle, siteTitle, maxTitleLength, separator, ellipsis) %}
   {#-
       Truncate any pageTitle that would cause the length of the <title> to exceed 70 characters
       See https://html-validate.org/rules/long-title.html

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "1.6.0",
+  "version": "1.6.2",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",