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 | 74x 126x 28x 28x 28x 28x 28x 74x 126x 126x 126x 74x 2x 3x 2x 2x 1x 1x 2x 2x 1x 1x 74x 74x 126x 4x 8x 74x 126x 126x 74x | <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()"
>
<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>
|