@ministryofjustice/hmpps-connect-dps-shared-items 5.1.0 → 5.2.0

package/dist/assets/dps/components/address-autosuggest/_address-autosuggest.scss

@@ -1,9 +1,14 @@
 @use "govuk-frontend/dist/govuk/helpers/colour";
+@use "govuk-frontend/dist/govuk/helpers/typography";
 
 .hmpps-address-autosuggest {
     position: relative;
     max-width: 630px;
 
+    .hmpps-display-none {
+      display: none;
+    }
+
     .govuk-form-group {
         margin-bottom: 10px;
     }
@@ -27,6 +32,7 @@
         background: colour.govuk-colour("black", $variant: "tint-95");
         border-bottom: 1px solid colour.govuk-functional-colour(border);
         padding: 0.25rem 0.5rem;
+        @include typography.govuk-font($size: 19);
     }
 
     &__listbox {
@@ -37,6 +43,7 @@
         &:focus {
             outline: none;
         }
+        @include typography.govuk-font($size: 19);
     }
 
     &__option {

package/dist/assets/dps/components/address-autosuggest/abortable-fetch.d.ts

@@ -0,0 +1,26 @@
+export declare const FetchStatus: {
+    readonly unsent: "UNSENT";
+    readonly loading: "LOADING";
+    readonly done: "DONE";
+};
+export type FetchStatus = typeof FetchStatus;
+export declare const abortError: "AbortError";
+export declare const abortTimeout: "AbortTimeout";
+export interface AbortableFetchOptions {
+    /** How long to delay the fetch call for; defaults to 0.5s */
+    fetchDelay?: number;
+}
+export declare class AbortableFetch {
+    private controller;
+    status: FetchStatus[keyof FetchStatus];
+    private readonly fetchDelay;
+    private readonly url;
+    constructor(url: string, options?: AbortableFetchOptions);
+    send(): Promise<Response>;
+    abort(): void;
+}
+export declare class ResponseError extends Error {
+    readonly response: Response;
+    constructor(message: string, response: Response);
+}
+export declare const abortableFetch: (url: string, options: AbortableFetchOptions) => AbortableFetch;

package/dist/assets/dps/components/address-autosuggest/abortable-fetch.js

@@ -1,4 +1,5 @@
 // Based on ONSDigital's https://github.com/ONSdigital/design-system/blob/main/src/js/abortable-fetch.js
+/* eslint-disable max-classes-per-file, @stylistic/lines-between-class-members */
 const FetchStatus = {
     unsent: 'UNSENT',
     loading: 'LOADING',
@@ -7,7 +8,11 @@ const FetchStatus = {
 const abortError = 'AbortError';
 const abortTimeout = 'AbortTimeout';
 class AbortableFetch {
-    constructor(url, options) {
+    controller;
+    status;
+    fetchDelay;
+    url;
+    constructor(url, options = {}) {
         this.url = url;
         this.controller = new window.AbortController();
         this.status = FetchStatus.unsent;
@@ -17,18 +22,18 @@ class AbortableFetch {
         this.status = FetchStatus.loading;
         try {
             // Abortable delay before querying the API to limit the rate of requests when someone is typing:
-            await new Promise((resolve) => {
+            await new Promise(resolve => {
                 setTimeout(resolve, this.fetchDelay);
-                this.controller.signal.addEventListener('abort', () => { resolve(); }, { once: true });
+                this.controller.signal.addEventListener('abort', () => {
+                    resolve();
+                }, { once: true });
             });
             setTimeout(() => {
                 this.controller.abort(abortTimeout);
             }, 5000);
             const response = await window.fetch(this.url, { signal: this.controller.signal });
-            if (!(+response.status === 200)) {
-                const error = new Error(`API error: ${response?.status ?? 500}`);
-                error.response = response;
-                throw error;
+            if (!response.ok) {
+                throw new ResponseError(`API error: ${response.status ?? 500}`, response);
             }
             return response;
         }
@@ -40,6 +45,13 @@ class AbortableFetch {
         this.controller.abort();
     }
 }
+class ResponseError extends Error {
+    response;
+    constructor(message, response) {
+        super(message);
+        this.response = response;
+    }
+}
 const abortableFetch = (url, options) => new AbortableFetch(url, options);
 
-export { FetchStatus, abortError, abortTimeout, abortableFetch };
+export { AbortableFetch, FetchStatus, ResponseError, abortError, abortTimeout, abortableFetch };

package/dist/assets/dps/components/address-autosuggest/abortable-fetch.ts

@@ -0,0 +1,76 @@
+// Based on ONSDigital's https://github.com/ONSdigital/design-system/blob/main/src/js/abortable-fetch.js
+/* eslint-disable max-classes-per-file, @stylistic/lines-between-class-members */
+
+export const FetchStatus = {
+  unsent: 'UNSENT',
+  loading: 'LOADING',
+  done: 'DONE',
+} as const
+export type FetchStatus = typeof FetchStatus
+
+export const abortError = 'AbortError' as const
+export const abortTimeout = 'AbortTimeout' as const
+
+export interface AbortableFetchOptions {
+  /** How long to delay the fetch call for; defaults to 0.5s */
+  fetchDelay?: number
+}
+
+export class AbortableFetch {
+  private controller: AbortController
+  public status: FetchStatus[keyof FetchStatus]
+  private readonly fetchDelay: number
+  private readonly url: string
+
+  constructor(url: string, options: AbortableFetchOptions = {}) {
+    this.url = url
+    this.controller = new window.AbortController()
+    this.status = FetchStatus.unsent
+    this.fetchDelay = options?.fetchDelay || 500
+  }
+
+  public async send(): Promise<Response> {
+    this.status = FetchStatus.loading
+    try {
+      // Abortable delay before querying the API to limit the rate of requests when someone is typing:
+      await new Promise<void>(resolve => {
+        setTimeout(resolve, this.fetchDelay)
+        this.controller.signal.addEventListener(
+          'abort',
+          () => {
+            resolve()
+          },
+          { once: true },
+        )
+      })
+
+      setTimeout(() => {
+        this.controller.abort(abortTimeout)
+      }, 5000)
+
+      const response = await window.fetch(this.url, { signal: this.controller.signal })
+
+      if (!response.ok) {
+        throw new ResponseError(`API error: ${response.status ?? 500}`, response)
+      }
+      return response
+    } finally {
+      this.status = FetchStatus.done
+    }
+  }
+
+  public abort(): void {
+    this.controller.abort()
+  }
+}
+
+export class ResponseError extends Error {
+  constructor(
+    message: string,
+    public readonly response: Response,
+  ) {
+    super(message)
+  }
+}
+
+export const abortableFetch = (url: string, options: AbortableFetchOptions) => new AbortableFetch(url, options)

package/dist/assets/dps/components/address-autosuggest/autosuggest-address.d.ts

@@ -0,0 +1,18 @@
+import { type AddressSuggestion, type AddressSuggestions } from './autosuggest-ui';
+export declare class AutosuggestAddress {
+    readonly context: HTMLDivElement;
+    readonly input: HTMLInputElement;
+    readonly container: HTMLDivElement;
+    readonly uprn: HTMLInputElement;
+    private readonly findUrl;
+    private readonly fetchDelay;
+    private fetch;
+    private autosuggest;
+    constructor(context: HTMLDivElement);
+    private checkAPIStatus;
+    suggestAddresses(query: string): Promise<AddressSuggestions>;
+    private findAddress;
+    private mapFindResults;
+    private addressMapping;
+    onAddressSelect(selectedResult: AddressSuggestion): Promise<void>;
+}

package/dist/assets/dps/components/address-autosuggest/autosuggest-address.js

@@ -1,18 +1,30 @@
-import { AutosuggestUi, NoResults } from './autosuggest-ui.js';
+import AutosuggestUi, { NoResults } from './autosuggest-ui.js';
 import { abortableFetch, abortError, FetchStatus } from './abortable-fetch.js';
 
 // Based on ONSDigital's https://github.com/ONSdigital/design-system/blob/main/src/components/address-input/autosuggest.address.js
+/* eslint-disable import/prefer-default-export, @stylistic/lines-between-class-members */
 const classUPRN = 'hmpps-js-uprn';
 const classInputContainer = 'hmpps-address-autosuggest';
 const classInput = 'hmpps-js-autosuggest-input';
 class AutosuggestAddress {
+    context;
+    input;
+    container;
+    uprn;
+    findUrl;
+    fetchDelay;
+    fetch;
+    autosuggest;
     constructor(context) {
         this.context = context;
         this.input = context.querySelector(`.${classInput}`);
         this.container = context.querySelector(`.${classInputContainer}`);
         this.uprn = context.querySelector(`.${classUPRN}`);
-        this.findUrl = this.container.getAttribute('data-find-url');
-        this.fetchDelay = this.container.getAttribute('data-fetch-delay');
+        this.findUrl = this.container.dataset.findUrl;
+        const fetchDelay = Number.parseInt(this.container.dataset.fetchDelay, 10);
+        if (Number.isSafeInteger(fetchDelay)) {
+            this.fetchDelay = fetchDelay;
+        }
         // State:
         this.fetch = null;
         // Initialise autosuggest:
@@ -34,7 +46,7 @@ class AutosuggestAddress {
             }
         }
         catch (error) {
-            if (error.name !== abortError) {
+            if (error && typeof error === 'object' && 'name' in error && error.name !== abortError) {
                 this.autosuggest.handleNoResults(NoResults.server_error);
             }
         }
@@ -51,29 +63,31 @@ class AutosuggestAddress {
         this.fetch = abortableFetch(`${this.findUrl}/${query}`, { fetchDelay: this.fetchDelay });
         const data = await this.fetch.send();
         const response = await data.json();
-        const status = response.status;
-        const addresses = response.results;
-        return this.mapFindResults(addresses, status);
+        return this.mapFindResults(response);
     }
-    mapFindResults(results, status) {
-        if (!results)
+    mapFindResults(response) {
+        const { status } = response;
+        if (!('results' in response)) {
             return { status };
+        }
+        const { results } = response;
         return {
             results: this.addressMapping(results),
-            status: status,
+            status,
         };
     }
     addressMapping(addresses) {
-        if (!addresses?.length)
+        if (!addresses?.length) {
             return [];
+        }
         return addresses.map(address => ({ uprn: address.uprn, displayText: address.addressString }));
     }
     async onAddressSelect(selectedResult) {
         if (this.fetch && this.fetch.status !== FetchStatus.done) {
             this.fetch.abort();
         }
-        this.autosuggest.input.value = selectedResult.displayText;
-        this.uprn.value = selectedResult.uprn;
+        this.autosuggest.input.value = selectedResult.displayText ? selectedResult.displayText : '';
+        this.uprn.value = `${selectedResult.uprn}`;
     }
 }
 

package/dist/assets/dps/components/address-autosuggest/autosuggest-address.ts

@@ -0,0 +1,108 @@
+// Based on ONSDigital's https://github.com/ONSdigital/design-system/blob/main/src/components/address-input/autosuggest.address.js
+/* eslint-disable import/prefer-default-export, @stylistic/lines-between-class-members */
+
+import type { AddressAutosuggestResponse } from '../../../../types/public/addressAutosuggest/addressAutosuggestResponse'
+import type { OsAddress } from '../../../../types/public/addressAutosuggest/osAddress'
+import AutosuggestUi, { type AddressSuggestion, type AddressSuggestions, NoResults } from './autosuggest-ui'
+import { type AbortableFetch, abortableFetch, abortError, FetchStatus } from './abortable-fetch'
+
+const classUPRN = 'hmpps-js-uprn'
+const classInputContainer = 'hmpps-address-autosuggest'
+const classInput = 'hmpps-js-autosuggest-input'
+
+export class AutosuggestAddress {
+  public readonly input: HTMLInputElement
+  public readonly container: HTMLDivElement
+  public readonly uprn: HTMLInputElement
+  private readonly findUrl: string
+  private readonly fetchDelay: number | undefined
+  private fetch: AbortableFetch | null
+  private autosuggest: AutosuggestUi
+
+  constructor(public readonly context: HTMLDivElement) {
+    this.input = context.querySelector(`.${classInput}`)!
+    this.container = context.querySelector(`.${classInputContainer}`)!
+    this.uprn = context.querySelector(`.${classUPRN}`)!
+    this.findUrl = this.container.dataset.findUrl!
+    const fetchDelay = Number.parseInt(this.container.dataset.fetchDelay!, 10)
+    if (Number.isSafeInteger(fetchDelay)) {
+      this.fetchDelay = fetchDelay
+    }
+
+    // State:
+    this.fetch = null
+
+    // Initialise autosuggest:
+    this.autosuggest = new AutosuggestUi({
+      context: this.container,
+      onSelect: this.onAddressSelect.bind(this),
+      suggestionFunction: this.suggestAddresses.bind(this),
+    })
+
+    // Check API status:
+    this.checkAPIStatus()
+  }
+
+  private async checkAPIStatus(): Promise<void> {
+    this.fetch = abortableFetch(`${this.findUrl}/SW1H9AJ`, { fetchDelay: this.fetchDelay })
+
+    try {
+      const response = await this.fetch.send()
+      const status = response && ((await response.json()) as AddressAutosuggestResponse).status
+      if (status !== 200) {
+        this.autosuggest.handleNoResults(NoResults.server_error)
+      }
+    } catch (error) {
+      if (error && typeof error === 'object' && 'name' in error && error.name !== abortError) {
+        this.autosuggest.handleNoResults(NoResults.server_error)
+      }
+    }
+  }
+
+  public async suggestAddresses(query: string): Promise<AddressSuggestions> {
+    if (this.fetch && this.fetch.status !== FetchStatus.done) {
+      this.fetch.abort()
+    }
+
+    // Reset any previously selected result:
+    this.uprn.value = ''
+
+    return await this.findAddress(query?.replace(/[^A-Z0-9-.' ]/gi, ''))
+  }
+
+  private async findAddress(query: string): Promise<AddressSuggestions> {
+    this.fetch = abortableFetch(`${this.findUrl}/${query}`, { fetchDelay: this.fetchDelay })
+    const data = await this.fetch.send()
+    const response: AddressAutosuggestResponse = await data.json()
+    return this.mapFindResults(response)
+  }
+
+  private mapFindResults(response: AddressAutosuggestResponse): AddressSuggestions {
+    const { status } = response
+    if (!('results' in response)) {
+      return { status }
+    }
+    const { results } = response
+    return {
+      results: this.addressMapping(results),
+      status,
+    }
+  }
+
+  private addressMapping(addresses: OsAddress[]): AddressSuggestion[] {
+    if (!addresses?.length) {
+      return []
+    }
+
+    return addresses.map(address => ({ uprn: address.uprn, displayText: address.addressString }))
+  }
+
+  public async onAddressSelect(selectedResult: AddressSuggestion): Promise<void> {
+    if (this.fetch && this.fetch.status !== FetchStatus.done) {
+      this.fetch.abort()
+    }
+
+    this.autosuggest.input.value = selectedResult.displayText ? selectedResult.displayText : ''
+    this.uprn.value = `${selectedResult.uprn}`
+  }
+}

package/dist/assets/dps/components/address-autosuggest/autosuggest-ui.d.ts

@@ -0,0 +1,82 @@
+export declare const NoResults: {
+    readonly type_more: "TYPE_MORE";
+    readonly no_match: "NO_MATCH";
+    readonly server_error: "SERVER_ERROR";
+};
+type NoResults = typeof NoResults;
+export interface AddressSuggestion {
+    displayText?: string;
+    uprn?: number;
+}
+export interface AddressSuggestions {
+    status: number;
+    results?: AddressSuggestion[];
+}
+type AddressSuggestionFunction = (query: string) => Promise<AddressSuggestions>;
+type AddressSelectedCallback = (selectedResult: AddressSuggestion) => Promise<void>;
+interface AutosuggestUiOptions {
+    context: HTMLDivElement;
+    suggestionFunction: AddressSuggestionFunction;
+    onSelect: AddressSelectedCallback;
+}
+export default class AutosuggestUi {
+    private readonly context;
+    readonly input: HTMLInputElement;
+    private readonly resultsContainer;
+    private readonly resultsTitleContainer;
+    private readonly listbox;
+    private readonly instructions;
+    private readonly errorContainer;
+    private readonly errorTextContainer;
+    private readonly ariaStatus;
+    private readonly minChars;
+    private readonly ariaYouHaveSelected;
+    private readonly ariaMinChars;
+    private readonly ariaOneResult;
+    private readonly ariaNResults;
+    private readonly noResults;
+    private readonly typeMore;
+    private readonly listboxId;
+    private readonly errorMessage;
+    private readonly stylingBaseClass;
+    private readonly fetchSuggestions;
+    private readonly onSelect;
+    private query;
+    private sanitisedQuery;
+    private results;
+    private resultOptions;
+    private numberOfResults;
+    private blurring;
+    private blurTimeout;
+    private scrolling;
+    private scrollTimeout;
+    private inputTimeout;
+    private highlightedResultIndex;
+    constructor({ context, onSelect, suggestionFunction }: AutosuggestUiOptions);
+    private initialiseUI;
+    private bindEventListeners;
+    private handleKeydown;
+    private handleKeyup;
+    private handleChange;
+    private handleBlur;
+    private handleFocus;
+    private handleScroll;
+    private checkCharCount;
+    private navigateResults;
+    private sanitiseAutosuggestText;
+    private getSuggestions;
+    private unsetResults;
+    private clearListbox;
+    private handleResults;
+    private createListElement;
+    handleNoResults(reason: NoResults[keyof NoResults]): void;
+    private displayAPIError;
+    private setHighlightedResult;
+    private selectResult;
+    private setAriaStatus;
+    private emboldenMatch;
+    private escapeRegExp;
+    private isAboveViewport;
+    private isBelowViewport;
+}
+export {};