Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | 71x 115x 25x 25x 25x 25x 25x 71x 115x 115x 115x 71x 2x 3x 2x 2x 1x 1x 2x 2x 1x 1x 71x 71x 115x 4x 8x 71x 115x 115x 71x | <div class="grid-stack-item-content p-4">
@if (editable()) {
<div class="resize-handle">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<path d="M16 16H18V18H16V16Z" fill="currentColor" />
<path d="M11 16H13V18H11V16Z" fill="currentColor" />
<path d="M11 11H13V13H11V11Z" fill="currentColor" />
<path d="M6 16H8V18H6V16Z" fill="currentColor" />
<path d="M16 11H18V13H16V11Z" fill="currentColor" />
<path d="M16 6H18V8H16V6Z" fill="currentColor" />
</g>
</svg>
</div>
<div class="draggable-overlay"></div>
}
<si-dashboard-card
#card
class="h-100 dragging-card"
[class]="accentLine()"
[class.elevation-2]="keyboardActive()"
[class.si-widget-keyboard-active]="keyboardActive()"
[attr.tabindex]="editable() ? 0 : null"
[attr.role]="editable() ? 'application' : null"
[attr.aria-roledescription]="editable() ? 'widget' : null"
[attr.aria-label]="editable() ? widgetConfig().heading : null"
[attr.aria-description]="editable() ? (a11yWidgetDescription | translate) : null"
[expandText]="labelExpand"
[restoreText]="labelRestore"
[heading]="widgetConfig().heading"
[primaryActions]="primaryActions()"
[secondaryActions]="secondaryActions()"
[actionBarViewType]="actionBarViewType()"
[enableExpandInteraction]="widgetConfig().expandable"
[imgAlt]="widgetConfig().image?.alt"
[imgDir]="widgetConfig().image?.dir"
[imgObjectFit]="widgetConfig().image?.objectFit"
[imgObjectPosition]="widgetConfig().image?.objectPosition"
[imgSrc]="!setupPending() ? widgetConfig().image?.src : ''"
(keydown.enter)="onToggleActive($event)"
(keydown.space)="onToggleActive($event)"
(keydown.escape)="onDeactivate($event)"
(keydown.arrowRight)="onArrowKey($event)"
(keydown.arrowLeft)="onArrowKey($event)"
(keydown.arrowUp)="onArrowKey($event)"
(keydown.arrowDown)="onArrowKey($event)"
(keydown.shift.arrowRight)="onArrowKey($event)"
(keydown.shift.arrowLeft)="onArrowKey($event)"
(keydown.shift.arrowUp)="onArrowKey($event)"
(keydown.shift.arrowDown)="onArrowKey($event)"
(focusout)="onFocusOut()"
>
<div class="card-body overflow-auto" body>
<ng-container #widgetHost />
@if (setupPending()) {
<si-empty-state
[icon]="emptyStateIcon()"
[heading]="labelSetup"
[content]="labelSetupMessage"
/>
}
</div>
@let footer = widgetInstanceFooter();
@if (footer && !setupPending()) {
<div class="card-footer" footer>
<ng-container *ngTemplateOutlet="footer" />
</div>
}
</si-dashboard-card>
</div>
|