npm - @lifecorner/angular-ui-kit - Versions diffs - 3.25.1 → 3.27.0 - Mend

@lifecorner/angular-ui-kit 3.25.1 → 3.27.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (75) hide show

package/fesm2022/lifecorner-angular-ui-kit-kanban-board.mjs CHANGED Viewed

@@ -222,7 +222,7 @@ var KanbanBoardComponent = class KanbanBoardComponent {
 		},
 		ngImport: i0,
 		template: "<div class=\"lc-kanban\">\n  @for (col of displayColumns(); track col.id) {\n    <div\n      class=\"lc-kanban__column\"\n      [class.lc-kanban__column--drop-target]=\"dropTargetColumn() === col.id\"\n      [class.lc-kanban__column--over-limit]=\"showWipLimit() && isOverLimit(col)\"\n      (dragover)=\"onDragOverColumn($event, col.id)\"\n      (dragleave)=\"onDragLeave()\"\n      (drop)=\"onDrop($event, col.id)\"\n    >\n      <div class=\"lc-kanban__column-header\">\n        @if (col.color) {\n          <span class=\"lc-kanban__column-dot\" [style.background]=\"col.color\"></span>\n        }\n        <span class=\"lc-kanban__column-title\">{{ col.title }}</span>\n        @if (showCardCount()) {\n          <span class=\"lc-kanban__column-count\">{{ col.cards.length }}</span>\n        }\n        @if (showWipLimit() && col.limit) {\n          <span class=\"lc-kanban__column-limit\" [class.lc-kanban__column-limit--over]=\"isOverLimit(col)\">\n            / {{ col.limit }}\n          </span>\n        }\n      </div>\n\n      <div class=\"lc-kanban__cards\">\n        @for (card of col.cards; track card.id) {\n          <div\n            class=\"lc-kanban__card\"\n            role=\"button\"\n            tabindex=\"0\"\n            [attr.data-card-id]=\"card.id\"\n            [attr.aria-keyshortcuts]=\"readonly() ? null : 'Alt+ArrowLeft Alt+ArrowRight Alt+ArrowUp Alt+ArrowDown'\"\n            [class.lc-kanban__card--dragging]=\"draggedCard()?.card?.id === card.id\"\n            [class.lc-kanban__card--readonly]=\"readonly()\"\n            [attr.draggable]=\"!readonly()\"\n            (dragstart)=\"onDragStart($event, card, col.id)\"\n            (dragover)=\"onDragOver($event, col.id, $index)\"\n            (drop)=\"onDrop($event, col.id, $index)\"\n            (dragend)=\"onDragEnd()\"\n            (click)=\"onCardClick(card, col.id)\"\n            (keydown)=\"onCardKeydown($event, card, col.id)\"\n          >\n            @if (card.priority) {\n              <lc-icon [name]=\"getPriorityIcon(card.priority)\" size=\"xs\" [color]=\"getPriorityColor(card.priority)\" class=\"lc-kanban__card-priority\" [ariaLabel]=\"priorityAriaLabel() + ' ' + card.priority\"></lc-icon>\n            }\n            <span class=\"lc-kanban__card-title\">{{ card.title }}</span>\n\n            @if (card.description) {\n              <p class=\"lc-kanban__card-desc\">{{ card.description }}</p>\n            }\n\n            @if (card.labels?.length || card.assignee) {\n              <div class=\"lc-kanban__card-footer\">\n                @if (card.labels?.length) {\n                  <div class=\"lc-kanban__card-labels\">\n                    @for (label of card.labels; track label.text) {\n                      <span class=\"lc-kanban__card-label\" [style.--label-color]=\"label.color || 'var(--color-primary-500)'\">{{ label.text }}</span>\n                    }\n                  </div>\n                }\n                @if (card.assignee) {\n                  <span class=\"lc-kanban__card-assignee\">{{ card.assignee }}</span>\n                }\n              </div>\n            }\n          </div>\n        }\n\n        <!-- Empty state drop zone -->\n        @if (col.cards.length === 0) {\n          <div\n            class=\"lc-kanban__empty\"\n            (dragover)=\"onDragOver($event, col.id, 0)\"\n            (drop)=\"onDrop($event, col.id, 0)\"\n          >\n            {{ emptyColumnLabel() }}\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n",
