@semantic-components/ui-lab 0.63.0 → 0.65.0

package/src/lib/components/video-player/video-player-time.ts

@@ -1,31 +0,0 @@
-import {
-  Component,
-  ChangeDetectionStrategy,
-  computed,
-  input,
-  inject,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { SC_VIDEO_PLAYER } from './video-player';
-
-@Component({
-  selector: 'span[sc-video-player-time]',
-  template: `
-    {{ player.formatTime(player.currentTime()) }} /
-    {{ player.formatTime(player.duration()) }}
-  `,
-  host: {
-    '[class]': 'class()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScVideoPlayerTime {
-  protected readonly player = inject(SC_VIDEO_PLAYER);
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn('text-sm text-white', this.classInput()),
-  );
-}

package/src/lib/components/video-player/video-player-types.ts

@@ -1,13 +0,0 @@
-export interface ScVideoSource {
-  src: string;
-  type?: string;
-  label?: string;
-}
-
-export interface ScVideoTrack {
-  src: string;
-  kind: 'subtitles' | 'captions' | 'descriptions' | 'chapters' | 'metadata';
-  srclang: string;
-  label: string;
-  default?: boolean;
-}

package/src/lib/components/video-player/video-player-video.ts

@@ -1,127 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  DestroyRef,
-  ElementRef,
-  ViewEncapsulation,
-  afterNextRender,
-  computed,
-  inject,
-  input,
-  output,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { SC_VIDEO_PLAYER } from './video-player';
-import type { ScVideoSource, ScVideoTrack } from './video-player-types';
-
-@Component({
-  selector: 'video[sc-video-player-video]',
-  template: `
-    @for (source of sources(); track source.src) {
-      <source [src]="source.src" [type]="source.type || 'video/mp4'" />
-    }
-    @if (src()) {
-      <source [src]="src()" type="video/mp4" />
-    }
-    @for (track of tracks(); track track.src) {
-      <track
-        [src]="track.src"
-        [kind]="track.kind"
-        [srclang]="track.srclang"
-        [label]="track.label"
-        [default]="track.default"
-      />
-    }
-  `,
-  host: {
-    '[class]': 'class()',
-    '[poster]': 'poster()',
-    '[autoplay]': 'autoplay()',
-    '[loop]': 'loop()',
-    '[muted]': 'muted()',
-    '[playsInline]': 'playsInline()',
-    '(timeupdate)': 'onTimeUpdate()',
-    '(loadedmetadata)': 'onLoadedMetadata()',
-    '(ended)': 'ended.emit()',
-    '(play)': 'onPlay()',
-    '(pause)': 'onPause()',
-    '(waiting)': 'player.isBuffering.set(true)',
-    '(canplay)': 'player.isBuffering.set(false)',
-    '(volumechange)': 'onVolumeChange()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScVideoPlayerVideo {
-  protected readonly player = inject(SC_VIDEO_PLAYER);
-  private readonly elementRef = inject(ElementRef<HTMLVideoElement>);
-  private readonly destroyRef = inject(DestroyRef);
-
-  readonly src = input<string>('');
-  readonly sources = input<ScVideoSource[]>([]);
-  readonly tracks = input<ScVideoTrack[]>([]);
-  readonly poster = input<string>('');
-  readonly autoplay = input<boolean>(false);
-  readonly loop = input<boolean>(false);
-  readonly muted = input<boolean>(false);
-  readonly playsInline = input<boolean>(true);
-  readonly aspectRatio = input<string>('16/9');
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  // Outputs
-  readonly ended = output<void>();
-  readonly timeUpdate = output<number>();
-
-  protected readonly class = computed(() =>
-    cn(
-      'w-full h-full object-contain',
-      `aspect-[${this.aspectRatio()}]`,
-      this.classInput(),
-    ),
-  );
-
-  constructor() {
-    afterNextRender(() => {
-      const video = this.elementRef.nativeElement;
-      this.player.videoElement.set(video);
-    });
-
-    this.destroyRef.onDestroy(() => {
-      this.player.videoElement.set(null);
-    });
-  }
-
-  protected onTimeUpdate(): void {
-    const video = this.elementRef.nativeElement;
-    this.player.currentTime.set(video.currentTime);
-    this.timeUpdate.emit(video.currentTime);
-
-    // Update buffered
-    if (video.buffered.length > 0) {
-      this.player.buffered.set(video.buffered.end(video.buffered.length - 1));
-    }
-  }
-
-  protected onLoadedMetadata(): void {
-    const video = this.elementRef.nativeElement;
-    this.player.duration.set(video.duration);
-    video.volume = this.player.volume();
-    video.playbackRate = this.player.playbackRate();
-  }
-
-  protected onPlay(): void {
-    this.player.isPlaying.set(true);
-  }
-
-  protected onPause(): void {
-    this.player.isPlaying.set(false);
-  }
-
-  protected onVolumeChange(): void {
-    const video = this.elementRef.nativeElement;
-    this.player.isMuted.set(video.muted);
-    if (!video.muted) {
-      this.player.volume.set(video.volume);
-    }
-  }
-}

package/src/lib/components/video-player/video-player-volume.ts

@@ -1,61 +0,0 @@
-import {
-  Component,
-  ChangeDetectionStrategy,
-  computed,
-  input,
-  inject,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { SC_VIDEO_PLAYER } from './video-player';
-
-@Component({
-  selector: 'div[sc-video-player-volume]',
-  template: `
-    <button
-      type="button"
-      (click)="player.toggleMute()"
-      [class]="buttonClass()"
-      [attr.aria-label]="player.isMuted() ? 'Unmute' : 'Mute'"
-    >
-      <ng-content select="[volume-icon]" />
-    </button>
-    <input
-      type="range"
-      min="0"
-      max="1"
-      step="0.01"
-      [value]="player.volume()"
-      (input)="onVolumeInput($event)"
-      class="w-0 group-hover:w-20 transition-all duration-200 h-1 accent-white cursor-pointer"
-      aria-label="Volume"
-    />
-  `,
-  host: {
-    '[class]': 'class()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScVideoPlayerVolume {
-  protected readonly player = inject(SC_VIDEO_PLAYER);
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn('flex items-center gap-1 group', this.classInput()),
-  );
-
-  protected readonly buttonClass = computed(() =>
-    cn(
-      'size-8 rounded flex items-center justify-center',
-      'text-white hover:bg-white/20 transition-colors',
-      'focus:outline-none focus:ring-2 focus:ring-white/50',
-      '[&_svg]:size-5',
-    ),
-  );
-
-  protected onVolumeInput(event: Event): void {
-    const value = +(event.target as HTMLInputElement).value;
-    this.player.setVolume(value);
-  }
-}

package/src/lib/components/video-player/video-player.ts

@@ -1,139 +0,0 @@
-import { computed, Directive, InjectionToken, signal } from '@angular/core';
-
-export const SC_VIDEO_PLAYER = new InjectionToken<ScVideoPlayer>(
-  'SC_VIDEO_PLAYER',
-);
-
-@Directive({
-  selector: '[sc-video-player]',
-  exportAs: 'scVideoPlayer',
-  providers: [{ provide: SC_VIDEO_PLAYER, useExisting: ScVideoPlayer }],
-  host: {
-    'data-slot': 'video-player',
-  },
-})
-export class ScVideoPlayer {
-  // Video element reference
-  readonly videoElement = signal<HTMLVideoElement | null>(null);
-
-  // Playback state
-  readonly isPlaying = signal(false);
-  readonly isBuffering = signal(false);
-  readonly currentTime = signal(0);
-  readonly duration = signal(0);
-  readonly buffered = signal(0);
-
-  // Volume state
-  readonly volume = signal(1);
-  readonly isMuted = signal(false);
-
-  // UI state
-  readonly isFullscreen = signal(false);
-  readonly showControls = signal(true);
-  readonly playbackRate = signal(1);
-
-  // Computed
-  readonly progressPercent = computed(() => {
-    const duration = this.duration();
-    if (duration === 0) return 0;
-    return (this.currentTime() / duration) * 100;
-  });
-
-  readonly bufferedPercent = computed(() => {
-    const duration = this.duration();
-    if (duration === 0) return 0;
-    return (this.buffered() / duration) * 100;
-  });
-
-  // Methods
-  play(): void {
-    this.videoElement()?.play();
-  }
-
-  pause(): void {
-    this.videoElement()?.pause();
-  }
-
-  togglePlay(): void {
-    if (this.isPlaying()) {
-      this.pause();
-    } else {
-      this.play();
-    }
-  }
-
-  skip(seconds: number): void {
-    const video = this.videoElement();
-    if (!video) return;
-    video.currentTime = Math.max(
-      0,
-      Math.min(video.duration, video.currentTime + seconds),
-    );
-  }
-
-  setVolume(value: number): void {
-    const video = this.videoElement();
-    if (!video) return;
-    video.volume = value;
-    video.muted = value === 0;
-    this.volume.set(value);
-    this.isMuted.set(value === 0);
-  }
-
-  toggleMute(): void {
-    const video = this.videoElement();
-    if (!video) return;
-
-    if (this.isMuted()) {
-      video.muted = false;
-      const vol = this.volume() || 0.5;
-      video.volume = vol;
-      this.isMuted.set(false);
-    } else {
-      video.muted = true;
-      this.isMuted.set(true);
-    }
-  }
-
-  setPlaybackRate(rate: number): void {
-    const video = this.videoElement();
-    if (!video) return;
-    video.playbackRate = rate;
-    this.playbackRate.set(rate);
-  }
-
-  seek(percent: number): void {
-    const video = this.videoElement();
-    if (!video) return;
-    video.currentTime = (percent / 100) * video.duration;
-  }
-
-  toggleFullscreen(): void {
-    const container = this.videoElement()?.parentElement;
-    if (!container) return;
-
-    if (this.isFullscreen()) {
-      document.exitFullscreen?.();
-    } else {
-      container.requestFullscreen?.();
-    }
-  }
-
-  togglePiP(): void {
-    const video = this.videoElement();
-    if (!video) return;
-
-    if (document.pictureInPictureElement) {
-      document.exitPictureInPicture?.();
-    } else {
-      video.requestPictureInPicture?.();
-    }
-  }
-
-  formatTime(seconds: number): string {
-    if (!isFinite(seconds) || isNaN(seconds)) return '0:00';
-    const mins = Math.floor(seconds / 60);
-    const secs = Math.floor(seconds % 60);
-    return `${mins}:${secs.toString().padStart(2, '0')}`;
-  }
-}

package/src/lib/components/virtual-list/README.md

@@ -1,120 +0,0 @@
-# Virtual List
-
-A high-performance virtualized list component that efficiently renders large datasets by only rendering visible items.
-
-## Installation
-
-```typescript
-import { ScVirtualList } from '@/ui/virtual-list';
-import type { VirtualListItem, VirtualListRange } from '@/ui/virtual-list';
-```
-
-## Usage
-
-### Basic Usage
-
-```html
-<sc-virtual-list [items]="items" [itemHeight]="48" [height]="400">
-  <ng-template let-item let-index="index">
-    <div class="p-3 border-b">{{ index }}: {{ item }}</div>
-  </ng-template>
-</sc-virtual-list>
-```
-
-```typescript
-items = Array.from({ length: 10000 }, (_, i) => `Item ${i + 1}`);
-```
-
-### Custom Item Template
-
-```html
-<sc-virtual-list [items]="users" [itemHeight]="64">
-  <ng-template let-user let-index="index">
-    <div class="flex items-center gap-3 p-3 border-b">
-      <img [src]="user.avatar" class="w-10 h-10 rounded-full" />
-      <div>
-        <div class="font-medium">{{ user.name }}</div>
-        <div class="text-sm text-muted-foreground">{{ user.email }}</div>
-      </div>
-    </div>
-  </ng-template>
-</sc-virtual-list>
-```
-
-### With Custom Track Function
-
-```html
-<sc-virtual-list [items]="items" [trackByFn]="trackById">
-  <ng-template let-item>{{ item.name }}</ng-template>
-</sc-virtual-list>
-```
-
-```typescript
-trackById = (index: number, item: User) => item.id;
-```
-
-### Listening to Range Changes
-
-```html
-<sc-virtual-list [items]="items" (rangeChange)="onRangeChange($event)">
-  <ng-template let-item>{{ item }}</ng-template>
-</sc-virtual-list>
-```
-
-```typescript
-onRangeChange(range: VirtualListRange) {
-  console.log('Visible range:', range.start, '-', range.end);
-}
-```
-
-## API Reference
-
-### Inputs
-
-| Input        | Type                                  | Default    | Description                       |
-| ------------ | ------------------------------------- | ---------- | --------------------------------- |
-| `items`      | `T[]`                                 | `[]`       | Array of items to render          |
-| `itemHeight` | `number`                              | `48`       | Fixed height of each item in px   |
-| `overscan`   | `number`                              | `3`        | Extra items to render above/below |
-| `height`     | `string \| number`                    | `'400px'`  | Container height                  |
-| `class`      | `string`                              | `''`       | Additional CSS classes            |
-| `trackByFn`  | `(index: number, item: T) => unknown` | `(i) => i` | Track function for items          |
-
-### Outputs
-
-| Output        | Type               | Description                        |
-| ------------- | ------------------ | ---------------------------------- |
-| `rangeChange` | `VirtualListRange` | Emitted when visible range changes |
-
-### Methods
-
-| Method                                    | Description                   |
-| ----------------------------------------- | ----------------------------- |
-| `scrollToIndex(index: number, behavior?)` | Scroll to specific item index |
-| `scrollToTop(behavior?)`                  | Scroll to top of list         |
-| `scrollToBottom(behavior?)`               | Scroll to bottom of list      |
-
-## Type Definitions
-
-```typescript
-interface VirtualListRange {
-  start: number;
-  end: number;
-}
-
-interface VirtualListItem<T = unknown> {
-  index: number;
-  data: T;
-}
-```
-
-## Features
-
-- Efficient virtualization for large datasets
-- Fixed-height item rendering
-- Configurable overscan for smoother scrolling
-- Custom item templates via ng-template
-- Custom track function support
-- Programmatic scroll methods
-- Range change events for infinite loading
-- Smooth scroll behavior support

package/src/lib/components/virtual-list/index.ts

@@ -1,2 +0,0 @@
-export { ScVirtualList } from './virtual-list';
-export type { VirtualListItem, VirtualListRange } from './virtual-list-types';

package/src/lib/components/virtual-list/virtual-list-types.ts

@@ -1,9 +0,0 @@
-export interface VirtualListRange {
-  start: number;
-  end: number;
-}
-
-export interface VirtualListItem<T = unknown> {
-  index: number;
-  data: T;
-}

package/src/lib/components/virtual-list/virtual-list.ts

@@ -1,174 +0,0 @@
-import {
-  afterNextRender,
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  contentChild,
-  DestroyRef,
-  ElementRef,
-  inject,
-  input,
-  output,
-  signal,
-  TemplateRef,
-  viewChild,
-  ViewEncapsulation,
-} from '@angular/core';
-import { NgTemplateOutlet } from '@angular/common';
-import { cn } from '@semantic-components/ui';
-import type { VirtualListItem, VirtualListRange } from './virtual-list-types';
-
-@Component({
-  selector: 'sc-virtual-list',
-  imports: [NgTemplateOutlet],
-  template: `
-    <div
-      #container
-      [class]="containerClass()"
-      [style.height]="containerHeight()"
-      (scroll)="onScroll()"
-    >
-      <!-- Spacer for total content height -->
-      <div [style.height.px]="totalHeight()" class="relative">
-        <!-- Rendered items -->
-        <div
-          [style.transform]="'translateY(' + offsetY() + 'px)'"
-          class="absolute top-0 left-0 right-0"
-        >
-          @for (
-            item of visibleItems();
-            track trackByFn()(item.index, item.data)
-          ) {
-            <div [style.height.px]="itemHeight()">
-              <ng-container
-                [ngTemplateOutlet]="itemTemplate()"
-                [ngTemplateOutletContext]="{
-                  $implicit: item.data,
-                  index: item.index,
-                }"
-              />
-            </div>
-          }
-        </div>
-      </div>
-    </div>
-  `,
-  styles: `
-    :host {
-      display: block;
-    }
-  `,
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScVirtualList<T> {
-  private readonly destroyRef = inject(DestroyRef);
-
-  readonly containerRef = viewChild<ElementRef<HTMLDivElement>>('container');
-  readonly itemTemplate =
-    contentChild.required<TemplateRef<{ $implicit: T; index: number }>>(
-      TemplateRef,
-    );
-
-  readonly items = input<T[]>([]);
-  readonly itemHeight = input(48);
-  readonly overscan = input(3);
-  readonly height = input<string | number>('400px');
-  readonly class = input<string>('');
-  readonly trackByFn = input<(index: number, item: T) => unknown>(
-    (index) => index,
-  );
-
-  readonly rangeChange = output<VirtualListRange>();
-
-  protected readonly scrollTop = signal(0);
-
-  protected readonly containerHeight = computed(() => {
-    const h = this.height();
-    return typeof h === 'number' ? `${h}px` : h;
-  });
-
-  protected readonly totalHeight = computed(() => {
-    return this.items().length * this.itemHeight();
-  });
-
-  protected readonly visibleCount = computed(() => {
-    const h = this.height();
-    const heightPx = typeof h === 'number' ? h : parseInt(h, 10) || 400;
-    return Math.ceil(heightPx / this.itemHeight()) + 1;
-  });
-
-  protected readonly startIndex = computed(() => {
-    const index = Math.floor(this.scrollTop() / this.itemHeight());
-    return Math.max(0, index - this.overscan());
-  });
-
-  protected readonly endIndex = computed(() => {
-    const start = this.startIndex();
-    const visible = this.visibleCount();
-    const overscan = this.overscan();
-    const total = this.items().length;
-    return Math.min(total, start + visible + overscan * 2);
-  });
-
-  protected readonly offsetY = computed(() => {
-    return this.startIndex() * this.itemHeight();
-  });
-
-  protected readonly visibleItems = computed<VirtualListItem<T>[]>(() => {
-    const allItems = this.items();
-    const start = this.startIndex();
-    const end = this.endIndex();
-
-    const result: VirtualListItem<T>[] = [];
-    for (let i = start; i < end; i++) {
-      if (allItems[i] !== undefined) {
-        result.push({ index: i, data: allItems[i] });
-      }
-    }
-    return result;
-  });
-
-  protected readonly containerClass = computed(() =>
-    cn('overflow-auto', this.class()),
-  );
-
-  constructor() {
-    afterNextRender(() => {
-      // Initial range emit
-      this.emitRange();
-    });
-  }
-
-  onScroll(): void {
-    const container = this.containerRef()?.nativeElement;
-    if (container) {
-      this.scrollTop.set(container.scrollTop);
-      this.emitRange();
-    }
-  }
-
-  private emitRange(): void {
-    this.rangeChange.emit({
-      start: this.startIndex(),
-      end: this.endIndex(),
-    });
-  }
-
-  scrollToIndex(index: number, behavior: ScrollBehavior = 'auto'): void {
-    const container = this.containerRef()?.nativeElement;
-    if (container) {
-      const top = index * this.itemHeight();
-      container.scrollTo({ top, behavior });
-    }
-  }
-
-  scrollToTop(behavior: ScrollBehavior = 'auto'): void {
-    this.scrollToIndex(0, behavior);
-  }
-
-  scrollToBottom(behavior: ScrollBehavior = 'auto'): void {
-    const lastIndex = Math.max(0, this.items().length - 1);
-    this.scrollToIndex(lastIndex, behavior);
-  }
-}