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 79 80 81 82 83 84 | 78x 132x 28x 28x 28x 28x 28x 78x 132x 132x 132x 78x 2x 3x 2x 2x 1x 1x 2x 2x 1x 1x 132x 132x 4x 78x 78x 132x 4x 8x 78x 132x 132x 78x | <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.shadow-3]="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 | translate) : null"
[attr.aria-description]="
editable() && !card.isExpanded() ? (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()"
>
@let headingIcon = headingIconName();
@if (headingIcon) {
<si-icon headerIcon class="icon me-3" [icon]="headingIcon" />
}
<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>
|