-		styles: [":host{display:block;overflow-x:auto}.lc-kanban{display:flex;gap:16px;padding:8px;min-height:200px}.lc-kanban__column{flex:0 0 280px;display:flex;flex-direction:column;background:var(--color-surface-2);border-radius:8px;padding:8px;transition:background .15s,box-shadow .15s}.lc-kanban__column--drop-target{background:var(--color-primary-50);box-shadow:inset 0 0 0 2px var(--color-primary-300)}.lc-kanban__column--over-limit{background:var(--color-error-50, #fef2f2)}.lc-kanban__column-header{display:flex;align-items:center;gap:6px;padding:4px 4px 8px;font-size:var(--typography-font-size-sm, .875rem);font-weight:600;color:var(--color-text-secondary)}.lc-kanban__column-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.lc-kanban__column-title{flex:1}.lc-kanban__column-count{font-size:.6875rem;background:var(--color-surface-hover);color:var(--color-text-secondary);padding:1px 6px;border-radius:10px;font-weight:500}.lc-kanban__column-limit{font-size:.6875rem;color:var(--color-text-tertiary)}.lc-kanban__column-limit--over{color:var(--color-on-error-subtle);font-weight:700}.lc-kanban__cards{flex:1;display:flex;flex-direction:column;gap:8px;min-height:40px}.lc-kanban__card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:6px;padding:10px;cursor:grab;transition:box-shadow .15s,opacity .15s}.lc-kanban__card:hover{box-shadow:var(--elevation-1)}.lc-kanban__card:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary-500) 20%,transparent);border-color:var(--color-primary-500)}.lc-kanban__card--dragging{opacity:.4}.lc-kanban__card:active{cursor:grabbing}.lc-kanban__card--readonly,.lc-kanban__card--readonly:active{cursor:pointer}.lc-kanban__card-priority{flex-shrink:0;margin-right:4px}.lc-kanban__card-title{font-size:var(--typography-font-size-sm, .875rem);font-weight:500;color:var(--color-text-primary)}.lc-kanban__card-desc{margin:4px 0 0;font-size:.75rem;color:var(--color-text-tertiary);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.lc-kanban__card-footer{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:8px}.lc-kanban__card-labels{display:flex;flex-wrap:wrap;gap:4px}.lc-kanban__card-label{display:inline-block;padding:1px 8px;border-radius:var(--border-radius-full);font-size:.625rem;font-weight:600;--label-color: var(--color-primary-500);background:color-mix(in srgb,var(--label-color) 20%,transparent);border:1px solid color-mix(in srgb,var(--label-color) 45%,transparent);color:var(--color-text-primary)}.lc-kanban__card-assignee{font-size:.6875rem;color:var(--color-text-tertiary);font-weight:500}.lc-kanban__empty{display:flex;align-items:center;justify-content:center;min-height:60px;border:2px dashed var(--color-border);border-radius:6px;font-size:.75rem;color:var(--color-text-tertiary)}\n"],
+		styles: [":host{display:block;overflow-x:auto}.lc-kanban{display:flex;gap:16px;padding:8px;min-height:200px}.lc-kanban__column{flex:0 0 280px;display:flex;flex-direction:column;background:var(--color-surface-2);border-radius:8px;padding:8px;transition:background .15s,box-shadow .15s}.lc-kanban__column--drop-target{background:var(--color-primary-50);box-shadow:inset 0 0 0 2px var(--color-primary-300)}.lc-kanban__column--over-limit{background:var(--color-error-50, #fef2f2)}.lc-kanban__column-header{display:flex;align-items:center;gap:6px;padding:4px 4px 8px;font-size:var(--typography-font-size-sm, .875rem);font-weight:600;color:var(--color-text-secondary)}.lc-kanban__column-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.lc-kanban__column-title{flex:1}.lc-kanban__column-count{font-size:.6875rem;background:var(--color-surface-hover);color:var(--color-text-secondary);padding:1px 6px;border-radius:10px;font-weight:500}.lc-kanban__column-limit{font-size:.6875rem;color:var(--color-text-tertiary)}.lc-kanban__column-limit--over{color:var(--color-on-error-subtle);font-weight:700}.lc-kanban__cards{flex:1;display:flex;flex-direction:column;gap:8px;min-height:40px}.lc-kanban__card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:6px;padding:10px;cursor:grab;transition:box-shadow .15s,opacity .15s}.lc-kanban__card:hover{box-shadow:var(--elevation-1)}.lc-kanban__card:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:-2px;border-color:var(--color-primary-500)}.lc-kanban__card--dragging{opacity:.4}.lc-kanban__card:active{cursor:grabbing}.lc-kanban__card--readonly,.lc-kanban__card--readonly:active{cursor:pointer}.lc-kanban__card-priority{flex-shrink:0;margin-right:4px}.lc-kanban__card-title{font-size:var(--typography-font-size-sm, .875rem);font-weight:500;color:var(--color-text-primary)}.lc-kanban__card-desc{margin:4px 0 0;font-size:.75rem;color:var(--color-text-tertiary);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.lc-kanban__card-footer{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:8px}.lc-kanban__card-labels{display:flex;flex-wrap:wrap;gap:4px}.lc-kanban__card-label{display:inline-block;padding:1px 8px;border-radius:var(--border-radius-full);font-size:.625rem;font-weight:600;--label-color: var(--color-primary-500);background:color-mix(in srgb,var(--label-color) 20%,transparent);border:1px solid color-mix(in srgb,var(--label-color) 45%,transparent);color:var(--color-text-primary)}.lc-kanban__card-assignee{font-size:.6875rem;color:var(--color-text-tertiary);font-weight:500}.lc-kanban__empty{display:flex;align-items:center;justify-content:center;min-height:60px;border:2px dashed var(--color-border);border-radius:6px;font-size:.75rem;color:var(--color-text-tertiary)}@media(forced-colors:active){.lc-kanban__card:focus-visible{outline-color:Highlight}}\n"],
 		dependencies: [{
 			kind: "component",
 			type: IconComponent,
@@ -255,7 +255,7 @@ i0.ɵɵngDeclareClassMetadata({
 			viewProviders: [ɵprovideKitIcons([ICON_EXCLAMATION_CIRCLE, ICON_ARROW_DOWN])],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			template: "<div class=\"lc-kanban\">\n  @for (col of displayColumns(); track col.id) {\n    <div\n      class=\"lc-kanban__column\"\n      [class.lc-kanban__column--drop-target]=\"dropTargetColumn() === col.id\"\n      [class.lc-kanban__column--over-limit]=\"showWipLimit() && isOverLimit(col)\"\n      (dragover)=\"onDragOverColumn($event, col.id)\"\n      (dragleave)=\"onDragLeave()\"\n      (drop)=\"onDrop($event, col.id)\"\n    >\n      <div class=\"lc-kanban__column-header\">\n        @if (col.color) {\n          <span class=\"lc-kanban__column-dot\" [style.background]=\"col.color\"></span>\n        }\n        <span class=\"lc-kanban__column-title\">{{ col.title }}</span>\n        @if (showCardCount()) {\n          <span class=\"lc-kanban__column-count\">{{ col.cards.length }}</span>\n        }\n        @if (showWipLimit() && col.limit) {\n          <span class=\"lc-kanban__column-limit\" [class.lc-kanban__column-limit--over]=\"isOverLimit(col)\">\n            / {{ col.limit }}\n          </span>\n        }\n      </div>\n\n      <div class=\"lc-kanban__cards\">\n        @for (card of col.cards; track card.id) {\n          <div\n            class=\"lc-kanban__card\"\n            role=\"button\"\n            tabindex=\"0\"\n            [attr.data-card-id]=\"card.id\"\n            [attr.aria-keyshortcuts]=\"readonly() ? null : 'Alt+ArrowLeft Alt+ArrowRight Alt+ArrowUp Alt+ArrowDown'\"\n            [class.lc-kanban__card--dragging]=\"draggedCard()?.card?.id === card.id\"\n            [class.lc-kanban__card--readonly]=\"readonly()\"\n            [attr.draggable]=\"!readonly()\"\n            (dragstart)=\"onDragStart($event, card, col.id)\"\n            (dragover)=\"onDragOver($event, col.id, $index)\"\n            (drop)=\"onDrop($event, col.id, $index)\"\n            (dragend)=\"onDragEnd()\"\n            (click)=\"onCardClick(card, col.id)\"\n            (keydown)=\"onCardKeydown($event, card, col.id)\"\n          >\n            @if (card.priority) {\n              <lc-icon [name]=\"getPriorityIcon(card.priority)\" size=\"xs\" [color]=\"getPriorityColor(card.priority)\" class=\"lc-kanban__card-priority\" [ariaLabel]=\"priorityAriaLabel() + ' ' + card.priority\"></lc-icon>\n            }\n            <span class=\"lc-kanban__card-title\">{{ card.title }}</span>\n\n            @if (card.description) {\n              <p class=\"lc-kanban__card-desc\">{{ card.description }}</p>\n            }\n\n            @if (card.labels?.length || card.assignee) {\n              <div class=\"lc-kanban__card-footer\">\n                @if (card.labels?.length) {\n                  <div class=\"lc-kanban__card-labels\">\n                    @for (label of card.labels; track label.text) {\n                      <span class=\"lc-kanban__card-label\" [style.--label-color]=\"label.color || 'var(--color-primary-500)'\">{{ label.text }}</span>\n                    }\n                  </div>\n                }\n                @if (card.assignee) {\n                  <span class=\"lc-kanban__card-assignee\">{{ card.assignee }}</span>\n                }\n              </div>\n            }\n          </div>\n        }\n\n        <!-- Empty state drop zone -->\n        @if (col.cards.length === 0) {\n          <div\n            class=\"lc-kanban__empty\"\n            (dragover)=\"onDragOver($event, col.id, 0)\"\n            (drop)=\"onDrop($event, col.id, 0)\"\n          >\n            {{ emptyColumnLabel() }}\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n",
-			styles: [":host{display:block;overflow-x:auto}.lc-kanban{display:flex;gap:16px;padding:8px;min-height:200px}.lc-kanban__column{flex:0 0 280px;display:flex;flex-direction:column;background:var(--color-surface-2);border-radius:8px;padding:8px;transition:background .15s,box-shadow .15s}.lc-kanban__column--drop-target{background:var(--color-primary-50);box-shadow:inset 0 0 0 2px var(--color-primary-300)}.lc-kanban__column--over-limit{background:var(--color-error-50, #fef2f2)}.lc-kanban__column-header{display:flex;align-items:center;gap:6px;padding:4px 4px 8px;font-size:var(--typography-font-size-sm, .875rem);font-weight:600;color:var(--color-text-secondary)}.lc-kanban__column-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.lc-kanban__column-title{flex:1}.lc-kanban__column-count{font-size:.6875rem;background:var(--color-surface-hover);color:var(--color-text-secondary);padding:1px 6px;border-radius:10px;font-weight:500}.lc-kanban__column-limit{font-size:.6875rem;color:var(--color-text-tertiary)}.lc-kanban__column-limit--over{color:var(--color-on-error-subtle);font-weight:700}.lc-kanban__cards{flex:1;display:flex;flex-direction:column;gap:8px;min-height:40px}.lc-kanban__card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:6px;padding:10px;cursor:grab;transition:box-shadow .15s,opacity .15s}.lc-kanban__card:hover{box-shadow:var(--elevation-1)}.lc-kanban__card:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary-500) 20%,transparent);border-color:var(--color-primary-500)}.lc-kanban__card--dragging{opacity:.4}.lc-kanban__card:active{cursor:grabbing}.lc-kanban__card--readonly,.lc-kanban__card--readonly:active{cursor:pointer}.lc-kanban__card-priority{flex-shrink:0;margin-right:4px}.lc-kanban__card-title{font-size:var(--typography-font-size-sm, .875rem);font-weight:500;color:var(--color-text-primary)}.lc-kanban__card-desc{margin:4px 0 0;font-size:.75rem;color:var(--color-text-tertiary);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.lc-kanban__card-footer{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:8px}.lc-kanban__card-labels{display:flex;flex-wrap:wrap;gap:4px}.lc-kanban__card-label{display:inline-block;padding:1px 8px;border-radius:var(--border-radius-full);font-size:.625rem;font-weight:600;--label-color: var(--color-primary-500);background:color-mix(in srgb,var(--label-color) 20%,transparent);border:1px solid color-mix(in srgb,var(--label-color) 45%,transparent);color:var(--color-text-primary)}.lc-kanban__card-assignee{font-size:.6875rem;color:var(--color-text-tertiary);font-weight:500}.lc-kanban__empty{display:flex;align-items:center;justify-content:center;min-height:60px;border:2px dashed var(--color-border);border-radius:6px;font-size:.75rem;color:var(--color-text-tertiary)}\n"]
+			styles: [":host{display:block;overflow-x:auto}.lc-kanban{display:flex;gap:16px;padding:8px;min-height:200px}.lc-kanban__column{flex:0 0 280px;display:flex;flex-direction:column;background:var(--color-surface-2);border-radius:8px;padding:8px;transition:background .15s,box-shadow .15s}.lc-kanban__column--drop-target{background:var(--color-primary-50);box-shadow:inset 0 0 0 2px var(--color-primary-300)}.lc-kanban__column--over-limit{background:var(--color-error-50, #fef2f2)}.lc-kanban__column-header{display:flex;align-items:center;gap:6px;padding:4px 4px 8px;font-size:var(--typography-font-size-sm, .875rem);font-weight:600;color:var(--color-text-secondary)}.lc-kanban__column-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.lc-kanban__column-title{flex:1}.lc-kanban__column-count{font-size:.6875rem;background:var(--color-surface-hover);color:var(--color-text-secondary);padding:1px 6px;border-radius:10px;font-weight:500}.lc-kanban__column-limit{font-size:.6875rem;color:var(--color-text-tertiary)}.lc-kanban__column-limit--over{color:var(--color-on-error-subtle);font-weight:700}.lc-kanban__cards{flex:1;display:flex;flex-direction:column;gap:8px;min-height:40px}.lc-kanban__card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:6px;padding:10px;cursor:grab;transition:box-shadow .15s,opacity .15s}.lc-kanban__card:hover{box-shadow:var(--elevation-1)}.lc-kanban__card:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:-2px;border-color:var(--color-primary-500)}.lc-kanban__card--dragging{opacity:.4}.lc-kanban__card:active{cursor:grabbing}.lc-kanban__card--readonly,.lc-kanban__card--readonly:active{cursor:pointer}.lc-kanban__card-priority{flex-shrink:0;margin-right:4px}.lc-kanban__card-title{font-size:var(--typography-font-size-sm, .875rem);font-weight:500;color:var(--color-text-primary)}.lc-kanban__card-desc{margin:4px 0 0;font-size:.75rem;color:var(--color-text-tertiary);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.lc-kanban__card-footer{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:8px}.lc-kanban__card-labels{display:flex;flex-wrap:wrap;gap:4px}.lc-kanban__card-label{display:inline-block;padding:1px 8px;border-radius:var(--border-radius-full);font-size:.625rem;font-weight:600;--label-color: var(--color-primary-500);background:color-mix(in srgb,var(--label-color) 20%,transparent);border:1px solid color-mix(in srgb,var(--label-color) 45%,transparent);color:var(--color-text-primary)}.lc-kanban__card-assignee{font-size:.6875rem;color:var(--color-text-tertiary);font-weight:500}.lc-kanban__empty{display:flex;align-items:center;justify-content:center;min-height:60px;border:2px dashed var(--color-border);border-radius:6px;font-size:.75rem;color:var(--color-text-tertiary)}@media(forced-colors:active){.lc-kanban__card:focus-visible{outline-color:Highlight}}\n"]
 		}]
 	}],
 	propDecorators: {

package/fesm2022/lifecorner-angular-ui-kit-kanban-board.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"lifecorner-angular-ui-kit-kanban-board.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/kanban-board/kanban-board.component.ts","../../../../libs/angular-ui-kit/src/lib/kanban-board/kanban-board.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n Injector,\n afterNextRender,\n inject,\n input,\n linkedSignal,\n signal,\n output,\n} from '@angular/core';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_ARROW_DOWN, ICON_EXCLAMATION_CIRCLE } from '@lifecorner/angular-ui-kit/icons';\n\nexport interface KanbanCard {\n id: string;\n title: string;\n description?: string;\n labels?: KanbanLabel[];\n assignee?: string;\n priority?: 'low' \| 'medium' \| 'high' \| 'critical';\n}\n\nexport interface KanbanLabel {\n text: string;\n color?: string;\n}\n\nexport interface KanbanColumn {\n id: string;\n title: string;\n cards: KanbanCard[];\n color?: string;\n limit?: number;\n}\n\nexport interface KanbanMoveEvent {\n cardId: string;\n fromColumnId: string;\n toColumnId: string;\n toIndex: number;\n}\n\n@Component({\n selector: 'lc-kanban-board',\n standalone: true,\n imports: [IconComponent],\n viewProviders: [ɵprovideKitIcons([ICON_EXCLAMATION_CIRCLE, ICON_ARROW_DOWN])],\n templateUrl: './kanban-board.component.html',\n styleUrls: ['./kanban-board.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class KanbanBoardComponent {\n readonly columns = input.required<KanbanColumn[]>();\n readonly showCardCount = input(true);\n readonly showWipLimit = input(true);\n readonly readonly = input(false);\n\n /** Placeholder text of an empty column. /\n readonly emptyColumnLabel = input('Drop here');\n\n /* Accessible name prefix of a card's priority marker, followed by the priority. /\n readonly priorityAriaLabel = input('Priority:');\n\n readonly cardMoved = output<KanbanMoveEvent>();\n readonly cardClick = output<{ card: KanbanCard; columnId: string }>();\n\n private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n private readonly injector = inject(Injector);\n\n /\n Local working copy of the columns. Re-seeded from the `columns` input\n * whenever the parent provides a new value, while drops / keyboard moves\n * update it locally without waiting for the parent to echo the change back.\n /\n protected internalColumns = linkedSignal<KanbanColumn[]>(() => this.columns());\n protected draggedCard = signal<{ card: KanbanCard; columnId: string } \| null>(null);\n protected dropTargetColumn = signal<string \| null>(null);\n protected dropTargetIndex = signal<number>(-1);\n\n protected readonly displayColumns = this.internalColumns.asReadonly();\n\n protected isOverLimit(col: KanbanColumn): boolean {\n return !!col.limit && col.cards.length > col.limit;\n }\n\n protected getPriorityIcon(priority?: string): string {\n switch (priority) {\n case 'critical': return 'exclamation-circle';\n case 'high': return 'arrow-up';\n case 'medium': return 'minus';\n case 'low': return 'arrow-down';\n default: return '';\n }\n }\n\n protected getPriorityColor(priority?: string): string {\n switch (priority) {\n // Status inks: 3:1 on the card surface in both themes.\n case 'critical': return 'var(--color-on-error-subtle)';\n case 'high': return 'var(--color-on-warning-subtle)';\n case 'medium': return 'var(--color-on-info-subtle)';\n case 'low': return 'var(--color-on-success-subtle)';\n default: return '';\n }\n }\n\n protected onDragStart(event: DragEvent, card: KanbanCard, columnId: string): void {\n if (this.readonly()) { event.preventDefault(); return; }\n this.draggedCard.set({ card, columnId });\n if (event.dataTransfer) {\n event.dataTransfer.effectAllowed = 'move';\n event.dataTransfer.setData('text/plain', card.id);\n }\n }\n\n protected onDragOver(event: DragEvent, columnId: string, index: number): void {\n event.preventDefault();\n if (event.dataTransfer) event.dataTransfer.dropEffect = 'move';\n this.dropTargetColumn.set(columnId);\n this.dropTargetIndex.set(index);\n }\n\n protected onDragOverColumn(event: DragEvent, columnId: string): void {\n event.preventDefault();\n if (event.dataTransfer) event.dataTransfer.dropEffect = 'move';\n this.dropTargetColumn.set(columnId);\n }\n\n protected onDragLeave(): void {\n this.dropTargetColumn.set(null);\n this.dropTargetIndex.set(-1);\n }\n\n protected onDrop(event: DragEvent, toColumnId: string, toIndex?: number): void {\n event.preventDefault();\n const dragged = this.draggedCard();\n if (!dragged) return;\n\n this.moveCard(dragged.card.id, dragged.columnId, toColumnId, toIndex);\n this.draggedCard.set(null);\n this.dropTargetColumn.set(null);\n this.dropTargetIndex.set(-1);\n }\n\n /\n Keyboard alternative to drag & drop: Enter / Space activate the card,\n * Alt+ArrowLeft / Alt+ArrowRight move it to the neighbouring column,\n * Alt+ArrowUp / Alt+ArrowDown reorder it within its column. Moves are\n * suppressed in readonly mode, exactly like drag & drop.\n /\n protected onCardKeydown(event: KeyboardEvent, card: KanbanCard, columnId: string): void {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n this.onCardClick(card, columnId);\n return;\n }\n if (!event.altKey \|\| this.readonly()) return;\n\n const cols = this.displayColumns();\n const colIdx = cols.findIndex(c => c.id === columnId);\n if (colIdx < 0) return;\n const cardIdx = cols[colIdx].cards.findIndex(c => c.id === card.id);\n if (cardIdx < 0) return;\n\n let toColumnId: string \| undefined;\n let toIndex: number \| undefined;\n switch (event.key) {\n case 'ArrowLeft':\n if (colIdx > 0) { toColumnId = cols[colIdx - 1].id; toIndex = cols[colIdx - 1].cards.length; }\n break;\n case 'ArrowRight':\n if (colIdx < cols.length - 1) { toColumnId = cols[colIdx + 1].id; toIndex = cols[colIdx + 1].cards.length; }\n break;\n case 'ArrowUp':\n if (cardIdx > 0) { toColumnId = columnId; toIndex = cardIdx - 1; }\n break;\n case 'ArrowDown':\n if (cardIdx < cols[colIdx].cards.length - 1) { toColumnId = columnId; toIndex = cardIdx + 1; }\n break;\n default:\n return;\n }\n event.preventDefault();\n if (toColumnId === undefined) return;\n\n this.moveCard(card.id, columnId, toColumnId, toIndex);\n // The card element is re-created inside the target column's @for block,\n // so keyboard focus has to be restored explicitly after the next render.\n afterNextRender(\n () => {\n const cards = this.host.nativeElement.querySelectorAll<HTMLElement>('.lc-kanban__card');\n Array.from(cards).find(el => el.dataset['cardId'] === card.id)?.focus();\n },\n { injector: this.injector },\n );\n }\n\n /* Moves a card between / within columns and emits `cardMoved`. */\n private moveCard(cardId: string, fromColumnId: string, toColumnId: string, toIndex?: number): void {\n const cols = this.displayColumns().map(c => ({ ...c, cards: [...c.cards] }));\n const fromCol = cols.find(c => c.id === fromColumnId);\n const toCol = cols.find(c => c.id === toColumnId);\n if (!fromCol \|\| !toCol) return;\n\n const cardIdx = fromCol.cards.findIndex(c => c.id === cardId);\n if (cardIdx < 0) return;\n\n const [card] = fromCol.cards.splice(cardIdx, 1);\n const insertIdx = toIndex ?? toCol.cards.length;\n toCol.cards.splice(insertIdx, 0, card);\n\n this.internalColumns.set(cols);\n\n this.cardMoved.emit({\n cardId: card.id,\n fromColumnId,\n toColumnId,\n toIndex: insertIdx,\n });\n }\n\n protected onDragEnd(): void {\n this.draggedCard.set(null);\n this.dropTargetColumn.set(null);\n this.dropTargetIndex.set(-1);\n }\n\n protected onCardClick(card: KanbanCard, columnId: string): void {\n this.cardClick.emit({ card, columnId });\n }\n\n}\n","<div class=\"lc-kanban\">\n @for (col of displayColumns(); track col.id) {\n <div\n class=\"lc-kanban__column\"\n [class.lc-kanban__column--drop-target]=\"dropTargetColumn() === col.id\"\n [class.lc-kanban__column--over-limit]=\"showWipLimit() && isOverLimit(col)\"\n (dragover)=\"onDragOverColumn($event, col.id)\"\n (dragleave)=\"onDragLeave()\"\n (drop)=\"onDrop($event, col.id)\"\n >\n <div class=\"lc-kanban__column-header\">\n @if (col.color) {\n <span class=\"lc-kanban__column-dot\" [style.background]=\"col.color\"></span>\n }\n <span class=\"lc-kanban__column-title\">{{ col.title }}</span>\n @if (showCardCount()) {\n <span class=\"lc-kanban__column-count\">{{ col.cards.length }}</span>\n }\n @if (showWipLimit() && col.limit) {\n <span class=\"lc-kanban__column-limit\" [class.lc-kanban__column-limit--over]=\"isOverLimit(col)\">\n / {{ col.limit }}\n </span>\n }\n </div>\n\n <div class=\"lc-kanban__cards\">\n @for (card of col.cards; track card.id) {\n <div\n class=\"lc-kanban__card\"\n role=\"button\"\n tabindex=\"0\"\n [attr.data-card-id]=\"card.id\"\n [attr.aria-keyshortcuts]=\"readonly() ? null : 'Alt+ArrowLeft Alt+ArrowRight Alt+ArrowUp Alt+ArrowDown'\"\n [class.lc-kanban__card--dragging]=\"draggedCard()?.card?.id === card.id\"\n [class.lc-kanban__card--readonly]=\"readonly()\"\n [attr.draggable]=\"!readonly()\"\n (dragstart)=\"onDragStart($event, card, col.id)\"\n (dragover)=\"onDragOver($event, col.id, $index)\"\n (drop)=\"onDrop($event, col.id, $index)\"\n (dragend)=\"onDragEnd()\"\n (click)=\"onCardClick(card, col.id)\"\n (keydown)=\"onCardKeydown($event, card, col.id)\"\n >\n @if (card.priority) {\n <lc-icon [name]=\"getPriorityIcon(card.priority)\" size=\"xs\" [color]=\"getPriorityColor(card.priority)\" class=\"lc-kanban__card-priority\" [ariaLabel]=\"priorityAriaLabel() + ' ' + card.priority\"></lc-icon>\n }\n <span class=\"lc-kanban__card-title\">{{ card.title }}</span>\n\n @if (card.description) {\n <p class=\"lc-kanban__card-desc\">{{ card.description }}</p>\n }\n\n @if (card.labels?.length \|\| card.assignee) {\n <div class=\"lc-kanban__card-footer\">\n @if (card.labels?.length) {\n <div class=\"lc-kanban__card-labels\">\n @for (label of card.labels; track label.text) {\n <span class=\"lc-kanban__card-label\" [style.--label-color]=\"label.color \|\| 'var(--color-primary-500)'\">{{ label.text }}</span>\n }\n </div>\n }\n @if (card.assignee) {\n <span class=\"lc-kanban__card-assignee\">{{ card.assignee }}</span>\n }\n </div>\n }\n </div>\n }\n\n <!-- Empty state drop zone -->\n @if (col.cards.length === 0) {\n <div\n class=\"lc-kanban__empty\"\n (dragover)=\"onDragOver($event, col.id, 0)\"\n (drop)=\"onDrop($event, col.id, 0)\"\n >\n {{ emptyColumnLabel() }}\n </div>\n }\n </div>\n </div>\n }\n</div>\n"],"mappings":"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"}
1	+ {"version":3,"file":"lifecorner-angular-ui-kit-kanban-board.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/kanban-board/kanban-board.component.ts","../../../../libs/angular-ui-kit/src/lib/kanban-board/kanban-board.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n Injector,\n afterNextRender,\n inject,\n input,\n linkedSignal,\n signal,\n output,\n} from '@angular/core';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_ARROW_DOWN, ICON_EXCLAMATION_CIRCLE } from '@lifecorner/angular-ui-kit/icons';\n\nexport interface KanbanCard {\n id: string;\n title: string;\n description?: string;\n labels?: KanbanLabel[];\n assignee?: string;\n priority?: 'low' \| 'medium' \| 'high' \| 'critical';\n}\n\nexport interface KanbanLabel {\n text: string;\n color?: string;\n}\n\nexport interface KanbanColumn {\n id: string;\n title: string;\n cards: KanbanCard[];\n color?: string;\n limit?: number;\n}\n\nexport interface KanbanMoveEvent {\n cardId: string;\n fromColumnId: string;\n toColumnId: string;\n toIndex: number;\n}\n\n@Component({\n selector: 'lc-kanban-board',\n standalone: true,\n imports: [IconComponent],\n viewProviders: [ɵprovideKitIcons([ICON_EXCLAMATION_CIRCLE, ICON_ARROW_DOWN])],\n templateUrl: './kanban-board.component.html',\n styleUrls: ['./kanban-board.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class KanbanBoardComponent {\n readonly columns = input.required<KanbanColumn[]>();\n readonly showCardCount = input(true);\n readonly showWipLimit = input(true);\n readonly readonly = input(false);\n\n /** Placeholder text of an empty column. /\n readonly emptyColumnLabel = input('Drop here');\n\n /* Accessible name prefix of a card's priority marker, followed by the priority. /\n readonly priorityAriaLabel = input('Priority:');\n\n readonly cardMoved = output<KanbanMoveEvent>();\n readonly cardClick = output<{ card: KanbanCard; columnId: string }>();\n\n private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n private readonly injector = inject(Injector);\n\n /\n Local working copy of the columns. Re-seeded from the `columns` input\n * whenever the parent provides a new value, while drops / keyboard moves\n * update it locally without waiting for the parent to echo the change back.\n /\n protected internalColumns = linkedSignal<KanbanColumn[]>(() => this.columns());\n protected draggedCard = signal<{ card: KanbanCard; columnId: string } \| null>(null);\n protected dropTargetColumn = signal<string \| null>(null);\n protected dropTargetIndex = signal<number>(-1);\n\n protected readonly displayColumns = this.internalColumns.asReadonly();\n\n protected isOverLimit(col: KanbanColumn): boolean {\n return !!col.limit && col.cards.length > col.limit;\n }\n\n protected getPriorityIcon(priority?: string): string {\n switch (priority) {\n case 'critical': return 'exclamation-circle';\n case 'high': return 'arrow-up';\n case 'medium': return 'minus';\n case 'low': return 'arrow-down';\n default: return '';\n }\n }\n\n protected getPriorityColor(priority?: string): string {\n switch (priority) {\n // Status inks: 3:1 on the card surface in both themes.\n case 'critical': return 'var(--color-on-error-subtle)';\n case 'high': return 'var(--color-on-warning-subtle)';\n case 'medium': return 'var(--color-on-info-subtle)';\n case 'low': return 'var(--color-on-success-subtle)';\n default: return '';\n }\n }\n\n protected onDragStart(event: DragEvent, card: KanbanCard, columnId: string): void {\n if (this.readonly()) { event.preventDefault(); return; }\n this.draggedCard.set({ card, columnId });\n if (event.dataTransfer) {\n event.dataTransfer.effectAllowed = 'move';\n event.dataTransfer.setData('text/plain', card.id);\n }\n }\n\n protected onDragOver(event: DragEvent, columnId: string, index: number): void {\n event.preventDefault();\n if (event.dataTransfer) event.dataTransfer.dropEffect = 'move';\n this.dropTargetColumn.set(columnId);\n this.dropTargetIndex.set(index);\n }\n\n protected onDragOverColumn(event: DragEvent, columnId: string): void {\n event.preventDefault();\n if (event.dataTransfer) event.dataTransfer.dropEffect = 'move';\n this.dropTargetColumn.set(columnId);\n }\n\n protected onDragLeave(): void {\n this.dropTargetColumn.set(null);\n this.dropTargetIndex.set(-1);\n }\n\n protected onDrop(event: DragEvent, toColumnId: string, toIndex?: number): void {\n event.preventDefault();\n const dragged = this.draggedCard();\n if (!dragged) return;\n\n this.moveCard(dragged.card.id, dragged.columnId, toColumnId, toIndex);\n this.draggedCard.set(null);\n this.dropTargetColumn.set(null);\n this.dropTargetIndex.set(-1);\n }\n\n /\n Keyboard alternative to drag & drop: Enter / Space activate the card,\n * Alt+ArrowLeft / Alt+ArrowRight move it to the neighbouring column,\n * Alt+ArrowUp / Alt+ArrowDown reorder it within its column. Moves are\n * suppressed in readonly mode, exactly like drag & drop.\n /\n protected onCardKeydown(event: KeyboardEvent, card: KanbanCard, columnId: string): void {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n this.onCardClick(card, columnId);\n return;\n }\n if (!event.altKey \|\| this.readonly()) return;\n\n const cols = this.displayColumns();\n const colIdx = cols.findIndex(c => c.id === columnId);\n if (colIdx < 0) return;\n const cardIdx = cols[colIdx].cards.findIndex(c => c.id === card.id);\n if (cardIdx < 0) return;\n\n let toColumnId: string \| undefined;\n let toIndex: number \| undefined;\n switch (event.key) {\n case 'ArrowLeft':\n if (colIdx > 0) { toColumnId = cols[colIdx - 1].id; toIndex = cols[colIdx - 1].cards.length; }\n break;\n case 'ArrowRight':\n if (colIdx < cols.length - 1) { toColumnId = cols[colIdx + 1].id; toIndex = cols[colIdx + 1].cards.length; }\n break;\n case 'ArrowUp':\n if (cardIdx > 0) { toColumnId = columnId; toIndex = cardIdx - 1; }\n break;\n case 'ArrowDown':\n if (cardIdx < cols[colIdx].cards.length - 1) { toColumnId = columnId; toIndex = cardIdx + 1; }\n break;\n default:\n return;\n }\n event.preventDefault();\n if (toColumnId === undefined) return;\n\n this.moveCard(card.id, columnId, toColumnId, toIndex);\n // The card element is re-created inside the target column's @for block,\n // so keyboard focus has to be restored explicitly after the next render.\n afterNextRender(\n () => {\n const cards = this.host.nativeElement.querySelectorAll<HTMLElement>('.lc-kanban__card');\n Array.from(cards).find(el => el.dataset['cardId'] === card.id)?.focus();\n },\n { injector: this.injector },\n );\n }\n\n /* Moves a card between / within columns and emits `cardMoved`. */\n private moveCard(cardId: string, fromColumnId: string, toColumnId: string, toIndex?: number): void {\n const cols = this.displayColumns().map(c => ({ ...c, cards: [...c.cards] }));\n const fromCol = cols.find(c => c.id === fromColumnId);\n const toCol = cols.find(c => c.id === toColumnId);\n if (!fromCol \|\| !toCol) return;\n\n const cardIdx = fromCol.cards.findIndex(c => c.id === cardId);\n if (cardIdx < 0) return;\n\n const [card] = fromCol.cards.splice(cardIdx, 1);\n const insertIdx = toIndex ?? toCol.cards.length;\n toCol.cards.splice(insertIdx, 0, card);\n\n this.internalColumns.set(cols);\n\n this.cardMoved.emit({\n cardId: card.id,\n fromColumnId,\n toColumnId,\n toIndex: insertIdx,\n });\n }\n\n protected onDragEnd(): void {\n this.draggedCard.set(null);\n this.dropTargetColumn.set(null);\n this.dropTargetIndex.set(-1);\n }\n\n protected onCardClick(card: KanbanCard, columnId: string): void {\n this.cardClick.emit({ card, columnId });\n }\n\n}\n","<div class=\"lc-kanban\">\n @for (col of displayColumns(); track col.id) {\n <div\n class=\"lc-kanban__column\"\n [class.lc-kanban__column--drop-target]=\"dropTargetColumn() === col.id\"\n [class.lc-kanban__column--over-limit]=\"showWipLimit() && isOverLimit(col)\"\n (dragover)=\"onDragOverColumn($event, col.id)\"\n (dragleave)=\"onDragLeave()\"\n (drop)=\"onDrop($event, col.id)\"\n >\n <div class=\"lc-kanban__column-header\">\n @if (col.color) {\n <span class=\"lc-kanban__column-dot\" [style.background]=\"col.color\"></span>\n }\n <span class=\"lc-kanban__column-title\">{{ col.title }}</span>\n @if (showCardCount()) {\n <span class=\"lc-kanban__column-count\">{{ col.cards.length }}</span>\n }\n @if (showWipLimit() && col.limit) {\n <span class=\"lc-kanban__column-limit\" [class.lc-kanban__column-limit--over]=\"isOverLimit(col)\">\n / {{ col.limit }}\n </span>\n }\n </div>\n\n <div class=\"lc-kanban__cards\">\n @for (card of col.cards; track card.id) {\n <div\n class=\"lc-kanban__card\"\n role=\"button\"\n tabindex=\"0\"\n [attr.data-card-id]=\"card.id\"\n [attr.aria-keyshortcuts]=\"readonly() ? null : 'Alt+ArrowLeft Alt+ArrowRight Alt+ArrowUp Alt+ArrowDown'\"\n [class.lc-kanban__card--dragging]=\"draggedCard()?.card?.id === card.id\"\n [class.lc-kanban__card--readonly]=\"readonly()\"\n [attr.draggable]=\"!readonly()\"\n (dragstart)=\"onDragStart($event, card, col.id)\"\n (dragover)=\"onDragOver($event, col.id, $index)\"\n (drop)=\"onDrop($event, col.id, $index)\"\n (dragend)=\"onDragEnd()\"\n (click)=\"onCardClick(card, col.id)\"\n (keydown)=\"onCardKeydown($event, card, col.id)\"\n >\n @if (card.priority) {\n <lc-icon [name]=\"getPriorityIcon(card.priority)\" size=\"xs\" [color]=\"getPriorityColor(card.priority)\" class=\"lc-kanban__card-priority\" [ariaLabel]=\"priorityAriaLabel() + ' ' + card.priority\"></lc-icon>\n }\n <span class=\"lc-kanban__card-title\">{{ card.title }}</span>\n\n @if (card.description) {\n <p class=\"lc-kanban__card-desc\">{{ card.description }}</p>\n }\n\n @if (card.labels?.length \|\| card.assignee) {\n <div class=\"lc-kanban__card-footer\">\n @if (card.labels?.length) {\n <div class=\"lc-kanban__card-labels\">\n @for (label of card.labels; track label.text) {\n <span class=\"lc-kanban__card-label\" [style.--label-color]=\"label.color \|\| 'var(--color-primary-500)'\">{{ label.text }}</span>\n }\n </div>\n }\n @if (card.assignee) {\n <span class=\"lc-kanban__card-assignee\">{{ card.assignee }}</span>\n }\n </div>\n }\n </div>\n }\n\n <!-- Empty state drop zone -->\n @if (col.cards.length === 0) {\n <div\n class=\"lc-kanban__empty\"\n (dragover)=\"onDragOver($event, col.id, 0)\"\n (drop)=\"onDrop($event, col.id, 0)\"\n >\n {{ emptyColumnLabel() }}\n </div>\n }\n </div>\n </div>\n }\n</div>\n"],"mappings":";;;;AAqDA,IAAa,uBAAb,MAAa,qBAAoB;CACtB,UAAU,MAAM,SAA0B,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAC1C,gBAAgB,MAAM,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,gBAAA,CAAA,+BAAA,CAAA,CAAA;CAC3B,eAAe,MAAM,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAC1B,WAAW,MAAM,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAGvB,mBAAmB,MAAM,aAAY,GAAA,YAAA,CAAA,EAAA,WAAA,mBAAA,CAAA,+BAAA,CAAA,CAAA;CAGrC,oBAAoB,MAAM,aAAY,GAAA,YAAA,CAAA,EAAA,WAAA,oBAAA,CAAA,+BAAA,CAAA,CAAA;CAEtC,YAAY,OAAM;CAClB,YAAY,OAAM;CAEV,OAAO,OAAgC,UAAU;CACjD,WAAW,OAAO,QAAQ;CAOjC,kBAAkB,mBAAmC,KAAK,QAAO,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,kBAAA,CAAA,+BAAA,CAAA,CAAA;CACpE,cAAc,OAAsD,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CACzE,mBAAmB,OAAsB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,mBAAA,CAAA,+BAAA,CAAA,CAAA;CAC9C,kBAAkB,OAAe,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,kBAAA,CAAA,+BAAA,CAAA,CAAA;CAE3B,iBAAiB,KAAK,gBAAgB,WAAU;CAEzD,YAAY,KAAiB;EACrC,OAAO,CAAC,CAAC,IAAI,SAAS,IAAI,MAAM,SAAS,IAAI;CAC/C;CAEU,gBAAgB,UAAiB;EACzC,QAAQ,UAAR;GACE,KAAK,YAAY,OAAO;GACxB,KAAK,QAAQ,OAAO;GACpB,KAAK,UAAU,OAAO;GACtB,KAAK,OAAO,OAAO;GACnB,SAAS,OAAO;EAClB;CACF;CAEU,iBAAiB,UAAiB;EAC1C,QAAQ,UAAR;GAEE,KAAK,YAAY,OAAO;GACxB,KAAK,QAAQ,OAAO;GACpB,KAAK,UAAU,OAAO;GACtB,KAAK,OAAO,OAAO;GACnB,SAAS,OAAO;EAClB;CACF;CAEU,YAAY,OAAkB,MAAkB,UAAgB;EACxE,IAAI,KAAK,SAAQ,GAAI;GAAE,MAAM,eAAc;GAAI;EAAQ;EACvD,KAAK,YAAY,IAAI;GAAE;GAAM;EAAQ,CAAE;EACvC,IAAI,MAAM,cAAc;GACtB,MAAM,aAAa,gBAAgB;GACnC,MAAM,aAAa,QAAQ,cAAc,KAAK,EAAE;EAClD;CACF;CAEU,WAAW,OAAkB,UAAkB,OAAa;EACpE,MAAM,eAAc;EACpB,IAAI,MAAM,cAAc,MAAM,aAAa,aAAa;EACxD,KAAK,iBAAiB,IAAI,QAAQ;EAClC,KAAK,gBAAgB,IAAI,KAAK;CAChC;CAEU,iBAAiB,OAAkB,UAAgB;EAC3D,MAAM,eAAc;EACpB,IAAI,MAAM,cAAc,MAAM,aAAa,aAAa;EACxD,KAAK,iBAAiB,IAAI,QAAQ;CACpC;CAEU,cAAW;EACnB,KAAK,iBAAiB,IAAI,IAAI;EAC9B,KAAK,gBAAgB,IAAI,EAAE;CAC7B;CAEU,OAAO,OAAkB,YAAoB,SAAgB;EACrE,MAAM,eAAc;EACpB,MAAM,UAAU,KAAK,YAAW;EAChC,IAAI,CAAC,SAAS;EAEd,KAAK,SAAS,QAAQ,KAAK,IAAI,QAAQ,UAAU,YAAY,OAAO;EACpE,KAAK,YAAY,IAAI,IAAI;EACzB,KAAK,iBAAiB,IAAI,IAAI;EAC9B,KAAK,gBAAgB,IAAI,EAAE;CAC7B;CAQU,cAAc,OAAsB,MAAkB,UAAgB;EAC9E,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;GAC9C,MAAM,eAAc;GACpB,KAAK,YAAY,MAAM,QAAQ;GAC/B;EACF;EACA,IAAI,CAAC,MAAM,UAAU,KAAK,SAAQ,GAAI;EAEtC,MAAM,OAAO,KAAK,eAAc;EAChC,MAAM,SAAS,KAAK,WAAU,MAAK,EAAE,OAAO,QAAQ;EACpD,IAAI,SAAS,GAAG;EAChB,MAAM,UAAU,KAAK,OAAO,CAAC,MAAM,WAAU,MAAK,EAAE,OAAO,KAAK,EAAE;EAClE,IAAI,UAAU,GAAG;EAEjB,IAAI;EACJ,IAAI;EACJ,QAAQ,MAAM,KAAd;GACE,KAAK;IACH,IAAI,SAAS,GAAG;KAAE,aAAa,KAAK,SAAS,EAAE,CAAC;KAAI,UAAU,KAAK,SAAS,EAAE,CAAC,MAAM;IAAQ;IAC7F;GACF,KAAK;IACH,IAAI,SAAS,KAAK,SAAS,GAAG;KAAE,aAAa,KAAK,SAAS,EAAE,CAAC;KAAI,UAAU,KAAK,SAAS,EAAE,CAAC,MAAM;IAAQ;IAC3G;GACF,KAAK;IACH,IAAI,UAAU,GAAG;KAAE,aAAa;KAAU,UAAU,UAAU;IAAG;IACjE;GACF,KAAK;IACH,IAAI,UAAU,KAAK,OAAO,CAAC,MAAM,SAAS,GAAG;KAAE,aAAa;KAAU,UAAU,UAAU;IAAG;IAC7F;GACF,SACE;EACJ;EACA,MAAM,eAAc;EACpB,IAAI,eAAe,QAAW;EAE9B,KAAK,SAAS,KAAK,IAAI,UAAU,YAAY,OAAO;EAGpD,sBACO;GACH,MAAM,QAAQ,KAAK,KAAK,cAAc,iBAA8B,kBAAkB;GACtF,MAAM,KAAK,KAAK,CAAC,CAAC,MAAK,OAAM,GAAG,QAAQ,cAAc,KAAK,EAAE,CAAC,EAAE,MAAK;EACvE,GACA,EAAE,UAAU,KAAK,SAAQ,CAAE;CAE/B;CAGQ,SAAS,QAAgB,cAAsB,YAAoB,SAAgB;EACzF,MAAM,OAAO,KAAK,eAAc,CAAE,CAAC,KAAI,OAAM;GAAE,GAAG;GAAG,OAAO,CAAC,GAAG,EAAE,KAAK;EAAC,EAAG;EAC3E,MAAM,UAAU,KAAK,MAAK,MAAK,EAAE,OAAO,YAAY;EACpD,MAAM,QAAQ,KAAK,MAAK,MAAK,EAAE,OAAO,UAAU;EAChD,IAAI,CAAC,WAAW,CAAC,OAAO;EAExB,MAAM,UAAU,QAAQ,MAAM,WAAU,MAAK,EAAE,OAAO,MAAM;EAC5D,IAAI,UAAU,GAAG;EAEjB,MAAM,CAAC,QAAQ,QAAQ,MAAM,OAAO,SAAS,CAAC;EAC9C,MAAM,YAAY,WAAW,MAAM,MAAM;EACzC,MAAM,MAAM,OAAO,WAAW,GAAG,IAAI;EAErC,KAAK,gBAAgB,IAAI,IAAI;EAE7B,KAAK,UAAU,KAAK;GAClB,QAAQ,KAAK;GACb;GACA;GACA,SAAS;EACV,CAAA;CACH;CAEU,YAAS;EACjB,KAAK,YAAY,IAAI,IAAI;EACzB,KAAK,iBAAiB,IAAI,IAAI;EAC9B,KAAK,gBAAgB,IAAI,EAAE;CAC7B;CAEU,YAAY,MAAkB,UAAgB;EACtD,KAAK,UAAU,KAAK;GAAE;GAAM;EAAQ,CAAE;CACxC;CAlLW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAoB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAApB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAoB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,eAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,cAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,kBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,mBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA;GAAA,WAAA;GAAA,WAAA;EAAA;EAAA,UAAA;EAAA,UCrDjC;EAmFA,QAAA,CAAA,q3FAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MDpCY;GAAa,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;GAAA;EAAA,CAAA;EAAA,eACR,CAAC,iBAAiB,CAAC,yBAAyB,eAAe,CAAC,CAAC;EAAC,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAKlE,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAoB,YAAA,CAAA;EAThC,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAiB,YACf;GAAI,SACP,CAAC,aAAa;GAAC,eACT,CAAC,iBAAiB,CAAC,yBAAyB,eAAe,CAAC,CAAC;GAAC,iBAG5D,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,q3FAAA;EAAA,CAAA"}

