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 | 1x 22x 22x 32x 22x 32x 32x 32x 18x 6x 12x 3x 43x | /**
* Copyright (c) Siemens 2016 - 2025
* SPDX-License-Identifier: MIT
*/
import { computed, Directive, input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
import { SiHeaderActionItemBase } from './si-header-action-item.base';
/**
* Base for icon based actions.
* @internal
*/
@Directive({})
export abstract class SiHeaderActionIconItemBase
extends SiHeaderActionItemBase
implements OnChanges, OnInit
{
/**
* Adds a badge to the header item.
* If type
* - =number, the number will be shown and automatically trimmed if \>99
* - =true, an empty red dot will be shown
*/
readonly badge = input<number | boolean | undefined | null>();
protected readonly badgeDot = computed(() =>
typeof this.badge() === 'boolean' ? (this.badge() as boolean) : false
);
protected readonly badgeValue = computed(() => {
const badge = this.badge();
return typeof badge === 'number'
? `${badge > 99 ? '+' : ''}${Math.min(99, Math.round(badge))}`
: undefined;
});
ngOnChanges(changes: SimpleChanges): void {
if ('badge' in changes) {
if (changes.badge.currentValue && !changes.badge.previousValue) {
this.collapsibleActions?.badgeCount.update(count => count + 1);
} else if (!changes.badge.currentValue && changes.badge.previousValue) {
this.collapsibleActions?.badgeCount.update(count => count - 1);
}
}
}
protected get visuallyHideTitle(): boolean {
return !this.collapsibleActions?.mobileExpanded();
}
}
|