core/split-view/split-view-details-actions.component.ts
Displays a row of action buttons in the split view details panel. Renders buttons based on the provided action configurations with support for:
<c8y-sv-details-actions [actions]="detailActions"></c8y-sv-details-actions>detailActions: SplitViewAction[] = [
{
id: 'edit',
label: 'Edit',
icon: 'pencil',
class: 'btn btn-primary',
action: () => this.editItem(),
title: 'Edit this item'
},
{
id: 'delete',
label: 'Delete',
icon: 'trash',
class: 'btn btn-danger',
action: () => this.deleteItem(),
productExperience: {
actionName: 'delete_item',
actionData: { itemType: 'device' }
}
}
];| selector | c8y-sv-details-actions |
| standalone | true |
| imports |
NgClass
C8yTranslatePipe
IconDirective
ProductExperienceDirective
|
| templateUrl | ./split-view-details-actions.component.html |
Inputs |
| actions |
Type : SplitViewAction[]
|
Default value : []
|
|
Array of action configurations to display as buttons. Buttons are rendered in the order provided. |
<div
class="d-flex gap-8 a-i-center"
[attr.aria-label]="'Actions' | translate"
role="group"
data-cy="c8y-sv-details-actions"
>
@for (action of actions; track action.id) {
@if (action.visible !== false) {
<button
[title]="action.title ? (action.title | translate) : null"
[attr.aria-label]="action.title ? (action.title | translate) : (action.label | translate)"
[attr.aria-disabled]="action.disabled ? 'true' : 'false'"
type="button"
[ngClass]="action.class || ''"
[disabled]="action.disabled || false"
[attr.data-cy]="action.dataCy"
(click)="action.action()"
c8yProductExperience
[actionName]="action.productExperience?.actionName"
[actionData]="action.productExperience?.actionData"
>
<i
[c8yIcon]="action.icon"
aria-hidden="true"
[ngClass]="action.iconClass || ''"
></i>
{{ action.label | translate }}
</button>
}
}
<ng-content></ng-content>
</div>