@semantic-components/ui-lab 0.62.0 → 0.63.0

package/src/lib/components/notification-center/notification-center.ts

@@ -0,0 +1,157 @@
+import {
+  computed,
+  Directive,
+  InjectionToken,
+  input,
+  model,
+  output,
+} from '@angular/core';
+import type {
+  Notification,
+  NotificationAction,
+  NotificationGroup,
+} from './notification-types';
+
+export type NotificationFilter = 'all' | 'unread' | 'read';
+
+export interface ScNotificationCenter {
+  readonly notifications: ReturnType<typeof model<Notification[]>>;
+  readonly groups: () => NotificationGroup[];
+  readonly title: () => string;
+  readonly showFilters: () => boolean;
+  readonly showClearAll: () => boolean;
+  readonly showDismiss: () => boolean;
+  readonly emptyTitle: () => string;
+  readonly emptyDescription: () => string;
+  readonly filter: ReturnType<typeof model<NotificationFilter>>;
+  readonly totalUnread: () => number;
+  readonly filteredNotifications: () => Notification[];
+  readonly ungroupedNotifications: () => Notification[];
+  readonly itemClick: ReturnType<typeof output<Notification>>;
+  getGroupNotifications(groupId: string): Notification[];
+  setFilter(f: NotificationFilter): void;
+  onMarkRead(notification: Notification, read: boolean): void;
+  onMarkAllRead(): void;
+  onMarkAllReadInGroup(groupId: string): void;
+  onDismiss(notification: Notification): void;
+  onClearAll(): void;
+  onClearGroup(groupId: string): void;
+  onActionClick(notification: Notification, action: NotificationAction): void;
+}
+
+export const SC_NOTIFICATION_CENTER = new InjectionToken<ScNotificationCenter>(
+  'SC_NOTIFICATION_CENTER',
+);
+
+@Directive({
+  selector: '[sc-notification-center]',
+  exportAs: 'scNotificationCenter',
+  providers: [
+    {
+      provide: SC_NOTIFICATION_CENTER,
+      useExisting: ScNotificationCenterDirective,
+    },
+  ],
+  host: {
+    'data-slot': 'notification-center',
+  },
+})
+export class ScNotificationCenterDirective implements ScNotificationCenter {
+  readonly notifications = model<Notification[]>([]);
+  readonly groups = input<NotificationGroup[]>([]);
+  readonly title = input('Notifications');
+  readonly showFilters = input(true);
+  readonly showClearAll = input(true);
+  readonly showDismiss = input(true);
+  readonly emptyTitle = input('No notifications');
+  readonly emptyDescription = input("You're all caught up!");
+  readonly class = input<string>('');
+
+  readonly markRead = output<{ notification: Notification; read: boolean }>();
+  readonly markAllRead = output<void>();
+  readonly dismiss = output<Notification>();
+  readonly clearAll = output<void>();
+  readonly actionClick = output<{
+    notification: Notification;
+    action: NotificationAction;
+  }>();
+  readonly itemClick = output<Notification>();
+  readonly filterChange = output<NotificationFilter>();
+
+  readonly filter = model<NotificationFilter>('all');
+
+  readonly totalUnread = computed(
+    () => this.notifications().filter((n) => !n.read).length,
+  );
+
+  readonly filteredNotifications = computed(() => {
+    const f = this.filter();
+    const all = this.notifications();
+
+    switch (f) {
+      case 'unread':
+        return all.filter((n) => !n.read);
+      case 'read':
+        return all.filter((n) => n.read);
+      default:
+        return all;
+    }
+  });
+
+  readonly ungroupedNotifications = computed(() =>
+    this.filteredNotifications().filter((n) => !n.groupId),
+  );
+
+  getGroupNotifications(groupId: string): Notification[] {
+    return this.filteredNotifications().filter((n) => n.groupId === groupId);
+  }
+
+  setFilter(f: NotificationFilter): void {
+    this.filter.set(f);
+    this.filterChange.emit(f);
+  }
+
+  onMarkRead(notification: Notification, read: boolean): void {
+    this.notifications.update((notifications) =>
+      notifications.map((n) => (n.id === notification.id ? { ...n, read } : n)),
+    );
+    this.markRead.emit({ notification, read });
+  }
+
+  onMarkAllRead(): void {
+    this.notifications.update((notifications) =>
+      notifications.map((n) => ({ ...n, read: true })),
+    );
+    this.markAllRead.emit();
+  }
+
+  onMarkAllReadInGroup(groupId: string): void {
+    this.notifications.update((notifications) =>
+      notifications.map((n) =>
+        n.groupId === groupId ? { ...n, read: true } : n,
+      ),
+    );
+  }
+
+  onDismiss(notification: Notification): void {
+    this.notifications.update((notifications) =>
+      notifications.filter((n) => n.id !== notification.id),
+    );
+    this.dismiss.emit(notification);
+  }
+
+  onClearAll(): void {
+    this.notifications.set([]);
+    this.clearAll.emit();
+  }
+
+  onClearGroup(groupId: string): void {
+    this.notifications.update((notifications) =>
+      notifications.filter((n) => n.groupId !== groupId),
+    );
+  }
+
+  onActionClick(notification: Notification, action: NotificationAction): void {
+    this.actionClick.emit({ notification, action });
+  }
+}

