@hmcts/opal-frontend-common 0.0.20 → 0.0.21

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/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 };

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

@@ -0,0 +1,81 @@
+# MojFilterPanelOptionComponent
+
+The `MojFilterPanelOptionComponent` is a structural subcomponent of `MojFilterComponent` used to wrap and layout filter controls and the "Apply filters" button using MoJ styling conventions.
+
+This component provides a submit button and two content projection slots:
+
+- `[mojFilterPanelKeyword]` — typically used to project a keyword input component
+- `[mojFilterPanelItems]` — typically used to project checkbox groups per filter category
+
+## Features
+
+- GOV.UK-styled apply button
+- Emits a `applyFilters` event when clicked
+- Allows keyword and category controls to be projected via slots
+
+## Usage
+
+### Import
+
+```ts
+import { MojFilterPanelOptionComponent } from '@hmcts/opal-frontend-common/components/moj/moj-filter';
+```
+
+### In Template
+
+```html
+<opal-lib-moj-filter-panel-option (applyFilters)="onApplyFilters()">
+  <ng-container mojFilterPanelKeyword>
+    <opal-lib-moj-filter-panel-option-form-group-keyword
+      (keywordChange)="onKeywordChange($event)"
+    ></opal-lib-moj-filter-panel-option-form-group-keyword>
+  </ng-container>
+  <ng-container mojFilterPanelItems>
+    @for (item of filterTags(); track item.categoryName) {
+    <opal-lib-moj-filter-panel-option-form-group-item
+      [options]="item"
+      (changed)="onCategoryCheckboxChange($event)"
+    ></opal-lib-moj-filter-panel-option-form-group-item>
+    }
+  </ng-container>
+</opal-lib-moj-filter-panel-option>
+```
+
+## Inputs
+
+| Input        | Type     | Default           | Description                            |
+| ------------ | -------- | ----------------- | -------------------------------------- |
+| `buttonText` | `string` | `'Apply filters'` | The text displayed on the apply button |
+
+## Outputs
+
+| Output         | Type   | Description                              |
+| -------------- | ------ | ---------------------------------------- |
+| `applyFilters` | `void` | Emitted when the apply button is clicked |
+
+## Content Projection Slots
+
+| Slot                      | Description                                   |
+| ------------------------- | --------------------------------------------- |
+| `[mojFilterPanelKeyword]` | Slot for projecting a keyword input component |
+| `[mojFilterPanelItems]`   | Slot for projecting category checkbox groups  |
+
+## Accessibility
+
+- Uses a GOV.UK button with `data-module="govuk-button"` and `type="button"`.
+- Consumers should ensure appropriate ARIA labelling for projected input fields.
+
+## Testing
+
+Unit tests should verify:
+
+- The apply button renders with custom `buttonText`
+- The `applyFilters` output emits on click
+- Projected content is rendered in the appropriate slot
+
+## Related Subcomponents
+
+The following components are typically projected into this component via the documented slots:
+
+- [`MojFilterPanelOptionFormGroupKeywordComponent`](../moj-filter-panel-option-form-group-keyword) – renders a GOV.UK text input for keyword filtering
+- [`MojFilterPanelOptionFormGroupItemComponent`](../moj-filter-panel-option-form-group-item) – renders checkbox groups per filter category

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

