@hmcts/opal-frontend-common 0.0.2 → 0.0.4

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

@@ -0,0 +1,1288 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, inject, ChangeDetectorRef, Output, Component, signal, computed } from '@angular/core';
+import { FormGroup, FormArray, FormControl } from '@angular/forms';
+import { Router, ActivatedRoute } from '@angular/router';
+import { Subject, takeUntil } from 'rxjs';
+import { UtilsService, SortService } from '@hmcts/opal-frontend-common/services';
+
+class AbstractFormBaseComponent {
+    unsavedChanges = new EventEmitter();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    formSubmit = new EventEmitter();
+    changeDetectorRef = inject(ChangeDetectorRef);
+    router = inject(Router);
+    activatedRoute = inject(ActivatedRoute);
+    utilsService = inject(UtilsService);
+    form;
+    formControlErrorMessages;
+    formErrorSummaryMessage;
+    fieldErrors;
+    formSubmitted = false;
+    ngUnsubscribe = new Subject();
+    formErrors;
+    constructor() { }
+    /**
+     * Scrolls to the label of the component and focuses on the field id
+     *
+     * @param fieldId - Field id of the component
+     */
+    scroll(fieldId) {
+        let labelTarget;
+        let fieldElement;
+        const autocompleteLabel = document.querySelector(`label[for=${fieldId}-autocomplete]`);
+        const regularLabel = document.querySelector(`label[for=${fieldId}]`);
+        const fieldsetLegend = document.querySelector(`#${fieldId} .govuk-fieldset__legend`);
+        if (autocompleteLabel) {
+            labelTarget = autocompleteLabel;
+            fieldElement = document.getElementById(`${fieldId}-autocomplete`);
+        }
+        else {
+            labelTarget = regularLabel || fieldsetLegend;
+            fieldElement = document.getElementById(fieldId);
+        }
+        if (fieldElement) {
+            if (labelTarget) {
+                labelTarget.scrollIntoView({ behavior: 'smooth' });
+            }
+            fieldElement.focus();
+        }
+    }
+    /**
+     * 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
+            const controlKey = controlPath[controlPath.length - 1];
+            const errorKeys = Object.keys(controlErrors) || [];
+            const fieldErrors = 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)
+            .map((controlName) => {
+            const control = formControls[controlName];
+            if (control instanceof FormGroup) {
+                return this.getFormErrors(control, [...controlPath, controlName]);
+            }
+            if (control instanceof FormArray) {
+                return control.controls
+                    .map((controlItem, index) => {
+                    // We only support FormGroups in FormArrays
+                    if (controlItem instanceof FormGroup) {
+                        return this.getFormErrors(controlItem, [...controlPath, controlName, index]);
+                    }
+                    return [];
+                })
+                    .flat();
+            }
+            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,
+            };
+        })
+            .flat();
+        // 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
+        formErrors.forEach((entry) => {
+            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);
+            return index !== -1 ? [...acc, index] : acc;
+        }, []);
+    }
+    /**
+     * 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 = [];
+        formErrors.forEach((error) => {
+            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 = [];
+        formErrors.forEach((field) => {
+            if (fields.includes(field.fieldId)) {
+                if (field.type === errorType) {
+                    manipulatedFields.push({ ...field, message: messageOverride });
+                }
+                else {
+                    manipulatedFields.push(field);
+                }
+            }
+            else {
+                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) {
+        controls.forEach(({ controlName, validators }) => {
+            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 specified form control and marks it as touched.
+     *
+     * @param {string} value - The value to set for the form control.
+     * @param {string} control - The name of the form control to update.
+     */
+    setInputValue(value, control) {
+        this.form.controls[control].patchValue(value);
+        this.form.controls[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 = {};
+        Object.keys(formControls).forEach((controlName) => {
+            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 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 nonRelative boolean indicating if route is relative to the parent
+     */
+    handleRoute(route, nonRelative = false, event) {
+        if (event) {
+            event.preventDefault();
+        }
+        this.unsavedChanges.emit(this.hasUnsavedChanges());
+        if (nonRelative) {
+            this.router.navigate([route]);
+        }
+        else {
+            this.router.navigate([route], { relativeTo: this.activatedRoute.parent });
+        }
+    }
+    /**
+     * 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: "19.2.5", ngImport: i0, type: AbstractFormBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: AbstractFormBaseComponent, isStandalone: true, selector: "ng-component", outputs: { unsavedChanges: "unsavedChanges", formSubmit: "formSubmit" }, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AbstractFormBaseComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: '',
+                }]
+        }], ctorParameters: () => [], propDecorators: { unsavedChanges: [{
+                type: Output
+            }], formSubmit: [{
+                type: Output
+            }] } });
+
+class AbstractFormAliasBaseComponent extends AbstractFormBaseComponent {
+    aliasControls = [];
+    aliasControlsValidation = [];
+    aliasFields = [];
+    /**
+     * Builds an array of form controls for the given form array.
+     *
+     * @param formControlCount - An array of numbers representing the number of form controls to create.
+     * @param formArrayName - The name of the form array.
+     * @param fieldNames - An array of field names.
+     * @param controlValidation - An array of control validation objects.
+     * @returns An array of form controls for the given form array.
+     */
+    buildFormAliasControls(formControlCount, formArrayName, fieldNames, controlValidation) {
+        // Directly map each index to a control
+        return formControlCount.map((_element, index) => this.addAliasControls(index, formArrayName, fieldNames, controlValidation));
+    }
+    /**
+     * Adds alias controls to the form array.
+     *
+     * @param index - The index of the form array.
+     * @param formArrayName - The name of the form array.
+     * @param fieldNames - The names of the fields for the alias controls.
+     * @param controlValidation - The validation rules for the alias controls.
+     * @returns An object containing the form controls.
+     */
+    addAliasControls(index, formArrayName, fieldNames, controlValidation) {
+        const formAliases = this.form.get(formArrayName);
+        const formAliasesFormGroup = new FormGroup({});
+        // Create the form controls...
+        const controls = this.createAliasControls(fieldNames, index);
+        // Add the controls to the form group...
+        this.addControlsToFormGroup(formAliasesFormGroup, controlValidation, index);
+        // Add the form group to the form array...
+        formAliases.push(formAliasesFormGroup);
+        // Return the form controls...
+        return controls;
+    }
+    /**
+     * Removes all form alias controls from a FormArray and clears any associated error messages.
+     *
+     * @param formArrayControls - An array of form array controls.
+     * @param formArrayName - The name of the FormArray.
+     * @param fieldNames - An array of field names associated with the form array controls.
+     * @returns An empty array of form array controls.
+     */
+    removeAllFormAliasControls(formArrayControls, formArrayName, fieldNames) {
+        const control = this.form.get(formArrayName);
+        // Clear the error messages...
+        [...formArrayControls].forEach((_element, index) => {
+            this.removeFormAliasControlsErrors(index, formArrayControls, fieldNames);
+        });
+        // Reset the form array controls...
+        control.clear();
+        // Return en empty array of form array controls...
+        return [];
+    }
+    /**
+     * Creates a FormArray with the specified validators and controls.
+     *
+     * @param validators - An array of validators to apply to the FormArray.
+     * @param controls - An optional array of initial FormControl instances to add to the FormArray.
+     * @returns A new FormArray instance.
+     */
+    createFormAlias(validators, controls = []) {
+        return new FormArray(controls, { validators: [...validators] });
+    }
+    /**
+     * Removes a form alias control at the specified index from the given form array controls.
+     *
+     * @param index - The index of the form alias control to remove.
+     * @param formArrayControls - The array of form array controls.
+     * @returns The updated array of form array controls after removing the specified control.
+     */
+    removeFormAliasControl(index, formArrayControls) {
+        formArrayControls.splice(index, 1);
+        return formArrayControls;
+    }
+    /**
+     * Sets up the alias form controls based on the provided alias count array and form array name.
+     * If there are any aliases, the alias controls will be re-populated.
+     *
+     * @param aliasCountArray - An array containing the count of aliases.
+     * @param formArrayName - The name of the form array.
+     */
+    setupAliasFormControls(aliasCountArray, formArrayName) {
+        // Re-populate the alias controls if there are any aliases
+        if (aliasCountArray.length) {
+            this.aliasControls = this.buildFormAliasControls(aliasCountArray, formArrayName, this.aliasFields, this.aliasControlsValidation);
+        }
+    }
+    /**
+     * Removes the form alias controls errors for a specific index in a form array.
+     *
+     * @param index - The index of the form array control.
+     * @param formArrayControls - An array of form array controls.
+     * @param fieldNames - An array of field names to remove errors from.
+     */
+    removeFormAliasControlsErrors(index, formArrayControls, fieldNames) {
+        const formArrayControl = formArrayControls[index];
+        if (formArrayControl) {
+            fieldNames.forEach((field) => {
+                delete this.formControlErrorMessages?.[formArrayControl[field].controlName];
+            });
+        }
+    }
+    /**
+     * Creates alias controls for the given fields and index.
+     * @param fields - The list of fields for which alias controls need to be created.
+     * @param index - The index value used to generate unique identifiers for the controls.
+     * @returns An object containing the alias controls.
+     */
+    createAliasControls(fields, index) {
+        return fields.reduce((controls, field) => ({
+            ...controls,
+            [field]: {
+                inputId: `${field}_${index}`,
+                inputName: `${field}_${index}`,
+                controlName: `${field}_${index}`,
+            },
+        }), {});
+    }
+    /**
+     * Sets up the alias checkbox listener.
+     *
+     * @param formCheckboxName - The name of the checkbox control in the form.
+     * @param formArrayName - The name of the form array control in the form.
+     */
+    setUpAliasCheckboxListener(formCheckboxName, formArrayName) {
+        // Ensure any existing subscription is cleared to avoid memory leaks
+        this['ngUnsubscribe'].next();
+        this['ngUnsubscribe'].complete();
+        const addAliasControl = this.form.get(formCheckboxName);
+        if (!addAliasControl) {
+            return;
+        }
+        addAliasControl.valueChanges.pipe(takeUntil(this['ngUnsubscribe'])).subscribe((shouldAddAlias) => {
+            this.aliasControls = shouldAddAlias
+                ? this.buildFormAliasControls([0], formArrayName, this.aliasFields, this.aliasControlsValidation)
+                : this.removeAllFormAliasControls(this.aliasControls, formArrayName, this.aliasFields);
+        });
+    }
+    /**
+     * Removes a form alias control from a form array and updates the list of form array controls.
+     * @param index - The index of the form alias control to be removed.
+     * @param formArrayName - The name of the form array.
+     * @param formArrayControls - The list of form array controls.
+     * @param fieldNames - The names of the fields associated with the form array controls.
+     * @returns The updated list of form array controls after removing the specified control.
+     */
+    removeFormAliasControls(index, formArrayName, formArrayControls, fieldNames) {
+        // Get the form array...
+        const control = this.form.get(formArrayName);
+        // Remove the form array control based on index
+        control.removeAt(index);
+        // Then remove the form array controls errors...
+        this.removeFormAliasControlsErrors(index, formArrayControls, fieldNames);
+        // Return the new list of form array controls...
+        return this.removeFormAliasControl(index, formArrayControls);
+    }
+    /**
+     * Adds an alias to the specified index of the form array.
+     *
+     * @param index - The index at which to add the alias.
+     * @param formArrayName - The name of the form array.
+     */
+    addAlias(index, formArrayName) {
+        this.aliasControls.push(this.addAliasControls(index, formArrayName, this.aliasFields, this.aliasControlsValidation));
+    }
+    /**
+     * Removes an alias from the form array.
+     *
+     * @param index - The index of the alias to remove.
+     * @param formArrayName - The name of the form array.
+     */
+    removeAlias(index, formArrayName) {
+        this.aliasControls = this.removeFormAliasControls(index, formArrayName, this.aliasControls, this.aliasFields);
+    }
+    ngOnInit() {
+        super.ngOnInit();
+    }
+    ngOnDestroy() {
+        this['ngUnsubscribe'].next();
+        this['ngUnsubscribe'].complete();
+        super.ngOnDestroy();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AbstractFormAliasBaseComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: AbstractFormAliasBaseComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AbstractFormAliasBaseComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: '',
+                }]
+        }] });
+
+class AbstractFormArrayBaseComponent extends AbstractFormBaseComponent {
+    formArrayControls = [];
+    formArrayControlsValidation = [];
+    formArrayFields = [];
+    /**
+     * Builds an array of form controls for a form array.
+     *
+     * @param formControlCount - An array of numbers representing the number of form controls to create.
+     * @param formArrayName - The name of the form array.
+     * @param fieldNames - An array of field names for the form controls.
+     * @param controlValidation - An array of control validation configurations.
+     * @returns An array of form controls for the form array.
+     */
+    buildFormArrayControls(formControlCount, formArrayName, fieldNames, controlValidation) {
+        // Directly map each index to a control
+        return formControlCount.map((_element, index) => this.addFormArrayControls(index, formArrayName, fieldNames, controlValidation));
+    }
+    /**
+     * Adds form array controls to the specified form array.
+     *
+     * @param index - The index at which the form array controls should be added.
+     * @param formArrayName - The name of the form array.
+     * @param fieldNames - The names of the form controls to be created.
+     * @param controlValidation - The validation rules for the form controls.
+     * @returns An object containing the form controls that were added.
+     */
+    addFormArrayControls(index, formArrayName, fieldNames, controlValidation) {
+        const formArray = this.form.get(formArrayName);
+        const formArrayFormGroup = new FormGroup({});
+        // Create the form controls...
+        const controls = this.createFormArrayControls(fieldNames, index);
+        // Add the controls to the form group...
+        this.addControlsToFormGroup(formArrayFormGroup, controlValidation, index);
+        // Add the form group to the form array...
+        formArray.push(formArrayFormGroup);
+        // Return the form controls...
+        return controls;
+    }
+    /**
+     * Creates a new instance of FormArray with the specified validators and controls.
+     *
+     * @param validators - An array of validator functions to be applied to the form array.
+     * @param controls - An optional array of form controls to initialize the form array with.
+     * @returns A new instance of FormArray.
+     */
+    createFormArray(validators, controls = []) {
+        return new FormArray(controls, { validators: [...validators] });
+    }
+    /**
+     * Sets up the form array form controls based on the provided parameters.
+     *
+     * @param formArrayCountArray - An array of numbers representing the count of form array controls.
+     * @param formArrayName - The name of the form array.
+     */
+    setupFormArrayFormControls(formArrayCountArray, formArrayName) {
+        if (formArrayCountArray.length) {
+            this.formArrayControls = this.buildFormArrayControls(formArrayCountArray, formArrayName, this.formArrayFields, this.formArrayControlsValidation);
+        }
+    }
+    /**
+     * Creates an object with form array controls based on the given fields and index.
+     *
+     * @param fields - An array of field names.
+     * @param index - The index of the form array.
+     * @returns An object with form array controls.
+     */
+    createFormArrayControls(fields, index) {
+        return fields.reduce((controls, field) => ({
+            ...controls,
+            [field]: {
+                inputId: `${field}_${index}`,
+                inputName: `${field}_${index}`,
+                controlName: `${field}_${index}`,
+            },
+        }), {});
+    }
+    /**
+     * Removes form array controls errors for a specific index.
+     *
+     * @param index - The index of the form array control.
+     * @param formArrayControls - An array of form array controls.
+     * @param fieldNames - An array of field names to remove errors from.
+     */
+    removeFormArrayControlsErrors(index, formArrayControls, fieldNames) {
+        const formArrayControl = formArrayControls[index];
+        if (formArrayControl) {
+            fieldNames.forEach((field) => {
+                delete this.formControlErrorMessages?.[formArrayControl[field].controlName];
+            });
+        }
+    }
+    /**
+     * Adds controls to the form array at the specified index.
+     *
+     * @param index - The index at which the controls should be added.
+     * @param formArrayName - The name of the form array.
+     */
+    addControlsToFormArray(index, formArrayName) {
+        this.formArrayControls.push(this.addFormArrayControls(index, formArrayName, this.formArrayFields, this.formArrayControlsValidation));
+    }
+    /**
+     * Removes a form array control at the specified index from the given array of form array controls.
+     *
+     * @param index - The index of the form array control to be removed.
+     * @param formArrayControls - The array of form array controls.
+     * @returns The updated array of form array controls after removing the specified control.
+     */
+    removeFormArrayControl(index, formArrayControls) {
+        formArrayControls.splice(index, 1);
+        return formArrayControls;
+    }
+    /**
+     * Retrieves the value of a form control or returns a default value if the control is null or undefined.
+     *
+     * @param control - The form control to retrieve the value from.
+     * @param defaultValue - The default value to return if the control is null or undefined.
+     * @returns The value of the control if it exists, otherwise the default value.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    getControlValueOrDefault(control, defaultValue) {
+        return control?.value || defaultValue;
+    }
+    /**
+     * Removes a form array control at the specified index and updates the form array controls and errors.
+     *
+     * @param index - The index of the form array control to remove.
+     * @param formArrayName - The name of the form array.
+     * @param formArrayControls - The list of form array controls.
+     * @param fieldNames - The names of the fields associated with the form array controls.
+     * @returns The updated list of form array controls.
+     */
+    removeFormArrayControls(index, formArrayName, formArrayControls, fieldNames) {
+        // Get the form array...
+        const control = this.form.get(formArrayName);
+        // Remove the form array control based on index
+        control.removeAt(index);
+        // Then remove the form array controls errors...
+        this.removeFormArrayControlsErrors(index, formArrayControls, fieldNames);
+        // Return the new list of form array controls...
+        return this.removeFormArrayControl(index, formArrayControls);
+    }
+    /**
+     * Removes controls from a form array at the specified index.
+     *
+     * @param index - The index at which to remove the controls.
+     * @param formArrayName - The name of the form array.
+     */
+    removeControlsFromFormArray(index, formArrayName) {
+        this.formArrayControls = this.removeFormArrayControls(index, formArrayName, this.formArrayControls, this.formArrayFields);
+    }
+    /**
+     * Removes a form array control from the specified form array.
+     *
+     * @param formArrayControl - The form array control to remove.
+     * @param formArrayName - The name of the form array.
+     */
+    removeFormArrayControlFromArray(formArrayControl, formArrayName) {
+        const formArrayControlIndex = this.formArrayControls.findIndex((control) => control === formArrayControl);
+        this.removeFormArrayControls(formArrayControlIndex, formArrayName, this.formArrayControls, this.formArrayFields);
+    }
+    /**
+     * Retrieves the FormGroup at the specified index from a FormArray.
+     *
+     * @param index - The index of the FormGroup to retrieve.
+     * @param formArrayName - The name of the FormArray.
+     * @returns The FormGroup at the specified index.
+     */
+    getFormArrayFormGroup(index, formArrayName) {
+        const formArray = this.form.get(formArrayName);
+        return formArray.controls[index];
+    }
+    /**
+     * Retrieves the FormControl from a FormGroup within a FormArray at the specified index.
+     *
+     * @param formGroup - The FormGroup containing the FormControl.
+     * @param controlName - The name of the FormControl.
+     * @param index - The index of the FormArray.
+     * @returns The FormControl at the specified index.
+     */
+    getFormArrayFormGroupControl(formGroup, controlName, index) {
+        return formGroup.controls[`${controlName}_${index}`];
+    }
+    /**
+     * Adds validators to a specific form control within a form array group.
+     *
+     * @param formGroup - The form group containing the form array.
+     * @param controlName - The name of the form control within the form array group.
+     * @param index - The index of the form array group within the form array.
+     * @param validators - An array of validator functions to be added to the form control.
+     */
+    addFormArrayFormGroupControlValidators(formControl, validators) {
+        formControl.setValidators(validators);
+        formControl.updateValueAndValidity({ emitEvent: false });
+    }
+    /**
+     * Removes validators from a specific form control within a form array group.
+     * @param formGroup - The form group containing the form array.
+     * @param controlName - The name of the form control within the form array group.
+     * @param index - The index of the form array group within the form array.
+     */
+    removeFormArrayFormGroupControlValidators(formControl) {
+        formControl.clearValidators();
+        formControl.setErrors(null);
+        formControl.setValue(null, { emitEvent: false });
+        formControl.updateValueAndValidity({ emitEvent: false });
+    }
+    /**
+     * Reverses the form array data by appending the index to each key in the objects.
+     *
+     * @param data - An array of objects containing form data.
+     * @returns An array of objects with keys modified to include their index in the original array.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    addIndexToFormArrayData(data) {
+        return data.map((item, index) => Object.entries(item).reduce((indexedObject, [key, value]) => {
+            if (value !== undefined) {
+                indexedObject[`${key}_${index}`] = value;
+            }
+            return indexedObject;
+        }, 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        {}));
+    }
+    ngOnInit() {
+        super.ngOnInit();
+    }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+        super.ngOnDestroy();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AbstractFormArrayBaseComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: AbstractFormArrayBaseComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AbstractFormArrayBaseComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: '',
+                }]
+        }] });
+
+class AbstractFormParentBaseComponent {
+    router = inject(Router);
+    activatedRoute = inject(ActivatedRoute);
+    stateUnsavedChanges;
+    /**
+     * If the user navigates externally from the site or closes the tab
+     * Check if there is unsaved changes form state -> warning message
+     * Otherwise -> no warning message
+     *
+     * @returns boolean
+     */
+    canDeactivate() {
+        if (this.stateUnsavedChanges) {
+            return false;
+        }
+        else {
+            return true;
+        }
+    }
+    /**
+     * Navigates to the specified route using the Angular router.
+     *
+     * @param route - The route to navigate to.
+     */
+    routerNavigate(route, nonRelative = false, event) {
+        if (event) {
+            event.preventDefault();
+        }
+        if (nonRelative) {
+            this.router.navigate([route]);
+        }
+        else {
+            this.router.navigate([route], { relativeTo: this.activatedRoute.parent });
+        }
+    }
+    /**
+     * Checks if an object has any non-empty values.
+     *
+     * @param form - The object representing form data with key-value pairs.
+     * @returns A boolean indicating whether the object has any non-empty values.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    hasFormValues(form) {
+        return Object.values(form).some(Boolean);
+    }
+}
+
+class AbstractFormArrayParentBaseComponent extends AbstractFormParentBaseComponent {
+    /**
+     * Removes index suffixes from keys in an array of objects and restructures the data.
+     *
+     * This function takes an array of objects where keys have an index suffix (e.g., `key_0`, `key_1`),
+     * and returns a new array of objects where the keys are grouped by their base name without the index.
+     *
+     * @param data - The array of objects with indexed keys.
+     * @returns A new array of objects with keys grouped by their base name.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    removeIndexFromFormArrayData(data) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return data.reduce((result, indexedObject) => {
+            let currentIndex;
+            Object.keys(indexedObject).forEach((key) => {
+                const match = RegExp(/^(.*)_(\d+)$/).exec(key);
+                if (match) {
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    const [_, baseKey, index] = match;
+                    const idx = parseInt(index, 10);
+                    currentIndex = idx; // Set the current index based on the last indexed key
+                    result[idx] = result[idx] || {};
+                    result[idx][baseKey] = indexedObject[key];
+                }
+                else {
+                    // For non-indexed keys, use the currentIndex if available
+                    result[currentIndex] = result[currentIndex] || {};
+                    result[currentIndex][key] = indexedObject[key];
+                }
+            });
+            return result;
+        }, []);
+    }
+}
+
+class AbstractFormArrayRemovalComponent {
+    router = inject(Router);
+    activatedRoute = inject(ActivatedRoute);
+    getFormArrayControlValue(formArray, controlName, rowIndex, defaultValue) {
+        const value = formArray.controls[rowIndex]?.get(controlName)?.value;
+        if (typeof value === 'string' && !isNaN(Number(value))) {
+            return Number(value);
+        }
+        return value ?? defaultValue;
+    }
+    /**
+     * Removes a control from the given form array at the specified index and renumbers the remaining controls.
+     *
+     * @param formArray - The form array from which to remove the control.
+     * @param removeIndex - The index of the control to remove.
+     * @param fieldNames - The names of the fields associated with the controls.
+     * @param dynamicFieldPrefix - The prefix used for dynamically generated field names.
+     */
+    removeControlAndRenumber(formArray, removeIndex, fieldNames, dynamicFieldPrefix) {
+        formArray.removeAt(removeIndex);
+        this.renumberControls(formArray, removeIndex, fieldNames, dynamicFieldPrefix);
+    }
+    /**
+     * Renumber the controls in a FormArray starting from a specific index.
+     * This method updates the control keys of each FormGroup within the FormArray.
+     *
+     * @param formArray - The FormArray to renumber the controls for.
+     * @param startIndex - The index to start renumbering the controls from.
+     * @param fieldNames - The names of the fields in the FormGroup.
+     * @param dynamicFieldPrefix - The prefix to use for dynamic field names.
+     */
+    renumberControls(formArray, startIndex, fieldNames, dynamicFieldPrefix) {
+        const formGroups = formArray.controls.slice(startIndex);
+        for (const [index, formGroup] of formGroups.entries()) {
+            this.updateControlKeys(formGroup, index + startIndex, fieldNames, dynamicFieldPrefix);
+        }
+    }
+    /**
+     * Updates the control keys in a form group based on the provided parameters.
+     * @param formGroup - The form group to update.
+     * @param index - The index of the form group within an array.
+     * @param fieldNames - An array of field names to update.
+     * @param dynamicFieldPrefix - The prefix to use for dynamic field keys.
+     */
+    updateControlKeys(formGroup, index, fieldNames, dynamicFieldPrefix) {
+        fieldNames.forEach((field) => {
+            const currentKey = `${dynamicFieldPrefix}_${field}_${index + 1}`;
+            const newKey = `${dynamicFieldPrefix}_${field}_${index}`;
+            // Retrieve the current control, if it exists
+            const control = formGroup.get(currentKey);
+            if (control) {
+                // Remove the old control first, then add it with the new key
+                formGroup.removeControl(currentKey);
+                // Add the control with the updated key
+                formGroup.addControl(newKey, control);
+            }
+        });
+    }
+    /**
+     * Handles route with the supplied route
+     *
+     * @param route string of route
+     * @param nonRelative boolean indicating if route is relative to the parent
+     */
+    handleRoute(route, nonRelative = false, event) {
+        if (event) {
+            event.preventDefault();
+        }
+        if (nonRelative) {
+            this.router.navigate([route]);
+        }
+        else {
+            this.router.navigate([route], { relativeTo: this.activatedRoute.parent });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AbstractFormArrayRemovalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: AbstractFormArrayRemovalComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AbstractFormArrayRemovalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: '',
+                }]
+        }] });
+
+class AbstractSortableTableComponent {
+    sortService = inject(SortService);
+    abstractTableDataSignal = signal([]);
+    abstractExistingSortState = null;
+    sortStateSignal = signal({});
+    sortedColumnTitleSignal = signal('');
+    sortedColumnDirectionSignal = signal('none');
+    abstractSortState = new EventEmitter();
+    /**
+     * Creates an initial sort state for a table based on the provided table data.
+     *
+     * @param tableData - Array of table data objects representing table rows.
+     * @returns Initial sort state object with column names as keys and 'none' as values.
+     */
+    createSortState(tableData) {
+        return tableData?.length
+            ? Object.keys(tableData[0]).reduce((state, key) => {
+                state[key] = 'none';
+                return state;
+            }, {})
+            : {};
+    }
+    /**
+     * Initializes the sort state for the sortable table component.
+     *
+     * This method sets the initial sort state based on the existing sort state or creates a new one
+     * if none exists. It then updates the sort state signal with the initial sort state.
+     *
+     * If an existing sort state is found, it iterates over each entry and triggers the sort change
+     * for each key that has a sort type other than 'none'.
+     *
+     * @private
+     * @returns {void}
+     */
+    initialiseSortState() {
+        const existingSortState = this.abstractExistingSortState;
+        const initialSortState = existingSortState || this.createSortState(this.abstractTableDataSignal());
+        this.sortStateSignal.set(initialSortState);
+        if (existingSortState) {
+            Object.entries(existingSortState).forEach(([key, sortType]) => {
+                if (sortType !== 'none') {
+                    this.onSortChange({ key, sortType });
+                }
+            });
+        }
+        this.getSortedColumn();
+    }
+    /**
+     * Updates the sort state for a given column key and sort type.
+     * Resets the sort state for all other columns to 'none'.
+     *
+     * @param key - The column to sort by.
+     * @param sortType - Sorting order ('ascending' or 'descending').
+     */
+    updateSortState(key, sortType) {
+        this.sortStateSignal.set(Object.keys(this.sortStateSignal()).reduce((state, columnKey) => {
+            state[columnKey] = columnKey === key ? sortType : 'none';
+            return state;
+        }, {}));
+    }
+    /**
+     * Retrieves the sorted table data based on the specified key and sort type.
+     *
+     * @param key - The key of the property to sort by.
+     * @param sortType - The type of sorting to apply, either 'ascending' or 'descending'.
+     * @returns An array of sorted table data objects.
+     */
+    getSortedTableData(key, sortType) {
+        return sortType === 'ascending'
+            ? this.sortService.sortObjectArrayAsc(this.abstractTableDataSignal(), key)
+            : this.sortService.sortObjectArrayDesc(this.abstractTableDataSignal(), key);
+    }
+    /**
+     * Determines the first column with a sort state other than 'none' and updates the sorted column signals accordingly.
+     *
+     * - If a sorted column is found, updates the `sortedColumnTitleSignal` and `sortedColumnDirectionSignal` with the column key and state.
+     * - If no sorted column is found, sets the `sortedColumnTitleSignal` to an empty string and `sortedColumnDirectionSignal` to 'none'.
+     *
+     * @private
+     * @returns {void}
+     */
+    getSortedColumn() {
+        // Find the first column that has a sort state other than 'none'
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const sortedColumn = Object.entries(this.sortStateSignal()).find(([_, state]) => state !== 'none');
+        // If a sorted column is found, set the signal to the sorted column key and state
+        if (sortedColumn) {
+            const [columnKey, state] = sortedColumn;
+            this.sortedColumnTitleSignal.set(columnKey);
+            this.sortedColumnDirectionSignal.set(state);
+        }
+        else {
+            // Otherwise, set the signal to null
+            this.sortedColumnTitleSignal.set('');
+            this.sortedColumnDirectionSignal.set('none');
+        }
+    }
+    /**
+     * Handles the change in sorting for the table.
+     *
+     * @param event - An object containing the key to sort by and the sort type.
+     * @param event.key - The key of the column to sort.
+     * @param event.sortType - The type of sorting to apply ('ascending' or 'descending').
+     *
+     * This method updates the sort state, sorts the table data based on the provided key and sort type,
+     * updates the table data signal, and emits the updated sort state.
+     */
+    onSortChange(event) {
+        const { key, sortType } = event;
+        this.updateSortState(key, sortType);
+        this.getSortedColumn();
+        const sortedData = this.getSortedTableData(key, sortType);
+        // Update the table data signal
+        this.abstractTableDataSignal.set(sortedData);
+        // Emit the updated sort state
+        this.abstractSortState.emit(this.sortStateSignal());
+    }
+    /**
+     * Lifecycle hook to initialise the sort state.
+     */
+    ngOnInit() {
+        this.initialiseSortState();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AbstractSortableTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: AbstractSortableTableComponent, isStandalone: true, selector: "ng-component", outputs: { abstractSortState: "abstractSortState" }, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AbstractSortableTableComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: '',
+                }]
+        }], propDecorators: { abstractSortState: [{
+                type: Output
+            }] } });
+
+class AbstractSortableTablePaginationComponent extends AbstractSortableTableComponent {
+    // Signal for the current page. Used to calculate the start and end indices for pagination.
+    currentPageSignal = signal(1);
+    // Signal for the number of items per page. Determines how many items are displayed on each page.
+    itemsPerPageSignal = signal(10);
+    // Signal for the start index (1-based). Automatically updates when `currentPageSignal` or `itemsPerPageSignal` changes.
+    startIndexComputed = computed(() => {
+        const currentPage = this.currentPageSignal();
+        return (currentPage - 1) * this.itemsPerPageSignal() + 1;
+    });
+    // Signal for the end index (1-based). Automatically recalculates when `startIndexComputed` or `abstractTableDataSignal` changes.
+    endIndexComputed = computed(() => {
+        const startIndex = this.startIndexComputed();
+        return Math.min(startIndex + this.itemsPerPageSignal() - 1, this.abstractTableDataSignal().length);
+    });
+    // Computed signal for paginated table data. Reactively slices `abstractTableDataSignal` based on `startIndexComputed` and `endIndexComputed`.
+    paginatedTableDataComputed = computed(() => {
+        const data = this.abstractTableDataSignal(); // Full table data
+        return data.slice(this.startIndexComputed() - 1, this.endIndexComputed()); // Return paginated data subset
+    });
+    /**
+     * Handles sorting changes and resets the page to the first page.
+     *
+     * @param event - The sorting event containing:
+     *   - `key`: The column key to sort by.
+     *   - `sortType`: The sorting order, either 'ascending' or 'descending'.
+     *
+     * Resets `currentPageSignal` to 1 and triggers re-sorting of `abstractTableDataSignal`.
+     */
+    onSortChange(event) {
+        super.onSortChange(event); // Update the sort state and sort the data
+        this.currentPageSignal.set(1); // Reset the page to the first page
+    }
+    /**
+     * Handles the event when the page is changed.
+     *
+     * @param newPage - The new page number to set. If the provided page number is out of range,
+     * it will be clamped between 1 and the total number of pages.
+     */
+    onPageChange(newPage) {
+        const totalPages = Math.ceil(this.abstractTableDataSignal().length / this.itemsPerPageSignal());
+        this.currentPageSignal.set(Math.max(1, Math.min(newPage, totalPages)));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AbstractSortableTablePaginationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: AbstractSortableTablePaginationComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AbstractSortableTablePaginationComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: '',
+                }]
+        }] });
+
+// ABSTRACT CLASSES
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AbstractFormAliasBaseComponent, AbstractFormArrayBaseComponent, AbstractFormArrayParentBaseComponent, AbstractFormArrayRemovalComponent, AbstractFormBaseComponent, AbstractFormParentBaseComponent, AbstractSortableTableComponent, AbstractSortableTablePaginationComponent };
+//# sourceMappingURL=hmcts-opal-frontend-common-components-abstract.mjs.map