@ministryofjustice/frontend 4.0.0 → 5.0.0

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

@@ -1,139 +1,126 @@
-function SortableTable(params) {
-  this.table = $(params.table);
-
-  if (this.table.data('moj-search-toggle-initialised')) {
-    return
+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;
+    }
+    this.table = table;
+    this.head = head;
+    this.body = body;
+    if (this.table.hasAttribute('data-moj-sortable-table-init')) {
+      return this;
+    }
+    this.table.setAttribute('data-moj-sortable-table-init', '');
+    this.headings = this.head ? Array.from(this.head.querySelectorAll('th')) : [];
+    this.setupOptions(params);
+    this.createHeadingButtons();
+    this.createStatusBox();
+    this.initialiseSortedColumn();
+    this.head.addEventListener('click', this.onSortButtonClick.bind(this));
   }
-
-  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);
+  setupOptions(params) {
+    params = params || {};
+    this.statusMessage = params.statusMessage || 'Sort by %heading% (%direction%)';
+    this.ascendingText = params.ascendingText || 'ascending';
+    this.descendingText = params.descendingText || 'descending';
+  }
+  createHeadingButtons() {
+    for (const heading of this.headings) {
+      if (heading.hasAttribute('aria-sort')) {
+        this.createHeadingButton(heading);
+      }
     }
   }
-};
-
-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';
+  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);
   }
-  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]);
+  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);
   }
-};
-
-SortableTable.prototype.getTableRowsArray = function () {
-  const rows = [];
-  const trs = this.body.find('tr');
-  for (let i = 0; i < trs.length; i++) {
-    rows.push(trs[i]);
+  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')) {
+      return;
+    }
+    const sortedRows = this.sort(rows, columnNumber, sortDirection);
+    this.addRows(sortedRows);
   }
