@semantic-components/ui-lab 0.62.0 → 0.63.0

package/src/lib/components/data-table/data-table-pagination.ts

@@ -0,0 +1,152 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  model,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_DATA_TABLE } from './data-table';
+
+@Component({
+  selector: '[sc-data-table-pagination]',
+  template: `
+    <div class="flex items-center justify-between px-2">
+      <div class="text-sm text-muted-foreground">
+        @if (showSelection()) {
+          {{ table.rowSelection().size }} of
+          {{ table.sortedData().length }} row(s) selected.
+        } @else {
+          {{ table.sortedData().length }} row(s) total.
+        }
+      </div>
+      <div class="flex items-center space-x-6 lg:space-x-8">
+        <div class="flex items-center space-x-2">
+          <p class="text-sm font-medium">Rows per page</p>
+          <select
+            class="h-8 w-[70px] rounded-md border border-input bg-background text-sm"
+            [value]="pageSize()"
+            (change)="onPageSizeChange($event)"
+          >
+            @for (size of pageSizes(); track size) {
+              <option [value]="size">{{ size }}</option>
+            }
+          </select>
+        </div>
+        <div
+          class="flex w-[100px] items-center justify-center text-sm font-medium"
+        >
+          Page {{ currentPage() }} of {{ totalPages() }}
+        </div>
+        <div class="flex items-center space-x-2">
+          <button
+            type="button"
+            class="inline-flex size-8 items-center justify-center rounded-md border border-input bg-background hover:bg-accent disabled:opacity-50"
+            [disabled]="currentPage() === 1"
+            (click)="goToPage(1)"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              class="size-4"
+            >
+              <path d="m11 17-5-5 5-5" />
+              <path d="m18 17-5-5 5-5" />
+            </svg>
+          </button>
+          <button
+            type="button"
+            class="inline-flex size-8 items-center justify-center rounded-md border border-input bg-background hover:bg-accent disabled:opacity-50"
+            [disabled]="currentPage() === 1"
+            (click)="goToPage(currentPage() - 1)"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              class="size-4"
+            >
+              <path d="m15 18-6-6 6-6" />
+            </svg>
+          </button>
+          <button
+            type="button"
+            class="inline-flex size-8 items-center justify-center rounded-md border border-input bg-background hover:bg-accent disabled:opacity-50"
+            [disabled]="currentPage() === totalPages()"
+            (click)="goToPage(currentPage() + 1)"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              class="size-4"
+            >
+              <path d="m9 18 6-6-6-6" />
+            </svg>
+          </button>
+          <button
+            type="button"
+            class="inline-flex size-8 items-center justify-center rounded-md border border-input bg-background hover:bg-accent disabled:opacity-50"
+            [disabled]="currentPage() === totalPages()"
+            (click)="goToPage(totalPages())"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              class="size-4"
+            >
+              <path d="m6 17 5-5-5-5" />
+              <path d="m13 17 5-5-5-5" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  `,
+  host: {
+    'data-slot': 'data-table-pagination',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScDataTablePagination {
+  readonly table = inject(SC_DATA_TABLE);
+
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly pageSize = model<number>(10);
+  readonly currentPage = model<number>(1);
+  readonly pageSizes = input<number[]>([10, 20, 30, 40, 50]);
+  readonly showSelection = input<boolean>(true);
+
+  protected readonly class = computed(() => cn('py-4', this.classInput()));
+
+  readonly totalPages = computed(() => {
+    const total = this.table.sortedData().length;
+    const size = this.pageSize();
+    return Math.max(1, Math.ceil(total / size));
+  });
+
+  onPageSizeChange(event: Event): void {
+    const value = parseInt((event.target as HTMLSelectElement).value, 10);
+    this.pageSize.set(value);
+    this.currentPage.set(1);
+  }
+
+  goToPage(page: number): void {
+    const total = this.totalPages();
+    this.currentPage.set(Math.max(1, Math.min(page, total)));
+  }
+}

package/src/lib/components/data-table/data-table-row.ts

@@ -0,0 +1,23 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: '[sc-data-table-row]',
+  host: {
+    'data-slot': 'data-table-row',
+    '[class]': 'class()',
+    '[attr.data-selected]': 'selected() || null',
+  },
+})
+export class ScDataTableRow {
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly selected = input<boolean>(false);
+
+  protected readonly class = computed(() =>
+    cn(
+      'border-b transition-colors hover:bg-muted/50',
+      'data-[selected]:bg-muted',
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/components/data-table/data-table.ts

@@ -0,0 +1,181 @@
+import {
+  computed,
+  Directive,
+  InjectionToken,
+  input,
+  model,
+  output,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+export type SortDirection = 'asc' | 'desc' | null;
+
+export interface ColumnDef<T> {
+  id: string;
+  header: string;
+  accessorKey?: keyof T;
+  accessorFn?: (row: T) => unknown;
+  cell?: (row: T) => string;
+  enableSorting?: boolean;
+  enableHiding?: boolean;
+  sortingFn?: (a: T, b: T, direction: SortDirection) => number;
+}
+
+export interface SortingState {
+  id: string;
+  desc: boolean;
+}
+
+export interface ColumnVisibilityState {
+  [key: string]: boolean;
+}
+
+// Token for data table context
+export const SC_DATA_TABLE = new InjectionToken<ScDataTable<unknown>>(
+  'SC_DATA_TABLE',
+);
+
+@Directive({
+  selector: '[sc-data-table]',
+  exportAs: 'scDataTable',
+  providers: [{ provide: SC_DATA_TABLE, useExisting: ScDataTable }],
+  host: {
+    'data-slot': 'data-table',
+    '[class]': 'class()',
+  },
+})
+export class ScDataTable<T> {
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly data = input<T[]>([]);
+  readonly columns = input<ColumnDef<T>[]>([]);
+
+  readonly sorting = model<SortingState | null>(null);
+  readonly columnVisibility = model<ColumnVisibilityState>({});
+  readonly globalFilter = model<string>('');
+  readonly rowSelection = model<Set<number>>(new Set());
+
+  readonly sortChange = output<SortingState | null>();
+  readonly filterChange = output<string>();
+
+  protected readonly class = computed(() => cn('w-full', this.classInput()));
+
+  readonly visibleColumns = computed(() => {
+    const cols = this.columns();
+    const visibility = this.columnVisibility();
+    return cols.filter((col) => visibility[col.id] !== false);
+  });
+
+  readonly filteredData = computed(() => {
+    const data = this.data();
+    const filter = this.globalFilter().toLowerCase().trim();
+
+    if (!filter) return data;
+
+    return data.filter((row) => {
+      return this.columns().some((col) => {
+        const value = this.getCellValue(row, col);
+        return String(value).toLowerCase().includes(filter);
+      });
+    });
+  });
+
+  readonly sortedData = computed(() => {
+    const data = [...this.filteredData()];
+    const sort = this.sorting();
+
+    if (!sort) return data;
+
+    const column = this.columns().find((col) => col.id === sort.id);
+    if (!column) return data;
+
+    return data.sort((a, b) => {
+      if (column.sortingFn) {
+        return column.sortingFn(a, b, sort.desc ? 'desc' : 'asc');
+      }
+
+      const aVal = this.getCellValue(a, column);
+      const bVal = this.getCellValue(b, column);
+
+      if (aVal === bVal) return 0;
+      if (aVal === null || aVal === undefined) return 1;
+      if (bVal === null || bVal === undefined) return -1;
+
+      const comparison = aVal < bVal ? -1 : 1;
+      return sort.desc ? -comparison : comparison;
+    });
+  });
+
+  getCellValue(row: T, column: ColumnDef<T>): unknown {
+    if (column.accessorFn) {
+      return column.accessorFn(row);
+    }
+    if (column.accessorKey) {
+      return row[column.accessorKey];
+    }
+    return '';
+  }
+
+  toggleSort(columnId: string): void {
+    const column = this.columns().find((col) => col.id === columnId);
+    if (!column || column.enableSorting === false) return;
+
+    const currentSort = this.sorting();
+
+    if (!currentSort || currentSort.id !== columnId) {
+      this.sorting.set({ id: columnId, desc: false });
+    } else if (!currentSort.desc) {
+      this.sorting.set({ id: columnId, desc: true });
+    } else {
+      this.sorting.set(null);
+    }
+
+    this.sortChange.emit(this.sorting());
+  }
+
+  toggleColumnVisibility(columnId: string): void {
+    const current = this.columnVisibility();
+    const isVisible = current[columnId] !== false;
+    this.columnVisibility.set({ ...current, [columnId]: !isVisible });
+  }
+
+  setColumnVisibility(columnId: string, visible: boolean): void {
+    const current = this.columnVisibility();
+    this.columnVisibility.set({ ...current, [columnId]: visible });
+  }
+
+  toggleRowSelection(index: number): void {
+    const selection = new Set(this.rowSelection());
+    if (selection.has(index)) {
+      selection.delete(index);
+    } else {
+      selection.add(index);
+    }
+    this.rowSelection.set(selection);
+  }
+
+  toggleAllRowSelection(): void {
+    const data = this.sortedData();
+    const selection = this.rowSelection();
+
+    if (selection.size === data.length) {
+      this.rowSelection.set(new Set());
+    } else {
+      this.rowSelection.set(new Set(data.map((_, i) => i)));
+    }
+  }
+
+  isRowSelected(index: number): boolean {
+    return this.rowSelection().has(index);
+  }
+
+  isAllRowsSelected(): boolean {
+    const data = this.sortedData();
+    return data.length > 0 && this.rowSelection().size === data.length;
+  }
+
+  isSomeRowsSelected(): boolean {
+    const selection = this.rowSelection();
+    const data = this.sortedData();
+    return selection.size > 0 && selection.size < data.length;
+  }
+}

package/src/lib/components/data-table/index.ts

@@ -0,0 +1,15 @@
+export { SC_DATA_TABLE, ScDataTable } from './data-table';
+export type {
+  SortDirection,
+  ColumnDef,
+  SortingState,
+  ColumnVisibilityState,
+} from './data-table';
+export { ScDataTableHeader } from './data-table-header';
+export { ScDataTableBody } from './data-table-body';
+export { ScDataTableRow } from './data-table-row';
+export { ScDataTableHead } from './data-table-head';
+export { ScDataTableCell } from './data-table-cell';
+export { ScDataTableFilter } from './data-table-filter';
+export { ScDataTableColumnToggle } from './data-table-column-toggle';
+export { ScDataTablePagination } from './data-table-pagination';

package/src/lib/components/date-picker/README.md

@@ -0,0 +1,101 @@
+# Date Picker
+
+A date picker component with calendar popup for selecting dates.
+
+## Usage
+
+```html
+<sc-date-picker [(selected)]="date" />
+```
+
+## Component
+
+### ScDatePicker
+
+Date picker combining a trigger button with a calendar popover.
+
+**Selector:** `sc-date-picker`
+
+**Inputs:**
+
+| Input         | Type                               | Default         | Description               |
+| ------------- | ---------------------------------- | --------------- | ------------------------- |
+| `mode`        | `'single' \| 'multiple'\| 'range'` | `'single'`      | Selection mode            |
+| `placeholder` | `string`                           | `'Pick a date'` | Placeholder text          |
+| `disabled`    | `Date[]`                           | `[]`            | Array of dates to disable |
+| `minDate`     | `Date \| undefined`                | `undefined`     | Minimum selectable date   |
+| `maxDate`     | `Date \| undefined`                | `undefined`     | Maximum selectable date   |
+| `side`        | `PopoverSide`                      | `'bottom'`      | Popover position side     |
+| `align`       | `PopoverAlign`                     | `'start'`       | Popover alignment         |
+| `class`       | `string`                           | `''`            | Additional CSS classes    |
+
+**Two-way Bindings:**
+
+| Binding         | Type                | Description                    |
+| --------------- | ------------------- | ------------------------------ |
+| `selected`      | `Date \| undefined` | Selected date (single mode)    |
+| `selectedDates` | `Date[]`            | Selected dates (multiple mode) |
+| `selectedRange` | `DateRange`         | Selected range (range mode)    |
+| `open`          | `boolean`           | Popover open state             |
+
+## Examples
+
+### Default
+
+```html
+<sc-date-picker [(selected)]="date" />
+```
+
+### With Custom Placeholder
+
+```html
+<sc-date-picker [(selected)]="date" placeholder="Select your birthday" />
+```
+
+### Date Range Picker
+
+```html
+<sc-date-picker mode="range" [(selectedRange)]="range" placeholder="Pick a date range" />
+```
+
+### Multiple Dates
+
+```html
+<sc-date-picker mode="multiple" [(selectedDates)]="dates" placeholder="Select dates" />
+```
+
+### With Date Constraints
+
+```typescript
+minDate = new Date(); // Today
+maxDate = new Date(Date.now() + 30 * 24 * 60 * 60 * 1000); // 30 days from now
+```
+
+```html
+<sc-date-picker [(selected)]="date" [minDate]="minDate" [maxDate]="maxDate" />
+```
+
+### Form Example
+
+```html
+<div class="space-y-2">
+  <label class="text-sm font-medium">Date of Birth</label>
+  <sc-date-picker [(selected)]="dob" placeholder="Select date of birth" [maxDate]="today" />
+</div>
+```
+
+## Features
+
+- **Popover Integration**: Uses the Popover component for dropdown
+- **Calendar Integration**: Uses the Calendar component for date selection
+- **Auto-close**: Closes on date selection (single/range complete)
+- **Display Format**: Shows selected date(s) in the trigger button
+- **Selection Modes**: Single, multiple, and range selection
+- **Date Constraints**: Min/max dates and disabled dates
+
+## Accessibility
+
+- Inherits accessibility features from Popover and Calendar
+- Keyboard navigation within calendar
+- Focus management between trigger and calendar
+- `aria-haspopup` and `aria-expanded` on trigger button

package/src/lib/components/date-picker/date-picker.ts

@@ -0,0 +1,175 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  model,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import {
+  ScPopoverProvider,
+  ScPopoverPortal,
+  ScPopover,
+  ScPopoverTrigger,
+  PopoverAlign,
+  PopoverSide,
+} from '../popover';
+import { ScCalendar, CalendarMode, DateRange } from '../calendar';
+
+@Component({
+  selector: 'sc-date-picker',
+  imports: [
+    ScPopoverProvider,
+    ScPopoverTrigger,
+    ScPopoverPortal,
+    ScPopover,
+    ScCalendar,
+  ],
+  template: `
+    <div sc-popover-provider [(open)]="open" [side]="side()" [align]="align()">
+      <button sc-popover-trigger type="button" [class]="triggerClass()">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="mr-2 size-4"
+        >
+          <path d="M8 2v4" />
+          <path d="M16 2v4" />
+          <rect width="18" height="18" x="3" y="4" rx="2" />
+          <path d="M3 10h18" />
+        </svg>
+        <span [class]="displayText() ? '' : 'text-muted-foreground'">
+          {{ displayText() || placeholder() }}
+        </span>
+      </button>
+      <div sc-popover-portal>
+        <div sc-popover class="w-auto p-0">
+          @switch (mode()) {
+            @case ('single') {
+              <sc-calendar
+                mode="single"
+                [(selected)]="selected"
+                [disabled]="disabled()"
+                [minDate]="minDate()"
+                [maxDate]="maxDate()"
+                (selected)="onDateSelected()"
+              />
+            }
+            @case ('multiple') {
+              <sc-calendar
+                mode="multiple"
+                [(selectedDates)]="selectedDates"
+                [disabled]="disabled()"
+                [minDate]="minDate()"
+                [maxDate]="maxDate()"
+              />
+            }
+            @case ('range') {
+              <sc-calendar
+                mode="range"
+                [(selectedRange)]="selectedRange"
+                [disabled]="disabled()"
+                [minDate]="minDate()"
+                [maxDate]="maxDate()"
+                (selectedRange)="onRangeSelected()"
+              />
+            }
+          }
+        </div>
+      </div>
+    </div>
+  `,
+  host: {
+    'data-slot': 'date-picker',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScDatePicker {
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly mode = input<CalendarMode>('single');
+  readonly placeholder = input<string>('Pick a date');
+  readonly disabled = input<Date[]>([]);
+  readonly minDate = input<Date | undefined>(undefined);
+  readonly maxDate = input<Date | undefined>(undefined);
+  readonly side = input<PopoverSide>('bottom');
+  readonly align = input<PopoverAlign>('start');
+
+  // For single mode
+  readonly selected = model<Date | undefined>(undefined);
+  // For multiple mode
+  readonly selectedDates = model<Date[]>([]);
+  // For range mode
+  readonly selectedRange = model<DateRange>({ from: undefined, to: undefined });
+
+  readonly open = model<boolean>(false);
+
+  protected readonly class = computed(() => cn('', this.classInput()));
+
+  protected readonly triggerClass = computed(() =>
+    cn(
+      'flex h-10 w-[280px] items-center justify-start rounded-md border border-input bg-background px-3 py-2 text-sm',
+      'ring-offset-background placeholder:text-muted-foreground',
+      'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+      'disabled:cursor-not-allowed disabled:opacity-50',
+      '[&>span]:line-clamp-1',
+    ),
+  );
+
+  protected readonly displayText = computed(() => {
+    const mode = this.mode();
+
+    if (mode === 'single') {
+      const date = this.selected();
+      return date ? this.formatDate(date) : '';
+    }
+
+    if (mode === 'multiple') {
+      const dates = this.selectedDates();
+      if (dates.length === 0) return '';
+      if (dates.length === 1) return this.formatDate(dates[0]);
+      return `${dates.length} dates selected`;
+    }
+
+    if (mode === 'range') {
+      const range = this.selectedRange();
+      if (!range.from) return '';
+      if (!range.to) return this.formatDate(range.from);
+      return `${this.formatDate(range.from)} - ${this.formatDate(range.to)}`;
+    }
+
+    return '';
+  });
+
+  private formatDate(date: Date): string {
+    return date.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    });
+  }
+
+  protected onDateSelected(): void {
+    // Close popover after single date selection
+    if (this.mode() === 'single' && this.selected()) {
+      this.open.set(false);
+    }
+  }
+
+  protected onRangeSelected(): void {
+    // Close popover after range is complete
+    const range = this.selectedRange();
+    if (range.from && range.to) {
+      this.open.set(false);
+    }
+  }
+}

package/src/lib/components/date-picker/index.ts

@@ -0,0 +1 @@
+export * from './date-picker';