@semantic-components/ui-lab 0.62.0 → 0.63.0

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

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

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

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

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

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