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 84 85 86 87 88 89 90 91 92 | 49x 186x 46x 46x 146x 14x 46x 146x 43x 122x 43x 43x 122x 5x 122x 79x 226x 226x 226x 15x 15x 66x 15x 226x 79x 226x 226x 43x 11x 24x 11x 46x 49x 49x 49x 186x 49x 186x 36x 12x 186x 21x 46x 46x 8x 46x 186x 42x 140x 3x 140x 49x | <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 d-flex">
<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]="selectedWidgets()"
[cdkListboxMultiple]="multiSelect()"
(cdkListboxValueChange)="selectWidgets($event.value)"
>
@for (widget of filteredWidgetCatalog; track $index) {
<li
class="list-group-item d-flex list-group-item-action"
[cdkOption]="widget"
[class.active]="selectedWidgets().includes(widget)"
>
@if (multiSelect()) {
<div class="form-check d-flex align-items-center me-5 my-n1" inert>
<input
type="checkbox"
class="form-check-input"
aria-hidden="true"
[checked]="selectedWidgets().includes(widget)"
/>
</div>
}
<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>
|