@semantic-components/ui-lab 0.63.0 → 0.65.0

package/src/lib/components/pagination/pagination-next.ts

@@ -1,78 +0,0 @@
-import {
-  booleanAttribute,
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  ElementRef,
-  inject,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { ScPagination } from './pagination';
-import { buttonVariants, ScButtonVariants } from '@semantic-components/ui';
-
-@Component({
-  selector: 'a[sc-pagination-next], button[sc-pagination-next]',
-  host: {
-    'data-slot': 'pagination-next',
-    '[class]': 'class()',
-    '[attr.aria-label]': '"Go to next page"',
-    '[attr.aria-disabled]': 'disabled() || null',
-    '[attr.tabindex]': 'disabled() ? -1 : null',
-    '[attr.href]': 'isAnchor() && !disabled() ? "#" : null',
-    '[attr.role]': 'isAnchor() && disabled() ? "link" : null',
-    '(click)': 'onClick($event)',
-  },
-  template: `
-    <ng-content />
-  `,
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScPaginationNext {
-  private readonly pagination = inject(ScPagination, { optional: true });
-  private readonly elementRef = inject(ElementRef<HTMLElement>);
-
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly disabledInput = input<boolean, unknown>(false, {
-    alias: 'disabled',
-    transform: booleanAttribute,
-  });
-
-  readonly variant = input<ScButtonVariants['variant']>('ghost');
-  readonly size = input<ScButtonVariants['size']>('default');
-
-  protected readonly disabled = computed(() => {
-    if (this.disabledInput()) return true;
-    if (this.pagination) {
-      return this.pagination.currentPage() === this.pagination.totalPages();
-    }
-    return false;
-  });
-
-  protected readonly isAnchor = computed(
-    () => this.elementRef.nativeElement.tagName === 'A',
-  );
-
-  protected readonly class = computed(() =>
-    cn(
-      'pr-1.5!',
-      buttonVariants({ variant: this.variant(), size: this.size() }),
-      this.classInput(),
-    ),
-  );
-
-  onClick(event: Event): void {
-    event.preventDefault();
-
-    if (this.disabled()) {
-      return;
-    }
-
-    if (this.pagination) {
-      const nextPage = this.pagination.currentPage() + 1;
-      this.pagination.goToPage(nextPage);
-    }
-  }
-}

package/src/lib/components/pagination/pagination-page-size-select.ts

@@ -1,44 +0,0 @@
-import { _IdGenerator } from '@angular/cdk/a11y';
-import { computed, Directive, inject, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { SC_FIELD } from '../field';
-import { ScPagination } from './pagination';
-
-@Directive({
-  selector: 'select[sc-pagination-page-size-select]',
-  host: {
-    'data-slot': 'pagination-page-size-select',
-    '[attr.id]': 'id()',
-    '[value]': 'pagination.pageSize()',
-    '[class]': 'class()',
-    '(change)': 'onPageSizeChange($event)',
-  },
-})
-export class ScPaginationPageSizeSelect {
-  protected readonly pagination = inject(ScPagination);
-  private readonly field = inject(SC_FIELD, { optional: true });
-  private readonly fallbackId = inject(_IdGenerator).getId(
-    'sc-pagination-page-size-select-',
-  );
-
-  readonly idInput = input('', { alias: 'id' });
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  readonly id = computed(
-    () => this.idInput() || this.field?.id() || this.fallbackId,
-  );
-
-  protected readonly class = computed(() =>
-    cn(
-      'h-8 rounded-md border border-input bg-background px-3 text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-      this.classInput(),
-    ),
-  );
-
-  protected onPageSizeChange(event: Event): void {
-    event.stopPropagation();
-    const select = event.target as HTMLSelectElement;
-    const newPageSize = parseInt(select.value, 10);
-    this.pagination.changePageSize(newPageSize);
-  }
-}

package/src/lib/components/pagination/pagination-previous.ts

@@ -1,78 +0,0 @@
-import {
-  booleanAttribute,
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  ElementRef,
-  inject,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { ScPagination } from './pagination';
-import { buttonVariants, ScButtonVariants } from '@semantic-components/ui';
-
-@Component({
-  selector: 'a[sc-pagination-previous], button[sc-pagination-previous]',
-  host: {
-    'data-slot': 'pagination-previous',
-    '[class]': 'class()',
-    '[attr.aria-label]': '"Go to previous page"',
-    '[attr.aria-disabled]': 'disabled() || null',
-    '[attr.tabindex]': 'disabled() ? -1 : null',
-    '[attr.href]': 'isAnchor() && !disabled() ? "#" : null',
-    '[attr.role]': 'isAnchor() && disabled() ? "link" : null',
-    '(click)': 'onClick($event)',
-  },
-  template: `
-    <ng-content />
-  `,
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScPaginationPrevious {
-  private readonly pagination = inject(ScPagination, { optional: true });
-  private readonly elementRef = inject(ElementRef<HTMLElement>);
-
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly disabledInput = input<boolean, unknown>(false, {
-    alias: 'disabled',
-    transform: booleanAttribute,
-  });
-
-  readonly variant = input<ScButtonVariants['variant']>('ghost');
-  readonly size = input<ScButtonVariants['size']>('default');
-
-  protected readonly disabled = computed(() => {
-    if (this.disabledInput()) return true;
-    if (this.pagination) {
-      return this.pagination.currentPage() === 1;
-    }
-    return false;
-  });
-
-  protected readonly isAnchor = computed(
-    () => this.elementRef.nativeElement.tagName === 'A',
-  );
-
-  protected readonly class = computed(() =>
-    cn(
-      'pl-1.5!',
-      buttonVariants({ variant: this.variant(), size: this.size() }),
-      this.classInput(),
-    ),
-  );
-
-  onClick(event: Event): void {
-    event.preventDefault();
-
-    if (this.disabled()) {
-      return;
-    }
-
-    if (this.pagination) {
-      const previousPage = this.pagination.currentPage() - 1;
-      this.pagination.goToPage(previousPage);
-    }
-  }
-}

package/src/lib/components/pagination/pagination.ts

@@ -1,190 +0,0 @@
-import {
-  computed,
-  Directive,
-  effect,
-  input,
-  output,
-  signal,
-  untracked,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-export type ScPaginationPage =
-  | { type: 'page'; value: number }
-  | { type: 'ellipsis'; value: string };
-
-export interface ScPaginationChange {
-  page: number;
-  pageSize: number;
-}
-
-@Directive({
-  selector: 'nav[sc-pagination]',
-  exportAs: 'scPagination',
-  host: {
-    'data-slot': 'pagination',
-    role: 'navigation',
-    '[attr.aria-label]': '"pagination"',
-    '[class]': 'class()',
-  },
-})
-export class ScPagination {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  // Smart pagination inputs
-  readonly currentPageInput = input<number>(1, { alias: 'currentPage' });
-  readonly pageSizeInput = input<number>(10, { alias: 'pageSize' });
-  readonly totalItems = input<number>(0);
-  readonly pageSizes = input<number[]>([10, 25, 50, 100]); // Available page size options
-
-  // Internal state
-  readonly currentPage = signal(1);
-  readonly pageSize = signal(10);
-
-  // Output events
-  readonly change = output<ScPaginationChange>();
-
-  constructor() {
-    // Sync inputs to internal state
-    effect(() => {
-      const inputPage = this.currentPageInput();
-      if (inputPage !== undefined) {
-        untracked(() => this.currentPage.set(inputPage));
-      }
-    });
-
-    effect(() => {
-      const inputSize = this.pageSizeInput();
-      if (inputSize !== undefined) {
-        untracked(() => this.pageSize.set(inputSize));
-      }
-    });
-  }
-
-  protected readonly class = computed(() =>
-    cn('mx-auto flex w-full justify-center', this.classInput()),
-  );
-
-  // Computed total pages
-  readonly totalPages = computed(() => {
-    const total = this.totalItems();
-    const size = this.pageSize();
-    return Math.ceil(total / size);
-  });
-
-  // Computed pages array for rendering
-  readonly pages = computed(() => {
-    const current = this.currentPage();
-    const total = this.totalPages();
-
-    return this.generatePageNumbers(current, total);
-  });
-
-  /**
-   * Trigger a page change. Called internally by child components.
-   * @param page The target page number
-   */
-  goToPage(page: number): void {
-    const total = this.totalPages();
-    if (page >= 1 && page <= total && page !== this.currentPage()) {
-      this.currentPage.set(page);
-      this.change.emit({ page, pageSize: this.pageSize() });
-    }
-  }
-
-  /**
-   * Change the page size. Called internally by ScPaginationPageSizeSelect.
-   * @param newPageSize The new page size
-   */
-  changePageSize(newPageSize: number): void {
-    if (newPageSize > 0 && newPageSize !== this.pageSize()) {
-      // Reset to page 1 when page size changes
-      this.currentPage.set(1);
-      this.pageSize.set(newPageSize);
-      this.change.emit({ page: 1, pageSize: newPageSize });
-    }
-  }
-
-  private generatePageNumbers(
-    currentPage: number,
-    totalPages: number,
-  ): ScPaginationPage[] {
-    const siblingCount = 1; // Number of pages to show on each side of current page
-    // If total pages is less than or equal to 7, show all pages
-    if (totalPages <= 7) {
-      return Array.from({ length: totalPages }, (_, i) => ({
-        type: 'page' as const,
-        value: i + 1,
-      }));
-    }
-
-    // For more than 7 pages, always return exactly 7 items
-    const pages: ScPaginationPage[] = [];
-
-    // Pattern: [1, ..., current-1, current, current+1, ..., last]
-    // Total: 7 items
-
-    // First page
-    pages.push({ type: 'page', value: 1 });
-
-    // Calculate the range around current page
-    const maxSiblings = siblingCount;
-    let start = Math.max(2, currentPage - maxSiblings);
-    let end = Math.min(totalPages - 1, currentPage + maxSiblings);
-
-    // Adjust to ensure we show the right number of pages
-    const totalMiddleSlots = 5; // Total slots minus first and last
-    const needLeftEllipsis = start > 2;
-    const needRightEllipsis = end < totalPages - 1;
-
-    // Calculate how many actual page slots we have (excluding ellipsis)
-    let pageSlots = totalMiddleSlots;
-    if (needLeftEllipsis) pageSlots--;
-    if (needRightEllipsis) pageSlots--;
-
-    // Adjust range to fit in available slots
-    if (!needLeftEllipsis && needRightEllipsis) {
-      // Near start: [1, 2, 3, 4, 5, ..., last]
-      end = Math.min(pageSlots + 1, totalPages - 1);
-    } else if (needLeftEllipsis && !needRightEllipsis) {
-      // Near end: [1, ..., n-4, n-3, n-2, n-1, n]
-      start = Math.max(2, totalPages - pageSlots);
-    } else if (needLeftEllipsis && needRightEllipsis) {
-      // Middle: [1, ..., current-1, current, current+1, ..., last]
-      const middlePages = pageSlots; // e.g., 3 pages in the middle
-      const halfPages = Math.floor(middlePages / 2);
-      start = currentPage - halfPages;
-      end = currentPage + (middlePages - halfPages - 1);
-
-      // Adjust if we're too close to edges
-      if (start < 2) {
-        start = 2;
-        end = start + middlePages - 1;
-      }
-      if (end > totalPages - 1) {
-        end = totalPages - 1;
-        start = end - middlePages + 1;
-      }
-    }
-
-    // Add left ellipsis if needed
-    if (start > 2) {
-      pages.push({ type: 'ellipsis', value: 'ellipsis-left' });
-    }
-
-    // Add middle pages
-    for (let i = start; i <= end; i++) {
-      pages.push({ type: 'page', value: i });
-    }
-
-    // Add right ellipsis if needed
-    if (end < totalPages - 1) {
-      pages.push({ type: 'ellipsis', value: 'ellipsis-right' });
-    }
-
-    // Last page
-    pages.push({ type: 'page', value: totalPages });
-
-    return pages;
-  }
-}

package/src/lib/components/password-field/README.md

@@ -1,247 +0,0 @@
-# Password Field
-
-A composable password input component with visibility toggle and optional strength indicator.
-
-## Architecture
-
-The Password Field component follows a composable pattern with multiple sub-components:
-
-- **ScPasswordField**: Root container that manages state and provides context
-- **ScPasswordFieldInputGroup**: Container for input and toggle button
-- **ScPasswordFieldInput**: The password input field
-- **ScPasswordFieldToggle**: Button to toggle password visibility
-
-## Basic Usage
-
-```html
-<div sc-password-field [(value)]="password">
-  <div sc-password-field-input-group>
-    <input sc-password-field-input placeholder="Enter password" />
-    <button sc-password-field-toggle></button>
-  </div>
-</div>
-```
-
-## Components
-
-### ScPasswordField
-
-Root container directive that manages the password state and visibility.
-
-**Selector:** `[sc-password-field]`
-
-**Inputs:**
-
-| Input           | Type      | Default | Description              |
-| --------------- | --------- | ------- | ------------------------ |
-| `disabled`      | `boolean` | `false` | Disabled state           |
-| `showByDefault` | `boolean` | `false` | Show password by default |
-
-**Two-way Bindings:**
-
-| Binding | Type     | Default | Description   |
-| ------- | -------- | ------- | ------------- |
-| `value` | `string` | `''`    | Current value |
-
-**Outputs:**
-
-| Output             | Type      | Description                     |
-| ------------------ | --------- | ------------------------------- |
-| `valueChange`      | `string`  | Emitted when value changes      |
-| `visibilityChange` | `boolean` | Emitted when visibility toggles |
-
-### ScPasswordFieldInputGroup
-
-Container for grouping the input field with the toggle button.
-
-**Selector:** `[sc-password-field-input-group]`
-
-**Inputs:**
-
-| Input   | Type     | Default | Description            |
-| ------- | -------- | ------- | ---------------------- |
-| `class` | `string` | `''`    | Additional CSS classes |
-
-### ScPasswordFieldInput
-
-The password input field.
-
-**Selector:** `input[sc-password-field-input]`
-
-**Features:**
-
-- Auto-switches between password/text type
-- Supports placeholder, autocomplete
-- Respects disabled/readonly states
-
-**Inputs:**
-
-| Input          | Type      | Default              | Description            |
-| -------------- | --------- | -------------------- | ---------------------- |
-| `placeholder`  | `string`  | `''`                 | Placeholder text       |
-| `readonly`     | `boolean` | `false`              | Readonly state         |
-| `autocomplete` | `string`  | `'current-password'` | Autocomplete attribute |
-| `class`        | `string`  | `''`                 | Additional CSS classes |
-
-### ScPasswordFieldToggle
-
-Button to toggle password visibility.
-
-**Selector:** `button[sc-password-field-toggle]`
-
-**Features:**
-
-- Auto-disables when field is disabled
-- Shows eye/eye-off icons
-- Custom icon support via content projection
-- Keyboard accessible
-
-**Inputs:**
-
-| Input   | Type     | Default | Description            |
-| ------- | -------- | ------- | ---------------------- |
-| `class` | `string` | `''`    | Additional CSS classes |
-
-## Examples
-
-### Basic
-
-```html
-<div sc-password-field [(value)]="password">
-  <div sc-password-field-input-group>
-    <input sc-password-field-input placeholder="Enter password" />
-    <button sc-password-field-toggle></button>
-  </div>
-</div>
-```
-
-### With Label
-
-```html
-<div class="space-y-2">
-  <label sc-label for="password">Password</label>
-  <div sc-password-field [(value)]="password">
-    <div sc-password-field-input-group>
-      <input sc-password-field-input id="password" placeholder="Enter password" />
-      <button sc-password-field-toggle></button>
-    </div>
-  </div>
-</div>
-```
-
-### Show by Default
-
-```html
-<div sc-password-field [(value)]="password" [showByDefault]="true">
-  <div sc-password-field-input-group>
-    <input sc-password-field-input placeholder="API Key" />
-    <button sc-password-field-toggle></button>
-  </div>
-</div>
-```
-
-### Disabled
-
-```html
-<div sc-password-field [value]="'********'" [disabled]="true">
-  <div sc-password-field-input-group>
-    <input sc-password-field-input />
-    <button sc-password-field-toggle></button>
-  </div>
-</div>
-```
-
-### New Password
-
-```html
-<div sc-password-field [(value)]="newPassword">
-  <div sc-password-field-input-group>
-    <input sc-password-field-input placeholder="New password" autocomplete="new-password" />
-    <button sc-password-field-toggle></button>
-  </div>
-</div>
-```
-
-### Custom Icons
-
-```html
-<div sc-password-field [(value)]="password">
-  <div sc-password-field-input-group>
-    <input sc-password-field-input />
-    <button sc-password-field-toggle>
-      <!-- Custom icon content -->
-      @if (visible()) {
-      <span>Hide</span>
-      } @else {
-      <span>Show</span>
-      }
-    </button>
-  </div>
-</div>
-```
-
-### With Description
-
-```html
-<div class="space-y-2">
-  <label sc-label>Password</label>
-  <div sc-password-field [(value)]="password">
-    <div sc-password-field-input-group>
-      <input sc-password-field-input />
-      <button sc-password-field-toggle></button>
-    </div>
-  </div>
-  <p class="text-sm text-muted-foreground">Must be at least 8 characters</p>
-</div>
-```
-
-## Features
-
-- **Visibility Toggle**: Show/hide password text
-- **Disabled State**: Full disabled support across all sub-components
-- **Autocomplete Support**: Proper autocomplete attributes
-- **Two-way Binding**: Sync with `[(value)]`
-- **Composable**: Mix and match sub-components as needed
-- **Accessible**: Proper ARIA labels and keyboard support
-
-## Accessibility
-
-- Proper `aria-label` on toggle button
-- `aria-pressed` state on toggle button
-- Labels properly associated with inputs
-- Disabled states properly communicated
-- Focus management within component
-- Screen reader friendly announcements
-
-## Styling
-
-All components accept a `class` input for custom styling. Default styles provide:
-
-- Consistent border and spacing
-- Focus states with ring
-- Hover states on toggle button
-- Disabled state opacity
-- Proper positioning for toggle button
-
-## Component Communication
-
-Components communicate through the `SC_PASSWORD_FIELD` injection token:
-
-```typescript
-export const SC_PASSWORD_FIELD = new InjectionToken<ScPasswordField>('SC_PASSWORD_FIELD');
-```
-
-Child components inject the parent context to access:
-
-- Current value
-- Visibility state
-- Disabled state
-- Toggle methods
-
-## Best Practices
-
-1. **Always provide a label** for accessibility
-2. **Use appropriate autocomplete** values (current-password, new-password)
-3. **Add password requirements** in description text
-4. **Consider password strength** indicators for new passwords
-5. **Test keyboard navigation** to ensure accessibility

package/src/lib/components/password-field/index.ts

@@ -1,7 +0,0 @@
-export * from './password-field';
-export * from './password-field-input-group';
-export * from './password-field-input';
-export * from './password-field-toggle';
-export * from './password-field-strength-bar';
-export * from './password-field-strength';
-export * from './password-field-requirements';

package/src/lib/components/password-field/password-field-input-group.ts

@@ -1,32 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { SC_PASSWORD_FIELD } from './password-field';
-
-@Component({
-  selector: '[sc-password-field-input-group]',
-  template: `
-    <ng-content />
-  `,
-  host: {
-    'data-slot': 'password-field-input-group',
-    '[class]': 'class()',
-    '[attr.data-disabled]': 'passwordField.disabled() || null',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScPasswordFieldInputGroup {
-  readonly passwordField = inject(SC_PASSWORD_FIELD);
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn('relative', 'data-[disabled]:opacity-50', this.classInput()),
-  );
-}