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 | 1x 104x 76x 104x 2x 104x 29x 104x 47x 104x | /**
* Copyright (c) Siemens 2016 - 2025
* SPDX-License-Identifier: MIT
*/
import { NgClass } from '@angular/common';
import { Component, computed } from '@angular/core';
import { addIcons, elementRight2, SiIconComponent } from '@siemens/element-ng/icon';
import { Link, SiLinkDirective } from '@siemens/element-ng/link';
import { SiTranslateModule, TranslatableString } from '@siemens/element-translate-ng/translate';
import { SiWidgetBaseComponent } from '../si-widget-base.component';
/**
* Interface for objects to configure the the list widget.
*/
export interface SiListWidgetItem {
/** Label is either a translatable string or a link. */
label: TranslatableString | Link;
/** Optional translatable description. */
description?: TranslatableString;
/** Optional translatable string to be displayed in a badge. */
badge?: TranslatableString;
/**
* Defines the badge color. Must be one of the element `bg-<color>` CSS classes,
* like `bg-primary`, `bg-secondary`, 'bg-caution'. Use only the name without `bg`.
*/
badgeColor?: string;
/** Optional translatable text that is display to the right. */
text?: TranslatableString;
/** Optional right aligned action. */
action?: Link;
/** The action icon. */
actionIcon?: string;
}
/**
* The `<si-link-widget>` supports an easy composition of links and actions
* with support for skeleton loading indicator.
*/
@Component({
selector: 'si-list-widget-item',
imports: [NgClass, SiIconComponent, SiLinkDirective, SiTranslateModule],
templateUrl: './si-list-widget-item.component.html',
host: {
class: 'list-group-item d-flex align-items-center',
role: 'listitem'
}
})
export class SiListWidgetItemComponent extends SiWidgetBaseComponent<SiListWidgetItem> {
protected readonly isLink = computed(() => {
return typeof this.value()?.label === 'object';
});
protected readonly badgeColor = computed(() => {
return this.value()?.badgeColor ? 'bg-' + this.value()?.badgeColor : 'bg-default';
});
protected readonly link = computed(() => {
return this.value()?.label as Link;
});
protected readonly label = computed(() => {
return this.value()?.label as string;
});
protected readonly icons = addIcons({ elementRight2 });
}
|