Interface TimelineCardConfig

Configuration for how timeline cards are displayed. Can be set at the group level (applies to all events in group) or overridden per-event via EventConfigFunction.

Example

const cardConfig: TimelineCardConfig = {
  showIcon: true,
  showDate: true,
  dateFormat: 'MMM d, yyyy h:mm a',
  collapsible: true,
  defaultExpanded: false,
  descriptionMaxLines: 3,
  summaryFields: [
    { fieldName: 'Status', icon: 'fa-solid fa-circle' },
    { fieldName: 'Priority', icon: 'fa-solid fa-flag' }
  ],
  actions: [
    { id: 'view', label: 'View', variant: 'primary' },
    { id: 'edit', label: 'Edit', variant: 'secondary' }
  ]
};
interface TimelineCardConfig {
    actions?: TimelineAction[];
    actionsOnHover?: boolean;
    allowHtmlDescription?: boolean;
    collapsible?: boolean;
    cssClass?: string;
    dateFormat?: string;
    defaultExpanded?: boolean;
    descriptionField?: string;
    descriptionMaxLines?: number;
    expandedFields?: TimelineDisplayField[];
    imageField?: string;
    imagePosition?: ImagePosition;
    imageSize?: ImageSize;
    maxWidth?: string;
    minWidth?: string;
    showDate?: boolean;
    showIcon?: boolean;
    showSubtitle?: boolean;
    summaryFields?: TimelineDisplayField[];
}

Properties

actions? actionsOnHover? allowHtmlDescription? collapsible? cssClass? dateFormat? defaultExpanded? descriptionField? descriptionMaxLines? expandedFields? imageField? imagePosition? imageSize? maxWidth? minWidth? showDate? showIcon? showSubtitle? summaryFields?

Properties

Optional actions

actions?: TimelineAction[]

Action buttons to display at the bottom of the card.

Optional actionsOnHover

actionsOnHover?: boolean

If true, actions are only visible on hover/focus.

Default

false

Optional allowHtmlDescription

allowHtmlDescription?: boolean

Whether to render HTML in the description. WARNING: Only enable if content is trusted to prevent XSS.

Default

false

Optional collapsible

collapsible?: boolean

Whether this card can be expanded/collapsed.

Default

true

Optional cssClass

cssClass?: string

Additional CSS class(es) to apply to the card container.

Optional dateFormat

dateFormat?: string

Date format string (Angular DatePipe format).

Default

'MMM d, yyyy'

Example

'short', 'medium', 'MMM d, yyyy h:mm a'

Optional defaultExpanded

defaultExpanded?: boolean

Whether the card starts in expanded state.

Default

false

Optional descriptionField

descriptionField?: string

Field name for the description/body text. If not set, uses the group's DescriptionFieldName.

Optional descriptionMaxLines

descriptionMaxLines?: number

Maximum number of lines to show before truncating. Set to 0 for no limit.

Default

3

Optional expandedFields

expandedFields?: TimelineDisplayField[]

Fields to display only when the card is expanded. These appear in the detail section below the description.

Optional imageField

imageField?: string

Field name containing the image URL. If not set, no image is displayed.

Optional imagePosition

imagePosition?: ImagePosition

Position of the image within the card.

  • left: Image on the left side of the header
  • top: Image above the content (full width)
  • none: No image displayed

Default

'left'

Optional imageSize

imageSize?: ImageSize

Size preset for the image.

  • small: 48x48px
  • medium: 80x80px
  • large: 120x120px

Default

'small'

Optional maxWidth

maxWidth?: string

Maximum width for the card.

Default

'400px'

Optional minWidth

minWidth?: string

Minimum width for the card.

Example

'200px', '15rem'

Optional showDate

showDate?: boolean

Whether to show the date in the card header.

Default

true

Optional showIcon

showIcon?: boolean

Whether to show the icon in the card header.

Default

true

Optional showSubtitle

showSubtitle?: boolean

Whether to show the subtitle below the title.

Default

true

Optional summaryFields

summaryFields?: TimelineDisplayField[]

Fields to always display (even when collapsed). These appear as compact field:value pairs.

Settings

Member Visibility

Theme

On This Page

actionsactionsOnHoverallowHtmlDescriptioncollapsiblecssClassdateFormatdefaultExpandeddescriptionFielddescriptionMaxLinesexpandedFieldsimageFieldimagePositionimageSizemaxWidthminWidthshowDateshowIconshowSubtitlesummaryFields