package/fesm2022/lifecorner-angular-ui-kit-list.mjs CHANGED Viewed

@@ -230,6 +230,7 @@ var ListComponent = class ListComponent {
 					"iconOnly",
 					"fullWidth",
 					"ariaLabel",
+					"ariaDescribedBy",
 					"type",
 					"title",
 					"disabledReason",

package/fesm2022/lifecorner-angular-ui-kit-list.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"lifecorner-angular-ui-kit-list.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/list/list-item-template.directive.ts","../../../../libs/angular-ui-kit/src/lib/list/list.component.ts","../../../../libs/angular-ui-kit/src/lib/list/list.component.html"],"sourcesContent":["import { Directive, TemplateRef, inject } from '@angular/core';\nimport { ListItem } from './list.component';\n\n/*\n Directive for providing a custom template to render each list item.\n \n @example\n * ```html\n * <lc-list [items]=\"runs()\" (itemClick)=\"onRunClick($event)\">\n * <ng-template lcListItem let-item>\n * <lc-badge [variant]=\"getStatusVariant(item.status)\">{{ item.status }}</lc-badge>\n * <span>{{ item.symbol }}</span>\n * <span class=\"text-sm text-neutral-500\">{{ item.date }}</span>\n * </ng-template>\n * </lc-list>\n * ```\n /\n@Directive({\n selector: '[lcListItem]',\n standalone: true,\n})\nexport class ListItemTemplateDirective {\n public readonly template = inject(TemplateRef<{ $implicit: ListItem }>);\n}\n","import {\n Component,\n ChangeDetectionStrategy,\n input,\n computed,\n contentChild,\n effect,\n isDevMode,\n output,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { IconComponent } from '@lifecorner/angular-ui-kit/icon';\nimport { ButtonComponent, ButtonSize, ButtonVariant } from '@lifecorner/angular-ui-kit/button';\nimport { ListItemTemplateDirective } from './list-item-template.directive';\nimport type { AvatarColor } from '@lifecorner/angular-ui-kit/avatar';\n\n/\n List orientation type\n /\nexport type ListOrientation = 'vertical' \| 'horizontal';\n\n/\n List visual variant\n * - default: flat rows (original)\n * - card: each item rendered as a mini-card with border, radius and shadow on hover\n /\nexport type ListVariant = 'default' \| 'card';\n\n/\n List item interface\n /\nexport interface ListItem {\n /* Item label text (primary line) /\n label: string;\n /* Secondary text shown below the label /\n subtitle?: string;\n /* Description text shown below subtitle (third line) /\n description?: string;\n /* Optional icon identifier /\n icon?: string;\n /* Avatar URL or initials (renders a circular avatar instead of icon) /\n avatar?: string;\n /\n Background of avatar initials: `default` or a member colour `member-1` …\n * `member-6` with white initials (as `lc-avatar`'s `color`).\n /\n avatarColor?: AvatarColor;\n /* Badge text (e.g. count, status label) shown on the trailing side /\n badge?: string;\n /* Badge color variant /\n badgeVariant?: 'default' \| 'primary' \| 'success' \| 'warning' \| 'error';\n /* Metadata text shown on the trailing side (e.g. date, size) /\n metadata?: string;\n /* Optional action label /\n action?: string;\n /\n Accessible name of this row's action when the visible label repeats on\n * every row (e.g. „Entfernen“ → „iPhone · Safari entfernen“). The visible\n * label must be part of it (WCAG 2.5.3).\n /\n actionAriaLabel?: string;\n /\n URL of the row link (3.16, TD-4). The row renders as an `<a>` over its\n * full area (at least 44 px high) with real link semantics (middle click,\n * \"open in new tab\"). Not rendered with `href`: `action` (no control inside\n * a link; a dev warning). Not emitted: `itemClick` (see `linkClick`). With\n * `disabled` the row is the plain disabled row, no link. A custom\n * `lcListItem` template must not hold controls in `href` rows.\n /\n href?: string;\n /* Item identifier /\n id?: string;\n /* Whether the item is disabled /\n disabled?: boolean;\n /* Whether the item is selected / highlighted /\n selected?: boolean;\n /* Any additional data /\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n [key: string]: any;\n}\n\n/\n List item size\n /\nexport type ListSize = 'sm' \| 'md' \| 'lg';\n\n/\n A plain click (or Enter) on an `href` row (3.16, TD-4): `item` is the row,\n * `event` the click. Call `event.preventDefault()` to navigate with your\n * router instead of a full page load.\n /\nexport interface ListLinkClickEvent {\n item: ListItem;\n event: MouseEvent;\n}\n\n/\n List component for displaying structured item collections.\n \n Features:\n * - Vertical and horizontal layout orientations\n * - Variant styles (default, bordered, card)\n * - Optional dividers between items\n * - Icon and avatar support per item\n * - Action buttons with click events\n * - Accessible with ARIA list role; `clickable` rows are keyboard-operable\n * - `ListItem.href` rows are real links over the full row (3.16, TD-4);\n * `linkClick` hands plain clicks to your router\n \n @example\n * ```html\n * <lc-list\n * [items]=\"listItems\"\n * orientation=\"vertical\"\n * [showDividers]=\"true\"\n * (itemClick)=\"handleItemClick($event)\"\n * />\n * ```\n /\n@Component({\n selector: 'lc-list',\n standalone: true,\n imports: [NgTemplateOutlet, IconComponent, ButtonComponent],\n templateUrl: './list.component.html',\n styleUrl: './list.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ListComponent {\n /* Custom item template provided via lcListItem directive /\n readonly itemTemplate = contentChild(ListItemTemplateDirective);\n\n /* Array of list items to display /\n items = input<ListItem[]>([]);\n\n /* Orientation of the list /\n orientation = input<ListOrientation>('vertical');\n\n /* Visual variant /\n variant = input<ListVariant>('default');\n\n /* Size of list items /\n size = input<ListSize>('md');\n\n /* Whether to show dividers between items /\n showDividers = input<boolean>(false);\n\n /\n Whether rows are interactive. When set, each row is rendered as a\n * focusable button (Enter / Space emit `itemClick`) so `itemClick` is\n * reachable from the keyboard. Set this whenever you handle `itemClick`.\n /\n clickable = input<boolean>(false);\n\n /\n Clamp each item's `description` to two lines (3.2). Set `false` for\n * reading text that must show in full (3.3, G-11).\n * @default true\n /\n clampDescription = input<boolean>(true);\n\n /\n Variant of the built-in row action (`ListItem.action`).\n * @default 'ghost'\n /\n actionVariant = input<ButtonVariant>('ghost');\n\n /\n Size of the built-in row action: `xs` (3.2, about 25 px) … `lg` (48.5 px,\n * the 44 px touch target).\n * @default 'xs'\n /\n actionSize = input<ButtonSize>('xs');\n\n /* Event emitted when an item is clicked /\n readonly itemClick = output<ListItem>();\n\n /* Event emitted when an action button is clicked /\n readonly actionClick = output<ListItem>();\n\n /\n A plain click (or Enter) on an `href` row: primary button, no\n * Ctrl/Cmd/Shift/Alt (3.16, TD-4). Emitted before the browser follows the\n * link; call `event.preventDefault()` and navigate with your router for an\n * in-app route (`router.navigateByUrl(item.href)`). The kit never prevents\n * the default; modifier and middle clicks are never emitted, so \"open in new\n * tab\" keeps working.\n /\n readonly linkClick = output<ListLinkClickEvent>();\n\n constructor() {\n effect(() => {\n if (!isDevMode()) return;\n // `items` may be bound to undefined (tolerated since 3.2).\n for (const item of this.items() ?? []) {\n if (this.isLinkRow(item) && item.action) {\n console.warn(`[lc-list] item \"${item.label}\" has href and action: the action is not rendered inside a link`);\n }\n }\n });\n }\n\n /* Whether a row renders as a link: `href` set and not disabled. /\n protected isLinkRow(item: ListItem): boolean {\n return !!item.href && !item.disabled;\n }\n\n /\n Computed CSS classes for the list\n /\n listClasses = computed(() => {\n const classes = ['lc-list'];\n\n classes.push(`lc-list--${this.orientation()}`);\n classes.push(`lc-list--${this.variant()}`);\n classes.push(`lc-list--${this.size()}`);\n\n if (this.showDividers()) {\n classes.push('lc-list--with-dividers');\n }\n\n if (this.clickable()) {\n classes.push('lc-list--clickable');\n }\n\n if (!this.clampDescription()) {\n classes.push('lc-list--no-clamp');\n }\n\n return classes.join(' ');\n });\n\n /\n Get CSS classes for a list item\n /\n getItemClasses(item: ListItem): string {\n const classes = ['lc-list__item'];\n\n if (item.disabled) {\n classes.push('lc-list__item--disabled');\n }\n\n if (item.selected) {\n classes.push('lc-list__item--selected');\n }\n\n return classes.join(' ');\n }\n\n /* CSS classes of an item's avatar (member colour, LK-7). /\n protected avatarClasses(item: ListItem): string {\n const color = item.avatarColor;\n return color && color !== 'default'\n ? `lc-list__avatar lc-list__avatar--member lc-list__avatar--${color}`\n : 'lc-list__avatar';\n }\n\n /\n Handle item click\n /\n onItemClick(item: ListItem): void {\n if (!item.disabled) {\n this.itemClick.emit(item);\n }\n }\n\n /\n Keyboard activation of a clickable row. Only reacts to keys on the row\n * itself: a nested control (e.g. the action button) handles its own Enter.\n /\n onItemKeydown(event: KeyboardEvent, item: ListItem): void {\n if (event.target !== event.currentTarget) return;\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n this.onItemClick(item);\n }\n }\n\n /\n Handle action button click\n /\n onActionClick(item: ListItem): void {\n this.actionClick.emit(item);\n }\n\n /\n A click on a link row: only a plain primary click reaches `linkClick`.\n * The default (following the link) is left to the browser and the consumer.\n /\n protected onLinkClick(event: MouseEvent, item: ListItem): void {\n if (event.button !== 0 \|\| event.ctrlKey \|\| event.metaKey \|\| event.shiftKey \|\| event.altKey) return;\n this.linkClick.emit({ item, event });\n }\n}\n","<!--\n Row content is shared between the plain (legacy) row and the keyboard-\n operable row rendered when `clickable` is set.\n-->\n<ng-template #rowContent let-item>\n @if (itemTemplate(); as tpl) {\n <ng-container ngTemplateOutlet=\"tpl.template; context: { $implicit: item }\"></ng-container>\n } @else {\n <!-- Leading: Avatar or Icon -->\n @if (item.avatar) {\n <div [class]=\"avatarClasses(item)\">\n @if (item.avatar.startsWith('http') \|\| item.avatar.startsWith('/') \|\| item.avatar.startsWith('data:')) {\n <img [src]=\"item.avatar\" [alt]=\"item.label\" class=\"lc-list__avatar-img\" />\n } @else {\n <span class=\"lc-list__avatar-initials\">{{ item.avatar }}</span>\n }\n </div>\n } @else if (item.icon) {\n <lc-icon [name]=\"item.icon\" class=\"lc-list__icon\" size=\"sm\" [decorative]=\"true\" />\n }\n\n <!-- Content: Label, Subtitle, Description -->\n <div class=\"lc-list__content\">\n <span class=\"lc-list__label\">{{ item.label }}</span>\n @if (item.subtitle) {\n <span class=\"lc-list__subtitle\">{{ item.subtitle }}</span>\n }\n @if (item.description) {\n <span class=\"lc-list__description\">{{ item.description }}</span>\n }\n </div>\n\n <!-- Trailing: Badge, Metadata, Action -->\n <div class=\"lc-list__trailing\">\n @if (item.badge) {\n <span class=\"lc-list__badge lc-list__badge--{{ item.badgeVariant \|\| 'default' }}\">{{ item.badge }}</span>\n }\n @if (item.metadata) {\n <span class=\"lc-list__metadata\">{{ item.metadata }}</span>\n }\n @if (item.action && !isLinkRow(item)) {\n <!-- The action is its own control: its click must not also activate the row. -->\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- only stops the action click from also activating the row; the action is a real button -->\n <span class=\"lc-list__action-area\" (click)=\"$event.stopPropagation()\">\n <lc-button\n [variant]=\"actionVariant()\"\n [size]=\"actionSize()\"\n [ariaLabel]=\"item.actionAriaLabel ?? ''\"\n class=\"lc-list__action\"\n (clicked)=\"onActionClick(item)\"\n >\n {{ item.action }}\n </lc-button>\n </span>\n }\n </div>\n }\n</ng-template>\n\n<div [class]=\"listClasses()\" role=\"list\">\n @for (item of items(); track item.id \|\| $index) {\n @if (isLinkRow(item)) {\n <!-- A real link over the whole row (3.16, TD-4); the row element carries the item styles. -->\n <div class=\"lc-list__item-wrapper\" role=\"listitem\">\n <a [class]=\"getItemClasses(item) + ' lc-list__item--link'\" [href]=\"item.href\" (click)=\"onLinkClick($event, item)\">\n <ng-container ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n </a>\n </div>\n } @else if (clickable()) {\n <div class=\"lc-list__item-wrapper\" role=\"listitem\">\n <div\n [class]=\"getItemClasses(item)\"\n role=\"button\"\n [attr.tabindex]=\"item.disabled ? -1 : 0\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n (click)=\"onItemClick(item)\"\n (keydown)=\"onItemKeydown($event, item)\"\n >\n <ng-container ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n </div>\n </div>\n } @else {\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -- non-clickable lists keep reporting mouse clicks (backward compatible); use clickable for keyboard rows -->\n <div\n [class]=\"getItemClasses(item)\"\n role=\"listitem\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n (click)=\"onItemClick(item)\"\n >\n <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n </div>\n }\n }\n</div>\n"],"mappings":";;;;;AAqBA,IAAa,4BAAb,MAAa,0BAAyB;CACpB,WAAW,OAAO,WAAoC;CAD3D,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAyB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAzB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAyB,cAAA;EAAA,UAAA;EAAA,UAAA;CAAA,CAAA;;AAAzB,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAyB,YAAA,CAAA;EAJrC,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,YAAY;EACb,CAAA;;;AC2GD,IAAa,gBAAb,MAAa,cAAa;CAEf,eAAe,aAAa,2BAA0B,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAG/D,QAAQ,MAAkB,CAAA,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAG7B,cAAc,MAAuB,YAAW,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAGhD,UAAU,MAAmB,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAGvC,OAAO,MAAgB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAG5B,eAAe,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAOpC,YAAY,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAOjC,mBAAmB,MAAe,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,mBAAA,CAAA,+BAAA,CAAA,CAAA;CAMvC,gBAAgB,MAAqB,SAAQ,GAAA,YAAA,CAAA,EAAA,WAAA,gBAAA,CAAA,+BAAA,CAAA,CAAA;CAO7C,aAAa,MAAkB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAG3B,YAAY,OAAM;CAGlB,cAAc,OAAM;CAUpB,YAAY,OAAM;CAE3B,cAAA;EACE,aAAY;GACV,IAAI,CAAC,UAAS,GAAI;GAElB,KAAK,MAAM,QAAQ,KAAK,MAAK,KAAM,CAAA,GACjC,IAAI,KAAK,UAAU,IAAI,KAAK,KAAK,QAC/B,QAAQ,KAAK,mBAAmB,KAAK,MAAK,gEAAiE;EAGjH,CAAC;CACH;CAGU,UAAU,MAAc;EAChC,OAAO,CAAC,CAAC,KAAK,QAAQ,CAAC,KAAK;CAC9B;CAKA,cAAc,eAAc;EAC1B,MAAM,UAAU,CAAC,SAAS;EAE1B,QAAQ,KAAK,YAAY,KAAK,YAAW,GAAI;EAC7C,QAAQ,KAAK,YAAY,KAAK,QAAO,GAAI;EACzC,QAAQ,KAAK,YAAY,KAAK,KAAI,GAAI;EAEtC,IAAI,KAAK,aAAY,GACnB,QAAQ,KAAK,wBAAwB;EAGvC,IAAI,KAAK,UAAS,GAChB,QAAQ,KAAK,oBAAoB;EAGnC,IAAI,CAAC,KAAK,iBAAgB,GACxB,QAAQ,KAAK,mBAAmB;EAGlC,OAAO,QAAQ,KAAK,GAAG;CACzB,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAKF,eAAe,MAAc;EAC3B,MAAM,UAAU,CAAC,eAAe;EAEhC,IAAI,KAAK,UACP,QAAQ,KAAK,yBAAyB;EAGxC,IAAI,KAAK,UACP,QAAQ,KAAK,yBAAyB;EAGxC,OAAO,QAAQ,KAAK,GAAG;CACzB;CAGU,cAAc,MAAc;EACpC,MAAM,QAAQ,KAAK;EACnB,OAAO,SAAS,UAAU,YACtB,4DAA4D,UAC5D;CACN;CAKA,YAAY,MAAc;EACxB,IAAI,CAAC,KAAK,UACR,KAAK,UAAU,KAAK,IAAI;CAE5B;CAMA,cAAc,OAAsB,MAAc;EAChD,IAAI,MAAM,WAAW,MAAM,eAAe;EAC1C,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;GAC9C,MAAM,eAAc;GACpB,KAAK,YAAY,IAAI;EACvB;CACF;CAKA,cAAc,MAAc;EAC1B,KAAK,YAAY,KAAK,IAAI;CAC5B;CAMU,YAAY,OAAmB,MAAc;EACrD,IAAI,MAAM,WAAW,KAAK,MAAM,WAAW,MAAM,WAAW,MAAM,YAAY,MAAM,QAAQ;EAC5F,KAAK,UAAU,KAAK;GAAE;GAAM;EAAK,CAAE;CACrC;CApKW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAa,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAb,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAa,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,aAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,cAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,kBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,eAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA;GAAA,WAAA;GAAA,aAAA;GAAA,WAAA;EAAA;EAAA,SAAA,CAAA;GAAA,cAAA;GAAA,OAAA;GAAA,WAEa;GAAyB,aAAA;GAAA,UAAA;EAAA,CAAA;EAAA,UAAA;EAAA,UCjIhE;EA8FA,QAAA,CAAA,4uNAAA;EAAA,cAAA;GAAA;IAAA,MAAA;IAAA,MD4BY;IAAgB,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAa,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAe,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;IAAA,SAAA;KAAA;KAAA;KAAA;IAAA;GAAA;EAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAK/C,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAa,YAAA,CAAA;EARzB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAS,YACP;GAAI,SACP;IAAC;IAAkB;IAAe;GAAe;GAAC,iBAG1C,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,4uNAAA;EAAA,CAAA;CAIV,CAAA;CAAA,sBAAA,CAAA;CAAA,gBAAA;EAAA,cAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,GAAA,iBAAA,yBAAyB,GAAA,EAAA,UAAA,KAAA,CAAA;EAAA,CAAA;EAAA,OAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,aAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,SAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,MAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,cAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,WAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,kBAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,eAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,YAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,WAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,WAAA;EAAA,CAAA;EAAA,aAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,aAAA;EAAA,CAAA;EAAA,WAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,WAAA;EAAA,CAAA;CAAA;AAAA,CAAA"}
1	+ {"version":3,"file":"lifecorner-angular-ui-kit-list.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/list/list-item-template.directive.ts","../../../../libs/angular-ui-kit/src/lib/list/list.component.ts","../../../../libs/angular-ui-kit/src/lib/list/list.component.html"],"sourcesContent":["import { Directive, TemplateRef, inject } from '@angular/core';\nimport { ListItem } from './list.component';\n\n/*\n Directive for providing a custom template to render each list item.\n \n @example\n * ```html\n * <lc-list [items]=\"runs()\" (itemClick)=\"onRunClick($event)\">\n * <ng-template lcListItem let-item>\n * <lc-badge [variant]=\"getStatusVariant(item.status)\">{{ item.status }}</lc-badge>\n * <span>{{ item.symbol }}</span>\n * <span class=\"text-sm text-neutral-500\">{{ item.date }}</span>\n * </ng-template>\n * </lc-list>\n * ```\n /\n@Directive({\n selector: '[lcListItem]',\n standalone: true,\n})\nexport class ListItemTemplateDirective {\n public readonly template = inject(TemplateRef<{ $implicit: ListItem }>);\n}\n","import {\n Component,\n ChangeDetectionStrategy,\n input,\n computed,\n contentChild,\n effect,\n isDevMode,\n output,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { IconComponent } from '@lifecorner/angular-ui-kit/icon';\nimport { ButtonComponent, ButtonSize, ButtonVariant } from '@lifecorner/angular-ui-kit/button';\nimport { ListItemTemplateDirective } from './list-item-template.directive';\nimport type { AvatarColor } from '@lifecorner/angular-ui-kit/avatar';\n\n/\n List orientation type\n /\nexport type ListOrientation = 'vertical' \| 'horizontal';\n\n/\n List visual variant\n * - default: flat rows (original)\n * - card: each item rendered as a mini-card with border, radius and shadow on hover\n /\nexport type ListVariant = 'default' \| 'card';\n\n/\n List item interface\n /\nexport interface ListItem {\n /* Item label text (primary line) /\n label: string;\n /* Secondary text shown below the label /\n subtitle?: string;\n /* Description text shown below subtitle (third line) /\n description?: string;\n /* Optional icon identifier /\n icon?: string;\n /* Avatar URL or initials (renders a circular avatar instead of icon) /\n avatar?: string;\n /\n Background of avatar initials: `default` or a member colour `member-1` …\n * `member-6` with white initials (as `lc-avatar`'s `color`).\n /\n avatarColor?: AvatarColor;\n /* Badge text (e.g. count, status label) shown on the trailing side /\n badge?: string;\n /* Badge color variant /\n badgeVariant?: 'default' \| 'primary' \| 'success' \| 'warning' \| 'error';\n /* Metadata text shown on the trailing side (e.g. date, size) /\n metadata?: string;\n /* Optional action label /\n action?: string;\n /\n Accessible name of this row's action when the visible label repeats on\n * every row (e.g. „Entfernen“ → „iPhone · Safari entfernen“). The visible\n * label must be part of it (WCAG 2.5.3).\n /\n actionAriaLabel?: string;\n /\n URL of the row link (3.16, TD-4). The row renders as an `<a>` over its\n * full area (at least 44 px high) with real link semantics (middle click,\n * \"open in new tab\"). Not rendered with `href`: `action` (no control inside\n * a link; a dev warning). Not emitted: `itemClick` (see `linkClick`). With\n * `disabled` the row is the plain disabled row, no link. A custom\n * `lcListItem` template must not hold controls in `href` rows.\n /\n href?: string;\n /* Item identifier /\n id?: string;\n /* Whether the item is disabled /\n disabled?: boolean;\n /* Whether the item is selected / highlighted /\n selected?: boolean;\n /* Any additional data /\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n [key: string]: any;\n}\n\n/\n List item size\n /\nexport type ListSize = 'sm' \| 'md' \| 'lg';\n\n/\n A plain click (or Enter) on an `href` row (3.16, TD-4): `item` is the row,\n * `event` the click. Call `event.preventDefault()` to navigate with your\n * router instead of a full page load.\n /\nexport interface ListLinkClickEvent {\n item: ListItem;\n event: MouseEvent;\n}\n\n/\n List component for displaying structured item collections.\n \n Features:\n * - Vertical and horizontal layout orientations\n * - Variant styles (default, bordered, card)\n * - Optional dividers between items\n * - Icon and avatar support per item\n * - Action buttons with click events\n * - Accessible with ARIA list role; `clickable` rows are keyboard-operable\n * - `ListItem.href` rows are real links over the full row (3.16, TD-4);\n * `linkClick` hands plain clicks to your router\n \n @example\n * ```html\n * <lc-list\n * [items]=\"listItems\"\n * orientation=\"vertical\"\n * [showDividers]=\"true\"\n * (itemClick)=\"handleItemClick($event)\"\n * />\n * ```\n /\n@Component({\n selector: 'lc-list',\n standalone: true,\n imports: [NgTemplateOutlet, IconComponent, ButtonComponent],\n templateUrl: './list.component.html',\n styleUrl: './list.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ListComponent {\n /* Custom item template provided via lcListItem directive /\n readonly itemTemplate = contentChild(ListItemTemplateDirective);\n\n /* Array of list items to display /\n items = input<ListItem[]>([]);\n\n /* Orientation of the list /\n orientation = input<ListOrientation>('vertical');\n\n /* Visual variant /\n variant = input<ListVariant>('default');\n\n /* Size of list items /\n size = input<ListSize>('md');\n\n /* Whether to show dividers between items /\n showDividers = input<boolean>(false);\n\n /\n Whether rows are interactive. When set, each row is rendered as a\n * focusable button (Enter / Space emit `itemClick`) so `itemClick` is\n * reachable from the keyboard. Set this whenever you handle `itemClick`.\n /\n clickable = input<boolean>(false);\n\n /\n Clamp each item's `description` to two lines (3.2). Set `false` for\n * reading text that must show in full (3.3, G-11).\n * @default true\n /\n clampDescription = input<boolean>(true);\n\n /\n Variant of the built-in row action (`ListItem.action`).\n * @default 'ghost'\n /\n actionVariant = input<ButtonVariant>('ghost');\n\n /\n Size of the built-in row action: `xs` (3.2, about 25 px) … `lg` (48.5 px,\n * the 44 px touch target).\n * @default 'xs'\n /\n actionSize = input<ButtonSize>('xs');\n\n /* Event emitted when an item is clicked /\n readonly itemClick = output<ListItem>();\n\n /* Event emitted when an action button is clicked /\n readonly actionClick = output<ListItem>();\n\n /\n A plain click (or Enter) on an `href` row: primary button, no\n * Ctrl/Cmd/Shift/Alt (3.16, TD-4). Emitted before the browser follows the\n * link; call `event.preventDefault()` and navigate with your router for an\n * in-app route (`router.navigateByUrl(item.href)`). The kit never prevents\n * the default; modifier and middle clicks are never emitted, so \"open in new\n * tab\" keeps working.\n /\n readonly linkClick = output<ListLinkClickEvent>();\n\n constructor() {\n effect(() => {\n if (!isDevMode()) return;\n // `items` may be bound to undefined (tolerated since 3.2).\n for (const item of this.items() ?? []) {\n if (this.isLinkRow(item) && item.action) {\n console.warn(`[lc-list] item \"${item.label}\" has href and action: the action is not rendered inside a link`);\n }\n }\n });\n }\n\n /* Whether a row renders as a link: `href` set and not disabled. /\n protected isLinkRow(item: ListItem): boolean {\n return !!item.href && !item.disabled;\n }\n\n /\n Computed CSS classes for the list\n /\n listClasses = computed(() => {\n const classes = ['lc-list'];\n\n classes.push(`lc-list--${this.orientation()}`);\n classes.push(`lc-list--${this.variant()}`);\n classes.push(`lc-list--${this.size()}`);\n\n if (this.showDividers()) {\n classes.push('lc-list--with-dividers');\n }\n\n if (this.clickable()) {\n classes.push('lc-list--clickable');\n }\n\n if (!this.clampDescription()) {\n classes.push('lc-list--no-clamp');\n }\n\n return classes.join(' ');\n });\n\n /\n Get CSS classes for a list item\n /\n getItemClasses(item: ListItem): string {\n const classes = ['lc-list__item'];\n\n if (item.disabled) {\n classes.push('lc-list__item--disabled');\n }\n\n if (item.selected) {\n classes.push('lc-list__item--selected');\n }\n\n return classes.join(' ');\n }\n\n /* CSS classes of an item's avatar (member colour, LK-7). /\n protected avatarClasses(item: ListItem): string {\n const color = item.avatarColor;\n return color && color !== 'default'\n ? `lc-list__avatar lc-list__avatar--member lc-list__avatar--${color}`\n : 'lc-list__avatar';\n }\n\n /\n Handle item click\n /\n onItemClick(item: ListItem): void {\n if (!item.disabled) {\n this.itemClick.emit(item);\n }\n }\n\n /\n Keyboard activation of a clickable row. Only reacts to keys on the row\n * itself: a nested control (e.g. the action button) handles its own Enter.\n /\n onItemKeydown(event: KeyboardEvent, item: ListItem): void {\n if (event.target !== event.currentTarget) return;\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n this.onItemClick(item);\n }\n }\n\n /\n Handle action button click\n /\n onActionClick(item: ListItem): void {\n this.actionClick.emit(item);\n }\n\n /\n A click on a link row: only a plain primary click reaches `linkClick`.\n * The default (following the link) is left to the browser and the consumer.\n /\n protected onLinkClick(event: MouseEvent, item: ListItem): void {\n if (event.button !== 0 \|\| event.ctrlKey \|\| event.metaKey \|\| event.shiftKey \|\| event.altKey) return;\n this.linkClick.emit({ item, event });\n }\n}\n","<!--\n Row content is shared between the plain (legacy) row and the keyboard-\n operable row rendered when `clickable` is set.\n-->\n<ng-template #rowContent let-item>\n @if (itemTemplate(); as tpl) {\n <ng-container ngTemplateOutlet=\"tpl.template; context: { $implicit: item }\"></ng-container>\n } @else {\n <!-- Leading: Avatar or Icon -->\n @if (item.avatar) {\n <div [class]=\"avatarClasses(item)\">\n @if (item.avatar.startsWith('http') \|\| item.avatar.startsWith('/') \|\| item.avatar.startsWith('data:')) {\n <img [src]=\"item.avatar\" [alt]=\"item.label\" class=\"lc-list__avatar-img\" />\n } @else {\n <span class=\"lc-list__avatar-initials\">{{ item.avatar }}</span>\n }\n </div>\n } @else if (item.icon) {\n <lc-icon [name]=\"item.icon\" class=\"lc-list__icon\" size=\"sm\" [decorative]=\"true\" />\n }\n\n <!-- Content: Label, Subtitle, Description -->\n <div class=\"lc-list__content\">\n <span class=\"lc-list__label\">{{ item.label }}</span>\n @if (item.subtitle) {\n <span class=\"lc-list__subtitle\">{{ item.subtitle }}</span>\n }\n @if (item.description) {\n <span class=\"lc-list__description\">{{ item.description }}</span>\n }\n </div>\n\n <!-- Trailing: Badge, Metadata, Action -->\n <div class=\"lc-list__trailing\">\n @if (item.badge) {\n <span class=\"lc-list__badge lc-list__badge--{{ item.badgeVariant \|\| 'default' }}\">{{ item.badge }}</span>\n }\n @if (item.metadata) {\n <span class=\"lc-list__metadata\">{{ item.metadata }}</span>\n }\n @if (item.action && !isLinkRow(item)) {\n <!-- The action is its own control: its click must not also activate the row. -->\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- only stops the action click from also activating the row; the action is a real button -->\n <span class=\"lc-list__action-area\" (click)=\"$event.stopPropagation()\">\n <lc-button\n [variant]=\"actionVariant()\"\n [size]=\"actionSize()\"\n [ariaLabel]=\"item.actionAriaLabel ?? ''\"\n class=\"lc-list__action\"\n (clicked)=\"onActionClick(item)\"\n >\n {{ item.action }}\n </lc-button>\n </span>\n }\n </div>\n }\n</ng-template>\n\n<div [class]=\"listClasses()\" role=\"list\">\n @for (item of items(); track item.id \|\| $index) {\n @if (isLinkRow(item)) {\n <!-- A real link over the whole row (3.16, TD-4); the row element carries the item styles. -->\n <div class=\"lc-list__item-wrapper\" role=\"listitem\">\n <a [class]=\"getItemClasses(item) + ' lc-list__item--link'\" [href]=\"item.href\" (click)=\"onLinkClick($event, item)\">\n <ng-container ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n </a>\n </div>\n } @else if (clickable()) {\n <div class=\"lc-list__item-wrapper\" role=\"listitem\">\n <div\n [class]=\"getItemClasses(item)\"\n role=\"button\"\n [attr.tabindex]=\"item.disabled ? -1 : 0\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n (click)=\"onItemClick(item)\"\n (keydown)=\"onItemKeydown($event, item)\"\n >\n <ng-container ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n </div>\n </div>\n } @else {\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -- non-clickable lists keep reporting mouse clicks (backward compatible); use clickable for keyboard rows -->\n <div\n [class]=\"getItemClasses(item)\"\n role=\"listitem\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n (click)=\"onItemClick(item)\"\n >\n <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n </div>\n }\n }\n</div>\n"],"mappings":"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"}