package/src/lib/components/notification-center/notification-group.ts

@@ -0,0 +1,198 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  output,
+  signal,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { ScNotificationItem } from './notification-item';
+import type {
+  Notification,
+  NotificationAction,
+  NotificationGroup,
+} from './notification-types';
+
+@Component({
+  selector: 'sc-notification-group',
+  imports: [ScNotificationItem],
+  template: `
+    <div [class]="groupClass()">
+      <!-- Group Header -->
+      <button
+        type="button"
+        class="w-full flex items-center justify-between px-3 py-2 text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted/50 rounded-lg transition-colors"
+        (click)="toggleCollapse()"
+        [attr.aria-expanded]="!collapsed()"
+        [attr.aria-controls]="'group-' + group().id"
+      >
+        <div class="flex items-center gap-2">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            [class]="collapsed() ? '-rotate-90' : 'rotate-0'"
+            class="transition-transform"
+          >
+            <path d="m6 9 6 6 6-6" />
+          </svg>
+          @if (group().icon) {
+            <span [innerHTML]="group().icon"></span>
+          }
+          <span>{{ group().title }}</span>
+          <span class="px-1.5 py-0.5 text-xs bg-muted rounded-full">
+            {{ notifications().length }}
+          </span>
+          @if (unreadCount() > 0) {
+            <span
+              class="px-1.5 py-0.5 text-xs bg-primary text-primary-foreground rounded-full"
+            >
+              {{ unreadCount() }} new
+            </span>
+          }
+        </div>
+
+        @if (notifications().length > 0) {
+          <div class="flex items-center gap-1">
+            <button
+              type="button"
+              class="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+              (click)="onMarkAllRead($event)"
+              [attr.aria-label]="'Mark all as read in ' + group().title"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="14"
+                height="14"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+                <polyline points="22 4 12 14.01 9 11.01" />
+              </svg>
+            </button>
+            <button
+              type="button"
+              class="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+              (click)="onClearAll($event)"
+              [attr.aria-label]="'Clear all in ' + group().title"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="14"
+                height="14"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path d="M3 6h18" />
+                <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
+                <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
+              </svg>
+            </button>
+          </div>
+        }
+      </button>
+
+      <!-- Notifications List -->
+      @if (!collapsed()) {
+        <div
+          [id]="'group-' + group().id"
+          class="mt-1 space-y-1"
+          role="feed"
+          aria-label="Notifications"
+        >
+          @for (notification of notifications(); track notification.id) {
+            <sc-notification-item
+              [notification]="notification"
+              [showDismiss]="showDismiss()"
+              (markRead)="onMarkRead(notification, $event)"
+              (dismiss)="onDismiss(notification)"
+              (actionClick)="onActionClick(notification, $event)"
+              (itemClick)="itemClick.emit(notification)"
+            />
+          }
+
+          @if (notifications().length === 0) {
+            <p class="px-3 py-4 text-sm text-muted-foreground text-center">
+              No notifications
+            </p>
+          }
+        </div>
+      }
+    </div>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScNotificationGroup {
+  readonly group = input.required<NotificationGroup>();
+  readonly notifications = input<Notification[]>([]);
+  readonly showDismiss = input(true);
+  readonly class = input<string>('');
+
+  readonly markRead = output<{ notification: Notification; read: boolean }>();
+  readonly markAllRead = output<void>();
+  readonly dismiss = output<Notification>();
+  readonly clearAll = output<void>();
+  readonly actionClick = output<{
+    notification: Notification;
+    action: NotificationAction;
+  }>();
+  readonly itemClick = output<Notification>();
+  readonly collapseChange = output<boolean>();
+
+  protected readonly collapsed = signal(false);
+
+  protected readonly groupClass = computed(() => cn('', this.class()));
+
+  protected readonly unreadCount = computed(
+    () => this.notifications().filter((n) => !n.read).length,
+  );
+
+  protected toggleCollapse(): void {
+    const newValue = !this.collapsed();
+    this.collapsed.set(newValue);
+    this.collapseChange.emit(newValue);
+  }
+
+  protected onMarkRead(notification: Notification, read: boolean): void {
+    this.markRead.emit({ notification, read });
+  }
+
+  protected onMarkAllRead(event: MouseEvent): void {
+    event.stopPropagation();
+    this.markAllRead.emit();
+  }
+
+  protected onDismiss(notification: Notification): void {
+    this.dismiss.emit(notification);
+  }
+
+  protected onClearAll(event: MouseEvent): void {
+    event.stopPropagation();
+    this.clearAll.emit();
+  }
+
+  protected onActionClick(
+    notification: Notification,
+    action: NotificationAction,
+  ): void {
+    this.actionClick.emit({ notification, action });
+  }
+}

package/src/lib/components/notification-center/notification-item.ts

@@ -0,0 +1,214 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  output,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import type { Notification, NotificationAction } from './notification-types';
+
+@Component({
+  selector: 'sc-notification-item',
+  template: `
+    <div
+      [class]="itemClass()"
+      role="article"
+      [attr.aria-label]="notification().title"
+      tabindex="0"
+      (click)="onItemClick()"
+      (keydown.enter)="onItemClick()"
+      (keydown.space)="onItemClick(); $event.preventDefault()"
+    >
+      <!-- Unread indicator -->
+      @if (!notification().read) {
+        <div
+          class="absolute left-2 top-1/2 -translate-y-1/2 w-2 h-2 rounded-full bg-primary"
+          aria-label="Unread"
+        ></div>
+      }
+
+      <!-- Icon or Avatar -->
+      <div class="flex-shrink-0 ml-4">
+        @if (notification().avatar) {
+          <img
+            [src]="notification().avatar"
+            [alt]="notification().title"
+            class="w-10 h-10 rounded-full object-cover"
+          />
+        } @else {
+          <div [class]="iconContainerClass()">
+            <span [innerHTML]="typeIcon()"></span>
+          </div>
+        }
+      </div>
+
+      <!-- Content -->
+      <div class="flex-1 min-w-0 ml-3">
+        <div class="flex items-start justify-between gap-2">
+          <p
+            class="text-sm font-medium text-foreground truncate"
+            [class.font-semibold]="!notification().read"
+          >
+            {{ notification().title }}
+          </p>
+          <span class="text-xs text-muted-foreground whitespace-nowrap">
+            {{ formatTime(notification().timestamp) }}
+          </span>
+        </div>
+
+        @if (notification().description) {
+          <p class="mt-0.5 text-sm text-muted-foreground line-clamp-2">
+            {{ notification().description }}
+          </p>
+        }
+
+        <!-- Action button -->
+        @if (notification().action) {
+          <button
+            type="button"
+            class="mt-2 text-xs font-medium text-primary hover:text-primary/80 transition-colors"
+            (click)="onActionClick($event, notification().action!)"
+          >
+            {{ notification().action!.label }}
+          </button>
+        }
+      </div>
+
+      <!-- Dismiss button -->
+      @if (showDismiss()) {
+        <button
+          type="button"
+          class="flex-shrink-0 p-1 ml-2 rounded-full opacity-0 group-hover:opacity-100 hover:bg-muted text-muted-foreground hover:text-foreground transition-all"
+          (click)="onDismiss($event)"
+          aria-label="Dismiss notification"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M18 6 6 18" />
+            <path d="m6 6 12 12" />
+          </svg>
+        </button>
+      }
+    </div>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScNotificationItem {
+  readonly notification = input.required<Notification>();
+  readonly showDismiss = input(true);
+  readonly class = input<string>('');
+
+  readonly markRead = output<boolean>();
+  readonly dismiss = output<void>();
+  readonly actionClick = output<NotificationAction>();
+  readonly itemClick = output<void>();
+
+  protected readonly itemClass = computed(() =>
+    cn(
+      'group relative flex items-start p-3 pr-2 rounded-lg cursor-pointer',
+      'hover:bg-muted/50 transition-colors',
+      'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+      !this.notification().read && 'bg-primary/5',
+      this.class(),
+    ),
+  );
+
+  protected readonly iconContainerClass = computed(() => {
+    const type = this.notification().type;
+    const base = 'w-10 h-10 rounded-full flex items-center justify-center';
+
+    switch (type) {
+      case 'success':
+        return cn(base, 'bg-green-500/10 text-green-600 dark:text-green-400');
+      case 'warning':
+        return cn(
+          base,
+          'bg-yellow-500/10 text-yellow-600 dark:text-yellow-400',
+        );
+      case 'error':
+        return cn(base, 'bg-red-500/10 text-red-600 dark:text-red-400');
+      case 'message':
+        return cn(base, 'bg-blue-500/10 text-blue-600 dark:text-blue-400');
+      case 'info':
+      default:
+        return cn(base, 'bg-muted text-muted-foreground');
+    }
+  });
+
+  protected typeIcon(): string {
+    const type = this.notification().type;
+    const customIcon = this.notification().icon;
+
+    if (customIcon) {
+      return customIcon;
+    }
+
+    switch (type) {
+      case 'success':
+        return `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>`;
+      case 'warning':
+        return `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>`;
+      case 'error':
+        return `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>`;
+      case 'message':
+        return `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/></svg>`;
+      case 'info':
+      default:
+        return `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>`;
+    }
+  }
+
+  protected formatTime(date: Date): string {
+    const now = new Date();
+    const d = new Date(date);
+    const diffMs = now.getTime() - d.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    const diffHours = Math.floor(diffMs / 3600000);
+    const diffDays = Math.floor(diffMs / 86400000);
+
+    if (diffMins < 1) {
+      return 'Just now';
+    } else if (diffMins < 60) {
+      return `${diffMins}m ago`;
+    } else if (diffHours < 24) {
+      return `${diffHours}h ago`;
+    } else if (diffDays < 7) {
+      return `${diffDays}d ago`;
+    } else {
+      return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+    }
+  }
+
+  protected onItemClick(): void {
+    if (!this.notification().read) {
+      this.markRead.emit(true);
+    }
+    this.itemClick.emit();
+  }
+
+  protected onActionClick(event: MouseEvent, action: NotificationAction): void {
+    event.stopPropagation();
+    this.actionClick.emit(action);
+
+    if (action.handler) {
+      action.handler();
+    }
+  }
+
+  protected onDismiss(event: MouseEvent): void {
+    event.stopPropagation();
+    this.dismiss.emit();
+  }
+}

package/src/lib/components/notification-center/notification-types.ts

@@ -0,0 +1,52 @@
+export type NotificationType =
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'error'
+  | 'message';
+
+export interface Notification {
+  id: string;
+  title: string;
+  description?: string;
+  type: NotificationType;
+  timestamp: Date;
+  read: boolean;
+  groupId?: string;
+  avatar?: string;
+  icon?: string;
+  action?: NotificationAction;
+  metadata?: Record<string, unknown>;
+}
+
+export interface NotificationAction {
+  label: string;
+  url?: string;
+  handler?: () => void;
+}
+
+export interface NotificationGroup {
+  id: string;
+  title: string;
+  icon?: string;
+  collapsed?: boolean;
+}
+
+export interface NotificationMarkReadEvent {
+  notification: Notification;
+  read: boolean;
+}
+
+export interface NotificationDismissEvent {
+  notification: Notification;
+}
+
+export interface NotificationActionEvent {
+  notification: Notification;
+  action: NotificationAction;
+}
+
+export interface NotificationGroupCollapseEvent {
+  group: NotificationGroup;
+  collapsed: boolean;
+}