katalyst-govuk-formbuilder 1.2.2 → 1.3.0

data/app/assets/{javascripts → builds}/katalyst/govuk/formbuilder.js

@@ -7,18 +7,122 @@ function nodeListForEach(nodes, callback) {
   }
 }
 
+function mergeConfigs() {
+  var flattenObject = function(configObject) {
+    var flattenedObject = {};
+    var flattenLoop = function(obj, prefix) {
+      for (var key in obj) {
+        if (!Object.prototype.hasOwnProperty.call(obj, key)) {
+          continue;
+        }
+        var value = obj[key];
+        var prefixedKey = prefix ? prefix + "." + key : key;
+        if (typeof value === "object") {
+          flattenLoop(value, prefixedKey);
+        } else {
+          flattenedObject[prefixedKey] = value;
+        }
+      }
+    };
+    flattenLoop(configObject);
+    return flattenedObject;
+  };
+  var formattedConfigObject = {};
+  for (var i = 0; i < arguments.length; i++) {
+    var obj = flattenObject(arguments[i]);
+    for (var key in obj) {
+      if (Object.prototype.hasOwnProperty.call(obj, key)) {
+        formattedConfigObject[key] = obj[key];
+      }
+    }
+  }
+  return formattedConfigObject;
+}
+
+function extractConfigByNamespace(configObject, namespace) {
+  if (!configObject || typeof configObject !== "object") {
+    throw new Error('Provide a `configObject` of type "object".');
+  }
+  if (!namespace || typeof namespace !== "string") {
+    throw new Error('Provide a `namespace` of type "string" to filter the `configObject` by.');
+  }
+  var newObject = {};
+  for (var key in configObject) {
+    var keyParts = key.split(".");
+    if (Object.prototype.hasOwnProperty.call(configObject, key) && keyParts[0] === namespace) {
+      if (keyParts.length > 1) {
+        keyParts.shift();
+      }
+      var newKey = keyParts.join(".");
+      newObject[newKey] = configObject[key];
+    }
+  }
+  return newObject;
+}
+
 (function(undefined$1) {
-  var detect = "Window" in this;
+  var detect = "defineProperty" in Object && function() {
+    try {
+      var a = {};
+      Object.defineProperty(a, "test", {
+        value: 42
+      });
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }();
   if (detect) return;
-  if (typeof WorkerGlobalScope === "undefined" && typeof importScripts !== "function") {
-    (function(global) {
-      if (global.constructor) {
-        global.Window = global.constructor;
+  (function(nativeDefineProperty) {
+    var supportsAccessors = Object.prototype.hasOwnProperty("__defineGetter__");
+    var ERR_ACCESSORS_NOT_SUPPORTED = "Getters & setters cannot be defined on this javascript engine";
+    var ERR_VALUE_ACCESSORS = "A property cannot both have accessors and be writable or have a value";
+    Object.defineProperty = function defineProperty(object, property, descriptor) {
+      if (nativeDefineProperty && (object === window || object === document || object === Element.prototype || object instanceof Element)) {
+        return nativeDefineProperty(object, property, descriptor);
+      }
+      if (object === null || !(object instanceof Object || typeof object === "object")) {
+        throw new TypeError("Object.defineProperty called on non-object");
+      }
+      if (!(descriptor instanceof Object)) {
+        throw new TypeError("Property description must be an object");
+      }
+      var propertyString = String(property);
+      var hasValueOrWritable = "value" in descriptor || "writable" in descriptor;
+      var getterType = "get" in descriptor && typeof descriptor.get;
+      var setterType = "set" in descriptor && typeof descriptor.set;
+      if (getterType) {
+        if (getterType !== "function") {
+          throw new TypeError("Getter must be a function");
+        }
+        if (!supportsAccessors) {
+          throw new TypeError(ERR_ACCESSORS_NOT_SUPPORTED);
+        }
+        if (hasValueOrWritable) {
+          throw new TypeError(ERR_VALUE_ACCESSORS);
+        }
+        Object.__defineGetter__.call(object, propertyString, descriptor.get);
       } else {
-        (global.Window = global.constructor = new Function("return function Window() {}")()).prototype = this;
+        object[propertyString] = descriptor.value;
       }
-    })(this);
-  }
+      if (setterType) {
+        if (setterType !== "function") {
+          throw new TypeError("Setter must be a function");
+        }
+        if (!supportsAccessors) {
+          throw new TypeError(ERR_ACCESSORS_NOT_SUPPORTED);
+        }
+        if (hasValueOrWritable) {
+          throw new TypeError(ERR_VALUE_ACCESSORS);
+        }
+        Object.__defineSetter__.call(object, propertyString, descriptor.set);
+      }
+      if ("value" in descriptor) {
+        object[propertyString] = descriptor.value;
+      }
+      return object;
+    };
+  })(Object.defineProperty);
 }).call("object" === typeof window && window || "object" === typeof self && self || "object" === typeof global && global || {});
 
 (function(undefined$1) {
@@ -105,68 +209,99 @@ function nodeListForEach(nodes, callback) {
 }).call("object" === typeof window && window || "object" === typeof self && self || "object" === typeof global && global || {});
 
 (function(undefined$1) {
-  var detect = "defineProperty" in Object && function() {
-    try {
-      var a = {};
-      Object.defineProperty(a, "test", {
-        value: 42
-      });
-      return true;
-    } catch (e) {
+  var detect = function() {
+    if (!document.documentElement.dataset) {
       return false;
     }
+    var el = document.createElement("div");
+    el.setAttribute("data-a-b", "c");
+    return el.dataset && el.dataset.aB == "c";
   }();
   if (detect) return;
-  (function(nativeDefineProperty) {
-    var supportsAccessors = Object.prototype.hasOwnProperty("__defineGetter__");
-    var ERR_ACCESSORS_NOT_SUPPORTED = "Getters & setters cannot be defined on this javascript engine";
-    var ERR_VALUE_ACCESSORS = "A property cannot both have accessors and be writable or have a value";
-    Object.defineProperty = function defineProperty(object, property, descriptor) {
-      if (nativeDefineProperty && (object === window || object === document || object === Element.prototype || object instanceof Element)) {
-        return nativeDefineProperty(object, property, descriptor);
-      }
-      if (object === null || !(object instanceof Object || typeof object === "object")) {
-        throw new TypeError("Object.defineProperty called on non-object");
-      }
-      if (!(descriptor instanceof Object)) {
-        throw new TypeError("Property description must be an object");
-      }
-      var propertyString = String(property);
-      var hasValueOrWritable = "value" in descriptor || "writable" in descriptor;
-      var getterType = "get" in descriptor && typeof descriptor.get;
-      var setterType = "set" in descriptor && typeof descriptor.set;
-      if (getterType) {
-        if (getterType !== "function") {
-          throw new TypeError("Getter must be a function");
-        }
-        if (!supportsAccessors) {
-          throw new TypeError(ERR_ACCESSORS_NOT_SUPPORTED);
-        }
-        if (hasValueOrWritable) {
-          throw new TypeError(ERR_VALUE_ACCESSORS);
-        }
-        Object.__defineGetter__.call(object, propertyString, descriptor.get);
-      } else {
-        object[propertyString] = descriptor.value;
-      }
-      if (setterType) {
-        if (setterType !== "function") {
-          throw new TypeError("Setter must be a function");
-        }
-        if (!supportsAccessors) {
-          throw new TypeError(ERR_ACCESSORS_NOT_SUPPORTED);
-        }
-        if (hasValueOrWritable) {
-          throw new TypeError(ERR_VALUE_ACCESSORS);
+  Object.defineProperty(Element.prototype, "dataset", {
+    get: function() {
+      var element = this;
+      var attributes = this.attributes;
+      var map = {};
+      for (var i = 0; i < attributes.length; i++) {
+        var attribute = attributes[i];
+        if (attribute && attribute.name && /^data-\w[.\w-]*$/.test(attribute.name)) {
+          var name = attribute.name;
+          var value = attribute.value;
+          var propName = name.substr(5).replace(/-./g, (function(prop) {
+            return prop.charAt(1).toUpperCase();
+          }));
+          if ("__defineGetter__" in Object.prototype && "__defineSetter__" in Object.prototype) {
+            Object.defineProperty(map, propName, {
+              enumerable: true,
+              get: function() {
+                return this.value;
+              }.bind({
+                value: value || ""
+              }),
+              set: function setter(name, value) {
+                if (typeof value !== "undefined") {
+                  this.setAttribute(name, value);
+                } else {
+                  this.removeAttribute(name);
+                }
+              }.bind(element, name)
+            });
+          } else {
+            map[propName] = value;
+          }
         }
-        Object.__defineSetter__.call(object, propertyString, descriptor.set);
       }
-      if ("value" in descriptor) {
-        object[propertyString] = descriptor.value;
+      return map;
+    }
+  });
+}).call("object" === typeof window && window || "object" === typeof self && self || "object" === typeof global && global || {});
+
+(function(undefined$1) {
+  var detect = "trim" in String.prototype;
+  if (detect) return;
+  String.prototype.trim = function() {
+    return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, "");
+  };
+}).call("object" === typeof window && window || "object" === typeof self && self || "object" === typeof global && global || {});
+
+function normaliseString(value) {
+  if (typeof value !== "string") {
+    return value;
+  }
+  var trimmedValue = value.trim();
+  if (trimmedValue === "true") {
+    return true;
+  }
+  if (trimmedValue === "false") {
+    return false;
+  }
+  if (trimmedValue.length > 0 && isFinite(trimmedValue)) {
+    return Number(trimmedValue);
+  }
+  return value;
+}
+
+function normaliseDataset(dataset) {
+  var out = {};
+  for (var key in dataset) {
+    out[key] = normaliseString(dataset[key]);
+  }
+  return out;
+}
+
+(function(undefined$1) {
+  var detect = "Window" in this;
+  if (detect) return;
+  if (typeof WorkerGlobalScope === "undefined" && typeof importScripts !== "function") {
+    (function(global) {
+      if (global.constructor) {
+        global.Window = global.constructor;
+      } else {
+        (global.Window = global.constructor = new Function("return function Window() {}")()).prototype = this;
       }
-      return object;
-    };
-  })(Object.defineProperty);
+    })(this);
+  }
 }).call("object" === typeof window && window || "object" === typeof self && self || "object" === typeof global && global || {});
 
 (function(undefined$1) {
@@ -415,22 +550,36 @@ var KEY_SPACE = 32;
 
 var DEBOUNCE_TIMEOUT_IN_SECONDS = 1;
 
-function Button($module) {
+function Button($module, config) {
+  if (!$module) {
+    return this;
+  }
   this.$module = $module;
   this.debounceFormSubmitTimer = null;
+  var defaultConfig = {
+    preventDoubleClick: false
+  };
+  this.config = mergeConfigs(defaultConfig, config || {}, normaliseDataset($module.dataset));
 }
 
+Button.prototype.init = function() {
+  if (!this.$module) {
+    return;
+  }
+  this.$module.addEventListener("keydown", this.handleKeyDown);
+  this.$module.addEventListener("click", this.debounce.bind(this));
+};
+
 Button.prototype.handleKeyDown = function(event) {
-  var target = event.target;
-  if (target.getAttribute("role") === "button" && event.keyCode === KEY_SPACE) {
+  var $target = event.target;
+  if ($target.getAttribute("role") === "button" && event.keyCode === KEY_SPACE) {
     event.preventDefault();
-    target.click();
+    $target.click();
   }
 };
 
 Button.prototype.debounce = function(event) {
-  var target = event.target;
-  if (target.getAttribute("data-prevent-double-click") !== "true") {
+  if (!this.config.preventDoubleClick) {
     return;
   }
   if (this.debounceFormSubmitTimer) {
@@ -442,11 +591,260 @@ Button.prototype.debounce = function(event) {
   }.bind(this), DEBOUNCE_TIMEOUT_IN_SECONDS * 1e3);
 };
 
-Button.prototype.init = function() {
-  this.$module.addEventListener("keydown", this.handleKeyDown);
-  this.$module.addEventListener("click", this.debounce);
+(function(undefined$1) {
+  var detect = "document" in this && "matches" in document.documentElement;
+  if (detect) return;
+  Element.prototype.matches = Element.prototype.webkitMatchesSelector || Element.prototype.oMatchesSelector || Element.prototype.msMatchesSelector || Element.prototype.mozMatchesSelector || function matches(selector) {
+    var element = this;
+    var elements = (element.document || element.ownerDocument).querySelectorAll(selector);
+    var index = 0;
+    while (elements[index] && elements[index] !== element) {
+      ++index;
+    }
+    return !!elements[index];
+  };
+}).call("object" === typeof window && window || "object" === typeof self && self || "object" === typeof global && global || {});
+
+(function(undefined$1) {
+  var detect = "document" in this && "closest" in document.documentElement;
+  if (detect) return;
+  Element.prototype.closest = function closest(selector) {
+    var node = this;
+    while (node) {
+      if (node.matches(selector)) return node; else node = "SVGElement" in window && node instanceof SVGElement ? node.parentNode : node.parentElement;
+    }
+    return null;
+  };
+}).call("object" === typeof window && window || "object" === typeof self && self || "object" === typeof global && global || {});
+
+function closestAttributeValue($element, attributeName) {
+  var closestElementWithAttribute = $element.closest("[" + attributeName + "]");
+  if (closestElementWithAttribute) {
+    return closestElementWithAttribute.getAttribute(attributeName);
+  }
+}
+
+function I18n(translations, config) {
+  this.translations = translations || {};
+  this.locale = config && config.locale || document.documentElement.lang || "en";
+}
+
+I18n.prototype.t = function(lookupKey, options) {
+  if (!lookupKey) {
+    throw new Error("i18n: lookup key missing");
+  }
+  if (options && typeof options.count !== "undefined") {
+    lookupKey = lookupKey + "." + this.getPluralSuffix(lookupKey, options.count);
+  }
+  if (lookupKey in this.translations) {
+    var translationString = this.translations[lookupKey];
+    if (translationString.match(/%{(.\S+)}/)) {
+      if (!options) {
+        throw new Error("i18n: cannot replace placeholders in string if no option data provided");
+      }
+      return this.replacePlaceholders(translationString, options);
+    } else {
+      return translationString;
+    }
+  } else {
+    return lookupKey;
+  }
+};
+
+I18n.prototype.replacePlaceholders = function(translationString, options) {
+  var formatter;
+  if (this.hasIntlNumberFormatSupport()) {
+    formatter = new Intl.NumberFormat(this.locale);
+  }
+  return translationString.replace(/%{(.\S+)}/g, (function(placeholderWithBraces, placeholderKey) {
+    if (Object.prototype.hasOwnProperty.call(options, placeholderKey)) {
+      var placeholderValue = options[placeholderKey];
+      if (placeholderValue === false) {
+        return "";
+      }
+      if (typeof placeholderValue === "number" && formatter) {
+        return formatter.format(placeholderValue);
+      }
+      return placeholderValue;
+    } else {
+      throw new Error("i18n: no data found to replace " + placeholderWithBraces + " placeholder in string");
+    }
+  }));
+};
+
+I18n.prototype.hasIntlPluralRulesSupport = function() {
+  return Boolean(window.Intl && ("PluralRules" in window.Intl && Intl.PluralRules.supportedLocalesOf(this.locale).length));
+};
+
+I18n.prototype.hasIntlNumberFormatSupport = function() {
+  return Boolean(window.Intl && ("NumberFormat" in window.Intl && Intl.NumberFormat.supportedLocalesOf(this.locale).length));
+};
+
+I18n.prototype.getPluralSuffix = function(lookupKey, count) {
+  count = Number(count);
+  if (!isFinite(count)) {
+    return "other";
+  }
+  var preferredForm;
+  if (this.hasIntlPluralRulesSupport()) {
+    preferredForm = new Intl.PluralRules(this.locale).select(count);
+  } else {
+    preferredForm = this.selectPluralFormUsingFallbackRules(count);
+  }
+  if (lookupKey + "." + preferredForm in this.translations) {
+    return preferredForm;
+  } else if (lookupKey + ".other" in this.translations) {
+    if (console && "warn" in console) {
+      console.warn('i18n: Missing plural form ".' + preferredForm + '" for "' + this.locale + '" locale. Falling back to ".other".');
+    }
+    return "other";
+  } else {
+    throw new Error('i18n: Plural form ".other" is required for "' + this.locale + '" locale');
+  }
+};
+
+I18n.prototype.selectPluralFormUsingFallbackRules = function(count) {
+  count = Math.abs(Math.floor(count));
+  var ruleset = this.getPluralRulesForLocale();
+  if (ruleset) {
+    return I18n.pluralRules[ruleset](count);
+  }
+  return "other";
 };
 
+I18n.prototype.getPluralRulesForLocale = function() {
+  var locale = this.locale;
+  var localeShort = locale.split("-")[0];
+  for (var pluralRule in I18n.pluralRulesMap) {
+    if (Object.prototype.hasOwnProperty.call(I18n.pluralRulesMap, pluralRule)) {
+      var languages = I18n.pluralRulesMap[pluralRule];
+      for (var i = 0; i < languages.length; i++) {
+        if (languages[i] === locale || languages[i] === localeShort) {
+          return pluralRule;
+        }
+      }
+    }
+  }
+};
+
+I18n.pluralRulesMap = {
+  arabic: [ "ar" ],
+  chinese: [ "my", "zh", "id", "ja", "jv", "ko", "ms", "th", "vi" ],
+  french: [ "hy", "bn", "fr", "gu", "hi", "fa", "pa", "zu" ],
+  german: [ "af", "sq", "az", "eu", "bg", "ca", "da", "nl", "en", "et", "fi", "ka", "de", "el", "hu", "lb", "no", "so", "sw", "sv", "ta", "te", "tr", "ur" ],
+  irish: [ "ga" ],
+  russian: [ "ru", "uk" ],
+  scottish: [ "gd" ],
+  spanish: [ "pt-PT", "it", "es" ],
+  welsh: [ "cy" ]
+};
+
+I18n.pluralRules = {
+  arabic: function(n) {
+    if (n === 0) {
+      return "zero";
+    }
+    if (n === 1) {
+      return "one";
+    }
+    if (n === 2) {
+      return "two";
+    }
+    if (n % 100 >= 3 && n % 100 <= 10) {
+      return "few";
+    }
+    if (n % 100 >= 11 && n % 100 <= 99) {
+      return "many";
+    }
+    return "other";
+  },
+  chinese: function() {
+    return "other";
+  },
+  french: function(n) {
+    return n === 0 || n === 1 ? "one" : "other";
+  },
+  german: function(n) {
+    return n === 1 ? "one" : "other";
+  },
+  irish: function(n) {
+    if (n === 1) {
+      return "one";
+    }
+    if (n === 2) {
+      return "two";
+    }
+    if (n >= 3 && n <= 6) {
+      return "few";
+    }
+    if (n >= 7 && n <= 10) {
+      return "many";
+    }
+    return "other";
+  },
+  russian: function(n) {
+    var lastTwo = n % 100;
+    var last = lastTwo % 10;
+    if (last === 1 && lastTwo !== 11) {
+      return "one";
+    }
+    if (last >= 2 && last <= 4 && !(lastTwo >= 12 && lastTwo <= 14)) {
+      return "few";
+    }
+    if (last === 0 || last >= 5 && last <= 9 || lastTwo >= 11 && lastTwo <= 14) {
+      return "many";
+    }
+    return "other";
+  },
+  scottish: function(n) {
+    if (n === 1 || n === 11) {
+      return "one";
+    }
+    if (n === 2 || n === 12) {
+      return "two";
+    }
+    if (n >= 3 && n <= 10 || n >= 13 && n <= 19) {
+      return "few";
+    }
+    return "other";
+  },
+  spanish: function(n) {
+    if (n === 1) {
+      return "one";
+    }
+    if (n % 1e6 === 0 && n !== 0) {
+      return "many";
+    }
+    return "other";
+  },
+  welsh: function(n) {
+    if (n === 0) {
+      return "zero";
+    }
+    if (n === 1) {
+      return "one";
+    }
+    if (n === 2) {
+      return "two";
+    }
+    if (n === 3) {
+      return "few";
+    }
+    if (n === 6) {
+      return "many";
+    }
+    return "other";
+  }
+};
+
+(function(undefined$1) {
+  var detect = "Date" in self && "now" in self.Date && "getTime" in self.Date.prototype;
+  if (detect) return;
+  Date.now = function() {
+    return (new Date).getTime();
+  };
+}).call("object" === typeof window && window || "object" === typeof self && self || "object" === typeof global && global || {});
+
 (function(undefined$1) {
   var detect = "DOMTokenList" in this && function(x) {
     return "classList" in x ? !x.classList.toggle("x", false) && !x.className : true;
@@ -685,7 +1083,57 @@ Button.prototype.init = function() {
   })(this);
 }).call("object" === typeof window && window || "object" === typeof self && self || "object" === typeof global && global || {});
 
-function CharacterCount($module) {
+var CHARACTER_COUNT_TRANSLATIONS = {
+  charactersUnderLimit: {
+    one: "You have %{count} character remaining",
+    other: "You have %{count} characters remaining"
+  },
+  charactersAtLimit: "You have 0 characters remaining",
+  charactersOverLimit: {
+    one: "You have %{count} character too many",
+    other: "You have %{count} characters too many"
+  },
+  wordsUnderLimit: {
+    one: "You have %{count} word remaining",
+    other: "You have %{count} words remaining"
+  },
+  wordsAtLimit: "You have 0 words remaining",
+  wordsOverLimit: {
+    one: "You have %{count} word too many",
+    other: "You have %{count} words too many"
+  },
+  textareaDescription: {
+    other: ""
+  }
+};
+
+function CharacterCount($module, config) {
+  if (!$module) {
+    return this;
+  }
+  var defaultConfig = {
+    threshold: 0,
+    i18n: CHARACTER_COUNT_TRANSLATIONS
+  };
+  var datasetConfig = normaliseDataset($module.dataset);
+  var configOverrides = {};
+  if ("maxwords" in datasetConfig || "maxlength" in datasetConfig) {
+    configOverrides = {
+      maxlength: false,
+      maxwords: false
+    };
+  }
+  this.config = mergeConfigs(defaultConfig, config || {}, configOverrides, datasetConfig);
+  this.i18n = new I18n(extractConfigByNamespace(this.config, "i18n"), {
+    locale: closestAttributeValue($module, "lang")
+  });
+  if (this.config.maxwords) {
+    this.maxLength = this.config.maxwords;
+  } else if (this.config.maxlength) {
+    this.maxLength = this.config.maxlength;
+  } else {
+    return;
+  }
   this.$module = $module;
   this.$textarea = $module.querySelector(".govuk-js-character-count");
   this.$visibleCountMessage = null;
@@ -693,40 +1141,30 @@ function CharacterCount($module) {
   this.lastInputTimestamp = null;
 }
 
-CharacterCount.prototype.defaults = {
-  characterCountAttribute: "data-maxlength",
-  wordCountAttribute: "data-maxwords"
-};
-
 CharacterCount.prototype.init = function() {
   if (!this.$textarea) {
     return;
   }
-  var $module = this.$module;
   var $textarea = this.$textarea;
-  var $fallbackLimitMessage = document.getElementById($textarea.id + "-info");
-  $textarea.insertAdjacentElement("afterend", $fallbackLimitMessage);
+  var $textareaDescription = document.getElementById($textarea.id + "-info");
+  if ($textareaDescription.innerText.match(/^\s*$/)) {
+    $textareaDescription.innerText = this.i18n.t("textareaDescription", {
+      count: this.maxLength
+    });
+  }
+  $textarea.insertAdjacentElement("afterend", $textareaDescription);
   var $screenReaderCountMessage = document.createElement("div");
   $screenReaderCountMessage.className = "govuk-character-count__sr-status govuk-visually-hidden";
   $screenReaderCountMessage.setAttribute("aria-live", "polite");
   this.$screenReaderCountMessage = $screenReaderCountMessage;
-  $fallbackLimitMessage.insertAdjacentElement("afterend", $screenReaderCountMessage);
+  $textareaDescription.insertAdjacentElement("afterend", $screenReaderCountMessage);
   var $visibleCountMessage = document.createElement("div");
-  $visibleCountMessage.className = $fallbackLimitMessage.className;
+  $visibleCountMessage.className = $textareaDescription.className;
   $visibleCountMessage.classList.add("govuk-character-count__status");
   $visibleCountMessage.setAttribute("aria-hidden", "true");
   this.$visibleCountMessage = $visibleCountMessage;
-  $fallbackLimitMessage.insertAdjacentElement("afterend", $visibleCountMessage);
-  $fallbackLimitMessage.classList.add("govuk-visually-hidden");
-  this.options = this.getDataset($module);
-  var countAttribute = this.defaults.characterCountAttribute;
-  if (this.options.maxwords) {
-    countAttribute = this.defaults.wordCountAttribute;
-  }
-  this.maxLength = $module.getAttribute(countAttribute);
-  if (!this.maxLength) {
-    return;
-  }
+  $textareaDescription.insertAdjacentElement("afterend", $visibleCountMessage);
+  $textareaDescription.classList.add("govuk-visually-hidden");
   $textarea.removeAttribute("maxlength");
   this.bindChangeEvents();
   if ("onpageshow" in window) {
@@ -737,32 +1175,6 @@ CharacterCount.prototype.init = function() {
   this.updateCountMessage();
 };
 
-CharacterCount.prototype.getDataset = function(element) {
-  var dataset = {};
-  var attributes = element.attributes;
-  if (attributes) {
-    for (var i = 0; i < attributes.length; i++) {
-      var attribute = attributes[i];
-      var match = attribute.name.match(/^data-(.+)/);
-      if (match) {
-        dataset[match[1]] = attribute.value;
-      }
-    }
-  }
-  return dataset;
-};
-
-CharacterCount.prototype.count = function(text) {
-  var length;
-  if (this.options.maxwords) {
-    var tokens = text.match(/\S+/g) || [];
-    length = tokens.length;
-  } else {
-    length = text.length;
-  }
-  return length;
-};
-
 CharacterCount.prototype.bindChangeEvents = function() {
   var $textarea = this.$textarea;
   $textarea.addEventListener("keyup", this.handleKeyUp.bind(this));
@@ -770,7 +1182,24 @@ CharacterCount.prototype.bindChangeEvents = function() {
   $textarea.addEventListener("blur", this.handleBlur.bind(this));
 };
 
-CharacterCount.prototype.checkIfValueChanged = function() {
+CharacterCount.prototype.handleKeyUp = function() {
+  this.updateVisibleCountMessage();
+  this.lastInputTimestamp = Date.now();
+};
+
+CharacterCount.prototype.handleFocus = function() {
+  this.valueChecker = setInterval(function() {
+    if (!this.lastInputTimestamp || Date.now() - 500 >= this.lastInputTimestamp) {
+      this.updateIfValueChanged();
+    }
+  }.bind(this), 1e3);
+};
+
+CharacterCount.prototype.handleBlur = function() {
+  clearInterval(this.valueChecker);
+};
+
+CharacterCount.prototype.updateIfValueChanged = function() {
   if (!this.$textarea.oldValue) this.$textarea.oldValue = "";
   if (this.$textarea.value !== this.$textarea.oldValue) {
     this.$textarea.oldValue = this.$textarea.value;
@@ -801,7 +1230,7 @@ CharacterCount.prototype.updateVisibleCountMessage = function() {
     $visibleCountMessage.classList.remove("govuk-error-message");
     $visibleCountMessage.classList.add("govuk-hint");
   }
-  $visibleCountMessage.innerHTML = this.formattedUpdateMessage();
+  $visibleCountMessage.innerText = this.getCountMessage();
 };
 
 CharacterCount.prototype.updateScreenReaderCountMessage = function() {
@@ -811,52 +1240,45 @@ CharacterCount.prototype.updateScreenReaderCountMessage = function() {
   } else {
     $screenReaderCountMessage.setAttribute("aria-hidden", true);
   }
-  $screenReaderCountMessage.innerHTML = this.formattedUpdateMessage();
+  $screenReaderCountMessage.innerText = this.getCountMessage();
 };
 
-CharacterCount.prototype.formattedUpdateMessage = function() {
-  var $textarea = this.$textarea;
-  var options = this.options;
-  var remainingNumber = this.maxLength - this.count($textarea.value);
-  var charVerb = "remaining";
-  var charNoun = "character";
-  var displayNumber = remainingNumber;
-  if (options.maxwords) {
-    charNoun = "word";
+CharacterCount.prototype.count = function(text) {
+  if (this.config.maxwords) {
+    var tokens = text.match(/\S+/g) || [];
+    return tokens.length;
+  } else {
+    return text.length;
+  }
+};
+
+CharacterCount.prototype.getCountMessage = function() {
+  var remainingNumber = this.maxLength - this.count(this.$textarea.value);
+  var countType = this.config.maxwords ? "words" : "characters";
+  return this.formatCountMessage(remainingNumber, countType);
+};
+
+CharacterCount.prototype.formatCountMessage = function(remainingNumber, countType) {
+  if (remainingNumber === 0) {
+    return this.i18n.t(countType + "AtLimit");
   }
-  charNoun = charNoun + (remainingNumber === -1 || remainingNumber === 1 ? "" : "s");
-  charVerb = remainingNumber < 0 ? "too many" : "remaining";
-  displayNumber = Math.abs(remainingNumber);
-  return "You have " + displayNumber + " " + charNoun + " " + charVerb;
+  var translationKeySuffix = remainingNumber < 0 ? "OverLimit" : "UnderLimit";
+  return this.i18n.t(countType + translationKeySuffix, {
+    count: Math.abs(remainingNumber)
+  });
 };
 
 CharacterCount.prototype.isOverThreshold = function() {
+  if (!this.config.threshold) {
+    return true;
+  }
   var $textarea = this.$textarea;
-  var options = this.options;
   var currentLength = this.count($textarea.value);
   var maxLength = this.maxLength;
-  var thresholdPercent = options.threshold ? options.threshold : 0;
-  var thresholdValue = maxLength * thresholdPercent / 100;
+  var thresholdValue = maxLength * this.config.threshold / 100;
   return thresholdValue <= currentLength;
 };
 
-CharacterCount.prototype.handleKeyUp = function() {
-  this.updateVisibleCountMessage();
-  this.lastInputTimestamp = Date.now();
-};
-
-CharacterCount.prototype.handleFocus = function() {
-  this.valueChecker = setInterval(function() {
-    if (!this.lastInputTimestamp || Date.now() - 500 >= this.lastInputTimestamp) {
-      this.checkIfValueChanged();
-    }
-  }.bind(this), 1e3);
-};
-
-CharacterCount.prototype.handleBlur = function() {
-  clearInterval(this.valueChecker);
-};
-
 function Checkboxes($module) {
   this.$module = $module;
   this.$inputs = $module.querySelectorAll('input[type="checkbox"]');
@@ -866,11 +1288,11 @@ Checkboxes.prototype.init = function() {
   var $module = this.$module;
   var $inputs = this.$inputs;
   nodeListForEach($inputs, (function($input) {
-    var target = $input.getAttribute("data-aria-controls");
-    if (!target || !document.getElementById(target)) {
+    var targetId = $input.getAttribute("data-aria-controls");
+    if (!targetId || !document.getElementById(targetId)) {
       return;
     }
-    $input.setAttribute("aria-controls", target);
+    $input.setAttribute("aria-controls", targetId);
     $input.removeAttribute("data-aria-controls");
   }));
   if ("onpageshow" in window) {
@@ -918,53 +1340,34 @@ Checkboxes.prototype.unCheckExclusiveInputs = function($input) {
 };
 
 Checkboxes.prototype.handleClick = function(event) {
-  var $target = event.target;
-  if ($target.type !== "checkbox") {
+  var $clickedInput = event.target;
+  if ($clickedInput.type !== "checkbox") {
     return;
   }
-  var hasAriaControls = $target.getAttribute("aria-controls");
+  var hasAriaControls = $clickedInput.getAttribute("aria-controls");
   if (hasAriaControls) {
-    this.syncConditionalRevealWithInputState($target);
+    this.syncConditionalRevealWithInputState($clickedInput);
   }
-  if (!$target.checked) {
+  if (!$clickedInput.checked) {
     return;
   }
-  var hasBehaviourExclusive = $target.getAttribute("data-behaviour") === "exclusive";
+  var hasBehaviourExclusive = $clickedInput.getAttribute("data-behaviour") === "exclusive";
   if (hasBehaviourExclusive) {
-    this.unCheckAllInputsExcept($target);
+    this.unCheckAllInputsExcept($clickedInput);
   } else {
-    this.unCheckExclusiveInputs($target);
+    this.unCheckExclusiveInputs($clickedInput);
   }
 };
 
-(function(undefined$1) {
-  var detect = "document" in this && "matches" in document.documentElement;
-  if (detect) return;
-  Element.prototype.matches = Element.prototype.webkitMatchesSelector || Element.prototype.oMatchesSelector || Element.prototype.msMatchesSelector || Element.prototype.mozMatchesSelector || function matches(selector) {
-    var element = this;
-    var elements = (element.document || element.ownerDocument).querySelectorAll(selector);
-    var index = 0;
-    while (elements[index] && elements[index] !== element) {
-      ++index;
-    }
-    return !!elements[index];
-  };
-}).call("object" === typeof window && window || "object" === typeof self && self || "object" === typeof global && global || {});
-
-(function(undefined$1) {
-  var detect = "document" in this && "closest" in document.documentElement;
-  if (detect) return;
-  Element.prototype.closest = function closest(selector) {
-    var node = this;
-    while (node) {
-      if (node.matches(selector)) return node; else node = "SVGElement" in window && node instanceof SVGElement ? node.parentNode : node.parentElement;
-    }
-    return null;
-  };
-}).call("object" === typeof window && window || "object" === typeof self && self || "object" === typeof global && global || {});
-
-function ErrorSummary($module) {
+function ErrorSummary($module, config) {
+  if (!$module) {
+    return this;
+  }
   this.$module = $module;
+  var defaultConfig = {
+    disableAutoFocus: false
+  };
+  this.config = mergeConfigs(defaultConfig, config || {}, normaliseDataset($module.dataset));
 }
 
 ErrorSummary.prototype.init = function() {
@@ -978,7 +1381,7 @@ ErrorSummary.prototype.init = function() {
 
 ErrorSummary.prototype.setFocus = function() {
   var $module = this.$module;
-  if ($module.getAttribute("data-disable-auto-focus") === "true") {
+  if (this.config.disableAutoFocus) {
     return;
   }
   $module.setAttribute("tabindex", "-1");
@@ -989,8 +1392,8 @@ ErrorSummary.prototype.setFocus = function() {
 };
 
 ErrorSummary.prototype.handleClick = function(event) {
-  var target = event.target;
-  if (this.focusTarget(target)) {
+  var $target = event.target;
+  if (this.focusTarget($target)) {
     event.preventDefault();
   }
 };
@@ -1025,9 +1428,9 @@ ErrorSummary.prototype.getFragmentFromUrl = function(url) {
 ErrorSummary.prototype.getAssociatedLegendOrLabel = function($input) {
   var $fieldset = $input.closest("fieldset");
   if ($fieldset) {
-    var legends = $fieldset.getElementsByTagName("legend");
-    if (legends.length) {
-      var $candidateLegend = legends[0];
+    var $legends = $fieldset.getElementsByTagName("legend");
+    if ($legends.length) {
+      var $candidateLegend = $legends[0];
       if ($input.type === "checkbox" || $input.type === "radio") {
         return $candidateLegend;
       }
@@ -1053,11 +1456,11 @@ Radios.prototype.init = function() {
   var $module = this.$module;
   var $inputs = this.$inputs;
   nodeListForEach($inputs, (function($input) {
-    var target = $input.getAttribute("data-aria-controls");
-    if (!target || !document.getElementById(target)) {
+    var targetId = $input.getAttribute("data-aria-controls");
+    if (!targetId || !document.getElementById(targetId)) {
       return;
     }
-    $input.setAttribute("aria-controls", target);
+    $input.setAttribute("aria-controls", targetId);
     $input.removeAttribute("data-aria-controls");
   }));
   if ("onpageshow" in window) {