Import
import { ItemLogModule } from '@backbase/ui-ang/item-log'
Usage
Use the bb-item-log-ui component to render a list of approval or activity records.
<!-- Default item log with two records -->
<bb-item-log-ui [records]="[
{
status: 'APPROVED',
userFullName: 'Jane Cooper',
externalUserId: 'jcooper',
createdAt: '2024-03-15T09:30:00Z' },
{
status: 'REJECTED',
userFullName: 'John Carter',
createdAt: '2024-03-14T15:45:00Z',
comment: 'Limit exceeded' }
]"></bb-item-log-ui>
To fully customize the record layout, provide a bbItemLogRecord template.
<!-- Item log with a custom record template -->
<bb-item-log-ui [records]="records">
<ng-template bbItemLogRecord let-record>
<bb-icon-ui
class="bb-item-log-record__icon"
size="sm"
[name]="record?.status === 'REJECTED' ? 'cancel' : 'success'"
[color]="record?.status === 'REJECTED' ? 'danger' : 'success'"
></bb-icon-ui>
<div class="bb-item-log-record__details">
<span class="bb-item-log-record__status">{{ record?.status | titlecase }}</span>
<ng-container> by {{ record?.userFullName }}</ng-container>
<div class="bb-item-log-record__time">
{{ record?.createdAt | date }}
<ng-container>at</ng-container>
{{ record?.createdAt | date: 'shortTime' }}
</div>
<div class="rejected-reason" *ngIf="record?.reason">{{ record.reason }}</div>
</div>
</ng-template>
</bb-item-log-ui>
Inputs
|
Input |
Format |
Default |
|---|---|---|
|
isPending |
boolean |
false |
|
records |
Array<ItemLogRecord | T> |
undefined |
isPending
The isPending input shows a pending indicator when no completed records are available. Defaults to false.
<!-- Item log showing a pending state -->
<bb-item-log-ui [isPending]="true"></bb-item-log-ui>
records
The records input provides the list of log records to render. Each record can include status, userFullName, externalUserId, createdAt, and optional comment.
<!-- Item log with sample records -->
<bb-item-log-ui [records]="[
{
status: 'APPROVED',
userFullName: 'Jane Cooper',
createdAt: '2024-03-15T09:30:00Z'
},
{
status: 'REJECTED',
userFullName: 'John Carter',
createdAt: '2024-03-14T15:45:00Z',
comment: 'Limit exceeded' }
]"></bb-item-log-ui>
Accessibility
This component is built with accessibility in mind. See the information below for supported behaviors and configuration options to ensure a fully accessible experience for all users.
Each record’s details container uses role="group" to group status, actor, and timestamp when using the default template.