-  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
-};
+  onSortButtonClick(event) {
+    var _button$getAttribute;
+    const button = event.target;
+    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 newSortDirection = sortDirection === 'none' || sortDirection === 'descending' ? 'ascending' : 'descending';
+    const rows = this.getTableRowsArray();
+    const sortedRows = this.sort(rows, columnNumber, newSortDirection);
+    this.addRows(sortedRows);
+    this.removeButtonStates();
+    this.updateButtonState(button, newSortDirection);
+  }
+  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;
+  }
+  removeButtonStates() {
+    for (const heading of this.headings) {
+      heading.setAttribute('aria-sort', 'none');
+    }
+  }
+  addRows(rows) {
+    for (const row of rows) {
+      this.body.append(row);
+    }
+  }
+  getTableRowsArray() {
+    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)) {
+        return 0;
+      }
+      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;
+    const valAsNumber = Number(val);
+    return Number.isFinite(valAsNumber) ? valAsNumber // Exclude invalid numbers, infinity etc
+    : val;
+  }
+}
 
 export { SortableTable };
 //# sourceMappingURL=sortable-table.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"sortable-table.mjs","sources":["../../../../src/moj/components/sortable-table/sortable-table.mjs"],"sourcesContent":["import $ from 'jquery'\n\nexport function SortableTable(params) {\n  this.table = $(params.table)\n\n  if (this.table.data('moj-search-toggle-initialised')) {\n    return\n  }\n\n  this.table.data('moj-search-toggle-initialised', true)\n\n  this.setupOptions(params)\n  this.body = this.table.find('tbody')\n  this.createHeadingButtons()\n  this.createStatusBox()\n  this.initialiseSortedColumn()\n  this.table.on('click', 'th button', $.proxy(this, 'onSortButtonClick'))\n}\n\nSortableTable.prototype.setupOptions = function (params) {\n  params = params || {}\n  this.statusMessage = params.statusMessage || 'Sort by %heading% (%direction%)'\n  this.ascendingText = params.ascendingText || 'ascending'\n  this.descendingText = params.descendingText || 'descending'\n}\n\nSortableTable.prototype.createHeadingButtons = function () {\n  const headings = this.table.find('thead th')\n  let heading\n  for (let i = 0; i < headings.length; i++) {\n    heading = $(headings[i])\n    if (heading.attr('aria-sort')) {\n      this.createHeadingButton(heading, i)\n    }\n  }\n}\n\nSortableTable.prototype.createHeadingButton = function (heading, i) {\n  const text = heading.text()\n  const button = $(`<button type=\"button\" data-index=\"${i}\">${text}</button>`)\n  heading.text('')\n  heading.append(button)\n}\n\nSortableTable.prototype.createStatusBox = function () {\n  this.status = $(\n    '<div aria-live=\"polite\" role=\"status\" aria-atomic=\"true\" class=\"govuk-visually-hidden\" />'\n  )\n  this.table.parent().append(this.status)\n}\n\nSortableTable.prototype.initialiseSortedColumn = function () {\n  const rows = this.getTableRowsArray()\n\n  this.table\n    .find('th')\n    .filter('[aria-sort=\"ascending\"], [aria-sort=\"descending\"]')\n    .first()\n    .each((index, el) => {\n      const sortDirection = $(el).attr('aria-sort')\n      const columnNumber = $(el).find('button').attr('data-index')\n      const sortedRows = this.sort(rows, columnNumber, sortDirection)\n      this.addRows(sortedRows)\n    })\n}\n\nSortableTable.prototype.onSortButtonClick = function (e) {\n  const columnNumber = e.currentTarget.getAttribute('data-index')\n  const sortDirection = $(e.currentTarget).parent().attr('aria-sort')\n  let newSortDirection\n  if (sortDirection === 'none' || sortDirection === 'descending') {\n    newSortDirection = 'ascending'\n  } else {\n    newSortDirection = 'descending'\n  }\n  const rows = this.getTableRowsArray()\n  const sortedRows = this.sort(rows, columnNumber, newSortDirection)\n  this.addRows(sortedRows)\n  this.removeButtonStates()\n  this.updateButtonState($(e.currentTarget), newSortDirection)\n}\n\nSortableTable.prototype.updateButtonState = function (button, direction) {\n  button.parent().attr('aria-sort', direction)\n  let message = this.statusMessage\n  message = message.replace(/%heading%/, button.text())\n  message = message.replace(/%direction%/, this[`${direction}Text`])\n  this.status.text(message)\n}\n\nSortableTable.prototype.removeButtonStates = function () {\n  this.table.find('thead th').attr('aria-sort', 'none')\n}\n\nSortableTable.prototype.addRows = function (rows) {\n  for (let i = 0; i < rows.length; i++) {\n    this.body.append(rows[i])\n  }\n}\n\nSortableTable.prototype.getTableRowsArray = function () {\n  const rows = []\n  const trs = this.body.find('tr')\n  for (let i = 0; i < trs.length; i++) {\n    rows.push(trs[i])\n  }\n  return rows\n}\n\nSortableTable.prototype.sort = function (rows, columnNumber, sortDirection) {\n  const newRows = rows.sort(\n    function (rowA, rowB) {\n      const tdA = $(rowA).find('td,th').eq(columnNumber)\n      const tdB = $(rowB).find('td,th').eq(columnNumber)\n\n      const valueA =\n        sortDirection === 'ascending'\n          ? this.getCellValue(tdA)\n          : this.getCellValue(tdB)\n      const valueB =\n        sortDirection === 'ascending'\n          ? this.getCellValue(tdB)\n          : this.getCellValue(tdA)\n\n      if (typeof valueA === 'string' || typeof valueB === 'string')\n        return valueA.toString().localeCompare(valueB.toString())\n      return valueA - valueB\n    }.bind(this)\n  )\n  return newRows\n}\n\nSortableTable.prototype.getCellValue = function (cell) {\n  const val = cell.attr('data-sort-value') || cell.html()\n\n  const valAsNumber = Number(val)\n  return isNaN(valAsNumber) ? val : valAsNumber\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"sortable-table.mjs","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":"AAAO,MAAMA,aAAa,CAAC;EACzBC,WAAWA,CAACC,MAAM,EAAE;AAClB,IAAA,MAAMC,KAAK,GAAGD,MAAM,CAACC,KAAK;IAC1B,MAAMC,IAAI,GAAGD,KAAK,IAAA,IAAA,GAAA,MAAA,GAALA,KAAK,CAAEE,aAAa,CAAC,OAAO,CAAC;IAC1C,MAAMC,IAAI,GAAGH,KAAK,IAAA,IAAA,GAAA,MAAA,GAALA,KAAK,CAAEE,aAAa,CAAC,OAAO,CAAC;AAE1C,IAAA,IAAI,CAACF,KAAK,IAAI,EAAEA,KAAK,YAAYI,WAAW,CAAC,IAAI,CAACH,IAAI,IAAI,CAACE,IAAI,EAAE;AAC/D,MAAA,OAAO,IAAI;AACb;IAEA,IAAI,CAACH,KAAK,GAAGA,KAAK;IAClB,IAAI,CAACC,IAAI,GAAGA,IAAI;IAChB,IAAI,CAACE,IAAI,GAAGA,IAAI;IAEhB,IAAI,IAAI,CAACH,KAAK,CAACK,YAAY,CAAC,8BAA8B,CAAC,EAAE;AAC3D,MAAA,OAAO,IAAI;AACb;IAEA,IAAI,CAACL,KAAK,CAACM,YAAY,CAAC,8BAA8B,EAAE,EAAE,CAAC;IAE3D,IAAI,CAACC,QAAQ,GAAG,IAAI,CAACN,IAAI,GACrBO,KAAK,CAACC,IAAI,CAAC,IAAI,CAACR,IAAI,CAACS,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAC5C,EAAE;AAEN,IAAA,IAAI,CAACC,YAAY,CAACZ,MAAM,CAAC;IACzB,IAAI,CAACa,oBAAoB,EAAE;IAC3B,IAAI,CAACC,eAAe,EAAE;IACtB,IAAI,CAACC,sBAAsB,EAAE;AAE7B,IAAA,IAAI,CAACb,IAAI,CAACc,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAACC,iBAAiB,CAACC,IAAI,CAAC,IAAI,CAAC,CAAC;AACxE;EAEAN,YAAYA,CAACZ,MAAM,EAAE;AACnBA,IAAAA,MAAM,GAAGA,MAAM,IAAI,EAAE;AACrB,IAAA,IAAI,CAACmB,aAAa,GAChBnB,MAAM,CAACmB,aAAa,IAAI,iCAAiC;AAC3D,IAAA,IAAI,CAACC,aAAa,GAAGpB,MAAM,CAACoB,aAAa,IAAI,WAAW;AACxD,IAAA,IAAI,CAACC,cAAc,GAAGrB,MAAM,CAACqB,cAAc,IAAI,YAAY;AAC7D;AAEAR,EAAAA,oBAAoBA,GAAG;AACrB,IAAA,KAAK,MAAMS,OAAO,IAAI,IAAI,CAACd,QAAQ,EAAE;AACnC,MAAA,IAAIc,OAAO,CAAChB,YAAY,CAAC,WAAW,CAAC,EAAE;AACrC,QAAA,IAAI,CAACiB,mBAAmB,CAACD,OAAO,CAAC;AACnC;AACF;AACF;EAEAC,mBAAmBA,CAACD,OAAO,EAAE;IAC3B,MAAME,KAAK,GAAG,IAAI,CAAChB,QAAQ,CAACiB,OAAO,CAACH,OAAO,CAAC;AAC5C,IAAA,MAAMI,MAAM,GAAGC,QAAQ,CAACC,aAAa,CAAC,QAAQ,CAAC;AAE/CF,IAAAA,MAAM,CAACnB,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC;IACrCmB,MAAM,CAACnB,YAAY,CAAC,YAAY,EAAE,CAAGiB,EAAAA,KAAK,EAAE,CAAC;AAC7CE,IAAAA,MAAM,CAACG,WAAW,GAAGP,OAAO,CAACO,WAAW;IAExCP,OAAO,CAACO,WAAW,GAAG,EAAE;AACxBP,IAAAA,OAAO,CAACQ,WAAW,CAACJ,MAAM,CAAC;AAC7B;AAEAZ,EAAAA,eAAeA,GAAG;IAChB,IAAI,CAACiB,MAAM,GAAGJ,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;IAE3C,IAAI,CAACG,MAAM,CAACxB,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/C,IAAI,CAACwB,MAAM,CAACxB,YAAY,CAAC,WAAW,EAAE,QAAQ,CAAC;IAC/C,IAAI,CAACwB,MAAM,CAACxB,YAAY,CAAC,OAAO,EAAE,uBAAuB,CAAC;IAC1D,IAAI,CAACwB,MAAM,CAACxB,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC;IAE1C,IAAI,CAACN,KAAK,CAAC+B,qBAAqB,CAAC,UAAU,EAAE,IAAI,CAACD,MAAM,CAAC;AAC3D;AAEAhB,EAAAA,sBAAsBA,GAAG;AAAA,IAAA,IAAAkB,qBAAA;AACvB,IAAA,MAAMC,IAAI,GAAG,IAAI,CAACC,iBAAiB,EAAE;IAErC,MAAMb,OAAO,GAAG,IAAI,CAACrB,KAAK,CAACE,aAAa,CAAC,eAAe,CAAC;IACzD,MAAMiC,UAAU,GAAGd,OAAO,IAAA,IAAA,GAAA,MAAA,GAAPA,OAAO,CAAEnB,aAAa,CAAC,QAAQ,CAAC;IACnD,MAAMkC,aAAa,GAAGf,OAAO,IAAA,IAAA,GAAA,MAAA,GAAPA,OAAO,CAAEgB,YAAY,CAAC,WAAW,CAAC;IACxD,MAAMC,YAAY,GAAGC,MAAM,CAACC,QAAQ,CAAAR,CAAAA,qBAAA,GAClCG,UAAU,IAAVA,IAAAA,GAAAA,MAAAA,GAAAA,UAAU,CAAEE,YAAY,CAAC,YAAY,CAAC,KAAA,IAAA,GAAAL,qBAAA,GAAI,GAAG,EAC7C,EACF,CAAC;AAED,IAAA,IACE,CAACX,OAAO,IACR,CAACc,UAAU,IACX,EAAEC,aAAa,KAAK,WAAW,IAAIA,aAAa,KAAK,YAAY,CAAC,EAClE;AACA,MAAA;AACF;IAEA,MAAMK,UAAU,GAAG,IAAI,CAACC,IAAI,CAACT,IAAI,EAAEK,YAAY,EAAEF,aAAa,CAAC;AAC/D,IAAA,IAAI,CAACO,OAAO,CAACF,UAAU,CAAC;AAC1B;EAEAzB,iBAAiBA,CAAC4B,KAAK,EAAE;AAAA,IAAA,IAAAC,oBAAA;AACvB,IAAA,MAAMpB,MAAM,GAAGmB,KAAK,CAACE,MAAM;AAE3B,IAAA,IACE,CAACrB,MAAM,IACP,EAAEA,MAAM,YAAYsB,iBAAiB,CAAC,IACtC,CAACtB,MAAM,CAACuB,aAAa,EACrB;AACA,MAAA;AACF;AAEA,IAAA,MAAM3B,OAAO,GAAGI,MAAM,CAACuB,aAAa;AACpC,IAAA,MAAMZ,aAAa,GAAGf,OAAO,CAACgB,YAAY,CAAC,WAAW,CAAC;IACvD,MAAMC,YAAY,GAAGC,MAAM,CAACC,QAAQ,CAAAK,CAAAA,oBAAA,GAClCpB,MAAM,IAANA,IAAAA,GAAAA,MAAAA,GAAAA,MAAM,CAAEY,YAAY,CAAC,YAAY,CAAC,KAAA,IAAA,GAAAQ,oBAAA,GAAI,GAAG,EACzC,EACF,CAAC;AAED,IAAA,MAAMI,gBAAgB,GACpBb,aAAa,KAAK,MAAM,IAAIA,aAAa,KAAK,YAAY,GACtD,WAAW,GACX,YAAY;AAElB,IAAA,MAAMH,IAAI,GAAG,IAAI,CAACC,iBAAiB,EAAE;IACrC,MAAMO,UAAU,GAAG,IAAI,CAACC,IAAI,CAACT,IAAI,EAAEK,YAAY,EAAEW,gBAAgB,CAAC;AAElE,IAAA,IAAI,CAACN,OAAO,CAACF,UAAU,CAAC;IACxB,IAAI,CAACS,kBAAkB,EAAE;AACzB,IAAA,IAAI,CAACC,iBAAiB,CAAC1B,MAAM,EAAEwB,gBAAgB,CAAC;AAClD;AAEAE,EAAAA,iBAAiBA,CAAC1B,MAAM,EAAE2B,SAAS,EAAE;IACnC,IAAI,EAAEA,SAAS,KAAK,WAAW,IAAIA,SAAS,KAAK,YAAY,CAAC,EAAE;AAC9D,MAAA;AACF;IAEA3B,MAAM,CAACuB,aAAa,CAAC1C,YAAY,CAAC,WAAW,EAAE8C,SAAS,CAAC;AACzD,IAAA,IAAIC,OAAO,GAAG,IAAI,CAACnC,aAAa;IAChCmC,OAAO,GAAGA,OAAO,CAACC,OAAO,CAAC,WAAW,EAAE7B,MAAM,CAACG,WAAW,CAAC;AAC1DyB,IAAAA,OAAO,GAAGA,OAAO,CAACC,OAAO,CAAC,aAAa,EAAE,IAAI,CAAC,CAAA,EAAGF,SAAS,CAAA,IAAA,CAAM,CAAC,CAAC;AAClE,IAAA,IAAI,CAACtB,MAAM,CAACF,WAAW,GAAGyB,OAAO;AACnC;AAEAH,EAAAA,kBAAkBA,GAAG;AACnB,IAAA,KAAK,MAAM7B,OAAO,IAAI,IAAI,CAACd,QAAQ,EAAE;AACnCc,MAAAA,OAAO,CAACf,YAAY,CAAC,WAAW,EAAE,MAAM,CAAC;AAC3C;AACF;EAEAqC,OAAOA,CAACV,IAAI,EAAE;AACZ,IAAA,KAAK,MAAMsB,GAAG,IAAItB,IAAI,EAAE;AACtB,MAAA,IAAI,CAAC9B,IAAI,CAACqD,MAAM,CAACD,GAAG,CAAC;AACvB;AACF;AAEArB,EAAAA,iBAAiBA,GAAG;AAClB,IAAA,OAAO1B,KAAK,CAACC,IAAI,CAAC,IAAI,CAACN,IAAI,CAACO,gBAAgB,CAAC,IAAI,CAAC,CAAC;AACrD;AAEAgC,EAAAA,IAAIA,CAACT,IAAI,EAAEK,YAAY,EAAEF,aAAa,EAAE;IACtC,OAAOH,IAAI,CAACS,IAAI,CAAC,CAACe,IAAI,EAAEC,IAAI,KAAK;MAC/B,MAAMC,GAAG,GAAGF,IAAI,CAAC/C,gBAAgB,CAAC,QAAQ,CAAC,CAAC4B,YAAY,CAAC;MACzD,MAAMsB,GAAG,GAAGF,IAAI,CAAChD,gBAAgB,CAAC,QAAQ,CAAC,CAAC4B,YAAY,CAAC;AAEzD,MAAA,IACE,CAACqB,GAAG,IACJ,CAACC,GAAG,IACJ,EAAED,GAAG,YAAYvD,WAAW,CAAC,IAC7B,EAAEwD,GAAG,YAAYxD,WAAW,CAAC,EAC7B;AACA,QAAA,OAAO,CAAC;AACV;AAEA,MAAA,MAAMyD,MAAM,GACVzB,aAAa,KAAK,WAAW,GACzB,IAAI,CAAC0B,YAAY,CAACH,GAAG,CAAC,GACtB,IAAI,CAACG,YAAY,CAACF,GAAG,CAAC;AAE5B,MAAA,MAAMG,MAAM,GACV3B,aAAa,KAAK,WAAW,GACzB,IAAI,CAAC0B,YAAY,CAACF,GAAG,CAAC,GACtB,IAAI,CAACE,YAAY,CAACH,GAAG,CAAC;AAE5B,MAAA,OAAO,EAAE,OAAOE,MAAM,KAAK,QAAQ,IAAI,OAAOE,MAAM,KAAK,QAAQ,CAAC,GAC9DF,MAAM,CAACG,QAAQ,EAAE,CAACC,aAAa,CAACF,MAAM,CAACC,QAAQ,EAAE,CAAC,GAClDH,MAAM,GAAGE,MAAM;AACrB,KAAC,CAAC;AACJ;EAEAD,YAAYA,CAACI,IAAI,EAAE;IACjB,MAAMC,GAAG,GAAGD,IAAI,CAAC7B,YAAY,CAAC,iBAAiB,CAAC,IAAI6B,IAAI,CAACE,SAAS;AAClE,IAAA,MAAMC,WAAW,GAAG9B,MAAM,CAAC4B,GAAG,CAAC;IAE/B,OAAO5B,MAAM,CAAC+B,QAAQ,CAACD,WAAW,CAAC,GAC/BA,WAAW;AAAC,MACZF,GAAG;AACT;AACF;;;;"}

