@kouji-ui/components 0.1.1

package/src/table/_examples/table.virtualized.example.ts

@@ -0,0 +1,122 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  inject,
+  signal,
+} from '@angular/core';
+import { kjColumn } from '@kouji-ui/core';
+import { KjTableComponent } from '../table';
+import { KjButtonComponent } from '../../button/button';
+
+interface Row {
+  readonly id: string;
+  readonly name: string;
+  readonly score: number;
+  readonly city: string;
+}
+
+const CITIES = ['Paris', 'Tokyo', 'Lagos', 'Lima', 'Oslo', 'Cairo'];
+
+function makeRows(n: number): Row[] {
+  const out = new Array<Row>(n);
+  for (let i = 0; i < n; i++) {
+    out[i] = {
+      id: String(i),
+      name: `User ${i}`,
+      score: (i * 37) % 1000,
+      city: CITIES[i % CITIES.length]!,
+    };
+  }
+  return out;
+}
+
+/**
+ * 10,000 rows force-virtualized via `[kjVirtual]="true"` with a 32px row
+ * estimate. Only the visible window is rendered; scroll position drives the
+ * virtualizer. The "scroll to row 5000" button demonstrates programmatic jump
+ * by computing offset = rowIndex × estimatedSize.
+ */
+@Component({
+  selector: 'kj-table-virtualized-example',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [KjTableComponent, KjButtonComponent],
+  styles: [`
+    :host {
+      /* Container-driven sizing: we own the box that the kj-table fills.
+         Width is explicit so the table doesn't collapse to its 0-width
+         content (the virtualizer hides rows until it has a viewport rect,
+         and an unwidthed flex column has 0-width children — chicken/egg). */
+      display: block;
+      width: 100%;
+      font-family: var(--kj-font-sans);
+      color: var(--kj-fg-default);
+    }
+    .toolbar {
+      display: flex;
+      gap: var(--kj-space-md);
+      align-items: center;
+      margin-bottom: var(--kj-space-md);
+      font-size: var(--kj-text-sm);
+      color: var(--kj-fg-muted);
+    }
+    /* Sized box the table fills. The body scrolls inside this 400px height
+       and the virtualizer's ResizeObserver gets a non-zero viewport from
+       the start. */
+    .kj-virt-frame {
+      display: flex;
+      flex-direction: column;
+      height: 400px;
+      min-width: 0;
+      border: 1px solid var(--kj-border-default);
+      border-radius: var(--kj-radius-field);
+      background: var(--kj-bg-surface);
+      overflow: hidden;
+    }
+    .kj-virt-frame kj-table {
+      flex: 1 1 auto;
+      min-height: 0;
+    }
+  `],
+  template: `
+    <div class="toolbar">
+      <kj-button kjVariant="outline" kjSize="sm" (click)="scrollToRow(5000)">
+        Scroll to row 5000
+      </kj-button>
+      <span>Total: {{ data().length }} rows</span>
+    </div>
+    <div class="kj-virt-frame">
+      <kj-table
+        [kjData]="data()"
+        [kjColumns]="cols"
+        [kjVirtual]="true"
+        [kjEstimatedRowSize]="rowSize"
+      />
+    </div>
+  `,
+})
+export class KjTableVirtualizedExample {
+  private readonly host: ElementRef<HTMLElement> = inject(ElementRef);
+
+  protected readonly rowSize = 32;
+  protected readonly data = signal<Row[]>(makeRows(10_000));
+
+  protected readonly cols = [
+    kjColumn<Row>({ accessorKey: 'id',    header: 'ID'    }),
+    kjColumn<Row>({ accessorKey: 'name',  header: 'Name'  }),
+    kjColumn<Row>({ accessorKey: 'score', header: 'Score' }),
+    kjColumn<Row>({ accessorKey: 'city',  header: 'City'  }),
+  ];
+
+  protected scrollToRow(index: number): void {
+    // The scroll viewport is the table's own body — that's what the
+    // virtualizer attaches to (it walks up from `<tbody>` to find the
+    // wrapper's `.kj-table-body`).
+    const scroller = this.host.nativeElement.querySelector<HTMLElement>(
+      'kj-table .kj-table-body',
+    );
+    if (!scroller) return;
+    scroller.scrollTop = index * this.rowSize;
+  }
+}

