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 | 26x 100x 24x 24x 80x 7x 24x 80x 24x 72x 24x 24x 72x 5x 72x 47x 146x 146x 146x 15x 15x 66x 15x 146x 47x 146x 146x 24x 4x 8x 4x 24x 26x 26x 26x 100x 26x 100x 18x 6x 100x 11x 24x 24x 4x 24x 100x 22x 76x 2x 76x 26x | <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]="enableMultiSelect()"
(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 (enableMultiSelect()) {
<div class="form-check d-flex align-items-center me-5" inert>
<input
type="checkbox"
class="form-check-input"
[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>
|