package/moj/components/sub-navigation/_sub-navigation.scss

@@ -119,3 +119,5 @@
     background-color: govuk-colour("black");
   }
 }
+
+/*# sourceMappingURL=_sub-navigation.scss.map */

package/moj/components/sub-navigation/_sub-navigation.scss.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/moj/components/sub-navigation/_sub-navigation.scss"],"names":[],"mappings":"AAAA,uCAAuC;;AAEvC;;+EAE+E;;AAE/E;EACE,+BAA+B;AACjC;;AAEA;EACE,SAAS;EACT,UAAU;EACV,YAAY,EAAE,+DAA+D;EAC7E,gBAAgB;;EAEhB;IACE,WAAW;IACX,+CAA+C;EACjD;AACF;;AAEA;EACE,cAAc;EACd,gBAAgB;EAChB,+CAA+C;EAC/C,uBAAuB;;EAEvB;IACE,gBAAgB;EAClB;;EAEA;IACE,qBAAqB;IACrB,aAAa;IACb,8BAA8B;IAC9B,gBAAgB;EAClB;AACF;;AAEA;EACE,cAAc;EACd,kBAAkB;EAClB,iBAAiB;EACjB,oBAAoB;EACpB,8BAA8B;EAC9B,0BAA0B;EAC1B,iCAAiC;;EAEjC;IACE,eAAe;EACjB;;EAEA;;;;IAIE,qBAAqB;EACvB;;EAEA;;IAEE,yBAAyB;EAC3B;;EAEA;IACE,+BAA+B;EACjC;;EAEA;IACE,kBAAkB,EAAE,0CAA0C;IAC9D,4BAA4B,EAAE,gDAAgD;IAC9E,gBAAgB;EAClB;;EAEA;IACE,WAAW;IACX,cAAc;IACd,kBAAkB;IAClB,SAAS;IACT,OAAO;IACP,UAAU;IACV,YAAY;IACZ,uCAAuC;;IAEvC;MACE,WAAW;MACX,WAAW;IACb;EACF;AACF;;AAEA;EACE,kBAAkB;EAClB,gCAAgC;EAChC,qBAAqB;;EAErB;IACE,WAAW;IACX,cAAc;IACd,kBAAkB;IAClB,SAAS;IACT,OAAO;IACP,UAAU;IACV,YAAY;IACZ,oCAAoC;;IAEpC;MACE,WAAW;MACX,WAAW;IACb;EACF;;EAEA;IACE,+BAA+B;EACjC;;EAEA;IACE,uCAAuC;EACzC;AACF","file":"_sub-navigation.scss","sourcesContent":["@use \"../../vendor/govuk-frontend\" as *;\n\n/* ==========================================================================\n   #SECONDARY NAV\n   ========================================================================== */\n\n.moj-sub-navigation {\n  margin-bottom: govuk-spacing(7);\n}\n\n.moj-sub-navigation__list {\n  margin: 0;\n  padding: 0;\n  font-size: 0; // Removes white space when using inline-block on child element.\n  list-style: none;\n\n  @include govuk-media-query($from: tablet) {\n    width: 100%;\n    box-shadow: inset 0 -1px 0 $govuk-border-colour;\n  }\n}\n\n.moj-sub-navigation__item {\n  display: block;\n  margin-top: -1px;\n  box-shadow: inset 0 -1px 0 $govuk-border-colour;\n  @include govuk-font(19);\n\n  &:last-child {\n    box-shadow: none;\n  }\n\n  @include govuk-media-query($from: tablet) {\n    display: inline-block;\n    margin-top: 0;\n    margin-right: govuk-spacing(4);\n    box-shadow: none;\n  }\n}\n\n.moj-sub-navigation__link {\n  display: block;\n  position: relative;\n  padding-top: 12px;\n  padding-bottom: 12px;\n  padding-left: govuk-spacing(3);\n  @include govuk-link-common;\n  @include govuk-link-style-default;\n\n  @include govuk-media-query($from: tablet) {\n    padding-left: 0;\n  }\n\n  &:link,\n  &:visited,\n  &:hover,\n  &:active {\n    text-decoration: none;\n  }\n\n  &:link,\n  &:visited {\n    color: $govuk-link-colour;\n  }\n\n  &:hover {\n    color: $govuk-link-hover-colour;\n  }\n\n  &:focus {\n    position: relative; // Ensure focus sits above everything else.\n    color: govuk-colour(\"black\"); // Focus colour on yellow should really be black.\n    box-shadow: none;\n  }\n\n  &:focus::before {\n    content: \"\";\n    display: block;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 5px;\n    height: 100%;\n    background-color: govuk-colour(\"black\");\n\n    @include govuk-media-query($from: tablet) {\n      width: 100%;\n      height: 5px;\n    }\n  }\n}\n\n.moj-sub-navigation__link[aria-current=\"page\"] {\n  position: relative;\n  color: $govuk-link-active-colour;\n  text-decoration: none;\n\n  &::before {\n    content: \"\";\n    display: block;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 5px;\n    height: 100%;\n    background-color: $govuk-link-colour;\n\n    @include govuk-media-query($from: tablet) {\n      width: 100%;\n      height: 5px;\n    }\n  }\n\n  &:hover {\n    color: $govuk-link-hover-colour;\n  }\n\n  &:focus::before {\n    background-color: govuk-colour(\"black\");\n  }\n}\n"]}

