@kouji-ui/core 0.9.2 → 0.11.0

package/fesm2022/kouji-ui-core.mjs

@@ -22122,6 +22122,26 @@ class KjTable {
      */
     kjGetRowId = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "kjGetRowId" }] : /* istanbul ignore next */ []));
+    /**
+     * Tree rows: returns a row's children (TanStack `getSubRows`). Children are
+     * real table rows with the same columns, shown under their parent while it
+     * is expanded. `undefined` (default) keeps the table flat.
+     */
+    kjGetSubRows = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjGetSubRows" }] : /* istanbul ignore next */ []));
+    /**
+     * Tree rows: whether selecting a parent also selects its children
+     * (TanStack `enableSubRowSelection`). Defaults to `false` — every row is
+     * selected on its own.
+     */
+    kjSelectSubRows = input(false, { ...(ngDevMode ? { debugName: "kjSelectSubRows" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Tree rows: whether parents start expanded. Applies to every parent with
+     * no explicit expanded state — on first render, to rows loaded later, and
+     * again after {@link resetExpansion} (an infinite table's request change).
+     * Defaults to `false`.
+     */
+    kjDefaultExpanded = input(false, { ...(ngDevMode ? { debugName: "kjDefaultExpanded" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     _state = signal(DEFAULT_STATE, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_state" }] : /* istanbul ignore next */ []));
     /**
@@ -22156,6 +22176,85 @@ class KjTable {
     setRowCount(n) {
         this._rowCount.set(n);
     }
+    /**
+     * Server-side infinite mode. When on, `kjTableData` is index-aligned with
+     * the server's result set and may hold holes (`undefined` / `null`) for
+     * rows that are not loaded yet: the holes are dropped before the rows reach
+     * TanStack, and {@link sourceIndex} maps each loaded row back to its
+     * position in the full result set. Sorting, filtering and pagination are
+     * left to the server (TanStack's `manual*` flags), so a header click only
+     * changes `state.sorting()` — feed it into your loader's request.
+     */
+    _infinite = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_infinite" }] : /* istanbul ignore next */ []));
+    /** Whether server-side infinite mode is on — see {@link setInfinite}. */
+    infinite = this._infinite.asReadonly();
+    /**
+     * Turn server-side infinite mode on or off.
+     * @param on `true` while the data is a sparse window of a server result set.
+     */
+    setInfinite(on) {
+        this._infinite.set(on);
+    }
+    /**
+     * Whether a tree parent with no explicit entry in `state.expanded` is open.
+     * Starts at `kjDefaultExpanded`; {@link expandAll} / {@link collapseAll}
+     * flip it so rows loaded later follow the last bulk action.
+     */
+    _expandDefault = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_expandDefault" }] : /* istanbul ignore next */ []));
+    /**
+     * `state.expanded` as TanStack sees it. Open-by-default with no exceptions
+     * is handed over as `true`: TanStack skips expansion altogether for an
+     * empty record, and `getIsRowExpanded` still keeps leaf rows closed.
+     */
+    tanstackExpanded = computed(() => {
+        const expanded = this._state().expanded;
+        if (expanded === true)
+            return true;
+        if (this._expandDefault() && Object.keys(expanded).length === 0)
+            return true;
+        return expanded;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tanstackExpanded" }] : /* istanbul ignore next */ []));
+    /** Whether a row is expanded: its explicit state, else the tree default for parents. */
+    isRowExpanded(row) {
+        const expanded = this._state().expanded;
+        if (expanded === true)
+            return true;
+        const own = expanded[row.id];
+        if (own !== undefined)
+            return own;
+        return this._expandDefault() && (row.subRows?.length ?? 0) > 0;
+    }
+    /** Rows handed to TanStack plus, in infinite mode, their positions in the full result set. */
+    compacted = computed(() => {
+        const data = this.kjTableData();
+        if (!this._infinite())
+            return { rows: data, sourceIndex: null };
+        const rows = [];
+        const sourceIndex = [];
+        // `forEach` skips true holes, so a `new Array(total)` window costs only
+        // its loaded entries.
+        data.forEach((row, i) => {
+            if (row == null)
+                return;
+            rows.push(row);
+            sourceIndex.push(i);
+        });
+        return { rows, sourceIndex };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compacted" }] : /* istanbul ignore next */ []));
+    /**
+     * In infinite mode, the result-set position of each loaded top-level row,
+     * indexed by its TanStack `row.index`; `null` otherwise.
+     */
+    sourceIndex = computed(() => this.compacted().sourceIndex, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sourceIndex" }] : /* istanbul ignore next */ []));
+    /** Position of a top-level row in the full result set (its `row.index` outside infinite mode). */
+    sourceIndexOf(index) {
+        return this.compacted().sourceIndex?.[index] ?? index;
+    }
     /**
      * Apply a TanStack updater (value or function) to a single state slice.
      *
@@ -22198,11 +22297,15 @@ class KjTable {
     ...(ngDevMode ? [{ debugName: "boundColumns" }] : /* istanbul ignore next */ []));
     /** The TanStack table instance. Access rows, headers, and state here. */
     table = createAngularTable(() => ({
-        data: this.kjTableData(),
+        data: this.compacted().rows,
         columns: this.boundColumns(),
+        // In infinite mode a top-level row's index is its result-set position,
+        // so default ids stay stable while pages load around them.
         getRowId: this.kjGetRowId()
-            ? (row, index) => this.kjGetRowId()(row, index)
-            : undefined,
+            ? (row, index, parent) => this.kjGetRowId()(row, parent ? index : this.sourceIndexOf(index))
+            : this._infinite()
+                ? (_row, index, parent) => (parent ? `${parent.id}.${index}` : String(this.sourceIndexOf(index)))
+                : undefined,
         // `columnResizeMode: 'onEnd'` defers the actual column width write until
         // the user releases the resize handle. While dragging, the wrapper reads
         // `state.columnSizingInfo().deltaOffset` to render a vertical preview
@@ -22212,9 +22315,21 @@ class KjTable {
         // TanStack to manual pagination so the loader-page becomes the
         // visible page (no client-side slicing) and pagination controls
         // derive their totals from the remote count.
-        manualPagination: this._rowCount() !== null,
+        manualPagination: this._rowCount() !== null || this._infinite(),
+        manualSorting: this._infinite(),
+        manualFiltering: this._infinite(),
         rowCount: this._rowCount() ?? undefined,
-        state: { ...this._state(), columnSizingInfo: this._columnSizingInfo() },
+        getSubRows: this.kjGetSubRows(),
+        getIsRowExpanded: row => this.isRowExpanded(row),
+        enableSubRowSelection: this.kjSelectSubRows(),
+        // Expansion is reset by the directive itself (see the constructor): an
+        // infinite table's page loads must not wipe it.
+        autoResetExpanded: false,
+        state: {
+            ...this._state(),
+            expanded: this.tanstackExpanded(),
+            columnSizingInfo: this._columnSizingInfo(),
+        },
         onSortingChange: u => this.patch('sorting', u),
         onColumnFiltersChange: u => this.patch('columnFilters', u),
         onGlobalFilterChange: u => this.patch('globalFilter', u),
@@ -22239,6 +22354,91 @@ class KjTable {
         enableRowSelection: true,
         enableMultiRowSelection: true,
     }));
+    constructor() {
+        // New rows reset the expansion to `kjDefaultExpanded` (TanStack's own
+        // auto-reset, kept), except in infinite mode where data changes are page
+        // loads — the infinite wrapper calls `resetExpansion()` on a real reset.
+        let seeded = false;
+        effect(() => {
+            this.kjTableData();
+            if (!seeded) {
+                seeded = true;
+                return;
+            }
+            untracked(() => {
+                if (!this._infinite())
+                    this.resetExpansion();
+            });
+        });
+        // A new `kjDefaultExpanded` restarts the tree from that default.
+        effect(() => {
+            const open = this.kjDefaultExpanded();
+            untracked(() => {
+                if (this._expandDefault() === open)
+                    return;
+                this._expandDefault.set(open);
+                this.patch('expanded', {});
+            });
+        });
+    }
+    // ── Tree rows ───────────────────────────────────────────────────────────
+    /**
+     * Whether every loaded parent row is expanded (`false` when no row has
+     * children). Rows of an infinite table that are not loaded yet do not count.
+     */
+    isAllExpanded = computed(() => {
+        this._state();
+        this._expandDefault();
+        let parents = 0;
+        for (const row of this.table().getCoreRowModel().flatRows) {
+            if (!row.subRows?.length)
+                continue;
+            parents++;
+            if (!this.isRowExpanded(row))
+                return false;
+        }
+        return parents > 0;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isAllExpanded" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether a row is expanded — its own choice, else `kjDefaultExpanded`
+     * (or the last expand-all / collapse-all) for parents.
+     * @param row The row.
+     */
+    getRowExpanded(row) {
+        return this.isRowExpanded(row);
+    }
+    /**
+     * Expand or collapse one row. Unlike TanStack's `row.toggleExpanded()`, the
+     * choice is stored explicitly, so it holds against `kjDefaultExpanded`.
+     * @param row The row.
+     * @param expanded The new state; omitted, the current one flips.
+     * @returns The row's new expanded state.
+     */
+    setRowExpanded(row, expanded) {
+        const next = expanded ?? !this.isRowExpanded(row);
+        const prev = this._state().expanded;
+        // `true` ("every row") becomes "open by default" plus this exception.
+        if (prev === true)
+            this._expandDefault.set(true);
+        this.patch('expanded', { ...(prev === true ? {} : prev), [row.id]: next });
+        return next;
+    }
+    /** Expand every parent row, including the ones loaded later. */
+    expandAll() {
+        this._expandDefault.set(true);
+        this.patch('expanded', {});
+    }
+    /** Collapse every parent row, including the ones loaded later. */
+    collapseAll() {
+        this._expandDefault.set(false);
+        this.patch('expanded', {});
+    }
+    /** Forget per-row expansion and go back to `kjDefaultExpanded` — e.g. when the rows are replaced. */
+    resetExpansion() {
+        this._expandDefault.set(untracked(this.kjDefaultExpanded));
+        this.patch('expanded', {});
+    }
     /** Merge a partial state. Unspecified slices are left untouched. */
     setState(partial) {
         this._state.update(s => ({ ...s, ...partial }));
@@ -22273,7 +22473,7 @@ class KjTable {
      */
     get columnApi() { return this.buildApi().columnApi; }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjTable, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: KjTable, isStandalone: true, selector: "[kjTable]", inputs: { kjTable: { classPropertyName: "kjTable", publicName: "kjTable", isSignal: true, isRequired: true, transformFunction: null }, kjTableData: { classPropertyName: "kjTableData", publicName: "kjTableData", isSignal: true, isRequired: false, transformFunction: null }, kjGetRowId: { classPropertyName: "kjGetRowId", publicName: "kjGetRowId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { kjTableData: "kjTableDataChange" }, providers: [{ provide: KJ_TABLE, useExisting: KjTable }], exportAs: ["kjTable"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: KjTable, isStandalone: true, selector: "[kjTable]", inputs: { kjTable: { classPropertyName: "kjTable", publicName: "kjTable", isSignal: true, isRequired: true, transformFunction: null }, kjTableData: { classPropertyName: "kjTableData", publicName: "kjTableData", isSignal: true, isRequired: false, transformFunction: null }, kjGetRowId: { classPropertyName: "kjGetRowId", publicName: "kjGetRowId", isSignal: true, isRequired: false, transformFunction: null }, kjGetSubRows: { classPropertyName: "kjGetSubRows", publicName: "kjGetSubRows", isSignal: true, isRequired: false, transformFunction: null }, kjSelectSubRows: { classPropertyName: "kjSelectSubRows", publicName: "kjSelectSubRows", isSignal: true, isRequired: false, transformFunction: null }, kjDefaultExpanded: { classPropertyName: "kjDefaultExpanded", publicName: "kjDefaultExpanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { kjTableData: "kjTableDataChange" }, providers: [{ provide: KJ_TABLE, useExisting: KjTable }], exportAs: ["kjTable"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjTable, decorators: [{
             type: Directive,
@@ -22283,7 +22483,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     exportAs: 'kjTable',
                     providers: [{ provide: KJ_TABLE, useExisting: KjTable }],
                 }]
-        }], propDecorators: { kjTable: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjTable", required: true }] }], kjTableData: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjTableData", required: false }] }, { type: i0.Output, args: ["kjTableDataChange"] }], kjGetRowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjGetRowId", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { kjTable: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjTable", required: true }] }], kjTableData: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjTableData", required: false }] }, { type: i0.Output, args: ["kjTableDataChange"] }], kjGetRowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjGetRowId", required: false }] }], kjGetSubRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjGetSubRows", required: false }] }], kjSelectSubRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjSelectSubRows", required: false }] }], kjDefaultExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjDefaultExpanded", required: false }] }] } });
 /** Angular's NG0950 — a required input read before its first binding. */
 function isUnsetRequiredInput(error) {
     return typeof error === 'object' && error !== null && error.code === -950;
@@ -22512,9 +22712,24 @@ class KjTableRow {
     /** TanStack row instance — pass from getRowModel().rows. */
     kjRow = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "kjRow" }] : /* istanbul ignore next */ []));
+    /**
+     * Overrides the 1-based `aria-rowindex` — for rows whose place in the grid
+     * is not their `row.index`, like the children of a tree row. `null`
+     * (default) derives it from the row.
+     */
+    kjAriaRowIndex = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjAriaRowIndex" }] : /* istanbul ignore next */ []));
     table = injectParent(KJ_TABLE, { child: 'KjTableRow', parent: '[kjTable]' });
     /** 1-based ARIA index — accounts for header row(s). */
-    ariaRowIndex = computed(() => this.kjRow().index + 2, /* @ts-ignore */
+    ariaRowIndex = computed(() => {
+        const override = this.kjAriaRowIndex();
+        if (override != null)
+            return override;
+        const row = this.kjRow();
+        // Infinite mode: the row's place in the whole result set, not in the loaded window.
+        const source = row.depth === 0 ? this.table.sourceIndex()?.[row.index] : undefined;
+        return (source ?? row.index) + 2;
+    }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ariaRowIndex" }] : /* istanbul ignore next */ []));
     isSelectable = computed(() => Object.keys(this.table.state.rowSelection()).length >= 0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isSelectable" }] : /* istanbul ignore next */ [])); // always true if selection enabled
@@ -22525,7 +22740,7 @@ class KjTableRow {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isSelected" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjTableRow, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: KjTableRow, isStandalone: true, selector: "[kjTableRow]", inputs: { kjRow: { classPropertyName: "kjRow", publicName: "kjRow", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "row" }, properties: { "attr.aria-rowindex": "ariaRowIndex()", "attr.aria-selected": "isSelectable() ? isSelected() : null", "attr.data-selected": "isSelected() ? \"\" : null" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: KjTableRow, isStandalone: true, selector: "[kjTableRow]", inputs: { kjRow: { classPropertyName: "kjRow", publicName: "kjRow", isSignal: true, isRequired: true, transformFunction: null }, kjAriaRowIndex: { classPropertyName: "kjAriaRowIndex", publicName: "kjAriaRowIndex", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "row" }, properties: { "attr.aria-rowindex": "ariaRowIndex()", "attr.aria-selected": "isSelectable() ? isSelected() : null", "attr.data-selected": "isSelected() ? \"\" : null" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjTableRow, decorators: [{
             type: Directive,
@@ -22539,7 +22754,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         '[attr.data-selected]': 'isSelected() ? "" : null',
                     },
                 }]
-        }], propDecorators: { kjRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjRow", required: true }] }] } });
+        }], propDecorators: { kjRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjRow", required: true }] }], kjAriaRowIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjAriaRowIndex", required: false }] }] } });
 
 /** Context token provided by `KjTableKeyboardNav` and injected by `KjTableCell`. */
 const KJ_TABLE_KEYBOARD_NAV = new InjectionToken('KjTableKeyboardNav');