@@ -0,0 +1,18 @@
+import * as i0 from '@angular/core';
+import { EventEmitter } from '@angular/core';
+
+declare class MojFilterPanelOptionComponent {
+    buttonText: string;
+    applyFilters: EventEmitter<void>;
+    /**
+     * Emits the applyFilters event.
+     *
+     * This method triggers the emission of the applyFilters event to notify
+     * any subscribers that the filter criteria have been applied.
+     */
+    onApplyFilters(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MojFilterPanelOptionComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MojFilterPanelOptionComponent, "opal-lib-moj-filter-panel-option", never, { "buttonText": { "alias": "buttonText"; "required": false; }; }, { "applyFilters": "applyFilters"; }, never, ["[mojFilterPanelKeyword]"], true, never>;
+}
+
+export { MojFilterPanelOptionComponent };

package/components/moj/moj-filter/moj-filter-panel/moj-filter-panel-option/moj-filter-panel-option-form-group-item/README.md

@@ -0,0 +1,53 @@
+# MojFilterPanelOptionFormGroupItemComponent
+
+The `MojFilterPanelOptionFormGroupItemComponent` is a reusable form group subcomponent of the `MojFilterOptionComponent`. It renders a group of GOV.UK checkboxes for a specific filter category.
+
+This component is typically used inside the `[mojFilterPanelItems]` content projection slot of the `MojFilterOptionComponent`.
+
+## Features
+
+- Renders checkboxes in a `<fieldset>` for a given filter category
+- Outputs the changed option and category context
+- Styled using GOV.UK checkbox and fieldset classes
+
+## Usage
+
+### Import
+
+```ts
+import { MojFilterPanelOptionFormGroupItemComponent } from '@hmcts/opal-frontend-common/components/moj/moj-filter/moj-filter-panel/moj-filter-panel-option/moj-filter-panel-option-form-group-item';
+```
+
+### In Template
+
+```html
+<opal-lib-moj-filter-panel-option-form-group-item
+  [options]="{ categoryName: 'Status', options: statusOptions }"
+  (changed)="onCategoryCheckboxChange($event)"
+></opal-lib-moj-filter-panel-option-form-group-item>
+```
+
+## Inputs
+
+| Input   | Type                                                              | Description                                     |
+| ------- | ----------------------------------------------------------------- | ----------------------------------------------- |
+| options | `{ categoryName: string, options: IAbstractTableFilterOption[] }` | Filter category name and checkbox options array |
+
+## Outputs
+
+| Output  | Type                                                         | Description                                  |
+| ------- | ------------------------------------------------------------ | -------------------------------------------- |
+| changed | `{ categoryName: string, item: IAbstractTableFilterOption }` | Emitted when a checkbox selection is toggled |
+
+## Accessibility
+
+- Uses `<fieldset>` and `<legend>` for grouping related inputs.
+- Each checkbox input is labelled with a `<label>` and includes unique `id`/`name` attributes to support screen readers.
+
+## Testing
+
+Unit tests should verify:
+
+- The correct number of checkboxes renders for the given options
+- The checkbox is checked based on the `selected` flag
+- The `changed` output emits with the expected payload

package/components/moj/moj-filter/moj-filter-panel/moj-filter-panel-option/moj-filter-panel-option-form-group-item/index.d.ts

@@ -0,0 +1,30 @@
+import * as i0 from '@angular/core';
+import { EventEmitter } from '@angular/core';
+import { IAbstractTableFilterOption } from '@hmcts/opal-frontend-common/components/abstract/abstract-table-filter/interfaces';
+
+declare class MojFilterPanelOptionFormGroupItemComponent {
+    hostClass: string;
+    options: {
+        categoryName: string;
+        options: IAbstractTableFilterOption[];
+    };
+    changed: EventEmitter<{
+        categoryName: string;
+        item: IAbstractTableFilterOption;
+    }>;
+    /**
+     * Handles a change in the checkbox state.
+     *
+     * This method updates the selected property of the given filter option based on the
+     * current state of the checkbox element derived from the event. It then emits the
+     * changed filter option to notify listeners of the update.
+     *
+     * @param event - The event object triggered by the checkbox change.
+     * @param item - The filter option item whose selected state needs to be updated.
+     */
+    onCheckboxChange(event: Event, item: IAbstractTableFilterOption): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MojFilterPanelOptionFormGroupItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MojFilterPanelOptionFormGroupItemComponent, "opal-lib-moj-filter-panel-options-form-group-item, [opal-lib-moj-filter-panel-options-form-group-item]", never, { "options": { "alias": "options"; "required": false; }; }, { "changed": "changed"; }, never, never, true, never>;
+}
+
+export { MojFilterPanelOptionFormGroupItemComponent };

package/components/moj/moj-filter/moj-filter-panel/moj-filter-panel-option/moj-filter-panel-option-form-group-keyword/README.md

@@ -0,0 +1,59 @@
+# MojFilterPanelOptionFormGroupKeywordComponent
+
+The `MojFilterPanelOptionFormGroupKeywordComponent` is a simple, reusable keyword input subcomponent used within the `MojFilterPanelOptionComponent`.
+
+It renders a GOV.UK-styled input field with a label and emits the entered keyword string via `keywordChange`.
+
+This component is projected into `[mojFilterPanelKeyword]`.
+
+## Features
+
+- GOV.UK-styled input field and label
+- Emits user input as a keyword string
+- Accepts configurable input ID, name, and label
+
+## Usage
+
+### Import
+
+```ts
+import { MojFilterPanelOptionFormGroupKeywordComponent } from '@hmcts/opal-frontend-common/components/moj/moj-filter';
+```
+
+### In Template
+
+```html
+<opal-lib-moj-filter-panel-option-form-group-keyword
+  [inputId]="'keywords'"
+  [inputName]="'keywords'"
+  [labelValue]="'Search by keyword'"
+  (keywordChange)="onKeywordChange($event)"
+></opal-lib-moj-filter-panel-option-form-group-keyword>
+```
+
+## Inputs
+
+| Input        | Type   | Default    | Description                            |
+| ------------ | ------ | ---------- | -------------------------------------- |
+| `inputId`    | string | 'keywords' | The HTML ID applied to the input field |
+| `inputName`  | string | 'keywords' | The name attribute for the input field |
+| `labelValue` | string | 'Keywords' | The visible label for the input        |
+
+## Outputs
+
+| Output          | Type     | Description                         |
+| --------------- | -------- | ----------------------------------- |
+| `keywordChange` | `string` | Emits the keyword string when typed |
+
+## Accessibility
+
+- Label is properly linked to the input using `for`/`id`.
+- Uses `govuk-label--m` and `govuk-input` to ensure visual and accessibility compliance with GOV.UK design system.
+
+## Testing
+
+Unit tests should verify:
+
+- The label renders correctly using `labelValue`
+- The input emits `keywordChange` with the expected string
+- Custom `inputId` and `inputName` values are respected

package/components/moj/moj-filter/moj-filter-panel/moj-filter-panel-option/moj-filter-panel-option-form-group-keyword/index.d.ts

@@ -0,0 +1,22 @@
+import * as i0 from '@angular/core';
+import { EventEmitter } from '@angular/core';
+
+declare class MojFilterPanelOptionFormGroupKeywordComponent {
+    inputId: string;
+    inputName: string;
+    labelValue: string;
+    keywordChange: EventEmitter<string>;
+    /**
+     * Handles the keyword change event from an input element.
+     *
+     * This function extracts the keyword from the event target (an HTML input element) and emits the new value
+     * using the `keywordChange` event emitter.
+     *
+     * @param event - The DOM event triggered by a change in the input element.
+     */
+    onKeywordChange(event?: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MojFilterPanelOptionFormGroupKeywordComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MojFilterPanelOptionFormGroupKeywordComponent, "opal-lib-moj-filter-panel-option-form-group-keyword", never, { "inputId": { "alias": "inputId"; "required": false; }; "inputName": { "alias": "inputName"; "required": false; }; "labelValue": { "alias": "labelValue"; "required": false; }; }, { "keywordChange": "keywordChange"; }, never, ["[mojFilterPanelItems]"], true, never>;
+}
+
+export { MojFilterPanelOptionFormGroupKeywordComponent };