package/moj/components/tag/_tag.scss

@@ -54,3 +54,5 @@
     background-color: govuk-colour("dark-grey");
   }
 }
+
+/*# sourceMappingURL=_tag.scss.map */

package/moj/components/tag/_tag.scss.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/moj/components/tag/_tag.scss"],"names":[],"mappings":"AAAA,uCAAuC;;AAEvC;;+EAE+E;;AAE/E;EACE,qCAAqC;EACrC,4BAA4B;EAC5B,qCAAqC;;EAErC;IACE,wCAAwC;IACxC,4BAA4B;IAC5B,wCAAwC;EAC1C;;EAEA;IACE,+CAA+C;IAC/C,4BAA4B;IAC5B,+CAA+C;EACjD;;EAEA;;IAEE,qCAAqC;IACrC,4BAA4B;IAC5B,qCAAqC;EACvC;;EAEA;;IAEE,uCAAuC;IACvC,4BAA4B;IAC5B,uCAAuC;EACzC;;EAEA;;IAEE,sCAAsC;IACtC,4BAA4B;IAC5B,sCAAsC;EACxC;;EAEA;IACE,uCAAuC;IACvC,4BAA4B;IAC5B,uCAAuC;EACzC;;EAEA;IACE,2CAA2C;IAC3C,4BAA4B;IAC5B,2CAA2C;EAC7C;AACF","file":"_tag.scss","sourcesContent":["@use \"../../vendor/govuk-frontend\" as *;\n\n/* ==========================================================================\n   #TAG\n   ========================================================================== */\n\n.moj-tag {\n  border: 2px solid $govuk-brand-colour;\n  color: govuk-colour(\"white\");\n  background-color: $govuk-brand-colour;\n\n  &--purple {\n    border: 2px solid govuk-colour(\"purple\");\n    color: govuk-colour(\"white\");\n    background-color: govuk-colour(\"purple\");\n  }\n\n  &--bright-purple {\n    border: 2px solid govuk-colour(\"bright-purple\");\n    color: govuk-colour(\"white\");\n    background-color: govuk-colour(\"bright-purple\");\n  }\n\n  &--red,\n  &--error {\n    border: 2px solid govuk-colour(\"red\");\n    color: govuk-colour(\"white\");\n    background-color: govuk-colour(\"red\");\n  }\n\n  &--green,\n  &--success {\n    border: 2px solid govuk-colour(\"green\");\n    color: govuk-colour(\"white\");\n    background-color: govuk-colour(\"green\");\n  }\n\n  &--blue,\n  &--information {\n    border: 2px solid govuk-colour(\"blue\");\n    color: govuk-colour(\"white\");\n    background-color: govuk-colour(\"blue\");\n  }\n\n  &--black {\n    border: 2px solid govuk-colour(\"black\");\n    color: govuk-colour(\"white\");\n    background-color: govuk-colour(\"black\");\n  }\n\n  &--grey {\n    border: 2px solid govuk-colour(\"dark-grey\");\n    color: govuk-colour(\"white\");\n    background-color: govuk-colour(\"dark-grey\");\n  }\n}\n"]}

