import { BlockDefinition, ComponentRegistryEntry, FieldBlockDefinition, ResolvableArray, ResolvableBoolean, ResolvableNumber, ResolvableObject, ResolvableString } from "@ministryofjustice/hmpps-forge/core/components";
//#region forge-moj-components/src/components/alert/mojAlert.d.ts
/**
* Alert variant types that determine styling and icon.
*/
type MOJAlertVariant = 'information' | 'success' | 'warning' | 'error';
/**
* Valid heading tag levels for the alert title.
*/
type MOJAlertHeadingTag = 'h2' | 'h3' | 'h4';
/**
* MOJ Alert component.
* Displays important messages to users as a notification banner.
* It supports different variants for different types of messages
* (information, success, warning, error) and can be dismissible.
*
* @see https://design-patterns.service.justice.gov.uk/components/alert
* @example
* ```typescript
* MOJAlert({
* alertVariant: 'success',
* title: 'Application submitted',
* text: 'Your changes have been saved successfully.',
* showTitleAsHeading: true,
* })
* ```
*/
interface MOJAlert extends BlockDefinition {
/**
* The type of alert which determines styling and icon.
* Options: 'information' (default), 'success', 'warning', 'error'
*
* @example 'information' // Blue info alert
* @example 'success' // Green success alert
* @example 'warning' // Yellow warning alert
* @example 'error' // Red error alert
*/
alertVariant?: MOJAlertVariant | ResolvableString;
/**
* The title of the alert. Used for the aria-label and optionally as a heading.
*
* @example 'Important information'
* @example 'Application submitted'
*/
title: ResolvableString;
/**
* Plain text content for the alert message.
* Use either text or html, not both.
*
* @example 'Your application has been received.'
*/
text?: ResolvableString;
/**
* HTML content for the alert message.
* Use either text or html, not both.
*
* @example '
You have unsaved changes.
'
*/
html?: ResolvableString;
/**
* Child blocks to render in the alert message.
* Takes precedence over text/html.
*/
blocks?: BlockDefinition[];
/**
* Whether to display the title as a heading element.
* When true, the title appears as a heading above the content.
*
* @example true // Show title as heading
*/
showTitleAsHeading?: ResolvableBoolean;
/**
* The heading level when showTitleAsHeading is true.
* Options: 'h2' (default), 'h3', 'h4'
*
* @example 'h2' // Default heading level
* @example 'h3' // Smaller heading
*/
headingTag?: MOJAlertHeadingTag | ResolvableString;
/**
* Whether the alert can be dismissed by the user.
* When true, a dismiss button is shown.
*
* @example true // Show dismiss button
*/
dismissible?: ResolvableBoolean;
/**
* Text for the dismiss button.
* Default: 'Dismiss'
*
* @example 'Close'
* @example 'Hide this message'
*/
dismissText?: ResolvableString;
/**
* Whether to disable auto-focus on the alert when it appears.
*
* @example true // Disable auto-focus
*/
disableAutoFocus?: ResolvableBoolean;
/**
* CSS selector for the element to focus when the alert is dismissed.
*
* @example '#main-content'
*/
focusOnDismissSelector?: ResolvableString;
/**
* ARIA role for the alert container.
* Default: 'region'
*
* @example 'alert' // For urgent notifications
* @example 'status' // For status updates
*/
role?: ResolvableString;
/**
* Additional CSS classes for the alert container.
*
* @example 'app-alert--custom'
*/
classes?: ResolvableString;
/**
* Additional HTML attributes for the alert container.
*
* @example { 'data-module': 'custom-alert' }
*/
attributes?: Record;
}
/**
* MOJ Alert component.
* Displays important messages to users as a notification banner.
* It supports different variants for different types of messages
* (information, success, warning, error) and can be dismissible.
*
* @see https://design-patterns.service.justice.gov.uk/components/alert
* @example
* ```typescript
* MOJAlert({
* alertVariant: 'success',
* title: 'Application submitted',
* text: 'Your changes have been saved successfully.',
* showTitleAsHeading: true,
* })
* ```
*/
declare const MOJAlert: import("@ministryofjustice/hmpps-forge/core/components").ForgeComponent;
//#endregion
//#region forge-moj-components/src/components/badge/mojBadge.d.ts
/**
* Available badge colour classes.
* Use these to style the badge appearance.
*/
type MOJBadgeColour = 'moj-badge--purple' | 'moj-badge--light-purple' | 'moj-badge--bright-purple' | 'moj-badge--pink' | 'moj-badge--light-pink' | 'moj-badge--red' | 'moj-badge--orange' | 'moj-badge--brown' | 'moj-badge--yellow' | 'moj-badge--light-green' | 'moj-badge--green' | 'moj-badge--turquoise' | 'moj-badge--light-blue' | 'moj-badge--blue' | 'moj-badge--black' | 'moj-badge--dark-grey' | 'moj-badge--mid-grey' | 'moj-badge--light-grey' | 'moj-badge--white';
/**
* MOJ Badge component.
* Displays small status or category labels.
* It can be styled with different colours to indicate different states.
*
* @see https://design-patterns.service.justice.gov.uk/components/badge
* @example
* ```typescript
* MOJBadge({
* text: 'Urgent',
* classes: 'moj-badge--red',
* })
* ```
*
* @example
* ```typescript
* MOJBadge({
* text: 'Complete',
* classes: 'moj-badge--green',
* label: 'Status: Complete',
* })
* ```
*/
interface MOJBadge extends BlockDefinition {
/**
* Plain text content for the badge.
* Use either text or html, not both.
*
* @example 'Complete'
* @example 'In progress'
*/
text?: ResolvableString;
/**
* HTML content for the badge.
* Use either text or html, not both.
*
* @example 'Urgent'
*/
html?: ResolvableString;
/**
* CSS classes for the badge container.
* Use moj-badge--{colour} classes to style the badge.
*
* @example 'moj-badge--blue'
* @example 'moj-badge--red moj-badge--large'
*/
classes?: MOJBadgeColour | ResolvableString;
/**
* Accessible label for the badge.
* Sets the aria-label attribute for screen readers.
*
* @example 'Status: Complete'
*/
label?: ResolvableString;
/**
* Additional HTML attributes for the badge container.
*
* @example { 'data-status': 'complete' }
*/
attributes?: Record;
}
/**
* MOJ Badge component.
* Displays small status or category labels.
* It can be styled with different colours to indicate different states.
*
* @see https://design-patterns.service.justice.gov.uk/components/badge
* @example
* ```typescript
* MOJBadge({
* text: 'Urgent',
* classes: 'moj-badge--red',
* })
* ```
*
* @example
* ```typescript
* MOJBadge({
* text: 'Complete',
* classes: 'moj-badge--green',
* label: 'Status: Complete',
* })
* ```
*/
declare const MOJBadge: import("@ministryofjustice/hmpps-forge/core/components").ForgeComponent;
//#endregion
//#region forge-moj-components/src/components/banner/mojBanner.d.ts
/**
* Banner type that determines styling and icon.
*/
type MOJBannerType = 'success' | 'warning' | 'information';
/**
* MOJ Banner component.
* Displays important messages to users.
* It supports different types for different kinds of messages
* (success, warning, information) with corresponding icons.
*
* @see https://design-patterns.service.justice.gov.uk/components/banner
* @example
* ```typescript
* MOJBanner({
* bannerType: 'success',
* text: 'Your application has been submitted.',
* })
* ```
*/
interface MOJBanner extends BlockDefinition {
/**
* The type of banner which determines styling and icon.
* Options: 'success', 'warning', 'information'
* If not specified, renders a default banner without icon.
*
* @example 'success' // Green banner with checkmark icon
* @example 'warning' // Yellow banner with warning icon
* @example 'information' // Blue banner with info icon
*/
bannerType?: MOJBannerType | ResolvableString;
/**
* Plain text content for the banner message.
* Use either text or html, not both.
*
* @example 'Your application has been submitted.'
*/
text?: ResolvableString;
/**
* HTML content for the banner message.
* Use either text or html, not both.
*
* @example '
Your application has been submitted.
'
*/
html?: ResolvableString;
/**
* Child blocks to render in the banner message.
* Takes precedence over text/html.
*/
blocks?: BlockDefinition[];
/**
* Fallback text for the icon used in the aria-label.
* Defaults to the bannerType value if not provided.
*
* @example 'Success'
* @example 'Warning'
*/
iconFallbackText?: ResolvableString;
/**
* Additional CSS classes for the banner container.
*
* @example 'app-banner--custom'
*/
classes?: ResolvableString;
/**
* Additional HTML attributes for the banner container.
*
* @example { 'data-module': 'custom-banner' }
*/
attributes?: Record;
}
/**
* MOJ Banner component.
* Displays important messages to users.
* It supports different types for different kinds of messages
* (success, warning, information) with corresponding icons.
*
* @see https://design-patterns.service.justice.gov.uk/components/banner
* @example
* ```typescript
* MOJBanner({
* bannerType: 'success',
* text: 'Your application has been submitted.',
* })
* ```
*/
declare const MOJBanner: import("@ministryofjustice/hmpps-forge/core/components").ForgeComponent;
//#endregion
//#region forge-moj-components/src/components/button-menu/mojButtonMenu.d.ts
/**
* Menu alignment options for the button menu dropdown.
*/
type MOJButtonMenuAlign = 'left' | 'right';
/**
* Configuration for the toggle button that opens/closes the menu.
*/
interface MOJButtonMenuButton {
/**
* Text content for the toggle button.
*
* @example 'Actions'
* @example 'Options'
*/
text?: ResolvableString;
/**
* Additional CSS classes for the toggle button.
*
* @example 'govuk-button--secondary'
*/
classes?: ResolvableString;
}
/**
* Menu item configuration for a button in the menu.
* Based on GOV.UK Button component parameters.
*
* @see https://design-system.service.gov.uk/components/button/
*/
interface MOJButtonMenuItem {
/**
* Whether to use an `input`, `button` or `a` element.
* Automatically configured if `href` or `html` is set.
*
* @example 'button'
* @example 'a'
*/
element?: 'input' | 'button' | 'a' | ResolvableString;
/**
* Text content for the button or link.
* Required if `html` is not set.
*
* @example 'Archive'
* @example 'Delete'
*/
text?: ResolvableString;
/**
* HTML content for the button or link.
* Required if `text` is not set.
*
* @example '+ Add item'
*/
html?: ResolvableString;
/**
* Name attribute for input or button elements.
* Has no effect on anchor elements.
*
* @example 'action'
*/
name?: ResolvableString;
/**
* Type attribute for input or button elements.
* Options: 'button', 'submit', 'reset'. Default: 'submit'.
* Has no effect on anchor elements.
*
* @example 'button'
*/
type?: 'button' | 'submit' | 'reset' | ResolvableString;
/**
* Value attribute for button elements.
* Has no effect on anchor or input elements.
*
* @example 'archive'
*/
value?: ResolvableString;
/**
* Whether the button should be disabled.
*
* @example true
*/
disabled?: ResolvableBoolean;
/**
* URL that the button should link to.
* If set, `element` defaults to 'a'.
*
* @example '/actions/archive'
* @example '#archive'
*/
href?: ResolvableString;
/**
* Additional CSS classes for the button.
*
* @example 'govuk-button--warning'
*/
classes?: ResolvableString;
/**
* Additional HTML attributes for the button.
*
* @example { 'data-action': 'archive' }
*/
attributes?: Record;
/**
* Prevent accidental double clicks from submitting forms multiple times.
*
* @example true
*/
preventDoubleClick?: ResolvableBoolean;
/**
* Conditional visibility for this menu item.
* When the evaluated value is `false`, the item is omitted from rendering.
*/
visibleWhen?: ResolvableBoolean;
}
/**
* MOJ Button Menu component.
* A dropdown button that reveals a menu of actions.
*
* The button menu component is useful for grouping secondary actions together
* to reduce visual clutter while keeping them easily accessible.
*
* @see https://design-patterns.service.justice.gov.uk/components/button-menu
* @example
* ```typescript
* MOJButtonMenu({
* button: {
* text: 'Actions',
* classes: 'govuk-button--secondary',
* },
* alignMenu: 'right',
* items: [
* { text: 'Archive', href: '#archive' },
* { text: 'Reassign', href: '#reassign' },
* { text: 'Delete', href: '#delete', classes: 'govuk-button--warning' },
* ],
* })
* ```
*/
interface MOJButtonMenu extends BlockDefinition {
/**
* Configuration for the toggle button.
* Sets the text and styling of the button that opens the menu.
*
* @example { text: 'Actions', classes: 'govuk-button--secondary' }
*/
button?: MOJButtonMenuButton;
/**
* Alignment of the dropdown menu relative to the toggle button.
* Options: 'left' (default), 'right'
*
* @example 'right'
*/
alignMenu?: MOJButtonMenuAlign | ResolvableString;
/**
* Array of menu item button configurations.
* Each item becomes a button/link in the dropdown menu.
*
* @example [{ text: 'Archive', href: '#archive' }]
*/
items: ResolvableArray;
/**
* Additional CSS classes for the menu container.
*
* @example 'app-button-menu--custom'
*/
classes?: ResolvableString;
/**
* Additional HTML attributes for the menu container.
*
* @example { 'data-module': 'custom-menu' }
*/
attributes?: Record;
}
/**
* MOJ Button Menu component.
* A dropdown button that reveals a menu of actions.
*
* The button menu component is useful for grouping secondary actions together
* to reduce visual clutter while keeping them easily accessible.
*
* @see https://design-patterns.service.justice.gov.uk/components/button-menu
* @example
* ```typescript
* MOJButtonMenu({
* button: {
* text: 'Actions',
* classes: 'govuk-button--secondary',
* },
* alignMenu: 'right',
* items: [
* { text: 'Archive', href: '#archive' },
* { text: 'Reassign', href: '#reassign' },
* { text: 'Delete', href: '#delete', classes: 'govuk-button--warning' },
* ],
* })
* ```
*/
declare const MOJButtonMenu: import("@ministryofjustice/hmpps-forge/core/components").ForgeComponent;
//#endregion
//#region forge-moj-components/src/components/card/mojCard.d.ts
/**
* Heading configuration for the MOJ Card component.
*/
interface MOJCardHeading {
/** Heading text (required if html not set) */
text?: ResolvableString;
/** Heading HTML content (required if text not set) */
html?: ResolvableString;
/** Heading level 1-6 (default: 2) */
level?: 1 | 2 | 3 | 4 | 5 | 6;
/** Additional classes for the heading element */
classes?: ResolvableString;
}
/**
* Description configuration for the MOJ Card component.
*/
interface MOJCardDescription {
/** Description text (required if html not set) */
text?: ResolvableString;
/** Description HTML content (required if text not set) */
html?: ResolvableString;
/** Additional classes for the description element */
classes?: ResolvableString;
}
/**
* MOJ Card component.
* A card component for displaying links on dashboards or home pages.
*
* @see https://design-patterns.service.justice.gov.uk/components/card/
* @example
* ```typescript
* MOJCard({
* heading: 'Search cases',
* href: '/cases/search',
* description: 'Find and manage case records',
* })
* ```
*/
interface MOJCard extends BlockDefinition {
/**
* Card heading - can be a simple string or object with additional options.
* @example 'Search cases'
* @example { text: 'Search cases', level: 3 }
*/
heading: ResolvableString | ResolvableObject;
/** Link URL for the card heading */
href: ResolvableString;
/**
* Optional description - can be a simple string or object with additional options.
* @example 'Find and manage case records'
* @example { html: 'Find records' }
*/
description?: ResolvableString | ResolvableObject;
/** Makes the entire card clickable via CSS (default: true) */
clickable?: ResolvableBoolean;
/** Additional CSS classes for the card container */
classes?: ResolvableString;
/** Additional HTML attributes */
attributes?: Record;
}
/**
* MOJ Card component.
* A card component for displaying links on dashboards or home pages.
*
* @see https://design-patterns.service.justice.gov.uk/components/card/
* @example
* ```typescript
* MOJCard({
* heading: 'Search cases',
* href: '/cases/search',
* description: 'Find and manage case records',
* })
* ```
*/
declare const MOJCard: import("@ministryofjustice/hmpps-forge/core/components").ForgeComponent;
//#endregion
//#region forge-moj-components/src/components/card-group/mojCardGroup.d.ts
/**
* Heading configuration object for card items.
*/
interface MOJCardGroupItemHeading {
/** Heading text (required if html not set) */
text?: ResolvableString;
/** Heading HTML content (required if text not set) */
html?: ResolvableString;
/** Heading level 1-6 (default: 2) */
level?: 1 | 2 | 3 | 4 | 5 | 6;
/** Additional classes for the heading element */
classes?: ResolvableString;
}
/**
* Description configuration object for card items.
*/
interface MOJCardGroupItemDescription {
/** Description text (required if html not set) */
text?: ResolvableString;
/** Description HTML content (required if text not set) */
html?: ResolvableString;
/** Additional classes for the description element */
classes?: ResolvableString;
}
/**
* Card item configuration for the MOJ Card Group component.
* Heading and description can be simple strings or objects with additional options.
*/
interface MOJCardGroupItem {
/**
* Card heading - can be a simple string or object with additional options.
* @example 'Search cases'
* @example { text: 'Search cases', level: 3 }
*/
heading: ResolvableString | ResolvableObject;
/** Link URL for the card heading */
href: ResolvableString;
/**
* Optional description - can be a simple string or object with additional options.
* @example 'Find and manage case records'
* @example { html: 'Find records' }
*/
description?: ResolvableString | ResolvableObject;
/** Makes the entire card clickable via CSS (default: true) */
clickable?: ResolvableBoolean;
/** Additional CSS classes for the card container */
classes?: ResolvableString;
/** Additional HTML attributes */
attributes?: Record;
/**
* Conditional visibility for this card. When the evaluated value is `false`,
* the card is omitted from rendering. Defaults to showing the card.
*/
visibleWhen?: ResolvableBoolean;
}
/**
* MOJ Card Group component.
* A component for displaying multiple cards in a responsive grid layout.
*
* @see https://design-patterns.service.justice.gov.uk/components/card/
* @example
* ```typescript
* MOJCardGroup({
* items: [
* { heading: 'Search', href: '/search', description: 'Find records' },
* { heading: 'Reports', href: '/reports', description: 'View reports' },
* ],
* columns: 2,
* })
* ```
*/
interface MOJCardGroup extends BlockDefinition {
/** Array of cards to display */
items: ResolvableArray;
/** Number of columns: 2, 3, or 4 (default: 3) */
columns?: 2 | 3 | 4;
/** Additional CSS classes for the card group container */
classes?: ResolvableString;
/** Additional HTML attributes */
attributes?: Record;
}
/**
* MOJ Card Group component.
* A component for displaying multiple cards in a responsive grid layout.
*
* @see https://design-patterns.service.justice.gov.uk/components/card/
* @example
* ```typescript
* MOJCardGroup({
* items: [
* { heading: 'Search', href: '/search', description: 'Find records' },
* { heading: 'Reports', href: '/reports', description: 'View reports' },
* ],
* columns: 2,
* })
* ```
*/
declare const MOJCardGroup: import("@ministryofjustice/hmpps-forge/core/components").ForgeComponent;
//#endregion
//#region forge-moj-components/src/components/date-picker/mojDatePicker.d.ts
/**
* Label configuration for the MOJ Date Picker component.
*/
interface MOJDatePickerLabel {
/** Label text (required if html not set) */
text?: ResolvableString;
/** Label HTML content (required if text not set) */
html?: ResolvableString;
/** Additional classes for the label element */
classes?: ResolvableString;
/** Whether the label should be visually hidden */
isPageHeading?: ResolvableBoolean;
/** HTML attributes for the label */
attributes?: Record;
}
/**
* Hint configuration for the MOJ Date Picker component.
*/
interface MOJDatePickerHint {
/** Hint text (required if html not set) */
text?: ResolvableString;
/** Hint HTML content (required if text not set) */
html?: ResolvableString;
/** Additional classes for the hint element */
classes?: ResolvableString;
/** HTML attributes for the hint */
attributes?: Record;
}
/**
* Form group configuration for the MOJ Date Picker component.
*/
interface MOJDatePickerFormGroup {
/** Additional classes for the form group */
classes?: ResolvableString;
/** HTML attributes for the form group */
attributes?: Record;
}
/**
* MOJ Date Picker component.
* A date input component with calendar widget following the MOJ Design Patterns.
*
* The date picker allows users to select a date via calendar or direct text entry.
* It enhances a standard text input with a calendar button that opens a date picker.
* Date format is dd/mm/yyyy.
*
* @see https://design-patterns.service.justice.gov.uk/components/date-picker/
* @example
* ```typescript
* MOJDatePicker({
* code: 'appointment_date',
* label: 'Appointment date',
* hint: 'For example, 17/5/2024',
* minDate: '01/04/2025',
* maxDate: '30/04/2025',
* })
* ```
*/
interface MOJDatePicker extends FieldBlockDefinition {
/**
* The ID of the input. Defaults to the value of `code` if not provided.
* @example 'appointment-date'
*/
id?: ResolvableString;
/**
* Label for the date picker - can be a simple string or object with additional options.
* @example 'Select a date'
* @example { text: 'Select a date', classes: 'govuk-label--l' }
*/
label: ResolvableString | ResolvableObject;
/**
* Optional hint text - can be a simple string or object with additional options.
* @example 'For example, 17/5/2024'
* @example { html: 'Enter the date in dd/mm/yyyy format' }
*/
hint?: ResolvableString | ResolvableObject;
/**
* Earliest date that can be selected (format: dd/mm/yyyy).
* Users can still type dates before this, so server-side validation is required.
* @example '01/04/2025'
*/
minDate?: ResolvableString;
/**
* Latest date that can be selected (format: dd/mm/yyyy).
* Users can still type dates after this, so server-side validation is required.
* @example '30/04/2025'
*/
maxDate?: ResolvableString;
/**
* Array of dates that cannot be selected (format: dd/mm/yyyy).
* Users can still type these dates, so server-side validation is required.
* @example ['02/04/2025', '18/04/2025']
*/
excludedDates?: string[];
/**
* Array of days of the week that cannot be selected.
* Users can still type these days, so server-side validation is required.
* @example ['saturday', 'sunday']
*/
excludedDays?: ('monday' | 'tuesday' | 'wednesday' | 'thursday' | 'friday' | 'saturday' | 'sunday')[];
/**
* Which day the calendar week starts on.
* @default 'monday'
*/
weekStartDay?: 'monday' | 'sunday';
/** Form group configuration */
formGroup?: MOJDatePickerFormGroup;
/** Additional CSS classes for the date picker container */
classes?: ResolvableString;
/** Additional HTML attributes */
attributes?: Record;
}
/**
* MOJ Date Picker component.
* A date input component with calendar widget following the MOJ Design Patterns.
*
* The date picker allows users to select a date via calendar or direct text entry.
* It enhances a standard text input with a calendar button that opens a date picker.
* Date format is dd/mm/yyyy.
*
* @see https://design-patterns.service.justice.gov.uk/components/date-picker/
* @example
* ```typescript
* MOJDatePicker({
* code: 'appointment_date',
* label: 'Appointment date',
* hint: 'For example, 17/5/2024',
* minDate: '01/04/2025',
* maxDate: '30/04/2025',
* })
* ```
*/
declare const MOJDatePicker: import("@ministryofjustice/hmpps-forge/core/components").ForgeComponent;
//#endregion
//#region forge-moj-components/src/components/filter/mojFilter.d.ts
/**
* Heading configuration for the filter component.
*/
interface MOJFilterHeading {
/** Heading text (required if html not set) */
text?: ResolvableString;
/** Heading HTML content (required if text not set) */
html?: ResolvableString;
}
/**
* Clear link configuration for selected filters.
*/
interface MOJFilterClearLink {
/** URL for the clear all filters link */
href: ResolvableString;
/** Text for the clear link (e.g. "Clear filters") */
text: ResolvableString;
}
/**
* Individual selected filter tag item.
*/
interface MOJFilterTagItem {
/** URL to remove this filter */
href: ResolvableString;
/** Display text for the filter tag */
text: ResolvableString;
/** Conditional visibility for this filter tag */
visibleWhen?: ResolvableBoolean;
}
/**
* Category of selected filters with heading and removable tags.
*/
interface MOJFilterCategory {
/** Heading for this category of filters */
heading: MOJFilterHeading;
/** Array of filter tag items in this category */
items: ResolvableArray;
/** Conditional visibility for this filter category */
visibleWhen?: ResolvableBoolean;
}
/**
* Selected filters configuration showing active filter tags.
*/
interface MOJFilterSelectedFilters {
/** Heading for the selected filters section */
heading: MOJFilterHeading;
/** Link to clear all selected filters */
clearLink: MOJFilterClearLink;
/** Categories of selected filter tags */
categories: ResolvableArray;
}
/**
* Submit button configuration for applying filters.
*/
interface MOJFilterSubmit {
/** Button text (default: "Apply filters") */
text?: ResolvableString;
/** Additional HTML attributes for the submit button */
attributes?: Record;
}
/**
* MOJ Filter component.
*
* The filter component displays a panel with filter controls.
* It can show currently selected filters as removable tags and
* provides an area for form controls to define filter criteria.
*
* @see https://design-patterns.service.justice.gov.uk/components/filter
* @example
* ```typescript
* MOJFilter({
* heading: { text: 'Filter' },
* submit: { text: 'Apply filters' },
* optionsHtml: '
',
* selectedFilters: {
* heading: { text: 'Selected filters' },
* clearLink: { href: '/clear', text: 'Clear filters' },
* categories: [
* {
* heading: { text: 'Status' },
* items: [
* { text: 'Active', href: '/remove-active' },
* { text: 'Pending', href: '/remove-pending' },
* ],
* },
* ],
* },
* })
* ```
*/
declare const MOJFilter: import("@ministryofjustice/hmpps-forge/core/components").ForgeComponent;
//#endregion
//#region forge-moj-components/src/components/progress-bar/mojProgressBar.d.ts
/**
* Label configuration for a progress bar item.
*/
interface MOJProgressBarItemLabel {
/** Label text (required if html not set) */
text?: ResolvableString;
/** Label HTML content (required if text not set) */
html?: ResolvableString;
/** Additional CSS classes for the label element */
classes?: ResolvableString;
}
/**
* Configuration for an individual progress bar item.
*/
interface MOJProgressBarItem {
/**
* Unique identifier for the item.
* Defaults to "progress-item-{index}" if not provided.
*
* @example 'step-1'
*/
id?: ResolvableString;
/**
* Label for the progress item - can be a simple string or object with additional options.
*
* @example 'Personal details'
* @example { text: 'Personal details', classes: 'custom-label' }
*/
label: ResolvableString | ResolvableObject;
/**
* Whether this item represents the current/active step.
* Sets `aria-current="step"` for accessibility.
*
* @example true // Current step
*/
active?: ResolvableBoolean;
/**
* Whether this step has been completed.
* Displays a completed icon indicator.
*
* @example true // Step is complete
*/
complete?: ResolvableBoolean;
/** Additional CSS classes for the item element */
classes?: ResolvableString;
/** Additional HTML attributes for the item element */
attributes?: Record;
/** Conditional visibility for this progress item */
visibleWhen?: ResolvableBoolean;
}
/**
* MOJ Progress Bar component.
*
* The progress bar component shows users where they are in a linear process
* with multiple steps. It displays completed steps, the current step, and
* upcoming steps.
*
* @see https://design-patterns.service.justice.gov.uk/components/progress-bar
* @example
* ```typescript
* MOJProgressBar({
* label: 'Application progress',
* items: [
* { label: 'Personal details', complete: true },
* { label: 'Contact information', active: true },
* { label: 'Review and submit' },
* ],
* })
* ```
*/
interface MOJProgressBar extends BlockDefinition {
/**
* Unique identifier for the progress bar.
* Defaults to "progress" if not provided.
*
* @example 'application-progress'
*/
id?: ResolvableString;
/**
* Accessible label for the progress bar (aria-label).
* Describes the purpose of the progress indicator.
*
* @example 'Application progress'
* @example 'Registration steps'
*/
label?: ResolvableString;
/**
* Array of progress items representing each step in the journey.
* Items should be ordered from first to last step.
*
* @example
* ```typescript
* [
* { label: 'Personal details', complete: true },
* { label: 'Contact information', active: true },
* { label: 'Review and submit' },
* ]
* ```
*/
items: ResolvableArray;
/**
* Additional CSS classes for the progress bar container.
*
* @example 'app-progress-bar--custom'
*/
classes?: ResolvableString;
/**
* Additional HTML attributes for the progress bar container.
*
* @example { 'data-module': 'progress-tracker' }
*/
attributes?: Record;
}
/**
* MOJ Progress Bar component.
*
* The progress bar component shows users where they are in a linear process
* with multiple steps. It displays completed steps, the current step, and
* upcoming steps.
*
* @see https://design-patterns.service.justice.gov.uk/components/progress-bar
* @example
* ```typescript
* MOJProgressBar({
* label: 'Application progress',
* items: [
* { label: 'Personal details', complete: true },
* { label: 'Contact information', active: true },
* { label: 'Review and submit' },
* ],
* })
* ```
*/
declare const MOJProgressBar: import("@ministryofjustice/hmpps-forge/core/components").ForgeComponent;
//#endregion
//#region forge-moj-components/src/components/side-navigation/mojSideNavigation.d.ts
/**
* Heading configuration for a side navigation section.
*/
interface MOJSideNavigationHeading {
/** Heading level 1-6 (default: 4) */
headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
/** Heading text (required if html not set) */
text?: ResolvableString;
/** Heading HTML content (required if text not set) */
html?: ResolvableString;
/** Additional classes for the heading element */
classes?: ResolvableString;
/** Additional HTML attributes for the heading */
attributes?: Record;
}
/**
* Navigation item configuration.
*/
interface MOJSideNavigationItem {
/** URL of the navigation item anchor */
href: ResolvableString;
/** Item text (required if html not set) */
text?: ResolvableString;
/** Item HTML content (required if text not set) */
html?: ResolvableString;
/** Flag to mark the navigation item as active */
active?: ResolvableBoolean;
/** Conditional visibility for this navigation item */
visibleWhen?: ResolvableBoolean;
/** Additional HTML attributes for the item */
attributes?: Record;
}
/**
* Section configuration for grouped navigation items.
*/
interface MOJSideNavigationSection {
/** Section heading configuration */
heading?: MOJSideNavigationHeading;
/** Array of navigation items in this section */
items: ResolvableArray;
/** Conditional visibility for this navigation section */
visibleWhen?: ResolvableBoolean;
}
/**
* MOJ Side Navigation component.
* A vertical navigation menu component following the MOJ Design Patterns.
*
* It can be used in simple mode with just items, or in sectioned mode
* with grouped items under headings.
*
* @see https://design-patterns.service.justice.gov.uk/components/side-navigation
* @example
* ```typescript
* // Simple form - flat list of items
* MOJSideNavigation({
* label: 'Side navigation',
* items: [
* { text: 'Nav item 1', href: '#1', active: true },
* { text: 'Nav item 2', href: '#2' },
* { text: 'Nav item 3', href: '#3' },
* ],
* })
*
* // Sectioned form - items grouped under headings
* MOJSideNavigation({
* label: 'Side navigation',
* sections: [
* {
* heading: { text: 'Section 1' },
* items: [
* { text: 'Item 1.1', href: '#1-1', active: true },
* { text: 'Item 1.2', href: '#1-2' },
* ],
* },
* {
* heading: { text: 'Section 2', headingLevel: 3 },
* items: [
* { text: 'Item 2.1', href: '#2-1' },
* ],
* },
* ],
* })
* ```
*/
interface MOJSideNavigation extends BlockDefinition {
/**
* The aria-label to add to the navigation container.
* @example 'Side navigation'
*/
label?: ResolvableString;
/**
* Array of navigation items (simple mode - use instead of sections).
* @example [{ text: 'Nav item 1', href: '#1', active: true }]
*/
items?: ResolvableArray;
/**
* Array of navigation sections (sectioned mode - use instead of items).
* @example [{ heading: { text: 'Section 1' }, items: [...] }]
*/
sections?: ResolvableArray;
/**
* Additional CSS classes for the nav container.
* @example 'app-side-navigation--custom'
*/
classes?: ResolvableString;
/**
* Additional HTML attributes for the navigation container.
* @example { 'data-module': 'app-navigation' }
*/
attributes?: Record;
}
/**
* MOJ Side Navigation component.
* A vertical navigation menu component following the MOJ Design Patterns.
*
* It can be used in simple mode with just items, or in sectioned mode
* with grouped items under headings.
*
* @see https://design-patterns.service.justice.gov.uk/components/side-navigation
* @example
* ```typescript
* // Simple form - flat list of items
* MOJSideNavigation({
* label: 'Side navigation',
* items: [
* { text: 'Nav item 1', href: '#1', active: true },
* { text: 'Nav item 2', href: '#2' },
* { text: 'Nav item 3', href: '#3' },
* ],
* })
*
* // Sectioned form - items grouped under headings
* MOJSideNavigation({
* label: 'Side navigation',
* sections: [
* {
* heading: { text: 'Section 1' },
* items: [
* { text: 'Item 1.1', href: '#1-1', active: true },
* { text: 'Item 1.2', href: '#1-2' },
* ],
* },
* {
* heading: { text: 'Section 2', headingLevel: 3 },
* items: [
* { text: 'Item 2.1', href: '#2-1' },
* ],
* },
* ],
* })
* ```
*/
declare const MOJSideNavigation: import("@ministryofjustice/hmpps-forge/core/components").ForgeComponent;
//#endregion
//#region forge-moj-components/src/components/sub-navigation/mojSubNavigation.d.ts
/**
* Navigation item configuration.
*/
interface MOJSubNavigationItem {
/** URL of the navigation item anchor */
href: ResolvableString;
/** Item text (required if html not set) */
text?: ResolvableString;
/** Item HTML content (required if text not set) */
html?: ResolvableString;
/** Flag to mark the navigation item as active (aria-current="page") */
active?: ResolvableBoolean;
/** Conditional visibility for this navigation item */
visibleWhen?: ResolvableBoolean;
/** Additional HTML attributes for the item */
attributes?: Record;
}
/**
* MOJ Sub-Navigation component.
* Enables users to navigate secondary sections within a system or service.
*
* Use this component for secondary-level navigation, not for primary or global
* navigation elements.
*
* @see https://design-patterns.service.justice.gov.uk/components/sub-navigation/
* @example
* ```typescript
* MOJSubNavigation({
* label: 'Case sections',
* items: [
* { text: 'Overview', href: '/case/123/overview', active: true },
* { text: 'Documents', href: '/case/123/documents' },
* { text: 'Timeline', href: '/case/123/timeline' },
* ],
* })
* ```
*/
interface MOJSubNavigation extends BlockDefinition {
/** The aria-label to add to the navigation container (defaults to "Secondary navigation region") */
label?: ResolvableString;
/** Array of navigation items */
items: ResolvableArray;
/** Additional CSS classes for the nav container */
classes?: ResolvableString;
/** Additional HTML attributes */
attributes?: Record;
}
/**
* MOJ Sub-Navigation component.
* Enables users to navigate secondary sections within a system or service.
*
* Use this component for secondary-level navigation, not for primary or global
* navigation elements.
*
* @see https://design-patterns.service.justice.gov.uk/components/sub-navigation/
* @example
* ```typescript
* MOJSubNavigation({
* label: 'Case sections',
* items: [
* { text: 'Overview', href: '/case/123/overview', active: true },
* { text: 'Documents', href: '/case/123/documents' },
* { text: 'Timeline', href: '/case/123/timeline' },
* ],
* })
* ```
*/
declare const MOJSubNavigation: import("@ministryofjustice/hmpps-forge/core/components").ForgeComponent;
//#endregion
//#region forge-moj-components/src/components/ticket-panel/mojTicketPanel.d.ts
/**
* Color variants available for ticket panel sections.
*/
type MOJTicketPanelColor = 'blue' | 'red' | 'yellow' | 'green' | 'purple' | 'orange';
/**
* An item (section) within the ticket panel.
*/
interface MOJTicketPanelItem {
/**
* Plain text content for the section.
* Use either text or html, not both.
*
* @example 'Reference: ABC123'
*/
text?: ResolvableString;
/**
* HTML content for the section.
* Use either text or html, not both.
*
* @example '
Application details
Reference: ABC123
'
*/
html?: ResolvableString;
/**
* Child blocks to render in the section.
* Takes precedence over text/html.
*/
blocks?: BlockDefinition[];
/**
* Additional CSS classes for the section.
* Use color classes to style sections: moj-ticket-panel__content--blue, etc.
*
* @example 'moj-ticket-panel__content--blue'
*/
classes?: ResolvableString;
/**
* Additional HTML attributes for the section.
*
* @example { 'aria-label': 'Application summary' }
*/
attributes?: Record;
/** Conditional visibility for this ticket panel item */
visibleWhen?: ResolvableBoolean;
}
/**
* MOJ Ticket Panel component.
* Displays summary information in a styled panel format.
*
* The panel is typically split into sections for different data. Each section can be
* colored differently using modifier classes to distinguish between types of information.
*
* Available color classes for items:
* - moj-ticket-panel__content--blue
* - moj-ticket-panel__content--red
* - moj-ticket-panel__content--yellow
* - moj-ticket-panel__content--green
* - moj-ticket-panel__content--purple
* - moj-ticket-panel__content--orange
*
* @see https://design-patterns.service.justice.gov.uk/components/ticket-panel
* @example
* ```typescript
* MOJTicketPanel({
* attributes: { 'aria-label': 'Application summary' },
* items: [
* {
* html: '
Application submitted
' +
* '
Your reference number is ABC123
',
* classes: 'moj-ticket-panel__content--green',
* },
* {
* text: 'We will email you within 24 hours to confirm your application.',
* },
* ],
* })
* ```
*/
interface MOJTicketPanel extends BlockDefinition {
/**
* Array of sections to display in the ticket panel.
* Each item represents a content section with optional styling.
*
* @example
* [
* { html: '
Details
Content here
', classes: 'moj-ticket-panel__content--blue' },
* { text: 'Additional information' }
* ]
*/
items: ResolvableArray;
/**
* Additional CSS classes for the ticket panel container.
*
* @example 'app-ticket-panel--custom'
*/
classes?: ResolvableString;
/**
* Additional HTML attributes for the ticket panel container.
*
* @example { 'aria-label': 'Application summary' }
*/
attributes?: Record;
}
/**
* MOJ Ticket Panel component.
* Displays summary information in a styled panel format.
*
* The panel is typically split into sections for different data. Each section can be
* colored differently using modifier classes to distinguish between types of information.
*
* Available color classes for items:
* - moj-ticket-panel__content--blue
* - moj-ticket-panel__content--red
* - moj-ticket-panel__content--yellow
* - moj-ticket-panel__content--green
* - moj-ticket-panel__content--purple
* - moj-ticket-panel__content--orange
*
* @see https://design-patterns.service.justice.gov.uk/components/ticket-panel
* @example
* ```typescript
* MOJTicketPanel({
* attributes: { 'aria-label': 'Application summary' },
* items: [
* {
* html: '
Application submitted
' +
* '
Your reference number is ABC123
',
* classes: 'moj-ticket-panel__content--green',
* },
* {
* text: 'We will email you within 24 hours to confirm your application.',
* },
* ],
* })
* ```
*/
declare const MOJTicketPanel: import("@ministryofjustice/hmpps-forge/core/components").ForgeComponent;
//#endregion
//#region forge-moj-components/src/components/timeline/mojTimeline.d.ts
/**
* Label configuration for a timeline item.
* Displayed as the title/heading of the timeline event.
*/
interface MOJTimelineItemLabel {
/** Label text (required if html not set) */
text?: ResolvableString;
/** Label HTML content (required if text not set) */
html?: ResolvableString;
}
/**
* Datetime configuration for a timeline item.
* Controls how the timestamp is formatted and displayed.
*/
interface MOJTimelineItemDatetime {
/**
* A valid datetime string to be formatted.
* @example '2019-06-14T14:01:00.000Z'
*/
timestamp: ResolvableString;
/**
* Standard date format type (use instead of format).
* Options: 'datetime', 'shortdatetime', 'date', 'shortdate', 'time'
* @example 'datetime' // Full date and time
* @example 'date' // Date only
*/
type?: 'datetime' | 'shortdatetime' | 'date' | 'shortdate' | 'time' | ResolvableString;
/**
* Custom date format string (use instead of type).
* Uses Moment.js format strings.
* @see https://momentjs.com/docs/#/displaying/format/
* @example 'DD/MM/YYYY'
* @example 'dddd, MMMM Do YYYY, h:mm:ss a'
*/
format?: ResolvableString;
}
/**
* Byline configuration for a timeline item.
* Displays who performed or is associated with the event.
*/
interface MOJTimelineItemByline {
/** Byline text (required if html not set) */
text?: ResolvableString;
/** Byline HTML content (required if text not set) */
html?: ResolvableString;
}
/**
* Timeline item configuration.
* Represents a single event in the timeline.
*/
interface MOJTimelineItem {
/**
* The label/title of the timeline event.
* @example { text: 'Application submitted' }
*/
label: MOJTimelineItemLabel;
/**
* Plain text description of the event.
* Use either text or html, not both.
* @example 'Your application has been received.'
*/
text?: ResolvableString;
/**
* HTML description of the event.
* Use either text or html, not both.
* @example '
Your application has been approved.
'
*/
html?: ResolvableString;
/**
* Child blocks to render as the event description.
* Takes precedence over text/html.
*/
blocks?: BlockDefinition[];
/**
* Date and time of the event.
* @example { timestamp: '2019-06-14T14:01:00.000Z', type: 'datetime' }
*/
datetime?: MOJTimelineItemDatetime;
/**
* Who performed or is associated with the event.
* @example { text: 'Joe Bloggs' }
*/
byline?: MOJTimelineItemByline;
/** Additional CSS classes for this timeline item */
classes?: ResolvableString;
/** Additional HTML attributes for this timeline item */
attributes?: Record;
/**
* Conditional visibility for this timeline item. When the evaluated value is `false`,
* the item is omitted from rendering. Defaults to showing the item.
*/
visibleWhen?: ResolvableBoolean;
}
/**
* MOJ Timeline component.
* Displays a chronological list of events.
*
* The timeline is used to show a history of events or actions,
* typically displayed with the most recent event first. Each event includes
* a label, optional description, timestamp, and byline (who did it).
*
* @see https://design-patterns.service.justice.gov.uk/components/timeline
* @example
* ```typescript
* MOJTimeline({
* items: [
* {
* label: { text: 'Application approved' },
* text: 'Your application has been approved.',
* datetime: { timestamp: '2019-06-14T14:01:00.000Z', type: 'datetime' },
* byline: { text: 'Caseworker 1' },
* },
* {
* label: { text: 'Application submitted' },
* html: '
Documents uploaded: 3 files
',
* datetime: { timestamp: '2019-06-01T09:00:00.000Z', type: 'datetime' },
* byline: { text: 'Joe Bloggs' },
* },
* ],
* headingLevel: 3,
* })
* ```
*/
interface MOJTimeline extends BlockDefinition {
/**
* Array of timeline items to display.
* Items are displayed in the order provided (typically most recent first).
*/
items: ResolvableArray;
/**
* Heading level for timeline item labels.
* Default: 2
* @example 3 // Use h3 for item labels
*/
headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
/**
* Additional CSS classes for the timeline container.
* @example 'app-timeline--custom'
*/
classes?: ResolvableString;
/**
* Additional HTML attributes for the timeline container.
* @example { 'data-module': 'app-timeline' }
*/
attributes?: Record;
}
/**
* MOJ Timeline component.
* Displays a chronological list of events.
*
* The timeline is used to show a history of events or actions,
* typically displayed with the most recent event first. Each event includes
* a label, optional description, timestamp, and byline (who did it).
*
* @see https://design-patterns.service.justice.gov.uk/components/timeline
* @example
* ```typescript
* MOJTimeline({
* items: [
* {
* label: { text: 'Application approved' },
* text: 'Your application has been approved.',
* datetime: { timestamp: '2019-06-14T14:01:00.000Z', type: 'datetime' },
* byline: { text: 'Caseworker 1' },
* },
* {
* label: { text: 'Application submitted' },
* html: '
Documents uploaded: 3 files
',
* datetime: { timestamp: '2019-06-01T09:00:00.000Z', type: 'datetime' },
* byline: { text: 'Joe Bloggs' },
* },
* ],
* headingLevel: 3,
* })
* ```
*/
declare const MOJTimeline: import("@ministryofjustice/hmpps-forge/core/components").ForgeComponent;
//#endregion
//#region forge-moj-components/src/components/messages/mojMessages.d.ts
/**
* Message type indicating whether the message was sent or received.
* - 'sent': Blue message aligned to the right (outgoing message)
* - 'received': Grey message aligned to the left (incoming message)
*/
type MOJMessageType = 'sent' | 'received';
/**
* Message item configuration.
* Represents a single message in the thread.
*/
interface MOJMessageItem {
/**
* Unique ID for the message.
* Used to generate element IDs for targeting specific messages.
* @example 1
* @example 'msg-001'
*/
id?: string | number;
/**
* Plain text content of the message.
* Use either text or html, not both.
* @example 'Hello, how can I help you today?'
*/
text?: ResolvableString;
/**
* HTML content of the message.
* Use either text or html, not both.
* @example '
Please see the attached document.
'
*/
html?: ResolvableString;
/**
* Child blocks to render as the message content.
* Takes precedence over text/html.
*/
blocks?: BlockDefinition[];
/**
* Message type indicating direction.
* - 'sent': Outgoing message (blue, right-aligned)
* - 'received': Incoming message (grey, left-aligned)
*/
type: MOJMessageType | ResolvableString;
/**
* The sender of the message.
* Displayed in the message metadata.
* @example 'John Smith'
* @example 'Support Agent'
*/
sender: ResolvableString;
/**
* Timestamp of when the message was sent.
* Must be a valid datetime string. Messages are grouped by date.
* @example '2019-06-14T14:01:00.000Z'
* @example '2023-12-25T09:30:00.000Z'
*/
timestamp: ResolvableString;
/** Conditional visibility for this message */
visibleWhen?: ResolvableBoolean;
}
/**
* MOJ Messages component.
*
* The messages component displays a conversation thread between two or more
* parties. Messages are visually differentiated:
* - Sent messages (type: 'sent'): Blue background, aligned right
* - Received messages (type: 'received'): Grey background, aligned left
*
* Messages are automatically grouped by date, with date headers shown
* when the date changes between messages.
*
* @see https://design-patterns.service.justice.gov.uk/components/messages
* @example
* ```typescript
* MOJMessages({
* items: [
* {
* id: 1,
* text: 'Lorem ipsum dolor sit amet.',
* type: 'sent',
* sender: 'Person A',
* timestamp: '2018-10-16T10:50:00.000Z',
* },
* {
* id: 2,
* text: 'Nullam vestibulum lorem vulputate.',
* type: 'received',
* sender: 'Person B',
* timestamp: '2018-10-17T10:51:00.000Z',
* },
* {
* id: 3,
* html: '
Message with HTML content.
',
* type: 'sent',
* sender: 'Person A',
* timestamp: '2018-10-19T10:53:00.000Z',
* },
* ],
* label: 'Case correspondence',
* })
* ```
*/
interface MOJMessages extends BlockDefinition {
/**
* Array of message items to display.
* Messages are displayed in the order provided, grouped by date.
*/
items: ResolvableArray;
/**
* ID for the messages container element.
* Defaults to 'messages' if not specified.
* @example 'case-messages'
*/
id?: ResolvableString;
/**
* Accessible label for the messages container.
* Applied as aria-label attribute.
* @example 'Case correspondence'
*/
label?: ResolvableString;
/**
* Additional CSS classes for the messages container.
* @example 'app-messages--compact'
*/
classes?: ResolvableString;
/**
* Additional HTML attributes for the messages container.
* @example { 'data-module': 'app-messages' }
*/
attributes?: Record;
}
/**
* MOJ Messages component.
*
* The messages component displays a conversation thread between two or more
* parties. Messages are visually differentiated:
* - Sent messages (type: 'sent'): Blue background, aligned right
* - Received messages (type: 'received'): Grey background, aligned left
*
* Messages are automatically grouped by date, with date headers shown
* when the date changes between messages.
*
* @see https://design-patterns.service.justice.gov.uk/components/messages
* @example
* ```typescript
* MOJMessages({
* items: [
* {
* id: 1,
* text: 'Lorem ipsum dolor sit amet.',
* type: 'sent',
* sender: 'Person A',
* timestamp: '2018-10-16T10:50:00.000Z',
* },
* {
* id: 2,
* text: 'Nullam vestibulum lorem vulputate.',
* type: 'received',
* sender: 'Person B',
* timestamp: '2018-10-17T10:51:00.000Z',
* },
* {
* id: 3,
* html: '
Message with HTML content.
',
* type: 'sent',
* sender: 'Person A',
* timestamp: '2018-10-19T10:53:00.000Z',
* },
* ],
* label: 'Case correspondence',
* })
* ```
*/
declare const MOJMessages: import("@ministryofjustice/hmpps-forge/core/components").ForgeComponent;
//#endregion
//#region forge-moj-components/src/components/multi-select/mojMultiSelect.d.ts
/**
* Configuration for a table header cell.
*/
interface MultiSelectHeadCell {
/** Plain text content for the header cell. */
text?: ResolvableString;
/** HTML content for the header cell. Takes precedence over `text`. */
html?: ResolvableString;
/** Specify format of the cell. Use "numeric" for right-aligned numeric data. */
format?: ResolvableString;
/** Additional CSS classes for the header cell. */
classes?: ResolvableString;
/** Number of columns this cell should span. */
colspan?: ResolvableNumber;
/** Number of rows this cell should span. */
rowspan?: ResolvableNumber;
/** Custom HTML attributes for the header cell element. */
attributes?: Record;
}
/**
* Configuration for a table body cell.
*/
interface MultiSelectCell {
/** Plain text content for the cell. */
text?: ResolvableString;
/** HTML content for the cell. Takes precedence over `text`. */
html?: ResolvableString;
/** Specify format of the cell. Use "numeric" for right-aligned numeric data. */
format?: ResolvableString;
/** Additional CSS classes for the cell. */
classes?: ResolvableString;
/** Number of columns this cell should span. */
colspan?: ResolvableNumber;
/** Number of rows this cell should span. */
rowspan?: ResolvableNumber;
/** Custom HTML attributes for the cell element. */
attributes?: Record;
}
/**
* A row in the table, consisting of an array of cells.
*/
type MultiSelectRow = MultiSelectCell[];
/**
* MOJ Multi Select component.
* A table with row selection functionality.
*
* This is a thin wrapper around the GOV.UK Table that adds the
* `data-module="moj-multi-select"` attribute to enable the MOJ JavaScript enhancement.
*
* You must structure your table with checkbox inputs for the functionality to work:
* - First column header should contain a "select all" checkbox
* - First cell of each row should contain a checkbox with the row's value
*
* @see https://design-patterns.service.justice.gov.uk/components/multi-select/
* @example
* ```typescript
* MOJMultiSelect({
* head: [
* { html: '' },
* { text: 'Name' },
* { text: 'Status' },
* ],
* rows: [
* [
* { html: '' },
* { text: 'John Smith' },
* { text: 'Active' },
* ],
* ],
* })
* ```
*/
interface MOJMultiSelect extends BlockDefinition {
/** The rows within the table. Each row is an array of cells. Required. */
rows: ResolvableArray;
/** Table header cells. Renders a `` with a single header row. */
head?: ResolvableArray;
/** Caption text displayed above the table. Useful for accessibility. */
caption?: ResolvableString;
/** CSS classes for the caption. */
captionClasses?: ResolvableString;
/** If true, the first cell in each row will be rendered as a header (`