@ministryofjustice/hmpps-digital-prison-reporting-frontend 6.2.4 → 6.3.0

package/_networkMocks/report/mockVariants/filter-input-examples/autocompleteMulti.d.ts

@@ -0,0 +1,3 @@
+import { components } from 'src/dpr/types/api';
+declare const autoCompleteMultiExample: components['schemas']['VariantDefinition'];
+export default autoCompleteMultiExample;

package/all.bundle.js

@@ -2053,6 +2053,66 @@ class MultiselectInput extends DprClientClass {
     }
 }
 
+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);
+        });
+    }
+}
+
 /* ==========================================================================
    Shared value types
    ========================================================================== */
@@ -17693,6 +17753,7 @@ function initAll() {
         DprSyncLoading,
         GranularDateRange,
         MultiselectInput,
+        AutoCompleteMulti,
         DprFiltersFormClass,
         DprSelectedAsyncFilters,
         DprAppliedFilters,