@life-cockpit/angular-ui-kit 1.2.2 → 1.3.1

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

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { inject, PLATFORM_ID, signal, Injectable, input, computed, effect, ChangeDetectionStrategy, Component, model, EventEmitter, ViewChild, Output, Input, ViewEncapsulation, output, HostListener, forwardRef, ElementRef, viewChild, ChangeDetectorRef, ViewChildren, HostBinding, ViewContainerRef, Renderer2, Directive, TemplateRef, ContentChildren, ContentChild } from '@angular/core';
+import { inject, PLATFORM_ID, signal, Injectable, input, computed, effect, ChangeDetectionStrategy, Component, model, EventEmitter, ViewChild, Output, Input, ViewEncapsulation, output, HostListener, forwardRef, ElementRef, viewChild, ChangeDetectorRef, ViewChildren, HostBinding, ViewContainerRef, Renderer2, Directive, TemplateRef, ContentChildren, ContentChild, SecurityContext, NgZone, ApplicationRef, EnvironmentInjector, createComponent } from '@angular/core';
 import * as i1 from '@angular/common';
-import { isPlatformBrowser, CommonModule, SlicePipe, NgStyle } from '@angular/common';
+import { isPlatformBrowser, CommonModule, SlicePipe, NgTemplateOutlet, NgStyle } from '@angular/common';
 import * as i1$4 from '@angular/platform-browser';
 import { DomSanitizer } from '@angular/platform-browser';
 import { HttpClient } from '@angular/common/http';
@@ -9,7 +9,7 @@ import * as i1$2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NgControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1$1 from '@angular/cdk/overlay';
 import { OverlayModule, Overlay } from '@angular/cdk/overlay';
-import { Subject, debounceTime, distinctUntilChanged, takeUntil } from 'rxjs';
+import { Subject, debounceTime, distinctUntilChanged, takeUntil, switchMap, of } from 'rxjs';
 import * as i1$3 from '@angular/cdk/a11y';
 import { ConfigurableFocusTrapFactory, A11yModule } from '@angular/cdk/a11y';
 import { ComponentPortal } from '@angular/cdk/portal';
