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 | 8x 4x 4x 4x 4x 4x 4x | /**
* Copyright (c) Siemens 2016 - 2026
* SPDX-License-Identifier: MIT
*/
import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
import { Widget, WidgetConfig } from '../../model/widgets.model';
import { SiWidgetHostComponent } from '../widget-host/si-widget-host.component';
/**
* A presentational (dumb) component that renders a single widget instance from a
* {@link WidgetConfig}. It resolves the matching {@link Widget} from the provided
* widget catalog and delegates the actual rendering to the {@link SiWidgetHostComponent}.
*
* **Intended Usage**
*
* This component is designed for scenarios where widgets need to be displayed in
* kiosk mode with carousel-like navigation. It serves as a self-contained widget
* cell that can be content-projected into layouting components (e.g., carousels,
* slideshows, or other full-screen presentation containers) to achieve seamless
* widget cycling without requiring manual host wiring.
*
* **Example: Kiosk Mode with Carousel**
*
* ```html
* <!-- Project widgets into a carousel or similar layouting container -->
* <si-carousel [autoplay]="true" [interval]="10000">
* @for (config of widgetConfigs; track config.id) {
* <si-widget-renderer [widgetConfig]="config" [widgetCatalog]="widgets" />
* }
* </si-carousel>
* ```
*/
@Component({
selector: 'si-widget-renderer',
imports: [SiWidgetHostComponent],
templateUrl: './si-widget-renderer.component.html',
styleUrl: './si-widget-renderer.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
host: {
class: 'd-block h-100'
}
})
export class SiWidgetRendererComponent {
/** The configuration of the widget instance to render. */
readonly widgetConfig = input.required<WidgetConfig>();
/**
* The available widgets used to resolve the {@link Widget} for the given
* {@link widgetConfig} via its `widgetId`.
*
* @defaultValue []
*/
readonly widgetCatalog = input<Widget[]>([]);
private readonly widgetCatalogMap = computed(
() => new Map(this.widgetCatalog().map(widget => [widget.id, widget]))
);
protected readonly widget = computed(() =>
this.widgetCatalogMap().get(this.widgetConfig().widgetId)
);
}
|