@hmcts/opal-frontend-common 0.0.20 → 0.0.22

package/components/abstract/abstract-sortable-table/index.d.ts

@@ -2,10 +2,13 @@ import * as _angular_core from '@angular/core';
 import { OnInit, EventEmitter } from '@angular/core';
 import { IAbstractTableData, IAbstractSortState } from '@hmcts/opal-frontend-common/components/abstract/abstract-sortable-table/interfaces';
 import { SortableValuesType, SortDirectionType } from '@hmcts/opal-frontend-common/components/abstract/abstract-sortable-table/types';
+import { AbstractTableFilterComponent } from '@hmcts/opal-frontend-common/components/abstract/abstract-table-filter';
 
-declare abstract class AbstractSortableTableComponent implements OnInit {
+declare abstract class AbstractSortableTableComponent extends AbstractTableFilterComponent implements OnInit {
     private readonly sortService;
-    abstractTableDataSignal: _angular_core.WritableSignal<IAbstractTableData<SortableValuesType>[]>;
+    displayTableDataSignal: _angular_core.WritableSignal<IAbstractTableData<SortableValuesType>[]>;
+    filteredTableDataSignal: _angular_core.WritableSignal<IAbstractTableData<SortableValuesType>[]>;
+    sortedTableDataSignal: _angular_core.WritableSignal<IAbstractTableData<SortableValuesType>[]>;
     abstractExistingSortState: IAbstractSortState | null;
     sortStateSignal: _angular_core.WritableSignal<IAbstractSortState>;
     sortedColumnTitleSignal: _angular_core.WritableSignal<string>;
@@ -71,10 +74,38 @@ declare abstract class AbstractSortableTableComponent implements OnInit {
         key: string;
         sortType: 'ascending' | 'descending';
     }): void;
+    /**
+     * Synchronizes the sorted table data with the current filter and sort state.
+     *
+     * This effect observes changes to the filtered table data and the sort state signals.
+     * If no active sort key is found (i.e., no sorting is applied), it sets the sorted table data
+     * to a shallow copy of the filtered data. Otherwise, sorting logic should be applied elsewhere.
+     *
+     * @protected
+     */
+    protected syncSortedDataEffect: _angular_core.EffectRef;
     /**
      * Lifecycle hook to initialise the sort state.
      */
     ngOnInit(): void;
+    /**
+     * Applies the current filters to the table data and updates the sorted data accordingly.
+     *
+     * This method overrides the parent implementation to additionally handle sorting.
+     * If there is an active sort key, it applies the corresponding sort to the filtered data.
+     * If no sort key is active, it simply updates the sorted data to match the filtered data.
+     *
+     * @override
+     */
+    onApplyFilters(): void;
+    /**
+     * Clears all filters applied to the table and restores the data to its unfiltered state.
+     * If a sort is currently active, re-applies the sort after clearing filters.
+     * Otherwise, resets the sorted table data to match the filtered data.
+     *
+     * @override
+     */
+    clearAllFilters(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AbstractSortableTableComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AbstractSortableTableComponent, "ng-component", never, {}, { "abstractSortState": "abstractSortState"; }, never, never, true, never>;
 }

package/components/abstract/abstract-sortable-table-pagination/index.d.ts

@@ -7,6 +7,12 @@ declare abstract class AbstractSortableTablePaginationComponent extends Abstract
     currentPageSignal: _angular_core.WritableSignal<number>;
     itemsPerPageSignal: _angular_core.WritableSignal<number>;
     startIndexComputed: _angular_core.Signal<number>;
+    /**
+     * Computes the end index for the current page of the sorted table data.
+     * Ensures the end index does not exceed the total number of items.
+     *
+     * @returns The zero-based index of the last item to display on the current page.
+     */
     endIndexComputed: _angular_core.Signal<number>;
     paginatedTableDataComputed: _angular_core.Signal<_hmcts_opal_frontend_common_components_abstract_abstract_sortable_table_interfaces.IAbstractTableData<_hmcts_opal_frontend_common_components_abstract_abstract_sortable_table_types.SortableValuesType>[]>;
     /**
@@ -16,12 +22,21 @@ declare abstract class AbstractSortableTablePaginationComponent extends Abstract
      *   - `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`.
+     * Resets `currentPageSignal` to 1 and triggers re-sorting of `displayTableDataSignal`.
      */
     onSortChange(event: {
         key: string;
         sortType: 'ascending' | 'descending';
     }): void;
+    /**
+     * Applies the current filters to the table data.
+     *
+     * Overrides the base implementation to additionally reset the pagination to the first page
+     * after filters are applied.
+     *
+     * @override
+     */
+    onApplyFilters(): void;
     /**
      * Handles the event when the page is changed.
      *

package/components/abstract/abstract-table-filter/README.md

@@ -0,0 +1,76 @@
+# AbstractTableFilterComponent
+
+The `AbstractTableFilterComponent` is an abstract base class designed for building reactive, filterable table components in Angular. It provides a fully signal-based filtering model using Angular 19's reactivity system, and supports filtering via keyword input and grouped filter tags.
+
+## Features
+
+- Reactive filtering of table data using Angular signals
+- Supports both keyword and tag-based filtering
+- Exposes computed filtered data for consumption
+- Clean override points for matching logic
+- Stateless, testable, and reusable foundation for filterable tables
+
+## Usage
+
+Extend this class in your table wrapper component:
+
+```ts
+@Component({ ... })
+export class MyFilterableTableComponent extends AbstractTableFilterComponent {
+  override matchItemWithFilterOption(item: any, categoryName: string, option: IAbstractTableFilterOption): boolean {
+    // Optional: customise matching logic per field
+    return item?.[categoryName] === option.value;
+  }
+
+  override matchItemWithKeyword(item: any, keyword: string): boolean {
+    return Object.values(item).some(value =>
+      value?.toString().toLowerCase().includes(keyword.toLowerCase())
+    );
+  }
+}
+```
+
+Set filter and table data like so:
+
+```ts
+this.setTableData(tableData);
+this.filterTags.set(filterCategories);
+```
+
+## Signals
+
+| Signal                    | Type                                   | Description                                               |
+| ------------------------- | -------------------------------------- | --------------------------------------------------------- |
+| `displayTableDataSignal`  | Signal<IAbstractTableData[]>           | The full, unfiltered dataset                              |
+| `filterTags`              | Signal<IAbstractTableFilterCategory[]> | Grouped tag filters with selection state                  |
+| `keyword`                 | Signal<string>                         | Keyword used for text-based filtering                     |
+| `abstractSelectedTags`    | Signal<IAbstractTableFilterCategory[]> | Computed from `filterTags`; not used in applied filtering |
+| `filteredTableDataSignal` | Signal<IAbstractTableData[]>           | Computed signal of filtered results                       |
+
+## Public Methods
+
+| Method                                                | Description                                     |
+| ----------------------------------------------------- | ----------------------------------------------- |
+| `onKeywordChange(keyword)`                            | Updates the keyword for filtering               |
+| `onCategoryCheckboxChange(category, value, selected)` | Toggles a specific tag option                   |
+| `removeTag(category, value)`                          | Deselects a tag based on category and value     |
+| `clearAllFilters()`                                   | Clears all tag selections and the keyword input |
+| `setTableData(data)`                                  | Sets the full table data to be filtered         |
+| `resetFiltersTo(tags, keyword?)`                      | Resets filter tags and optionally the keyword   |
+
+## Protected Methods (Override Points)
+
+| Method                             | Description                                                           |
+| ---------------------------------- | --------------------------------------------------------------------- |
+| `matchItemWithFilterOption()`      | Allows overriding how tag filters match table data                    |
+| `matchItemWithKeyword()`           | Allows overriding how keyword filters apply                           |
+| `getSelectedOptionsFromTags(tags)` | Utility method to extract selected tag options from a tag group array |
+
+## Testing
+
+Unit tests should verify:
+
+- Data passed to `displayTableDataSignal` is filtered as expected
+- `filterTags` updates trigger recomputation of `filteredTableDataSignal`
+- Override methods correctly influence filtering behaviour
+- Events like `onKeywordChange()` and `clearAllFilters()` produce expected state

package/components/abstract/abstract-table-filter/index.d.ts

@@ -0,0 +1,116 @@
+import * as _angular_core from '@angular/core';
+import { Signal } from '@angular/core';
+import { IAbstractTableData, IAbstractTableFilterCategory, IAbstractTableFilterOption } from '@hmcts/opal-frontend-common/components/abstract/abstract-table-filter/interfaces';
+import { SortableValuesType } from '@hmcts/opal-frontend-common/components/abstract/abstract-table-filter/types';
+
+declare abstract class AbstractTableFilterComponent {
+    displayTableDataSignal: _angular_core.WritableSignal<IAbstractTableData<SortableValuesType>[]>;
+    filteredTableDataSignal: _angular_core.WritableSignal<IAbstractTableData<SortableValuesType>[]>;
+    filterTags: _angular_core.WritableSignal<IAbstractTableFilterCategory[]>;
+    keyword: _angular_core.WritableSignal<string>;
+    appliedFilterTags: _angular_core.WritableSignal<IAbstractTableFilterCategory[]>;
+    appliedKeyword: _angular_core.WritableSignal<string>;
+    /**
+     * Determines whether a given item matches a specific filter option within a category.
+     * @param item The data item to test.
+     * @param categoryName The category name to check within the item.
+     * @param option The filter option to match against.
+     * @returns True if the item's value for the category matches the option's value; otherwise false.
+     */
+    protected matchItemWithFilterOption(item: IAbstractTableData<SortableValuesType>, categoryName: string, option: IAbstractTableFilterOption): boolean;
+    /**
+     * Determines whether a given item matches the keyword filter.
+     * Checks if any value in the item contains the keyword (case-insensitive).
+     * @param item The data item to test.
+     * @param keyword The keyword to match against.
+     * @returns True if any value in the item contains the keyword; otherwise false.
+     */
+    protected matchItemWithKeyword(item: IAbstractTableData<SortableValuesType>, keyword: string): boolean;
+    /**
+     * Extracts and returns categories from the provided tags that have at least one selected option.
+     *
+     * For each category in the input array, this method filters its options to include only those marked as selected.
+     * Only categories with at least one selected option are included in the returned array.
+     *
+     * @param tags - An array of category objects, each containing a list of options.
+     * @returns An array of category objects, each with only the selected options, and only categories with at least one selected option.
+     */
+    protected getSelectedOptionsFromTags(tags: IAbstractTableFilterCategory[]): IAbstractTableFilterCategory[];
+    /**
+     * A computed signal that returns the currently selected filter tags.
+     * It filters the filterTags signal to include only those options that are selected,
+     * grouped by their category name.
+     *
+     * @returns An array of filter categories each containing only the selected options.
+     */
+    abstractSelectedTags: Signal<IAbstractTableFilterCategory[]>;
+    /**
+     * Updates the keyword used to filter the table data.
+     * @param newKeyword The new keyword string to filter by.
+     */
+    onKeywordChange(newKeyword: string): void;
+    /**
+     * Updates the selection state of a filter option within a category.
+     * @param categoryName The name of the filter category.
+     * @param optionValue The value of the filter option to update.
+     * @param selected Whether the option is selected (true) or deselected (false).
+     */
+    onCategoryCheckboxChange(categoryName: string, optionValue: string | number, selected: boolean): void;
+    /**
+     * Removes a selected filter tag by deselecting the corresponding filter option.
+     * @param categoryName The name of the filter category.
+     * @param optionValue The value of the filter option to remove.
+     */
+    removeTag(categoryName: string, optionValue: string | number): void;
+    /**
+     * Clears all applied filters and resets the filter state.
+     *
+     * This method performs the following actions:
+     * - Resets the keyword and applied keyword to empty strings.
+     * - Iterates through all filter tag groups and sets each option's `selected` property to `false`.
+     * - Updates both the current and applied filter tags with the cleared state.
+     * - Applies the updated filter state.
+     */
+    clearAllFilters(): void;
+    /**
+     * Initializes and updates the filtered table data based on the currently applied keyword and filter tags.
+     *
+     * This method performs the following steps:
+     * 1. Retrieves the current table data, applied keyword, and filter tags.
+     * 2. If filter tags are present, filters the data to include only items that match all selected filter options.
+     * 3. If a keyword is present, further filters the data to include only items that match the keyword.
+     * 4. Updates the filtered table data signal with the resulting filtered data.
+     *
+     * @remarks
+     * - Filtering by tags requires each item to match every group of filter tags.
+     * - Filtering by keyword is case-insensitive and trims whitespace.
+     */
+    applyFilterState(): void;
+    /**
+     * Applies the current filter tags and keyword to the table data.
+     *
+     * This method updates the `appliedFilterTags` and `appliedKeyword` properties
+     * with the current filter values, then re-initialises the filtered data set
+     * by invoking `applyFilterState()`.
+     *
+     * Typically called when the user confirms or applies filter changes in the UI.
+     */
+    onApplyFilters(): void;
+    /**
+     * Sets the data to be displayed in the table.
+     *
+     * @param data - An array of table data objects conforming to the `IAbstractTableData<SortableValuesType>` interface.
+     */
+    setTableData(data: IAbstractTableData<SortableValuesType>[]): void;
+    /**
+     * Resets the filter and keyword state to the provided values and reapplies them.
+     *
+     * @param tags - The filter tag state to apply (including selected values).
+     * @param keyword - The keyword string to apply (optional, defaults to empty).
+     */
+    resetFiltersTo(tags: IAbstractTableFilterCategory[], keyword?: string): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AbstractTableFilterComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AbstractTableFilterComponent, "ng-component", never, {}, {}, never, never, true, never>;
+}
+
+export { AbstractTableFilterComponent };