package/moj/components/task-list/_task-list.scss

@@ -69,3 +69,5 @@
     float: right;
   }
 }
+
+/*# sourceMappingURL=_task-list.scss.map */

package/moj/components/task-list/_task-list.scss.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/moj/components/task-list/_task-list.scss"],"names":[],"mappings":"AAAA,uCAAuC;;AAEvC;;+EAE+E;;AAE/E;EACE,aAAa;EACb,gBAAgB;EAChB,eAAe;EACf,qBAAqB;EACrB;IACE,gBAAgB;EAClB;AACF;;AAEA;EACE,cAAc;EACd,6CAA6C;AAC/C;;AAEA;EACE,mBAAmB;;EAEnB;IACE,2BAA2B;IAC3B,gBAAgB;EAClB;AACF;;AAEA;EACE,eAAe;EACf,gBAAgB;EAChB,8BAA8B;EAC9B,6CAA6C;EAC7C;IACE,8BAA8B;EAChC;AACF;;AAEA;EACE,sDAAsD;EACtD,2BAA2B;EAC3B,6BAA6B;EAC7B,gCAAgC;EAChC,6CAA6C;EAC7C,uBAAuB;AACzB;;AAEA;EACE,0CAA0C;AAC5C;;AAEA;EACE,cAAc;EACd;IACE,UAAU;IACV,WAAW;EACb;AACF;;AAEA;EACE,4BAA4B;EAC5B,+BAA+B;;EAE/B;IACE,aAAa;IACb,gBAAgB;IAChB,YAAY;EACd;AACF","file":"_task-list.scss","sourcesContent":["@use \"../../vendor/govuk-frontend\" as *;\n\n/* ==========================================================================\n   #TASK LIST\n   ========================================================================== */\n\n.moj-task-list {\n  margin-top: 0;\n  margin-bottom: 0;\n  padding-left: 0;\n  list-style-type: none;\n  @include govuk-media-query($from: tablet) {\n    min-width: 550px;\n  }\n}\n\n.moj-task-list__section {\n  display: table;\n  @include govuk-font($size: 24, $weight: bold);\n}\n\n.moj-task-list__section-number {\n  display: table-cell;\n\n  @include govuk-media-query($from: tablet) {\n    min-width: govuk-spacing(6);\n    padding-right: 0;\n  }\n}\n\n.moj-task-list__items {\n  padding-left: 0;\n  list-style: none;\n  @include govuk-font($size: 19);\n  @include govuk-responsive-margin(9, \"bottom\");\n  @include govuk-media-query($from: tablet) {\n    padding-left: govuk-spacing(6);\n  }\n}\n\n.moj-task-list__item {\n  // stylelint-disable-next-line declaration-no-important\n  margin-bottom: 0 !important;\n  padding-top: govuk-spacing(2);\n  padding-bottom: govuk-spacing(2);\n  border-bottom: 1px solid $govuk-border-colour;\n  @include govuk-clearfix;\n}\n\n.moj-task-list__item:first-child {\n  border-top: 1px solid $govuk-border-colour;\n}\n\n.moj-task-list__task-name {\n  display: block;\n  @include govuk-media-query($from: 450px) {\n    width: 75%;\n    float: left;\n  }\n}\n\n.moj-task-list__task-completed {\n  margin-top: govuk-spacing(2);\n  margin-bottom: govuk-spacing(1);\n\n  @include govuk-media-query($from: 450px) {\n    margin-top: 0;\n    margin-bottom: 0;\n    float: right;\n  }\n}\n"]}

