@kouji-ui/components 0.1.1

package/src/table/table-side-panel.ts

@@ -0,0 +1,263 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  DestroyRef,
+  ViewEncapsulation,
+  computed,
+  effect,
+  inject,
+  input,
+  model,
+  untracked,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import type { Column } from '@tanstack/angular-table';
+import {
+  DRAWER_DATA,
+  KJ_TABLE,
+  KjDrawer,
+  KjDrawerRef,
+  KjDrawerService,
+  KjTable,
+} from '@kouji-ui/core';
+
+/**
+ * Data injected into the side-panel content component via `DRAWER_DATA`.
+ * Carries the parent `KjTable` instance (the side-panel is opened by a service
+ * call so the content sees an injector that doesn't include the parent
+ * `<table>`'s `KJ_TABLE` provider — we relay it explicitly here) plus the
+ * header title resolved from the controller's `kjTitle` input.
+ */
+interface SidePanelData {
+  readonly table: KjTable<unknown>;
+  readonly title: string;
+}
+
+/**
+ * Content of the column tool panel. Rendered inside `<kj-drawer>` by the
+ * service-launched drawer. Receives the parent `KjTable` instance through
+ * {@link DRAWER_DATA} (rather than via the standard `KJ_TABLE` token) because
+ * the drawer's injector chain doesn't traverse the host component tree —
+ * see `KjDrawerService.open` which creates the overlay under the environment
+ * injector and re-provides only the drawer-scoped tokens.
+ *
+ * @internal
+ */
+@Component({
+  selector: 'kj-table-side-panel-content',
+  standalone: true,
+  imports: [KjDrawer],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <kj-drawer>
+      <header class="kj-drawer-header">
+        <h2 class="kj-drawer-title">{{ data.title }}</h2>
+      </header>
+      <div class="kj-drawer-body" data-padded data-scroll>
+        @for (col of leafColumns(); track col.id) {
+          <div
+            class="kj-table-side-panel-row"
+            [attr.aria-label]="'Column: ' + columnLabel(col)"
+          >
+            <label class="kj-table-side-panel-vis">
+              <input
+                type="checkbox"
+                [checked]="col.getIsVisible()"
+                (change)="onToggleVisible(col)"
+                [attr.aria-label]="'Show column ' + columnLabel(col)"
+              />
+              <span>{{ columnLabel(col) }}</span>
+            </label>
+            <div class="kj-table-side-panel-actions" role="group"
+                 [attr.aria-label]="'Pin and group ' + columnLabel(col)">
+              <button
+                type="button"
+                [attr.aria-pressed]="pinOf(col.id) === 'left'"
+                (click)="onPin(col.id, 'left')"
+                data-action="pin-left"
+              >Pin left</button>
+              <button
+                type="button"
+                [attr.aria-pressed]="pinOf(col.id) === false"
+                (click)="onPin(col.id, false)"
+                data-action="pin-none"
+              >Unpin</button>
+              <button
+                type="button"
+                [attr.aria-pressed]="pinOf(col.id) === 'right'"
+                (click)="onPin(col.id, 'right')"
+                data-action="pin-right"
+              >Pin right</button>
+              <button
+                type="button"
+                [attr.aria-pressed]="isGrouped(col.id)"
+                (click)="onToggleGroup(col.id)"
+                data-action="group"
+              >Group by</button>
+            </div>
+          </div>
+        }
+      </div>
+    </kj-drawer>
+  `,
+  styles: [`
+    @layer kj.component {
+      .kj-table-side-panel-row {
+        display: flex;
+        align-items: center;
+        gap: var(--kj-space-md);
+        padding: var(--kj-space-xs) 0;
+      }
+      .kj-table-side-panel-vis {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--kj-space-xs);
+        flex: 1;
+      }
+      .kj-table-side-panel-actions {
+        display: inline-flex;
+        gap: var(--kj-space-xs);
+      }
+      .kj-table-side-panel-actions button {
+        min-height: 44px;
+        min-width: 44px;
+        padding: var(--kj-space-xs) var(--kj-space-sm);
+      }
+    }
+  `],
+  host: {
+    '[attr.aria-label]': 'data.title',
+  },
+})
+export class KjTableSidePanelContent {
+  protected readonly data = inject<SidePanelData>(DRAWER_DATA);
+
+  /** All non-grouping leaf columns of the parent table. */
+  protected readonly leafColumns = computed(() => {
+    // Touch state signals so the computed re-runs when columns are hidden,
+    // pinned, or grouped (TanStack's `getAllLeafColumns()` returns a fresh
+    // view on each pass).
+    this.data.table.state.columnVisibility();
+    this.data.table.state.columnPinning();
+    this.data.table.state.grouping();
+    return this.data.table.table().getAllLeafColumns();
+  });
+
+  protected columnLabel(col: Column<unknown, unknown>): string {
+    const h = col.columnDef.header;
+    return typeof h === 'string' ? h : col.id;
+  }
+
+  protected pinOf(id: string): 'left' | 'right' | false {
+    const p = this.data.table.state.columnPinning();
+    if ((p.left ?? []).includes(id)) return 'left';
+    if ((p.right ?? []).includes(id)) return 'right';
+    return false;
+  }
+
+  protected isGrouped(id: string): boolean {
+    return this.data.table.state.grouping().includes(id);
+  }
+
+  protected onToggleVisible(col: Column<unknown, unknown>): void {
+    col.toggleVisibility();
+  }
+
+  protected onPin(id: string, side: 'left' | 'right' | false): void {
+    const current = this.data.table.state.columnPinning();
+    const left  = (current.left  ?? []).filter(c => c !== id);
+    const right = (current.right ?? []).filter(c => c !== id);
+    if (side === 'left')  left.push(id);
+    if (side === 'right') right.push(id);
+    this.data.table.setState({ columnPinning: { left, right } });
+  }
+
+  protected onToggleGroup(id: string): void {
+    const current = this.data.table.state.grouping();
+    const next = current.includes(id)
+      ? current.filter(c => c !== id)
+      : [...current, id];
+    this.data.table.setState({ grouping: next });
+  }
+}
+
+/**
+ * Column tool panel controller for `<kj-table>`. Two-way bound to
+ * `kjOpen`; opens / closes a service-launched `kj-drawer` whose content lists
+ * every leaf column with controls for visibility, pin position, and grouping.
+ * The controller itself renders nothing — the drawer is portaled into the
+ * shared overlay container so it gets focus trap, Escape handling, and
+ * backdrop semantics for free.
+ *
+ * @example
+ * ```html
+ * <kj-table [kjData]="rows" [kjColumns]="cols">
+ *   <kj-table-side-panel [(kjOpen)]="open" />
+ * </kj-table>
+ * ```
+ *
+ * @doc-category Components/Data
+ * @doc
+ * @doc-name table-side-panel
+ * @doc-description Service-launched drawer listing every column with visibility, pin, and group controls.
+ */
+@Component({
+  selector: 'kj-table-side-panel',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: { style: 'display: contents;' },
+  template: ``,
+})
+export class KjTableSidePanelComponent {
+  /** Whether the side panel is visible. Two-way bindable. */
+  readonly kjOpen = model(false);
+  /** Drawer header text. */
+  readonly kjTitle = input('Columns');
+
+  private readonly tbl = inject<KjTable<unknown>>(KJ_TABLE);
+  private readonly drawer = inject(KjDrawerService);
+  private readonly destroyRef = inject(DestroyRef);
+  private ref: KjDrawerRef<KjTableSidePanelContent> | null = null;
+
+  constructor() {
+    // Open / close the drawer in response to `kjOpen` changes. Untrack the
+    // title so re-typing it doesn't re-open the drawer; the title is read at
+    // open-time and projected into the content via `DRAWER_DATA`.
+    effect(() => {
+      const open = this.kjOpen();
+      // The drawer service registers its own root effect to react to overlay
+      // state — nesting effects throws NG0602. Wrap the side-effecting calls
+      // in `untracked` so opening/closing the drawer doesn't run inside our
+      // reactive context.
+      untracked(() => {
+        if (open && !this.ref) {
+          this.openDrawer();
+        } else if (!open && this.ref) {
+          this.ref.close();
+          this.ref = null;
+        }
+      });
+    });
+  }
+
+  private openDrawer(): void {
+    const data: SidePanelData = { table: this.tbl, title: this.kjTitle() };
+    const ref = this.drawer.open<KjTableSidePanelContent, unknown, SidePanelData>(
+      KjTableSidePanelContent,
+      { side: 'right', data },
+    );
+    this.ref = ref;
+    // Sync the two-way binding back when the drawer dismisses itself
+    // (Escape, backdrop click, or programmatic close from inside the panel).
+    ref.afterClosed$
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(() => {
+        if (this.ref === ref) {
+          this.ref = null;
+          if (this.kjOpen()) this.kjOpen.set(false);
+        }
+      });
+  }
+}

package/src/table/table-status-bar.spec.ts

@@ -0,0 +1,78 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { render } from '@testing-library/angular';
+import { describe, expect, it } from 'vitest';
+import { KjTable, kjColumn } from '@kouji-ui/core';
+import { KjTableStatusBarComponent } from './table-status-bar';
+
+interface Row {
+  id: string;
+  name: string;
+}
+
+@Component({
+  standalone: true,
+  imports: [KjTable, KjTableStatusBarComponent],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <table [kjTable]="cols" [kjTableData]="data()">
+      <kj-table-status-bar />
+    </table>
+  `,
+})
+class Host {
+  readonly cols = [kjColumn<Row>({ accessorKey: 'name', header: 'Name' })];
+  readonly data = signal<Row[]>([]);
+}
+
+describe('KjTableStatusBarComponent', () => {
+  it('renders "0 rows" when data is empty', async () => {
+    const { container } = await render(Host);
+    expect(container.textContent).toContain('0 rows');
+  });
+
+  it('renders "2 rows" with two data rows and no selection', async () => {
+    const { container, fixture } = await render(Host);
+    (fixture.componentInstance as Host).data.set([
+      { id: 'a', name: 'A' },
+      { id: 'b', name: 'B' },
+    ]);
+    fixture.detectChanges();
+    expect(container.textContent).toContain('2 rows');
+    expect(container.textContent).not.toContain('selected');
+    expect(container.textContent).not.toContain('Filtered');
+  });
+
+  it('renders "2 rows • 1 selected" when one row is selected', async () => {
+    const { container, fixture } = await render(Host);
+    (fixture.componentInstance as Host).data.set([
+      { id: 'a', name: 'A' },
+      { id: 'b', name: 'B' },
+    ]);
+    fixture.detectChanges();
+    const dir = fixture.debugElement.children[0].injector.get(KjTable);
+    dir.setState({ rowSelection: { '0': true } });
+    fixture.detectChanges();
+    expect(container.textContent).toContain('2 rows');
+    expect(container.textContent).toContain('1 selected');
+  });
+
+  it('renders "Filtered" when globalFilter is non-empty', async () => {
+    const { container, fixture } = await render(Host);
+    (fixture.componentInstance as Host).data.set([
+      { id: 'a', name: 'Alpha' },
+      { id: 'b', name: 'Beta' },
+    ]);
+    fixture.detectChanges();
+    const dir = fixture.debugElement.children[0].injector.get(KjTable);
+    dir.setState({ globalFilter: 'Alp' });
+    fixture.detectChanges();
+    expect(container.textContent).toContain('Filtered');
+  });
+
+  it('exposes role="status" and aria-live="polite"', async () => {
+    const { container } = await render(Host);
+    const status = container.querySelector('[role="status"]');
+    expect(status).toBeTruthy();
+    expect(status?.getAttribute('aria-live')).toBe('polite');
+  });
+});