package/fesm2022/lifecorner-angular-ui-kit-log-viewer.mjs CHANGED Viewed

@@ -509,7 +509,7 @@ var LogViewerComponent = class LogViewerComponent {
 		}],
 		ngImport: i0,
 		template: "<div\n  [class]=\"containerClasses()\"\n  [style.height]=\"height()\"\n  tabindex=\"0\"\n  (keydown)=\"onKeydown($event)\"\n>\n  <!-- Toolbar -->\n  <div class=\"lc-log-viewer__toolbar\">\n    <div class=\"lc-log-viewer__toolbar-left\">\n      @if (stream$()) {\n        <button\n          type=\"button\"\n          class=\"lc-log-viewer__tool-btn\"\n          [class.lc-log-viewer__tool-btn--active]=\"paused()\"\n          (click)=\"togglePause()\"\n          [title]=\"paused() ? resumeLabel() : pauseLabel()\"\n          [attr.aria-label]=\"paused() ? resumeAriaLabel() : pauseAriaLabel()\"\n          [attr.aria-pressed]=\"paused()\"\n        >\n          <lc-icon [name]=\"paused() ? 'player-play' : 'player-pause'\" size=\"xs\" [decorative]=\"true\" />\n        </button>\n      }\n      <button\n        type=\"button\"\n        class=\"lc-log-viewer__tool-btn\"\n        (click)=\"clearBuffer()\"\n        [attr.title]=\"clearLabel()\"\n        [attr.aria-label]=\"clearAriaLabel()\"\n      >\n        <lc-icon name=\"trash\" size=\"xs\" [decorative]=\"true\" />\n      </button>\n      <button\n        type=\"button\"\n        class=\"lc-log-viewer__tool-btn\"\n        (click)=\"onCopyAll()\"\n        [attr.title]=\"copyLabel()\"\n        [attr.aria-label]=\"copyAriaLabel()\"\n      >\n        <lc-icon name=\"clipboard-document\" size=\"xs\" [decorative]=\"true\" />\n      </button>\n      <button\n        type=\"button\"\n        class=\"lc-log-viewer__tool-btn\"\n        [class.lc-log-viewer__tool-btn--active]=\"showSearch()\"\n        (click)=\"toggleSearch()\"\n        [attr.title]=\"searchLabel()\"\n        [attr.aria-label]=\"searchAriaLabel()\"\n        [attr.aria-expanded]=\"showSearch()\"\n      >\n        <lc-icon name=\"magnifying-glass\" size=\"xs\" [decorative]=\"true\" />\n      </button>\n    </div>\n\n    <div class=\"lc-log-viewer__toolbar-right\">\n      <!-- Level filter pills -->\n      @if (levelCounts().error > 0) {\n        <button\n          type=\"button\"\n          class=\"lc-log-viewer__level-pill lc-log-viewer__level-pill--error\"\n          [class.lc-log-viewer__level-pill--active]=\"internalLevelFilter().has('error')\"\n          [attr.aria-pressed]=\"internalLevelFilter().has('error')\"\n          (click)=\"toggleLevelFilter('error')\"\n        >\n          {{ levelCounts().error }} {{ errorsLabel() }}\n        </button>\n      }\n      @if (levelCounts().warn > 0) {\n        <button\n          type=\"button\"\n          class=\"lc-log-viewer__level-pill lc-log-viewer__level-pill--warn\"\n          [class.lc-log-viewer__level-pill--active]=\"internalLevelFilter().has('warn')\"\n          [attr.aria-pressed]=\"internalLevelFilter().has('warn')\"\n          (click)=\"toggleLevelFilter('warn')\"\n        >\n          {{ levelCounts().warn }} {{ warningsLabel() }}\n        </button>\n      }\n      <span class=\"lc-log-viewer__line-count\">{{ filteredLines().length }} {{ linesLabel() }}</span>\n    </div>\n  </div>\n\n  <!-- Search bar -->\n  @if (showSearch()) {\n    <div class=\"lc-log-viewer__search\">\n      <lc-icon name=\"magnifying-glass\" size=\"xs\" [decorative]=\"true\" />\n      <label class=\"lc-log-viewer__sr-only\" [for]=\"searchInputId\">{{ searchInputLabel() }}</label>\n      <input\n        #searchInput\n        type=\"text\"\n        [id]=\"searchInputId\"\n        class=\"lc-log-viewer__search-input\"\n        [placeholder]=\"searchPlaceholder()\"\n        [value]=\"internalSearch()\"\n        (input)=\"internalSearch.set(getInputValue($event))\"\n      />\n    </div>\n  }\n\n  <!--\n    Log content (virtualized). `role=\"log\"` names the region; live\n    announcements are switched off because rows enter/leave the DOM on every\n    scroll of the virtual window — announcing them would be pure noise.\n  -->\n  <div\n    #scrollContainer\n    class=\"lc-log-viewer__content\"\n    role=\"log\"\n    aria-live=\"off\"\n    [attr.aria-label]=\"outputAriaLabel()\"\n  >\n    <div\n      class=\"lc-log-viewer__spacer\"\n      [style.height.px]=\"visibleRange().totalHeight\"\n    >\n      <div\n        class=\"lc-log-viewer__window\"\n        [style.transform]=\"'translateY(' + (visibleRange().start * lineHeight()) + 'px)'\"\n      >\n        @for (line of visibleLines(); track line._index) {\n          <div\n            class=\"lc-log-viewer__line\"\n            [class.lc-log-viewer__line--clickable]=\"clickableLines()\"\n            [class.lc-log-viewer__line--debug]=\"line.level === 'debug'\"\n            [class.lc-log-viewer__line--info]=\"line.level === 'info'\"\n            [class.lc-log-viewer__line--warn]=\"line.level === 'warn'\"\n            [class.lc-log-viewer__line--error]=\"line.level === 'error'\"\n            [attr.role]=\"clickableLines() ? 'button' : null\"\n            [attr.tabindex]=\"clickableLines() ? 0 : null\"\n            (click)=\"onLineClick(line)\"\n            (keydown)=\"onLineKeydown($event, line)\"\n            (keyup)=\"onLineKeyup($event, line)\"\n          >\n            @if (showLineNumbers()) {\n              <span class=\"lc-log-viewer__line-num\">{{ line._index + 1 }}</span>\n            }\n            @if (showTimestamps() && line.timestamp) {\n              <span class=\"lc-log-viewer__timestamp\">{{ formatTimestamp(line.timestamp) }}</span>\n            }\n            @if (line.level) {\n              <span class=\"lc-log-viewer__level\">{{ line.level.toUpperCase().padEnd(5) }}</span>\n            }\n            @if (line.source) {\n              <span class=\"lc-log-viewer__source\">[{{ line.source }}]</span>\n            }\n            <span\n              class=\"lc-log-viewer__text\"\n              [innerHTML]=\"renderLine(line.text)\"\n            ></span>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n\n  <!-- Jump to bottom button -->\n  @if (!atBottom()) {\n    <button\n      type=\"button\"\n      class=\"lc-log-viewer__jump-bottom\"\n      (click)=\"scrollToBottom()\"\n    >\n      <lc-icon name=\"arrow-down\" size=\"xs\" [decorative]=\"true\" />\n      {{ jumpToBottomLabel() }}\n    </button>\n  }\n</div>\n",
