@ministryofjustice/frontend 3.5.0 → 3.6.1

package/moj/components/search-toggle/search-toggle.mjs

@@ -0,0 +1,54 @@
+function SearchToggle(options) {
+  this.options = options;
+  this.container = window.jQuery(this.options.search.container);
+  this.toggleButtonContainer = window.jQuery(this.options.toggleButton.container);
+
+  if (this.container.data('moj-search-toggle-initialised')) {
+    return
+  }
+
+  this.container.data('moj-search-toggle-initialised', true);
+
+  const svg =
+    '<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="moj-search-toggle__button__icon"><path d="M7.433,12.5790048 C6.06762625,12.5808611 4.75763941,12.0392925 3.79217348,11.0738265 C2.82670755,10.1083606 2.28513891,8.79837375 2.28699522,7.433 C2.28513891,6.06762625 2.82670755,4.75763941 3.79217348,3.79217348 C4.75763941,2.82670755 6.06762625,2.28513891 7.433,2.28699522 C8.79837375,2.28513891 10.1083606,2.82670755 11.0738265,3.79217348 C12.0392925,4.75763941 12.5808611,6.06762625 12.5790048,7.433 C12.5808611,8.79837375 12.0392925,10.1083606 11.0738265,11.0738265 C10.1083606,12.0392925 8.79837375,12.5808611 7.433,12.5790048 L7.433,12.5790048 Z M14.293,12.579 L13.391,12.579 L13.071,12.269 C14.2300759,10.9245158 14.8671539,9.20813198 14.866,7.433 C14.866,3.32786745 11.5381325,-1.65045755e-15 7.433,-1.65045755e-15 C3.32786745,-1.65045755e-15 -1.65045755e-15,3.32786745 -1.65045755e-15,7.433 C-1.65045755e-15,11.5381325 3.32786745,14.866 7.433,14.866 C9.208604,14.8671159 10.9253982,14.2296624 12.27,13.07 L12.579,13.39 L12.579,14.294 L18.296,20 L20,18.296 L14.294,12.579 L14.293,12.579 Z"></path></svg>';
+
+  this.toggleButton = window.jQuery(
+    `<button class="moj-search-toggle__button" type="button" aria-haspopup="true" aria-expanded="false">
+      ${this.options.toggleButton.text} ${svg}
+    </button>`
+  );
+  this.toggleButton.on('click', window.jQuery.proxy(this, 'onToggleButtonClick'));
+  this.toggleButtonContainer.append(this.toggleButton);
+  window.jQuery(document).on('click', this.onDocumentClick.bind(this));
+  window.jQuery(document).on('focusin', this.onDocumentClick.bind(this));
+}
+
+SearchToggle.prototype.showMenu = function () {
+  this.toggleButton.attr('aria-expanded', 'true');
+  this.container.removeClass('moj-js-hidden');
+  this.container.find('input').first().get(0).focus();
+};
+
+SearchToggle.prototype.hideMenu = function () {
+  this.container.addClass('moj-js-hidden');
+  this.toggleButton.attr('aria-expanded', 'false');
+};
+
+SearchToggle.prototype.onToggleButtonClick = function () {
+  if (this.toggleButton.attr('aria-expanded') === 'false') {
+    this.showMenu();
+  } else {
+    this.hideMenu();
+  }
+};
+
+SearchToggle.prototype.onDocumentClick = function (e) {
+  if (
+    !window.jQuery.contains(this.toggleButtonContainer[0], e.target) &&
+    !window.jQuery.contains(this.container[0], e.target)
+  ) {
+    this.hideMenu();
+  }
+};
+
+export { SearchToggle };

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

