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 | 1x 4x 4x 5x | /**
* Copyright (c) Siemens 2016 - 2025
* SPDX-License-Identifier: MIT
*/
import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
import { ExtendedStatusType } from '@siemens/element-ng/common';
import { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';
/**
* The system banner component displays a message with specific status as background.
* Use this component for displaying system level messages on top of the page.
*/
@Component({
selector: 'si-system-banner',
imports: [SiTranslatePipe],
templateUrl: './system-banner.component.html',
styleUrl: './system-banner.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'[class]': 'bannerClass()'
}
})
export class SiSystemBannerComponent {
/**
* Status of the system banner.
* Possible values are 'info', 'success', 'warning', 'caution', 'danger', 'critical'.
*
* @defaultValue 'info'
*/
readonly status = input<ExtendedStatusType>('info');
/**
* Message to be displayed in the system banner.
*/
readonly message = input.required<TranslatableString>();
protected readonly bannerClass = computed(() => `banner-${this.status()}`);
}
|