package/src/table/table-status-bar.ts

@@ -0,0 +1,70 @@
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, inject } from '@angular/core';
+import { KJ_TABLE, KjTable } from '@kouji-ui/core';
+
+/**
+ * Tiny counts strip rendered at the bottom of a data table. Displays
+ * "N rows • X selected • Filtered" derived from the table instance state.
+ *
+ * Must be projected inside an element carrying `kjTable` so that the
+ * `KJ_TABLE` context token resolves.
+ *
+ * @example
+ * ```html
+ * <table [kjTable]="cols" [kjTableData]="rows">
+ *   <!-- ...rows... -->
+ *   <kj-table-status-bar />
+ * </table>
+ * ```
+ *
+ * @doc-category Components/Data
+ * @doc
+ * @doc-name table-status-bar
+ * @doc-description Counts strip showing row count, selected count, and filtered indicator.
+ */
+@Component({
+  selector: 'kj-table-status-bar',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="status-bar" role="status" aria-live="polite">
+      <span>{{ rowCount() }} {{ rowCount() === 1 ? 'row' : 'rows' }}</span>
+      @if (selectedCount() > 0) {
+        <span class="sep" aria-hidden="true">•</span>
+        <span>{{ selectedCount() }} selected</span>
+      }
+      @if (isFiltered()) {
+        <span class="sep" aria-hidden="true">•</span>
+        <span>Filtered</span>
+      }
+    </div>
+  `,
+  styles: [`
+    :host {
+      display: block;
+      font-family: var(--kj-font-sans);
+      font-size: var(--kj-text-xs);
+      color: var(--kj-fg-muted);
+    }
+    .status-bar {
+      display: flex;
+      align-items: center;
+      gap: var(--kj-base-space-xs);
+      padding: var(--kj-base-space-xs) var(--kj-base-space-md);
+    }
+    .sep { opacity: 0.6; }
+  `],
+  encapsulation: ViewEncapsulation.Emulated,
+})
+export class KjTableStatusBarComponent {
+  private readonly table = inject(KJ_TABLE) as unknown as KjTable<unknown>;
+
+  protected readonly rowCount = computed(() => this.table.table().getRowCount());
+
+  protected readonly selectedCount = computed(
+    () => Object.values(this.table.state.rowSelection()).filter(Boolean).length,
+  );
+
+  protected readonly isFiltered = computed(
+    () => this.table.state.globalFilter() !== '' || this.table.state.columnFilters().length > 0,
+  );
+}

package/src/table/table-toolbar.spec.ts

@@ -0,0 +1,180 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { ColumnDef } from '@tanstack/angular-table';
+import { describe, expect, test, beforeEach } from 'vitest';
+import { KjTable } from '@kouji-ui/core';
+import { KjTableToolbarComponent, KjBulkAction } from './table-toolbar';
+
+interface Row {
+  id: string;
+  name: string;
+  age: number;
+}
+
+const COLUMNS: ColumnDef<Row>[] = [
+  { accessorKey: 'id', header: 'ID' },
+  { accessorKey: 'name', header: 'Name' },
+  { accessorKey: 'age', header: 'Age' },
+];
+
+const DATA: Row[] = [
+  { id: '1', name: 'Alice', age: 30 },
+  { id: '2', name: 'Bob', age: 25 },
+];
+
+/**
+ * Host wires the headless `KjTable` directive on a real `<table>` so the
+ * toolbar can resolve `KJ_TABLE` via DI without depending on the (parallel)
+ * `<kj-table>` styled wrapper.
+ */
+@Component({
+  standalone: true,
+  imports: [KjTable, KjTableToolbarComponent, KjBulkAction],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <table [kjTable]="columns" [kjTableData]="data" #tbl="kjTable">
+      <thead></thead>
+      <tbody></tbody>
+      <caption>
+        <kj-table-toolbar>
+          <button kjBulkAction class="bulk-btn">Delete</button>
+        </kj-table-toolbar>
+      </caption>
+    </table>
+  `,
+})
+class HostComponent {
+  columns = COLUMNS;
+  data = DATA;
+}
+
+function getToolbarHost(rootEl: HTMLElement): HTMLElement {
+  const host = rootEl.querySelector('kj-table-toolbar') as HTMLElement | null;
+  if (!host) throw new Error('toolbar host element not found');
+  return host;
+}
+
+function getTableDir(fixture: { debugElement: { query: (cb: unknown) => unknown } }): KjTable<Row> {
+  // Walk to the <table> element and pull the directive instance.
+  const tableEl = (
+    fixture as unknown as { nativeElement: HTMLElement }
+  ).nativeElement.querySelector('table');
+  if (!tableEl) throw new Error('table not found');
+  // Use Angular's debugElement injector by searching for the table debug node.
+  const root = (
+    fixture as unknown as {
+      debugElement: {
+        children: { nativeElement: HTMLElement; injector: { get: <T>(t: unknown) => T } }[];
+      };
+    }
+  ).debugElement;
+  const node = root.children.find((c) => c.nativeElement === tableEl);
+  if (!node) throw new Error('table debug node not found');
+  return node.injector.get<KjTable<Row>>(KjTable);
+}
+
+describe('KjTableToolbarComponent', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({ imports: [HostComponent] });
+  });
+
+  test('renders host element with role="toolbar" and aria-label', () => {
+    const fixture = TestBed.createComponent(HostComponent);
+    fixture.detectChanges();
+    const host = getToolbarHost(fixture.nativeElement);
+    expect(host.getAttribute('role')).toBe('toolbar');
+    expect(host.getAttribute('aria-label')).toBe('Data table toolbar');
+  });
+
+  test('typing in the quick-filter input writes KjTable.globalFilter', () => {
+    const fixture = TestBed.createComponent(HostComponent);
+    fixture.detectChanges();
+    const dir = getTableDir(fixture);
+    const input = fixture.nativeElement.querySelector(
+      'kj-table-toolbar input[type="search"]',
+    ) as HTMLInputElement;
+    expect(input).toBeTruthy();
+
+    input.value = 'ali';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    fixture.detectChanges();
+
+    expect(dir.state.globalFilter()).toBe('ali');
+  });
+
+  test('clicking a density button updates KjTable.density', () => {
+    const fixture = TestBed.createComponent(HostComponent);
+    fixture.detectChanges();
+    const dir = getTableDir(fixture);
+
+    expect(dir.state.density()).toBe('standard');
+
+    const buttons = Array.from(
+      fixture.nativeElement.querySelectorAll('.kj-table-toolbar__density button'),
+    ) as HTMLButtonElement[];
+    // 3 segmented buttons: compact / standard / comfortable
+    expect(buttons.length).toBe(3);
+
+    buttons[0].click(); // compact
+    fixture.detectChanges();
+    expect(dir.state.density()).toBe('compact');
+
+    buttons[2].click(); // comfortable
+    fixture.detectChanges();
+    expect(dir.state.density()).toBe('comfortable');
+  });
+
+  test('column visibility menu lists every leaf column', () => {
+    const fixture = TestBed.createComponent(HostComponent);
+    fixture.detectChanges();
+
+    // The menu items are rendered eagerly into the DOM (they live inside
+    // kj-dropdown-menu-content, which mounts the panel lazily but the
+    // <kj-checkbox> labels are projected through the template). We probe via
+    // the projected label text on each checkbox.
+    const labels = Array.from(
+      fixture.nativeElement.querySelectorAll('kj-table-toolbar kj-checkbox .kj-checkbox-label'),
+    ) as HTMLElement[];
+
+    const text = labels.map((el) => el.textContent?.trim()).filter(Boolean);
+    expect(text).toEqual(expect.arrayContaining(['ID', 'Name', 'Age']));
+    expect(text.length).toBe(3);
+  });
+
+  test('bulk slot is hidden by default and appears when rowSelection has a true value', () => {
+    const fixture = TestBed.createComponent(HostComponent);
+    fixture.detectChanges();
+
+    // No selection → bulk slot wrapper should NOT exist.
+    expect(fixture.nativeElement.querySelector('.kj-table-toolbar__bulk')).toBeNull();
+
+    const dir = getTableDir(fixture);
+    dir.setState({ rowSelection: { '0': true } });
+    fixture.detectChanges();
+
+    const bulk = fixture.nativeElement.querySelector(
+      '.kj-table-toolbar__bulk',
+    ) as HTMLElement | null;
+    expect(bulk).not.toBeNull();
+    // Projected bulk button is rendered inside.
+    expect(bulk!.querySelector('.bulk-btn')).not.toBeNull();
+  });
+
+  test('hides bulk slot again when selection clears to all-false / empty', () => {
+    const fixture = TestBed.createComponent(HostComponent);
+    fixture.detectChanges();
+    const dir = getTableDir(fixture);
+
+    dir.setState({ rowSelection: { '0': true } });
+    fixture.detectChanges();
+    expect(fixture.nativeElement.querySelector('.kj-table-toolbar__bulk')).not.toBeNull();
+
+    dir.setState({ rowSelection: { '0': false } });
+    fixture.detectChanges();
+    expect(fixture.nativeElement.querySelector('.kj-table-toolbar__bulk')).toBeNull();
+
+    dir.setState({ rowSelection: {} });
+    fixture.detectChanges();
+    expect(fixture.nativeElement.querySelector('.kj-table-toolbar__bulk')).toBeNull();
+  });
+});