package/moj/components/ticket-panel/_ticket-panel.scss

@@ -64,3 +64,5 @@
     }
   }
 }
+
+/*# sourceMappingURL=_ticket-panel.scss.map */

package/moj/components/ticket-panel/_ticket-panel.scss.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/moj/components/ticket-panel/_ticket-panel.scss"],"names":[],"mappings":"AAAA,uCAAuC;;AAEvC;;+EAE+E;;AAE/E;EACE,cAAc;EACd,8BAA8B;EAC9B,eAAe;;EAEf;IACE;MACE,aAAa;MACb,iBAAiB;IACnB;EACF;;EAEA;IACE;MACE,6BAA6B;IAC/B;EACF;;EAEA;IACE,+BAA+B;EACjC;;EAEA;IACE,cAAc;IACd,kBAAkB;IAClB,+BAA+B;IAC/B,yBAAyB;IACzB,kCAAkC;IAClC,4CAA4C;IAC5C,YAAY;;IAEZ;MACE,uCAAuC;IACzC;;IAEA;MACE,uCAAuC;IACzC;;IAEA;MACE,sCAAsC;IACxC;;IAEA;MACE,yCAAyC;IAC3C;;IAEA;MACE,wCAAwC;IAC1C;;IAEA;MACE,yCAAyC;IAC3C;;IAEA;MACE,yCAAyC;IAC3C;EACF;AACF","file":"_ticket-panel.scss","sourcesContent":["@use \"../../vendor/govuk-frontend\" as *;\n\n/* ==========================================================================\n   #TICKET PANEL\n   ========================================================================== */\n\n.moj-ticket-panel {\n  display: block;\n  margin-right: govuk-spacing(0);\n  flex-wrap: wrap;\n\n  &--inline {\n    @include govuk-media-query($from: desktop) {\n      display: flex;\n      flex-wrap: nowrap;\n    }\n  }\n\n  &--inline > * + * {\n    @include govuk-media-query($from: desktop) {\n      margin-left: govuk-spacing(3);\n    }\n  }\n\n  &__content *:last-child {\n    margin-bottom: govuk-spacing(0);\n  }\n\n  &__content {\n    display: block;\n    position: relative;\n    margin-bottom: govuk-spacing(3);\n    padding: govuk-spacing(4);\n    border-left: 4px solid transparent;\n    background-color: govuk-colour(\"light-grey\");\n    flex-grow: 1;\n\n    &--grey {\n      border-left-color: $govuk-border-colour;\n    }\n\n    &--blue {\n      border-left-color: govuk-colour(\"blue\");\n    }\n\n    &--red {\n      border-left-color: govuk-colour(\"red\");\n    }\n\n    &--yellow {\n      border-left-color: govuk-colour(\"yellow\");\n    }\n\n    &--green {\n      border-left-color: govuk-colour(\"green\");\n    }\n\n    &--purple {\n      border-left-color: govuk-colour(\"purple\");\n    }\n\n    &--orange {\n      border-left-color: govuk-colour(\"orange\");\n    }\n  }\n}\n"]}

