@kouji-ui/components 0.3.0 → 0.4.0

package/fesm2022/kouji-ui-components.mjs

@@ -13772,6 +13772,14 @@ class KjTableComponent {
     ...(ngDevMode ? [{ debugName: "kjEnableRowPinning" }] : /* istanbul ignore next */ []));
     kjEditOnDoubleClick = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "kjEditOnDoubleClick" }] : /* istanbul ignore next */ []));
+    /**
+     * Rows per page. `'all'` disables paging so every row renders and the
+     * body scrolls (pair with a fixed-height host). `null` keeps the default
+     * page size (25) — project `<kj-table-pagination>` to expose the controls;
+     * without it the rows beyond the page are silently cut off.
+     */
+    kjPageSize = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjPageSize" }] : /* istanbul ignore next */ []));
     // ── Row expansion template ─────────────────────────────────────────────
     /** Template for master-detail row expansion. Receives `$implicit = row`. */
     kjRowExpansionTpl = contentChild('kjRowExpansion', /* @ts-ignore */
@@ -13906,6 +13914,16 @@ class KjTableComponent {
         }),
     };
     constructor() {
+        // `kjPageSize` input → pagination state. `'all'` renders every row
+        // (scroll instead of paging).
+        effect(() => {
+            const size = this.kjPageSize();
+            if (size == null)
+                return;
+            this.t.setState({
+                pagination: { pageIndex: 0, pageSize: size === 'all' ? Number.MAX_SAFE_INTEGER : size },
+            });
+        });
         // Wrapper's `kjDensity` input → hosted directive's density state. Both
         // the user's external binding AND the toolbar's density toggle write
         // into `KjTable.density` via `setState`, so a single source of truth
@@ -14200,7 +14218,7 @@ class KjTableComponent {
         this.editingCell.set(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: KjTableComponent, isStandalone: true, selector: "kj-table", inputs: { kjResource: { classPropertyName: "kjResource", publicName: "kjResource", isSignal: true, isRequired: false, transformFunction: null }, kjDensity: { classPropertyName: "kjDensity", publicName: "kjDensity", isSignal: true, isRequired: false, transformFunction: null }, kjVariant: { classPropertyName: "kjVariant", publicName: "kjVariant", isSignal: true, isRequired: false, transformFunction: null }, kjLoading: { classPropertyName: "kjLoading", publicName: "kjLoading", isSignal: true, isRequired: false, transformFunction: null }, kjSelection: { classPropertyName: "kjSelection", publicName: "kjSelection", isSignal: true, isRequired: false, transformFunction: null }, kjSelectionMode: { classPropertyName: "kjSelectionMode", publicName: "kjSelectionMode", isSignal: true, isRequired: false, transformFunction: null }, kjShowSelectionColumn: { classPropertyName: "kjShowSelectionColumn", publicName: "kjShowSelectionColumn", isSignal: true, isRequired: false, transformFunction: null }, kjStorageKey: { classPropertyName: "kjStorageKey", publicName: "kjStorageKey", isSignal: true, isRequired: false, transformFunction: null }, kjStorageAdapter: { classPropertyName: "kjStorageAdapter", publicName: "kjStorageAdapter", isSignal: true, isRequired: false, transformFunction: null }, kjVirtual: { classPropertyName: "kjVirtual", publicName: "kjVirtual", isSignal: true, isRequired: false, transformFunction: null }, kjEstimatedRowSize: { classPropertyName: "kjEstimatedRowSize", publicName: "kjEstimatedRowSize", isSignal: true, isRequired: false, transformFunction: null }, kjEnableFilters: { classPropertyName: "kjEnableFilters", publicName: "kjEnableFilters", isSignal: true, isRequired: false, transformFunction: null }, kjEnableResize: { classPropertyName: "kjEnableResize", publicName: "kjEnableResize", isSignal: true, isRequired: false, transformFunction: null }, kjEnableRowPinning: { classPropertyName: "kjEnableRowPinning", publicName: "kjEnableRowPinning", isSignal: true, isRequired: false, transformFunction: null }, kjEditOnDoubleClick: { classPropertyName: "kjEditOnDoubleClick", publicName: "kjEditOnDoubleClick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { kjSelection: "kjSelectionChange", cellEdit: "cellEdit", stateChange: "stateChange", rowClick: "rowClick", rowDoubleClick: "rowDoubleClick" }, host: { properties: { "attr.data-density": "t.state.density()", "attr.data-variant": "kjVariant()", "attr.data-loading": "isLoading() ? \"\" : null", "attr.data-error": "hasError() ? \"\" : null" } }, queries: [{ propertyName: "kjRowExpansionTpl", first: true, predicate: ["kjRowExpansion"], descendants: true, isSignal: true }, { propertyName: "cellTemplates", predicate: KjCellTemplateDirective, isSignal: true }], hostDirectives: [{ directive: i1.KjTable, inputs: ["kjTable", "kjColumns", "kjTableData", "kjData", "kjGetRowId", "kjGetRowId"] }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: KjTableComponent, isStandalone: true, selector: "kj-table", inputs: { kjResource: { classPropertyName: "kjResource", publicName: "kjResource", isSignal: true, isRequired: false, transformFunction: null }, kjDensity: { classPropertyName: "kjDensity", publicName: "kjDensity", isSignal: true, isRequired: false, transformFunction: null }, kjVariant: { classPropertyName: "kjVariant", publicName: "kjVariant", isSignal: true, isRequired: false, transformFunction: null }, kjLoading: { classPropertyName: "kjLoading", publicName: "kjLoading", isSignal: true, isRequired: false, transformFunction: null }, kjSelection: { classPropertyName: "kjSelection", publicName: "kjSelection", isSignal: true, isRequired: false, transformFunction: null }, kjSelectionMode: { classPropertyName: "kjSelectionMode", publicName: "kjSelectionMode", isSignal: true, isRequired: false, transformFunction: null }, kjShowSelectionColumn: { classPropertyName: "kjShowSelectionColumn", publicName: "kjShowSelectionColumn", isSignal: true, isRequired: false, transformFunction: null }, kjStorageKey: { classPropertyName: "kjStorageKey", publicName: "kjStorageKey", isSignal: true, isRequired: false, transformFunction: null }, kjStorageAdapter: { classPropertyName: "kjStorageAdapter", publicName: "kjStorageAdapter", isSignal: true, isRequired: false, transformFunction: null }, kjVirtual: { classPropertyName: "kjVirtual", publicName: "kjVirtual", isSignal: true, isRequired: false, transformFunction: null }, kjEstimatedRowSize: { classPropertyName: "kjEstimatedRowSize", publicName: "kjEstimatedRowSize", isSignal: true, isRequired: false, transformFunction: null }, kjEnableFilters: { classPropertyName: "kjEnableFilters", publicName: "kjEnableFilters", isSignal: true, isRequired: false, transformFunction: null }, kjEnableResize: { classPropertyName: "kjEnableResize", publicName: "kjEnableResize", isSignal: true, isRequired: false, transformFunction: null }, kjEnableRowPinning: { classPropertyName: "kjEnableRowPinning", publicName: "kjEnableRowPinning", isSignal: true, isRequired: false, transformFunction: null }, kjEditOnDoubleClick: { classPropertyName: "kjEditOnDoubleClick", publicName: "kjEditOnDoubleClick", isSignal: true, isRequired: false, transformFunction: null }, kjPageSize: { classPropertyName: "kjPageSize", publicName: "kjPageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { kjSelection: "kjSelectionChange", cellEdit: "cellEdit", stateChange: "stateChange", rowClick: "rowClick", rowDoubleClick: "rowDoubleClick" }, host: { properties: { "attr.data-density": "t.state.density()", "attr.data-variant": "kjVariant()", "attr.data-loading": "isLoading() ? \"\" : null", "attr.data-error": "hasError() ? \"\" : null" } }, queries: [{ propertyName: "kjRowExpansionTpl", first: true, predicate: ["kjRowExpansion"], descendants: true, isSignal: true }, { propertyName: "cellTemplates", predicate: KjCellTemplateDirective, isSignal: true }], hostDirectives: [{ directive: i1.KjTable, inputs: ["kjTable", "kjColumns", "kjTableData", "kjData", "kjGetRowId", "kjGetRowId"] }], ngImport: i0, template: `
     <div class="kj-table-wrapper">
       <!-- Toolbar projection: matches either an explicit [kjToolbar] marker
            OR the styled <kj-table-toolbar> element directly, so users don't
@@ -14900,7 +14918,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       <ng-content />
     </div>
   `, encapsulation: ViewEncapsulation.Emulated, styles: [":host{display:flex;flex-direction:column;min-height:0;min-width:0;font-family:var(--kj-font-sans);font-size:var(--kj-text-sm);--kj-table-row-height: 2.25rem}:host([data-density=\"compact\"]){--kj-table-row-height: 1.75rem}:host([data-density=\"comfortable\"]){--kj-table-row-height: 2.75rem}.kj-table-wrapper{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;min-width:0;position:relative}.kj-table-body{position:relative;overflow:auto;display:block;flex:1 1 auto;min-height:0;min-width:0}.kj-table-body>table{min-width:100%}:host th,:host td{height:var(--kj-table-row-height)}:host table{width:100%;border-collapse:collapse;background:var(--kj-bg-surface);color:var(--kj-fg-default)}:host th,:host td{text-align:left;padding:var(--kj-base-space-sm) var(--kj-base-space-md);border-bottom:1px solid var(--kj-border-default);position:relative}:host th{font-weight:600;background:var(--kj-bg-elevated)}:host th[aria-sort]{-webkit-user-select:none;user-select:none}.kj-table-sort-indicator{display:inline-flex;align-items:center;margin-inline-start:var(--kj-base-space-xs, .25rem);color:var(--kj-fg-subtle, var(--kj-fg-muted));transition:color var(--kj-transition);vertical-align:middle}:host th[data-sort=asc] .kj-table-sort-indicator,:host th[data-sort=desc] .kj-table-sort-indicator{color:var(--kj-fg-primary)}:host th[aria-sort]:hover .kj-table-sort-indicator,:host th[aria-sort]:focus-visible .kj-table-sort-indicator{color:var(--kj-fg-default)}:host([data-density=\"compact\"]) th,:host([data-density=\"compact\"]) td{padding:var(--kj-base-space-xs) var(--kj-base-space-sm)}:host([data-density=\"comfortable\"]) th,:host([data-density=\"comfortable\"]) td{padding:var(--kj-base-space-md) var(--kj-base-space-lg)}:host([data-variant=\"striped\"]) tbody tr:nth-child(2n) td{background:var(--kj-bg-elevated)}:host([data-variant=\"clean\"]) th,:host([data-variant=\"clean\"]) td{border-bottom-color:transparent}:host td:focus-visible,:host th:focus-visible{outline:2px solid var(--kj-border-focus);outline-offset:-2px}:host td.kj-table-cell--editing{position:relative}:host td .kj-table-cell-ghost{visibility:hidden;white-space:pre;display:inline-block;pointer-events:none}:host td.kj-table-cell--editing ::ng-deep kj-text-editor,:host td.kj-table-cell--editing ::ng-deep kj-number-editor,:host td.kj-table-cell--editing ::ng-deep kj-select-editor,:host td.kj-table-cell--editing ::ng-deep kj-date-editor,:host td.kj-table-cell--editing ::ng-deep kj-boolean-editor{position:absolute!important;inset:0!important;display:flex!important;align-items:center!important;padding:inherit!important;background:var(--kj-bg-surface);z-index:1}:host td.kj-table-cell--editing ::ng-deep kj-input,:host td.kj-table-cell--editing ::ng-deep kj-number-input,:host td.kj-table-cell--editing ::ng-deep kj-select{display:flex!important;width:100%!important;min-width:0!important;box-sizing:border-box}:host td.kj-table-cell--editing ::ng-deep input,:host td.kj-table-cell--editing ::ng-deep .kj-select-trigger{width:100%!important;min-width:0!important;box-sizing:border-box}:host td .kj-table-editor-anchor{display:none}:host tr[data-selected] td{background:color-mix(in oklab,var(--kj-bg-primary, var(--kj-bg-accent, currentColor)) 12%,var(--kj-bg-surface))}:host tr[data-selected] td:first-child{box-shadow:inset 3px 0 0 0 var(--kj-bg-primary, var(--kj-fg-primary))}:host td[data-pin=left],:host th[data-pin=left]{position:sticky;left:0;z-index:1;background:var(--kj-bg-surface)}:host td[data-pin=right],:host th[data-pin=right]{position:sticky;right:0;z-index:1;background:var(--kj-bg-surface)}:host td[data-pin=left]:not(:has(+td[data-pin=left])),:host th[data-pin=left]:not(:has(+th[data-pin=left])){border-right:1px solid var(--kj-border-strong, var(--kj-border-default));box-shadow:4px 0 6px -4px #00000040}:host tr>:not([data-pin=right])+td[data-pin=right],:host tr>:not([data-pin=right])+th[data-pin=right]{border-left:1px solid var(--kj-border-strong, var(--kj-border-default));box-shadow:-4px 0 6px -4px #00000040}:host([data-variant=\"striped\"]) tbody tr:nth-child(2n) td[data-pin]{background:var(--kj-bg-elevated)}.kj-table-resize-handle{position:absolute;top:25%;right:0;width:6px;height:50%;cursor:col-resize;-webkit-user-select:none;user-select:none;touch-action:none;background:transparent;border-right:2px solid var(--kj-border-strong, var(--kj-border-default));transition:border-color var(--kj-transition),background var(--kj-transition),width var(--kj-transition)}.kj-table-resize-handle:hover,.kj-table-resize-handle:focus-visible{border-right-color:var(--kj-border-focus);background:color-mix(in srgb,var(--kj-border-focus) 20%,transparent);width:8px;outline:none}:host th[data-resizing] .kj-table-resize-handle{top:0;height:9999px;width:0;background:transparent;border-right:2px solid var(--kj-border-focus, var(--kj-bg-primary));transform:translate(var(--kj-resize-delta, 0px));pointer-events:none;z-index:3;transition:none}:host th.kj-table-select-cell,:host td.kj-table-select-cell{width:2.5rem;padding-inline:var(--kj-base-space-sm);text-align:center;vertical-align:middle}.kj-table-select-cell kj-checkbox{display:inline-flex;align-items:center;justify-content:center}.kj-table-filter-row>th{font-weight:400;background:var(--kj-bg-surface);border-top:1px solid var(--kj-border-muted, var(--kj-border-default))}.kj-table-filter-cell{padding-top:var(--kj-base-space-xs);padding-bottom:var(--kj-base-space-xs);vertical-align:middle}.kj-table-filter-cell .kj-table-filter-anchor+*,.kj-table-filter-cell kj-input,.kj-table-filter-cell kj-number-input,.kj-table-filter-cell kj-date-picker,.kj-table-filter-cell kj-select{width:100%}.kj-table-filter-anchor{display:block;width:100%}:host .kj-table-editor-anchor .kj-input,:host .kj-table-editor-anchor .kj-select{--kj-input-height: 1.75rem;--kj-input-font-size: var(--kj-text-xs);--kj-input-padding-x: var(--kj-base-space-sm);--kj-input-padding-y: 0;--kj-input-radius: var(--kj-radius-selector)}.kj-table-empty,.kj-table-error,.kj-table-loading{display:flex;align-items:center;justify-content:center;padding:var(--kj-base-space-lg);color:var(--kj-fg-muted)}.kj-table-loading{position:absolute;inset:0;background:color-mix(in srgb,var(--kj-bg-surface) 70%,transparent);pointer-events:none}.kj-table-loading[data-has-rows]{inset:0 0 auto;height:2px;background:var(--kj-bg-primary);padding:0;animation:kj-table-loading-pulse 1.4s ease-in-out infinite}.kj-table-loading[data-has-rows] .kj-table-loading-fallback,.kj-table-loading[data-has-rows] ::ng-deep [kjLoading]{display:none}@keyframes kj-table-loading-pulse{0%,to{opacity:.55}50%{opacity:1}}.kj-table-error{color:var(--kj-fg-error, var(--kj-fg-default))}.kj-table-loading-fallback{font-size:var(--kj-text-sm)}.kj-table-expansion-row>td{background:var(--kj-bg-elevated)}.kj-table-tbody-pinned[data-pin=top]>tr>td{background:var(--kj-bg-elevated);border-bottom:2px solid var(--kj-border-primary, var(--kj-border-strong, var(--kj-border-default)));box-shadow:0 4px 6px -4px #00000040;position:sticky;top:0;z-index:2}.kj-table-tbody-pinned[data-pin=bottom]>tr>td{background:var(--kj-bg-elevated);border-top:2px solid var(--kj-border-primary, var(--kj-border-strong, var(--kj-border-default)));box-shadow:0 -4px 6px -4px #00000040;position:sticky;bottom:0;z-index:2}.kj-table-group-toggle{display:inline-flex;align-items:center;gap:var(--kj-base-space-xs, .25rem);background:transparent;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}.kj-table-group-toggle__chevron{display:inline-block;width:.75rem;font-family:var(--kj-font-mono);color:var(--kj-fg-muted);transition:transform var(--kj-transition)}.kj-table-group-toggle[aria-expanded=true] .kj-table-group-toggle__chevron{transform:rotate(90deg)}.kj-table-group-toggle__count{margin-inline-start:var(--kj-base-space-xs, .25rem);font-size:.75em;color:var(--kj-fg-muted);font-variant-numeric:tabular-nums}:host tbody tr[data-row-grouped] td{background:var(--kj-bg-elevated);font-weight:600}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { kjResource: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjResource", required: false }] }], kjDensity: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjDensity", required: false }] }], kjVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjVariant", required: false }] }], kjLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjLoading", required: false }] }], kjSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjSelection", required: false }] }, { type: i0.Output, args: ["kjSelectionChange"] }], kjSelectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjSelectionMode", required: false }] }], kjShowSelectionColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjShowSelectionColumn", required: false }] }], kjStorageKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjStorageKey", required: false }] }], kjStorageAdapter: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjStorageAdapter", required: false }] }], kjVirtual: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjVirtual", required: false }] }], kjEstimatedRowSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjEstimatedRowSize", required: false }] }], kjEnableFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjEnableFilters", required: false }] }], kjEnableResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjEnableResize", required: false }] }], kjEnableRowPinning: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjEnableRowPinning", required: false }] }], kjEditOnDoubleClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjEditOnDoubleClick", required: false }] }], kjRowExpansionTpl: [{ type: i0.ContentChild, args: ['kjRowExpansion', { isSignal: true }] }], cellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KjCellTemplateDirective), { isSignal: true }] }], cellEdit: [{ type: i0.Output, args: ["cellEdit"] }], stateChange: [{ type: i0.Output, args: ["stateChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowDoubleClick: [{ type: i0.Output, args: ["rowDoubleClick"] }] } });
+        }], ctorParameters: () => [], propDecorators: { kjResource: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjResource", required: false }] }], kjDensity: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjDensity", required: false }] }], kjVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjVariant", required: false }] }], kjLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjLoading", required: false }] }], kjSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjSelection", required: false }] }, { type: i0.Output, args: ["kjSelectionChange"] }], kjSelectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjSelectionMode", required: false }] }], kjShowSelectionColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjShowSelectionColumn", required: false }] }], kjStorageKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjStorageKey", required: false }] }], kjStorageAdapter: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjStorageAdapter", required: false }] }], kjVirtual: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjVirtual", required: false }] }], kjEstimatedRowSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjEstimatedRowSize", required: false }] }], kjEnableFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjEnableFilters", required: false }] }], kjEnableResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjEnableResize", required: false }] }], kjEnableRowPinning: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjEnableRowPinning", required: false }] }], kjEditOnDoubleClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjEditOnDoubleClick", required: false }] }], kjPageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjPageSize", required: false }] }], kjRowExpansionTpl: [{ type: i0.ContentChild, args: ['kjRowExpansion', { isSignal: true }] }], cellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KjCellTemplateDirective), { isSignal: true }] }], cellEdit: [{ type: i0.Output, args: ["cellEdit"] }], stateChange: [{ type: i0.Output, args: ["stateChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowDoubleClick: [{ type: i0.Output, args: ["rowDoubleClick"] }] } });
 // ── helpers ───────────────────────────────────────────────────────────────
 function cellMeta(col) {
     return col.columnDef.meta?.kj;