@life-cockpit/angular-ui-kit 2.3.0 → 2.4.0

package/fesm2022/life-cockpit-angular-ui-kit.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, PLATFORM_ID, signal, computed, Injectable, input, effect, ChangeDetectionStrategy, Component, model, contentChildren, untracked, output, ViewChild, ViewEncapsulation, HostListener, forwardRef, InjectionToken, ElementRef, viewChild, ChangeDetectorRef, EventEmitter, Output, Input, ViewChildren, HostBinding, ViewContainerRef, Renderer2, Directive, TemplateRef, ContentChildren, ContentChild, DestroyRef, afterNextRender, SecurityContext, NgZone, ApplicationRef, EnvironmentInjector, createComponent } from '@angular/core';
+import { inject, PLATFORM_ID, signal, computed, Injectable, input, effect, ChangeDetectionStrategy, Component, model, contentChildren, untracked, output, ViewChild, ViewEncapsulation, HostListener, forwardRef, InjectionToken, ElementRef, viewChild, ChangeDetectorRef, EventEmitter, Output, Input, ViewChildren, HostBinding, ViewContainerRef, Renderer2, Directive, TemplateRef, ContentChildren, ContentChild, linkedSignal, DestroyRef, afterNextRender, SecurityContext, NgZone, ApplicationRef, EnvironmentInjector, createComponent } from '@angular/core';
 import { isPlatformBrowser, NgClass, CommonModule, NgTemplateOutlet, NgStyle, SlicePipe } from '@angular/common';
 import * as i1$4 from '@angular/platform-browser';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -7121,6 +7121,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
  * - Per-cell class/style callbacks for conditional styling
  * - Custom cell templates via content projection
  * - Composed cells (e.g. avatar + badge + actions)
+ * - Hierarchical "tree" rows (grouped / expandable) via `idKey` + `parentKey`
  * - Responsive horizontal scrolling
  * - Empty state text for no data
  * - Accessible with proper table semantics
