@semantic-components/ui-lab 0.63.0 → 0.65.0

package/src/lib/components/audio-player/audio-player-cover.ts

@@ -1,39 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { SC_AUDIO_PLAYER } from './audio-player';
-
-@Component({
-  selector: 'div[sc-audio-player-cover]',
-  template: `
-    @if (player.currentTrack(); as track) {
-      @if (track.cover) {
-        <img
-          [src]="track.cover"
-          [alt]="track.title || 'Album cover'"
-          class="size-full object-cover"
-        />
-      }
-    }
-  `,
-  host: {
-    'data-slot': 'audio-player-cover',
-    '[class]': 'class()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScAudioPlayerCover {
-  readonly player = inject(SC_AUDIO_PLAYER);
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn('rounded-md overflow-hidden bg-muted flex-shrink-0', this.classInput()),
-  );
-}

package/src/lib/components/audio-player/audio-player-info.ts

@@ -1,40 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { SC_AUDIO_PLAYER } from './audio-player';
-
-@Component({
-  selector: 'div[sc-audio-player-info]',
-  template: `
-    @if (player.currentTrack(); as track) {
-      <p class="font-medium truncate">
-        {{ track.title || 'Unknown Track' }}
-      </p>
-      @if (track.artist) {
-        <p class="text-sm text-muted-foreground truncate">
-          {{ track.artist }}
-        </p>
-      }
-    } @else {
-      <p class="font-medium truncate">Unknown Track</p>
-    }
-  `,
-  host: {
-    'data-slot': 'audio-player-info',
-    '[class]': 'class()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScAudioPlayerInfo {
-  readonly player = inject(SC_AUDIO_PLAYER);
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() => cn('', this.classInput()));
-}

package/src/lib/components/audio-player/audio-player-next.ts

@@ -1,40 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { SC_AUDIO_PLAYER } from './audio-player';
-
-@Component({
-  selector: 'button[sc-audio-player-next]',
-  template: '<ng-content />',
-  host: {
-    'data-slot': 'audio-player-next',
-    type: 'button',
-    '[class]': 'class()',
-    '[disabled]': '!player.canGoNext()',
-    '[attr.aria-label]': "'Next track'",
-    '(click)': 'player.next()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScAudioPlayerNext {
-  readonly player = inject(SC_AUDIO_PLAYER);
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn(
-      'size-8 rounded-full flex items-center justify-center',
-      'hover:bg-accent transition-colors',
-      'focus:outline-none focus:ring-2 focus:ring-ring',
-      'disabled:opacity-50 disabled:cursor-not-allowed',
-      '[&_svg]:size-5',
-      this.classInput(),
-    ),
-  );
-}

package/src/lib/components/audio-player/audio-player-play-button.ts

@@ -1,39 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { SC_AUDIO_PLAYER } from './audio-player';
-
-@Component({
-  selector: 'button[sc-audio-player-play-button]',
-  template: '<ng-content />',
-  host: {
-    'data-slot': 'audio-player-play-button',
-    type: 'button',
-    '[class]': 'class()',
-    '[attr.aria-label]': "player.isPlaying() ? 'Pause' : 'Play'",
-    '(click)': 'player.togglePlay()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScAudioPlayerPlayButton {
-  readonly player = inject(SC_AUDIO_PLAYER);
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn(
-      'size-12 rounded-full bg-primary text-primary-foreground',
-      'flex items-center justify-center',
-      'hover:bg-primary/90 transition-colors',
-      'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
-      '[&_svg]:size-6',
-      this.classInput(),
-    ),
-  );
-}

package/src/lib/components/audio-player/audio-player-previous.ts

@@ -1,40 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { SC_AUDIO_PLAYER } from './audio-player';
-
-@Component({
-  selector: 'button[sc-audio-player-previous]',
-  template: '<ng-content />',
-  host: {
-    'data-slot': 'audio-player-previous',
-    type: 'button',
-    '[class]': 'class()',
-    '[disabled]': '!player.canGoPrevious()',
-    '[attr.aria-label]': "'Previous track'",
-    '(click)': 'player.previous()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScAudioPlayerPrevious {
-  readonly player = inject(SC_AUDIO_PLAYER);
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn(
-      'size-8 rounded-full flex items-center justify-center',
-      'hover:bg-accent transition-colors',
-      'focus:outline-none focus:ring-2 focus:ring-ring',
-      'disabled:opacity-50 disabled:cursor-not-allowed',
-      '[&_svg]:size-5',
-      this.classInput(),
-    ),
-  );
-}

package/src/lib/components/audio-player/audio-player-progress.ts

@@ -1,77 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { SC_AUDIO_PLAYER } from './audio-player';
-
-@Component({
-  selector: 'div[sc-audio-player-progress]',
-  template: `
-    <span class="text-xs text-muted-foreground w-10 text-right">
-      {{ player.formatTime(player.currentTime()) }}
-    </span>
-    <div
-      class="flex-1 h-1.5 bg-muted rounded-full cursor-pointer relative group"
-      (click)="onProgressClick($event)"
-      role="slider"
-      [attr.aria-label]="'Seek'"
-      [attr.aria-valuenow]="player.currentTime()"
-      [attr.aria-valuemin]="0"
-      [attr.aria-valuemax]="player.duration()"
-      tabindex="0"
-      (keydown)="onProgressKeydown($event)"
-    >
-      <div
-        class="absolute inset-y-0 left-0 bg-primary rounded-full transition-all"
-        [style.width.%]="player.progressPercent()"
-      ></div>
-      <div
-        class="absolute top-1/2 -translate-y-1/2 size-3 bg-primary rounded-full opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"
-        [style.left.%]="player.progressPercent()"
-        [style.transform]="'translate(-50%, -50%)'"
-      ></div>
-    </div>
-    <span class="text-xs text-muted-foreground w-10">
-      {{ player.formatTime(player.duration()) }}
-    </span>
-  `,
-  host: {
-    'data-slot': 'audio-player-progress',
-    '[class]': 'class()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScAudioPlayerProgress {
-  readonly player = inject(SC_AUDIO_PLAYER);
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn('flex items-center gap-2', this.classInput()),
-  );
-
-  protected onProgressClick(event: MouseEvent): void {
-    const target = event.currentTarget as HTMLElement;
-    const rect = target.getBoundingClientRect();
-    const percent = (event.clientX - rect.left) / rect.width;
-    this.player.seek(percent * this.player.duration());
-  }
-
-  protected onProgressKeydown(event: KeyboardEvent): void {
-    const step = event.shiftKey ? 10 : 5;
-    if (event.key === 'ArrowLeft') {
-      this.player.seek(Math.max(0, this.player.currentTime() - step));
-      event.preventDefault();
-    } else if (event.key === 'ArrowRight') {
-      this.player.seek(
-        Math.min(this.player.duration(), this.player.currentTime() + step),
-      );
-      event.preventDefault();
-    }
-  }
-}

package/src/lib/components/audio-player/audio-player-repeat.ts

@@ -1,38 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { SC_AUDIO_PLAYER } from './audio-player';
-
-@Component({
-  selector: 'button[sc-audio-player-repeat]',
-  template: '<ng-content />',
-  host: {
-    'data-slot': 'audio-player-repeat',
-    type: 'button',
-    '[class]': 'class()',
-    '[attr.aria-label]': "'Repeat: ' + player.repeat()",
-    '(click)': 'player.cycleRepeat()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScAudioPlayerRepeat {
-  readonly player = inject(SC_AUDIO_PLAYER);
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn(
-      'size-8 rounded-full flex items-center justify-center',
-      'hover:bg-accent transition-colors',
-      'focus:outline-none focus:ring-2 focus:ring-ring',
-      '[&_svg]:size-4',
-      this.classInput(),
-    ),
-  );
-}

package/src/lib/components/audio-player/audio-player-shuffle.ts

@@ -1,39 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { SC_AUDIO_PLAYER } from './audio-player';
-
-@Component({
-  selector: 'button[sc-audio-player-shuffle]',
-  template: '<ng-content />',
-  host: {
-    'data-slot': 'audio-player-shuffle',
-    type: 'button',
-    '[class]': 'class()',
-    '[attr.aria-pressed]': 'player.shuffle()',
-    '[attr.aria-label]': "'Shuffle'",
-    '(click)': 'player.shuffle.set(!player.shuffle())',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScAudioPlayerShuffle {
-  readonly player = inject(SC_AUDIO_PLAYER);
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn(
-      'size-8 rounded-full flex items-center justify-center',
-      'hover:bg-accent transition-colors',
-      'focus:outline-none focus:ring-2 focus:ring-ring',
-      '[&_svg]:size-4',
-      this.classInput(),
-    ),
-  );
-}

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

@@ -1,91 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { SC_AUDIO_PLAYER } from './audio-player';
-
-@Component({
-  selector: 'div[sc-audio-player-volume]',
-  template: `
-    <button
-      type="button"
-      (click)="player.toggleMute()"
-      class="size-8 rounded-full flex items-center justify-center hover:bg-accent transition-colors focus:outline-none focus:ring-2 focus:ring-ring"
-      [attr.aria-label]="player.isMuted() ? 'Unmute' : 'Mute'"
-    >
-      @if (player.isMuted() || player.volume() === 0) {
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          class="size-4 pointer-events-none"
-        >
-          <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
-          <line x1="22" x2="16" y1="9" y2="15" />
-          <line x1="16" x2="22" y1="9" y2="15" />
-        </svg>
-      } @else if (player.volume() < 0.5) {
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          class="size-4 pointer-events-none"
-        >
-          <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
-          <path d="M15.54 8.46a5 5 0 0 1 0 7.07" />
-        </svg>
-      } @else {
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          class="size-4 pointer-events-none"
-        >
-          <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
-          <path d="M15.54 8.46a5 5 0 0 1 0 7.07" />
-          <path d="M19.07 4.93a10 10 0 0 1 0 14.14" />
-        </svg>
-      }
-    </button>
-    <input
-      type="range"
-      min="0"
-      max="1"
-      step="0.01"
-      [value]="player.volume()"
-      (input)="onVolumeChange($event)"
-      class="w-20 h-1 accent-primary cursor-pointer"
-      aria-label="Volume"
-    />
-  `,
-  host: {
-    'data-slot': 'audio-player-volume',
-    '[class]': 'class()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScAudioPlayerVolume {
-  readonly player = inject(SC_AUDIO_PLAYER);
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn('flex items-center gap-2', this.classInput()),
-  );
-
-  protected onVolumeChange(event: Event): void {
-    const value = +(event.target as HTMLInputElement).value;
-    this.player.setVolume(value);
-  }
-}

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

@@ -1,246 +0,0 @@
-import {
-  computed,
-  DestroyRef,
-  Component,
-  inject,
-  input,
-  InjectionToken,
-  model,
-  output,
-  signal,
-  ChangeDetectionStrategy,
-  ViewEncapsulation,
-} from '@angular/core';
-import { ScAudioPlayerAudio } from './audio-player-audio';
-
-export interface ScAudioTrack {
-  src: string;
-  title?: string;
-  artist?: string;
-  cover?: string;
-  duration?: number;
-}
-
-export const SC_AUDIO_PLAYER = new InjectionToken<ScAudioPlayer>(
-  'SC_AUDIO_PLAYER',
-);
-
-@Component({
-  selector: '[sc-audio-player]',
-  imports: [ScAudioPlayerAudio],
-  template: `
-    <ng-content />
-    <audio sc-audio-player-audio class="hidden"></audio>
-  `,
-  exportAs: 'scAudioPlayer',
-  providers: [{ provide: SC_AUDIO_PLAYER, useExisting: ScAudioPlayer }],
-  host: {
-    'data-slot': 'audio-player',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScAudioPlayer {
-  private readonly destroyRef = inject(DestroyRef);
-  private audioElement = signal<HTMLAudioElement | null>(null);
-
-  // Inputs
-  readonly tracks = input<ScAudioTrack[]>([]);
-  readonly autoplay = input<boolean>(false);
-
-  // Models
-  readonly currentIndex = model<number>(0);
-  readonly volume = model<number>(1);
-  readonly shuffle = model<boolean>(false);
-  readonly repeat = model<'none' | 'one' | 'all'>('none');
-
-  // Outputs
-  readonly trackChange = output<ScAudioTrack>();
-  readonly play = output<void>();
-  readonly pause = output<void>();
-  readonly ended = output<void>();
-
-  // Internal state
-  readonly isPlaying = signal(false);
-  readonly isMuted = signal(false);
-  readonly currentTime = signal(0);
-  readonly duration = signal(0);
-  private previousVolume = 1;
-
-  readonly currentTrack = computed(() => {
-    const tracks = this.tracks();
-    const index = this.currentIndex();
-    return tracks[index] ?? null;
-  });
-
-  readonly progressPercent = computed(() => {
-    const duration = this.duration();
-    if (duration === 0) return 0;
-    return (this.currentTime() / duration) * 100;
-  });
-
-  readonly canGoPrevious = computed(() => {
-    return this.tracks().length > 1;
-  });
-
-  readonly canGoNext = computed(() => {
-    return this.tracks().length > 1;
-  });
-
-  registerAudioElement(element: HTMLAudioElement): void {
-    this.audioElement.set(element);
-    element.volume = this.volume();
-
-    if (this.autoplay()) {
-      element.play().catch(() => {
-        // Autoplay blocked by browser
-      });
-    }
-  }
-
-  togglePlay(): void {
-    const audio = this.audioElement();
-    if (!audio) return;
-    if (this.isPlaying()) {
-      audio.pause();
-      this.pause.emit();
-    } else {
-      audio.play();
-      this.play.emit();
-    }
-  }
-
-  previous(): void {
-    const tracks = this.tracks();
-    if (tracks.length === 0) return;
-
-    // If more than 3 seconds in, restart current track
-    if (this.currentTime() > 3) {
-      this.seek(0);
-      return;
-    }
-
-    let newIndex: number;
-    if (this.shuffle()) {
-      newIndex = Math.floor(Math.random() * tracks.length);
-    } else {
-      newIndex = this.currentIndex() - 1;
-      if (newIndex < 0) {
-        newIndex = tracks.length - 1;
-      }
-    }
-
-    this.currentIndex.set(newIndex);
-    this.trackChange.emit(tracks[newIndex]);
-
-    if (this.isPlaying()) {
-      const audio = this.audioElement();
-      if (audio) {
-        setTimeout(() => audio.play(), 0);
-      }
-    }
-  }
-
-  next(): void {
-    const tracks = this.tracks();
-    if (tracks.length === 0) return;
-
-    let newIndex: number;
-    if (this.shuffle()) {
-      newIndex = Math.floor(Math.random() * tracks.length);
-    } else {
-      newIndex = this.currentIndex() + 1;
-      if (newIndex >= tracks.length) {
-        newIndex = 0;
-      }
-    }
-
-    this.currentIndex.set(newIndex);
-    this.trackChange.emit(tracks[newIndex]);
-
-    if (this.isPlaying()) {
-      const audio = this.audioElement();
-      if (audio) {
-        setTimeout(() => audio.play(), 0);
-      }
-    }
-  }
-
-  seek(time: number): void {
-    const audio = this.audioElement();
-    if (!audio) return;
-    audio.currentTime = time;
-    this.currentTime.set(time);
-  }
-
-  toggleMute(): void {
-    const audio = this.audioElement();
-    if (!audio) return;
-    if (this.isMuted()) {
-      audio.volume = this.previousVolume;
-      this.volume.set(this.previousVolume);
-      this.isMuted.set(false);
-    } else {
-      this.previousVolume = this.volume();
-      audio.volume = 0;
-      this.volume.set(0);
-      this.isMuted.set(true);
-    }
-  }
-
-  cycleRepeat(): void {
-    const current = this.repeat();
-    if (current === 'none') {
-      this.repeat.set('all');
-    } else if (current === 'all') {
-      this.repeat.set('one');
-    } else {
-      this.repeat.set('none');
-    }
-  }
-
-  onTimeUpdate(): void {
-    const audio = this.audioElement();
-    if (!audio) return;
-    this.currentTime.set(audio.currentTime);
-  }
-
-  onLoadedMetadata(): void {
-    const audio = this.audioElement();
-    if (!audio) return;
-    this.duration.set(audio.duration);
-  }
-
-  onEnded(): void {
-    this.ended.emit();
-
-    const repeatMode = this.repeat();
-    if (repeatMode === 'one') {
-      this.seek(0);
-      const audio = this.audioElement();
-      if (audio) {
-        audio.play();
-      }
-    } else if (
-      repeatMode === 'all' ||
-      this.currentIndex() < this.tracks().length - 1
-    ) {
-      this.next();
-    }
-  }
-
-  setVolume(value: number): void {
-    const audio = this.audioElement();
-    if (!audio) return;
-    audio.volume = value;
-    this.volume.set(value);
-    this.isMuted.set(value === 0);
-  }
-
-  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')}`;
-  }
-}