@ministryofjustice/frontend 5.0.0 → 5.1.0

package/moj/components/multi-select/multi-select.bundle.js

@@ -1,77 +1,142 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-  typeof define === 'function' && define.amd ? define(['exports'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.MOJFrontend = global.MOJFrontend || {}));
-})(this, (function (exports) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('govuk-frontend')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'govuk-frontend'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.MOJFrontend = global.MOJFrontend || {}, global.GOVUKFrontend));
+})(this, (function (exports, govukFrontend) { 'use strict';
 
-  class MultiSelect {
-    constructor(options) {
-      this.container = options.container;
-      if (this.container.hasAttribute('data-moj-multi-select-init')) {
+  /**
+   * @augments {ConfigurableComponent<MultiSelectConfig>}
+   */
+  class MultiSelect extends govukFrontend.ConfigurableComponent {
+    /**
+     * @param {Element | null} $root - HTML element to use for multi select
+     * @param {MultiSelectConfig} [config] - Multi select config
+     */
+    constructor($root, config = {}) {
+      var _this$config$checkbox;
+      super($root, config);
+      const $container = this.$root.querySelector(`#${this.config.idPrefix}select-all`);
+      const $checkboxes = /** @type {NodeListOf<HTMLInputElement>} */(_this$config$checkbox = this.config.checkboxes.items) != null ? _this$config$checkbox : this.$root.querySelectorAll(this.config.checkboxes.selector);
+      if (!$container || !($container instanceof HTMLElement) || !$checkboxes.length) {
         return this;
       }
-      this.container.setAttribute('data-moj-multi-select-init', '');
-      const idPrefix = options.id_prefix;
-      this.setupToggle(idPrefix);
-      this.toggleButton = this.toggle.querySelector('input');
-      this.toggleButton.addEventListener('click', this.onButtonClick.bind(this));
-      this.container.append(this.toggle);
-      this.checkboxes = Array.from(options.checkboxes);
-      this.checkboxes.forEach(el => el.addEventListener('click', this.onCheckboxClick.bind(this)));
-      this.checked = options.checked || false;
+      this.setupToggle(this.config.idPrefix);
+      this.$toggleButton = this.$toggle.querySelector('input');
+      this.$toggleButton.addEventListener('click', this.onButtonClick.bind(this));
+      this.$container = $container;
+      this.$container.append(this.$toggle);
+      this.$checkboxes = Array.from($checkboxes);
+      this.$checkboxes.forEach($input => $input.addEventListener('click', this.onCheckboxClick.bind(this)));
+      this.checked = config.checked || false;
     }
     setupToggle(idPrefix = '') {
       const id = `${idPrefix}checkboxes-all`;
-      const toggle = document.createElement('div');
-      const label = document.createElement('label');
-      const input = document.createElement('input');
-      const span = document.createElement('span');
-      toggle.classList.add('govuk-checkboxes__item', 'govuk-checkboxes--small', 'moj-multi-select__checkbox');
-      input.id = id;
-      input.type = 'checkbox';
-      input.classList.add('govuk-checkboxes__input');
-      label.setAttribute('for', id);
-      label.classList.add('govuk-label', 'govuk-checkboxes__label', 'moj-multi-select__toggle-label');
-      span.classList.add('govuk-visually-hidden');
-      span.textContent = 'Select all';
-      label.append(span);
-      toggle.append(input, label);
-      this.toggle = toggle;
+      const $toggle = document.createElement('div');
+      const $label = document.createElement('label');
+      const $input = document.createElement('input');
+      const $span = document.createElement('span');
+      $toggle.classList.add('govuk-checkboxes__item', 'govuk-checkboxes--small', 'moj-multi-select__checkbox');
+      $input.id = id;
+      $input.type = 'checkbox';
+      $input.classList.add('govuk-checkboxes__input');
+      $label.setAttribute('for', id);
+      $label.classList.add('govuk-label', 'govuk-checkboxes__label', 'moj-multi-select__toggle-label');
+      $span.classList.add('govuk-visually-hidden');
+      $span.textContent = 'Select all';
+      $label.append($span);
+      $toggle.append($input, $label);
+      this.$toggle = $toggle;
     }
     onButtonClick() {
       if (this.checked) {
         this.uncheckAll();
-        this.toggleButton.checked = false;
+        this.$toggleButton.checked = false;
       } else {
         this.checkAll();
-        this.toggleButton.checked = true;
+        this.$toggleButton.checked = true;
       }
     }
     checkAll() {
-      this.checkboxes.forEach(el => {
-        el.checked = true;
+      this.$checkboxes.forEach($input => {
+        $input.checked = true;
       });
       this.checked = true;
     }
     uncheckAll() {
-      this.checkboxes.forEach(el => {
-        el.checked = false;
+      this.$checkboxes.forEach($input => {
+        $input.checked = false;
       });
       this.checked = false;
     }
+
+    /**
+     * @param {MouseEvent} event - Click event
+     */
     onCheckboxClick(event) {
+      if (!(event.target instanceof HTMLInputElement)) {
+        return;
+      }
       if (!event.target.checked) {
-        this.toggleButton.checked = false;
+        this.$toggleButton.checked = false;
         this.checked = false;
       } else {
-        if (this.checkboxes.filter(el => el.checked).length === this.checkboxes.length) {
-          this.toggleButton.checked = true;
+        if (this.$checkboxes.filter($input => $input.checked).length === this.$checkboxes.length) {
+          this.$toggleButton.checked = true;
           this.checked = true;
         }
       }
     }
+
+    /**
+     * Name for the component used when initialising using data-module attributes.
+     */
   }
 
+  /**
+   * Multi select config
+   *
+   * @typedef {object} MultiSelectConfig
+   * @property {string} [idPrefix] - Prefix for the Select all" checkbox `id` attribute
+   * @property {boolean} [checked] - Whether the "Select all" checkbox is checked
+   * @property {object} [checkboxes] - Checkboxes config
+   * @property {string} [checkboxes.selector] - Checkboxes query selector
+   * @property {NodeListOf<HTMLInputElement>} [checkboxes.items] - Checkboxes query selector results
+   */
+
+  /**
+   * @import { Schema } from 'govuk-frontend/dist/govuk/common/configuration.mjs'
+   */
+  MultiSelect.moduleName = 'moj-multi-select';
+  /**
+   * Multi select config
+   *
+   * @type {MultiSelectConfig}
+   */
+  MultiSelect.defaults = Object.freeze({
+    idPrefix: '',
+    checkboxes: {
+      selector: 'tbody input.govuk-checkboxes__input'
+    }
+  });
+  /**
+   * Multi select config schema
+   *
+   * @satisfies {Schema<MultiSelectConfig>}
+   */
+  MultiSelect.schema = Object.freeze(/** @type {const} */{
+    properties: {
+      idPrefix: {
+        type: 'string'
+      },
+      checked: {
+        type: 'boolean'
+      },
+      checkboxes: {
+        type: 'object'
+      }
+    }
+  });
+
   exports.MultiSelect = MultiSelect;
 
 }));

package/moj/components/multi-select/multi-select.bundle.js.map

@@ -1 +1 @@
-{"version":3,"file":"multi-select.bundle.js","sources":["../../../../src/moj/components/multi-select/multi-select.mjs"],"sourcesContent":["export class MultiSelect {\n  constructor(options) {\n    this.container = options.container\n\n    if (this.container.hasAttribute('data-moj-multi-select-init')) {\n      return this\n    }\n\n    this.container.setAttribute('data-moj-multi-select-init', '')\n\n    const idPrefix = options.id_prefix\n    this.setupToggle(idPrefix)\n\n    this.toggleButton = this.toggle.querySelector('input')\n    this.toggleButton.addEventListener('click', this.onButtonClick.bind(this))\n    this.container.append(this.toggle)\n\n    this.checkboxes = Array.from(options.checkboxes)\n    this.checkboxes.forEach((el) =>\n      el.addEventListener('click', this.onCheckboxClick.bind(this))\n    )\n\n    this.checked = options.checked || false\n  }\n\n  setupToggle(idPrefix = '') {\n    const id = `${idPrefix}checkboxes-all`\n\n    const toggle = document.createElement('div')\n    const label = document.createElement('label')\n    const input = document.createElement('input')\n    const span = document.createElement('span')\n\n    toggle.classList.add(\n      'govuk-checkboxes__item',\n      'govuk-checkboxes--small',\n      'moj-multi-select__checkbox'\n    )\n\n    input.id = id\n    input.type = 'checkbox'\n    input.classList.add('govuk-checkboxes__input')\n\n    label.setAttribute('for', id)\n    label.classList.add(\n      'govuk-label',\n      'govuk-checkboxes__label',\n      'moj-multi-select__toggle-label'\n    )\n\n    span.classList.add('govuk-visually-hidden')\n    span.textContent = 'Select all'\n\n    label.append(span)\n    toggle.append(input, label)\n\n    this.toggle = toggle\n  }\n\n  onButtonClick() {\n    if (this.checked) {\n      this.uncheckAll()\n      this.toggleButton.checked = false\n    } else {\n      this.checkAll()\n      this.toggleButton.checked = true\n    }\n  }\n\n  checkAll() {\n    this.checkboxes.forEach((el) => {\n      el.checked = true\n    })\n    this.checked = true\n  }\n\n  uncheckAll() {\n    this.checkboxes.forEach((el) => {\n      el.checked = false\n    })\n    this.checked = false\n  }\n\n  onCheckboxClick(event) {\n    if (!event.target.checked) {\n      this.toggleButton.checked = false\n      this.checked = false\n    } else {\n      if (\n        this.checkboxes.filter((el) => el.checked).length ===\n        this.checkboxes.length\n      ) {\n        this.toggleButton.checked = true\n        this.checked = true\n      }\n    }\n  }\n}\n"],"names":["MultiSelect","constructor","options","container","hasAttribute","setAttribute","idPrefix","id_prefix","setupToggle","toggleButton","toggle","querySelector","addEventListener","onButtonClick","bind","append","checkboxes","Array","from","forEach","el","onCheckboxClick","checked","id","document","createElement","label","input","span","classList","add","type","textContent","uncheckAll","checkAll","event","target","filter","length"],"mappings":"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"}
+{"version":3,"file":"multi-select.bundle.js","sources":["../../../../src/moj/components/multi-select/multi-select.mjs"],"sourcesContent":["import { ConfigurableComponent } from 'govuk-frontend'\n\n/**\n * @augments {ConfigurableComponent<MultiSelectConfig>}\n */\nexport class MultiSelect extends ConfigurableComponent {\n  /**\n   * @param {Element | null} $root - HTML element to use for multi select\n   * @param {MultiSelectConfig} [config] - Multi select config\n   */\n  constructor($root, config = {}) {\n    super($root, config)\n\n    const $container = this.$root.querySelector(\n      `#${this.config.idPrefix}select-all`\n    )\n\n    const $checkboxes = /** @type {NodeListOf<HTMLInputElement>} */ (\n      this.config.checkboxes.items ??\n        this.$root.querySelectorAll(this.config.checkboxes.selector)\n    )\n\n    if (\n      !$container ||\n      !($container instanceof HTMLElement) ||\n      !$checkboxes.length\n    ) {\n      return this\n    }\n\n    this.setupToggle(this.config.idPrefix)\n\n    this.$toggleButton = this.$toggle.querySelector('input')\n    this.$toggleButton.addEventListener('click', this.onButtonClick.bind(this))\n\n    this.$container = $container\n    this.$container.append(this.$toggle)\n\n    this.$checkboxes = Array.from($checkboxes)\n    this.$checkboxes.forEach(($input) =>\n      $input.addEventListener('click', this.onCheckboxClick.bind(this))\n    )\n\n    this.checked = config.checked || false\n  }\n\n  setupToggle(idPrefix = '') {\n    const id = `${idPrefix}checkboxes-all`\n\n    const $toggle = document.createElement('div')\n    const $label = document.createElement('label')\n    const $input = document.createElement('input')\n    const $span = document.createElement('span')\n\n    $toggle.classList.add(\n      'govuk-checkboxes__item',\n      'govuk-checkboxes--small',\n      'moj-multi-select__checkbox'\n    )\n\n    $input.id = id\n    $input.type = 'checkbox'\n    $input.classList.add('govuk-checkboxes__input')\n\n    $label.setAttribute('for', id)\n    $label.classList.add(\n      'govuk-label',\n      'govuk-checkboxes__label',\n      'moj-multi-select__toggle-label'\n    )\n\n    $span.classList.add('govuk-visually-hidden')\n    $span.textContent = 'Select all'\n\n    $label.append($span)\n    $toggle.append($input, $label)\n\n    this.$toggle = $toggle\n  }\n\n  onButtonClick() {\n    if (this.checked) {\n      this.uncheckAll()\n      this.$toggleButton.checked = false\n    } else {\n      this.checkAll()\n      this.$toggleButton.checked = true\n    }\n  }\n\n  checkAll() {\n    this.$checkboxes.forEach(($input) => {\n      $input.checked = true\n    })\n\n    this.checked = true\n  }\n\n  uncheckAll() {\n    this.$checkboxes.forEach(($input) => {\n      $input.checked = false\n    })\n\n    this.checked = false\n  }\n\n  /**\n   * @param {MouseEvent} event - Click event\n   */\n  onCheckboxClick(event) {\n    if (!(event.target instanceof HTMLInputElement)) {\n      return\n    }\n\n    if (!event.target.checked) {\n      this.$toggleButton.checked = false\n      this.checked = false\n    } else {\n      if (\n        this.$checkboxes.filter(($input) => $input.checked).length ===\n        this.$checkboxes.length\n      ) {\n        this.$toggleButton.checked = true\n        this.checked = true\n      }\n    }\n  }\n\n  /**\n   * Name for the component used when initialising using data-module attributes.\n   */\n  static moduleName = 'moj-multi-select'\n\n  /**\n   * Multi select config\n   *\n   * @type {MultiSelectConfig}\n   */\n  static defaults = Object.freeze({\n    idPrefix: '',\n    checkboxes: {\n      selector: 'tbody input.govuk-checkboxes__input'\n    }\n  })\n\n  /**\n   * Multi select config schema\n   *\n   * @satisfies {Schema<MultiSelectConfig>}\n   */\n  static schema = Object.freeze(\n    /** @type {const} */ ({\n      properties: {\n        idPrefix: { type: 'string' },\n        checked: { type: 'boolean' },\n        checkboxes: { type: 'object' }\n      }\n    })\n  )\n}\n\n/**\n * Multi select config\n *\n * @typedef {object} MultiSelectConfig\n * @property {string} [idPrefix] - Prefix for the Select all\" checkbox `id` attribute\n * @property {boolean} [checked] - Whether the \"Select all\" checkbox is checked\n * @property {object} [checkboxes] - Checkboxes config\n * @property {string} [checkboxes.selector] - Checkboxes query selector\n * @property {NodeListOf<HTMLInputElement>} [checkboxes.items] - Checkboxes query selector results\n */\n\n/**\n * @import { Schema } from 'govuk-frontend/dist/govuk/common/configuration.mjs'\n */\n"],"names":["MultiSelect","ConfigurableComponent","constructor","$root","config","_this$config$checkbox","$container","querySelector","idPrefix","$checkboxes","checkboxes","items","querySelectorAll","selector","HTMLElement","length","setupToggle","$toggleButton","$toggle","addEventListener","onButtonClick","bind","append","Array","from","forEach","$input","onCheckboxClick","checked","id","document","createElement","$label","$span","classList","add","type","setAttribute","textContent","uncheckAll","checkAll","event","target","HTMLInputElement","filter","moduleName","defaults","Object","freeze","schema","properties"],"mappings":"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"}

package/moj/components/multi-select/multi-select.bundle.mjs

@@ -1,70 +1,379 @@
-class MultiSelect {
-  constructor(options) {
-    this.container = options.container;
-    if (this.container.hasAttribute('data-moj-multi-select-init')) {
+function isInitialised($root, moduleName) {
+  return $root instanceof HTMLElement && $root.hasAttribute(`data-${moduleName}-init`);
+}
+
+/**
+ * Checks if GOV.UK Frontend is supported on this page
+ *
+ * Some browsers will load and run our JavaScript but GOV.UK Frontend
+ * won't be supported.
+ *
+ * @param {HTMLElement | null} [$scope] - (internal) `<body>` HTML element checked for browser support
+ * @returns {boolean} Whether GOV.UK Frontend is supported on this page
+ */
+function isSupported($scope = document.body) {
+  if (!$scope) {
+    return false;
+  }
+  return $scope.classList.contains('govuk-frontend-supported');
+}
+function isArray(option) {
+  return Array.isArray(option);
+}
+function isObject(option) {
+  return !!option && typeof option === 'object' && !isArray(option);
+}
+function formatErrorMessage(Component, message) {
+  return `${Component.moduleName}: ${message}`;
+}
+
+class GOVUKFrontendError extends Error {
+  constructor(...args) {
+    super(...args);
+    this.name = 'GOVUKFrontendError';
+  }
+}
+class SupportError extends GOVUKFrontendError {
+  /**
+   * Checks if GOV.UK Frontend is supported on this page
+   *
+   * @param {HTMLElement | null} [$scope] - HTML element `<body>` checked for browser support
+   */
+  constructor($scope = document.body) {
+    const supportMessage = 'noModule' in HTMLScriptElement.prototype ? 'GOV.UK Frontend initialised without `<body class="govuk-frontend-supported">` from template `<script>` snippet' : 'GOV.UK Frontend is not supported in this browser';
+    super($scope ? supportMessage : 'GOV.UK Frontend initialised without `<script type="module">`');
+    this.name = 'SupportError';
+  }
+}
+class ConfigError extends GOVUKFrontendError {
+  constructor(...args) {
+    super(...args);
+    this.name = 'ConfigError';
+  }
+}
+class ElementError extends GOVUKFrontendError {
+  constructor(messageOrOptions) {
+    let message = typeof messageOrOptions === 'string' ? messageOrOptions : '';
+    if (typeof messageOrOptions === 'object') {
+      const {
+        component,
+        identifier,
+        element,
+        expectedType
+      } = messageOrOptions;
+      message = identifier;
+      message += element ? ` is not of type ${expectedType != null ? expectedType : 'HTMLElement'}` : ' not found';
+      message = formatErrorMessage(component, message);
+    }
+    super(message);
+    this.name = 'ElementError';
+  }
+}
+class InitError extends GOVUKFrontendError {
+  constructor(componentOrMessage) {
+    const message = typeof componentOrMessage === 'string' ? componentOrMessage : formatErrorMessage(componentOrMessage, `Root element (\`$root\`) already initialised`);
+    super(message);
+    this.name = 'InitError';
+  }
+}
+
+class Component {
+  /**
+   * Returns the root element of the component
+   *
+   * @protected
+   * @returns {RootElementType} - the root element of component
+   */
+  get $root() {
+    return this._$root;
+  }
+  constructor($root) {
+    this._$root = void 0;
+    const childConstructor = this.constructor;
+    if (typeof childConstructor.moduleName !== 'string') {
+      throw new InitError(`\`moduleName\` not defined in component`);
+    }
+    if (!($root instanceof childConstructor.elementType)) {
+      throw new ElementError({
+        element: $root,
+        component: childConstructor,
+        identifier: 'Root element (`$root`)',
+        expectedType: childConstructor.elementType.name
+      });
+    } else {
+      this._$root = $root;
+    }
+    childConstructor.checkSupport();
+    this.checkInitialised();
+    const moduleName = childConstructor.moduleName;
+    this.$root.setAttribute(`data-${moduleName}-init`, '');
+  }
+  checkInitialised() {
+    const constructor = this.constructor;
+    const moduleName = constructor.moduleName;
+    if (moduleName && isInitialised(this.$root, moduleName)) {
+      throw new InitError(constructor);
+    }
+  }
+  static checkSupport() {
+    if (!isSupported()) {
+      throw new SupportError();
+    }
+  }
+}
+
+/**
+ * @typedef ChildClass
+ * @property {string} moduleName - The module name that'll be looked for in the DOM when initialising the component
+ */
+
+/**
+ * @typedef {typeof Component & ChildClass} ChildClassConstructor
+ */
+Component.elementType = HTMLElement;
+
+const configOverride = Symbol.for('configOverride');
+class ConfigurableComponent extends Component {
+  [configOverride](param) {
+    return {};
+  }
+
+  /**
+   * Returns the root element of the component
+   *
+   * @protected
+   * @returns {ConfigurationType} - the root element of component
+   */
+  get config() {
+    return this._config;
+  }
+  constructor($root, config) {
+    super($root);
+    this._config = void 0;
+    const childConstructor = this.constructor;
+    if (!isObject(childConstructor.defaults)) {
+      throw new ConfigError(formatErrorMessage(childConstructor, 'Config passed as parameter into constructor but no defaults defined'));
+    }
+    const datasetConfig = normaliseDataset(childConstructor, this._$root.dataset);
+    this._config = mergeConfigs(childConstructor.defaults, config != null ? config : {}, this[configOverride](datasetConfig), datasetConfig);
+  }
+}
+function normaliseString(value, property) {
+  const trimmedValue = value ? value.trim() : '';
+  let output;
+  let outputType = property == null ? void 0 : property.type;
+  if (!outputType) {
+    if (['true', 'false'].includes(trimmedValue)) {
+      outputType = 'boolean';
+    }
+    if (trimmedValue.length > 0 && isFinite(Number(trimmedValue))) {
+      outputType = 'number';
+    }
+  }
+  switch (outputType) {
+    case 'boolean':
+      output = trimmedValue === 'true';
+      break;
+    case 'number':
+      output = Number(trimmedValue);
+      break;
+    default:
+      output = value;
+  }
+  return output;
+}
+function normaliseDataset(Component, dataset) {
+  if (!isObject(Component.schema)) {
+    throw new ConfigError(formatErrorMessage(Component, 'Config passed as parameter into constructor but no schema defined'));
+  }
+  const out = {};
+  const entries = Object.entries(Component.schema.properties);
+  for (const entry of entries) {
+    const [namespace, property] = entry;
+    const field = namespace.toString();
+    if (field in dataset) {
+      out[field] = normaliseString(dataset[field], property);
+    }
+    if ((property == null ? void 0 : property.type) === 'object') {
+      out[field] = extractConfigByNamespace(Component.schema, dataset, namespace);
+    }
+  }
+  return out;
+}
+function mergeConfigs(...configObjects) {
+  const formattedConfigObject = {};
+  for (const configObject of configObjects) {
+    for (const key of Object.keys(configObject)) {
+      const option = formattedConfigObject[key];
+      const override = configObject[key];
+      if (isObject(option) && isObject(override)) {
+        formattedConfigObject[key] = mergeConfigs(option, override);
+      } else {
+        formattedConfigObject[key] = override;
+      }
+    }
+  }
+  return formattedConfigObject;
+}
+function extractConfigByNamespace(schema, dataset, namespace) {
+  const property = schema.properties[namespace];
+  if ((property == null ? void 0 : property.type) !== 'object') {
+    return;
+  }
+  const newObject = {
+    [namespace]: {}
+  };
+  for (const [key, value] of Object.entries(dataset)) {
+    let current = newObject;
+    const keyParts = key.split('.');
+    for (const [index, name] of keyParts.entries()) {
+      if (isObject(current)) {
+        if (index < keyParts.length - 1) {
+          if (!isObject(current[name])) {
+            current[name] = {};
+          }
+          current = current[name];
+        } else if (key !== namespace) {
+          current[name] = normaliseString(value);
+        }
+      }
+    }
+  }
+  return newObject[namespace];
+}
+
+/**
+ * @augments {ConfigurableComponent<MultiSelectConfig>}
+ */
+class MultiSelect extends ConfigurableComponent {
+  /**
+   * @param {Element | null} $root - HTML element to use for multi select
+   * @param {MultiSelectConfig} [config] - Multi select config
+   */
+  constructor($root, config = {}) {
+    var _this$config$checkbox;
+    super($root, config);
+    const $container = this.$root.querySelector(`#${this.config.idPrefix}select-all`);
+    const $checkboxes = /** @type {NodeListOf<HTMLInputElement>} */(_this$config$checkbox = this.config.checkboxes.items) != null ? _this$config$checkbox : this.$root.querySelectorAll(this.config.checkboxes.selector);
+    if (!$container || !($container instanceof HTMLElement) || !$checkboxes.length) {
       return this;
     }
-    this.container.setAttribute('data-moj-multi-select-init', '');
-    const idPrefix = options.id_prefix;
-    this.setupToggle(idPrefix);
-    this.toggleButton = this.toggle.querySelector('input');
-    this.toggleButton.addEventListener('click', this.onButtonClick.bind(this));
-    this.container.append(this.toggle);
-    this.checkboxes = Array.from(options.checkboxes);
-    this.checkboxes.forEach(el => el.addEventListener('click', this.onCheckboxClick.bind(this)));
-    this.checked = options.checked || false;
+    this.setupToggle(this.config.idPrefix);
+    this.$toggleButton = this.$toggle.querySelector('input');
+    this.$toggleButton.addEventListener('click', this.onButtonClick.bind(this));
+    this.$container = $container;
+    this.$container.append(this.$toggle);
+    this.$checkboxes = Array.from($checkboxes);
+    this.$checkboxes.forEach($input => $input.addEventListener('click', this.onCheckboxClick.bind(this)));
+    this.checked = config.checked || false;
   }
   setupToggle(idPrefix = '') {
     const id = `${idPrefix}checkboxes-all`;
-    const toggle = document.createElement('div');
-    const label = document.createElement('label');
-    const input = document.createElement('input');
-    const span = document.createElement('span');
-    toggle.classList.add('govuk-checkboxes__item', 'govuk-checkboxes--small', 'moj-multi-select__checkbox');
-    input.id = id;
-    input.type = 'checkbox';
-    input.classList.add('govuk-checkboxes__input');
-    label.setAttribute('for', id);
-    label.classList.add('govuk-label', 'govuk-checkboxes__label', 'moj-multi-select__toggle-label');
-    span.classList.add('govuk-visually-hidden');
-    span.textContent = 'Select all';
-    label.append(span);
-    toggle.append(input, label);
-    this.toggle = toggle;
+    const $toggle = document.createElement('div');
+    const $label = document.createElement('label');
+    const $input = document.createElement('input');
+    const $span = document.createElement('span');
+    $toggle.classList.add('govuk-checkboxes__item', 'govuk-checkboxes--small', 'moj-multi-select__checkbox');
+    $input.id = id;
+    $input.type = 'checkbox';
+    $input.classList.add('govuk-checkboxes__input');
+    $label.setAttribute('for', id);
+    $label.classList.add('govuk-label', 'govuk-checkboxes__label', 'moj-multi-select__toggle-label');
+    $span.classList.add('govuk-visually-hidden');
+    $span.textContent = 'Select all';
+    $label.append($span);
+    $toggle.append($input, $label);
+    this.$toggle = $toggle;
   }
   onButtonClick() {
     if (this.checked) {
       this.uncheckAll();
-      this.toggleButton.checked = false;
+      this.$toggleButton.checked = false;
     } else {
       this.checkAll();
-      this.toggleButton.checked = true;
+      this.$toggleButton.checked = true;
     }
   }
   checkAll() {
-    this.checkboxes.forEach(el => {
-      el.checked = true;
+    this.$checkboxes.forEach($input => {
+      $input.checked = true;
     });
     this.checked = true;
   }
   uncheckAll() {
-    this.checkboxes.forEach(el => {
-      el.checked = false;
+    this.$checkboxes.forEach($input => {
+      $input.checked = false;
     });
     this.checked = false;
   }
+
+  /**
+   * @param {MouseEvent} event - Click event
+   */
   onCheckboxClick(event) {
+    if (!(event.target instanceof HTMLInputElement)) {
+      return;
+    }
     if (!event.target.checked) {
-      this.toggleButton.checked = false;
+      this.$toggleButton.checked = false;
       this.checked = false;
     } else {
-      if (this.checkboxes.filter(el => el.checked).length === this.checkboxes.length) {
-        this.toggleButton.checked = true;
+      if (this.$checkboxes.filter($input => $input.checked).length === this.$checkboxes.length) {
+        this.$toggleButton.checked = true;
         this.checked = true;
       }
     }
   }
+
+  /**
+   * Name for the component used when initialising using data-module attributes.
+   */
 }
 
+/**
+ * Multi select config
+ *
+ * @typedef {object} MultiSelectConfig
+ * @property {string} [idPrefix] - Prefix for the Select all" checkbox `id` attribute
+ * @property {boolean} [checked] - Whether the "Select all" checkbox is checked
+ * @property {object} [checkboxes] - Checkboxes config
+ * @property {string} [checkboxes.selector] - Checkboxes query selector
+ * @property {NodeListOf<HTMLInputElement>} [checkboxes.items] - Checkboxes query selector results
+ */
+
+/**
+ * @import { Schema } from 'govuk-frontend/dist/govuk/common/configuration.mjs'
+ */
+MultiSelect.moduleName = 'moj-multi-select';
+/**
+ * Multi select config
+ *
+ * @type {MultiSelectConfig}
+ */
+MultiSelect.defaults = Object.freeze({
+  idPrefix: '',
+  checkboxes: {
+    selector: 'tbody input.govuk-checkboxes__input'
+  }
+});
+/**
+ * Multi select config schema
+ *
+ * @satisfies {Schema<MultiSelectConfig>}
+ */
+MultiSelect.schema = Object.freeze(/** @type {const} */{
+  properties: {
+    idPrefix: {
+      type: 'string'
+    },
+    checked: {
+      type: 'boolean'
+    },
+    checkboxes: {
+      type: 'object'
+    }
+  }
+});
+
 export { MultiSelect };
 //# sourceMappingURL=multi-select.bundle.mjs.map