@ministryofjustice/frontend 5.0.0 → 5.1.1

package/moj/components/sortable-table/sortable-table.bundle.js.map

@@ -1 +1 @@
-{"version":3,"file":"sortable-table.bundle.js","sources":["../../../../src/moj/components/sortable-table/sortable-table.mjs"],"sourcesContent":["export class SortableTable {\n  constructor(params) {\n    const table = params.table\n    const head = table?.querySelector('thead')\n    const body = table?.querySelector('tbody')\n\n    if (!table || !(table instanceof HTMLElement) || !head || !body) {\n      return this\n    }\n\n    this.table = table\n    this.head = head\n    this.body = body\n\n    if (this.table.hasAttribute('data-moj-sortable-table-init')) {\n      return this\n    }\n\n    this.table.setAttribute('data-moj-sortable-table-init', '')\n\n    this.headings = this.head\n      ? Array.from(this.head.querySelectorAll('th'))\n      : []\n\n    this.setupOptions(params)\n    this.createHeadingButtons()\n    this.createStatusBox()\n    this.initialiseSortedColumn()\n\n    this.head.addEventListener('click', this.onSortButtonClick.bind(this))\n  }\n\n  setupOptions(params) {\n    params = params || {}\n    this.statusMessage =\n      params.statusMessage || 'Sort by %heading% (%direction%)'\n    this.ascendingText = params.ascendingText || 'ascending'\n    this.descendingText = params.descendingText || 'descending'\n  }\n\n  createHeadingButtons() {\n    for (const heading of this.headings) {\n      if (heading.hasAttribute('aria-sort')) {\n        this.createHeadingButton(heading)\n      }\n    }\n  }\n\n  createHeadingButton(heading) {\n    const index = this.headings.indexOf(heading)\n    const button = document.createElement('button')\n\n    button.setAttribute('type', 'button')\n    button.setAttribute('data-index', `${index}`)\n    button.textContent = heading.textContent\n\n    heading.textContent = ''\n    heading.appendChild(button)\n  }\n\n  createStatusBox() {\n    this.status = document.createElement('div')\n\n    this.status.setAttribute('aria-atomic', 'true')\n    this.status.setAttribute('aria-live', 'polite')\n    this.status.setAttribute('class', 'govuk-visually-hidden')\n    this.status.setAttribute('role', 'status')\n\n    this.table.insertAdjacentElement('afterend', this.status)\n  }\n\n  initialiseSortedColumn() {\n    const rows = this.getTableRowsArray()\n\n    const heading = this.table.querySelector('th[aria-sort]')\n    const sortButton = heading?.querySelector('button')\n    const sortDirection = heading?.getAttribute('aria-sort')\n    const columnNumber = Number.parseInt(\n      sortButton?.getAttribute('data-index') ?? '0',\n      10\n    )\n\n    if (\n      !heading ||\n      !sortButton ||\n      !(sortDirection === 'ascending' || sortDirection === 'descending')\n    ) {\n      return\n    }\n\n    const sortedRows = this.sort(rows, columnNumber, sortDirection)\n    this.addRows(sortedRows)\n  }\n\n  onSortButtonClick(event) {\n    const button = event.target\n\n    if (\n      !button ||\n      !(button instanceof HTMLButtonElement) ||\n      !button.parentElement\n    ) {\n      return\n    }\n\n    const heading = button.parentElement\n    const sortDirection = heading.getAttribute('aria-sort')\n    const columnNumber = Number.parseInt(\n      button?.getAttribute('data-index') ?? '0',\n      10\n    )\n\n    const newSortDirection =\n      sortDirection === 'none' || sortDirection === 'descending'\n        ? 'ascending'\n        : 'descending'\n\n    const rows = this.getTableRowsArray()\n    const sortedRows = this.sort(rows, columnNumber, newSortDirection)\n\n    this.addRows(sortedRows)\n    this.removeButtonStates()\n    this.updateButtonState(button, newSortDirection)\n  }\n\n  updateButtonState(button, direction) {\n    if (!(direction === 'ascending' || direction === 'descending')) {\n      return\n    }\n\n    button.parentElement.setAttribute('aria-sort', direction)\n    let message = this.statusMessage\n    message = message.replace(/%heading%/, button.textContent)\n    message = message.replace(/%direction%/, this[`${direction}Text`])\n    this.status.textContent = message\n  }\n\n  removeButtonStates() {\n    for (const heading of this.headings) {\n      heading.setAttribute('aria-sort', 'none')\n    }\n  }\n\n  addRows(rows) {\n    for (const row of rows) {\n      this.body.append(row)\n    }\n  }\n\n  getTableRowsArray() {\n    return Array.from(this.body.querySelectorAll('tr'))\n  }\n\n  sort(rows, columnNumber, sortDirection) {\n    return rows.sort((rowA, rowB) => {\n      const tdA = rowA.querySelectorAll('td, th')[columnNumber]\n      const tdB = rowB.querySelectorAll('td, th')[columnNumber]\n\n      if (\n        !tdA ||\n        !tdB ||\n        !(tdA instanceof HTMLElement) ||\n        !(tdB instanceof HTMLElement)\n      ) {\n        return 0\n      }\n\n      const valueA =\n        sortDirection === 'ascending'\n          ? this.getCellValue(tdA)\n          : this.getCellValue(tdB)\n\n      const valueB =\n        sortDirection === 'ascending'\n          ? this.getCellValue(tdB)\n          : this.getCellValue(tdA)\n\n      return !(typeof valueA === 'number' && typeof valueB === 'number')\n        ? valueA.toString().localeCompare(valueB.toString())\n        : valueA - valueB\n    })\n  }\n\n  getCellValue(cell) {\n    const val = cell.getAttribute('data-sort-value') || cell.innerHTML\n    const valAsNumber = Number(val)\n\n    return Number.isFinite(valAsNumber)\n      ? valAsNumber // Exclude invalid numbers, infinity etc\n      : val\n  }\n}\n"],"names":["SortableTable","constructor","params","table","head","querySelector","body","HTMLElement","hasAttribute","setAttribute","headings","Array","from","querySelectorAll","setupOptions","createHeadingButtons","createStatusBox","initialiseSortedColumn","addEventListener","onSortButtonClick","bind","statusMessage","ascendingText","descendingText","heading","createHeadingButton","index","indexOf","button","document","createElement","textContent","appendChild","status","insertAdjacentElement","_sortButton$getAttrib","rows","getTableRowsArray","sortButton","sortDirection","getAttribute","columnNumber","Number","parseInt","sortedRows","sort","addRows","event","_button$getAttribute","target","HTMLButtonElement","parentElement","newSortDirection","removeButtonStates","updateButtonState","direction","message","replace","row","append","rowA","rowB","tdA","tdB","valueA","getCellValue","valueB","toString","localeCompare","cell","val","innerHTML","valAsNumber","isFinite"],"mappings":"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"}
+{"version":3,"file":"sortable-table.bundle.js","sources":["../../../../src/moj/components/sortable-table/sortable-table.mjs"],"sourcesContent":["import { ConfigurableComponent } from 'govuk-frontend'\n\n/**\n * @augments {ConfigurableComponent<SortableTableConfig>}\n */\nexport class SortableTable extends ConfigurableComponent {\n  /**\n   * @param {Element | null} $root - HTML element to use for sortable table\n   * @param {SortableTableConfig} [config] - Sortable table config\n   */\n  constructor($root, config = {}) {\n    super($root, config)\n\n    const $head = $root?.querySelector('thead')\n    const $body = $root?.querySelector('tbody')\n\n    if (!$head || !$body) {\n      return this\n    }\n\n    this.$head = $head\n    this.$body = $body\n    this.$caption = this.$root.querySelector('caption')\n\n    this.$upArrow = `<svg width=\"22\" height=\"22\" focusable=\"false\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M6.5625 15.5L11 6.63125L15.4375 15.5H6.5625Z\" fill=\"currentColor\"/>\n</svg>`\n    this.$downArrow = `<svg width=\"22\" height=\"22\" focusable=\"false\" aria-hidden=\"true\" role=\"img\" vviewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M15.4375 7L11 15.8687L6.5625 7L15.4375 7Z\" fill=\"currentColor\"/>\n</svg>`\n    this.$upDownArrow = `<svg width=\"22\" height=\"22\" focusable=\"false\" aria-hidden=\"true\" role=\"img\" vviewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M8.1875 9.5L10.9609 3.95703L13.7344 9.5H8.1875Z\" fill=\"currentColor\"/>\n<path d=\"M13.7344 12.0781L10.9609 17.6211L8.1875 12.0781H13.7344Z\" fill=\"currentColor\"/>\n</svg>`\n\n    this.$headings = this.$head\n      ? Array.from(this.$head.querySelectorAll('th'))\n      : []\n\n    this.createHeadingButtons()\n    this.updateCaption()\n    this.updateDirectionIndicators()\n    this.createStatusBox()\n    this.initialiseSortedColumn()\n\n    this.$head.addEventListener('click', this.onSortButtonClick.bind(this))\n  }\n\n  createHeadingButtons() {\n    for (const $heading of this.$headings) {\n      if ($heading.hasAttribute('aria-sort')) {\n        this.createHeadingButton($heading)\n      }\n    }\n  }\n\n  /**\n   * @param {HTMLTableCellElement} $heading\n   */\n  createHeadingButton($heading) {\n    const index = this.$headings.indexOf($heading)\n    const $button = document.createElement('button')\n\n    $button.setAttribute('type', 'button')\n    $button.setAttribute('data-index', `${index}`)\n    $button.textContent = $heading.textContent\n\n    $heading.textContent = ''\n    $heading.appendChild($button)\n  }\n\n  createStatusBox() {\n    this.$status = document.createElement('div')\n\n    this.$status.setAttribute('aria-atomic', 'true')\n    this.$status.setAttribute('aria-live', 'polite')\n    this.$status.setAttribute('class', 'govuk-visually-hidden')\n    this.$status.setAttribute('role', 'status')\n\n    this.$root.insertAdjacentElement('afterend', this.$status)\n  }\n\n  initialiseSortedColumn() {\n    const $rows = this.getTableRowsArray()\n\n    const $heading = this.$root.querySelector(\n      'th[aria-sort=\"ascending\"], th[aria-sort=\"descending\"]'\n    )\n    const $sortButton = $heading?.querySelector('button')\n    const sortDirection = $heading?.getAttribute('aria-sort')\n\n    const columnNumber = Number.parseInt(\n      $sortButton?.getAttribute('data-index') ?? '0',\n      10\n    )\n\n    if (\n      !$heading ||\n      !$sortButton ||\n      !(sortDirection === 'ascending' || sortDirection === 'descending')\n    ) {\n      return\n    }\n\n    const $sortedRows = this.sort($rows, columnNumber, sortDirection)\n    this.addRows($sortedRows)\n  }\n\n  /**\n   * @param {MouseEvent} event - Click event\n   */\n  onSortButtonClick(event) {\n    const $target = /** @type {HTMLElement} */ (event.target)\n    const $button = $target.closest('button')\n\n    if (\n      !$button ||\n      !($button instanceof HTMLButtonElement) ||\n      !$button.parentElement\n    ) {\n      return\n    }\n\n    const $heading = $button.parentElement\n    const sortDirection = $heading.getAttribute('aria-sort')\n\n    const columnNumber = Number.parseInt(\n      $button?.getAttribute('data-index') ?? '0',\n      10\n    )\n\n    const newSortDirection =\n      sortDirection === 'none' || sortDirection === 'descending'\n        ? 'ascending'\n        : 'descending'\n\n    const $rows = this.getTableRowsArray()\n    const $sortedRows = this.sort($rows, columnNumber, newSortDirection)\n\n    this.addRows($sortedRows)\n    this.removeButtonStates()\n    this.updateButtonState($button, newSortDirection)\n    this.updateDirectionIndicators()\n  }\n\n  updateCaption() {\n    if (!this.$caption) {\n      return\n    }\n\n    let assistiveText = this.$caption.querySelector('.govuk-visually-hidden')\n    if (assistiveText) {\n      return\n    }\n\n    assistiveText = document.createElement('span')\n    assistiveText.classList.add('govuk-visually-hidden')\n    assistiveText.textContent = ' (column headers with buttons are sortable).'\n\n    this.$caption.appendChild(assistiveText)\n  }\n\n  /**\n   * @param {HTMLButtonElement} $button\n   * @param {string} direction\n   */\n  updateButtonState($button, direction) {\n    if (!(direction === 'ascending' || direction === 'descending')) {\n      return\n    }\n\n    $button.parentElement.setAttribute('aria-sort', direction)\n    let message = this.config.statusMessage\n    message = message.replace(/%heading%/, $button.textContent)\n    message = message.replace(/%direction%/, this.config[`${direction}Text`])\n    this.$status.textContent = message\n  }\n\n  updateDirectionIndicators() {\n    for (const $heading of this.$headings) {\n      const $button = /** @type {HTMLButtonElement} */ (\n        $heading.querySelector('button')\n      )\n      if ($heading.hasAttribute('aria-sort') && $button) {\n        const direction = $heading.getAttribute('aria-sort')\n        $button.querySelector('svg')?.remove()\n\n        switch (direction) {\n          case 'ascending':\n            $button.insertAdjacentHTML('beforeend', this.$upArrow)\n            break\n          case 'descending':\n            $button.insertAdjacentHTML('beforeend', this.$downArrow)\n            break\n          default:\n            $button.insertAdjacentHTML('beforeend', this.$upDownArrow)\n        }\n      }\n    }\n  }\n\n  removeButtonStates() {\n    for (const $heading of this.$headings) {\n      $heading.setAttribute('aria-sort', 'none')\n    }\n  }\n\n  /**\n   * @param {HTMLTableRowElement[]} $rows\n   */\n  addRows($rows) {\n    for (const $row of $rows) {\n      this.$body.append($row)\n    }\n  }\n\n  getTableRowsArray() {\n    return Array.from(this.$body.querySelectorAll('tr'))\n  }\n\n  /**\n   * @param {HTMLTableRowElement[]} $rows\n   * @param {number} columnNumber\n   * @param {string} sortDirection\n   */\n  sort($rows, columnNumber, sortDirection) {\n    return $rows.sort(($rowA, $rowB) => {\n      const $tdA = $rowA.querySelectorAll('td, th')[columnNumber]\n      const $tdB = $rowB.querySelectorAll('td, th')[columnNumber]\n\n      if (\n        !$tdA ||\n        !$tdB ||\n        !($tdA instanceof HTMLElement) ||\n        !($tdB instanceof HTMLElement)\n      ) {\n        return 0\n      }\n\n      const valueA =\n        sortDirection === 'ascending'\n          ? this.getCellValue($tdA)\n          : this.getCellValue($tdB)\n\n      const valueB =\n        sortDirection === 'ascending'\n          ? this.getCellValue($tdB)\n          : this.getCellValue($tdA)\n\n      return !(typeof valueA === 'number' && typeof valueB === 'number')\n        ? valueA.toString().localeCompare(valueB.toString())\n        : valueA - valueB\n    })\n  }\n\n  /**\n   * @param {HTMLElement} $cell\n   */\n  getCellValue($cell) {\n    const val = $cell.getAttribute('data-sort-value') || $cell.innerHTML\n    const valAsNumber = Number(val)\n\n    return Number.isFinite(valAsNumber)\n      ? valAsNumber // Exclude invalid numbers, infinity etc\n      : val\n  }\n\n  /**\n   * Name for the component used when initialising using data-module attributes.\n   */\n  static moduleName = 'moj-sortable-table'\n\n  /**\n   * Sortable table config\n   *\n   * @type {SortableTableConfig}\n   */\n  static defaults = Object.freeze({\n    statusMessage: 'Sort by %heading% (%direction%)',\n    ascendingText: 'ascending',\n    descendingText: 'descending'\n  })\n\n  /**\n   * Sortable table config schema\n   *\n   * @satisfies {Schema<SortableTableConfig>}\n   */\n  static schema = Object.freeze(\n    /** @type {const} */ ({\n      properties: {\n        statusMessage: { type: 'string' },\n        ascendingText: { type: 'string' },\n        descendingText: { type: 'string' }\n      }\n    })\n  )\n}\n\n/**\n * Sortable table config\n *\n * @typedef {object} SortableTableConfig\n * @property {string} [statusMessage] - Status message\n * @property {string} [ascendingText] - Ascending text\n * @property {string} [descendingText] - Descending text\n */\n\n/**\n * @import { Schema } from 'govuk-frontend/dist/govuk/common/configuration.mjs'\n */\n"],"names":["SortableTable","ConfigurableComponent","constructor","$root","config","$head","querySelector","$body","$caption","$upArrow","$downArrow","$upDownArrow","$headings","Array","from","querySelectorAll","createHeadingButtons","updateCaption","updateDirectionIndicators","createStatusBox","initialiseSortedColumn","addEventListener","onSortButtonClick","bind","$heading","hasAttribute","createHeadingButton","index","indexOf","$button","document","createElement","setAttribute","textContent","appendChild","$status","insertAdjacentElement","_$sortButton$getAttri","$rows","getTableRowsArray","$sortButton","sortDirection","getAttribute","columnNumber","Number","parseInt","$sortedRows","sort","addRows","event","_$button$getAttribute","$target","target","closest","HTMLButtonElement","parentElement","newSortDirection","removeButtonStates","updateButtonState","assistiveText","classList","add","direction","message","statusMessage","replace","_$button$querySelecto","remove","insertAdjacentHTML","$row","append","$rowA","$rowB","$tdA","$tdB","HTMLElement","valueA","getCellValue","valueB","toString","localeCompare","$cell","val","innerHTML","valAsNumber","isFinite","moduleName","defaults","Object","freeze","ascendingText","descendingText","schema","properties","type"],"mappings":"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"}

