@nationalarchives/frontend 1.6.2 → 1.6.3

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(){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})());
+!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={}){if(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.$module&&this.$formFieldInput&&this.$formFieldCharacterCount&&this.$formFieldCharacterCountScreenReader&&this.max))return;const r={length:{labels:["character","characters"]},characters:{labels:["character","characters"],segmenterGranularity:"grapheme"},words:{labels:["word","words"],segmenterGranularity:"word"}};if(this.countType=this.$formFieldInput?.dataset?.countType||"length",!r[this.countType])throw new Error(`Unsupported count type: ${this.countType}`);this.config=r[this.countType],this.init(t)}init(e){if(this.segmenter=null,"undefined"!=typeof Intl&&"function"==typeof Intl.Segmenter&&this.config.segmenterGranularity){const t=e.language||navigator.language||"en";this.segmenter=new Intl.Segmenter(t,{granularity:this.config.segmenterGranularity})}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;return"length"===this.countType?e.length:"characters"===this.countType?this.segmenter?Array.from(this.segmenter.segment(e)).length:Array.from(e).length:"words"===this.countType?this.segmenter?Array.from(this.segmenter.segment(e)).filter(e=>e.isWordLike).length:e.trim().split(/\s+/).length:0}getCurrentLengthMessage(){const e=this.getCurrentLength(),[t,r]=this.config.labels;let a=r;return 1===Math.abs(this.max-e)&&(a=t),e>this.max?`You have ${(new Intl.NumberFormat).format(e-this.max)} ${a} too many`:`You have ${(new Intl.NumberFormat).format(this.max-e)} ${a} 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    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":""}
+{"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\n    if (\n      !this.$module ||\n      !this.$formFieldInput ||\n      !this.$formFieldCharacterCount ||\n      !this.$formFieldCharacterCountScreenReader ||\n      !this.max\n    ) {\n      return;\n    }\n\n    const countConfigOptions = {\n      length: { labels: [\"character\", \"characters\"] },\n      characters: {\n        labels: [\"character\", \"characters\"],\n        segmenterGranularity: \"grapheme\",\n      },\n      words: { labels: [\"word\", \"words\"], segmenterGranularity: \"word\" },\n    };\n\n    this.countType = this.$formFieldInput?.dataset?.countType || \"length\";\n    if (!countConfigOptions[this.countType]) {\n      throw new Error(`Unsupported count type: ${this.countType}`);\n    }\n    this.config = countConfigOptions[this.countType];\n\n    this.init(options);\n  }\n\n  init(options) {\n    this.segmenter = null;\n    if (\n      typeof Intl !== \"undefined\" &&\n      typeof Intl.Segmenter === \"function\" &&\n      this.config.segmenterGranularity\n    ) {\n      const language = options.language || navigator.language || \"en\";\n      this.segmenter = new Intl.Segmenter(language, {\n        granularity: this.config.segmenterGranularity,\n      });\n    }\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\n    if (this.countType === \"length\") {\n      return rawValue.length;\n    }\n\n    if (this.countType === \"characters\") {\n      if (this.segmenter) {\n        const segments = Array.from(this.segmenter.segment(rawValue));\n        return segments.length;\n      }\n      return Array.from(rawValue).length;\n    }\n\n    if (this.countType === \"words\") {\n      if (this.segmenter) {\n        const segments = Array.from(this.segmenter.segment(rawValue));\n        return segments.filter((segment) => segment.isWordLike).length;\n      }\n      return rawValue.trim().split(/\\s+/).length;\n    }\n    return 0;\n  }\n\n  getCurrentLengthMessage() {\n    const currentLength = this.getCurrentLength();\n\n    const [singularLabel, pluralLabel] = this.config.labels;\n    let typeLabel = pluralLabel;\n    /* eslint-disable-next-line no-magic-numbers */\n    if (Math.abs(this.max - currentLength) === 1) {\n      typeLabel = singularLabel;\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","countConfigOptions","length","labels","characters","segmenterGranularity","words","countType","Error","config","init","segmenter","Intl","Segmenter","language","navigator","granularity","threshold","countThreshold","debounceDuration","intervalChecker","debounceTimeout","lastInputValue","addEventListener","handleInput","lastInputTimestamp","Date","now","handleFocus","handleBlur","updateVisualCharacterCount","updateScreenReaderCharacterCount","valueChecker","window","setInterval","updateIfValueChanged","clearInterval","clearTimeout","setTimeout","getCurrentLength","rawValue","Array","from","segment","filter","isWordLike","trim","split","getCurrentLengthMessage","currentLength","singularLabel","pluralLabel","typeLabel","Math","abs","NumberFormat","format","isOverThreshold","showCharacterCount","hideCharacterCount","innerText","classList","add","remove","currentLengthMessage","removeAttribute","setAttribute"],"sourceRoot":""}

package/nationalarchives/components/TextAreaItemisedRows/TextAreaItemisedRows.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";const t={d:(e,i)=>{for(var n in i)t.o(i,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:i[n]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}};let e={};t.r(e),t.d(e,{default:()=>i});class i{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 n=document.createElement("button");return n.innerText=`Remove '${t}'`,n.setAttribute("type","button"),n.classList.add("tna-compound-filters__link"),n.addEventListener("click",()=>{this.removeValue(t)}),e.appendChild(n),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}}return e})());
+!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";const t={d:(e,i)=>{for(var s in i)t.o(i,s)&&!t.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:i[s]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}};let e={};t.r(e),t.d(e,{default:()=>i});class i{constructor(t,e={}){if(this.$module=t,this.$formItemInput=this.$module&&this.$module.querySelector(".tna-textarea"),this.$formItemHeader=this.$module&&this.$module.querySelector(".tna-form-item__header"),this.$formItemInputHint=this.$module&&this.$module.querySelector(".tna-form-item__hint"),this.$formItemBody=this.$module&&this.$module.querySelector(".tna-form-item__body"),!(this.$module&&this.$formItemHeader&&this.$formItemInput&&this.$formItemBody&&null===this.$formItemInput.getAttribute("hidden")))return;if(!(this.$formItemInput 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.$formItemInput.value.split("\n").map(t=>t.trim()).filter(t=>t),this.id=this.$formItemInput.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.$formItemInput.getAttribute(t)),this.$formItemInput.removeAttribute(t)}),this.$formItemBody.appendChild(this.$formFieldNewInput),this.$formItemInput.setAttribute("hidden",""),this.$formItemInput.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.$formFieldNewInputAddButton.innerText="Add",this.$formFieldNewInputAddButton.setAttribute("aria-label",`Add to list for '${this.$formItemHeader.innerText}'`),this.$formItemBody.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.$formItemInputHint||(this.$formItemInputHint=document.createElement("p"),this.$formItemInputHint.classList.add("tna-form-item__hint"),this.$formItemBody.parentNode.insertBefore(this.$formItemInputHint,this.$formItemBody)),this.$formItemInputHint.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.$formItemInput.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.$formItemInput.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 s=document.createElement("button");return s.innerText=`Remove '${t}'`,s.setAttribute("type","button"),s.classList.add("tna-compound-filters__link"),s.addEventListener("click",()=>{this.removeValue(t)}),e.appendChild(s),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}}return e})());
 //# sourceMappingURL=TextAreaItemisedRows.js.map

package/nationalarchives/components/TextAreaItemisedRows/TextAreaItemisedRows.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/TextAreaItemisedRows/TextAreaItemisedRows.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/TextAreaItemisedRows.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 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"],"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","TextAreaItemisedRows","constructor","$module","options","this","$formFieldInput","querySelector","$formFieldInputHint","$formFieldBody","getAttribute","HTMLTextAreaElement","Error","enhancedHint","values","split","map","trim","filter","id","init","$formFieldNewInput","document","createElement","classList","add","forEach","attribute","setAttribute","removeAttribute","appendChild","addEventListener","updateList","event","appendValue","target","$formFieldNewInputAddButton","$formFieldNewInputAddButtonInner","innerText","$formFieldNewInputAddButtonInnerExtra","$formFieldLiveAria","$formFieldCounter","$valuesList","updateAriaText","parentNode","insertBefore","content","normaliseValue","replace","isValueInList","eachValue","toLowerCase","includes","newValue","push","join","focus","removeValue","existingValue","length","innerHTML","$item","$itemLabel","$removeItemButton","innerTextItemValue","innerTextValue","Intl","NumberFormat","format"],"sourceRoot":""}
+{"version":3,"file":"components/TextAreaItemisedRows/TextAreaItemisedRows.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/TextAreaItemisedRows.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 TextAreaItemisedRows {\n  constructor($module, options = {}) {\n    this.$module = $module;\n    this.$formItemInput =\n      this.$module && this.$module.querySelector(\".tna-textarea\");\n    this.$formItemHeader =\n      this.$module && this.$module.querySelector(\".tna-form-item__header\");\n    this.$formItemInputHint =\n      this.$module && this.$module.querySelector(\".tna-form-item__hint\");\n    this.$formItemBody =\n      this.$module && this.$module.querySelector(\".tna-form-item__body\");\n\n    if (\n      !this.$module ||\n      !this.$formItemHeader ||\n      !this.$formItemInput ||\n      !this.$formItemBody ||\n      this.$formItemInput.getAttribute(\"hidden\") !== null\n    ) {\n      return;\n    }\n\n    if (!(this.$formItemInput 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.$formItemInput.value\n      .split(\"\\n\")\n      .map((value) => value.trim())\n      .filter((value) => value);\n\n    this.id = this.$formItemInput.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.$formItemInput.getAttribute(attribute),\n      );\n      this.$formItemInput.removeAttribute(attribute);\n    });\n    this.$formItemBody.appendChild(this.$formFieldNewInput);\n    this.$formItemInput.setAttribute(\"hidden\", \"\");\n    this.$formItemInput.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.$formFieldNewInputAddButton.innerText = \"Add\";\n    this.$formFieldNewInputAddButton.setAttribute(\n      \"aria-label\",\n      `Add to list for '${this.$formItemHeader.innerText}'`,\n    );\n    this.$formItemBody.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.$formItemInputHint) {\n      this.$formItemInputHint = document.createElement(\"p\");\n      this.$formItemInputHint.classList.add(\"tna-form-item__hint\");\n      this.$formItemBody.parentNode.insertBefore(\n        this.$formItemInputHint,\n        this.$formItemBody,\n      );\n    }\n    this.$formItemInputHint.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.$formItemInput.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.$formItemInput.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"],"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","TextAreaItemisedRows","constructor","$module","options","this","$formItemInput","querySelector","$formItemHeader","$formItemInputHint","$formItemBody","getAttribute","HTMLTextAreaElement","Error","enhancedHint","values","split","map","trim","filter","id","init","$formFieldNewInput","document","createElement","classList","add","forEach","attribute","setAttribute","removeAttribute","appendChild","addEventListener","updateList","event","appendValue","target","$formFieldNewInputAddButton","innerText","$formFieldLiveAria","$formFieldCounter","$valuesList","updateAriaText","parentNode","insertBefore","content","normaliseValue","replace","isValueInList","eachValue","toLowerCase","includes","newValue","push","join","focus","removeValue","existingValue","length","innerHTML","$item","$itemLabel","$removeItemButton","innerTextItemValue","innerTextValue","Intl","NumberFormat","format"],"sourceRoot":""}

package/nationalarchives/components/textarea/TextAreaCharacterCount.mjs

@@ -9,7 +9,6 @@ export default class TextAreaCharacterCount {
       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";
 
     if (
       !this.$module ||
@@ -21,10 +20,36 @@ export default class TextAreaCharacterCount {
       return;
     }
 
+    const countConfigOptions = {
+      length: { labels: ["character", "characters"] },
+      characters: {
+        labels: ["character", "characters"],
+        segmenterGranularity: "grapheme",
+      },
+      words: { labels: ["word", "words"], segmenterGranularity: "word" },
+    };
+
+    this.countType = this.$formFieldInput?.dataset?.countType || "length";
+    if (!countConfigOptions[this.countType]) {
+      throw new Error(`Unsupported count type: ${this.countType}`);
+    }
+    this.config = countConfigOptions[this.countType];
+
     this.init(options);
   }
 
   init(options) {
+    this.segmenter = null;
+    if (
+      typeof Intl !== "undefined" &&
+      typeof Intl.Segmenter === "function" &&
+      this.config.segmenterGranularity
+    ) {
+      const language = options.language || navigator.language || "en";
+      this.segmenter = new Intl.Segmenter(language, {
+        granularity: this.config.segmenterGranularity,
+      });
+    }
     this.threshold =
       options.threshold ||
       parseInt(this.$formFieldInput?.dataset?.countThreshold, 10) ||
@@ -91,23 +116,37 @@ export default class TextAreaCharacterCount {
 
   getCurrentLength() {
     const rawValue = this.$formFieldInput.value;
+
+    if (this.countType === "length") {
+      return rawValue.length;
+    }
+
+    if (this.countType === "characters") {
+      if (this.segmenter) {
+        const segments = Array.from(this.segmenter.segment(rawValue));
+        return segments.length;
+      }
+      return Array.from(rawValue).length;
+    }
+
     if (this.countType === "words") {
-      const trimmedValue = rawValue.trim();
-      if (trimmedValue === "") {
-        /* eslint-disable-next-line no-magic-numbers */
-        return 0;
+      if (this.segmenter) {
+        const segments = Array.from(this.segmenter.segment(rawValue));
+        return segments.filter((segment) => segment.isWordLike).length;
       }
-      return trimmedValue.split(/\s+/).length;
+      return rawValue.trim().split(/\s+/).length;
     }
-    return Array.from(rawValue).length;
+    return 0;
   }
 
   getCurrentLengthMessage() {
     const currentLength = this.getCurrentLength();
-    let typeLabel = this.countType;
+
+    const [singularLabel, pluralLabel] = this.config.labels;
+    let typeLabel = pluralLabel;
     /* eslint-disable-next-line no-magic-numbers */
     if (Math.abs(this.max - currentLength) === 1) {
-      typeLabel = typeLabel.replace(/s$/, "");
+      typeLabel = singularLabel;
     }
     if (currentLength > this.max) {
       return `You have ${new Intl.NumberFormat().format(currentLength - this.max)} ${typeLabel} too many`;

package/nationalarchives/components/textarea/TextAreaItemisedRows.mjs

@@ -1,35 +1,38 @@
 export default class TextAreaItemisedRows {
   constructor($module, options = {}) {
     this.$module = $module;
-    this.$formFieldInput =
+    this.$formItemInput =
       this.$module && this.$module.querySelector(".tna-textarea");
-    this.$formFieldInputHint =
+    this.$formItemHeader =
+      this.$module && this.$module.querySelector(".tna-form-item__header");
+    this.$formItemInputHint =
       this.$module && this.$module.querySelector(".tna-form-item__hint");
-    this.$formFieldBody =
+    this.$formItemBody =
       this.$module && this.$module.querySelector(".tna-form-item__body");
 
     if (
       !this.$module ||
-      !this.$formFieldInput ||
-      !this.$formFieldBody ||
-      this.$formFieldInput.getAttribute("hidden") !== null
+      !this.$formItemHeader ||
+      !this.$formItemInput ||
+      !this.$formItemBody ||
+      this.$formItemInput.getAttribute("hidden") !== null
     ) {
       return;
     }
 
-    if (!(this.$formFieldInput instanceof HTMLTextAreaElement)) {
+    if (!(this.$formItemInput instanceof HTMLTextAreaElement)) {
       throw new Error("Expected a textarea element");
     }
 
     const { enhancedHint } = options;
     this.enhancedHint = enhancedHint || "Enter an item and press enter";
 
-    this.values = this.$formFieldInput.value
+    this.values = this.$formItemInput.value
       .split("\n")
       .map((value) => value.trim())
       .filter((value) => value);
 
-    this.id = this.$formFieldInput.id;
+    this.id = this.$formItemInput.id;
 
     this.init();
   }
@@ -40,13 +43,13 @@ export default class TextAreaItemisedRows {
     ["id", "aria-describedby"].forEach((attribute) => {
       this.$formFieldNewInput.setAttribute(
         attribute,
-        this.$formFieldInput.getAttribute(attribute),
+        this.$formItemInput.getAttribute(attribute),
       );
-      this.$formFieldInput.removeAttribute(attribute);
+      this.$formItemInput.removeAttribute(attribute);
     });
-    this.$formFieldBody.appendChild(this.$formFieldNewInput);
-    this.$formFieldInput.setAttribute("hidden", "");
-    this.$formFieldInput.addEventListener("keyup", () => this.updateList());
+    this.$formItemBody.appendChild(this.$formFieldNewInput);
+    this.$formItemInput.setAttribute("hidden", "");
+    this.$formItemInput.addEventListener("keyup", () => this.updateList());
     this.$formFieldNewInput.addEventListener("keypress", (event) => {
       if (event.key === "Enter") {
         this.appendValue(event.target.value);
@@ -59,20 +62,12 @@ export default class TextAreaItemisedRows {
       "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.$formFieldNewInputAddButton.innerText = "Add";
+    this.$formFieldNewInputAddButton.setAttribute(
+      "aria-label",
+      `Add to list for '${this.$formItemHeader.innerText}'`,
     );
-    this.$formFieldNewInputAddButtonInnerExtra.innerText = " to list";
-    this.$formFieldNewInputAddButtonInner.appendChild(
-      this.$formFieldNewInputAddButtonInnerExtra,
-    );
-    this.$formFieldNewInputAddButton.appendChild(
-      this.$formFieldNewInputAddButtonInner,
-    );
-    this.$formFieldBody.appendChild(this.$formFieldNewInputAddButton);
+    this.$formItemBody.appendChild(this.$formFieldNewInputAddButton);
     this.$formFieldNewInputAddButton.addEventListener("click", () => {
       this.appendValue(this.$formFieldNewInput.value);
     });
@@ -105,15 +100,15 @@ export default class TextAreaItemisedRows {
     });
     this.$module.appendChild(this.$valuesList);
 
-    if (!this.$formFieldInputHint) {
-      this.$formFieldInputHint = document.createElement("p");
-      this.$formFieldInputHint.classList.add("tna-form-item__hint");
-      this.$formFieldBody.parentNode.insertBefore(
-        this.$formFieldInputHint,
-        this.$formFieldBody,
+    if (!this.$formItemInputHint) {
+      this.$formItemInputHint = document.createElement("p");
+      this.$formItemInputHint.classList.add("tna-form-item__hint");
+      this.$formItemBody.parentNode.insertBefore(
+        this.$formItemInputHint,
+        this.$formItemBody,
       );
     }
-    this.$formFieldInputHint.innerText = this.enhancedHint;
+    this.$formItemInputHint.innerText = this.enhancedHint;
 
     this.updateList();
   }
@@ -140,7 +135,7 @@ export default class TextAreaItemisedRows {
         this.updateAriaText(`'${newValue}' already added`);
       } else {
         this.values.push(newValue);
-        this.$formFieldInput.value = this.values.join("\n");
+        this.$formItemInput.value = this.values.join("\n");
         this.updateList();
         this.updateAriaText(`'${newValue}' added`);
       }
@@ -157,7 +152,7 @@ export default class TextAreaItemisedRows {
       this.values = this.values.filter(
         (existingValue) => existingValue !== removeValue,
       );
-      this.$formFieldInput.value = this.values.join("\n");
+      this.$formItemInput.value = this.values.join("\n");
       this.updateList();
       this.updateAriaText(`'${removeValue}' removed`);
     }

package/nationalarchives/components/textarea/macro-options.json

@@ -72,8 +72,8 @@
         "name": "countType",
         "type": "string",
         "required": false,
-        "description": "The type of character count to display. Can be `characters` or `words`.",
-        "default": "characters"
+        "description": "The type of character count to display. Can be `length`, `characters` or `words`. `length` counts the number of raw characters used, `characters` counts the number of visual characters, and `words` counts the number of words.",
+        "default": "length"
       },
       {
         "name": "threshold",

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(){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})());
+!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={}){if(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.$module&&this.$formFieldInput&&this.$formFieldCharacterCount&&this.$formFieldCharacterCountScreenReader&&this.max))return;const i={length:{labels:["character","characters"]},characters:{labels:["character","characters"],segmenterGranularity:"grapheme"},words:{labels:["word","words"],segmenterGranularity:"word"}};if(this.countType=this.$formFieldInput?.dataset?.countType||"length",!i[this.countType])throw new Error(`Unsupported count type: ${this.countType}`);this.config=i[this.countType],this.init(e)}init(t){if(this.segmenter=null,"undefined"!=typeof Intl&&"function"==typeof Intl.Segmenter&&this.config.segmenterGranularity){const e=t.language||navigator.language||"en";this.segmenter=new Intl.Segmenter(e,{granularity:this.config.segmenterGranularity})}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;return"length"===this.countType?t.length:"characters"===this.countType?this.segmenter?Array.from(this.segmenter.segment(t)).length:Array.from(t).length:"words"===this.countType?this.segmenter?Array.from(this.segmenter.segment(t)).filter(t=>t.isWordLike).length:t.trim().split(/\s+/).length:0}getCurrentLengthMessage(){const t=this.getCurrentLength(),[e,i]=this.config.labels;let r=i;return 1===Math.abs(this.max-t)&&(r=e),t>this.max?`You have ${(new Intl.NumberFormat).format(t-this.max)} ${r} too many`:`You have ${(new Intl.NumberFormat).format(this.max-t)} ${r} 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.$formItemInput=this.$module&&this.$module.querySelector(".tna-textarea"),this.$formItemHeader=this.$module&&this.$module.querySelector(".tna-form-item__header"),this.$formItemInputHint=this.$module&&this.$module.querySelector(".tna-form-item__hint"),this.$formItemBody=this.$module&&this.$module.querySelector(".tna-form-item__body"),!(this.$module&&this.$formItemHeader&&this.$formItemInput&&this.$formItemBody&&null===this.$formItemInput.getAttribute("hidden")))return;if(!(this.$formItemInput 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.$formItemInput.value.split("\n").map(t=>t.trim()).filter(t=>t),this.id=this.$formItemInput.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.$formItemInput.getAttribute(t)),this.$formItemInput.removeAttribute(t)}),this.$formItemBody.appendChild(this.$formFieldNewInput),this.$formItemInput.setAttribute("hidden",""),this.$formItemInput.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.$formFieldNewInputAddButton.innerText="Add",this.$formFieldNewInputAddButton.setAttribute("aria-label",`Add to list for '${this.$formItemHeader.innerText}'`),this.$formItemBody.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.$formItemInputHint||(this.$formItemInputHint=document.createElement("p"),this.$formItemInputHint.classList.add("tna-form-item__hint"),this.$formItemBody.parentNode.insertBefore(this.$formItemInputHint,this.$formItemBody)),this.$formItemInputHint.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.$formItemInput.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.$formItemInput.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 s=e[r];if(void 0!==s)return s.exports;const n=e[r]={exports:{}};return t[r](n,n.exports,i),n.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:()=>s.default,TextAreaItemisedRows:()=>n.default});var s=i(740),n=i(371);return r})());
 //# sourceMappingURL=textarea.js.map