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 | 17x 72x 17x 17x 52x 6x 17x 52x 17x 44x 17x 17x 44x 44x 29x 76x 76x 76x 29x 76x 76x 17x 4x 8x 4x 17x 17x 17x 17x 72x 17x 72x 18x 6x 72x 10x 20x 20x 4x 20x 72x 15x 52x 1x 52x 17x | <div class="si-layout-fixed-height mb-8 mx-0 overflow-auto px-2 pt-2">
@if (view() === 'list') {
<div class="si-layout-fixed-height">
<div class="mx-0">
<si-search-bar
class="w-100"
colorVariant="base-1"
showIcon="true"
[placeholder]="searchPlaceholder() | translate"
[value]="searchTerm"
(searchChange)="onSearch($event)"
/>
</div>
<div
class="si-layout-fixed-height text-pre-wrap text-break overflow-y-auto widget-list mt-6 bg-base-1"
>
@if (filteredWidgetCatalog.length > 0) {
<span id="widget-catalog-list-description" class="visually-hidden">
{{ labelWidgetCatalogList | translate }}
</span>
<ul
class="si-layout-fixed-height list-group"
aria-labelledby="widget-catalog-list-description"
cdkListbox
[cdkListboxValue]="[]"
(cdkListboxValueChange)="selectWidget($event.value[0])"
>
@for (widget of filteredWidgetCatalog; track $index) {
<li
class="list-group-item list-group-item-action d-flex"
[cdkOption]="widget"
[class.active]="selected() === widget"
>
<si-circle-status class="my-n4 me-5" [icon]="widget.iconClass" />
<div class="d-flex flex-column align-items-start">
<span class="si-h5">{{ widget.name }}</span>
<span class="si-body">{{ widget.description?.trim() }}</span>
</div>
</li>
}
</ul>
} @else {
<div>
<si-empty-state icon="element-report" [heading]="labelEmpty" />
</div>
}
</div>
</div>
}
<ng-container #editorHost />
</div>
<div class="catalog-footer py-0 px-2">
<button type="button" class="btn btn-secondary" (click)="onCancel()">{{
labelCancel | translate
}}</button>
@if (showPreviousButton()) {
<button type="button" class="btn btn-secondary" (click)="onPrevious()">{{
labelPrevious | translate
}}</button>
}
@if (showNextButton()) {
<button
type="button"
class="btn"
[class.btn-primary]="view() === 'list'"
[class.btn-secondary]="view() !== 'list'"
[disabled]="disableNextButton()"
(click)="onNext()"
>{{ labelNext | translate }}</button
>
}
@if (showAddButton()) {
<button
type="button"
class="btn btn-primary"
[disabled]="disableAddButton()"
(click)="onAddWidget()"
>{{ labelAdd | translate }}</button
>
}
</div>
|