package/moj/components/sortable-table/sortable-table.bundle.mjs

@@ -1,126 +1,487 @@
-class SortableTable {
-  constructor(params) {
-    const table = params.table;
-    const head = table == null ? void 0 : table.querySelector('thead');
-    const body = table == null ? void 0 : table.querySelector('tbody');
-    if (!table || !(table instanceof HTMLElement) || !head || !body) {
-      return this;
+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';
     }
-    this.table = table;
-    this.head = head;
-    this.body = body;
-    if (this.table.hasAttribute('data-moj-sortable-table-init')) {
+    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<SortableTableConfig>}
+ */
+class SortableTable extends ConfigurableComponent {
+  /**
+   * @param {Element | null} $root - HTML element to use for sortable table
+   * @param {SortableTableConfig} [config] - Sortable table config
+   */
+  constructor($root, config = {}) {
+    super($root, config);
+    const $head = $root == null ? void 0 : $root.querySelector('thead');
+    const $body = $root == null ? void 0 : $root.querySelector('tbody');
+    if (!$head || !$body) {
       return this;
     }
-    this.table.setAttribute('data-moj-sortable-table-init', '');
-    this.headings = this.head ? Array.from(this.head.querySelectorAll('th')) : [];
-    this.setupOptions(params);
+    this.$head = $head;
+    this.$body = $body;
+    this.$caption = this.$root.querySelector('caption');
+    this.$upArrow = `<svg width="22" height="22" focusable="false" aria-hidden="true" role="img" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.5625 15.5L11 6.63125L15.4375 15.5H6.5625Z" fill="currentColor"/>
+</svg>`;
+    this.$downArrow = `<svg width="22" height="22" focusable="false" aria-hidden="true" role="img" vviewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.4375 7L11 15.8687L6.5625 7L15.4375 7Z" fill="currentColor"/>
+</svg>`;
+    this.$upDownArrow = `<svg width="22" height="22" focusable="false" aria-hidden="true" role="img" vviewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.1875 9.5L10.9609 3.95703L13.7344 9.5H8.1875Z" fill="currentColor"/>
+<path d="M13.7344 12.0781L10.9609 17.6211L8.1875 12.0781H13.7344Z" fill="currentColor"/>
+</svg>`;
+    this.$headings = this.$head ? Array.from(this.$head.querySelectorAll('th')) : [];
     this.createHeadingButtons();
+    this.updateCaption();
+    this.updateDirectionIndicators();
     this.createStatusBox();
     this.initialiseSortedColumn();
-    this.head.addEventListener('click', this.onSortButtonClick.bind(this));
-  }
-  setupOptions(params) {
-    params = params || {};
-    this.statusMessage = params.statusMessage || 'Sort by %heading% (%direction%)';
-    this.ascendingText = params.ascendingText || 'ascending';
-    this.descendingText = params.descendingText || 'descending';
+    this.$head.addEventListener('click', this.onSortButtonClick.bind(this));
   }
   createHeadingButtons() {
-    for (const heading of this.headings) {
-      if (heading.hasAttribute('aria-sort')) {
-        this.createHeadingButton(heading);
+    for (const $heading of this.$headings) {
+      if ($heading.hasAttribute('aria-sort')) {
+        this.createHeadingButton($heading);
       }
     }
   }
-  createHeadingButton(heading) {
-    const index = this.headings.indexOf(heading);
-    const button = document.createElement('button');
-    button.setAttribute('type', 'button');
-    button.setAttribute('data-index', `${index}`);
-    button.textContent = heading.textContent;
-    heading.textContent = '';
-    heading.appendChild(button);
+
+  /**
+   * @param {HTMLTableCellElement} $heading
+   */
+  createHeadingButton($heading) {
+    const index = this.$headings.indexOf($heading);
+    const $button = document.createElement('button');
+    $button.setAttribute('type', 'button');
+    $button.setAttribute('data-index', `${index}`);
+    $button.textContent = $heading.textContent;
+    $heading.textContent = '';
+    $heading.appendChild($button);
   }
   createStatusBox() {
-    this.status = document.createElement('div');
-    this.status.setAttribute('aria-atomic', 'true');
-    this.status.setAttribute('aria-live', 'polite');
-    this.status.setAttribute('class', 'govuk-visually-hidden');
-    this.status.setAttribute('role', 'status');
-    this.table.insertAdjacentElement('afterend', this.status);
+    this.$status = document.createElement('div');
+    this.$status.setAttribute('aria-atomic', 'true');
+    this.$status.setAttribute('aria-live', 'polite');
+    this.$status.setAttribute('class', 'govuk-visually-hidden');
+    this.$status.setAttribute('role', 'status');
+    this.$root.insertAdjacentElement('afterend', this.$status);
   }
   initialiseSortedColumn() {
-    var _sortButton$getAttrib;
-    const rows = this.getTableRowsArray();
-    const heading = this.table.querySelector('th[aria-sort]');
-    const sortButton = heading == null ? void 0 : heading.querySelector('button');
-    const sortDirection = heading == null ? void 0 : heading.getAttribute('aria-sort');
-    const columnNumber = Number.parseInt((_sortButton$getAttrib = sortButton == null ? void 0 : sortButton.getAttribute('data-index')) != null ? _sortButton$getAttrib : '0', 10);
-    if (!heading || !sortButton || !(sortDirection === 'ascending' || sortDirection === 'descending')) {
+    var _$sortButton$getAttri;
+    const $rows = this.getTableRowsArray();
+    const $heading = this.$root.querySelector('th[aria-sort="ascending"], th[aria-sort="descending"]');
+    const $sortButton = $heading == null ? void 0 : $heading.querySelector('button');
+    const sortDirection = $heading == null ? void 0 : $heading.getAttribute('aria-sort');
+    const columnNumber = Number.parseInt((_$sortButton$getAttri = $sortButton == null ? void 0 : $sortButton.getAttribute('data-index')) != null ? _$sortButton$getAttri : '0', 10);
+    if (!$heading || !$sortButton || !(sortDirection === 'ascending' || sortDirection === 'descending')) {
       return;
     }
-    const sortedRows = this.sort(rows, columnNumber, sortDirection);
-    this.addRows(sortedRows);
+    const $sortedRows = this.sort($rows, columnNumber, sortDirection);
+    this.addRows($sortedRows);
   }
+
+  /**
+   * @param {MouseEvent} event - Click event
+   */
   onSortButtonClick(event) {
-    var _button$getAttribute;
-    const button = event.target;
-    if (!button || !(button instanceof HTMLButtonElement) || !button.parentElement) {
+    var _$button$getAttribute;
+    const $target = /** @type {HTMLElement} */event.target;
+    const $button = $target.closest('button');
+    if (!$button || !($button instanceof HTMLButtonElement) || !$button.parentElement) {
       return;
     }
-    const heading = button.parentElement;
-    const sortDirection = heading.getAttribute('aria-sort');
-    const columnNumber = Number.parseInt((_button$getAttribute = button == null ? void 0 : button.getAttribute('data-index')) != null ? _button$getAttribute : '0', 10);
+    const $heading = $button.parentElement;
+    const sortDirection = $heading.getAttribute('aria-sort');
+    const columnNumber = Number.parseInt((_$button$getAttribute = $button == null ? void 0 : $button.getAttribute('data-index')) != null ? _$button$getAttribute : '0', 10);
     const newSortDirection = sortDirection === 'none' || sortDirection === 'descending' ? 'ascending' : 'descending';
-    const rows = this.getTableRowsArray();
-    const sortedRows = this.sort(rows, columnNumber, newSortDirection);
-    this.addRows(sortedRows);
+    const $rows = this.getTableRowsArray();
+    const $sortedRows = this.sort($rows, columnNumber, newSortDirection);
+    this.addRows($sortedRows);
     this.removeButtonStates();
-    this.updateButtonState(button, newSortDirection);
+    this.updateButtonState($button, newSortDirection);
+    this.updateDirectionIndicators();
+  }
+  updateCaption() {
+    if (!this.$caption) {
+      return;
+    }
+    let assistiveText = this.$caption.querySelector('.govuk-visually-hidden');
+    if (assistiveText) {
+      return;
+    }
+    assistiveText = document.createElement('span');
+    assistiveText.classList.add('govuk-visually-hidden');
+    assistiveText.textContent = ' (column headers with buttons are sortable).';
+    this.$caption.appendChild(assistiveText);
   }
-  updateButtonState(button, direction) {
+
+  /**
+   * @param {HTMLButtonElement} $button
+   * @param {string} direction
+   */
+  updateButtonState($button, direction) {
     if (!(direction === 'ascending' || direction === 'descending')) {
       return;
     }
-    button.parentElement.setAttribute('aria-sort', direction);
-    let message = this.statusMessage;
-    message = message.replace(/%heading%/, button.textContent);
-    message = message.replace(/%direction%/, this[`${direction}Text`]);
-    this.status.textContent = message;
+    $button.parentElement.setAttribute('aria-sort', direction);
+    let message = this.config.statusMessage;
+    message = message.replace(/%heading%/, $button.textContent);
+    message = message.replace(/%direction%/, this.config[`${direction}Text`]);
+    this.$status.textContent = message;
+  }
+  updateDirectionIndicators() {
+    for (const $heading of this.$headings) {
+      const $button = /** @type {HTMLButtonElement} */
+      $heading.querySelector('button');
+      if ($heading.hasAttribute('aria-sort') && $button) {
+        var _$button$querySelecto;
+        const direction = $heading.getAttribute('aria-sort');
+        (_$button$querySelecto = $button.querySelector('svg')) == null || _$button$querySelecto.remove();
+        switch (direction) {
+          case 'ascending':
+            $button.insertAdjacentHTML('beforeend', this.$upArrow);
+            break;
+          case 'descending':
+            $button.insertAdjacentHTML('beforeend', this.$downArrow);
+            break;
+          default:
+            $button.insertAdjacentHTML('beforeend', this.$upDownArrow);
+        }
+      }
+    }
   }
   removeButtonStates() {
-    for (const heading of this.headings) {
-      heading.setAttribute('aria-sort', 'none');
+    for (const $heading of this.$headings) {
+      $heading.setAttribute('aria-sort', 'none');
     }
   }
-  addRows(rows) {
-    for (const row of rows) {
-      this.body.append(row);
+
+  /**
+   * @param {HTMLTableRowElement[]} $rows
+   */
+  addRows($rows) {
+    for (const $row of $rows) {
+      this.$body.append($row);
     }
   }
   getTableRowsArray() {
-    return Array.from(this.body.querySelectorAll('tr'));
+    return Array.from(this.$body.querySelectorAll('tr'));
   }
-  sort(rows, columnNumber, sortDirection) {
-    return rows.sort((rowA, rowB) => {
-      const tdA = rowA.querySelectorAll('td, th')[columnNumber];
-      const tdB = rowB.querySelectorAll('td, th')[columnNumber];
-      if (!tdA || !tdB || !(tdA instanceof HTMLElement) || !(tdB instanceof HTMLElement)) {
+
+  /**
+   * @param {HTMLTableRowElement[]} $rows
+   * @param {number} columnNumber
+   * @param {string} sortDirection
+   */
+  sort($rows, columnNumber, sortDirection) {
+    return $rows.sort(($rowA, $rowB) => {
+      const $tdA = $rowA.querySelectorAll('td, th')[columnNumber];
+      const $tdB = $rowB.querySelectorAll('td, th')[columnNumber];
+      if (!$tdA || !$tdB || !($tdA instanceof HTMLElement) || !($tdB instanceof HTMLElement)) {
         return 0;
       }
-      const valueA = sortDirection === 'ascending' ? this.getCellValue(tdA) : this.getCellValue(tdB);
-      const valueB = sortDirection === 'ascending' ? this.getCellValue(tdB) : this.getCellValue(tdA);
+      const valueA = sortDirection === 'ascending' ? this.getCellValue($tdA) : this.getCellValue($tdB);
+      const valueB = sortDirection === 'ascending' ? this.getCellValue($tdB) : this.getCellValue($tdA);
       return !(typeof valueA === 'number' && typeof valueB === 'number') ? valueA.toString().localeCompare(valueB.toString()) : valueA - valueB;
     });
   }
-  getCellValue(cell) {
-    const val = cell.getAttribute('data-sort-value') || cell.innerHTML;
+
+  /**
+   * @param {HTMLElement} $cell
+   */
+  getCellValue($cell) {
+    const val = $cell.getAttribute('data-sort-value') || $cell.innerHTML;
     const valAsNumber = Number(val);
     return Number.isFinite(valAsNumber) ? valAsNumber // Exclude invalid numbers, infinity etc
     : val;
   }
+
+  /**
+   * Name for the component used when initialising using data-module attributes.
+   */
 }
 
+/**
+ * Sortable table config
+ *
+ * @typedef {object} SortableTableConfig
+ * @property {string} [statusMessage] - Status message
+ * @property {string} [ascendingText] - Ascending text
+ * @property {string} [descendingText] - Descending text
+ */
+
+/**
+ * @import { Schema } from 'govuk-frontend/dist/govuk/common/configuration.mjs'
+ */
+SortableTable.moduleName = 'moj-sortable-table';
+/**
+ * Sortable table config
+ *
+ * @type {SortableTableConfig}
+ */
+SortableTable.defaults = Object.freeze({
+  statusMessage: 'Sort by %heading% (%direction%)',
+  ascendingText: 'ascending',
+  descendingText: 'descending'
+});
+/**
+ * Sortable table config schema
+ *
+ * @satisfies {Schema<SortableTableConfig>}
+ */
+SortableTable.schema = Object.freeze(/** @type {const} */{
+  properties: {
+    statusMessage: {
+      type: 'string'
+    },
+    ascendingText: {
+      type: 'string'
+    },
+    descendingText: {
+      type: 'string'
+    }
+  }
+});
+
 export { SortableTable };
 //# sourceMappingURL=sortable-table.bundle.mjs.map