@@ -1,167 +1,146 @@
 (function (global, factory) {
-	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-	typeof define === 'function' && define.amd ? define(factory) :
-	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.MOJFrontend = factory());
-})(this, (function () { 'use strict';
-
-	function getDefaultExportFromCjs (x) {
-		return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-	}
-
-	var _global_window_jQuery = window.jQuery;
-
-	var sortableTable$1;
-	var hasRequiredSortableTable;
-
-	function requireSortableTable () {
-		if (hasRequiredSortableTable) return sortableTable$1;
-		hasRequiredSortableTable = 1;
-		const $ = _global_window_jQuery;
-
-		function SortableTable(params) {
-		  this.table = $(params.table);
-
-		  if (this.table.data('moj-search-toggle-initialised')) {
-		    return
-		  }
-
-		  this.table.data('moj-search-toggle-initialised', true);
-
-		  this.setupOptions(params);
-		  this.body = this.table.find('tbody');
-		  this.createHeadingButtons();
-		  this.createStatusBox();
-		  this.initialiseSortedColumn();
-		  this.table.on('click', 'th button', $.proxy(this, 'onSortButtonClick'));
-		}
-
-		SortableTable.prototype.setupOptions = function (params) {
-		  params = params || {};
-		  this.statusMessage = params.statusMessage || 'Sort by %heading% (%direction%)';
-		  this.ascendingText = params.ascendingText || 'ascending';
-		  this.descendingText = params.descendingText || 'descending';
-		};
-
-		SortableTable.prototype.createHeadingButtons = function () {
-		  const headings = this.table.find('thead th');
-		  let heading;
-		  for (let i = 0; i < headings.length; i++) {
-		    heading = $(headings[i]);
-		    if (heading.attr('aria-sort')) {
-		      this.createHeadingButton(heading, i);
-		    }
-		  }
-		};
-
-		SortableTable.prototype.createHeadingButton = function (heading, i) {
-		  const text = heading.text();
-		  const button = $(`<button type="button" data-index="${i}">${text}</button>`);
-		  heading.text('');
-		  heading.append(button);
-		};
-
-		SortableTable.prototype.createStatusBox = function () {
-		  this.status = $(
-		    '<div aria-live="polite" role="status" aria-atomic="true" class="govuk-visually-hidden" />'
-		  );
-		  this.table.parent().append(this.status);
-		};
-
-		SortableTable.prototype.initialiseSortedColumn = function () {
-		  const rows = this.getTableRowsArray();
-
-		  this.table
-		    .find('th')
-		    .filter('[aria-sort="ascending"], [aria-sort="descending"]')
-		    .first()
-		    .each((index, el) => {
-		      const sortDirection = $(el).attr('aria-sort');
-		      const columnNumber = $(el).find('button').attr('data-index');
-		      const sortedRows = this.sort(rows, columnNumber, sortDirection);
-		      this.addRows(sortedRows);
-		    });
-		};
-
-		SortableTable.prototype.onSortButtonClick = function (e) {
-		  const columnNumber = e.currentTarget.getAttribute('data-index');
-		  const sortDirection = $(e.currentTarget).parent().attr('aria-sort');
-		  let newSortDirection;
-		  if (sortDirection === 'none' || sortDirection === 'descending') {
-		    newSortDirection = 'ascending';
-		  } else {
-		    newSortDirection = 'descending';
-		  }
-		  const rows = this.getTableRowsArray();
-		  const sortedRows = this.sort(rows, columnNumber, newSortDirection);
-		  this.addRows(sortedRows);
-		  this.removeButtonStates();
-		  this.updateButtonState($(e.currentTarget), newSortDirection);
-		};
-
-		SortableTable.prototype.updateButtonState = function (button, direction) {
-		  button.parent().attr('aria-sort', direction);
-		  let message = this.statusMessage;
-		  message = message.replace(/%heading%/, button.text());
-		  message = message.replace(/%direction%/, this[`${direction}Text`]);
-		  this.status.text(message);
-		};
-
-		SortableTable.prototype.removeButtonStates = function () {
-		  this.table.find('thead th').attr('aria-sort', 'none');
-		};
-
-		SortableTable.prototype.addRows = function (rows) {
-		  for (let i = 0; i < rows.length; i++) {
-		    this.body.append(rows[i]);
-		  }
-		};
-
-		SortableTable.prototype.getTableRowsArray = function () {
-		  const rows = [];
-		  const trs = this.body.find('tr');
-		  for (let i = 0; i < trs.length; i++) {
-		    rows.push(trs[i]);
-		  }
-		  return rows
-		};
-
-		SortableTable.prototype.sort = function (rows, columnNumber, sortDirection) {
-		  const newRows = rows.sort(
-		    function (rowA, rowB) {
-		      const tdA = $(rowA).find('td,th').eq(columnNumber);
-		      const tdB = $(rowB).find('td,th').eq(columnNumber);
-
-		      const valueA =
-		        sortDirection === 'ascending'
-		          ? this.getCellValue(tdA)
-		          : this.getCellValue(tdB);
-		      const valueB =
-		        sortDirection === 'ascending'
-		          ? this.getCellValue(tdB)
-		          : this.getCellValue(tdA);
-
-		      if (typeof valueA === 'string' || typeof valueB === 'string')
-		        return valueA.toString().localeCompare(valueB.toString())
-		      return valueA - valueB
-		    }.bind(this)
-		  );
-		  return newRows
-		};
-
-		SortableTable.prototype.getCellValue = function (cell) {
-		  const val = cell.attr('data-sort-value') || cell.html();
-
-		  const valAsNumber = Number(val);
-		  return isNaN(valAsNumber) ? val : valAsNumber
-		};
-
-		sortableTable$1 = { SortableTable };
-		return sortableTable$1;
-	}
-
-	var sortableTableExports = requireSortableTable();
-	var sortableTable = /*@__PURE__*/getDefaultExportFromCjs(sortableTableExports);
-
-	return sortableTable;
+  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';
+
+  function SortableTable(params) {
+    this.table = window.jQuery(params.table);
+
+    if (this.table.data('moj-search-toggle-initialised')) {
+      return
+    }
+
+    this.table.data('moj-search-toggle-initialised', true);
+
+    this.setupOptions(params);
+    this.body = this.table.find('tbody');
+    this.createHeadingButtons();
+    this.createStatusBox();
+    this.initialiseSortedColumn();
+    this.table.on('click', 'th button', window.jQuery.proxy(this, 'onSortButtonClick'));
+  }
+
+  SortableTable.prototype.setupOptions = function (params) {
+    params = params || {};
+    this.statusMessage = params.statusMessage || 'Sort by %heading% (%direction%)';
+    this.ascendingText = params.ascendingText || 'ascending';
+    this.descendingText = params.descendingText || 'descending';
+  };
+
+  SortableTable.prototype.createHeadingButtons = function () {
+    const headings = this.table.find('thead th');
+    let heading;
+    for (let i = 0; i < headings.length; i++) {
+      heading = window.jQuery(headings[i]);
+      if (heading.attr('aria-sort')) {
+        this.createHeadingButton(heading, i);
+      }
+    }
+  };
+
+  SortableTable.prototype.createHeadingButton = function (heading, i) {
+    const text = heading.text();
+    const button = window.jQuery(`<button type="button" data-index="${i}">${text}</button>`);
+    heading.text('');
+    heading.append(button);
+  };
+
+  SortableTable.prototype.createStatusBox = function () {
+    this.status = window.jQuery(
+      '<div aria-live="polite" role="status" aria-atomic="true" class="govuk-visually-hidden" />'
+    );
+    this.table.parent().append(this.status);
+  };
+
+  SortableTable.prototype.initialiseSortedColumn = function () {
+    const rows = this.getTableRowsArray();
+
+    this.table
+      .find('th')
+      .filter('[aria-sort="ascending"], [aria-sort="descending"]')
+      .first()
+      .each((index, el) => {
+        const sortDirection = window.jQuery(el).attr('aria-sort');
+        const columnNumber = window.jQuery(el).find('button').attr('data-index');
+        const sortedRows = this.sort(rows, columnNumber, sortDirection);
+        this.addRows(sortedRows);
+      });
+  };
+
+  SortableTable.prototype.onSortButtonClick = function (e) {
+    const columnNumber = e.currentTarget.getAttribute('data-index');
+    const sortDirection = window.jQuery(e.currentTarget).parent().attr('aria-sort');
+    let newSortDirection;
+    if (sortDirection === 'none' || sortDirection === 'descending') {
+      newSortDirection = 'ascending';
+    } else {
+      newSortDirection = 'descending';
+    }
+    const rows = this.getTableRowsArray();
+    const sortedRows = this.sort(rows, columnNumber, newSortDirection);
+    this.addRows(sortedRows);
+    this.removeButtonStates();
+    this.updateButtonState(window.jQuery(e.currentTarget), newSortDirection);
+  };
+
+  SortableTable.prototype.updateButtonState = function (button, direction) {
+    button.parent().attr('aria-sort', direction);
+    let message = this.statusMessage;
+    message = message.replace(/%heading%/, button.text());
+    message = message.replace(/%direction%/, this[`${direction}Text`]);
+    this.status.text(message);
+  };
+
+  SortableTable.prototype.removeButtonStates = function () {
+    this.table.find('thead th').attr('aria-sort', 'none');
+  };
+
+  SortableTable.prototype.addRows = function (rows) {
+    for (let i = 0; i < rows.length; i++) {
+      this.body.append(rows[i]);
+    }
+  };
+
+  SortableTable.prototype.getTableRowsArray = function () {
+    const rows = [];
+    const trs = this.body.find('tr');
+    for (let i = 0; i < trs.length; i++) {
+      rows.push(trs[i]);
+    }
+    return rows
+  };
+
+  SortableTable.prototype.sort = function (rows, columnNumber, sortDirection) {
+    const newRows = rows.sort(
+      function (rowA, rowB) {
+        const tdA = window.jQuery(rowA).find('td,th').eq(columnNumber);
+        const tdB = window.jQuery(rowB).find('td,th').eq(columnNumber);
+
+        const valueA =
+          sortDirection === 'ascending'
+            ? this.getCellValue(tdA)
+            : this.getCellValue(tdB);
+        const valueB =
+          sortDirection === 'ascending'
+            ? this.getCellValue(tdB)
+            : this.getCellValue(tdA);
+
+        if (typeof valueA === 'string' || typeof valueB === 'string')
+          return valueA.toString().localeCompare(valueB.toString())
+        return valueA - valueB
+      }.bind(this)
+    );
+    return newRows
+  };
+
+  SortableTable.prototype.getCellValue = function (cell) {
+    const val = cell.attr('data-sort-value') || cell.html();
+
+    const valAsNumber = Number(val);
+    return isNaN(valAsNumber) ? val : valAsNumber
+  };
+
+  exports.SortableTable = SortableTable;
 
 }));

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