-		styles: [".lc-log-viewer{--lc-log-viewer-line-height: 22px;position:relative;display:flex;flex-direction:column;border:1px solid var(--color-divider, #e5e7eb);border-radius:var(--border-radius-md, .375rem);overflow:hidden;font-family:var(--font-family-mono, \"Menlo\", \"Monaco\", \"Courier New\", monospace);font-size:.8125rem;line-height:1}.lc-log-viewer:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-log-viewer--log{background-color:var(--color-surface);color:var(--color-text-primary)}.lc-log-viewer--terminal{background-color:#1e1e2e;color:#cdd6f4;border-color:#313244}.lc-log-viewer__toolbar{display:flex;align-items:center;justify-content:space-between;padding:.375rem .5rem;border-bottom:1px solid var(--color-divider, #e5e7eb);gap:.5rem;flex-shrink:0}.lc-log-viewer--terminal .lc-log-viewer__toolbar{border-bottom-color:#313244;background-color:#181825}.lc-log-viewer__toolbar-left,.lc-log-viewer__toolbar-right{display:flex;align-items:center;gap:.25rem}.lc-log-viewer__tool-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;border-radius:var(--border-radius-sm, .25rem);cursor:pointer;color:inherit;opacity:.7;transition:opacity .15s,background-color .15s}.lc-log-viewer__tool-btn:hover{opacity:1;background-color:#80808026}.lc-log-viewer__tool-btn--active{opacity:1;background-color:#80808033}.lc-log-viewer__tool-btn:focus-visible{opacity:1;outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-log-viewer__level-pill{position:relative;font-size:.6875rem;padding:.125rem .5rem;border-radius:9999px;border:none;cursor:pointer;font-family:var(--font-family-sans);transition:box-shadow .15s}.lc-log-viewer__level-pill:before{content:\"\";position:absolute;inset-inline:-.125rem;top:calc(50% - 20px);bottom:calc(50% - 20px)}.lc-log-viewer__level-pill--active{box-shadow:inset 0 0 0 1px currentColor}.lc-log-viewer__level-pill--error{background-color:#9d0e0e2e;color:var(--color-on-error-subtle)}.lc-log-viewer--terminal .lc-log-viewer__level-pill--error{background-color:#45202a;color:#f38ba8}.lc-log-viewer__level-pill--warn{background-color:#e1a0402e;color:var(--color-on-warning-subtle)}.lc-log-viewer--terminal .lc-log-viewer__level-pill--warn{background-color:#3d3520;color:#f9e2af}@media(forced-colors:active){.lc-log-viewer__level-pill--active:not(:focus-visible){outline:2px solid Highlight;outline-offset:1px}}.lc-log-viewer__line-count{font-size:.6875rem;color:var(--color-text-tertiary);font-family:var(--font-family-sans);padding:0 .25rem}.lc-log-viewer__search{display:flex;align-items:center;gap:.375rem;padding:.25rem .5rem;border-bottom:1px solid var(--color-divider, #e5e7eb);flex-shrink:0}.lc-log-viewer--terminal .lc-log-viewer__search{border-bottom-color:#313244;background-color:#181825}.lc-log-viewer__search-input{flex:1;background:transparent;border:none;outline:none;color:inherit;font-family:inherit;font-size:inherit}.lc-log-viewer__search-input::placeholder{color:var(--color-text-tertiary);opacity:1}.lc-log-viewer__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-log-viewer__content{flex:1;overflow-y:auto;overflow-x:auto;position:relative;min-height:0}.lc-log-viewer__spacer{position:relative;width:100%}.lc-log-viewer__window{position:absolute;top:0;left:0;right:0}.lc-log-viewer__line{display:flex;align-items:baseline;gap:.625rem;padding:1px .75rem;height:var(--lc-log-viewer-line-height);white-space:nowrap;transition:background-color .1s}.lc-log-viewer__line:hover{background-color:#80808014}.lc-log-viewer__line--clickable{cursor:pointer}.lc-log-viewer__line--clickable:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:-2px}.lc-log-viewer__line--debug{color:var(--color-text-secondary)}.lc-log-viewer--log .lc-log-viewer__line--warn{background-color:#e1a0401f}.lc-log-viewer--terminal .lc-log-viewer__line--warn{background-color:#f9e2af0d}.lc-log-viewer--log .lc-log-viewer__line--error{background-color:#9d0e0e1f}.lc-log-viewer--terminal .lc-log-viewer__line--error{background-color:#f38ba814}.lc-log-viewer__line-num{color:var(--color-text-secondary);min-width:3ch;text-align:right;-webkit-user-select:none;user-select:none}.lc-log-viewer__timestamp{color:var(--color-text-secondary);min-width:12ch}.lc-log-viewer__level{min-width:5ch;font-weight:600}.lc-log-viewer__line--debug .lc-log-viewer__level{color:var(--color-text-tertiary)}.lc-log-viewer__line--info .lc-log-viewer__level{color:var(--color-on-info-subtle)}.lc-log-viewer__line--warn .lc-log-viewer__level{color:var(--color-on-warning-subtle)}.lc-log-viewer__line--error .lc-log-viewer__level{color:var(--color-on-error-subtle)}.lc-log-viewer--terminal .lc-log-viewer__line--debug .lc-log-viewer__level{color:#9399b2}.lc-log-viewer--terminal .lc-log-viewer__line--info .lc-log-viewer__level{color:#89b4fa}.lc-log-viewer--terminal .lc-log-viewer__line--warn .lc-log-viewer__level{color:#f9e2af}.lc-log-viewer--terminal .lc-log-viewer__line--error .lc-log-viewer__level{color:#f38ba8}.lc-log-viewer__source{color:var(--color-text-secondary)}.lc-log-viewer__line--debug .lc-log-viewer__line-num,.lc-log-viewer__line--debug .lc-log-viewer__timestamp,.lc-log-viewer__line--debug .lc-log-viewer__source{color:var(--color-text-tertiary)}.lc-log-viewer--terminal .lc-log-viewer__line-num,.lc-log-viewer--terminal .lc-log-viewer__timestamp,.lc-log-viewer--terminal .lc-log-viewer__source,.lc-log-viewer--terminal .lc-log-viewer__line--debug{color:#a6adc8}.lc-log-viewer--terminal .lc-log-viewer__line--debug .lc-log-viewer__line-num,.lc-log-viewer--terminal .lc-log-viewer__line--debug .lc-log-viewer__timestamp,.lc-log-viewer--terminal .lc-log-viewer__line--debug .lc-log-viewer__source,.lc-log-viewer--terminal .lc-log-viewer__line-count,.lc-log-viewer--terminal .lc-log-viewer__search-input::placeholder{color:#9399b2}.lc-log-viewer__text{flex:1;min-width:0}.lc-log-viewer__match{background-color:var(--color-warning);color:var(--color-on-warning);border-radius:2px;padding:0 1px}.lc-log-viewer--terminal .lc-log-viewer__match{background-color:#f9e2af;color:#1e1e2e}@media(forced-colors:active){.lc-log-viewer__match,.lc-log-viewer--terminal .lc-log-viewer__match{background-color:Mark;color:MarkText}}.lc-log-viewer__jump-bottom{position:absolute;bottom:1rem;left:50%;transform:translate(-50%);display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .75rem;border:1px solid var(--color-divider, #e5e7eb);border-radius:9999px;background-color:var(--color-surface);color:var(--color-text-primary);font-size:.75rem;font-family:var(--font-family-sans);cursor:pointer;box-shadow:var(--elevation-1);z-index:10;transition:background-color .15s}.lc-log-viewer__jump-bottom:hover{background-color:var(--color-surface-hover)}.lc-log-viewer__jump-bottom:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-log-viewer--terminal .lc-log-viewer__jump-bottom{background-color:#313244;border-color:#45475a;color:#cdd6f4}.lc-log-viewer--terminal .lc-log-viewer__jump-bottom:hover{background-color:#45475a}@media(forced-colors:active){.lc-log-viewer__tool-btn:focus-visible,.lc-log-viewer__line--clickable:focus-visible,.lc-log-viewer__jump-bottom:focus-visible{outline-color:Highlight}}.ansi-bold{font-weight:700}.ansi-italic{font-style:italic}.ansi-black{color:#45475a}.ansi-red{color:#f38ba8}.ansi-green{color:#a6e3a1}.ansi-yellow{color:#f9e2af}.ansi-blue{color:#89b4fa}.ansi-magenta{color:#cba6f7}.ansi-cyan{color:#94e2d5}.ansi-white{color:#cdd6f4}.ansi-gray{color:#9399b2}.ansi-bright-red{color:#eba0ac}.ansi-bright-green{color:#a6e3a1}.ansi-bright-yellow{color:#f9e2af}.ansi-bright-blue{color:#89dceb}.ansi-bright-magenta{color:#f5c2e7}.ansi-bright-cyan{color:#94e2d5}.ansi-bright-white{color:#bac2de}:root.light .lc-log-viewer--log .ansi-black{color:#4c4f69}:root.light .lc-log-viewer--log .ansi-red{color:#d20f39}:root.light .lc-log-viewer--log .ansi-green{color:#40a02b}:root.light .lc-log-viewer--log .ansi-yellow{color:#df8e1d}:root.light .lc-log-viewer--log .ansi-blue{color:#1e66f5}:root.light .lc-log-viewer--log .ansi-magenta{color:#8839ef}:root.light .lc-log-viewer--log .ansi-cyan{color:#179299}:root.light .lc-log-viewer--log .ansi-white{color:#6c6f85}:root.light .lc-log-viewer--log .ansi-gray{color:#5c5f77}:root.light .lc-log-viewer--log .ansi-bright-red{color:#e64553}:root.light .lc-log-viewer--log .ansi-bright-green{color:#40a02b}:root.light .lc-log-viewer--log .ansi-bright-yellow{color:#df8e1d}:root.light .lc-log-viewer--log .ansi-bright-blue{color:#04a5e5}:root.light .lc-log-viewer--log .ansi-bright-magenta{color:#ea76cb}:root.light .lc-log-viewer--log .ansi-bright-cyan{color:#179299}:root.light .lc-log-viewer--log .ansi-bright-white{color:#5c5f77}@media(prefers-color-scheme:light){:root.system:not(.dark) .lc-log-viewer--log .ansi-black{color:#4c4f69}:root.system:not(.dark) .lc-log-viewer--log .ansi-red{color:#d20f39}:root.system:not(.dark) .lc-log-viewer--log .ansi-green{color:#40a02b}:root.system:not(.dark) .lc-log-viewer--log .ansi-yellow{color:#df8e1d}:root.system:not(.dark) .lc-log-viewer--log .ansi-blue{color:#1e66f5}:root.system:not(.dark) .lc-log-viewer--log .ansi-magenta{color:#8839ef}:root.system:not(.dark) .lc-log-viewer--log .ansi-cyan{color:#179299}:root.system:not(.dark) .lc-log-viewer--log .ansi-white{color:#6c6f85}:root.system:not(.dark) .lc-log-viewer--log .ansi-gray{color:#5c5f77}:root.system:not(.dark) .lc-log-viewer--log .ansi-bright-red{color:#e64553}:root.system:not(.dark) .lc-log-viewer--log .ansi-bright-green{color:#40a02b}:root.system:not(.dark) .lc-log-viewer--log .ansi-bright-yellow{color:#df8e1d}:root.system:not(.dark) .lc-log-viewer--log .ansi-bright-blue{color:#04a5e5}:root.system:not(.dark) .lc-log-viewer--log .ansi-bright-magenta{color:#ea76cb}:root.system:not(.dark) .lc-log-viewer--log .ansi-bright-cyan{color:#179299}:root.system:not(.dark) .lc-log-viewer--log .ansi-bright-white{color:#5c5f77}}.lc-log-viewer--terminal .lc-log-viewer__content::-webkit-scrollbar{width:8px;height:8px}.lc-log-viewer--terminal .lc-log-viewer__content::-webkit-scrollbar-track{background:#181825}.lc-log-viewer--terminal .lc-log-viewer__content::-webkit-scrollbar-thumb{background:#45475a;border-radius:4px}.lc-log-viewer--terminal .lc-log-viewer__content::-webkit-scrollbar-thumb:hover{background:#585b70}\n"],
+		styles: [".lc-log-viewer{--lc-log-viewer-line-height: 22px;position:relative;display:flex;flex-direction:column;border:1px solid var(--color-divider, #e5e7eb);border-radius:var(--border-radius-md, .375rem);overflow:hidden;font-family:var(--font-family-mono, \"Menlo\", \"Monaco\", \"Courier New\", monospace);font-size:.8125rem;line-height:1}.lc-log-viewer:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-log-viewer--log{background-color:var(--color-surface);color:var(--color-text-primary)}.lc-log-viewer--terminal{background-color:#1e1e2e;color:#cdd6f4;border-color:#313244}.lc-log-viewer__toolbar{display:flex;align-items:center;justify-content:space-between;padding:.375rem .5rem;border-bottom:1px solid var(--color-divider, #e5e7eb);gap:.5rem;flex-shrink:0}.lc-log-viewer--terminal .lc-log-viewer__toolbar{border-bottom-color:#313244;background-color:#181825}.lc-log-viewer__toolbar-left,.lc-log-viewer__toolbar-right{display:flex;align-items:center;gap:.25rem}.lc-log-viewer__tool-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;border-radius:var(--border-radius-sm, .25rem);cursor:pointer;color:inherit;opacity:.7;transition:opacity .15s,background-color .15s}.lc-log-viewer__tool-btn:hover{opacity:1;background-color:#80808026}.lc-log-viewer__tool-btn--active{opacity:1;background-color:#80808033}.lc-log-viewer__tool-btn:focus-visible{opacity:1;outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-log-viewer__level-pill{position:relative;font-size:.6875rem;padding:.125rem .5rem;border-radius:9999px;border:none;cursor:pointer;font-family:var(--font-family-sans);transition:box-shadow .15s}.lc-log-viewer__level-pill:before{content:\"\";position:absolute;inset-inline:-.125rem;top:calc(50% - 20px);bottom:calc(50% - 20px)}.lc-log-viewer__level-pill--active{box-shadow:inset 0 0 0 1px currentColor}.lc-log-viewer__level-pill:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-log-viewer__level-pill--error{background-color:#9d0e0e2e;color:var(--color-on-error-subtle)}.lc-log-viewer--terminal .lc-log-viewer__level-pill--error{background-color:#45202a;color:#f38ba8}.lc-log-viewer__level-pill--warn{background-color:#e1a0402e;color:var(--color-on-warning-subtle)}.lc-log-viewer--terminal .lc-log-viewer__level-pill--warn{background-color:#3d3520;color:#f9e2af}@media(forced-colors:active){.lc-log-viewer__level-pill--active:not(:focus-visible){outline:2px solid Highlight;outline-offset:1px}}.lc-log-viewer__line-count{font-size:.6875rem;color:var(--color-text-tertiary);font-family:var(--font-family-sans);padding:0 .25rem}.lc-log-viewer__search{display:flex;align-items:center;gap:.375rem;padding:.25rem .5rem;border-bottom:1px solid var(--color-divider, #e5e7eb);flex-shrink:0}.lc-log-viewer--terminal .lc-log-viewer__search{border-bottom-color:#313244;background-color:#181825}.lc-log-viewer__search-input{flex:1;background:transparent;border:none;outline:none;color:inherit;font-family:inherit;font-size:inherit}.lc-log-viewer__search-input::placeholder{color:var(--color-text-tertiary);opacity:1}.lc-log-viewer__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-log-viewer__content{flex:1;overflow-y:auto;overflow-x:auto;position:relative;min-height:0}.lc-log-viewer__spacer{position:relative;width:100%}.lc-log-viewer__window{position:absolute;top:0;left:0;right:0}.lc-log-viewer__line{display:flex;align-items:baseline;gap:.625rem;padding:1px .75rem;height:var(--lc-log-viewer-line-height);white-space:nowrap;transition:background-color .1s}.lc-log-viewer__line:hover{background-color:#80808014}.lc-log-viewer__line--clickable{cursor:pointer}.lc-log-viewer__line--clickable:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:-2px}.lc-log-viewer__line--debug{color:var(--color-text-secondary)}.lc-log-viewer--log .lc-log-viewer__line--warn{background-color:#e1a0401f}.lc-log-viewer--terminal .lc-log-viewer__line--warn{background-color:#f9e2af0d}.lc-log-viewer--log .lc-log-viewer__line--error{background-color:#9d0e0e1f}.lc-log-viewer--terminal .lc-log-viewer__line--error{background-color:#f38ba814}.lc-log-viewer__line-num{color:var(--color-text-secondary);min-width:3ch;text-align:right;-webkit-user-select:none;user-select:none}.lc-log-viewer__timestamp{color:var(--color-text-secondary);min-width:12ch}.lc-log-viewer__level{min-width:5ch;font-weight:600}.lc-log-viewer__line--debug .lc-log-viewer__level{color:var(--color-text-tertiary)}.lc-log-viewer__line--info .lc-log-viewer__level{color:var(--color-on-info-subtle)}.lc-log-viewer__line--warn .lc-log-viewer__level{color:var(--color-on-warning-subtle)}.lc-log-viewer__line--error .lc-log-viewer__level{color:var(--color-on-error-subtle)}.lc-log-viewer--terminal .lc-log-viewer__line--debug .lc-log-viewer__level{color:#9399b2}.lc-log-viewer--terminal .lc-log-viewer__line--info .lc-log-viewer__level{color:#89b4fa}.lc-log-viewer--terminal .lc-log-viewer__line--warn .lc-log-viewer__level{color:#f9e2af}.lc-log-viewer--terminal .lc-log-viewer__line--error .lc-log-viewer__level{color:#f38ba8}.lc-log-viewer__source{color:var(--color-text-secondary)}.lc-log-viewer__line--debug .lc-log-viewer__line-num,.lc-log-viewer__line--debug .lc-log-viewer__timestamp,.lc-log-viewer__line--debug .lc-log-viewer__source{color:var(--color-text-tertiary)}.lc-log-viewer--terminal .lc-log-viewer__line-num,.lc-log-viewer--terminal .lc-log-viewer__timestamp,.lc-log-viewer--terminal .lc-log-viewer__source,.lc-log-viewer--terminal .lc-log-viewer__line--debug{color:#a6adc8}.lc-log-viewer--terminal .lc-log-viewer__line--debug .lc-log-viewer__line-num,.lc-log-viewer--terminal .lc-log-viewer__line--debug .lc-log-viewer__timestamp,.lc-log-viewer--terminal .lc-log-viewer__line--debug .lc-log-viewer__source,.lc-log-viewer--terminal .lc-log-viewer__line-count,.lc-log-viewer--terminal .lc-log-viewer__search-input::placeholder{color:#9399b2}.lc-log-viewer__text{flex:1;min-width:0}.lc-log-viewer__match{background-color:var(--color-warning);color:var(--color-on-warning);border-radius:2px;padding:0 1px}.lc-log-viewer--terminal .lc-log-viewer__match{background-color:#f9e2af;color:#1e1e2e}@media(forced-colors:active){.lc-log-viewer__match,.lc-log-viewer--terminal .lc-log-viewer__match{background-color:Mark;color:MarkText}}.lc-log-viewer__jump-bottom{position:absolute;bottom:1rem;left:50%;transform:translate(-50%);display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .75rem;border:1px solid var(--color-divider, #e5e7eb);border-radius:9999px;background-color:var(--color-surface);color:var(--color-text-primary);font-size:.75rem;font-family:var(--font-family-sans);cursor:pointer;box-shadow:var(--elevation-1);z-index:10;transition:background-color .15s}.lc-log-viewer__jump-bottom:hover{background-color:var(--color-surface-hover)}.lc-log-viewer__jump-bottom:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-log-viewer--terminal .lc-log-viewer__jump-bottom{background-color:#313244;border-color:#45475a;color:#cdd6f4}.lc-log-viewer--terminal .lc-log-viewer__jump-bottom:hover{background-color:#45475a}@media(forced-colors:active){.lc-log-viewer__tool-btn:focus-visible,.lc-log-viewer__level-pill:focus-visible,.lc-log-viewer__line--clickable:focus-visible,.lc-log-viewer__jump-bottom:focus-visible{outline-color:Highlight}}.ansi-bold{font-weight:700}.ansi-italic{font-style:italic}.ansi-black{color:#45475a}.ansi-red{color:#f38ba8}.ansi-green{color:#a6e3a1}.ansi-yellow{color:#f9e2af}.ansi-blue{color:#89b4fa}.ansi-magenta{color:#cba6f7}.ansi-cyan{color:#94e2d5}.ansi-white{color:#cdd6f4}.ansi-gray{color:#9399b2}.ansi-bright-red{color:#eba0ac}.ansi-bright-green{color:#a6e3a1}.ansi-bright-yellow{color:#f9e2af}.ansi-bright-blue{color:#89dceb}.ansi-bright-magenta{color:#f5c2e7}.ansi-bright-cyan{color:#94e2d5}.ansi-bright-white{color:#bac2de}:root.light .lc-log-viewer--log .ansi-black{color:#4c4f69}:root.light .lc-log-viewer--log .ansi-red{color:#d20f39}:root.light .lc-log-viewer--log .ansi-green{color:#40a02b}:root.light .lc-log-viewer--log .ansi-yellow{color:#df8e1d}:root.light .lc-log-viewer--log .ansi-blue{color:#1e66f5}:root.light .lc-log-viewer--log .ansi-magenta{color:#8839ef}:root.light .lc-log-viewer--log .ansi-cyan{color:#179299}:root.light .lc-log-viewer--log .ansi-white{color:#6c6f85}:root.light .lc-log-viewer--log .ansi-gray{color:#5c5f77}:root.light .lc-log-viewer--log .ansi-bright-red{color:#e64553}:root.light .lc-log-viewer--log .ansi-bright-green{color:#40a02b}:root.light .lc-log-viewer--log .ansi-bright-yellow{color:#df8e1d}:root.light .lc-log-viewer--log .ansi-bright-blue{color:#04a5e5}:root.light .lc-log-viewer--log .ansi-bright-magenta{color:#ea76cb}:root.light .lc-log-viewer--log .ansi-bright-cyan{color:#179299}:root.light .lc-log-viewer--log .ansi-bright-white{color:#5c5f77}@media(prefers-color-scheme:light){:root.system:not(.dark) .lc-log-viewer--log .ansi-black{color:#4c4f69}:root.system:not(.dark) .lc-log-viewer--log .ansi-red{color:#d20f39}:root.system:not(.dark) .lc-log-viewer--log .ansi-green{color:#40a02b}:root.system:not(.dark) .lc-log-viewer--log .ansi-yellow{color:#df8e1d}:root.system:not(.dark) .lc-log-viewer--log .ansi-blue{color:#1e66f5}:root.system:not(.dark) .lc-log-viewer--log .ansi-magenta{color:#8839ef}:root.system:not(.dark) .lc-log-viewer--log .ansi-cyan{color:#179299}:root.system:not(.dark) .lc-log-viewer--log .ansi-white{color:#6c6f85}:root.system:not(.dark) .lc-log-viewer--log .ansi-gray{color:#5c5f77}:root.system:not(.dark) .lc-log-viewer--log .ansi-bright-red{color:#e64553}:root.system:not(.dark) .lc-log-viewer--log .ansi-bright-green{color:#40a02b}:root.system:not(.dark) .lc-log-viewer--log .ansi-bright-yellow{color:#df8e1d}:root.system:not(.dark) .lc-log-viewer--log .ansi-bright-blue{color:#04a5e5}:root.system:not(.dark) .lc-log-viewer--log .ansi-bright-magenta{color:#ea76cb}:root.system:not(.dark) .lc-log-viewer--log .ansi-bright-cyan{color:#179299}:root.system:not(.dark) .lc-log-viewer--log .ansi-bright-white{color:#5c5f77}}.lc-log-viewer--terminal .lc-log-viewer__content::-webkit-scrollbar{width:8px;height:8px}.lc-log-viewer--terminal .lc-log-viewer__content::-webkit-scrollbar-track{background:#181825}.lc-log-viewer--terminal .lc-log-viewer__content::-webkit-scrollbar-thumb{background:#45475a;border-radius:4px}.lc-log-viewer--terminal .lc-log-viewer__content::-webkit-scrollbar-thumb:hover{background:#585b70}\n"],
 		dependencies: [{
 			kind: "component",
 			type: IconComponent,
@@ -558,7 +558,7 @@ i0.ɵɵngDeclareClassMetadata({
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			encapsulation: ViewEncapsulation.None,
 			template: "<div\n  [class]=\"containerClasses()\"\n  [style.height]=\"height()\"\n  tabindex=\"0\"\n  (keydown)=\"onKeydown($event)\"\n>\n  <!-- Toolbar -->\n  <div class=\"lc-log-viewer__toolbar\">\n    <div class=\"lc-log-viewer__toolbar-left\">\n      @if (stream$()) {\n        <button\n          type=\"button\"\n          class=\"lc-log-viewer__tool-btn\"\n          [class.lc-log-viewer__tool-btn--active]=\"paused()\"\n          (click)=\"togglePause()\"\n          [title]=\"paused() ? resumeLabel() : pauseLabel()\"\n          [attr.aria-label]=\"paused() ? resumeAriaLabel() : pauseAriaLabel()\"\n          [attr.aria-pressed]=\"paused()\"\n        >\n          <lc-icon [name]=\"paused() ? 'player-play' : 'player-pause'\" size=\"xs\" [decorative]=\"true\" />\n        </button>\n      }\n      <button\n        type=\"button\"\n        class=\"lc-log-viewer__tool-btn\"\n        (click)=\"clearBuffer()\"\n        [attr.title]=\"clearLabel()\"\n        [attr.aria-label]=\"clearAriaLabel()\"\n      >\n        <lc-icon name=\"trash\" size=\"xs\" [decorative]=\"true\" />\n      </button>\n      <button\n        type=\"button\"\n        class=\"lc-log-viewer__tool-btn\"\n        (click)=\"onCopyAll()\"\n        [attr.title]=\"copyLabel()\"\n        [attr.aria-label]=\"copyAriaLabel()\"\n      >\n        <lc-icon name=\"clipboard-document\" size=\"xs\" [decorative]=\"true\" />\n      </button>\n      <button\n        type=\"button\"\n        class=\"lc-log-viewer__tool-btn\"\n        [class.lc-log-viewer__tool-btn--active]=\"showSearch()\"\n        (click)=\"toggleSearch()\"\n        [attr.title]=\"searchLabel()\"\n        [attr.aria-label]=\"searchAriaLabel()\"\n        [attr.aria-expanded]=\"showSearch()\"\n      >\n        <lc-icon name=\"magnifying-glass\" size=\"xs\" [decorative]=\"true\" />\n      </button>\n    </div>\n\n    <div class=\"lc-log-viewer__toolbar-right\">\n      <!-- Level filter pills -->\n      @if (levelCounts().error > 0) {\n        <button\n          type=\"button\"\n          class=\"lc-log-viewer__level-pill lc-log-viewer__level-pill--error\"\n          [class.lc-log-viewer__level-pill--active]=\"internalLevelFilter().has('error')\"\n          [attr.aria-pressed]=\"internalLevelFilter().has('error')\"\n          (click)=\"toggleLevelFilter('error')\"\n        >\n          {{ levelCounts().error }} {{ errorsLabel() }}\n        </button>\n      }\n      @if (levelCounts().warn > 0) {\n        <button\n          type=\"button\"\n          class=\"lc-log-viewer__level-pill lc-log-viewer__level-pill--warn\"\n          [class.lc-log-viewer__level-pill--active]=\"internalLevelFilter().has('warn')\"\n          [attr.aria-pressed]=\"internalLevelFilter().has('warn')\"\n          (click)=\"toggleLevelFilter('warn')\"\n        >\n          {{ levelCounts().warn }} {{ warningsLabel() }}\n        </button>\n      }\n      <span class=\"lc-log-viewer__line-count\">{{ filteredLines().length }} {{ linesLabel() }}</span>\n    </div>\n  </div>\n\n  <!-- Search bar -->\n  @if (showSearch()) {\n    <div class=\"lc-log-viewer__search\">\n      <lc-icon name=\"magnifying-glass\" size=\"xs\" [decorative]=\"true\" />\n      <label class=\"lc-log-viewer__sr-only\" [for]=\"searchInputId\">{{ searchInputLabel() }}</label>\n      <input\n        #searchInput\n        type=\"text\"\n        [id]=\"searchInputId\"\n        class=\"lc-log-viewer__search-input\"\n        [placeholder]=\"searchPlaceholder()\"\n        [value]=\"internalSearch()\"\n        (input)=\"internalSearch.set(getInputValue($event))\"\n      />\n    </div>\n  }\n\n  <!--\n    Log content (virtualized). `role=\"log\"` names the region; live\n    announcements are switched off because rows enter/leave the DOM on every\n    scroll of the virtual window — announcing them would be pure noise.\n  -->\n  <div\n    #scrollContainer\n    class=\"lc-log-viewer__content\"\n    role=\"log\"\n    aria-live=\"off\"\n    [attr.aria-label]=\"outputAriaLabel()\"\n  >\n    <div\n      class=\"lc-log-viewer__spacer\"\n      [style.height.px]=\"visibleRange().totalHeight\"\n    >\n      <div\n        class=\"lc-log-viewer__window\"\n        [style.transform]=\"'translateY(' + (visibleRange().start * lineHeight()) + 'px)'\"\n      >\n        @for (line of visibleLines(); track line._index) {\n          <div\n            class=\"lc-log-viewer__line\"\n            [class.lc-log-viewer__line--clickable]=\"clickableLines()\"\n            [class.lc-log-viewer__line--debug]=\"line.level === 'debug'\"\n            [class.lc-log-viewer__line--info]=\"line.level === 'info'\"\n            [class.lc-log-viewer__line--warn]=\"line.level === 'warn'\"\n            [class.lc-log-viewer__line--error]=\"line.level === 'error'\"\n            [attr.role]=\"clickableLines() ? 'button' : null\"\n            [attr.tabindex]=\"clickableLines() ? 0 : null\"\n            (click)=\"onLineClick(line)\"\n            (keydown)=\"onLineKeydown($event, line)\"\n            (keyup)=\"onLineKeyup($event, line)\"\n          >\n            @if (showLineNumbers()) {\n              <span class=\"lc-log-viewer__line-num\">{{ line._index + 1 }}</span>\n            }\n            @if (showTimestamps() && line.timestamp) {\n              <span class=\"lc-log-viewer__timestamp\">{{ formatTimestamp(line.timestamp) }}</span>\n            }\n            @if (line.level) {\n              <span class=\"lc-log-viewer__level\">{{ line.level.toUpperCase().padEnd(5) }}</span>\n            }\n            @if (line.source) {\n              <span class=\"lc-log-viewer__source\">[{{ line.source }}]</span>\n            }\n            <span\n              class=\"lc-log-viewer__text\"\n              [innerHTML]=\"renderLine(line.text)\"\n            ></span>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n\n  <!-- Jump to bottom button -->\n  @if (!atBottom()) {\n    <button\n      type=\"button\"\n      class=\"lc-log-viewer__jump-bottom\"\n      (click)=\"scrollToBottom()\"\n    >\n      <lc-icon name=\"arrow-down\" size=\"xs\" [decorative]=\"true\" />\n      {{ jumpToBottomLabel() }}\n    </button>\n  }\n</div>\n",
-			styles: [".lc-log-viewer{--lc-log-viewer-line-height: 22px;position:relative;display:flex;flex-direction:column;border:1px solid var(--color-divider, #e5e7eb);border-radius:var(--border-radius-md, .375rem);overflow:hidden;font-family:var(--font-family-mono, \"Menlo\", \"Monaco\", \"Courier New\", monospace);font-size:.8125rem;line-height:1}.lc-log-viewer:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-log-viewer--log{background-color:var(--color-surface);color:var(--color-text-primary)}.lc-log-viewer--terminal{background-color:#1e1e2e;color:#cdd6f4;border-color:#313244}.lc-log-viewer__toolbar{display:flex;align-items:center;justify-content:space-between;padding:.375rem .5rem;border-bottom:1px solid var(--color-divider, #e5e7eb);gap:.5rem;flex-shrink:0}.lc-log-viewer--terminal .lc-log-viewer__toolbar{border-bottom-color:#313244;background-color:#181825}.lc-log-viewer__toolbar-left,.lc-log-viewer__toolbar-right{display:flex;align-items:center;gap:.25rem}.lc-log-viewer__tool-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;border-radius:var(--border-radius-sm, .25rem);cursor:pointer;color:inherit;opacity:.7;transition:opacity .15s,background-color .15s}.lc-log-viewer__tool-btn:hover{opacity:1;background-color:#80808026}.lc-log-viewer__tool-btn--active{opacity:1;background-color:#80808033}.lc-log-viewer__tool-btn:focus-visible{opacity:1;outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-log-viewer__level-pill{position:relative;font-size:.6875rem;padding:.125rem .5rem;border-radius:9999px;border:none;cursor:pointer;font-family:var(--font-family-sans);transition:box-shadow .15s}.lc-log-viewer__level-pill:before{content:\"\";position:absolute;inset-inline:-.125rem;top:calc(50% - 20px);bottom:calc(50% - 20px)}.lc-log-viewer__level-pill--active{box-shadow:inset 0 0 0 1px currentColor}.lc-log-viewer__level-pill--error{background-color:#9d0e0e2e;color:var(--color-on-error-subtle)}.lc-log-viewer--terminal .lc-log-viewer__level-pill--error{background-color:#45202a;color:#f38ba8}.lc-log-viewer__level-pill--warn{background-color:#e1a0402e;color:var(--color-on-warning-subtle)}.lc-log-viewer--terminal .lc-log-viewer__level-pill--warn{background-color:#3d3520;color:#f9e2af}@media(forced-colors:active){.lc-log-viewer__level-pill--active:not(:focus-visible){outline:2px solid Highlight;outline-offset:1px}}.lc-log-viewer__line-count{font-size:.6875rem;color:var(--color-text-tertiary);font-family:var(--font-family-sans);padding:0 .25rem}.lc-log-viewer__search{display:flex;align-items:center;gap:.375rem;padding:.25rem .5rem;border-bottom:1px solid var(--color-divider, #e5e7eb);flex-shrink:0}.lc-log-viewer--terminal .lc-log-viewer__search{border-bottom-color:#313244;background-color:#181825}.lc-log-viewer__search-input{flex:1;background:transparent;border:none;outline:none;color:inherit;font-family:inherit;font-size:inherit}.lc-log-viewer__search-input::placeholder{color:var(--color-text-tertiary);opacity:1}.lc-log-viewer__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-log-viewer__content{flex:1;overflow-y:auto;overflow-x:auto;position:relative;min-height:0}.lc-log-viewer__spacer{position:relative;width:100%}.lc-log-viewer__window{position:absolute;top:0;left:0;right:0}.lc-log-viewer__line{display:flex;align-items:baseline;gap:.625rem;padding:1px .75rem;height:var(--lc-log-viewer-line-height);white-space:nowrap;transition:background-color .1s}.lc-log-viewer__line:hover{background-color:#80808014}.lc-log-viewer__line--clickable{cursor:pointer}.lc-log-viewer__line--clickable:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:-2px}.lc-log-viewer__line--debug{color:var(--color-text-secondary)}.lc-log-viewer--log .lc-log-viewer__line--warn{background-color:#e1a0401f}.lc-log-viewer--terminal .lc-log-viewer__line--warn{background-color:#f9e2af0d}.lc-log-viewer--log .lc-log-viewer__line--error{background-color:#9d0e0e1f}.lc-log-viewer--terminal .lc-log-viewer__line--error{background-color:#f38ba814}.lc-log-viewer__line-num{color:var(--color-text-secondary);min-width:3ch;text-align:right;-webkit-user-select:none;user-select:none}.lc-log-viewer__timestamp{color:var(--color-text-secondary);min-width:12ch}.lc-log-viewer__level{min-width:5ch;font-weight:600}.lc-log-viewer__line--debug .lc-log-viewer__level{color:var(--color-text-tertiary)}.lc-log-viewer__line--info .lc-log-viewer__level{color:var(--color-on-info-subtle)}.lc-log-viewer__line--warn .lc-log-viewer__level{color:var(--color-on-warning-subtle)}.lc-log-viewer__line--error .lc-log-viewer__level{color:var(--color-on-error-subtle)}.lc-log-viewer--terminal .lc-log-viewer__line--debug .lc-log-viewer__level{color:#9399b2}.lc-log-viewer--terminal .lc-log-viewer__line--info .lc-log-viewer__level{color:#89b4fa}.lc-log-viewer--terminal .lc-log-viewer__line--warn .lc-log-viewer__level{color:#f9e2af}.lc-log-viewer--terminal .lc-log-viewer__line--error .lc-log-viewer__level{color:#f38ba8}.lc-log-viewer__source{color:var(--color-text-secondary)}.lc-log-viewer__line--debug .lc-log-viewer__line-num,.lc-log-viewer__line--debug .lc-log-viewer__timestamp,.lc-log-viewer__line--debug .lc-log-viewer__source{color:var(--color-text-tertiary)}.lc-log-viewer--terminal .lc-log-viewer__line-num,.lc-log-viewer--terminal .lc-log-viewer__timestamp,.lc-log-viewer--terminal .lc-log-viewer__source,.lc-log-viewer--terminal .lc-log-viewer__line--debug{color:#a6adc8}.lc-log-viewer--terminal .lc-log-viewer__line--debug .lc-log-viewer__line-num,.lc-log-viewer--terminal .lc-log-viewer__line--debug .lc-log-viewer__timestamp,.lc-log-viewer--terminal .lc-log-viewer__line--debug .lc-log-viewer__source,.lc-log-viewer--terminal .lc-log-viewer__line-count,.lc-log-viewer--terminal .lc-log-viewer__search-input::placeholder{color:#9399b2}.lc-log-viewer__text{flex:1;min-width:0}.lc-log-viewer__match{background-color:var(--color-warning);color:var(--color-on-warning);border-radius:2px;padding:0 1px}.lc-log-viewer--terminal .lc-log-viewer__match{background-color:#f9e2af;color:#1e1e2e}@media(forced-colors:active){.lc-log-viewer__match,.lc-log-viewer--terminal .lc-log-viewer__match{background-color:Mark;color:MarkText}}.lc-log-viewer__jump-bottom{position:absolute;bottom:1rem;left:50%;transform:translate(-50%);display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .75rem;border:1px solid var(--color-divider, #e5e7eb);border-radius:9999px;background-color:var(--color-surface);color:var(--color-text-primary);font-size:.75rem;font-family:var(--font-family-sans);cursor:pointer;box-shadow:var(--elevation-1);z-index:10;transition:background-color .15s}.lc-log-viewer__jump-bottom:hover{background-color:var(--color-surface-hover)}.lc-log-viewer__jump-bottom:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-log-viewer--terminal .lc-log-viewer__jump-bottom{background-color:#313244;border-color:#45475a;color:#cdd6f4}.lc-log-viewer--terminal .lc-log-viewer__jump-bottom:hover{background-color:#45475a}@media(forced-colors:active){.lc-log-viewer__tool-btn:focus-visible,.lc-log-viewer__line--clickable:focus-visible,.lc-log-viewer__jump-bottom:focus-visible{outline-color:Highlight}}.ansi-bold{font-weight:700}.ansi-italic{font-style:italic}.ansi-black{color:#45475a}.ansi-red{color:#f38ba8}.ansi-green{color:#a6e3a1}.ansi-yellow{color:#f9e2af}.ansi-blue{color:#89b4fa}.ansi-magenta{color:#cba6f7}.ansi-cyan{color:#94e2d5}.ansi-white{color:#cdd6f4}.ansi-gray{color:#9399b2}.ansi-bright-red{color:#eba0ac}.ansi-bright-green{color:#a6e3a1}.ansi-bright-yellow{color:#f9e2af}.ansi-bright-blue{color:#89dceb}.ansi-bright-magenta{color:#f5c2e7}.ansi-bright-cyan{color:#94e2d5}.ansi-bright-white{color:#bac2de}:root.light .lc-log-viewer--log .ansi-black{color:#4c4f69}:root.light .lc-log-viewer--log .ansi-red{color:#d20f39}:root.light .lc-log-viewer--log .ansi-green{color:#40a02b}:root.light .lc-log-viewer--log .ansi-yellow{color:#df8e1d}:root.light .lc-log-viewer--log .ansi-blue{color:#1e66f5}:root.light .lc-log-viewer--log .ansi-magenta{color:#8839ef}:root.light .lc-log-viewer--log .ansi-cyan{color:#179299}:root.light .lc-log-viewer--log .ansi-white{color:#6c6f85}:root.light .lc-log-viewer--log .ansi-gray{color:#5c5f77}:root.light .lc-log-viewer--log .ansi-bright-red{color:#e64553}:root.light .lc-log-viewer--log .ansi-bright-green{color:#40a02b}:root.light .lc-log-viewer--log .ansi-bright-yellow{color:#df8e1d}:root.light .lc-log-viewer--log .ansi-bright-blue{color:#04a5e5}:root.light .lc-log-viewer--log .ansi-bright-magenta{color:#ea76cb}:root.light .lc-log-viewer--log .ansi-bright-cyan{color:#179299}:root.light .lc-log-viewer--log .ansi-bright-white{color:#5c5f77}@media(prefers-color-scheme:light){:root.system:not(.dark) .lc-log-viewer--log .ansi-black{color:#4c4f69}:root.system:not(.dark) .lc-log-viewer--log .ansi-red{color:#d20f39}:root.system:not(.dark) .lc-log-viewer--log .ansi-green{color:#40a02b}:root.system:not(.dark) .lc-log-viewer--log .ansi-yellow{color:#df8e1d}:root.system:not(.dark) .lc-log-viewer--log .ansi-blue{color:#1e66f5}:root.system:not(.dark) .lc-log-viewer--log .ansi-magenta{color:#8839ef}:root.system:not(.dark) .lc-log-viewer--log .ansi-cyan{color:#179299}:root.system:not(.dark) .lc-log-viewer--log .ansi-white{color:#6c6f85}:root.system:not(.dark) .lc-log-viewer--log .ansi-gray{color:#5c5f77}:root.system:not(.dark) .lc-log-viewer--log .ansi-bright-red{color:#e64553}:root.system:not(.dark) .lc-log-viewer--log .ansi-bright-green{color:#40a02b}:root.system:not(.dark) .lc-log-viewer--log .ansi-bright-yellow{color:#df8e1d}:root.system:not(.dark) .lc-log-viewer--log .ansi-bright-blue{color:#04a5e5}:root.system:not(.dark) .lc-log-viewer--log .ansi-bright-magenta{color:#ea76cb}:root.system:not(.dark) .lc-log-viewer--log .ansi-bright-cyan{color:#179299}:root.system:not(.dark) .lc-log-viewer--log .ansi-bright-white{color:#5c5f77}}.lc-log-viewer--terminal .lc-log-viewer__content::-webkit-scrollbar{width:8px;height:8px}.lc-log-viewer--terminal .lc-log-viewer__content::-webkit-scrollbar-track{background:#181825}.lc-log-viewer--terminal .lc-log-viewer__content::-webkit-scrollbar-thumb{background:#45475a;border-radius:4px}.lc-log-viewer--terminal .lc-log-viewer__content::-webkit-scrollbar-thumb:hover{background:#585b70}\n"]
+			styles: [".lc-log-viewer{--lc-log-viewer-line-height: 22px;position:relative;display:flex;flex-direction:column;border:1px solid var(--color-divider, #e5e7eb);border-radius:var(--border-radius-md, .375rem);overflow:hidden;font-family:var(--font-family-mono, \"Menlo\", \"Monaco\", \"Courier New\", monospace);font-size:.8125rem;line-height:1}.lc-log-viewer:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-log-viewer--log{background-color:var(--color-surface);color:var(--color-text-primary)}.lc-log-viewer--terminal{background-color:#1e1e2e;color:#cdd6f4;border-color:#313244}.lc-log-viewer__toolbar{display:flex;align-items:center;justify-content:space-between;padding:.375rem .5rem;border-bottom:1px solid var(--color-divider, #e5e7eb);gap:.5rem;flex-shrink:0}.lc-log-viewer--terminal .lc-log-viewer__toolbar{border-bottom-color:#313244;background-color:#181825}.lc-log-viewer__toolbar-left,.lc-log-viewer__toolbar-right{display:flex;align-items:center;gap:.25rem}.lc-log-viewer__tool-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;border-radius:var(--border-radius-sm, .25rem);cursor:pointer;color:inherit;opacity:.7;transition:opacity .15s,background-color .15s}.lc-log-viewer__tool-btn:hover{opacity:1;background-color:#80808026}.lc-log-viewer__tool-btn--active{opacity:1;background-color:#80808033}.lc-log-viewer__tool-btn:focus-visible{opacity:1;outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-log-viewer__level-pill{position:relative;font-size:.6875rem;padding:.125rem .5rem;border-radius:9999px;border:none;cursor:pointer;font-family:var(--font-family-sans);transition:box-shadow .15s}.lc-log-viewer__level-pill:before{content:\"\";position:absolute;inset-inline:-.125rem;top:calc(50% - 20px);bottom:calc(50% - 20px)}.lc-log-viewer__level-pill--active{box-shadow:inset 0 0 0 1px currentColor}.lc-log-viewer__level-pill:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-log-viewer__level-pill--error{background-color:#9d0e0e2e;color:var(--color-on-error-subtle)}.lc-log-viewer--terminal .lc-log-viewer__level-pill--error{background-color:#45202a;color:#f38ba8}.lc-log-viewer__level-pill--warn{background-color:#e1a0402e;color:var(--color-on-warning-subtle)}.lc-log-viewer--terminal .lc-log-viewer__level-pill--warn{background-color:#3d3520;color:#f9e2af}@media(forced-colors:active){.lc-log-viewer__level-pill--active:not(:focus-visible){outline:2px solid Highlight;outline-offset:1px}}.lc-log-viewer__line-count{font-size:.6875rem;color:var(--color-text-tertiary);font-family:var(--font-family-sans);padding:0 .25rem}.lc-log-viewer__search{display:flex;align-items:center;gap:.375rem;padding:.25rem .5rem;border-bottom:1px solid var(--color-divider, #e5e7eb);flex-shrink:0}.lc-log-viewer--terminal .lc-log-viewer__search{border-bottom-color:#313244;background-color:#181825}.lc-log-viewer__search-input{flex:1;background:transparent;border:none;outline:none;color:inherit;font-family:inherit;font-size:inherit}.lc-log-viewer__search-input::placeholder{color:var(--color-text-tertiary);opacity:1}.lc-log-viewer__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-log-viewer__content{flex:1;overflow-y:auto;overflow-x:auto;position:relative;min-height:0}.lc-log-viewer__spacer{position:relative;width:100%}.lc-log-viewer__window{position:absolute;top:0;left:0;right:0}.lc-log-viewer__line{display:flex;align-items:baseline;gap:.625rem;padding:1px .75rem;height:var(--lc-log-viewer-line-height);white-space:nowrap;transition:background-color .1s}.lc-log-viewer__line:hover{background-color:#80808014}.lc-log-viewer__line--clickable{cursor:pointer}.lc-log-viewer__line--clickable:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:-2px}.lc-log-viewer__line--debug{color:var(--color-text-secondary)}.lc-log-viewer--log .lc-log-viewer__line--warn{background-color:#e1a0401f}.lc-log-viewer--terminal .lc-log-viewer__line--warn{background-color:#f9e2af0d}.lc-log-viewer--log .lc-log-viewer__line--error{background-color:#9d0e0e1f}.lc-log-viewer--terminal .lc-log-viewer__line--error{background-color:#f38ba814}.lc-log-viewer__line-num{color:var(--color-text-secondary);min-width:3ch;text-align:right;-webkit-user-select:none;user-select:none}.lc-log-viewer__timestamp{color:var(--color-text-secondary);min-width:12ch}.lc-log-viewer__level{min-width:5ch;font-weight:600}.lc-log-viewer__line--debug .lc-log-viewer__level{color:var(--color-text-tertiary)}.lc-log-viewer__line--info .lc-log-viewer__level{color:var(--color-on-info-subtle)}.lc-log-viewer__line--warn .lc-log-viewer__level{color:var(--color-on-warning-subtle)}.lc-log-viewer__line--error .lc-log-viewer__level{color:var(--color-on-error-subtle)}.lc-log-viewer--terminal .lc-log-viewer__line--debug .lc-log-viewer__level{color:#9399b2}.lc-log-viewer--terminal .lc-log-viewer__line--info .lc-log-viewer__level{color:#89b4fa}.lc-log-viewer--terminal .lc-log-viewer__line--warn .lc-log-viewer__level{color:#f9e2af}.lc-log-viewer--terminal .lc-log-viewer__line--error .lc-log-viewer__level{color:#f38ba8}.lc-log-viewer__source{color:var(--color-text-secondary)}.lc-log-viewer__line--debug .lc-log-viewer__line-num,.lc-log-viewer__line--debug .lc-log-viewer__timestamp,.lc-log-viewer__line--debug .lc-log-viewer__source{color:var(--color-text-tertiary)}.lc-log-viewer--terminal .lc-log-viewer__line-num,.lc-log-viewer--terminal .lc-log-viewer__timestamp,.lc-log-viewer--terminal .lc-log-viewer__source,.lc-log-viewer--terminal .lc-log-viewer__line--debug{color:#a6adc8}.lc-log-viewer--terminal .lc-log-viewer__line--debug .lc-log-viewer__line-num,.lc-log-viewer--terminal .lc-log-viewer__line--debug .lc-log-viewer__timestamp,.lc-log-viewer--terminal .lc-log-viewer__line--debug .lc-log-viewer__source,.lc-log-viewer--terminal .lc-log-viewer__line-count,.lc-log-viewer--terminal .lc-log-viewer__search-input::placeholder{color:#9399b2}.lc-log-viewer__text{flex:1;min-width:0}.lc-log-viewer__match{background-color:var(--color-warning);color:var(--color-on-warning);border-radius:2px;padding:0 1px}.lc-log-viewer--terminal .lc-log-viewer__match{background-color:#f9e2af;color:#1e1e2e}@media(forced-colors:active){.lc-log-viewer__match,.lc-log-viewer--terminal .lc-log-viewer__match{background-color:Mark;color:MarkText}}.lc-log-viewer__jump-bottom{position:absolute;bottom:1rem;left:50%;transform:translate(-50%);display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .75rem;border:1px solid var(--color-divider, #e5e7eb);border-radius:9999px;background-color:var(--color-surface);color:var(--color-text-primary);font-size:.75rem;font-family:var(--font-family-sans);cursor:pointer;box-shadow:var(--elevation-1);z-index:10;transition:background-color .15s}.lc-log-viewer__jump-bottom:hover{background-color:var(--color-surface-hover)}.lc-log-viewer__jump-bottom:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-log-viewer--terminal .lc-log-viewer__jump-bottom{background-color:#313244;border-color:#45475a;color:#cdd6f4}.lc-log-viewer--terminal .lc-log-viewer__jump-bottom:hover{background-color:#45475a}@media(forced-colors:active){.lc-log-viewer__tool-btn:focus-visible,.lc-log-viewer__level-pill:focus-visible,.lc-log-viewer__line--clickable:focus-visible,.lc-log-viewer__jump-bottom:focus-visible{outline-color:Highlight}}.ansi-bold{font-weight:700}.ansi-italic{font-style:italic}.ansi-black{color:#45475a}.ansi-red{color:#f38ba8}.ansi-green{color:#a6e3a1}.ansi-yellow{color:#f9e2af}.ansi-blue{color:#89b4fa}.ansi-magenta{color:#cba6f7}.ansi-cyan{color:#94e2d5}.ansi-white{color:#cdd6f4}.ansi-gray{color:#9399b2}.ansi-bright-red{color:#eba0ac}.ansi-bright-green{color:#a6e3a1}.ansi-bright-yellow{color:#f9e2af}.ansi-bright-blue{color:#89dceb}.ansi-bright-magenta{color:#f5c2e7}.ansi-bright-cyan{color:#94e2d5}.ansi-bright-white{color:#bac2de}:root.light .lc-log-viewer--log .ansi-black{color:#4c4f69}:root.light .lc-log-viewer--log .ansi-red{color:#d20f39}:root.light .lc-log-viewer--log .ansi-green{color:#40a02b}:root.light .lc-log-viewer--log .ansi-yellow{color:#df8e1d}:root.light .lc-log-viewer--log .ansi-blue{color:#1e66f5}:root.light .lc-log-viewer--log .ansi-magenta{color:#8839ef}:root.light .lc-log-viewer--log .ansi-cyan{color:#179299}:root.light .lc-log-viewer--log .ansi-white{color:#6c6f85}:root.light .lc-log-viewer--log .ansi-gray{color:#5c5f77}:root.light .lc-log-viewer--log .ansi-bright-red{color:#e64553}:root.light .lc-log-viewer--log .ansi-bright-green{color:#40a02b}:root.light .lc-log-viewer--log .ansi-bright-yellow{color:#df8e1d}:root.light .lc-log-viewer--log .ansi-bright-blue{color:#04a5e5}:root.light .lc-log-viewer--log .ansi-bright-magenta{color:#ea76cb}:root.light .lc-log-viewer--log .ansi-bright-cyan{color:#179299}:root.light .lc-log-viewer--log .ansi-bright-white{color:#5c5f77}@media(prefers-color-scheme:light){:root.system:not(.dark) .lc-log-viewer--log .ansi-black{color:#4c4f69}:root.system:not(.dark) .lc-log-viewer--log .ansi-red{color:#d20f39}:root.system:not(.dark) .lc-log-viewer--log .ansi-green{color:#40a02b}:root.system:not(.dark) .lc-log-viewer--log .ansi-yellow{color:#df8e1d}:root.system:not(.dark) .lc-log-viewer--log .ansi-blue{color:#1e66f5}:root.system:not(.dark) .lc-log-viewer--log .ansi-magenta{color:#8839ef}:root.system:not(.dark) .lc-log-viewer--log .ansi-cyan{color:#179299}:root.system:not(.dark) .lc-log-viewer--log .ansi-white{color:#6c6f85}:root.system:not(.dark) .lc-log-viewer--log .ansi-gray{color:#5c5f77}:root.system:not(.dark) .lc-log-viewer--log .ansi-bright-red{color:#e64553}:root.system:not(.dark) .lc-log-viewer--log .ansi-bright-green{color:#40a02b}:root.system:not(.dark) .lc-log-viewer--log .ansi-bright-yellow{color:#df8e1d}:root.system:not(.dark) .lc-log-viewer--log .ansi-bright-blue{color:#04a5e5}:root.system:not(.dark) .lc-log-viewer--log .ansi-bright-magenta{color:#ea76cb}:root.system:not(.dark) .lc-log-viewer--log .ansi-bright-cyan{color:#179299}:root.system:not(.dark) .lc-log-viewer--log .ansi-bright-white{color:#5c5f77}}.lc-log-viewer--terminal .lc-log-viewer__content::-webkit-scrollbar{width:8px;height:8px}.lc-log-viewer--terminal .lc-log-viewer__content::-webkit-scrollbar-track{background:#181825}.lc-log-viewer--terminal .lc-log-viewer__content::-webkit-scrollbar-thumb{background:#45475a;border-radius:4px}.lc-log-viewer--terminal .lc-log-viewer__content::-webkit-scrollbar-thumb:hover{background:#585b70}\n"]
 		}]
 	}],
 	ctorParameters: () => [],