core/dashboard/dashboard-child.component.ts
A dashboard child allows to position elements correctly on a grid.
By setting c8y-dashboard-child-actions and
c8y-dashboard-child-title on the element you can add
custom actions or a custom title to the current child.
By adding the correct branded classes, you can define the look and feel of the child. By default it is displayed as a card.
Example : <c8y-dashboard-child
#cpWidget3
[x]="0"
[y]="3"
[width]="4"
[height]="4"
[class]="'card-dashboard panel-content-transparent'"
>
<c8y-dashboard-child-title *ngIf="showTitle">
<span>Transparent!</span>
</c8y-dashboard-child-title>
<c8y-dashboard-child-action>
<a href="" (click)="showTitle = !showTitle; (false)">
<i [c8yIcon]="'heading'"></i> Hide/show title
</a>
</c8y-dashboard-child-action>
x: {{ cpWidget3.x }}<br />
y: {{ cpWidget3.y }}<br />
width: {{ cpWidget3.width }}<br />
height: {{ cpWidget3.height }}<br />
</c8y-dashboard-child>
| changeDetection | ChangeDetectionStrategy.Eager |
||||||||||
| host | { |
||||||||||
| selector | c8y-dashboard-child |
||||||||||
| standalone | true |
||||||||||
| imports |
TooltipModule
BsDropdownModule
C8yTranslatePipe
|
||||||||||
| templateVariables |
|
||||||||||
| templateUrl | ./dashboard-child.component.html |
NgClass
TooltipModule
IconDirective
BsDropdownModule
NgTemplateOutlet
C8yTranslatePipe
DropdownFocusTrapDirective
AsyncPipe
DashboardChildDimension
<div [ngClass]="klasses">
<div
class="card-header-actions card-header-grid"
data-cy="c8y-dashboard-child--drag-handle"
[ngClass]="{
'drag-handle': editMode() && !fullscreen,
draggableCursor: editMode() && !fullscreen
}"
>
<ng-content select="c8y-dashboard-child-title"></ng-content>
@let headerTemplates = additionalHeaderTemplates$ | async;
@let hasActions = actions.length > 0;
<!-- Projected header templates (e.g. widget time-context controls) must render even
without actions — widgets rely on their instantiation to trigger the first data fetch. -->
@if (hasActions || headerTemplates?.length) {
<div class="header-actions d-flex a-i-center">
@for (headerTemplate of headerTemplates; track headerTemplate) {
<ng-container *ngTemplateOutlet="headerTemplate.template"></ng-container>
}
@if (hasActions) {
@if (editMode()) {
<div
class="dropdown"
placement="bottom right"
dropdown
c8yDropdownFocusTrap
[container]="'body'"
#sizePreset="bs-dropdown"
>
<button
class="btn btn-icon dropdown-toggle c8y-dropdown"
[attr.aria-label]="'Size' | translate"
[tooltip]="'Set size' | translate"
container="body"
[delay]="500"
dropdownToggle
data-cy="c8y-dashboard-child--height-preset"
>
<i
[c8yIcon]="'resize'"
aria-hidden="true"
></i>
</button>
<div
class="dropdown-menu dropdown-menu-right p-16"
*dropdownMenu
>
@if (dashboard?.layout() === 'custom' && dashboard?.alignViewHeight()) {
<table class="table-bordered table-btn-grid">
<caption class="sr-only">
{{
'Select widget size by width and height' | translate
}}
</caption>
<thead>
<tr>
<th>
<span class="sr-only">{{ 'Width / Height' | translate }}</span>
</th>
@for (wp of sizePresets; track wp) {
<th class="text-center">
<small class="text-label-small">
{{ wp === 100 ? ('Full' | translate) : wp + '%' }}
</small>
</th>
}
</tr>
</thead>
<tbody>
@for (hp of sizePresets; track hp) {
<tr>
<th class="text-right p-r-4">
<small class="text-label-small">
{{ hp === 100 ? ('Full' | translate) : hp + '%' }}
</small>
</th>
@for (wp of sizePresets; track wp) {
<td
class="p-2"
[attr.data-g-btn]="wp"
>
@let active = isActiveSizePreset(wp, hp);
<button
class="btn btn-dot btn-xs"
[class.btn-primary]="active"
[attr.aria-label]="getSizePresetAriaLabel(wp, hp)"
type="button"
(click)="setSizePreset(wp, hp)"
>
@if (active) {
<i
[c8yIcon]="'check'"
aria-hidden="true"
></i>
}
</button>
</td>
}
</tr>
}
</tbody>
</table>
} @else {
<div class="d-col gap-4">
<small class="text-label-small">{{ 'Width' | translate }}</small>
<div
class="btn-group"
[attr.aria-label]="'Width presets' | translate"
role="group"
>
@for (wp of sizePresets; track wp) {
<button
class="btn btn-default btn-sm p-l-4 p-r-4"
[class.btn-primary]="isActiveWidthPreset(wp)"
[attr.aria-label]="
wp === 100
? ('Set full width' | translate)
: ('Set width to {{percent}}%' | translate: { percent: wp })
"
type="button"
(click)="setWidthPreset(wp)"
>
{{ wp === 100 ? ('Full' | translate) : wp + '%' }}
</button>
}
</div>
</div>
}
</div>
</div>
} @else {
@let fullScreenLabel = 'Full screen' | translate;
@let exitFullScreenLabel = 'Exit full screen' | translate;
<button
class="btn btn-icon"
[attr.aria-label]="fullscreen ? exitFullScreenLabel : fullScreenLabel"
[tooltip]="fullscreen ? exitFullScreenLabel : fullScreenLabel"
container="body"
[delay]="500"
[disabled]="!canToggleFullscreen"
(click)="toggleFullscreen.next()"
data-cy="c8y-dashboard-child--settings-fullscreen"
>
<i
[c8yIcon]="fullscreen ? 'compress' : 'expand'"
aria-hidden="true"
></i>
</button>
}
<div
class="optionsBtn dropdown"
placement="bottom right"
dropdown
c8yDropdownFocusTrap
[container]="'body'"
#cardDashboardActions="bs-dropdown"
>
@if (editMode()) {
<button
class="btn btn-icon dropdown-toggle c8y-dropdown"
title="{{ 'Settings' | translate }}"
[attr.aria-label]="'Settings' | translate"
aria-haspopup="true"
[attr.aria-expanded]="cardDashboardActions.isOpen"
data-cy="c8y-dashboard-child--settings"
(click)="(false)"
dropdownToggle
>
<i
[c8yIcon]="'cog'"
aria-hidden="true"
></i>
</button>
} @else {
<button
class="btn btn-icon"
[attr.aria-label]="'Click "Edit widgets" to unlock' | translate"
tooltip="{{ 'Click "Edit widgets" to unlock' | translate }}"
container="body"
(click)="(false)"
data-cy="c8y-dashboard-child--settings-locked"
>
<i
[c8yIcon]="'lock'"
aria-hidden="true"
></i>
</button>
}
<ul
class="dropdown-menu dropdown-menu-right"
style="right: -1px"
data-cy="c8y-dashboard-child--actions-dropdown"
*dropdownMenu
>
@for (action of actions; track action) {
<ng-container *ngTemplateOutlet="action.template"></ng-container>
}
</ul>
</div>
}
</div>
}
</div>
<div class="card-inner-scroll">
<ng-content></ng-content>
</div>
</div>