package/moj/components/timeline/_timeline.scss

@@ -108,3 +108,5 @@
     color: govuk-colour("black"); // Focus colour on yellow should really be black.
   }
 }
+
+/*# sourceMappingURL=_timeline.scss.map */

package/moj/components/timeline/_timeline.scss.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/moj/components/timeline/_timeline.scss"],"names":[],"mappings":"AAAA,iCAAiC;AACjC,uCAAuC;;AAEvC;;+EAE+E;;AAE/E;EACE,kBAAkB;EAClB,+BAA+B;EAC/B,gBAAgB;;EAEhB;IACE,WAAW;IACX,kBAAkB;IAClB,qBAAqB;IACrB,OAAO;IACP,UAAU;IACV,YAAY;IACZ,qCAAqC;EACvC;AACF;;AAEA;EACE,gBAAgB;;EAEhB;IACE,yBAAyB;EAC3B;AACF;;AAEA;EACE,kBAAkB;EAClB,gCAAgC;EAChC,8BAA8B;;EAE9B;IACE,WAAW;IACX,kBAAkB;IAClB,qBAAqB;IACrB,OAAO;IACP,WAAW;IACX,WAAW;IACX,qCAAqC;EACvC;AACF;;AAEA;EACE,eAAe;EACf,6CAA6C;AAC/C;;AAEA;EACE,eAAe;EACf,SAAS;EACT,mCAAmC;EACnC,8BAA8B;AAChC;;AAEA;EACE,4BAA4B;EAC5B,gBAAgB;EAChB,8BAA8B;AAChC;;AAEA;EACE,4BAA4B;EAC5B,8BAA8B;AAChC;;AAEA;;+EAE+E;;AAE/E;EACE,gBAAgB;EAChB,eAAe;EACf,gBAAgB;AAClB;;AAEA;EACE,+BAA+B;;EAE/B;IACE,gBAAgB;EAClB;AACF;;AAEA;EACE,eAAe;EACf,iBAAiB;EACjB,WAAW;EACX,kBAAkB;;EAElB;IACE,cAAc;EAChB;AACF;;AAEA;EACE,8BAA8B;EAC9B,2DAA2D;EAC3D,4BAA4B;EAC5B,0BAA0B;EAC1B,0BAA0B;;EAE1B;IACE,4BAA4B,EAAE,gDAAgD;EAChF;AACF","file":"_timeline.scss","sourcesContent":["@use \"../../settings/assets\" as *;\n@use \"../../vendor/govuk-frontend\" as *;\n\n/* ==========================================================================\n   #TIMELINE\n   ========================================================================== */\n\n.moj-timeline {\n  position: relative;\n  margin-bottom: govuk-spacing(4);\n  overflow: hidden;\n\n  &::before {\n    content: \"\";\n    position: absolute;\n    top: govuk-spacing(2);\n    left: 0;\n    width: 5px;\n    height: 100%;\n    background-color: $govuk-brand-colour;\n  }\n}\n\n.moj-timeline--full {\n  margin-bottom: 0;\n\n  &::before {\n    height: calc(100% - 75px);\n  }\n}\n\n.moj-timeline__item {\n  position: relative;\n  padding-bottom: govuk-spacing(6);\n  padding-left: govuk-spacing(4);\n\n  &::before {\n    content: \"\";\n    position: absolute;\n    top: govuk-spacing(2);\n    left: 0;\n    width: 15px;\n    height: 5px;\n    background-color: $govuk-brand-colour;\n  }\n}\n\n.moj-timeline__title {\n  display: inline;\n  @include govuk-font($size: 19, $weight: bold);\n}\n\n.moj-timeline__byline {\n  display: inline;\n  margin: 0;\n  color: $govuk-secondary-text-colour;\n  @include govuk-font($size: 19);\n}\n\n.moj-timeline__date {\n  margin-top: govuk-spacing(1);\n  margin-bottom: 0;\n  @include govuk-font($size: 16);\n}\n\n.moj-timeline__description {\n  margin-top: govuk-spacing(4);\n  @include govuk-font($size: 19);\n}\n\n/* ==========================================================================\n   #TIMELINE DOCUMENT STYLES – FOR BACKWARDS COMPATIBILITY\n   ========================================================================== */\n\n.moj-timeline__documents {\n  margin-bottom: 0;\n  padding-left: 0;\n  list-style: none;\n}\n\n.moj-timeline__document-item {\n  margin-bottom: govuk-spacing(1);\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n}\n\n.moj-timeline__document-icon {\n  margin-top: 4px;\n  margin-right: 4px;\n  float: left;\n  fill: currentcolor;\n\n  @media screen and (forced-colors: active) {\n    fill: linkText;\n  }\n}\n\n.moj-timeline__document-link {\n  padding-left: govuk-spacing(5);\n  background-image: url(#{$moj-images-path}icon-document.svg);\n  background-repeat: no-repeat;\n  background-position: 0 50%;\n  background-size: 20px 16px;\n\n  &:focus {\n    color: govuk-colour(\"black\"); // Focus colour on yellow should really be black.\n  }\n}\n"]}