package/components/abstract/abstract-table-filter/interfaces/index.d.ts

@@ -0,0 +1,17 @@
+import { SortableValuesType } from '@hmcts/opal-frontend-common/components/abstract/abstract-table-filter/types';
+
+interface IAbstractTableFilterOption {
+    label: string;
+    value: string | number;
+    count?: number;
+    selected: boolean;
+}
+interface IAbstractTableFilterCategory {
+    categoryName: string;
+    options: IAbstractTableFilterOption[];
+}
+interface IAbstractTableData<T extends SortableValuesType> {
+    [key: string]: T | T[];
+}
+
+export type { IAbstractTableData, IAbstractTableFilterCategory, IAbstractTableFilterOption };

package/components/abstract/abstract-table-filter/types/index.d.ts

@@ -0,0 +1,3 @@
+type SortableValuesType = string | number | boolean | Date | null | undefined;
+
+export type { SortableValuesType };

package/components/custom/custom-account-information/custom-account-information-item/custom-account-information-item-label/index.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from '@angular/core';
+
+declare class CustomAccountInformationItemLabelComponent {
+    hostClass: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CustomAccountInformationItemLabelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CustomAccountInformationItemLabelComponent, "opal-lib-custom-account-information-item-label, [opal-lib-custom-account-information-item-label]", never, {}, {}, never, ["*"], true, never>;
+}
+
+export { CustomAccountInformationItemLabelComponent };