@@ -10507,6 +10507,8 @@ class ChatComponent {
     showTimestamps = input(true, ...(ngDevMode ? [{ debugName: "showTimestamps" }] : /* istanbul ignore next */ []));
     /** Emits when user sends a message. */
     messageSend = output();
+    /** Custom template for rendering message content. Context: { $implicit: ChatMessage } */
+    messageTemplate;
     inputValue = signal('', ...(ngDevMode ? [{ debugName: "inputValue" }] : /* istanbul ignore next */ []));
     shouldScroll = false;
     scrollContainer;
@@ -10552,12 +10554,15 @@ class ChatComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: ChatComponent, isStandalone: true, selector: "lc-chat", inputs: { messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, isStreaming: { classPropertyName: "isStreaming", publicName: "isStreaming", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showAvatars: { classPropertyName: "showAvatars", publicName: "showAvatars", isSignal: true, isRequired: false, transformFunction: null }, showTimestamps: { classPropertyName: "showTimestamps", publicName: "showTimestamps", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { messageSend: "messageSend" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }], ngImport: i0, template: "<div class=\"lc-chat\">\n  @if (showHeader()) {\n    <div class=\"lc-chat__header\">\n      <span class=\"lc-chat__title\">{{ title() }}</span>\n      @if (isStreaming()) {\n        <span class=\"lc-chat__streaming-badge\">Streaming\u2026</span>\n      }\n    </div>\n  }\n\n  <div class=\"lc-chat__messages\" #scrollContainer>\n    @for (msg of formattedMessages(); track trackById($index, msg)) {\n      <div\n        class=\"lc-chat__message\"\n        [class.lc-chat__message--user]=\"msg.role === 'user'\"\n        [class.lc-chat__message--agent]=\"msg.role === 'agent'\"\n        [class.lc-chat__message--system]=\"msg.role === 'system'\"\n      >\n        @if (showAvatars() && msg.role !== 'system') {\n          <div class=\"lc-chat__avatar\">\n            @if (msg.avatar) {\n              <img [src]=\"msg.avatar\" [alt]=\"msg.name || msg.role\" class=\"lc-chat__avatar-img\" />\n            } @else {\n              <span class=\"lc-chat__avatar-fallback\" [class.lc-chat__avatar-fallback--agent]=\"msg.role === 'agent'\">\n                {{ (msg.name || msg.role).charAt(0).toUpperCase() }}\n              </span>\n            }\n          </div>\n        }\n\n        <div class=\"lc-chat__bubble\" [class.lc-chat__bubble--streaming]=\"msg.streaming\">\n          @if (msg.name && msg.role !== 'user') {\n            <div class=\"lc-chat__name\">{{ msg.name }}</div>\n          }\n          <div class=\"lc-chat__content\">{{ msg.content }}<span class=\"lc-chat__cursor\" [class.lc-chat__cursor--visible]=\"msg.streaming\"></span></div>\n          @if (showTimestamps() && msg.timestamp) {\n            <div class=\"lc-chat__time\">{{ formatTime(msg.timestamp) }}</div>\n          }\n        </div>\n      </div>\n    }\n\n    @if (isStreaming() && !(formattedMessages().length && formattedMessages()[formattedMessages().length - 1].streaming)) {\n      <div class=\"lc-chat__message lc-chat__message--agent\">\n        @if (showAvatars()) {\n          <div class=\"lc-chat__avatar\">\n            <span class=\"lc-chat__avatar-fallback lc-chat__avatar-fallback--agent\">A</span>\n          </div>\n        }\n        <div class=\"lc-chat__bubble\">\n          <div class=\"lc-chat__typing\">\n            <span></span><span></span><span></span>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n\n  <div class=\"lc-chat__input-area\">\n    <textarea\n      class=\"lc-chat__input\"\n      [placeholder]=\"placeholder()\"\n      [value]=\"inputValue()\"\n      [disabled]=\"disabled()\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeydown($event)\"\n      rows=\"1\"\n    ></textarea>\n    <button\n      class=\"lc-chat__send-btn\"\n      [disabled]=\"!inputValue().trim() || disabled()\"\n      (click)=\"send()\"\n      aria-label=\"Send\"\n    >\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n        <path d=\"M3 10l7-7m0 0l7 7m-7-7v14\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" transform=\"rotate(90 10 10)\"/>\n      </svg>\n    </button>\n  </div>\n</div>\n", styles: [".lc-chat{display:flex;flex-direction:column;height:100%;min-height:20rem;border:1px solid var(--color-neutral-200);border-radius:.5rem;overflow:hidden;background:var(--color-neutral-0, #fff);font-family:var(--typography-font-family, sans-serif)}[data-theme=dark] .lc-chat,:root[data-theme=dark] .lc-chat{border-color:var(--color-neutral-700);background:var(--color-neutral-900)}.lc-chat__header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--color-neutral-200);background:var(--color-neutral-50)}[data-theme=dark] .lc-chat__header,:root[data-theme=dark] .lc-chat__header{border-color:var(--color-neutral-700);background:var(--color-neutral-800)}.lc-chat__title{font-size:.875rem;font-weight:600;color:var(--color-neutral-900)}[data-theme=dark] .lc-chat__title,:root[data-theme=dark] .lc-chat__title{color:var(--color-neutral-100)}.lc-chat__streaming-badge{font-size:.6875rem;padding:.125rem .5rem;background:color-mix(in srgb,var(--color-primary-500) 15%,transparent);color:var(--color-primary-500);border-radius:1rem;font-weight:500;animation:pulse-badge 1.5s infinite}@keyframes pulse-badge{0%,to{opacity:1}50%{opacity:.6}}.lc-chat__messages{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.75rem}.lc-chat__message{display:flex;align-items:flex-start;gap:.5rem;max-width:85%}.lc-chat__message--user{align-self:flex-end;flex-direction:row-reverse}.lc-chat__message--agent{align-self:flex-start}.lc-chat__message--system{align-self:center;max-width:100%}.lc-chat__avatar{flex-shrink:0;width:2rem;height:2rem}.lc-chat__avatar-img{width:100%;height:100%;border-radius:50%;object-fit:cover}.lc-chat__avatar-fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;background:var(--color-neutral-300);color:#fff;font-size:.75rem;font-weight:700}.lc-chat__avatar-fallback--agent{background:var(--color-primary-500)}.lc-chat__bubble{padding:.5rem .75rem;border-radius:1rem;font-size:.875rem;line-height:1.5;word-break:break-word}.lc-chat__message--user .lc-chat__bubble{background:var(--color-primary-500);color:#fff;border-bottom-right-radius:.25rem}.lc-chat__message--agent .lc-chat__bubble{background:var(--color-neutral-100);color:var(--color-neutral-900);border-bottom-left-radius:.25rem}[data-theme=dark] .lc-chat__message--agent .lc-chat__bubble,:root[data-theme=dark] .lc-chat__message--agent .lc-chat__bubble{background:var(--color-neutral-800);color:var(--color-neutral-100)}.lc-chat__message--system .lc-chat__bubble{background:transparent;color:var(--color-neutral-500);font-size:.75rem;text-align:center;padding:.25rem .5rem}.lc-chat__message--agent .lc-chat__bubble--streaming{border:1px solid color-mix(in srgb,var(--color-primary-500) 30%,transparent)}.lc-chat__name{font-size:.6875rem;font-weight:600;color:var(--color-primary-500);margin-bottom:.125rem}.lc-chat__content{white-space:pre-wrap}.lc-chat__cursor{display:none}.lc-chat__cursor--visible{display:inline-block;width:2px;height:1em;background:currentColor;margin-left:1px;vertical-align:text-bottom;animation:blink-cursor .8s step-end infinite}@keyframes blink-cursor{0%,to{opacity:1}50%{opacity:0}}.lc-chat__time{font-size:.625rem;color:var(--color-neutral-400);margin-top:.25rem}.lc-chat__message--user .lc-chat__time{color:#ffffffb3;text-align:right}.lc-chat__typing{display:flex;gap:.25rem;padding:.25rem 0}.lc-chat__typing span{width:.375rem;height:.375rem;border-radius:50%;background:var(--color-neutral-400);animation:typing-bounce 1.4s ease-in-out infinite}.lc-chat__typing span:nth-child(2){animation-delay:.2s}.lc-chat__typing span:nth-child(3){animation-delay:.4s}@keyframes typing-bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-.375rem)}}.lc-chat__input-area{display:flex;align-items:flex-end;gap:.5rem;padding:.75rem 1rem;border-top:1px solid var(--color-neutral-200);background:var(--color-neutral-50)}[data-theme=dark] .lc-chat__input-area,:root[data-theme=dark] .lc-chat__input-area{border-color:var(--color-neutral-700);background:var(--color-neutral-800)}.lc-chat__input{flex:1;resize:none;border:1px solid var(--color-neutral-300);border-radius:1.25rem;padding:.5rem .875rem;font-size:.875rem;font-family:inherit;line-height:1.4;outline:none;background:var(--color-neutral-0, #fff);color:var(--color-neutral-900);max-height:6rem;overflow-y:auto;transition:border-color .15s}.lc-chat__input:focus{border-color:var(--color-primary-500)}.lc-chat__input:disabled{opacity:.5;cursor:not-allowed}.lc-chat__input::placeholder{color:var(--color-neutral-400)}[data-theme=dark] .lc-chat__input,:root[data-theme=dark] .lc-chat__input{border-color:var(--color-neutral-600);background:var(--color-neutral-700);color:var(--color-neutral-100)}[data-theme=dark] .lc-chat__input::placeholder,:root[data-theme=dark] .lc-chat__input::placeholder{color:var(--color-neutral-500)}[data-theme=dark] .lc-chat__input:focus,:root[data-theme=dark] .lc-chat__input:focus{border-color:var(--color-primary-500)}.lc-chat__send-btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:none;border-radius:50%;background:var(--color-primary-500);color:#fff;cursor:pointer;flex-shrink:0;transition:background .15s,opacity .15s}.lc-chat__send-btn:hover:not(:disabled){background:var(--color-primary-700)}.lc-chat__send-btn:disabled{opacity:.4;cursor:not-allowed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: ChatComponent, isStandalone: true, selector: "lc-chat", inputs: { messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, isStreaming: { classPropertyName: "isStreaming", publicName: "isStreaming", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showAvatars: { classPropertyName: "showAvatars", publicName: "showAvatars", isSignal: true, isRequired: false, transformFunction: null }, showTimestamps: { classPropertyName: "showTimestamps", publicName: "showTimestamps", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { messageSend: "messageSend" }, queries: [{ propertyName: "messageTemplate", first: true, predicate: ["messageTemplate"], descendants: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }], ngImport: i0, template: "<div class=\"lc-chat\">\n  @if (showHeader()) {\n    <div class=\"lc-chat__header\">\n      <span class=\"lc-chat__title\">{{ title() }}</span>\n      @if (isStreaming()) {\n        <span class=\"lc-chat__streaming-badge\">Streaming\u2026</span>\n      }\n    </div>\n  }\n\n  <div class=\"lc-chat__messages\" #scrollContainer>\n    @for (msg of formattedMessages(); track trackById($index, msg)) {\n      <div\n        class=\"lc-chat__message\"\n        [class.lc-chat__message--user]=\"msg.role === 'user'\"\n        [class.lc-chat__message--agent]=\"msg.role === 'agent'\"\n        [class.lc-chat__message--system]=\"msg.role === 'system'\"\n      >\n        @if (showAvatars() && msg.role !== 'system') {\n          <div class=\"lc-chat__avatar\">\n            @if (msg.avatar) {\n              <img [src]=\"msg.avatar\" [alt]=\"msg.name || msg.role\" class=\"lc-chat__avatar-img\" />\n            } @else {\n              <span class=\"lc-chat__avatar-fallback\" [class.lc-chat__avatar-fallback--agent]=\"msg.role === 'agent'\">\n                {{ (msg.name || msg.role).charAt(0).toUpperCase() }}\n              </span>\n            }\n          </div>\n        }\n\n        <div class=\"lc-chat__bubble\" [class.lc-chat__bubble--streaming]=\"msg.streaming\">\n          @if (msg.name && msg.role !== 'user') {\n            <div class=\"lc-chat__name\">{{ msg.name }}</div>\n          }\n          <div class=\"lc-chat__content\">\n            @if (messageTemplate) {\n              <ng-container *ngTemplateOutlet=\"messageTemplate; context: { $implicit: msg }\" />\n            } @else {\n              {{ msg.content }}\n            }\n            <span class=\"lc-chat__cursor\" [class.lc-chat__cursor--visible]=\"msg.streaming\"></span>\n          </div>\n          @if (showTimestamps() && msg.timestamp) {\n            <div class=\"lc-chat__time\">{{ formatTime(msg.timestamp) }}</div>\n          }\n        </div>\n      </div>\n    }\n\n    @if (isStreaming() && !(formattedMessages().length && formattedMessages()[formattedMessages().length - 1].streaming)) {\n      <div class=\"lc-chat__message lc-chat__message--agent\">\n        @if (showAvatars()) {\n          <div class=\"lc-chat__avatar\">\n            <span class=\"lc-chat__avatar-fallback lc-chat__avatar-fallback--agent\">A</span>\n          </div>\n        }\n        <div class=\"lc-chat__bubble\">\n          <div class=\"lc-chat__typing\">\n            <span></span><span></span><span></span>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n\n  <div class=\"lc-chat__input-area\">\n    <textarea\n      class=\"lc-chat__input\"\n      [placeholder]=\"placeholder()\"\n      [value]=\"inputValue()\"\n      [disabled]=\"disabled()\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeydown($event)\"\n      rows=\"1\"\n    ></textarea>\n    <button\n      class=\"lc-chat__send-btn\"\n      [disabled]=\"!inputValue().trim() || disabled()\"\n      (click)=\"send()\"\n      aria-label=\"Send\"\n    >\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n        <path d=\"M3 10l7-7m0 0l7 7m-7-7v14\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" transform=\"rotate(90 10 10)\"/>\n      </svg>\n    </button>\n  </div>\n</div>\n", styles: [".lc-chat{display:flex;flex-direction:column;height:100%;min-height:20rem;border:1px solid var(--color-neutral-200);border-radius:.5rem;overflow:hidden;background:var(--color-neutral-0, #fff);font-family:var(--typography-font-family, sans-serif)}[data-theme=dark] .lc-chat,:root[data-theme=dark] .lc-chat{border-color:var(--color-neutral-700);background:var(--color-neutral-900)}.lc-chat__header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--color-neutral-200);background:var(--color-neutral-50)}[data-theme=dark] .lc-chat__header,:root[data-theme=dark] .lc-chat__header{border-color:var(--color-neutral-700);background:var(--color-neutral-800)}.lc-chat__title{font-size:.875rem;font-weight:600;color:var(--color-neutral-900)}[data-theme=dark] .lc-chat__title,:root[data-theme=dark] .lc-chat__title{color:var(--color-neutral-100)}.lc-chat__streaming-badge{font-size:.6875rem;padding:.125rem .5rem;background:color-mix(in srgb,var(--color-primary-500) 15%,transparent);color:var(--color-primary-500);border-radius:1rem;font-weight:500;animation:pulse-badge 1.5s infinite}@keyframes pulse-badge{0%,to{opacity:1}50%{opacity:.6}}.lc-chat__messages{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.75rem}.lc-chat__message{display:flex;align-items:flex-start;gap:.5rem;max-width:85%}.lc-chat__message--user{align-self:flex-end;flex-direction:row-reverse}.lc-chat__message--agent{align-self:flex-start}.lc-chat__message--system{align-self:center;max-width:100%}.lc-chat__avatar{flex-shrink:0;width:2rem;height:2rem}.lc-chat__avatar-img{width:100%;height:100%;border-radius:50%;object-fit:cover}.lc-chat__avatar-fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;background:var(--color-neutral-300);color:#fff;font-size:.75rem;font-weight:700}.lc-chat__avatar-fallback--agent{background:var(--color-primary-500)}.lc-chat__bubble{padding:.5rem .75rem;border-radius:1rem;font-size:.875rem;line-height:1.5;word-break:break-word}.lc-chat__message--user .lc-chat__bubble{background:var(--color-primary-500);color:#fff;border-bottom-right-radius:.25rem}.lc-chat__message--agent .lc-chat__bubble{background:var(--color-neutral-100);color:var(--color-neutral-900);border-bottom-left-radius:.25rem}[data-theme=dark] .lc-chat__message--agent .lc-chat__bubble,:root[data-theme=dark] .lc-chat__message--agent .lc-chat__bubble{background:var(--color-neutral-800);color:var(--color-neutral-100)}.lc-chat__message--system .lc-chat__bubble{background:transparent;color:var(--color-neutral-500);font-size:.75rem;text-align:center;padding:.25rem .5rem}.lc-chat__message--agent .lc-chat__bubble--streaming{border:1px solid color-mix(in srgb,var(--color-primary-500) 30%,transparent)}.lc-chat__name{font-size:.6875rem;font-weight:600;color:var(--color-primary-500);margin-bottom:.125rem}.lc-chat__content{white-space:pre-wrap}.lc-chat__cursor{display:none}.lc-chat__cursor--visible{display:inline-block;width:2px;height:1em;background:currentColor;margin-left:1px;vertical-align:text-bottom;animation:blink-cursor .8s step-end infinite}@keyframes blink-cursor{0%,to{opacity:1}50%{opacity:0}}.lc-chat__time{font-size:.625rem;color:var(--color-neutral-400);margin-top:.25rem}.lc-chat__message--user .lc-chat__time{color:#ffffffb3;text-align:right}.lc-chat__typing{display:flex;gap:.25rem;padding:.25rem 0}.lc-chat__typing span{width:.375rem;height:.375rem;border-radius:50%;background:var(--color-neutral-400);animation:typing-bounce 1.4s ease-in-out infinite}.lc-chat__typing span:nth-child(2){animation-delay:.2s}.lc-chat__typing span:nth-child(3){animation-delay:.4s}@keyframes typing-bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-.375rem)}}.lc-chat__input-area{display:flex;align-items:flex-end;gap:.5rem;padding:.75rem 1rem;border-top:1px solid var(--color-neutral-200);background:var(--color-neutral-50)}[data-theme=dark] .lc-chat__input-area,:root[data-theme=dark] .lc-chat__input-area{border-color:var(--color-neutral-700);background:var(--color-neutral-800)}.lc-chat__input{flex:1;resize:none;border:1px solid var(--color-neutral-300);border-radius:1.25rem;padding:.5rem .875rem;font-size:.875rem;font-family:inherit;line-height:1.4;outline:none;background:var(--color-neutral-0, #fff);color:var(--color-neutral-900);max-height:6rem;overflow-y:auto;transition:border-color .15s}.lc-chat__input:focus{border-color:var(--color-primary-500)}.lc-chat__input:disabled{opacity:.5;cursor:not-allowed}.lc-chat__input::placeholder{color:var(--color-neutral-400)}[data-theme=dark] .lc-chat__input,:root[data-theme=dark] .lc-chat__input{border-color:var(--color-neutral-600);background:var(--color-neutral-700);color:var(--color-neutral-100)}[data-theme=dark] .lc-chat__input::placeholder,:root[data-theme=dark] .lc-chat__input::placeholder{color:var(--color-neutral-500)}[data-theme=dark] .lc-chat__input:focus,:root[data-theme=dark] .lc-chat__input:focus{border-color:var(--color-primary-500)}.lc-chat__send-btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:none;border-radius:50%;background:var(--color-primary-500);color:#fff;cursor:pointer;flex-shrink:0;transition:background .15s,opacity .15s}.lc-chat__send-btn:hover:not(:disabled){background:var(--color-primary-700)}.lc-chat__send-btn:disabled{opacity:.4;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ChatComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lc-chat', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-chat\">\n  @if (showHeader()) {\n    <div class=\"lc-chat__header\">\n      <span class=\"lc-chat__title\">{{ title() }}</span>\n      @if (isStreaming()) {\n        <span class=\"lc-chat__streaming-badge\">Streaming\u2026</span>\n      }\n    </div>\n  }\n\n  <div class=\"lc-chat__messages\" #scrollContainer>\n    @for (msg of formattedMessages(); track trackById($index, msg)) {\n      <div\n        class=\"lc-chat__message\"\n        [class.lc-chat__message--user]=\"msg.role === 'user'\"\n        [class.lc-chat__message--agent]=\"msg.role === 'agent'\"\n        [class.lc-chat__message--system]=\"msg.role === 'system'\"\n      >\n        @if (showAvatars() && msg.role !== 'system') {\n          <div class=\"lc-chat__avatar\">\n            @if (msg.avatar) {\n              <img [src]=\"msg.avatar\" [alt]=\"msg.name || msg.role\" class=\"lc-chat__avatar-img\" />\n            } @else {\n              <span class=\"lc-chat__avatar-fallback\" [class.lc-chat__avatar-fallback--agent]=\"msg.role === 'agent'\">\n                {{ (msg.name || msg.role).charAt(0).toUpperCase() }}\n              </span>\n            }\n          </div>\n        }\n\n        <div class=\"lc-chat__bubble\" [class.lc-chat__bubble--streaming]=\"msg.streaming\">\n          @if (msg.name && msg.role !== 'user') {\n            <div class=\"lc-chat__name\">{{ msg.name }}</div>\n          }\n          <div class=\"lc-chat__content\">{{ msg.content }}<span class=\"lc-chat__cursor\" [class.lc-chat__cursor--visible]=\"msg.streaming\"></span></div>\n          @if (showTimestamps() && msg.timestamp) {\n            <div class=\"lc-chat__time\">{{ formatTime(msg.timestamp) }}</div>\n          }\n        </div>\n      </div>\n    }\n\n    @if (isStreaming() && !(formattedMessages().length && formattedMessages()[formattedMessages().length - 1].streaming)) {\n      <div class=\"lc-chat__message lc-chat__message--agent\">\n        @if (showAvatars()) {\n          <div class=\"lc-chat__avatar\">\n            <span class=\"lc-chat__avatar-fallback lc-chat__avatar-fallback--agent\">A</span>\n          </div>\n        }\n        <div class=\"lc-chat__bubble\">\n          <div class=\"lc-chat__typing\">\n            <span></span><span></span><span></span>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n\n  <div class=\"lc-chat__input-area\">\n    <textarea\n      class=\"lc-chat__input\"\n      [placeholder]=\"placeholder()\"\n      [value]=\"inputValue()\"\n      [disabled]=\"disabled()\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeydown($event)\"\n      rows=\"1\"\n    ></textarea>\n    <button\n      class=\"lc-chat__send-btn\"\n      [disabled]=\"!inputValue().trim() || disabled()\"\n      (click)=\"send()\"\n      aria-label=\"Send\"\n    >\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n        <path d=\"M3 10l7-7m0 0l7 7m-7-7v14\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" transform=\"rotate(90 10 10)\"/>\n      </svg>\n    </button>\n  </div>\n</div>\n", styles: [".lc-chat{display:flex;flex-direction:column;height:100%;min-height:20rem;border:1px solid var(--color-neutral-200);border-radius:.5rem;overflow:hidden;background:var(--color-neutral-0, #fff);font-family:var(--typography-font-family, sans-serif)}[data-theme=dark] .lc-chat,:root[data-theme=dark] .lc-chat{border-color:var(--color-neutral-700);background:var(--color-neutral-900)}.lc-chat__header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--color-neutral-200);background:var(--color-neutral-50)}[data-theme=dark] .lc-chat__header,:root[data-theme=dark] .lc-chat__header{border-color:var(--color-neutral-700);background:var(--color-neutral-800)}.lc-chat__title{font-size:.875rem;font-weight:600;color:var(--color-neutral-900)}[data-theme=dark] .lc-chat__title,:root[data-theme=dark] .lc-chat__title{color:var(--color-neutral-100)}.lc-chat__streaming-badge{font-size:.6875rem;padding:.125rem .5rem;background:color-mix(in srgb,var(--color-primary-500) 15%,transparent);color:var(--color-primary-500);border-radius:1rem;font-weight:500;animation:pulse-badge 1.5s infinite}@keyframes pulse-badge{0%,to{opacity:1}50%{opacity:.6}}.lc-chat__messages{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.75rem}.lc-chat__message{display:flex;align-items:flex-start;gap:.5rem;max-width:85%}.lc-chat__message--user{align-self:flex-end;flex-direction:row-reverse}.lc-chat__message--agent{align-self:flex-start}.lc-chat__message--system{align-self:center;max-width:100%}.lc-chat__avatar{flex-shrink:0;width:2rem;height:2rem}.lc-chat__avatar-img{width:100%;height:100%;border-radius:50%;object-fit:cover}.lc-chat__avatar-fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;background:var(--color-neutral-300);color:#fff;font-size:.75rem;font-weight:700}.lc-chat__avatar-fallback--agent{background:var(--color-primary-500)}.lc-chat__bubble{padding:.5rem .75rem;border-radius:1rem;font-size:.875rem;line-height:1.5;word-break:break-word}.lc-chat__message--user .lc-chat__bubble{background:var(--color-primary-500);color:#fff;border-bottom-right-radius:.25rem}.lc-chat__message--agent .lc-chat__bubble{background:var(--color-neutral-100);color:var(--color-neutral-900);border-bottom-left-radius:.25rem}[data-theme=dark] .lc-chat__message--agent .lc-chat__bubble,:root[data-theme=dark] .lc-chat__message--agent .lc-chat__bubble{background:var(--color-neutral-800);color:var(--color-neutral-100)}.lc-chat__message--system .lc-chat__bubble{background:transparent;color:var(--color-neutral-500);font-size:.75rem;text-align:center;padding:.25rem .5rem}.lc-chat__message--agent .lc-chat__bubble--streaming{border:1px solid color-mix(in srgb,var(--color-primary-500) 30%,transparent)}.lc-chat__name{font-size:.6875rem;font-weight:600;color:var(--color-primary-500);margin-bottom:.125rem}.lc-chat__content{white-space:pre-wrap}.lc-chat__cursor{display:none}.lc-chat__cursor--visible{display:inline-block;width:2px;height:1em;background:currentColor;margin-left:1px;vertical-align:text-bottom;animation:blink-cursor .8s step-end infinite}@keyframes blink-cursor{0%,to{opacity:1}50%{opacity:0}}.lc-chat__time{font-size:.625rem;color:var(--color-neutral-400);margin-top:.25rem}.lc-chat__message--user .lc-chat__time{color:#ffffffb3;text-align:right}.lc-chat__typing{display:flex;gap:.25rem;padding:.25rem 0}.lc-chat__typing span{width:.375rem;height:.375rem;border-radius:50%;background:var(--color-neutral-400);animation:typing-bounce 1.4s ease-in-out infinite}.lc-chat__typing span:nth-child(2){animation-delay:.2s}.lc-chat__typing span:nth-child(3){animation-delay:.4s}@keyframes typing-bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-.375rem)}}.lc-chat__input-area{display:flex;align-items:flex-end;gap:.5rem;padding:.75rem 1rem;border-top:1px solid var(--color-neutral-200);background:var(--color-neutral-50)}[data-theme=dark] .lc-chat__input-area,:root[data-theme=dark] .lc-chat__input-area{border-color:var(--color-neutral-700);background:var(--color-neutral-800)}.lc-chat__input{flex:1;resize:none;border:1px solid var(--color-neutral-300);border-radius:1.25rem;padding:.5rem .875rem;font-size:.875rem;font-family:inherit;line-height:1.4;outline:none;background:var(--color-neutral-0, #fff);color:var(--color-neutral-900);max-height:6rem;overflow-y:auto;transition:border-color .15s}.lc-chat__input:focus{border-color:var(--color-primary-500)}.lc-chat__input:disabled{opacity:.5;cursor:not-allowed}.lc-chat__input::placeholder{color:var(--color-neutral-400)}[data-theme=dark] .lc-chat__input,:root[data-theme=dark] .lc-chat__input{border-color:var(--color-neutral-600);background:var(--color-neutral-700);color:var(--color-neutral-100)}[data-theme=dark] .lc-chat__input::placeholder,:root[data-theme=dark] .lc-chat__input::placeholder{color:var(--color-neutral-500)}[data-theme=dark] .lc-chat__input:focus,:root[data-theme=dark] .lc-chat__input:focus{border-color:var(--color-primary-500)}.lc-chat__send-btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:none;border-radius:50%;background:var(--color-primary-500);color:#fff;cursor:pointer;flex-shrink:0;transition:background .15s,opacity .15s}.lc-chat__send-btn:hover:not(:disabled){background:var(--color-primary-700)}.lc-chat__send-btn:disabled{opacity:.4;cursor:not-allowed}\n"] }]
-        }], propDecorators: { messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], isStreaming: [{ type: i0.Input, args: [{ isSignal: true, alias: "isStreaming", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showAvatars: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAvatars", required: false }] }], showTimestamps: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTimestamps", required: false }] }], messageSend: [{ type: i0.Output, args: ["messageSend"] }], scrollContainer: [{
+            args: [{ selector: 'lc-chat', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-chat\">\n  @if (showHeader()) {\n    <div class=\"lc-chat__header\">\n      <span class=\"lc-chat__title\">{{ title() }}</span>\n      @if (isStreaming()) {\n        <span class=\"lc-chat__streaming-badge\">Streaming\u2026</span>\n      }\n    </div>\n  }\n\n  <div class=\"lc-chat__messages\" #scrollContainer>\n    @for (msg of formattedMessages(); track trackById($index, msg)) {\n      <div\n        class=\"lc-chat__message\"\n        [class.lc-chat__message--user]=\"msg.role === 'user'\"\n        [class.lc-chat__message--agent]=\"msg.role === 'agent'\"\n        [class.lc-chat__message--system]=\"msg.role === 'system'\"\n      >\n        @if (showAvatars() && msg.role !== 'system') {\n          <div class=\"lc-chat__avatar\">\n            @if (msg.avatar) {\n              <img [src]=\"msg.avatar\" [alt]=\"msg.name || msg.role\" class=\"lc-chat__avatar-img\" />\n            } @else {\n              <span class=\"lc-chat__avatar-fallback\" [class.lc-chat__avatar-fallback--agent]=\"msg.role === 'agent'\">\n                {{ (msg.name || msg.role).charAt(0).toUpperCase() }}\n              </span>\n            }\n          </div>\n        }\n\n        <div class=\"lc-chat__bubble\" [class.lc-chat__bubble--streaming]=\"msg.streaming\">\n          @if (msg.name && msg.role !== 'user') {\n            <div class=\"lc-chat__name\">{{ msg.name }}</div>\n          }\n          <div class=\"lc-chat__content\">\n            @if (messageTemplate) {\n              <ng-container *ngTemplateOutlet=\"messageTemplate; context: { $implicit: msg }\" />\n            } @else {\n              {{ msg.content }}\n            }\n            <span class=\"lc-chat__cursor\" [class.lc-chat__cursor--visible]=\"msg.streaming\"></span>\n          </div>\n          @if (showTimestamps() && msg.timestamp) {\n            <div class=\"lc-chat__time\">{{ formatTime(msg.timestamp) }}</div>\n          }\n        </div>\n      </div>\n    }\n\n    @if (isStreaming() && !(formattedMessages().length && formattedMessages()[formattedMessages().length - 1].streaming)) {\n      <div class=\"lc-chat__message lc-chat__message--agent\">\n        @if (showAvatars()) {\n          <div class=\"lc-chat__avatar\">\n            <span class=\"lc-chat__avatar-fallback lc-chat__avatar-fallback--agent\">A</span>\n          </div>\n        }\n        <div class=\"lc-chat__bubble\">\n          <div class=\"lc-chat__typing\">\n            <span></span><span></span><span></span>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n\n  <div class=\"lc-chat__input-area\">\n    <textarea\n      class=\"lc-chat__input\"\n      [placeholder]=\"placeholder()\"\n      [value]=\"inputValue()\"\n      [disabled]=\"disabled()\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeydown($event)\"\n      rows=\"1\"\n    ></textarea>\n    <button\n      class=\"lc-chat__send-btn\"\n      [disabled]=\"!inputValue().trim() || disabled()\"\n      (click)=\"send()\"\n      aria-label=\"Send\"\n    >\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n        <path d=\"M3 10l7-7m0 0l7 7m-7-7v14\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" transform=\"rotate(90 10 10)\"/>\n      </svg>\n    </button>\n  </div>\n</div>\n", styles: [".lc-chat{display:flex;flex-direction:column;height:100%;min-height:20rem;border:1px solid var(--color-neutral-200);border-radius:.5rem;overflow:hidden;background:var(--color-neutral-0, #fff);font-family:var(--typography-font-family, sans-serif)}[data-theme=dark] .lc-chat,:root[data-theme=dark] .lc-chat{border-color:var(--color-neutral-700);background:var(--color-neutral-900)}.lc-chat__header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--color-neutral-200);background:var(--color-neutral-50)}[data-theme=dark] .lc-chat__header,:root[data-theme=dark] .lc-chat__header{border-color:var(--color-neutral-700);background:var(--color-neutral-800)}.lc-chat__title{font-size:.875rem;font-weight:600;color:var(--color-neutral-900)}[data-theme=dark] .lc-chat__title,:root[data-theme=dark] .lc-chat__title{color:var(--color-neutral-100)}.lc-chat__streaming-badge{font-size:.6875rem;padding:.125rem .5rem;background:color-mix(in srgb,var(--color-primary-500) 15%,transparent);color:var(--color-primary-500);border-radius:1rem;font-weight:500;animation:pulse-badge 1.5s infinite}@keyframes pulse-badge{0%,to{opacity:1}50%{opacity:.6}}.lc-chat__messages{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.75rem}.lc-chat__message{display:flex;align-items:flex-start;gap:.5rem;max-width:85%}.lc-chat__message--user{align-self:flex-end;flex-direction:row-reverse}.lc-chat__message--agent{align-self:flex-start}.lc-chat__message--system{align-self:center;max-width:100%}.lc-chat__avatar{flex-shrink:0;width:2rem;height:2rem}.lc-chat__avatar-img{width:100%;height:100%;border-radius:50%;object-fit:cover}.lc-chat__avatar-fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;background:var(--color-neutral-300);color:#fff;font-size:.75rem;font-weight:700}.lc-chat__avatar-fallback--agent{background:var(--color-primary-500)}.lc-chat__bubble{padding:.5rem .75rem;border-radius:1rem;font-size:.875rem;line-height:1.5;word-break:break-word}.lc-chat__message--user .lc-chat__bubble{background:var(--color-primary-500);color:#fff;border-bottom-right-radius:.25rem}.lc-chat__message--agent .lc-chat__bubble{background:var(--color-neutral-100);color:var(--color-neutral-900);border-bottom-left-radius:.25rem}[data-theme=dark] .lc-chat__message--agent .lc-chat__bubble,:root[data-theme=dark] .lc-chat__message--agent .lc-chat__bubble{background:var(--color-neutral-800);color:var(--color-neutral-100)}.lc-chat__message--system .lc-chat__bubble{background:transparent;color:var(--color-neutral-500);font-size:.75rem;text-align:center;padding:.25rem .5rem}.lc-chat__message--agent .lc-chat__bubble--streaming{border:1px solid color-mix(in srgb,var(--color-primary-500) 30%,transparent)}.lc-chat__name{font-size:.6875rem;font-weight:600;color:var(--color-primary-500);margin-bottom:.125rem}.lc-chat__content{white-space:pre-wrap}.lc-chat__cursor{display:none}.lc-chat__cursor--visible{display:inline-block;width:2px;height:1em;background:currentColor;margin-left:1px;vertical-align:text-bottom;animation:blink-cursor .8s step-end infinite}@keyframes blink-cursor{0%,to{opacity:1}50%{opacity:0}}.lc-chat__time{font-size:.625rem;color:var(--color-neutral-400);margin-top:.25rem}.lc-chat__message--user .lc-chat__time{color:#ffffffb3;text-align:right}.lc-chat__typing{display:flex;gap:.25rem;padding:.25rem 0}.lc-chat__typing span{width:.375rem;height:.375rem;border-radius:50%;background:var(--color-neutral-400);animation:typing-bounce 1.4s ease-in-out infinite}.lc-chat__typing span:nth-child(2){animation-delay:.2s}.lc-chat__typing span:nth-child(3){animation-delay:.4s}@keyframes typing-bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-.375rem)}}.lc-chat__input-area{display:flex;align-items:flex-end;gap:.5rem;padding:.75rem 1rem;border-top:1px solid var(--color-neutral-200);background:var(--color-neutral-50)}[data-theme=dark] .lc-chat__input-area,:root[data-theme=dark] .lc-chat__input-area{border-color:var(--color-neutral-700);background:var(--color-neutral-800)}.lc-chat__input{flex:1;resize:none;border:1px solid var(--color-neutral-300);border-radius:1.25rem;padding:.5rem .875rem;font-size:.875rem;font-family:inherit;line-height:1.4;outline:none;background:var(--color-neutral-0, #fff);color:var(--color-neutral-900);max-height:6rem;overflow-y:auto;transition:border-color .15s}.lc-chat__input:focus{border-color:var(--color-primary-500)}.lc-chat__input:disabled{opacity:.5;cursor:not-allowed}.lc-chat__input::placeholder{color:var(--color-neutral-400)}[data-theme=dark] .lc-chat__input,:root[data-theme=dark] .lc-chat__input{border-color:var(--color-neutral-600);background:var(--color-neutral-700);color:var(--color-neutral-100)}[data-theme=dark] .lc-chat__input::placeholder,:root[data-theme=dark] .lc-chat__input::placeholder{color:var(--color-neutral-500)}[data-theme=dark] .lc-chat__input:focus,:root[data-theme=dark] .lc-chat__input:focus{border-color:var(--color-primary-500)}.lc-chat__send-btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:none;border-radius:50%;background:var(--color-primary-500);color:#fff;cursor:pointer;flex-shrink:0;transition:background .15s,opacity .15s}.lc-chat__send-btn:hover:not(:disabled){background:var(--color-primary-700)}.lc-chat__send-btn:disabled{opacity:.4;cursor:not-allowed}\n"] }]
+        }], propDecorators: { messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], isStreaming: [{ type: i0.Input, args: [{ isSignal: true, alias: "isStreaming", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showAvatars: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAvatars", required: false }] }], showTimestamps: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTimestamps", required: false }] }], messageSend: [{ type: i0.Output, args: ["messageSend"] }], messageTemplate: [{
+                type: ContentChild,
+                args: ['messageTemplate']
+            }], scrollContainer: [{
                 type: ViewChild,
                 args: ['scrollContainer']
             }] } });
