@semantic-components/ui-lab 0.63.0 → 0.65.0

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

@@ -1,157 +0,0 @@
-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

@@ -1,198 +0,0 @@
-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

@@ -1,214 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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;
-}