0b33a4561e
Angular library providing dashboard components including grid layout, drag-and-drop widgets, resize handles, toolbar, config panel, layout presets, and persistence services.
45 lines
1.3 KiB
HTML
45 lines
1.3 KiB
HTML
<div class="db-grid__container" #gridRef>
|
|
@for (widget of widgets(); track widget.id) {
|
|
<div
|
|
class="db-grid__cell"
|
|
[style.grid-column]="widget.layout.col + ' / span ' + widget.layout.colSpan"
|
|
[style.grid-row]="widget.layout.row + ' / span ' + widget.layout.rowSpan"
|
|
>
|
|
<db-widget
|
|
[widget]="widget"
|
|
[editMode]="editMode()"
|
|
[fullscreen]="false"
|
|
[contentTemplate]="getContentTemplate(widget.type)"
|
|
[footerTemplate]="getFooterTemplate(widget.type)"
|
|
(remove)="onWidgetRemove(widget)"
|
|
(fullscreenToggle)="onWidgetFullscreen(widget)"
|
|
(configOpen)="onWidgetConfigOpen(widget)"
|
|
(action)="widgetAction.emit({ widget, action: $event })"
|
|
(resizeEnd)="onWidgetResizeEnd(widget, $event)"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Resize placeholder for this widget -->
|
|
@if (getResizePlaceholder(widget); as rp) {
|
|
<db-placeholder
|
|
[col]="rp.col"
|
|
[row]="rp.row"
|
|
[colSpan]="rp.colSpan"
|
|
[rowSpan]="rp.rowSpan"
|
|
type="resize"
|
|
/>
|
|
}
|
|
}
|
|
|
|
<!-- Drag move placeholder -->
|
|
@if (dragPreview(); as dp) {
|
|
<db-placeholder
|
|
[col]="dp.col"
|
|
[row]="dp.row"
|
|
[colSpan]="dp.colSpan"
|
|
[rowSpan]="dp.rowSpan"
|
|
type="move"
|
|
/>
|
|
}
|
|
</div>
|