@life-cockpit/angular-ui-kit 2.2.1 → 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.
@@ -11484,6 +11732,63 @@ class ChatComponent {
             return true;
         return role === mode;
     }
+    /** Whether a message carries a semantic (non-`default`) status. */
+    isSemanticStatus(status) {
+        return !!status && status !== 'default';
+    }
+    /** Rail icon for a semantic status — reuses the `lc-alert` icon names. */
+    statusIcon(status) {
+        switch (status) {
+            case 'info':
+                return 'information-circle';
+            case 'success':
+                return 'check-circle';
+            case 'warning':
+                return 'exclamation-triangle';
+            case 'error':
+                return 'x-circle';
+            default:
+                return '';
+        }
+    }
+    /** Semantic token colour for a status dot/icon. */
+    statusColor(status) {
+        switch (status) {
+            case 'info':
+                return 'var(--color-info-500)';
+            case 'success':
+                return 'var(--color-success-500)';
+            case 'warning':
+                return 'var(--color-warning-500)';
+            case 'error':
+                return 'var(--color-error-500)';
+            default:
+                return 'currentColor';
+        }
+    }
+    /** Visually-hidden prefix so colour/icon is never the only signal. */
+    statusLabel(status) {
+        switch (status) {
+            case 'info':
+                return 'Info:';
+            case 'success':
+                return 'Erfolg:';
+            case 'warning':
+                return 'Warnung:';
+            case 'error':
+                return 'Fehler:';
+            default:
+                return '';
+        }
+    }
+    /** ARIA live priority: assertive for `error`, polite for other statuses. */
+    statusAriaLive(status) {
+        if (status === 'error')
+            return 'assertive';
+        if (this.isSemanticStatus(status))
+            return 'polite';
+        return null;
+    }
     scrollToBottom() {
         if (this.scrollContainer) {
             const el = this.scrollContainer.nativeElement;
@@ -11491,11 +11796,11 @@ class ChatComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: ChatComponent, isStandalone: true, selector: "lc-chat", inputs: { messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, isStreaming: { classPropertyName: "isStreaming", publicName: "isStreaming", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, messageAnchor: { classPropertyName: "messageAnchor", publicName: "messageAnchor", isSignal: true, isRequired: false, transformFunction: null }, contentWidth: { classPropertyName: "contentWidth", publicName: "contentWidth", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showAvatars: { classPropertyName: "showAvatars", publicName: "showAvatars", isSignal: true, isRequired: false, transformFunction: null }, showTimestamps: { classPropertyName: "showTimestamps", publicName: "showTimestamps", isSignal: true, isRequired: false, transformFunction: null }, renderMarkdown: { classPropertyName: "renderMarkdown", publicName: "renderMarkdown", isSignal: true, isRequired: false, transformFunction: null }, allowFileUpload: { classPropertyName: "allowFileUpload", publicName: "allowFileUpload", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { messageSend: "messageSend", fileAttach: "fileAttach" }, queries: [{ propertyName: "messageTemplate", first: true, predicate: ["messageTemplate"], descendants: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "composerInput", first: true, predicate: ["composerInput"], descendants: true }], ngImport: i0, template: "<div\n  class=\"lc-chat\"\n  [class.lc-chat--borderless]=\"!bordered()\"\n  [class.lc-chat--width-narrow]=\"contentWidth() === 'narrow'\"\n  [class.lc-chat--width-full]=\"contentWidth() === 'full'\"\n>\n  @if (showHeader()) {\n    <div class=\"lc-chat__header\">\n      <span class=\"lc-chat__title\">{{ title() }}</span>\n      @if (isStreaming()) {\n        <span class=\"lc-chat__streaming-badge\">Streaming\u2026</span>\n      }\n    </div>\n  }\n\n  <div\n    class=\"lc-chat__messages\"\n    [class.lc-chat__messages--anchor-bottom]=\"messageAnchor() === 'bottom'\"\n    #scrollContainer\n  >\n    <div class=\"lc-chat__thread\">\n      @for (msg of formattedMessages(); track msg.id) {\n        <div\n          class=\"lc-chat__message\"\n          [class.lc-chat__message--user]=\"msg.role === 'user'\"\n          [class.lc-chat__message--agent]=\"msg.role === 'agent'\"\n          [class.lc-chat__message--system]=\"msg.role === 'system'\"\n          [class.lc-chat__message--streaming]=\"msg.streaming\"\n        >\n          @if (showAvatars() && msg.role !== 'user') {\n            <div class=\"lc-chat__marker\">\n              @if (msg.avatar) {\n                <img [src]=\"msg.avatar\" [alt]=\"msg.name || msg.role\" class=\"lc-chat__avatar-img\" />\n              } @else {\n                <span\n                  class=\"lc-chat__dot\"\n                  [class.lc-chat__dot--agent]=\"msg.role === 'agent'\"\n                  [class.lc-chat__dot--system]=\"msg.role === 'system'\"\n                ></span>\n              }\n            </div>\n          }\n\n          <div class=\"lc-chat__bubble\" [class.lc-chat__bubble--streaming]=\"msg.streaming\">\n            @if (msg.role === 'user') {\n              <div class=\"lc-chat__meta\">\n                <span class=\"lc-chat__name\">{{ msg.name || 'Du' }}</span>\n                @if (showTimestamps() && msg.timestamp) {\n                  <span class=\"lc-chat__time\">{{ formatTime(msg.timestamp) }}</span>\n                }\n              </div>\n            } @else if (msg.name) {\n              <div class=\"lc-chat__name\">{{ msg.name }}</div>\n            }\n            <div class=\"lc-chat__content\">\n              @if (messageTemplate) {\n                <ng-container *ngTemplateOutlet=\"messageTemplate; context: { $implicit: msg }\" />\n              } @else if (shouldRenderMarkdown(msg.role)) {\n                <lc-markdown [content]=\"msg.content\" variant=\"chat\" />\n              } @else {\n                {{ msg.content }}\n              }\n              <span class=\"lc-chat__cursor\" [class.lc-chat__cursor--visible]=\"msg.streaming\"></span>\n            </div>\n            @if (msg.attachments?.length) {\n              <div class=\"lc-chat__attachments\">\n                @for (att of msg.attachments; track att.id) {\n                  @if (isImage(att) && att.url) {\n                    <a class=\"lc-chat__attachment lc-chat__attachment--image\" [href]=\"att.url\" target=\"_blank\" rel=\"noopener\">\n                      <img [src]=\"att.url\" [alt]=\"att.name\" />\n                    </a>\n                  } @else {\n                    <a\n                      class=\"lc-chat__attachment lc-chat__attachment--file\"\n                      [href]=\"att.url || null\"\n                      [attr.download]=\"att.url ? att.name : null\"\n                      target=\"_blank\"\n                      rel=\"noopener\"\n                    >\n                      <svg class=\"lc-chat__attachment-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n                        <path d=\"M6 2.5h6L16 6.5v10A1.5 1.5 0 0 1 14.5 18h-9A1.5 1.5 0 0 1 4 16.5v-12A1.5 1.5 0 0 1 5.5 3H6V2.5Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                        <path d=\"M12 2.5V6.5H16\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                      </svg>\n                      <span class=\"lc-chat__attachment-name\">{{ att.name }}</span>\n                      @if (att.size) {\n                        <span class=\"lc-chat__attachment-size\">{{ formatBytes(att.size) }}</span>\n                      }\n                    </a>\n                  }\n                }\n              </div>\n            }\n            @if (showTimestamps() && msg.timestamp && msg.role !== 'user') {\n              <div class=\"lc-chat__time\">{{ formatTime(msg.timestamp) }}</div>\n            }\n          </div>\n        </div>\n      }\n\n      @if (isStreaming() && !(formattedMessages().length && formattedMessages()[formattedMessages().length - 1].streaming)) {\n        <div class=\"lc-chat__message lc-chat__message--agent\">\n          @if (showAvatars()) {\n            <div class=\"lc-chat__marker\">\n              <span class=\"lc-chat__dot lc-chat__dot--agent\"></span>\n            </div>\n          }\n          <div class=\"lc-chat__bubble\">\n            <div class=\"lc-chat__typing\">\n              <span></span><span></span><span></span>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"lc-chat__input-area\">\n    <div class=\"lc-chat__composer\">\n      @if (allowFileUpload() && pendingAttachments().length) {\n        <div class=\"lc-chat__pending-attachments\">\n          @for (att of pendingAttachments(); track att.id) {\n            <div class=\"lc-chat__pending-attachment\" [class.lc-chat__pending-attachment--image]=\"isImage(att)\">\n              @if (isImage(att) && att.url) {\n                <img class=\"lc-chat__pending-thumb\" [src]=\"att.url\" [alt]=\"att.name\" />\n              } @else {\n                <svg class=\"lc-chat__attachment-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n                  <path d=\"M6 2.5h6L16 6.5v10A1.5 1.5 0 0 1 14.5 18h-9A1.5 1.5 0 0 1 4 16.5v-12A1.5 1.5 0 0 1 5.5 3H6V2.5Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                  <path d=\"M12 2.5V6.5H16\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                </svg>\n              }\n              <span class=\"lc-chat__pending-name\">{{ att.name }}</span>\n              @if (att.size) {\n                <span class=\"lc-chat__pending-size\">{{ formatBytes(att.size) }}</span>\n              }\n              <button\n                type=\"button\"\n                class=\"lc-chat__pending-remove\"\n                (click)=\"removeAttachment(att.id)\"\n                [attr.aria-label]=\"'Entfernen: ' + att.name\"\n              >\n                <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n                  <path d=\"M3 3l6 6M9 3l-6 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n                </svg>\n              </button>\n            </div>\n          }\n        </div>\n      }\n\n      <textarea\n        #composerInput\n        class=\"lc-chat__input\"\n        [placeholder]=\"placeholder()\"\n        [value]=\"inputValue()\"\n        [disabled]=\"disabled()\"\n        (input)=\"onInput($event)\"\n        (keydown)=\"onKeydown($event)\"\n        rows=\"1\"\n      ></textarea>\n\n      <div class=\"lc-chat__composer-actions\">\n        @if (allowFileUpload()) {\n          <input\n            #fileInput\n            type=\"file\"\n            class=\"lc-chat__file-input\"\n            [accept]=\"accept() || null\"\n            [multiple]=\"multiple()\"\n            (change)=\"onFilesSelected($event)\"\n          />\n          <button\n            type=\"button\"\n            class=\"lc-chat__attach-btn\"\n            [disabled]=\"disabled()\"\n            (click)=\"openFilePicker()\"\n            aria-label=\"Datei anh\u00E4ngen\"\n          >\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n              <path d=\"M14.5 9.5l-5 5a3 3 0 0 1-4.243-4.243l6.364-6.364a2 2 0 0 1 2.829 2.829l-6.364 6.364a1 1 0 1 1-1.415-1.415L11.5 6.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </button>\n        }\n        <button\n          class=\"lc-chat__send-btn\"\n          [disabled]=\"(!inputValue().trim() && !pendingAttachments().length) || disabled()\"\n          (click)=\"send()\"\n          aria-label=\"Send\"\n        >\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n            <path d=\"M3 10l7-7m0 0l7 7m-7-7v14\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" transform=\"rotate(90 10 10)\"/>\n          </svg>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".lc-chat{--lc-chat-content-width: 46rem;display:flex;flex-direction:column;height:100%;min-height:20rem;border:1px solid var(--color-border);border-radius:var(--border-radius-lg);overflow:hidden;background-color:var(--color-surface);color:var(--color-text-primary);font-family:var(--font-family-sans, sans-serif)}.lc-chat--borderless{border:none;border-radius:0}.lc-chat--width-full{--lc-chat-content-width: 100%}.lc-chat__header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-3) var(--spacing-4);border-bottom:1px solid var(--color-divider);background:var(--color-surface)}.lc-chat__title{font-size:var(--font-size-sm, .875rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-text-primary)}.lc-chat__streaming-badge{font-size:var(--font-size-xs, .6875rem);padding:.125rem .5rem;background:color-mix(in srgb,var(--color-primary-500) 15%,transparent);color:var(--color-primary-500);border-radius:var(--border-radius-full, 1rem);font-weight:var(--font-weight-medium, 500);animation:pulse-badge 1.5s infinite}@keyframes pulse-badge{0%,to{opacity:1}50%{opacity:.6}}.lc-chat__messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;padding-block:var(--spacing-6, 1.5rem);padding-inline:var(--spacing-4, 1rem)}.lc-chat__thread{position:relative;width:100%;max-width:var(--lc-chat-content-width, 46rem);margin-inline:auto;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:var(--spacing-5, 1.25rem)}.lc-chat__messages--anchor-bottom .lc-chat__thread>.lc-chat__message:first-child{margin-top:auto}.lc-chat__message{position:relative;display:flex;align-items:stretch;gap:var(--spacing-3, .75rem);align-self:stretch;max-width:100%}.lc-chat__marker{position:relative;z-index:1;flex-shrink:0;width:.875rem;display:flex;flex-direction:column;align-items:center}.lc-chat__marker:before{content:\"\";position:absolute;left:50%;top:.55rem;bottom:calc(-1 * var(--spacing-5, 1.25rem));width:1.5px;transform:translate(-50%);background:var(--color-divider);z-index:-1}.lc-chat__message:last-child .lc-chat__marker:before{display:none}.lc-chat__dot{position:relative;z-index:1;width:.625rem;height:.625rem;margin-top:.25rem;border-radius:50%;background:var(--color-text-tertiary);box-shadow:0 0 0 3px var(--color-surface)}.lc-chat__dot--agent{background:var(--color-primary-500)}.lc-chat__dot--system{background:var(--color-text-tertiary);opacity:.6}.lc-chat__message--streaming .lc-chat__dot--agent{animation:dot-pulse 1.4s ease-out infinite}@keyframes dot-pulse{0%{box-shadow:0 0 0 3px var(--color-surface),0 0 0 3px color-mix(in srgb,var(--color-primary-500) 45%,transparent)}70%,to{box-shadow:0 0 0 3px var(--color-surface),0 0 0 9px color-mix(in srgb,var(--color-primary-500) 0%,transparent)}}.lc-chat__avatar-img{width:1.5rem;height:1.5rem;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--color-surface)}.lc-chat__bubble{flex:1;min-width:0;font-size:var(--font-size-base, .9375rem);line-height:var(--line-height-relaxed, 1.6);word-break:break-word;color:var(--color-text-primary)}.lc-chat__message--user .lc-chat__bubble{position:relative;z-index:1;padding:var(--spacing-3, .75rem) var(--spacing-4, 1rem);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);background:var(--color-surface-2)}.lc-chat__message--agent .lc-chat__bubble{padding:0;background:transparent}.lc-chat__message--system .lc-chat__bubble{padding:0;background:transparent;color:var(--color-text-tertiary);font-size:var(--font-size-sm, .8125rem)}.lc-chat__meta{display:flex;align-items:baseline;justify-content:space-between;gap:var(--spacing-2, .5rem);margin-bottom:var(--spacing-1, .25rem)}.lc-chat__meta .lc-chat__name{margin-bottom:0}.lc-chat__meta .lc-chat__time{margin-top:0}.lc-chat__name{font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-text-secondary);margin-bottom:var(--spacing-1, .25rem)}.lc-chat__content{white-space:pre-wrap}.lc-chat__cursor{display:none}.lc-chat__cursor--visible{display:inline-block;width:2px;height:1em;background:currentColor;margin-left:1px;vertical-align:text-bottom;animation:blink-cursor .8s step-end infinite}@keyframes blink-cursor{0%,to{opacity:1}50%{opacity:0}}.lc-chat__time{font-size:var(--font-size-xs, .75rem);color:var(--color-text-tertiary);margin-top:var(--spacing-1, .25rem);flex-shrink:0}.lc-chat__typing{display:flex;gap:.25rem;padding:.25rem 0}.lc-chat__typing span{width:.375rem;height:.375rem;border-radius:50%;background:var(--color-text-tertiary);animation:typing-bounce 1.4s ease-in-out infinite}.lc-chat__typing span:nth-child(2){animation-delay:.2s}.lc-chat__typing span:nth-child(3){animation-delay:.4s}@keyframes typing-bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-.375rem)}}.lc-chat__input-area{padding:var(--spacing-4, .75rem);border-top:1px solid var(--color-divider);background:var(--color-surface)}.lc-chat__composer{width:100%;max-width:var(--lc-chat-content-width, 46rem);margin-inline:auto;display:flex;flex-direction:column;gap:var(--spacing-2, .5rem);padding:var(--spacing-3, .75rem);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--border-radius-xl);transition:border-color .15s,box-shadow .15s}.lc-chat__composer:focus-within{border-color:var(--color-primary-500);box-shadow:var(--elevation-1)}.lc-chat__input{display:block;width:100%;box-sizing:border-box;resize:none;border:none;background:transparent;padding:var(--spacing-1, .25rem) var(--spacing-2, .5rem);font-size:var(--font-size-base, .875rem);font-family:inherit;line-height:var(--line-height-normal, 1.4);color:var(--color-text-primary);outline:none;height:auto;max-height:12rem;overflow-y:auto}.lc-chat__input:disabled{opacity:.5;cursor:not-allowed}.lc-chat__input::placeholder{color:var(--color-text-tertiary)}.lc-chat__composer-actions{display:flex;align-items:center;gap:var(--spacing-2, .5rem)}.lc-chat__send-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin-left:auto;border:none;border-radius:var(--border-radius-md);background:var(--color-primary-fill);color:var(--color-on-primary);cursor:pointer;flex-shrink:0;transition:background .15s,opacity .15s}.lc-chat__send-btn:hover:not(:disabled){background:var(--color-primary-fill-hover)}.lc-chat__send-btn:disabled{opacity:.4;cursor:not-allowed}.lc-chat__file-input{display:none}.lc-chat__attach-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;border-radius:var(--border-radius-md);background:transparent;color:var(--color-text-tertiary);cursor:pointer;flex-shrink:0;transition:background .15s,color .15s}.lc-chat__attach-btn:hover:not(:disabled){background:var(--color-surface-hover);color:var(--color-text-primary)}.lc-chat__attach-btn:disabled{opacity:.4;cursor:not-allowed}.lc-chat__pending-attachments{display:flex;flex-wrap:wrap;gap:.375rem}.lc-chat__pending-attachment{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .375rem .25rem .5rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-md, .5rem);font-size:var(--font-size-xs, .75rem);color:var(--color-text-primary);max-width:16rem}.lc-chat__pending-thumb{width:1.75rem;height:1.75rem;object-fit:cover;border-radius:.25rem;flex-shrink:0}.lc-chat__pending-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:9rem}.lc-chat__pending-size{color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}.lc-chat__pending-remove{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;border-radius:50%;background:transparent;color:var(--color-text-tertiary);cursor:pointer;flex-shrink:0}.lc-chat__pending-remove:hover{background:var(--color-surface-hover);color:var(--color-text-primary)}.lc-chat__attachments{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.5rem}.lc-chat__attachment{display:inline-flex;align-items:center;gap:.375rem;text-decoration:none;color:inherit;font-size:var(--font-size-xs, .75rem)}.lc-chat__attachment--file{padding:.25rem .5rem;background:color-mix(in srgb,currentColor 8%,transparent);border-radius:var(--border-radius-md, .375rem);max-width:16rem}.lc-chat__attachment--file:hover{background:color-mix(in srgb,currentColor 16%,transparent)}.lc-chat__attachment--image img{max-width:12rem;max-height:8rem;border-radius:var(--border-radius-md, .375rem);object-fit:cover;display:block}.lc-chat__attachment-icon{flex-shrink:0}.lc-chat__attachment-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-chat__attachment-size{opacity:.7;font-variant-numeric:tabular-nums}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MarkdownComponent, selector: "lc-markdown", inputs: ["src", "content", "variant", "linkTarget", "sanitize", "syntaxHighlight", "showHeadingAnchors", "baseUrl"], outputs: ["linkClick", "rendered"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: ChatComponent, isStandalone: true, selector: "lc-chat", inputs: { messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, isStreaming: { classPropertyName: "isStreaming", publicName: "isStreaming", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, messageAnchor: { classPropertyName: "messageAnchor", publicName: "messageAnchor", isSignal: true, isRequired: false, transformFunction: null }, contentWidth: { classPropertyName: "contentWidth", publicName: "contentWidth", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showAvatars: { classPropertyName: "showAvatars", publicName: "showAvatars", isSignal: true, isRequired: false, transformFunction: null }, showTimestamps: { classPropertyName: "showTimestamps", publicName: "showTimestamps", isSignal: true, isRequired: false, transformFunction: null }, renderMarkdown: { classPropertyName: "renderMarkdown", publicName: "renderMarkdown", isSignal: true, isRequired: false, transformFunction: null }, allowFileUpload: { classPropertyName: "allowFileUpload", publicName: "allowFileUpload", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { messageSend: "messageSend", fileAttach: "fileAttach" }, queries: [{ propertyName: "messageTemplate", first: true, predicate: ["messageTemplate"], descendants: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "composerInput", first: true, predicate: ["composerInput"], descendants: true }], ngImport: i0, template: "<div\n  class=\"lc-chat\"\n  [class.lc-chat--borderless]=\"!bordered()\"\n  [class.lc-chat--width-narrow]=\"contentWidth() === 'narrow'\"\n  [class.lc-chat--width-full]=\"contentWidth() === 'full'\"\n>\n  @if (showHeader()) {\n    <div class=\"lc-chat__header\">\n      <span class=\"lc-chat__title\">{{ title() }}</span>\n      @if (isStreaming()) {\n        <span class=\"lc-chat__streaming-badge\">Streaming\u2026</span>\n      }\n    </div>\n  }\n\n  <div\n    class=\"lc-chat__messages\"\n    [class.lc-chat__messages--anchor-bottom]=\"messageAnchor() === 'bottom'\"\n    #scrollContainer\n  >\n    <div class=\"lc-chat__thread\">\n      @for (msg of formattedMessages(); track msg.id) {\n        <div\n          class=\"lc-chat__message\"\n          [class.lc-chat__message--user]=\"msg.role === 'user'\"\n          [class.lc-chat__message--agent]=\"msg.role === 'agent'\"\n          [class.lc-chat__message--system]=\"msg.role === 'system'\"\n          [class.lc-chat__message--streaming]=\"msg.streaming\"\n          [attr.role]=\"msg.status === 'error' ? 'alert' : null\"\n          [attr.aria-live]=\"statusAriaLive(msg.status)\"\n        >\n          @if (msg.role !== 'user' && (showAvatars() || isSemanticStatus(msg.status))) {\n            <div class=\"lc-chat__marker\">\n              @if (isSemanticStatus(msg.status)) {\n                <span class=\"lc-chat__status-icon\">\n                  <lc-icon [name]=\"statusIcon(msg.status)\" size=\"xs\" [color]=\"statusColor(msg.status)\" [decorative]=\"true\" />\n                </span>\n              } @else if (msg.avatar) {\n                <img [src]=\"msg.avatar\" [alt]=\"msg.name || msg.role\" class=\"lc-chat__avatar-img\" />\n              } @else {\n                <span\n                  class=\"lc-chat__dot\"\n                  [class.lc-chat__dot--agent]=\"msg.role === 'agent'\"\n                  [class.lc-chat__dot--system]=\"msg.role === 'system'\"\n                ></span>\n              }\n            </div>\n          }\n\n          <div class=\"lc-chat__bubble\" [class.lc-chat__bubble--streaming]=\"msg.streaming\">\n            @if (msg.role === 'user') {\n              <div class=\"lc-chat__meta\">\n                <span class=\"lc-chat__name\">{{ msg.name || 'Du' }}</span>\n                @if (showTimestamps() && msg.timestamp) {\n                  <span class=\"lc-chat__time\">{{ formatTime(msg.timestamp) }}</span>\n                }\n              </div>\n            } @else if (msg.name) {\n              <div class=\"lc-chat__name\">{{ msg.name }}</div>\n            }\n            <div class=\"lc-chat__content\">\n              @if (isSemanticStatus(msg.status)) {\n                <span class=\"lc-chat__sr-only\">{{ statusLabel(msg.status) }} </span>\n              }\n              @if (messageTemplate) {\n                <ng-container *ngTemplateOutlet=\"messageTemplate; context: { $implicit: msg }\" />\n              } @else if (shouldRenderMarkdown(msg.role)) {\n                <lc-markdown [content]=\"msg.content\" variant=\"chat\" />\n              } @else {\n                {{ msg.content }}\n              }\n              <span class=\"lc-chat__cursor\" [class.lc-chat__cursor--visible]=\"msg.streaming\"></span>\n            </div>\n            @if (msg.attachments?.length) {\n              <div class=\"lc-chat__attachments\">\n                @for (att of msg.attachments; track att.id) {\n                  @if (isImage(att) && att.url) {\n                    <a class=\"lc-chat__attachment lc-chat__attachment--image\" [href]=\"att.url\" target=\"_blank\" rel=\"noopener\">\n                      <img [src]=\"att.url\" [alt]=\"att.name\" />\n                    </a>\n                  } @else {\n                    <a\n                      class=\"lc-chat__attachment lc-chat__attachment--file\"\n                      [href]=\"att.url || null\"\n                      [attr.download]=\"att.url ? att.name : null\"\n                      target=\"_blank\"\n                      rel=\"noopener\"\n                    >\n                      <svg class=\"lc-chat__attachment-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n                        <path d=\"M6 2.5h6L16 6.5v10A1.5 1.5 0 0 1 14.5 18h-9A1.5 1.5 0 0 1 4 16.5v-12A1.5 1.5 0 0 1 5.5 3H6V2.5Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                        <path d=\"M12 2.5V6.5H16\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                      </svg>\n                      <span class=\"lc-chat__attachment-name\">{{ att.name }}</span>\n                      @if (att.size) {\n                        <span class=\"lc-chat__attachment-size\">{{ formatBytes(att.size) }}</span>\n                      }\n                    </a>\n                  }\n                }\n              </div>\n            }\n            @if (showTimestamps() && msg.timestamp && msg.role !== 'user') {\n              <div class=\"lc-chat__time\">{{ formatTime(msg.timestamp) }}</div>\n            }\n          </div>\n        </div>\n      }\n\n      @if (isStreaming() && !(formattedMessages().length && formattedMessages()[formattedMessages().length - 1].streaming)) {\n        <div class=\"lc-chat__message lc-chat__message--agent\">\n          @if (showAvatars()) {\n            <div class=\"lc-chat__marker\">\n              <span class=\"lc-chat__dot lc-chat__dot--agent\"></span>\n            </div>\n          }\n          <div class=\"lc-chat__bubble\">\n            <div class=\"lc-chat__typing\">\n              <span></span><span></span><span></span>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"lc-chat__input-area\">\n    <div class=\"lc-chat__composer\">\n      @if (allowFileUpload() && pendingAttachments().length) {\n        <div class=\"lc-chat__pending-attachments\">\n          @for (att of pendingAttachments(); track att.id) {\n            <div class=\"lc-chat__pending-attachment\" [class.lc-chat__pending-attachment--image]=\"isImage(att)\">\n              @if (isImage(att) && att.url) {\n                <img class=\"lc-chat__pending-thumb\" [src]=\"att.url\" [alt]=\"att.name\" />\n              } @else {\n                <svg class=\"lc-chat__attachment-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n                  <path d=\"M6 2.5h6L16 6.5v10A1.5 1.5 0 0 1 14.5 18h-9A1.5 1.5 0 0 1 4 16.5v-12A1.5 1.5 0 0 1 5.5 3H6V2.5Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                  <path d=\"M12 2.5V6.5H16\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                </svg>\n              }\n              <span class=\"lc-chat__pending-name\">{{ att.name }}</span>\n              @if (att.size) {\n                <span class=\"lc-chat__pending-size\">{{ formatBytes(att.size) }}</span>\n              }\n              <button\n                type=\"button\"\n                class=\"lc-chat__pending-remove\"\n                (click)=\"removeAttachment(att.id)\"\n                [attr.aria-label]=\"'Entfernen: ' + att.name\"\n              >\n                <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n                  <path d=\"M3 3l6 6M9 3l-6 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n                </svg>\n              </button>\n            </div>\n          }\n        </div>\n      }\n\n      <textarea\n        #composerInput\n        class=\"lc-chat__input\"\n        [placeholder]=\"placeholder()\"\n        [value]=\"inputValue()\"\n        [disabled]=\"disabled()\"\n        (input)=\"onInput($event)\"\n        (keydown)=\"onKeydown($event)\"\n        rows=\"1\"\n      ></textarea>\n\n      <div class=\"lc-chat__composer-actions\">\n        @if (allowFileUpload()) {\n          <input\n            #fileInput\n            type=\"file\"\n            class=\"lc-chat__file-input\"\n            [accept]=\"accept() || null\"\n            [multiple]=\"multiple()\"\n            (change)=\"onFilesSelected($event)\"\n          />\n          <button\n            type=\"button\"\n            class=\"lc-chat__attach-btn\"\n            [disabled]=\"disabled()\"\n            (click)=\"openFilePicker()\"\n            aria-label=\"Datei anh\u00E4ngen\"\n          >\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n              <path d=\"M14.5 9.5l-5 5a3 3 0 0 1-4.243-4.243l6.364-6.364a2 2 0 0 1 2.829 2.829l-6.364 6.364a1 1 0 1 1-1.415-1.415L11.5 6.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </button>\n        }\n        <button\n          class=\"lc-chat__send-btn\"\n          [disabled]=\"(!inputValue().trim() && !pendingAttachments().length) || disabled()\"\n          (click)=\"send()\"\n          aria-label=\"Send\"\n        >\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n            <path d=\"M3 10l7-7m0 0l7 7m-7-7v14\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" transform=\"rotate(90 10 10)\"/>\n          </svg>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".lc-chat{--lc-chat-content-width: 46rem;display:flex;flex-direction:column;height:100%;min-height:20rem;border:1px solid var(--color-border);border-radius:var(--border-radius-lg);overflow:hidden;background-color:var(--color-surface);color:var(--color-text-primary);font-family:var(--font-family-sans, sans-serif)}.lc-chat--borderless{border:none;border-radius:0}.lc-chat--width-full{--lc-chat-content-width: 100%}.lc-chat__header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-3) var(--spacing-4);border-bottom:1px solid var(--color-divider);background:var(--color-surface)}.lc-chat__title{font-size:var(--font-size-sm, .875rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-text-primary)}.lc-chat__streaming-badge{font-size:var(--font-size-xs, .6875rem);padding:.125rem .5rem;background:color-mix(in srgb,var(--color-primary-500) 15%,transparent);color:var(--color-primary-500);border-radius:var(--border-radius-full, 1rem);font-weight:var(--font-weight-medium, 500);animation:pulse-badge 1.5s infinite}@keyframes pulse-badge{0%,to{opacity:1}50%{opacity:.6}}.lc-chat__messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;padding-block:var(--spacing-6, 1.5rem);padding-inline:var(--spacing-4, 1rem)}.lc-chat__thread{position:relative;width:100%;max-width:var(--lc-chat-content-width, 46rem);margin-inline:auto;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:var(--spacing-5, 1.25rem)}.lc-chat__messages--anchor-bottom .lc-chat__thread>.lc-chat__message:first-child{margin-top:auto}.lc-chat__message{position:relative;display:flex;align-items:stretch;gap:var(--spacing-3, .75rem);align-self:stretch;max-width:100%}.lc-chat__marker{position:relative;z-index:1;flex-shrink:0;width:.875rem;display:flex;flex-direction:column;align-items:center}.lc-chat__marker:before{content:\"\";position:absolute;left:50%;top:.55rem;bottom:calc(-1 * var(--spacing-5, 1.25rem));width:1.5px;transform:translate(-50%);background:var(--color-divider);z-index:-1}.lc-chat__message:last-child .lc-chat__marker:before{display:none}.lc-chat__dot{position:relative;z-index:1;width:.625rem;height:.625rem;margin-top:.25rem;border-radius:50%;background:var(--color-text-tertiary);box-shadow:0 0 0 3px var(--color-surface)}.lc-chat__dot--agent{background:var(--color-primary-500)}.lc-chat__dot--system{background:var(--color-text-tertiary);opacity:.6}.lc-chat__message--streaming .lc-chat__dot--agent{animation:dot-pulse 1.4s ease-out infinite}@keyframes dot-pulse{0%{box-shadow:0 0 0 3px var(--color-surface),0 0 0 3px color-mix(in srgb,var(--color-primary-500) 45%,transparent)}70%,to{box-shadow:0 0 0 3px var(--color-surface),0 0 0 9px color-mix(in srgb,var(--color-primary-500) 0%,transparent)}}.lc-chat__avatar-img{width:1.5rem;height:1.5rem;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--color-surface)}.lc-chat__status-icon{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;margin-top:.0625rem;border-radius:50%;background:var(--color-surface);box-shadow:0 0 0 2px var(--color-surface)}.lc-chat__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.lc-chat__bubble{flex:1;min-width:0;font-size:var(--font-size-base, .9375rem);line-height:var(--line-height-relaxed, 1.6);word-break:break-word;color:var(--color-text-primary)}.lc-chat__message--user .lc-chat__bubble{position:relative;z-index:1;padding:var(--spacing-3, .75rem) var(--spacing-4, 1rem);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);background:var(--color-surface-2)}.lc-chat__message--agent .lc-chat__bubble{padding:0;background:transparent}.lc-chat__message--system .lc-chat__bubble{padding:0;background:transparent;color:var(--color-text-tertiary);font-size:var(--font-size-sm, .8125rem)}.lc-chat__meta{display:flex;align-items:baseline;justify-content:space-between;gap:var(--spacing-2, .5rem);margin-bottom:var(--spacing-1, .25rem)}.lc-chat__meta .lc-chat__name{margin-bottom:0}.lc-chat__meta .lc-chat__time{margin-top:0}.lc-chat__name{font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-text-secondary);margin-bottom:var(--spacing-1, .25rem)}.lc-chat__content{white-space:pre-wrap}.lc-chat__cursor{display:none}.lc-chat__cursor--visible{display:inline-block;width:2px;height:1em;background:currentColor;margin-left:1px;vertical-align:text-bottom;animation:blink-cursor .8s step-end infinite}@keyframes blink-cursor{0%,to{opacity:1}50%{opacity:0}}.lc-chat__time{font-size:var(--font-size-xs, .75rem);color:var(--color-text-tertiary);margin-top:var(--spacing-1, .25rem);flex-shrink:0}.lc-chat__typing{display:flex;gap:.25rem;padding:.25rem 0}.lc-chat__typing span{width:.375rem;height:.375rem;border-radius:50%;background:var(--color-text-tertiary);animation:typing-bounce 1.4s ease-in-out infinite}.lc-chat__typing span:nth-child(2){animation-delay:.2s}.lc-chat__typing span:nth-child(3){animation-delay:.4s}@keyframes typing-bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-.375rem)}}.lc-chat__input-area{padding:var(--spacing-4, .75rem);border-top:1px solid var(--color-divider);background:var(--color-surface)}.lc-chat__composer{width:100%;max-width:var(--lc-chat-content-width, 46rem);margin-inline:auto;display:flex;flex-direction:column;gap:var(--spacing-2, .5rem);padding:var(--spacing-3, .75rem);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--border-radius-xl);transition:border-color .15s,box-shadow .15s}.lc-chat__composer:focus-within{border-color:var(--color-primary-500);box-shadow:var(--elevation-1)}.lc-chat__input{display:block;width:100%;box-sizing:border-box;resize:none;border:none;background:transparent;padding:var(--spacing-1, .25rem) var(--spacing-2, .5rem);font-size:var(--font-size-base, .875rem);font-family:inherit;line-height:var(--line-height-normal, 1.4);color:var(--color-text-primary);outline:none;height:auto;max-height:12rem;overflow-y:auto}.lc-chat__input:disabled{opacity:.5;cursor:not-allowed}.lc-chat__input::placeholder{color:var(--color-text-tertiary)}.lc-chat__composer-actions{display:flex;align-items:center;gap:var(--spacing-2, .5rem)}.lc-chat__send-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin-left:auto;border:none;border-radius:var(--border-radius-md);background:var(--color-primary-fill);color:var(--color-on-primary);cursor:pointer;flex-shrink:0;transition:background .15s,opacity .15s}.lc-chat__send-btn:hover:not(:disabled){background:var(--color-primary-fill-hover)}.lc-chat__send-btn:disabled{opacity:.4;cursor:not-allowed}.lc-chat__file-input{display:none}.lc-chat__attach-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;border-radius:var(--border-radius-md);background:transparent;color:var(--color-text-tertiary);cursor:pointer;flex-shrink:0;transition:background .15s,color .15s}.lc-chat__attach-btn:hover:not(:disabled){background:var(--color-surface-hover);color:var(--color-text-primary)}.lc-chat__attach-btn:disabled{opacity:.4;cursor:not-allowed}.lc-chat__pending-attachments{display:flex;flex-wrap:wrap;gap:.375rem}.lc-chat__pending-attachment{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .375rem .25rem .5rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-md, .5rem);font-size:var(--font-size-xs, .75rem);color:var(--color-text-primary);max-width:16rem}.lc-chat__pending-thumb{width:1.75rem;height:1.75rem;object-fit:cover;border-radius:.25rem;flex-shrink:0}.lc-chat__pending-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:9rem}.lc-chat__pending-size{color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}.lc-chat__pending-remove{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;border-radius:50%;background:transparent;color:var(--color-text-tertiary);cursor:pointer;flex-shrink:0}.lc-chat__pending-remove:hover{background:var(--color-surface-hover);color:var(--color-text-primary)}.lc-chat__attachments{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.5rem}.lc-chat__attachment{display:inline-flex;align-items:center;gap:.375rem;text-decoration:none;color:inherit;font-size:var(--font-size-xs, .75rem)}.lc-chat__attachment--file{padding:.25rem .5rem;background:color-mix(in srgb,currentColor 8%,transparent);border-radius:var(--border-radius-md, .375rem);max-width:16rem}.lc-chat__attachment--file:hover{background:color-mix(in srgb,currentColor 16%,transparent)}.lc-chat__attachment--image img{max-width:12rem;max-height:8rem;border-radius:var(--border-radius-md, .375rem);object-fit:cover;display:block}.lc-chat__attachment-icon{flex-shrink:0}.lc-chat__attachment-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-chat__attachment-size{opacity:.7;font-variant-numeric:tabular-nums}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MarkdownComponent, selector: "lc-markdown", inputs: ["src", "content", "variant", "linkTarget", "sanitize", "syntaxHighlight", "showHeadingAnchors", "baseUrl"], outputs: ["linkClick", "rendered"] }, { 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: ChatComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lc-chat', standalone: true, imports: [NgTemplateOutlet, MarkdownComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"lc-chat\"\n  [class.lc-chat--borderless]=\"!bordered()\"\n  [class.lc-chat--width-narrow]=\"contentWidth() === 'narrow'\"\n  [class.lc-chat--width-full]=\"contentWidth() === 'full'\"\n>\n  @if (showHeader()) {\n    <div class=\"lc-chat__header\">\n      <span class=\"lc-chat__title\">{{ title() }}</span>\n      @if (isStreaming()) {\n        <span class=\"lc-chat__streaming-badge\">Streaming\u2026</span>\n      }\n    </div>\n  }\n\n  <div\n    class=\"lc-chat__messages\"\n    [class.lc-chat__messages--anchor-bottom]=\"messageAnchor() === 'bottom'\"\n    #scrollContainer\n  >\n    <div class=\"lc-chat__thread\">\n      @for (msg of formattedMessages(); track msg.id) {\n        <div\n          class=\"lc-chat__message\"\n          [class.lc-chat__message--user]=\"msg.role === 'user'\"\n          [class.lc-chat__message--agent]=\"msg.role === 'agent'\"\n          [class.lc-chat__message--system]=\"msg.role === 'system'\"\n          [class.lc-chat__message--streaming]=\"msg.streaming\"\n        >\n          @if (showAvatars() && msg.role !== 'user') {\n            <div class=\"lc-chat__marker\">\n              @if (msg.avatar) {\n                <img [src]=\"msg.avatar\" [alt]=\"msg.name || msg.role\" class=\"lc-chat__avatar-img\" />\n              } @else {\n                <span\n                  class=\"lc-chat__dot\"\n                  [class.lc-chat__dot--agent]=\"msg.role === 'agent'\"\n                  [class.lc-chat__dot--system]=\"msg.role === 'system'\"\n                ></span>\n              }\n            </div>\n          }\n\n          <div class=\"lc-chat__bubble\" [class.lc-chat__bubble--streaming]=\"msg.streaming\">\n            @if (msg.role === 'user') {\n              <div class=\"lc-chat__meta\">\n                <span class=\"lc-chat__name\">{{ msg.name || 'Du' }}</span>\n                @if (showTimestamps() && msg.timestamp) {\n                  <span class=\"lc-chat__time\">{{ formatTime(msg.timestamp) }}</span>\n                }\n              </div>\n            } @else if (msg.name) {\n              <div class=\"lc-chat__name\">{{ msg.name }}</div>\n            }\n            <div class=\"lc-chat__content\">\n              @if (messageTemplate) {\n                <ng-container *ngTemplateOutlet=\"messageTemplate; context: { $implicit: msg }\" />\n              } @else if (shouldRenderMarkdown(msg.role)) {\n                <lc-markdown [content]=\"msg.content\" variant=\"chat\" />\n              } @else {\n                {{ msg.content }}\n              }\n              <span class=\"lc-chat__cursor\" [class.lc-chat__cursor--visible]=\"msg.streaming\"></span>\n            </div>\n            @if (msg.attachments?.length) {\n              <div class=\"lc-chat__attachments\">\n                @for (att of msg.attachments; track att.id) {\n                  @if (isImage(att) && att.url) {\n                    <a class=\"lc-chat__attachment lc-chat__attachment--image\" [href]=\"att.url\" target=\"_blank\" rel=\"noopener\">\n                      <img [src]=\"att.url\" [alt]=\"att.name\" />\n                    </a>\n                  } @else {\n                    <a\n                      class=\"lc-chat__attachment lc-chat__attachment--file\"\n                      [href]=\"att.url || null\"\n                      [attr.download]=\"att.url ? att.name : null\"\n                      target=\"_blank\"\n                      rel=\"noopener\"\n                    >\n                      <svg class=\"lc-chat__attachment-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n                        <path d=\"M6 2.5h6L16 6.5v10A1.5 1.5 0 0 1 14.5 18h-9A1.5 1.5 0 0 1 4 16.5v-12A1.5 1.5 0 0 1 5.5 3H6V2.5Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                        <path d=\"M12 2.5V6.5H16\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                      </svg>\n                      <span class=\"lc-chat__attachment-name\">{{ att.name }}</span>\n                      @if (att.size) {\n                        <span class=\"lc-chat__attachment-size\">{{ formatBytes(att.size) }}</span>\n                      }\n                    </a>\n                  }\n                }\n              </div>\n            }\n            @if (showTimestamps() && msg.timestamp && msg.role !== 'user') {\n              <div class=\"lc-chat__time\">{{ formatTime(msg.timestamp) }}</div>\n            }\n          </div>\n        </div>\n      }\n\n      @if (isStreaming() && !(formattedMessages().length && formattedMessages()[formattedMessages().length - 1].streaming)) {\n        <div class=\"lc-chat__message lc-chat__message--agent\">\n          @if (showAvatars()) {\n            <div class=\"lc-chat__marker\">\n              <span class=\"lc-chat__dot lc-chat__dot--agent\"></span>\n            </div>\n          }\n          <div class=\"lc-chat__bubble\">\n            <div class=\"lc-chat__typing\">\n              <span></span><span></span><span></span>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"lc-chat__input-area\">\n    <div class=\"lc-chat__composer\">\n      @if (allowFileUpload() && pendingAttachments().length) {\n        <div class=\"lc-chat__pending-attachments\">\n          @for (att of pendingAttachments(); track att.id) {\n            <div class=\"lc-chat__pending-attachment\" [class.lc-chat__pending-attachment--image]=\"isImage(att)\">\n              @if (isImage(att) && att.url) {\n                <img class=\"lc-chat__pending-thumb\" [src]=\"att.url\" [alt]=\"att.name\" />\n              } @else {\n                <svg class=\"lc-chat__attachment-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n                  <path d=\"M6 2.5h6L16 6.5v10A1.5 1.5 0 0 1 14.5 18h-9A1.5 1.5 0 0 1 4 16.5v-12A1.5 1.5 0 0 1 5.5 3H6V2.5Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                  <path d=\"M12 2.5V6.5H16\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                </svg>\n              }\n              <span class=\"lc-chat__pending-name\">{{ att.name }}</span>\n              @if (att.size) {\n                <span class=\"lc-chat__pending-size\">{{ formatBytes(att.size) }}</span>\n              }\n              <button\n                type=\"button\"\n                class=\"lc-chat__pending-remove\"\n                (click)=\"removeAttachment(att.id)\"\n                [attr.aria-label]=\"'Entfernen: ' + att.name\"\n              >\n                <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n                  <path d=\"M3 3l6 6M9 3l-6 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n                </svg>\n              </button>\n            </div>\n          }\n        </div>\n      }\n\n      <textarea\n        #composerInput\n        class=\"lc-chat__input\"\n        [placeholder]=\"placeholder()\"\n        [value]=\"inputValue()\"\n        [disabled]=\"disabled()\"\n        (input)=\"onInput($event)\"\n        (keydown)=\"onKeydown($event)\"\n        rows=\"1\"\n      ></textarea>\n\n      <div class=\"lc-chat__composer-actions\">\n        @if (allowFileUpload()) {\n          <input\n            #fileInput\n            type=\"file\"\n            class=\"lc-chat__file-input\"\n            [accept]=\"accept() || null\"\n            [multiple]=\"multiple()\"\n            (change)=\"onFilesSelected($event)\"\n          />\n          <button\n            type=\"button\"\n            class=\"lc-chat__attach-btn\"\n            [disabled]=\"disabled()\"\n            (click)=\"openFilePicker()\"\n            aria-label=\"Datei anh\u00E4ngen\"\n          >\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n              <path d=\"M14.5 9.5l-5 5a3 3 0 0 1-4.243-4.243l6.364-6.364a2 2 0 0 1 2.829 2.829l-6.364 6.364a1 1 0 1 1-1.415-1.415L11.5 6.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </button>\n        }\n        <button\n          class=\"lc-chat__send-btn\"\n          [disabled]=\"(!inputValue().trim() && !pendingAttachments().length) || disabled()\"\n          (click)=\"send()\"\n          aria-label=\"Send\"\n        >\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n            <path d=\"M3 10l7-7m0 0l7 7m-7-7v14\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" transform=\"rotate(90 10 10)\"/>\n          </svg>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".lc-chat{--lc-chat-content-width: 46rem;display:flex;flex-direction:column;height:100%;min-height:20rem;border:1px solid var(--color-border);border-radius:var(--border-radius-lg);overflow:hidden;background-color:var(--color-surface);color:var(--color-text-primary);font-family:var(--font-family-sans, sans-serif)}.lc-chat--borderless{border:none;border-radius:0}.lc-chat--width-full{--lc-chat-content-width: 100%}.lc-chat__header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-3) var(--spacing-4);border-bottom:1px solid var(--color-divider);background:var(--color-surface)}.lc-chat__title{font-size:var(--font-size-sm, .875rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-text-primary)}.lc-chat__streaming-badge{font-size:var(--font-size-xs, .6875rem);padding:.125rem .5rem;background:color-mix(in srgb,var(--color-primary-500) 15%,transparent);color:var(--color-primary-500);border-radius:var(--border-radius-full, 1rem);font-weight:var(--font-weight-medium, 500);animation:pulse-badge 1.5s infinite}@keyframes pulse-badge{0%,to{opacity:1}50%{opacity:.6}}.lc-chat__messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;padding-block:var(--spacing-6, 1.5rem);padding-inline:var(--spacing-4, 1rem)}.lc-chat__thread{position:relative;width:100%;max-width:var(--lc-chat-content-width, 46rem);margin-inline:auto;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:var(--spacing-5, 1.25rem)}.lc-chat__messages--anchor-bottom .lc-chat__thread>.lc-chat__message:first-child{margin-top:auto}.lc-chat__message{position:relative;display:flex;align-items:stretch;gap:var(--spacing-3, .75rem);align-self:stretch;max-width:100%}.lc-chat__marker{position:relative;z-index:1;flex-shrink:0;width:.875rem;display:flex;flex-direction:column;align-items:center}.lc-chat__marker:before{content:\"\";position:absolute;left:50%;top:.55rem;bottom:calc(-1 * var(--spacing-5, 1.25rem));width:1.5px;transform:translate(-50%);background:var(--color-divider);z-index:-1}.lc-chat__message:last-child .lc-chat__marker:before{display:none}.lc-chat__dot{position:relative;z-index:1;width:.625rem;height:.625rem;margin-top:.25rem;border-radius:50%;background:var(--color-text-tertiary);box-shadow:0 0 0 3px var(--color-surface)}.lc-chat__dot--agent{background:var(--color-primary-500)}.lc-chat__dot--system{background:var(--color-text-tertiary);opacity:.6}.lc-chat__message--streaming .lc-chat__dot--agent{animation:dot-pulse 1.4s ease-out infinite}@keyframes dot-pulse{0%{box-shadow:0 0 0 3px var(--color-surface),0 0 0 3px color-mix(in srgb,var(--color-primary-500) 45%,transparent)}70%,to{box-shadow:0 0 0 3px var(--color-surface),0 0 0 9px color-mix(in srgb,var(--color-primary-500) 0%,transparent)}}.lc-chat__avatar-img{width:1.5rem;height:1.5rem;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--color-surface)}.lc-chat__bubble{flex:1;min-width:0;font-size:var(--font-size-base, .9375rem);line-height:var(--line-height-relaxed, 1.6);word-break:break-word;color:var(--color-text-primary)}.lc-chat__message--user .lc-chat__bubble{position:relative;z-index:1;padding:var(--spacing-3, .75rem) var(--spacing-4, 1rem);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);background:var(--color-surface-2)}.lc-chat__message--agent .lc-chat__bubble{padding:0;background:transparent}.lc-chat__message--system .lc-chat__bubble{padding:0;background:transparent;color:var(--color-text-tertiary);font-size:var(--font-size-sm, .8125rem)}.lc-chat__meta{display:flex;align-items:baseline;justify-content:space-between;gap:var(--spacing-2, .5rem);margin-bottom:var(--spacing-1, .25rem)}.lc-chat__meta .lc-chat__name{margin-bottom:0}.lc-chat__meta .lc-chat__time{margin-top:0}.lc-chat__name{font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-text-secondary);margin-bottom:var(--spacing-1, .25rem)}.lc-chat__content{white-space:pre-wrap}.lc-chat__cursor{display:none}.lc-chat__cursor--visible{display:inline-block;width:2px;height:1em;background:currentColor;margin-left:1px;vertical-align:text-bottom;animation:blink-cursor .8s step-end infinite}@keyframes blink-cursor{0%,to{opacity:1}50%{opacity:0}}.lc-chat__time{font-size:var(--font-size-xs, .75rem);color:var(--color-text-tertiary);margin-top:var(--spacing-1, .25rem);flex-shrink:0}.lc-chat__typing{display:flex;gap:.25rem;padding:.25rem 0}.lc-chat__typing span{width:.375rem;height:.375rem;border-radius:50%;background:var(--color-text-tertiary);animation:typing-bounce 1.4s ease-in-out infinite}.lc-chat__typing span:nth-child(2){animation-delay:.2s}.lc-chat__typing span:nth-child(3){animation-delay:.4s}@keyframes typing-bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-.375rem)}}.lc-chat__input-area{padding:var(--spacing-4, .75rem);border-top:1px solid var(--color-divider);background:var(--color-surface)}.lc-chat__composer{width:100%;max-width:var(--lc-chat-content-width, 46rem);margin-inline:auto;display:flex;flex-direction:column;gap:var(--spacing-2, .5rem);padding:var(--spacing-3, .75rem);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--border-radius-xl);transition:border-color .15s,box-shadow .15s}.lc-chat__composer:focus-within{border-color:var(--color-primary-500);box-shadow:var(--elevation-1)}.lc-chat__input{display:block;width:100%;box-sizing:border-box;resize:none;border:none;background:transparent;padding:var(--spacing-1, .25rem) var(--spacing-2, .5rem);font-size:var(--font-size-base, .875rem);font-family:inherit;line-height:var(--line-height-normal, 1.4);color:var(--color-text-primary);outline:none;height:auto;max-height:12rem;overflow-y:auto}.lc-chat__input:disabled{opacity:.5;cursor:not-allowed}.lc-chat__input::placeholder{color:var(--color-text-tertiary)}.lc-chat__composer-actions{display:flex;align-items:center;gap:var(--spacing-2, .5rem)}.lc-chat__send-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin-left:auto;border:none;border-radius:var(--border-radius-md);background:var(--color-primary-fill);color:var(--color-on-primary);cursor:pointer;flex-shrink:0;transition:background .15s,opacity .15s}.lc-chat__send-btn:hover:not(:disabled){background:var(--color-primary-fill-hover)}.lc-chat__send-btn:disabled{opacity:.4;cursor:not-allowed}.lc-chat__file-input{display:none}.lc-chat__attach-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;border-radius:var(--border-radius-md);background:transparent;color:var(--color-text-tertiary);cursor:pointer;flex-shrink:0;transition:background .15s,color .15s}.lc-chat__attach-btn:hover:not(:disabled){background:var(--color-surface-hover);color:var(--color-text-primary)}.lc-chat__attach-btn:disabled{opacity:.4;cursor:not-allowed}.lc-chat__pending-attachments{display:flex;flex-wrap:wrap;gap:.375rem}.lc-chat__pending-attachment{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .375rem .25rem .5rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-md, .5rem);font-size:var(--font-size-xs, .75rem);color:var(--color-text-primary);max-width:16rem}.lc-chat__pending-thumb{width:1.75rem;height:1.75rem;object-fit:cover;border-radius:.25rem;flex-shrink:0}.lc-chat__pending-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:9rem}.lc-chat__pending-size{color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}.lc-chat__pending-remove{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;border-radius:50%;background:transparent;color:var(--color-text-tertiary);cursor:pointer;flex-shrink:0}.lc-chat__pending-remove:hover{background:var(--color-surface-hover);color:var(--color-text-primary)}.lc-chat__attachments{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.5rem}.lc-chat__attachment{display:inline-flex;align-items:center;gap:.375rem;text-decoration:none;color:inherit;font-size:var(--font-size-xs, .75rem)}.lc-chat__attachment--file{padding:.25rem .5rem;background:color-mix(in srgb,currentColor 8%,transparent);border-radius:var(--border-radius-md, .375rem);max-width:16rem}.lc-chat__attachment--file:hover{background:color-mix(in srgb,currentColor 16%,transparent)}.lc-chat__attachment--image img{max-width:12rem;max-height:8rem;border-radius:var(--border-radius-md, .375rem);object-fit:cover;display:block}.lc-chat__attachment-icon{flex-shrink:0}.lc-chat__attachment-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-chat__attachment-size{opacity:.7;font-variant-numeric:tabular-nums}\n"] }]
+            args: [{ selector: 'lc-chat', standalone: true, imports: [NgTemplateOutlet, MarkdownComponent, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"lc-chat\"\n  [class.lc-chat--borderless]=\"!bordered()\"\n  [class.lc-chat--width-narrow]=\"contentWidth() === 'narrow'\"\n  [class.lc-chat--width-full]=\"contentWidth() === 'full'\"\n>\n  @if (showHeader()) {\n    <div class=\"lc-chat__header\">\n      <span class=\"lc-chat__title\">{{ title() }}</span>\n      @if (isStreaming()) {\n        <span class=\"lc-chat__streaming-badge\">Streaming\u2026</span>\n      }\n    </div>\n  }\n\n  <div\n    class=\"lc-chat__messages\"\n    [class.lc-chat__messages--anchor-bottom]=\"messageAnchor() === 'bottom'\"\n    #scrollContainer\n  >\n    <div class=\"lc-chat__thread\">\n      @for (msg of formattedMessages(); track msg.id) {\n        <div\n          class=\"lc-chat__message\"\n          [class.lc-chat__message--user]=\"msg.role === 'user'\"\n          [class.lc-chat__message--agent]=\"msg.role === 'agent'\"\n          [class.lc-chat__message--system]=\"msg.role === 'system'\"\n          [class.lc-chat__message--streaming]=\"msg.streaming\"\n          [attr.role]=\"msg.status === 'error' ? 'alert' : null\"\n          [attr.aria-live]=\"statusAriaLive(msg.status)\"\n        >\n          @if (msg.role !== 'user' && (showAvatars() || isSemanticStatus(msg.status))) {\n            <div class=\"lc-chat__marker\">\n              @if (isSemanticStatus(msg.status)) {\n                <span class=\"lc-chat__status-icon\">\n                  <lc-icon [name]=\"statusIcon(msg.status)\" size=\"xs\" [color]=\"statusColor(msg.status)\" [decorative]=\"true\" />\n                </span>\n              } @else if (msg.avatar) {\n                <img [src]=\"msg.avatar\" [alt]=\"msg.name || msg.role\" class=\"lc-chat__avatar-img\" />\n              } @else {\n                <span\n                  class=\"lc-chat__dot\"\n                  [class.lc-chat__dot--agent]=\"msg.role === 'agent'\"\n                  [class.lc-chat__dot--system]=\"msg.role === 'system'\"\n                ></span>\n              }\n            </div>\n          }\n\n          <div class=\"lc-chat__bubble\" [class.lc-chat__bubble--streaming]=\"msg.streaming\">\n            @if (msg.role === 'user') {\n              <div class=\"lc-chat__meta\">\n                <span class=\"lc-chat__name\">{{ msg.name || 'Du' }}</span>\n                @if (showTimestamps() && msg.timestamp) {\n                  <span class=\"lc-chat__time\">{{ formatTime(msg.timestamp) }}</span>\n                }\n              </div>\n            } @else if (msg.name) {\n              <div class=\"lc-chat__name\">{{ msg.name }}</div>\n            }\n            <div class=\"lc-chat__content\">\n              @if (isSemanticStatus(msg.status)) {\n                <span class=\"lc-chat__sr-only\">{{ statusLabel(msg.status) }} </span>\n              }\n              @if (messageTemplate) {\n                <ng-container *ngTemplateOutlet=\"messageTemplate; context: { $implicit: msg }\" />\n              } @else if (shouldRenderMarkdown(msg.role)) {\n                <lc-markdown [content]=\"msg.content\" variant=\"chat\" />\n              } @else {\n                {{ msg.content }}\n              }\n              <span class=\"lc-chat__cursor\" [class.lc-chat__cursor--visible]=\"msg.streaming\"></span>\n            </div>\n            @if (msg.attachments?.length) {\n              <div class=\"lc-chat__attachments\">\n                @for (att of msg.attachments; track att.id) {\n                  @if (isImage(att) && att.url) {\n                    <a class=\"lc-chat__attachment lc-chat__attachment--image\" [href]=\"att.url\" target=\"_blank\" rel=\"noopener\">\n                      <img [src]=\"att.url\" [alt]=\"att.name\" />\n                    </a>\n                  } @else {\n                    <a\n                      class=\"lc-chat__attachment lc-chat__attachment--file\"\n                      [href]=\"att.url || null\"\n                      [attr.download]=\"att.url ? att.name : null\"\n                      target=\"_blank\"\n                      rel=\"noopener\"\n                    >\n                      <svg class=\"lc-chat__attachment-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n                        <path d=\"M6 2.5h6L16 6.5v10A1.5 1.5 0 0 1 14.5 18h-9A1.5 1.5 0 0 1 4 16.5v-12A1.5 1.5 0 0 1 5.5 3H6V2.5Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                        <path d=\"M12 2.5V6.5H16\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                      </svg>\n                      <span class=\"lc-chat__attachment-name\">{{ att.name }}</span>\n                      @if (att.size) {\n                        <span class=\"lc-chat__attachment-size\">{{ formatBytes(att.size) }}</span>\n                      }\n                    </a>\n                  }\n                }\n              </div>\n            }\n            @if (showTimestamps() && msg.timestamp && msg.role !== 'user') {\n              <div class=\"lc-chat__time\">{{ formatTime(msg.timestamp) }}</div>\n            }\n          </div>\n        </div>\n      }\n\n      @if (isStreaming() && !(formattedMessages().length && formattedMessages()[formattedMessages().length - 1].streaming)) {\n        <div class=\"lc-chat__message lc-chat__message--agent\">\n          @if (showAvatars()) {\n            <div class=\"lc-chat__marker\">\n              <span class=\"lc-chat__dot lc-chat__dot--agent\"></span>\n            </div>\n          }\n          <div class=\"lc-chat__bubble\">\n            <div class=\"lc-chat__typing\">\n              <span></span><span></span><span></span>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"lc-chat__input-area\">\n    <div class=\"lc-chat__composer\">\n      @if (allowFileUpload() && pendingAttachments().length) {\n        <div class=\"lc-chat__pending-attachments\">\n          @for (att of pendingAttachments(); track att.id) {\n            <div class=\"lc-chat__pending-attachment\" [class.lc-chat__pending-attachment--image]=\"isImage(att)\">\n              @if (isImage(att) && att.url) {\n                <img class=\"lc-chat__pending-thumb\" [src]=\"att.url\" [alt]=\"att.name\" />\n              } @else {\n                <svg class=\"lc-chat__attachment-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n                  <path d=\"M6 2.5h6L16 6.5v10A1.5 1.5 0 0 1 14.5 18h-9A1.5 1.5 0 0 1 4 16.5v-12A1.5 1.5 0 0 1 5.5 3H6V2.5Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                  <path d=\"M12 2.5V6.5H16\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                </svg>\n              }\n              <span class=\"lc-chat__pending-name\">{{ att.name }}</span>\n              @if (att.size) {\n                <span class=\"lc-chat__pending-size\">{{ formatBytes(att.size) }}</span>\n              }\n              <button\n                type=\"button\"\n                class=\"lc-chat__pending-remove\"\n                (click)=\"removeAttachment(att.id)\"\n                [attr.aria-label]=\"'Entfernen: ' + att.name\"\n              >\n                <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n                  <path d=\"M3 3l6 6M9 3l-6 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n                </svg>\n              </button>\n            </div>\n          }\n        </div>\n      }\n\n      <textarea\n        #composerInput\n        class=\"lc-chat__input\"\n        [placeholder]=\"placeholder()\"\n        [value]=\"inputValue()\"\n        [disabled]=\"disabled()\"\n        (input)=\"onInput($event)\"\n        (keydown)=\"onKeydown($event)\"\n        rows=\"1\"\n      ></textarea>\n\n      <div class=\"lc-chat__composer-actions\">\n        @if (allowFileUpload()) {\n          <input\n            #fileInput\n            type=\"file\"\n            class=\"lc-chat__file-input\"\n            [accept]=\"accept() || null\"\n            [multiple]=\"multiple()\"\n            (change)=\"onFilesSelected($event)\"\n          />\n          <button\n            type=\"button\"\n            class=\"lc-chat__attach-btn\"\n            [disabled]=\"disabled()\"\n            (click)=\"openFilePicker()\"\n            aria-label=\"Datei anh\u00E4ngen\"\n          >\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n              <path d=\"M14.5 9.5l-5 5a3 3 0 0 1-4.243-4.243l6.364-6.364a2 2 0 0 1 2.829 2.829l-6.364 6.364a1 1 0 1 1-1.415-1.415L11.5 6.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </button>\n        }\n        <button\n          class=\"lc-chat__send-btn\"\n          [disabled]=\"(!inputValue().trim() && !pendingAttachments().length) || disabled()\"\n          (click)=\"send()\"\n          aria-label=\"Send\"\n        >\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n            <path d=\"M3 10l7-7m0 0l7 7m-7-7v14\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" transform=\"rotate(90 10 10)\"/>\n          </svg>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".lc-chat{--lc-chat-content-width: 46rem;display:flex;flex-direction:column;height:100%;min-height:20rem;border:1px solid var(--color-border);border-radius:var(--border-radius-lg);overflow:hidden;background-color:var(--color-surface);color:var(--color-text-primary);font-family:var(--font-family-sans, sans-serif)}.lc-chat--borderless{border:none;border-radius:0}.lc-chat--width-full{--lc-chat-content-width: 100%}.lc-chat__header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-3) var(--spacing-4);border-bottom:1px solid var(--color-divider);background:var(--color-surface)}.lc-chat__title{font-size:var(--font-size-sm, .875rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-text-primary)}.lc-chat__streaming-badge{font-size:var(--font-size-xs, .6875rem);padding:.125rem .5rem;background:color-mix(in srgb,var(--color-primary-500) 15%,transparent);color:var(--color-primary-500);border-radius:var(--border-radius-full, 1rem);font-weight:var(--font-weight-medium, 500);animation:pulse-badge 1.5s infinite}@keyframes pulse-badge{0%,to{opacity:1}50%{opacity:.6}}.lc-chat__messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;padding-block:var(--spacing-6, 1.5rem);padding-inline:var(--spacing-4, 1rem)}.lc-chat__thread{position:relative;width:100%;max-width:var(--lc-chat-content-width, 46rem);margin-inline:auto;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:var(--spacing-5, 1.25rem)}.lc-chat__messages--anchor-bottom .lc-chat__thread>.lc-chat__message:first-child{margin-top:auto}.lc-chat__message{position:relative;display:flex;align-items:stretch;gap:var(--spacing-3, .75rem);align-self:stretch;max-width:100%}.lc-chat__marker{position:relative;z-index:1;flex-shrink:0;width:.875rem;display:flex;flex-direction:column;align-items:center}.lc-chat__marker:before{content:\"\";position:absolute;left:50%;top:.55rem;bottom:calc(-1 * var(--spacing-5, 1.25rem));width:1.5px;transform:translate(-50%);background:var(--color-divider);z-index:-1}.lc-chat__message:last-child .lc-chat__marker:before{display:none}.lc-chat__dot{position:relative;z-index:1;width:.625rem;height:.625rem;margin-top:.25rem;border-radius:50%;background:var(--color-text-tertiary);box-shadow:0 0 0 3px var(--color-surface)}.lc-chat__dot--agent{background:var(--color-primary-500)}.lc-chat__dot--system{background:var(--color-text-tertiary);opacity:.6}.lc-chat__message--streaming .lc-chat__dot--agent{animation:dot-pulse 1.4s ease-out infinite}@keyframes dot-pulse{0%{box-shadow:0 0 0 3px var(--color-surface),0 0 0 3px color-mix(in srgb,var(--color-primary-500) 45%,transparent)}70%,to{box-shadow:0 0 0 3px var(--color-surface),0 0 0 9px color-mix(in srgb,var(--color-primary-500) 0%,transparent)}}.lc-chat__avatar-img{width:1.5rem;height:1.5rem;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--color-surface)}.lc-chat__status-icon{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;margin-top:.0625rem;border-radius:50%;background:var(--color-surface);box-shadow:0 0 0 2px var(--color-surface)}.lc-chat__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.lc-chat__bubble{flex:1;min-width:0;font-size:var(--font-size-base, .9375rem);line-height:var(--line-height-relaxed, 1.6);word-break:break-word;color:var(--color-text-primary)}.lc-chat__message--user .lc-chat__bubble{position:relative;z-index:1;padding:var(--spacing-3, .75rem) var(--spacing-4, 1rem);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);background:var(--color-surface-2)}.lc-chat__message--agent .lc-chat__bubble{padding:0;background:transparent}.lc-chat__message--system .lc-chat__bubble{padding:0;background:transparent;color:var(--color-text-tertiary);font-size:var(--font-size-sm, .8125rem)}.lc-chat__meta{display:flex;align-items:baseline;justify-content:space-between;gap:var(--spacing-2, .5rem);margin-bottom:var(--spacing-1, .25rem)}.lc-chat__meta .lc-chat__name{margin-bottom:0}.lc-chat__meta .lc-chat__time{margin-top:0}.lc-chat__name{font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-text-secondary);margin-bottom:var(--spacing-1, .25rem)}.lc-chat__content{white-space:pre-wrap}.lc-chat__cursor{display:none}.lc-chat__cursor--visible{display:inline-block;width:2px;height:1em;background:currentColor;margin-left:1px;vertical-align:text-bottom;animation:blink-cursor .8s step-end infinite}@keyframes blink-cursor{0%,to{opacity:1}50%{opacity:0}}.lc-chat__time{font-size:var(--font-size-xs, .75rem);color:var(--color-text-tertiary);margin-top:var(--spacing-1, .25rem);flex-shrink:0}.lc-chat__typing{display:flex;gap:.25rem;padding:.25rem 0}.lc-chat__typing span{width:.375rem;height:.375rem;border-radius:50%;background:var(--color-text-tertiary);animation:typing-bounce 1.4s ease-in-out infinite}.lc-chat__typing span:nth-child(2){animation-delay:.2s}.lc-chat__typing span:nth-child(3){animation-delay:.4s}@keyframes typing-bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-.375rem)}}.lc-chat__input-area{padding:var(--spacing-4, .75rem);border-top:1px solid var(--color-divider);background:var(--color-surface)}.lc-chat__composer{width:100%;max-width:var(--lc-chat-content-width, 46rem);margin-inline:auto;display:flex;flex-direction:column;gap:var(--spacing-2, .5rem);padding:var(--spacing-3, .75rem);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--border-radius-xl);transition:border-color .15s,box-shadow .15s}.lc-chat__composer:focus-within{border-color:var(--color-primary-500);box-shadow:var(--elevation-1)}.lc-chat__input{display:block;width:100%;box-sizing:border-box;resize:none;border:none;background:transparent;padding:var(--spacing-1, .25rem) var(--spacing-2, .5rem);font-size:var(--font-size-base, .875rem);font-family:inherit;line-height:var(--line-height-normal, 1.4);color:var(--color-text-primary);outline:none;height:auto;max-height:12rem;overflow-y:auto}.lc-chat__input:disabled{opacity:.5;cursor:not-allowed}.lc-chat__input::placeholder{color:var(--color-text-tertiary)}.lc-chat__composer-actions{display:flex;align-items:center;gap:var(--spacing-2, .5rem)}.lc-chat__send-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin-left:auto;border:none;border-radius:var(--border-radius-md);background:var(--color-primary-fill);color:var(--color-on-primary);cursor:pointer;flex-shrink:0;transition:background .15s,opacity .15s}.lc-chat__send-btn:hover:not(:disabled){background:var(--color-primary-fill-hover)}.lc-chat__send-btn:disabled{opacity:.4;cursor:not-allowed}.lc-chat__file-input{display:none}.lc-chat__attach-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;border-radius:var(--border-radius-md);background:transparent;color:var(--color-text-tertiary);cursor:pointer;flex-shrink:0;transition:background .15s,color .15s}.lc-chat__attach-btn:hover:not(:disabled){background:var(--color-surface-hover);color:var(--color-text-primary)}.lc-chat__attach-btn:disabled{opacity:.4;cursor:not-allowed}.lc-chat__pending-attachments{display:flex;flex-wrap:wrap;gap:.375rem}.lc-chat__pending-attachment{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .375rem .25rem .5rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-md, .5rem);font-size:var(--font-size-xs, .75rem);color:var(--color-text-primary);max-width:16rem}.lc-chat__pending-thumb{width:1.75rem;height:1.75rem;object-fit:cover;border-radius:.25rem;flex-shrink:0}.lc-chat__pending-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:9rem}.lc-chat__pending-size{color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}.lc-chat__pending-remove{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;border-radius:50%;background:transparent;color:var(--color-text-tertiary);cursor:pointer;flex-shrink:0}.lc-chat__pending-remove:hover{background:var(--color-surface-hover);color:var(--color-text-primary)}.lc-chat__attachments{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.5rem}.lc-chat__attachment{display:inline-flex;align-items:center;gap:.375rem;text-decoration:none;color:inherit;font-size:var(--font-size-xs, .75rem)}.lc-chat__attachment--file{padding:.25rem .5rem;background:color-mix(in srgb,currentColor 8%,transparent);border-radius:var(--border-radius-md, .375rem);max-width:16rem}.lc-chat__attachment--file:hover{background:color-mix(in srgb,currentColor 16%,transparent)}.lc-chat__attachment--image img{max-width:12rem;max-height:8rem;border-radius:var(--border-radius-md, .375rem);object-fit:cover;display:block}.lc-chat__attachment-icon{flex-shrink:0}.lc-chat__attachment-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-chat__attachment-size{opacity:.7;font-variant-numeric:tabular-nums}\n"] }]
         }], propDecorators: { messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], isStreaming: [{ type: i0.Input, args: [{ isSignal: true, alias: "isStreaming", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], messageAnchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageAnchor", required: false }] }], contentWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentWidth", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showAvatars: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAvatars", required: false }] }], showTimestamps: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTimestamps", required: false }] }], renderMarkdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderMarkdown", required: false }] }], allowFileUpload: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowFileUpload", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], messageSend: [{ type: i0.Output, args: ["messageSend"] }], fileAttach: [{ type: i0.Output, args: ["fileAttach"] }], messageTemplate: [{
                 type: ContentChild,
                 args: ['messageTemplate']