@@ -0,0 +1,138 @@
+function SortableTable(params) {
+  this.table = window.jQuery(params.table);
+
+  if (this.table.data('moj-search-toggle-initialised')) {
+    return
+  }
+
+  this.table.data('moj-search-toggle-initialised', true);
+
+  this.setupOptions(params);
+  this.body = this.table.find('tbody');
+  this.createHeadingButtons();
+  this.createStatusBox();
+  this.initialiseSortedColumn();
+  this.table.on('click', 'th button', window.jQuery.proxy(this, 'onSortButtonClick'));
+}
+
+SortableTable.prototype.setupOptions = function (params) {
+  params = params || {};
+  this.statusMessage = params.statusMessage || 'Sort by %heading% (%direction%)';
+  this.ascendingText = params.ascendingText || 'ascending';
+  this.descendingText = params.descendingText || 'descending';
+};
+
+SortableTable.prototype.createHeadingButtons = function () {
+  const headings = this.table.find('thead th');
+  let heading;
+  for (let i = 0; i < headings.length; i++) {
+    heading = window.jQuery(headings[i]);
+    if (heading.attr('aria-sort')) {
+      this.createHeadingButton(heading, i);
+    }
+  }
+};
+
+SortableTable.prototype.createHeadingButton = function (heading, i) {
+  const text = heading.text();
+  const button = window.jQuery(`<button type="button" data-index="${i}">${text}</button>`);
+  heading.text('');
+  heading.append(button);
+};
+
+SortableTable.prototype.createStatusBox = function () {
+  this.status = window.jQuery(
+    '<div aria-live="polite" role="status" aria-atomic="true" class="govuk-visually-hidden" />'
+  );
+  this.table.parent().append(this.status);
+};
+
+SortableTable.prototype.initialiseSortedColumn = function () {
+  const rows = this.getTableRowsArray();
+
+  this.table
+    .find('th')
+    .filter('[aria-sort="ascending"], [aria-sort="descending"]')
+    .first()
+    .each((index, el) => {
+      const sortDirection = window.jQuery(el).attr('aria-sort');
+      const columnNumber = window.jQuery(el).find('button').attr('data-index');
+      const sortedRows = this.sort(rows, columnNumber, sortDirection);
+      this.addRows(sortedRows);
+    });
+};
+
+SortableTable.prototype.onSortButtonClick = function (e) {
+  const columnNumber = e.currentTarget.getAttribute('data-index');
+  const sortDirection = window.jQuery(e.currentTarget).parent().attr('aria-sort');
+  let newSortDirection;
+  if (sortDirection === 'none' || sortDirection === 'descending') {
+    newSortDirection = 'ascending';
+  } else {
+    newSortDirection = 'descending';
+  }
+  const rows = this.getTableRowsArray();
+  const sortedRows = this.sort(rows, columnNumber, newSortDirection);
+  this.addRows(sortedRows);
+  this.removeButtonStates();
+  this.updateButtonState(window.jQuery(e.currentTarget), newSortDirection);
+};
+
+SortableTable.prototype.updateButtonState = function (button, direction) {
+  button.parent().attr('aria-sort', direction);
+  let message = this.statusMessage;
+  message = message.replace(/%heading%/, button.text());
+  message = message.replace(/%direction%/, this[`${direction}Text`]);
+  this.status.text(message);
+};
+
+SortableTable.prototype.removeButtonStates = function () {
+  this.table.find('thead th').attr('aria-sort', 'none');
+};
+
+SortableTable.prototype.addRows = function (rows) {
+  for (let i = 0; i < rows.length; i++) {
+    this.body.append(rows[i]);
+  }
+};
+
+SortableTable.prototype.getTableRowsArray = function () {
+  const rows = [];
+  const trs = this.body.find('tr');
+  for (let i = 0; i < trs.length; i++) {
+    rows.push(trs[i]);
+  }
+  return rows
+};
+
+SortableTable.prototype.sort = function (rows, columnNumber, sortDirection) {
+  const newRows = rows.sort(
+    function (rowA, rowB) {
+      const tdA = window.jQuery(rowA).find('td,th').eq(columnNumber);
+      const tdB = window.jQuery(rowB).find('td,th').eq(columnNumber);
+
+      const valueA =
+        sortDirection === 'ascending'
+          ? this.getCellValue(tdA)
+          : this.getCellValue(tdB);
+      const valueB =
+        sortDirection === 'ascending'
+          ? this.getCellValue(tdB)
+          : this.getCellValue(tdA);
+
+      if (typeof valueA === 'string' || typeof valueB === 'string')
+        return valueA.toString().localeCompare(valueB.toString())
+      return valueA - valueB
+    }.bind(this)
+  );
+  return newRows
+};
+
+SortableTable.prototype.getCellValue = function (cell) {
+  const val = cell.attr('data-sort-value') || cell.html();
+
+  const valAsNumber = Number(val);
+  return isNaN(valAsNumber) ? val : valAsNumber
+};
+
+export { SortableTable };