|
| 1 | +import { |
| 2 | + ChangeDetectionStrategy, |
| 3 | + Component, |
| 4 | + EventEmitter, |
| 5 | + Input, |
| 6 | + Output, |
| 7 | +} from '@angular/core' |
| 8 | +import { DomSanitizer } from '@angular/platform-browser' |
| 9 | +import { |
| 10 | + NgClass, |
| 11 | + NgFor, |
| 12 | + NgSwitch, |
| 13 | + NgSwitchCase, |
| 14 | + NgSwitchDefault, |
| 15 | +} from '@angular/common' |
| 16 | +import { MatButtonModule } from '@angular/material/button' |
| 17 | +import { |
| 18 | + ActionSurfaceComponent, |
| 19 | + ActionSurfaceContainerComponent, |
| 20 | + BrandSecondaryDarkButtonDirective, |
| 21 | + UnderlineButtonDirective, |
| 22 | +} from '@orcid/ui' |
| 23 | + |
| 24 | +export type RegistryNotificationButtonVariant = 'text' | 'flat' | 'stroked' |
| 25 | + |
| 26 | +export interface RegistryNotificationAction { |
| 27 | + id?: string |
| 28 | + label: string |
| 29 | + variant?: RegistryNotificationButtonVariant |
| 30 | + color?: 'primary' | 'accent' | 'warn' |
| 31 | + underline?: boolean |
| 32 | + disabled?: boolean |
| 33 | +} |
| 34 | + |
| 35 | +export interface RegistryPermissionNotification { |
| 36 | + id?: string |
| 37 | + text: string |
| 38 | + icon?: string |
| 39 | + iconColor?: string |
| 40 | + actions: RegistryNotificationAction[] |
| 41 | +} |
| 42 | + |
| 43 | +export interface RegistryNotificationActionEvent { |
| 44 | + notificationIndex: number |
| 45 | + actionIndex: number |
| 46 | + notificationId?: string |
| 47 | + actionId?: string |
| 48 | + action: RegistryNotificationAction |
| 49 | +} |
| 50 | + |
| 51 | +@Component({ |
| 52 | + selector: 'orcid-registry-permission-notifications', |
| 53 | + standalone: true, |
| 54 | + changeDetection: ChangeDetectionStrategy.OnPush, |
| 55 | + imports: [ |
| 56 | + NgClass, |
| 57 | + NgFor, |
| 58 | + NgSwitch, |
| 59 | + NgSwitchCase, |
| 60 | + NgSwitchDefault, |
| 61 | + MatButtonModule, |
| 62 | + ActionSurfaceComponent, |
| 63 | + ActionSurfaceContainerComponent, |
| 64 | + BrandSecondaryDarkButtonDirective, |
| 65 | + UnderlineButtonDirective, |
| 66 | + ], |
| 67 | + templateUrl: './permission-notifications.component.html', |
| 68 | + styleUrls: ['./permission-notifications.component.scss'], |
| 69 | +}) |
| 70 | +export class PermissionNotificationsComponent { |
| 71 | + @Input() title = '' |
| 72 | + @Input() subtitle = '' |
| 73 | + @Input() notifications: RegistryPermissionNotification[] = [] |
| 74 | + |
| 75 | + @Output() actionClicked = new EventEmitter<RegistryNotificationActionEvent>() |
| 76 | + |
| 77 | + constructor(private _sanitizer: DomSanitizer) {} |
| 78 | + |
| 79 | + getTrustedHtml(text: string) { |
| 80 | + return this._sanitizer.bypassSecurityTrustHtml(text) |
| 81 | + } |
| 82 | + |
| 83 | + get visibleNotifications(): RegistryPermissionNotification[] { |
| 84 | + return (this.notifications || []).slice(0, 3) |
| 85 | + } |
| 86 | + |
| 87 | + onActionClick( |
| 88 | + notification: RegistryPermissionNotification, |
| 89 | + notificationIndex: number, |
| 90 | + action: RegistryNotificationAction, |
| 91 | + actionIndex: number |
| 92 | + ): void { |
| 93 | + this.actionClicked.emit({ |
| 94 | + notificationIndex, |
| 95 | + actionIndex, |
| 96 | + notificationId: notification.id, |
| 97 | + actionId: action.id, |
| 98 | + action, |
| 99 | + }) |
| 100 | + } |
| 101 | +} |
0 commit comments