@@ -12848,6 +12853,1089 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 args: ['richArea']
             }] } });
 
+/**
+ * Markdown renderer component.
+ *
+ * Renders GitHub-Flavored Markdown (GFM) to sanitized HTML with
+ * optional syntax highlighting via `<lc-code-block>`.
+ *
+ * @example
+ * ```html
+ * <lc-markdown [content]="'# Hello World'" />
+ * <lc-markdown [src]="'/docs/readme.md'" />
+ * ```
+ */
+class MarkdownComponent {
+    sanitizer = inject(DomSanitizer);
+    http = inject(HttpClient);
+    httpSub;
+    /** URL or path to load markdown from */
+    src = input(...(ngDevMode ? [undefined, { debugName: "src" }] : /* istanbul ignore next */ []));
+    /** Raw markdown string */
+    content = input(...(ngDevMode ? [undefined, { debugName: "content" }] : /* istanbul ignore next */ []));
+    /** Display variant */
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Target for links */
+    linkTarget = input('_self', ...(ngDevMode ? [{ debugName: "linkTarget" }] : /* istanbul ignore next */ []));
+    /** Whether to sanitize HTML output */
+    sanitize = input(true, ...(ngDevMode ? [{ debugName: "sanitize" }] : /* istanbul ignore next */ []));
+    /** Whether to use code-block for fenced code */
+    syntaxHighlight = input(true, ...(ngDevMode ? [{ debugName: "syntaxHighlight" }] : /* istanbul ignore next */ []));
+    /** Whether to show anchor links on headings */
+    showHeadingAnchors = input(false, ...(ngDevMode ? [{ debugName: "showHeadingAnchors" }] : /* istanbul ignore next */ []));
+    /** Base URL for resolving relative links/images */
+    baseUrl = input(...(ngDevMode ? [undefined, { debugName: "baseUrl" }] : /* istanbul ignore next */ []));
+    /** Emitted when a link is clicked */
+    linkClick = output();
+    /** Emitted after rendering with heading TOC */
+    rendered = output();
+    /** Internal resolved markdown source */
+    resolvedMarkdown = signal('', ...(ngDevMode ? [{ debugName: "resolvedMarkdown" }] : /* istanbul ignore next */ []));
+    /** Parsed result (computed once from resolvedMarkdown) */
+    parsed = computed(() => {
+        const md = this.resolvedMarkdown();
+        if (!md)
+            return { html: '', blocks: [], headings: [] };
+        return this.parseMarkdown(md);
+    }, ...(ngDevMode ? [{ debugName: "parsed" }] : /* istanbul ignore next */ []));
+    /** Computed render parts (HTML chunks + code blocks interleaved) */
+    renderParts = computed(() => {
+        const { html, blocks } = this.parsed();
+        if (!html)
+            return [];
+        if (this.syntaxHighlight() && blocks.length > 0) {
+            return this.splitIntoParts(html, blocks);
+        }
+        // No code blocks — single HTML part
+        const sanitized = this.sanitize()
+            ? this.sanitizer.sanitize(SecurityContext.HTML, html) || ''
+            : html;
+        return [{
+                type: 'html',
+                index: 0,
+                safeHtml: this.sanitizer.bypassSecurityTrustHtml(sanitized),
+            }];
+    }, ...(ngDevMode ? [{ debugName: "renderParts" }] : /* istanbul ignore next */ []));
+    containerClasses = computed(() => {
+        return `lc-markdown lc-markdown--${this.variant()}`;
+    }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : /* istanbul ignore next */ []));
+    headings = computed(() => this.parsed().headings, ...(ngDevMode ? [{ debugName: "headings" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Load content from src when src changes
+        effect(() => {
+            const src = this.src();
+            if (src) {
+                this.loadFromUrl(src);
+            }
+        });
+        // Use raw content when provided
+        effect(() => {
+            const content = this.content();
+            if (content !== undefined) {
+                this.resolvedMarkdown.set(content);
+            }
+        });
+        // Emit rendered event when headings change
+        effect(() => {
+            const h = this.headings();
+            if (h.length > 0) {
+                this.rendered.emit({ headings: h });
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.httpSub?.unsubscribe();
+    }
+    onLinkClick(event) {
+        const target = event.target;
+        const anchor = target.closest('a');
+        if (anchor) {
+            this.linkClick.emit({ href: anchor.href, event });
+        }
+    }
+    loadFromUrl(url) {
+        this.httpSub?.unsubscribe();
+        this.httpSub = this.http.get(url, { responseType: 'text' }).subscribe({
+            next: (text) => this.resolvedMarkdown.set(text),
+            error: () => this.resolvedMarkdown.set(`*Failed to load ${url}*`),
+        });
+    }
+    splitIntoParts(html, blocks) {
+        const parts = [];
+        // The placeholders survive HTML escaping as &lt;!--CODE_BLOCK_N--&gt;
+        const regex = /&lt;!--CODE_BLOCK_(\d+)--&gt;/g;
+        let lastIndex = 0;
+        let partIndex = 0;
+        let match;
+        while ((match = regex.exec(html)) !== null) {
+            const before = html.slice(lastIndex, match.index);
+            if (before.trim()) {
+                const sanitized = this.sanitize()
+                    ? this.sanitizer.sanitize(SecurityContext.HTML, before) || ''
+                    : before;
+                parts.push({
+                    type: 'html',
+                    index: partIndex++,
+                    safeHtml: this.sanitizer.bypassSecurityTrustHtml(sanitized),
+                });
+            }
+            const blockIdx = parseInt(match[1], 10);
+            parts.push({
+                type: 'code',
+                index: partIndex++,
+                code: blocks[blockIdx].code,
+                lang: blocks[blockIdx].lang,
+            });
+            lastIndex = match.index + match[0].length;
+        }
+        const remaining = html.slice(lastIndex);
+        if (remaining.trim()) {
+            const sanitized = this.sanitize()
+                ? this.sanitizer.sanitize(SecurityContext.HTML, remaining) || ''
+                : remaining;
+            parts.push({
+                type: 'html',
+                index: partIndex++,
+                safeHtml: this.sanitizer.bypassSecurityTrustHtml(sanitized),
+            });
+        }
+        return parts;
+    }
+    parseMarkdown(md) {
+        const blocks = [];
+        const headings = [];
+        const baseUrl = this.baseUrl();
+        const linkTarget = this.linkTarget();
+        const showAnchors = this.showHeadingAnchors();
+        // 1. Extract fenced code blocks → placeholders
+        let processed = md.replace(/```(\w*)\n([\s\S]*?)```/g, (_match, lang, code) => {
+            const idx = blocks.length;
+            blocks.push({ lang: lang || 'text', code: code.trimEnd() });
+            return `<!--CODE_BLOCK_${idx}-->`;
+        });
+        // 2. Escape HTML entities
+        processed = processed
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;');
+        // 3. Headings (# to ######)
+        processed = processed.replace(/^(#{1,6})\s+(.+)$/gm, (_match, hashes, text) => {
+            const level = hashes.length;
+            const id = text
+                .toLowerCase()
+                .replace(/[^\w\s-]/g, '')
+                .replace(/\s+/g, '-');
+            headings.push({ level, text, id });
+            const anchor = showAnchors
+                ? `<a href="#${id}" class="lc-markdown__anchor" aria-hidden="true">#</a>`
+                : '';
+            return `<h${level} id="${id}">${anchor}${text}</h${level}>`;
+        });
+        // 4. Horizontal rules
+        processed = processed.replace(/^---+$/gm, '<hr>');
+        // 5. Blockquotes
+        processed = processed.replace(/^(?:&gt;)\s?(.*)$/gm, '<blockquote>$1</blockquote>');
+        // Merge consecutive blockquotes
+        processed = processed.replace(/<\/blockquote>\n<blockquote>/g, '\n');
+        // 6. Tables (GFM)
+        processed = this.parseTables(processed);
+        // 7. Task lists
+        processed = processed.replace(/^[-*]\s+\[x\]\s+(.*)$/gm, '<li class="lc-markdown__task"><input type="checkbox" checked disabled> $1</li>');
+        processed = processed.replace(/^[-*]\s+\[ \]\s+(.*)$/gm, '<li class="lc-markdown__task"><input type="checkbox" disabled> $1</li>');
+        // 8. Unordered lists
+        processed = processed.replace(/^[-*]\s+(.*)$/gm, '<li>$1</li>');
+        processed = processed.replace(/(<li>[\s\S]*?<\/li>)/g, (match) => {
+            if (!match.includes('lc-markdown__task')) {
+                return match;
+            }
+            return match;
+        });
+        // Wrap consecutive <li> in <ul>
+        processed = processed.replace(/((?:<li[^>]*>.*<\/li>\n?)+)/g, '<ul>$1</ul>');
+        // 9. Ordered lists
+        processed = processed.replace(/^\d+\.\s+(.*)$/gm, '<li>$1</li>');
+        // 10. Inline code
+        processed = processed.replace(/`([^`]+)`/g, '<code>$1</code>');
+        // 11. Bold + italic combos
+        processed = processed.replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>');
+        processed = processed.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+        processed = processed.replace(/\*(.+?)\*/g, '<em>$1</em>');
+        // 12. Strikethrough (GFM)
+        processed = processed.replace(/~~(.+?)~~/g, '<del>$1</del>');
+        // 13. Images
+        processed = processed.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (_match, alt, src) => {
+            const resolvedSrc = baseUrl && !src.startsWith('http') ? `${baseUrl}/${src}` : src;
+            return `<img src="${resolvedSrc}" alt="${alt}" class="lc-markdown__img">`;
+        });
+        // 14. Links
+        processed = processed.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_match, text, href) => {
+            const resolvedHref = baseUrl && !href.startsWith('http') && !href.startsWith('#')
+                ? `${baseUrl}/${href}`
+                : href;
+            return `<a href="${resolvedHref}" target="${linkTarget}" rel="noopener">${text}</a>`;
+        });
+        // 15. Paragraphs — wrap standalone lines
+        processed = processed
+            .split('\n\n')
+            .map((block) => {
+            const trimmed = block.trim();
+            if (!trimmed)
+                return '';
+            if (trimmed.startsWith('<h') ||
+                trimmed.startsWith('<ul') ||
+                trimmed.startsWith('<ol') ||
+                trimmed.startsWith('<blockquote') ||
+                trimmed.startsWith('<hr') ||
+                trimmed.startsWith('<table') ||
+                trimmed.startsWith('<!--CODE_BLOCK')) {
+                return trimmed;
+            }
+            return `<p>${trimmed.replace(/\n/g, '<br>')}</p>`;
+        })
+            .join('\n');
+        // 16. Restore code block placeholders
+        if (this.syntaxHighlight()) {
+            // Leave placeholders — the template will render <lc-code-block> for each
+            // No replacement needed here
+        }
+        else {
+            processed = processed.replace(/&lt;!--CODE_BLOCK_(\d+)--&gt;/g, (_match, idx) => {
+                const block = blocks[parseInt(idx, 10)];
+                return `<pre><code class="language-${block.lang}">${this.escapeHtml(block.code)}</code></pre>`;
+            });
+        }
+        return { html: processed, blocks, headings };
+    }
+    parseTables(text) {
+        return text.replace(/^(\|.+\|)\n(\|[-| :]+\|)\n((?:\|.+\|\n?)*)/gm, (_match, header, _separator, body) => {
+            const headers = header
+                .split('|')
+                .filter((c) => c.trim())
+                .map((c) => `<th>${c.trim()}</th>`)
+                .join('');
+            const rows = body
+                .trim()
+                .split('\n')
+                .map((row) => {
+                const cells = row
+                    .split('|')
+                    .filter((c) => c.trim())
+                    .map((c) => `<td>${c.trim()}</td>`)
+                    .join('');
+                return `<tr>${cells}</tr>`;
+            })
+                .join('');
+            return `<table class="lc-markdown__table"><thead><tr>${headers}</tr></thead><tbody>${rows}</tbody></table>`;
+        });
+    }
+    escapeHtml(text) {
+        return text
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: MarkdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: MarkdownComponent, isStandalone: true, selector: "lc-markdown", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, linkTarget: { classPropertyName: "linkTarget", publicName: "linkTarget", isSignal: true, isRequired: false, transformFunction: null }, sanitize: { classPropertyName: "sanitize", publicName: "sanitize", isSignal: true, isRequired: false, transformFunction: null }, syntaxHighlight: { classPropertyName: "syntaxHighlight", publicName: "syntaxHighlight", isSignal: true, isRequired: false, transformFunction: null }, showHeadingAnchors: { classPropertyName: "showHeadingAnchors", publicName: "showHeadingAnchors", isSignal: true, isRequired: false, transformFunction: null }, baseUrl: { classPropertyName: "baseUrl", publicName: "baseUrl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { linkClick: "linkClick", rendered: "rendered" }, ngImport: i0, template: "<div [class]=\"containerClasses()\" (click)=\"onLinkClick($event)\">\n  @for (part of renderParts(); track part.index) {\n    @if (part.type === 'html') {\n      <div [innerHTML]=\"part.safeHtml\"></div>\n    } @else {\n      <lc-code-block\n        [code]=\"part.code!\"\n        [language]=\"$any(part.lang)\"\n        [showLineNumbers]=\"true\"\n        [showCopy]=\"true\"\n      />\n    }\n  }\n</div>\n", styles: [".lc-markdown{color:var(--color-text, #111827);font-family:var(--font-family-sans);font-size:var(--font-size-base, 1rem);line-height:var(--line-height-relaxed, 1.75)}.lc-markdown h1,.lc-markdown h2,.lc-markdown h3,.lc-markdown h4,.lc-markdown h5,.lc-markdown h6{color:var(--color-text, #111827);font-weight:var(--font-weight-semibold, 600);line-height:var(--line-height-tight, 1.25);margin:1.5em 0 .5em}.lc-markdown h1:first-child,.lc-markdown h2:first-child,.lc-markdown h3:first-child,.lc-markdown h4:first-child,.lc-markdown h5:first-child,.lc-markdown h6:first-child{margin-top:0}.lc-markdown h1{font-size:2rem}.lc-markdown h2{font-size:1.5rem}.lc-markdown h3{font-size:1.25rem}.lc-markdown h4{font-size:1.125rem}.lc-markdown h5{font-size:1rem}.lc-markdown h6{font-size:.875rem}.lc-markdown p{margin:0 0 1em}.lc-markdown a{color:var(--color-primary-600, #2563eb);text-decoration:none}.lc-markdown a:hover{text-decoration:underline}.lc-markdown strong{font-weight:var(--font-weight-semibold, 600)}.lc-markdown code{background-color:var(--color-neutral-100, #f3f4f6);color:var(--color-neutral-800, #1f2937);padding:.125em .375em;border-radius:var(--radius-sm, .25rem);font-family:var(--font-family-mono, monospace);font-size:.875em}.lc-markdown pre{margin:1em 0;overflow-x:auto}.lc-markdown pre code{background:none;padding:0;border-radius:0}.lc-markdown blockquote{margin:1em 0;padding:.5em 1em;border-left:4px solid var(--color-primary-300, #93c5fd);background-color:var(--color-neutral-50, #f9fafb);color:var(--color-text-secondary, #4b5563)}.lc-markdown blockquote p{margin:0}.lc-markdown ul,.lc-markdown ol{margin:0 0 1em;padding-left:1.5em}.lc-markdown ul{list-style:disc}.lc-markdown ol{list-style:decimal}.lc-markdown li{margin:.25em 0}.lc-markdown hr{border:none;border-top:1px solid var(--color-divider, #e5e7eb);margin:1.5em 0}.lc-markdown img{max-width:100%;height:auto;border-radius:var(--radius-md, .375rem)}.lc-markdown del{text-decoration:line-through;color:var(--color-text-secondary, #6b7280)}.lc-markdown__table{width:100%;border-collapse:collapse;margin:1em 0;font-size:var(--font-size-sm, .875rem)}.lc-markdown__table th,.lc-markdown__table td{padding:.5rem .75rem;border:1px solid var(--color-divider, #e5e7eb);text-align:left}.lc-markdown__table th{background-color:var(--color-neutral-50, #f9fafb);font-weight:var(--font-weight-semibold, 600)}.lc-markdown__table tr:hover td{background-color:var(--color-neutral-50, #f9fafb)}.lc-markdown__task{list-style:none;margin-left:-1.5em}.lc-markdown__task input[type=checkbox]{margin-right:.5em;vertical-align:middle}.lc-markdown__anchor{color:var(--color-neutral-400, #9ca3af);text-decoration:none;margin-right:.25em;opacity:0;transition:opacity .15s ease}h1:hover .lc-markdown__anchor,h2:hover .lc-markdown__anchor,h3:hover .lc-markdown__anchor,h4:hover .lc-markdown__anchor,h5:hover .lc-markdown__anchor,h6:hover .lc-markdown__anchor{opacity:1}.lc-markdown lc-code-block{display:block;margin:1em 0}.lc-markdown--compact{font-size:var(--font-size-sm, .875rem);line-height:var(--line-height-normal, 1.5)}.lc-markdown--compact h1{font-size:1.5rem}.lc-markdown--compact h2{font-size:1.25rem}.lc-markdown--compact h3{font-size:1.125rem}.lc-markdown--compact h4{font-size:1rem}.lc-markdown--compact h5,.lc-markdown--compact h6{font-size:.875rem}.lc-markdown--compact h1,.lc-markdown--compact h2,.lc-markdown--compact h3,.lc-markdown--compact h4,.lc-markdown--compact h5,.lc-markdown--compact h6{margin:1em 0 .25em}.lc-markdown--compact p{margin:0 0 .5em}.lc-markdown--compact blockquote{margin:.5em 0;padding:.25em .75em}.lc-markdown--compact ul,.lc-markdown--compact ol{margin:0 0 .5em}\n"], dependencies: [{ kind: "component", type: CodeBlockComponent, selector: "lc-code-block", inputs: ["code", "language", "filename", "showLineNumbers", "showCopy", "showHeader"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: MarkdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lc-markdown', standalone: true, imports: [CodeBlockComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div [class]=\"containerClasses()\" (click)=\"onLinkClick($event)\">\n  @for (part of renderParts(); track part.index) {\n    @if (part.type === 'html') {\n      <div [innerHTML]=\"part.safeHtml\"></div>\n    } @else {\n      <lc-code-block\n        [code]=\"part.code!\"\n        [language]=\"$any(part.lang)\"\n        [showLineNumbers]=\"true\"\n        [showCopy]=\"true\"\n      />\n    }\n  }\n</div>\n", styles: [".lc-markdown{color:var(--color-text, #111827);font-family:var(--font-family-sans);font-size:var(--font-size-base, 1rem);line-height:var(--line-height-relaxed, 1.75)}.lc-markdown h1,.lc-markdown h2,.lc-markdown h3,.lc-markdown h4,.lc-markdown h5,.lc-markdown h6{color:var(--color-text, #111827);font-weight:var(--font-weight-semibold, 600);line-height:var(--line-height-tight, 1.25);margin:1.5em 0 .5em}.lc-markdown h1:first-child,.lc-markdown h2:first-child,.lc-markdown h3:first-child,.lc-markdown h4:first-child,.lc-markdown h5:first-child,.lc-markdown h6:first-child{margin-top:0}.lc-markdown h1{font-size:2rem}.lc-markdown h2{font-size:1.5rem}.lc-markdown h3{font-size:1.25rem}.lc-markdown h4{font-size:1.125rem}.lc-markdown h5{font-size:1rem}.lc-markdown h6{font-size:.875rem}.lc-markdown p{margin:0 0 1em}.lc-markdown a{color:var(--color-primary-600, #2563eb);text-decoration:none}.lc-markdown a:hover{text-decoration:underline}.lc-markdown strong{font-weight:var(--font-weight-semibold, 600)}.lc-markdown code{background-color:var(--color-neutral-100, #f3f4f6);color:var(--color-neutral-800, #1f2937);padding:.125em .375em;border-radius:var(--radius-sm, .25rem);font-family:var(--font-family-mono, monospace);font-size:.875em}.lc-markdown pre{margin:1em 0;overflow-x:auto}.lc-markdown pre code{background:none;padding:0;border-radius:0}.lc-markdown blockquote{margin:1em 0;padding:.5em 1em;border-left:4px solid var(--color-primary-300, #93c5fd);background-color:var(--color-neutral-50, #f9fafb);color:var(--color-text-secondary, #4b5563)}.lc-markdown blockquote p{margin:0}.lc-markdown ul,.lc-markdown ol{margin:0 0 1em;padding-left:1.5em}.lc-markdown ul{list-style:disc}.lc-markdown ol{list-style:decimal}.lc-markdown li{margin:.25em 0}.lc-markdown hr{border:none;border-top:1px solid var(--color-divider, #e5e7eb);margin:1.5em 0}.lc-markdown img{max-width:100%;height:auto;border-radius:var(--radius-md, .375rem)}.lc-markdown del{text-decoration:line-through;color:var(--color-text-secondary, #6b7280)}.lc-markdown__table{width:100%;border-collapse:collapse;margin:1em 0;font-size:var(--font-size-sm, .875rem)}.lc-markdown__table th,.lc-markdown__table td{padding:.5rem .75rem;border:1px solid var(--color-divider, #e5e7eb);text-align:left}.lc-markdown__table th{background-color:var(--color-neutral-50, #f9fafb);font-weight:var(--font-weight-semibold, 600)}.lc-markdown__table tr:hover td{background-color:var(--color-neutral-50, #f9fafb)}.lc-markdown__task{list-style:none;margin-left:-1.5em}.lc-markdown__task input[type=checkbox]{margin-right:.5em;vertical-align:middle}.lc-markdown__anchor{color:var(--color-neutral-400, #9ca3af);text-decoration:none;margin-right:.25em;opacity:0;transition:opacity .15s ease}h1:hover .lc-markdown__anchor,h2:hover .lc-markdown__anchor,h3:hover .lc-markdown__anchor,h4:hover .lc-markdown__anchor,h5:hover .lc-markdown__anchor,h6:hover .lc-markdown__anchor{opacity:1}.lc-markdown lc-code-block{display:block;margin:1em 0}.lc-markdown--compact{font-size:var(--font-size-sm, .875rem);line-height:var(--line-height-normal, 1.5)}.lc-markdown--compact h1{font-size:1.5rem}.lc-markdown--compact h2{font-size:1.25rem}.lc-markdown--compact h3{font-size:1.125rem}.lc-markdown--compact h4{font-size:1rem}.lc-markdown--compact h5,.lc-markdown--compact h6{font-size:.875rem}.lc-markdown--compact h1,.lc-markdown--compact h2,.lc-markdown--compact h3,.lc-markdown--compact h4,.lc-markdown--compact h5,.lc-markdown--compact h6{margin:1em 0 .25em}.lc-markdown--compact p{margin:0 0 .5em}.lc-markdown--compact blockquote{margin:.5em 0;padding:.25em .75em}.lc-markdown--compact ul,.lc-markdown--compact ol{margin:0 0 .5em}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], linkTarget: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkTarget", required: false }] }], sanitize: [{ type: i0.Input, args: [{ isSignal: true, alias: "sanitize", required: false }] }], syntaxHighlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "syntaxHighlight", required: false }] }], showHeadingAnchors: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeadingAnchors", required: false }] }], baseUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseUrl", required: false }] }], linkClick: [{ type: i0.Output, args: ["linkClick"] }], rendered: [{ type: i0.Output, args: ["rendered"] }] } });
+
+/**
+ * Streaming log / terminal viewer component.
+ *
+ * Supports controlled (lines input) and streaming (stream$ observable) modes,
+ * virtualized rendering for large buffers, ANSI color parsing, auto-scroll,
+ * and filtering.
+ *
+ * @example
+ * ```html
+ * <lc-log-viewer [stream$]="logs$" autoScroll height="600px" variant="terminal" />
+ * ```
+ */
+class LogViewerComponent {
+    scrollContainer;
+    ngZone = inject(NgZone);
+    streamSub;
+    scrollListener;
+    /** Controlled mode: array of log lines */
+    lines = input([], ...(ngDevMode ? [{ debugName: "lines" }] : /* istanbul ignore next */ []));
+    /** Streaming mode: observable of log lines */
+    stream$ = input(...(ngDevMode ? [undefined, { debugName: "stream$" }] : /* istanbul ignore next */ []));
+    /** Maximum lines to keep in buffer */
+    maxLines = input(10_000, ...(ngDevMode ? [{ debugName: "maxLines" }] : /* istanbul ignore next */ []));
+    /** Auto-scroll to bottom on new lines */
+    autoScroll = input(true, ...(ngDevMode ? [{ debugName: "autoScroll" }] : /* istanbul ignore next */ []));
+    /** Show timestamps column */
+    showTimestamps = input(true, ...(ngDevMode ? [{ debugName: "showTimestamps" }] : /* istanbul ignore next */ []));
+    /** Show line numbers */
+    showLineNumbers = input(false, ...(ngDevMode ? [{ debugName: "showLineNumbers" }] : /* istanbul ignore next */ []));
+    /** Parse ANSI color codes */
+    ansiColors = input(true, ...(ngDevMode ? [{ debugName: "ansiColors" }] : /* istanbul ignore next */ []));
+    /** Filter by log levels */
+    levelFilter = input(...(ngDevMode ? [undefined, { debugName: "levelFilter" }] : /* istanbul ignore next */ []));
+    /** Search query to highlight */
+    searchQuery = input(...(ngDevMode ? [undefined, { debugName: "searchQuery" }] : /* istanbul ignore next */ []));
+    /** Container height */
+    height = input('400px', ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    /** Visual variant */
+    variant = input('log', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Emitted when a line is clicked */
+    lineClick = output();
+    /** Emitted on copy all */
+    copyAll = output();
+    /** Emitted when scroll state changes */
+    scrollStateChange = output();
+    /** Internal buffer of all lines */
+    buffer = signal([], ...(ngDevMode ? [{ debugName: "buffer" }] : /* istanbul ignore next */ []));
+    /** Whether stream is paused */
+    paused = signal(false, ...(ngDevMode ? [{ debugName: "paused" }] : /* istanbul ignore next */ []));
+    /** Whether user is at bottom of scroll */
+    atBottom = signal(true, ...(ngDevMode ? [{ debugName: "atBottom" }] : /* istanbul ignore next */ []));
+    /** Internal search input */
+    internalSearch = signal('', ...(ngDevMode ? [{ debugName: "internalSearch" }] : /* istanbul ignore next */ []));
+    /** Internal level filter */
+    internalLevelFilter = signal(new Set(), ...(ngDevMode ? [{ debugName: "internalLevelFilter" }] : /* istanbul ignore next */ []));
+    /** Show search bar */
+    showSearch = signal(false, ...(ngDevMode ? [{ debugName: "showSearch" }] : /* istanbul ignore next */ []));
+    /** Effective search query */
+    effectiveSearch = computed(() => {
+        return this.searchQuery() || this.internalSearch();
+    }, ...(ngDevMode ? [{ debugName: "effectiveSearch" }] : /* istanbul ignore next */ []));
+    /** Filtered lines for display */
+    filteredLines = computed(() => {
+        let lines = this.buffer();
+        const levels = this.levelFilter();
+        const internalFilter = this.internalLevelFilter();
+        // Apply level filter
+        if (levels?.length) {
+            lines = lines.filter((l) => l.level && levels.includes(l.level));
+        }
+        else if (internalFilter.size > 0) {
+            lines = lines.filter((l) => l.level && internalFilter.has(l.level));
+        }
+        return lines;
+    }, ...(ngDevMode ? [{ debugName: "filteredLines" }] : /* istanbul ignore next */ []));
+    /** Visible window of lines (virtualized) */
+    scrollTop = signal(0, ...(ngDevMode ? [{ debugName: "scrollTop" }] : /* istanbul ignore next */ []));
+    LINE_HEIGHT = 22;
+    visibleRange = computed(() => {
+        const containerHeight = parseInt(this.height(), 10) || 400;
+        const toolbarHeight = 40;
+        const viewHeight = containerHeight - toolbarHeight;
+        const total = this.filteredLines().length;
+        const start = Math.floor(this.scrollTop() / this.LINE_HEIGHT);
+        const visible = Math.ceil(viewHeight / this.LINE_HEIGHT) + 2;
+        return {
+            start: Math.max(0, start - 1),
+            end: Math.min(total, start + visible + 1),
+            total,
+            totalHeight: total * this.LINE_HEIGHT,
+        };
+    }, ...(ngDevMode ? [{ debugName: "visibleRange" }] : /* istanbul ignore next */ []));
+    visibleLines = computed(() => {
+        const range = this.visibleRange();
+        return this.filteredLines().slice(range.start, range.end).map((line, i) => ({
+            ...line,
+            _index: range.start + i,
+        }));
+    }, ...(ngDevMode ? [{ debugName: "visibleLines" }] : /* istanbul ignore next */ []));
+    containerClasses = computed(() => {
+        return `lc-log-viewer lc-log-viewer--${this.variant()}`;
+    }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : /* istanbul ignore next */ []));
+    /** Line counts per level for toolbar */
+    levelCounts = computed(() => {
+        const buf = this.buffer();
+        const counts = { debug: 0, info: 0, warn: 0, error: 0 };
+        for (const line of buf) {
+            if (line.level && line.level in counts)
+                counts[line.level]++;
+        }
+        return counts;
+    }, ...(ngDevMode ? [{ debugName: "levelCounts" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Sync controlled lines to buffer
+        effect(() => {
+            const input = this.lines();
+            if (input.length > 0) {
+                this.buffer.set(input.slice(-this.maxLines()));
+            }
+        });
+        // Subscribe to stream$
+        effect(() => {
+            const stream = this.stream$();
+            this.streamSub?.unsubscribe();
+            if (stream) {
+                this.streamSub = stream.subscribe((data) => {
+                    if (this.paused())
+                        return;
+                    const newLines = Array.isArray(data) ? data : [data];
+                    this.buffer.update((buf) => {
+                        const combined = [...buf, ...newLines];
+                        return combined.length > this.maxLines()
+                            ? combined.slice(-this.maxLines())
+                            : combined;
+                    });
+                });
+            }
+        });
+    }
+    ngAfterViewInit() {
+        if (this.scrollContainer) {
+            this.ngZone.runOutsideAngular(() => {
+                this.scrollListener = () => this.onScroll();
+                this.scrollContainer.nativeElement.addEventListener('scroll', this.scrollListener, { passive: true });
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.streamSub?.unsubscribe();
+        if (this.scrollContainer && this.scrollListener) {
+            this.scrollContainer.nativeElement.removeEventListener('scroll', this.scrollListener);
+        }
+    }
+    onScroll() {
+        const el = this.scrollContainer?.nativeElement;
+        if (!el)
+            return;
+        this.scrollTop.set(el.scrollTop);
+        const wasAtBottom = this.atBottom();
+        const isAtBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 30;
+        if (wasAtBottom !== isAtBottom) {
+            this.ngZone.run(() => {
+                this.atBottom.set(isAtBottom);
+                this.scrollStateChange.emit({ atBottom: isAtBottom });
+            });
+        }
+        else {
+            this.scrollTop.set(el.scrollTop);
+        }
+    }
+    scrollToBottom() {
+        const el = this.scrollContainer?.nativeElement;
+        if (el) {
+            el.scrollTop = el.scrollHeight;
+            this.atBottom.set(true);
+        }
+    }
+    togglePause() {
+        this.paused.update((v) => !v);
+    }
+    clearBuffer() {
+        this.buffer.set([]);
+    }
+    async onCopyAll() {
+        const text = this.filteredLines()
+            .map((l) => {
+            const ts = l.timestamp ? `[${l.timestamp.toISOString()}] ` : '';
+            const lvl = l.level ? `[${l.level.toUpperCase()}] ` : '';
+            return `${ts}${lvl}${l.text}`;
+        })
+            .join('\n');
+        await navigator.clipboard.writeText(text);
+        this.copyAll.emit(text);
+    }
+    toggleSearch() {
+        this.showSearch.update((v) => !v);
+        if (!this.showSearch()) {
+            this.internalSearch.set('');
+        }
+    }
+    toggleLevelFilter(level) {
+        this.internalLevelFilter.update((set) => {
+            const newSet = new Set(set);
+            if (newSet.has(level)) {
+                newSet.delete(level);
+            }
+            else {
+                newSet.add(level);
+            }
+            return newSet;
+        });
+    }
+    onLineClick(line) {
+        this.lineClick.emit(line);
+    }
+    onKeydown(event) {
+        if (event.key === '/' && !this.showSearch()) {
+            event.preventDefault();
+            this.toggleSearch();
+        }
+        if (event.key === 'g' && !event.shiftKey && !this.showSearch()) {
+            this.scrollContainer?.nativeElement.scrollTo(0, 0);
+        }
+        if (event.key === 'G' && !this.showSearch()) {
+            this.scrollToBottom();
+        }
+    }
+    formatTimestamp(date) {
+        if (!date)
+            return '';
+        return date.toLocaleTimeString('en-US', { hour12: false });
+    }
+    parseAnsi(text) {
+        if (!this.ansiColors())
+            return this.escapeHtml(text);
+        const escaped = this.escapeHtml(text);
+        // Replace ANSI codes with spans
+        return escaped
+            .replace(/\x1b\[0m/g, '</span>')
+            .replace(/\x1b\[1m/g, '<span class="ansi-bold">')
+            .replace(/\x1b\[3m/g, '<span class="ansi-italic">')
+            .replace(/\x1b\[30m/g, '<span class="ansi-black">')
+            .replace(/\x1b\[31m/g, '<span class="ansi-red">')
+            .replace(/\x1b\[32m/g, '<span class="ansi-green">')
+            .replace(/\x1b\[33m/g, '<span class="ansi-yellow">')
+            .replace(/\x1b\[34m/g, '<span class="ansi-blue">')
+            .replace(/\x1b\[35m/g, '<span class="ansi-magenta">')
+            .replace(/\x1b\[36m/g, '<span class="ansi-cyan">')
+            .replace(/\x1b\[37m/g, '<span class="ansi-white">')
+            .replace(/\x1b\[90m/g, '<span class="ansi-gray">')
+            .replace(/\x1b\[91m/g, '<span class="ansi-bright-red">')
+            .replace(/\x1b\[92m/g, '<span class="ansi-bright-green">')
+            .replace(/\x1b\[93m/g, '<span class="ansi-bright-yellow">')
+            .replace(/\x1b\[94m/g, '<span class="ansi-bright-blue">')
+            .replace(/\x1b\[95m/g, '<span class="ansi-bright-magenta">')
+            .replace(/\x1b\[96m/g, '<span class="ansi-bright-cyan">')
+            .replace(/\x1b\[97m/g, '<span class="ansi-bright-white">')
+            .replace(/\x1b\[\d+m/g, ''); // strip unrecognized codes
+    }
+    highlightSearch(html) {
+        const query = this.effectiveSearch();
+        if (!query)
+            return html;
+        const escaped = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        return html.replace(new RegExp(`(${escaped})`, 'gi'), '<mark class="lc-log-viewer__match">$1</mark>');
+    }
+    escapeHtml(text) {
+        return text
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: LogViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: LogViewerComponent, isStandalone: true, selector: "lc-log-viewer", inputs: { lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null }, stream$: { classPropertyName: "stream$", publicName: "stream$", isSignal: true, isRequired: false, transformFunction: null }, maxLines: { classPropertyName: "maxLines", publicName: "maxLines", isSignal: true, isRequired: false, transformFunction: null }, autoScroll: { classPropertyName: "autoScroll", publicName: "autoScroll", isSignal: true, isRequired: false, transformFunction: null }, showTimestamps: { classPropertyName: "showTimestamps", publicName: "showTimestamps", isSignal: true, isRequired: false, transformFunction: null }, showLineNumbers: { classPropertyName: "showLineNumbers", publicName: "showLineNumbers", isSignal: true, isRequired: false, transformFunction: null }, ansiColors: { classPropertyName: "ansiColors", publicName: "ansiColors", isSignal: true, isRequired: false, transformFunction: null }, levelFilter: { classPropertyName: "levelFilter", publicName: "levelFilter", isSignal: true, isRequired: false, transformFunction: null }, searchQuery: { classPropertyName: "searchQuery", publicName: "searchQuery", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lineClick: "lineClick", copyAll: "copyAll", scrollStateChange: "scrollStateChange" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }], 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() ? 'Resume' : 'Pause'\"\n        >\n          <lc-icon [name]=\"paused() ? 'play' : 'pause'\" size=\"xs\" />\n        </button>\n      }\n      <button\n        type=\"button\"\n        class=\"lc-log-viewer__tool-btn\"\n        (click)=\"clearBuffer()\"\n        title=\"Clear\"\n      >\n        <lc-icon name=\"trash\" size=\"xs\" />\n      </button>\n      <button\n        type=\"button\"\n        class=\"lc-log-viewer__tool-btn\"\n        (click)=\"onCopyAll()\"\n        title=\"Copy all\"\n      >\n        <lc-icon name=\"clipboard-document\" size=\"xs\" />\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        title=\"Search (/)\"\n      >\n        <lc-icon name=\"magnifying-glass\" size=\"xs\" />\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          (click)=\"toggleLevelFilter('error')\"\n        >\n          {{ levelCounts().error }} errors\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          (click)=\"toggleLevelFilter('warn')\"\n        >\n          {{ levelCounts().warn }} warnings\n        </button>\n      }\n      <span class=\"lc-log-viewer__line-count\">{{ filteredLines().length }} lines</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\" />\n      <input\n        type=\"text\"\n        class=\"lc-log-viewer__search-input\"\n        placeholder=\"Search logs...\"\n        [value]=\"internalSearch()\"\n        (input)=\"internalSearch.set($any($event.target).value)\"\n        autofocus\n      />\n    </div>\n  }\n\n  <!-- Log content (virtualized) -->\n  <div\n    #scrollContainer\n    class=\"lc-log-viewer__content\"\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 * LINE_HEIGHT) + 'px)'\"\n      >\n        @for (line of visibleLines(); track line._index) {\n          <div\n            class=\"lc-log-viewer__line\"\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            (click)=\"onLineClick(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]=\"highlightSearch(parseAnsi(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\" />\n      Jump to bottom\n    </button>\n  }\n</div>\n", styles: [".lc-log-viewer{display:flex;flex-direction:column;border:1px solid var(--color-divider, #e5e7eb);border-radius:var(--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-background, #ffffff);color:var(--color-text, #111827)}.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(--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__level-pill{font-size:.6875rem;padding:.125rem .5rem;border-radius:9999px;border:none;cursor:pointer;font-family:var(--font-family-sans);transition:opacity .15s;opacity:.6}.lc-log-viewer__level-pill--active{opacity:1}.lc-log-viewer__level-pill--error{background-color:#fecaca;color:#991b1b}.lc-log-viewer--terminal .lc-log-viewer__level-pill--error{background-color:#45202a;color:#f38ba8}.lc-log-viewer__level-pill--warn{background-color:#fef3c7;color:#92400e}.lc-log-viewer--terminal .lc-log-viewer__level-pill--warn{background-color:#3d3520;color:#f9e2af}.lc-log-viewer__line-count{font-size:.6875rem;opacity:.5;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{opacity:.4}.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:22px;white-space:nowrap;cursor:pointer;transition:background-color .1s}.lc-log-viewer__line:hover{background-color:#80808014}.lc-log-viewer__line--debug{opacity:.6}.lc-log-viewer--log .lc-log-viewer__line--warn{background-color:#fffbeb}.lc-log-viewer--terminal .lc-log-viewer__line--warn{background-color:#f9e2af0d}.lc-log-viewer--log .lc-log-viewer__line--error{background-color:#fef2f2}.lc-log-viewer--terminal .lc-log-viewer__line--error{background-color:#f38ba814}.lc-log-viewer__line-num{color:inherit;opacity:.3;min-width:3ch;text-align:right;-webkit-user-select:none;user-select:none}.lc-log-viewer__timestamp{color:inherit;opacity:.5;min-width:12ch}.lc-log-viewer__level{min-width:5ch;font-weight:600}.lc-log-viewer__line--debug .lc-log-viewer__level{color:#9ca3af}.lc-log-viewer__line--info .lc-log-viewer__level{color:#3b82f6}.lc-log-viewer__line--warn .lc-log-viewer__level{color:#f59e0b}.lc-log-viewer__line--error .lc-log-viewer__level{color:#ef4444}.lc-log-viewer__line--debug .lc-log-viewer--terminal .lc-log-viewer__level{color:#6c7086}.lc-log-viewer__line--info .lc-log-viewer--terminal .lc-log-viewer__level{color:#89b4fa}.lc-log-viewer__line--warn .lc-log-viewer--terminal .lc-log-viewer__level{color:#f9e2af}.lc-log-viewer__line--error .lc-log-viewer--terminal .lc-log-viewer__level{color:#f38ba8}.lc-log-viewer__source{color:inherit;opacity:.5}.lc-log-viewer__text{flex:1;min-width:0}.lc-log-viewer__match{background-color:#fbbf2480;border-radius:2px;padding:0 1px}.lc-log-viewer--terminal .lc-log-viewer__match{background-color:#f9e2af40}.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-background, #ffffff);color:var(--color-text, #111827);font-size:.75rem;font-family:var(--font-family-sans);cursor:pointer;box-shadow:0 2px 8px #00000026;z-index:10;transition:background-color .15s}.lc-log-viewer__jump-bottom:hover{background-color:var(--color-neutral-50, #f9fafb)}.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}.ansi-bold{font-weight:700}.ansi-italic{font-style:italic}.ansi-black{color:#1e1e2e}.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:#6c7086}.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}.lc-log-viewer--log .ansi-black{color:#111827}.lc-log-viewer--log .ansi-red{color:#dc2626}.lc-log-viewer--log .ansi-green{color:#16a34a}.lc-log-viewer--log .ansi-yellow{color:#ca8a04}.lc-log-viewer--log .ansi-blue{color:#2563eb}.lc-log-viewer--log .ansi-magenta{color:#9333ea}.lc-log-viewer--log .ansi-cyan{color:#0891b2}.lc-log-viewer--log .ansi-white{color:#6b7280}.lc-log-viewer--log .ansi-gray{color:#9ca3af}.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: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: LogViewerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lc-log-viewer', standalone: true, imports: [CommonModule, IconComponent], 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() ? 'Resume' : 'Pause'\"\n        >\n          <lc-icon [name]=\"paused() ? 'play' : 'pause'\" size=\"xs\" />\n        </button>\n      }\n      <button\n        type=\"button\"\n        class=\"lc-log-viewer__tool-btn\"\n        (click)=\"clearBuffer()\"\n        title=\"Clear\"\n      >\n        <lc-icon name=\"trash\" size=\"xs\" />\n      </button>\n      <button\n        type=\"button\"\n        class=\"lc-log-viewer__tool-btn\"\n        (click)=\"onCopyAll()\"\n        title=\"Copy all\"\n      >\n        <lc-icon name=\"clipboard-document\" size=\"xs\" />\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        title=\"Search (/)\"\n      >\n        <lc-icon name=\"magnifying-glass\" size=\"xs\" />\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          (click)=\"toggleLevelFilter('error')\"\n        >\n          {{ levelCounts().error }} errors\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          (click)=\"toggleLevelFilter('warn')\"\n        >\n          {{ levelCounts().warn }} warnings\n        </button>\n      }\n      <span class=\"lc-log-viewer__line-count\">{{ filteredLines().length }} lines</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\" />\n      <input\n        type=\"text\"\n        class=\"lc-log-viewer__search-input\"\n        placeholder=\"Search logs...\"\n        [value]=\"internalSearch()\"\n        (input)=\"internalSearch.set($any($event.target).value)\"\n        autofocus\n      />\n    </div>\n  }\n\n  <!-- Log content (virtualized) -->\n  <div\n    #scrollContainer\n    class=\"lc-log-viewer__content\"\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 * LINE_HEIGHT) + 'px)'\"\n      >\n        @for (line of visibleLines(); track line._index) {\n          <div\n            class=\"lc-log-viewer__line\"\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            (click)=\"onLineClick(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]=\"highlightSearch(parseAnsi(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\" />\n      Jump to bottom\n    </button>\n  }\n</div>\n", styles: [".lc-log-viewer{display:flex;flex-direction:column;border:1px solid var(--color-divider, #e5e7eb);border-radius:var(--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-background, #ffffff);color:var(--color-text, #111827)}.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(--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__level-pill{font-size:.6875rem;padding:.125rem .5rem;border-radius:9999px;border:none;cursor:pointer;font-family:var(--font-family-sans);transition:opacity .15s;opacity:.6}.lc-log-viewer__level-pill--active{opacity:1}.lc-log-viewer__level-pill--error{background-color:#fecaca;color:#991b1b}.lc-log-viewer--terminal .lc-log-viewer__level-pill--error{background-color:#45202a;color:#f38ba8}.lc-log-viewer__level-pill--warn{background-color:#fef3c7;color:#92400e}.lc-log-viewer--terminal .lc-log-viewer__level-pill--warn{background-color:#3d3520;color:#f9e2af}.lc-log-viewer__line-count{font-size:.6875rem;opacity:.5;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{opacity:.4}.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:22px;white-space:nowrap;cursor:pointer;transition:background-color .1s}.lc-log-viewer__line:hover{background-color:#80808014}.lc-log-viewer__line--debug{opacity:.6}.lc-log-viewer--log .lc-log-viewer__line--warn{background-color:#fffbeb}.lc-log-viewer--terminal .lc-log-viewer__line--warn{background-color:#f9e2af0d}.lc-log-viewer--log .lc-log-viewer__line--error{background-color:#fef2f2}.lc-log-viewer--terminal .lc-log-viewer__line--error{background-color:#f38ba814}.lc-log-viewer__line-num{color:inherit;opacity:.3;min-width:3ch;text-align:right;-webkit-user-select:none;user-select:none}.lc-log-viewer__timestamp{color:inherit;opacity:.5;min-width:12ch}.lc-log-viewer__level{min-width:5ch;font-weight:600}.lc-log-viewer__line--debug .lc-log-viewer__level{color:#9ca3af}.lc-log-viewer__line--info .lc-log-viewer__level{color:#3b82f6}.lc-log-viewer__line--warn .lc-log-viewer__level{color:#f59e0b}.lc-log-viewer__line--error .lc-log-viewer__level{color:#ef4444}.lc-log-viewer__line--debug .lc-log-viewer--terminal .lc-log-viewer__level{color:#6c7086}.lc-log-viewer__line--info .lc-log-viewer--terminal .lc-log-viewer__level{color:#89b4fa}.lc-log-viewer__line--warn .lc-log-viewer--terminal .lc-log-viewer__level{color:#f9e2af}.lc-log-viewer__line--error .lc-log-viewer--terminal .lc-log-viewer__level{color:#f38ba8}.lc-log-viewer__source{color:inherit;opacity:.5}.lc-log-viewer__text{flex:1;min-width:0}.lc-log-viewer__match{background-color:#fbbf2480;border-radius:2px;padding:0 1px}.lc-log-viewer--terminal .lc-log-viewer__match{background-color:#f9e2af40}.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-background, #ffffff);color:var(--color-text, #111827);font-size:.75rem;font-family:var(--font-family-sans);cursor:pointer;box-shadow:0 2px 8px #00000026;z-index:10;transition:background-color .15s}.lc-log-viewer__jump-bottom:hover{background-color:var(--color-neutral-50, #f9fafb)}.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}.ansi-bold{font-weight:700}.ansi-italic{font-style:italic}.ansi-black{color:#1e1e2e}.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:#6c7086}.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}.lc-log-viewer--log .ansi-black{color:#111827}.lc-log-viewer--log .ansi-red{color:#dc2626}.lc-log-viewer--log .ansi-green{color:#16a34a}.lc-log-viewer--log .ansi-yellow{color:#ca8a04}.lc-log-viewer--log .ansi-blue{color:#2563eb}.lc-log-viewer--log .ansi-magenta{color:#9333ea}.lc-log-viewer--log .ansi-cyan{color:#0891b2}.lc-log-viewer--log .ansi-white{color:#6b7280}.lc-log-viewer--log .ansi-gray{color:#9ca3af}.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: () => [], propDecorators: { scrollContainer: [{
+                type: ViewChild,
+                args: ['scrollContainer']
+            }], lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "lines", required: false }] }], stream$: [{ type: i0.Input, args: [{ isSignal: true, alias: "stream$", required: false }] }], maxLines: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLines", required: false }] }], autoScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScroll", required: false }] }], showTimestamps: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTimestamps", required: false }] }], showLineNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLineNumbers", required: false }] }], ansiColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "ansiColors", required: false }] }], levelFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "levelFilter", required: false }] }], searchQuery: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchQuery", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], lineClick: [{ type: i0.Output, args: ["lineClick"] }], copyAll: [{ type: i0.Output, args: ["copyAll"] }], scrollStateChange: [{ type: i0.Output, args: ["scrollStateChange"] }] } });
+
+/**
+ * Confirm dialog component for confirming user actions.
+ *
+ * Builds on `<lc-modal>` to provide a standardized confirmation pattern
+ * with optional destructive variant and text-matching confirmation.
+ *
+ * @example
+ * ```html
+ * <lc-confirm-dialog
+ *   [open]="showConfirm()"
+ *   variant="destructive"
+ *   title="Delete project?"
+ *   message="This cannot be undone."
+ *   (confirmed)="onDelete()"
+ *   (cancelled)="showConfirm.set(false)"
+ * />
+ * ```
+ */
+class ConfirmDialogComponent {
+    confirmInput;
+    /** Whether the dialog is open */
+    open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** Dialog variant */
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Dialog title */
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /** Dialog message */
+    message = input.required(...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    /** Confirm button label */
+    confirmLabel = input('Confirm', ...(ngDevMode ? [{ debugName: "confirmLabel" }] : /* istanbul ignore next */ []));
+    /** Cancel button label */
+    cancelLabel = input('Cancel', ...(ngDevMode ? [{ debugName: "cancelLabel" }] : /* istanbul ignore next */ []));
+    /** Icon name (auto-set by variant if not provided) */
+    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** Require text match to enable confirm */
+    requireText = input(...(ngDevMode ? [undefined, { debugName: "requireText" }] : /* istanbul ignore next */ []));
+    /** Emitted when user confirms */
+    confirmed = output();
+    /** Emitted when user cancels */
+    cancelled = output();
+    /** Internal text input value */
+    inputValue = signal('', ...(ngDevMode ? [{ debugName: "inputValue" }] : /* istanbul ignore next */ []));
+    /** Resolved icon name */
+    resolvedIcon = computed(() => {
+        const icon = this.icon();
+        if (icon)
+            return icon;
+        switch (this.variant()) {
+            case 'destructive':
+                return 'exclamation-triangle';
+            case 'warning':
+                return 'exclamation-circle';
+            default:
+                return 'question-mark-circle';
+        }
+    }, ...(ngDevMode ? [{ debugName: "resolvedIcon" }] : /* istanbul ignore next */ []));
+    /** Resolved icon color */
+    iconColor = computed(() => {
+        switch (this.variant()) {
+            case 'destructive':
+                return 'var(--color-error-default, #ef4444)';
+            case 'warning':
+                return 'var(--color-warning-default, #f59e0b)';
+            default:
+                return 'var(--color-primary-600, #2563eb)';
+        }
+    }, ...(ngDevMode ? [{ debugName: "iconColor" }] : /* istanbul ignore next */ []));
+    /** Confirm button variant */
+    confirmButtonVariant = computed(() => {
+        switch (this.variant()) {
+            case 'destructive':
+                return 'danger';
+            case 'warning':
+                return 'warning';
+            default:
+                return 'primary';
+        }
+    }, ...(ngDevMode ? [{ debugName: "confirmButtonVariant" }] : /* istanbul ignore next */ []));
+    /** Whether confirm is allowed (text match check) */
+    confirmAllowed = computed(() => {
+        const req = this.requireText();
+        if (!req)
+            return true;
+        return this.inputValue() === req.expected;
+    }, ...(ngDevMode ? [{ debugName: "confirmAllowed" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Reset input when dialog opens
+        effect(() => {
+            if (this.open()) {
+                this.inputValue.set('');
+            }
+        });
+    }
+    onConfirm() {
+        if (!this.confirmAllowed())
+            return;
+        this.confirmed.emit();
+    }
+    onCancel() {
+        this.cancelled.emit();
+    }
+    onModalClose() {
+        this.cancelled.emit();
+    }
+    onInputChange(value) {
+        this.inputValue.set(String(value));
+    }
+    onKeydown(event) {
+        if (event.key === 'Enter' && this.confirmAllowed()) {
+            event.preventDefault();
+            this.onConfirm();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: ConfirmDialogComponent, isStandalone: true, selector: "lc-confirm-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, requireText: { classPropertyName: "requireText", publicName: "requireText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmed: "confirmed", cancelled: "cancelled" }, viewQueries: [{ propertyName: "confirmInput", first: true, predicate: ["confirmInput"], descendants: true }], ngImport: i0, template: "<lc-modal\n  [open]=\"open()\"\n  size=\"sm\"\n  [showCloseButton]=\"true\"\n  (openChange)=\"$event ? null : onModalClose()\"\n  (keydown)=\"onKeydown($event)\"\n>\n  <div slot=\"header\">\n    <div class=\"lc-confirm__header\">\n      <lc-icon\n        [name]=\"resolvedIcon()\"\n        size=\"md\"\n        [color]=\"iconColor()\"\n      />\n      <h2>{{ title() }}</h2>\n    </div>\n  </div>\n\n  <div slot=\"body\">\n    <p class=\"lc-confirm__message\">{{ message() }}</p>\n\n    @if (requireText(); as req) {\n      <div class=\"lc-confirm__require-text\">\n        <label class=\"lc-confirm__require-label\">{{ req.prompt }}</label>\n        <lc-input\n          #confirmInput\n          [placeholder]=\"req.expected\"\n          (valueChange)=\"onInputChange($event)\"\n        />\n      </div>\n    }\n  </div>\n\n  <div slot=\"footer\" class=\"lc-confirm__footer\">\n    <lc-button\n      variant=\"ghost\"\n      (clicked)=\"onCancel()\"\n    >\n      {{ cancelLabel() }}\n    </lc-button>\n    <lc-button\n      [variant]=\"confirmButtonVariant()\"\n      [disabled]=\"!confirmAllowed()\"\n      (clicked)=\"onConfirm()\"\n    >\n      {{ confirmLabel() }}\n    </lc-button>\n  </div>\n</lc-modal>\n", styles: [".lc-confirm__header{display:flex;align-items:center;gap:.5rem}.lc-confirm__header h2{margin:0;font-size:var(--font-size-lg, 1.125rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-text, #111827)}.lc-confirm__message{margin:0;color:var(--color-text-secondary, #4b5563);font-size:var(--font-size-sm, .875rem);line-height:1.6}.lc-confirm__require-text{margin-top:1rem}.lc-confirm__require-label{display:block;font-size:var(--font-size-sm, .875rem);font-weight:500;color:var(--color-text, #111827);margin-bottom:.375rem}.lc-confirm__footer{display:flex;gap:.5rem;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }, { kind: "component", type: ButtonComponent, selector: "lc-button", inputs: ["variant", "size", "disabled", "loading", "isLoading", "iconOnly", "fullWidth", "ariaLabel", "type"], outputs: ["clicked", "focused", "blurred"] }, { kind: "component", type: ModalComponent, selector: "lc-modal", inputs: ["open", "size", "closeOnBackdropClick", "closeOnEscape", "showCloseButton", "ariaLabel", "ariaLabelledBy", "ariaDescribedBy"], outputs: ["modalOpened", "modalClosed", "openChange", "backdropClicked"] }, { kind: "component", type: InputComponent, selector: "lc-input", inputs: ["label", "placeholder", "type", "size", "disabled", "readonly", "required", "error", "helperText", "iconBefore", "iconAfter", "maxLength", "showCharCount", "ariaLabel"], outputs: ["valueChange", "focused", "blurred", "enterPressed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lc-confirm-dialog', standalone: true, imports: [CommonModule, FormsModule, IconComponent, ButtonComponent, ModalComponent, InputComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<lc-modal\n  [open]=\"open()\"\n  size=\"sm\"\n  [showCloseButton]=\"true\"\n  (openChange)=\"$event ? null : onModalClose()\"\n  (keydown)=\"onKeydown($event)\"\n>\n  <div slot=\"header\">\n    <div class=\"lc-confirm__header\">\n      <lc-icon\n        [name]=\"resolvedIcon()\"\n        size=\"md\"\n        [color]=\"iconColor()\"\n      />\n      <h2>{{ title() }}</h2>\n    </div>\n  </div>\n\n  <div slot=\"body\">\n    <p class=\"lc-confirm__message\">{{ message() }}</p>\n\n    @if (requireText(); as req) {\n      <div class=\"lc-confirm__require-text\">\n        <label class=\"lc-confirm__require-label\">{{ req.prompt }}</label>\n        <lc-input\n          #confirmInput\n          [placeholder]=\"req.expected\"\n          (valueChange)=\"onInputChange($event)\"\n        />\n      </div>\n    }\n  </div>\n\n  <div slot=\"footer\" class=\"lc-confirm__footer\">\n    <lc-button\n      variant=\"ghost\"\n      (clicked)=\"onCancel()\"\n    >\n      {{ cancelLabel() }}\n    </lc-button>\n    <lc-button\n      [variant]=\"confirmButtonVariant()\"\n      [disabled]=\"!confirmAllowed()\"\n      (clicked)=\"onConfirm()\"\n    >\n      {{ confirmLabel() }}\n    </lc-button>\n  </div>\n</lc-modal>\n", styles: [".lc-confirm__header{display:flex;align-items:center;gap:.5rem}.lc-confirm__header h2{margin:0;font-size:var(--font-size-lg, 1.125rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-text, #111827)}.lc-confirm__message{margin:0;color:var(--color-text-secondary, #4b5563);font-size:var(--font-size-sm, .875rem);line-height:1.6}.lc-confirm__require-text{margin-top:1rem}.lc-confirm__require-label{display:block;font-size:var(--font-size-sm, .875rem);font-weight:500;color:var(--color-text, #111827);margin-bottom:.375rem}.lc-confirm__footer{display:flex;gap:.5rem;justify-content:flex-end}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { confirmInput: [{
+                type: ViewChild,
+                args: ['confirmInput']
+            }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], confirmLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmLabel", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], requireText: [{ type: i0.Input, args: [{ isSignal: true, alias: "requireText", required: false }] }], confirmed: [{ type: i0.Output, args: ["confirmed"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }] } });
+
+/**
+ * Imperative confirm dialog service.
+ *
+ * @example
+ * ```ts
+ * const ok = await this.confirmService.confirm({
+ *   title: 'Delete item?',
+ *   message: 'This cannot be undone.',
+ * });
+ * if (ok) { ... }
+ * ```
+ */
+class ConfirmService {
+    appRef = inject(ApplicationRef);
+    injector = inject(EnvironmentInjector);
+    /**
+     * Show a confirmation dialog and return a promise that resolves
+     * to true (confirmed) or false (cancelled).
+     */
+    confirm(opts) {
+        return new Promise((resolve) => {
+            // Create a host element
+            const hostEl = document.createElement('div');
+            document.body.appendChild(hostEl);
+            const componentRef = createComponent(ConfirmDialogComponent, {
+                hostElement: hostEl,
+                environmentInjector: this.injector,
+            });
+            // Set inputs
+            componentRef.setInput('open', true);
+            componentRef.setInput('title', opts.title);
+            componentRef.setInput('message', opts.message);
+            if (opts.confirmLabel)
+                componentRef.setInput('confirmLabel', opts.confirmLabel);
+            if (opts.cancelLabel)
+                componentRef.setInput('cancelLabel', opts.cancelLabel);
+            if (opts.variant)
+                componentRef.setInput('variant', opts.variant);
+            if (opts.icon)
+                componentRef.setInput('icon', opts.icon);
+            if (opts.requireText)
+                componentRef.setInput('requireText', opts.requireText);
+            const cleanup = () => {
+                this.appRef.detachView(componentRef.hostView);
+                componentRef.destroy();
+                hostEl.remove();
+            };
+            componentRef.instance.confirmed.subscribe(() => {
+                cleanup();
+                resolve(true);
+            });
+            componentRef.instance.cancelled.subscribe(() => {
+                cleanup();
+                resolve(false);
+            });
+            this.appRef.attachView(componentRef.hostView);
+        });
+    }
+    /**
+     * Show a destructive confirmation dialog.
+     * Shorthand for `confirm({ ...opts, variant: 'destructive' })`.
+     */
+    destructive(opts) {
+        return this.confirm({ ...opts, variant: 'destructive' });
+    }
+    /**
+     * Show a warning confirmation dialog.
+     * Shorthand for `confirm({ ...opts, variant: 'warning' })`.
+     */
+    warning(opts) {
+        return this.confirm({ ...opts, variant: 'warning' });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ConfirmService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ConfirmService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ConfirmService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Combobox / async autocomplete component.
+ *
+ * Supports free-text input with sync/async option suggestions,
+ * single/multiple selection, create new entries, and keyboard navigation.
+ *
+ * @example
+ * ```html
+ * <lc-combobox
+ *   label="Assign to user"
+ *   [loadOptions]="searchUsers"
+ *   [(value)]="assignee"
+ *   allowCreate
+ * />
+ * ```
+ */
+class ComboboxComponent {
+    inputEl;
+    elRef = inject(ElementRef);
+    querySubject = new Subject();
+    asyncSub;
+    /** Sync options */
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /** Async option loader */
+    loadOptions = input(...(ngDevMode ? [undefined, { debugName: "loadOptions" }] : /* istanbul ignore next */ []));
+    /** Debounce for async queries */
+    debounceMs = input(250, ...(ngDevMode ? [{ debugName: "debounceMs" }] : /* istanbul ignore next */ []));
+    /** Minimum characters before triggering search */
+    minChars = input(1, ...(ngDevMode ? [{ debugName: "minChars" }] : /* istanbul ignore next */ []));
+    /** Placeholder text */
+    placeholder = input('Search…', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Label */
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Helper text */
+    helperText = input(...(ngDevMode ? [undefined, { debugName: "helperText" }] : /* istanbul ignore next */ []));
+    /** Error message */
+    error = input(...(ngDevMode ? [undefined, { debugName: "error" }] : /* istanbul ignore next */ []));
+    /** Disabled state */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Allow multiple selections */
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    /** Allow creating new entries */
+    allowCreate = input(false, ...(ngDevMode ? [{ debugName: "allowCreate" }] : /* istanbul ignore next */ []));
+    /** Show loading spinner (controlled) */
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    /** Empty state message */
+    emptyMessage = input('No results', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+    /** Size */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Value change event */
+    valueChange = output();
+    /** Query change event */
+    queryChange = output();
+    /** Option selected event */
+    optionSelected = output();
+    /** Created event (allowCreate) */
+    created = output();
+    /** Internal state */
+    query = signal('', ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    highlightedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "highlightedIndex" }] : /* istanbul ignore next */ []));
+    asyncOptions = signal([], ...(ngDevMode ? [{ debugName: "asyncOptions" }] : /* istanbul ignore next */ []));
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+    /** Selected values */
+    selectedSingle = signal(null, ...(ngDevMode ? [{ debugName: "selectedSingle" }] : /* istanbul ignore next */ []));
+    selectedMultiple = signal([], ...(ngDevMode ? [{ debugName: "selectedMultiple" }] : /* istanbul ignore next */ []));
+    /** Resolved visible options */
+    visibleOptions = computed(() => {
+        const q = this.query().toLowerCase();
+        const loader = this.loadOptions();
+        let opts;
+        if (loader) {
+            opts = this.asyncOptions();
+        }
+        else {
+            opts = this.options();
+            if (q.length >= this.minChars()) {
+                opts = opts.filter((o) => o.label.toLowerCase().includes(q) ||
+                    o.value.toLowerCase().includes(q) ||
+                    (o.description && o.description.toLowerCase().includes(q)));
+            }
+        }
+        // Remove already selected in multiple mode
+        if (this.multiple()) {
+            const selected = new Set(this.selectedMultiple().map((s) => s.value));
+            opts = opts.filter((o) => !selected.has(o.value));
+        }
+        return opts;
+    }, ...(ngDevMode ? [{ debugName: "visibleOptions" }] : /* istanbul ignore next */ []));
+    /** Grouped options */
+    groupedOptions = computed(() => {
+        const opts = this.visibleOptions();
+        const groups = new Map();
+        for (const opt of opts) {
+            const group = opt.group || '';
+            if (!groups.has(group))
+                groups.set(group, []);
+            groups.get(group).push(opt);
+        }
+        return Array.from(groups.entries()).map(([label, items]) => ({
+            label,
+            items,
+        }));
+    }, ...(ngDevMode ? [{ debugName: "groupedOptions" }] : /* istanbul ignore next */ []));
+    /** Flat list for keyboard nav */
+    flatOptions = computed(() => {
+        return this.groupedOptions().flatMap((g) => g.items);
+    }, ...(ngDevMode ? [{ debugName: "flatOptions" }] : /* istanbul ignore next */ []));
+    /** Whether to show "Create" option */
+    showCreateOption = computed(() => {
+        if (!this.allowCreate())
+            return false;
+        const q = this.query().trim();
+        if (!q)
+            return false;
+        const exact = this.visibleOptions().some((o) => o.label.toLowerCase() === q.toLowerCase());
+        return !exact;
+    }, ...(ngDevMode ? [{ debugName: "showCreateOption" }] : /* istanbul ignore next */ []));
+    /** Container classes */
+    containerClasses = computed(() => {
+        const classes = [`lc-combobox`, `lc-combobox--${this.size()}`];
+        if (this.disabled())
+            classes.push('lc-combobox--disabled');
+        if (this.error())
+            classes.push('lc-combobox--error');
+        if (this.isOpen())
+            classes.push('lc-combobox--open');
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : /* istanbul ignore next */ []));
+    // ControlValueAccessor
+    onChange = () => { };
+    onTouched = () => { };
+    constructor() {
+        // Async loading pipe
+        this.asyncSub = this.querySubject
+            .pipe(debounceTime(this.debounceMs()), switchMap((q) => {
+            const loader = this.loadOptions();
+            if (!loader || q.length < this.minChars()) {
+                return of([]);
+            }
+            this.isLoading.set(true);
+            return loader(q);
+        }))
+            .subscribe((results) => {
+            this.asyncOptions.set(results);
+            this.isLoading.set(false);
+        });
+    }
+    ngOnDestroy() {
+        this.asyncSub?.unsubscribe();
+        this.querySubject.complete();
+    }
+    writeValue(value) {
+        if (this.multiple()) {
+            this.selectedMultiple.set(Array.isArray(value) ? value : []);
+        }
+        else {
+            this.selectedSingle.set(value && !Array.isArray(value) ? value : null);
+            if (value && !Array.isArray(value)) {
+                this.query.set(value.label);
+            }
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        // handled by input
+    }
+    onInputChange(event) {
+        const value = event.target.value;
+        this.query.set(value);
+        this.queryChange.emit(value);
+        this.highlightedIndex.set(-1);
+        if (this.loadOptions()) {
+            this.querySubject.next(value);
+        }
+        if (value.length >= this.minChars()) {
+            this.isOpen.set(true);
+        }
+    }
+    onInputFocus() {
+        if (this.query().length >= this.minChars() || this.options().length > 0) {
+            this.isOpen.set(true);
+        }
+    }
+    onInputBlur() {
+        this.onTouched();
+        // Delay to allow click on dropdown
+        setTimeout(() => this.isOpen.set(false), 200);
+    }
+    onKeydown(event) {
+        const flat = this.flatOptions();
+        const total = flat.length + (this.showCreateOption() ? 1 : 0);
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.isOpen.set(true);
+                this.highlightedIndex.update((i) => (i + 1) % total);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.highlightedIndex.update((i) => (i - 1 + total) % total);
+                break;
+            case 'Enter':
+                event.preventDefault();
+                if (this.highlightedIndex() >= 0) {
+                    if (this.highlightedIndex() === flat.length && this.showCreateOption()) {
+                        this.onCreateNew();
+                    }
+                    else {
+                        const opt = flat[this.highlightedIndex()];
+                        if (opt && !opt.disabled) {
+                            this.selectOption(opt);
+                        }
+                    }
+                }
+                else if (this.showCreateOption()) {
+                    this.onCreateNew();
+                }
+                break;
+            case 'Escape':
+                this.isOpen.set(false);
+                break;
+            case 'Tab':
+                if (this.highlightedIndex() >= 0 && this.isOpen()) {
+                    const opt = flat[this.highlightedIndex()];
+                    if (opt && !opt.disabled) {
+                        this.selectOption(opt);
+                    }
+                }
+                this.isOpen.set(false);
+                break;
+            case 'Backspace':
+                if (this.multiple() && !this.query() && this.selectedMultiple().length > 0) {
+                    this.removeSelected(this.selectedMultiple()[this.selectedMultiple().length - 1]);
+                }
+                break;
+        }
+    }
+    selectOption(option) {
+        if (this.multiple()) {
+            this.selectedMultiple.update((sel) => [...sel, option]);
+            this.query.set('');
+            const value = this.selectedMultiple();
+            this.onChange(value);
+            this.valueChange.emit(value);
+        }
+        else {
+            this.selectedSingle.set(option);
+            this.query.set(option.label);
+            this.onChange(option);
+            this.valueChange.emit(option);
+        }
+        this.optionSelected.emit(option);
+        this.isOpen.set(false);
+        this.highlightedIndex.set(-1);
+    }
+    removeSelected(option) {
+        this.selectedMultiple.update((sel) => sel.filter((s) => s.value !== option.value));
+        const value = this.selectedMultiple();
+        this.onChange(value);
+        this.valueChange.emit(value);
+        this.inputEl?.nativeElement.focus();
+    }
+    onCreateNew() {
+        const q = this.query().trim();
+        if (!q)
+            return;
+        const newOption = { value: q, label: q };
+        this.created.emit(q);
+        this.selectOption(newOption);
+    }
+    onDocumentClick(event) {
+        if (!this.elRef.nativeElement.contains(event.target)) {
+            this.isOpen.set(false);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: ComboboxComponent, isStandalone: true, selector: "lc-combobox", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, loadOptions: { classPropertyName: "loadOptions", publicName: "loadOptions", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, minChars: { classPropertyName: "minChars", publicName: "minChars", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, allowCreate: { classPropertyName: "allowCreate", publicName: "allowCreate", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", queryChange: "queryChange", optionSelected: "optionSelected", created: "created" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ComboboxComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true }], ngImport: i0, template: "<div [class]=\"containerClasses()\">\n  @if (label()) {\n    <label class=\"lc-combobox__label\">{{ label() }}</label>\n  }\n\n  <div class=\"lc-combobox__input-wrapper\">\n    <!-- Selected chips (multiple mode) -->\n    @if (multiple()) {\n      @for (sel of selectedMultiple(); track sel.value) {\n        <lc-chip\n          [removable]=\"!disabled()\"\n          size=\"sm\"\n          (remove)=\"removeSelected(sel)\"\n        >{{ sel.label }}</lc-chip>\n      }\n    }\n\n    <input\n      #inputEl\n      type=\"text\"\n      class=\"lc-combobox__input\"\n      [placeholder]=\"multiple() && selectedMultiple().length > 0 ? '' : placeholder()\"\n      [value]=\"query()\"\n      [disabled]=\"disabled()\"\n      role=\"combobox\"\n      [attr.aria-expanded]=\"isOpen()\"\n      aria-autocomplete=\"list\"\n      aria-haspopup=\"listbox\"\n      autocomplete=\"off\"\n      (input)=\"onInputChange($event)\"\n      (focus)=\"onInputFocus()\"\n      (blur)=\"onInputBlur()\"\n      (keydown)=\"onKeydown($event)\"\n    />\n\n    @if (isLoading() || loading()) {\n      <lc-spinner size=\"sm\" class=\"lc-combobox__spinner\" />\n    } @else if (!multiple() && selectedSingle()) {\n      <button\n        type=\"button\"\n        class=\"lc-combobox__clear\"\n        (click)=\"selectOption({value: '', label: ''}); query.set('')\"\n        tabindex=\"-1\"\n        aria-label=\"Clear\"\n      >\n        <lc-icon name=\"x-mark\" size=\"xs\" />\n      </button>\n    }\n  </div>\n\n  <!-- Dropdown -->\n  @if (isOpen()) {\n    <div class=\"lc-combobox__dropdown\" role=\"listbox\">\n      @for (group of groupedOptions(); track group.label) {\n        @if (group.label) {\n          <div class=\"lc-combobox__group-header\">{{ group.label }}</div>\n        }\n        @for (option of group.items; track option.value; let i = $index) {\n          <div\n            class=\"lc-combobox__option\"\n            [class.lc-combobox__option--highlighted]=\"flatOptions().indexOf(option) === highlightedIndex()\"\n            [class.lc-combobox__option--disabled]=\"option.disabled\"\n            role=\"option\"\n            [attr.aria-selected]=\"flatOptions().indexOf(option) === highlightedIndex()\"\n            [attr.aria-disabled]=\"option.disabled\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"!option.disabled && selectOption(option)\"\n            (mouseenter)=\"highlightedIndex.set(flatOptions().indexOf(option))\"\n          >\n            @if (option.icon) {\n              <lc-icon [name]=\"option.icon\" size=\"sm\" class=\"lc-combobox__option-icon\" />\n            }\n            <div class=\"lc-combobox__option-content\">\n              <span class=\"lc-combobox__option-label\">{{ option.label }}</span>\n              @if (option.description) {\n                <span class=\"lc-combobox__option-desc\">{{ option.description }}</span>\n              }\n            </div>\n          </div>\n        }\n      }\n\n      @if (showCreateOption()) {\n        <div\n          class=\"lc-combobox__option lc-combobox__option--create\"\n          [class.lc-combobox__option--highlighted]=\"highlightedIndex() === flatOptions().length\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"onCreateNew()\"\n          (mouseenter)=\"highlightedIndex.set(flatOptions().length)\"\n        >\n          <lc-icon name=\"plus\" size=\"sm\" />\n          <span>Create \"{{ query() }}\"</span>\n        </div>\n      }\n\n      @if (visibleOptions().length === 0 && !showCreateOption() && !isLoading() && !loading()) {\n        <div class=\"lc-combobox__empty\">{{ emptyMessage() }}</div>\n      }\n    </div>\n  }\n\n  @if (helperText() && !error()) {\n    <span class=\"lc-combobox__helper\">{{ helperText() }}</span>\n  }\n  @if (error()) {\n    <span class=\"lc-combobox__error\">{{ error() }}</span>\n  }\n</div>\n", styles: [".lc-combobox{display:flex;flex-direction:column;gap:.25rem;position:relative;font-family:var(--font-family-sans)}.lc-combobox__label{font-size:var(--font-size-sm, .875rem);font-weight:500;color:var(--color-text, #111827);margin-bottom:.125rem}.lc-combobox__input-wrapper{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;border:1px solid var(--color-neutral-300, #d1d5db);border-radius:var(--radius-md, .375rem);background-color:var(--color-background, #ffffff);padding:.25rem .5rem;transition:border-color .15s,box-shadow .15s;cursor:text}.lc-combobox__input-wrapper:focus-within{border-color:var(--color-primary-500, #3b82f6);box-shadow:0 0 0 3px #3b82f626}.lc-combobox--error .lc-combobox__input-wrapper{border-color:var(--color-error-default, #ef4444)}.lc-combobox--error .lc-combobox__input-wrapper:focus-within{box-shadow:0 0 0 3px #ef444426}.lc-combobox--disabled .lc-combobox__input-wrapper{opacity:.5;cursor:not-allowed;background-color:var(--color-neutral-50, #f9fafb)}.lc-combobox__input{flex:1;min-width:80px;border:none;outline:none;background:transparent;color:var(--color-text, #111827);font-family:inherit}.lc-combobox__input::placeholder{color:var(--color-neutral-400, #9ca3af)}.lc-combobox__input:disabled{cursor:not-allowed}.lc-combobox--xs .lc-combobox__input{font-size:var(--font-size-xs, .75rem);height:1.5rem}.lc-combobox--sm .lc-combobox__input{font-size:var(--font-size-sm, .875rem);height:1.75rem}.lc-combobox--md .lc-combobox__input{font-size:var(--font-size-base, 1rem);height:2rem}.lc-combobox--lg .lc-combobox__input{font-size:var(--font-size-lg, 1.125rem);height:2.25rem}.lc-combobox__spinner{flex-shrink:0}.lc-combobox__clear{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;cursor:pointer;color:var(--color-neutral-400, #9ca3af);border-radius:var(--radius-sm, .25rem);flex-shrink:0}.lc-combobox__clear:hover{color:var(--color-text, #111827);background-color:var(--color-neutral-100, #f3f4f6)}.lc-combobox__dropdown{position:absolute;top:100%;left:0;right:0;margin-top:.25rem;max-height:240px;overflow-y:auto;background-color:var(--color-background, #ffffff);border:1px solid var(--color-neutral-200, #e5e7eb);border-radius:var(--radius-md, .375rem);box-shadow:var(--elevation-lg, 0 10px 15px -3px rgba(0, 0, 0, .1));z-index:50}.lc-combobox__group-header{padding:.375rem .75rem;font-size:var(--font-size-xs, .75rem);font-weight:600;color:var(--color-neutral-500, #6b7280);text-transform:uppercase;letter-spacing:.05em;margin-top:.25rem}.lc-combobox__group-header:first-child{margin-top:0}.lc-combobox__option{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;cursor:pointer;transition:background-color .1s}.lc-combobox__option--highlighted{background-color:var(--color-neutral-100, #f3f4f6)}.lc-combobox__option--disabled{opacity:.5;cursor:not-allowed}.lc-combobox__option--create{color:var(--color-primary-600, #2563eb);font-weight:500;border-top:1px solid var(--color-neutral-100, #f3f4f6)}.lc-combobox__option-icon{flex-shrink:0;color:var(--color-neutral-500, #6b7280)}.lc-combobox__option-content{display:flex;flex-direction:column;min-width:0}.lc-combobox__option-label{font-size:var(--font-size-sm, .875rem);color:var(--color-text, #111827);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-combobox__option-desc{font-size:var(--font-size-xs, .75rem);color:var(--color-text-secondary, #6b7280);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-combobox__empty{padding:.75rem;text-align:center;color:var(--color-neutral-400, #9ca3af);font-size:var(--font-size-sm, .875rem)}.lc-combobox__helper{font-size:var(--font-size-xs, .75rem);color:var(--color-text-secondary, #6b7280)}.lc-combobox__error{font-size:var(--font-size-xs, .75rem);color:var(--color-error-default, #ef4444)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }, { kind: "component", type: SpinnerComponent, selector: "lc-spinner", inputs: ["size", "message"] }, { kind: "component", type: ChipComponent, selector: "lc-chip", inputs: ["variant", "size", "icon", "removable", "disabled"], outputs: ["remove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ComboboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lc-combobox', standalone: true, imports: [CommonModule, IconComponent, SpinnerComponent, ChipComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ComboboxComponent),
+                            multi: true,
+                        },
+                    ], template: "<div [class]=\"containerClasses()\">\n  @if (label()) {\n    <label class=\"lc-combobox__label\">{{ label() }}</label>\n  }\n\n  <div class=\"lc-combobox__input-wrapper\">\n    <!-- Selected chips (multiple mode) -->\n    @if (multiple()) {\n      @for (sel of selectedMultiple(); track sel.value) {\n        <lc-chip\n          [removable]=\"!disabled()\"\n          size=\"sm\"\n          (remove)=\"removeSelected(sel)\"\n        >{{ sel.label }}</lc-chip>\n      }\n    }\n\n    <input\n      #inputEl\n      type=\"text\"\n      class=\"lc-combobox__input\"\n      [placeholder]=\"multiple() && selectedMultiple().length > 0 ? '' : placeholder()\"\n      [value]=\"query()\"\n      [disabled]=\"disabled()\"\n      role=\"combobox\"\n      [attr.aria-expanded]=\"isOpen()\"\n      aria-autocomplete=\"list\"\n      aria-haspopup=\"listbox\"\n      autocomplete=\"off\"\n      (input)=\"onInputChange($event)\"\n      (focus)=\"onInputFocus()\"\n      (blur)=\"onInputBlur()\"\n      (keydown)=\"onKeydown($event)\"\n    />\n\n    @if (isLoading() || loading()) {\n      <lc-spinner size=\"sm\" class=\"lc-combobox__spinner\" />\n    } @else if (!multiple() && selectedSingle()) {\n      <button\n        type=\"button\"\n        class=\"lc-combobox__clear\"\n        (click)=\"selectOption({value: '', label: ''}); query.set('')\"\n        tabindex=\"-1\"\n        aria-label=\"Clear\"\n      >\n        <lc-icon name=\"x-mark\" size=\"xs\" />\n      </button>\n    }\n  </div>\n\n  <!-- Dropdown -->\n  @if (isOpen()) {\n    <div class=\"lc-combobox__dropdown\" role=\"listbox\">\n      @for (group of groupedOptions(); track group.label) {\n        @if (group.label) {\n          <div class=\"lc-combobox__group-header\">{{ group.label }}</div>\n        }\n        @for (option of group.items; track option.value; let i = $index) {\n          <div\n            class=\"lc-combobox__option\"\n            [class.lc-combobox__option--highlighted]=\"flatOptions().indexOf(option) === highlightedIndex()\"\n            [class.lc-combobox__option--disabled]=\"option.disabled\"\n            role=\"option\"\n            [attr.aria-selected]=\"flatOptions().indexOf(option) === highlightedIndex()\"\n            [attr.aria-disabled]=\"option.disabled\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"!option.disabled && selectOption(option)\"\n            (mouseenter)=\"highlightedIndex.set(flatOptions().indexOf(option))\"\n          >\n            @if (option.icon) {\n              <lc-icon [name]=\"option.icon\" size=\"sm\" class=\"lc-combobox__option-icon\" />\n            }\n            <div class=\"lc-combobox__option-content\">\n              <span class=\"lc-combobox__option-label\">{{ option.label }}</span>\n              @if (option.description) {\n                <span class=\"lc-combobox__option-desc\">{{ option.description }}</span>\n              }\n            </div>\n          </div>\n        }\n      }\n\n      @if (showCreateOption()) {\n        <div\n          class=\"lc-combobox__option lc-combobox__option--create\"\n          [class.lc-combobox__option--highlighted]=\"highlightedIndex() === flatOptions().length\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"onCreateNew()\"\n          (mouseenter)=\"highlightedIndex.set(flatOptions().length)\"\n        >\n          <lc-icon name=\"plus\" size=\"sm\" />\n          <span>Create \"{{ query() }}\"</span>\n        </div>\n      }\n\n      @if (visibleOptions().length === 0 && !showCreateOption() && !isLoading() && !loading()) {\n        <div class=\"lc-combobox__empty\">{{ emptyMessage() }}</div>\n      }\n    </div>\n  }\n\n  @if (helperText() && !error()) {\n    <span class=\"lc-combobox__helper\">{{ helperText() }}</span>\n  }\n  @if (error()) {\n    <span class=\"lc-combobox__error\">{{ error() }}</span>\n  }\n</div>\n", styles: [".lc-combobox{display:flex;flex-direction:column;gap:.25rem;position:relative;font-family:var(--font-family-sans)}.lc-combobox__label{font-size:var(--font-size-sm, .875rem);font-weight:500;color:var(--color-text, #111827);margin-bottom:.125rem}.lc-combobox__input-wrapper{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;border:1px solid var(--color-neutral-300, #d1d5db);border-radius:var(--radius-md, .375rem);background-color:var(--color-background, #ffffff);padding:.25rem .5rem;transition:border-color .15s,box-shadow .15s;cursor:text}.lc-combobox__input-wrapper:focus-within{border-color:var(--color-primary-500, #3b82f6);box-shadow:0 0 0 3px #3b82f626}.lc-combobox--error .lc-combobox__input-wrapper{border-color:var(--color-error-default, #ef4444)}.lc-combobox--error .lc-combobox__input-wrapper:focus-within{box-shadow:0 0 0 3px #ef444426}.lc-combobox--disabled .lc-combobox__input-wrapper{opacity:.5;cursor:not-allowed;background-color:var(--color-neutral-50, #f9fafb)}.lc-combobox__input{flex:1;min-width:80px;border:none;outline:none;background:transparent;color:var(--color-text, #111827);font-family:inherit}.lc-combobox__input::placeholder{color:var(--color-neutral-400, #9ca3af)}.lc-combobox__input:disabled{cursor:not-allowed}.lc-combobox--xs .lc-combobox__input{font-size:var(--font-size-xs, .75rem);height:1.5rem}.lc-combobox--sm .lc-combobox__input{font-size:var(--font-size-sm, .875rem);height:1.75rem}.lc-combobox--md .lc-combobox__input{font-size:var(--font-size-base, 1rem);height:2rem}.lc-combobox--lg .lc-combobox__input{font-size:var(--font-size-lg, 1.125rem);height:2.25rem}.lc-combobox__spinner{flex-shrink:0}.lc-combobox__clear{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;cursor:pointer;color:var(--color-neutral-400, #9ca3af);border-radius:var(--radius-sm, .25rem);flex-shrink:0}.lc-combobox__clear:hover{color:var(--color-text, #111827);background-color:var(--color-neutral-100, #f3f4f6)}.lc-combobox__dropdown{position:absolute;top:100%;left:0;right:0;margin-top:.25rem;max-height:240px;overflow-y:auto;background-color:var(--color-background, #ffffff);border:1px solid var(--color-neutral-200, #e5e7eb);border-radius:var(--radius-md, .375rem);box-shadow:var(--elevation-lg, 0 10px 15px -3px rgba(0, 0, 0, .1));z-index:50}.lc-combobox__group-header{padding:.375rem .75rem;font-size:var(--font-size-xs, .75rem);font-weight:600;color:var(--color-neutral-500, #6b7280);text-transform:uppercase;letter-spacing:.05em;margin-top:.25rem}.lc-combobox__group-header:first-child{margin-top:0}.lc-combobox__option{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;cursor:pointer;transition:background-color .1s}.lc-combobox__option--highlighted{background-color:var(--color-neutral-100, #f3f4f6)}.lc-combobox__option--disabled{opacity:.5;cursor:not-allowed}.lc-combobox__option--create{color:var(--color-primary-600, #2563eb);font-weight:500;border-top:1px solid var(--color-neutral-100, #f3f4f6)}.lc-combobox__option-icon{flex-shrink:0;color:var(--color-neutral-500, #6b7280)}.lc-combobox__option-content{display:flex;flex-direction:column;min-width:0}.lc-combobox__option-label{font-size:var(--font-size-sm, .875rem);color:var(--color-text, #111827);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-combobox__option-desc{font-size:var(--font-size-xs, .75rem);color:var(--color-text-secondary, #6b7280);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-combobox__empty{padding:.75rem;text-align:center;color:var(--color-neutral-400, #9ca3af);font-size:var(--font-size-sm, .875rem)}.lc-combobox__helper{font-size:var(--font-size-xs, .75rem);color:var(--color-text-secondary, #6b7280)}.lc-combobox__error{font-size:var(--font-size-xs, .75rem);color:var(--color-error-default, #ef4444)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputEl: [{
+                type: ViewChild,
+                args: ['inputEl']
+            }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], loadOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadOptions", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], minChars: [{ type: i0.Input, args: [{ isSignal: true, alias: "minChars", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], allowCreate: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCreate", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], queryChange: [{ type: i0.Output, args: ["queryChange"] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }], created: [{ type: i0.Output, args: ["created"] }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
 /**
  * Life-Cockpit Design System (UI Kit)
  *
@@ -12870,5 +13958,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AlertComponent, AnimationDurationFast, AnimationEasingEaseIn, AnimationEasingEaseInOut, AnimationEasingEaseOut, AreaChartComponent, AvatarComponent, AvatarGroupComponent, BadgeComponent, BarChartComponent, BorderRadius2xl, BorderRadiusFull, BorderRadiusLg, BorderRadiusMd, BorderRadiusNone, BorderRadiusSm, BorderRadiusXl, BreadcrumbsComponent, ButtonComponent, CalendarComponent, CalloutComponent, CardComponent, ChatComponent, CheckboxComponent, ChipComponent, CodeBlockComponent, ColorAccentOrange, ColorAccentPurple, ColorAccentRed, ColorAccentRust, ColorAccentViolet, ColorErrorDark, ColorErrorDefault, ColorErrorLight, ColorInfoDark, ColorInfoDefault, ColorInfoLight, ColorNeutral100, ColorNeutral200, ColorNeutral300, ColorNeutral400, ColorNeutral50, ColorNeutral500, ColorNeutral600, ColorNeutral700, ColorNeutral800, ColorNeutral900, ColorPickerComponent, ColorPrimary100, ColorPrimary200, ColorPrimary300, ColorPrimary400, ColorPrimary50, ColorPrimary500, ColorPrimary600, ColorPrimary700, ColorPrimary800, ColorPrimary900, ColorSecondary100, ColorSecondary200, ColorSecondary300, ColorSecondary400, ColorSecondary50, ColorSecondary500, ColorSecondary600, ColorSecondary700, ColorSecondary800, ColorSecondary900, ColorSuccessDark, ColorSuccessDefault, ColorSuccessLight, ColorWarningDark, ColorWarningDefault, ColorWarningLight, ContainerComponent, DateRangePickerComponent, DatepickerComponent, DependencyViewerComponent, DiffViewerComponent, DividerComponent, DocumentViewerComponent, DonutChartComponent, DrawerComponent, Elevation1, Elevation2, Elevation3, Elevation4, EmailInputComponent, EmptyStateComponent, ErrorDisplayComponent, FieldGroupComponent, FileUploadComponent, FilterBarComponent, FooterComponent, FunnelChartComponent, GalleryComponent, GanttChartComponent, GaugeComponent, HeaderComponent, HeatmapComponent, HeroComponent, IconComponent, InputComponent, KanbanBoardComponent, LineChartComponent, ListComponent, ListItemTemplateDirective, LogoComponent, MenuComponent, ModalComponent, NotificationCenterComponent, NumberInputComponent, PaginationComponent, PasswordInputComponent, PieChartComponent, PopoverComponent, ProgressBarComponent, ProgressRingComponent, RadarChartComponent, RadioComponent, RatingComponent, RichTextEditorComponent, ScatterPlotComponent, SearchInputComponent, SectionComponent, SelectComponent, SidenavComponent, SizeInteractiveLgFontSize, SizeInteractiveLgHeight, SizeInteractiveLgPadding, SizeInteractiveMdFontSize, SizeInteractiveMdHeight, SizeInteractiveMdPadding, SizeInteractiveSmFontSize, SizeInteractiveSmHeight, SizeInteractiveSmPadding, SizeInteractiveXsFontSize, SizeInteractiveXsHeight, SizeInteractiveXsPadding, SizeMinTouchHeight, SizeMinTouchWidth, SkeletonComponent, SliderComponent, SpacerComponent, Spacing0, Spacing05, Spacing1, Spacing10, Spacing11, Spacing12, Spacing14, Spacing15, Spacing16, Spacing2, Spacing25, Spacing3, Spacing35, Spacing4, Spacing5, Spacing6, Spacing7, Spacing8, Spacing9, SparklineComponent, SpinnerComponent, StackComponent, StackedBarChartComponent, StatTrendComponent, StepperComponent, SwitchComponent, TabComponent, TableCellDirective, TableComponent, TabsComponent, TagInputComponent, TextareaComponent, ThemeService, TimelineComponent, ToastComponent, ToastService, ToggleGroupComponent, TooltipContentComponent, TooltipDirective, TypographyComponent, TypographyFontFamilyBase, TypographyFontFamilyMono, TypographyFontSize2xl, TypographyFontSize3xl, TypographyFontSize4xl, TypographyFontSize5xl, TypographyFontSize6xl, TypographyFontSizeBase, TypographyFontSizeLg, TypographyFontSizeSm, TypographyFontSizeXl, TypographyFontSizeXs, TypographyFontWeightBold, TypographyFontWeightMedium, TypographyFontWeightNormal, TypographyFontWeightSemibold, TypographyLineHeightNormal, TypographyLineHeightRelaxed, TypographyLineHeightTight, VerificationCodeInputComponent, WaterfallChartComponent };
+export { AccordionComponent, AlertComponent, AnimationDurationFast, AnimationEasingEaseIn, AnimationEasingEaseInOut, AnimationEasingEaseOut, AreaChartComponent, AvatarComponent, AvatarGroupComponent, BadgeComponent, BarChartComponent, BorderRadius2xl, BorderRadiusFull, BorderRadiusLg, BorderRadiusMd, BorderRadiusNone, BorderRadiusSm, BorderRadiusXl, BreadcrumbsComponent, ButtonComponent, CalendarComponent, CalloutComponent, CardComponent, ChatComponent, CheckboxComponent, ChipComponent, CodeBlockComponent, ColorAccentOrange, ColorAccentPurple, ColorAccentRed, ColorAccentRust, ColorAccentViolet, ColorErrorDark, ColorErrorDefault, ColorErrorLight, ColorInfoDark, ColorInfoDefault, ColorInfoLight, ColorNeutral100, ColorNeutral200, ColorNeutral300, ColorNeutral400, ColorNeutral50, ColorNeutral500, ColorNeutral600, ColorNeutral700, ColorNeutral800, ColorNeutral900, ColorPickerComponent, ColorPrimary100, ColorPrimary200, ColorPrimary300, ColorPrimary400, ColorPrimary50, ColorPrimary500, ColorPrimary600, ColorPrimary700, ColorPrimary800, ColorPrimary900, ColorSecondary100, ColorSecondary200, ColorSecondary300, ColorSecondary400, ColorSecondary50, ColorSecondary500, ColorSecondary600, ColorSecondary700, ColorSecondary800, ColorSecondary900, ColorSuccessDark, ColorSuccessDefault, ColorSuccessLight, ColorWarningDark, ColorWarningDefault, ColorWarningLight, ComboboxComponent, ConfirmDialogComponent, ConfirmService, ContainerComponent, DateRangePickerComponent, DatepickerComponent, DependencyViewerComponent, DiffViewerComponent, DividerComponent, DocumentViewerComponent, DonutChartComponent, DrawerComponent, Elevation1, Elevation2, Elevation3, Elevation4, EmailInputComponent, EmptyStateComponent, ErrorDisplayComponent, FieldGroupComponent, FileUploadComponent, FilterBarComponent, FooterComponent, FunnelChartComponent, GalleryComponent, GanttChartComponent, GaugeComponent, HeaderComponent, HeatmapComponent, HeroComponent, IconComponent, InputComponent, KanbanBoardComponent, LineChartComponent, ListComponent, ListItemTemplateDirective, LogViewerComponent, LogoComponent, MarkdownComponent, MenuComponent, ModalComponent, NotificationCenterComponent, NumberInputComponent, PaginationComponent, PasswordInputComponent, PieChartComponent, PopoverComponent, ProgressBarComponent, ProgressRingComponent, RadarChartComponent, RadioComponent, RatingComponent, RichTextEditorComponent, ScatterPlotComponent, SearchInputComponent, SectionComponent, SelectComponent, SidenavComponent, SizeInteractiveLgFontSize, SizeInteractiveLgHeight, SizeInteractiveLgPadding, SizeInteractiveMdFontSize, SizeInteractiveMdHeight, SizeInteractiveMdPadding, SizeInteractiveSmFontSize, SizeInteractiveSmHeight, SizeInteractiveSmPadding, SizeInteractiveXsFontSize, SizeInteractiveXsHeight, SizeInteractiveXsPadding, SizeMinTouchHeight, SizeMinTouchWidth, SkeletonComponent, SliderComponent, SpacerComponent, Spacing0, Spacing05, Spacing1, Spacing10, Spacing11, Spacing12, Spacing14, Spacing15, Spacing16, Spacing2, Spacing25, Spacing3, Spacing35, Spacing4, Spacing5, Spacing6, Spacing7, Spacing8, Spacing9, SparklineComponent, SpinnerComponent, StackComponent, StackedBarChartComponent, StatTrendComponent, StepperComponent, SwitchComponent, TabComponent, TableCellDirective, TableComponent, TabsComponent, TagInputComponent, TextareaComponent, ThemeService, TimelineComponent, ToastComponent, ToastService, ToggleGroupComponent, TooltipContentComponent, TooltipDirective, TypographyComponent, TypographyFontFamilyBase, TypographyFontFamilyMono, TypographyFontSize2xl, TypographyFontSize3xl, TypographyFontSize4xl, TypographyFontSize5xl, TypographyFontSize6xl, TypographyFontSizeBase, TypographyFontSizeLg, TypographyFontSizeSm, TypographyFontSizeXl, TypographyFontSizeXs, TypographyFontWeightBold, TypographyFontWeightMedium, TypographyFontWeightNormal, TypographyFontWeightSemibold, TypographyLineHeightNormal, TypographyLineHeightRelaxed, TypographyLineHeightTight, VerificationCodeInputComponent, WaterfallChartComponent };
 //# sourceMappingURL=life-cockpit-angular-ui-kit.mjs.map