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 | 21x 39x 19x 19x 30x 7x 19x 30x 19x 26x 19x 19x 26x 26x 32x 43x 43x 43x 32x 43x 43x 19x 4x 4x 4x 19x 21x 21x 21x 39x 21x 39x 8x 6x 39x 10x 11x 11x 4x 11x 39x 17x 28x 1x 28x 21x | <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 mt-6 bg-base-1 rounded-2">
@if (filteredWidgetCatalog.length > 0) {
<span id="widget-catalog-list-description" class="visually-hidden">
{{ labelWidgetCatalogList | translate }}
</span>
<ul
class="si-layout-fixed-height list-group overflow-auto mb-0"
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 align-self-center">
<span class="si-h5">{{ widget.name | translate }}</span>
<span class="si-body">{{ widget.description?.trim() | translate }}</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 pb-4 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>
|