@kouji-ui/components 0.1.1

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

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

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

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

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

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

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

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

@@ -0,0 +1,53 @@
+/*
+ * 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%;
+}