package/src/table/index.ts

@@ -0,0 +1,11 @@
+export * from './table';
+export * from './table-toolbar';
+export * from './table-pagination';
+export * from './table-side-panel';
+export * from './table-status-bar';
+export * from './table-export';
+export * from './table-virtual';
+export * from './table-editors';
+export * from './table-filters';
+export * from './table-cell-editor-outlet';
+export * from './table-filter-outlet';

package/src/table/table-cell-editor-outlet.ts

@@ -0,0 +1,111 @@
+import {
+  DestroyRef,
+  Directive,
+  EnvironmentInjector,
+  Injector,
+  Type,
+  ViewContainerRef,
+  effect,
+  inject,
+  input,
+  output,
+  untracked,
+  type ComponentRef,
+} from '@angular/core';
+import { KJ_EDITOR_CONTRACT, type KjEditorContract } from './table-editors';
+
+/**
+ * Structural outlet that mounts a cell editor component into its own
+ * `ViewContainerRef`. Replaces the old anchor-`<span>` + `querySelectorAll`
+ * sync loop: Angular's view lifecycle now owns mount and tear-down, so when
+ * the host `@if` removes the directive the editor is destroyed automatically.
+ *
+ * Place inside the cell's edit branch:
+ *
+ * ```html
+ * @if (isEditing(c)) {
+ *   <ng-container
+ *     kjCellEditorOutlet
+ *     [kjEditor]="editorTypeFor(c)"
+ *     [kjValue]="c.getValue()"
+ *     (commit)="onEditCommit(c, $event)"
+ *     (cancel)="onEditCancel()"
+ *   />
+ * }
+ * ```
+ *
+ * The directive wires `KJ_EDITOR_CONTRACT` so each editor sees the same
+ * `{ value, commit, cancel }` shape it does today — no editor changes needed.
+ */
+@Directive({
+  selector: '[kjCellEditorOutlet]',
+  standalone: true,
+})
+export class KjCellEditorOutlet {
+  /** Editor component class to mount. `null` mounts nothing. */
+  readonly kjEditor = input<Type<unknown> | null>(null);
+
+  /** Initial value seeded into the editor's `KJ_EDITOR_CONTRACT`. */
+  readonly kjValue = input<unknown>(undefined);
+
+  /** Extra column meta forwarded to the editor through the contract —
+   *  used to hand off things like select options without binding inputs
+   *  on a dynamically-created component. */
+  readonly kjMeta = input<Record<string, unknown> | undefined>(undefined);
+
+  /** Fired when the editor calls `contract.commit(next)`. */
+  readonly commit = output<unknown>();
+
+  /** Fired when the editor calls `contract.cancel()`. */
+  readonly editCancel = output<void>();
+
+  private readonly vcr = inject(ViewContainerRef);
+  private readonly envInjector = inject(EnvironmentInjector);
+  private readonly parentInjector = inject(Injector);
+  private readonly destroyRef = inject(DestroyRef);
+
+  private ref: ComponentRef<unknown> | null = null;
+
+  constructor() {
+    // Re-mount whenever the editor type changes. The initial value is
+    // captured non-reactively — we don't want every keystroke in the editor
+    // to re-seed it. Commit/cancel callbacks read the latest outputs at
+    // emit time, so they always wire through to the live component instance.
+    effect(() => {
+      const editor = this.kjEditor();
+      this.tearDown();
+      if (!editor) return;
+
+      const initialValue = untracked(() => this.kjValue());
+      const meta = untracked(() => this.kjMeta());
+      const contract: KjEditorContract<unknown> = {
+        value: initialValue,
+        commit: (next: unknown) => this.commit.emit(next),
+        cancel: () => this.editCancel.emit(),
+        meta,
+      };
+      const childInjector = Injector.create({
+        providers: [{ provide: KJ_EDITOR_CONTRACT, useValue: contract }],
+        parent: this.parentInjector,
+      });
+      this.ref = this.vcr.createComponent(editor, {
+        environmentInjector: this.envInjector,
+        injector: childInjector,
+      });
+      // Force the editor's view to materialize NOW so its child
+      // components (and their constructors — KjSelectTrigger registers
+      // itself with KjSelect at construction time) run synchronously.
+      // Without this, an effect-based focus call could fire before the
+      // trigger directive existed.
+      this.ref.changeDetectorRef.detectChanges();
+    });
+
+    this.destroyRef.onDestroy(() => this.tearDown());
+  }
+
+  private tearDown(): void {
+    this.ref?.destroy();
+    this.ref = null;
+    this.vcr.clear();
+  }
+}