package/moj/filters/all.js

@@ -2,34 +2,41 @@ const moment = require('moment')
 
 module.exports = function () {
   /**
-   * Instantiate object used to store the methods registered as a
-   * 'filter' (of the same name) within nunjucks. You can override
-   * gov.uk core filters by creating filter methods of the same name.
+   * Date filter for use in Nunjucks
+   * Outputs: 01/01/1970
    *
-   * @type {object}
+   * @example
+   * ```njk
+   * {{ params.date | date("DD/MM/YYYY") }}
+   * ```
+   * @param {MomentInput} timestamp
+   * @param {string} format
    */
-  const filters = {}
-
-  /* ------------------------------------------------------------------
-    date filter for use in Nunjucks
-    example: {{ params.date | date("DD/MM/YYYY") }}
-    outputs: 01/01/1970
-  ------------------------------------------------------------------ */
-  filters.date = function (timestamp, format) {
+  function date(timestamp, format) {
     return moment(timestamp).format(format)
   }
 
   /* ------------------------------------------------------------------
     utility functions for use in mojDate function/filter
   ------------------------------------------------------------------ */
+
+  /**
+   * @param {MomentInput} timestamp
+   */
   function govDate(timestamp) {
     return moment(timestamp).format('D MMMM YYYY')
   }
 
+  /**
+   * @param {MomentInput} timestamp
+   */
   function govShortDate(timestamp) {
     return moment(timestamp).format('D MMM YYYY')
   }
 
+  /**
+   * @param {MomentInput} timestamp
+   */
   function govTime(timestamp) {
     const t = moment(timestamp)
     if (t.minutes() > 0) {
@@ -38,12 +45,18 @@ module.exports = function () {
     return t.format('ha')
   }
 
-  /* ------------------------------------------------------------------
-    standard dates for use in Nunjucks,
-    example: {{ params.date | mojDate("datetime") }}
-    outputs: 1 Jan 1970 at 1:32pm
-  ------------------------------------------------------------------ */
-  filters.mojDate = function (timestamp, type) {
+  /**
+   * Standard dates for use in Nunjucks
+   * Outputs: 1 Jan 1970 at 1:32pm
+   *
+   * @example
+   * ```njk
+   * {{ params.date | mojDate("datetime") }}
+   * ```
+   * @param {MomentInput} timestamp
+   * @param {'datetime' | 'shortdatetime' | 'date' | 'shortdate' | 'time'} [type]
+   */
+  function mojDate(timestamp, type) {
     switch (type) {
       case 'datetime':
         return `${govDate(timestamp)} at ${govTime(timestamp)}`
@@ -60,8 +73,17 @@ module.exports = function () {
     }
   }
 
-  /* ------------------------------------------------------------------
-    keep the following line to return your filters to the app
-  ------------------------------------------------------------------ */
-  return filters
+  /**
+   * Returns an object used to store the methods registered as a
+   * 'filter' (of the same name) within nunjucks. You can override
+   * gov.uk core filters by creating filter methods of the same name.
+   */
+  return {
+    date,
+    mojDate
+  }
 }
+
+/**
+ * @import { MomentInput } from 'moment'
+ */

package/moj/helpers/_all.scss

@@ -1,2 +1,4 @@
 @forward "hidden";
 @forward "links";
+
+/*# sourceMappingURL=_all.scss.map */

package/moj/helpers/_all.scss.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/moj/helpers/_all.scss"],"names":[],"mappings":"AAAA,iBAAiB;AACjB,gBAAgB","file":"_all.scss","sourcesContent":["@forward \"hidden\";\n@forward \"links\";\n"]}

package/moj/helpers/_hidden.scss

@@ -1,3 +1,5 @@
 @mixin moj-hidden() {
   display: none;
 }
+
+/*# sourceMappingURL=_hidden.scss.map */

package/moj/helpers/_hidden.scss.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/moj/helpers/_hidden.scss"],"names":[],"mappings":"AAAA;EACE,aAAa;AACf","file":"_hidden.scss","sourcesContent":["@mixin moj-hidden() {\n  display: none;\n}\n"]}

package/moj/helpers/_links.scss

@@ -20,3 +20,5 @@
     color: $govuk-focus-text-colour;
   }
 }
+
+/*# sourceMappingURL=_links.scss.map */

package/moj/helpers/_links.scss.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/moj/helpers/_links.scss"],"names":[],"mappings":"AAAA,iBAAiB;AACjB,+BAA+B;AAC/B,oCAAoC;;AAEpC;EACE;;IAEE,+BAA+B;EACjC;;EAEA;IACE,8DAA8D;EAChE;;EAEA;IACE,0BAA0B;EAC5B;;EAEA;IACE,+BAA+B;EACjC;AACF","file":"_links.scss","sourcesContent":["@use \"sass:color\";\n@use \"../settings/colours\" as *;\n@use \"../vendor/govuk-frontend\" as *;\n\n@mixin moj-link-style-warning {\n  &:link,\n  &:visited {\n    color: $moj-warning-link-colour;\n  }\n\n  &:hover {\n    color: color.scale($moj-warning-link-colour, $lightness: -30%);\n  }\n\n  &:active {\n    color: $moj-warning-colour;\n  }\n\n  &:focus {\n    color: $govuk-focus-text-colour;\n  }\n}\n"]}