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 | 72x 117x 26x 26x 26x 26x 26x 72x 117x 117x 117x 72x 2x 3x 2x 2x 1x 1x 2x 2x 1x 1x 72x 72x 117x 4x 8x 72x 117x 117x 72x | <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() ? (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>
|