core/common/icon-panel/icon-panel.component.ts
Icon Panel Component
Displays information in a grid of bordered panels, each with an icon, label, and content. Useful for showing structured metadata, device information, connection status, etc.
Example :sections: IconPanelSection[] = [
{
id: 'device-info',
label: 'Device Information',
icon: 'c8y-device',
visible: true,
content: '<p>Device ID: THM-001</p><p>Type: Sensor</p>',
colClass: 'col-xs-12 col-md-6'
},
{
id: 'status',
label: 'Status',
icon: 'c8y-connection',
visible: true,
content: 'Connected',
colClass: 'col-xs-12 col-md-6'
}
];<c8y-icon-panel [sections]="sections"></c8y-icon-panel>You can also project additional content:
Example :<c8y-icon-panel [sections]="sections">
<div class="col-xs-12">
<p>Additional custom content here</p>
</div>
</c8y-icon-panel>| selector | c8y-icon-panel |
| standalone | true |
| imports |
NgClass
C8yTranslatePipe
IconDirective
StripHtmlPipe
|
| templateUrl | ./icon-panel.component.html |
Inputs |
| ariaLabel |
Type : string
|
Default value : 'Information sections'
|
|
Accessible label for the icon panel region. |
| sections |
Type : IconPanelSection[]
|
Default value : []
|
|
Array of sections to display in the panel |
<div
class="d-flex row tight-grid flex-wrap a-i-stretch"
[attr.aria-label]="ariaLabel | translate"
role="region"
data-cy="c8y-icon-panel"
>
@for (section of sections; track section.id) {
@if (section.visible) {
<div
class="d-flex m-b-8"
[attr.aria-label]="
(section.label | translate) + ': ' + (section.content | translate | stripHtml)
"
role="definition"
[ngClass]="section.colClass || 'col-xs-12 col-md-6'"
[attr.data-cy]="section.dataCy"
>
<div [ngClass]="section.containerClass || 'border-all fit-w d-flex'">
<div class="p-8">
<i
[class]="'icon-24 m-t-4 c8y-icon ' + (section.iconClass || '')"
[c8yIcon]="section.icon"
aria-hidden="true"
></i>
</div>
<div class="p-t-8 p-b-8 p-r-8 flex-grow">
<p class="text-label-small m-b-4">{{ section.label | translate }}</p>
<div
class="small fit-w"
[innerHTML]="section.content | translate"
></div>
</div>
</div>
</div>
}
}
<ng-content></ng-content>
</div>