@frame-kit/ui-ng 0.0.1

package/fesm2022/frame-kit-ui-ng-ui-data-table.mjs

@@ -0,0 +1,1288 @@
+import * as i0 from '@angular/core';
+import { input, output, inject, ElementRef, Renderer2, NgZone, Directive, Injectable, signal, computed, ChangeDetectionStrategy, Component, DestroyRef, viewChild, effect, HostBinding } from '@angular/core';
+import { NgTemplateOutlet, NgStyle } from '@angular/common';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+class ColumnResizeDirective {
+    columnId = input.required({ ...(ngDevMode ? { debugName: "columnId" } : /* istanbul ignore next */ {}), alias: 'fkColumnResize' });
+    enabled = input(true, ...(ngDevMode ? [{ debugName: "enabled" }] : /* istanbul ignore next */ []));
+    minWidth = input(50, ...(ngDevMode ? [{ debugName: "minWidth" }] : /* istanbul ignore next */ []));
+    maxWidth = input(null, ...(ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []));
+    columnResize = output();
+    el = inject((ElementRef));
+    renderer = inject(Renderer2);
+    ngZone = inject(NgZone);
+    handle = null;
+    startX = 0;
+    startWidth = 0;
+    dragging = false;
+    moveListener = null;
+    upListener = null;
+    ngOnInit() {
+        if (!this.enabled()) {
+            return;
+        }
+        this.handle = this.renderer.createElement('div');
+        this.renderer.addClass(this.handle, 'fk-data-table__resize-handle');
+        this.renderer.appendChild(this.el.nativeElement, this.handle);
+        this.ngZone.runOutsideAngular(() => {
+            this.handle?.addEventListener('mousedown', this.onMouseDown);
+            this.handle?.addEventListener('touchstart', this.onTouchStart, {
+                passive: false,
+            });
+        });
+    }
+    ngOnDestroy() {
+        this.cleanupListeners();
+        this.handle?.removeEventListener('mousedown', this.onMouseDown);
+        this.handle?.removeEventListener('touchstart', this.onTouchStart);
+    }
+    onMouseDown = (event) => {
+        event.preventDefault();
+        this.startDrag(event.clientX);
+        this.moveListener = this.renderer.listen('document', 'mousemove', (e) => this.onDrag(e.clientX));
+        this.upListener = this.renderer.listen('document', 'mouseup', () => this.endDrag());
+    };
+    onTouchStart = (event) => {
+        event.preventDefault();
+        const touch = event.touches[0];
+        this.startDrag(touch.clientX);
+        this.moveListener = this.renderer.listen('document', 'touchmove', (e) => this.onDrag(e.touches[0].clientX));
+        this.upListener = this.renderer.listen('document', 'touchend', () => this.endDrag());
+    };
+    startDrag(clientX) {
+        this.dragging = true;
+        this.startX = clientX;
+        this.startWidth = this.el.nativeElement.offsetWidth;
+        this.renderer.addClass(document.body, 'fk-data-table--resizing');
+    }
+    onDrag(clientX) {
+        if (!this.dragging) {
+            return;
+        }
+        const diff = clientX - this.startX;
+        const min = this.minWidth();
+        const max = this.maxWidth();
+        let newWidth = this.startWidth + diff;
+        if (newWidth < min) {
+            newWidth = min;
+        }
+        if (max !== null && newWidth > max) {
+            newWidth = max;
+        }
+        this.renderer.setStyle(this.el.nativeElement, 'width', `${newWidth}px`);
+    }
+    endDrag() {
+        if (!this.dragging) {
+            return;
+        }
+        this.dragging = false;
+        this.renderer.removeClass(document.body, 'fk-data-table--resizing');
+        this.cleanupListeners();
+        const finalWidth = this.el.nativeElement.offsetWidth;
+        this.ngZone.run(() => {
+            this.columnResize.emit({
+                columnId: this.columnId(),
+                width: finalWidth,
+            });
+        });
+    }
+    cleanupListeners() {
+        if (this.moveListener) {
+            this.moveListener();
+            this.moveListener = null;
+        }
+        if (this.upListener) {
+            this.upListener();
+            this.upListener = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ColumnResizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: ColumnResizeDirective, isStandalone: true, selector: "[fkColumnResize]", inputs: { columnId: { classPropertyName: "columnId", publicName: "fkColumnResize", isSignal: true, isRequired: true, transformFunction: null }, enabled: { classPropertyName: "enabled", publicName: "enabled", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columnResize: "columnResize" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ColumnResizeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fkColumnResize]',
+                    standalone: true,
+                }]
+        }], propDecorators: { columnId: [{ type: i0.Input, args: [{ isSignal: true, alias: "fkColumnResize", required: true }] }], enabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "enabled", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], columnResize: [{ type: i0.Output, args: ["columnResize"] }] } });
+
+const DEFAULT_TABLE_CONFIG = {
+    responsiveMode: 'auto',
+    forceScroll: false,
+    stickyHeader: true,
+    showHeader: true,
+    rowExpansion: false,
+    emptyMessage: 'No data available',
+    trackBy: (index) => index,
+    rowStyleFn: null,
+    virtualization: 'auto',
+    virtualizationThreshold: 200,
+    rowHeight: 48,
+    overscan: 10,
+    breakpoints: {
+        sm: '(max-width: 35.999em)',
+        md: '(max-width: 47.999em)',
+    },
+};
+
+/**
+ * Coordinator scoped to a single `<fk-data-table-group>`. Mirrors
+ * `AccordionGroupCoordinator` — when a wrapped data-table expands a
+ * row, the previously-active row is collapsed so only one detail
+ * panel is open at a time.
+ *
+ * The wrapped data-table picks this up via `inject({ optional: true })`
+ * and routes every expansion toggle through it. Absence of the
+ * coordinator means multi-expand behavior — that's the default.
+ */
+class DataTableGroupCoordinator {
+    activeTable = null;
+    activeKey = null;
+    /**
+     * Resolve an expansion request. Caller passes the new expanded
+     * state alongside the table + row key; coordinator returns the
+     * Set the caller should commit. For multi-table groups this also
+     * collapses any active row on a sibling table.
+     */
+    resolveToggle(table, key, nextExpanded, currentKeysOnThisTable) {
+        if (!nextExpanded) {
+            // Collapse: drop the key from this table's set. If it was the
+            // active one, clear our pointer.
+            const next = new Set(currentKeysOnThisTable);
+            next.delete(key);
+            if (this.activeTable === table && this.activeKey === key) {
+                this.activeTable = null;
+                this.activeKey = null;
+            }
+            return { keysForThisTable: next, siblingTableToClear: null };
+        }
+        // Expand: replace this table's set with just the new key, and
+        // surface any sibling table that needs to drop its active row.
+        const next = new Set([key]);
+        const sibling = this.activeTable && this.activeTable !== table ? this.activeTable : null;
+        this.activeTable = table;
+        this.activeKey = key;
+        return { keysForThisTable: next, siblingTableToClear: sibling };
+    }
+    /**
+     * Called when a data-table inside the group disconnects. Clears the
+     * active pointer if it was tracking this table.
+     */
+    unregister(table) {
+        if (this.activeTable === table) {
+            this.activeTable = null;
+            this.activeKey = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DataTableGroupCoordinator, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DataTableGroupCoordinator });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DataTableGroupCoordinator, decorators: [{
+            type: Injectable
+        }] });
+
+class DataTableStackComponent {
+    /** Row data array rendered as stacked cards in mobile layout. */
+    rows = input([], ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    /** Column definitions used to extract field labels and cell values. */
+    columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    /** Merged table configuration passed down from the host data-table. */
+    config = input(null, ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+    /** TrackBy function used by the `@for` loop over rows. */
+    trackByFn = input((index) => index, ...(ngDevMode ? [{ debugName: "trackByFn" }] : /* istanbul ignore next */ []));
+    // ===== SELECTION =====
+    // Mirrors the host data-table's selection inputs. The stack path renders a
+    // checkbox at the top-left of each card when `rowSelection` is true and
+    // bubbles toggle events up to the host so it can route them through the
+    // shared engine.
+    /** Mirrors the host table's `rowSelection` input to show checkboxes on each card. */
+    rowSelection = input(false, ...(ngDevMode ? [{ debugName: "rowSelection" }] : /* istanbul ignore next */ []));
+    /** Currently selected row keys forwarded from the host table engine. */
+    selectedKeys = input(new Set(), ...(ngDevMode ? [{ debugName: "selectedKeys" }] : /* istanbul ignore next */ []));
+    /** Row identity resolver forwarded from the host table. */
+    getRowId = input(null, ...(ngDevMode ? [{ debugName: "getRowId" }] : /* istanbul ignore next */ []));
+    /** Predicate (or static boolean) that disables selection for matching rows. */
+    selectionDisabled = input(false, ...(ngDevMode ? [{ debugName: "selectionDisabled" }] : /* istanbul ignore next */ []));
+    /** Accessible label for each card's selection checkbox. */
+    selectionLabel = input('Select row', ...(ngDevMode ? [{ debugName: "selectionLabel" }] : /* istanbul ignore next */ []));
+    /** Fires when the user clicks a card row, emitting the row context. */
+    rowClick = output();
+    /** Fires when the user toggles a card's selection checkbox, bubbling up to the host. */
+    toggleRow = output();
+    expandedRows = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedRows" }] : /* istanbul ignore next */ []));
+    visibleFieldCount = 3;
+    primaryColumns = computed(() => {
+        return this.columns().slice(0, this.visibleFieldCount);
+    }, ...(ngDevMode ? [{ debugName: "primaryColumns" }] : /* istanbul ignore next */ []));
+    secondaryColumns = computed(() => {
+        return this.columns().slice(this.visibleFieldCount);
+    }, ...(ngDevMode ? [{ debugName: "secondaryColumns" }] : /* istanbul ignore next */ []));
+    hasSecondary = computed(() => {
+        return this.secondaryColumns().length > 0;
+    }, ...(ngDevMode ? [{ debugName: "hasSecondary" }] : /* istanbul ignore next */ []));
+    getCellValue(column, row) {
+        if (typeof column.accessor === 'function') {
+            return column.accessor(row);
+        }
+        return row[column.accessor];
+    }
+    getLabel(column) {
+        return column.mobileLabel ?? column.header;
+    }
+    isExpanded(index) {
+        return this.expandedRows().has(index);
+    }
+    toggleExpand(index) {
+        const next = new Set(this.expandedRows());
+        if (next.has(index)) {
+            next.delete(index);
+        }
+        else {
+            next.add(index);
+        }
+        this.expandedRows.set(next);
+    }
+    onRowClick(row, index) {
+        this.rowClick.emit({
+            row,
+            index,
+            selected: this.isRowSelected(row),
+            expanded: this.isExpanded(index),
+        });
+    }
+    onToggleSelection(row, event) {
+        event.stopPropagation();
+        if (this.isRowSelectionDisabled(row)) {
+            return;
+        }
+        this.toggleRow.emit({ row, event });
+    }
+    isRowSelected(row) {
+        if (!this.rowSelection()) {
+            return false;
+        }
+        return this.selectedKeys().has(this.getSelectionKey(row));
+    }
+    isRowSelectionDisabled(row) {
+        const disabled = this.selectionDisabled();
+        if (typeof disabled === 'function') {
+            return disabled(row);
+        }
+        return disabled;
+    }
+    getSelectionKey(row) {
+        const idFn = this.getRowId();
+        if (idFn) {
+            return idFn(row);
+        }
+        return row;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DataTableStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DataTableStackComponent, isStandalone: true, selector: "fk-data-table-stack", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, trackByFn: { classPropertyName: "trackByFn", publicName: "trackByFn", isSignal: true, isRequired: false, transformFunction: null }, rowSelection: { classPropertyName: "rowSelection", publicName: "rowSelection", isSignal: true, isRequired: false, transformFunction: null }, selectedKeys: { classPropertyName: "selectedKeys", publicName: "selectedKeys", isSignal: true, isRequired: false, transformFunction: null }, getRowId: { classPropertyName: "getRowId", publicName: "getRowId", isSignal: true, isRequired: false, transformFunction: null }, selectionDisabled: { classPropertyName: "selectionDisabled", publicName: "selectionDisabled", isSignal: true, isRequired: false, transformFunction: null }, selectionLabel: { classPropertyName: "selectionLabel", publicName: "selectionLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowClick: "rowClick", toggleRow: "toggleRow" }, ngImport: i0, template: "<div class=\"fk-data-table-stack\">\n  @for (row of rows(); track trackByFn()($index, row); let i = $index) {\n    <div\n      class=\"fk-data-table-stack__card\"\n      [class.fk-data-table-stack__card--selected]=\"isRowSelected(row)\"\n    >\n      @if (rowSelection()) {\n        <div class=\"fk-data-table-stack__select\">\n          <input\n            type=\"checkbox\"\n            class=\"fk-data-table-stack__checkbox\"\n            [attr.aria-label]=\"selectionLabel()\"\n            [checked]=\"isRowSelected(row)\"\n            [disabled]=\"isRowSelectionDisabled(row)\"\n            (click)=\"onToggleSelection(row, $event)\"\n          />\n        </div>\n      }\n\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n      <div class=\"fk-data-table-stack__primary\" (click)=\"onRowClick(row, i)\">\n        @for (column of primaryColumns(); track column.id) {\n          <div class=\"fk-data-table-stack__field\">\n            <span class=\"fk-data-table-stack__label\">{{\n              getLabel(column)\n            }}</span>\n            <span class=\"fk-data-table-stack__value\">\n              @if (column.cellRenderer) {\n                <ng-container\n                  [ngTemplateOutlet]=\"column.cellRenderer\"\n                  [ngTemplateOutletContext]=\"{\n                    $implicit: getCellValue(column, row),\n                    row: row,\n                  }\"\n                />\n              } @else {\n                {{ getCellValue(column, row) }}\n              }\n            </span>\n          </div>\n        }\n      </div>\n\n      @if (hasSecondary()) {\n        @if (isExpanded(i)) {\n          <div class=\"fk-data-table-stack__secondary\">\n            @for (column of secondaryColumns(); track column.id) {\n              <div class=\"fk-data-table-stack__field\">\n                <span class=\"fk-data-table-stack__label\">{{\n                  getLabel(column)\n                }}</span>\n                <span class=\"fk-data-table-stack__value\">\n                  @if (column.cellRenderer) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"column.cellRenderer\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: getCellValue(column, row),\n                        row: row,\n                      }\"\n                    />\n                  } @else {\n                    {{ getCellValue(column, row) }}\n                  }\n                </span>\n              </div>\n            }\n          </div>\n        }\n\n        <button\n          class=\"fk-data-table-stack__toggle\"\n          type=\"button\"\n          [attr.aria-expanded]=\"isExpanded(i)\"\n          (click)=\"toggleExpand(i)\"\n        >\n          {{ isExpanded(i) ? 'Show less' : 'Show more' }}\n        </button>\n      }\n    </div>\n  }\n\n  @if (rows().length === 0) {\n    <div class=\"fk-data-table-stack__empty\">\n      {{ config()?.emptyMessage ?? 'No data available' }}\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.fk-data-table-stack{display:flex;flex-direction:column;gap:var(--fk-data-table-stack-gap, var(--fk-rhythm-3, .75rem))}.fk-data-table-stack__card{background:var(--fk-data-table-body-bg, var(--fk-color-surface, #ffffff));border:1px solid var(--fk-data-table-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-data-table-stack-radius, var(--fk-radius-md, .5rem));overflow:hidden;position:relative}.fk-data-table-stack__card--selected{background:var(--fk-data-table-row-selected-bg, var(--fk-color-primary-light, #eaf4ff))}.fk-data-table-stack__select{padding:var(--fk-rhythm-2, .5rem) var(--fk-data-table-cell-padding, var(--fk-rhythm-3, .75rem)) 0}.fk-data-table-stack__checkbox{appearance:none;width:var(--fk-data-table-checkbox-size, 1rem);height:var(--fk-data-table-checkbox-size, 1rem);margin:0;border:1px solid var(--fk-data-table-checkbox-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-data-table-checkbox-radius, .25rem);background:var(--fk-data-table-checkbox-bg, var(--fk-color-surface, #ffffff));cursor:pointer;position:relative;vertical-align:middle}.fk-data-table-stack__checkbox:focus-visible{outline:none;box-shadow:var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18))}.fk-data-table-stack__checkbox:checked{background:var(--fk-data-table-checkbox-checked-bg, var(--fk-color-primary, #0a84ff));border-color:var(--fk-data-table-checkbox-checked-border-color, var(--fk-color-primary, #0a84ff))}.fk-data-table-stack__checkbox:checked:after{content:\"\";position:absolute;inset:0;background:var(--fk-data-table-checkbox-icon-color, var(--fk-white, #ffffff));mask:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='currentColor' d='M6.5 11L3 7.5l1-1L6.5 9 12 3.5l1 1z'/></svg>\") center/75% 75% no-repeat;-webkit-mask:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='currentColor' d='M6.5 11L3 7.5l1-1L6.5 9 12 3.5l1 1z'/></svg>\") center/75% 75% no-repeat}.fk-data-table-stack__checkbox:disabled{cursor:not-allowed;opacity:.5}.fk-data-table-stack__primary{padding:var(--fk-data-table-cell-padding, var(--fk-rhythm-3, .75rem));cursor:pointer}.fk-data-table-stack__primary:hover{background:var(--fk-data-table-row-hover-bg, var(--fk-color-surface-muted, #f7f9fb))}.fk-data-table-stack__secondary{padding:0 var(--fk-data-table-cell-padding, var(--fk-rhythm-3, .75rem)) var(--fk-data-table-cell-padding, var(--fk-rhythm-3, .75rem))}.fk-data-table-stack__field{display:flex;justify-content:space-between;align-items:baseline;padding:var(--fk-rhythm-1, .25rem) 0}.fk-data-table-stack__field:not(:last-child){border-bottom:1px solid var(--fk-data-table-stack-field-border, var(--fk-color-border-light, rgba(0, 0, 0, .06)))}.fk-data-table-stack__label{font-size:var(--fk-data-table-head-font-size, var(--fk-typography-small-font-size, .875rem));font-weight:var(--fk-data-table-head-font-weight, var(--fk-font-weight-semibold, 600));color:var(--fk-data-table-head-color, var(--fk-color-text-muted, #6b7a8d));flex-shrink:0;margin-inline-end:var(--fk-rhythm-3, .75rem)}.fk-data-table-stack__value{font-size:var(--fk-data-table-body-font-size, var(--fk-typography-body-font-size, .875rem));color:var(--fk-data-table-body-color, var(--fk-color-text, #1f2d3d));text-align:end;word-break:break-word}.fk-data-table-stack__toggle{display:block;width:100%;padding:var(--fk-rhythm-2, .5rem);border:none;border-top:1px solid var(--fk-data-table-border-color, var(--fk-color-border, #d9e2ee));background:var(--fk-data-table-head-bg, var(--fk-color-surface-muted, #f7f9fb));color:var(--fk-data-table-stack-toggle-color, var(--fk-color-primary, #3b82f6));font-size:var(--fk-typography-small-font-size, .875rem);font-weight:var(--fk-font-weight-semibold, 600);cursor:pointer;text-align:center}.fk-data-table-stack__toggle:hover{background:var(--fk-data-table-row-hover-bg, var(--fk-color-surface-muted, #f7f9fb))}.fk-data-table-stack__toggle:focus-visible{outline:2px solid var(--fk-color-primary, #3b82f6);outline-offset:-2px}.fk-data-table-stack__empty{padding:var(--fk-data-table-empty-padding, var(--fk-rhythm-8, 2rem));text-align:center;color:var(--fk-data-table-empty-color, var(--fk-color-text-muted, #6b7a8d));font-size:var(--fk-data-table-body-font-size, var(--fk-typography-body-font-size, .875rem))}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DataTableStackComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-data-table-stack', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fk-data-table-stack\">\n  @for (row of rows(); track trackByFn()($index, row); let i = $index) {\n    <div\n      class=\"fk-data-table-stack__card\"\n      [class.fk-data-table-stack__card--selected]=\"isRowSelected(row)\"\n    >\n      @if (rowSelection()) {\n        <div class=\"fk-data-table-stack__select\">\n          <input\n            type=\"checkbox\"\n            class=\"fk-data-table-stack__checkbox\"\n            [attr.aria-label]=\"selectionLabel()\"\n            [checked]=\"isRowSelected(row)\"\n            [disabled]=\"isRowSelectionDisabled(row)\"\n            (click)=\"onToggleSelection(row, $event)\"\n          />\n        </div>\n      }\n\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n      <div class=\"fk-data-table-stack__primary\" (click)=\"onRowClick(row, i)\">\n        @for (column of primaryColumns(); track column.id) {\n          <div class=\"fk-data-table-stack__field\">\n            <span class=\"fk-data-table-stack__label\">{{\n              getLabel(column)\n            }}</span>\n            <span class=\"fk-data-table-stack__value\">\n              @if (column.cellRenderer) {\n                <ng-container\n                  [ngTemplateOutlet]=\"column.cellRenderer\"\n                  [ngTemplateOutletContext]=\"{\n                    $implicit: getCellValue(column, row),\n                    row: row,\n                  }\"\n                />\n              } @else {\n                {{ getCellValue(column, row) }}\n              }\n            </span>\n          </div>\n        }\n      </div>\n\n      @if (hasSecondary()) {\n        @if (isExpanded(i)) {\n          <div class=\"fk-data-table-stack__secondary\">\n            @for (column of secondaryColumns(); track column.id) {\n              <div class=\"fk-data-table-stack__field\">\n                <span class=\"fk-data-table-stack__label\">{{\n                  getLabel(column)\n                }}</span>\n                <span class=\"fk-data-table-stack__value\">\n                  @if (column.cellRenderer) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"column.cellRenderer\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: getCellValue(column, row),\n                        row: row,\n                      }\"\n                    />\n                  } @else {\n                    {{ getCellValue(column, row) }}\n                  }\n                </span>\n              </div>\n            }\n          </div>\n        }\n\n        <button\n          class=\"fk-data-table-stack__toggle\"\n          type=\"button\"\n          [attr.aria-expanded]=\"isExpanded(i)\"\n          (click)=\"toggleExpand(i)\"\n        >\n          {{ isExpanded(i) ? 'Show less' : 'Show more' }}\n        </button>\n      }\n    </div>\n  }\n\n  @if (rows().length === 0) {\n    <div class=\"fk-data-table-stack__empty\">\n      {{ config()?.emptyMessage ?? 'No data available' }}\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.fk-data-table-stack{display:flex;flex-direction:column;gap:var(--fk-data-table-stack-gap, var(--fk-rhythm-3, .75rem))}.fk-data-table-stack__card{background:var(--fk-data-table-body-bg, var(--fk-color-surface, #ffffff));border:1px solid var(--fk-data-table-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-data-table-stack-radius, var(--fk-radius-md, .5rem));overflow:hidden;position:relative}.fk-data-table-stack__card--selected{background:var(--fk-data-table-row-selected-bg, var(--fk-color-primary-light, #eaf4ff))}.fk-data-table-stack__select{padding:var(--fk-rhythm-2, .5rem) var(--fk-data-table-cell-padding, var(--fk-rhythm-3, .75rem)) 0}.fk-data-table-stack__checkbox{appearance:none;width:var(--fk-data-table-checkbox-size, 1rem);height:var(--fk-data-table-checkbox-size, 1rem);margin:0;border:1px solid var(--fk-data-table-checkbox-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-data-table-checkbox-radius, .25rem);background:var(--fk-data-table-checkbox-bg, var(--fk-color-surface, #ffffff));cursor:pointer;position:relative;vertical-align:middle}.fk-data-table-stack__checkbox:focus-visible{outline:none;box-shadow:var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18))}.fk-data-table-stack__checkbox:checked{background:var(--fk-data-table-checkbox-checked-bg, var(--fk-color-primary, #0a84ff));border-color:var(--fk-data-table-checkbox-checked-border-color, var(--fk-color-primary, #0a84ff))}.fk-data-table-stack__checkbox:checked:after{content:\"\";position:absolute;inset:0;background:var(--fk-data-table-checkbox-icon-color, var(--fk-white, #ffffff));mask:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='currentColor' d='M6.5 11L3 7.5l1-1L6.5 9 12 3.5l1 1z'/></svg>\") center/75% 75% no-repeat;-webkit-mask:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='currentColor' d='M6.5 11L3 7.5l1-1L6.5 9 12 3.5l1 1z'/></svg>\") center/75% 75% no-repeat}.fk-data-table-stack__checkbox:disabled{cursor:not-allowed;opacity:.5}.fk-data-table-stack__primary{padding:var(--fk-data-table-cell-padding, var(--fk-rhythm-3, .75rem));cursor:pointer}.fk-data-table-stack__primary:hover{background:var(--fk-data-table-row-hover-bg, var(--fk-color-surface-muted, #f7f9fb))}.fk-data-table-stack__secondary{padding:0 var(--fk-data-table-cell-padding, var(--fk-rhythm-3, .75rem)) var(--fk-data-table-cell-padding, var(--fk-rhythm-3, .75rem))}.fk-data-table-stack__field{display:flex;justify-content:space-between;align-items:baseline;padding:var(--fk-rhythm-1, .25rem) 0}.fk-data-table-stack__field:not(:last-child){border-bottom:1px solid var(--fk-data-table-stack-field-border, var(--fk-color-border-light, rgba(0, 0, 0, .06)))}.fk-data-table-stack__label{font-size:var(--fk-data-table-head-font-size, var(--fk-typography-small-font-size, .875rem));font-weight:var(--fk-data-table-head-font-weight, var(--fk-font-weight-semibold, 600));color:var(--fk-data-table-head-color, var(--fk-color-text-muted, #6b7a8d));flex-shrink:0;margin-inline-end:var(--fk-rhythm-3, .75rem)}.fk-data-table-stack__value{font-size:var(--fk-data-table-body-font-size, var(--fk-typography-body-font-size, .875rem));color:var(--fk-data-table-body-color, var(--fk-color-text, #1f2d3d));text-align:end;word-break:break-word}.fk-data-table-stack__toggle{display:block;width:100%;padding:var(--fk-rhythm-2, .5rem);border:none;border-top:1px solid var(--fk-data-table-border-color, var(--fk-color-border, #d9e2ee));background:var(--fk-data-table-head-bg, var(--fk-color-surface-muted, #f7f9fb));color:var(--fk-data-table-stack-toggle-color, var(--fk-color-primary, #3b82f6));font-size:var(--fk-typography-small-font-size, .875rem);font-weight:var(--fk-font-weight-semibold, 600);cursor:pointer;text-align:center}.fk-data-table-stack__toggle:hover{background:var(--fk-data-table-row-hover-bg, var(--fk-color-surface-muted, #f7f9fb))}.fk-data-table-stack__toggle:focus-visible{outline:2px solid var(--fk-color-primary, #3b82f6);outline-offset:-2px}.fk-data-table-stack__empty{padding:var(--fk-data-table-empty-padding, var(--fk-rhythm-8, 2rem));text-align:center;color:var(--fk-data-table-empty-color, var(--fk-color-text-muted, #6b7a8d));font-size:var(--fk-data-table-body-font-size, var(--fk-typography-body-font-size, .875rem))}\n"] }]
+        }], propDecorators: { rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], trackByFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackByFn", required: false }] }], rowSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSelection", required: false }] }], selectedKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedKeys", required: false }] }], getRowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "getRowId", required: false }] }], selectionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionDisabled", required: false }] }], selectionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionLabel", required: false }] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], toggleRow: [{ type: i0.Output, args: ["toggleRow"] }] } });
+
+class ResponsiveStrategyService {
+    // ===== INJECTIONS =====
+    breakpointObserver = inject(BreakpointObserver);
+    destroyRef = inject(DestroyRef);
+    // ===== SOURCE DATA =====
+    columns = signal([], ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    config = signal(null, ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+    // ===== STATE =====
+    currentBreakpoint = signal('lg', ...(ngDevMode ? [{ debugName: "currentBreakpoint" }] : /* istanbul ignore next */ []));
+    // ===== COMPUTED =====
+    activeMode = computed(() => {
+        const cfg = this.config();
+        if (!cfg) {
+            return 'table';
+        }
+        if (cfg.forceScroll) {
+            return 'table';
+        }
+        const mode = cfg.responsiveMode;
+        const bp = this.currentBreakpoint();
+        if (mode === 'scroll') {
+            return 'table';
+        }
+        if (mode === 'stack') {
+            return bp === 'sm' ? 'stack' : 'table';
+        }
+        if (mode === 'priority') {
+            return 'table';
+        }
+        // mode === "auto"
+        if (bp === 'sm') {
+            return 'stack';
+        }
+        return 'table';
+    }, ...(ngDevMode ? [{ debugName: "activeMode" }] : /* istanbul ignore next */ []));
+    responsiveColumns = computed(() => {
+        const cols = this.columns();
+        const cfg = this.config();
+        if (!cfg || cfg.forceScroll) {
+            return cols;
+        }
+        const bp = this.currentBreakpoint();
+        const mode = cfg.responsiveMode;
+        if (bp === 'lg') {
+            return cols;
+        }
+        if (mode === 'scroll') {
+            return cols;
+        }
+        // For "auto", "priority", or "stack" at md breakpoint — apply priority hiding
+        if (bp === 'md' && (mode === 'auto' || mode === 'priority')) {
+            return cols.filter((col) => {
+                if (col.hideBelow === 'md' || col.hideBelow === 'lg') {
+                    return false;
+                }
+                if (col.priority !== undefined && col.priority >= 2) {
+                    return false;
+                }
+                return true;
+            });
+        }
+        return cols;
+    }, ...(ngDevMode ? [{ debugName: "responsiveColumns" }] : /* istanbul ignore next */ []));
+    hiddenColumns = computed(() => {
+        const all = this.columns();
+        const visible = this.responsiveColumns();
+        const visibleIds = new Set(visible.map((c) => c.id));
+        return all.filter((c) => !visibleIds.has(c.id));
+    }, ...(ngDevMode ? [{ debugName: "hiddenColumns" }] : /* istanbul ignore next */ []));
+    // ===== INITIALIZATION =====
+    initialized = false;
+    init(breakpoints) {
+        if (this.initialized) {
+            return;
+        }
+        this.initialized = true;
+        this.breakpointObserver
+            .observe([breakpoints.sm, breakpoints.md])
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((result) => {
+            if (result.breakpoints[breakpoints.sm]) {
+                this.currentBreakpoint.set('sm');
+            }
+            else if (result.breakpoints[breakpoints.md]) {
+                this.currentBreakpoint.set('md');
+            }
+            else {
+                this.currentBreakpoint.set('lg');
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ResponsiveStrategyService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ResponsiveStrategyService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ResponsiveStrategyService, decorators: [{
+            type: Injectable
+        }] });
+
+class TableEngineService {
+    // ===== SOURCE DATA =====
+    rows = signal([], ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    columns = signal([], ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    // ===== INTERNAL STATE =====
+    internalSortState = signal(null, ...(ngDevMode ? [{ debugName: "internalSortState" }] : /* istanbul ignore next */ []));
+    internalFilterState = signal({
+        query: '',
+        columnFilters: {},
+    }, ...(ngDevMode ? [{ debugName: "internalFilterState" }] : /* istanbul ignore next */ []));
+    internalPageState = signal(null, ...(ngDevMode ? [{ debugName: "internalPageState" }] : /* istanbul ignore next */ []));
+    // ===== CONTROLLED STATE =====
+    controlledSortState = signal(undefined, ...(ngDevMode ? [{ debugName: "controlledSortState" }] : /* istanbul ignore next */ []));
+    controlledFilterState = signal(undefined, ...(ngDevMode ? [{ debugName: "controlledFilterState" }] : /* istanbul ignore next */ []));
+    controlledPageState = signal(undefined, ...(ngDevMode ? [{ debugName: "controlledPageState" }] : /* istanbul ignore next */ []));
+    // ===== EFFECTIVE STATE =====
+    sortState = computed(() => {
+        const controlled = this.controlledSortState();
+        if (controlled !== undefined) {
+            return controlled;
+        }
+        return this.internalSortState();
+    }, ...(ngDevMode ? [{ debugName: "sortState" }] : /* istanbul ignore next */ []));
+    filterState = computed(() => {
+        const controlled = this.controlledFilterState();
+        if (controlled !== undefined && controlled !== null) {
+            return controlled;
+        }
+        return this.internalFilterState();
+    }, ...(ngDevMode ? [{ debugName: "filterState" }] : /* istanbul ignore next */ []));
+    pageState = computed(() => {
+        const controlled = this.controlledPageState();
+        if (controlled !== undefined) {
+            return controlled;
+        }
+        return this.internalPageState();
+    }, ...(ngDevMode ? [{ debugName: "pageState" }] : /* istanbul ignore next */ []));
+    // ===== SELECTION =====
+    // Engine-owned (uncontrolled) selection state. The host data-table reads
+    // from a controlled `selectedKeys` input when present and only writes
+    // through `setSelectedKeys` here when running in uncontrolled mode.
+    // Action methods stay pure — they compute the next Set from a current
+    // Set and return it; they never mutate the input Set.
+    selectedKeys = signal(new Set(), ...(ngDevMode ? [{ debugName: "selectedKeys" }] : /* istanbul ignore next */ []));
+    // ===== EXPANSION =====
+    // Mirror of selection: engine-owned Set of expanded row keys when the
+    // host runs in uncontrolled mode. The host swaps to a controlled
+    // `expandedKeys` input when supplied, the same way selection does.
+    expandedKeys = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedKeys" }] : /* istanbul ignore next */ []));
+    // ===== PROCESSED ROWS =====
+    sortedRows = computed(() => {
+        const rows = this.rows();
+        const sort = this.sortState();
+        if (!sort || !sort.direction) {
+            return rows;
+        }
+        const column = this.columns().find((c) => c.id === sort.columnId);
+        if (!column) {
+            return rows;
+        }
+        const direction = sort.direction;
+        return [...rows].sort((a, b) => {
+            const valA = column.sortAccessor
+                ? column.sortAccessor(a)
+                : this.resolveAccessor(column.accessor, a);
+            const valB = column.sortAccessor
+                ? column.sortAccessor(b)
+                : this.resolveAccessor(column.accessor, b);
+            return this.compare(valA, valB, direction);
+        });
+    }, ...(ngDevMode ? [{ debugName: "sortedRows" }] : /* istanbul ignore next */ []));
+    filteredRows = computed(() => {
+        const rows = this.sortedRows();
+        const filter = this.filterState();
+        if (!filter.query && Object.keys(filter.columnFilters).length === 0) {
+            return rows;
+        }
+        const columns = this.columns();
+        const query = filter.query.toLowerCase();
+        return rows.filter((row) => {
+            if (query) {
+                const matches = columns.some((col) => {
+                    const val = this.resolveAccessor(col.accessor, row);
+                    return String(val ?? '')
+                        .toLowerCase()
+                        .includes(query);
+                });
+                if (!matches) {
+                    return false;
+                }
+            }
+            return true;
+        });
+    }, ...(ngDevMode ? [{ debugName: "filteredRows" }] : /* istanbul ignore next */ []));
+    processedRows = computed(() => {
+        const rows = this.filteredRows();
+        const page = this.pageState();
+        if (!page) {
+            return rows;
+        }
+        const start = page.page * page.pageSize;
+        return rows.slice(start, start + page.pageSize);
+    }, ...(ngDevMode ? [{ debugName: "processedRows" }] : /* istanbul ignore next */ []));
+    totalFilteredRows = computed(() => {
+        return this.filteredRows().length;
+    }, ...(ngDevMode ? [{ debugName: "totalFilteredRows" }] : /* istanbul ignore next */ []));
+    // ===== ACTIONS =====
+    toggleSort(columnId) {
+        const current = this.sortState();
+        let direction;
+        if (current?.columnId === columnId) {
+            if (current.direction === 'asc') {
+                direction = 'desc';
+            }
+            else if (current.direction === 'desc') {
+                direction = null;
+            }
+            else {
+                direction = 'asc';
+            }
+        }
+        else {
+            direction = 'asc';
+        }
+        const next = { columnId, direction };
+        if (this.controlledSortState() === undefined) {
+            this.internalSortState.set(next);
+        }
+        return next;
+    }
+    setFilter(query) {
+        const next = {
+            ...this.filterState(),
+            query,
+        };
+        if (this.controlledFilterState() === undefined) {
+            this.internalFilterState.set(next);
+        }
+        return next;
+    }
+    setPage(page, pageSize) {
+        const current = this.pageState();
+        const next = {
+            page,
+            pageSize: pageSize ?? current?.pageSize ?? 10,
+            totalRows: this.totalFilteredRows(),
+        };
+        if (this.controlledPageState() === undefined) {
+            this.internalPageState.set(next);
+        }
+        return next;
+    }
+    /**
+     * Replace the engine's internal selection state. Used by the host
+     * data-table when running in uncontrolled mode (controlled mode goes
+     * through the parent and never touches the engine here).
+     */
+    setSelectedKeys(next) {
+        this.selectedKeys.set(next);
+    }
+    /**
+     * Replace the engine's internal expansion state. Used by the host
+     * data-table when running in uncontrolled mode.
+     */
+    setExpandedKeys(next) {
+        this.expandedKeys.set(next);
+    }
+    /**
+     * Toggle a single key in a Set. Derives from `current` and returns a
+     * brand-new Set — never mutates the input.
+     */
+    toggleSelection(key, current = this.selectedKeys()) {
+        const next = new Set(current);
+        if (next.has(key)) {
+            next.delete(key);
+        }
+        else {
+            next.add(key);
+        }
+        return next;
+    }
+    /**
+     * Page-local select-all. Toggles every key in `visibleKeys`:
+     * - if all visible keys are already selected → deselect them
+     * - otherwise → select them all (existing selections outside the visible
+     *   range stay intact)
+     *
+     * `disabledKeys` is excluded from both the toggle target and the
+     * "all-selected" check, so a row marked `selectionDisabled` never
+     * blocks the header checkbox from going fully checked.
+     */
+    toggleVisibleRows(visibleKeys, disabledKeys = new Set(), current = this.selectedKeys()) {
+        const eligible = [];
+        for (const key of visibleKeys) {
+            if (!disabledKeys.has(key)) {
+                eligible.push(key);
+            }
+        }
+        const allSelected = eligible.length > 0 && eligible.every((key) => current.has(key));
+        const next = new Set(current);
+        if (allSelected) {
+            for (const key of eligible) {
+                next.delete(key);
+            }
+        }
+        else {
+            for (const key of eligible) {
+                next.add(key);
+            }
+        }
+        return next;
+    }
+    clearSelection() {
+        return new Set();
+    }
+    isSelected(key) {
+        return this.selectedKeys().has(key);
+    }
+    // ===== HELPERS =====
+    resolveAccessor(accessor, row) {
+        if (typeof accessor === 'function') {
+            return accessor(row);
+        }
+        return row[accessor];
+    }
+    compare(a, b, direction) {
+        const multiplier = direction === 'asc' ? 1 : -1;
+        if (a == null && b == null) {
+            return 0;
+        }
+        if (a == null) {
+            return 1 * multiplier;
+        }
+        if (b == null) {
+            return -1 * multiplier;
+        }
+        if (typeof a === 'string' && typeof b === 'string') {
+            return a.localeCompare(b) * multiplier;
+        }
+        if (typeof a === 'number' && typeof b === 'number') {
+            return (a - b) * multiplier;
+        }
+        return String(a).localeCompare(String(b)) * multiplier;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TableEngineService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TableEngineService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TableEngineService, decorators: [{
+            type: Injectable
+        }] });
+
+class VirtualizationEngineService {
+    // ===== CONFIGURATION =====
+    rowHeight = signal(48, ...(ngDevMode ? [{ debugName: "rowHeight" }] : /* istanbul ignore next */ []));
+    overscan = signal(10, ...(ngDevMode ? [{ debugName: "overscan" }] : /* istanbul ignore next */ []));
+    totalRows = signal(0, ...(ngDevMode ? [{ debugName: "totalRows" }] : /* istanbul ignore next */ []));
+    // ===== VIEWPORT STATE =====
+    viewportHeight = signal(0, ...(ngDevMode ? [{ debugName: "viewportHeight" }] : /* istanbul ignore next */ []));
+    scrollTop = signal(0, ...(ngDevMode ? [{ debugName: "scrollTop" }] : /* istanbul ignore next */ []));
+    // ===== COMPUTED =====
+    visibleRange = computed(() => {
+        const height = this.viewportHeight();
+        const scroll = this.scrollTop();
+        const rh = this.rowHeight();
+        const os = this.overscan();
+        const total = this.totalRows();
+        if (rh <= 0 || total === 0) {
+            return { start: 0, end: 0 };
+        }
+        const visibleCount = Math.ceil(height / rh);
+        const firstVisible = Math.floor(scroll / rh);
+        const start = Math.max(0, firstVisible - os);
+        const end = Math.min(total, firstVisible + visibleCount + os);
+        return { start, end };
+    }, ...(ngDevMode ? [{ debugName: "visibleRange" }] : /* istanbul ignore next */ []));
+    totalHeight = computed(() => {
+        return this.totalRows() * this.rowHeight();
+    }, ...(ngDevMode ? [{ debugName: "totalHeight" }] : /* istanbul ignore next */ []));
+    offsetY = computed(() => {
+        return this.visibleRange().start * this.rowHeight();
+    }, ...(ngDevMode ? [{ debugName: "offsetY" }] : /* istanbul ignore next */ []));
+    visibleCount = computed(() => {
+        const range = this.visibleRange();
+        return range.end - range.start;
+    }, ...(ngDevMode ? [{ debugName: "visibleCount" }] : /* istanbul ignore next */ []));
+    // ===== ACTIONS =====
+    onScroll(scrollTop) {
+        this.scrollTop.set(scrollTop);
+    }
+    onViewportResize(height) {
+        this.viewportHeight.set(height);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VirtualizationEngineService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VirtualizationEngineService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VirtualizationEngineService, decorators: [{
+            type: Injectable
+        }] });
+
+class DataTableComponent {
+    // ===== BASE PROPS =====
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    // ===== DATA =====
+    /** Column definitions that describe the table schema, headers, and cell rendering. */
+    columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    /** Array of row data objects rendered by the table. */
+    rows = input([], ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    /** Partial table configuration merged with the defaults. */
+    config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+    /** When true, shows the loading overlay and suppresses the empty state. */
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    // ===== CONTROLLED STATE =====
+    /** Controlled sort state; pass null to let the table manage sorting internally. */
+    sortState = input(null, ...(ngDevMode ? [{ debugName: "sortState" }] : /* istanbul ignore next */ []));
+    /** Controlled filter state; pass null to let the table manage filtering internally. */
+    filterState = input(null, ...(ngDevMode ? [{ debugName: "filterState" }] : /* istanbul ignore next */ []));
+    /** Controlled page state; pass null to let the table manage pagination internally. */
+    pageState = input(null, ...(ngDevMode ? [{ debugName: "pageState" }] : /* istanbul ignore next */ []));
+    // ===== SELECTION =====
+    // Opt-in via `rowSelection`. When the parent passes a `selectedKeys` Set the
+    // table runs in controlled mode (parent owns state, table emits a new Set on
+    // every change). When `selectedKeys` is null the table manages selection
+    // internally — useful for Storybook and simple cases.
+    //
+    // `getRowId` is REQUIRED when `rowSelection` is true. Without a stable
+    // row identity selection silently breaks across pagination. The constructor
+    // logs a console error if it's missing in dev.
+    /** Opt-in to row selection; requires `getRowId` for controlled mode across pagination. */
+    rowSelection = input(false, ...(ngDevMode ? [{ debugName: "rowSelection" }] : /* istanbul ignore next */ []));
+    /** Controlled set of selected row keys; null lets the table manage selection internally. */
+    selectedKeys = input(null, ...(ngDevMode ? [{ debugName: "selectedKeys" }] : /* istanbul ignore next */ []));
+    /** Function that returns a stable unique key for each row, required when `rowSelection` is true. */
+    getRowId = input(null, ...(ngDevMode ? [{ debugName: "getRowId" }] : /* istanbul ignore next */ []));
+    /** Predicate (or static boolean) that disables selection for matching rows. */
+    selectionDisabled = input(false, ...(ngDevMode ? [{ debugName: "selectionDisabled" }] : /* istanbul ignore next */ []));
+    /** Whether the checkbox column appears at the start or end of the table. */
+    selectionColumnPosition = input('start', ...(ngDevMode ? [{ debugName: "selectionColumnPosition" }] : /* istanbul ignore next */ []));
+    /** Accessible label for each row's selection checkbox. */
+    selectionLabel = input('Select row', ...(ngDevMode ? [{ debugName: "selectionLabel" }] : /* istanbul ignore next */ []));
+    // ===== EXPANSION =====
+    // Opt-in via `rowDetailTemplate`. When present the table auto-injects
+    // a chevron column at start (default) or end and renders the projected
+    // template as a detail row beneath each expanded row.
+    //
+    // `expandedKeys` mirrors the selection contract: pass a Set to run in
+    // controlled mode (parent owns state, table emits the new Set on every
+    // toggle) or omit to let the engine manage state internally.
+    //
+    // `expandableRow` lets a host predicate-disable expansion per row —
+    // the chevron renders as an inert spacer so columns stay aligned.
+    /** Template rendered as the expansion detail row; presence enables the feature. */
+    rowDetailTemplate = input(null, ...(ngDevMode ? [{ debugName: "rowDetailTemplate" }] : /* istanbul ignore next */ []));
+    /** Whether the chevron column appears at the start or end of the table. */
+    expansionColumnPosition = input('start', ...(ngDevMode ? [{ debugName: "expansionColumnPosition" }] : /* istanbul ignore next */ []));
+    /** Controlled set of expanded row keys; null lets the engine manage state internally. */
+    expandedKeys = input(null, ...(ngDevMode ? [{ debugName: "expandedKeys" }] : /* istanbul ignore next */ []));
+    /** Predicate that disables expansion for matching rows; default: every row is expandable. */
+    expandableRow = input(null, ...(ngDevMode ? [{ debugName: "expandableRow" }] : /* istanbul ignore next */ []));
+    /** Accessible label for each row's expansion chevron. */
+    expansionLabel = input('Toggle row details', ...(ngDevMode ? [{ debugName: "expansionLabel" }] : /* istanbul ignore next */ []));
+    // ===== OUTPUTS =====
+    /** Fires when the user clicks a sortable column header, emitting the new sort state. */
+    sortChange = output();
+    /** Fires when a filter changes, emitting the updated filter state. */
+    filterChange = output();
+    /** Fires when the user navigates to a different page or changes page size. */
+    pageChange = output();
+    /** Fires when the user clicks a table row, emitting the row context. */
+    rowClick = output();
+    /** Fires when the selection set changes, emitting the full new set of selected keys. */
+    selectionChange = output();
+    /** Fires when the expansion set changes, emitting the full new set of expanded keys. */
+    expansionChange = output();
+    /** Fires when the user finishes resizing a column, emitting the column id and new width. */
+    columnResize = output();
+    // ===== ENGINE =====
+    engine;
+    virtEngine;
+    responsive = inject((ResponsiveStrategyService));
+    // ===== VIEW CHILDREN =====
+    virtualViewport = viewChild('virtualViewport', ...(ngDevMode ? [{ debugName: "virtualViewport" }] : /* istanbul ignore next */ []));
+    // ===== COMPUTED =====
+    mergedConfig = computed(() => {
+        return { ...DEFAULT_TABLE_CONFIG, ...this.config() };
+    }, ...(ngDevMode ? [{ debugName: "mergedConfig" }] : /* istanbul ignore next */ []));
+    visibleColumns = computed(() => {
+        const responsiveCols = this.responsive.responsiveColumns();
+        return responsiveCols.filter((col) => col.visible !== false);
+    }, ...(ngDevMode ? [{ debugName: "visibleColumns" }] : /* istanbul ignore next */ []));
+    activeMode = computed(() => {
+        return this.responsive.activeMode();
+    }, ...(ngDevMode ? [{ debugName: "activeMode" }] : /* istanbul ignore next */ []));
+    useVirtualization = computed(() => {
+        const config = this.mergedConfig();
+        const rowCount = this.rows().length;
+        if (config.virtualization === true) {
+            return true;
+        }
+        if (config.virtualization === false) {
+            return false;
+        }
+        return rowCount > config.virtualizationThreshold;
+    }, ...(ngDevMode ? [{ debugName: "useVirtualization" }] : /* istanbul ignore next */ []));
+    virtualRows = computed(() => {
+        const rows = this.engine.processedRows();
+        const range = this.virtEngine.visibleRange();
+        return rows.slice(range.start, range.end);
+    }, ...(ngDevMode ? [{ debugName: "virtualRows" }] : /* istanbul ignore next */ []));
+    virtualStartIndex = computed(() => {
+        return this.virtEngine.visibleRange().start;
+    }, ...(ngDevMode ? [{ debugName: "virtualStartIndex" }] : /* istanbul ignore next */ []));
+    isEmpty = computed(() => {
+        return this.engine.processedRows().length === 0 && !this.loading();
+    }, ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        return [
+            'fk-data-table',
+            this.loading() ? 'fk-data-table--loading' : '',
+            this.isEmpty() ? 'fk-data-table--empty' : '',
+            this.mergedConfig().stickyHeader ? 'fk-data-table--sticky-header' : '',
+            this.useVirtualization() ? 'fk-data-table--virtual' : '',
+            this.activeMode() === 'stack' ? 'fk-data-table--stack' : '',
+            this.className(),
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    get hostId() {
+        return this.id();
+    }
+    ngZone = inject(NgZone);
+    /**
+     * Optional group coordinator picked up via DI when this table is
+     * wrapped in `<fk-data-table-group>`. Presence flips expansion to
+     * single-open mode; absence keeps multi-expand behavior (the
+     * default).
+     */
+    groupCoordinator = inject(DataTableGroupCoordinator, {
+        optional: true,
+    });
+    constructor() {
+        this.engine = new TableEngineService();
+        this.virtEngine = new VirtualizationEngineService();
+        // Clean up the coordinator's active-pointer when this table is torn
+        // down so a sibling expansion doesn't try to collapse a stale ref.
+        inject(DestroyRef).onDestroy(() => {
+            this.groupCoordinator?.unregister(this);
+        });
+        effect(() => {
+            this.engine.rows.set(this.rows());
+        });
+        effect(() => {
+            this.engine.columns.set(this.columns());
+        });
+        effect(() => {
+            const sort = this.sortState();
+            this.engine.controlledSortState.set(sort === null ? undefined : sort);
+        });
+        effect(() => {
+            const filter = this.filterState();
+            this.engine.controlledFilterState.set(filter === null ? undefined : filter);
+        });
+        effect(() => {
+            const page = this.pageState();
+            this.engine.controlledPageState.set(page === null ? undefined : page);
+        });
+        // Dev-mode: warn once per misconfiguration when selection is enabled
+        // but no row id resolver is provided. Without it `getSelectionKey`
+        // falls back to row reference which silently breaks across pagination
+        // since each fetch returns brand-new objects.
+        let warnedNoRowId = false;
+        effect(() => {
+            if (this.rowSelection() && this.getRowId() === null && !warnedNoRowId) {
+                warnedNoRowId = true;
+                console.error('[fk-data-table] `rowSelection` is true but `getRowId` was not ' +
+                    'provided. Selection requires a stable row identifier — set ' +
+                    "`[getRowId]` to a function returning each row's unique key.");
+            }
+        });
+        // Sync virtualization config
+        effect(() => {
+            const config = this.mergedConfig();
+            this.virtEngine.rowHeight.set(config.rowHeight);
+            this.virtEngine.overscan.set(config.overscan);
+        });
+        // Sync total row count into virtualization engine
+        effect(() => {
+            this.virtEngine.totalRows.set(this.engine.processedRows().length);
+        });
+        // Sync responsive strategy
+        effect(() => {
+            this.responsive.columns.set(this.columns());
+        });
+        effect(() => {
+            this.responsive.config.set(this.mergedConfig());
+        });
+        // Initialize breakpoint observer
+        effect(() => {
+            const config = this.mergedConfig();
+            this.responsive.init(config.breakpoints);
+        });
+    }
+    // ===== TEMPLATE HELPERS =====
+    /** Resolves the display value for a cell given its column definition and row data. */
+    getCellValue(column, row) {
+        if (typeof column.accessor === 'function') {
+            return column.accessor(row);
+        }
+        return row[column.accessor];
+    }
+    /** Returns the trackBy function from the merged config for use in `*ngFor`. */
+    getTrackBy() {
+        return this.mergedConfig().trackBy;
+    }
+    // ===== SELECTION HELPERS =====
+    /**
+     * Source of truth for which keys are currently selected. Reads the
+     * controlled `selectedKeys` input when the parent supplied one;
+     * otherwise falls back to the engine's internal state (uncontrolled
+     * mode). Computed so changes flow through Angular's signal graph
+     * without effect-write timing surprises.
+     */
+    effectiveSelectedKeys = computed(() => {
+        const controlled = this.selectedKeys();
+        if (controlled !== null) {
+            return controlled;
+        }
+        return this.engine.selectedKeys();
+    }, ...(ngDevMode ? [{ debugName: "effectiveSelectedKeys" }] : /* istanbul ignore next */ []));
+    /**
+     * Public alias of `effectiveSelectedKeys` for the stack (mobile) child
+     * binding. The private field stays private to discourage callers from
+     * reaching past the API.
+     */
+    effectiveSelectedKeysForTemplate = this.effectiveSelectedKeys;
+    /**
+     * Resolve a row's selection key. Uses the explicit `getRowId` input
+     * when provided; otherwise falls back to the row reference itself
+     * (which only works if rows are object-stable across renders — fine
+     * for uncontrolled-mode demos, broken across server-side pagination).
+     */
+    /** Resolves a stable selection key for the given row using `getRowId` or falling back to the row reference. */
+    getSelectionKey(row) {
+        const idFn = this.getRowId();
+        if (idFn) {
+            return idFn(row);
+        }
+        return row;
+    }
+    /** Returns true if the given row is currently in the selected keys set. */
+    isRowSelected(row) {
+        return this.effectiveSelectedKeys().has(this.getSelectionKey(row));
+    }
+    /** Returns true if selection is disabled for the given row per the `selectionDisabled` input. */
+    isRowSelectionDisabled(row) {
+        const disabled = this.selectionDisabled();
+        if (typeof disabled === 'function') {
+            return disabled(row);
+        }
+        return disabled;
+    }
+    /**
+     * Selection state of the header checkbox, derived from visible rows ∩
+     * `effectiveSelectedKeys`. Disabled rows are excluded — they can't
+     * contribute to the all-selected check.
+     */
+    headerSelectionState = computed(() => {
+        if (!this.rowSelection()) {
+            return 'unchecked';
+        }
+        const selected = this.effectiveSelectedKeys();
+        const visibleEligible = this.visibleSelectableRows();
+        if (visibleEligible.length === 0) {
+            return 'unchecked';
+        }
+        let hits = 0;
+        for (const row of visibleEligible) {
+            if (selected.has(this.getSelectionKey(row))) {
+                hits++;
+            }
+        }
+        if (hits === 0) {
+            return 'unchecked';
+        }
+        if (hits === visibleEligible.length) {
+            return 'checked';
+        }
+        return 'indeterminate';
+    }, ...(ngDevMode ? [{ debugName: "headerSelectionState" }] : /* istanbul ignore next */ []));
+    /**
+     * Rows currently visible in the body (post-pagination) excluding any
+     * marked as selection-disabled. The header checkbox toggles only over
+     * this set.
+     */
+    visibleSelectableRows = computed(() => {
+        return this.engine
+            .processedRows()
+            .filter((row) => !this.isRowSelectionDisabled(row));
+    }, ...(ngDevMode ? [{ debugName: "visibleSelectableRows" }] : /* istanbul ignore next */ []));
+    // ===== SELECTION ACTIONS =====
+    onToggleRow(row, event) {
+        event.stopPropagation();
+        if (this.isRowSelectionDisabled(row)) {
+            return;
+        }
+        const key = this.getSelectionKey(row);
+        const current = this.effectiveSelectedKeys();
+        const next = new Set(current);
+        if (next.has(key)) {
+            next.delete(key);
+        }
+        else {
+            next.add(key);
+        }
+        if (this.selectedKeys() === null) {
+            this.engine.setSelectedKeys(next);
+        }
+        this.selectionChange.emit(next);
+    }
+    onToggleAllVisible(event) {
+        event.stopPropagation();
+        const visible = this.visibleSelectableRows();
+        const visibleKeys = visible.map((row) => this.getSelectionKey(row));
+        const current = this.effectiveSelectedKeys();
+        const allSelected = visibleKeys.length > 0 && visibleKeys.every((key) => current.has(key));
+        const next = new Set(current);
+        if (allSelected) {
+            for (const key of visibleKeys) {
+                next.delete(key);
+            }
+        }
+        else {
+            for (const key of visibleKeys) {
+                next.add(key);
+            }
+        }
+        if (this.selectedKeys() === null) {
+            this.engine.setSelectedKeys(next);
+        }
+        this.selectionChange.emit(next);
+    }
+    // ===== EXPANSION HELPERS =====
+    /**
+     * Source of truth for which row keys are currently expanded. Reads
+     * the controlled `expandedKeys` input when the parent supplied one,
+     * otherwise falls back to the engine's internal set.
+     */
+    effectiveExpandedKeys = computed(() => {
+        const controlled = this.expandedKeys();
+        if (controlled !== null) {
+            return controlled;
+        }
+        return this.engine.expandedKeys();
+    }, ...(ngDevMode ? [{ debugName: "effectiveExpandedKeys" }] : /* istanbul ignore next */ []));
+    /** True when `rowDetailTemplate` is set — the feature is opt-in. */
+    hasExpansion = computed(() => this.rowDetailTemplate() !== null, ...(ngDevMode ? [{ debugName: "hasExpansion" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the expand chevron column appears at the start. When the
+     * expansion feature is off this returns false so the column doesn't
+     * render. Selection takes priority when both are pinned to "start"
+     * (selection comes first, then expand).
+     */
+    hasExpansionStart = computed(() => this.hasExpansion() && this.expansionColumnPosition() === 'start', ...(ngDevMode ? [{ debugName: "hasExpansionStart" }] : /* istanbul ignore next */ []));
+    hasExpansionEnd = computed(() => this.hasExpansion() && this.expansionColumnPosition() === 'end', ...(ngDevMode ? [{ debugName: "hasExpansionEnd" }] : /* istanbul ignore next */ []));
+    /** Returns true if the given row is currently expanded. */
+    isRowExpanded(row) {
+        return this.effectiveExpandedKeys().has(this.getSelectionKey(row));
+    }
+    /** Returns true unless an `expandableRow` predicate explicitly excludes the row. */
+    isRowExpandable(row) {
+        const predicate = this.expandableRow();
+        if (predicate) {
+            return predicate(row);
+        }
+        return true;
+    }
+    /**
+     * Total columns rendered per row (data columns + selection col + expand col).
+     * Used as the colspan for the detail `<td>` so it spans the full row width.
+     */
+    totalColumnCount = computed(() => {
+        let count = this.visibleColumns().length;
+        if (this.rowSelection()) {
+            count += 1;
+        }
+        if (this.hasExpansion()) {
+            count += 1;
+        }
+        return count;
+    }, ...(ngDevMode ? [{ debugName: "totalColumnCount" }] : /* istanbul ignore next */ []));
+    /** Toggle a single row's expansion via chevron click or keyboard. */
+    onToggleExpand(row, event) {
+        event.stopPropagation();
+        if (!this.isRowExpandable(row)) {
+            return;
+        }
+        const key = this.getSelectionKey(row);
+        const currentSet = this.effectiveExpandedKeys();
+        const wasExpanded = currentSet.has(key);
+        const nextExpanded = !wasExpanded;
+        if (this.groupCoordinator) {
+            // Single-expand mode — route through the coordinator so a
+            // sibling row (or sibling table) gets collapsed atomically.
+            const { keysForThisTable, siblingTableToClear } = this.groupCoordinator.resolveToggle(this, key, nextExpanded, currentSet);
+            this.commitExpansion(keysForThisTable);
+            if (siblingTableToClear) {
+                siblingTableToClear.clearExpansion();
+            }
+            return;
+        }
+        // Multi-expand mode — default. Add or remove this key from the set.
+        const next = new Set(currentSet);
+        if (wasExpanded) {
+            next.delete(key);
+        }
+        else {
+            next.add(key);
+        }
+        this.commitExpansion(next);
+    }
+    /**
+     * Public hook used by the group coordinator to force-clear this
+     * table's expansion when a sibling table opens a row. Routes through
+     * the same commit path so controlled-mode parents still see the
+     * emission.
+     */
+    clearExpansion() {
+        if (this.effectiveExpandedKeys().size === 0) {
+            return;
+        }
+        this.commitExpansion(new Set());
+    }
+    commitExpansion(next) {
+        if (this.expandedKeys() === null) {
+            this.engine.setExpandedKeys(next);
+        }
+        this.expansionChange.emit(next);
+    }
+    // ===== ACTIONS =====
+    onHeaderClick(column) {
+        if (!column.sortable) {
+            return;
+        }
+        const next = this.engine.toggleSort(column.id);
+        this.sortChange.emit(next);
+    }
+    /** Returns an inline style object for the row if a `rowStyleFn` is configured, otherwise null. */
+    getRowStyle(row, index) {
+        const fn = this.mergedConfig().rowStyleFn;
+        if (!fn) {
+            return null;
+        }
+        return fn(row, index);
+    }
+    onRowClick(row, index) {
+        this.rowClick.emit({
+            row,
+            index,
+            selected: false,
+            expanded: false,
+        });
+    }
+    onVirtualScroll(event) {
+        const target = event.target;
+        this.virtEngine.onScroll(target.scrollTop);
+    }
+    onViewportInit(el) {
+        this.virtEngine.onViewportResize(el.clientHeight);
+        if (typeof ResizeObserver !== 'undefined') {
+            const observer = new ResizeObserver((entries) => {
+                for (const entry of entries) {
+                    this.ngZone.run(() => {
+                        this.virtEngine.onViewportResize(entry.contentRect.height);
+                    });
+                }
+            });
+            observer.observe(el);
+        }
+    }
+    getPinOffset(column) {
+        if (!column.pinned) {
+            return null;
+        }
+        const cols = this.visibleColumns();
+        const side = column.pinned;
+        let offset = 0;
+        if (side === 'start') {
+            for (const col of cols) {
+                if (col.id === column.id) {
+                    break;
+                }
+                if (col.pinned === 'start') {
+                    offset += parseInt(col.width ?? col.minWidth ?? '0', 10) || 0;
+                }
+            }
+        }
+        else {
+            for (let i = cols.length - 1; i >= 0; i--) {
+                if (cols[i].id === column.id) {
+                    break;
+                }
+                if (cols[i].pinned === 'end') {
+                    offset += parseInt(cols[i].width ?? cols[i].minWidth ?? '0', 10) || 0;
+                }
+            }
+        }
+        return `${offset}px`;
+    }
+    onColumnResize(event) {
+        this.columnResize.emit(event);
+    }
+    /** Returns the current sort direction for the given column id, or null if not sorted. */
+    getSortDirection(columnId) {
+        const sort = this.engine.sortState();
+        if (sort?.columnId !== columnId) {
+            return null;
+        }
+        return sort.direction;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DataTableComponent, isStandalone: true, selector: "fk-data-table", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, sortState: { classPropertyName: "sortState", publicName: "sortState", isSignal: true, isRequired: false, transformFunction: null }, filterState: { classPropertyName: "filterState", publicName: "filterState", isSignal: true, isRequired: false, transformFunction: null }, pageState: { classPropertyName: "pageState", publicName: "pageState", isSignal: true, isRequired: false, transformFunction: null }, rowSelection: { classPropertyName: "rowSelection", publicName: "rowSelection", isSignal: true, isRequired: false, transformFunction: null }, selectedKeys: { classPropertyName: "selectedKeys", publicName: "selectedKeys", isSignal: true, isRequired: false, transformFunction: null }, getRowId: { classPropertyName: "getRowId", publicName: "getRowId", isSignal: true, isRequired: false, transformFunction: null }, selectionDisabled: { classPropertyName: "selectionDisabled", publicName: "selectionDisabled", isSignal: true, isRequired: false, transformFunction: null }, selectionColumnPosition: { classPropertyName: "selectionColumnPosition", publicName: "selectionColumnPosition", isSignal: true, isRequired: false, transformFunction: null }, selectionLabel: { classPropertyName: "selectionLabel", publicName: "selectionLabel", isSignal: true, isRequired: false, transformFunction: null }, rowDetailTemplate: { classPropertyName: "rowDetailTemplate", publicName: "rowDetailTemplate", isSignal: true, isRequired: false, transformFunction: null }, expansionColumnPosition: { classPropertyName: "expansionColumnPosition", publicName: "expansionColumnPosition", isSignal: true, isRequired: false, transformFunction: null }, expandedKeys: { classPropertyName: "expandedKeys", publicName: "expandedKeys", isSignal: true, isRequired: false, transformFunction: null }, expandableRow: { classPropertyName: "expandableRow", publicName: "expandableRow", isSignal: true, isRequired: false, transformFunction: null }, expansionLabel: { classPropertyName: "expansionLabel", publicName: "expansionLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", filterChange: "filterChange", pageChange: "pageChange", rowClick: "rowClick", selectionChange: "selectionChange", expansionChange: "expansionChange", columnResize: "columnResize" }, host: { properties: { "class": "this.hostClass", "attr.id": "this.hostId" } }, providers: [
+            TableEngineService,
+            VirtualizationEngineService,
+            ResponsiveStrategyService,
+        ], viewQueries: [{ propertyName: "virtualViewport", first: true, predicate: ["virtualViewport"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (activeMode() === 'stack') {\n  <!-- Stack path: mobile card view -->\n  <fk-data-table-stack\n    [rows]=\"engine.processedRows()\"\n    [columns]=\"columns()\"\n    [config]=\"mergedConfig()\"\n    [trackByFn]=\"mergedConfig().trackBy\"\n    [rowSelection]=\"rowSelection()\"\n    [selectedKeys]=\"effectiveSelectedKeysForTemplate()\"\n    [getRowId]=\"getRowId()\"\n    [selectionDisabled]=\"selectionDisabled()\"\n    [selectionLabel]=\"selectionLabel()\"\n    (rowClick)=\"rowClick.emit($event)\"\n    (toggleRow)=\"onToggleRow($event.row, $event.event)\"\n  />\n} @else if (useVirtualization()) {\n  <!-- Virtual path: div/grid-based with virtual scrolling -->\n  <div role=\"table\" [attr.aria-label]=\"ariaLabel()\">\n    @if (mergedConfig().showHeader) {\n      <div class=\"fk-data-table__head\" role=\"rowgroup\">\n        <div class=\"fk-data-table__head-row\" role=\"row\">\n          @if (rowSelection() && selectionColumnPosition() === 'start') {\n            <div\n              class=\"fk-data-table__th fk-data-table__selection-cell\"\n              role=\"columnheader\"\n            >\n              <input\n                type=\"checkbox\"\n                class=\"fk-data-table__checkbox\"\n                [attr.aria-label]=\"\n                  headerSelectionState() === 'checked'\n                    ? 'Deselect all on page'\n                    : 'Select all on page'\n                \"\n                [checked]=\"headerSelectionState() === 'checked'\"\n                [indeterminate]=\"headerSelectionState() === 'indeterminate'\"\n                (click)=\"onToggleAllVisible($event)\"\n              />\n            </div>\n          }\n          @for (column of visibleColumns(); track column.id) {\n            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n            <div\n              class=\"fk-data-table__th\"\n              role=\"columnheader\"\n              [fkColumnResize]=\"column.id\"\n              [enabled]=\"column.resizable === true\"\n              (columnResize)=\"onColumnResize($event)\"\n              [class.fk-data-table__th--sortable]=\"column.sortable\"\n              [class.fk-data-table__th--align-center]=\"\n                column.align === 'center'\n              \"\n              [class.fk-data-table__th--align-end]=\"column.align === 'end'\"\n              [class.fk-data-table__th--pinned-start]=\"\n                column.pinned === 'start'\n              \"\n              [class.fk-data-table__th--pinned-end]=\"column.pinned === 'end'\"\n              [style.width]=\"column.width ?? null\"\n              [style.min-width]=\"column.minWidth ?? null\"\n              [style.max-width]=\"column.maxWidth ?? null\"\n              [style.flex]=\"column.flex ?? null\"\n              [style.--fk-data-table-pin-offset]=\"getPinOffset(column)\"\n              [attr.aria-sort]=\"\n                getSortDirection(column.id) === 'asc'\n                  ? 'ascending'\n                  : getSortDirection(column.id) === 'desc'\n                    ? 'descending'\n                    : null\n              \"\n              (click)=\"onHeaderClick(column)\"\n            >\n              @if (column.headerRenderer) {\n                <ng-container\n                  [ngTemplateOutlet]=\"column.headerRenderer\"\n                  [ngTemplateOutletContext]=\"{ $implicit: column }\"\n                />\n              } @else {\n                {{ column.header }}\n              }\n\n              @if (column.sortable) {\n                <span\n                  class=\"fk-data-table__sort-indicator\"\n                  [class.fk-data-table__sort-indicator--asc]=\"\n                    getSortDirection(column.id) === 'asc'\n                  \"\n                  [class.fk-data-table__sort-indicator--desc]=\"\n                    getSortDirection(column.id) === 'desc'\n                  \"\n                  aria-hidden=\"true\"\n                >\n                  <svg\n                    width=\"10\"\n                    height=\"10\"\n                    viewBox=\"0 0 10 10\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                  >\n                    <path d=\"M5 2L8 6H2L5 2Z\" fill=\"currentColor\" />\n                  </svg>\n                </span>\n              }\n            </div>\n          }\n          @if (rowSelection() && selectionColumnPosition() === 'end') {\n            <div\n              class=\"fk-data-table__th fk-data-table__selection-cell\"\n              role=\"columnheader\"\n            >\n              <input\n                type=\"checkbox\"\n                class=\"fk-data-table__checkbox\"\n                [attr.aria-label]=\"\n                  headerSelectionState() === 'checked'\n                    ? 'Deselect all on page'\n                    : 'Select all on page'\n                \"\n                [checked]=\"headerSelectionState() === 'checked'\"\n                [indeterminate]=\"headerSelectionState() === 'indeterminate'\"\n                (click)=\"onToggleAllVisible($event)\"\n              />\n            </div>\n          }\n        </div>\n      </div>\n    }\n\n    <div\n      #virtualViewport\n      class=\"fk-data-table__viewport\"\n      role=\"rowgroup\"\n      (scroll)=\"onVirtualScroll($event)\"\n    >\n      <div\n        class=\"fk-data-table__sentinel\"\n        [style.height.px]=\"virtEngine.totalHeight()\"\n      ></div>\n\n      <div\n        class=\"fk-data-table__virtual-body\"\n        [style.transform]=\"'translateY(' + virtEngine.offsetY() + 'px)'\"\n      >\n        @for (\n          row of virtualRows();\n          track mergedConfig().trackBy(virtualStartIndex() + $index, row);\n          let i = $index\n        ) {\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n          <div\n            class=\"fk-data-table__row\"\n            role=\"row\"\n            [class.fk-data-table__row--selected]=\"isRowSelected(row)\"\n            [style.height.px]=\"mergedConfig().rowHeight\"\n            [ngStyle]=\"getRowStyle(row, virtualStartIndex() + i)\"\n            (click)=\"onRowClick(row, virtualStartIndex() + i)\"\n          >\n            @if (rowSelection() && selectionColumnPosition() === 'start') {\n              <div\n                class=\"fk-data-table__td fk-data-table__selection-cell\"\n                role=\"cell\"\n              >\n                <input\n                  type=\"checkbox\"\n                  class=\"fk-data-table__checkbox\"\n                  [attr.aria-label]=\"selectionLabel()\"\n                  [checked]=\"isRowSelected(row)\"\n                  [disabled]=\"isRowSelectionDisabled(row)\"\n                  (click)=\"onToggleRow(row, $event)\"\n                />\n              </div>\n            }\n            @for (column of visibleColumns(); track column.id) {\n              <div\n                class=\"fk-data-table__td\"\n                role=\"cell\"\n                [class.fk-data-table__td--truncate]=\"column.truncate\"\n                [class.fk-data-table__td--align-center]=\"\n                  column.align === 'center'\n                \"\n                [class.fk-data-table__td--align-end]=\"column.align === 'end'\"\n                [class.fk-data-table__td--pinned-start]=\"\n                  column.pinned === 'start'\n                \"\n                [class.fk-data-table__td--pinned-end]=\"column.pinned === 'end'\"\n                [style.width]=\"column.width ?? null\"\n                [style.min-width]=\"column.minWidth ?? null\"\n                [style.max-width]=\"column.maxWidth ?? null\"\n                [style.flex]=\"column.flex ?? null\"\n                [style.--fk-data-table-pin-offset]=\"getPinOffset(column)\"\n              >\n                @if (column.cellRenderer) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"column.cellRenderer\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: getCellValue(column, row),\n                      row: row,\n                    }\"\n                  />\n                } @else {\n                  {{ getCellValue(column, row) }}\n                }\n              </div>\n            }\n            @if (rowSelection() && selectionColumnPosition() === 'end') {\n              <div\n                class=\"fk-data-table__td fk-data-table__selection-cell\"\n                role=\"cell\"\n              >\n                <input\n                  type=\"checkbox\"\n                  class=\"fk-data-table__checkbox\"\n                  [attr.aria-label]=\"selectionLabel()\"\n                  [checked]=\"isRowSelected(row)\"\n                  [disabled]=\"isRowSelectionDisabled(row)\"\n                  (click)=\"onToggleRow(row, $event)\"\n                />\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n\n    @if (isEmpty()) {\n      <div class=\"fk-data-table__empty\" role=\"row\">\n        <div role=\"cell\">{{ mergedConfig().emptyMessage }}</div>\n      </div>\n    }\n  </div>\n} @else {\n  <!-- Standard path: semantic table -->\n  <div class=\"fk-data-table__scroll\">\n    <table class=\"fk-data-table__table\" [attr.aria-label]=\"ariaLabel()\">\n      @if (mergedConfig().showHeader) {\n        <thead class=\"fk-data-table__head\">\n          <tr class=\"fk-data-table__head-row\">\n            @if (rowSelection() && selectionColumnPosition() === 'start') {\n              <th class=\"fk-data-table__th fk-data-table__selection-cell\">\n                <input\n                  type=\"checkbox\"\n                  class=\"fk-data-table__checkbox\"\n                  [attr.aria-label]=\"\n                    headerSelectionState() === 'checked'\n                      ? 'Deselect all on page'\n                      : 'Select all on page'\n                  \"\n                  [checked]=\"headerSelectionState() === 'checked'\"\n                  [indeterminate]=\"headerSelectionState() === 'indeterminate'\"\n                  (click)=\"onToggleAllVisible($event)\"\n                />\n              </th>\n            }\n            @if (hasExpansionStart()) {\n              <th\n                class=\"fk-data-table__th fk-data-table__expand-cell\"\n                aria-hidden=\"true\"\n              ></th>\n            }\n            @for (column of visibleColumns(); track column.id) {\n              <th\n                class=\"fk-data-table__th\"\n                [fkColumnResize]=\"column.id\"\n                [enabled]=\"column.resizable === true\"\n                (columnResize)=\"onColumnResize($event)\"\n                [class.fk-data-table__th--sortable]=\"column.sortable\"\n                [class.fk-data-table__th--align-center]=\"\n                  column.align === 'center'\n                \"\n                [class.fk-data-table__th--align-end]=\"column.align === 'end'\"\n                [class.fk-data-table__th--pinned-start]=\"\n                  column.pinned === 'start'\n                \"\n                [class.fk-data-table__th--pinned-end]=\"column.pinned === 'end'\"\n                [style.width]=\"column.width ?? null\"\n                [style.min-width]=\"column.minWidth ?? null\"\n                [style.max-width]=\"column.maxWidth ?? null\"\n                [style.--fk-data-table-pin-offset]=\"getPinOffset(column)\"\n                [attr.aria-sort]=\"\n                  getSortDirection(column.id) === 'asc'\n                    ? 'ascending'\n                    : getSortDirection(column.id) === 'desc'\n                      ? 'descending'\n                      : null\n                \"\n                (click)=\"onHeaderClick(column)\"\n              >\n                @if (column.headerRenderer) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"column.headerRenderer\"\n                    [ngTemplateOutletContext]=\"{ $implicit: column }\"\n                  />\n                } @else {\n                  {{ column.header }}\n                }\n\n                @if (column.sortable) {\n                  <span\n                    class=\"fk-data-table__sort-indicator\"\n                    [class.fk-data-table__sort-indicator--asc]=\"\n                      getSortDirection(column.id) === 'asc'\n                    \"\n                    [class.fk-data-table__sort-indicator--desc]=\"\n                      getSortDirection(column.id) === 'desc'\n                    \"\n                    aria-hidden=\"true\"\n                  >\n                    <svg\n                      width=\"10\"\n                      height=\"10\"\n                      viewBox=\"0 0 10 10\"\n                      fill=\"none\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                    >\n                      <path d=\"M5 2L8 6H2L5 2Z\" fill=\"currentColor\" />\n                    </svg>\n                  </span>\n                }\n              </th>\n            }\n            @if (rowSelection() && selectionColumnPosition() === 'end') {\n              <th class=\"fk-data-table__th fk-data-table__selection-cell\">\n                <input\n                  type=\"checkbox\"\n                  class=\"fk-data-table__checkbox\"\n                  [attr.aria-label]=\"\n                    headerSelectionState() === 'checked'\n                      ? 'Deselect all on page'\n                      : 'Select all on page'\n                  \"\n                  [checked]=\"headerSelectionState() === 'checked'\"\n                  [indeterminate]=\"headerSelectionState() === 'indeterminate'\"\n                  (click)=\"onToggleAllVisible($event)\"\n                />\n              </th>\n            }\n            @if (hasExpansionEnd()) {\n              <th\n                class=\"fk-data-table__th fk-data-table__expand-cell\"\n                aria-hidden=\"true\"\n              ></th>\n            }\n          </tr>\n        </thead>\n      }\n\n      <tbody class=\"fk-data-table__body\">\n        @for (\n          row of engine.processedRows();\n          track mergedConfig().trackBy($index, row);\n          let i = $index\n        ) {\n          <tr\n            class=\"fk-data-table__row\"\n            [class.fk-data-table__row--selected]=\"isRowSelected(row)\"\n            [class.fk-data-table__row--expanded]=\"\n              hasExpansion() && isRowExpanded(row)\n            \"\n            [ngStyle]=\"getRowStyle(row, i)\"\n            (click)=\"onRowClick(row, i)\"\n          >\n            @if (rowSelection() && selectionColumnPosition() === 'start') {\n              <td class=\"fk-data-table__td fk-data-table__selection-cell\">\n                <input\n                  type=\"checkbox\"\n                  class=\"fk-data-table__checkbox\"\n                  [attr.aria-label]=\"selectionLabel()\"\n                  [checked]=\"isRowSelected(row)\"\n                  [disabled]=\"isRowSelectionDisabled(row)\"\n                  (click)=\"onToggleRow(row, $event)\"\n                />\n              </td>\n            }\n            @if (hasExpansionStart()) {\n              <td class=\"fk-data-table__td fk-data-table__expand-cell\">\n                @if (isRowExpandable(row)) {\n                  <button\n                    type=\"button\"\n                    class=\"fk-data-table__expand-button\"\n                    [class.fk-data-table__expand-button--expanded]=\"\n                      isRowExpanded(row)\n                    \"\n                    [attr.aria-label]=\"expansionLabel()\"\n                    [attr.aria-expanded]=\"isRowExpanded(row)\"\n                    (click)=\"onToggleExpand(row, $event)\"\n                  >\n                    <svg\n                      class=\"fk-data-table__expand-chevron\"\n                      width=\"10\"\n                      height=\"10\"\n                      viewBox=\"0 0 10 10\"\n                      fill=\"none\"\n                      aria-hidden=\"true\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                    >\n                      <path\n                        d=\"M3 1.5L6.5 5L3 8.5\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"1.5\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                      />\n                    </svg>\n                  </button>\n                }\n              </td>\n            }\n            @for (column of visibleColumns(); track column.id) {\n              <td\n                class=\"fk-data-table__td\"\n                [class.fk-data-table__td--truncate]=\"column.truncate\"\n                [class.fk-data-table__td--align-center]=\"\n                  column.align === 'center'\n                \"\n                [class.fk-data-table__td--align-end]=\"column.align === 'end'\"\n                [class.fk-data-table__td--pinned-start]=\"\n                  column.pinned === 'start'\n                \"\n                [class.fk-data-table__td--pinned-end]=\"column.pinned === 'end'\"\n                [style.--fk-data-table-pin-offset]=\"getPinOffset(column)\"\n              >\n                @if (column.cellRenderer) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"column.cellRenderer\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: getCellValue(column, row),\n                      row: row,\n                    }\"\n                  />\n                } @else {\n                  {{ getCellValue(column, row) }}\n                }\n              </td>\n            }\n            @if (rowSelection() && selectionColumnPosition() === 'end') {\n              <td class=\"fk-data-table__td fk-data-table__selection-cell\">\n                <input\n                  type=\"checkbox\"\n                  class=\"fk-data-table__checkbox\"\n                  [attr.aria-label]=\"selectionLabel()\"\n                  [checked]=\"isRowSelected(row)\"\n                  [disabled]=\"isRowSelectionDisabled(row)\"\n                  (click)=\"onToggleRow(row, $event)\"\n                />\n              </td>\n            }\n            @if (hasExpansionEnd()) {\n              <td class=\"fk-data-table__td fk-data-table__expand-cell\">\n                @if (isRowExpandable(row)) {\n                  <button\n                    type=\"button\"\n                    class=\"fk-data-table__expand-button\"\n                    [class.fk-data-table__expand-button--expanded]=\"\n                      isRowExpanded(row)\n                    \"\n                    [attr.aria-label]=\"expansionLabel()\"\n                    [attr.aria-expanded]=\"isRowExpanded(row)\"\n                    (click)=\"onToggleExpand(row, $event)\"\n                  >\n                    <svg\n                      class=\"fk-data-table__expand-chevron\"\n                      width=\"10\"\n                      height=\"10\"\n                      viewBox=\"0 0 10 10\"\n                      fill=\"none\"\n                      aria-hidden=\"true\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                    >\n                      <path\n                        d=\"M3 1.5L6.5 5L3 8.5\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"1.5\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                      />\n                    </svg>\n                  </button>\n                }\n              </td>\n            }\n          </tr>\n          @if (hasExpansion() && isRowExpanded(row)) {\n            <tr class=\"fk-data-table__detail-row\">\n              <td\n                class=\"fk-data-table__detail-cell\"\n                [attr.colspan]=\"totalColumnCount()\"\n              >\n                <ng-container\n                  [ngTemplateOutlet]=\"rowDetailTemplate()!\"\n                  [ngTemplateOutletContext]=\"{\n                    $implicit: row,\n                    row: row,\n                    index: i,\n                  }\"\n                />\n              </td>\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n\n    @if (isEmpty()) {\n      <div class=\"fk-data-table__empty\">\n        {{ mergedConfig().emptyMessage }}\n      </div>\n    }\n  </div>\n}\n\n@if (loading()) {\n  <div class=\"fk-data-table__loading-overlay\" aria-live=\"polite\">\n    <span class=\"fk-data-table__loading-text\">Loading\u2026</span>\n  </div>\n}\n", styles: [":host{display:block;position:relative;border:var(--fk-data-table-border-width, 1px) solid var(--fk-data-table-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-data-table-border-radius, var(--fk-radius-md, .375rem));overflow:hidden}.fk-data-table__scroll{overflow-x:auto;width:100%}.fk-data-table__table{width:100%;border-collapse:collapse;border-spacing:0}.fk-data-table__head{background:var(--fk-data-table-head-bg, var(--fk-color-surface-muted, #f7f9fb))}.fk-data-table__head-row{display:flex}.fk-data-table__table .fk-data-table__head-row{display:table-row}.fk-data-table__th{position:relative;padding:var(--fk-data-table-cell-padding, var(--fk-rhythm-3, .75rem));text-align:start;font-weight:var(--fk-data-table-head-font-weight, var(--fk-font-weight-semibold, 600));font-size:var(--fk-data-table-head-font-size, var(--fk-typography-small-font-size, .875rem));color:var(--fk-data-table-head-color, var(--fk-color-text-muted, #6b7a8d));border-bottom:1px solid var(--fk-data-table-border-color, var(--fk-color-border, #d9e2ee));white-space:nowrap;-webkit-user-select:none;user-select:none;flex:1}.fk-data-table__th--sortable{cursor:pointer}.fk-data-table__th--sortable:hover{color:var(--fk-data-table-head-hover-color, var(--fk-color-text, #1f2d3d))}.fk-data-table__th--align-center{text-align:center}.fk-data-table__th--align-end{text-align:end}.fk-data-table__table .fk-data-table__th{flex:none}.fk-data-table__sort-indicator{display:inline-flex;margin-inline-start:var(--fk-rhythm-1, .25rem);opacity:.3;transition:transform .15s ease,opacity .15s ease}.fk-data-table__sort-indicator--asc{opacity:1;transform:rotate(0)}.fk-data-table__sort-indicator--desc{opacity:1;transform:rotate(180deg)}.fk-data-table__viewport{overflow-y:auto;position:relative;max-height:var(--fk-data-table-viewport-height, 600px)}.fk-data-table__sentinel{position:absolute;top:0;left:0;width:1px;visibility:hidden}.fk-data-table__virtual-body{position:relative;will-change:transform}.fk-data-table__body{background:var(--fk-data-table-body-bg, var(--fk-color-surface, #ffffff))}.fk-data-table__row{display:flex;border-bottom:1px solid var(--fk-data-table-border-color, var(--fk-color-border, #d9e2ee));cursor:pointer}.fk-data-table__row:hover{background:var(--fk-data-table-row-hover-bg, var(--fk-color-surface-muted, #f7f9fb))}.fk-data-table__row:last-child{border-bottom:none}.fk-data-table__table .fk-data-table__row{display:table-row}.fk-data-table__td{padding:var(--fk-data-table-cell-padding, var(--fk-rhythm-3, .75rem));font-size:var(--fk-data-table-body-font-size, var(--fk-typography-body-font-size, .875rem));color:var(--fk-data-table-body-color, var(--fk-color-text, #1f2d3d));vertical-align:middle;flex:1}.fk-data-table__td--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fk-data-table__td--align-center{text-align:center}.fk-data-table__td--align-end{text-align:end}.fk-data-table__table .fk-data-table__td{flex:none}.fk-data-table__empty{padding:var(--fk-data-table-empty-padding, var(--fk-rhythm-8, 2rem));text-align:center;color:var(--fk-data-table-empty-color, var(--fk-color-text-muted, #6b7a8d));font-size:var(--fk-data-table-body-font-size, var(--fk-typography-body-font-size, .875rem))}.fk-data-table__loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--fk-data-table-loading-bg, var(--fk-color-surface-overlay, rgba(255, 255, 255, .7)));z-index:1}.fk-data-table__loading-text{font-size:var(--fk-data-table-body-font-size, var(--fk-typography-body-font-size, .875rem));color:var(--fk-data-table-loading-color, var(--fk-color-text-muted, #6b7a8d))}.fk-data-table__resize-handle{position:absolute;top:0;right:0;bottom:0;width:var(--fk-data-table-resize-handle-width, 4px);cursor:col-resize;background:transparent;z-index:1}.fk-data-table__resize-handle:hover,.fk-data-table__resize-handle:active{background:var(--fk-data-table-resize-handle-color, var(--fk-color-primary, #3b82f6))}.fk-data-table__th--pinned-start,.fk-data-table__td--pinned-start{position:sticky;left:var(--fk-data-table-pin-offset, 0);z-index:2;background:inherit}.fk-data-table__th--pinned-end,.fk-data-table__td--pinned-end{position:sticky;right:var(--fk-data-table-pin-offset, 0);z-index:2;background:inherit}.fk-data-table__selection-cell{flex:none;width:var(--fk-data-table-selection-cell-width, 2.75rem);min-width:var(--fk-data-table-selection-cell-width, 2.75rem);max-width:var(--fk-data-table-selection-cell-width, 2.75rem);text-align:center;cursor:default}.fk-data-table__selection-cell:hover{color:inherit}.fk-data-table__row--selected{background:var(--fk-data-table-row-selected-bg, var(--fk-color-primary-light, #eaf4ff))}.fk-data-table__row--selected:hover{background:var(--fk-data-table-row-selected-hover-bg, var(--fk-color-primary-light, #dbe9ff))}.fk-data-table__expand-cell{flex:none;width:var(--fk-data-table-expand-cell-width, 2.5rem);min-width:var(--fk-data-table-expand-cell-width, 2.5rem);max-width:var(--fk-data-table-expand-cell-width, 2.5rem);text-align:center;cursor:default;padding-inline:var(--fk-rhythm-1, .25rem)}.fk-data-table__expand-button{appearance:none;display:inline-flex;align-items:center;justify-content:center;width:var(--fk-data-table-expand-button-size, 1.5rem);height:var(--fk-data-table-expand-button-size, 1.5rem);padding:0;background:transparent;border:1px solid transparent;border-radius:var(--fk-data-table-expand-button-radius, .25rem);color:var(--fk-data-table-expand-color, var(--fk-color-text-muted, #5d6b80));cursor:pointer;transition:background-color .15s ease,color .15s ease,transform .15s ease}.fk-data-table__expand-button:hover{background:var(--fk-data-table-expand-button-hover-bg, var(--fk-color-surface-muted, #f1f4f8));color:var(--fk-data-table-expand-color-hover, var(--fk-color-text, #1c2433))}.fk-data-table__expand-button:focus-visible{outline:2px solid var(--fk-data-table-expand-focus-ring, var(--fk-color-primary, #0066cc));outline-offset:2px}.fk-data-table__expand-button--expanded{color:var(--fk-data-table-expand-color-active, var(--fk-color-primary, #0066cc))}.fk-data-table__expand-button--expanded .fk-data-table__expand-chevron{transform:rotate(90deg)}.fk-data-table__expand-chevron{transition:transform .15s ease}.fk-data-table__row--expanded{background:var(--fk-data-table-row-expanded-bg, var(--fk-color-surface-muted, #f7f9fb))}.fk-data-table__detail-row{background:var(--fk-data-table-detail-row-bg, var(--fk-color-surface, #ffffff))}.fk-data-table__detail-cell{padding:var(--fk-data-table-detail-cell-padding, var(--fk-rhythm-4, 1rem));border-top:1px solid var(--fk-data-table-detail-border-color, var(--fk-color-border, #d9e2ee));border-bottom:1px solid var(--fk-data-table-detail-border-color, var(--fk-color-border, #d9e2ee))}.fk-data-table__checkbox{appearance:none;width:var(--fk-data-table-checkbox-size, 1rem);height:var(--fk-data-table-checkbox-size, 1rem);margin:0;border:1px solid var(--fk-data-table-checkbox-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-data-table-checkbox-radius, .25rem);background:var(--fk-data-table-checkbox-bg, var(--fk-color-surface, #ffffff));cursor:pointer;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease;position:relative;vertical-align:middle}.fk-data-table__checkbox:focus-visible{outline:none;box-shadow:var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18))}.fk-data-table__checkbox:hover:not(:disabled){border-color:var(--fk-data-table-checkbox-hover-border-color, var(--fk-color-primary, #0a84ff))}.fk-data-table__checkbox:checked,.fk-data-table__checkbox:indeterminate{background:var(--fk-data-table-checkbox-checked-bg, var(--fk-color-primary, #0a84ff));border-color:var(--fk-data-table-checkbox-checked-border-color, var(--fk-color-primary, #0a84ff))}.fk-data-table__checkbox:checked:after{content:\"\";position:absolute;inset:0;background:var(--fk-data-table-checkbox-icon-color, var(--fk-white, #ffffff));mask:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='currentColor' d='M6.5 11L3 7.5l1-1L6.5 9 12 3.5l1 1z'/></svg>\") center/75% 75% no-repeat;-webkit-mask:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='currentColor' d='M6.5 11L3 7.5l1-1L6.5 9 12 3.5l1 1z'/></svg>\") center/75% 75% no-repeat}.fk-data-table__checkbox:indeterminate:after{content:\"\";position:absolute;inset:0;background:var(--fk-data-table-checkbox-icon-color, var(--fk-white, #ffffff));mask:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='3' y='7' width='10' height='2' rx='1' fill='currentColor'/></svg>\") center/75% 75% no-repeat;-webkit-mask:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='3' y='7' width='10' height='2' rx='1' fill='currentColor'/></svg>\") center/75% 75% no-repeat}.fk-data-table__checkbox:disabled{cursor:not-allowed;opacity:.5}.fk-data-table--resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.fk-data-table--sticky-header .fk-data-table__head{position:sticky;top:0;z-index:1}.fk-data-table--sticky-header .fk-data-table__table .fk-data-table__th{position:sticky;top:0;z-index:1;background:var(--fk-data-table-head-bg, var(--fk-color-surface-muted, #f7f9fb))}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DataTableStackComponent, selector: "fk-data-table-stack", inputs: ["rows", "columns", "config", "trackByFn", "rowSelection", "selectedKeys", "getRowId", "selectionDisabled", "selectionLabel"], outputs: ["rowClick", "toggleRow"] }, { kind: "directive", type: ColumnResizeDirective, selector: "[fkColumnResize]", inputs: ["fkColumnResize", "enabled", "minWidth", "maxWidth"], outputs: ["columnResize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DataTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-data-table', standalone: true, imports: [
+                        NgStyle,
+                        NgTemplateOutlet,
+                        DataTableStackComponent,
+                        ColumnResizeDirective,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        TableEngineService,
+                        VirtualizationEngineService,
+                        ResponsiveStrategyService,
+                    ], template: "@if (activeMode() === 'stack') {\n  <!-- Stack path: mobile card view -->\n  <fk-data-table-stack\n    [rows]=\"engine.processedRows()\"\n    [columns]=\"columns()\"\n    [config]=\"mergedConfig()\"\n    [trackByFn]=\"mergedConfig().trackBy\"\n    [rowSelection]=\"rowSelection()\"\n    [selectedKeys]=\"effectiveSelectedKeysForTemplate()\"\n    [getRowId]=\"getRowId()\"\n    [selectionDisabled]=\"selectionDisabled()\"\n    [selectionLabel]=\"selectionLabel()\"\n    (rowClick)=\"rowClick.emit($event)\"\n    (toggleRow)=\"onToggleRow($event.row, $event.event)\"\n  />\n} @else if (useVirtualization()) {\n  <!-- Virtual path: div/grid-based with virtual scrolling -->\n  <div role=\"table\" [attr.aria-label]=\"ariaLabel()\">\n    @if (mergedConfig().showHeader) {\n      <div class=\"fk-data-table__head\" role=\"rowgroup\">\n        <div class=\"fk-data-table__head-row\" role=\"row\">\n          @if (rowSelection() && selectionColumnPosition() === 'start') {\n            <div\n              class=\"fk-data-table__th fk-data-table__selection-cell\"\n              role=\"columnheader\"\n            >\n              <input\n                type=\"checkbox\"\n                class=\"fk-data-table__checkbox\"\n                [attr.aria-label]=\"\n                  headerSelectionState() === 'checked'\n                    ? 'Deselect all on page'\n                    : 'Select all on page'\n                \"\n                [checked]=\"headerSelectionState() === 'checked'\"\n                [indeterminate]=\"headerSelectionState() === 'indeterminate'\"\n                (click)=\"onToggleAllVisible($event)\"\n              />\n            </div>\n          }\n          @for (column of visibleColumns(); track column.id) {\n            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n            <div\n              class=\"fk-data-table__th\"\n              role=\"columnheader\"\n              [fkColumnResize]=\"column.id\"\n              [enabled]=\"column.resizable === true\"\n              (columnResize)=\"onColumnResize($event)\"\n              [class.fk-data-table__th--sortable]=\"column.sortable\"\n              [class.fk-data-table__th--align-center]=\"\n                column.align === 'center'\n              \"\n              [class.fk-data-table__th--align-end]=\"column.align === 'end'\"\n              [class.fk-data-table__th--pinned-start]=\"\n                column.pinned === 'start'\n              \"\n              [class.fk-data-table__th--pinned-end]=\"column.pinned === 'end'\"\n              [style.width]=\"column.width ?? null\"\n              [style.min-width]=\"column.minWidth ?? null\"\n              [style.max-width]=\"column.maxWidth ?? null\"\n              [style.flex]=\"column.flex ?? null\"\n              [style.--fk-data-table-pin-offset]=\"getPinOffset(column)\"\n              [attr.aria-sort]=\"\n                getSortDirection(column.id) === 'asc'\n                  ? 'ascending'\n                  : getSortDirection(column.id) === 'desc'\n                    ? 'descending'\n                    : null\n              \"\n              (click)=\"onHeaderClick(column)\"\n            >\n              @if (column.headerRenderer) {\n                <ng-container\n                  [ngTemplateOutlet]=\"column.headerRenderer\"\n                  [ngTemplateOutletContext]=\"{ $implicit: column }\"\n                />\n              } @else {\n                {{ column.header }}\n              }\n\n              @if (column.sortable) {\n                <span\n                  class=\"fk-data-table__sort-indicator\"\n                  [class.fk-data-table__sort-indicator--asc]=\"\n                    getSortDirection(column.id) === 'asc'\n                  \"\n                  [class.fk-data-table__sort-indicator--desc]=\"\n                    getSortDirection(column.id) === 'desc'\n                  \"\n                  aria-hidden=\"true\"\n                >\n                  <svg\n                    width=\"10\"\n                    height=\"10\"\n                    viewBox=\"0 0 10 10\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                  >\n                    <path d=\"M5 2L8 6H2L5 2Z\" fill=\"currentColor\" />\n                  </svg>\n                </span>\n              }\n            </div>\n          }\n          @if (rowSelection() && selectionColumnPosition() === 'end') {\n            <div\n              class=\"fk-data-table__th fk-data-table__selection-cell\"\n              role=\"columnheader\"\n            >\n              <input\n                type=\"checkbox\"\n                class=\"fk-data-table__checkbox\"\n                [attr.aria-label]=\"\n                  headerSelectionState() === 'checked'\n                    ? 'Deselect all on page'\n                    : 'Select all on page'\n                \"\n                [checked]=\"headerSelectionState() === 'checked'\"\n                [indeterminate]=\"headerSelectionState() === 'indeterminate'\"\n                (click)=\"onToggleAllVisible($event)\"\n              />\n            </div>\n          }\n        </div>\n      </div>\n    }\n\n    <div\n      #virtualViewport\n      class=\"fk-data-table__viewport\"\n      role=\"rowgroup\"\n      (scroll)=\"onVirtualScroll($event)\"\n    >\n      <div\n        class=\"fk-data-table__sentinel\"\n        [style.height.px]=\"virtEngine.totalHeight()\"\n      ></div>\n\n      <div\n        class=\"fk-data-table__virtual-body\"\n        [style.transform]=\"'translateY(' + virtEngine.offsetY() + 'px)'\"\n      >\n        @for (\n          row of virtualRows();\n          track mergedConfig().trackBy(virtualStartIndex() + $index, row);\n          let i = $index\n        ) {\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n          <div\n            class=\"fk-data-table__row\"\n            role=\"row\"\n            [class.fk-data-table__row--selected]=\"isRowSelected(row)\"\n            [style.height.px]=\"mergedConfig().rowHeight\"\n            [ngStyle]=\"getRowStyle(row, virtualStartIndex() + i)\"\n            (click)=\"onRowClick(row, virtualStartIndex() + i)\"\n          >\n            @if (rowSelection() && selectionColumnPosition() === 'start') {\n              <div\n                class=\"fk-data-table__td fk-data-table__selection-cell\"\n                role=\"cell\"\n              >\n                <input\n                  type=\"checkbox\"\n                  class=\"fk-data-table__checkbox\"\n                  [attr.aria-label]=\"selectionLabel()\"\n                  [checked]=\"isRowSelected(row)\"\n                  [disabled]=\"isRowSelectionDisabled(row)\"\n                  (click)=\"onToggleRow(row, $event)\"\n                />\n              </div>\n            }\n            @for (column of visibleColumns(); track column.id) {\n              <div\n                class=\"fk-data-table__td\"\n                role=\"cell\"\n                [class.fk-data-table__td--truncate]=\"column.truncate\"\n                [class.fk-data-table__td--align-center]=\"\n                  column.align === 'center'\n                \"\n                [class.fk-data-table__td--align-end]=\"column.align === 'end'\"\n                [class.fk-data-table__td--pinned-start]=\"\n                  column.pinned === 'start'\n                \"\n                [class.fk-data-table__td--pinned-end]=\"column.pinned === 'end'\"\n                [style.width]=\"column.width ?? null\"\n                [style.min-width]=\"column.minWidth ?? null\"\n                [style.max-width]=\"column.maxWidth ?? null\"\n                [style.flex]=\"column.flex ?? null\"\n                [style.--fk-data-table-pin-offset]=\"getPinOffset(column)\"\n              >\n                @if (column.cellRenderer) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"column.cellRenderer\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: getCellValue(column, row),\n                      row: row,\n                    }\"\n                  />\n                } @else {\n                  {{ getCellValue(column, row) }}\n                }\n              </div>\n            }\n            @if (rowSelection() && selectionColumnPosition() === 'end') {\n              <div\n                class=\"fk-data-table__td fk-data-table__selection-cell\"\n                role=\"cell\"\n              >\n                <input\n                  type=\"checkbox\"\n                  class=\"fk-data-table__checkbox\"\n                  [attr.aria-label]=\"selectionLabel()\"\n                  [checked]=\"isRowSelected(row)\"\n                  [disabled]=\"isRowSelectionDisabled(row)\"\n                  (click)=\"onToggleRow(row, $event)\"\n                />\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n\n    @if (isEmpty()) {\n      <div class=\"fk-data-table__empty\" role=\"row\">\n        <div role=\"cell\">{{ mergedConfig().emptyMessage }}</div>\n      </div>\n    }\n  </div>\n} @else {\n  <!-- Standard path: semantic table -->\n  <div class=\"fk-data-table__scroll\">\n    <table class=\"fk-data-table__table\" [attr.aria-label]=\"ariaLabel()\">\n      @if (mergedConfig().showHeader) {\n        <thead class=\"fk-data-table__head\">\n          <tr class=\"fk-data-table__head-row\">\n            @if (rowSelection() && selectionColumnPosition() === 'start') {\n              <th class=\"fk-data-table__th fk-data-table__selection-cell\">\n                <input\n                  type=\"checkbox\"\n                  class=\"fk-data-table__checkbox\"\n                  [attr.aria-label]=\"\n                    headerSelectionState() === 'checked'\n                      ? 'Deselect all on page'\n                      : 'Select all on page'\n                  \"\n                  [checked]=\"headerSelectionState() === 'checked'\"\n                  [indeterminate]=\"headerSelectionState() === 'indeterminate'\"\n                  (click)=\"onToggleAllVisible($event)\"\n                />\n              </th>\n            }\n            @if (hasExpansionStart()) {\n              <th\n                class=\"fk-data-table__th fk-data-table__expand-cell\"\n                aria-hidden=\"true\"\n              ></th>\n            }\n            @for (column of visibleColumns(); track column.id) {\n              <th\n                class=\"fk-data-table__th\"\n                [fkColumnResize]=\"column.id\"\n                [enabled]=\"column.resizable === true\"\n                (columnResize)=\"onColumnResize($event)\"\n                [class.fk-data-table__th--sortable]=\"column.sortable\"\n                [class.fk-data-table__th--align-center]=\"\n                  column.align === 'center'\n                \"\n                [class.fk-data-table__th--align-end]=\"column.align === 'end'\"\n                [class.fk-data-table__th--pinned-start]=\"\n                  column.pinned === 'start'\n                \"\n                [class.fk-data-table__th--pinned-end]=\"column.pinned === 'end'\"\n                [style.width]=\"column.width ?? null\"\n                [style.min-width]=\"column.minWidth ?? null\"\n                [style.max-width]=\"column.maxWidth ?? null\"\n                [style.--fk-data-table-pin-offset]=\"getPinOffset(column)\"\n                [attr.aria-sort]=\"\n                  getSortDirection(column.id) === 'asc'\n                    ? 'ascending'\n                    : getSortDirection(column.id) === 'desc'\n                      ? 'descending'\n                      : null\n                \"\n                (click)=\"onHeaderClick(column)\"\n              >\n                @if (column.headerRenderer) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"column.headerRenderer\"\n                    [ngTemplateOutletContext]=\"{ $implicit: column }\"\n                  />\n                } @else {\n                  {{ column.header }}\n                }\n\n                @if (column.sortable) {\n                  <span\n                    class=\"fk-data-table__sort-indicator\"\n                    [class.fk-data-table__sort-indicator--asc]=\"\n                      getSortDirection(column.id) === 'asc'\n                    \"\n                    [class.fk-data-table__sort-indicator--desc]=\"\n                      getSortDirection(column.id) === 'desc'\n                    \"\n                    aria-hidden=\"true\"\n                  >\n                    <svg\n                      width=\"10\"\n                      height=\"10\"\n                      viewBox=\"0 0 10 10\"\n                      fill=\"none\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                    >\n                      <path d=\"M5 2L8 6H2L5 2Z\" fill=\"currentColor\" />\n                    </svg>\n                  </span>\n                }\n              </th>\n            }\n            @if (rowSelection() && selectionColumnPosition() === 'end') {\n              <th class=\"fk-data-table__th fk-data-table__selection-cell\">\n                <input\n                  type=\"checkbox\"\n                  class=\"fk-data-table__checkbox\"\n                  [attr.aria-label]=\"\n                    headerSelectionState() === 'checked'\n                      ? 'Deselect all on page'\n                      : 'Select all on page'\n                  \"\n                  [checked]=\"headerSelectionState() === 'checked'\"\n                  [indeterminate]=\"headerSelectionState() === 'indeterminate'\"\n                  (click)=\"onToggleAllVisible($event)\"\n                />\n              </th>\n            }\n            @if (hasExpansionEnd()) {\n              <th\n                class=\"fk-data-table__th fk-data-table__expand-cell\"\n                aria-hidden=\"true\"\n              ></th>\n            }\n          </tr>\n        </thead>\n      }\n\n      <tbody class=\"fk-data-table__body\">\n        @for (\n          row of engine.processedRows();\n          track mergedConfig().trackBy($index, row);\n          let i = $index\n        ) {\n          <tr\n            class=\"fk-data-table__row\"\n            [class.fk-data-table__row--selected]=\"isRowSelected(row)\"\n            [class.fk-data-table__row--expanded]=\"\n              hasExpansion() && isRowExpanded(row)\n            \"\n            [ngStyle]=\"getRowStyle(row, i)\"\n            (click)=\"onRowClick(row, i)\"\n          >\n            @if (rowSelection() && selectionColumnPosition() === 'start') {\n              <td class=\"fk-data-table__td fk-data-table__selection-cell\">\n                <input\n                  type=\"checkbox\"\n                  class=\"fk-data-table__checkbox\"\n                  [attr.aria-label]=\"selectionLabel()\"\n                  [checked]=\"isRowSelected(row)\"\n                  [disabled]=\"isRowSelectionDisabled(row)\"\n                  (click)=\"onToggleRow(row, $event)\"\n                />\n              </td>\n            }\n            @if (hasExpansionStart()) {\n              <td class=\"fk-data-table__td fk-data-table__expand-cell\">\n                @if (isRowExpandable(row)) {\n                  <button\n                    type=\"button\"\n                    class=\"fk-data-table__expand-button\"\n                    [class.fk-data-table__expand-button--expanded]=\"\n                      isRowExpanded(row)\n                    \"\n                    [attr.aria-label]=\"expansionLabel()\"\n                    [attr.aria-expanded]=\"isRowExpanded(row)\"\n                    (click)=\"onToggleExpand(row, $event)\"\n                  >\n                    <svg\n                      class=\"fk-data-table__expand-chevron\"\n                      width=\"10\"\n                      height=\"10\"\n                      viewBox=\"0 0 10 10\"\n                      fill=\"none\"\n                      aria-hidden=\"true\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                    >\n                      <path\n                        d=\"M3 1.5L6.5 5L3 8.5\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"1.5\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                      />\n                    </svg>\n                  </button>\n                }\n              </td>\n            }\n            @for (column of visibleColumns(); track column.id) {\n              <td\n                class=\"fk-data-table__td\"\n                [class.fk-data-table__td--truncate]=\"column.truncate\"\n                [class.fk-data-table__td--align-center]=\"\n                  column.align === 'center'\n                \"\n                [class.fk-data-table__td--align-end]=\"column.align === 'end'\"\n                [class.fk-data-table__td--pinned-start]=\"\n                  column.pinned === 'start'\n                \"\n                [class.fk-data-table__td--pinned-end]=\"column.pinned === 'end'\"\n                [style.--fk-data-table-pin-offset]=\"getPinOffset(column)\"\n              >\n                @if (column.cellRenderer) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"column.cellRenderer\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: getCellValue(column, row),\n                      row: row,\n                    }\"\n                  />\n                } @else {\n                  {{ getCellValue(column, row) }}\n                }\n              </td>\n            }\n            @if (rowSelection() && selectionColumnPosition() === 'end') {\n              <td class=\"fk-data-table__td fk-data-table__selection-cell\">\n                <input\n                  type=\"checkbox\"\n                  class=\"fk-data-table__checkbox\"\n                  [attr.aria-label]=\"selectionLabel()\"\n                  [checked]=\"isRowSelected(row)\"\n                  [disabled]=\"isRowSelectionDisabled(row)\"\n                  (click)=\"onToggleRow(row, $event)\"\n                />\n              </td>\n            }\n            @if (hasExpansionEnd()) {\n              <td class=\"fk-data-table__td fk-data-table__expand-cell\">\n                @if (isRowExpandable(row)) {\n                  <button\n                    type=\"button\"\n                    class=\"fk-data-table__expand-button\"\n                    [class.fk-data-table__expand-button--expanded]=\"\n                      isRowExpanded(row)\n                    \"\n                    [attr.aria-label]=\"expansionLabel()\"\n                    [attr.aria-expanded]=\"isRowExpanded(row)\"\n                    (click)=\"onToggleExpand(row, $event)\"\n                  >\n                    <svg\n                      class=\"fk-data-table__expand-chevron\"\n                      width=\"10\"\n                      height=\"10\"\n                      viewBox=\"0 0 10 10\"\n                      fill=\"none\"\n                      aria-hidden=\"true\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                    >\n                      <path\n                        d=\"M3 1.5L6.5 5L3 8.5\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"1.5\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                      />\n                    </svg>\n                  </button>\n                }\n              </td>\n            }\n          </tr>\n          @if (hasExpansion() && isRowExpanded(row)) {\n            <tr class=\"fk-data-table__detail-row\">\n              <td\n                class=\"fk-data-table__detail-cell\"\n                [attr.colspan]=\"totalColumnCount()\"\n              >\n                <ng-container\n                  [ngTemplateOutlet]=\"rowDetailTemplate()!\"\n                  [ngTemplateOutletContext]=\"{\n                    $implicit: row,\n                    row: row,\n                    index: i,\n                  }\"\n                />\n              </td>\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n\n    @if (isEmpty()) {\n      <div class=\"fk-data-table__empty\">\n        {{ mergedConfig().emptyMessage }}\n      </div>\n    }\n  </div>\n}\n\n@if (loading()) {\n  <div class=\"fk-data-table__loading-overlay\" aria-live=\"polite\">\n    <span class=\"fk-data-table__loading-text\">Loading\u2026</span>\n  </div>\n}\n", styles: [":host{display:block;position:relative;border:var(--fk-data-table-border-width, 1px) solid var(--fk-data-table-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-data-table-border-radius, var(--fk-radius-md, .375rem));overflow:hidden}.fk-data-table__scroll{overflow-x:auto;width:100%}.fk-data-table__table{width:100%;border-collapse:collapse;border-spacing:0}.fk-data-table__head{background:var(--fk-data-table-head-bg, var(--fk-color-surface-muted, #f7f9fb))}.fk-data-table__head-row{display:flex}.fk-data-table__table .fk-data-table__head-row{display:table-row}.fk-data-table__th{position:relative;padding:var(--fk-data-table-cell-padding, var(--fk-rhythm-3, .75rem));text-align:start;font-weight:var(--fk-data-table-head-font-weight, var(--fk-font-weight-semibold, 600));font-size:var(--fk-data-table-head-font-size, var(--fk-typography-small-font-size, .875rem));color:var(--fk-data-table-head-color, var(--fk-color-text-muted, #6b7a8d));border-bottom:1px solid var(--fk-data-table-border-color, var(--fk-color-border, #d9e2ee));white-space:nowrap;-webkit-user-select:none;user-select:none;flex:1}.fk-data-table__th--sortable{cursor:pointer}.fk-data-table__th--sortable:hover{color:var(--fk-data-table-head-hover-color, var(--fk-color-text, #1f2d3d))}.fk-data-table__th--align-center{text-align:center}.fk-data-table__th--align-end{text-align:end}.fk-data-table__table .fk-data-table__th{flex:none}.fk-data-table__sort-indicator{display:inline-flex;margin-inline-start:var(--fk-rhythm-1, .25rem);opacity:.3;transition:transform .15s ease,opacity .15s ease}.fk-data-table__sort-indicator--asc{opacity:1;transform:rotate(0)}.fk-data-table__sort-indicator--desc{opacity:1;transform:rotate(180deg)}.fk-data-table__viewport{overflow-y:auto;position:relative;max-height:var(--fk-data-table-viewport-height, 600px)}.fk-data-table__sentinel{position:absolute;top:0;left:0;width:1px;visibility:hidden}.fk-data-table__virtual-body{position:relative;will-change:transform}.fk-data-table__body{background:var(--fk-data-table-body-bg, var(--fk-color-surface, #ffffff))}.fk-data-table__row{display:flex;border-bottom:1px solid var(--fk-data-table-border-color, var(--fk-color-border, #d9e2ee));cursor:pointer}.fk-data-table__row:hover{background:var(--fk-data-table-row-hover-bg, var(--fk-color-surface-muted, #f7f9fb))}.fk-data-table__row:last-child{border-bottom:none}.fk-data-table__table .fk-data-table__row{display:table-row}.fk-data-table__td{padding:var(--fk-data-table-cell-padding, var(--fk-rhythm-3, .75rem));font-size:var(--fk-data-table-body-font-size, var(--fk-typography-body-font-size, .875rem));color:var(--fk-data-table-body-color, var(--fk-color-text, #1f2d3d));vertical-align:middle;flex:1}.fk-data-table__td--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fk-data-table__td--align-center{text-align:center}.fk-data-table__td--align-end{text-align:end}.fk-data-table__table .fk-data-table__td{flex:none}.fk-data-table__empty{padding:var(--fk-data-table-empty-padding, var(--fk-rhythm-8, 2rem));text-align:center;color:var(--fk-data-table-empty-color, var(--fk-color-text-muted, #6b7a8d));font-size:var(--fk-data-table-body-font-size, var(--fk-typography-body-font-size, .875rem))}.fk-data-table__loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--fk-data-table-loading-bg, var(--fk-color-surface-overlay, rgba(255, 255, 255, .7)));z-index:1}.fk-data-table__loading-text{font-size:var(--fk-data-table-body-font-size, var(--fk-typography-body-font-size, .875rem));color:var(--fk-data-table-loading-color, var(--fk-color-text-muted, #6b7a8d))}.fk-data-table__resize-handle{position:absolute;top:0;right:0;bottom:0;width:var(--fk-data-table-resize-handle-width, 4px);cursor:col-resize;background:transparent;z-index:1}.fk-data-table__resize-handle:hover,.fk-data-table__resize-handle:active{background:var(--fk-data-table-resize-handle-color, var(--fk-color-primary, #3b82f6))}.fk-data-table__th--pinned-start,.fk-data-table__td--pinned-start{position:sticky;left:var(--fk-data-table-pin-offset, 0);z-index:2;background:inherit}.fk-data-table__th--pinned-end,.fk-data-table__td--pinned-end{position:sticky;right:var(--fk-data-table-pin-offset, 0);z-index:2;background:inherit}.fk-data-table__selection-cell{flex:none;width:var(--fk-data-table-selection-cell-width, 2.75rem);min-width:var(--fk-data-table-selection-cell-width, 2.75rem);max-width:var(--fk-data-table-selection-cell-width, 2.75rem);text-align:center;cursor:default}.fk-data-table__selection-cell:hover{color:inherit}.fk-data-table__row--selected{background:var(--fk-data-table-row-selected-bg, var(--fk-color-primary-light, #eaf4ff))}.fk-data-table__row--selected:hover{background:var(--fk-data-table-row-selected-hover-bg, var(--fk-color-primary-light, #dbe9ff))}.fk-data-table__expand-cell{flex:none;width:var(--fk-data-table-expand-cell-width, 2.5rem);min-width:var(--fk-data-table-expand-cell-width, 2.5rem);max-width:var(--fk-data-table-expand-cell-width, 2.5rem);text-align:center;cursor:default;padding-inline:var(--fk-rhythm-1, .25rem)}.fk-data-table__expand-button{appearance:none;display:inline-flex;align-items:center;justify-content:center;width:var(--fk-data-table-expand-button-size, 1.5rem);height:var(--fk-data-table-expand-button-size, 1.5rem);padding:0;background:transparent;border:1px solid transparent;border-radius:var(--fk-data-table-expand-button-radius, .25rem);color:var(--fk-data-table-expand-color, var(--fk-color-text-muted, #5d6b80));cursor:pointer;transition:background-color .15s ease,color .15s ease,transform .15s ease}.fk-data-table__expand-button:hover{background:var(--fk-data-table-expand-button-hover-bg, var(--fk-color-surface-muted, #f1f4f8));color:var(--fk-data-table-expand-color-hover, var(--fk-color-text, #1c2433))}.fk-data-table__expand-button:focus-visible{outline:2px solid var(--fk-data-table-expand-focus-ring, var(--fk-color-primary, #0066cc));outline-offset:2px}.fk-data-table__expand-button--expanded{color:var(--fk-data-table-expand-color-active, var(--fk-color-primary, #0066cc))}.fk-data-table__expand-button--expanded .fk-data-table__expand-chevron{transform:rotate(90deg)}.fk-data-table__expand-chevron{transition:transform .15s ease}.fk-data-table__row--expanded{background:var(--fk-data-table-row-expanded-bg, var(--fk-color-surface-muted, #f7f9fb))}.fk-data-table__detail-row{background:var(--fk-data-table-detail-row-bg, var(--fk-color-surface, #ffffff))}.fk-data-table__detail-cell{padding:var(--fk-data-table-detail-cell-padding, var(--fk-rhythm-4, 1rem));border-top:1px solid var(--fk-data-table-detail-border-color, var(--fk-color-border, #d9e2ee));border-bottom:1px solid var(--fk-data-table-detail-border-color, var(--fk-color-border, #d9e2ee))}.fk-data-table__checkbox{appearance:none;width:var(--fk-data-table-checkbox-size, 1rem);height:var(--fk-data-table-checkbox-size, 1rem);margin:0;border:1px solid var(--fk-data-table-checkbox-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-data-table-checkbox-radius, .25rem);background:var(--fk-data-table-checkbox-bg, var(--fk-color-surface, #ffffff));cursor:pointer;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease;position:relative;vertical-align:middle}.fk-data-table__checkbox:focus-visible{outline:none;box-shadow:var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18))}.fk-data-table__checkbox:hover:not(:disabled){border-color:var(--fk-data-table-checkbox-hover-border-color, var(--fk-color-primary, #0a84ff))}.fk-data-table__checkbox:checked,.fk-data-table__checkbox:indeterminate{background:var(--fk-data-table-checkbox-checked-bg, var(--fk-color-primary, #0a84ff));border-color:var(--fk-data-table-checkbox-checked-border-color, var(--fk-color-primary, #0a84ff))}.fk-data-table__checkbox:checked:after{content:\"\";position:absolute;inset:0;background:var(--fk-data-table-checkbox-icon-color, var(--fk-white, #ffffff));mask:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='currentColor' d='M6.5 11L3 7.5l1-1L6.5 9 12 3.5l1 1z'/></svg>\") center/75% 75% no-repeat;-webkit-mask:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='currentColor' d='M6.5 11L3 7.5l1-1L6.5 9 12 3.5l1 1z'/></svg>\") center/75% 75% no-repeat}.fk-data-table__checkbox:indeterminate:after{content:\"\";position:absolute;inset:0;background:var(--fk-data-table-checkbox-icon-color, var(--fk-white, #ffffff));mask:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='3' y='7' width='10' height='2' rx='1' fill='currentColor'/></svg>\") center/75% 75% no-repeat;-webkit-mask:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='3' y='7' width='10' height='2' rx='1' fill='currentColor'/></svg>\") center/75% 75% no-repeat}.fk-data-table__checkbox:disabled{cursor:not-allowed;opacity:.5}.fk-data-table--resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.fk-data-table--sticky-header .fk-data-table__head{position:sticky;top:0;z-index:1}.fk-data-table--sticky-header .fk-data-table__table .fk-data-table__th{position:sticky;top:0;z-index:1;background:var(--fk-data-table-head-bg, var(--fk-color-surface-muted, #f7f9fb))}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], sortState: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortState", required: false }] }], filterState: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterState", required: false }] }], pageState: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageState", required: false }] }], rowSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSelection", required: false }] }], selectedKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedKeys", required: false }] }], getRowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "getRowId", required: false }] }], selectionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionDisabled", required: false }] }], selectionColumnPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionColumnPosition", required: false }] }], selectionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionLabel", required: false }] }], rowDetailTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowDetailTemplate", required: false }] }], expansionColumnPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "expansionColumnPosition", required: false }] }], expandedKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedKeys", required: false }] }], expandableRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandableRow", required: false }] }], expansionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expansionLabel", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], expansionChange: [{ type: i0.Output, args: ["expansionChange"] }], columnResize: [{ type: i0.Output, args: ["columnResize"] }], virtualViewport: [{ type: i0.ViewChild, args: ['virtualViewport', { isSignal: true }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], hostId: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }] } });
+
+/**
+ * Single-expand wrapper for `<fk-data-table>`. Mirror of
+ * `<fk-accordion-group>`: provides a coordinator scoped to itself, any
+ * descendant data-table picks it up via DI and routes every expansion
+ * toggle through it. The coordinator collapses the previously-active
+ * row when a new one expands so only one detail panel is open.
+ *
+ * Wrap a data-table when you want exclusive expansion:
+ *
+ * ```html
+ * <fk-data-table-group>
+ *   <fk-data-table [rowDetailTemplate]="detail" ... />
+ * </fk-data-table-group>
+ * ```
+ *
+ * Omit the wrapper for multi-expand (the default).
+ */
+class DataTableGroupComponent {
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        return ['fk-data-table-group', this.className()].filter(Boolean).join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DataTableGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: DataTableGroupComponent, isStandalone: true, selector: "fk-data-table-group", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, providers: [DataTableGroupCoordinator], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DataTableGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fk-data-table-group',
+                    standalone: true,
+                    imports: [],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [DataTableGroupCoordinator],
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ColumnResizeDirective, DEFAULT_TABLE_CONFIG, DataTableComponent, DataTableGroupComponent, DataTableGroupCoordinator, DataTableStackComponent, ResponsiveStrategyService, TableEngineService, VirtualizationEngineService };
+//# sourceMappingURL=frame-kit-ui-ng-ui-data-table.mjs.map