package/components/custom/custom-account-information/custom-account-information-item/custom-account-information-item-value/index.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from '@angular/core';
+
+declare class CustomAccountInformationItemValueComponent {
+    hostClass: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CustomAccountInformationItemValueComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CustomAccountInformationItemValueComponent, "opal-lib-custom-account-information-item-value, [opal-lib-custom-account-information-item-value]", never, {}, {}, never, ["*"], true, never>;
+}
+
+export { CustomAccountInformationItemValueComponent };

package/components/custom/custom-account-information/custom-account-information-item/index.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from '@angular/core';
+
+declare class CustomAccountInformationItemComponent {
+    itemClasses: string;
+    get hostClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CustomAccountInformationItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CustomAccountInformationItemComponent, "opal-lib-custom-account-information-item", never, { "itemClasses": { "alias": "itemClasses"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+
+export { CustomAccountInformationItemComponent };

package/components/custom/custom-account-information/index.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from '@angular/core';
+
+declare class CustomAccountInformationComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<CustomAccountInformationComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CustomAccountInformationComponent, "opal-lib-custom-account-information, [opal-lib-custom-account-information]", never, {}, {}, never, ["*"], true, never>;
+}
+
+export { CustomAccountInformationComponent };

package/components/custom/custom-action-links/index.d.ts

@@ -0,0 +1,12 @@
+import * as i0 from '@angular/core';
+
+declare class CustomActionLinksComponent {
+    id: string;
+    classSize: string;
+    get hostId(): string;
+    get hostClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CustomActionLinksComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CustomActionLinksComponent, "opal-lib-custom-action-links", never, { "id": { "alias": "id"; "required": true; }; "classSize": { "alias": "classSize"; "required": false; }; }, {}, never, ["[heading]", "[links]"], true, never>;
+}
+
+export { CustomActionLinksComponent };

package/components/custom/custom-page-header/index.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from '@angular/core';
+
+declare class CustomPageHeaderComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<CustomPageHeaderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CustomPageHeaderComponent, "opal-lib-custom-page-header", never, {}, {}, never, ["[pageHeaderHeading]", "[pageHeaderButtons]"], true, never>;
+}
+
+export { CustomPageHeaderComponent };

package/components/custom/custom-summary-metric-bar/custom-summary-metric-bar-item/custom-summary-metric-bar-item-label/index.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from '@angular/core';
+
+declare class CustomSummaryMetricBarItemLabelComponent {
+    textColour: string;
+    get hostClasses(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CustomSummaryMetricBarItemLabelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CustomSummaryMetricBarItemLabelComponent, "opal-lib-custom-summary-metric-bar-item-label, [opal-lib-custom-summary-metric-bar-item-label]", never, { "textColour": { "alias": "textColour"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+
+export { CustomSummaryMetricBarItemLabelComponent };

package/components/custom/custom-summary-metric-bar/custom-summary-metric-bar-item/custom-summary-metric-bar-item-value/index.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from '@angular/core';
+
+declare class CustomSummaryMetricBarItemValueComponent {
+    textColour: string;
+    get hostClasses(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CustomSummaryMetricBarItemValueComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CustomSummaryMetricBarItemValueComponent, "opal-lib-custom-summary-metric-bar-item-value, [opal-lib-custom-summary-metric-bar-item-value]", never, { "textColour": { "alias": "textColour"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+
+export { CustomSummaryMetricBarItemValueComponent };

package/components/custom/custom-summary-metric-bar/custom-summary-metric-bar-item/index.d.ts

@@ -0,0 +1,20 @@
+import * as i0 from '@angular/core';
+
+declare class CustomSummaryMetricBarItemComponent {
+    backgroundColour: string;
+    itemClasses: string;
+    get hostClasses(): string;
+    /**
+     * Returns the CSS class names for the summary metric bar item.
+     *
+     * This method generates a string containing the default class "custom-summary-metric-bar-item-frame"
+     * combined with additional classes determined by the component's background and text color properties.
+     *
+     * @returns {string} A space-separated list of CSS classes to apply to the component.
+     */
+    getSummaryMetricBarItemClasses(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CustomSummaryMetricBarItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CustomSummaryMetricBarItemComponent, "opal-lib-custom-summary-metric-bar-item", never, { "backgroundColour": { "alias": "backgroundColour"; "required": false; }; "itemClasses": { "alias": "itemClasses"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+
+export { CustomSummaryMetricBarItemComponent };

package/components/custom/custom-summary-metric-bar/index.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from '@angular/core';
+
+declare class CustomSummaryMetricBarComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<CustomSummaryMetricBarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CustomSummaryMetricBarComponent, "opal-lib-custom-summary-metric-bar", never, {}, {}, never, ["*"], true, never>;
+}
+
+export { CustomSummaryMetricBarComponent };

package/components/govuk/govuk-list/govuk-list-link/index.d.ts

@@ -0,0 +1,12 @@
+import * as i0 from '@angular/core';
+import { EventEmitter } from '@angular/core';
+
+declare class GovukListLinkComponent {
+    linkText: string;
+    linkClickEvent: EventEmitter<void>;
+    handleClick(event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<GovukListLinkComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GovukListLinkComponent, "opal-lib-govuk-list-link", never, { "linkText": { "alias": "linkText"; "required": true; }; }, { "linkClickEvent": "linkClickEvent"; }, never, never, true, never>;
+}
+
+export { GovukListLinkComponent };

package/components/govuk/govuk-list/index.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from '@angular/core';
+
+declare class GovukListComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<GovukListComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GovukListComponent, "opal-lib-govuk-list", never, {}, {}, never, ["*"], true, never>;
+}
+
+export { GovukListComponent };

package/components/hod/hod-loading-spinner/index.d.ts

@@ -0,0 +1,11 @@
+import * as i0 from '@angular/core';
+
+declare class HodLoadingSpinnerComponent {
+    spinnerId: string;
+    hostClasses: string;
+    role: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HodLoadingSpinnerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HodLoadingSpinnerComponent, "opal-lib-hod-loading-spinner, [opal-lib-hod-loading-spinner]", never, { "spinnerId": { "alias": "spinnerId"; "required": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { HodLoadingSpinnerComponent };

package/components/moj/moj-button-menu/index.d.ts

@@ -1,21 +1,27 @@
 import * as i0 from '@angular/core';
-import { EventEmitter } from '@angular/core';
-
-declare class MojButtonMenuItemComponent {
-    actionClick: EventEmitter<boolean>;
-    handleClick(event: Event): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MojButtonMenuItemComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MojButtonMenuItemComponent, "opal-lib-moj-button-menu-item", never, {}, { "actionClick": "actionClick"; }, never, ["[linkText]"], true, never>;
-}
+import { ElementRef } from '@angular/core';
 
 declare class MojButtonMenuComponent {
     menuButtonTitle: string;
+    menuButton: ElementRef<HTMLElement>;
+    hostClasses: string;
+    dataModule: string;
+    get dataButtonText(): string;
+    dataButtonClasses: string;
+    dataMojButtonMenuInit: string;
+    isExpanded: boolean;
     /**
-     * Toggles the button menu by changing the `aria-expanded` attribute of the toggle button.
+     * Toggles the expanded state of the button menu.
+     *
+     * This method retrieves the current "aria-expanded" state from the menu button,
+     * inverts the state, and then updates both the "aria-expanded" attribute and the
+     * internal component property "isExpanded" accordingly.
+     *
+     * @returns void
      */
     toggleButtonMenu(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MojButtonMenuComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MojButtonMenuComponent, "opal-lib-moj-button-menu", never, { "menuButtonTitle": { "alias": "menuButtonTitle"; "required": true; }; }, {}, never, ["*"], true, never>;
 }
 
-export { MojButtonMenuComponent, MojButtonMenuItemComponent };
+export { MojButtonMenuComponent };

package/components/moj/moj-button-menu/moj-button-menu-item/index.d.ts

@@ -0,0 +1,12 @@
+import * as i0 from '@angular/core';
+import { EventEmitter } from '@angular/core';
+
+declare class MojButtonMenuItemComponent {
+    itemText: string;
+    actionClick: EventEmitter<void>;
+    handleClick(event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MojButtonMenuItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MojButtonMenuItemComponent, "opal-lib-moj-button-menu-item", never, { "itemText": { "alias": "itemText"; "required": true; }; }, { "actionClick": "actionClick"; }, never, never, true, never>;
+}
+
+export { MojButtonMenuItemComponent };

package/components/moj/moj-filter/index.d.ts

@@ -0,0 +1,16 @@
+import * as i0 from '@angular/core';
+
+declare class MojFilterComponent {
+    showFilter: boolean;
+    /**
+     * Toggles the visibility of the filter panel.
+     *
+     * This method inverts the current value of `showFilter`, effectively
+     * showing the filter panel if it is hidden, or hiding it if it is visible.
+     */
+    toggleFilter(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MojFilterComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MojFilterComponent, "opal-lib-moj-filter", never, { "showFilter": { "alias": "showFilter"; "required": false; }; }, {}, never, ["[mojFilterPanel]", "[mojFilterContent]"], true, never>;
+}
+
+export { MojFilterComponent };

package/components/moj/moj-filter/moj-filter-panel/index.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from '@angular/core';
+
+declare class MojFilterPanelComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MojFilterPanelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MojFilterPanelComponent, "opal-lib-moj-filter-panel", never, {}, {}, never, ["[mojFilterPanelHeader]", "[mojFilterPanelSelected]", "[mojFilterPanelOption]"], true, never>;
+}
+
+export { MojFilterPanelComponent };

package/components/moj/moj-filter/moj-filter-panel/moj-filter-panel-header/README.md

@@ -0,0 +1,43 @@
+# MojFilterPanelHeaderComponent
+
+The `MojFilterPanelHeaderComponent` is a structural header component used within the `MojFilterComponent`. It is designed to render a heading using the [MOJ Design System](https://design-patterns.service.justice.gov.uk/components/filter/) conventions.
+
+This component is intended to be used inside the `[mojFilterPanelHeader]` slot of the `MojFilterComponent`.
+
+## Features
+
+- Renders a section header using MoJ-styled classes.
+- Accepts a `title` input with a default value of `"Filter"`.
+- Compatible with content projection (if needed).
+
+## Usage
+
+### Import
+
+```ts
+import { MojFilterPanelHeaderComponent } from '@hmcts/opal-frontend-common/components/moj/moj-filter';
+```
+
+### In Template
+
+```html
+<opal-lib-moj-filter-panel-header [title]="'Filter offences'"></opal-lib-moj-filter-panel-header>
+```
+
+## Inputs
+
+| Input | Type   | Default  | Description                        |
+| ----- | ------ | -------- | ---------------------------------- |
+| title | string | 'Filter' | The title to display in the header |
+
+## Accessibility
+
+- Uses an `<h2>` element with the `govuk-heading-m` class for screen-reader-friendly headings.
+- You can override the title text using the `title` input to ensure headings remain meaningful and contextual.
+
+## Testing
+
+Unit tests should verify:
+
+- The default title renders as `"Filter"`.
+- The custom title input renders correctly.

package/components/moj/moj-filter/moj-filter-panel/moj-filter-panel-header/index.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from '@angular/core';
+
+declare class MojFilterPanelHeaderComponent {
+    title: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MojFilterPanelHeaderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MojFilterPanelHeaderComponent, "opal-lib-moj-filter-panel-header", never, { "title": { "alias": "title"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+export { MojFilterPanelHeaderComponent };