@semantic-components/ui-lab 0.63.0 → 0.65.0

package/src/lib/components/lightbox/lightbox-container.ts

@@ -1,338 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { SC_LIGHTBOX } from './lightbox';
-
-@Component({
-  selector: '[sc-lightbox-container]',
-  template: `
-    @if (lightbox.isOpen()) {
-      <div
-        [class]="overlayClass()"
-        (click)="lightbox.onOverlayClick($event)"
-        (keydown)="lightbox.onKeydown($event)"
-        tabindex="-1"
-        role="dialog"
-        aria-modal="true"
-        [attr.aria-label]="
-          'Image gallery, showing image ' +
-          (lightbox.currentIndex() + 1) +
-          ' of ' +
-          lightbox.images().length
-        "
-      >
-        <!-- Close button -->
-        <button
-          type="button"
-          [class]="closeButtonClass()"
-          (click)="lightbox.close()"
-          aria-label="Close lightbox"
-        >
-          <ng-content select="[sc-lightbox-close-icon]">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              class="size-6"
-            >
-              <path d="M18 6 6 18M6 6l12 12" />
-            </svg>
-          </ng-content>
-        </button>
-
-        <!-- Navigation: Previous -->
-        @if (lightbox.images().length > 1) {
-          <button
-            type="button"
-            [class]="navButtonClass('left')"
-            (click)="lightbox.previous()"
-            [disabled]="!lightbox.loop() && lightbox.currentIndex() === 0"
-            aria-label="Previous image"
-          >
-            <ng-content select="[sc-lightbox-prev-icon]">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                class="size-8"
-              >
-                <path d="m15 18-6-6 6-6" />
-              </svg>
-            </ng-content>
-          </button>
-        }
-
-        <!-- Main image container -->
-        <div [class]="imageContainerClass()">
-          <img
-            [src]="lightbox.currentImage().src"
-            [alt]="
-              lightbox.currentImage().alt ||
-              'Image ' + (lightbox.currentIndex() + 1)
-            "
-            [class]="imageClass()"
-            [style.transform]="'scale(' + lightbox.zoomLevel() + ')'"
-            (load)="lightbox.onImageLoad()"
-            draggable="false"
-          />
-
-          <!-- Loading indicator -->
-          @if (lightbox.imageLoading()) {
-            <div class="absolute inset-0 flex items-center justify-center">
-              <ng-content select="[sc-lightbox-loading]">
-                <svg
-                  class="size-8 animate-spin text-white"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  (click)="$event.stopPropagation()"
-                >
-                  <circle
-                    class="opacity-25"
-                    cx="12"
-                    cy="12"
-                    r="10"
-                    stroke="currentColor"
-                    stroke-width="4"
-                  />
-                  <path
-                    class="opacity-75"
-                    fill="currentColor"
-                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                  />
-                </svg>
-              </ng-content>
-            </div>
-          }
-        </div>
-
-        <!-- Navigation: Next -->
-        @if (lightbox.images().length > 1) {
-          <button
-            type="button"
-            [class]="navButtonClass('right')"
-            (click)="lightbox.next()"
-            [disabled]="
-              !lightbox.loop() &&
-              lightbox.currentIndex() === lightbox.images().length - 1
-            "
-            aria-label="Next image"
-          >
-            <ng-content select="[sc-lightbox-next-icon]">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                class="size-8"
-              >
-                <path d="m9 18 6-6-6-6" />
-              </svg>
-            </ng-content>
-          </button>
-        }
-
-        <!-- Bottom bar -->
-        <div [class]="bottomBarClass()">
-          <!-- Image info -->
-          @if (
-            lightbox.showInfo() &&
-            (lightbox.currentImage().title ||
-              lightbox.currentImage().description)
-          ) {
-            <div class="flex-1 text-white">
-              @if (lightbox.currentImage().title) {
-                <h3 class="font-semibold">
-                  {{ lightbox.currentImage().title }}
-                </h3>
-              }
-              @if (lightbox.currentImage().description) {
-                <p class="text-sm text-white/80">
-                  {{ lightbox.currentImage().description }}
-                </p>
-              }
-            </div>
-          }
-
-          <!-- Controls -->
-          <div class="flex items-center gap-2">
-            <!-- Counter -->
-            @if (lightbox.showCounter() && lightbox.images().length > 1) {
-              <span class="text-sm text-white/80">
-                {{ lightbox.currentIndex() + 1 }} /
-                {{ lightbox.images().length }}
-              </span>
-            }
-
-            <!-- Zoom controls -->
-            @if (lightbox.showZoom()) {
-              <div class="flex items-center gap-1 ml-4">
-                <button
-                  type="button"
-                  class="p-2 text-white/80 hover:text-white transition-colors"
-                  (click)="lightbox.zoomOut()"
-                  [disabled]="lightbox.zoomLevel() <= 0.5"
-                  aria-label="Zoom out"
-                >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    class="size-5"
-                  >
-                    <circle cx="11" cy="11" r="8" />
-                    <path d="m21 21-4.3-4.3M8 11h6" />
-                  </svg>
-                </button>
-                <span class="text-sm text-white/80 min-w-[3rem] text-center">
-                  {{ Math.round(lightbox.zoomLevel() * 100) }}%
-                </span>
-                <button
-                  type="button"
-                  class="p-2 text-white/80 hover:text-white transition-colors"
-                  (click)="lightbox.zoomIn()"
-                  [disabled]="lightbox.zoomLevel() >= 3"
-                  aria-label="Zoom in"
-                >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    class="size-5"
-                  >
-                    <circle cx="11" cy="11" r="8" />
-                    <path d="m21 21-4.3-4.3M8 11h6M11 8v6" />
-                  </svg>
-                </button>
-                <button
-                  type="button"
-                  class="p-2 text-white/80 hover:text-white transition-colors"
-                  (click)="lightbox.resetZoom()"
-                  aria-label="Reset zoom"
-                >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    class="size-5"
-                  >
-                    <path d="M21 21l-6-6m6 6v-4.8m0 4.8h-4.8" />
-                    <path d="M3 16.2V21m0 0h4.8M3 21l6-6" />
-                    <path d="M21 7.8V3m0 0h-4.8M21 3l-6 6" />
-                    <path d="M3 7.8V3m0 0h4.8M3 3l6 6" />
-                  </svg>
-                </button>
-              </div>
-            }
-          </div>
-        </div>
-
-        <!-- Thumbnails -->
-        @if (lightbox.showThumbnails() && lightbox.images().length > 1) {
-          <div [class]="thumbnailsClass()">
-            @for (image of lightbox.images(); track image.src; let i = $index) {
-              <button
-                type="button"
-                [class]="thumbnailClass(i)"
-                (click)="lightbox.goTo(i)"
-                [attr.aria-label]="'Go to image ' + (i + 1)"
-              >
-                <img
-                  [src]="image.thumbnail || image.src"
-                  [alt]="image.alt || 'Thumbnail ' + (i + 1)"
-                  class="size-full object-cover"
-                />
-              </button>
-            }
-          </div>
-        }
-      </div>
-    }
-  `,
-  host: {
-    'data-slot': 'lightbox-container',
-    '[class]': 'class()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScLightboxContainer {
-  readonly lightbox = inject(SC_LIGHTBOX);
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly Math = Math;
-
-  protected readonly class = computed(() => cn('', this.classInput()));
-
-  protected readonly overlayClass = computed(() =>
-    cn(
-      'lightbox-overlay fixed inset-0 z-50 bg-black/95 flex flex-col',
-      'animate-in fade-in-0 duration-200',
-    ),
-  );
-
-  protected readonly closeButtonClass = computed(() =>
-    cn(
-      'absolute top-4 right-4 z-10 p-2 text-white/80 hover:text-white',
-      'transition-colors rounded-full hover:bg-white/10',
-    ),
-  );
-
-  protected navButtonClass(side: 'left' | 'right'): string {
-    return cn(
-      'absolute top-1/2 -translate-y-1/2 z-10 p-2 text-white/80 hover:text-white',
-      'transition-colors rounded-full hover:bg-white/10',
-      'disabled:opacity-30 disabled:cursor-not-allowed',
-      side === 'left' ? 'left-4' : 'right-4',
-    );
-  }
-
-  protected readonly imageContainerClass = computed(() =>
-    cn('flex-1 flex items-center justify-center overflow-hidden relative'),
-  );
-
-  protected readonly imageClass = computed(() =>
-    cn(
-      'max-h-[calc(100vh-200px)] max-w-[calc(100vw-100px)] object-contain',
-      'transition-transform duration-200',
-      this.lightbox.imageLoading() && 'opacity-0',
-    ),
-  );
-
-  protected readonly bottomBarClass = computed(() =>
-    cn('flex items-center justify-between px-4 py-3 bg-black/50'),
-  );
-
-  protected readonly thumbnailsClass = computed(() =>
-    cn(
-      'flex items-center justify-center gap-2 px-4 py-3 bg-black/50 overflow-x-auto',
-    ),
-  );
-
-  protected thumbnailClass(index: number): string {
-    return cn(
-      'size-16 rounded overflow-hidden flex-shrink-0',
-      'ring-2 ring-offset-2 ring-offset-black transition-all',
-      index === this.lightbox.currentIndex()
-        ? 'ring-white'
-        : 'ring-transparent hover:ring-white/50',
-    );
-  }
-}

package/src/lib/components/lightbox/lightbox-gallery.ts

@@ -1,81 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { LightboxImage } from './lightbox.types';
-import { ScLightboxDirective } from './lightbox';
-import { ScLightboxContainer } from './lightbox-container';
-
-@Component({
-  selector: 'sc-lightbox-gallery',
-  exportAs: 'scLightboxGallery',
-  template: `
-    <div [class]="galleryClass()">
-      @for (image of images(); track image.src; let i = $index) {
-        <button
-          type="button"
-          [class]="itemClass()"
-          (click)="lightbox.open(i)"
-          [attr.aria-label]="'Open image ' + (i + 1)"
-        >
-          <img
-            [src]="image.thumbnail || image.src"
-            [alt]="image.alt || 'Gallery image ' + (i + 1)"
-            class="size-full object-cover"
-          />
-        </button>
-      }
-    </div>
-
-    <div
-      sc-lightbox
-      #lightbox="scLightbox"
-      [images]="images()"
-      [loop]="loop()"
-      [showCounter]="showCounter()"
-      [showInfo]="showInfo()"
-      [showZoom]="showZoom()"
-      [showThumbnails]="showThumbnails()"
-    >
-      <div sc-lightbox-container></div>
-    </div>
-  `,
-  host: {
-    'data-slot': 'lightbox-gallery',
-  },
-  imports: [ScLightboxDirective, ScLightboxContainer],
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScLightboxGallery {
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly images = input<LightboxImage[]>([]);
-  readonly columns = input<number>(3);
-  readonly gap = input<number>(4);
-  readonly loop = input<boolean>(true);
-  readonly showCounter = input<boolean>(true);
-  readonly showInfo = input<boolean>(true);
-  readonly showZoom = input<boolean>(true);
-  readonly showThumbnails = input<boolean>(true);
-
-  protected readonly galleryClass = computed(() =>
-    cn(
-      'grid',
-      `grid-cols-${this.columns()}`,
-      `gap-${this.gap()}`,
-      this.classInput(),
-    ),
-  );
-
-  protected readonly itemClass = computed(() =>
-    cn(
-      'aspect-square overflow-hidden rounded-lg cursor-pointer',
-      'hover:opacity-90 transition-opacity',
-      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-    ),
-  );
-}

package/src/lib/components/lightbox/lightbox-trigger.ts

@@ -1,19 +0,0 @@
-import { Directive, inject, input } from '@angular/core';
-import { SC_LIGHTBOX } from './lightbox';
-
-@Directive({
-  selector: '[sc-lightbox-trigger]',
-  host: {
-    'data-slot': 'lightbox-trigger',
-    '[style.cursor]': '"pointer"',
-    '(click)': 'onClick()',
-  },
-})
-export class ScLightboxTrigger {
-  private readonly lightbox = inject(SC_LIGHTBOX);
-  readonly index = input<number>(0);
-
-  onClick(): void {
-    this.lightbox.open(this.index());
-  }
-}

package/src/lib/components/lightbox/lightbox.ts

@@ -1,210 +0,0 @@
-import {
-  Directive,
-  InjectionToken,
-  input,
-  model,
-  output,
-  signal,
-  computed,
-  DestroyRef,
-  inject,
-  afterNextRender,
-} from '@angular/core';
-import { LightboxImage } from './lightbox.types';
-
-/**
- * Injection token for ScLightbox
- */
-export interface ScLightbox {
-  // Inputs
-  images: () => LightboxImage[];
-  loop: () => boolean;
-  showCounter: () => boolean;
-  showInfo: () => boolean;
-  showZoom: () => boolean;
-  showThumbnails: () => boolean;
-  closeOnOverlayClick: () => boolean;
-  closeOnEscape: () => boolean;
-
-  // Models
-  isOpen: ReturnType<typeof model<boolean>>;
-  currentIndex: ReturnType<typeof model<number>>;
-
-  // Outputs
-  opened: ReturnType<typeof output<number>>;
-  closed: ReturnType<typeof output<void>>;
-  indexChange: ReturnType<typeof output<number>>;
-
-  // State
-  zoomLevel: ReturnType<typeof signal<number>>;
-  imageLoading: ReturnType<typeof signal<boolean>>;
-
-  // Computed
-  currentImage: () => LightboxImage;
-
-  // Methods
-  open: (index?: number) => void;
-  close: () => void;
-  next: () => void;
-  previous: () => void;
-  goTo: (index: number) => void;
-  zoomIn: () => void;
-  zoomOut: () => void;
-  resetZoom: () => void;
-  onImageLoad: () => void;
-  onOverlayClick: (event: MouseEvent) => void;
-  onKeydown: (event: KeyboardEvent) => void;
-  getCurrentImage: () => LightboxImage | undefined;
-}
-
-export const SC_LIGHTBOX = new InjectionToken<ScLightbox>('SC_LIGHTBOX');
-
-@Directive({
-  selector: '[sc-lightbox]',
-  exportAs: 'scLightbox',
-  providers: [{ provide: SC_LIGHTBOX, useExisting: ScLightboxDirective }],
-  host: {
-    'data-slot': 'lightbox',
-  },
-})
-export class ScLightboxDirective implements ScLightbox {
-  private readonly destroyRef = inject(DestroyRef);
-
-  // Configuration inputs
-  readonly images = input<LightboxImage[]>([]);
-  readonly loop = input<boolean>(true);
-  readonly showCounter = input<boolean>(true);
-  readonly showInfo = input<boolean>(true);
-  readonly showZoom = input<boolean>(true);
-  readonly showThumbnails = input<boolean>(true);
-  readonly closeOnOverlayClick = input<boolean>(true);
-  readonly closeOnEscape = input<boolean>(true);
-
-  // Models for two-way binding
-  readonly isOpen = model<boolean>(false);
-  readonly currentIndex = model<number>(0);
-
-  // Outputs
-  readonly opened = output<number>();
-  readonly closed = output<void>();
-  readonly indexChange = output<number>();
-
-  // Internal state signals
-  readonly zoomLevel = signal(1);
-  readonly imageLoading = signal(false);
-
-  // Computed
-  readonly currentImage = computed(() => {
-    const images = this.images();
-    const index = this.currentIndex();
-    return images[index];
-  });
-
-  constructor() {
-    // Set up keyboard handling
-    afterNextRender(() => {
-      this.destroyRef.onDestroy(() => {
-        document.body.style.overflow = '';
-      });
-    });
-  }
-
-  // Public methods for child components
-  open(index = 0): void {
-    this.currentIndex.set(index);
-    this.isOpen.set(true);
-    this.zoomLevel.set(1);
-    this.imageLoading.set(true);
-    this.opened.emit(index);
-    document.body.style.overflow = 'hidden';
-  }
-
-  close(): void {
-    this.isOpen.set(false);
-    this.closed.emit();
-    document.body.style.overflow = '';
-  }
-
-  next(): void {
-    const images = this.images();
-    const current = this.currentIndex();
-
-    if (current < images.length - 1) {
-      this.goTo(current + 1);
-    } else if (this.loop()) {
-      this.goTo(0);
-    }
-  }
-
-  previous(): void {
-    const current = this.currentIndex();
-
-    if (current > 0) {
-      this.goTo(current - 1);
-    } else if (this.loop()) {
-      this.goTo(this.images().length - 1);
-    }
-  }
-
-  goTo(index: number): void {
-    this.currentIndex.set(index);
-    this.zoomLevel.set(1);
-    this.imageLoading.set(true);
-    this.indexChange.emit(index);
-  }
-
-  zoomIn(): void {
-    this.zoomLevel.update((z) => Math.min(3, z + 0.25));
-  }
-
-  zoomOut(): void {
-    this.zoomLevel.update((z) => Math.max(0.5, z - 0.25));
-  }
-
-  resetZoom(): void {
-    this.zoomLevel.set(1);
-  }
-
-  onImageLoad(): void {
-    this.imageLoading.set(false);
-  }
-
-  onOverlayClick(event: MouseEvent): void {
-    if (
-      this.closeOnOverlayClick() &&
-      (event.target as HTMLElement).classList.contains('lightbox-overlay')
-    ) {
-      this.close();
-    }
-  }
-
-  onKeydown(event: KeyboardEvent): void {
-    switch (event.key) {
-      case 'Escape':
-        if (this.closeOnEscape()) {
-          this.close();
-        }
-        break;
-      case 'ArrowLeft':
-        this.previous();
-        break;
-      case 'ArrowRight':
-        this.next();
-        break;
-      case '+':
-      case '=':
-        this.zoomIn();
-        break;
-      case '-':
-        this.zoomOut();
-        break;
-      case '0':
-        this.resetZoom();
-        break;
-    }
-  }
-
-  getCurrentImage(): LightboxImage | undefined {
-    return this.currentImage();
-  }
-}

package/src/lib/components/lightbox/lightbox.types.ts

@@ -1,7 +0,0 @@
-export interface LightboxImage {
-  src: string;
-  alt?: string;
-  title?: string;
-  description?: string;
-  thumbnail?: string;
-}