@semantic-components/ui-lab 0.63.0 → 0.64.0

package/src/lib/components/language-switcher/language-button.ts

@@ -1,98 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { ScLanguageService } from './language.service';
-import {
-  LanguageSwitcherVariant,
-  LanguageSwitcherSize,
-  variantStyles,
-  sizeStyles,
-} from './styles';
-
-/**
- * Language switcher with flag/label display - a more visual option.
- * Shows the current language with option to display as button or link style.
- *
- * @example
- * ```html
- * <button sc-language-button></button>
- * <a sc-language-button href="#"></a>
- * ```
- */
-@Component({
-  selector: 'button[sc-language-button], a[sc-language-button]',
-  host: {
-    'data-slot': 'language-button',
-    '[class]': 'class()',
-    '[attr.aria-label]': 'ariaLabel()',
-    '(click)': 'onClick($event)',
-  },
-  template: `
-    <span class="font-medium">{{ displayLabel() }}</span>
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      class="size-4"
-      aria-hidden="true"
-    >
-      <path d="m6 9 6 6 6-6" />
-    </svg>
-  `,
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScLanguageButton {
-  private readonly languageService = inject(ScLanguageService);
-
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly variant = input<LanguageSwitcherVariant>('ghost');
-  readonly size = input<LanguageSwitcherSize>('default');
-  readonly showNativeLabels = input<boolean>(true);
-
-  protected readonly currentLanguage = this.languageService.currentLanguage;
-  protected readonly languages = this.languageService.languages;
-
-  protected readonly displayLabel = computed(() => {
-    const lang = this.currentLanguage();
-    return this.showNativeLabels() ? lang.nativeLabel : lang.label;
-  });
-
-  protected readonly class = computed(() =>
-    cn(
-      'inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-md text-sm font-medium',
-      'ring-offset-background transition-colors cursor-pointer',
-      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-      'disabled:pointer-events-none disabled:opacity-50',
-      '[&_svg]:pointer-events-none [&_svg]:shrink-0',
-      variantStyles[this.variant()],
-      sizeStyles[this.size()],
-      this.classInput(),
-    ),
-  );
-
-  protected readonly ariaLabel = computed(() => {
-    const current = this.currentLanguage();
-    return `Current language: ${current.label}. Click to change language.`;
-  });
-
-  protected onClick(event: Event): void {
-    // For a 2-language setup, toggle directly
-    const langs = this.languages();
-    if (langs.length === 2) {
-      event.preventDefault();
-      this.languageService.toggleLanguage();
-    }
-    // For more languages, this could open a menu (to be implemented by consumer)
-  }
-}

package/src/lib/components/language-switcher/language-select.ts

@@ -1,65 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { ScLanguageService } from './language.service';
-
-/**
- * Language select dropdown - ideal for multiple languages.
- * Shows a dropdown with all available languages.
- *
- * @example
- * ```html
- * <sc-language-select></sc-language-select>
- * <sc-language-select [showNativeLabels]="true"></sc-language-select>
- * ```
- */
-@Component({
-  selector: 'sc-language-select',
-  host: {
-    'data-slot': 'language-select',
-    '[class]': 'class()',
-  },
-  template: `
-    <label for="language-select" class="sr-only">Select language</label>
-    <select
-      id="language-select"
-      [value]="currentLanguageCode()"
-      (change)="onLanguageChange($event)"
-      class="h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
-    >
-      @for (lang of languages(); track lang.code) {
-        <option [value]="lang.code">
-          {{ showNativeLabels() ? lang.nativeLabel : lang.label }}
-        </option>
-      }
-    </select>
-  `,
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScLanguageSelect {
-  private readonly languageService = inject(ScLanguageService);
-
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly showNativeLabels = input<boolean>(true);
-
-  protected readonly currentLanguageCode = computed(() =>
-    this.languageService.language(),
-  );
-  protected readonly languages = this.languageService.languages;
-
-  protected readonly class = computed(() =>
-    cn('inline-block', this.classInput()),
-  );
-
-  protected onLanguageChange(event: Event): void {
-    const target = event.target as HTMLSelectElement;
-    this.languageService.setLanguage(target.value);
-  }
-}

package/src/lib/components/language-switcher/language-toggle.ts

@@ -1,98 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { ScLanguageService } from './language.service';
-import { LanguageSwitcherSize, LanguageSwitcherVariant } from './styles';
-import { sizeStyles, variantStyles } from '../timezone';
-
-/**
- * Language toggle button - ideal for switching between 2 languages.
- * Displays a globe icon with the current language code.
- *
- * @example
- * ```html
- * <button sc-language-toggle></button>
- * <button sc-language-toggle variant="outline" size="sm"></button>
- * ```
- */
-@Component({
-  selector: 'button[sc-language-toggle]',
-  host: {
-    'data-slot': 'language-toggle',
-    type: 'button',
-    '[class]': 'class()',
-    '[attr.aria-label]': 'ariaLabel()',
-    '(click)': 'toggle()',
-  },
-  template: `
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      class="size-5"
-      aria-hidden="true"
-    >
-      <circle cx="12" cy="12" r="10" />
-      <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
-      <path d="M2 12h20" />
-    </svg>
-    @if (!iconOnly()) {
-      <span class="text-xs font-semibold uppercase">
-        {{ currentLanguageCode() }}
-      </span>
-    }
-  `,
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScLanguageToggle {
-  private readonly languageService = inject(ScLanguageService);
-
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly variant = input<LanguageSwitcherVariant>('ghost');
-  readonly size = input<LanguageSwitcherSize>('default');
-  readonly iconOnly = input<boolean>(false);
-
-  protected readonly currentLanguageCode = computed(() =>
-    this.languageService.language(),
-  );
-  protected readonly currentLanguage = this.languageService.currentLanguage;
-  protected readonly languages = this.languageService.languages;
-
-  protected readonly class = computed(() =>
-    cn(
-      'inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md text-sm font-medium',
-      'ring-offset-background transition-colors',
-      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-      'disabled:pointer-events-none disabled:opacity-50',
-      '[&_svg]:pointer-events-none [&_svg]:shrink-0',
-      variantStyles[this.variant()],
-      sizeStyles[this.size()],
-      this.classInput(),
-    ),
-  );
-
-  protected readonly ariaLabel = computed(() => {
-    const current = this.currentLanguage();
-    const langs = this.languages();
-    if (langs.length === 2) {
-      const next = langs.find((lang) => lang.code !== current.code);
-      return `Switch language to ${next?.label ?? 'other language'}. Current language: ${current.label}`;
-    }
-    return `Current language: ${current.label}. Click to change language.`;
-  });
-
-  protected toggle(): void {
-    this.languageService.toggleLanguage();
-  }
-}

package/src/lib/components/language-switcher/language.service.ts

@@ -1,239 +0,0 @@
-import {
-  computed,
-  inject,
-  Injectable,
-  InjectionToken,
-  signal,
-} from '@angular/core';
-import { DOCUMENT } from '@angular/common';
-
-export interface Language {
-  code: string;
-  label: string;
-  nativeLabel: string;
-}
-
-export interface LanguageConfig {
-  languages: Language[];
-  defaultLanguage: string;
-  /** Base path for localized URLs (e.g., '/' for '/en/', '/fr/') */
-  basePath?: string;
-  /** Storage key for persisting language preference */
-  storageKey?: string;
-  /** Custom URL resolver for language switching */
-  urlResolver?: (language: string, currentUrl: string) => string;
-}
-
-export const SC_LANGUAGE_CONFIG = new InjectionToken<LanguageConfig>(
-  'SC_LANGUAGE_CONFIG',
-  {
-    providedIn: 'root',
-    factory: () => ({
-      languages: [
-        { code: 'en', label: 'English', nativeLabel: 'English' },
-        { code: 'fr', label: 'French', nativeLabel: 'Français' },
-      ],
-      defaultLanguage: 'en',
-      basePath: '/',
-      storageKey: 'sc-language',
-    }),
-  },
-);
-
-@Injectable({ providedIn: 'root' })
-export class ScLanguageService {
-  private readonly document = inject(DOCUMENT);
-  private readonly config = inject(SC_LANGUAGE_CONFIG);
-
-  private readonly storageKey = this.config.storageKey ?? 'sc-language';
-
-  /** All available languages */
-  readonly languages = signal<Language[]>(this.config.languages);
-
-  /** Current language code */
-  readonly language = signal<string>(this.detectCurrentLanguage());
-
-  /** Current language object */
-  readonly currentLanguage = computed(() => {
-    const code = this.language();
-    return (
-      this.languages().find((lang) => lang.code === code) ?? this.languages()[0]
-    );
-  });
-
-  /** Stored user preference (may differ from current if URL overrides) */
-  readonly preferredLanguage = signal<string>(this.getStoredLanguage());
-
-  /**
-   * Set the language and navigate to the localized URL.
-   * This will trigger a page refresh to load the correct locale bundle.
-   */
-  setLanguage(languageCode: string): void {
-    const language = this.languages().find(
-      (lang) => lang.code === languageCode,
-    );
-    if (!language) {
-      console.warn(`Language "${languageCode}" is not configured.`);
-      return;
-    }
-
-    // Store preference
-    this.storeLanguage(languageCode);
-    this.preferredLanguage.set(languageCode);
-
-    // Navigate to the localized URL (this will refresh the page)
-    const newUrl = this.resolveLanguageUrl(languageCode);
-    if (newUrl !== this.getCurrentUrl()) {
-      this.document.defaultView?.location.assign(newUrl);
-    }
-  }
-
-  /**
-   * Toggle between languages (useful for 2-language setups)
-   */
-  toggleLanguage(): void {
-    const langs = this.languages();
-    if (langs.length !== 2) {
-      console.warn(
-        'toggleLanguage() is designed for 2-language setups. Use setLanguage() instead.',
-      );
-      return;
-    }
-
-    const current = this.language();
-    const next = langs.find((lang) => lang.code !== current) ?? langs[0];
-    this.setLanguage(next.code);
-  }
-
-  /**
-   * Get the URL for a specific language
-   */
-  getLanguageUrl(languageCode: string): string {
-    return this.resolveLanguageUrl(languageCode);
-  }
-
-  private detectCurrentLanguage(): string {
-    // First, try to detect from URL path (e.g., /en/, /fr/)
-    const urlLanguage = this.detectLanguageFromUrl();
-    if (urlLanguage) {
-      return urlLanguage;
-    }
-
-    // Then, check stored preference
-    const stored = this.getStoredLanguage();
-    if (stored && this.languages().some((lang) => lang.code === stored)) {
-      return stored;
-    }
-
-    // Finally, try browser language
-    const browserLanguage = this.detectBrowserLanguage();
-    if (browserLanguage) {
-      return browserLanguage;
-    }
-
-    return this.config.defaultLanguage;
-  }
-
-  private detectLanguageFromUrl(): string | null {
-    if (typeof window === 'undefined') {
-      return null;
-    }
-
-    const pathname = window.location.pathname;
-    const basePath = this.config.basePath ?? '/';
-
-    // Extract language code from path (e.g., /en/page -> en, /fr/page -> fr)
-    const pathAfterBase = pathname.startsWith(basePath)
-      ? pathname.slice(basePath.length)
-      : pathname.slice(1);
-
-    const firstSegment = pathAfterBase.split('/')[0];
-    const language = this.languages().find(
-      (lang) => lang.code === firstSegment,
-    );
-
-    return language?.code ?? null;
-  }
-
-  private detectBrowserLanguage(): string | null {
-    if (typeof navigator === 'undefined') {
-      return null;
-    }
-
-    const browserLang = navigator.language.split('-')[0];
-    const language = this.languages().find((lang) => lang.code === browserLang);
-
-    return language?.code ?? null;
-  }
-
-  private getStoredLanguage(): string {
-    if (typeof localStorage === 'undefined') {
-      return this.config.defaultLanguage;
-    }
-
-    const stored = localStorage.getItem(this.storageKey);
-    if (stored && this.config.languages.some((lang) => lang.code === stored)) {
-      return stored;
-    }
-
-    return this.config.defaultLanguage;
-  }
-
-  private storeLanguage(languageCode: string): void {
-    if (typeof localStorage !== 'undefined') {
-      localStorage.setItem(this.storageKey, languageCode);
-    }
-  }
-
-  private resolveLanguageUrl(languageCode: string): string {
-    const currentUrl = this.getCurrentUrl();
-
-    // Use custom resolver if provided
-    if (this.config.urlResolver) {
-      return this.config.urlResolver(languageCode, currentUrl);
-    }
-
-    // Default: replace language segment in path
-    return this.defaultUrlResolver(languageCode, currentUrl);
-  }
-
-  private defaultUrlResolver(languageCode: string, currentUrl: string): string {
-    if (typeof window === 'undefined') {
-      return currentUrl;
-    }
-
-    const url = new URL(currentUrl, window.location.origin);
-    const basePath = this.config.basePath ?? '/';
-    const pathname = url.pathname;
-
-    // Check if current URL has a language prefix
-    const currentLangCode = this.detectLanguageFromUrl();
-
-    if (currentLangCode) {
-      // Replace existing language code
-      const regex = new RegExp(
-        `^(${basePath.replace(/\/$/, '')}/)${currentLangCode}(/|$)`,
-      );
-      url.pathname = pathname.replace(regex, `$1${languageCode}$2`);
-    } else {
-      // Add language code after base path
-      const pathWithoutBase = pathname.startsWith(basePath)
-        ? pathname.slice(basePath.length)
-        : pathname.slice(1);
-      url.pathname =
-        `${basePath.replace(/\/$/, '')}/${languageCode}/${pathWithoutBase}`.replace(
-          /\/+/g,
-          '/',
-        );
-    }
-
-    return url.toString();
-  }
-
-  private getCurrentUrl(): string {
-    if (typeof window === 'undefined') {
-      return '/';
-    }
-    return window.location.href;
-  }
-}

package/src/lib/components/language-switcher/styles.ts

@@ -1,16 +0,0 @@
-export type LanguageSwitcherVariant = 'default' | 'outline' | 'ghost';
-export type LanguageSwitcherSize = 'default' | 'sm' | 'lg' | 'icon';
-
-export const variantStyles: Record<LanguageSwitcherVariant, string> = {
-  default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-  outline:
-    'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-  ghost: 'hover:bg-accent hover:text-accent-foreground',
-};
-
-export const sizeStyles: Record<LanguageSwitcherSize, string> = {
-  default: 'h-10 px-4 py-2',
-  sm: 'h-9 rounded-md px-3',
-  lg: 'h-11 rounded-md px-8',
-  icon: 'size-10',
-};