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 74x 17x 17x 54x 6x 17x 54x 17x 46x 17x 17x 46x 46x 29x 78x 78x 78x 29x 78x 78x 17x 4x 8x 4x 17x 17x 17x 17x 74x 17x 74x 18x 6x 74x 10x 22x 22x 4x 22x 74x 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>
|