@semantic-components/ui-lab 0.62.0 → 0.63.0

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

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

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

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

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

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

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

@@ -0,0 +1,32 @@
+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()),
+  );
+}