@kouji-ui/components 0.1.1 → 0.1.2

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

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

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

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

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