@@ -7190,6 +7191,31 @@ class TableComponent {
     actionsWidth = input(undefined, ...(ngDevMode ? [{ debugName: "actionsWidth" }] : /* istanbul ignore next */ []));
     /** Horizontal alignment of the action buttons (and header label) within the cell */
     actionsAlign = input('start', ...(ngDevMode ? [{ debugName: "actionsAlign" }] : /* istanbul ignore next */ []));
+    // -- Tree / grouped rows --
+    /**
+     * Row field holding the unique id. Required (together with {@link parentKey})
+     * to enable hierarchical "tree mode". Absent ⇒ today's flat table.
+     */
+    idKey = input(undefined, ...(ngDevMode ? [{ debugName: "idKey" }] : /* istanbul ignore next */ []));
+    /**
+     * Row field referencing the parent row's id. Presence of both `idKey` and
+     * `parentKey` enables tree mode. Rows with an absent/empty or unknown parent
+     * id are treated as roots.
+     */
+    parentKey = input(undefined, ...(ngDevMode ? [{ debugName: "parentKey" }] : /* istanbul ignore next */ []));
+    /** Column key the chevron + indentation attach to. Default: first column. */
+    treeColumn = input(undefined, ...(ngDevMode ? [{ debugName: "treeColumn" }] : /* istanbul ignore next */ []));
+    /** Initial expand state for all parent rows when uncontrolled. Default: true. */
+    defaultExpanded = input(true, ...(ngDevMode ? [{ debugName: "defaultExpanded" }] : /* istanbul ignore next */ []));
+    /**
+     * Controlled set of expanded parent ids. When provided, the table renders
+     * exactly these as expanded; combine with {@link expandedIdsChange} for
+     * `[(expandedIds)]`. When omitted, expansion is uncontrolled and seeded by
+     * {@link defaultExpanded}.
+     */
+    expandedIds = input(undefined, ...(ngDevMode ? [{ debugName: "expandedIds" }] : /* istanbul ignore next */ []));
+    /** Indentation per depth level, in px. Default: 20. */
+    indentSize = input(20, ...(ngDevMode ? [{ debugName: "indentSize" }] : /* istanbul ignore next */ []));
     /** Emitted when a sortable column header is clicked */
     sort = output();
     /** Emitted when a row is clicked */
@@ -7200,14 +7226,24 @@ class TableComponent {
     selectionChange = output();
     /** Emitted when a row action button is clicked */
     actionClick = output();
+    /** Emitted when a parent row is expanded/collapsed (tree mode). */
+    rowToggle = output();
+    /** Emitted with the full list of expanded parent ids; enables `[(expandedIds)]`. */
+    expandedIdsChange = output();
     // -- Internal state --
     currentSort = signal(null, ...(ngDevMode ? [{ debugName: "currentSort" }] : /* istanbul ignore next */ []));
     currentPage = signal(0, ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
-    internalPageSize = signal(10, ...(ngDevMode ? [{ debugName: "internalPageSize" }] : /* istanbul ignore next */ []));
+    /**
+     * Effective page size. Seeded from the `pageSize` input (resetting if it
+     * changes) and overridable by the user via the page-size dropdown.
+     */
+    internalPageSize = linkedSignal(() => this.pageSize(), ...(ngDevMode ? [{ debugName: "internalPageSize" }] : /* istanbul ignore next */ []));
     selectedRows = signal(new Set(), ...(ngDevMode ? [{ debugName: "selectedRows" }] : /* istanbul ignore next */ []));
     columnFilters = signal({}, ...(ngDevMode ? [{ debugName: "columnFilters" }] : /* istanbul ignore next */ []));
     editingCell = signal(null, ...(ngDevMode ? [{ debugName: "editingCell" }] : /* istanbul ignore next */ []));
     editValue = signal('', ...(ngDevMode ? [{ debugName: "editValue" }] : /* istanbul ignore next */ []));
+    /** User expand/collapse overrides keyed by row id (uncontrolled mode). */
+    expandOverrides = signal(new Map(), ...(ngDevMode ? [{ debugName: "expandOverrides" }] : /* istanbul ignore next */ []));
     /**
      * Filtered data (applies column filters)
      */
@@ -7223,15 +7259,9 @@ class TableComponent {
         }
         return items;
     }, ...(ngDevMode ? [{ debugName: "filteredData" }] : /* istanbul ignore next */ []));
-    /**
-     * Sorted data
-     */
-    sortedData = computed(() => {
-        const items = [...this.filteredData()];
-        const sortState = this.currentSort();
-        if (!sortState)
-            return items;
-        return items.sort((a, b) => {
+    /** Comparator for the active sort, shared by flat sorting and tree sibling sorting. */
+    rowComparator(sortState) {
+        return (a, b) => {
             const aVal = a[sortState.column];
             const bVal = b[sortState.column];
             let cmp = 0;
@@ -7246,10 +7276,20 @@ class TableComponent {
             else
                 cmp = String(aVal).localeCompare(String(bVal));
             return sortState.direction === 'asc' ? cmp : -cmp;
-        });
+        };
+    }
+    /**
+     * Sorted data
+     */
+    sortedData = computed(() => {
+        const items = [...this.filteredData()];
+        const sortState = this.currentSort();
+        if (!sortState)
+            return items;
+        return items.sort(this.rowComparator(sortState));
     }, ...(ngDevMode ? [{ debugName: "sortedData" }] : /* istanbul ignore next */ []));
     /**
-     * Paginated data (or all if pagination disabled)
+     * Paginated data (or all if pagination disabled). Flat mode only.
      */
     displayData = computed(() => {
         const items = this.sortedData();
@@ -7259,21 +7299,178 @@ class TableComponent {
         const start = this.currentPage() * ps;
         return items.slice(start, start + ps);
     }, ...(ngDevMode ? [{ debugName: "displayData" }] : /* istanbul ignore next */ []));
+    // -- Tree / grouped rows -----------------------------------------------------
+    /** Whether hierarchical tree mode is active. */
+    treeMode = computed(() => !!this.idKey() && !!this.parentKey(), ...(ngDevMode ? [{ debugName: "treeMode" }] : /* istanbul ignore next */ []));
+    /** Column the chevron + indentation attach to (defaults to the first column). */
+    effectiveTreeColumn = computed(() => this.treeColumn() || this.columns()[0]?.key, ...(ngDevMode ? [{ debugName: "effectiveTreeColumn" }] : /* istanbul ignore next */ []));
+    /** Stable map of row object → its index in `data()` (row identity for tree mode). */
+    dataIndexMap = computed(() => {
+        const map = new Map();
+        this.data().forEach((row, i) => map.set(row, i));
+        return map;
+    }, ...(ngDevMode ? [{ debugName: "dataIndexMap" }] : /* istanbul ignore next */ []));
+    /** Parent → ordered children index built from `idKey`/`parentKey`. */
+    treeBuild = computed(() => {
+        const idKey = this.idKey();
+        const parentKey = this.parentKey();
+        const byId = new Map();
+        const childrenOf = new Map();
+        const roots = [];
+        if (!idKey || !parentKey)
+            return { byId, childrenOf, roots };
+        const rows = this.data();
+        for (const row of rows) {
+            const id = String(row[idKey] ?? '');
+            if (id)
+                byId.set(id, row);
+        }
+        for (const row of rows) {
+            const parentRaw = row[parentKey];
+            const parentId = parentRaw == null ? '' : String(parentRaw);
+            if (parentId && byId.has(parentId)) {
+                const siblings = childrenOf.get(parentId) ?? [];
+                siblings.push(row);
+                childrenOf.set(parentId, siblings);
+            }
+            else {
+                // No parent, empty parent, or orphaned (unknown parent) ⇒ root.
+                roots.push(row);
+            }
+        }
+        return { byId, childrenOf, roots };
+    }, ...(ngDevMode ? [{ debugName: "treeBuild" }] : /* istanbul ignore next */ []));
+    /**
+     * Tree restricted to rows that match the active filters together with their
+     * ancestor chain (so the path to a match stays visible).
+     */
+    treeFiltered = computed(() => {
+        const { byId, childrenOf, roots } = this.treeBuild();
+        const parentKey = this.parentKey();
+        const filters = this.columnFilters();
+        const active = this.filterable() && parentKey && Object.values(filters).some((v) => v.trim());
+        if (!active)
+            return { childrenOf, roots };
+        const matches = (row) => Object.entries(filters).every(([key, value]) => !value.trim() ||
+            String(row[key] ?? '').toLowerCase().includes(value.toLowerCase()));
+        // Visible = every matching row plus all of its ancestors.
+        const visible = new Set();
+        for (const row of this.data()) {
+            if (!matches(row))
+                continue;
+            let current = row;
+            while (current && !visible.has(current)) {
+                visible.add(current);
+                const parentRaw = current[parentKey];
+                const parentId = parentRaw == null ? '' : String(parentRaw);
+                current = parentId ? byId.get(parentId) : undefined;
+            }
+        }
+        const visibleChildrenOf = new Map();
+        const visibleRoots = [];
+        for (const row of this.data()) {
+            if (!visible.has(row))
+                continue;
+            const parentRaw = row[parentKey];
+            const parentId = parentRaw == null ? '' : String(parentRaw);
+            const parent = parentId ? byId.get(parentId) : undefined;
+            if (parent && visible.has(parent)) {
+                const siblings = visibleChildrenOf.get(parentId) ?? [];
+                siblings.push(row);
+                visibleChildrenOf.set(parentId, siblings);
+            }
+            else {
+                visibleRoots.push(row);
+            }
+        }
+        return { childrenOf: visibleChildrenOf, roots: visibleRoots };
+    }, ...(ngDevMode ? [{ debugName: "treeFiltered" }] : /* istanbul ignore next */ []));
+    /** Tree with each sibling group sorted by the active sort (structure kept intact). */
+    treeSorted = computed(() => {
+        const { childrenOf, roots } = this.treeFiltered();
+        const sortState = this.currentSort();
+        if (!sortState)
+            return { childrenOf, roots };
+        const cmp = this.rowComparator(sortState);
+        const sortedChildrenOf = new Map();
+        for (const [parentId, siblings] of childrenOf) {
+            sortedChildrenOf.set(parentId, [...siblings].sort(cmp));
+        }
+        return { childrenOf: sortedChildrenOf, roots: [...roots].sort(cmp) };
+    }, ...(ngDevMode ? [{ debugName: "treeSorted" }] : /* istanbul ignore next */ []));
+    /** Root rows after filter/sort — the unit of pagination in tree mode. */
+    treeRoots = computed(() => this.treeSorted().roots, ...(ngDevMode ? [{ debugName: "treeRoots" }] : /* istanbul ignore next */ []));
+    /**
+     * Render-ready rows. In flat mode this wraps the existing paginated data; in
+     * tree mode it paginates roots and flattens each visible (expanded) subtree.
+     */
+    displayRows = computed(() => {
+        if (!this.treeMode()) {
+            return this.displayData().map((row, i) => ({
+                row,
+                absIndex: this.getAbsoluteIndex(i),
+                id: null,
+                depth: 0,
+                level: 0,
+                hasChildren: false,
+                expanded: false,
+                posInSet: 0,
+                setSize: 0,
+            }));
+        }
+        const idKey = this.idKey();
+        const { childrenOf } = this.treeSorted();
+        let roots = this.treeRoots();
+        if (this.paginate()) {
+            const ps = this.internalPageSize();
+            const start = this.currentPage() * ps;
+            roots = roots.slice(start, start + ps);
+        }
+        const dataIndex = this.dataIndexMap();
+        const out = [];
+        const walk = (group, depth) => {
+            group.forEach((row, idx) => {
+                const id = String(row[idKey] ?? '');
+                const children = childrenOf.get(id) ?? [];
+                const hasChildren = children.length > 0;
+                const expanded = hasChildren && this.isExpanded(id);
+                out.push({
+                    row,
+                    absIndex: dataIndex.get(row) ?? -1,
+                    id,
+                    depth,
+                    level: depth + 1,
+                    hasChildren,
+                    expanded,
+                    posInSet: idx + 1,
+                    setSize: group.length,
+                });
+                if (expanded)
+                    walk(children, depth + 1);
+            });
+        };
+        walk(roots, 0);
+        return out;
+    }, ...(ngDevMode ? [{ debugName: "displayRows" }] : /* istanbul ignore next */ []));
     /** Total pages */
     totalPages = computed(() => {
         if (!this.paginate())
             return 1;
-        return Math.max(1, Math.ceil(this.filteredData().length / this.internalPageSize()));
+        const total = this.treeMode() ? this.treeRoots().length : this.filteredData().length;
+        return Math.max(1, Math.ceil(total / this.internalPageSize()));
     }, ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
-    /** Total filtered row count */
-    totalRows = computed(() => this.filteredData().length, ...(ngDevMode ? [{ debugName: "totalRows" }] : /* istanbul ignore next */ []));
+    /**
+     * Pagination row count. Tree mode counts root rows (the paginated unit); flat
+     * mode counts filtered rows.
+     */
+    totalRows = computed(() => this.treeMode() ? this.treeRoots().length : this.filteredData().length, ...(ngDevMode ? [{ debugName: "totalRows" }] : /* istanbul ignore next */ []));
     /** Whether all visible rows are selected */
     allSelected = computed(() => {
-        const data = this.displayData();
-        if (data.length === 0)
+        const rows = this.displayRows();
+        if (rows.length === 0)
             return false;
         const selected = this.selectedRows();
-        return data.every((_, i) => selected.has(this.getAbsoluteIndex(i)));
+        return rows.every((r) => selected.has(r.absIndex));
     }, ...(ngDevMode ? [{ debugName: "allSelected" }] : /* istanbul ignore next */ []));
     pageSizeSelectOptions = computed(() => this.pageSizeOptions().map((opt) => ({
         value: opt,
@@ -7338,13 +7535,13 @@ class TableComponent {
     getCellValue(row, columnKey) {
         return row[columnKey];
     }
-    getFormattedCellValue(row, column, relativeRowIndex) {
+    getFormattedCellValue(row, column, rowIndex) {
         const value = this.getCellValue(row, column.key);
         if (!column.formatter)
             return value;
-        return column.formatter(value, row, column, this.getAbsoluteIndex(relativeRowIndex));
+        return column.formatter(value, row, column, rowIndex);
     }
-    getCellClasses(row, column, relativeRowIndex) {
+    getCellClasses(row, column, rowIndex) {
         const classes = [];
         if (column.cssClass)
             classes.push(column.cssClass);
@@ -7352,20 +7549,33 @@ class TableComponent {
             classes.push(column.cellClass);
         }
         else if (typeof column.cellClass === 'function') {
-            const resolved = column.cellClass(this.getCellValue(row, column.key), row, column, this.getAbsoluteIndex(relativeRowIndex));
+            const resolved = column.cellClass(this.getCellValue(row, column.key), row, column, rowIndex);
             if (resolved)
                 classes.push(resolved);
         }
         return classes.join(' ').trim();
     }
-    getCellStyles(row, column, relativeRowIndex) {
+    getCellStyles(row, column, rowIndex) {
         if (!column.cellStyle)
             return null;
         if (typeof column.cellStyle === 'function') {
-            return column.cellStyle(this.getCellValue(row, column.key), row, column, this.getAbsoluteIndex(relativeRowIndex));
+            return column.cellStyle(this.getCellValue(row, column.key), row, column, rowIndex);
         }
         return column.cellStyle;
     }
+    /** Whether the given column is the disclosure/indent column in tree mode. */
+    isTreeColumn(columnKey) {
+        return this.treeMode() && columnKey === this.effectiveTreeColumn();
+    }
+    /** Indent levels to render before a row's chevron (one guide per ancestor depth). */
+    indentLevels(depth) {
+        return Array.from({ length: depth }, (_, i) => i);
+    }
+    /** Accessible name for a row's disclosure button (the tree column's value). */
+    treeCellLabel(row) {
+        const col = this.effectiveTreeColumn();
+        return col ? String(row[col] ?? '') : '';
+    }
     getCellTemplate(columnKey) {
         return this.cellTemplates?.find((template) => template.columnKey() === columnKey);
     }
@@ -7378,21 +7588,62 @@ class TableComponent {
     // -- Row Actions --
     /** Whether the trailing actions column should be rendered */
     hasActions = computed(() => this.actions().length > 0, ...(ngDevMode ? [{ debugName: "hasActions" }] : /* istanbul ignore next */ []));
-    isActionHidden(action, row, relativeRowIndex) {
-        return action.hidden ? action.hidden(row, this.getAbsoluteIndex(relativeRowIndex)) : false;
+    isActionHidden(action, row, rowIndex) {
+        return action.hidden ? action.hidden(row, rowIndex) : false;
     }
-    isActionDisabled(action, row, relativeRowIndex) {
-        return action.disabled ? action.disabled(row, this.getAbsoluteIndex(relativeRowIndex)) : false;
+    isActionDisabled(action, row, rowIndex) {
+        return action.disabled ? action.disabled(row, rowIndex) : false;
     }
     /**
      * Handles an action button click. The DOM click is stopped from propagating
      * (see template `$event.stopPropagation()`), so the row's `rowClick` never fires.
      */
-    onActionClick(action, row, relativeRowIndex) {
+    onActionClick(action, row, rowIndex) {
         this.actionClick.emit({
             action: action.key,
             row,
-            rowIndex: this.getAbsoluteIndex(relativeRowIndex),
+            rowIndex,
+        });
+    }
+    // -- Tree expand / collapse --------------------------------------------------
+    /** Whether the parent row with the given id is currently expanded. */
+    isExpanded(id) {
+        const controlled = this.expandedIds();
+        if (controlled !== undefined)
+            return controlled.includes(id);
+        const override = this.expandOverrides().get(id);
+        if (override !== undefined)
+            return override;
+        return this.defaultExpanded();
+    }
+    /** Chevron click: toggle expand state without triggering the row click. */
+    onChevronClick(displayRow, event) {
+        event.stopPropagation();
+        if (displayRow.id)
+            this.toggleRow(displayRow.id, displayRow.row);
+    }
+    toggleRow(id, row) {
+        const expanded = !this.isExpanded(id);
+        this.expandOverrides.update((map) => {
+            const next = new Map(map);
+            next.set(id, expanded);
+            return next;
+        });
+        this.rowToggle.emit({ id, expanded, row });
+        this.expandedIdsChange.emit(this.nextExpandedIds(id, expanded));
+    }
+    /** The full list of expanded parent ids after applying a single toggle. */
+    nextExpandedIds(changedId, changedExpanded) {
+        const controlled = this.expandedIds();
+        const overrides = this.expandOverrides();
+        const parentIds = Array.from(this.treeBuild().childrenOf.keys());
+        return parentIds.filter((pid) => {
+            if (pid === changedId)
+                return changedExpanded;
+            if (controlled !== undefined)
+                return controlled.includes(pid);
+            const override = overrides.get(pid);
+            return override !== undefined ? override : this.defaultExpanded();
         });
     }
     // -- Pagination --
@@ -7426,30 +7677,28 @@ class TableComponent {
     // -- Selection --
     toggleSelectAll() {
         const selected = new Set(this.selectedRows());
-        const data = this.displayData();
+        const rows = this.displayRows();
         const allSelected = this.allSelected();
-        data.forEach((_, i) => {
-            const absIdx = this.getAbsoluteIndex(i);
+        rows.forEach((r) => {
             if (allSelected)
-                selected.delete(absIdx);
+                selected.delete(r.absIndex);
             else
-                selected.add(absIdx);
+                selected.add(r.absIndex);
         });
         this.selectedRows.set(selected);
         this.emitSelectionChange();
     }
-    toggleRowSelect(relativeIndex) {
-        const absIdx = this.getAbsoluteIndex(relativeIndex);
+    toggleRowSelect(absIndex) {
         const selected = new Set(this.selectedRows());
-        if (selected.has(absIdx))
-            selected.delete(absIdx);
+        if (selected.has(absIndex))
+            selected.delete(absIndex);
         else
-            selected.add(absIdx);
+            selected.add(absIndex);
         this.selectedRows.set(selected);
         this.emitSelectionChange();
     }
-    isRowSelected(relativeIndex) {
-        return this.selectedRows().has(this.getAbsoluteIndex(relativeIndex));
+    isRowSelected(absIndex) {
+        return this.selectedRows().has(absIndex);
     }
     getAbsoluteIndex(relativeIndex) {
         if (!this.paginate())
@@ -7471,37 +7720,36 @@ class TableComponent {
         return this.columnFilters()[columnKey] || '';
     }
     // -- Inline Editing --
-    startEdit(rowIndex, column, currentValue) {
+    startEdit(absIndex, column, currentValue) {
         if (!this.editable())
             return;
         const col = this.columns().find(c => c.key === column);
         if (col && col.editable === false)
             return;
-        this.editingCell.set({ rowIndex, column });
+        this.editingCell.set({ rowIndex: absIndex, column });
         this.editValue.set(String(currentValue ?? ''));
     }
-    isEditing(rowIndex, column) {
+    isEditing(absIndex, column) {
         const cell = this.editingCell();
-        return cell !== null && cell.rowIndex === rowIndex && cell.column === column;
+        return cell !== null && cell.rowIndex === absIndex && cell.column === column;
     }
-    commitEdit(rowIndex, column) {
-        const absIdx = this.getAbsoluteIndex(rowIndex);
-        const row = this.data()[absIdx];
+    commitEdit(absIndex, column) {
+        const row = this.data()[absIndex];
         if (!row)
             return;
         const oldValue = row[column];
         const newValue = this.editValue();
         this.editingCell.set(null);
         if (String(oldValue ?? '') !== newValue) {
-            this.cellEdit.emit({ row, column, oldValue, newValue, rowIndex: absIdx });
+            this.cellEdit.emit({ row, column, oldValue, newValue, rowIndex: absIndex });
         }
     }
     cancelEdit() {
         this.editingCell.set(null);
     }
-    onEditKeydown(event, rowIndex, column) {
+    onEditKeydown(event, absIndex, column) {
         if (event.key === 'Enter') {
-            this.commitEdit(rowIndex, column);
+            this.commitEdit(absIndex, column);
         }
         else if (event.key === 'Escape') {
             this.cancelEdit();
@@ -7511,15 +7759,15 @@ class TableComponent {
         return event.target.value;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: TableComponent, isStandalone: true, selector: "lc-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, paginate: { classPropertyName: "paginate", publicName: "paginate", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, actionsLabel: { classPropertyName: "actionsLabel", publicName: "actionsLabel", isSignal: true, isRequired: false, transformFunction: null }, actionsWidth: { classPropertyName: "actionsWidth", publicName: "actionsWidth", isSignal: true, isRequired: false, transformFunction: null }, actionsAlign: { classPropertyName: "actionsAlign", publicName: "actionsAlign", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sort: "sort", rowClick: "rowClick", cellEdit: "cellEdit", selectionChange: "selectionChange", actionClick: "actionClick" }, queries: [{ propertyName: "cellTemplates", predicate: TableCellDirective }], ngImport: i0, template: "<div [class]=\"wrapperClasses()\">\n  <table [class]=\"tableClasses()\" role=\"table\">\n    <thead>\n      <!-- Filter row -->\n      @if (filterable()) {\n        <tr class=\"lc-table__filter-row\">\n          @if (selectable()) {\n            <th class=\"lc-table__select-cell\"></th>\n          }\n          @for (column of columns(); track column.key) {\n            <th>\n              @if (column.filterable !== false) {\n                <lc-input\n                  class=\"lc-table__filter-input\"\n                  size=\"xs\"\n                  [placeholder]=\"'Filter ' + column.label\"\n                  [ariaLabel]=\"'Filter by ' + column.label\"\n                  [ngModel]=\"getFilterValue(column.key)\"\n                  (ngModelChange)=\"onFilterChange(column.key, $event)\"\n                />\n              }\n            </th>\n          }\n          @if (hasActions()) {\n            <th class=\"lc-table__actions-cell\"></th>\n          }\n        </tr>\n      }\n      <!-- Header row -->\n      <tr>\n        @if (selectable()) {\n          <th class=\"lc-table__select-cell\" scope=\"col\">\n            <input\n              type=\"checkbox\"\n              class=\"lc-table__checkbox\"\n              [checked]=\"allSelected()\"\n              (change)=\"toggleSelectAll()\"\n              aria-label=\"Select all rows\"\n            />\n          </th>\n        }\n        @for (column of columns(); track column.key) {\n          <th\n            scope=\"col\"\n            [class]=\"getHeaderClasses(column) + (column.cssClass ? ' ' + column.cssClass : '')\"\n            [attr.aria-sort]=\"getAriaSort(column.key)\"\n            [style.width]=\"column.width\"\n            [title]=\"column.tooltip || ''\"\n            (click)=\"handleSort(column.key)\">\n            {{ column.label }}\n            @if (column.sortable && getSortState(column.key)) {\n              <span class=\"sort-indicator\" [attr.aria-label]=\"getSortState(column.key) === 'asc' ? 'sorted ascending' : 'sorted descending'\">\n                @if (getSortState(column.key) === 'asc') {\n                  \u2191\n                } @else {\n                  \u2193\n                }\n              </span>\n            }\n          </th>\n        }\n        @if (hasActions()) {\n          <th\n            scope=\"col\"\n            class=\"lc-table__actions-cell\"\n            [class]=\"'lc-table__actions-cell--' + actionsAlign()\"\n            [style.width]=\"actionsWidth()\"\n          >\n            {{ actionsLabel() }}\n          </th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @if (displayData().length === 0) {\n        <tr>\n          <td [attr.colspan]=\"columns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\" class=\"lc-table__empty\">\n            {{ emptyText() }}\n          </td>\n        </tr>\n      } @else {\n        @for (row of displayData(); track $index; let i = $index) {\n          <tr\n            [class.lc-table__row--selected]=\"selectable() && isRowSelected(i)\"\n            (click)=\"onRowClick(row)\"\n          >\n            @if (selectable()) {\n              <td class=\"lc-table__select-cell\">\n                <input\n                  type=\"checkbox\"\n                  class=\"lc-table__checkbox\"\n                  [checked]=\"isRowSelected($index)\"\n                  (change)=\"toggleRowSelect($index)\"\n                  (click)=\"$event.stopPropagation()\"\n                  [attr.aria-label]=\"'Select row ' + ($index + 1)\"\n                />\n              </td>\n            }\n            @for (column of columns(); track column.key) {\n              <td\n                [class]=\"getCellClasses(row, column, i)\"\n                [ngStyle]=\"getCellStyles(row, column, i)\"\n                (dblclick)=\"editable() ? startEdit($index, column.key, getCellValue(row, column.key)) : null\"\n              >\n                @if (isEditing($index, column.key)) {\n                  <input\n                    type=\"text\"\n                    class=\"lc-table__edit-input\"\n                    [value]=\"editValue()\"\n                    (input)=\"editValue.set(getInputValue($event))\"\n                    (blur)=\"commitEdit($index, column.key)\"\n                    (keydown)=\"onEditKeydown($event, $index, column.key)\"\n                    autofocus\n                  />\n                } @else if (hasCustomTemplate(column.key)) {\n                  <ng-container *ngTemplateOutlet=\"getCellTemplate(column.key)!.template; context: { $implicit: row }\"></ng-container>\n                } @else {\n                  {{ getFormattedCellValue(row, column, i) }}\n                }\n              </td>\n            }\n            @if (hasActions()) {\n              <td\n                class=\"lc-table__actions-cell\"\n                [class]=\"'lc-table__actions-cell--' + actionsAlign()\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <div class=\"lc-table__actions\">\n                  @for (action of actions(); track action.key) {\n                    @if (!isActionHidden(action, row, i)) {\n                      <lc-button\n                        [variant]=\"action.variant ?? 'ghost'\"\n                        size=\"xs\"\n                        [iconOnly]=\"!action.label\"\n                        [disabled]=\"isActionDisabled(action, row, i)\"\n                        [ariaLabel]=\"action.tooltip ?? action.label ?? action.key\"\n                        (clicked)=\"onActionClick(action, row, i)\"\n                      >\n                        @if (action.icon) {\n                          <lc-icon [name]=\"action.icon\" size=\"sm\" [decorative]=\"true\" />\n                        }\n                        @if (action.label) {\n                          {{ action.label }}\n                        }\n                      </lc-button>\n                    }\n                  }\n                </div>\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<!-- Pagination -->\n@if (paginate()) {\n  <div class=\"lc-table-pagination\">\n    <div class=\"lc-table-pagination__info\">\n      {{ paginationStart }}\u2013{{ paginationEnd }} of {{ totalRows() }}\n    </div>\n    <div class=\"lc-table-pagination__controls\">\n      <lc-select\n        class=\"lc-table-pagination__size\"\n        [size]=\"size() === 'sm' ? 'sm' : size() === 'lg' ? 'lg' : 'md'\"\n        [options]=\"pageSizeSelectOptions()\"\n        [ngModel]=\"internalPageSize()\"\n        [ariaLabel]=\"'Rows per page'\"\n        (ngModelChange)=\"onPageSizeModelChange($event)\"\n      />\n      <button\n        type=\"button\"\n        class=\"lc-table-pagination__btn\"\n        [disabled]=\"currentPage() === 0\"\n        (click)=\"goToPage(currentPage() - 1)\"\n        aria-label=\"Previous page\"\n      >\u2039</button>\n      <span class=\"lc-table-pagination__page\">\n        {{ currentPage() + 1 }} / {{ totalPages() }}\n      </span>\n      <button\n        type=\"button\"\n        class=\"lc-table-pagination__btn\"\n        [disabled]=\"currentPage() >= totalPages() - 1\"\n        (click)=\"goToPage(currentPage() + 1)\"\n        aria-label=\"Next page\"\n      >\u203A</button>\n    </div>\n  </div>\n}\n", styles: [".lc-table-wrapper{width:100%}.lc-table-wrapper--responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}@media(max-width:768px){.lc-table-wrapper--responsive::-webkit-scrollbar{height:8px}.lc-table-wrapper--responsive::-webkit-scrollbar-thumb{background-color:var(--color-border);border-radius:var(--border-radius-sm)}}.lc-table{width:100%;border-collapse:collapse;border-spacing:0;background-color:var(--color-surface);color:var(--color-text-primary);font-family:var(--typography-font-family)}.lc-table thead{background-color:var(--color-surface-2);border-bottom:2px solid var(--color-border-strong)}.lc-table thead tr th{padding:var(--lc-density-padding-sm, var(--spacing-3)) var(--lc-density-padding-md, var(--spacing-4));text-align:left;font-weight:var(--typography-font-weight-semibold);font-size:var(--typography-font-size-sm);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-secondary);white-space:nowrap;-webkit-user-select:none;user-select:none}.lc-table thead tr th.sortable{cursor:pointer;position:relative;padding-right:var(--spacing-8);transition:background-color .2s ease}.lc-table thead tr th.sortable:hover{background-color:var(--color-surface-hover);color:var(--color-text-primary)}.lc-table thead tr th.sortable .sort-indicator{position:absolute;right:var(--spacing-3);top:50%;transform:translateY(-50%);font-size:var(--typography-font-size-xs);color:var(--color-primary)}.lc-table thead tr th.sorted-asc,.lc-table thead tr th.sorted-desc{background-color:var(--color-surface-hover);color:var(--color-text-primary)}.lc-table tbody tr{border-bottom:1px solid var(--color-divider)}.lc-table tbody tr:last-child{border-bottom:none}.lc-table tbody tr td{padding:var(--lc-density-padding-sm, var(--spacing-3)) var(--lc-density-padding-md, var(--spacing-4));font-size:var(--typography-font-size-sm);color:var(--color-text-primary)}.lc-table__empty{text-align:center;padding:var(--spacing-8) var(--spacing-4)!important;color:var(--color-text-secondary);font-style:italic}.lc-table--striped tbody tr:nth-child(2n){background-color:var(--color-surface-2)}.lc-table--bordered{border:1px solid var(--color-border)}.lc-table--bordered thead tr th,.lc-table--bordered tbody tr td{border-right:1px solid var(--color-divider)}.lc-table--bordered thead tr th:last-child,.lc-table--bordered tbody tr td:last-child{border-right:none}.lc-table--bordered tbody tr{border-bottom:1px solid var(--color-border)}.lc-table--hoverable tbody tr{transition:background-color .15s ease;cursor:pointer}.lc-table--hoverable tbody tr:hover{background-color:var(--color-surface-hover)}.lc-table--sm thead tr th,.lc-table--sm tbody tr td{padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--lc-density-padding-sm, var(--spacing-3));font-size:var(--typography-font-size-xs)}.lc-table--lg thead tr th,.lc-table--lg tbody tr td{padding:var(--lc-density-padding-md, var(--spacing-4)) var(--spacing-5);font-size:var(--typography-font-size-base)}.lc-table__filter-row th{padding:var(--spacing-2) var(--spacing-4)!important;background-color:var(--color-background)!important;border-bottom:1px solid var(--color-divider)!important}.lc-table__filter-input{width:100%;display:block}.lc-table__filter-input .input-field{font-size:var(--typography-font-size-xs)}.lc-table__select-cell{width:40px;text-align:center!important;padding:var(--spacing-2)!important}.lc-table__checkbox{width:16px;height:16px;cursor:pointer;accent-color:var(--color-primary)}.lc-table__row--selected{background-color:var(--color-surface-selected)!important}.lc-table__actions-cell{white-space:nowrap}.lc-table th.lc-table__actions-cell--start,.lc-table td.lc-table__actions-cell--start{text-align:left}.lc-table th.lc-table__actions-cell--center,.lc-table td.lc-table__actions-cell--center{text-align:center}.lc-table th.lc-table__actions-cell--end,.lc-table td.lc-table__actions-cell--end{text-align:right}.lc-table__actions{display:flex;align-items:center;gap:var(--spacing-2);justify-content:flex-start}.lc-table__actions-cell--center .lc-table__actions{justify-content:center}.lc-table__actions-cell--end .lc-table__actions{justify-content:flex-end}.lc-table__edit-input{width:100%;padding:var(--spacing-1) var(--spacing-2);border:2px solid var(--color-primary);border-radius:var(--border-radius-sm);font-size:inherit;background-color:var(--color-surface-2);color:var(--color-text-primary);outline:none}.lc-table-pagination{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-3) var(--spacing-1);font-size:var(--typography-font-size-sm);color:var(--color-text-secondary)}.lc-table-pagination__info{white-space:nowrap}.lc-table-pagination__controls{display:flex;align-items:center;gap:var(--spacing-2)}.lc-table-pagination__size{display:block;min-width:110px}.lc-table-pagination__btn{appearance:none;border:1px solid var(--color-border);background-color:var(--color-surface);color:var(--color-text-primary);width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--border-radius-sm);font-size:var(--typography-font-size-base);cursor:pointer;transition:background-color .15s ease}.lc-table-pagination__btn:hover:not(:disabled){background-color:var(--color-surface-hover)}.lc-table-pagination__btn:disabled{opacity:.4;cursor:not-allowed}.lc-table-pagination__page{white-space:nowrap;min-width:60px;text-align:center}@media(max-width:640px){.lc-table-wrapper--stack .lc-table thead{display:none}.lc-table-wrapper--stack .lc-table tbody tr{display:block;margin-bottom:var(--spacing-4);border:1px solid var(--color-border);border-radius:var(--border-radius-md)}.lc-table-wrapper--stack .lc-table tbody tr td{display:block;text-align:right;padding:var(--spacing-2) var(--spacing-4);border-bottom:1px solid var(--color-divider)}.lc-table-wrapper--stack .lc-table tbody tr td:last-child{border-bottom:none}.lc-table-wrapper--stack .lc-table tbody tr td:before{content:attr(data-label);float:left;font-weight:var(--typography-font-weight-semibold);color:var(--color-text-secondary)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SelectComponent, selector: "lc-select", inputs: ["variant", "size", "disabled", "error", "required", "loading", "searchable", "multiple", "placeholder", "helperText", "errorMessage", "ariaLabel", "options"], outputs: ["selectionChange", "opened", "closed"] }, { kind: "component", type: InputComponent, selector: "lc-input", inputs: ["label", "placeholder", "type", "size", "disabled", "readonly", "required", "error", "helperText", "iconBefore", "iconAfter", "maxLength", "showCharCount", "ariaLabel"], outputs: ["valueChange", "focused", "blurred", "enterPressed"] }, { kind: "component", type: ButtonComponent, selector: "lc-button", inputs: ["variant", "size", "disabled", "loading", "iconOnly", "fullWidth", "ariaLabel", "type"], outputs: ["clicked", "focused", "blurred"] }, { kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: TableComponent, isStandalone: true, selector: "lc-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, paginate: { classPropertyName: "paginate", publicName: "paginate", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, actionsLabel: { classPropertyName: "actionsLabel", publicName: "actionsLabel", isSignal: true, isRequired: false, transformFunction: null }, actionsWidth: { classPropertyName: "actionsWidth", publicName: "actionsWidth", isSignal: true, isRequired: false, transformFunction: null }, actionsAlign: { classPropertyName: "actionsAlign", publicName: "actionsAlign", isSignal: true, isRequired: false, transformFunction: null }, idKey: { classPropertyName: "idKey", publicName: "idKey", isSignal: true, isRequired: false, transformFunction: null }, parentKey: { classPropertyName: "parentKey", publicName: "parentKey", isSignal: true, isRequired: false, transformFunction: null }, treeColumn: { classPropertyName: "treeColumn", publicName: "treeColumn", isSignal: true, isRequired: false, transformFunction: null }, defaultExpanded: { classPropertyName: "defaultExpanded", publicName: "defaultExpanded", isSignal: true, isRequired: false, transformFunction: null }, expandedIds: { classPropertyName: "expandedIds", publicName: "expandedIds", isSignal: true, isRequired: false, transformFunction: null }, indentSize: { classPropertyName: "indentSize", publicName: "indentSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sort: "sort", rowClick: "rowClick", cellEdit: "cellEdit", selectionChange: "selectionChange", actionClick: "actionClick", rowToggle: "rowToggle", expandedIdsChange: "expandedIdsChange" }, queries: [{ propertyName: "cellTemplates", predicate: TableCellDirective }], ngImport: i0, template: "<div [class]=\"wrapperClasses()\">\n  <table [class]=\"tableClasses()\" [attr.role]=\"treeMode() ? 'treegrid' : 'table'\">\n    <thead>\n      <!-- Filter row -->\n      @if (filterable()) {\n        <tr class=\"lc-table__filter-row\">\n          @if (selectable()) {\n            <th class=\"lc-table__select-cell\"></th>\n          }\n          @for (column of columns(); track column.key) {\n            <th>\n              @if (column.filterable !== false) {\n                <lc-input\n                  class=\"lc-table__filter-input\"\n                  size=\"xs\"\n                  [placeholder]=\"'Filter ' + column.label\"\n                  [ariaLabel]=\"'Filter by ' + column.label\"\n                  [ngModel]=\"getFilterValue(column.key)\"\n                  (ngModelChange)=\"onFilterChange(column.key, $event)\"\n                />\n              }\n            </th>\n          }\n          @if (hasActions()) {\n            <th class=\"lc-table__actions-cell\"></th>\n          }\n        </tr>\n      }\n      <!-- Header row -->\n      <tr>\n        @if (selectable()) {\n          <th class=\"lc-table__select-cell\" scope=\"col\">\n            <input\n              type=\"checkbox\"\n              class=\"lc-table__checkbox\"\n              [checked]=\"allSelected()\"\n              (change)=\"toggleSelectAll()\"\n              aria-label=\"Select all rows\"\n            />\n          </th>\n        }\n        @for (column of columns(); track column.key) {\n          <th\n            scope=\"col\"\n            [class]=\"getHeaderClasses(column) + (column.cssClass ? ' ' + column.cssClass : '')\"\n            [attr.aria-sort]=\"getAriaSort(column.key)\"\n            [style.width]=\"column.width\"\n            [title]=\"column.tooltip || ''\"\n            (click)=\"handleSort(column.key)\">\n            {{ column.label }}\n            @if (column.sortable && getSortState(column.key)) {\n              <span class=\"sort-indicator\" [attr.aria-label]=\"getSortState(column.key) === 'asc' ? 'sorted ascending' : 'sorted descending'\">\n                @if (getSortState(column.key) === 'asc') {\n                  \u2191\n                } @else {\n                  \u2193\n                }\n              </span>\n            }\n          </th>\n        }\n        @if (hasActions()) {\n          <th\n            scope=\"col\"\n            class=\"lc-table__actions-cell\"\n            [class]=\"'lc-table__actions-cell--' + actionsAlign()\"\n            [style.width]=\"actionsWidth()\"\n          >\n            {{ actionsLabel() }}\n          </th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @if (displayRows().length === 0) {\n        <tr>\n          <td [attr.colspan]=\"columns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\" class=\"lc-table__empty\">\n            {{ emptyText() }}\n          </td>\n        </tr>\n      } @else {\n        @for (dr of displayRows(); track dr.absIndex) {\n          <tr\n            [class.lc-table__row--selected]=\"selectable() && isRowSelected(dr.absIndex)\"\n            [class.lc-table__row--group]=\"dr.hasChildren\"\n            [attr.role]=\"treeMode() ? 'row' : null\"\n            [attr.aria-level]=\"treeMode() ? dr.level : null\"\n            [attr.aria-expanded]=\"treeMode() && dr.hasChildren ? dr.expanded : null\"\n            [attr.aria-posinset]=\"treeMode() ? dr.posInSet : null\"\n            [attr.aria-setsize]=\"treeMode() ? dr.setSize : null\"\n            (click)=\"onRowClick(dr.row)\"\n          >\n            @if (selectable()) {\n              <td class=\"lc-table__select-cell\" [attr.role]=\"treeMode() ? 'gridcell' : null\">\n                <input\n                  type=\"checkbox\"\n                  class=\"lc-table__checkbox\"\n                  [checked]=\"isRowSelected(dr.absIndex)\"\n                  (change)=\"toggleRowSelect(dr.absIndex)\"\n                  (click)=\"$event.stopPropagation()\"\n                  [attr.aria-label]=\"'Select row ' + (dr.absIndex + 1)\"\n                />\n              </td>\n            }\n            @for (column of columns(); track column.key) {\n              <td\n                [class]=\"getCellClasses(dr.row, column, dr.absIndex)\"\n                [ngStyle]=\"getCellStyles(dr.row, column, dr.absIndex)\"\n                [attr.role]=\"treeMode() ? 'gridcell' : null\"\n                (dblclick)=\"editable() ? startEdit(dr.absIndex, column.key, getCellValue(dr.row, column.key)) : null\"\n              >\n                @if (isTreeColumn(column.key)) {\n                  <span class=\"lc-table__tree-cell\">\n                    @for (lvl of indentLevels(dr.depth); track lvl) {\n                      <span class=\"lc-table__tree-indent\" [style.width.px]=\"indentSize()\"></span>\n                    }\n                    <span class=\"lc-table__tree-chevron\" [style.width.px]=\"indentSize()\">\n                      @if (dr.hasChildren) {\n                        <button\n                          type=\"button\"\n                          class=\"lc-table__chevron-btn\"\n                          [class.lc-table__chevron-btn--expanded]=\"dr.expanded\"\n                          [attr.aria-label]=\"(dr.expanded ? 'Einklappen: ' : 'Aufklappen: ') + treeCellLabel(dr.row)\"\n                          [attr.aria-expanded]=\"dr.expanded\"\n                          (click)=\"onChevronClick(dr, $event)\"\n                        >\n                          <lc-icon name=\"chevron-right\" size=\"xs\" [decorative]=\"true\" />\n                        </button>\n                      }\n                    </span>\n                    <span class=\"lc-table__tree-content\">\n                      <ng-container\n                        *ngTemplateOutlet=\"cellContent; context: { row: dr.row, column: column, absIndex: dr.absIndex }\"\n                      ></ng-container>\n                    </span>\n                  </span>\n                } @else {\n                  <ng-container\n                    *ngTemplateOutlet=\"cellContent; context: { row: dr.row, column: column, absIndex: dr.absIndex }\"\n                  ></ng-container>\n                }\n              </td>\n            }\n            @if (hasActions()) {\n              <td\n                class=\"lc-table__actions-cell\"\n                [class]=\"'lc-table__actions-cell--' + actionsAlign()\"\n                [attr.role]=\"treeMode() ? 'gridcell' : null\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <div class=\"lc-table__actions\">\n                  @for (action of actions(); track action.key) {\n                    @if (!isActionHidden(action, dr.row, dr.absIndex)) {\n                      <lc-button\n                        [variant]=\"action.variant ?? 'ghost'\"\n                        size=\"xs\"\n                        [iconOnly]=\"!action.label\"\n                        [disabled]=\"isActionDisabled(action, dr.row, dr.absIndex)\"\n                        [ariaLabel]=\"action.tooltip ?? action.label ?? action.key\"\n                        (clicked)=\"onActionClick(action, dr.row, dr.absIndex)\"\n                      >\n                        @if (action.icon) {\n                          <lc-icon [name]=\"action.icon\" size=\"sm\" [decorative]=\"true\" />\n                        }\n                        @if (action.label) {\n                          {{ action.label }}\n                        }\n                      </lc-button>\n                    }\n                  }\n                </div>\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<!-- Shared cell content (edit input / custom template / formatted value) -->\n<ng-template #cellContent let-row=\"row\" let-column=\"column\" let-absIndex=\"absIndex\">\n  @if (isEditing(absIndex, column.key)) {\n    <input\n      type=\"text\"\n      class=\"lc-table__edit-input\"\n      [value]=\"editValue()\"\n      (input)=\"editValue.set(getInputValue($event))\"\n      (blur)=\"commitEdit(absIndex, column.key)\"\n      (keydown)=\"onEditKeydown($event, absIndex, column.key)\"\n      autofocus\n    />\n  } @else if (hasCustomTemplate(column.key)) {\n    <ng-container *ngTemplateOutlet=\"getCellTemplate(column.key)!.template; context: { $implicit: row }\"></ng-container>\n  } @else {\n    {{ getFormattedCellValue(row, column, absIndex) }}\n  }\n</ng-template>\n\n<!-- Pagination -->\n@if (paginate()) {\n  <div class=\"lc-table-pagination\">\n    <div class=\"lc-table-pagination__info\">\n      {{ paginationStart }}\u2013{{ paginationEnd }} of {{ totalRows() }}\n    </div>\n    <div class=\"lc-table-pagination__controls\">\n      <lc-select\n        class=\"lc-table-pagination__size\"\n        [size]=\"size() === 'sm' ? 'sm' : size() === 'lg' ? 'lg' : 'md'\"\n        [options]=\"pageSizeSelectOptions()\"\n        [ngModel]=\"internalPageSize()\"\n        [ariaLabel]=\"'Rows per page'\"\n        (ngModelChange)=\"onPageSizeModelChange($event)\"\n      />\n      <button\n        type=\"button\"\n        class=\"lc-table-pagination__btn\"\n        [disabled]=\"currentPage() === 0\"\n        (click)=\"goToPage(currentPage() - 1)\"\n        aria-label=\"Previous page\"\n      >\u2039</button>\n      <span class=\"lc-table-pagination__page\">\n        {{ currentPage() + 1 }} / {{ totalPages() }}\n      </span>\n      <button\n        type=\"button\"\n        class=\"lc-table-pagination__btn\"\n        [disabled]=\"currentPage() >= totalPages() - 1\"\n        (click)=\"goToPage(currentPage() + 1)\"\n        aria-label=\"Next page\"\n      >\u203A</button>\n    </div>\n  </div>\n}\n", styles: [".lc-table-wrapper{width:100%}.lc-table-wrapper--responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}@media(max-width:768px){.lc-table-wrapper--responsive::-webkit-scrollbar{height:8px}.lc-table-wrapper--responsive::-webkit-scrollbar-thumb{background-color:var(--color-border);border-radius:var(--border-radius-sm)}}.lc-table{width:100%;border-collapse:collapse;border-spacing:0;background-color:var(--color-surface);color:var(--color-text-primary);font-family:var(--typography-font-family)}.lc-table thead{background-color:var(--color-surface-2);border-bottom:2px solid var(--color-border-strong)}.lc-table thead tr th{padding:var(--lc-density-padding-sm, var(--spacing-3)) var(--lc-density-padding-md, var(--spacing-4));text-align:left;font-weight:var(--typography-font-weight-semibold);font-size:var(--typography-font-size-sm);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-secondary);white-space:nowrap;-webkit-user-select:none;user-select:none}.lc-table thead tr th.sortable{cursor:pointer;position:relative;padding-right:var(--spacing-8);transition:background-color .2s ease}.lc-table thead tr th.sortable:hover{background-color:var(--color-surface-hover);color:var(--color-text-primary)}.lc-table thead tr th.sortable .sort-indicator{position:absolute;right:var(--spacing-3);top:50%;transform:translateY(-50%);font-size:var(--typography-font-size-xs);color:var(--color-primary)}.lc-table thead tr th.sorted-asc,.lc-table thead tr th.sorted-desc{background-color:var(--color-surface-hover);color:var(--color-text-primary)}.lc-table tbody tr{border-bottom:1px solid var(--color-divider)}.lc-table tbody tr:last-child{border-bottom:none}.lc-table tbody tr td{padding:var(--lc-density-padding-sm, var(--spacing-3)) var(--lc-density-padding-md, var(--spacing-4));font-size:var(--typography-font-size-sm);color:var(--color-text-primary)}.lc-table__empty{text-align:center;padding:var(--spacing-8) var(--spacing-4)!important;color:var(--color-text-secondary);font-style:italic}.lc-table--striped tbody tr:nth-child(2n){background-color:var(--color-surface-2)}.lc-table--bordered{border:1px solid var(--color-border)}.lc-table--bordered thead tr th,.lc-table--bordered tbody tr td{border-right:1px solid var(--color-divider)}.lc-table--bordered thead tr th:last-child,.lc-table--bordered tbody tr td:last-child{border-right:none}.lc-table--bordered tbody tr{border-bottom:1px solid var(--color-border)}.lc-table--hoverable tbody tr{transition:background-color .15s ease;cursor:pointer}.lc-table--hoverable tbody tr:hover{background-color:var(--color-surface-hover)}.lc-table--sm thead tr th,.lc-table--sm tbody tr td{padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--lc-density-padding-sm, var(--spacing-3));font-size:var(--typography-font-size-xs)}.lc-table--lg thead tr th,.lc-table--lg tbody tr td{padding:var(--lc-density-padding-md, var(--spacing-4)) var(--spacing-5);font-size:var(--typography-font-size-base)}.lc-table__filter-row th{padding:var(--spacing-2) var(--spacing-4)!important;background-color:var(--color-background)!important;border-bottom:1px solid var(--color-divider)!important}.lc-table__filter-input{width:100%;display:block}.lc-table__filter-input .input-field{font-size:var(--typography-font-size-xs)}.lc-table__select-cell{width:40px;text-align:center!important;padding:var(--spacing-2)!important}.lc-table__checkbox{width:16px;height:16px;cursor:pointer;accent-color:var(--color-primary)}.lc-table__row--selected{background-color:var(--color-surface-selected)!important}.lc-table__actions-cell{white-space:nowrap}.lc-table th.lc-table__actions-cell--start,.lc-table td.lc-table__actions-cell--start{text-align:left}.lc-table th.lc-table__actions-cell--center,.lc-table td.lc-table__actions-cell--center{text-align:center}.lc-table th.lc-table__actions-cell--end,.lc-table td.lc-table__actions-cell--end{text-align:right}.lc-table__actions{display:flex;align-items:center;gap:var(--spacing-2);justify-content:flex-start}.lc-table__actions-cell--center .lc-table__actions{justify-content:center}.lc-table__actions-cell--end .lc-table__actions{justify-content:flex-end}.lc-table__tree-cell{display:flex;align-items:center;min-width:0}.lc-table__tree-indent{flex:0 0 auto;align-self:stretch;position:relative}.lc-table__tree-indent:before{content:\"\";position:absolute;left:50%;top:0;bottom:0;width:1px;background-color:var(--color-border)}.lc-table__tree-chevron{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center}.lc-table__chevron-btn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;background:transparent;color:var(--color-text-secondary);cursor:pointer;border-radius:var(--border-radius-sm);transition:transform .2s ease,background-color .15s ease,color .15s ease}.lc-table__chevron-btn:hover{background-color:var(--color-surface-hover);color:var(--color-text-primary)}.lc-table__chevron-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}.lc-table__chevron-btn--expanded{transform:rotate(90deg)}.lc-table__tree-content{flex:1 1 auto;min-width:0}.lc-table__row--group .lc-table__tree-content{font-weight:var(--typography-font-weight-semibold)}.lc-table__edit-input{width:100%;padding:var(--spacing-1) var(--spacing-2);border:2px solid var(--color-primary);border-radius:var(--border-radius-sm);font-size:inherit;background-color:var(--color-surface-2);color:var(--color-text-primary);outline:none}.lc-table-pagination{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-3) var(--spacing-1);font-size:var(--typography-font-size-sm);color:var(--color-text-secondary)}.lc-table-pagination__info{white-space:nowrap}.lc-table-pagination__controls{display:flex;align-items:center;gap:var(--spacing-2)}.lc-table-pagination__size{display:block;min-width:110px}.lc-table-pagination__btn{appearance:none;border:1px solid var(--color-border);background-color:var(--color-surface);color:var(--color-text-primary);width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--border-radius-sm);font-size:var(--typography-font-size-base);cursor:pointer;transition:background-color .15s ease}.lc-table-pagination__btn:hover:not(:disabled){background-color:var(--color-surface-hover)}.lc-table-pagination__btn:disabled{opacity:.4;cursor:not-allowed}.lc-table-pagination__page{white-space:nowrap;min-width:60px;text-align:center}@media(max-width:640px){.lc-table-wrapper--stack .lc-table thead{display:none}.lc-table-wrapper--stack .lc-table tbody tr{display:block;margin-bottom:var(--spacing-4);border:1px solid var(--color-border);border-radius:var(--border-radius-md)}.lc-table-wrapper--stack .lc-table tbody tr td{display:block;text-align:right;padding:var(--spacing-2) var(--spacing-4);border-bottom:1px solid var(--color-divider)}.lc-table-wrapper--stack .lc-table tbody tr td:last-child{border-bottom:none}.lc-table-wrapper--stack .lc-table tbody tr td:before{content:attr(data-label);float:left;font-weight:var(--typography-font-weight-semibold);color:var(--color-text-secondary)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SelectComponent, selector: "lc-select", inputs: ["variant", "size", "disabled", "error", "required", "loading", "searchable", "multiple", "placeholder", "helperText", "errorMessage", "ariaLabel", "options"], outputs: ["selectionChange", "opened", "closed"] }, { kind: "component", type: InputComponent, selector: "lc-input", inputs: ["label", "placeholder", "type", "size", "disabled", "readonly", "required", "error", "helperText", "iconBefore", "iconAfter", "maxLength", "showCharCount", "ariaLabel"], outputs: ["valueChange", "focused", "blurred", "enterPressed"] }, { kind: "component", type: ButtonComponent, selector: "lc-button", inputs: ["variant", "size", "disabled", "loading", "iconOnly", "fullWidth", "ariaLabel", "type"], outputs: ["clicked", "focused", "blurred"] }, { kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lc-table', standalone: true, imports: [NgTemplateOutlet, NgStyle, FormsModule, SelectComponent, InputComponent, ButtonComponent, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"wrapperClasses()\">\n  <table [class]=\"tableClasses()\" role=\"table\">\n    <thead>\n      <!-- Filter row -->\n      @if (filterable()) {\n        <tr class=\"lc-table__filter-row\">\n          @if (selectable()) {\n            <th class=\"lc-table__select-cell\"></th>\n          }\n          @for (column of columns(); track column.key) {\n            <th>\n              @if (column.filterable !== false) {\n                <lc-input\n                  class=\"lc-table__filter-input\"\n                  size=\"xs\"\n                  [placeholder]=\"'Filter ' + column.label\"\n                  [ariaLabel]=\"'Filter by ' + column.label\"\n                  [ngModel]=\"getFilterValue(column.key)\"\n                  (ngModelChange)=\"onFilterChange(column.key, $event)\"\n                />\n              }\n            </th>\n          }\n          @if (hasActions()) {\n            <th class=\"lc-table__actions-cell\"></th>\n          }\n        </tr>\n      }\n      <!-- Header row -->\n      <tr>\n        @if (selectable()) {\n          <th class=\"lc-table__select-cell\" scope=\"col\">\n            <input\n              type=\"checkbox\"\n              class=\"lc-table__checkbox\"\n              [checked]=\"allSelected()\"\n              (change)=\"toggleSelectAll()\"\n              aria-label=\"Select all rows\"\n            />\n          </th>\n        }\n        @for (column of columns(); track column.key) {\n          <th\n            scope=\"col\"\n            [class]=\"getHeaderClasses(column) + (column.cssClass ? ' ' + column.cssClass : '')\"\n            [attr.aria-sort]=\"getAriaSort(column.key)\"\n            [style.width]=\"column.width\"\n            [title]=\"column.tooltip || ''\"\n            (click)=\"handleSort(column.key)\">\n            {{ column.label }}\n            @if (column.sortable && getSortState(column.key)) {\n              <span class=\"sort-indicator\" [attr.aria-label]=\"getSortState(column.key) === 'asc' ? 'sorted ascending' : 'sorted descending'\">\n                @if (getSortState(column.key) === 'asc') {\n                  \u2191\n                } @else {\n                  \u2193\n                }\n              </span>\n            }\n          </th>\n        }\n        @if (hasActions()) {\n          <th\n            scope=\"col\"\n            class=\"lc-table__actions-cell\"\n            [class]=\"'lc-table__actions-cell--' + actionsAlign()\"\n            [style.width]=\"actionsWidth()\"\n          >\n            {{ actionsLabel() }}\n          </th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @if (displayData().length === 0) {\n        <tr>\n          <td [attr.colspan]=\"columns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\" class=\"lc-table__empty\">\n            {{ emptyText() }}\n          </td>\n        </tr>\n      } @else {\n        @for (row of displayData(); track $index; let i = $index) {\n          <tr\n            [class.lc-table__row--selected]=\"selectable() && isRowSelected(i)\"\n            (click)=\"onRowClick(row)\"\n          >\n            @if (selectable()) {\n              <td class=\"lc-table__select-cell\">\n                <input\n                  type=\"checkbox\"\n                  class=\"lc-table__checkbox\"\n                  [checked]=\"isRowSelected($index)\"\n                  (change)=\"toggleRowSelect($index)\"\n                  (click)=\"$event.stopPropagation()\"\n                  [attr.aria-label]=\"'Select row ' + ($index + 1)\"\n                />\n              </td>\n            }\n            @for (column of columns(); track column.key) {\n              <td\n                [class]=\"getCellClasses(row, column, i)\"\n                [ngStyle]=\"getCellStyles(row, column, i)\"\n                (dblclick)=\"editable() ? startEdit($index, column.key, getCellValue(row, column.key)) : null\"\n              >\n                @if (isEditing($index, column.key)) {\n                  <input\n                    type=\"text\"\n                    class=\"lc-table__edit-input\"\n                    [value]=\"editValue()\"\n                    (input)=\"editValue.set(getInputValue($event))\"\n                    (blur)=\"commitEdit($index, column.key)\"\n                    (keydown)=\"onEditKeydown($event, $index, column.key)\"\n                    autofocus\n                  />\n                } @else if (hasCustomTemplate(column.key)) {\n                  <ng-container *ngTemplateOutlet=\"getCellTemplate(column.key)!.template; context: { $implicit: row }\"></ng-container>\n                } @else {\n                  {{ getFormattedCellValue(row, column, i) }}\n                }\n              </td>\n            }\n            @if (hasActions()) {\n              <td\n                class=\"lc-table__actions-cell\"\n                [class]=\"'lc-table__actions-cell--' + actionsAlign()\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <div class=\"lc-table__actions\">\n                  @for (action of actions(); track action.key) {\n                    @if (!isActionHidden(action, row, i)) {\n                      <lc-button\n                        [variant]=\"action.variant ?? 'ghost'\"\n                        size=\"xs\"\n                        [iconOnly]=\"!action.label\"\n                        [disabled]=\"isActionDisabled(action, row, i)\"\n                        [ariaLabel]=\"action.tooltip ?? action.label ?? action.key\"\n                        (clicked)=\"onActionClick(action, row, i)\"\n                      >\n                        @if (action.icon) {\n                          <lc-icon [name]=\"action.icon\" size=\"sm\" [decorative]=\"true\" />\n                        }\n                        @if (action.label) {\n                          {{ action.label }}\n                        }\n                      </lc-button>\n                    }\n                  }\n                </div>\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<!-- Pagination -->\n@if (paginate()) {\n  <div class=\"lc-table-pagination\">\n    <div class=\"lc-table-pagination__info\">\n      {{ paginationStart }}\u2013{{ paginationEnd }} of {{ totalRows() }}\n    </div>\n    <div class=\"lc-table-pagination__controls\">\n      <lc-select\n        class=\"lc-table-pagination__size\"\n        [size]=\"size() === 'sm' ? 'sm' : size() === 'lg' ? 'lg' : 'md'\"\n        [options]=\"pageSizeSelectOptions()\"\n        [ngModel]=\"internalPageSize()\"\n        [ariaLabel]=\"'Rows per page'\"\n        (ngModelChange)=\"onPageSizeModelChange($event)\"\n      />\n      <button\n        type=\"button\"\n        class=\"lc-table-pagination__btn\"\n        [disabled]=\"currentPage() === 0\"\n        (click)=\"goToPage(currentPage() - 1)\"\n        aria-label=\"Previous page\"\n      >\u2039</button>\n      <span class=\"lc-table-pagination__page\">\n        {{ currentPage() + 1 }} / {{ totalPages() }}\n      </span>\n      <button\n        type=\"button\"\n        class=\"lc-table-pagination__btn\"\n        [disabled]=\"currentPage() >= totalPages() - 1\"\n        (click)=\"goToPage(currentPage() + 1)\"\n        aria-label=\"Next page\"\n      >\u203A</button>\n    </div>\n  </div>\n}\n", styles: [".lc-table-wrapper{width:100%}.lc-table-wrapper--responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}@media(max-width:768px){.lc-table-wrapper--responsive::-webkit-scrollbar{height:8px}.lc-table-wrapper--responsive::-webkit-scrollbar-thumb{background-color:var(--color-border);border-radius:var(--border-radius-sm)}}.lc-table{width:100%;border-collapse:collapse;border-spacing:0;background-color:var(--color-surface);color:var(--color-text-primary);font-family:var(--typography-font-family)}.lc-table thead{background-color:var(--color-surface-2);border-bottom:2px solid var(--color-border-strong)}.lc-table thead tr th{padding:var(--lc-density-padding-sm, var(--spacing-3)) var(--lc-density-padding-md, var(--spacing-4));text-align:left;font-weight:var(--typography-font-weight-semibold);font-size:var(--typography-font-size-sm);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-secondary);white-space:nowrap;-webkit-user-select:none;user-select:none}.lc-table thead tr th.sortable{cursor:pointer;position:relative;padding-right:var(--spacing-8);transition:background-color .2s ease}.lc-table thead tr th.sortable:hover{background-color:var(--color-surface-hover);color:var(--color-text-primary)}.lc-table thead tr th.sortable .sort-indicator{position:absolute;right:var(--spacing-3);top:50%;transform:translateY(-50%);font-size:var(--typography-font-size-xs);color:var(--color-primary)}.lc-table thead tr th.sorted-asc,.lc-table thead tr th.sorted-desc{background-color:var(--color-surface-hover);color:var(--color-text-primary)}.lc-table tbody tr{border-bottom:1px solid var(--color-divider)}.lc-table tbody tr:last-child{border-bottom:none}.lc-table tbody tr td{padding:var(--lc-density-padding-sm, var(--spacing-3)) var(--lc-density-padding-md, var(--spacing-4));font-size:var(--typography-font-size-sm);color:var(--color-text-primary)}.lc-table__empty{text-align:center;padding:var(--spacing-8) var(--spacing-4)!important;color:var(--color-text-secondary);font-style:italic}.lc-table--striped tbody tr:nth-child(2n){background-color:var(--color-surface-2)}.lc-table--bordered{border:1px solid var(--color-border)}.lc-table--bordered thead tr th,.lc-table--bordered tbody tr td{border-right:1px solid var(--color-divider)}.lc-table--bordered thead tr th:last-child,.lc-table--bordered tbody tr td:last-child{border-right:none}.lc-table--bordered tbody tr{border-bottom:1px solid var(--color-border)}.lc-table--hoverable tbody tr{transition:background-color .15s ease;cursor:pointer}.lc-table--hoverable tbody tr:hover{background-color:var(--color-surface-hover)}.lc-table--sm thead tr th,.lc-table--sm tbody tr td{padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--lc-density-padding-sm, var(--spacing-3));font-size:var(--typography-font-size-xs)}.lc-table--lg thead tr th,.lc-table--lg tbody tr td{padding:var(--lc-density-padding-md, var(--spacing-4)) var(--spacing-5);font-size:var(--typography-font-size-base)}.lc-table__filter-row th{padding:var(--spacing-2) var(--spacing-4)!important;background-color:var(--color-background)!important;border-bottom:1px solid var(--color-divider)!important}.lc-table__filter-input{width:100%;display:block}.lc-table__filter-input .input-field{font-size:var(--typography-font-size-xs)}.lc-table__select-cell{width:40px;text-align:center!important;padding:var(--spacing-2)!important}.lc-table__checkbox{width:16px;height:16px;cursor:pointer;accent-color:var(--color-primary)}.lc-table__row--selected{background-color:var(--color-surface-selected)!important}.lc-table__actions-cell{white-space:nowrap}.lc-table th.lc-table__actions-cell--start,.lc-table td.lc-table__actions-cell--start{text-align:left}.lc-table th.lc-table__actions-cell--center,.lc-table td.lc-table__actions-cell--center{text-align:center}.lc-table th.lc-table__actions-cell--end,.lc-table td.lc-table__actions-cell--end{text-align:right}.lc-table__actions{display:flex;align-items:center;gap:var(--spacing-2);justify-content:flex-start}.lc-table__actions-cell--center .lc-table__actions{justify-content:center}.lc-table__actions-cell--end .lc-table__actions{justify-content:flex-end}.lc-table__edit-input{width:100%;padding:var(--spacing-1) var(--spacing-2);border:2px solid var(--color-primary);border-radius:var(--border-radius-sm);font-size:inherit;background-color:var(--color-surface-2);color:var(--color-text-primary);outline:none}.lc-table-pagination{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-3) var(--spacing-1);font-size:var(--typography-font-size-sm);color:var(--color-text-secondary)}.lc-table-pagination__info{white-space:nowrap}.lc-table-pagination__controls{display:flex;align-items:center;gap:var(--spacing-2)}.lc-table-pagination__size{display:block;min-width:110px}.lc-table-pagination__btn{appearance:none;border:1px solid var(--color-border);background-color:var(--color-surface);color:var(--color-text-primary);width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--border-radius-sm);font-size:var(--typography-font-size-base);cursor:pointer;transition:background-color .15s ease}.lc-table-pagination__btn:hover:not(:disabled){background-color:var(--color-surface-hover)}.lc-table-pagination__btn:disabled{opacity:.4;cursor:not-allowed}.lc-table-pagination__page{white-space:nowrap;min-width:60px;text-align:center}@media(max-width:640px){.lc-table-wrapper--stack .lc-table thead{display:none}.lc-table-wrapper--stack .lc-table tbody tr{display:block;margin-bottom:var(--spacing-4);border:1px solid var(--color-border);border-radius:var(--border-radius-md)}.lc-table-wrapper--stack .lc-table tbody tr td{display:block;text-align:right;padding:var(--spacing-2) var(--spacing-4);border-bottom:1px solid var(--color-divider)}.lc-table-wrapper--stack .lc-table tbody tr td:last-child{border-bottom:none}.lc-table-wrapper--stack .lc-table tbody tr td:before{content:attr(data-label);float:left;font-weight:var(--typography-font-weight-semibold);color:var(--color-text-secondary)}}\n"] }]
+            args: [{ selector: 'lc-table', standalone: true, imports: [NgTemplateOutlet, NgStyle, FormsModule, SelectComponent, InputComponent, ButtonComponent, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"wrapperClasses()\">\n  <table [class]=\"tableClasses()\" [attr.role]=\"treeMode() ? 'treegrid' : 'table'\">\n    <thead>\n      <!-- Filter row -->\n      @if (filterable()) {\n        <tr class=\"lc-table__filter-row\">\n          @if (selectable()) {\n            <th class=\"lc-table__select-cell\"></th>\n          }\n          @for (column of columns(); track column.key) {\n            <th>\n              @if (column.filterable !== false) {\n                <lc-input\n                  class=\"lc-table__filter-input\"\n                  size=\"xs\"\n                  [placeholder]=\"'Filter ' + column.label\"\n                  [ariaLabel]=\"'Filter by ' + column.label\"\n                  [ngModel]=\"getFilterValue(column.key)\"\n                  (ngModelChange)=\"onFilterChange(column.key, $event)\"\n                />\n              }\n            </th>\n          }\n          @if (hasActions()) {\n            <th class=\"lc-table__actions-cell\"></th>\n          }\n        </tr>\n      }\n      <!-- Header row -->\n      <tr>\n        @if (selectable()) {\n          <th class=\"lc-table__select-cell\" scope=\"col\">\n            <input\n              type=\"checkbox\"\n              class=\"lc-table__checkbox\"\n              [checked]=\"allSelected()\"\n              (change)=\"toggleSelectAll()\"\n              aria-label=\"Select all rows\"\n            />\n          </th>\n        }\n        @for (column of columns(); track column.key) {\n          <th\n            scope=\"col\"\n            [class]=\"getHeaderClasses(column) + (column.cssClass ? ' ' + column.cssClass : '')\"\n            [attr.aria-sort]=\"getAriaSort(column.key)\"\n            [style.width]=\"column.width\"\n            [title]=\"column.tooltip || ''\"\n            (click)=\"handleSort(column.key)\">\n            {{ column.label }}\n            @if (column.sortable && getSortState(column.key)) {\n              <span class=\"sort-indicator\" [attr.aria-label]=\"getSortState(column.key) === 'asc' ? 'sorted ascending' : 'sorted descending'\">\n                @if (getSortState(column.key) === 'asc') {\n                  \u2191\n                } @else {\n                  \u2193\n                }\n              </span>\n            }\n          </th>\n        }\n        @if (hasActions()) {\n          <th\n            scope=\"col\"\n            class=\"lc-table__actions-cell\"\n            [class]=\"'lc-table__actions-cell--' + actionsAlign()\"\n            [style.width]=\"actionsWidth()\"\n          >\n            {{ actionsLabel() }}\n          </th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @if (displayRows().length === 0) {\n        <tr>\n          <td [attr.colspan]=\"columns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\" class=\"lc-table__empty\">\n            {{ emptyText() }}\n          </td>\n        </tr>\n      } @else {\n        @for (dr of displayRows(); track dr.absIndex) {\n          <tr\n            [class.lc-table__row--selected]=\"selectable() && isRowSelected(dr.absIndex)\"\n            [class.lc-table__row--group]=\"dr.hasChildren\"\n            [attr.role]=\"treeMode() ? 'row' : null\"\n            [attr.aria-level]=\"treeMode() ? dr.level : null\"\n            [attr.aria-expanded]=\"treeMode() && dr.hasChildren ? dr.expanded : null\"\n            [attr.aria-posinset]=\"treeMode() ? dr.posInSet : null\"\n            [attr.aria-setsize]=\"treeMode() ? dr.setSize : null\"\n            (click)=\"onRowClick(dr.row)\"\n          >\n            @if (selectable()) {\n              <td class=\"lc-table__select-cell\" [attr.role]=\"treeMode() ? 'gridcell' : null\">\n                <input\n                  type=\"checkbox\"\n                  class=\"lc-table__checkbox\"\n                  [checked]=\"isRowSelected(dr.absIndex)\"\n                  (change)=\"toggleRowSelect(dr.absIndex)\"\n                  (click)=\"$event.stopPropagation()\"\n                  [attr.aria-label]=\"'Select row ' + (dr.absIndex + 1)\"\n                />\n              </td>\n            }\n            @for (column of columns(); track column.key) {\n              <td\n                [class]=\"getCellClasses(dr.row, column, dr.absIndex)\"\n                [ngStyle]=\"getCellStyles(dr.row, column, dr.absIndex)\"\n                [attr.role]=\"treeMode() ? 'gridcell' : null\"\n                (dblclick)=\"editable() ? startEdit(dr.absIndex, column.key, getCellValue(dr.row, column.key)) : null\"\n              >\n                @if (isTreeColumn(column.key)) {\n                  <span class=\"lc-table__tree-cell\">\n                    @for (lvl of indentLevels(dr.depth); track lvl) {\n                      <span class=\"lc-table__tree-indent\" [style.width.px]=\"indentSize()\"></span>\n                    }\n                    <span class=\"lc-table__tree-chevron\" [style.width.px]=\"indentSize()\">\n                      @if (dr.hasChildren) {\n                        <button\n                          type=\"button\"\n                          class=\"lc-table__chevron-btn\"\n                          [class.lc-table__chevron-btn--expanded]=\"dr.expanded\"\n                          [attr.aria-label]=\"(dr.expanded ? 'Einklappen: ' : 'Aufklappen: ') + treeCellLabel(dr.row)\"\n                          [attr.aria-expanded]=\"dr.expanded\"\n                          (click)=\"onChevronClick(dr, $event)\"\n                        >\n                          <lc-icon name=\"chevron-right\" size=\"xs\" [decorative]=\"true\" />\n                        </button>\n                      }\n                    </span>\n                    <span class=\"lc-table__tree-content\">\n                      <ng-container\n                        *ngTemplateOutlet=\"cellContent; context: { row: dr.row, column: column, absIndex: dr.absIndex }\"\n                      ></ng-container>\n                    </span>\n                  </span>\n                } @else {\n                  <ng-container\n                    *ngTemplateOutlet=\"cellContent; context: { row: dr.row, column: column, absIndex: dr.absIndex }\"\n                  ></ng-container>\n                }\n              </td>\n            }\n            @if (hasActions()) {\n              <td\n                class=\"lc-table__actions-cell\"\n                [class]=\"'lc-table__actions-cell--' + actionsAlign()\"\n                [attr.role]=\"treeMode() ? 'gridcell' : null\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <div class=\"lc-table__actions\">\n                  @for (action of actions(); track action.key) {\n                    @if (!isActionHidden(action, dr.row, dr.absIndex)) {\n                      <lc-button\n                        [variant]=\"action.variant ?? 'ghost'\"\n                        size=\"xs\"\n                        [iconOnly]=\"!action.label\"\n                        [disabled]=\"isActionDisabled(action, dr.row, dr.absIndex)\"\n                        [ariaLabel]=\"action.tooltip ?? action.label ?? action.key\"\n                        (clicked)=\"onActionClick(action, dr.row, dr.absIndex)\"\n                      >\n                        @if (action.icon) {\n                          <lc-icon [name]=\"action.icon\" size=\"sm\" [decorative]=\"true\" />\n                        }\n                        @if (action.label) {\n                          {{ action.label }}\n                        }\n                      </lc-button>\n                    }\n                  }\n                </div>\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<!-- Shared cell content (edit input / custom template / formatted value) -->\n<ng-template #cellContent let-row=\"row\" let-column=\"column\" let-absIndex=\"absIndex\">\n  @if (isEditing(absIndex, column.key)) {\n    <input\n      type=\"text\"\n      class=\"lc-table__edit-input\"\n      [value]=\"editValue()\"\n      (input)=\"editValue.set(getInputValue($event))\"\n      (blur)=\"commitEdit(absIndex, column.key)\"\n      (keydown)=\"onEditKeydown($event, absIndex, column.key)\"\n      autofocus\n    />\n  } @else if (hasCustomTemplate(column.key)) {\n    <ng-container *ngTemplateOutlet=\"getCellTemplate(column.key)!.template; context: { $implicit: row }\"></ng-container>\n  } @else {\n    {{ getFormattedCellValue(row, column, absIndex) }}\n  }\n</ng-template>\n\n<!-- Pagination -->\n@if (paginate()) {\n  <div class=\"lc-table-pagination\">\n    <div class=\"lc-table-pagination__info\">\n      {{ paginationStart }}\u2013{{ paginationEnd }} of {{ totalRows() }}\n    </div>\n    <div class=\"lc-table-pagination__controls\">\n      <lc-select\n        class=\"lc-table-pagination__size\"\n        [size]=\"size() === 'sm' ? 'sm' : size() === 'lg' ? 'lg' : 'md'\"\n        [options]=\"pageSizeSelectOptions()\"\n        [ngModel]=\"internalPageSize()\"\n        [ariaLabel]=\"'Rows per page'\"\n        (ngModelChange)=\"onPageSizeModelChange($event)\"\n      />\n      <button\n        type=\"button\"\n        class=\"lc-table-pagination__btn\"\n        [disabled]=\"currentPage() === 0\"\n        (click)=\"goToPage(currentPage() - 1)\"\n        aria-label=\"Previous page\"\n      >\u2039</button>\n      <span class=\"lc-table-pagination__page\">\n        {{ currentPage() + 1 }} / {{ totalPages() }}\n      </span>\n      <button\n        type=\"button\"\n        class=\"lc-table-pagination__btn\"\n        [disabled]=\"currentPage() >= totalPages() - 1\"\n        (click)=\"goToPage(currentPage() + 1)\"\n        aria-label=\"Next page\"\n      >\u203A</button>\n    </div>\n  </div>\n}\n", styles: [".lc-table-wrapper{width:100%}.lc-table-wrapper--responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}@media(max-width:768px){.lc-table-wrapper--responsive::-webkit-scrollbar{height:8px}.lc-table-wrapper--responsive::-webkit-scrollbar-thumb{background-color:var(--color-border);border-radius:var(--border-radius-sm)}}.lc-table{width:100%;border-collapse:collapse;border-spacing:0;background-color:var(--color-surface);color:var(--color-text-primary);font-family:var(--typography-font-family)}.lc-table thead{background-color:var(--color-surface-2);border-bottom:2px solid var(--color-border-strong)}.lc-table thead tr th{padding:var(--lc-density-padding-sm, var(--spacing-3)) var(--lc-density-padding-md, var(--spacing-4));text-align:left;font-weight:var(--typography-font-weight-semibold);font-size:var(--typography-font-size-sm);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-secondary);white-space:nowrap;-webkit-user-select:none;user-select:none}.lc-table thead tr th.sortable{cursor:pointer;position:relative;padding-right:var(--spacing-8);transition:background-color .2s ease}.lc-table thead tr th.sortable:hover{background-color:var(--color-surface-hover);color:var(--color-text-primary)}.lc-table thead tr th.sortable .sort-indicator{position:absolute;right:var(--spacing-3);top:50%;transform:translateY(-50%);font-size:var(--typography-font-size-xs);color:var(--color-primary)}.lc-table thead tr th.sorted-asc,.lc-table thead tr th.sorted-desc{background-color:var(--color-surface-hover);color:var(--color-text-primary)}.lc-table tbody tr{border-bottom:1px solid var(--color-divider)}.lc-table tbody tr:last-child{border-bottom:none}.lc-table tbody tr td{padding:var(--lc-density-padding-sm, var(--spacing-3)) var(--lc-density-padding-md, var(--spacing-4));font-size:var(--typography-font-size-sm);color:var(--color-text-primary)}.lc-table__empty{text-align:center;padding:var(--spacing-8) var(--spacing-4)!important;color:var(--color-text-secondary);font-style:italic}.lc-table--striped tbody tr:nth-child(2n){background-color:var(--color-surface-2)}.lc-table--bordered{border:1px solid var(--color-border)}.lc-table--bordered thead tr th,.lc-table--bordered tbody tr td{border-right:1px solid var(--color-divider)}.lc-table--bordered thead tr th:last-child,.lc-table--bordered tbody tr td:last-child{border-right:none}.lc-table--bordered tbody tr{border-bottom:1px solid var(--color-border)}.lc-table--hoverable tbody tr{transition:background-color .15s ease;cursor:pointer}.lc-table--hoverable tbody tr:hover{background-color:var(--color-surface-hover)}.lc-table--sm thead tr th,.lc-table--sm tbody tr td{padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--lc-density-padding-sm, var(--spacing-3));font-size:var(--typography-font-size-xs)}.lc-table--lg thead tr th,.lc-table--lg tbody tr td{padding:var(--lc-density-padding-md, var(--spacing-4)) var(--spacing-5);font-size:var(--typography-font-size-base)}.lc-table__filter-row th{padding:var(--spacing-2) var(--spacing-4)!important;background-color:var(--color-background)!important;border-bottom:1px solid var(--color-divider)!important}.lc-table__filter-input{width:100%;display:block}.lc-table__filter-input .input-field{font-size:var(--typography-font-size-xs)}.lc-table__select-cell{width:40px;text-align:center!important;padding:var(--spacing-2)!important}.lc-table__checkbox{width:16px;height:16px;cursor:pointer;accent-color:var(--color-primary)}.lc-table__row--selected{background-color:var(--color-surface-selected)!important}.lc-table__actions-cell{white-space:nowrap}.lc-table th.lc-table__actions-cell--start,.lc-table td.lc-table__actions-cell--start{text-align:left}.lc-table th.lc-table__actions-cell--center,.lc-table td.lc-table__actions-cell--center{text-align:center}.lc-table th.lc-table__actions-cell--end,.lc-table td.lc-table__actions-cell--end{text-align:right}.lc-table__actions{display:flex;align-items:center;gap:var(--spacing-2);justify-content:flex-start}.lc-table__actions-cell--center .lc-table__actions{justify-content:center}.lc-table__actions-cell--end .lc-table__actions{justify-content:flex-end}.lc-table__tree-cell{display:flex;align-items:center;min-width:0}.lc-table__tree-indent{flex:0 0 auto;align-self:stretch;position:relative}.lc-table__tree-indent:before{content:\"\";position:absolute;left:50%;top:0;bottom:0;width:1px;background-color:var(--color-border)}.lc-table__tree-chevron{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center}.lc-table__chevron-btn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;background:transparent;color:var(--color-text-secondary);cursor:pointer;border-radius:var(--border-radius-sm);transition:transform .2s ease,background-color .15s ease,color .15s ease}.lc-table__chevron-btn:hover{background-color:var(--color-surface-hover);color:var(--color-text-primary)}.lc-table__chevron-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}.lc-table__chevron-btn--expanded{transform:rotate(90deg)}.lc-table__tree-content{flex:1 1 auto;min-width:0}.lc-table__row--group .lc-table__tree-content{font-weight:var(--typography-font-weight-semibold)}.lc-table__edit-input{width:100%;padding:var(--spacing-1) var(--spacing-2);border:2px solid var(--color-primary);border-radius:var(--border-radius-sm);font-size:inherit;background-color:var(--color-surface-2);color:var(--color-text-primary);outline:none}.lc-table-pagination{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-3) var(--spacing-1);font-size:var(--typography-font-size-sm);color:var(--color-text-secondary)}.lc-table-pagination__info{white-space:nowrap}.lc-table-pagination__controls{display:flex;align-items:center;gap:var(--spacing-2)}.lc-table-pagination__size{display:block;min-width:110px}.lc-table-pagination__btn{appearance:none;border:1px solid var(--color-border);background-color:var(--color-surface);color:var(--color-text-primary);width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--border-radius-sm);font-size:var(--typography-font-size-base);cursor:pointer;transition:background-color .15s ease}.lc-table-pagination__btn:hover:not(:disabled){background-color:var(--color-surface-hover)}.lc-table-pagination__btn:disabled{opacity:.4;cursor:not-allowed}.lc-table-pagination__page{white-space:nowrap;min-width:60px;text-align:center}@media(max-width:640px){.lc-table-wrapper--stack .lc-table thead{display:none}.lc-table-wrapper--stack .lc-table tbody tr{display:block;margin-bottom:var(--spacing-4);border:1px solid var(--color-border);border-radius:var(--border-radius-md)}.lc-table-wrapper--stack .lc-table tbody tr td{display:block;text-align:right;padding:var(--spacing-2) var(--spacing-4);border-bottom:1px solid var(--color-divider)}.lc-table-wrapper--stack .lc-table tbody tr td:last-child{border-bottom:none}.lc-table-wrapper--stack .lc-table tbody tr td:before{content:attr(data-label);float:left;font-weight:var(--typography-font-weight-semibold);color:var(--color-text-secondary)}}\n"] }]
         }], propDecorators: { cellTemplates: [{
                 type: ContentChildren,
                 args: [TableCellDirective]
-            }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], paginate: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginate", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], actionsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionsLabel", required: false }] }], actionsWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionsWidth", required: false }] }], actionsAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionsAlign", required: false }] }], sort: [{ type: i0.Output, args: ["sort"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], cellEdit: [{ type: i0.Output, args: ["cellEdit"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }] } });
+            }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], paginate: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginate", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], actionsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionsLabel", required: false }] }], actionsWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionsWidth", required: false }] }], actionsAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionsAlign", required: false }] }], idKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "idKey", required: false }] }], parentKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentKey", required: false }] }], treeColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "treeColumn", required: false }] }], defaultExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultExpanded", required: false }] }], expandedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedIds", required: false }] }], indentSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "indentSize", required: false }] }], sort: [{ type: i0.Output, args: ["sort"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], cellEdit: [{ type: i0.Output, args: ["cellEdit"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], rowToggle: [{ type: i0.Output, args: ["rowToggle"] }], expandedIdsChange: [{ type: i0.Output, args: ["expandedIdsChange"] }] } });
 
 /**
  * Field group component for displaying label-value pairs.