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 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 | 1x 8x 8x 8x 8x 8x 8x 8x 8x | /** * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ import { CdkMenuTrigger } from '@angular/cdk/menu'; import { CommonModule } from '@angular/common'; import { booleanAttribute, Component, inject, input } from '@angular/core'; import { ActivatedRoute, RouterModule, type NavigationExtras } from '@angular/router'; import { SiMenuFactoryComponent, type MenuItem } from '@siemens/element-ng/menu'; import { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate'; /** * Interface for a router link in a notification item. * @param type - The type of the link, always 'router-link'. * @param routerLink - The router link to navigate to. * @param extras - Optional navigation extras for the router. */ export interface NotificationItemRouterLink { type: 'router-link'; routerLink: string | any[]; extras?: NavigationExtras; } /** * Interface for a standard link in a notification item. * @param type - The type of the link, always 'link'. * @param href - The URL to navigate to. * @param target - Optional target attribute for the link. */ export interface NotificationItemLink { type: 'link'; href: string; target?: string; } /** * Base interface for notification item actions. * @param ariaLabel - The ARIA label for accessibility. * @param icon - The icon to display for the action. */ export interface NotificationItemBase { ariaLabel: TranslatableString; icon: string; } /** * Interface for an action circle button in a notification item. * @param type - The type of the action, always 'action-circle-button'. * @param customClass - Optional custom CSS class for styling. * @param action - The action to perform when the button is clicked. */ export interface NotificationItemActionCircleButton extends NotificationItemBase { type: 'action-circle-button'; customClass?: string; action: (source: this) => void; } /** * Interface for a router link with an icon in a notification item. * @param type - The type of the link, always 'router-link'. * @param routerLink - The router link to navigate to. * @param extras - Optional navigation extras for the router. */ export interface NotificationItemRouterLinkIcon extends NotificationItemBase { type: 'router-link'; routerLink: string | any[]; extras?: NavigationExtras; } /** * Interface for a standard link with an icon in a notification item. * @param type - The type of the link, always 'link'. * @param href - The URL to navigate to. * @param target - Optional target attribute for the link. */ export interface NotificationItemLinkIcon extends NotificationItemBase { type: 'link'; href: string; target?: string; } /** * Interface for an action button in a notification item. * @param type - The type of the action, always 'action-button'. * @param label - The label to display on the button. * @param action - The action to perform when the button is clicked. */ export interface NotificationItemActionButton { type: 'action-button'; label: TranslatableString; action: (source: this) => void; } /** * Interface for a menu in a notification item. * @param type - The type of the action, always 'menu'. * @param menuItems - The menu items to display in the menu. */ export interface NotificationItemMenu { type: 'menu'; menuItems: MenuItem[]; } /** * Union type for quick actions in a notification item. */ export type NotificationItemQuickAction = | NotificationItemActionCircleButton | NotificationItemLinkIcon | NotificationItemRouterLinkIcon; /** * Union type for primary actions in a notification item. */ export type NotificationItemPrimaryAction = | NotificationItemActionCircleButton | NotificationItemLinkIcon | NotificationItemRouterLinkIcon | NotificationItemMenu | NotificationItemActionButton; /** * This component represents a single notification that can be used within notification * centers, popovers, or other containers. It supports various action types including * router links, standard links, action buttons, and menus. */ @Component({ selector: 'si-notification-item', imports: [SiTranslatePipe, RouterModule, CommonModule, SiMenuFactoryComponent, CdkMenuTrigger], templateUrl: './si-notification-item.component.html', styleUrl: './si-notification-item.component.scss' }) export class SiNotificationItemComponent { /** * The timestamp of the notification item. */ readonly timeStamp = input.required<TranslatableString>(); /** * The heading of the notification item. */ readonly heading = input.required<TranslatableString>(); /** * Optional translatable description. */ readonly description = input<TranslatableString>(); /** * Unread messages are emphasized with a bolder font. * * @defaultValue false */ readonly unread = input(false, { transform: booleanAttribute }); /** * Link to the source or relevant information of the notification, * which triggers when clicking on the notification item text area. */ readonly itemLink = input<NotificationItemRouterLink | NotificationItemLink>(); /** * Actions that are displayed below the text of the notification. */ readonly quickActions = input<NotificationItemQuickAction[]>(); /** * Action that is displayed on the right side of the notification. */ readonly primaryAction = input<NotificationItemPrimaryAction>(); protected readonly activatedRoute = inject(ActivatedRoute, { optional: true }); } |