package/src/table/table-editors/boolean-editor.ts

@@ -0,0 +1,71 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  ViewEncapsulation,
+  afterNextRender,
+  inject,
+  signal,
+} from '@angular/core';
+import { KjToggleComponent } from '../../toggle/toggle';
+import { KJ_EDITOR_CONTRACT, type KjEditorContract } from './index';
+
+/**
+ * Inline boolean cell editor for `<kj-table>`. Renders the styled
+ * `<kj-toggle>` component (a real `<button role="switch">` with theme
+ * tokens) so cell editors stay consistent with the rest of the design
+ * system.
+ *
+ * Each toggle commits the new draft immediately. Escape cancels.
+ */
+@Component({
+  selector: 'kj-boolean-editor',
+  standalone: true,
+  imports: [KjToggleComponent],
+  template: `
+    <kj-toggle
+      class="kj-editor kj-editor--boolean"
+      appearance="switch"
+      [(pressed)]="draft"
+      (click)="ctx.commit(draft())"
+      (keydown.enter)="toggleAndCommit(); $event.preventDefault()"
+      (keydown.space)="toggleAndCommit(); $event.preventDefault()"
+      (keydown.escape)="cancel(); $event.stopPropagation()"
+    >
+      {{ draft() ? 'On' : 'Off' }}
+    </kj-toggle>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  host: { style: 'display: contents;' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjBooleanEditor {
+  protected readonly ctx = inject(KJ_EDITOR_CONTRACT) as KjEditorContract<boolean>;
+  private readonly hostEl: ElementRef<HTMLElement> = inject(ElementRef);
+
+  protected readonly draft = signal<boolean>(false);
+
+  constructor() {
+    this.draft.set(!!this.ctx.value);
+    afterNextRender(() => {
+      const btn = this.hostEl.nativeElement.querySelector<HTMLButtonElement>('button');
+      btn?.focus();
+    });
+  }
+
+  protected cancel(): void {
+    this.ctx.cancel();
+  }
+
+  /**
+   * Flip the draft and commit. The `[(pressed)]` two-way binding into the
+   * kj-toggle handles updating its visual state — and the toggle's own
+   * `pressedChange` will also fire commit, but `ctx.commit` is idempotent
+   * from the host's perspective so a single user action -> single commit.
+   */
+  protected toggleAndCommit(): void {
+    const next = !this.draft();
+    this.draft.set(next);
+    this.ctx.commit(next);
+  }
+}

package/src/table/table-editors/date-editor.ts

@@ -0,0 +1,117 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  ViewEncapsulation,
+  afterNextRender,
+  inject,
+  signal,
+} from '@angular/core';
+import { KjDatePickerComponent } from '../../date-picker/date-picker';
+import { KJ_EDITOR_CONTRACT, type KjEditorContract } from './index';
+
+/**
+ * Inline date cell editor for `<kj-table>`. Renders the styled
+ * `<kj-date-picker>` component (a typed input plus a popover calendar)
+ * so cell editors stay consistent with the rest of the design system.
+ *
+ * The contract uses real `Date | null`. We bind to a draft signal that
+ * mirrors the picker's `kjValue` model. Commits on Enter; cancels on
+ * Escape. Blur is intentionally NOT wired here — the styled picker's
+ * trigger directive emits `focusout` events during mount (the calendar
+ * popover and the calendar input swap focus internally) so a blur
+ * listener would fire prematurely. The host (table cell) can use
+ * the contract's external lifecycle to handle commit-on-cell-blur.
+ */
+@Component({
+  selector: 'kj-date-editor',
+  standalone: true,
+  imports: [KjDatePickerComponent],
+  template: `
+    <kj-date-picker
+      class="kj-editor kj-editor--date"
+      kjLocale="sv-SE"
+      [(kjValue)]="draft"
+      (keydown)="onKeydown($event)"
+    />
+  `,
+  encapsulation: ViewEncapsulation.None,
+  host: { style: 'display: contents;' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjDateEditor {
+  private readonly ctx = inject(KJ_EDITOR_CONTRACT) as KjEditorContract<Date | null>;
+  private readonly hostEl: ElementRef<HTMLElement> = inject(ElementRef);
+  private settled = false;
+
+  protected readonly draft = signal<Date | null>(null);
+
+  constructor() {
+    const v = this.ctx.value;
+    this.draft.set(v instanceof Date && !Number.isNaN(v.getTime()) ? v : null);
+    afterNextRender(() => {
+      const input = this.hostEl.nativeElement.querySelector<HTMLInputElement>('input');
+      input?.focus();
+    });
+  }
+
+  protected commit(): void {
+    if (this.settled) return;
+    // Parse the input's typed text directly — at the moment Enter fires the
+    // styled date-picker has already pushed the parsed Date into its kjValue
+    // model via the trigger directive, but signal-propagation timing across
+    // the two-way binding chain (root context -> wrapper -> draft) is not
+    // guaranteed to be flushed before our handler runs. Reading the input
+    // element gives us a deterministic source of truth.
+    const input = this.hostEl.nativeElement.querySelector<HTMLInputElement>('input');
+    const raw = (input?.value ?? '').trim();
+    if (raw === '') {
+      this.settled = true;
+      this.ctx.commit(null);
+      return;
+    }
+    const parsed = parseIsoLike(raw) ?? this.draft();
+    if (!parsed || Number.isNaN(parsed.getTime())) {
+      this.settled = true;
+      this.ctx.cancel();
+      return;
+    }
+    this.settled = true;
+    this.ctx.commit(parsed);
+  }
+
+  protected cancel(): void {
+    if (this.settled) return;
+    this.settled = true;
+    this.ctx.cancel();
+  }
+
+  protected onKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Enter') {
+      this.commit();
+    } else if (event.key === 'Escape') {
+      event.stopPropagation();
+      this.cancel();
+    }
+  }
+}
+
+/**
+ * Parse the most common date shapes (ISO `YYYY-MM-DD`, also Swedish/locale
+ * forms that share that order). Falls back to `new Date(raw)` for ISO-with-
+ * time variants. Returns `null` for anything unparseable.
+ */
+function parseIsoLike(raw: string): Date | null {
+  const iso = /^(\d{4})-(\d{2})-(\d{2})$/.exec(raw);
+  if (iso) {
+    const y = Number(iso[1]);
+    const m = Number(iso[2]) - 1;
+    const d = Number(iso[3]);
+    const out = new Date(y, m, d);
+    if (out.getFullYear() === y && out.getMonth() === m && out.getDate() === d) return out;
+    return null;
+  }
+  const fallback = new Date(raw);
+  return Number.isNaN(fallback.getTime()) ? null : fallback;
+}
+

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

@@ -0,0 +1,147 @@
+import { Component, Type } from '@angular/core';
+import { fireEvent, render } from '@testing-library/angular';
+import { describe, expect, it, vi } from 'vitest';
+import {
+  KJ_EDITOR_CONTRACT,
+  KjBooleanEditor,
+  KjDateEditor,
+  KjNumberEditor,
+  KjSelectEditor,
+  KjTextEditor,
+  type KjEditorContract,
+} from './index';
+
+function makeCtx<T>(initial: T): KjEditorContract<T> & { commit: ReturnType<typeof vi.fn>; cancel: ReturnType<typeof vi.fn> } {
+  return {
+    value: initial,
+    commit: vi.fn(),
+    cancel: vi.fn(),
+  };
+}
+
+async function mount<T>(cmp: Type<T>, ctx: KjEditorContract<unknown>, host?: Type<unknown>) {
+  return render(host ?? cmp, {
+    imports: [cmp],
+    providers: [{ provide: KJ_EDITOR_CONTRACT, useValue: ctx }],
+  });
+}
+
+describe('KjTextEditor', () => {
+  it('reads initial value and commits on Enter', async () => {
+    const ctx = makeCtx<string>('hello');
+    const { container } = await mount(KjTextEditor, ctx);
+    const input = container.querySelector('input') as HTMLInputElement;
+    expect(input.value).toBe('hello');
+    fireEvent.input(input, { target: { value: 'world' } });
+    fireEvent.keyDown(input, { key: 'Enter' });
+    expect(ctx.commit).toHaveBeenCalledWith('world');
+  });
+
+  it('calls cancel on Escape', async () => {
+    const ctx = makeCtx<string>('abc');
+    const { container } = await mount(KjTextEditor, ctx);
+    const input = container.querySelector('input') as HTMLInputElement;
+    fireEvent.keyDown(input, { key: 'Escape' });
+    expect(ctx.cancel).toHaveBeenCalled();
+  });
+});
+
+describe('KjNumberEditor', () => {
+  it('reads initial number and commits parsed number on Enter', async () => {
+    const ctx = makeCtx<number>(42);
+    const { container } = await mount(KjNumberEditor, ctx);
+    const input = container.querySelector('input') as HTMLInputElement;
+    expect(input.value).toBe('42');
+    fireEvent.input(input, { target: { value: '99' } });
+    fireEvent.keyDown(input, { key: 'Enter' });
+    expect(ctx.commit).toHaveBeenCalledWith(99);
+  });
+
+  it('calls cancel on Escape', async () => {
+    const ctx = makeCtx<number>(1);
+    const { container } = await mount(KjNumberEditor, ctx);
+    const input = container.querySelector('input') as HTMLInputElement;
+    fireEvent.keyDown(input, { key: 'Escape' });
+    expect(ctx.cancel).toHaveBeenCalled();
+  });
+});
+
+describe('KjDateEditor', () => {
+  it('reads initial date as ISO string and commits Date on Enter', async () => {
+    const seed = new Date(2026, 0, 15);
+    const ctx = makeCtx<Date | null>(seed);
+    const { container } = await mount(KjDateEditor, ctx);
+    const input = container.querySelector('input') as HTMLInputElement;
+    expect(input.value).toBe('2026-01-15');
+    fireEvent.input(input, { target: { value: '2026-05-17' } });
+    fireEvent.keyDown(input, { key: 'Enter' });
+    expect(ctx.commit).toHaveBeenCalledTimes(1);
+    const committed = (ctx.commit as ReturnType<typeof vi.fn>).mock.calls[0]?.[0] as Date;
+    expect(committed).toBeInstanceOf(Date);
+    expect(committed.getFullYear()).toBe(2026);
+    expect(committed.getMonth()).toBe(4);
+    expect(committed.getDate()).toBe(17);
+  });
+
+  it('calls cancel on Escape', async () => {
+    const ctx = makeCtx<Date | null>(null);
+    const { container } = await mount(KjDateEditor, ctx);
+    const input = container.querySelector('input') as HTMLInputElement;
+    fireEvent.keyDown(input, { key: 'Escape' });
+    expect(ctx.cancel).toHaveBeenCalled();
+  });
+});
+
+describe('KjSelectEditor', () => {
+  @Component({
+    standalone: true,
+    imports: [KjSelectEditor],
+    template: `<kj-select-editor [kjOptions]="opts" />`,
+  })
+  class SelectHost {
+    readonly opts: ReadonlyArray<string> = ['a', 'b', 'c'];
+  }
+
+  it('reads initial value and commits selected option on activation', async () => {
+    const ctx = makeCtx<unknown>('b');
+    const { container } = await mount(KjSelectEditor, ctx, SelectHost);
+    // The styled kj-select renders a trigger button + portalled listbox.
+    // Activate the trigger, then click the third option.
+    const trigger = container.querySelector('button') as HTMLButtonElement;
+    expect(trigger).toBeTruthy();
+    fireEvent.click(trigger);
+    // Options are portalled to document.body via the overlay primitive.
+    const options = document.querySelectorAll('[kjOption], [role="option"]');
+    expect(options.length).toBe(3);
+    fireEvent.click(options[2] as HTMLElement);
+    expect(ctx.commit).toHaveBeenCalledWith('c');
+  });
+
+  it('calls cancel on Escape', async () => {
+    const ctx = makeCtx<unknown>('a');
+    const { container } = await mount(KjSelectEditor, ctx, SelectHost);
+    const trigger = container.querySelector('button') as HTMLButtonElement;
+    fireEvent.keyDown(trigger, { key: 'Escape' });
+    expect(ctx.cancel).toHaveBeenCalled();
+  });
+});
+
+describe('KjBooleanEditor', () => {
+  it('reads initial value and commits toggled value on Enter', async () => {
+    const ctx = makeCtx<boolean>(false);
+    const { container } = await mount(KjBooleanEditor, ctx);
+    const btn = container.querySelector('button') as HTMLButtonElement;
+    // The styled kj-toggle uses role="switch" + aria-pressed (per APG button-with-state pattern).
+    expect(btn.getAttribute('aria-pressed')).toBe('false');
+    fireEvent.keyDown(btn, { key: 'Enter' });
+    expect(ctx.commit).toHaveBeenCalledWith(true);
+  });
+
+  it('calls cancel on Escape', async () => {
+    const ctx = makeCtx<boolean>(true);
+    const { container } = await mount(KjBooleanEditor, ctx);
+    const btn = container.querySelector('button') as HTMLButtonElement;
+    fireEvent.keyDown(btn, { key: 'Escape' });
+    expect(ctx.cancel).toHaveBeenCalled();
+  });
+});

package/src/table/table-editors/index.ts

@@ -0,0 +1,41 @@
+import { InjectionToken } from '@angular/core';
+
+/**
+ * Contract handed to a cell editor when the user enters edit mode.
+ *
+ * The host (a table cell) wires up:
+ * - `value` — the current cell value to seed the editor with;
+ * - `commit(next)` — called when the editor wants to persist the new value
+ *   (Enter, blur for text-like editors, or change for select/boolean);
+ * - `cancel()` — called when the user aborts editing (Escape).
+ *
+ * Editors should not assume anything about how the host applies the commit —
+ * they just call `commit(next)` with the resolved value.
+ */
+export interface KjEditorContract<TValue> {
+  /** Initial value shown when the editor mounts. */
+  value: TValue;
+  /** Persist the new value. */
+  commit: (next: TValue) => void;
+  /** Discard the in-progress edit. */
+  cancel: () => void;
+  /** Column meta forwarded to the editor — e.g. select options, min/max
+   *  for number editors, custom params. Editors read what they need and
+   *  ignore the rest. */
+  meta?: Record<string, unknown>;
+}
+
+/**
+ * DI token for the {@link KjEditorContract}. The table cell that mounts an
+ * editor provides this token; each editor injects it and reacts to its
+ * `value` / `commit` / `cancel` hooks.
+ */
+export const KJ_EDITOR_CONTRACT = new InjectionToken<KjEditorContract<unknown>>(
+  'kj.editor.contract',
+);
+
+export * from './text-editor';
+export * from './number-editor';
+export * from './date-editor';
+export * from './select-editor';
+export * from './boolean-editor';