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 80x 19x 19x 60x 7x 19x 60x 19x 52x 19x 19x 52x 52x 32x 86x 86x 86x 32x 86x 86x 19x 4x 8x 4x 19x 21x 21x 21x 80x 21x 80x 18x 6x 80x 10x 22x 22x 4x 22x 80x 17x 58x 1x 58x 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>
|