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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 3x 3x 3x 2x 2x 1x 1x 1x 3x | /**
* Copyright (c) Siemens 2016 - 2025
* SPDX-License-Identifier: MIT
*/
import { NgClass, NgTemplateOutlet } from '@angular/common';
import {
booleanAttribute,
Component,
DoCheck,
inject,
input,
OnDestroy,
OnInit,
viewChild
} from '@angular/core';
import { MenuItem } from '@siemens/element-ng/common';
import {
SiHeaderDropdownComponent,
SiHeaderDropdownItemsFactoryComponent,
SiHeaderDropdownTriggerDirective
} from '@siemens/element-ng/header-dropdown';
import { SiLinkDirective } from '@siemens/element-ng/link';
import { SiTranslatePipe } from '@siemens/element-translate-ng/translate';
import { SiNavbarPrimaryComponent } from '../si-navbar-primary/si-navbar-primary.component';
/** @deprecated Use the new `si-application-header` instead. */
@Component({
selector: 'si-navbar-item',
imports: [
SiLinkDirective,
SiTranslatePipe,
NgClass,
NgTemplateOutlet,
SiHeaderDropdownComponent,
SiHeaderDropdownItemsFactoryComponent,
SiHeaderDropdownTriggerDirective
],
templateUrl: './si-navbar-item.component.html',
host: { class: 'd-contents' }
})
export class SiNavbarItemComponent implements OnInit, DoCheck, OnDestroy {
/**
* MenuItem to display in the navbar.
*/
readonly item = input.required<MenuItem>();
/**
* Is the item a quick action displayed on the end (right in LTR) side
*
* @defaultValue false
*/
readonly quickAction = input(false, { transform: booleanAttribute });
readonly dropdownTrigger = viewChild(SiHeaderDropdownTriggerDirective);
protected active = false;
protected navbar = inject(SiNavbarPrimaryComponent);
private hasBadge = false;
ngOnInit(): void {
this.navbar.header().closeMobileMenus.subscribe(() => this.dropdownTrigger()?.close());
this.navbar.navItemCount.update(value => value + 1);
}
ngDoCheck(): void {
const item = this.item();
const newHasBadge = !!(item.badge ?? item.badgeDot);
if (this.quickAction() && this.hasBadge !== newHasBadge) {
this.hasBadge = newHasBadge;
if (this.hasBadge) {
this.navbar.collapsibleActions()?.badgeCount.update(value => value + 1);
} else {
this.navbar.collapsibleActions()?.badgeCount.update(value => value - 1);
}
}
}
ngOnDestroy(): void {
this.navbar.navItemCount.update(value => value - 1);
}
protected click(): void {
Iif (!this.dropdownTrigger()) {
this.navbar.header().closeMobileMenus.next();
}
}
protected get visuallyHideTitle(): boolean {
return !this.navbar.collapsibleActions()?.mobileExpanded();
}
}
|