@ministryofjustice/hmpps-digital-prison-reporting-frontend 9.2.0 → 9.2.2

package/all.bundle.js

@@ -54,31 +54,6 @@ class DprClientClass {
     }
 }
 
-class CardGroup extends DprClientClass {
-    static getModuleName() {
-        return 'card-group';
-    }
-    initialise() {
-        const cards = this.getElement().querySelectorAll('[data-click-navigate-to]');
-        const wrapperClass = 'card-loading';
-        cards.forEach(card => {
-            card.addEventListener('click', () => {
-                card.classList.add(wrapperClass);
-                cards.forEach(c => {
-                    if (!c.classList.contains('card-loading')) {
-                        const disabledClass = 'card-disabled';
-                        c.classList.add(disabledClass);
-                    }
-                });
-                const url = card.dataset['clickNavigateTo'];
-                if (url) {
-                    window.location.href = url;
-                }
-            });
-        });
-    }
-}
-
 var BookmarkAction;
 (function (BookmarkAction) {
     BookmarkAction["ADD"] = "add";
@@ -182,6 +157,31 @@ class BookmarkButton extends DprClientClass {
     }
 }
 
+class CardGroup extends DprClientClass {
+    static getModuleName() {
+        return 'card-group';
+    }
+    initialise() {
+        const cards = this.getElement().querySelectorAll('[data-click-navigate-to]');
+        const wrapperClass = 'card-loading';
+        cards.forEach(card => {
+            card.addEventListener('click', () => {
+                card.classList.add(wrapperClass);
+                cards.forEach(c => {
+                    if (!c.classList.contains('card-loading')) {
+                        const disabledClass = 'card-disabled';
+                        c.classList.add(disabledClass);
+                    }
+                });
+                const url = card.dataset['clickNavigateTo'];
+                if (url) {
+                    window.location.href = url;
+                }
+            });
+        });
+    }
+}
+
 class dprTruncate extends DprClientClass {
     static getModuleName() {
         return 'dpr-truncate';
@@ -215,27 +215,6 @@ class dprTruncate extends DprClientClass {
     }
 }
 
-class Pagination {
-    pageSizeSelect;
-    static getModuleName() {
-        return 'pagination';
-    }
-    initialise() {
-        this.pageSizeSelect = document.getElementById('page-size-select');
-        this.initPageSizeSelectEvent();
-    }
-    initPageSizeSelectEvent() {
-        this.pageSizeSelect.addEventListener('change', () => {
-            const { name, value } = this.pageSizeSelect;
-            const queryParams = new URLSearchParams(window.location.search);
-            queryParams.set(name, value);
-            queryParams.set('selectedPage', '1');
-            window.history.replaceState(null, '', `?${queryParams.toString()}`);
-            window.location.reload();
-        });
-    }
-}
-
 class ReportActions extends DprClientClass {
     refreshButton;
     printButton;
@@ -318,8 +297,44 @@ class ReportActions extends DprClientClass {
     }
 }
 
-// @ts-nocheck
+class DownloadMessage extends DprClientClass {
+    downloadMessage;
+    static getModuleName() {
+        return 'download-message';
+    }
+    initialise() {
+        this.downloadMessage = this.getElement();
+        if (window.location.href.includes('download-disabled')) {
+            this.downloadMessage.classList.remove('dpr-download-message--hidden');
+        }
+    }
+}
+
+class Pagination {
+    pageSizeSelect;
+    static getModuleName() {
+        return 'pagination';
+    }
+    initialise() {
+        this.pageSizeSelect = document.getElementById('page-size-select');
+        this.initPageSizeSelectEvent();
+    }
+    initPageSizeSelectEvent() {
+        this.pageSizeSelect.addEventListener('change', () => {
+            const { name, value } = this.pageSizeSelect;
+            const queryParams = new URLSearchParams(window.location.search);
+            queryParams.set(name, value);
+            queryParams.set('selectedPage', '1');
+            window.history.replaceState(null, '', `?${queryParams.toString()}`);
+            window.location.reload();
+        });
+    }
+}
+
 class DataTable extends DprClientClass {
+    tableContainer = null;
+    table = null;
+    gradient = null;
     static getModuleName() {
         return 'data-table';
     }
@@ -336,9 +351,9 @@ class DataTable extends DprClientClass {
         window.addEventListener('resize', () => {
             this.checkOffsetWidths();
         });
-        this.tableContainer.addEventListener('scroll', event => {
-            const endOfScroll = this.table.offsetWidth;
-            const currentScroll = event.target.offsetWidth + event.target.scrollLeft;
+        this.tableContainer?.addEventListener('scroll', event => {
+            const endOfScroll = this.table?.offsetWidth;
+            const currentScroll = event.target?.offsetWidth + event.target.scrollLeft;
             if (endOfScroll === currentScroll) {
                 this.removeGradient();
             }
@@ -347,14 +362,21 @@ class DataTable extends DprClientClass {
             }
         });
     }
-    removeGradient(gradient) {
-        this.gradient.style.display = 'none';
+    removeGradient() {
+        if (this.gradient) {
+            this.gradient.style.display = 'none';
+        }
     }
-    addGradient(gradient) {
-        this.gradient.style.display = 'block';
+    addGradient() {
+        if (this.gradient) {
+            this.gradient.style.display = 'block';
+        }
     }
     checkOffsetWidths() {
-        if (this.tableContainer.offsetWidth >= this.table.offsetWidth) {
+        if (!this.tableContainer || !this.table) {
+            return;
+        }
+        if (this.tableContainer?.offsetWidth >= this.table?.offsetWidth) {
             this.removeGradient();
         }
         else {
@@ -382,142 +404,6 @@ class DataTable extends DprClientClass {
     }
 }
 
-class DownloadMessage extends DprClientClass {
-    downloadMessage;
-    static getModuleName() {
-        return 'download-message';
-    }
-    initialise() {
-        this.downloadMessage = this.getElement();
-        if (window.location.href.includes('download-disabled')) {
-            this.downloadMessage.classList.remove('dpr-download-message--hidden');
-        }
-    }
-}
-
-class DprFiltersFormClass extends DprClientClass {
-    form;
-    static getModuleName() {
-        return 'filters-form';
-    }
-    initialise() {
-        if (!(this.element instanceof HTMLFormElement)) {
-            throw new Error('DprFormQuerySync must be initialised on a form element');
-        }
-        this.form = this.element;
-        this.bindInputEvents();
-    }
-    // ----------------------------------
-    // Events
-    // ----------------------------------
-    bindInputEvents() {
-        this.getAllInputs().forEach(input => {
-            input.addEventListener('change', () => {
-                const params = new URLSearchParams(window.location.search);
-                this.updateQueryFromInput(input, params);
-                this.markPreventDefault(params, input.name); // TODO: Check if this is needed ?
-                this.resetPagination(params); // TODO: Check if this is needed ?
-                this.replaceUrl(params);
-            });
-        });
-    }
-    // ----------------------------------
-    // Query updates
-    // ----------------------------------
-    updateQueryFromInput(input, params) {
-        const { name } = input;
-        if (!name)
-            return;
-        if (input instanceof HTMLInputElement) {
-            if (input.type === 'checkbox') {
-                this.updateCheckbox(params, input);
-            }
-            else if (input.type === 'radio') {
-                this.updateRadio(params, input);
-            }
-            else {
-                this.updateSingle(params, input);
-            }
-        }
-        else {
-            this.updateSingle(params, input);
-        }
-    }
-    updateCheckbox(params, input) {
-        const values = params.getAll(input.name);
-        // Remove all existing values for this key
-        params.delete(input.name);
-        // Re‑add all values except the unchecked one
-        values
-            .filter(value => value !== input.value || input.checked)
-            .forEach(value => {
-            params.append(input.name, value);
-        });
-        // Add the newly checked value
-        if (input.checked && !values.includes(input.value)) {
-            params.append(input.name, input.value);
-        }
-    }
-    updateRadio(params, input) {
-        if (!input.checked)
-            return;
-        const name = this.normaliseFilterName(input.name);
-        params.set(name, input.value);
-    }
-    updateSingle(params, input) {
-        const name = this.normaliseFilterName(input.name);
-        let value = input.value;
-        if (input instanceof HTMLInputElement && input.dataset['staticOptionNameValue']) {
-            value = input.dataset['staticOptionNameValue'];
-        }
-        const isDateInput = input instanceof HTMLInputElement && input.classList.contains('moj-js-datepicker-input');
-        if (isDateInput) {
-            const formatted = dayjs(value, 'D/M/YYYY').format('YYYY-MM-DD');
-            value = formatted !== 'Invalid Date' ? formatted : '';
-        }
-        const trimmed = value.trim();
-        if (trimmed) {
-            params.set(name, trimmed);
-        }
-        else {
-            params.delete(name);
-        }
-    }
-    // ----------------------------------
-    // Behaviour flags
-    // ----------------------------------
-    /**
-     * Signals to the server that defaults
-     */
-    markPreventDefault(params, changedName) {
-        if (changedName !== 'columns') {
-            params.set('preventDefault', 'true');
-        }
-    }
-    /**
-     * Reset pagination when filters change
-     */
-    resetPagination(params) {
-        if (params.has('selectedPage')) {
-            params.set('selectedPage', '1');
-        }
-    }
-    replaceUrl(params) {
-        const query = params.toString();
-        const url = query ? `?${query}` : window.location.pathname;
-        window.history.replaceState(null, '', url);
-    }
-    // ----------------------------------
-    // DOM helpers
-    // ----------------------------------
-    getAllInputs() {
-        return Array.from(this.form.querySelectorAll('input, select, textarea')).filter(el => el.name);
-    }
-    normaliseFilterName(name) {
-        return name.startsWith('label.') ? name.replace(/^label\./, '') : name;
-    }
-}
-
 dayjs.extend(customParse);
 /**
  * --------------------------------------------
@@ -822,12 +708,135 @@ class DprSelectedAsyncFilters extends DprClientClass {
     }
 }
 
-class DprAppliedFilters extends DprClientClass {
+class DprFiltersFormClass extends DprClientClass {
+    form;
     static getModuleName() {
-        return 'dpr-applied-filters';
+        return 'filters-form';
     }
     initialise() {
-        this.bindRemoveEvents();
+        if (!(this.element instanceof HTMLFormElement)) {
+            throw new Error('DprFormQuerySync must be initialised on a form element');
+        }
+        this.form = this.element;
+        this.bindInputEvents();
+    }
+    // ----------------------------------
+    // Events
+    // ----------------------------------
+    bindInputEvents() {
+        this.getAllInputs().forEach(input => {
+            input.addEventListener('change', () => {
+                const params = new URLSearchParams(window.location.search);
+                this.updateQueryFromInput(input, params);
+                this.markPreventDefault(params, input.name); // TODO: Check if this is needed ?
+                this.resetPagination(params); // TODO: Check if this is needed ?
+                this.replaceUrl(params);
+            });
+        });
+    }
+    // ----------------------------------
+    // Query updates
+    // ----------------------------------
+    updateQueryFromInput(input, params) {
+        const { name } = input;
+        if (!name)
+            return;
+        if (input instanceof HTMLInputElement) {
+            if (input.type === 'checkbox') {
+                this.updateCheckbox(params, input);
+            }
+            else if (input.type === 'radio') {
+                this.updateRadio(params, input);
+            }
+            else {
+                this.updateSingle(params, input);
+            }
+        }
+        else {
+            this.updateSingle(params, input);
+        }
+    }
+    updateCheckbox(params, input) {
+        const values = params.getAll(input.name);
+        // Remove all existing values for this key
+        params.delete(input.name);
+        // Re‑add all values except the unchecked one
+        values
+            .filter(value => value !== input.value || input.checked)
+            .forEach(value => {
+            params.append(input.name, value);
+        });
+        // Add the newly checked value
+        if (input.checked && !values.includes(input.value)) {
+            params.append(input.name, input.value);
+        }
+    }
+    updateRadio(params, input) {
+        if (!input.checked)
+            return;
+        const name = this.normaliseFilterName(input.name);
+        params.set(name, input.value);
+    }
+    updateSingle(params, input) {
+        const name = this.normaliseFilterName(input.name);
+        let value = input.value;
+        if (input instanceof HTMLInputElement && input.dataset['staticOptionNameValue']) {
+            value = input.dataset['staticOptionNameValue'];
+        }
+        const isDateInput = input instanceof HTMLInputElement && input.classList.contains('moj-js-datepicker-input');
+        if (isDateInput) {
+            const formatted = dayjs(value, 'D/M/YYYY').format('YYYY-MM-DD');
+            value = formatted !== 'Invalid Date' ? formatted : '';
+        }
+        const trimmed = value.trim();
+        if (trimmed) {
+            params.set(name, trimmed);
+        }
+        else {
+            params.delete(name);
+        }
+    }
+    // ----------------------------------
+    // Behaviour flags
+    // ----------------------------------
+    /**
+     * Signals to the server that defaults
+     */
+    markPreventDefault(params, changedName) {
+        if (changedName !== 'columns') {
+            params.set('preventDefault', 'true');
+        }
+    }
+    /**
+     * Reset pagination when filters change
+     */
+    resetPagination(params) {
+        if (params.has('selectedPage')) {
+            params.set('selectedPage', '1');
+        }
+    }
+    replaceUrl(params) {
+        const query = params.toString();
+        const url = query ? `?${query}` : window.location.pathname;
+        window.history.replaceState(null, '', url);
+    }
+    // ----------------------------------
+    // DOM helpers
+    // ----------------------------------
+    getAllInputs() {
+        return Array.from(this.form.querySelectorAll('input, select, textarea')).filter(el => el.name);
+    }
+    normaliseFilterName(name) {
+        return name.startsWith('label.') ? name.replace(/^label\./, '') : name;
+    }
+}
+
+class DprAppliedFilters extends DprClientClass {
+    static getModuleName() {
+        return 'dpr-applied-filters';
+    }
+    initialise() {
+        this.bindRemoveEvents();
     }
     // ----------------------------------
     // Event binding
@@ -1033,9 +1042,9 @@ class DprReportStatus extends PollingClientClass {
     }
 }
 
-// @ts-nocheck
 /* eslint-disable class-methods-use-this */
 class DprSyncLoading extends DprClientClass {
+    form = null;
     static getModuleName() {
         return 'sync-loading';
     }
@@ -1045,96 +1054,345 @@ class DprSyncLoading extends DprClientClass {
         this.load();
     }
     async load() {
-        this.form.submit();
+        this.form?.submit();
     }
 }
 
-// @ts-nocheck
-class DateInput extends DprClientClass {
+class AutoCompleteMulti extends DprClientClass {
+    filterId;
+    searchInput;
+    searchInputValue;
+    multiselectOptions;
     static getModuleName() {
-        return 'date-input';
+        return 'autocomplete-multiselect-input';
     }
     initialise() {
-        const element = this.getElement();
-        this.dateInput = element.querySelector(`input.moj-js-datepicker-input`);
-        this.setToValueTriggers = document.querySelectorAll(`[data-set-min-max-trigger='true']`);
-        this.required = this.getElement().getAttribute('data-required');
-        this.displayName = this.getElement().getAttribute('data-display-name');
-        this.pattern = this.getElement().getAttribute('data-pattern');
-        this.patternHint = this.getElement().getAttribute('data-pattern-hint');
-        this.min = this.getElement().getAttribute('data-min');
-        this.max = this.getElement().getAttribute('data-max');
-        this.setValidationOnInputEl();
-        this.setMinMaxEventListener();
-        this.setToMinMax();
-        this.setToValue();
+        this.element = this.getElement();
+        this.filterId = this.element.getAttribute('data-filter-id');
+        // Search input
+        this.searchInput = document.getElementById(`search.${this.filterId}`);
+        this.multiselectOptions = Array.from(this.element.querySelectorAll('.govuk-checkboxes__input'));
+        if (!this.searchInput || !this.multiselectOptions)
+            return;
+        this.initialiseCheckboxes();
+        this.initSearchInputAction();
     }
-    setValidationOnInputEl() {
-        if (this.required && this.required === 'true') {
-            this.dateInput.setAttribute('required', true);
-        }
-        if (this.min)
-            this.dateInput.setAttribute('min', this.min);
-        if (this.max)
-            this.dateInput.setAttribute('max', this.max);
-        this.dateInput.setAttribute('display-name', this.displayName);
-        this.dateInput.setAttribute('pattern', this.pattern);
-        this.dateInput.setAttribute('pattern-hint', this.patternHint);
+    initialiseCheckboxes() {
+        this.multiselectOptions.forEach(input => {
+            const wrapper = input.closest('.govuk-checkboxes__item');
+            if (!wrapper)
+                return;
+            wrapper.classList.toggle('dpr-form--hidden', !input.checked);
+        });
     }
-    setMinMaxEventListener() {
-        this.dateInput.addEventListener('blur', () => {
-            this.setToMinMax();
+    initSearchInputAction() {
+        if (!this.searchInput)
+            return;
+        const input = this.searchInput;
+        this.searchInput.addEventListener('keyup', _event => {
+            this.searchInputValue = input.value;
+            this.updateCheckboxes();
         });
     }
-    setToMinMax() {
-        if (this.dateInput.value) {
-            const dateValue = new Date(this.dateInput.value);
-            if (this.min) {
-                const minDate = new Date(this.min);
-                if (dateValue < minDate) {
-                    this.dateInput.value = dayjs(this.min).format('DD/MM/YYYY');
-                }
+    updateCheckboxes() {
+        const query = this.searchInputValue.toLowerCase().trim();
+        const minLength = 3;
+        this.multiselectOptions.forEach(input => {
+            const wrapper = input.closest('.govuk-checkboxes__item');
+            if (!wrapper)
+                return;
+            // Always show selected items
+            if (input.checked) {
+                wrapper.classList.remove('dpr-form--hidden');
+                return;
             }
-            if (this.max) {
-                const maxDate = new Date(this.max);
-                if (dateValue > maxDate) {
-                    this.dateInput.value = dayjs(this.max).format('DD/MM/YYYY');
-                }
+            // Below threshold - hide unselected
+            if (query.length < minLength) {
+                wrapper.classList.add('dpr-form--hidden');
+                return;
             }
-        }
-        const changeEvent = new Event('change');
-        this.dateInput.dispatchEvent(changeEvent);
+            const labelText = input.labels?.[0]?.innerText.toLowerCase() ?? '';
+            const matches = labelText.includes(query);
+            wrapper.classList.toggle('dpr-form--hidden', !matches);
+        });
     }
-    setToValue() {
-        this.setToValueTriggers.forEach(set => {
-            set.addEventListener('click', e => {
+}
+
+/* eslint-disable class-methods-use-this */
+class Autocomplete extends DprClientClass {
+    listItemsSelector;
+    listParentSelector;
+    static getModuleName() {
+        return 'autocomplete-text-input';
+    }
+    constructor(element) {
+        super(element);
+        const listId = this.getTextInput()?.getAttribute('aria-owns');
+        this.listItemsSelector = `#${listId} li`;
+        this.listParentSelector = `#${listId} ul`;
+    }
+    initialise() {
+        const textInput = this.getTextInput();
+        textInput?.addEventListener('keyup', event => {
+            this.onTextInput(event, textInput);
+        });
+        textInput?.addEventListener('keypress', e => {
+            if (e.key === 'Enter') {
+                e.stopPropagation();
                 e.preventDefault();
-                const value = e.target.getAttribute('data-set-min-max-value');
-                const inputId = e.target.getAttribute('data-set-to-input');
-                const input = document.getElementById(inputId);
-                input.value = value;
-                const changeEvent = new Event('change');
-                input.dispatchEvent(changeEvent);
+            }
+        });
+        textInput?.addEventListener('input', () => {
+            if (textInput.value !== '') {
+                return;
+            }
+            const hiddenInput = this.getHiddenInput();
+            if (hiddenInput) {
+                hiddenInput.value = '';
+                hiddenInput.disabled = true;
+            }
+            delete textInput.dataset['staticOptionNameValue'];
+            textInput.dispatchEvent(new Event('change', { bubbles: true }));
+        });
+        this.getElement()
+            .querySelectorAll('.autocomplete-text-input-list-button')
+            .forEach(button => {
+            button.addEventListener('mousedown', event => {
+                this.onOptionClick(event, textInput, this.getElement());
             });
         });
+        this.initialiseDefaultValue(textInput);
+    }
+    initialiseDefaultValue(textInput) {
+        const hiddenInput = this.getHiddenInput();
+        if (hiddenInput?.value) {
+            hiddenInput.disabled = false;
+            return;
+        }
+        if (textInput) {
+            textInput.value = '';
+        }
+        delete textInput?.dataset['staticOptionNameValue'];
+        if (hiddenInput) {
+            hiddenInput.value = '';
+            hiddenInput.disabled = true;
+        }
+    }
+    getTextInput() {
+        return this.getElement().querySelector('.autocomplete-text-input-box');
+    }
+    onTextInput(event, textInput) {
+        const minLength = Number(textInput.dataset['minimumLength']);
+        const { resourceEndpoint } = textInput.dataset;
+        const searchValue = event.target.value.toLowerCase();
+        if (resourceEndpoint) {
+            if (searchValue.length >= minLength) {
+                this.addItem(this.clearListAndRecreateTemplate(), '<i>Searching...</i>');
+                this.populateOptionsDynamically(resourceEndpoint, searchValue, textInput, () => this.clearListAndRecreateTemplate());
+            }
+            else {
+                this.clearListAndRecreateTemplate();
+            }
+        }
+        else {
+            this.getElement()
+                .querySelectorAll(this.listItemsSelector)
+                .forEach(item => {
+                if (searchValue.length >= minLength &&
+                    this.isMatchingStaticOptionNameOrDisplayPrefix(this.getInputListButton(item), searchValue, item)) {
+                    item.classList.remove('autocomplete-text-input-item-hide');
+                }
+                else {
+                    item.classList.add('autocomplete-text-input-item-hide');
+                }
+            });
+        }
+        if (searchValue.length === 0) {
+            const changeEvent = new Event('change');
+            textInput.dispatchEvent(changeEvent);
+        }
+    }
+    getInputListButton(item) {
+        return item.querySelector('.autocomplete-text-input-list-button');
+    }
+    isMatchingStaticOptionNameOrDisplayPrefix(inputListButton, searchValue, item) {
+        return (this.isStaticOptionsNamePrefix(inputListButton?.dataset['staticOptionNameValue'], searchValue) ||
+            item.innerText.trim().toLowerCase().startsWith(searchValue));
+    }
+    isStaticOptionsNamePrefix(staticOptionNameValue, searchValue) {
+        return staticOptionNameValue && staticOptionNameValue.trim().toLowerCase().startsWith(searchValue);
+    }
+    async populateOptionsDynamically(resourceEndpoint, searchValue, textInput, templateProvider) {
+        try {
+            const response = await fetch(resourceEndpoint.replace('{prefix}', encodeURI(searchValue)));
+            const results = await response.json();
+            if (searchValue === textInput?.value.toLowerCase()) {
+                const template = templateProvider();
+                results.forEach((result) => {
+                    this.addItem(template, result, event => {
+                        this.onOptionClick(event, textInput, this.getElement());
+                    });
+                });
+            }
+        }
+        catch (error) {
+            this.addItem(templateProvider(), `Failed to retrieve results: ${error}`);
+        }
+    }
+    onOptionClick(event, textInput, topLevelElement) {
+        event.preventDefault();
+        const button = event.currentTarget?.closest('button');
+        const hiddenInput = this.getHiddenInput();
+        const displayValue = button?.innerText.trim();
+        const actualValue = button?.dataset['staticOptionNameValue'] || '';
+        // UI Display Value
+        if (textInput) {
+            this.setValue(textInput, displayValue);
+            textInput.dataset['staticOptionNameValue'] = actualValue;
+        }
+        // submission value
+        if (hiddenInput) {
+            hiddenInput.value = actualValue;
+            hiddenInput.disabled = false;
+        }
+        topLevelElement.querySelectorAll('li').forEach(item => {
+            item.classList.add('autocomplete-text-input-item-hide');
+        });
+    }
+    setValue(textInput, displayValue) {
+        if (displayValue) {
+            textInput.value = displayValue;
+        }
+        textInput.focus();
+        textInput.dispatchEvent(new Event('change', { bubbles: true }));
+    }
+    addItem(template, content, clickEvent) {
+        const item = template?.cloneNode(true);
+        const button = item?.querySelector('button');
+        if (button) {
+            button.innerHTML = content;
+        }
+        item.classList.remove('autocomplete-text-input-item-hide');
+        this.getElement().querySelector(this.listParentSelector)?.appendChild(item);
+        if (clickEvent) {
+            item.addEventListener('mousedown', (event) => {
+                clickEvent(event);
+            });
+        }
+    }
+    clearListAndRecreateTemplate() {
+        const template = this.getElement()
+            .querySelector(this.listItemsSelector)
+            ?.cloneNode(true);
+        template?.classList.add('autocomplete-text-input-item-hide');
+        this.getElement()
+            .querySelectorAll(this.listItemsSelector)
+            .forEach(e => e.remove());
+        if (template) {
+            this.getElement().querySelector(this.listParentSelector)?.append(template);
+        }
+        return template;
+    }
+    getHiddenInput() {
+        return this.getElement().querySelector('[data-autocomplete-hidden]');
     }
 }
 
-var isBetween$2 = {exports: {}};
-
-var isBetween$1 = isBetween$2.exports;
-
-var hasRequiredIsBetween;
-
-function requireIsBetween () {
-	if (hasRequiredIsBetween) return isBetween$2.exports;
-	hasRequiredIsBetween = 1;
-	(function (module, exports) {
-		!function(e,i){module.exports=i();}(isBetween$1,(function(){return function(e,i,t){i.prototype.isBetween=function(e,i,s,f){var n=t(e),o=t(i),r="("===(f=f||"()")[0],u=")"===f[1];return (r?this.isAfter(n,s):!this.isBefore(n,s))&&(u?this.isBefore(o,s):!this.isAfter(o,s))||(r?this.isBefore(n,s):!this.isAfter(n,s))&&(u?this.isAfter(o,s):!this.isBefore(o,s))};}})); 
-	} (isBetween$2));
-	return isBetween$2.exports;
-}
-
+class DateInput extends DprClientClass {
+    dateInput = null;
+    required = null;
+    displayName = null;
+    pattern = null;
+    patternHint = null;
+    min = null;
+    max = null;
+    setToValueTriggers = null;
+    static getModuleName() {
+        return 'date-input';
+    }
+    initialise() {
+        const element = this.getElement();
+        this.dateInput = element.querySelector(`input.moj-js-datepicker-input`);
+        this.setToValueTriggers = document.querySelectorAll(`[data-set-min-max-trigger='true']`);
+        this.required = this.getElement().getAttribute('data-required');
+        this.displayName = this.getElement().getAttribute('data-display-name');
+        this.pattern = this.getElement().getAttribute('data-pattern');
+        this.patternHint = this.getElement().getAttribute('data-pattern-hint');
+        this.min = this.getElement().getAttribute('data-min');
+        this.max = this.getElement().getAttribute('data-max');
+        this.setValidationOnInputEl();
+        this.setMinMaxEventListener();
+        this.setToMinMax();
+        this.setToValue();
+    }
+    setValidationOnInputEl() {
+        if (this.required && this.required === 'true') {
+            this.dateInput?.setAttribute('required', 'true');
+        }
+        if (this.min)
+            this.dateInput?.setAttribute('min', this.min);
+        if (this.max)
+            this.dateInput?.setAttribute('max', this.max);
+        this.displayName && this.dateInput?.setAttribute('display-name', this.displayName);
+        this.pattern && this.dateInput?.setAttribute('pattern', this.pattern);
+        this.patternHint && this.dateInput?.setAttribute('pattern-hint', this.patternHint);
+    }
+    setMinMaxEventListener() {
+        this.dateInput?.addEventListener('blur', () => {
+            this.setToMinMax();
+        });
+    }
+    setToMinMax() {
+        if (this.dateInput?.value) {
+            const dateValue = new Date(this.dateInput.value);
+            if (this.min) {
+                const minDate = new Date(this.min);
+                if (dateValue < minDate) {
+                    this.dateInput.value = dayjs(this.min).format('DD/MM/YYYY');
+                }
+            }
+            if (this.max) {
+                const maxDate = new Date(this.max);
+                if (dateValue > maxDate) {
+                    this.dateInput.value = dayjs(this.max).format('DD/MM/YYYY');
+                }
+            }
+        }
+        const changeEvent = new Event('change');
+        this.dateInput?.dispatchEvent(changeEvent);
+    }
+    setToValue() {
+        this.setToValueTriggers?.forEach(set => {
+            set.addEventListener('click', e => {
+                e.preventDefault();
+                const value = e.target?.getAttribute('data-set-min-max-value');
+                const inputId = e.target?.getAttribute('data-set-to-input') || '';
+                const input = document.getElementById(inputId);
+                if (input && value) {
+                    input.value = value;
+                    const changeEvent = new Event('change');
+                    input?.dispatchEvent(changeEvent);
+                }
+            });
+        });
+    }
+}
+
+var isBetween$2 = {exports: {}};
+
+var isBetween$1 = isBetween$2.exports;
+
+var hasRequiredIsBetween;
+
+function requireIsBetween () {
+	if (hasRequiredIsBetween) return isBetween$2.exports;
+	hasRequiredIsBetween = 1;
+	(function (module, exports) {
+		!function(e,i){module.exports=i();}(isBetween$1,(function(){return function(e,i,t){i.prototype.isBetween=function(e,i,s,f){var n=t(e),o=t(i),r="("===(f=f||"()")[0],u=")"===f[1];return (r?this.isAfter(n,s):!this.isBefore(n,s))&&(u?this.isBefore(o,s):!this.isAfter(o,s))||(r?this.isBefore(n,s):!this.isAfter(n,s))&&(u?this.isAfter(o,s):!this.isBefore(o,s))};}})); 
+	} (isBetween$2));
+	return isBetween$2.exports;
+}
+
 var isBetweenExports = requireIsBetween();
 var isBetween = /*@__PURE__*/getDefaultExportFromCjs(isBetweenExports);
 
@@ -1289,181 +1547,18 @@ class DateRangeInput extends DprClientClass {
     }
 }
 
-// @ts-nocheck
-/* eslint-disable class-methods-use-this */
-class Autocomplete extends DprClientClass {
-    static getModuleName() {
-        return 'autocomplete-text-input';
-    }
-    constructor(element) {
-        super(element);
-        const listId = this.getTextInput().getAttribute('aria-owns');
-        this.listItemsSelector = `#${listId} li`;
-        this.listParentSelector = `#${listId} ul`;
-    }
-    initialise() {
-        const textInput = this.getTextInput();
-        textInput.addEventListener('keyup', event => {
-            this.onTextInput(event, textInput);
-        });
-        textInput.addEventListener('keypress', e => {
-            if (e.key === 'Enter') {
-                e.stopPropagation();
-                e.preventDefault();
-            }
-        });
-        textInput.addEventListener('input', () => {
-            if (textInput.value !== '') {
-                return;
-            }
-            const hiddenInput = this.getHiddenInput();
-            if (hiddenInput) {
-                hiddenInput.value = '';
-                hiddenInput.disabled = true;
-            }
-            delete textInput.dataset.staticOptionNameValue;
-            textInput.dispatchEvent(new Event('change', { bubbles: true }));
-        });
-        this.getElement()
-            .querySelectorAll('.autocomplete-text-input-list-button')
-            .forEach(button => {
-            button.addEventListener('mousedown', event => {
-                this.onOptionClick(event, textInput, this.getElement());
-            });
-        });
-        this.initialiseDefaultValue(textInput);
-    }
-    initialiseDefaultValue(textInput) {
-        const hiddenInput = this.getHiddenInput();
-        if (hiddenInput?.value) {
-            hiddenInput.disabled = false;
-            return;
-        }
-        textInput.value = '';
-        delete textInput.dataset.staticOptionNameValue;
-        if (hiddenInput) {
-            hiddenInput.value = '';
-            hiddenInput.disabled = true;
-        }
-    }
-    getTextInput() {
-        return this.getElement().querySelector('.autocomplete-text-input-box');
-    }
-    onTextInput(event, textInput) {
-        const minLength = Number(textInput.dataset.minimumLength);
-        const { resourceEndpoint } = textInput.dataset;
-        const searchValue = event.target.value.toLowerCase();
-        if (resourceEndpoint) {
-            if (searchValue.length >= minLength) {
-                this.addItem(this.clearListAndRecreateTemplate(), '<i>Searching...</i>');
-                this.populateOptionsDynamically(resourceEndpoint, searchValue, textInput, () => this.clearListAndRecreateTemplate());
-            }
-            else {
-                this.clearListAndRecreateTemplate();
-            }
-        }
-        else {
-            this.getElement()
-                .querySelectorAll(this.listItemsSelector)
-                .forEach(item => {
-                if (searchValue.length >= minLength &&
-                    this.isMatchingStaticOptionNameOrDisplayPrefix(this.getInputListButton(item), searchValue, item)) {
-                    item.classList.remove('autocomplete-text-input-item-hide');
-                }
-                else {
-                    item.classList.add('autocomplete-text-input-item-hide');
-                }
-            });
-        }
-        if (searchValue.length === 0) {
-            const changeEvent = new Event('change');
-            textInput.dispatchEvent(changeEvent);
-        }
-    }
-    getInputListButton(item) {
-        return item.querySelector('.autocomplete-text-input-list-button');
-    }
-    isMatchingStaticOptionNameOrDisplayPrefix(inputListButton, searchValue, item) {
-        return (this.isStaticOptionsNamePrefix(inputListButton.dataset.staticOptionNameValue, searchValue) ||
-            item.innerText.trim().toLowerCase().startsWith(searchValue));
-    }
-    isStaticOptionsNamePrefix(staticOptionNameValue, searchValue) {
-        return staticOptionNameValue && staticOptionNameValue.trim().toLowerCase().startsWith(searchValue);
-    }
-    async populateOptionsDynamically(resourceEndpoint, searchValue, textInput, templateProvider) {
-        try {
-            const response = await fetch(resourceEndpoint.replace('{prefix}', encodeURI(searchValue)));
-            const results = await response.json();
-            if (searchValue === textInput.value.toLowerCase()) {
-                const template = templateProvider();
-                results.forEach(r => {
-                    this.addItem(template, r, event => {
-                        this.onOptionClick(event, textInput, this.getElement());
-                    });
-                });
-            }
-        }
-        catch (error) {
-            this.addItem(templateProvider(), `Failed to retrieve results: ${error}`);
-        }
-    }
-    onOptionClick(event, textInput, topLevelElement) {
-        event.preventDefault();
-        const button = event.currentTarget.closest('button');
-        const hiddenInput = this.getHiddenInput();
-        const displayValue = button.innerText.trim();
-        const actualValue = button.dataset.staticOptionNameValue || '';
-        // UI Display Value
-        textInput.value = displayValue;
-        // submission value
-        if (hiddenInput) {
-            hiddenInput.value = actualValue;
-            hiddenInput.disabled = false;
-        }
-        textInput.dataset.staticOptionNameValue = actualValue;
-        topLevelElement.querySelectorAll('li').forEach(item => {
-            item.classList.add('autocomplete-text-input-item-hide');
-        });
-        textInput.focus();
-        textInput.dispatchEvent(new Event('change', { bubbles: true }));
-    }
-    setValue(textInput, displayValue) {
-        textInput.value = displayValue;
-        textInput.focus();
-        textInput.dispatchEvent(new Event('change', { bubbles: true }));
-    }
-    addItem(template, content, clickEvent) {
-        const item = template.cloneNode(true);
-        item.querySelector('button').innerHTML = content;
-        item.classList.remove('autocomplete-text-input-item-hide');
-        this.getElement().querySelector(this.listParentSelector).appendChild(item);
-        if (clickEvent) {
-            item.addEventListener('mousedown', event => {
-                clickEvent(event);
-            });
-        }
-    }
-    clearListAndRecreateTemplate() {
-        const template = this.getElement().querySelector(this.listItemsSelector).cloneNode(true);
-        template.classList.add('autocomplete-text-input-item-hide');
-        this.getElement()
-            .querySelectorAll(this.listItemsSelector)
-            .forEach(e => e.remove());
-        this.getElement().querySelector(this.listParentSelector).append(template);
-        return template;
-    }
-    getHiddenInput() {
-        return this.getElement().querySelector('[data-autocomplete-hidden]');
-    }
-}
-
-// @ts-nocheck
 class GranularDateRange extends DprClientClass {
-    quickFiltersInput;
-    granularityInput;
-    startInput;
-    endInput;
-    currentQuickFilterValue;
+    filter = null;
+    quickFiltersInput = null;
+    granularityInput = null;
+    startInput = null;
+    endInput = null;
+    currentQuickFilterValue = '';
+    fieldName = null;
+    idPrefix = '';
+    currentStartInputValue = '';
+    currentEndInputValue = '';
+    currentGranularityValue = '';
     static getModuleName() {
         return 'granular-date-range-input';
     }
@@ -1475,15 +1570,15 @@ class GranularDateRange extends DprClientClass {
         this.granularityInput = this.filter.querySelector(`select[name='${this.idPrefix}.granularity']`);
         this.startInput = this.filter.querySelector(`input[name='${this.idPrefix}.start']`);
         this.endInput = this.filter.querySelector(`input[name='${this.idPrefix}.end']`);
-        this.currentStartInputValue = this.startInput.value;
-        this.currentEndInputValue = this.endInput.value;
-        this.currentQuickFilterValue = this.quickFiltersInput.value;
-        this.currentGranularityValue = this.granularityInput.value;
+        this.currentStartInputValue = this.startInput?.value || '';
+        this.currentEndInputValue = this.endInput?.value || '';
+        this.currentQuickFilterValue = this.quickFiltersInput?.value || '';
+        this.currentGranularityValue = this.granularityInput?.value || '';
         this.initChangeEvents();
     }
     initChangeEvents() {
         [this.granularityInput, this.quickFiltersInput, this.startInput, this.endInput].forEach(el => {
-            el.addEventListener('change', event => {
+            el?.addEventListener('change', event => {
                 this.resolveStateChange(event);
             });
         });
@@ -1492,22 +1587,22 @@ class GranularDateRange extends DprClientClass {
         const target = event.target;
         const value = target.value;
         switch (target.id) {
-            case this.quickFiltersInput.id: {
+            case this.quickFiltersInput?.id: {
                 this.currentQuickFilterValue = value;
                 const { granularity, startDate, endDate } = this.calculateStartEndGranularity(value);
-                this.granularityInput.value = granularity;
-                this.startInput.value = startDate.format('DD/MM/YYYY').toString();
-                this.endInput.value = endDate.format('DD/MM/YYYY').toString();
+                this.granularityInput && (this.granularityInput.value = granularity);
+                this.startInput && (this.startInput.value = startDate.format('DD/MM/YYYY').toString());
+                this.endInput && (this.endInput.value = endDate.format('DD/MM/YYYY').toString());
                 break;
             }
-            case this.granularityInput.id: {
+            case this.granularityInput?.id: {
                 if (this.shouldResetQuickFilters(event)) {
                     this.resetQuickFiltersToNone();
                 }
                 break;
             }
-            case this.startInput.id:
-            case this.endInput.id: {
+            case this.startInput?.id:
+            case this.endInput?.id: {
                 this.resetQuickFiltersToNone();
                 break;
             }
@@ -1519,14 +1614,14 @@ class GranularDateRange extends DprClientClass {
         this.updateQueryParams();
     }
     resetQuickFiltersToNone() {
-        this.quickFiltersInput.value = 'none';
+        this.quickFiltersInput && (this.quickFiltersInput.value = 'none');
     }
     updateQueryParams() {
         const queryParams = new URLSearchParams(window.location.search);
-        queryParams.set(this.granularityInput.id, this.granularityInput.value);
-        queryParams.set(this.quickFiltersInput.id, this.quickFiltersInput.value);
-        queryParams.set(this.startInput.id, this.startInput.value);
-        queryParams.set(this.endInput.id, this.endInput.value);
+        this.granularityInput && queryParams.set(this.granularityInput.id, this.granularityInput.value);
+        this.quickFiltersInput && queryParams.set(this.quickFiltersInput.id, this.quickFiltersInput.value);
+        this.startInput && queryParams.set(this.startInput.id, this.startInput.value);
+        this.endInput && queryParams.set(this.endInput.id, this.endInput.value);
         window.history.replaceState(null, '', `?${queryParams.toString()}`);
     }
     shouldResetQuickFilters(e) {
@@ -1540,15 +1635,15 @@ class GranularDateRange extends DprClientClass {
         return false;
     }
     calculateStartEndGranularity(quickFilterValue) {
-        let startDate = dayjs(this.startInput.value);
-        let endDate = dayjs(this.endInput.value);
-        let granularity = this.granularityInput.value;
+        let startDate = dayjs(this.startInput?.value);
+        let endDate = dayjs(this.endInput?.value);
+        let granularity = this.granularityInput?.value;
         switch (quickFilterValue) {
             // This case only happens if quick filter is _already_ none and someone changes granularity
             case 'none':
                 endDate = dayjs();
                 startDate = dayjs();
-                granularity = this.granularityInput.value;
+                granularity = this.granularityInput?.value;
                 break;
             case 'today':
                 endDate = dayjs();
@@ -1669,7 +1764,7 @@ class GranularDateRange extends DprClientClass {
         return {
             startDate,
             endDate,
-            granularity,
+            granularity: String(granularity),
         };
     }
 }
@@ -1743,76 +1838,16 @@ class MultiselectInput extends DprClientClass {
     /**
      * Removes classes to relevant element to hide all select items
      *
-     * @param {Event} e
-     * @memberof MultiselectInput
-     */
-    removeFullWidthClasses(e) {
-        e.preventDefault();
-        this.element.classList.remove('multiselect-container__full-width');
-        this.filtersContainer?.classList.remove('dpr-filter-item__span-3');
-        // Update button visability
-        this.fullListLink?.classList.remove('dpr-multiselect-action--hide');
-        this.hideListLink?.classList.add('dpr-multiselect-action--hide');
-    }
-}
-
-class AutoCompleteMulti extends DprClientClass {
-    filterId;
-    searchInput;
-    searchInputValue;
-    multiselectOptions;
-    static getModuleName() {
-        return 'autocomplete-multiselect-input';
-    }
-    initialise() {
-        this.element = this.getElement();
-        this.filterId = this.element.getAttribute('data-filter-id');
-        // Search input
-        this.searchInput = document.getElementById(`search.${this.filterId}`);
-        this.multiselectOptions = Array.from(this.element.querySelectorAll('.govuk-checkboxes__input'));
-        if (!this.searchInput || !this.multiselectOptions)
-            return;
-        this.initialiseCheckboxes();
-        this.initSearchInputAction();
-    }
-    initialiseCheckboxes() {
-        this.multiselectOptions.forEach(input => {
-            const wrapper = input.closest('.govuk-checkboxes__item');
-            if (!wrapper)
-                return;
-            wrapper.classList.toggle('dpr-form--hidden', !input.checked);
-        });
-    }
-    initSearchInputAction() {
-        if (!this.searchInput)
-            return;
-        const input = this.searchInput;
-        this.searchInput.addEventListener('keyup', _event => {
-            this.searchInputValue = input.value;
-            this.updateCheckboxes();
-        });
-    }
-    updateCheckboxes() {
-        const query = this.searchInputValue.toLowerCase().trim();
-        const minLength = 3;
-        this.multiselectOptions.forEach(input => {
-            const wrapper = input.closest('.govuk-checkboxes__item');
-            if (!wrapper)
-                return;
-            // Always show selected items
-            if (input.checked) {
-                wrapper.classList.remove('dpr-form--hidden');
-                return;
-            }
-            // Below threshold - hide unselected
-            if (query.length < minLength) {
-                wrapper.classList.add('dpr-form--hidden');
-                return;
-            }
-            const labelText = input.labels?.[0]?.innerText.toLowerCase() ?? '';
-            const matches = labelText.includes(query);
-            wrapper.classList.toggle('dpr-form--hidden', !matches);
-        });
+     * @param {Event} e
+     * @memberof MultiselectInput
+     */
+    removeFullWidthClasses(e) {
+        e.preventDefault();
+        this.element.classList.remove('multiselect-container__full-width');
+        this.filtersContainer?.classList.remove('dpr-filter-item__span-3');
+        // Update button visability
+        this.fullListLink?.classList.remove('dpr-multiselect-action--hide');
+        this.hideListLink?.classList.add('dpr-multiselect-action--hide');
     }
 }
 
@@ -18554,14 +18589,32 @@ var plugin = {
   }
 };
 
-// @ts-nocheck
 /* eslint-disable class-methods-use-this */
 class ChartVisualisation extends DprClientClass {
+    chartContext = null;
+    chart = null;
+    chartParams = {};
+    type = null;
+    id = '';
+    unit = '';
+    suffix = '';
+    legend = null;
+    tooltipDetailsEl = null;
+    headlineValuesEl = null;
+    labelElement = null;
+    valueElement = null;
+    legendElement = null;
+    partialStart = false;
+    partialEnd = false;
+    singleDataset = false;
+    static getModuleName() {
+        return 'chart';
+    }
     setupCanvas() {
         this.chartContext = this.getElement().querySelector('canvas');
         // data
-        this.id = this.chartContext.getAttribute('id');
-        this.chartParams = JSON.parse(this.getElement().getAttribute('data-dpr-chart-data'));
+        this.id = this.chartContext?.getAttribute('id') || '';
+        this.chartParams = JSON.parse(this.getElement().getAttribute('data-dpr-chart-data') || '{}');
         this.type = this.getElement().getAttribute('data-dpr-chart-type');
         this.setValueSuffix();
         // elements
@@ -18573,14 +18626,14 @@ class ChartVisualisation extends DprClientClass {
         this.valueElement = document.getElementById(`dpr-${this.id}-value`);
         this.legendElement = document.getElementById(`dpr-${this.id}-legend`);
         this.legendElement = document.getElementById(`dpr-${this.id}-legend`);
-        if (this.chartParams.partialDate) {
-            this.partialStart = this.chartParams.partialDate.start || false;
-            this.partialEnd = this.chartParams.partialDate.end || false;
+        if (this.chartParams['partialDate']) {
+            this.partialStart = this.chartParams['partialDate'].start || false;
+            this.partialEnd = this.chartParams['partialDate'].end || false;
         }
         // flags
-        this.singleDataset = this.chartParams.datasets.length === 1;
+        this.singleDataset = this.chartParams['datasets'].length === 1;
     }
-    initChart() {
+    initChart(chartData) {
         // Prevent font loading issue
         window.addEventListener('load', () => {
             // An example of creating a chart, replace with your code:
@@ -18589,7 +18642,7 @@ class ChartVisualisation extends DprClientClass {
             Chart.register(plugin);
             Chart.register(MatrixController, MatrixElement);
             Chart.defaults.datasets.bar.categoryPercentage = 0.95;
-            this.chart = new Chart(this.chartContext, this.chartData);
+            this.chart = new Chart(this.chartContext, chartData);
             this.initChartEvents();
         });
     }
@@ -18642,14 +18695,14 @@ class ChartVisualisation extends DprClientClass {
         }
     }
     setValueSuffix() {
-        this.unit = this.getElement().getAttribute('data-dpr-chart-unit');
+        this.unit = this.getElement().getAttribute('data-dpr-chart-unit') || '';
         this.suffix = this.unit === 'percentage' ? '%' : '';
     }
     isPercentage() {
         return this.unit === 'percentage';
     }
     initChartEvents() {
-        this.chart.canvas.addEventListener('mouseout', e => {
+        this.chart?.canvas.addEventListener('mouseout', () => {
             if (this.tooltipDetailsEl)
                 this.tooltipDetailsEl.style.display = 'none';
             if (this.headlineValuesEl)
@@ -18658,10 +18711,11 @@ class ChartVisualisation extends DprClientClass {
     }
 }
 
-// @ts-nocheck
 /* eslint-disable no-underscore-dangle */
 /* eslint-disable class-methods-use-this */
 class BarChartVisualisation extends ChartVisualisation {
+    settings = {};
+    chartData;
     static getModuleName() {
         return 'bar-chart';
     }
@@ -18701,9 +18755,9 @@ class BarChartVisualisation extends ChartVisualisation {
         return {
             color: '#FFF',
             display: () => {
-                return !this.timeseries;
+                return true;
             },
-            formatter: value => {
+            formatter: (value) => {
                 return `${value}${this.suffix}`;
             },
             labels: {
@@ -18719,9 +18773,9 @@ class BarChartVisualisation extends ChartVisualisation {
     }
 }
 
-// @ts-nocheck
-/* eslint-disable class-methods-use-this */
 class DoughnutChartVisualisation extends ChartVisualisation {
+    settings = {};
+    chartData;
     static getModuleName() {
         return 'doughnut-chart';
     }
@@ -18741,7 +18795,7 @@ class DoughnutChartVisualisation extends ChartVisualisation {
         };
     }
     setOptions() {
-        const cutoutValue = this.chartParams.datasets.length === 1 ? '50%' : '20%';
+        const cutoutValue = this.chartParams['datasets'].length === 1 ? '50%' : '20%';
         return {
             cutout: cutoutValue,
         };
@@ -18756,7 +18810,7 @@ class DoughnutChartVisualisation extends ChartVisualisation {
     }
     setPlugins() {
         const plugins = [];
-        if (this.chartParams.datasets.length === 1 && !this.isPercentage) {
+        if (this.chartParams['datasets'].length === 1 && !this.isPercentage()) {
             plugins.push(this.setCentralText());
         }
         return plugins;
@@ -18766,16 +18820,14 @@ class DoughnutChartVisualisation extends ChartVisualisation {
             // Put the total in the center of the donut
             id: 'text',
             beforeDraw(chart) {
-                const { width } = chart;
-                const { height } = chart;
-                const { ctx } = chart;
+                const { width, height, ctx } = chart;
                 ctx.textBaseline = 'middle';
                 let fontSize = 2.5;
                 ctx.font = `100 ${fontSize}em GDS Transport`;
                 ctx.fillStyle = '	#505a5f';
                 // Accumulated total
-                const total = chart.data.datasets[0].data.reduce((a, c) => a + c, 0);
-                const text = total;
+                const total = chart.data.datasets[0].data.reduce((a, c) => a + Number(c), 0);
+                const text = total?.toString() || '';
                 const textX = Math.round((width - ctx.measureText(text).width) / 2);
                 const textY = height / 2;
                 ctx.fillText(text, textX, textY);
@@ -18830,7 +18882,7 @@ class DoughnutChartVisualisation extends ChartVisualisation {
         return {
             textAlign: 'center',
             color: '#FFF',
-            display: context => {
+            display: (context) => {
                 const { dataset, dataIndex } = context;
                 const value = dataset.data[dataIndex];
                 const total = dataset.data.reduce((a, c) => a + c, 0);
@@ -18858,65 +18910,9 @@ ${dataset.label}`;
     }
 }
 
-// @ts-nocheck
-/* eslint-disable class-methods-use-this */
-class LineChartVisualisation extends ChartVisualisation {
-    static getModuleName() {
-        return 'line-chart';
-    }
-    initialise() {
-        this.setupCanvas();
-        this.settings = this.initSettings();
-        this.chartData = this.generateChartData(this.settings);
-        this.lastIndex = this.chartData.data.labels.length - 1;
-        this.initChart(this.chartData);
-    }
-    initSettings() {
-        return {
-            toolTipOptions: this.setToolTipOptions(),
-            styling: this.setDatasetStyling(),
-        };
-    }
-    setPartialStyle(ctx) {
-        let style;
-        if ((this.partialEnd && ctx.p1DataIndex === this.lastIndex) || (this.partialStart && ctx.p1DataIndex === 1)) {
-            style = [6, 6];
-        }
-        return style;
-    }
-    setDatasetStyling() {
-        return {
-            segment: {
-                borderDash: ctx => this.setPartialStyle(ctx),
-            },
-        };
-    }
-    setToolTipOptions() {
-        const ctx = this;
-        return {
-            callbacks: {
-                title(context) {
-                    const { label, dataset } = context[0];
-                    const { label: establishmentId } = dataset;
-                    const title = ctx.singleDataset ? `${label}` : `${establishmentId}: ${label}`;
-                    return title;
-                },
-                label(context) {
-                    const { label } = context;
-                    const { data, label: legend } = context.dataset;
-                    const value = data[context.dataIndex];
-                    ctx.setHoverValue({ label, value, legend, ctx });
-                    return value;
-                },
-            },
-        };
-    }
-}
-
-// @ts-nocheck
-/* eslint-disable prefer-destructuring */
-/* eslint-disable class-methods-use-this */
 class MatrixChartVisualisation extends ChartVisualisation {
+    settings = {};
+    chartData;
     static getModuleName() {
         return 'matrix-chart';
     }
@@ -18936,7 +18932,7 @@ class MatrixChartVisualisation extends ChartVisualisation {
         return {
             callbacks: {
                 title(context) {
-                    const { raw } = context[0];
+                    const raw = context[0].raw;
                     const title = `${raw.y} ${raw.x}`;
                     return title;
                 },
@@ -18985,23 +18981,82 @@ class MatrixChartVisualisation extends ChartVisualisation {
     }
     createDatasets() {
         const { datasets } = this.chartParams;
-        return datasets.map(d => {
-            const { label, data } = d;
+        return datasets.map((dataset) => {
+            const { label, data } = dataset;
             return {
                 label,
                 data,
                 backgroundColor(c) {
-                    return c.raw.c;
+                    const color = c.raw.c;
+                    return color;
                 },
-                width: ({ chart }) => (chart.chartArea || {}).width / chart.scales.x.ticks.length - 1,
-                height: ({ chart }) => (chart.chartArea || {}).height / chart.scales.y.ticks.length - 1,
+                width: ({ chart }) => (chart.chartArea || {}).width / chart.scales['x'].ticks.length - 1,
+                height: ({ chart }) => (chart.chartArea || {}).height / chart.scales['y'].ticks.length - 1,
             };
         });
     }
 }
 
-// @ts-nocheck
+class LineChartVisualisation extends ChartVisualisation {
+    settings = {};
+    chartData;
+    lastIndex = 0;
+    static getModuleName() {
+        return 'line-chart';
+    }
+    initialise() {
+        this.setupCanvas();
+        this.settings = this.initSettings();
+        this.chartData = this.generateChartData(this.settings);
+        this.lastIndex = this.chartData.data?.labels ? this.chartData.data.labels.length - 1 : 0;
+        this.initChart(this.chartData);
+    }
+    initSettings() {
+        return {
+            toolTipOptions: this.setToolTipOptions(),
+            styling: this.setDatasetStyling(),
+        };
+    }
+    setPartialStyle(ctx) {
+        let style;
+        if ((this.partialEnd && ctx.p1DataIndex === this.lastIndex) || (this.partialStart && ctx.p1DataIndex === 1)) {
+            style = [6, 6];
+        }
+        return style;
+    }
+    setDatasetStyling() {
+        return {
+            segment: {
+                borderDash: (ctx) => this.setPartialStyle(ctx),
+            },
+        };
+    }
+    setToolTipOptions() {
+        const ctx = this;
+        return {
+            callbacks: {
+                title(context) {
+                    const { label, dataset } = context[0];
+                    const { label: establishmentId } = dataset;
+                    const title = ctx.singleDataset ? `${label}` : `${establishmentId}: ${label}`;
+                    return title;
+                },
+                label(context) {
+                    const { label } = context;
+                    const { data, label: legend } = context.dataset;
+                    const value = String(data[context.dataIndex]);
+                    ctx.setHoverValue({ label, value, legend, ctx });
+                    return value;
+                },
+            },
+        };
+    }
+}
+
 class Scorecard extends DprClientClass {
+    scorecard = null;
+    value = null;
+    ragStatus = null;
     static getModuleName() {
         return 'scorecard';
     }
@@ -19013,15 +19068,39 @@ class Scorecard extends DprClientClass {
             this.initHover();
     }
     initHover() {
-        this.value.addEventListener('mouseover', async () => {
-            this.ragStatus.classList.add('dpr-scorecard__value-description--active');
+        this.value?.addEventListener('mouseover', async () => {
+            this.ragStatus?.classList.add('dpr-scorecard__value-description--active');
         });
-        this.value.addEventListener('mouseout', async () => {
-            this.ragStatus.classList.remove('dpr-scorecard__value-description--active');
+        this.value?.addEventListener('mouseout', async () => {
+            this.ragStatus?.classList.remove('dpr-scorecard__value-description--active');
         });
     }
 }
 
+class DprReportsCatalogueCollections extends DprClientClass {
+    static getModuleName() {
+        return 'dpr-reports-catalogue-collections';
+    }
+    initialise() {
+        this.initProductCollectionSelect();
+    }
+    initProductCollectionSelect() {
+        const element = this.getElement();
+        if (element) {
+            const productCollections = element.querySelector('#productCollection');
+            if (productCollections) {
+                productCollections.addEventListener('change', e => {
+                    e.preventDefault();
+                    const form = productCollections.closest('form');
+                    if (!form)
+                        return;
+                    form.submit();
+                });
+            }
+        }
+    }
+}
+
 class DprReportsCatalogueFiltersClass extends DprClientClass {
     static products;
     static variants;
@@ -19162,163 +19241,59 @@ class DprReportsCatalogueSearch extends DprReportsCatalogueFiltersClass {
         }).length;
     }
     variantMatches(product, variant, searchTerm) {
-        if (searchTerm === '') {
-            return true;
-        }
-        const heading = product.querySelector('.dpr-report-catalogue__product-row__name');
-        const productText = heading ? this.getSearchText(heading) : '';
-        const variantText = this.getSearchText(variant);
-        const searchTerms = searchTerm.split(/\s+/).filter(Boolean);
-        return searchTerms.every(term => productText.includes(term) || variantText.includes(term));
-    }
-    /**
-     * Determines whether a product heading matches the search term.
-     */
-    productMatches(product, searchTerm) {
-        const heading = product.querySelector('.dpr-report-catalogue__product-row__name');
-        return heading ? this.matchesSearch(this.getSearchText(heading), searchTerm) : false;
-    }
-    matchesSearch(text, searchTerm) {
-        if (searchTerm === '') {
-            return true;
-        }
-        const searchTerms = searchTerm.split(/\s+/).filter(Boolean);
-        return searchTerms.every(term => text.includes(term));
-    }
-    /**
-     * Normalises a search term for matching.
-     *
-     * Searches with fewer than three characters are treated as empty.
-     */
-    normaliseSearch(search) {
-        const value = search.trim().toLowerCase();
-        return value.length >= 3 ? value : '';
-    }
-    /**
-     * Reads the current search term from the URL query string.
-     */
-    getSearchFromQueryString() {
-        const params = new URLSearchParams(window.location.search);
-        return params.get('search') ?? '';
-    }
-    /**
-     * Updates the URL query string with the current search value.
-     *
-     * The parameter is removed when the search is cleared or contains
-     * fewer than three characters.
-     */
-    updateQueryString(search) {
-        const params = new URLSearchParams(window.location.search);
-        const value = search.trim();
-        if (value.length >= 3) {
-            params.set('search', value);
-        }
-        else {
-            params.delete('search');
-        }
-        const queryString = params.toString();
-        window.history.replaceState({}, '', queryString ? `${window.location.pathname}?${queryString}` : window.location.pathname);
-    }
-}
-
-class DprReportsCatalogueCollections extends DprClientClass {
-    static getModuleName() {
-        return 'dpr-reports-catalogue-collections';
-    }
-    initialise() {
-        this.initProductCollectionSelect();
-    }
-    initProductCollectionSelect() {
-        const element = this.getElement();
-        if (element) {
-            const productCollections = element.querySelector('#productCollection');
-            if (productCollections) {
-                productCollections.addEventListener('change', e => {
-                    e.preventDefault();
-                    const form = productCollections.closest('form');
-                    if (!form)
-                        return;
-                    form.submit();
-                });
-            }
-        }
-    }
-}
-
-/**
- * Client-side report type filter for the reports catalogue.
- *
- * Filters variant/dashboard rows by report type using the
- * `data-report-type` attribute and applies the `type-hide`
- * CSS class to rows that should not be visible.
- *
- * The selected filter is persisted in the URL query string
- * so that refreshes and shared links retain the current state.
- */
-class DprReportsCatalogueTypeFilter extends DprReportsCatalogueFiltersClass {
-    reportTypeRadios;
-    showHideClassName = 'dpr-reports-catalogue-type-hide';
-    static getModuleName() {
-        return 'dpr-report-catalogue-type-filter';
-    }
-    initialise() {
-        this.reportTypeRadios = [...this.getElement().querySelectorAll('input[type="radio"]')];
-        if (this.reportTypeRadios.length === 0) {
-            return;
-        }
-        const selectedType = this.getReportTypeFromQueryString();
-        const selectedRadio = this.reportTypeRadios.find(radio => radio.value === selectedType);
-        if (selectedRadio) {
-            selectedRadio.checked = true;
-        }
-        this.applyFilter(selectedType);
-        this.reportTypeRadios.forEach(radio => {
-            radio.addEventListener('change', () => {
-                this.updateQueryString(radio.value);
-                this.applyFilter(radio.value);
-            });
-        });
+        if (searchTerm === '') {
+            return true;
+        }
+        const heading = product.querySelector('.dpr-report-catalogue__product-row__name');
+        const productText = heading ? this.getSearchText(heading) : '';
+        const variantText = this.getSearchText(variant);
+        const searchTerms = searchTerm.split(/\s+/).filter(Boolean);
+        return searchTerms.every(term => productText.includes(term) || variantText.includes(term));
     }
     /**
-     * Applies the selected report type filter to all products.
+     * Determines whether a product heading matches the search term.
      */
-    applyFilter(reportType) {
-        this.getProducts().forEach(product => {
-            this.filterProduct(product, reportType);
-        });
-        document.dispatchEvent(new CustomEvent('dpr-report-catalogue-filter-changed'));
+    productMatches(product, searchTerm) {
+        const heading = product.querySelector('.dpr-report-catalogue__product-row__name');
+        return heading ? this.matchesSearch(this.getSearchText(heading), searchTerm) : false;
+    }
+    matchesSearch(text, searchTerm) {
+        if (searchTerm === '') {
+            return true;
+        }
+        const searchTerms = searchTerm.split(/\s+/).filter(Boolean);
+        return searchTerms.every(term => text.includes(term));
     }
     /**
-     * Filters all rows belonging to a product and determines
-     * whether the product itself should remain visible.
+     * Normalises a search term for matching.
+     *
+     * Searches with fewer than three characters are treated as empty.
      */
-    filterProduct(product, reportType) {
-        const visibleRows = this.getProductVariants(product).filter(row => {
-            const rowType = row.dataset['reportType'];
-            const showRow = reportType === '' || reportType === 'all' || rowType === reportType;
-            row.classList.toggle(this.showHideClassName, !showRow);
-            return showRow;
-        });
-        product.classList.toggle(this.showHideClassName, visibleRows.length === 0);
+    normaliseSearch(search) {
+        const value = search.trim().toLowerCase();
+        return value.length >= 3 ? value : '';
     }
     /**
-     * Reads the selected report type from the URL query string.
+     * Reads the current search term from the URL query string.
      */
-    getReportTypeFromQueryString() {
+    getSearchFromQueryString() {
         const params = new URLSearchParams(window.location.search);
-        return params.get('report-type') ?? 'all';
+        return params.get('search') ?? '';
     }
     /**
-     * Updates the URL query string with the currently
-     * selected report type.
+     * Updates the URL query string with the current search value.
+     *
+     * The parameter is removed when the search is cleared or contains
+     * fewer than three characters.
      */
-    updateQueryString(reportType) {
+    updateQueryString(search) {
         const params = new URLSearchParams(window.location.search);
-        if (reportType && reportType !== 'all') {
-            params.set('report-type', reportType);
+        const value = search.trim();
+        if (value.length >= 3) {
+            params.set('search', value);
         }
         else {
-            params.delete('report-type');
+            params.delete('search');
         }
         const queryString = params.toString();
         window.history.replaceState({}, '', queryString ? `${window.location.pathname}?${queryString}` : window.location.pathname);
@@ -19449,80 +19424,82 @@ class DprReportsCatalogueShowHide extends DprReportsCatalogueFiltersClass {
 }
 
 /**
- * Updates catalogue totals whenever filters change.
+ * Client-side report type filter for the reports catalogue.
  *
- * Counts only visible products and variants.
+ * Filters variant/dashboard rows by report type using the
+ * `data-report-type` attribute and applies the `type-hide`
+ * CSS class to rows that should not be visible.
+ *
+ * The selected filter is persisted in the URL query string
+ * so that refreshes and shared links retain the current state.
  */
-class DprReportsCatalogueTotals extends DprReportsCatalogueFiltersClass {
-    productsTotal;
-    variantsTotal;
+class DprReportsCatalogueTypeFilter extends DprReportsCatalogueFiltersClass {
+    reportTypeRadios;
+    showHideClassName = 'dpr-reports-catalogue-type-hide';
     static getModuleName() {
-        return 'dpr-report-catalogue-totals';
+        return 'dpr-report-catalogue-type-filter';
     }
     initialise() {
-        this.productsTotal = this.getElement().querySelector('[data-products-total]');
-        this.variantsTotal = this.getElement().querySelector('[data-products-variants]');
-        this.updateTotals();
-        document.addEventListener('dpr-report-catalogue-filter-changed', () => {
-            this.updateTotals();
-        });
-    }
-    /**
-     * Updates visible product and variant counts.
-     */
-    updateTotals() {
-        if (!this.productsTotal || !this.variantsTotal) {
+        this.reportTypeRadios = [...this.getElement().querySelectorAll('input[type="radio"]')];
+        if (this.reportTypeRadios.length === 0) {
             return;
         }
-        const variantCount = this.getVisibleVariants().length;
-        this.variantsTotal.innerHTML = `<strong>${variantCount}</strong> ${this.pluralise(variantCount, 'report', 'reports')}`;
-        const productCount = this.getVisibleProducts().length;
-        this.productsTotal.innerHTML = `<strong>${productCount}</strong> ${this.pluralise(productCount, 'product', 'products')}`;
+        const selectedType = this.getReportTypeFromQueryString();
+        const selectedRadio = this.reportTypeRadios.find(radio => radio.value === selectedType);
+        if (selectedRadio) {
+            selectedRadio.checked = true;
+        }
+        this.applyFilter(selectedType);
+        this.reportTypeRadios.forEach(radio => {
+            radio.addEventListener('change', () => {
+                this.updateQueryString(radio.value);
+                this.applyFilter(radio.value);
+            });
+        });
     }
     /**
-     * Returns all visible products.
+     * Applies the selected report type filter to all products.
      */
-    getVisibleProducts() {
-        return this.getProducts().filter(product => this.isVisibleProduct(product));
+    applyFilter(reportType) {
+        this.getProducts().forEach(product => {
+            this.filterProduct(product, reportType);
+        });
+        document.dispatchEvent(new CustomEvent('dpr-report-catalogue-filter-changed'));
     }
     /**
-     * Returns all visible variants.
+     * Filters all rows belonging to a product and determines
+     * whether the product itself should remain visible.
      */
-    getVisibleVariants() {
-        return this.getVariants().filter(variant => this.isVisibleVariant(variant));
-    }
-    pluralise(count, singular, plural) {
-        return count === 1 ? singular : plural;
-    }
-}
-
-class DprReportsCatalogueProductCounts extends DprReportsCatalogueFiltersClass {
-    static getModuleName() {
-        return 'dpr-report-catalogue-product-counts';
-    }
-    initialise() {
-        this.updateCounts();
-        document.addEventListener('dpr-report-catalogue-filter-changed', () => {
-            this.updateCounts();
-        });
-    }
-    updateCounts() {
-        this.getProducts().forEach(product => {
-            const count = this.getVisibleVariantCount(product);
-            const totalElement = product.querySelector('[data-product-variants-total]');
-            if (totalElement) {
-                totalElement.textContent = `(${this.getVariantLabel(count)})`;
-            }
+    filterProduct(product, reportType) {
+        const visibleRows = this.getProductVariants(product).filter(row => {
+            const rowType = row.dataset['reportType'];
+            const showRow = reportType === '' || reportType === 'all' || rowType === reportType;
+            row.classList.toggle(this.showHideClassName, !showRow);
+            return showRow;
         });
+        product.classList.toggle(this.showHideClassName, visibleRows.length === 0);
     }
-    getVariantLabel(count) {
-        return `${count} report${count === 1 ? '' : 's'}`;
+    /**
+     * Reads the selected report type from the URL query string.
+     */
+    getReportTypeFromQueryString() {
+        const params = new URLSearchParams(window.location.search);
+        return params.get('report-type') ?? 'all';
     }
-    getVisibleVariantCount(product) {
-        if (!this.isVisibleProduct(product)) {
-            return 0;
+    /**
+     * Updates the URL query string with the currently
+     * selected report type.
+     */
+    updateQueryString(reportType) {
+        const params = new URLSearchParams(window.location.search);
+        if (reportType && reportType !== 'all') {
+            params.set('report-type', reportType);
         }
-        return [...product.querySelectorAll('.dpr-report-catalogue__variant-row')].filter(row => this.isVisibleVariant(row)).length;
+        else {
+            params.delete('report-type');
+        }
+        const queryString = params.toString();
+        window.history.replaceState({}, '', queryString ? `${window.location.pathname}?${queryString}` : window.location.pathname);
     }
 }
 
@@ -19583,7 +19560,84 @@ class DprReportsCatalogueNavigation extends DprReportsCatalogueFiltersClass {
     }
 }
 
-// @ts-nocheck
+class DprReportsCatalogueProductCounts extends DprReportsCatalogueFiltersClass {
+    static getModuleName() {
+        return 'dpr-report-catalogue-product-counts';
+    }
+    initialise() {
+        this.updateCounts();
+        document.addEventListener('dpr-report-catalogue-filter-changed', () => {
+            this.updateCounts();
+        });
+    }
+    updateCounts() {
+        this.getProducts().forEach(product => {
+            const count = this.getVisibleVariantCount(product);
+            const totalElement = product.querySelector('[data-product-variants-total]');
+            if (totalElement) {
+                totalElement.textContent = `(${this.getVariantLabel(count)})`;
+            }
+        });
+    }
+    getVariantLabel(count) {
+        return `${count} report${count === 1 ? '' : 's'}`;
+    }
+    getVisibleVariantCount(product) {
+        if (!this.isVisibleProduct(product)) {
+            return 0;
+        }
+        return [...product.querySelectorAll('.dpr-report-catalogue__variant-row')].filter(row => this.isVisibleVariant(row)).length;
+    }
+}
+
+/**
+ * Updates catalogue totals whenever filters change.
+ *
+ * Counts only visible products and variants.
+ */
+class DprReportsCatalogueTotals extends DprReportsCatalogueFiltersClass {
+    productsTotal;
+    variantsTotal;
+    static getModuleName() {
+        return 'dpr-report-catalogue-totals';
+    }
+    initialise() {
+        this.productsTotal = this.getElement().querySelector('[data-products-total]');
+        this.variantsTotal = this.getElement().querySelector('[data-products-variants]');
+        this.updateTotals();
+        document.addEventListener('dpr-report-catalogue-filter-changed', () => {
+            this.updateTotals();
+        });
+    }
+    /**
+     * Updates visible product and variant counts.
+     */
+    updateTotals() {
+        if (!this.productsTotal || !this.variantsTotal) {
+            return;
+        }
+        const variantCount = this.getVisibleVariants().length;
+        this.variantsTotal.innerHTML = `<strong>${variantCount}</strong> ${this.pluralise(variantCount, 'report', 'reports')}`;
+        const productCount = this.getVisibleProducts().length;
+        this.productsTotal.innerHTML = `<strong>${productCount}</strong> ${this.pluralise(productCount, 'product', 'products')}`;
+    }
+    /**
+     * Returns all visible products.
+     */
+    getVisibleProducts() {
+        return this.getProducts().filter(product => this.isVisibleProduct(product));
+    }
+    /**
+     * Returns all visible variants.
+     */
+    getVisibleVariants() {
+        return this.getVariants().filter(variant => this.isVisibleVariant(variant));
+    }
+    pluralise(count, singular, plural) {
+        return count === 1 ? singular : plural;
+    }
+}
+
 /* eslint-disable no-new */
 /* global dayjs */
 /**