@kouji-ui/components 0.1.1 → 0.1.2

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

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

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

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

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

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

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

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