@hmcts/opal-frontend-common 0.0.108 → 0.0.110

package/fesm2022/hmcts-opal-frontend-common-components-abstract-abstract-form-base.mjs

@@ -1,617 +1,341 @@
-import * as i0 from '@angular/core';
-import { inject, ChangeDetectorRef, EventEmitter, Output, Component } from '@angular/core';
-import { FormRecord, FormGroup, FormArray, FormControl } from '@angular/forms';
-import { Router, ActivatedRoute } from '@angular/router';
-import { Subject, takeUntil } from 'rxjs';
-import { UtilsService } from '@hmcts/opal-frontend-common/services/utils-service';
-
-class AbstractFormBaseComponent {
-    changeDetectorRef = inject(ChangeDetectorRef);
-    router = inject(Router);
-    activatedRoute = inject(ActivatedRoute);
-    unsavedChanges = new EventEmitter();
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    formSubmit = new EventEmitter();
-    utilsService = inject(UtilsService);
-    fieldErrors;
-    formSubmitted = false;
-    ngUnsubscribe = new Subject();
-    form;
-    formControlErrorMessages;
-    formErrorSummaryMessage;
-    formErrors;
-    constructor() { }
-    /**
-     * Scrolls to a specific form field and attempts to focus on it.
-     *
-     * This method locates the target field or its associated label/legend
-     * based on the provided `fieldId`. It ensures that the field or its
-     * nested focusable element is brought into view and focused, if possible.
-     *
-     * The scrolling behavior is smooth, and the method prioritizes the following
-     * elements in order:
-     * 1. A label associated with an autocomplete field (`label[for="${fieldId}-autocomplete"]`).
-     * 2. A regular label associated with the field (`label[for="${fieldId}"]`).
-     * 3. A legend within a fieldset associated with the field (`[id="${fieldId}"] .govuk-fieldset__legend`).
-     * 4. The field itself or its nested focusable element.
-     *
-     * @param fieldId - The ID of the form field to scroll to and focus on.
-     */
-    scroll(fieldId) {
-        const autocompleteLabel = document.querySelector(`label[for="${fieldId}-autocomplete"]`);
-        const regularLabel = document.querySelector(`label[for="${fieldId}"]`);
-        const fieldsetLegend = document.querySelector(`[id="${fieldId}"] .govuk-fieldset__legend`);
-        const labelTarget = autocompleteLabel ?? regularLabel ?? fieldsetLegend ?? null;
-        const focusableSelector = 'input:not([type="hidden"]), select, textarea, button, [tabindex]:not([tabindex="-1"])';
-        let fieldElement = document.getElementById(`${fieldId}-autocomplete`) ?? document.getElementById(fieldId);
-        if (fieldElement && !this.canReceiveFocus(fieldElement)) {
-            const nestedFocusable = fieldElement.querySelector(focusableSelector);
-            if (nestedFocusable) {
-                fieldElement = nestedFocusable;
-            }
-        }
-        fieldElement ??= document.querySelector(`[id="${fieldId}"] ${focusableSelector}`);
-        if (labelTarget) {
-            labelTarget.scrollIntoView({ behavior: 'smooth' });
-        }
-        else if (fieldElement) {
-            fieldElement.scrollIntoView({ behavior: 'smooth' });
-        }
-        fieldElement?.focus();
-    }
-    /**
-     * Determines whether a given HTML element can receive focus.
-     *
-     * An element is considered focusable if:
-     * - It has a `tabIndex` greater than or equal to 0 and does not have the `disabled` attribute.
-     * - It is an anchor (`<a>`) element with a valid `href` attribute.
-     * - It is one of the following tags: `INPUT`, `SELECT`, `TEXTAREA`, or `BUTTON`,
-     *   and it is not disabled.
-     *
-     * @param element - The HTML element to check for focusability.
-     * @returns `true` if the element can receive focus, otherwise `false`.
-     */
-    canReceiveFocus(element) {
-        if (element.tabIndex >= 0 && !element.hasAttribute('disabled')) {
-            return true;
-        }
-        if (element instanceof HTMLAnchorElement && element.hasAttribute('href') && element.href) {
-            return !!element.href;
-        }
-        const focusableTags = ['INPUT', 'SELECT', 'TEXTAREA', 'BUTTON'];
-        if (focusableTags.includes(element.tagName)) {
-            return !element.disabled;
-        }
-        return false;
-    }
-    /**
-     * Returns the highest priority form error from the given error keys and field errors.
-     * @param errorKeys - An array of error keys.
-     * @param fieldErrors - An object containing field errors.
-     * @returns The highest priority form error or null if no errors are found.
-     */
-    getHighestPriorityError(errorKeys = [], fieldErrors = {}) {
-        if (errorKeys.length && Object.keys(fieldErrors).length) {
-            const errors = errorKeys.map((errorType) => {
-                return {
-                    ...fieldErrors[errorType],
-                    type: errorType,
-                };
-            });
-            const sortedErrors = [...errors].sort((a, b) => a.priority - b.priority);
-            return sortedErrors[0];
-        }
-        return null;
-    }
-    /**
-     * Retrieves the details of the highest priority form error for a given control path.
-     * @param controlPath - The path to the control in the form.
-     * @returns The details of the highest priority form error, or null if there are no errors.
-     */
-    getFieldErrorDetails(controlPath) {
-        // Get the control
-        const control = this.form.get(controlPath);
-        // If we have errors
-        const controlErrors = control?.errors;
-        if (controlErrors) {
-            /// Get all the error keys
-            // Use Array.prototype.at for clarity when accessing the last segment of the control path
-            const controlKey = controlPath.at(-1);
-            const errorKeys = Object.keys(controlErrors) || [];
-            const fieldErrors = controlKey === undefined ? {} : this.fieldErrors[controlKey] || {};
-            if (errorKeys.length && Object.keys(fieldErrors).length) {
-                return this.getHighestPriorityError(errorKeys, fieldErrors);
-            }
-        }
-        return null;
-    }
-    /**
-     * Retrieves all form errors from the provided form and its nested form groups.
-     *
-     * @param form - The form group to retrieve errors from.
-     * @param controlPath - An optional array representing the path to the current control within the form group.
-     * @returns An array of form errors, each containing the field ID, error message, priority, and type.
-     */
-    getFormErrors(form, controlPath = []) {
-        // recursively get all errors from all controls in the form including nested form group controls
-        const formControls = form.controls;
-        const errorSummary = Object.keys(formControls)
-            .filter((controlName) => formControls[controlName].invalid)
-            .flatMap((controlName) => {
-            const control = formControls[controlName];
-            if (control instanceof FormRecord) {
-                // We only support FormControls in FormRecords
-                const recordFieldErrorDetails = this.getFieldErrorDetails([...controlPath, controlName]);
-                return {
-                    fieldId: controlName,
-                    message: recordFieldErrorDetails?.message ?? null,
-                    priority: recordFieldErrorDetails?.priority ?? 999999999,
-                    type: recordFieldErrorDetails?.type ?? null,
-                };
-            }
-            if (control instanceof FormGroup) {
-                return this.getFormErrors(control, [...controlPath, controlName]);
-            }
-            if (control instanceof FormArray) {
-                return control.controls.flatMap((controlItem, index) => {
-                    // We only support FormGroups in FormArrays
-                    if (controlItem instanceof FormGroup) {
-                        return this.getFormErrors(controlItem, [...controlPath, controlName, index]);
-                    }
-                    return [];
-                });
-            }
-            const getFieldErrorDetails = this.getFieldErrorDetails([...controlPath, controlName]);
-            // Return the error summary entry
-            // If we don't have the error details, return a null message
-            return {
-                fieldId: controlName,
-                message: getFieldErrorDetails?.message ?? null,
-                priority: getFieldErrorDetails?.priority ?? 999999999,
-                type: getFieldErrorDetails?.type ?? null,
-            };
-        });
-        // Remove any null errors
-        return errorSummary.filter((item) => item?.message !== null);
-    }
-    /**
-     * Sets the error messages for the form controls and error summary based on the provided form errors.
-     * @param formErrors - An array of form errors containing field IDs and error messages.
-     */
-    setErrorMessages(formErrors) {
-        // Reset the form error messages
-        this.formControlErrorMessages = {};
-        this.formErrorSummaryMessage = [];
-        // Set the form error messages based on the error summary entries
-        for (const entry of formErrors) {
-            this.formControlErrorMessages[entry.fieldId] = entry.message;
-            this.formErrorSummaryMessage.push({ fieldId: entry.fieldId, message: entry.message });
-        }
-    }
-    /**
-     * Gets the indexes of the date fields to remove based on the form error summary message.
-     * @returns An array of indexes representing the date fields to remove.
-     */
-    getDateFieldsToRemoveIndexes() {
-        const indexesToRemove = [];
-        // The order of the field ids is important
-        // this is the order in which we want to remove them
-        const foundIndexes = this.getFormErrorSummaryIndex(['dayOfMonth', 'monthOfYear', 'year'], this.formErrorSummaryMessage);
-        // Determine which indexes to remove based on the found fields
-        switch (foundIndexes.length) {
-            case 3:
-                // All three date fields are present
-                indexesToRemove.push(foundIndexes[1], foundIndexes[2]);
-                break;
-            case 2:
-                // Two date fields are present
-                indexesToRemove.push(foundIndexes[1]);
-                break;
-        }
-        return indexesToRemove;
-    }
-    /**
-     * Returns an array of indices corresponding to the positions of the given field IDs in the form error summary message array.
-     *
-     * @param fieldIds - An array of field IDs to search for in the form error summary message array.
-     * @param formErrorSummaryMessage - An array of form error summary messages.
-     * @returns An array of indices corresponding to the positions of the field IDs in the form error summary message array.
-     */
-    getFormErrorSummaryIndex(fieldIds, formErrorSummaryMessage) {
-        return fieldIds.reduce((acc, field) => {
-            const index = formErrorSummaryMessage.findIndex((error) => error.fieldId === field);
-            if (index === -1) {
-                return acc;
-            }
-            return [...acc, index];
-        }, []);
-    }
-    /**
-     * Removes error summary messages from the given array based on the specified indexes.
-     *
-     * @param formErrorSummaryMessage - The array of error summary messages.
-     * @param indexes - The indexes of the error summary messages to be removed.
-     * @returns The updated array of error summary messages.
-     */
-    removeErrorSummaryMessages(formErrorSummaryMessage, indexes) {
-        return formErrorSummaryMessage.filter((_, index) => !indexes.includes(index));
-    }
-    /**
-     * Splits the form errors into two arrays based on the provided field IDs.
-     * Errors with field IDs included in the fieldIds array will be moved to the removedFormErrors array,
-     * while the remaining errors will be moved to the cleanFormErrors array.
-     *
-     * @param fieldIds - An array of field IDs to filter the form errors.
-     * @param formErrors - An array of form errors to be split.
-     * @returns An array containing two arrays: cleanFormErrors and removedFormErrors.
-     */
-    splitFormErrors(fieldIds, formErrors) {
-        const cleanFormErrors = [];
-        const removedFormErrors = [];
-        for (const error of formErrors) {
-            if (fieldIds.includes(error.fieldId)) {
-                removedFormErrors.push(error);
-            }
-            else {
-                cleanFormErrors.push(error);
-            }
-        }
-        return [cleanFormErrors, removedFormErrors];
-    }
-    /**
-     * Manipulates the error message for specific fields in the formErrors array.
-     * @param fields - An array of field IDs to target for error message manipulation.
-     * @param messageOverride - The new error message to be used for the targeted fields.
-     * @param errorType - The type of error to match for the targeted fields.
-     * @param formErrors - An array of IFormError objects representing the form errors.
-     * @returns An array of IFormError objects with the manipulated error messages.
-     */
-    manipulateFormErrorMessage(fields, messageOverride, errorType, formErrors) {
-        const manipulatedFields = [];
-        for (const field of formErrors) {
-            if (fields.includes(field.fieldId)) {
-                if (field.type === errorType) {
-                    manipulatedFields.push({ ...field, message: messageOverride });
-                }
-                else {
-                    manipulatedFields.push(field);
-                }
-                continue;
-            }
-            manipulatedFields.push(field);
-        }
-        return manipulatedFields;
-    }
-    /**
-     * Retrieves the form errors with the highest priority.
-     *
-     * @param formErrors - An array of form errors.
-     * @returns An array of form errors with the highest priority.
-     */
-    getHighPriorityFormErrors(formErrors) {
-        // Get the lowest priority (1 is the highest priority, 3 is the lowest priority)
-        const lowestPriority = Math.min(...formErrors.map((item) => item.priority));
-        return formErrors.filter((item) => item.priority === lowestPriority);
-    }
-    /**
-     * Focuses on the error summary element and scrolls to the top of the page.
-     *
-     * This method first triggers change detection to ensure the view is up-to-date.
-     * It then selects the error summary element with the class 'govuk-error-summary'.
-     * If the error summary element is found, it sets focus on it without scrolling the page.
-     * Finally, it calls a utility service to scroll to the top of the page.
-     *
-     * @private
-     */
-    focusAndScrollToErrorSummary() {
-        this.changeDetectorRef.detectChanges();
-        const errorSummary = document.querySelector('.govuk-error-summary');
-        if (errorSummary) {
-            errorSummary.focus({ preventScroll: true });
-            this.utilsService.scrollToTop();
-        }
-    }
-    /**
-     * Setup listener for the form value changes and to emit hasUnsavedChanges
-     */
-    setupListener() {
-        this.form.valueChanges.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
-            this.unsavedChanges.emit(this.hasUnsavedChanges());
-        });
-    }
-    /**
-     * Adds controls to a form group.
-     *
-     * @param formGroup - The form group to add controls to.
-     * @param controls - An array of form array control validations.
-     * @param index - The index of the form array control.
-     */
-    addControlsToFormGroup(formGroup, controls, index) {
-        for (const { controlName, validators } of controls) {
-            formGroup.addControl(`${controlName}_${index}`, new FormControl(null, validators));
-        }
-    }
-    /**
-     * Creates a form control with the specified validators and initial value.
-     *
-     * @param validators - An array of validator functions.
-     * @param initialValue - The initial value for the form control. Defaults to null.
-     * @returns The created form control.
-     */
-    createFormControl(validators, initialValue = null) {
-        return new FormControl(initialValue, { validators: [...validators] });
-    }
-    /**
-     * Handles the error messages and populates the relevant variables
-     */
-    handleErrorMessages() {
-        this.formErrors = this.getFormErrors(this.form);
-        this.setErrorMessages(this.formErrors);
-        this.formErrorSummaryMessage = this.removeErrorSummaryMessages(this.formErrorSummaryMessage, this.getDateFieldsToRemoveIndexes());
-    }
-    /**
-     * Checks whether the form has been touched and submitted
-     *
-     * @returns boolean
-     */
-    hasUnsavedChanges() {
-        return this.form.dirty && !this.formSubmitted;
-    }
-    /**
-     * Sets the value of a form control specified by its path and marks it as touched.
-     *
-     * @param value - The value to set for the form control.
-     * @param controlPath - The dot-delimited path to the form control within the form group.
-     */
-    setInputValue(value, controlPath) {
-        const control = this.form.get(controlPath);
-        if (control) {
-            control.patchValue(value);
-            control.markAsTouched();
-        }
-    }
-    /**
-     * Handles the form errors for the date input fields.
-     * @param formErrors - An array of form errors.
-     * @returns An array of form errors with the manipulated error messages.
-     */
-    handleDateInputFormErrors() {
-        const dateInputFields = ['dayOfMonth', 'monthOfYear', 'year'];
-        const splitFormErrors = this.splitFormErrors(dateInputFields, this.formErrors);
-        const highPriorityDateControlErrors = this.getHighPriorityFormErrors(splitFormErrors[1]);
-        let manipulatedFormErrors = highPriorityDateControlErrors;
-        // If we have more than one error then we want to manipulate the error message
-        if (highPriorityDateControlErrors.length > 1) {
-            manipulatedFormErrors = this.manipulateFormErrorMessage(dateInputFields, 'Please enter a DOB', 'required', manipulatedFormErrors);
-        }
-        return [...splitFormErrors[0], ...manipulatedFormErrors];
-    }
-    /**
-     * Sets the initial error messages for the form controls.
-     *
-     * @param form - The FormGroup instance.
-     */
-    setInitialErrorMessages() {
-        const formControls = this.form.controls;
-        const initialFormControlErrorMessages = {};
-        for (const controlName of Object.keys(formControls)) {
-            initialFormControlErrorMessages[controlName] = null;
-        }
-        this.formControlErrorMessages = initialFormControlErrorMessages;
-        this.formErrorSummaryMessage = [];
-    }
-    /**
-     * Repopulates the search form with the data from the account enquiry search.
-     * @param state - The state object containing the search form data.
-     */
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    rePopulateForm(state) {
-        this.form.patchValue(state);
-    }
-    /**
-     * Adds a new form control to the form group.
-     *
-     * @param controlName - The name of the control to add.
-     * @param validators - An array of validators to apply to the control.
-     */
-    createControl(controlName, validators) {
-        this.form.addControl(controlName, new FormControl(null, validators));
-    }
-    /**
-     * Updates the validators of an existing form control.
-     *
-     * @param controlName - The name of the control to update.
-     * @param validators - An array of validators to apply to the control.
-     */
-    updateControl(controlName, validators) {
-        const control = this.form.get(controlName);
-        if (control) {
-            control.setValidators(validators);
-            control.updateValueAndValidity();
-        }
-        else {
-            this.createControl(controlName, validators);
-        }
-    }
-    /**
-     * Removes a control from the form.
-     *
-     * @param controlName - The name of the control to remove.
-     */
-    removeControl(controlName) {
-        if (this.formControlErrorMessages[controlName]) {
-            this.removeControlErrors(controlName);
-        }
-        this.form.removeControl(controlName);
-    }
-    /**
-     * Removes the error message associated with the specified control name from the formControlErrorMessages object.
-     *
-     * @param controlName - The name of the control for which to remove the error message.
-     */
-    removeControlErrors(controlName) {
-        delete this.formControlErrorMessages[controlName];
-    }
-    /**
-     * Clears all error messages from the form.
-     */
-    clearAllErrorMessages() {
-        this.formControlErrorMessages = {};
-        this.formErrorSummaryMessage = [];
-        this.formErrors = [];
-        this.form.updateValueAndValidity({ onlySelf: false, emitEvent: false });
-    }
-    /**
-     * Create a plain object from a FormRecord of FormControls.
-     *
-     * What it does: copies each control's current value onto a plain object.
-     * When to use: when you need the raw values from a FormRecord (e.g. to send to an API).
-     *
-     * Example
-     * -------
-     * // record: FormRecord<FormControl<string | null>> with a single control 'firstName'
-     * const out = this.objectFromFormRecord(record, {
-     *   mapKey: k => k,            // optional (defaults to identity)
-     *   mapValue: v => v ?? ''     // turn null/undefined into ''
-     * });
-     * // out -> { firstName: '' }
-     *
-     * @typeParam T - Control value type.
-     * @typeParam U - Output value type (defaults to T).
-     * @typeParam K - Output key type (defaults to string). Control names are strings; provide `mapKey` if you need numbers.
-     */
-    objectFromFormRecord(controlRecord, options) {
-        const mapKey = options?.mapKey ?? ((k) => k);
-        const mapValue = options?.mapValue ?? ((v) => v);
-        const result = {};
-        for (const [name, control] of Object.entries(controlRecord.controls)) {
-            result[mapKey(name)] = mapValue(control.value);
-        }
-        return result;
-    }
-    /**
-     * Patch a FormRecord of FormControls from a plain object.
-     *
-     * What it does: for each entry in `values`, finds the matching control by name
-     * (optionally mapped via `mapKey`) and sets its value **only if** it changes.
-     * When to use: when you need to patch many controls at once, without
-     * triggering extra updates for unchanged values.
-     *
-     * Example
-     * -------
-     * // controlRecord: FormRecord<FormControl<string>> with controls 'firstName', 'lastName'
-     * this.patchFormRecordFromObject(controlRecord, { firstName: 'Ada', lastName: 'Lovelace' }, {
-     *   emitEvent: true,
-     *   isEqual: (a, b) => a === b,
-     *   // mapKey: k => `ctrl_${k as string}` // optional: map incoming keys to control names
-     * });
-     *
-     * @typeParam T - Control value type.
-     * @typeParam K - Keys present in the `values` object (string or number).
-     */
-    patchFormRecordFromObject(controlRecord, values, options) {
-        const emitEvent = options?.emitEvent ?? false;
-        const mapKey = options?.mapKey ?? String;
-        const isEqual = options?.isEqual ?? Object.is;
-        for (const [k, v] of Object.entries(values)) {
-            const controlName = mapKey(k);
-            const ctrl = controlRecord.get(controlName);
-            if (!ctrl) {
-                // If the control isn't present, skip silently. Callers can validate separately.
-                continue;
-            }
-            if (!isEqual(ctrl.value, v)) {
-                ctrl.setValue(v, { emitEvent });
-            }
-        }
-    }
-    /**
-     * Clears the search form.
-     */
-    handleClearForm() {
-        this.form.reset();
-    }
-    /**
-     * Handles the scroll of the component error from the summary
-     *
-     * @param fieldId - Field id of the component
-     */
-    scrollTo(fieldId) {
-        this['scroll'](fieldId);
-    }
-    /**
-     * Handles route with the supplied route
-     *
-     * @param route string of route
-     * @param options optional parameters
-     */
-    handleRoute(route, options) {
-        const { nonRelative = false, event, routeData, fragment } = options ?? {};
-        if (event) {
-            event.preventDefault();
-        }
-        this.unsavedChanges.emit(this.hasUnsavedChanges());
-        const navigationExtras = {
-            ...(nonRelative ? {} : { relativeTo: this.activatedRoute.parent }),
-            ...(routeData ? { state: routeData } : {}),
-            ...(fragment ? { fragment } : {}),
-        };
-        this.router.navigate([route], navigationExtras);
-    }
-    /**
-     * Handles the form submission event.
-     *
-     * @param event - The form submission event.
-     * @returns void
-     */
-    handleFormSubmit(event) {
-        this.handleErrorMessages();
-        if (this.form.valid) {
-            this.formSubmitted = true;
-            const nestedFlow = event.submitter ? event.submitter.className.includes('nested-flow') : false;
-            this.unsavedChanges.emit(this.hasUnsavedChanges());
-            this.formSubmit.emit({ formData: this.form.value, nestedFlow: nestedFlow });
-        }
-        else {
-            this.focusAndScrollToErrorSummary();
-        }
-    }
-    /**
-     * Handles the input event to convert all letters in the input value to uppercase.
-     * This method is triggered by an input event and modifies the input value directly.
-     *
-     * @param event - The input event triggered by the user.
-     */
-    handleUppercaseInputMask(event) {
-        const input = event.target;
-        input.value = this.utilsService.upperCaseAllLetters(input.value);
-    }
-    ngOnInit() {
-        if (this.form) {
-            this.setupListener();
-        }
-    }
-    ngOnDestroy() {
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: AbstractFormBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.21", type: AbstractFormBaseComponent, isStandalone: true, selector: "ng-component", outputs: { unsavedChanges: "unsavedChanges", formSubmit: "formSubmit" }, ngImport: i0, template: '', isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: AbstractFormBaseComponent, decorators: [{
-            type: Component,
-            args: [{
-                    template: '',
-                }]
-        }], ctorParameters: () => [], propDecorators: { unsavedChanges: [{
-                type: Output
-            }], formSubmit: [{
-                type: Output
-            }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+import * as i0 from "@angular/core";
+import { ChangeDetectorRef, Component, EventEmitter, Output, inject } from "@angular/core";
+import { FormArray, FormControl, FormGroup, FormRecord } from "@angular/forms";
+import { ActivatedRoute, Router } from "@angular/router";
+import { Subject, takeUntil } from "rxjs";
+import { UtilsService } from "@hmcts/opal-frontend-common/services/utils-service";
+var AbstractFormBaseComponent = class AbstractFormBaseComponent {
+	changeDetectorRef = inject(ChangeDetectorRef);
+	router = inject(Router);
+	activatedRoute = inject(ActivatedRoute);
+	unsavedChanges = new EventEmitter();
+	formSubmit = new EventEmitter();
+	utilsService = inject(UtilsService);
+	fieldErrors;
+	formSubmitted = false;
+	ngUnsubscribe = new Subject();
+	form;
+	formControlErrorMessages;
+	formErrorSummaryMessage;
+	formErrors;
+	constructor() {}
+	scroll(fieldId) {
+		const autocompleteLabel = document.querySelector(`label[for="${fieldId}-autocomplete"]`);
+		const regularLabel = document.querySelector(`label[for="${fieldId}"]`);
+		const fieldsetLegend = document.querySelector(`[id="${fieldId}"] .govuk-fieldset__legend`);
+		const labelTarget = autocompleteLabel ?? regularLabel ?? fieldsetLegend ?? null;
+		const focusableSelector = "input:not([type=\"hidden\"]), select, textarea, button, [tabindex]:not([tabindex=\"-1\"])";
+		let fieldElement = document.getElementById(`${fieldId}-autocomplete`) ?? document.getElementById(fieldId);
+		if (fieldElement && !this.canReceiveFocus(fieldElement)) {
+			const nestedFocusable = fieldElement.querySelector(focusableSelector);
+			if (nestedFocusable) fieldElement = nestedFocusable;
+		}
+		fieldElement ??= document.querySelector(`[id="${fieldId}"] ${focusableSelector}`);
+		if (labelTarget) labelTarget.scrollIntoView({ behavior: "smooth" });
+		else if (fieldElement) fieldElement.scrollIntoView({ behavior: "smooth" });
+		fieldElement?.focus();
+	}
+	canReceiveFocus(element) {
+		if (element.tabIndex >= 0 && !element.hasAttribute("disabled")) return true;
+		if (element instanceof HTMLAnchorElement && element.hasAttribute("href") && element.href) return !!element.href;
+		if ([
+			"INPUT",
+			"SELECT",
+			"TEXTAREA",
+			"BUTTON"
+		].includes(element.tagName)) return !element.disabled;
+		return false;
+	}
+	getHighestPriorityError(errorKeys = [], fieldErrors = {}) {
+		if (errorKeys.length && Object.keys(fieldErrors).length) return [...errorKeys.map((errorType) => {
+			return {
+				...fieldErrors[errorType],
+				type: errorType
+			};
+		})].sort((a, b) => a.priority - b.priority)[0];
+		return null;
+	}
+	getFieldErrorDetails(controlPath) {
+		const controlErrors = this.form.get(controlPath)?.errors;
+		if (controlErrors) {
+			const controlKey = controlPath.at(-1);
+			const errorKeys = Object.keys(controlErrors) || [];
+			const fieldErrors = controlKey === void 0 ? {} : this.fieldErrors[controlKey] || {};
+			if (errorKeys.length && Object.keys(fieldErrors).length) return this.getHighestPriorityError(errorKeys, fieldErrors);
+		}
+		return null;
+	}
+	getFormErrors(form, controlPath = []) {
+		const formControls = form.controls;
+		return Object.keys(formControls).filter((controlName) => formControls[controlName].invalid).flatMap((controlName) => {
+			const control = formControls[controlName];
+			if (control instanceof FormRecord) {
+				const recordFieldErrorDetails = this.getFieldErrorDetails([...controlPath, controlName]);
+				return {
+					fieldId: controlName,
+					message: recordFieldErrorDetails?.message ?? null,
+					priority: recordFieldErrorDetails?.priority ?? 999999999,
+					type: recordFieldErrorDetails?.type ?? null
+				};
+			}
+			if (control instanceof FormGroup) return this.getFormErrors(control, [...controlPath, controlName]);
+			if (control instanceof FormArray) return control.controls.flatMap((controlItem, index) => {
+				if (controlItem instanceof FormGroup) return this.getFormErrors(controlItem, [
+					...controlPath,
+					controlName,
+					index
+				]);
+				return [];
+			});
+			const getFieldErrorDetails = this.getFieldErrorDetails([...controlPath, controlName]);
+			return {
+				fieldId: controlName,
+				message: getFieldErrorDetails?.message ?? null,
+				priority: getFieldErrorDetails?.priority ?? 999999999,
+				type: getFieldErrorDetails?.type ?? null
+			};
+		}).filter((item) => item?.message !== null);
+	}
+	setErrorMessages(formErrors) {
+		this.formControlErrorMessages = {};
+		this.formErrorSummaryMessage = [];
+		for (const entry of formErrors) {
+			this.formControlErrorMessages[entry.fieldId] = entry.message;
+			this.formErrorSummaryMessage.push({
+				fieldId: entry.fieldId,
+				message: entry.message
+			});
+		}
+	}
+	getDateFieldsToRemoveIndexes() {
+		const indexesToRemove = [];
+		const foundIndexes = this.getFormErrorSummaryIndex([
+			"dayOfMonth",
+			"monthOfYear",
+			"year"
+		], this.formErrorSummaryMessage);
+		switch (foundIndexes.length) {
+			case 3:
+				indexesToRemove.push(foundIndexes[1], foundIndexes[2]);
+				break;
+			case 2: indexesToRemove.push(foundIndexes[1]);
+		}
+		return indexesToRemove;
+	}
+	getFormErrorSummaryIndex(fieldIds, formErrorSummaryMessage) {
+		return fieldIds.reduce((acc, field) => {
+			const index = formErrorSummaryMessage.findIndex((error) => error.fieldId === field);
+			if (index === -1) return acc;
+			return [...acc, index];
+		}, []);
+	}
+	removeErrorSummaryMessages(formErrorSummaryMessage, indexes) {
+		return formErrorSummaryMessage.filter((_, index) => !indexes.includes(index));
+	}
+	splitFormErrors(fieldIds, formErrors) {
+		const cleanFormErrors = [];
+		const removedFormErrors = [];
+		for (const error of formErrors) if (fieldIds.includes(error.fieldId)) removedFormErrors.push(error);
+		else cleanFormErrors.push(error);
+		return [cleanFormErrors, removedFormErrors];
+	}
+	manipulateFormErrorMessage(fields, messageOverride, errorType, formErrors) {
+		const manipulatedFields = [];
+		for (const field of formErrors) {
+			if (fields.includes(field.fieldId)) {
+				if (field.type === errorType) manipulatedFields.push({
+					...field,
+					message: messageOverride
+				});
+				else manipulatedFields.push(field);
+				continue;
+			}
+			manipulatedFields.push(field);
+		}
+		return manipulatedFields;
+	}
+	getHighPriorityFormErrors(formErrors) {
+		const lowestPriority = Math.min(...formErrors.map((item) => item.priority));
+		return formErrors.filter((item) => item.priority === lowestPriority);
+	}
+	focusAndScrollToErrorSummary() {
+		this.changeDetectorRef.detectChanges();
+		const errorSummary = document.querySelector(".govuk-error-summary");
+		if (errorSummary) {
+			errorSummary.focus({ preventScroll: true });
+			this.utilsService.scrollToTop();
+		}
+	}
+	setupListener() {
+		this.form.valueChanges.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
+			this.unsavedChanges.emit(this.hasUnsavedChanges());
+		});
+	}
+	addControlsToFormGroup(formGroup, controls, index) {
+		for (const { controlName, validators } of controls) formGroup.addControl(`${controlName}_${index}`, new FormControl(null, validators));
+	}
+	createFormControl(validators, initialValue = null) {
+		return new FormControl(initialValue, { validators: [...validators] });
+	}
+	handleErrorMessages() {
+		this.formErrors = this.getFormErrors(this.form);
+		this.setErrorMessages(this.formErrors);
+		this.formErrorSummaryMessage = this.removeErrorSummaryMessages(this.formErrorSummaryMessage, this.getDateFieldsToRemoveIndexes());
+	}
+	hasUnsavedChanges() {
+		return this.form.dirty && !this.formSubmitted;
+	}
+	setInputValue(value, controlPath) {
+		const control = this.form.get(controlPath);
+		if (control) {
+			control.patchValue(value);
+			control.markAsTouched();
+		}
+	}
+	handleDateInputFormErrors() {
+		const dateInputFields = [
+			"dayOfMonth",
+			"monthOfYear",
+			"year"
+		];
+		const splitFormErrors = this.splitFormErrors(dateInputFields, this.formErrors);
+		const highPriorityDateControlErrors = this.getHighPriorityFormErrors(splitFormErrors[1]);
+		let manipulatedFormErrors = highPriorityDateControlErrors;
+		if (highPriorityDateControlErrors.length > 1) manipulatedFormErrors = this.manipulateFormErrorMessage(dateInputFields, "Please enter a DOB", "required", manipulatedFormErrors);
+		return [...splitFormErrors[0], ...manipulatedFormErrors];
+	}
+	setInitialErrorMessages() {
+		const formControls = this.form.controls;
+		const initialFormControlErrorMessages = {};
+		for (const controlName of Object.keys(formControls)) initialFormControlErrorMessages[controlName] = null;
+		this.formControlErrorMessages = initialFormControlErrorMessages;
+		this.formErrorSummaryMessage = [];
+	}
+	rePopulateForm(state) {
+		this.form.patchValue(state);
+	}
+	createControl(controlName, validators) {
+		this.form.addControl(controlName, new FormControl(null, validators));
+	}
+	updateControl(controlName, validators) {
+		const control = this.form.get(controlName);
+		if (control) {
+			control.setValidators(validators);
+			control.updateValueAndValidity();
+		} else this.createControl(controlName, validators);
+	}
+	removeControl(controlName) {
+		if (this.formControlErrorMessages[controlName]) this.removeControlErrors(controlName);
+		this.form.removeControl(controlName);
+	}
+	removeControlErrors(controlName) {
+		delete this.formControlErrorMessages[controlName];
+	}
+	clearAllErrorMessages() {
+		this.formControlErrorMessages = {};
+		this.formErrorSummaryMessage = [];
+		this.formErrors = [];
+		this.form.updateValueAndValidity({
+			onlySelf: false,
+			emitEvent: false
+		});
+	}
+	objectFromFormRecord(controlRecord, options) {
+		const mapKey = options?.mapKey ?? ((k) => k);
+		const mapValue = options?.mapValue ?? ((v) => v);
+		const result = {};
+		for (const [name, control] of Object.entries(controlRecord.controls)) result[mapKey(name)] = mapValue(control.value);
+		return result;
+	}
+	patchFormRecordFromObject(controlRecord, values, options) {
+		const emitEvent = options?.emitEvent ?? false;
+		const mapKey = options?.mapKey ?? String;
+		const isEqual = options?.isEqual ?? Object.is;
+		for (const [k, v] of Object.entries(values)) {
+			const controlName = mapKey(k);
+			const ctrl = controlRecord.get(controlName);
+			if (!ctrl) continue;
+			if (!isEqual(ctrl.value, v)) ctrl.setValue(v, { emitEvent });
+		}
+	}
+	handleClearForm() {
+		this.form.reset();
+	}
+	scrollTo(fieldId) {
+		this["scroll"](fieldId);
+	}
+	handleRoute(route, options) {
+		const { nonRelative = false, event, routeData, fragment } = options ?? {};
+		if (event) event.preventDefault();
+		this.unsavedChanges.emit(this.hasUnsavedChanges());
+		const navigationExtras = {
+			...nonRelative ? {} : { relativeTo: this.activatedRoute.parent },
+			...routeData ? { state: routeData } : {},
+			...fragment ? { fragment } : {}
+		};
+		this.router.navigate([route], navigationExtras);
+	}
+	handleFormSubmit(event) {
+		this.handleErrorMessages();
+		if (this.form.valid) {
+			this.formSubmitted = true;
+			const nestedFlow = event.submitter ? event.submitter.className.includes("nested-flow") : false;
+			this.unsavedChanges.emit(this.hasUnsavedChanges());
+			this.formSubmit.emit({
+				formData: this.form.value,
+				nestedFlow
+			});
+		} else this.focusAndScrollToErrorSummary();
+	}
+	handleUppercaseInputMask(event) {
+		const input = event.target;
+		input.value = this.utilsService.upperCaseAllLetters(input.value);
+	}
+	ngOnInit() {
+		if (this.form) this.setupListener();
+	}
+	ngOnDestroy() {
+		this.ngUnsubscribe.next();
+		this.ngUnsubscribe.complete();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "21.2.25",
+		ngImport: i0,
+		type: AbstractFormBaseComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "21.2.25",
+		type: AbstractFormBaseComponent,
+		isStandalone: true,
+		selector: "ng-component",
+		outputs: {
+			unsavedChanges: "unsavedChanges",
+			formSubmit: "formSubmit"
+		},
+		ngImport: i0,
+		template: "",
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "21.2.25",
+	ngImport: i0,
+	type: AbstractFormBaseComponent,
+	decorators: [{
+		type: Component,
+		args: [{ template: "" }]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		unsavedChanges: [{ type: Output }],
+		formSubmit: [{ type: Output }]
+	}
+});
 export { AbstractFormBaseComponent };
-//# sourceMappingURL=hmcts-opal-frontend-common-components-abstract-abstract-form-base.mjs.map
+
+//# sourceMappingURL=hmcts-opal-frontend-common-components-abstract-abstract-form-base.mjs.map