@kouji-ui/components 0.1.1 → 0.1.2

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

@@ -1,89 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  ViewEncapsulation,
-  afterNextRender,
-  inject,
-  signal,
-  viewChild,
-} from '@angular/core';
-import { KjNumberInputComponent } from '../../number-input/number-input';
-import { KJ_EDITOR_CONTRACT, type KjEditorContract } from './index';
-
-/**
- * Inline numeric cell editor for `<kj-table>`. Renders the styled
- * `<kj-number-input>` component (which wraps the headless number-input
- * directive family) so cell editors stay consistent with the rest of the
- * design system.
- *
- * Commits on Enter or blur. Cancels on Escape. Non-finite drafts (e.g. an
- * empty field) round-trip through `cancel()` rather than committing `NaN`.
- */
-@Component({
-  selector: 'kj-number-editor',
-  standalone: true,
-  imports: [KjNumberInputComponent],
-  template: `
-    <kj-number-input
-      class="kj-editor kj-editor--number"
-      [(kjValue)]="draft"
-      (keydown.enter)="commit()"
-      (keydown.escape)="cancel(); $event.stopPropagation()"
-      (focusout)="onFocusOut($event)"
-    />
-  `,
-  encapsulation: ViewEncapsulation.None,
-  host: { style: 'display: contents;' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjNumberEditor {
-  private readonly ctx = inject(KJ_EDITOR_CONTRACT) as KjEditorContract<number>;
-  private readonly hostEl: ElementRef<HTMLElement> = inject(ElementRef);
-  private settled = false;
-  private mounted = false;
-
-  /** Template-bound `<kj-number-input>` — exposes a public `focus()`. */
-  private readonly numberInput = viewChild(KjNumberInputComponent);
-
-  protected readonly draft = signal<number>(0);
-
-  constructor() {
-    const v = this.ctx.value;
-    this.draft.set(typeof v === 'number' && Number.isFinite(v) ? v : 0);
-    afterNextRender(() => {
-      this.numberInput()?.focus();
-      this.mounted = true;
-    });
-  }
-
-  protected commit(): void {
-    if (this.settled) return;
-    const value = this.draft();
-    this.settled = true;
-    if (Number.isFinite(value)) {
-      this.ctx.commit(value);
-    } else {
-      this.ctx.cancel();
-    }
-  }
-
-  protected cancel(): void {
-    if (this.settled) return;
-    this.settled = true;
-    this.ctx.cancel();
-  }
-
-  /**
-   * Commit on blur — but only when focus leaves the entire editor host
-   * (i.e. not when focus moves between the inner input and a stepper
-   * button). Without this guard, clicking a +/- stepper would fire blur
-   * and prematurely commit before the value updates.
-   */
-  protected onFocusOut(event: FocusEvent): void {
-    if (!this.mounted || this.settled) return;
-    const next = event.relatedTarget as Node | null;
-    if (next && this.hostEl.nativeElement.contains(next)) return;
-    this.commit();
-  }
-}

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

@@ -1,107 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  ViewEncapsulation,
-  computed,
-  effect,
-  inject,
-  input,
-  signal,
-  viewChild,
-} from '@angular/core';
-import { KjOptionComponent, KjSelectComponent } from '../../select/select';
-import { KJ_EDITOR_CONTRACT, type KjEditorContract } from './index';
-
-/** Option entry accepted by `<kj-select-editor>`. */
-export type KjSelectEditorOption = string | { value: unknown; label: string };
-
-interface ResolvedOption {
-  readonly value: unknown;
-  readonly label: string;
-}
-
-/**
- * Inline select cell editor for `<kj-table>`. Renders the styled
- * `<kj-select>` component (trigger button + portalled listbox panel) so
- * cell editors stay consistent with the rest of the design system.
- *
- * Accepts options as `string[]` or `{ value, label }[]` — strings are
- * mapped to `{ value: s, label: s }`. The styled select closes its
- * panel on activation; the editor commits the selected value at that
- * point. Escape cancels.
- */
-@Component({
-  selector: 'kj-select-editor',
-  standalone: true,
-  imports: [KjSelectComponent, KjOptionComponent],
-  template: `
-    <kj-select
-      class="kj-editor kj-editor--select"
-      [value]="draftValue()"
-      (valueChange)="onValueChange($event)"
-      (keydown.escape)="cancel(); $event.stopPropagation()"
-    >
-      @for (opt of resolved(); track opt.label) {
-        <kj-option [value]="opt.value">{{ opt.label }}</kj-option>
-      }
-    </kj-select>
-  `,
-  encapsulation: ViewEncapsulation.None,
-  host: { style: 'display: contents;' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjSelectEditor {
-  private readonly ctx = inject(KJ_EDITOR_CONTRACT) as KjEditorContract<unknown>;
-
-  /**
-   * Template-bound reference to the inner `<kj-select>`. Exposes the
-   * trigger via its public `focus()` API — no DOM querying needed.
-   */
-  private readonly select = viewChild(KjSelectComponent);
-
-  /** Direct option list. Optional — when omitted, options are pulled
-   *  from `contract.meta?.options` so the cell-editor-outlet can forward
-   *  the column's `kjSelectOptions` without binding inputs imperatively. */
-  readonly kjOptions = input<ReadonlyArray<KjSelectEditorOption>>([]);
-
-  protected readonly resolved = computed<ResolvedOption[]>(() => {
-    const direct = this.kjOptions();
-    const fromMeta = this.ctx.meta?.['options'] as ReadonlyArray<KjSelectEditorOption> | undefined;
-    const source = direct.length > 0 ? direct : (fromMeta ?? []);
-    return source.map(opt =>
-      typeof opt === 'string'
-        ? { value: opt, label: opt }
-        : { value: opt.value, label: opt.label },
-    );
-  });
-
-  protected readonly draftValue = signal<unknown>(undefined);
-
-  private focused = false;
-
-  constructor() {
-    this.draftValue.set(this.ctx.value);
-    // Two reactive hops: first the editor's viewChild resolves to the
-    // `<kj-select>` instance, then that instance's own `triggerEl`
-    // signal resolves to the trigger button's ElementRef. `effect` tracks
-    // both. We focus once — `focused` prevents stealing focus back if
-    // the user later clicks away and the signal re-emits.
-    effect(() => {
-      const sel = this.select();
-      const trigger = sel?.triggerEl();
-      if (!trigger || this.focused) return;
-      this.focused = true;
-      (trigger as ElementRef<HTMLElement>).nativeElement.focus();
-    });
-  }
-
-  protected onValueChange(next: unknown): void {
-    this.draftValue.set(next);
-    this.ctx.commit(next);
-  }
-
-  protected cancel(): void {
-    this.ctx.cancel();
-  }
-}

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

@@ -1,82 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  ViewEncapsulation,
-  afterNextRender,
-  inject,
-  signal,
-  viewChild,
-} from '@angular/core';
-import { KjInputComponent } from '../../input/input';
-import { KJ_EDITOR_CONTRACT, type KjEditorContract } from './index';
-
-/**
- * Inline text cell editor for `<kj-table>`. Renders the styled
- * `<kj-input>` component (which wraps the headless `kjInput` directive and
- * applies theme tokens) so cell editors stay consistent with the rest of
- * the design system.
- *
- * Commits on Enter or blur. Cancels on Escape.
- */
-@Component({
-  selector: 'kj-text-editor',
-  standalone: true,
-  imports: [KjInputComponent],
-  template: `
-    <kj-input
-      class="kj-editor kj-editor--text"
-      [value]="draft()"
-      (input)="onInput($event)"
-      (keydown.enter)="commit()"
-      (keydown.escape)="cancel(); $event.stopPropagation()"
-      (focusout)="onFocusOut($event)"
-    />
-  `,
-  encapsulation: ViewEncapsulation.None,
-  host: { style: 'display: contents;' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjTextEditor {
-  private readonly ctx = inject(KJ_EDITOR_CONTRACT) as KjEditorContract<string>;
-  private readonly hostEl: ElementRef<HTMLElement> = inject(ElementRef);
-  private settled = false;
-  private mounted = false;
-
-  /** Template-bound `<kj-input>` instance — exposes a public `focus()`. */
-  private readonly inputCmp = viewChild(KjInputComponent);
-
-  protected readonly draft = signal<string>('');
-
-  constructor() {
-    this.draft.set(this.ctx.value ?? '');
-    afterNextRender(() => {
-      this.inputCmp()?.focus();
-      this.mounted = true;
-    });
-  }
-
-  protected onInput(event: Event): void {
-    const target = event.target as HTMLInputElement | null;
-    if (target) this.draft.set(target.value);
-  }
-
-  protected commit(): void {
-    if (this.settled) return;
-    this.settled = true;
-    this.ctx.commit(this.draft());
-  }
-
-  protected cancel(): void {
-    if (this.settled) return;
-    this.settled = true;
-    this.ctx.cancel();
-  }
-
-  protected onFocusOut(event: FocusEvent): void {
-    if (!this.mounted || this.settled) return;
-    const next = event.relatedTarget as Node | null;
-    if (next && this.hostEl.nativeElement.contains(next)) return;
-    this.commit();
-  }
-}

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

@@ -1,33 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { exportCsv, exportJson, toTsv } from './table-export';
-
-describe('exportCsv', () => {
-  it('escapes commas + quotes + newlines', () => {
-    const csv = exportCsv({
-      rows: [{ a: 'hi, bob', b: 'with "quotes"', c: 'line\nbreak' }],
-      columns: ['a', 'b', 'c'],
-    });
-    expect(csv).toBe('a,b,c\n"hi, bob","with ""quotes""","line\nbreak"');
-  });
-  it('uses column accessors via the getValue fn', () => {
-    const csv = exportCsv({
-      rows: [{ name: 'Alice' }],
-      columns: ['name'],
-      getValue: (row, col) => col === 'name' ? (row as { name: string }).name.toUpperCase() : '',
-    });
-    expect(csv).toBe('name\nALICE');
-  });
-});
-
-describe('exportJson', () => {
-  it('pretty-prints by default', () => {
-    const json = exportJson({ rows: [{ a: 1 }] });
-    expect(json).toBe('[\n  {\n    "a": 1\n  }\n]');
-  });
-});
-
-describe('toTsv', () => {
-  it('returns tab-separated values', () => {
-    expect(toTsv({ rows: [{ a: 1, b: 2 }], columns: ['a', 'b'] })).toBe('a\tb\n1\t2');
-  });
-});

package/src/table/table-export.ts

@@ -1,53 +0,0 @@
-export interface ExportOptions<TRow = unknown> {
-  rows: readonly TRow[];
-  columns: readonly string[];
-  getValue?: (row: TRow, column: string) => unknown;
-}
-
-function defaultGet<T>(row: T, column: string): unknown {
-  return (row as Record<string, unknown>)[column];
-}
-
-function csvEscape(v: unknown): string {
-  if (v == null) return '';
-  const s = String(v);
-  const needsQuotes = s.includes(',') || s.includes('"') || s.includes('\n');
-  return needsQuotes ? `"${s.replace(/"/g, '""')}"` : s;
-}
-
-export function exportCsv<T>(opts: ExportOptions<T>): string {
-  const get = opts.getValue ?? defaultGet;
-  const header = opts.columns.join(',');
-  const body = opts.rows.map(r =>
-    opts.columns.map(c => csvEscape(get(r, c))).join(',')
-  ).join('\n');
-  return `${header}\n${body}`;
-}
-
-export function exportJson<T>(opts: { rows: readonly T[]; pretty?: boolean }): string {
-  return JSON.stringify(opts.rows, null, opts.pretty === false ? 0 : 2);
-}
-
-export function toTsv<T>(opts: ExportOptions<T>): string {
-  const get = opts.getValue ?? defaultGet;
-  const header = opts.columns.join('\t');
-  const body = opts.rows.map(r =>
-    opts.columns.map(c => String(get(r, c) ?? '')).join('\t')
-  ).join('\n');
-  return `${header}\n${body}`;
-}
-
-export function downloadString(filename: string, content: string, type = 'text/plain'): void {
-  const blob = new Blob([content], { type });
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement('a');
-  a.href = url; a.download = filename;
-  document.body.appendChild(a);
-  a.click();
-  document.body.removeChild(a);
-  URL.revokeObjectURL(url);
-}
-
-export async function copyToClipboard(text: string): Promise<void> {
-  await navigator.clipboard.writeText(text);
-}

package/src/table/table-filter-outlet.ts

@@ -1,137 +0,0 @@
-import {
-  DestroyRef,
-  Directive,
-  EnvironmentInjector,
-  Injector,
-  Type,
-  ViewContainerRef,
-  computed,
-  effect,
-  inject,
-  input,
-  type ComponentRef,
-} from '@angular/core';
-import type { Column, Table } from '@tanstack/angular-table';
-import {
-  KJ_TABLE,
-  KjTable,
-  provideKjFilterParams,
-  type KjFilterParams,
-} from '@kouji-ui/core';
-import { KJ_FILTER_CONTEXT, type KjFilterContext } from './table-filters/text-filter';
-
-/**
- * Cell-row outlet that mounts a built-in or user-supplied filter UI for one
- * column. Uses its own `ViewContainerRef` for mount + destroy, so when the
- * host `@if` removes the directive Angular destroys the filter automatically
- * — no DOM querying, no manual lifecycle bookkeeping.
- *
- * The mounted component receives:
- * - **`KJ_FILTER_CONTEXT`** (legacy) — for the four built-in filters.
- * - **`KJ_FILTER_PARAMS`** (modern) — used via {@link injectKjFilterParams}
- *   from any user-supplied filter. Custom filters should prefer this token
- *   over an `@Input() params` field — `setInput` / `inputBinding` cannot be
- *   forwarded blindly here because we don't know whether the input is
- *   declared, and Angular's `inputBinding` errors when the target component
- *   has no matching input.
- *
- * Column-level options (e.g. `selectOptions`) are sourced directly from
- * `params.column.columnDef.meta.kj` by the filter itself, not piped through
- * this outlet — keeping the outlet free of filter-type branching.
- *
- * ```html
- * <ng-container
- *   kjFilterCell
- *   [kjColumn]="h.column"
- *   [kjFilter]="filterRendererFor(h.column)"
- * />
- * ```
- */
-@Directive({
-  selector: '[kjFilterCell]',
-  standalone: true,
-})
-export class KjFilterCellOutlet<TData = unknown> {
-  /** Column this filter operates on. */
-  readonly kjColumn = input.required<Column<TData, unknown>>();
-
-  /** Component class to mount. `null` mounts nothing. */
-  readonly kjFilter = input<Type<unknown> | null>(null);
-
-  private readonly vcr = inject(ViewContainerRef);
-  private readonly envInjector = inject(EnvironmentInjector);
-  private readonly parentInjector = inject(Injector);
-  private readonly destroyRef = inject(DestroyRef);
-  private readonly tableDir = inject<KjTable<TData>>(KJ_TABLE as never);
-
-  private ref: ComponentRef<unknown> | null = null;
-
-  // Cache the params used to mount the current ref. The effect compares
-  // these on each run and skips re-mounting when nothing meaningful changed
-  // — without this guard, even an identity-stable input that happens to be
-  // re-emitted (e.g. TanStack rebuilding header groups on every CD) would
-  // tear the filter down and recreate it, which broke the kj-select overlay
-  // because the kj-select got destroyed mid-open.
-  private mountedFor: { filter: Type<unknown> | null; column: Column<TData, unknown> | null } = { filter: null, column: null };
-
-  constructor() {
-    effect(() => {
-      const filter = this.kjFilter();
-      const column = this.kjColumn();
-      // Skip the re-mount when nothing meaningful changed. Without this
-      // guard, the parent template re-evaluates inputs every CD pass (the
-      // TanStack `Column` reference can be re-created during table init),
-      // so the effect would tear the filter down and rebuild it 8–12 times
-      // — destroying the kj-select mid-open and making the dropdown look
-      // broken.
-      if (this.ref && this.mountedFor.filter === filter && this.mountedFor.column === column) {
-        return;
-      }
-      this.tearDown();
-      if (!filter) return;
-
-      const tbl: Table<TData> = this.tableDir.table();
-      const ctx: KjFilterContext<TData> = { column, table: tbl };
-      const modelSig = computed(() => {
-        // Subscribe to the table's filter state slice so the param signal
-        // updates whenever any column filter changes.
-        this.tableDir.state.columnFilters();
-        return (column.getFilterValue() ?? null) as unknown;
-      });
-      const params: KjFilterParams<TData, unknown> = {
-        column,
-        api: this.tableDir.gridApi,
-        columnApi: this.tableDir.columnApi,
-        model: modelSig,
-        setModel: (v) =>
-          column.setFilterValue(
-            v === '' || v === null || v === undefined ? undefined : v,
-          ),
-        isActive: () => column.getIsFiltered(),
-        clear: () => column.setFilterValue(undefined),
-      };
-
-      const childInjector = Injector.create({
-        providers: [
-          { provide: KJ_FILTER_CONTEXT, useValue: ctx },
-          provideKjFilterParams(params),
-        ],
-        parent: this.parentInjector,
-      });
-      this.ref = this.vcr.createComponent(filter, {
-        environmentInjector: this.envInjector,
-        injector: childInjector,
-      });
-      this.mountedFor = { filter, column };
-    });
-
-    this.destroyRef.onDestroy(() => this.tearDown());
-  }
-
-  private tearDown(): void {
-    this.ref?.destroy();
-    this.ref = null;
-    this.vcr.clear();
-    this.mountedFor = { filter: null, column: null };
-  }
-}

package/src/table/table-filters/date-filter.ts

@@ -1,122 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ViewEncapsulation,
-  computed,
-  inject,
-} from '@angular/core';
-import type { Column } from '@tanstack/angular-table';
-import { KjVisuallyHidden, type KjDateFilterModel } from '@kouji-ui/core';
-import { KjDatePickerComponent } from '../../date-picker/date-picker';
-import { KJ_FILTER_CONTEXT, type KjFilterContext } from './text-filter';
-
-/** Filter value shape — ISO date strings (`YYYY-MM-DD`) or `undefined` per bound. */
-export type KjDateRange = [from: string | undefined, to: string | undefined];
-
-/**
- * Date-range filter UI. Renders two styled `<kj-date-picker>` controls
- * (from / to) and writes a `[from, to]` tuple of ISO date strings to
- * `column.setFilterValue`. Either bound may be blank to leave it open.
- *
- * The wire format stays string-based (`YYYY-MM-DD`) so it serialises
- * cleanly into URL state and round-trips without timezone surprises —
- * conversion to / from `Date` is local to the picker boundary.
- *
- * Each picker is wrapped in a `<label>` carrying visually-hidden text so
- * screen readers announce which bound the picker controls.
- */
-@Component({
-  selector: 'kj-date-filter',
-  standalone: true,
-  imports: [KjDatePickerComponent, KjVisuallyHidden],
-  styleUrl: './filters.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  host: {
-    class: 'kj-date-filter',
-  },
-  template: `
-    <div class="kj-date-filter__label kj-date-filter__label--from">
-      <span kjVisuallyHidden class="kj-date-filter__caption">{{ fromAriaLabel() }}</span>
-      <kj-date-picker
-        class="kj-date-filter__input kj-date-filter__input--from"
-        kjSize="xs"
-        [kjValue]="fromDate()"
-        (kjValueChange)="onFromChange($event)"
-      />
-    </div>
-    <div class="kj-date-filter__label kj-date-filter__label--to">
-      <span kjVisuallyHidden class="kj-date-filter__caption">{{ toAriaLabel() }}</span>
-      <kj-date-picker
-        class="kj-date-filter__input kj-date-filter__input--to"
-        kjSize="xs"
-        [kjValue]="toDate()"
-        (kjValueChange)="onToChange($event)"
-      />
-    </div>
-  `,
-})
-export class KjDateFilter<TData = unknown> {
-  private readonly ctx = inject<KjFilterContext<TData>>(KJ_FILTER_CONTEXT);
-
-  private current: KjDateRange = (() => {
-    const v = this.ctx.column.getFilterValue();
-    if (Array.isArray(v)) return v as KjDateRange;
-    if (v && typeof v === 'object' && (v as { filterType?: string }).filterType === 'date') {
-      const m = v as KjDateFilterModel;
-      return [m.dateFrom, m.dateTo];
-    }
-    return [undefined, undefined];
-  })();
-
-  protected readonly fromDate = computed(() => isoToDate(this.current[0]));
-  protected readonly toDate = computed(() => isoToDate(this.current[1]));
-
-  protected readonly fromAriaLabel = computed(
-    () => `Filter by ${headerLabel(this.ctx.column)} from date`,
-  );
-  protected readonly toAriaLabel = computed(
-    () => `Filter by ${headerLabel(this.ctx.column)} to date`,
-  );
-
-  protected onFromChange(date: Date | null): void {
-    this.current = [dateToIso(date), this.current[1]];
-    this.commit();
-  }
-
-  protected onToChange(date: Date | null): void {
-    this.current = [this.current[0], dateToIso(date)];
-    this.commit();
-  }
-
-  private commit(): void {
-    const [from, to] = this.current;
-    if (from === undefined && to === undefined) {
-      this.ctx.column.setFilterValue(undefined);
-      return;
-    }
-    const model: KjDateFilterModel = { filterType: 'date', type: 'inRange', dateFrom: from, dateTo: to };
-    this.ctx.column.setFilterValue(model);
-  }
-}
-
-function isoToDate(iso: string | undefined): Date | null {
-  if (!iso) return null;
-  // Parse as local-time midnight so the date round-trips without TZ drift.
-  const [y, m, d] = iso.split('-').map(Number);
-  if (!y || !m || !d) return null;
-  return new Date(y, m - 1, d);
-}
-
-function dateToIso(date: Date | null | undefined): string | undefined {
-  if (!date) return undefined;
-  const y = date.getFullYear();
-  const m = String(date.getMonth() + 1).padStart(2, '0');
-  const d = String(date.getDate()).padStart(2, '0');
-  return `${y}-${m}-${d}`;
-}
-
-function headerLabel<TData>(column: Column<TData, unknown>): string {
-  const header = column.columnDef.header;
-  return typeof header === 'string' ? header : column.id;
-}

package/src/table/table-filters/filters.css

@@ -1,53 +0,0 @@
-/*
- * Filter-row layout. All sizing flows from `kjSize="xs"` applied to the inner
- * primitives (kj-input, kj-number-input, kj-select, kj-date-picker) — no more
- * CSS-var override fakery here. This file owns the *layout* of the filter
- * shells (flex direction, gap, child width), nothing else.
- */
-
-.kj-text-filter,
-.kj-number-filter,
-.kj-date-filter,
-.kj-select-filter {
-  display: flex;
-  align-items: center;
-  gap: var(--kj-base-space-xs, 0.25rem);
-  width: 100%;
-}
-
-/* The text filter wraps its <kj-input> in a <label>; let the label own the
-   row so the visually-hidden caption stays in flow without inflating width. */
-.kj-text-filter__label,
-.kj-select-filter__label {
-  display: flex;
-  width: 100%;
-  align-items: center;
-}
-
-/* Number filter: operator picker keeps natural width, each number input
-   takes equal share of the rest. */
-.kj-number-filter__operator {
-  flex: 0 0 auto;
-  min-width: 4.25rem;
-}
-.kj-number-filter__input {
-  flex: 1 1 0;
-  min-width: 0;
-}
-
-/* Date filter: both pickers split the row evenly. */
-.kj-date-filter__label {
-  display: flex;
-  flex: 1 1 0;
-  min-width: 0;
-  align-items: center;
-}
-.kj-date-filter .kj-date-picker {
-  flex: 1 1 0;
-  min-width: 0;
-}
-
-/* Select filter: trigger fills the cell. */
-.kj-select-filter .kj-select {
-  width: 100%;
-}