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 93 94 95 96 97 98 99 100 101 | 49x 174x 46x 46x 146x 14x 46x 146x 43x 122x 43x 43x 122x 5x 122x 79x 226x 226x 226x 15x 66x 79x 226x 226x 226x 24x 79x 43x 11x 11x 24x 11x 46x 49x 49x 49x 174x 49x 174x 24x 12x 174x 21x 46x 46x 8x 46x 174x 42x 128x 3x 128x 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">
@if (filteredWidgetCatalog.length > 0) {
<span id="widget-catalog-list-description" class="visually-hidden">
{{ labelWidgetCatalogList | translate }}
</span>
<div class="card overflow-auto">
<ul
class="list list-divider"
aria-labelledby="widget-catalog-list-description"
cdkListbox
[cdkListboxValue]="selectedWidgets()"
[cdkListboxMultiple]="multiSelect()"
(cdkListboxValueChange)="selectWidgets($event.value)"
>
@for (widget of filteredWidgetCatalog; track $index) {
<li
class="list-item list-item-action"
[cdkOption]="widget"
[class.active]="selectedWidgets().includes(widget)"
>
@if (multiSelect()) {
<input
type="checkbox"
class="form-check-input list-item-check"
aria-hidden="true"
tabindex="-1"
inert
[checked]="selectedWidgets().includes(widget)"
/>
}
<si-icon
class="list-item-indicator icon"
[icon]="widget.iconClass || icons.elementSpecialObject"
/>
<span class="list-item-title">{{ widget.name | translate }}</span>
@if (widget.description?.trim(); as description) {
<p class="list-item-description">{{ description | translate }}</p>
}
</li>
}
</ul>
</div>
} @else {
<div>
<si-empty-state
icon="element-search"
[heading]="labelEmpty"
[content]="searchTerm ? labelEmptyMessage : undefined"
/>
</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>
|