@weeehaoooz/talos-ui 0.1.1 → 0.1.2

package/fesm2022/weeehaoooz-talos-ui-data-display.mjs

@@ -0,0 +1,3110 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, Renderer2, DestroyRef, input, computed, effect, Directive, NgModule, TemplateRef, output, Component, contentChild, signal, Pipe, linkedSignal, ContentChild } from '@angular/core';
+import * as i1 from '@angular/common';
+import { NgComponentOutlet, NgTemplateOutlet, CommonModule, DatePipe, KeyValuePipe } from '@angular/common';
+import { RouterLink } from '@angular/router';
+import { LucideChevronRight, LucideClock, LucideClockAlert, LucideBan, LucideCircleAlert, LucideCheckCheck, LucideCheckCircle2, LucideFastForward, LucideRotateCcw, LucideCirclePause, LucideLoader2, LucideSparkles, LucideSearch, LucideX, LucideArrowUp, LucideArrowDown, LucideArrowUpDown, LucideChevronLeft, LucideChevronsLeft, LucideChevronsRight, LucideInbox, LucideFilter, LucideInfo, LucideAlertTriangle, LucideAlertCircle, LucideCheck, LucideChevronDown, LucideChevronUp, LucideUser } from '@lucide/angular';
+import { TalosButtonDirective } from '@weeehaoooz/talos-ui/button';
+import { TalosTooltipDirective } from '@weeehaoooz/talos-ui/feedback';
+import * as i1$1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { DatePickerComponent, TalosCheckboxComponent, SelectInputComponent, OptionComponent, TalosInputDirective } from '@weeehaoooz/talos-ui/form';
+import * as i1$2 from '@angular/cdk/overlay';
+import { OverlayModule, CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
+
+/**
+ * Formats badge content taking into account max threshold clamping, dot mode, and null values.
+ *
+ * @param content The raw badge content (number, string, or null/undefined)
+ * @param max The maximum numerical threshold before displaying with a '+' post-script (e.g. 99+)
+ * @param dot Whether the badge is operating in dot indicator mode
+ * @returns The formatted string to be rendered inside the badge
+ */
+function formatBadgeContent(content, max, dot = false) {
+    if (dot || content === null || content === undefined || content === '') {
+        return '';
+    }
+    if (typeof content === 'number') {
+        if (typeof max === 'number' && max >= 0 && content > max) {
+            return `${max}+`;
+        }
+        return content.toString();
+    }
+    const trimmed = content.toString().trim();
+    if (trimmed === '') {
+        return '';
+    }
+    const parsedNumber = Number(trimmed);
+    if (!isNaN(parsedNumber) && typeof max === 'number' && max >= 0) {
+        if (parsedNumber > max) {
+            return `${max}+`;
+        }
+    }
+    return trimmed;
+}
+
+class TalosBadgeDirective {
+    elementRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    destroyRef = inject(DestroyRef);
+    /**
+     * The content to display inside the badge.
+     * Can be a number, string, or null/undefined.
+     */
+    content = input(null, { ...(ngDevMode ? { debugName: "content" } : /* istanbul ignore next */ {}), alias: 'talosBadge' });
+    /**
+     * Maximum numeric value to display before appending '+'.
+     * For example, max = 99 will display 100 as '99+'.
+     */
+    max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), alias: 'talosBadgeMax' });
+    /**
+     * Size scale of the badge.
+     * @default 'md'
+     */
+    size = input('md', { ...(ngDevMode ? { debugName: "size" } : /* istanbul ignore next */ {}), alias: 'talosBadgeSize' });
+    /**
+     * Anchor position of the badge relative to the host element.
+     * @default 'top-right'
+     */
+    position = input('top-right', { ...(ngDevMode ? { debugName: "position" } : /* istanbul ignore next */ {}), alias: 'talosBadgePosition' });
+    /**
+     * Visual variant/color theme of the badge.
+     * @default 'primary'
+     */
+    variant = input('primary', { ...(ngDevMode ? { debugName: "variant" } : /* istanbul ignore next */ {}), alias: 'talosBadgeVariant' });
+    /**
+     * Shape style of the badge container.
+     * @default 'circle'
+     */
+    shape = input('circle', { ...(ngDevMode ? { debugName: "shape" } : /* istanbul ignore next */ {}), alias: 'talosBadgeShape' });
+    /**
+     * Whether to display the badge as a small indicator dot without text content.
+     * @default false
+     */
+    dot = input(false, { ...(ngDevMode ? { debugName: "dot" } : /* istanbul ignore next */ {}), alias: 'talosBadgeDot' });
+    /**
+     * Whether to enable an animated pulse/ripple effect for notifications.
+     * @default false
+     */
+    pulse = input(false, { ...(ngDevMode ? { debugName: "pulse" } : /* istanbul ignore next */ {}), alias: 'talosBadgePulse' });
+    /**
+     * Whether the badge is hidden from view.
+     * @default false
+     */
+    hidden = input(false, { ...(ngDevMode ? { debugName: "hidden" } : /* istanbul ignore next */ {}), alias: 'talosBadgeHidden' });
+    /**
+     * Whether the badge overlaps the edge of the host component.
+     * @default true
+     */
+    overlap = input(true, { ...(ngDevMode ? { debugName: "overlap" } : /* istanbul ignore next */ {}), alias: 'talosBadgeOverlap' });
+    /**
+     * Accessible description/label for screen readers.
+     */
+    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'talosBadgeAriaLabel' });
+    /**
+     * Computed formatted text content for the badge.
+     */
+    formattedContent = computed(() => {
+        return formatBadgeContent(this.content(), this.max(), this.dot());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formattedContent" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the badge should actively render in the DOM and be visible.
+     */
+    shouldRender = computed(() => {
+        if (this.hidden()) {
+            return false;
+        }
+        if (this.dot()) {
+            return true;
+        }
+        const c = this.content();
+        return c !== null && c !== undefined && c !== '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shouldRender" }] : /* istanbul ignore next */ []));
+    /**
+     * Computed host aria-label override when provided.
+     */
+    resolvedHostAriaLabel = computed(() => {
+        const custom = this.ariaLabel();
+        if (custom !== undefined && custom !== null && custom.trim().length > 0) {
+            return custom;
+        }
+        return null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedHostAriaLabel" }] : /* istanbul ignore next */ []));
+    badgeElement = null;
+    constructor() {
+        // Reactive effect to synchronize the badge DOM element whenever signal inputs change
+        effect(() => {
+            this.updateBadgeDom();
+        });
+        this.destroyRef.onDestroy(() => {
+            this.removeBadgeDom();
+        });
+    }
+    /**
+     * Returns the native badge element for inspection or testing.
+     */
+    get nativeBadgeElement() {
+        return this.badgeElement;
+    }
+    updateBadgeDom() {
+        const isVisible = this.shouldRender();
+        if (!isVisible) {
+            if (this.badgeElement) {
+                this.renderer.addClass(this.badgeElement, 'talos-badge--hidden');
+                this.renderer.setStyle(this.badgeElement, 'display', 'none');
+            }
+            return;
+        }
+        if (!this.badgeElement) {
+            this.badgeElement = this.renderer.createElement('span');
+            this.renderer.addClass(this.badgeElement, 'talos-badge');
+            this.renderer.setAttribute(this.badgeElement, 'aria-hidden', 'true');
+            this.renderer.appendChild(this.elementRef.nativeElement, this.badgeElement);
+        }
+        const badgeEl = this.badgeElement;
+        if (!badgeEl) {
+            return;
+        }
+        // Reset visibility styles
+        this.renderer.removeClass(badgeEl, 'talos-badge--hidden');
+        this.renderer.removeStyle(badgeEl, 'display');
+        // Update text content
+        const text = this.formattedContent();
+        this.renderer.setProperty(badgeEl, 'textContent', text);
+        // Apply classes for size, position, variant, shape, etc.
+        const size = this.size();
+        const pos = this.position();
+        const variant = this.variant();
+        const shape = this.shape();
+        const isDot = this.dot();
+        const isPulse = this.pulse();
+        const isOverlap = this.overlap();
+        const isMultiChar = text.length > 1;
+        // Reset base class list and re-apply active classes
+        badgeEl.className = 'talos-badge';
+        this.renderer.addClass(badgeEl, `talos-badge--${size}`);
+        this.renderer.addClass(badgeEl, `talos-badge--${pos}`);
+        this.renderer.addClass(badgeEl, `talos-badge--${variant}`);
+        this.renderer.addClass(badgeEl, `talos-badge--${shape}`);
+        if (isDot) {
+            this.renderer.addClass(badgeEl, 'talos-badge--dot');
+        }
+        if (isPulse) {
+            this.renderer.addClass(badgeEl, 'talos-badge--pulse');
+        }
+        if (isOverlap) {
+            this.renderer.addClass(badgeEl, 'talos-badge--overlap');
+        }
+        if (isMultiChar && !isDot) {
+            this.renderer.addClass(badgeEl, 'talos-badge--pill');
+        }
+    }
+    removeBadgeDom() {
+        if (this.badgeElement) {
+            this.renderer.removeChild(this.elementRef.nativeElement, this.badgeElement);
+            this.badgeElement = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosBadgeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.1", type: TalosBadgeDirective, isStandalone: true, selector: "[talosBadge], [talos-badge]", inputs: { content: { classPropertyName: "content", publicName: "talosBadge", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "talosBadgeMax", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "talosBadgeSize", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "talosBadgePosition", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "talosBadgeVariant", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "talosBadgeShape", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "talosBadgeDot", isSignal: true, isRequired: false, transformFunction: null }, pulse: { classPropertyName: "pulse", publicName: "talosBadgePulse", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "talosBadgeHidden", isSignal: true, isRequired: false, transformFunction: null }, overlap: { classPropertyName: "overlap", publicName: "talosBadgeOverlap", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "talosBadgeAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.talos-badge-host--has-badge": "shouldRender()", "attr.aria-label": "resolvedHostAriaLabel()" }, classAttribute: "talos-badge-host" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosBadgeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[talosBadge], [talos-badge]',
+                    host: {
+                        'class': 'talos-badge-host',
+                        '[class.talos-badge-host--has-badge]': 'shouldRender()',
+                        '[attr.aria-label]': 'resolvedHostAriaLabel()'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "talosBadge", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "talosBadgeMax", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "talosBadgeSize", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "talosBadgePosition", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "talosBadgeVariant", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "talosBadgeShape", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "talosBadgeDot", required: false }] }], pulse: [{ type: i0.Input, args: [{ isSignal: true, alias: "talosBadgePulse", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "talosBadgeHidden", required: false }] }], overlap: [{ type: i0.Input, args: [{ isSignal: true, alias: "talosBadgeOverlap", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "talosBadgeAriaLabel", required: false }] }] } });
+
+class TalosBadgeModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: TalosBadgeModule, imports: [TalosBadgeDirective], exports: [TalosBadgeDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosBadgeModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosBadgeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [TalosBadgeDirective],
+                    exports: [TalosBadgeDirective]
+                }]
+        }] });
+
+/**
+ * Directive for projecting a custom separator template into `<talos-breadcrumb>`.
+ *
+ * @example
+ * ```html
+ * <talos-breadcrumb [items]="crumbs">
+ *   <ng-template talosBreadcrumbSeparator>
+ *     <span class="custom-slash">~</span>
+ *   </ng-template>
+ * </talos-breadcrumb>
+ * ```
+ */
+class TalosBreadcrumbSeparatorDirective {
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosBreadcrumbSeparatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: TalosBreadcrumbSeparatorDirective, isStandalone: true, selector: "[talosBreadcrumbSeparator]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosBreadcrumbSeparatorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[talosBreadcrumbSeparator]'
+                }]
+        }] });
+/**
+ * Directive for custom rendering of individual breadcrumb items.
+ *
+ * @example
+ * ```html
+ * <talos-breadcrumb [items]="crumbs">
+ *   <ng-template talosBreadcrumbItemDef let-item let-isLast="isLast">
+ *     <span class="custom-node">{{ item.label }}</span>
+ *   </ng-template>
+ * </talos-breadcrumb>
+ * ```
+ */
+class TalosBreadcrumbItemDefDirective {
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosBreadcrumbItemDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: TalosBreadcrumbItemDefDirective, isStandalone: true, selector: "[talosBreadcrumbItemDef]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosBreadcrumbItemDefDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[talosBreadcrumbItemDef]'
+                }]
+        }] });
+
+class TalosBreadcrumbItemComponent {
+    /**
+     * Text label for this item. Can be provided via input or ng-content.
+     */
+    label = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /**
+     * Standard URL hyperlink. When provided and not disabled, renders as an interactive anchor link.
+     */
+    href = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []));
+    /**
+     * Angular router link navigation path or command segments.
+     */
+    routerLink = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "routerLink" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional icon component to render before the item label.
+     */
+    icon = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether this breadcrumb item is disabled.
+     * @default false
+     */
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether this item represents the current active page in the navigation hierarchy.
+     * Current items are non-interactive and decorated with aria-current="page".
+     * @default false
+     */
+    current = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+    /**
+     * Accessible description / aria-label for screen readers.
+     */
+    ariaLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Size scale inherited from the parent breadcrumb or set directly.
+     * @default 'md'
+     */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /**
+     * Target window/tab attribute when href is used (e.g. '_blank').
+     */
+    target = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []));
+    /**
+     * Native title attribute for tooltip display.
+     */
+    title = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /**
+     * Emitted when this breadcrumb item is clicked or activated via keyboard.
+     */
+    itemClick = output();
+    /**
+     * Whether this item should render as an interactive link.
+     */
+    isLink = computed(() => {
+        if (this.current() || this.disabled()) {
+            return false;
+        }
+        return Boolean(this.href() || this.routerLink() || this.itemClick);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLink" }] : /* istanbul ignore next */ []));
+    onLinkClick(event) {
+        if (this.disabled() || this.current()) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        this.itemClick.emit(event);
+    }
+    onKeydown(event) {
+        if (this.disabled() || this.current()) {
+            return;
+        }
+        if (event.key === 'Enter' || event.key === ' ') {
+            if (event.key === ' ') {
+                event.preventDefault();
+            }
+            this.itemClick.emit(event);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosBreadcrumbItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TalosBreadcrumbItemComponent, isStandalone: true, selector: "talos-breadcrumb-item, [talosBreadcrumbItem]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, host: { properties: { "class.talos-breadcrumb-item--current": "current()", "class.talos-breadcrumb-item--disabled": "disabled()", "class.talos-breadcrumb-item--link": "isLink()", "class.talos-breadcrumb-item--xs": "size() === \"xs\"", "class.talos-breadcrumb-item--sm": "size() === \"sm\"", "class.talos-breadcrumb-item--md": "size() === \"md\"", "class.talos-breadcrumb-item--lg": "size() === \"lg\"" }, classAttribute: "talos-breadcrumb-item" }, ngImport: i0, template: "<ng-template #contentTpl>\n  @if (icon()) {\n    <span class=\"talos-breadcrumb-item__icon\" aria-hidden=\"true\">\n      <ng-container *ngComponentOutlet=\"icon()!\" />\n    </span>\n  }\n  <span class=\"talos-breadcrumb-item__label\">\n    @if (label()) {\n      {{ label() }}\n    } @else {\n      <ng-content />\n    }\n  </span>\n</ng-template>\n\n@if (isLink()) {\n  @if (routerLink()) {\n    <a\n      [routerLink]=\"routerLink()!\"\n      [attr.target]=\"target() || null\"\n      [attr.title]=\"title() || null\"\n      [attr.aria-label]=\"ariaLabel() || null\"\n      class=\"talos-breadcrumb-item__anchor\"\n      (click)=\"onLinkClick($event)\"\n      (keydown)=\"onKeydown($event)\"\n    >\n      <ng-container *ngTemplateOutlet=\"contentTpl\" />\n    </a>\n  } @else {\n    <a\n      [attr.href]=\"href() || 'javascript:void(0)'\"\n      [attr.target]=\"target() || null\"\n      [attr.title]=\"title() || null\"\n      [attr.aria-label]=\"ariaLabel() || null\"\n      class=\"talos-breadcrumb-item__anchor\"\n      (click)=\"onLinkClick($event)\"\n      (keydown)=\"onKeydown($event)\"\n    >\n      <ng-container *ngTemplateOutlet=\"contentTpl\" />\n    </a>\n  }\n} @else {\n  <span\n    [attr.title]=\"title() || null\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-current]=\"current() ? 'page' : null\"\n    [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n    class=\"talos-breadcrumb-item__text\"\n  >\n    <ng-container *ngTemplateOutlet=\"contentTpl\" />\n  </span>\n}\n", styles: [":host{display:inline-flex;align-items:center;box-sizing:border-box;font-family:inherit;line-height:1.5;white-space:nowrap}:host.talos-breadcrumb-item--xs{font-size:.75rem}:host.talos-breadcrumb-item--xs .talos-breadcrumb-item__anchor,:host.talos-breadcrumb-item--xs .talos-breadcrumb-item__text{gap:.25rem}:host.talos-breadcrumb-item--xs .talos-breadcrumb-item__icon{width:.875rem;height:.875rem}:host.talos-breadcrumb-item--sm{font-size:.8125rem}:host.talos-breadcrumb-item--sm .talos-breadcrumb-item__anchor,:host.talos-breadcrumb-item--sm .talos-breadcrumb-item__text{gap:.3125rem}:host.talos-breadcrumb-item--sm .talos-breadcrumb-item__icon{width:.9375rem;height:.9375rem}:host.talos-breadcrumb-item--md{font-size:.875rem}:host.talos-breadcrumb-item--md .talos-breadcrumb-item__anchor,:host.talos-breadcrumb-item--md .talos-breadcrumb-item__text{gap:.375rem}:host.talos-breadcrumb-item--md .talos-breadcrumb-item__icon{width:1rem;height:1rem}:host.talos-breadcrumb-item--lg{font-size:1rem}:host.talos-breadcrumb-item--lg .talos-breadcrumb-item__anchor,:host.talos-breadcrumb-item--lg .talos-breadcrumb-item__text{gap:.5rem}:host.talos-breadcrumb-item--lg .talos-breadcrumb-item__icon{width:1.125rem;height:1.125rem}:host.talos-breadcrumb-item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.talos-breadcrumb-item__anchor,.talos-breadcrumb-item__text{display:inline-flex;align-items:center;box-sizing:border-box;padding:.125rem .25rem;border-radius:var(--talos-border-radius-sm, var(--border-radius-sm, .25rem));text-decoration:none;color:var(--talos-text-muted, var(--text-muted, #64748b));transition:color .2s cubic-bezier(.4,0,.2,1),background-color .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1)}.talos-breadcrumb-item__anchor:focus-visible,.talos-breadcrumb-item__text:focus-visible{outline:none;box-shadow:var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .25));border-color:var(--talos-primary-color, #2563eb);color:var(--talos-primary-color, #2563eb)}.talos-breadcrumb-item__anchor{cursor:pointer}.talos-breadcrumb-item__anchor:hover{color:var(--talos-primary-color, var(--primary-color, #2563eb));background-color:var(--talos-primary-light, rgba(37, 99, 235, .04))}.talos-breadcrumb-item__anchor:active{opacity:.85}.talos-breadcrumb-item__text{cursor:default}:host(.talos-breadcrumb-item--current) .talos-breadcrumb-item__text,:host(.talos-breadcrumb-item--current) .talos-breadcrumb-item__anchor{font-weight:600;color:var(--talos-text-color, var(--text-color, #0f172a));cursor:default;pointer-events:none}.talos-breadcrumb-item__icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.talos-breadcrumb-item__icon svg,.talos-breadcrumb-item__icon ::ng-deep svg{width:100%;height:100%;stroke-width:2}.talos-breadcrumb-item__label{display:inline-block;line-height:inherit}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosBreadcrumbItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-breadcrumb-item, [talosBreadcrumbItem]', imports: [NgComponentOutlet, NgTemplateOutlet, RouterLink], host: {
+                        'class': 'talos-breadcrumb-item',
+                        '[class.talos-breadcrumb-item--current]': 'current()',
+                        '[class.talos-breadcrumb-item--disabled]': 'disabled()',
+                        '[class.talos-breadcrumb-item--link]': 'isLink()',
+                        '[class.talos-breadcrumb-item--xs]': 'size() === "xs"',
+                        '[class.talos-breadcrumb-item--sm]': 'size() === "sm"',
+                        '[class.talos-breadcrumb-item--md]': 'size() === "md"',
+                        '[class.talos-breadcrumb-item--lg]': 'size() === "lg"'
+                    }, template: "<ng-template #contentTpl>\n  @if (icon()) {\n    <span class=\"talos-breadcrumb-item__icon\" aria-hidden=\"true\">\n      <ng-container *ngComponentOutlet=\"icon()!\" />\n    </span>\n  }\n  <span class=\"talos-breadcrumb-item__label\">\n    @if (label()) {\n      {{ label() }}\n    } @else {\n      <ng-content />\n    }\n  </span>\n</ng-template>\n\n@if (isLink()) {\n  @if (routerLink()) {\n    <a\n      [routerLink]=\"routerLink()!\"\n      [attr.target]=\"target() || null\"\n      [attr.title]=\"title() || null\"\n      [attr.aria-label]=\"ariaLabel() || null\"\n      class=\"talos-breadcrumb-item__anchor\"\n      (click)=\"onLinkClick($event)\"\n      (keydown)=\"onKeydown($event)\"\n    >\n      <ng-container *ngTemplateOutlet=\"contentTpl\" />\n    </a>\n  } @else {\n    <a\n      [attr.href]=\"href() || 'javascript:void(0)'\"\n      [attr.target]=\"target() || null\"\n      [attr.title]=\"title() || null\"\n      [attr.aria-label]=\"ariaLabel() || null\"\n      class=\"talos-breadcrumb-item__anchor\"\n      (click)=\"onLinkClick($event)\"\n      (keydown)=\"onKeydown($event)\"\n    >\n      <ng-container *ngTemplateOutlet=\"contentTpl\" />\n    </a>\n  }\n} @else {\n  <span\n    [attr.title]=\"title() || null\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-current]=\"current() ? 'page' : null\"\n    [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n    class=\"talos-breadcrumb-item__text\"\n  >\n    <ng-container *ngTemplateOutlet=\"contentTpl\" />\n  </span>\n}\n", styles: [":host{display:inline-flex;align-items:center;box-sizing:border-box;font-family:inherit;line-height:1.5;white-space:nowrap}:host.talos-breadcrumb-item--xs{font-size:.75rem}:host.talos-breadcrumb-item--xs .talos-breadcrumb-item__anchor,:host.talos-breadcrumb-item--xs .talos-breadcrumb-item__text{gap:.25rem}:host.talos-breadcrumb-item--xs .talos-breadcrumb-item__icon{width:.875rem;height:.875rem}:host.talos-breadcrumb-item--sm{font-size:.8125rem}:host.talos-breadcrumb-item--sm .talos-breadcrumb-item__anchor,:host.talos-breadcrumb-item--sm .talos-breadcrumb-item__text{gap:.3125rem}:host.talos-breadcrumb-item--sm .talos-breadcrumb-item__icon{width:.9375rem;height:.9375rem}:host.talos-breadcrumb-item--md{font-size:.875rem}:host.talos-breadcrumb-item--md .talos-breadcrumb-item__anchor,:host.talos-breadcrumb-item--md .talos-breadcrumb-item__text{gap:.375rem}:host.talos-breadcrumb-item--md .talos-breadcrumb-item__icon{width:1rem;height:1rem}:host.talos-breadcrumb-item--lg{font-size:1rem}:host.talos-breadcrumb-item--lg .talos-breadcrumb-item__anchor,:host.talos-breadcrumb-item--lg .talos-breadcrumb-item__text{gap:.5rem}:host.talos-breadcrumb-item--lg .talos-breadcrumb-item__icon{width:1.125rem;height:1.125rem}:host.talos-breadcrumb-item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.talos-breadcrumb-item__anchor,.talos-breadcrumb-item__text{display:inline-flex;align-items:center;box-sizing:border-box;padding:.125rem .25rem;border-radius:var(--talos-border-radius-sm, var(--border-radius-sm, .25rem));text-decoration:none;color:var(--talos-text-muted, var(--text-muted, #64748b));transition:color .2s cubic-bezier(.4,0,.2,1),background-color .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1)}.talos-breadcrumb-item__anchor:focus-visible,.talos-breadcrumb-item__text:focus-visible{outline:none;box-shadow:var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .25));border-color:var(--talos-primary-color, #2563eb);color:var(--talos-primary-color, #2563eb)}.talos-breadcrumb-item__anchor{cursor:pointer}.talos-breadcrumb-item__anchor:hover{color:var(--talos-primary-color, var(--primary-color, #2563eb));background-color:var(--talos-primary-light, rgba(37, 99, 235, .04))}.talos-breadcrumb-item__anchor:active{opacity:.85}.talos-breadcrumb-item__text{cursor:default}:host(.talos-breadcrumb-item--current) .talos-breadcrumb-item__text,:host(.talos-breadcrumb-item--current) .talos-breadcrumb-item__anchor{font-weight:600;color:var(--talos-text-color, var(--text-color, #0f172a));cursor:default;pointer-events:none}.talos-breadcrumb-item__icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.talos-breadcrumb-item__icon svg,.talos-breadcrumb-item__icon ::ng-deep svg{width:100%;height:100%;stroke-width:2}.talos-breadcrumb-item__label{display:inline-block;line-height:inherit}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
+
+class TalosBreadcrumbComponent {
+    /**
+     * Data-driven list of breadcrumb items to render.
+     */
+    items = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /**
+     * Separator style between breadcrumb items.
+     * Can be 'chevron', 'slash', 'arrow', 'bullet', or a custom string.
+     * @default 'chevron'
+     */
+    separator = input('chevron', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
+    /**
+     * Size scale of the breadcrumb and its separators.
+     * @default 'md'
+     */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /**
+     * Visual variant and background container style.
+     * @default 'standard'
+     */
+    variant = input('standard', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /**
+     * Maximum number of items to display before collapsing intermediate nodes into an ellipsis.
+     */
+    maxItems = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxItems" }] : /* istanbul ignore next */ []));
+    /**
+     * Number of items to display before the collapsed ellipsis.
+     * @default 1
+     */
+    itemsBeforeCollapse = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemsBeforeCollapse" }] : /* istanbul ignore next */ []));
+    /**
+     * Number of items to display after the collapsed ellipsis.
+     * @default 1
+     */
+    itemsAfterCollapse = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemsAfterCollapse" }] : /* istanbul ignore next */ []));
+    /**
+     * Accessible description for the `<nav>` landmark.
+     * @default 'Breadcrumb'
+     */
+    ariaLabel = input('Breadcrumb', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Emitted when an individual breadcrumb item is clicked.
+     */
+    itemClick = output();
+    /**
+     * Emitted when the user expands collapsed items via the ellipsis button.
+     */
+    expand = output();
+    /**
+     * Optional custom separator template projected from parent.
+     */
+    customSeparator = contentChild(TalosBreadcrumbSeparatorDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "customSeparator" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional custom item template projected from parent.
+     */
+    customItemDef = contentChild(TalosBreadcrumbItemDefDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "customItemDef" }] : /* istanbul ignore next */ []));
+    /**
+     * Track whether the user has clicked to expand collapsed crumbs.
+     */
+    expandedByUser = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expandedByUser" }] : /* istanbul ignore next */ []));
+    /**
+     * Built-in Lucide chevron icon component.
+     */
+    chevronIcon = LucideChevronRight;
+    /**
+     * Computed list of nodes for template rendering.
+     */
+    displayNodes = computed(() => {
+        const raw = this.items();
+        if (!raw || raw.length === 0) {
+            return [];
+        }
+        const total = raw.length;
+        const max = this.maxItems();
+        const shouldCollapse = !this.expandedByUser() && typeof max === 'number' && max > 0 && total > max;
+        if (!shouldCollapse) {
+            return raw.map((item, idx) => ({
+                type: 'item',
+                item,
+                index: idx,
+                isFirst: idx === 0,
+                isLast: idx === total - 1,
+                isCurrent: item.current !== undefined ? item.current : idx === total - 1
+            }));
+        }
+        const before = Math.max(1, this.itemsBeforeCollapse());
+        const after = Math.max(1, this.itemsAfterCollapse());
+        if (before + after >= total) {
+            return raw.map((item, idx) => ({
+                type: 'item',
+                item,
+                index: idx,
+                isFirst: idx === 0,
+                isLast: idx === total - 1,
+                isCurrent: item.current !== undefined ? item.current : idx === total - 1
+            }));
+        }
+        const nodes = [];
+        // Head nodes
+        for (let i = 0; i < before; i++) {
+            const item = raw[i];
+            nodes.push({
+                type: 'item',
+                item,
+                index: i,
+                isFirst: i === 0,
+                isLast: false,
+                isCurrent: item.current !== undefined ? item.current : false
+            });
+        }
+        // Collapsed Ellipsis
+        const omittedCount = total - before - after;
+        nodes.push({
+            type: 'ellipsis',
+            index: before,
+            isFirst: false,
+            isLast: false,
+            isCurrent: false,
+            omittedCount
+        });
+        // Tail nodes
+        for (let i = total - after; i < total; i++) {
+            const item = raw[i];
+            nodes.push({
+                type: 'item',
+                item,
+                index: i,
+                isFirst: false,
+                isLast: i === total - 1,
+                isCurrent: item.current !== undefined ? item.current : i === total - 1
+            });
+        }
+        return nodes;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayNodes" }] : /* istanbul ignore next */ []));
+    /**
+     * Handles click on an item node.
+     */
+    onItemClick(item, index, originalEvent) {
+        this.itemClick.emit({ item, index, originalEvent });
+    }
+    /**
+     * Expands the collapsed crumbs when user clicks the ellipsis button.
+     */
+    onEllipsisClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.expandedByUser.set(true);
+        this.expand.emit();
+    }
+    /**
+     * Resets the expansion state back to collapsed.
+     */
+    resetExpansion() {
+        this.expandedByUser.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TalosBreadcrumbComponent, isStandalone: true, selector: "talos-breadcrumb, [talosBreadcrumb]", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null }, itemsBeforeCollapse: { classPropertyName: "itemsBeforeCollapse", publicName: "itemsBeforeCollapse", isSignal: true, isRequired: false, transformFunction: null }, itemsAfterCollapse: { classPropertyName: "itemsAfterCollapse", publicName: "itemsAfterCollapse", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", expand: "expand" }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "ariaLabel()", "class.talos-breadcrumb--xs": "size() === \"xs\"", "class.talos-breadcrumb--sm": "size() === \"sm\"", "class.talos-breadcrumb--md": "size() === \"md\"", "class.talos-breadcrumb--lg": "size() === \"lg\"", "class.talos-breadcrumb--standard": "variant() === \"standard\"", "class.talos-breadcrumb--contained": "variant() === \"contained\"", "class.talos-breadcrumb--subtle": "variant() === \"subtle\"" }, classAttribute: "talos-breadcrumb" }, queries: [{ propertyName: "customSeparator", first: true, predicate: TalosBreadcrumbSeparatorDirective, descendants: true, isSignal: true }, { propertyName: "customItemDef", first: true, predicate: TalosBreadcrumbItemDefDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ol class=\"talos-breadcrumb__list\">\n  @if (items() && items()!.length > 0) {\n    @for (node of displayNodes(); track node.type === 'ellipsis' ? ('ellipsis-' + node.index) : (node.item?.id ?? node.index); let isLast = $last) {\n      <li class=\"talos-breadcrumb__item-wrapper\">\n        @if (node.type === 'ellipsis') {\n          <button\n            type=\"button\"\n            class=\"talos-breadcrumb__ellipsis\"\n            [attr.aria-label]=\"'Show ' + (node.omittedCount || 0) + ' more items'\"\n            (click)=\"onEllipsisClick($event)\"\n          >\n            <span class=\"talos-breadcrumb__dot\"></span>\n            <span class=\"talos-breadcrumb__dot\"></span>\n            <span class=\"talos-breadcrumb__dot\"></span>\n          </button>\n        } @else if (node.item) {\n          @if (customItemDef()) {\n            <ng-container\n              *ngTemplateOutlet=\"\n                customItemDef()!.templateRef;\n                context: {\n                  $implicit: node.item,\n                  index: node.index,\n                  isFirst: node.isFirst,\n                  isLast: node.isLast\n                }\n              \"\n            />\n          } @else if (node.item.customTemplate) {\n            <ng-container\n              *ngTemplateOutlet=\"\n                node.item.customTemplate;\n                context: {\n                  $implicit: node.item,\n                  index: node.index,\n                  isFirst: node.isFirst,\n                  isLast: node.isLast\n                }\n              \"\n            />\n          } @else {\n            <talos-breadcrumb-item\n              [label]=\"node.item.label\"\n              [href]=\"node.item.href || null\"\n              [routerLink]=\"node.item.routerLink || null\"\n              [icon]=\"node.item.icon || null\"\n              [disabled]=\"node.item.disabled || false\"\n              [current]=\"node.isCurrent\"\n              [ariaLabel]=\"node.item.ariaLabel || null\"\n              [target]=\"node.item.target || null\"\n              [title]=\"node.item.title || null\"\n              [size]=\"size()\"\n              (itemClick)=\"onItemClick(node.item, node.index, $event)\"\n            >\n              {{ node.item.label }}\n            </talos-breadcrumb-item>\n          }\n        }\n\n        @if (!isLast) {\n          <span class=\"talos-breadcrumb__separator\" aria-hidden=\"true\">\n            @if (customSeparator()) {\n              <ng-container *ngTemplateOutlet=\"customSeparator()!.templateRef\" />\n            } @else if (separator() === 'chevron') {\n              <span class=\"talos-breadcrumb__separator-icon\">\n                <ng-container *ngComponentOutlet=\"chevronIcon\" />\n              </span>\n            } @else if (separator() === 'slash') {\n              /\n            } @else if (separator() === 'arrow') {\n              \u2192\n            } @else if (separator() === 'bullet') {\n              \u2022\n            } @else {\n              {{ separator() }}\n            }\n          </span>\n        }\n      </li>\n    }\n  } @else {\n    <ng-content />\n  }\n</ol>\n", styles: [":host{display:block;box-sizing:border-box;font-family:inherit}:host.talos-breadcrumb--xs .talos-breadcrumb__list{gap:.25rem}:host.talos-breadcrumb--xs .talos-breadcrumb__separator{font-size:.75rem;margin:0 .25rem}:host.talos-breadcrumb--xs .talos-breadcrumb__separator .talos-breadcrumb__separator-icon{width:.75rem;height:.75rem}:host.talos-breadcrumb--xs .talos-breadcrumb__ellipsis{height:1.25rem;padding:0 .25rem}:host.talos-breadcrumb--xs .talos-breadcrumb__ellipsis .talos-breadcrumb__dot{width:2.5px;height:2.5px}:host.talos-breadcrumb--sm .talos-breadcrumb__list{gap:.3125rem}:host.talos-breadcrumb--sm .talos-breadcrumb__separator{font-size:.8125rem;margin:0 .3125rem}:host.talos-breadcrumb--sm .talos-breadcrumb__separator .talos-breadcrumb__separator-icon{width:.8125rem;height:.8125rem}:host.talos-breadcrumb--sm .talos-breadcrumb__ellipsis{height:1.375rem;padding:0 .3125rem}:host.talos-breadcrumb--sm .talos-breadcrumb__ellipsis .talos-breadcrumb__dot{width:3px;height:3px}:host.talos-breadcrumb--md .talos-breadcrumb__list{gap:.375rem}:host.talos-breadcrumb--md .talos-breadcrumb__separator{font-size:.875rem;margin:0 .375rem}:host.talos-breadcrumb--md .talos-breadcrumb__separator .talos-breadcrumb__separator-icon{width:.875rem;height:.875rem}:host.talos-breadcrumb--md .talos-breadcrumb__ellipsis{height:1.5rem;padding:0 .375rem}:host.talos-breadcrumb--md .talos-breadcrumb__ellipsis .talos-breadcrumb__dot{width:3px;height:3px}:host.talos-breadcrumb--lg .talos-breadcrumb__list{gap:.5rem}:host.talos-breadcrumb--lg .talos-breadcrumb__separator{font-size:1rem;margin:0 .5rem}:host.talos-breadcrumb--lg .talos-breadcrumb__separator .talos-breadcrumb__separator-icon{width:1rem;height:1rem}:host.talos-breadcrumb--lg .talos-breadcrumb__ellipsis{height:1.75rem;padding:0 .5rem}:host.talos-breadcrumb--lg .talos-breadcrumb__ellipsis .talos-breadcrumb__dot{width:3.5px;height:3.5px}:host.talos-breadcrumb--standard{background-color:transparent}:host.talos-breadcrumb--contained{display:inline-block;background-color:var(--talos-card-bg, var(--card-bg, #ffffff));border:1px solid var(--talos-border-color, var(--border-color, #e2e8f0));border-radius:var(--talos-border-radius-md, var(--border-radius-md, .5rem));box-shadow:var(--talos-card-shadow, 0 1px 3px 0 rgba(0, 0, 0, .05));padding:.5rem .875rem}:host.talos-breadcrumb--subtle{display:inline-block;background-color:var(--talos-bg-subtle, var(--bg-subtle, #f8fafc));border:1px solid var(--talos-border-color, var(--border-color, #e2e8f0));border-radius:9999px;padding:.375rem .875rem}.talos-breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;list-style:none;margin:0;padding:0;box-sizing:border-box}.talos-breadcrumb__list>talos-breadcrumb-item:not(:last-child):after,.talos-breadcrumb__list>[talosBreadcrumbItem]:not(:last-child):after{content:\"/\";display:inline-block;margin:0 .375rem;color:var(--talos-text-muted, var(--text-muted, #94a3b8));-webkit-user-select:none;user-select:none;pointer-events:none}.talos-breadcrumb__item-wrapper{display:inline-flex;align-items:center;box-sizing:border-box}.talos-breadcrumb__separator{display:inline-flex;align-items:center;justify-content:center;color:var(--talos-text-muted, var(--text-muted, #94a3b8));-webkit-user-select:none;user-select:none;flex-shrink:0}.talos-breadcrumb__separator .talos-breadcrumb__separator-icon{display:inline-flex;align-items:center;justify-content:center}.talos-breadcrumb__separator .talos-breadcrumb__separator-icon svg,.talos-breadcrumb__separator .talos-breadcrumb__separator-icon ::ng-deep svg{width:100%;height:100%;stroke-width:2.2}.talos-breadcrumb__ellipsis{display:inline-flex;align-items:center;justify-content:center;gap:2px;background:var(--talos-bg-subtle, var(--bg-subtle, #f1f5f9));border:1px solid var(--talos-border-color, var(--border-color, #e2e8f0));border-radius:var(--talos-border-radius-sm, var(--border-radius-sm, .25rem));color:var(--talos-text-muted, var(--text-muted, #64748b));cursor:pointer;transition:color .2s cubic-bezier(.4,0,.2,1),background-color .2s cubic-bezier(.4,0,.2,1),border-color .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1)}.talos-breadcrumb__ellipsis:hover{background:var(--talos-primary-light, rgba(37, 99, 235, .08));border-color:var(--talos-primary-color, #2563eb);color:var(--talos-primary-color, #2563eb)}.talos-breadcrumb__ellipsis:focus-visible{outline:none;box-shadow:var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .25));border-color:var(--talos-primary-color, #2563eb);color:var(--talos-primary-color, #2563eb)}.talos-breadcrumb__ellipsis .talos-breadcrumb__dot{display:inline-block;border-radius:50%;background-color:currentColor}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TalosBreadcrumbItemComponent, selector: "talos-breadcrumb-item, [talosBreadcrumbItem]", inputs: ["label", "href", "routerLink", "icon", "disabled", "current", "ariaLabel", "size", "target", "title"], outputs: ["itemClick"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosBreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-breadcrumb, [talosBreadcrumb]', imports: [
+                        CommonModule,
+                        NgTemplateOutlet,
+                        NgComponentOutlet,
+                        TalosBreadcrumbItemComponent
+                    ], host: {
+                        'class': 'talos-breadcrumb',
+                        'role': 'navigation',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[class.talos-breadcrumb--xs]': 'size() === "xs"',
+                        '[class.talos-breadcrumb--sm]': 'size() === "sm"',
+                        '[class.talos-breadcrumb--md]': 'size() === "md"',
+                        '[class.talos-breadcrumb--lg]': 'size() === "lg"',
+                        '[class.talos-breadcrumb--standard]': 'variant() === "standard"',
+                        '[class.talos-breadcrumb--contained]': 'variant() === "contained"',
+                        '[class.talos-breadcrumb--subtle]': 'variant() === "subtle"'
+                    }, template: "<ol class=\"talos-breadcrumb__list\">\n  @if (items() && items()!.length > 0) {\n    @for (node of displayNodes(); track node.type === 'ellipsis' ? ('ellipsis-' + node.index) : (node.item?.id ?? node.index); let isLast = $last) {\n      <li class=\"talos-breadcrumb__item-wrapper\">\n        @if (node.type === 'ellipsis') {\n          <button\n            type=\"button\"\n            class=\"talos-breadcrumb__ellipsis\"\n            [attr.aria-label]=\"'Show ' + (node.omittedCount || 0) + ' more items'\"\n            (click)=\"onEllipsisClick($event)\"\n          >\n            <span class=\"talos-breadcrumb__dot\"></span>\n            <span class=\"talos-breadcrumb__dot\"></span>\n            <span class=\"talos-breadcrumb__dot\"></span>\n          </button>\n        } @else if (node.item) {\n          @if (customItemDef()) {\n            <ng-container\n              *ngTemplateOutlet=\"\n                customItemDef()!.templateRef;\n                context: {\n                  $implicit: node.item,\n                  index: node.index,\n                  isFirst: node.isFirst,\n                  isLast: node.isLast\n                }\n              \"\n            />\n          } @else if (node.item.customTemplate) {\n            <ng-container\n              *ngTemplateOutlet=\"\n                node.item.customTemplate;\n                context: {\n                  $implicit: node.item,\n                  index: node.index,\n                  isFirst: node.isFirst,\n                  isLast: node.isLast\n                }\n              \"\n            />\n          } @else {\n            <talos-breadcrumb-item\n              [label]=\"node.item.label\"\n              [href]=\"node.item.href || null\"\n              [routerLink]=\"node.item.routerLink || null\"\n              [icon]=\"node.item.icon || null\"\n              [disabled]=\"node.item.disabled || false\"\n              [current]=\"node.isCurrent\"\n              [ariaLabel]=\"node.item.ariaLabel || null\"\n              [target]=\"node.item.target || null\"\n              [title]=\"node.item.title || null\"\n              [size]=\"size()\"\n              (itemClick)=\"onItemClick(node.item, node.index, $event)\"\n            >\n              {{ node.item.label }}\n            </talos-breadcrumb-item>\n          }\n        }\n\n        @if (!isLast) {\n          <span class=\"talos-breadcrumb__separator\" aria-hidden=\"true\">\n            @if (customSeparator()) {\n              <ng-container *ngTemplateOutlet=\"customSeparator()!.templateRef\" />\n            } @else if (separator() === 'chevron') {\n              <span class=\"talos-breadcrumb__separator-icon\">\n                <ng-container *ngComponentOutlet=\"chevronIcon\" />\n              </span>\n            } @else if (separator() === 'slash') {\n              /\n            } @else if (separator() === 'arrow') {\n              \u2192\n            } @else if (separator() === 'bullet') {\n              \u2022\n            } @else {\n              {{ separator() }}\n            }\n          </span>\n        }\n      </li>\n    }\n  } @else {\n    <ng-content />\n  }\n</ol>\n", styles: [":host{display:block;box-sizing:border-box;font-family:inherit}:host.talos-breadcrumb--xs .talos-breadcrumb__list{gap:.25rem}:host.talos-breadcrumb--xs .talos-breadcrumb__separator{font-size:.75rem;margin:0 .25rem}:host.talos-breadcrumb--xs .talos-breadcrumb__separator .talos-breadcrumb__separator-icon{width:.75rem;height:.75rem}:host.talos-breadcrumb--xs .talos-breadcrumb__ellipsis{height:1.25rem;padding:0 .25rem}:host.talos-breadcrumb--xs .talos-breadcrumb__ellipsis .talos-breadcrumb__dot{width:2.5px;height:2.5px}:host.talos-breadcrumb--sm .talos-breadcrumb__list{gap:.3125rem}:host.talos-breadcrumb--sm .talos-breadcrumb__separator{font-size:.8125rem;margin:0 .3125rem}:host.talos-breadcrumb--sm .talos-breadcrumb__separator .talos-breadcrumb__separator-icon{width:.8125rem;height:.8125rem}:host.talos-breadcrumb--sm .talos-breadcrumb__ellipsis{height:1.375rem;padding:0 .3125rem}:host.talos-breadcrumb--sm .talos-breadcrumb__ellipsis .talos-breadcrumb__dot{width:3px;height:3px}:host.talos-breadcrumb--md .talos-breadcrumb__list{gap:.375rem}:host.talos-breadcrumb--md .talos-breadcrumb__separator{font-size:.875rem;margin:0 .375rem}:host.talos-breadcrumb--md .talos-breadcrumb__separator .talos-breadcrumb__separator-icon{width:.875rem;height:.875rem}:host.talos-breadcrumb--md .talos-breadcrumb__ellipsis{height:1.5rem;padding:0 .375rem}:host.talos-breadcrumb--md .talos-breadcrumb__ellipsis .talos-breadcrumb__dot{width:3px;height:3px}:host.talos-breadcrumb--lg .talos-breadcrumb__list{gap:.5rem}:host.talos-breadcrumb--lg .talos-breadcrumb__separator{font-size:1rem;margin:0 .5rem}:host.talos-breadcrumb--lg .talos-breadcrumb__separator .talos-breadcrumb__separator-icon{width:1rem;height:1rem}:host.talos-breadcrumb--lg .talos-breadcrumb__ellipsis{height:1.75rem;padding:0 .5rem}:host.talos-breadcrumb--lg .talos-breadcrumb__ellipsis .talos-breadcrumb__dot{width:3.5px;height:3.5px}:host.talos-breadcrumb--standard{background-color:transparent}:host.talos-breadcrumb--contained{display:inline-block;background-color:var(--talos-card-bg, var(--card-bg, #ffffff));border:1px solid var(--talos-border-color, var(--border-color, #e2e8f0));border-radius:var(--talos-border-radius-md, var(--border-radius-md, .5rem));box-shadow:var(--talos-card-shadow, 0 1px 3px 0 rgba(0, 0, 0, .05));padding:.5rem .875rem}:host.talos-breadcrumb--subtle{display:inline-block;background-color:var(--talos-bg-subtle, var(--bg-subtle, #f8fafc));border:1px solid var(--talos-border-color, var(--border-color, #e2e8f0));border-radius:9999px;padding:.375rem .875rem}.talos-breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;list-style:none;margin:0;padding:0;box-sizing:border-box}.talos-breadcrumb__list>talos-breadcrumb-item:not(:last-child):after,.talos-breadcrumb__list>[talosBreadcrumbItem]:not(:last-child):after{content:\"/\";display:inline-block;margin:0 .375rem;color:var(--talos-text-muted, var(--text-muted, #94a3b8));-webkit-user-select:none;user-select:none;pointer-events:none}.talos-breadcrumb__item-wrapper{display:inline-flex;align-items:center;box-sizing:border-box}.talos-breadcrumb__separator{display:inline-flex;align-items:center;justify-content:center;color:var(--talos-text-muted, var(--text-muted, #94a3b8));-webkit-user-select:none;user-select:none;flex-shrink:0}.talos-breadcrumb__separator .talos-breadcrumb__separator-icon{display:inline-flex;align-items:center;justify-content:center}.talos-breadcrumb__separator .talos-breadcrumb__separator-icon svg,.talos-breadcrumb__separator .talos-breadcrumb__separator-icon ::ng-deep svg{width:100%;height:100%;stroke-width:2.2}.talos-breadcrumb__ellipsis{display:inline-flex;align-items:center;justify-content:center;gap:2px;background:var(--talos-bg-subtle, var(--bg-subtle, #f1f5f9));border:1px solid var(--talos-border-color, var(--border-color, #e2e8f0));border-radius:var(--talos-border-radius-sm, var(--border-radius-sm, .25rem));color:var(--talos-text-muted, var(--text-muted, #64748b));cursor:pointer;transition:color .2s cubic-bezier(.4,0,.2,1),background-color .2s cubic-bezier(.4,0,.2,1),border-color .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1)}.talos-breadcrumb__ellipsis:hover{background:var(--talos-primary-light, rgba(37, 99, 235, .08));border-color:var(--talos-primary-color, #2563eb);color:var(--talos-primary-color, #2563eb)}.talos-breadcrumb__ellipsis:focus-visible{outline:none;box-shadow:var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .25));border-color:var(--talos-primary-color, #2563eb);color:var(--talos-primary-color, #2563eb)}.talos-breadcrumb__ellipsis .talos-breadcrumb__dot{display:inline-block;border-radius:50%;background-color:currentColor}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], maxItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxItems", required: false }] }], itemsBeforeCollapse: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsBeforeCollapse", required: false }] }], itemsAfterCollapse: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsAfterCollapse", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], expand: [{ type: i0.Output, args: ["expand"] }], customSeparator: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TalosBreadcrumbSeparatorDirective), { isSignal: true }] }], customItemDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TalosBreadcrumbItemDefDirective), { isSignal: true }] }] } });
+
+const BREADCRUMB_DECLARATIONS = [
+    TalosBreadcrumbComponent,
+    TalosBreadcrumbItemComponent,
+    TalosBreadcrumbSeparatorDirective,
+    TalosBreadcrumbItemDefDirective
+];
+class TalosBreadcrumbModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosBreadcrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: TalosBreadcrumbModule, imports: [TalosBreadcrumbComponent,
+            TalosBreadcrumbItemComponent,
+            TalosBreadcrumbSeparatorDirective,
+            TalosBreadcrumbItemDefDirective], exports: [TalosBreadcrumbComponent,
+            TalosBreadcrumbItemComponent,
+            TalosBreadcrumbSeparatorDirective,
+            TalosBreadcrumbItemDefDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosBreadcrumbModule, imports: [TalosBreadcrumbComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosBreadcrumbModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...BREADCRUMB_DECLARATIONS],
+                    exports: [...BREADCRUMB_DECLARATIONS]
+                }]
+        }] });
+
+/**
+ * Normalizes any recognized status string or alias into its canonical status.
+ */
+function normalizeWorkflowStatus(status) {
+    if (!status) {
+        return 'PENDING';
+    }
+    const clean = status.trim().toUpperCase().replace(/[\s_]+/g, '-');
+    switch (clean) {
+        case 'NEW':
+        case 'CREATED':
+        case 'DRAFT':
+            return 'NEW';
+        case 'PENDING':
+        case 'QUEUED':
+        case 'SCHEDULED':
+        case 'WAITING':
+            return 'PENDING';
+        case 'IN-PROGRESS':
+        case 'INPROGRESS':
+        case 'RUNNING':
+        case 'EXECUTING':
+        case 'ACTIVE':
+            return 'IN-PROGRESS';
+        case 'PAUSED':
+        case 'SUSPENDED':
+        case 'ON-HOLD':
+        case 'ONHOLD':
+        case 'WAITING-FOR-APPROVAL':
+        case 'BLOCKED':
+            return 'PAUSED';
+        case 'RETRYING':
+        case 'UP-FOR-RETRY':
+        case 'RETRY':
+            return 'RETRYING';
+        case 'SKIPPED':
+        case 'BYPASSED':
+        case 'IGNORED':
+            return 'SKIPPED';
+        case 'SUCCESS':
+        case 'SUCCEEDED':
+        case 'PASSED':
+        case 'OK':
+            return 'SUCCESS';
+        case 'COMPLETED':
+        case 'FINISHED':
+        case 'DONE':
+            return 'COMPLETED';
+        case 'ERROR':
+        case 'FAILED':
+        case 'FAILURE':
+        case 'CRASHED':
+            return 'ERROR';
+        case 'TERMINATED':
+        case 'CANCELLED':
+        case 'CANCELED':
+        case 'ABORTED':
+        case 'STOPPED':
+        case 'KILLED':
+            return 'TERMINATED';
+        case 'EXPIRED':
+        case 'TIMEOUT':
+        case 'TIMED-OUT':
+        case 'TIMEDOUT':
+        case 'STALE':
+            return 'EXPIRED';
+        default:
+            return 'PENDING';
+    }
+}
+/**
+ * Status descriptors map with default metadata.
+ */
+const TALOS_STATUS_DESCRIPTORS = {
+    'NEW': {
+        canonical: 'NEW',
+        defaultLabel: 'New',
+        defaultAriaLabel: 'Status: New',
+        cssModifier: 'new'
+    },
+    'PENDING': {
+        canonical: 'PENDING',
+        defaultLabel: 'Pending',
+        defaultAriaLabel: 'Status: Pending',
+        cssModifier: 'pending'
+    },
+    'IN-PROGRESS': {
+        canonical: 'IN-PROGRESS',
+        defaultLabel: 'In Progress',
+        defaultAriaLabel: 'Status: In Progress',
+        cssModifier: 'inprogress',
+        shouldAnimateIcon: true
+    },
+    'PAUSED': {
+        canonical: 'PAUSED',
+        defaultLabel: 'Paused',
+        defaultAriaLabel: 'Status: Paused',
+        cssModifier: 'paused'
+    },
+    'RETRYING': {
+        canonical: 'RETRYING',
+        defaultLabel: 'Retrying',
+        defaultAriaLabel: 'Status: Retrying',
+        cssModifier: 'retrying',
+        shouldAnimateIcon: true
+    },
+    'SKIPPED': {
+        canonical: 'SKIPPED',
+        defaultLabel: 'Skipped',
+        defaultAriaLabel: 'Status: Skipped',
+        cssModifier: 'skipped'
+    },
+    'SUCCESS': {
+        canonical: 'SUCCESS',
+        defaultLabel: 'Success',
+        defaultAriaLabel: 'Status: Success',
+        cssModifier: 'success'
+    },
+    'COMPLETED': {
+        canonical: 'COMPLETED',
+        defaultLabel: 'Completed',
+        defaultAriaLabel: 'Status: Completed',
+        cssModifier: 'completed'
+    },
+    'ERROR': {
+        canonical: 'ERROR',
+        defaultLabel: 'Error',
+        defaultAriaLabel: 'Status: Error',
+        cssModifier: 'error'
+    },
+    'TERMINATED': {
+        canonical: 'TERMINATED',
+        defaultLabel: 'Terminated',
+        defaultAriaLabel: 'Status: Terminated',
+        cssModifier: 'terminated'
+    },
+    'EXPIRED': {
+        canonical: 'EXPIRED',
+        defaultLabel: 'Expired',
+        defaultAriaLabel: 'Status: Expired',
+        cssModifier: 'expired'
+    }
+};
+
+class TalosStatusTagComponent {
+    elementRef = inject(ElementRef);
+    /**
+     * The workflow status to display. Supports all canonical names, lowercase variants, and common aliases.
+     */
+    status = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional custom label text. If not provided or empty, defaults to standard status label.
+     */
+    label = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /**
+     * Visual presentation style.
+     * @default 'subtle'
+     */
+    variant = input('subtle', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /**
+     * Size scale.
+     * @default 'md'
+     */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /**
+     * Border radius shape.
+     * @default 'rounded'
+     */
+    shape = input('rounded', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to render the status icon / indicator symbol.
+     * @default true
+     */
+    showIcon = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showIcon" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional custom icon component override.
+     */
+    icon = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to render only the symbol/icon without label text.
+     * @default false
+     */
+    iconOnly = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconOnly" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to enable pulsing animation for active/waiting states.
+     * @default false
+     */
+    pulse = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pulse" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional accessible ARIA label override.
+     */
+    ariaLabel = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Normalized canonical workflow status.
+     */
+    canonicalStatus = computed(() => {
+        return normalizeWorkflowStatus(this.status());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canonicalStatus" }] : /* istanbul ignore next */ []));
+    /**
+     * Descriptor containing default metadata for current canonical status.
+     */
+    descriptor = computed(() => {
+        return TALOS_STATUS_DESCRIPTORS[this.canonicalStatus()];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "descriptor" }] : /* istanbul ignore next */ []));
+    /**
+     * Resolved label to display when no custom content is projected.
+     */
+    resolvedLabel = computed(() => {
+        const customLabel = this.label();
+        if (customLabel !== undefined && customLabel !== null && customLabel.trim().length > 0) {
+            return customLabel;
+        }
+        return this.descriptor().defaultLabel;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Resolved accessibility label for screen readers.
+     */
+    resolvedAriaLabel = computed(() => {
+        const customAria = this.ariaLabel();
+        if (customAria !== undefined && customAria !== null && customAria.trim().length > 0) {
+            return customAria;
+        }
+        return `${this.descriptor().defaultAriaLabel}: ${this.resolvedLabel()}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Pixel size for the Lucide icon based on status tag size.
+     */
+    iconSize = computed(() => {
+        switch (this.size()) {
+            case 'xs':
+                return 11;
+            case 'sm':
+                return 13;
+            case 'lg':
+                return 16;
+            case 'md':
+            default:
+                return 14;
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
+    /**
+     * Resolved default Lucide icon component for the current canonical status.
+     */
+    defaultIconComponent = computed(() => {
+        switch (this.canonicalStatus()) {
+            case 'NEW':
+                return LucideSparkles;
+            case 'PENDING':
+                return LucideClock;
+            case 'IN-PROGRESS':
+                return LucideLoader2;
+            case 'PAUSED':
+                return LucideCirclePause;
+            case 'RETRYING':
+                return LucideRotateCcw;
+            case 'SKIPPED':
+                return LucideFastForward;
+            case 'SUCCESS':
+                return LucideCheckCircle2;
+            case 'COMPLETED':
+                return LucideCheckCheck;
+            case 'ERROR':
+                return LucideCircleAlert;
+            case 'TERMINATED':
+                return LucideBan;
+            case 'EXPIRED':
+                return LucideClockAlert;
+            default:
+                return LucideClock;
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultIconComponent" }] : /* istanbul ignore next */ []));
+    /**
+     * Active icon component to render (custom icon if provided, otherwise default semantic icon).
+     */
+    activeIconComponent = computed(() => {
+        return this.icon() ?? this.defaultIconComponent();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIconComponent" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the icon should have active spin/rotation animation (e.g. IN-PROGRESS, RETRYING).
+     */
+    shouldAnimateIcon = computed(() => {
+        return !!this.descriptor().shouldAnimateIcon;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shouldAnimateIcon" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosStatusTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TalosStatusTagComponent, isStandalone: true, selector: "talos-status-tag, [talosStatusTag]", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, pulse: { classPropertyName: "pulse", publicName: "pulse", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.talos-status-tag--new": "canonicalStatus() === \"NEW\"", "class.talos-status-tag--pending": "canonicalStatus() === \"PENDING\"", "class.talos-status-tag--inprogress": "canonicalStatus() === \"IN-PROGRESS\"", "class.talos-status-tag--paused": "canonicalStatus() === \"PAUSED\"", "class.talos-status-tag--retrying": "canonicalStatus() === \"RETRYING\"", "class.talos-status-tag--skipped": "canonicalStatus() === \"SKIPPED\"", "class.talos-status-tag--success": "canonicalStatus() === \"SUCCESS\"", "class.talos-status-tag--completed": "canonicalStatus() === \"COMPLETED\"", "class.talos-status-tag--error": "canonicalStatus() === \"ERROR\"", "class.talos-status-tag--terminated": "canonicalStatus() === \"TERMINATED\"", "class.talos-status-tag--expired": "canonicalStatus() === \"EXPIRED\"", "class.talos-status-tag--subtle": "variant() === \"subtle\"", "class.talos-status-tag--solid": "variant() === \"solid\"", "class.talos-status-tag--outline": "variant() === \"outline\"", "class.talos-status-tag--dot": "variant() === \"dot\"", "class.talos-status-tag--xs": "size() === \"xs\"", "class.talos-status-tag--sm": "size() === \"sm\"", "class.talos-status-tag--md": "size() === \"md\"", "class.talos-status-tag--lg": "size() === \"lg\"", "class.talos-status-tag--rounded": "shape() === \"rounded\"", "class.talos-status-tag--pill": "shape() === \"pill\"", "class.talos-status-tag--square": "shape() === \"square\"", "class.talos-status-tag--pulse": "pulse()", "class.talos-status-tag--icon-only": "iconOnly()", "attr.role": "\"status\"", "attr.aria-label": "resolvedAriaLabel()" }, classAttribute: "talos-status-tag" }, ngImport: i0, template: "@if (variant() === 'dot') {\n  <span class=\"talos-status-tag__dot\" [class.talos-status-tag__dot--pulse]=\"pulse()\" aria-hidden=\"true\">\n    @if (pulse()) {\n      <span class=\"talos-status-tag__dot-ping\" aria-hidden=\"true\"></span>\n    }\n  </span>\n} @else if (showIcon()) {\n  <span\n    class=\"talos-status-tag__icon\"\n    [class.talos-status-tag__icon--spin]=\"shouldAnimateIcon()\"\n    [class.talos-status-tag__icon--pulse]=\"pulse()\"\n    aria-hidden=\"true\"\n  >\n    <ng-container *ngComponentOutlet=\"activeIconComponent(); inputs: { size: iconSize() }\" />\n  </span>\n}\n\n<span [class.talos-status-tag__label]=\"!iconOnly()\" [class.talos-sr-only]=\"iconOnly()\">\n  <ng-content>{{ resolvedLabel() }}</ng-content>\n</span>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;vertical-align:middle;box-sizing:border-box;font-family:var(--talos-status-font-family, inherit);font-weight:var(--talos-status-font-weight, 600);line-height:1;text-decoration:none;letter-spacing:.015em;-webkit-user-select:none;user-select:none;transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease;--_status-color: var(--talos-status-color, var(--talos-status-pending-color, #d97706));--_status-bg: var(--talos-status-bg, var(--talos-status-pending-bg, #fffbeb));--_status-border: var(--talos-status-border, var(--talos-status-pending-border, #fde68a));--_status-solid-bg: var(--talos-status-solid-bg, var(--talos-status-pending-solid-bg, #d97706));--_status-solid-text: var(--talos-status-solid-text, var(--talos-status-pending-solid-text, #ffffff));--_status-dot-color: var(--talos-status-dot-color, var(--_status-color))}:host.talos-status-tag--new{--_status-color: var(--talos-status-color, var(--talos-status-new-color, #0284c7));--_status-bg: var(--talos-status-bg, var(--talos-status-new-bg, #f0f9ff));--_status-border: var(--talos-status-border, var(--talos-status-new-border, #bae6fd));--_status-solid-bg: var(--talos-status-solid-bg, var(--talos-status-new-solid-bg, #0284c7));--_status-solid-text: var(--talos-status-solid-text, var(--talos-status-new-solid-text, #ffffff));--_status-dot-color: var(--talos-status-dot-color, var(--_status-color))}:host.talos-status-tag--pending{--_status-color: var(--talos-status-color, var(--talos-status-pending-color, #d97706));--_status-bg: var(--talos-status-bg, var(--talos-status-pending-bg, #fffbeb));--_status-border: var(--talos-status-border, var(--talos-status-pending-border, #fde68a));--_status-solid-bg: var(--talos-status-solid-bg, var(--talos-status-pending-solid-bg, #d97706));--_status-solid-text: var(--talos-status-solid-text, var(--talos-status-pending-solid-text, #ffffff));--_status-dot-color: var(--talos-status-dot-color, var(--_status-color))}:host.talos-status-tag--inprogress{--_status-color: var(--talos-status-color, var(--talos-status-inprogress-color, #2563eb));--_status-bg: var(--talos-status-bg, var(--talos-status-inprogress-bg, #eff6ff));--_status-border: var(--talos-status-border, var(--talos-status-inprogress-border, #bfdbfe));--_status-solid-bg: var(--talos-status-solid-bg, var(--talos-status-inprogress-solid-bg, #2563eb));--_status-solid-text: var(--talos-status-solid-text, var(--talos-status-inprogress-solid-text, #ffffff));--_status-dot-color: var(--talos-status-dot-color, var(--_status-color))}:host.talos-status-tag--paused{--_status-color: var(--talos-status-color, var(--talos-status-paused-color, #b45309));--_status-bg: var(--talos-status-bg, var(--talos-status-paused-bg, #fff7ed));--_status-border: var(--talos-status-border, var(--talos-status-paused-border, #fed7aa));--_status-solid-bg: var(--talos-status-solid-bg, var(--talos-status-paused-solid-bg, #ea580c));--_status-solid-text: var(--talos-status-solid-text, var(--talos-status-paused-solid-text, #ffffff));--_status-dot-color: var(--talos-status-dot-color, var(--_status-color))}:host.talos-status-tag--retrying{--_status-color: var(--talos-status-color, var(--talos-status-retrying-color, #c2410c));--_status-bg: var(--talos-status-bg, var(--talos-status-retrying-bg, #fff7ed));--_status-border: var(--talos-status-border, var(--talos-status-retrying-border, #ffedd5));--_status-solid-bg: var(--talos-status-solid-bg, var(--talos-status-retrying-solid-bg, #ea580c));--_status-solid-text: var(--talos-status-solid-text, var(--talos-status-retrying-solid-text, #ffffff));--_status-dot-color: var(--talos-status-dot-color, var(--_status-color))}:host.talos-status-tag--skipped{--_status-color: var(--talos-status-color, var(--talos-status-skipped-color, #475569));--_status-bg: var(--talos-status-bg, var(--talos-status-skipped-bg, #f8fafc));--_status-border: var(--talos-status-border, var(--talos-status-skipped-border, #e2e8f0));--_status-solid-bg: var(--talos-status-solid-bg, var(--talos-status-skipped-solid-bg, #64748b));--_status-solid-text: var(--talos-status-solid-text, var(--talos-status-skipped-solid-text, #ffffff));--_status-dot-color: var(--talos-status-dot-color, var(--_status-color))}:host.talos-status-tag--success{--_status-color: var(--talos-status-color, var(--talos-status-success-color, #16a34a));--_status-bg: var(--talos-status-bg, var(--talos-status-success-bg, #f0fdf4));--_status-border: var(--talos-status-border, var(--talos-status-success-border, #bbf7d0));--_status-solid-bg: var(--talos-status-solid-bg, var(--talos-status-success-solid-bg, #16a34a));--_status-solid-text: var(--talos-status-solid-text, var(--talos-status-success-solid-text, #ffffff));--_status-dot-color: var(--talos-status-dot-color, var(--_status-color))}:host.talos-status-tag--completed{--_status-color: var(--talos-status-color, var(--talos-status-completed-color, #0f766e));--_status-bg: var(--talos-status-bg, var(--talos-status-completed-bg, #f0fdfa));--_status-border: var(--talos-status-border, var(--talos-status-completed-border, #99f6e4));--_status-solid-bg: var(--talos-status-solid-bg, var(--talos-status-completed-solid-bg, #0d9488));--_status-solid-text: var(--talos-status-solid-text, var(--talos-status-completed-solid-text, #ffffff));--_status-dot-color: var(--talos-status-dot-color, var(--_status-color))}:host.talos-status-tag--error{--_status-color: var(--talos-status-color, var(--talos-status-error-color, #dc2626));--_status-bg: var(--talos-status-bg, var(--talos-status-error-bg, #fef2f2));--_status-border: var(--talos-status-border, var(--talos-status-error-border, #fecaca));--_status-solid-bg: var(--talos-status-solid-bg, var(--talos-status-error-solid-bg, #dc2626));--_status-solid-text: var(--talos-status-solid-text, var(--talos-status-error-solid-text, #ffffff));--_status-dot-color: var(--talos-status-dot-color, var(--_status-color))}:host.talos-status-tag--terminated{--_status-color: var(--talos-status-color, var(--talos-status-terminated-color, #334155));--_status-bg: var(--talos-status-bg, var(--talos-status-terminated-bg, #f1f5f9));--_status-border: var(--talos-status-border, var(--talos-status-terminated-border, #cbd5e1));--_status-solid-bg: var(--talos-status-solid-bg, var(--talos-status-terminated-solid-bg, #334155));--_status-solid-text: var(--talos-status-solid-text, var(--talos-status-terminated-solid-text, #ffffff));--_status-dot-color: var(--talos-status-dot-color, var(--_status-color))}:host.talos-status-tag--expired{--_status-color: var(--talos-status-color, var(--talos-status-expired-color, #7e22ce));--_status-bg: var(--talos-status-bg, var(--talos-status-expired-bg, #faf5ff));--_status-border: var(--talos-status-border, var(--talos-status-expired-border, #e9d5ff));--_status-solid-bg: var(--talos-status-solid-bg, var(--talos-status-expired-solid-bg, #7e22ce));--_status-solid-text: var(--talos-status-solid-text, var(--talos-status-expired-solid-text, #ffffff));--_status-dot-color: var(--talos-status-dot-color, var(--_status-color))}:host.talos-status-tag--subtle{color:var(--_status-color);background-color:var(--_status-bg);border:1px solid var(--_status-border)}:host.talos-status-tag--solid{color:var(--_status-solid-text);background-color:var(--_status-solid-bg);border:1px solid transparent;box-shadow:0 1px 2px #00000014}:host.talos-status-tag--outline{color:var(--_status-color);background-color:transparent;border:1px solid var(--_status-color)}:host.talos-status-tag--dot{color:var(--talos-text-color, #0f172a);background-color:transparent;border:1px solid transparent;padding-left:0;padding-right:0}:host.talos-status-tag--xs{height:1.25rem;font-size:.6875rem;padding:0 .375rem;gap:.25rem}:host.talos-status-tag--xs.talos-status-tag--icon-only{width:1.25rem;padding:0}:host.talos-status-tag--xs .talos-status-tag__dot{width:6px;height:6px}:host.talos-status-tag--sm{height:1.5rem;font-size:.75rem;padding:0 .5rem;gap:.3125rem}:host.talos-status-tag--sm.talos-status-tag--icon-only{width:1.5rem;padding:0}:host.talos-status-tag--sm .talos-status-tag__dot{width:7px;height:7px}:host.talos-status-tag--md{height:1.75rem;font-size:.8125rem;padding:0 .625rem;gap:.375rem}:host.talos-status-tag--md.talos-status-tag--icon-only{width:1.75rem;padding:0}:host.talos-status-tag--md .talos-status-tag__dot{width:8px;height:8px}:host.talos-status-tag--lg{height:2rem;font-size:.875rem;padding:0 .75rem;gap:.4375rem}:host.talos-status-tag--lg.talos-status-tag--icon-only{width:2rem;padding:0}:host.talos-status-tag--lg .talos-status-tag__dot{width:10px;height:10px}:host.talos-status-tag--rounded{border-radius:var(--talos-status-radius-rounded, .375rem)}:host.talos-status-tag--pill{border-radius:var(--talos-status-radius-pill, 9999px)}:host.talos-status-tag--square{border-radius:var(--talos-status-radius-square, .25rem)}:host.talos-status-tag--pulse:not(.talos-status-tag--dot){animation:talos-status-pulse 2.2s cubic-bezier(.4,0,.6,1) infinite}.talos-status-tag__icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1}.talos-status-tag__icon--spin{animation:talos-status-spin 1.4s linear infinite}.talos-status-tag__icon--pulse{animation:talos-status-icon-pulse 1.8s ease-in-out infinite}.talos-status-tag__label{display:inline-flex;align-items:center;line-height:1}.talos-status-tag__dot{position:relative;display:inline-block;border-radius:9999px;background-color:var(--_status-dot-color);flex-shrink:0}.talos-status-tag__dot .talos-status-tag__dot-ping{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:9999px;background-color:var(--_status-dot-color);opacity:.75;animation:talos-status-ping 1.5s cubic-bezier(0,0,.2,1) infinite}.talos-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@keyframes talos-status-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes talos-status-pulse{0%,to{opacity:1}50%{opacity:.65}}@keyframes talos-status-icon-pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.15);opacity:.8}}@keyframes talos-status-ping{75%,to{transform:scale(2.2);opacity:0}}:root[data-theme=dark] :host.talos-status-tag--new,:root.dark :host.talos-status-tag--new,[data-theme=dark] :host.talos-status-tag--new,[data-mode=dark] :host.talos-status-tag--new,.dark :host.talos-status-tag--new,.dark-theme :host.talos-status-tag--new{--_status-color: var(--talos-status-new-color, #38bdf8);--_status-bg: var(--talos-status-new-bg, rgba(2, 132, 199, .18));--_status-border: var(--talos-status-new-border, rgba(56, 189, 248, .35));--_status-solid-bg: var(--talos-status-new-solid-bg, #0284c7)}:root[data-theme=dark] :host.talos-status-tag--pending,:root.dark :host.talos-status-tag--pending,[data-theme=dark] :host.talos-status-tag--pending,[data-mode=dark] :host.talos-status-tag--pending,.dark :host.talos-status-tag--pending,.dark-theme :host.talos-status-tag--pending{--_status-color: var(--talos-status-pending-color, #fbbf24);--_status-bg: var(--talos-status-pending-bg, rgba(217, 119, 6, .18));--_status-border: var(--talos-status-pending-border, rgba(251, 191, 36, .35));--_status-solid-bg: var(--talos-status-pending-solid-bg, #d97706)}:root[data-theme=dark] :host.talos-status-tag--inprogress,:root.dark :host.talos-status-tag--inprogress,[data-theme=dark] :host.talos-status-tag--inprogress,[data-mode=dark] :host.talos-status-tag--inprogress,.dark :host.talos-status-tag--inprogress,.dark-theme :host.talos-status-tag--inprogress{--_status-color: var(--talos-status-inprogress-color, #60a5fa);--_status-bg: var(--talos-status-inprogress-bg, rgba(37, 99, 235, .2));--_status-border: var(--talos-status-inprogress-border, rgba(96, 165, 250, .35));--_status-solid-bg: var(--talos-status-inprogress-solid-bg, #2563eb)}:root[data-theme=dark] :host.talos-status-tag--paused,:root[data-theme=dark] :host.talos-status-tag--retrying,:root.dark :host.talos-status-tag--paused,:root.dark :host.talos-status-tag--retrying,[data-theme=dark] :host.talos-status-tag--paused,[data-theme=dark] :host.talos-status-tag--retrying,[data-mode=dark] :host.talos-status-tag--paused,[data-mode=dark] :host.talos-status-tag--retrying,.dark :host.talos-status-tag--paused,.dark :host.talos-status-tag--retrying,.dark-theme :host.talos-status-tag--paused,.dark-theme :host.talos-status-tag--retrying{--_status-color: var(--talos-status-paused-color, #fb923c);--_status-bg: var(--talos-status-paused-bg, rgba(194, 65, 12, .18));--_status-border: var(--talos-status-paused-border, rgba(251, 146, 60, .35));--_status-solid-bg: var(--talos-status-paused-solid-bg, #ea580c)}:root[data-theme=dark] :host.talos-status-tag--skipped,:root.dark :host.talos-status-tag--skipped,[data-theme=dark] :host.talos-status-tag--skipped,[data-mode=dark] :host.talos-status-tag--skipped,.dark :host.talos-status-tag--skipped,.dark-theme :host.talos-status-tag--skipped{--_status-color: var(--talos-status-skipped-color, #94a3b8);--_status-bg: var(--talos-status-skipped-bg, rgba(100, 116, 139, .18));--_status-border: var(--talos-status-skipped-border, rgba(148, 163, 184, .3));--_status-solid-bg: var(--talos-status-skipped-solid-bg, #475569)}:root[data-theme=dark] :host.talos-status-tag--success,:root.dark :host.talos-status-tag--success,[data-theme=dark] :host.talos-status-tag--success,[data-mode=dark] :host.talos-status-tag--success,.dark :host.talos-status-tag--success,.dark-theme :host.talos-status-tag--success{--_status-color: var(--talos-status-success-color, #4ade80);--_status-bg: var(--talos-status-success-bg, rgba(22, 163, 74, .18));--_status-border: var(--talos-status-success-border, rgba(74, 222, 128, .35));--_status-solid-bg: var(--talos-status-success-solid-bg, #16a34a)}:root[data-theme=dark] :host.talos-status-tag--completed,:root.dark :host.talos-status-tag--completed,[data-theme=dark] :host.talos-status-tag--completed,[data-mode=dark] :host.talos-status-tag--completed,.dark :host.talos-status-tag--completed,.dark-theme :host.talos-status-tag--completed{--_status-color: var(--talos-status-completed-color, #2dd4bf);--_status-bg: var(--talos-status-completed-bg, rgba(15, 118, 110, .18));--_status-border: var(--talos-status-completed-border, rgba(45, 212, 191, .35));--_status-solid-bg: var(--talos-status-completed-solid-bg, #0d9488)}:root[data-theme=dark] :host.talos-status-tag--error,:root.dark :host.talos-status-tag--error,[data-theme=dark] :host.talos-status-tag--error,[data-mode=dark] :host.talos-status-tag--error,.dark :host.talos-status-tag--error,.dark-theme :host.talos-status-tag--error{--_status-color: var(--talos-status-error-color, #f87171);--_status-bg: var(--talos-status-error-bg, rgba(220, 38, 38, .18));--_status-border: var(--talos-status-error-border, rgba(248, 113, 113, .35));--_status-solid-bg: var(--talos-status-error-solid-bg, #dc2626)}:root[data-theme=dark] :host.talos-status-tag--terminated,:root.dark :host.talos-status-tag--terminated,[data-theme=dark] :host.talos-status-tag--terminated,[data-mode=dark] :host.talos-status-tag--terminated,.dark :host.talos-status-tag--terminated,.dark-theme :host.talos-status-tag--terminated{--_status-color: var(--talos-status-terminated-color, #cbd5e1);--_status-bg: var(--talos-status-terminated-bg, rgba(51, 65, 85, .3));--_status-border: var(--talos-status-terminated-border, rgba(203, 213, 225, .3));--_status-solid-bg: var(--talos-status-terminated-solid-bg, #334155)}:root[data-theme=dark] :host.talos-status-tag--expired,:root.dark :host.talos-status-tag--expired,[data-theme=dark] :host.talos-status-tag--expired,[data-mode=dark] :host.talos-status-tag--expired,.dark :host.talos-status-tag--expired,.dark-theme :host.talos-status-tag--expired{--_status-color: var(--talos-status-expired-color, #c084fc);--_status-bg: var(--talos-status-expired-bg, rgba(126, 34, 206, .2));--_status-border: var(--talos-status-expired-border, rgba(192, 132, 252, .35));--_status-solid-bg: var(--talos-status-expired-solid-bg, #7e22ce)}:root[data-theme=dark] :host.talos-status-tag--dot,:root.dark :host.talos-status-tag--dot,[data-theme=dark] :host.talos-status-tag--dot,[data-mode=dark] :host.talos-status-tag--dot,.dark :host.talos-status-tag--dot,.dark-theme :host.talos-status-tag--dot{color:var(--talos-text-color, #f9fafb)}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosStatusTagComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-status-tag, [talosStatusTag]', imports: [NgComponentOutlet], host: {
+                        'class': 'talos-status-tag',
+                        '[class.talos-status-tag--new]': 'canonicalStatus() === "NEW"',
+                        '[class.talos-status-tag--pending]': 'canonicalStatus() === "PENDING"',
+                        '[class.talos-status-tag--inprogress]': 'canonicalStatus() === "IN-PROGRESS"',
+                        '[class.talos-status-tag--paused]': 'canonicalStatus() === "PAUSED"',
+                        '[class.talos-status-tag--retrying]': 'canonicalStatus() === "RETRYING"',
+                        '[class.talos-status-tag--skipped]': 'canonicalStatus() === "SKIPPED"',
+                        '[class.talos-status-tag--success]': 'canonicalStatus() === "SUCCESS"',
+                        '[class.talos-status-tag--completed]': 'canonicalStatus() === "COMPLETED"',
+                        '[class.talos-status-tag--error]': 'canonicalStatus() === "ERROR"',
+                        '[class.talos-status-tag--terminated]': 'canonicalStatus() === "TERMINATED"',
+                        '[class.talos-status-tag--expired]': 'canonicalStatus() === "EXPIRED"',
+                        '[class.talos-status-tag--subtle]': 'variant() === "subtle"',
+                        '[class.talos-status-tag--solid]': 'variant() === "solid"',
+                        '[class.talos-status-tag--outline]': 'variant() === "outline"',
+                        '[class.talos-status-tag--dot]': 'variant() === "dot"',
+                        '[class.talos-status-tag--xs]': 'size() === "xs"',
+                        '[class.talos-status-tag--sm]': 'size() === "sm"',
+                        '[class.talos-status-tag--md]': 'size() === "md"',
+                        '[class.talos-status-tag--lg]': 'size() === "lg"',
+                        '[class.talos-status-tag--rounded]': 'shape() === "rounded"',
+                        '[class.talos-status-tag--pill]': 'shape() === "pill"',
+                        '[class.talos-status-tag--square]': 'shape() === "square"',
+                        '[class.talos-status-tag--pulse]': 'pulse()',
+                        '[class.talos-status-tag--icon-only]': 'iconOnly()',
+                        '[attr.role]': '"status"',
+                        '[attr.aria-label]': 'resolvedAriaLabel()'
+                    }, template: "@if (variant() === 'dot') {\n  <span class=\"talos-status-tag__dot\" [class.talos-status-tag__dot--pulse]=\"pulse()\" aria-hidden=\"true\">\n    @if (pulse()) {\n      <span class=\"talos-status-tag__dot-ping\" aria-hidden=\"true\"></span>\n    }\n  </span>\n} @else if (showIcon()) {\n  <span\n    class=\"talos-status-tag__icon\"\n    [class.talos-status-tag__icon--spin]=\"shouldAnimateIcon()\"\n    [class.talos-status-tag__icon--pulse]=\"pulse()\"\n    aria-hidden=\"true\"\n  >\n    <ng-container *ngComponentOutlet=\"activeIconComponent(); inputs: { size: iconSize() }\" />\n  </span>\n}\n\n<span [class.talos-status-tag__label]=\"!iconOnly()\" [class.talos-sr-only]=\"iconOnly()\">\n  <ng-content>{{ resolvedLabel() }}</ng-content>\n</span>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;vertical-align:middle;box-sizing:border-box;font-family:var(--talos-status-font-family, inherit);font-weight:var(--talos-status-font-weight, 600);line-height:1;text-decoration:none;letter-spacing:.015em;-webkit-user-select:none;user-select:none;transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease;--_status-color: var(--talos-status-color, var(--talos-status-pending-color, #d97706));--_status-bg: var(--talos-status-bg, var(--talos-status-pending-bg, #fffbeb));--_status-border: var(--talos-status-border, var(--talos-status-pending-border, #fde68a));--_status-solid-bg: var(--talos-status-solid-bg, var(--talos-status-pending-solid-bg, #d97706));--_status-solid-text: var(--talos-status-solid-text, var(--talos-status-pending-solid-text, #ffffff));--_status-dot-color: var(--talos-status-dot-color, var(--_status-color))}:host.talos-status-tag--new{--_status-color: var(--talos-status-color, var(--talos-status-new-color, #0284c7));--_status-bg: var(--talos-status-bg, var(--talos-status-new-bg, #f0f9ff));--_status-border: var(--talos-status-border, var(--talos-status-new-border, #bae6fd));--_status-solid-bg: var(--talos-status-solid-bg, var(--talos-status-new-solid-bg, #0284c7));--_status-solid-text: var(--talos-status-solid-text, var(--talos-status-new-solid-text, #ffffff));--_status-dot-color: var(--talos-status-dot-color, var(--_status-color))}:host.talos-status-tag--pending{--_status-color: var(--talos-status-color, var(--talos-status-pending-color, #d97706));--_status-bg: var(--talos-status-bg, var(--talos-status-pending-bg, #fffbeb));--_status-border: var(--talos-status-border, var(--talos-status-pending-border, #fde68a));--_status-solid-bg: var(--talos-status-solid-bg, var(--talos-status-pending-solid-bg, #d97706));--_status-solid-text: var(--talos-status-solid-text, var(--talos-status-pending-solid-text, #ffffff));--_status-dot-color: var(--talos-status-dot-color, var(--_status-color))}:host.talos-status-tag--inprogress{--_status-color: var(--talos-status-color, var(--talos-status-inprogress-color, #2563eb));--_status-bg: var(--talos-status-bg, var(--talos-status-inprogress-bg, #eff6ff));--_status-border: var(--talos-status-border, var(--talos-status-inprogress-border, #bfdbfe));--_status-solid-bg: var(--talos-status-solid-bg, var(--talos-status-inprogress-solid-bg, #2563eb));--_status-solid-text: var(--talos-status-solid-text, var(--talos-status-inprogress-solid-text, #ffffff));--_status-dot-color: var(--talos-status-dot-color, var(--_status-color))}:host.talos-status-tag--paused{--_status-color: var(--talos-status-color, var(--talos-status-paused-color, #b45309));--_status-bg: var(--talos-status-bg, var(--talos-status-paused-bg, #fff7ed));--_status-border: var(--talos-status-border, var(--talos-status-paused-border, #fed7aa));--_status-solid-bg: var(--talos-status-solid-bg, var(--talos-status-paused-solid-bg, #ea580c));--_status-solid-text: var(--talos-status-solid-text, var(--talos-status-paused-solid-text, #ffffff));--_status-dot-color: var(--talos-status-dot-color, var(--_status-color))}:host.talos-status-tag--retrying{--_status-color: var(--talos-status-color, var(--talos-status-retrying-color, #c2410c));--_status-bg: var(--talos-status-bg, var(--talos-status-retrying-bg, #fff7ed));--_status-border: var(--talos-status-border, var(--talos-status-retrying-border, #ffedd5));--_status-solid-bg: var(--talos-status-solid-bg, var(--talos-status-retrying-solid-bg, #ea580c));--_status-solid-text: var(--talos-status-solid-text, var(--talos-status-retrying-solid-text, #ffffff));--_status-dot-color: var(--talos-status-dot-color, var(--_status-color))}:host.talos-status-tag--skipped{--_status-color: var(--talos-status-color, var(--talos-status-skipped-color, #475569));--_status-bg: var(--talos-status-bg, var(--talos-status-skipped-bg, #f8fafc));--_status-border: var(--talos-status-border, var(--talos-status-skipped-border, #e2e8f0));--_status-solid-bg: var(--talos-status-solid-bg, var(--talos-status-skipped-solid-bg, #64748b));--_status-solid-text: var(--talos-status-solid-text, var(--talos-status-skipped-solid-text, #ffffff));--_status-dot-color: var(--talos-status-dot-color, var(--_status-color))}:host.talos-status-tag--success{--_status-color: var(--talos-status-color, var(--talos-status-success-color, #16a34a));--_status-bg: var(--talos-status-bg, var(--talos-status-success-bg, #f0fdf4));--_status-border: var(--talos-status-border, var(--talos-status-success-border, #bbf7d0));--_status-solid-bg: var(--talos-status-solid-bg, var(--talos-status-success-solid-bg, #16a34a));--_status-solid-text: var(--talos-status-solid-text, var(--talos-status-success-solid-text, #ffffff));--_status-dot-color: var(--talos-status-dot-color, var(--_status-color))}:host.talos-status-tag--completed{--_status-color: var(--talos-status-color, var(--talos-status-completed-color, #0f766e));--_status-bg: var(--talos-status-bg, var(--talos-status-completed-bg, #f0fdfa));--_status-border: var(--talos-status-border, var(--talos-status-completed-border, #99f6e4));--_status-solid-bg: var(--talos-status-solid-bg, var(--talos-status-completed-solid-bg, #0d9488));--_status-solid-text: var(--talos-status-solid-text, var(--talos-status-completed-solid-text, #ffffff));--_status-dot-color: var(--talos-status-dot-color, var(--_status-color))}:host.talos-status-tag--error{--_status-color: var(--talos-status-color, var(--talos-status-error-color, #dc2626));--_status-bg: var(--talos-status-bg, var(--talos-status-error-bg, #fef2f2));--_status-border: var(--talos-status-border, var(--talos-status-error-border, #fecaca));--_status-solid-bg: var(--talos-status-solid-bg, var(--talos-status-error-solid-bg, #dc2626));--_status-solid-text: var(--talos-status-solid-text, var(--talos-status-error-solid-text, #ffffff));--_status-dot-color: var(--talos-status-dot-color, var(--_status-color))}:host.talos-status-tag--terminated{--_status-color: var(--talos-status-color, var(--talos-status-terminated-color, #334155));--_status-bg: var(--talos-status-bg, var(--talos-status-terminated-bg, #f1f5f9));--_status-border: var(--talos-status-border, var(--talos-status-terminated-border, #cbd5e1));--_status-solid-bg: var(--talos-status-solid-bg, var(--talos-status-terminated-solid-bg, #334155));--_status-solid-text: var(--talos-status-solid-text, var(--talos-status-terminated-solid-text, #ffffff));--_status-dot-color: var(--talos-status-dot-color, var(--_status-color))}:host.talos-status-tag--expired{--_status-color: var(--talos-status-color, var(--talos-status-expired-color, #7e22ce));--_status-bg: var(--talos-status-bg, var(--talos-status-expired-bg, #faf5ff));--_status-border: var(--talos-status-border, var(--talos-status-expired-border, #e9d5ff));--_status-solid-bg: var(--talos-status-solid-bg, var(--talos-status-expired-solid-bg, #7e22ce));--_status-solid-text: var(--talos-status-solid-text, var(--talos-status-expired-solid-text, #ffffff));--_status-dot-color: var(--talos-status-dot-color, var(--_status-color))}:host.talos-status-tag--subtle{color:var(--_status-color);background-color:var(--_status-bg);border:1px solid var(--_status-border)}:host.talos-status-tag--solid{color:var(--_status-solid-text);background-color:var(--_status-solid-bg);border:1px solid transparent;box-shadow:0 1px 2px #00000014}:host.talos-status-tag--outline{color:var(--_status-color);background-color:transparent;border:1px solid var(--_status-color)}:host.talos-status-tag--dot{color:var(--talos-text-color, #0f172a);background-color:transparent;border:1px solid transparent;padding-left:0;padding-right:0}:host.talos-status-tag--xs{height:1.25rem;font-size:.6875rem;padding:0 .375rem;gap:.25rem}:host.talos-status-tag--xs.talos-status-tag--icon-only{width:1.25rem;padding:0}:host.talos-status-tag--xs .talos-status-tag__dot{width:6px;height:6px}:host.talos-status-tag--sm{height:1.5rem;font-size:.75rem;padding:0 .5rem;gap:.3125rem}:host.talos-status-tag--sm.talos-status-tag--icon-only{width:1.5rem;padding:0}:host.talos-status-tag--sm .talos-status-tag__dot{width:7px;height:7px}:host.talos-status-tag--md{height:1.75rem;font-size:.8125rem;padding:0 .625rem;gap:.375rem}:host.talos-status-tag--md.talos-status-tag--icon-only{width:1.75rem;padding:0}:host.talos-status-tag--md .talos-status-tag__dot{width:8px;height:8px}:host.talos-status-tag--lg{height:2rem;font-size:.875rem;padding:0 .75rem;gap:.4375rem}:host.talos-status-tag--lg.talos-status-tag--icon-only{width:2rem;padding:0}:host.talos-status-tag--lg .talos-status-tag__dot{width:10px;height:10px}:host.talos-status-tag--rounded{border-radius:var(--talos-status-radius-rounded, .375rem)}:host.talos-status-tag--pill{border-radius:var(--talos-status-radius-pill, 9999px)}:host.talos-status-tag--square{border-radius:var(--talos-status-radius-square, .25rem)}:host.talos-status-tag--pulse:not(.talos-status-tag--dot){animation:talos-status-pulse 2.2s cubic-bezier(.4,0,.6,1) infinite}.talos-status-tag__icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1}.talos-status-tag__icon--spin{animation:talos-status-spin 1.4s linear infinite}.talos-status-tag__icon--pulse{animation:talos-status-icon-pulse 1.8s ease-in-out infinite}.talos-status-tag__label{display:inline-flex;align-items:center;line-height:1}.talos-status-tag__dot{position:relative;display:inline-block;border-radius:9999px;background-color:var(--_status-dot-color);flex-shrink:0}.talos-status-tag__dot .talos-status-tag__dot-ping{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:9999px;background-color:var(--_status-dot-color);opacity:.75;animation:talos-status-ping 1.5s cubic-bezier(0,0,.2,1) infinite}.talos-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@keyframes talos-status-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes talos-status-pulse{0%,to{opacity:1}50%{opacity:.65}}@keyframes talos-status-icon-pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.15);opacity:.8}}@keyframes talos-status-ping{75%,to{transform:scale(2.2);opacity:0}}:root[data-theme=dark] :host.talos-status-tag--new,:root.dark :host.talos-status-tag--new,[data-theme=dark] :host.talos-status-tag--new,[data-mode=dark] :host.talos-status-tag--new,.dark :host.talos-status-tag--new,.dark-theme :host.talos-status-tag--new{--_status-color: var(--talos-status-new-color, #38bdf8);--_status-bg: var(--talos-status-new-bg, rgba(2, 132, 199, .18));--_status-border: var(--talos-status-new-border, rgba(56, 189, 248, .35));--_status-solid-bg: var(--talos-status-new-solid-bg, #0284c7)}:root[data-theme=dark] :host.talos-status-tag--pending,:root.dark :host.talos-status-tag--pending,[data-theme=dark] :host.talos-status-tag--pending,[data-mode=dark] :host.talos-status-tag--pending,.dark :host.talos-status-tag--pending,.dark-theme :host.talos-status-tag--pending{--_status-color: var(--talos-status-pending-color, #fbbf24);--_status-bg: var(--talos-status-pending-bg, rgba(217, 119, 6, .18));--_status-border: var(--talos-status-pending-border, rgba(251, 191, 36, .35));--_status-solid-bg: var(--talos-status-pending-solid-bg, #d97706)}:root[data-theme=dark] :host.talos-status-tag--inprogress,:root.dark :host.talos-status-tag--inprogress,[data-theme=dark] :host.talos-status-tag--inprogress,[data-mode=dark] :host.talos-status-tag--inprogress,.dark :host.talos-status-tag--inprogress,.dark-theme :host.talos-status-tag--inprogress{--_status-color: var(--talos-status-inprogress-color, #60a5fa);--_status-bg: var(--talos-status-inprogress-bg, rgba(37, 99, 235, .2));--_status-border: var(--talos-status-inprogress-border, rgba(96, 165, 250, .35));--_status-solid-bg: var(--talos-status-inprogress-solid-bg, #2563eb)}:root[data-theme=dark] :host.talos-status-tag--paused,:root[data-theme=dark] :host.talos-status-tag--retrying,:root.dark :host.talos-status-tag--paused,:root.dark :host.talos-status-tag--retrying,[data-theme=dark] :host.talos-status-tag--paused,[data-theme=dark] :host.talos-status-tag--retrying,[data-mode=dark] :host.talos-status-tag--paused,[data-mode=dark] :host.talos-status-tag--retrying,.dark :host.talos-status-tag--paused,.dark :host.talos-status-tag--retrying,.dark-theme :host.talos-status-tag--paused,.dark-theme :host.talos-status-tag--retrying{--_status-color: var(--talos-status-paused-color, #fb923c);--_status-bg: var(--talos-status-paused-bg, rgba(194, 65, 12, .18));--_status-border: var(--talos-status-paused-border, rgba(251, 146, 60, .35));--_status-solid-bg: var(--talos-status-paused-solid-bg, #ea580c)}:root[data-theme=dark] :host.talos-status-tag--skipped,:root.dark :host.talos-status-tag--skipped,[data-theme=dark] :host.talos-status-tag--skipped,[data-mode=dark] :host.talos-status-tag--skipped,.dark :host.talos-status-tag--skipped,.dark-theme :host.talos-status-tag--skipped{--_status-color: var(--talos-status-skipped-color, #94a3b8);--_status-bg: var(--talos-status-skipped-bg, rgba(100, 116, 139, .18));--_status-border: var(--talos-status-skipped-border, rgba(148, 163, 184, .3));--_status-solid-bg: var(--talos-status-skipped-solid-bg, #475569)}:root[data-theme=dark] :host.talos-status-tag--success,:root.dark :host.talos-status-tag--success,[data-theme=dark] :host.talos-status-tag--success,[data-mode=dark] :host.talos-status-tag--success,.dark :host.talos-status-tag--success,.dark-theme :host.talos-status-tag--success{--_status-color: var(--talos-status-success-color, #4ade80);--_status-bg: var(--talos-status-success-bg, rgba(22, 163, 74, .18));--_status-border: var(--talos-status-success-border, rgba(74, 222, 128, .35));--_status-solid-bg: var(--talos-status-success-solid-bg, #16a34a)}:root[data-theme=dark] :host.talos-status-tag--completed,:root.dark :host.talos-status-tag--completed,[data-theme=dark] :host.talos-status-tag--completed,[data-mode=dark] :host.talos-status-tag--completed,.dark :host.talos-status-tag--completed,.dark-theme :host.talos-status-tag--completed{--_status-color: var(--talos-status-completed-color, #2dd4bf);--_status-bg: var(--talos-status-completed-bg, rgba(15, 118, 110, .18));--_status-border: var(--talos-status-completed-border, rgba(45, 212, 191, .35));--_status-solid-bg: var(--talos-status-completed-solid-bg, #0d9488)}:root[data-theme=dark] :host.talos-status-tag--error,:root.dark :host.talos-status-tag--error,[data-theme=dark] :host.talos-status-tag--error,[data-mode=dark] :host.talos-status-tag--error,.dark :host.talos-status-tag--error,.dark-theme :host.talos-status-tag--error{--_status-color: var(--talos-status-error-color, #f87171);--_status-bg: var(--talos-status-error-bg, rgba(220, 38, 38, .18));--_status-border: var(--talos-status-error-border, rgba(248, 113, 113, .35));--_status-solid-bg: var(--talos-status-error-solid-bg, #dc2626)}:root[data-theme=dark] :host.talos-status-tag--terminated,:root.dark :host.talos-status-tag--terminated,[data-theme=dark] :host.talos-status-tag--terminated,[data-mode=dark] :host.talos-status-tag--terminated,.dark :host.talos-status-tag--terminated,.dark-theme :host.talos-status-tag--terminated{--_status-color: var(--talos-status-terminated-color, #cbd5e1);--_status-bg: var(--talos-status-terminated-bg, rgba(51, 65, 85, .3));--_status-border: var(--talos-status-terminated-border, rgba(203, 213, 225, .3));--_status-solid-bg: var(--talos-status-terminated-solid-bg, #334155)}:root[data-theme=dark] :host.talos-status-tag--expired,:root.dark :host.talos-status-tag--expired,[data-theme=dark] :host.talos-status-tag--expired,[data-mode=dark] :host.talos-status-tag--expired,.dark :host.talos-status-tag--expired,.dark-theme :host.talos-status-tag--expired{--_status-color: var(--talos-status-expired-color, #c084fc);--_status-bg: var(--talos-status-expired-bg, rgba(126, 34, 206, .2));--_status-border: var(--talos-status-expired-border, rgba(192, 132, 252, .35));--_status-solid-bg: var(--talos-status-expired-solid-bg, #7e22ce)}:root[data-theme=dark] :host.talos-status-tag--dot,:root.dark :host.talos-status-tag--dot,[data-theme=dark] :host.talos-status-tag--dot,[data-mode=dark] :host.talos-status-tag--dot,.dark :host.talos-status-tag--dot,.dark-theme :host.talos-status-tag--dot{color:var(--talos-text-color, #f9fafb)}\n"] }]
+        }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], pulse: [{ type: i0.Input, args: [{ isSignal: true, alias: "pulse", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+class TalosStatusTagModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosStatusTagModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: TalosStatusTagModule, imports: [TalosStatusTagComponent], exports: [TalosStatusTagComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosStatusTagModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosStatusTagModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [TalosStatusTagComponent],
+                    exports: [TalosStatusTagComponent]
+                }]
+        }] });
+
+class TalosGridStatusCellComponent {
+    row = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []));
+    column = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []));
+    rawValue = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "rawValue" }] : /* istanbul ignore next */ []));
+    value = computed(() => {
+        const directVal = this.rawValue();
+        if (directVal !== undefined) {
+            return directVal;
+        }
+        const r = this.row();
+        const col = this.column();
+        if (!r || !col?.field)
+            return '';
+        return r[col.field];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    status = computed(() => {
+        const val = this.value();
+        const r = this.row();
+        const config = this.column().statusConfig;
+        if (config?.statusMap) {
+            return config.statusMap(val, r);
+        }
+        return (val ?? 'PENDING');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    label = computed(() => {
+        const val = this.value();
+        const r = this.row();
+        const col = this.column();
+        if (col.formatter) {
+            return col.formatter(val, r);
+        }
+        return String(val ?? '');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    variant = computed(() => {
+        return this.column().statusConfig?.variant ?? 'subtle';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = computed(() => {
+        return this.column().statusConfig?.size ?? 'sm';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    shape = computed(() => {
+        return this.column().statusConfig?.shape ?? 'rounded';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
+    showIcon = computed(() => {
+        return this.column().statusConfig?.showIcon ?? true;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showIcon" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosGridStatusCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: TalosGridStatusCellComponent, isStandalone: true, selector: "talos-grid-status-cell", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, rawValue: { classPropertyName: "rawValue", publicName: "rawValue", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "talos-grid-status-cell" }, ngImport: i0, template: `
+    <talos-status-tag
+      [status]="status()"
+      [variant]="variant()"
+      [size]="size()"
+      [shape]="shape()"
+      [showIcon]="showIcon()"
+    >
+      {{ label() }}
+    </talos-status-tag>
+  `, isInline: true, dependencies: [{ kind: "component", type: TalosStatusTagComponent, selector: "talos-status-tag, [talosStatusTag]", inputs: ["status", "label", "variant", "size", "shape", "showIcon", "icon", "iconOnly", "pulse", "ariaLabel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosGridStatusCellComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'talos-grid-status-cell',
+                    imports: [TalosStatusTagComponent],
+                    template: `
+    <talos-status-tag
+      [status]="status()"
+      [variant]="variant()"
+      [size]="size()"
+      [shape]="shape()"
+      [showIcon]="showIcon()"
+    >
+      {{ label() }}
+    </talos-status-tag>
+  `,
+                    host: {
+                        class: 'talos-grid-status-cell',
+                    },
+                }]
+        }], propDecorators: { row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: true }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], rawValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "rawValue", required: false }] }] } });
+
+class TalosGridActionsCellComponent {
+    row = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []));
+    rowIndex = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowIndex" }] : /* istanbul ignore next */ []));
+    actions = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
+    actionClick = output();
+    visibleActions() {
+        const r = this.row();
+        return (this.actions() || []).filter((a) => {
+            if (typeof a.hidden === 'function') {
+                return !a.hidden(r);
+            }
+            return !a.hidden;
+        });
+    }
+    isActionDisabled(action) {
+        if (typeof action.disabled === 'function') {
+            return action.disabled(this.row());
+        }
+        return !!action.disabled;
+    }
+    getActionTooltip(action) {
+        if (typeof action.tooltip === 'function') {
+            return action.tooltip(this.row());
+        }
+        return action.tooltip || '';
+    }
+    onActionClick(action, event) {
+        event.stopPropagation();
+        if (this.isActionDisabled(action))
+            return;
+        if (action.onClick) {
+            action.onClick(this.row(), this.rowIndex(), event);
+        }
+        this.actionClick.emit({
+            actionId: action.id,
+            row: this.row(),
+            index: this.rowIndex(),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosGridActionsCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TalosGridActionsCellComponent, isStandalone: true, selector: "talos-grid-actions-cell", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClick: "actionClick" }, host: { classAttribute: "talos-grid-actions-cell" }, ngImport: i0, template: `
+    <div class="talos-grid-actions-wrapper">
+      @for (action of visibleActions(); track action.id) {
+        <button
+          talosButton
+          type="button"
+          [variant]="action.variant ?? 'ghost'"
+          [size]="action.size ?? 'xs'"
+          [iconOnly]="action.iconOnly ?? !action.label"
+          [disabled]="isActionDisabled(action)"
+          [talosTooltip]="getActionTooltip(action)"
+          [tooltipDisabled]="!getActionTooltip(action)"
+          (click)="onActionClick(action, $event)"
+        >
+          @if (action.icon) {
+            <ng-container *ngComponentOutlet="action.icon" />
+          }
+          @if (action.label && !action.iconOnly) {
+            <span class="action-label">{{ action.label }}</span>
+          }
+        </button>
+      }
+    </div>
+  `, isInline: true, styles: [".talos-grid-actions-wrapper{display:inline-flex;align-items:center;gap:4px;flex-wrap:nowrap}.action-label{margin-left:2px;font-size:11.5px;font-weight:500}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: TalosButtonDirective, selector: "button[talosButton], a[talosButton], button[talos-btn], a[talos-btn]", inputs: ["variant", "size", "iconOnly", "fullWidth", "pill", "loading", "disabled", "animation", "spinning", "popping", "feedback"] }, { kind: "directive", type: TalosTooltipDirective, selector: "[talosTooltip], [tooltip]", inputs: ["talosTooltip", "tooltip", "tooltipPosition", "tooltipDisabled"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosGridActionsCellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-grid-actions-cell', imports: [NgComponentOutlet, TalosButtonDirective, TalosTooltipDirective], template: `
+    <div class="talos-grid-actions-wrapper">
+      @for (action of visibleActions(); track action.id) {
+        <button
+          talosButton
+          type="button"
+          [variant]="action.variant ?? 'ghost'"
+          [size]="action.size ?? 'xs'"
+          [iconOnly]="action.iconOnly ?? !action.label"
+          [disabled]="isActionDisabled(action)"
+          [talosTooltip]="getActionTooltip(action)"
+          [tooltipDisabled]="!getActionTooltip(action)"
+          (click)="onActionClick(action, $event)"
+        >
+          @if (action.icon) {
+            <ng-container *ngComponentOutlet="action.icon" />
+          }
+          @if (action.label && !action.iconOnly) {
+            <span class="action-label">{{ action.label }}</span>
+          }
+        </button>
+      }
+    </div>
+  `, host: {
+                        class: 'talos-grid-actions-cell',
+                    }, styles: [".talos-grid-actions-wrapper{display:inline-flex;align-items:center;gap:4px;flex-wrap:nowrap}.action-label{margin-left:2px;font-size:11.5px;font-weight:500}\n"] }]
+        }], propDecorators: { row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: true }] }], rowIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIndex", required: true }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }] } });
+
+class TalosGridFilterDialogComponent {
+    column = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []));
+    distinctValues = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "distinctValues" }] : /* istanbul ignore next */ []));
+    currentFilter = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentFilter" }] : /* istanbul ignore next */ []));
+    align = input('left', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    filterApplied = output();
+    filterCleared = output();
+    closed = output();
+    // Template icons
+    searchIcon = LucideSearch;
+    xIcon = LucideX;
+    // Filter mode derived from column:
+    // Mode A: text, select, status
+    // Mode B: number, date
+    filterMode = computed(() => {
+        const col = this.column();
+        if (col.filterMode)
+            return col.filterMode;
+        if (col.type === 'number' ||
+            col.sortType === 'number' ||
+            col.type === 'date' ||
+            col.sortType === 'date') {
+            return 'condition';
+        }
+        return 'set';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterMode" }] : /* istanbul ignore next */ []));
+    // Mode A local state
+    searchTerm = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
+    selectedSet = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedSet" }] : /* istanbul ignore next */ []));
+    // Mode B local state
+    selectedOperator = signal('eq', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedOperator" }] : /* istanbul ignore next */ []));
+    filterVal = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterVal" }] : /* istanbul ignore next */ []));
+    filterVal2 = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterVal2" }] : /* istanbul ignore next */ []));
+    operatorOptions = computed(() => {
+        if (this.isDateField()) {
+            return [
+                { value: 'eq', label: 'Is on' },
+                { value: 'neq', label: 'Is not on' },
+                { value: 'gt', label: 'After' },
+                { value: 'gte', label: 'On or after' },
+                { value: 'lt', label: 'Before' },
+                { value: 'lte', label: 'On or before' },
+                { value: 'between', label: 'Between' },
+                { value: 'blank', label: 'Blank' },
+                { value: 'notBlank', label: 'Not blank' },
+            ];
+        }
+        if (this.isNumberField()) {
+            return [
+                { value: 'eq', label: 'Equals' },
+                { value: 'neq', label: 'Does not equal' },
+                { value: 'gt', label: 'Greater than' },
+                { value: 'gte', label: 'Greater than or equal to' },
+                { value: 'lt', label: 'Less than' },
+                { value: 'lte', label: 'Less than or equal to' },
+                { value: 'between', label: 'Between' },
+                { value: 'blank', label: 'Blank' },
+                { value: 'notBlank', label: 'Not blank' },
+            ];
+        }
+        return [
+            { value: 'contains', label: 'Contains' },
+            { value: 'eq', label: 'Equals' },
+            { value: 'neq', label: 'Does not equal' },
+            { value: 'startsWith', label: 'Starts with' },
+            { value: 'endsWith', label: 'Ends with' },
+            { value: 'blank', label: 'Blank' },
+            { value: 'notBlank', label: 'Not blank' },
+        ];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "operatorOptions" }] : /* istanbul ignore next */ []));
+    ngOnInit() {
+        this.initFromCurrentFilter();
+    }
+    initFromCurrentFilter() {
+        const cf = this.currentFilter();
+        const all = this.distinctValues();
+        if (this.filterMode() === 'set') {
+            if (cf && cf.mode === 'set' && cf.selectedValues) {
+                this.selectedSet.set(new Set(cf.selectedValues));
+            }
+            else {
+                // Default: all selected
+                this.selectedSet.set(new Set(all));
+            }
+        }
+        else {
+            if (cf && cf.mode === 'condition') {
+                this.selectedOperator.set(cf.operator || 'eq');
+                this.filterVal.set(cf.value !== undefined && cf.value !== null ? String(cf.value) : '');
+                this.filterVal2.set(cf.secondValue !== undefined && cf.secondValue !== null ? String(cf.secondValue) : '');
+            }
+            else {
+                const defaultOp = this.isDateField() || this.isNumberField() ? 'eq' : 'contains';
+                this.selectedOperator.set(defaultOp);
+                this.filterVal.set('');
+                this.filterVal2.set('');
+            }
+        }
+    }
+    isDateField() {
+        const col = this.column();
+        return col.type === 'date' || col.sortType === 'date';
+    }
+    isNumberField() {
+        const col = this.column();
+        return col.type === 'number' || col.sortType === 'number';
+    }
+    onDateFilterValChange(val) {
+        if (!val) {
+            this.filterVal.set('');
+        }
+        else if (val instanceof Date) {
+            const y = val.getFullYear();
+            const m = String(val.getMonth() + 1).padStart(2, '0');
+            const d = String(val.getDate()).padStart(2, '0');
+            this.filterVal.set(`${y}-${m}-${d}`);
+        }
+        else {
+            this.filterVal.set(String(val));
+        }
+    }
+    onDateFilterVal2Change(val) {
+        if (!val) {
+            this.filterVal2.set('');
+        }
+        else if (val instanceof Date) {
+            const y = val.getFullYear();
+            const m = String(val.getMonth() + 1).padStart(2, '0');
+            const d = String(val.getDate()).padStart(2, '0');
+            this.filterVal2.set(`${y}-${m}-${d}`);
+        }
+        else {
+            this.filterVal2.set(String(val));
+        }
+    }
+    // Mode A Helpers
+    visibleDistinctValues = computed(() => {
+        const term = this.searchTerm().toLowerCase().trim();
+        const all = this.distinctValues();
+        if (!term)
+            return all;
+        return all.filter((v) => (v || '').toLowerCase().includes(term));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleDistinctValues" }] : /* istanbul ignore next */ []));
+    isAllSelected() {
+        const visible = this.visibleDistinctValues();
+        if (visible.length === 0)
+            return false;
+        const sel = this.selectedSet();
+        return visible.every((v) => sel.has(v));
+    }
+    isIndeterminate() {
+        const visible = this.visibleDistinctValues();
+        if (visible.length === 0)
+            return false;
+        const sel = this.selectedSet();
+        const count = visible.filter((v) => sel.has(v)).length;
+        return count > 0 && count < visible.length;
+    }
+    toggleSelectAll(checkedOrEvent) {
+        const checked = typeof checkedOrEvent === 'boolean'
+            ? checkedOrEvent
+            : checkedOrEvent.target.checked;
+        const sel = new Set(this.selectedSet());
+        const visible = this.visibleDistinctValues();
+        if (checked) {
+            visible.forEach((v) => sel.add(v));
+        }
+        else {
+            visible.forEach((v) => sel.delete(v));
+        }
+        this.selectedSet.set(sel);
+    }
+    isValSelected(val) {
+        return this.selectedSet().has(val);
+    }
+    toggleVal(val, checkedOrEvent) {
+        const checked = typeof checkedOrEvent === 'boolean'
+            ? checkedOrEvent
+            : checkedOrEvent.target.checked;
+        const sel = new Set(this.selectedSet());
+        if (checked) {
+            sel.add(val);
+        }
+        else {
+            sel.delete(val);
+        }
+        this.selectedSet.set(sel);
+    }
+    onSearchEnter() {
+        const term = this.searchTerm().trim();
+        if (term) {
+            const visible = this.visibleDistinctValues();
+            this.selectedSet.set(new Set(visible));
+        }
+        this.applySetFilter();
+    }
+    // Apply Actions
+    applyFilter() {
+        if (this.filterMode() === 'set') {
+            this.applySetFilter();
+        }
+        else {
+            this.applyConditionFilter();
+        }
+    }
+    applySetFilter() {
+        const field = this.column().field;
+        const all = this.distinctValues();
+        let sel = Array.from(this.selectedSet());
+        // If search term is present and user hadn't changed individual checkboxes (still all selected),
+        // narrow selection to the visible search matches
+        const term = this.searchTerm().trim();
+        if (term && sel.length === all.length) {
+            sel = this.visibleDistinctValues();
+            this.selectedSet.set(new Set(sel));
+        }
+        // If all distinct values are selected and no search term, it's effectively no filter
+        if (sel.length === all.length && all.every((v) => this.selectedSet().has(v))) {
+            this.clearFilter();
+            return;
+        }
+        this.filterApplied.emit({
+            field,
+            mode: 'set',
+            selectedValues: sel,
+        });
+        this.closed.emit();
+    }
+    applyConditionFilter() {
+        const field = this.column().field;
+        const op = this.selectedOperator();
+        const val = this.filterVal().trim();
+        const val2 = this.filterVal2().trim();
+        if (op !== 'blank' && op !== 'notBlank' && val === '') {
+            this.clearFilter();
+            return;
+        }
+        this.filterApplied.emit({
+            field,
+            mode: 'condition',
+            operator: op,
+            value: val,
+            secondValue: op === 'between' ? val2 : undefined,
+        });
+        this.closed.emit();
+    }
+    clearFilter() {
+        this.filterCleared.emit();
+        this.closed.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosGridFilterDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TalosGridFilterDialogComponent, isStandalone: true, selector: "talos-grid-filter-dialog", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, distinctValues: { classPropertyName: "distinctValues", publicName: "distinctValues", isSignal: true, isRequired: false, transformFunction: null }, currentFilter: { classPropertyName: "currentFilter", publicName: "currentFilter", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterApplied: "filterApplied", filterCleared: "filterCleared", closed: "closed" }, host: { listeners: { "keydown.escape": "closed.emit()" }, properties: { "class.align-right": "align() === 'right'" } }, ngImport: i0, template: `
+    <div class="filter-dialog-container" (click)="$event.stopPropagation()">
+      @if (filterMode() === 'set') {
+        <!-- MODE A: Searchable Checkbox List (for text / select / status) -->
+        <div class="mode-a-wrapper">
+          <!-- Search input -->
+          <div class="search-input-wrapper">
+            <span class="search-icon">
+              <ng-container *ngComponentOutlet="searchIcon" />
+            </span>
+            <input
+              talosInput
+              size="sm"
+              type="text"
+              class="filter-search-input"
+              placeholder="Search..."
+              [ngModel]="searchTerm()"
+              (ngModelChange)="searchTerm.set($event)"
+              (keydown.enter)="onSearchEnter()"
+              autofocus
+            />
+            @if (searchTerm()) {
+              <button type="button" class="clear-search-btn" (click)="searchTerm.set('')">
+                <ng-container *ngComponentOutlet="xIcon" />
+              </button>
+            }
+          </div>
+
+          <!-- Checkbox List -->
+          <div class="checkbox-list-wrapper">
+            <!-- (Select All) item -->
+            <div class="checkbox-item select-all-item">
+              <talos-checkbox
+                size="sm"
+                [checked]="isAllSelected()"
+                [indeterminate]="isIndeterminate()"
+                (checkedChange)="toggleSelectAll($event)"
+              >
+                {{ searchTerm() ? '(Select All Matches)' : '(Select All)' }}
+              </talos-checkbox>
+            </div>
+
+            <!-- Distinct item checkboxes -->
+            @for (val of visibleDistinctValues(); track val) {
+              <div class="checkbox-item">
+                <talos-checkbox
+                  size="sm"
+                  [checked]="isValSelected(val)"
+                  (checkedChange)="toggleVal(val, $event)"
+                >
+                  {{ val || '(Blank)' }}
+                </talos-checkbox>
+              </div>
+            }
+
+            @if (visibleDistinctValues().length === 0) {
+              <div class="no-matches-msg">No matching values</div>
+            }
+          </div>
+        </div>
+      } @else {
+        <!-- MODE B: Operator Dropdown & Filter Input (for numbers / dates) -->
+        <div class="mode-b-wrapper">
+          <!-- Operator Dropdown -->
+          <div class="operator-dropdown-wrapper">
+            <talos-select-input
+              size="sm"
+              [ngModel]="selectedOperator()"
+              (ngModelChange)="selectedOperator.set($event)"
+            >
+              @for (op of operatorOptions(); track op.value) {
+                <talos-option [value]="op.value" [label]="op.label">{{ op.label }}</talos-option>
+              }
+            </talos-select-input>
+          </div>
+
+          <!-- Filter Value Input -->
+          @if (selectedOperator() !== 'blank' && selectedOperator() !== 'notBlank') {
+            @if (isDateField()) {
+              <div class="date-picker-wrapper" (keydown.enter)="applyConditionFilter()">
+                <talos-date-picker
+                  [ngModel]="filterVal()"
+                  (ngModelChange)="onDateFilterValChange($event)"
+                  size="sm"
+                  placeholder="Select date"
+                />
+              </div>
+            } @else {
+              <div class="search-input-wrapper">
+                <span class="search-icon">
+                  <ng-container *ngComponentOutlet="searchIcon" />
+                </span>
+                <input
+                  talosInput
+                  size="sm"
+                  type="text"
+                  class="filter-search-input"
+                  placeholder="Filter..."
+                  [ngModel]="filterVal()"
+                  (ngModelChange)="filterVal.set($event)"
+                  (keydown.enter)="applyConditionFilter()"
+                  autofocus
+                />
+              </div>
+            }
+
+            <!-- Second input for Between -->
+            @if (selectedOperator() === 'between') {
+              @if (isDateField()) {
+                <div class="date-picker-wrapper" style="margin-top: 6px;" (keydown.enter)="applyConditionFilter()">
+                  <talos-date-picker
+                    [ngModel]="filterVal2()"
+                    (ngModelChange)="onDateFilterVal2Change($event)"
+                    size="sm"
+                    placeholder="And max date"
+                  />
+                </div>
+              } @else {
+                <div class="search-input-wrapper" style="margin-top: 6px;">
+                  <span class="search-icon">
+                    <ng-container *ngComponentOutlet="searchIcon" />
+                  </span>
+                  <input
+                    talosInput
+                    size="sm"
+                    type="text"
+                    class="filter-search-input"
+                    placeholder="And max value..."
+                    [ngModel]="filterVal2()"
+                    (ngModelChange)="filterVal2.set($event)"
+                    (keydown.enter)="applyConditionFilter()"
+                  />
+                </div>
+              }
+            }
+          }
+        </div>
+      }
+
+      <!-- Dialog Footer -->
+      <div class="dialog-footer">
+        <button talosButton variant="ghost" size="sm" type="button" (click)="clearFilter()">
+          Clear
+        </button>
+        <button talosButton variant="primary" size="sm" type="button" (click)="applyFilter()">
+          Apply
+        </button>
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:block;font-family:var(--talos-font-sans, system-ui, sans-serif);font-size:13px}.filter-dialog-container{background:var(--talos-dropdown-bg, var(--talos-bg-surface, #ffffff));color:var(--talos-text-primary, #0f172a);border:1px solid var(--talos-border-default, #cbd5e1);border-radius:var(--talos-radius-md, 8px);box-shadow:0 12px 28px -4px #00000040,0 4px 10px #0000001a;width:240px;padding:10px;box-sizing:border-box;-webkit-user-select:none;user-select:none}.date-picker-wrapper{width:100%}.date-picker-wrapper talos-date-picker{display:block;width:100%}.search-input-wrapper{position:relative;display:flex;align-items:center;width:100%}.search-icon{position:absolute;left:9px;width:14px;height:14px;opacity:.6;display:flex;align-items:center;justify-content:center;pointer-events:none;color:var(--talos-text-muted, #94a3b8)}.search-icon ::ng-deep svg,.search-icon svg{width:13px;height:13px;display:block}.filter-search-input{width:100%;height:32px;padding:0 24px 0 28px;background:var(--talos-bg-subtle, #f8fafc);border:1px solid var(--talos-border-default, #cbd5e1);border-radius:var(--talos-radius-sm, 6px);color:var(--talos-text-primary, #0f172a);font-size:13px;outline:none;box-sizing:border-box;transition:border-color .15s,box-shadow .15s}.filter-search-input::placeholder{color:var(--talos-text-muted, #94a3b8)}.filter-search-input:focus{border-color:var(--talos-primary, #2563eb);box-shadow:0 0 0 2px #2563eb40}.clear-search-btn{position:absolute;right:6px;background:transparent;border:none;color:var(--talos-text-muted, #94a3b8);cursor:pointer;padding:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center}.clear-search-btn ::ng-deep svg,.clear-search-btn svg{width:12px;height:12px;display:block}.clear-search-btn:hover{color:var(--talos-text-primary, #0f172a)}.checkbox-list-wrapper{margin-top:8px;max-height:175px;overflow-y:auto;overflow-x:hidden;padding-right:4px;scrollbar-width:thin;scrollbar-color:var(--talos-border-default, #cbd5e1) transparent}.checkbox-list-wrapper::-webkit-scrollbar{width:5px}.checkbox-list-wrapper::-webkit-scrollbar-thumb{background:var(--talos-border-default, #cbd5e1);border-radius:4px}.checkbox-item{display:flex;align-items:center;padding:2px 4px;border-radius:4px;color:var(--talos-text-primary, #0f172a);transition:background-color .12s}.checkbox-item:hover{background:var(--talos-neutral-subtle-bg-hover, rgba(0, 0, 0, .05))}.checkbox-item.select-all-item{font-weight:500;border-bottom:1px solid var(--talos-border-subtle, rgba(0, 0, 0, .08));margin-bottom:3px;padding-bottom:4px}.checkbox-item talos-checkbox{width:100%}.checkbox-item talos-checkbox ::ng-deep .talos-checkbox-wrapper{width:100%}.checkbox-item talos-checkbox ::ng-deep .talos-checkbox-label{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.no-matches-msg{padding:12px;text-align:center;color:var(--talos-text-muted, #94a3b8);font-size:12px}.operator-dropdown-wrapper{margin-bottom:8px}.operator-dropdown-wrapper talos-select-input{width:100%;display:block}.dialog-footer{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-top:10px;padding-top:8px;border-top:1px solid var(--talos-border-subtle, rgba(0, 0, 0, .08))}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: TalosButtonDirective, selector: "button[talosButton], a[talosButton], button[talos-btn], a[talos-btn]", inputs: ["variant", "size", "iconOnly", "fullWidth", "pill", "loading", "disabled", "animation", "spinning", "popping", "feedback"] }, { kind: "component", type: DatePickerComponent, selector: "talos-date-picker", inputs: ["placeholder", "label", "floatingLabel", "floating", "required", "disabled", "clearable", "size", "displayFormat", "valueFormat", "showTime", "use24Hour", "showSeconds", "minuteStep", "minDate", "maxDate", "firstDayOfWeek", "filterDate"], outputs: ["dateChange", "opened", "closed"] }, { kind: "component", type: TalosCheckboxComponent, selector: "talos-checkbox", inputs: ["value", "checked", "size", "variant", "disabled", "invalid", "indeterminate"], outputs: ["checkedChange"] }, { kind: "component", type: SelectInputComponent, selector: "talos-select-input", inputs: ["placeholder", "label", "floatingLabel", "floating", "required", "searchable", "searchPlaceholder", "disabled", "clearable", "multiple", "size", "placement"], outputs: ["selectionChange", "opened", "closed", "searchChange"] }, { kind: "component", type: OptionComponent, selector: "talos-option", inputs: ["value", "label", "disabled"], outputs: ["selected"] }, { kind: "directive", type: TalosInputDirective, selector: "input[talosInput], textarea[talosInput], input[talosTextarea], textarea[talosTextarea], input[talos-input], textarea[talos-textarea]", inputs: ["size", "invalid"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosGridFilterDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-grid-filter-dialog', imports: [
+                        FormsModule,
+                        NgComponentOutlet,
+                        TalosButtonDirective,
+                        DatePickerComponent,
+                        TalosCheckboxComponent,
+                        SelectInputComponent,
+                        OptionComponent,
+                        TalosInputDirective,
+                    ], host: {
+                        '[class.align-right]': "align() === 'right'",
+                        '(keydown.escape)': 'closed.emit()',
+                    }, template: `
+    <div class="filter-dialog-container" (click)="$event.stopPropagation()">
+      @if (filterMode() === 'set') {
+        <!-- MODE A: Searchable Checkbox List (for text / select / status) -->
+        <div class="mode-a-wrapper">
+          <!-- Search input -->
+          <div class="search-input-wrapper">
+            <span class="search-icon">
+              <ng-container *ngComponentOutlet="searchIcon" />
+            </span>
+            <input
+              talosInput
+              size="sm"
+              type="text"
+              class="filter-search-input"
+              placeholder="Search..."
+              [ngModel]="searchTerm()"
+              (ngModelChange)="searchTerm.set($event)"
+              (keydown.enter)="onSearchEnter()"
+              autofocus
+            />
+            @if (searchTerm()) {
+              <button type="button" class="clear-search-btn" (click)="searchTerm.set('')">
+                <ng-container *ngComponentOutlet="xIcon" />
+              </button>
+            }
+          </div>
+
+          <!-- Checkbox List -->
+          <div class="checkbox-list-wrapper">
+            <!-- (Select All) item -->
+            <div class="checkbox-item select-all-item">
+              <talos-checkbox
+                size="sm"
+                [checked]="isAllSelected()"
+                [indeterminate]="isIndeterminate()"
+                (checkedChange)="toggleSelectAll($event)"
+              >
+                {{ searchTerm() ? '(Select All Matches)' : '(Select All)' }}
+              </talos-checkbox>
+            </div>
+
+            <!-- Distinct item checkboxes -->
+            @for (val of visibleDistinctValues(); track val) {
+              <div class="checkbox-item">
+                <talos-checkbox
+                  size="sm"
+                  [checked]="isValSelected(val)"
+                  (checkedChange)="toggleVal(val, $event)"
+                >
+                  {{ val || '(Blank)' }}
+                </talos-checkbox>
+              </div>
+            }
+
+            @if (visibleDistinctValues().length === 0) {
+              <div class="no-matches-msg">No matching values</div>
+            }
+          </div>
+        </div>
+      } @else {
+        <!-- MODE B: Operator Dropdown & Filter Input (for numbers / dates) -->
+        <div class="mode-b-wrapper">
+          <!-- Operator Dropdown -->
+          <div class="operator-dropdown-wrapper">
+            <talos-select-input
+              size="sm"
+              [ngModel]="selectedOperator()"
+              (ngModelChange)="selectedOperator.set($event)"
+            >
+              @for (op of operatorOptions(); track op.value) {
+                <talos-option [value]="op.value" [label]="op.label">{{ op.label }}</talos-option>
+              }
+            </talos-select-input>
+          </div>
+
+          <!-- Filter Value Input -->
+          @if (selectedOperator() !== 'blank' && selectedOperator() !== 'notBlank') {
+            @if (isDateField()) {
+              <div class="date-picker-wrapper" (keydown.enter)="applyConditionFilter()">
+                <talos-date-picker
+                  [ngModel]="filterVal()"
+                  (ngModelChange)="onDateFilterValChange($event)"
+                  size="sm"
+                  placeholder="Select date"
+                />
+              </div>
+            } @else {
+              <div class="search-input-wrapper">
+                <span class="search-icon">
+                  <ng-container *ngComponentOutlet="searchIcon" />
+                </span>
+                <input
+                  talosInput
+                  size="sm"
+                  type="text"
+                  class="filter-search-input"
+                  placeholder="Filter..."
+                  [ngModel]="filterVal()"
+                  (ngModelChange)="filterVal.set($event)"
+                  (keydown.enter)="applyConditionFilter()"
+                  autofocus
+                />
+              </div>
+            }
+
+            <!-- Second input for Between -->
+            @if (selectedOperator() === 'between') {
+              @if (isDateField()) {
+                <div class="date-picker-wrapper" style="margin-top: 6px;" (keydown.enter)="applyConditionFilter()">
+                  <talos-date-picker
+                    [ngModel]="filterVal2()"
+                    (ngModelChange)="onDateFilterVal2Change($event)"
+                    size="sm"
+                    placeholder="And max date"
+                  />
+                </div>
+              } @else {
+                <div class="search-input-wrapper" style="margin-top: 6px;">
+                  <span class="search-icon">
+                    <ng-container *ngComponentOutlet="searchIcon" />
+                  </span>
+                  <input
+                    talosInput
+                    size="sm"
+                    type="text"
+                    class="filter-search-input"
+                    placeholder="And max value..."
+                    [ngModel]="filterVal2()"
+                    (ngModelChange)="filterVal2.set($event)"
+                    (keydown.enter)="applyConditionFilter()"
+                  />
+                </div>
+              }
+            }
+          }
+        </div>
+      }
+
+      <!-- Dialog Footer -->
+      <div class="dialog-footer">
+        <button talosButton variant="ghost" size="sm" type="button" (click)="clearFilter()">
+          Clear
+        </button>
+        <button talosButton variant="primary" size="sm" type="button" (click)="applyFilter()">
+          Apply
+        </button>
+      </div>
+    </div>
+  `, styles: [":host{display:block;font-family:var(--talos-font-sans, system-ui, sans-serif);font-size:13px}.filter-dialog-container{background:var(--talos-dropdown-bg, var(--talos-bg-surface, #ffffff));color:var(--talos-text-primary, #0f172a);border:1px solid var(--talos-border-default, #cbd5e1);border-radius:var(--talos-radius-md, 8px);box-shadow:0 12px 28px -4px #00000040,0 4px 10px #0000001a;width:240px;padding:10px;box-sizing:border-box;-webkit-user-select:none;user-select:none}.date-picker-wrapper{width:100%}.date-picker-wrapper talos-date-picker{display:block;width:100%}.search-input-wrapper{position:relative;display:flex;align-items:center;width:100%}.search-icon{position:absolute;left:9px;width:14px;height:14px;opacity:.6;display:flex;align-items:center;justify-content:center;pointer-events:none;color:var(--talos-text-muted, #94a3b8)}.search-icon ::ng-deep svg,.search-icon svg{width:13px;height:13px;display:block}.filter-search-input{width:100%;height:32px;padding:0 24px 0 28px;background:var(--talos-bg-subtle, #f8fafc);border:1px solid var(--talos-border-default, #cbd5e1);border-radius:var(--talos-radius-sm, 6px);color:var(--talos-text-primary, #0f172a);font-size:13px;outline:none;box-sizing:border-box;transition:border-color .15s,box-shadow .15s}.filter-search-input::placeholder{color:var(--talos-text-muted, #94a3b8)}.filter-search-input:focus{border-color:var(--talos-primary, #2563eb);box-shadow:0 0 0 2px #2563eb40}.clear-search-btn{position:absolute;right:6px;background:transparent;border:none;color:var(--talos-text-muted, #94a3b8);cursor:pointer;padding:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center}.clear-search-btn ::ng-deep svg,.clear-search-btn svg{width:12px;height:12px;display:block}.clear-search-btn:hover{color:var(--talos-text-primary, #0f172a)}.checkbox-list-wrapper{margin-top:8px;max-height:175px;overflow-y:auto;overflow-x:hidden;padding-right:4px;scrollbar-width:thin;scrollbar-color:var(--talos-border-default, #cbd5e1) transparent}.checkbox-list-wrapper::-webkit-scrollbar{width:5px}.checkbox-list-wrapper::-webkit-scrollbar-thumb{background:var(--talos-border-default, #cbd5e1);border-radius:4px}.checkbox-item{display:flex;align-items:center;padding:2px 4px;border-radius:4px;color:var(--talos-text-primary, #0f172a);transition:background-color .12s}.checkbox-item:hover{background:var(--talos-neutral-subtle-bg-hover, rgba(0, 0, 0, .05))}.checkbox-item.select-all-item{font-weight:500;border-bottom:1px solid var(--talos-border-subtle, rgba(0, 0, 0, .08));margin-bottom:3px;padding-bottom:4px}.checkbox-item talos-checkbox{width:100%}.checkbox-item talos-checkbox ::ng-deep .talos-checkbox-wrapper{width:100%}.checkbox-item talos-checkbox ::ng-deep .talos-checkbox-label{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.no-matches-msg{padding:12px;text-align:center;color:var(--talos-text-muted, #94a3b8);font-size:12px}.operator-dropdown-wrapper{margin-bottom:8px}.operator-dropdown-wrapper talos-select-input{width:100%;display:block}.dialog-footer{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-top:10px;padding-top:8px;border-top:1px solid var(--talos-border-subtle, rgba(0, 0, 0, .08))}\n"] }]
+        }], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], distinctValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "distinctValues", required: false }] }], currentFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentFilter", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], filterApplied: [{ type: i0.Output, args: ["filterApplied"] }], filterCleared: [{ type: i0.Output, args: ["filterCleared"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+
+class TalosGridCellFormatPipe {
+    fieldPartsCache = new Map();
+    transform(row, col) {
+        if (!row || !col)
+            return '';
+        const val = this.extractFieldValue(row, col.field);
+        if (col.formatter) {
+            return col.formatter(val, row);
+        }
+        if (val === null || val === undefined) {
+            return '';
+        }
+        if (col.type === 'date' && val instanceof Date) {
+            return val.toLocaleDateString();
+        }
+        return String(val);
+    }
+    extractFieldValue(item, field) {
+        if (!item || !field)
+            return undefined;
+        if (!field.includes('.')) {
+            return item[field];
+        }
+        let parts = this.fieldPartsCache.get(field);
+        if (!parts) {
+            parts = field.split('.');
+            this.fieldPartsCache.set(field, parts);
+        }
+        let cur = item;
+        for (let i = 0; i < parts.length; i++) {
+            if (cur == null)
+                return undefined;
+            cur = cur[parts[i]];
+        }
+        return cur;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosGridCellFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: TalosGridCellFormatPipe, isStandalone: true, name: "talosGridCellFormat" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosGridCellFormatPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'talosGridCellFormat',
+                    pure: true,
+                }]
+        }] });
+
+class TalosDataGridComponent {
+    // Inputs
+    data = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    columns = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    density = input('comfortable', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "density" }] : /* istanbul ignore next */ []));
+    filterable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterable" }] : /* istanbul ignore next */ []));
+    pagination = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pagination" }] : /* istanbul ignore next */ []));
+    pageSize = input(10, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    pageSizeOptions = input([5, 10, 20, 50], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
+    pageIndex = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageIndex" }] : /* istanbul ignore next */ []));
+    totalItems = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "totalItems" }] : /* istanbul ignore next */ []));
+    trackBy = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trackBy" }] : /* istanbul ignore next */ []));
+    striped = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "striped" }] : /* istanbul ignore next */ []));
+    bordered = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bordered" }] : /* istanbul ignore next */ []));
+    hoverable = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoverable" }] : /* istanbul ignore next */ []));
+    emptyMessage = input('No records to display', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+    loading = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    clientSort = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clientSort" }] : /* istanbul ignore next */ []));
+    clientPagination = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clientPagination" }] : /* istanbul ignore next */ []));
+    clientFilter = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clientFilter" }] : /* istanbul ignore next */ []));
+    resizable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resizable" }] : /* istanbul ignore next */ []));
+    rowKey = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowKey" }] : /* istanbul ignore next */ []));
+    minHeight = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minHeight" }] : /* istanbul ignore next */ []));
+    height = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    normalizedMinHeight = computed(() => {
+        const val = this.minHeight();
+        if (val === null || val === undefined)
+            return null;
+        return typeof val === 'number' ? `${val}px` : val;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "normalizedMinHeight" }] : /* istanbul ignore next */ []));
+    normalizedHeight = computed(() => {
+        const val = this.height();
+        if (val === null || val === undefined)
+            return null;
+        return typeof val === 'number' ? `${val}px` : val;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "normalizedHeight" }] : /* istanbul ignore next */ []));
+    // Outputs
+    sortChange = output();
+    filterChange = output();
+    pageChange = output();
+    rowClick = output();
+    actionClick = output();
+    columnResize = output();
+    // Icons for template
+    arrowUpIcon = LucideArrowUp;
+    arrowDownIcon = LucideArrowDown;
+    arrowUpDownIcon = LucideArrowUpDown;
+    chevronLeftIcon = LucideChevronLeft;
+    chevronRightIcon = LucideChevronRight;
+    chevronsLeftIcon = LucideChevronsLeft;
+    chevronsRightIcon = LucideChevronsRight;
+    xIcon = LucideX;
+    inboxIcon = LucideInbox;
+    loaderIcon = LucideLoader2;
+    filterIcon = LucideFilter;
+    // Internal reactive states
+    internalSortState = signal({ field: '', direction: null }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "internalSortState" }] : /* istanbul ignore next */ []));
+    internalFilterStates = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "internalFilterStates" }] : /* istanbul ignore next */ []));
+    internalPageIndex = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "internalPageIndex" }] : /* istanbul ignore next */ []));
+    internalPageSize = signal(10, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "internalPageSize" }] : /* istanbul ignore next */ []));
+    activeFilterCol = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeFilterCol" }] : /* istanbul ignore next */ []));
+    columnWidths = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnWidths" }] : /* istanbul ignore next */ []));
+    resizingColumn = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resizingColumn" }] : /* istanbul ignore next */ []));
+    isResizing = computed(() => this.resizingColumn() !== null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isResizing" }] : /* istanbul ignore next */ []));
+    hasResizableColumns = computed(() => {
+        return this.resizable() || this.columns().some((c) => c.resizable === true);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasResizableColumns" }] : /* istanbul ignore next */ []));
+    // CDK Connected Overlay Positions
+    overlayPositions = [
+        {
+            originX: 'start',
+            originY: 'bottom',
+            overlayX: 'start',
+            overlayY: 'top',
+            offsetY: 6,
+        },
+        {
+            originX: 'end',
+            originY: 'bottom',
+            overlayX: 'end',
+            overlayY: 'top',
+            offsetY: 6,
+        },
+        {
+            originX: 'start',
+            originY: 'top',
+            overlayX: 'start',
+            overlayY: 'bottom',
+            offsetY: -6,
+        },
+        {
+            originX: 'end',
+            originY: 'top',
+            overlayX: 'end',
+            overlayY: 'bottom',
+            offsetY: -6,
+        },
+    ];
+    constructor() {
+        effect(() => {
+            this.internalPageIndex.set(this.pageIndex());
+        });
+        effect(() => {
+            this.internalPageSize.set(this.pageSize());
+        });
+    }
+    // Active filters list
+    activeFiltersList = computed(() => {
+        return Array.from(this.internalFilterStates().values());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeFiltersList" }] : /* istanbul ignore next */ []));
+    hasActiveFilters = computed(() => {
+        return this.internalFilterStates().size > 0;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasActiveFilters" }] : /* istanbul ignore next */ []));
+    // Cached distinct values for the currently active filter column
+    activeColumnDistinctValues = computed(() => {
+        const field = this.activeFilterCol();
+        if (!field)
+            return [];
+        const col = this.columns().find((c) => c.field === field);
+        if (!col)
+            return [];
+        return this.getDistinctValues(col);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeColumnDistinctValues" }] : /* istanbul ignore next */ []));
+    // Multi-Stage Processing Pipeline:
+    // Stage 1: Filtered Data
+    filteredData = computed(() => {
+        const raw = this.data() || [];
+        if (!this.clientFilter() || this.internalFilterStates().size === 0) {
+            return raw;
+        }
+        const filters = this.internalFilterStates();
+        const colsMap = new Map(this.columns().map((c) => [c.field, c]));
+        return raw.filter((item) => {
+            for (const [field, filter] of filters.entries()) {
+                const rawVal = this.extractFieldValue(item, field);
+                const col = colsMap.get(field);
+                if (!this.matchesFilter(rawVal, filter, col)) {
+                    return false;
+                }
+            }
+            return true;
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredData" }] : /* istanbul ignore next */ []));
+    // Stage 2: Sorted Data
+    sortedData = computed(() => {
+        const base = this.filteredData();
+        const sort = this.internalSortState();
+        if (!this.clientSort() || !sort.direction || !sort.field) {
+            return base;
+        }
+        const col = this.columns().find((c) => c.field === sort.field);
+        const sortType = sort.sortType || col?.sortType || this.inferSortType(col);
+        const dir = sort.direction === 'asc' ? 1 : -1;
+        // Schwartzian transform: Pre-extract and parse sort keys in an O(N) pass
+        // to eliminate reflection, string conversions, and Date parsing from the O(N log N) comparator
+        const mapped = base.map((item, index) => {
+            const raw = this.extractFieldValue(item, sort.field);
+            let sortKey = null;
+            if (raw !== null && raw !== undefined && raw !== '') {
+                switch (sortType) {
+                    case 'number': {
+                        const num = Number(raw);
+                        sortKey = isNaN(num) ? null : num;
+                        break;
+                    }
+                    case 'date': {
+                        const time = raw instanceof Date ? raw.getTime() : new Date(raw).getTime();
+                        sortKey = isNaN(time) ? null : time;
+                        break;
+                    }
+                    case 'string':
+                    default:
+                        sortKey = String(raw);
+                        break;
+                }
+            }
+            return { item, index, sortKey };
+        });
+        mapped.sort((a, b) => {
+            if (a.sortKey === b.sortKey)
+                return a.index - b.index;
+            if (a.sortKey === null)
+                return 1;
+            if (b.sortKey === null)
+                return -1;
+            if (sortType === 'number' || sortType === 'date') {
+                const diff = (a.sortKey - b.sortKey) * dir;
+                return diff !== 0 ? diff : a.index - b.index;
+            }
+            // string
+            const cmp = a.sortKey.localeCompare(b.sortKey, undefined, {
+                numeric: true,
+                sensitivity: 'base',
+            }) * dir;
+            return cmp !== 0 ? cmp : a.index - b.index;
+        });
+        return mapped.map((m) => m.item);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sortedData" }] : /* istanbul ignore next */ []));
+    // Stage 3: Paged Data
+    pagedData = computed(() => {
+        const sorted = this.sortedData();
+        if (!this.pagination() || !this.clientPagination()) {
+            return sorted;
+        }
+        const pageSize = this.internalPageSize();
+        const pageIndex = this.internalPageIndex();
+        const start = pageIndex * pageSize;
+        return sorted.slice(start, start + pageSize);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pagedData" }] : /* istanbul ignore next */ []));
+    // Stage 4: Pagination Metrics
+    totalCount = computed(() => {
+        const externalTotal = this.totalItems();
+        if (externalTotal !== null && externalTotal !== undefined) {
+            return externalTotal;
+        }
+        return this.filteredData().length;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "totalCount" }] : /* istanbul ignore next */ []));
+    totalPages = computed(() => {
+        const count = this.totalCount();
+        const size = this.internalPageSize();
+        if (count <= 0 || size <= 0)
+            return 1;
+        return Math.ceil(count / size);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
+    startRecord = computed(() => {
+        const total = this.totalCount();
+        if (total === 0)
+            return 0;
+        return this.internalPageIndex() * this.internalPageSize() + 1;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startRecord" }] : /* istanbul ignore next */ []));
+    endRecord = computed(() => {
+        const total = this.totalCount();
+        if (total === 0)
+            return 0;
+        return Math.min(total, (this.internalPageIndex() + 1) * this.internalPageSize());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "endRecord" }] : /* istanbul ignore next */ []));
+    get hasRowClickListeners() {
+        return true;
+    }
+    // Row Identification for TrackBy
+    trackByRow(index, row) {
+        const customTrack = this.trackBy();
+        if (customTrack) {
+            return customTrack(index, row);
+        }
+        const customKey = this.rowKey();
+        if (customKey && row && typeof row === 'object') {
+            return row[customKey];
+        }
+        if (row && typeof row === 'object') {
+            const anyRow = row;
+            return anyRow.id ?? anyRow._id ?? anyRow.uuid ?? anyRow.key ?? index;
+        }
+        return index;
+    }
+    // Header & Sorting helpers
+    isSortable(col) {
+        if (col.type === 'actions')
+            return false;
+        if (col.sortable !== undefined)
+            return col.sortable;
+        return !!col.sortType;
+    }
+    isSorted(col) {
+        return (this.internalSortState().field === col.field && this.internalSortState().direction !== null);
+    }
+    getSortDirection(col) {
+        if (this.internalSortState().field !== col.field) {
+            return null;
+        }
+        return this.internalSortState().direction;
+    }
+    getAriaSort(col) {
+        if (!this.isSortable(col))
+            return null;
+        const dir = this.getSortDirection(col);
+        if (dir === 'asc')
+            return 'ascending';
+        if (dir === 'desc')
+            return 'descending';
+        return 'none';
+    }
+    onHeaderClick(col) {
+        if (!this.isSortable(col))
+            return;
+        const current = this.internalSortState();
+        let nextDirection;
+        if (current.field !== col.field) {
+            nextDirection = 'asc';
+        }
+        else if (current.direction === 'asc') {
+            nextDirection = 'desc';
+        }
+        else if (current.direction === 'desc') {
+            nextDirection = null;
+        }
+        else {
+            nextDirection = 'asc';
+        }
+        const sortType = col.sortType || this.inferSortType(col);
+        const newState = {
+            field: nextDirection ? col.field : '',
+            direction: nextDirection,
+            sortType,
+        };
+        this.internalSortState.set(newState);
+        this.sortChange.emit(newState);
+    }
+    // Column Resizing Helpers & Handlers
+    isResizable(col) {
+        if (col.resizable !== undefined) {
+            return col.resizable;
+        }
+        if (col.type === 'actions') {
+            return false;
+        }
+        return this.resizable();
+    }
+    isColumnResizing(field) {
+        return this.resizingColumn() === field;
+    }
+    getColumnWidth(col) {
+        const dynamic = this.columnWidths()[col.field];
+        if (dynamic !== undefined) {
+            return `${dynamic}px`;
+        }
+        return col.width || col.minWidth;
+    }
+    getColumnMinWidth(col) {
+        const dynamic = this.columnWidths()[col.field];
+        if (dynamic !== undefined) {
+            return `${dynamic}px`;
+        }
+        return col.minWidth || col.width;
+    }
+    setColumnWidth(field, width) {
+        this.columnWidths.update((prev) => ({
+            ...prev,
+            [field]: width,
+        }));
+    }
+    resetColumnWidths() {
+        this.columnWidths.set({});
+    }
+    onResizeStart(col, event, thEl) {
+        if (!this.isResizable(col))
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const startX = 'touches' in event ? event.touches[0].clientX : event.clientX;
+        const startWidth = thEl.getBoundingClientRect().width;
+        const minW = col.minWidth ? parseInt(col.minWidth, 10) : 50;
+        const maxW = col.maxWidth ? parseInt(col.maxWidth, 10) : undefined;
+        this.resizingColumn.set(col.field);
+        if (typeof document !== 'undefined') {
+            document.body.style.cursor = 'col-resize';
+            document.body.style.userSelect = 'none';
+        }
+        let lastWidth = startWidth;
+        const onMove = (moveEvent) => {
+            const currentX = 'touches' in moveEvent ? moveEvent.touches[0].clientX : moveEvent.clientX;
+            const deltaX = currentX - startX;
+            let newWidth = Math.round(startWidth + deltaX);
+            if (minW !== undefined && newWidth < minW)
+                newWidth = minW;
+            if (maxW !== undefined && newWidth > maxW)
+                newWidth = maxW;
+            lastWidth = newWidth;
+            this.columnWidths.update((prev) => ({
+                ...prev,
+                [col.field]: newWidth,
+            }));
+        };
+        const onEnd = () => {
+            if (typeof document !== 'undefined') {
+                document.removeEventListener('mousemove', onMove);
+                document.removeEventListener('mouseup', onEnd);
+                document.removeEventListener('touchmove', onMove);
+                document.removeEventListener('touchend', onEnd);
+                document.body.style.cursor = '';
+                document.body.style.userSelect = '';
+            }
+            this.resizingColumn.set(null);
+            this.columnResize.emit({ column: col, width: lastWidth });
+        };
+        if (typeof document !== 'undefined') {
+            document.addEventListener('mousemove', onMove);
+            document.addEventListener('mouseup', onEnd);
+            document.addEventListener('touchmove', onMove, { passive: true });
+            document.addEventListener('touchend', onEnd);
+        }
+    }
+    onResizeDoubleClick(col, event) {
+        event.stopPropagation();
+        event.preventDefault();
+        this.columnWidths.update((prev) => {
+            const next = { ...prev };
+            delete next[col.field];
+            return next;
+        });
+        if (col.width) {
+            const parsed = parseInt(col.width, 10);
+            if (!isNaN(parsed)) {
+                this.columnResize.emit({ column: col, width: parsed });
+            }
+        }
+    }
+    onResizeKeydown(col, event, thEl) {
+        if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+            event.preventDefault();
+            event.stopPropagation();
+            const currentWidth = this.columnWidths()[col.field] ?? thEl.getBoundingClientRect().width;
+            const step = event.key === 'ArrowRight' ? 10 : -10;
+            const minW = col.minWidth ? parseInt(col.minWidth, 10) : 50;
+            const maxW = col.maxWidth ? parseInt(col.maxWidth, 10) : undefined;
+            let newWidth = Math.round(currentWidth + step);
+            if (minW !== undefined && newWidth < minW)
+                newWidth = minW;
+            if (maxW !== undefined && newWidth > maxW)
+                newWidth = maxW;
+            this.columnWidths.update((prev) => ({
+                ...prev,
+                [col.field]: newWidth,
+            }));
+            this.columnResize.emit({ column: col, width: newWidth });
+        }
+    }
+    // Filter Helpers & Dialog Management
+    isFilterable(col) {
+        if (col.type === 'actions')
+            return false;
+        if (col.filterable !== undefined)
+            return col.filterable;
+        return this.filterable();
+    }
+    isFilterDialogOpen(field) {
+        return this.activeFilterCol() === field;
+    }
+    toggleFilterDialog(field, event) {
+        event.stopPropagation();
+        if (this.activeFilterCol() === field) {
+            this.activeFilterCol.set(null);
+        }
+        else {
+            this.activeFilterCol.set(field);
+        }
+    }
+    closeFilterDialog() {
+        this.activeFilterCol.set(null);
+    }
+    onOverlayOutsideClick(event, field) {
+        const target = event.target;
+        if (target &&
+            (target.closest(`.filter-anchor-${field}`) ||
+                target.closest('.datepicker-dropdown-panel') ||
+                target.closest('.talos-datepicker-host'))) {
+            return;
+        }
+        this.closeFilterDialog();
+    }
+    getDistinctValues(col) {
+        const raw = this.data() || [];
+        const valuesSet = new Set();
+        for (const item of raw) {
+            const val = this.extractFieldValue(item, col.field);
+            if (val === null || val === undefined) {
+                valuesSet.add('');
+            }
+            else {
+                valuesSet.add(String(val));
+            }
+        }
+        return Array.from(valuesSet).sort((a, b) => {
+            if (a === '')
+                return 1;
+            if (b === '')
+                return -1;
+            return a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' });
+        });
+    }
+    getFilter(field) {
+        return this.internalFilterStates().get(field);
+    }
+    hasFilter(field) {
+        return this.internalFilterStates().has(field);
+    }
+    onFilterApplied(filter) {
+        const map = new Map(this.internalFilterStates());
+        map.set(filter.field, filter);
+        this.internalFilterStates.set(map);
+        this.internalPageIndex.set(0);
+        this.filterChange.emit(this.activeFiltersList());
+    }
+    onFilterCleared(field) {
+        const map = new Map(this.internalFilterStates());
+        map.delete(field);
+        this.internalFilterStates.set(map);
+        this.internalPageIndex.set(0);
+        this.filterChange.emit(this.activeFiltersList());
+    }
+    clearAllFilters() {
+        this.internalFilterStates.set(new Map());
+        this.internalPageIndex.set(0);
+        this.filterChange.emit([]);
+    }
+    // Filter Matching Evaluator
+    matchesFilter(rawValue, filter, col) {
+        // Mode A: Set Filter (text / select / status)
+        if (filter.mode === 'set') {
+            if (!filter.selectedValues)
+                return true;
+            const strVal = rawValue === null || rawValue === undefined ? '' : String(rawValue);
+            return filter.selectedValues.includes(strVal);
+        }
+        // Mode B: Condition Filter (numbers / dates / text)
+        const op = filter.operator || 'eq';
+        if (op === 'blank') {
+            return rawValue === null || rawValue === undefined || rawValue === '';
+        }
+        if (op === 'notBlank') {
+            return rawValue !== null && rawValue !== undefined && rawValue !== '';
+        }
+        if (rawValue === null || rawValue === undefined || rawValue === '') {
+            return false;
+        }
+        const filterVal = filter.value;
+        const secondVal = filter.secondValue;
+        // Check if comparing dates
+        const isDate = col?.type === 'date' ||
+            col?.sortType === 'date' ||
+            filterVal instanceof Date ||
+            (typeof filterVal === 'string' && /^\d{4}-\d{2}-\d{2}/.test(filterVal)) ||
+            rawValue instanceof Date;
+        if (isDate) {
+            const rowDate = this.normalizeDateToYMD(rawValue);
+            const targetDate = this.normalizeDateToYMD(filterVal);
+            const targetDate2 = secondVal ? this.normalizeDateToYMD(secondVal) : '';
+            switch (op) {
+                case 'eq':
+                    return rowDate === targetDate;
+                case 'neq':
+                    return rowDate !== targetDate;
+                case 'gt':
+                    return rowDate > targetDate;
+                case 'gte':
+                    return rowDate >= targetDate;
+                case 'lt':
+                    return rowDate < targetDate;
+                case 'lte':
+                    return rowDate <= targetDate;
+                case 'between': {
+                    if (!targetDate2)
+                        return rowDate >= targetDate;
+                    const minD = targetDate <= targetDate2 ? targetDate : targetDate2;
+                    const maxD = targetDate <= targetDate2 ? targetDate2 : targetDate;
+                    return rowDate >= minD && rowDate <= maxD;
+                }
+                default:
+                    return true;
+            }
+        }
+        // Check if comparing numbers
+        const isNumber = col?.type === 'number' || col?.sortType === 'number';
+        const hasFilterNum = filterVal !== '' &&
+            filterVal !== null &&
+            filterVal !== undefined &&
+            !isNaN(Number(filterVal));
+        const numRaw = Number(rawValue);
+        if ((isNumber || hasFilterNum) && !isNaN(numRaw)) {
+            const numFilter = Number(filterVal);
+            const numFilter2 = secondVal !== '' && secondVal !== null && secondVal !== undefined ? Number(secondVal) : NaN;
+            switch (op) {
+                case 'eq':
+                    return numRaw === numFilter;
+                case 'neq':
+                    return numRaw !== numFilter;
+                case 'gt':
+                    return numRaw > numFilter;
+                case 'gte':
+                    return numRaw >= numFilter;
+                case 'lt':
+                    return numRaw < numFilter;
+                case 'lte':
+                    return numRaw <= numFilter;
+                case 'between': {
+                    if (isNaN(numFilter2))
+                        return numRaw >= numFilter;
+                    const minN = Math.min(numFilter, numFilter2);
+                    const maxN = Math.max(numFilter, numFilter2);
+                    return numRaw >= minN && numRaw <= maxN;
+                }
+                default:
+                    return true;
+            }
+        }
+        // String / Text comparison
+        const strRaw = String(rawValue).toLowerCase().trim();
+        const strFilter = String(filterVal ?? '')
+            .toLowerCase()
+            .trim();
+        switch (op) {
+            case 'eq':
+                return strRaw === strFilter;
+            case 'neq':
+                return strRaw !== strFilter;
+            case 'startsWith':
+                return strRaw.startsWith(strFilter);
+            case 'endsWith':
+                return strRaw.endsWith(strFilter);
+            case 'contains':
+            default:
+                return strRaw.includes(strFilter);
+        }
+    }
+    normalizeDateToYMD(val) {
+        if (!val)
+            return '';
+        if (typeof val === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(val)) {
+            return val;
+        }
+        const d = new Date(val);
+        if (isNaN(d.getTime()))
+            return '';
+        const y = d.getFullYear();
+        const m = String(d.getMonth() + 1).padStart(2, '0');
+        const day = String(d.getDate()).padStart(2, '0');
+        return `${y}-${m}-${day}`;
+    }
+    // Pagination Handlers
+    setPage(pageIndex) {
+        const validPage = Math.max(0, Math.min(pageIndex, this.totalPages() - 1));
+        if (validPage !== this.internalPageIndex()) {
+            this.internalPageIndex.set(validPage);
+            this.pageChange.emit({
+                pageIndex: validPage,
+                pageSize: this.internalPageSize(),
+                totalItems: this.totalCount(),
+            });
+        }
+    }
+    onPageSizeChange(newSizeOrEvent) {
+        const newSize = typeof newSizeOrEvent === 'number'
+            ? newSizeOrEvent
+            : Number(newSizeOrEvent.target.value);
+        if (isNaN(newSize) || newSize <= 0)
+            return;
+        this.internalPageSize.set(newSize);
+        this.internalPageIndex.set(0);
+        this.pageChange.emit({
+            pageIndex: 0,
+            pageSize: newSize,
+            totalItems: this.totalCount(),
+        });
+    }
+    // Cell Content & Row Click Helpers
+    getCellValue(row, col) {
+        return this.extractFieldValue(row, col.field);
+    }
+    formatCellValue(row, col) {
+        const val = this.getCellValue(row, col);
+        if (col.formatter) {
+            return col.formatter(val, row);
+        }
+        if (val === null || val === undefined) {
+            return '';
+        }
+        if (col.type === 'date' && val instanceof Date) {
+            return val.toLocaleDateString();
+        }
+        return String(val);
+    }
+    onRowClick(row, index) {
+        this.rowClick.emit({ row, index });
+    }
+    fieldPartsCache = new Map();
+    extractFieldValue(item, field) {
+        if (!item || !field)
+            return undefined;
+        if (!field.includes('.')) {
+            return item[field];
+        }
+        let parts = this.fieldPartsCache.get(field);
+        if (!parts) {
+            parts = field.split('.');
+            this.fieldPartsCache.set(field, parts);
+        }
+        let cur = item;
+        for (let i = 0; i < parts.length; i++) {
+            if (cur == null)
+                return undefined;
+            cur = cur[parts[i]];
+        }
+        return cur;
+    }
+    inferSortType(col) {
+        if (!col)
+            return 'string';
+        if (col.type === 'number')
+            return 'number';
+        if (col.type === 'date')
+            return 'date';
+        return 'string';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosDataGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TalosDataGridComponent, isStandalone: true, selector: "talos-data-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, clientSort: { classPropertyName: "clientSort", publicName: "clientSort", isSignal: true, isRequired: false, transformFunction: null }, clientPagination: { classPropertyName: "clientPagination", publicName: "clientPagination", isSignal: true, isRequired: false, transformFunction: null }, clientFilter: { classPropertyName: "clientFilter", publicName: "clientFilter", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", filterChange: "filterChange", pageChange: "pageChange", rowClick: "rowClick", actionClick: "actionClick", columnResize: "columnResize" }, host: { properties: { "style.min-height": "normalizedMinHeight()", "style.height": "normalizedHeight()" }, classAttribute: "talos-data-grid-host" }, ngImport: i0, template: "<div\n  class=\"talos-data-grid-container\"\n  [class.density-compact]=\"density() === 'compact'\"\n  [class.density-comfortable]=\"density() === 'comfortable'\"\n  [class.density-spacious]=\"density() === 'spacious'\"\n  [class.is-bordered]=\"bordered()\"\n  [class.is-striped]=\"striped()\"\n  [class.is-resizing]=\"isResizing()\"\n>\n  <!-- Loading overlay -->\n  @if (loading()) {\n    <div class=\"talos-data-grid-loading-overlay\">\n      <ng-container *ngComponentOutlet=\"loaderIcon\" />\n    </div>\n  }\n\n  <!-- Main Scrollable Table Wrapper -->\n  <div class=\"talos-data-grid-table-wrapper\">\n    <table class=\"talos-data-grid-table\" [class.has-resizable-columns]=\"hasResizableColumns()\" role=\"grid\">\n      <thead>\n        <!-- Header Column Row -->\n        <tr>\n          @for (col of columns(); track col.field) {\n            <th\n              #thEl\n              [style.width]=\"getColumnWidth(col)\"\n              [style.min-width]=\"getColumnMinWidth(col)\"\n              [style.max-width]=\"col.maxWidth\"\n              [class.align-left]=\"!col.align || col.align === 'left'\"\n              [class.align-center]=\"col.align === 'center'\"\n              [class.align-right]=\"col.align === 'right'\"\n              [class.is-sortable]=\"isSortable(col)\"\n              [class.is-sorted]=\"isSorted(col)\"\n              [class.is-resizable]=\"isResizable(col)\"\n              [class.is-resizing]=\"isColumnResizing(col.field)\"\n              (click)=\"onHeaderClick(col)\"\n              role=\"columnheader\"\n              [attr.aria-sort]=\"getAriaSort(col)\"\n            >\n              <div class=\"header-content-wrapper\">\n                <span class=\"header-title\" [title]=\"col.header\">{{ col.header }}</span>\n                @if (isSortable(col) || isFilterable(col)) {\n                  <div class=\"header-tools\">\n                    @if (isSortable(col)) {\n                      <button\n                        talosButton\n                        variant=\"ghost\"\n                        size=\"xs\"\n                        [iconOnly]=\"true\"\n                        type=\"button\"\n                        class=\"header-sort-btn\"\n                        [class.is-sorted]=\"isSorted(col)\"\n                        (click)=\"$event.stopPropagation(); onHeaderClick(col)\"\n                        [attr.aria-label]=\"'Sort by ' + col.header\"\n                        [title]=\"'Sort by ' + col.header\"\n                      >\n                        @if (getSortDirection(col) === 'asc') {\n                          <ng-container *ngComponentOutlet=\"arrowUpIcon\" />\n                        } @else if (getSortDirection(col) === 'desc') {\n                          <ng-container *ngComponentOutlet=\"arrowDownIcon\" />\n                        } @else {\n                          <ng-container *ngComponentOutlet=\"arrowUpDownIcon\" />\n                        }\n                      </button>\n                    }\n                    @if (isFilterable(col)) {\n                      <div\n                        class=\"talos-grid-filter-anchor\"\n                        [class]=\"'filter-anchor-' + col.field\"\n                        cdkOverlayOrigin\n                        #filterOrigin=\"cdkOverlayOrigin\"\n                        (click)=\"$event.stopPropagation()\"\n                      >\n                        <button\n                          talosButton\n                          variant=\"ghost\"\n                          size=\"xs\"\n                          [iconOnly]=\"true\"\n                          type=\"button\"\n                          class=\"header-filter-btn\"\n                          [class.is-active]=\"hasFilter(col.field)\"\n                          [class.is-open]=\"isFilterDialogOpen(col.field)\"\n                          (click)=\"toggleFilterDialog(col.field, $event)\"\n                          [attr.aria-label]=\"'Filter ' + col.header\"\n                          title=\"Filter\"\n                        >\n                          <ng-container *ngComponentOutlet=\"filterIcon\" />\n                        </button>\n\n                        <ng-template\n                          cdkConnectedOverlay\n                          [cdkConnectedOverlayOrigin]=\"filterOrigin\"\n                          [cdkConnectedOverlayOpen]=\"isFilterDialogOpen(col.field)\"\n                          [cdkConnectedOverlayPositions]=\"overlayPositions\"\n                          [cdkConnectedOverlayPush]=\"true\"\n                          (overlayOutsideClick)=\"onOverlayOutsideClick($event, col.field)\"\n                        >\n                          <talos-grid-filter-dialog\n                            [column]=\"col\"\n                            [distinctValues]=\"activeColumnDistinctValues()\"\n                            [currentFilter]=\"getFilter(col.field)\"\n                            [align]=\"col.align === 'right' ? 'right' : 'left'\"\n                            (filterApplied)=\"onFilterApplied($event)\"\n                            (filterCleared)=\"onFilterCleared(col.field)\"\n                            (closed)=\"closeFilterDialog()\"\n                          />\n                        </ng-template>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n              @if (isResizable(col)) {\n                <div\n                  class=\"talos-grid-resize-handle\"\n                  [class.is-resizing]=\"isColumnResizing(col.field)\"\n                  (mousedown)=\"onResizeStart(col, $event, thEl)\"\n                  (touchstart)=\"onResizeStart(col, $event, thEl)\"\n                  (dblclick)=\"onResizeDoubleClick(col, $event)\"\n                  (click)=\"$event.stopPropagation()\"\n                  role=\"separator\"\n                  aria-orientation=\"vertical\"\n                  tabindex=\"0\"\n                  [attr.aria-label]=\"'Resize ' + col.header + ' column'\"\n                  (keydown)=\"onResizeKeydown(col, $event, thEl)\"\n                ></div>\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n\n      <!-- Table Body with TrackBy for Optimal Refresh Performance -->\n      <tbody>\n        @for (row of pagedData(); track trackByRow($index, row)) {\n          <tr\n            [class.is-hoverable]=\"hoverable()\"\n            [class.is-clickable]=\"hasRowClickListeners\"\n            (click)=\"onRowClick(row, $index)\"\n            role=\"row\"\n          >\n            @for (col of columns(); track col.field) {\n              <td\n                [class.align-left]=\"!col.align || col.align === 'left'\"\n                [class.align-center]=\"col.align === 'center'\"\n                [class.align-right]=\"col.align === 'right'\"\n                role=\"gridcell\"\n              >\n                @if (col.cellTemplate) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      col.cellTemplate;\n                      context: {\n                        $implicit: getCellValue(row, col),\n                        row: row,\n                        index: $index,\n                        column: col,\n                      }\n                    \"\n                  />\n                } @else if (col.type === 'status') {\n                  <talos-grid-status-cell\n                    [row]=\"row\"\n                    [column]=\"col\"\n                    [rawValue]=\"getCellValue(row, col)\"\n                  />\n                } @else if (col.type === 'actions' && col.actionsConfig) {\n                  <talos-grid-actions-cell\n                    [row]=\"row\"\n                    [rowIndex]=\"$index\"\n                    [actions]=\"col.actionsConfig\"\n                    (actionClick)=\"actionClick.emit($event)\"\n                  />\n                } @else {\n                  {{ row | talosGridCellFormat: col }}\n                }\n              </td>\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n\n    <!-- Empty State -->\n    @if (pagedData().length === 0) {\n      <div class=\"talos-data-grid-empty\">\n        <div class=\"empty-icon\">\n          <ng-container *ngComponentOutlet=\"inboxIcon\" />\n        </div>\n        <div class=\"empty-text\">\n          @if (hasActiveFilters()) {\n            <span>No results matching the active filters.</span>\n          } @else {\n            <span>{{ emptyMessage() }}</span>\n          }\n        </div>\n        @if (hasActiveFilters()) {\n          <button talosButton variant=\"outline\" size=\"sm\" (click)=\"clearAllFilters()\">\n            Clear Filters\n          </button>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Pagination Bar -->\n  @if (pagination()) {\n    <div class=\"talos-data-grid-pagination\">\n      <div class=\"pagination-left\">\n        <span class=\"pagination-info\">\n          Showing {{ startRecord() }} to {{ endRecord() }} of {{ totalCount() }} entries\n        </span>\n\n        @if (pageSizeOptions().length > 1) {\n          <div class=\"pagination-size-selector\">\n            <span>Rows per page:</span>\n            <talos-select-input\n              size=\"sm\"\n              placement=\"top\"\n              [ngModel]=\"internalPageSize()\"\n              (selectionChange)=\"onPageSizeChange(+$any($event))\"\n              aria-label=\"Select page size\"\n            >\n              @for (size of pageSizeOptions(); track size) {\n                <talos-option [value]=\"size\" [label]=\"size.toString()\">{{ size }}</talos-option>\n              }\n            </talos-select-input>\n          </div>\n        }\n      </div>\n\n      <div class=\"pagination-right\">\n        <button\n          talosButton\n          variant=\"ghost\"\n          size=\"sm\"\n          [iconOnly]=\"true\"\n          [disabled]=\"internalPageIndex() <= 0\"\n          (click)=\"setPage(0)\"\n          title=\"First page\"\n          aria-label=\"First page\"\n        >\n          <ng-container *ngComponentOutlet=\"chevronsLeftIcon\" />\n        </button>\n\n        <button\n          talosButton\n          variant=\"ghost\"\n          size=\"sm\"\n          [iconOnly]=\"true\"\n          [disabled]=\"internalPageIndex() <= 0\"\n          (click)=\"setPage(internalPageIndex() - 1)\"\n          title=\"Previous page\"\n          aria-label=\"Previous page\"\n        >\n          <ng-container *ngComponentOutlet=\"chevronLeftIcon\" />\n        </button>\n\n        <span class=\"page-indicator\">\n          Page {{ internalPageIndex() + 1 }} of {{ totalPages() }}\n        </span>\n\n        <button\n          talosButton\n          variant=\"ghost\"\n          size=\"sm\"\n          [iconOnly]=\"true\"\n          [disabled]=\"internalPageIndex() >= totalPages() - 1\"\n          (click)=\"setPage(internalPageIndex() + 1)\"\n          title=\"Next page\"\n          aria-label=\"Next page\"\n        >\n          <ng-container *ngComponentOutlet=\"chevronRightIcon\" />\n        </button>\n\n        <button\n          talosButton\n          variant=\"ghost\"\n          size=\"sm\"\n          [iconOnly]=\"true\"\n          [disabled]=\"internalPageIndex() >= totalPages() - 1\"\n          (click)=\"setPage(totalPages() - 1)\"\n          title=\"Last page\"\n          aria-label=\"Last page\"\n        >\n          <ng-container *ngComponentOutlet=\"chevronsRightIcon\" />\n        </button>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%;min-height:var(--talos-data-grid-min-height, 240px);flex:1 1 auto;font-family:var(--talos-font-sans, system-ui, -apple-system, sans-serif);color:var(--talos-text-primary, #0f172a)}.talos-data-grid-container{display:flex;flex-direction:column;background-color:var(--talos-bg-surface, #ffffff);border-radius:var(--talos-radius-lg, 8px);position:relative;width:100%;height:100%;min-height:inherit;flex:1 1 auto;overflow:hidden;container-type:inline-size}.talos-data-grid-container.is-bordered{border:1px solid var(--talos-border-default, #cbd5e1)}.talos-data-grid-container.is-resizing{cursor:col-resize!important;-webkit-user-select:none!important;user-select:none!important}.talos-data-grid-container.is-resizing *{-webkit-user-select:none!important;user-select:none!important;cursor:col-resize!important}.talos-data-grid-table-wrapper{width:100%;flex:1 1 auto;min-height:0;overflow-x:auto;overflow-y:auto;position:relative;display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:var(--talos-border-default, #cbd5e1) transparent}.talos-data-grid-table-wrapper::-webkit-scrollbar{height:6px;width:6px}.talos-data-grid-table-wrapper::-webkit-scrollbar-thumb{background:var(--talos-border-default, #cbd5e1);border-radius:4px}.talos-data-grid-table{width:max-content;min-width:100%;border-collapse:collapse;text-align:left;font-size:var(--talos-font-size-sm, 13px);line-height:var(--talos-line-height-normal, 1.5);flex-shrink:0}.talos-data-grid-container.density-compact{--grid-header-padding-y: 6px;--grid-header-padding-x: 10px;--grid-cell-padding-y: 5px;--grid-cell-padding-x: 10px;--grid-font-size: 12px;--grid-header-font-size: 11px;--grid-filter-height: 24px}.talos-data-grid-container.density-comfortable{--grid-header-padding-y: 10px;--grid-header-padding-x: 14px;--grid-cell-padding-y: 9px;--grid-cell-padding-x: 14px;--grid-font-size: 13.5px;--grid-header-font-size: 12px;--grid-filter-height: 28px}.talos-data-grid-container.density-spacious{--grid-header-padding-y: 14px;--grid-header-padding-x: 18px;--grid-cell-padding-y: 14px;--grid-cell-padding-x: 18px;--grid-font-size: 14.5px;--grid-header-font-size: 13px;--grid-filter-height: 32px}.talos-data-grid-table thead th{position:sticky;top:0;z-index:2;min-width:max-content;background-color:var(--talos-bg-subtle, #f8fafc);color:var(--talos-text-secondary, #475569);font-size:var(--grid-header-font-size, 12px);font-weight:var(--talos-font-weight-semibold, 600);text-transform:uppercase;letter-spacing:.04em;padding:var(--grid-header-padding-y) 8px var(--grid-header-padding-y) var(--grid-header-padding-x);border-bottom:1px solid var(--talos-border-default, #cbd5e1);white-space:nowrap;-webkit-user-select:none;user-select:none;vertical-align:middle;overflow:hidden}.talos-data-grid-table thead th.is-sortable{cursor:pointer;transition:background-color var(--talos-transition, .15s ease)}.talos-data-grid-table thead th.is-sortable:hover{background-color:var(--talos-neutral-subtle-bg-hover, #f1f5f9);color:var(--talos-text-primary, #0f172a)}.talos-data-grid-table thead th.is-sorted{color:var(--talos-primary, #2563eb);background-color:var(--talos-primary-subtle-bg, #eff6ff)}.talos-data-grid-table thead th.is-resizable{padding-right:10px}.talos-data-grid-table thead th.is-resizing{background-color:var(--talos-neutral-subtle-bg-hover, #f1f5f9)}.header-content-wrapper{display:flex;align-items:center;gap:4px;width:100%;min-width:0;overflow:hidden}.header-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-tools{display:inline-flex;align-items:center;gap:2px;flex-shrink:0}.sort-icon-wrapper{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;opacity:.45;transition:opacity var(--talos-transition, .15s ease),transform .15s ease}.sort-icon-wrapper ::ng-deep svg,.sort-icon-wrapper ::ng-deep .lucide,.sort-icon-wrapper svg,.sort-icon-wrapper .lucide{width:13px!important;height:13px!important;display:block}.is-sortable:hover .sort-icon-wrapper{opacity:.85}.is-sorted .sort-icon-wrapper{opacity:1;color:var(--talos-primary, #2563eb)}.header-sort-btn{width:22px!important;height:22px!important;min-width:22px!important;padding:0!important;border-radius:var(--talos-radius-sm, 4px)!important;border:1px solid transparent!important;background:transparent!important;color:var(--talos-text-muted, #94a3b8)!important;cursor:pointer;opacity:.45;transition:all var(--talos-transition, .15s ease);box-shadow:none!important}.header-sort-btn ::ng-deep svg,.header-sort-btn ::ng-deep .lucide,.header-sort-btn svg,.header-sort-btn .lucide{width:13px!important;height:13px!important;display:block;flex-shrink:0}th:hover .header-sort-btn{opacity:.85}.header-sort-btn:hover{opacity:1;color:var(--talos-text-primary, #0f172a)!important;background:var(--talos-neutral-subtle-bg-hover, rgba(0, 0, 0, .06))!important}.header-sort-btn.is-sorted{opacity:1;color:var(--talos-primary, #2563eb)!important;background:var(--talos-primary-subtle-bg, #eff6ff)!important}.align-left{text-align:left}.align-left .header-content-wrapper{justify-content:flex-start}.align-center{text-align:center}.align-center .header-content-wrapper{justify-content:center}.align-right{text-align:right}.align-right .header-content-wrapper{justify-content:flex-end}.talos-grid-resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;-webkit-user-select:none;user-select:none;touch-action:none;z-index:3;display:flex;align-items:center;justify-content:center}.talos-grid-resize-handle:after{content:\"\";display:block;width:2px;height:50%;border-radius:1px;background-color:transparent;transition:background-color var(--talos-transition, .15s ease),height var(--talos-transition, .15s ease)}.talos-grid-resize-handle:hover:after,.talos-grid-resize-handle:focus-visible:after,.talos-grid-resize-handle.is-resizing:after{background-color:var(--talos-primary, #2563eb);height:100%}.talos-grid-resize-handle:focus-visible{outline:none}.talos-grid-filter-anchor{position:relative;display:inline-flex;align-items:center}.header-filter-btn{display:inline-flex;align-items:center;justify-content:center;width:22px!important;height:22px!important;min-width:22px!important;padding:0!important;border-radius:var(--talos-radius-sm, 4px)!important;border:1px solid transparent!important;background:transparent!important;color:var(--talos-text-muted, #94a3b8)!important;cursor:pointer;opacity:.5;transition:all var(--talos-transition, .15s ease);box-shadow:none!important}.header-filter-btn ::ng-deep svg,.header-filter-btn ::ng-deep .lucide,.header-filter-btn svg,.header-filter-btn .lucide{width:13px!important;height:13px!important;display:block;flex-shrink:0}th:hover .header-filter-btn{opacity:.85}.header-filter-btn:hover,.header-filter-btn.is-open{opacity:1;color:var(--talos-text-primary, #0f172a)!important;background:var(--talos-neutral-subtle-bg-hover, rgba(0, 0, 0, .06))!important}.header-filter-btn.is-active{opacity:1;color:#fff!important;background:var(--talos-primary, #2563eb)!important;border-color:var(--talos-primary, #2563eb)!important}.talos-data-grid-table tbody tr{border-bottom:1px solid var(--talos-border-subtle, #f1f5f9);transition:background-color var(--talos-transition, .12s ease)}.talos-data-grid-table tbody tr.is-hoverable:hover{background-color:var(--talos-neutral-subtle-bg-hover, #f8fafc)}.talos-data-grid-table tbody tr.is-clickable{cursor:pointer}.talos-data-grid-container.is-striped .talos-data-grid-table tbody tr:nth-child(2n){background-color:var(--talos-bg-subtle, #fcfdfe)}.talos-data-grid-container.is-striped .talos-data-grid-table tbody tr:nth-child(2n).is-hoverable:hover{background-color:var(--talos-neutral-subtle-bg-hover, #f8fafc)}.talos-data-grid-table tbody td{padding:var(--grid-cell-padding-y) var(--grid-cell-padding-x);font-size:var(--grid-font-size, 13.5px);color:var(--talos-text-primary, #0f172a);vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.talos-data-grid-empty{flex:1 1 auto;position:sticky;left:0;align-self:flex-start;width:100%;width:100cqw;max-width:100%;max-width:100cqw;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;color:var(--talos-text-muted, #64748b);text-align:center;gap:12px}.talos-data-grid-empty .empty-icon{opacity:.5;width:36px;height:36px;display:flex;align-items:center;justify-content:center}.talos-data-grid-empty .empty-icon ::ng-deep svg,.talos-data-grid-empty .empty-icon ::ng-deep .lucide,.talos-data-grid-empty .empty-icon svg,.talos-data-grid-empty .empty-icon .lucide{width:36px;height:36px}.talos-data-grid-empty .empty-text{font-size:var(--talos-font-size-base, 14px);font-weight:var(--talos-font-weight-medium, 500)}.talos-data-grid-pagination{position:relative;z-index:10;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-top:1px solid var(--talos-border-default, #cbd5e1);background-color:var(--talos-bg-surface, #ffffff);gap:12px;flex-wrap:wrap}.pagination-left{display:flex;align-items:center;gap:12px}.pagination-info{font-size:var(--talos-font-size-sm, 13px);color:var(--talos-text-muted, #64748b)}.pagination-size-selector{display:flex;align-items:center;gap:6px;font-size:var(--talos-font-size-sm, 13px);color:var(--talos-text-secondary, #334155)}.pagination-size-selector talos-select-input{width:76px;min-width:76px}.pagination-right{display:flex;align-items:center;gap:4px}.pagination-right ::ng-deep button.talos-btn svg,.pagination-right ::ng-deep button.talos-btn .lucide{width:14px;height:14px}.page-indicator{font-size:var(--talos-font-size-sm, 13px);color:var(--talos-text-secondary, #334155);font-weight:var(--talos-font-weight-medium, 500);padding:0 8px}.talos-data-grid-loading-overlay{position:absolute;inset:0;background:#ffffffb3;display:flex;align-items:center;justify-content:center;z-index:10;-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px)}.talos-data-grid-loading-overlay ::ng-deep svg,.talos-data-grid-loading-overlay ::ng-deep .lucide,.talos-data-grid-loading-overlay svg,.talos-data-grid-loading-overlay .lucide{width:24px;height:24px;animation:talos-grid-spin .8s linear infinite}@keyframes talos-grid-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TalosButtonDirective, selector: "button[talosButton], a[talosButton], button[talos-btn], a[talos-btn]", inputs: ["variant", "size", "iconOnly", "fullWidth", "pill", "loading", "disabled", "animation", "spinning", "popping", "feedback"] }, { kind: "component", type: SelectInputComponent, selector: "talos-select-input", inputs: ["placeholder", "label", "floatingLabel", "floating", "required", "searchable", "searchPlaceholder", "disabled", "clearable", "multiple", "size", "placement"], outputs: ["selectionChange", "opened", "closed", "searchChange"] }, { kind: "component", type: OptionComponent, selector: "talos-option", inputs: ["value", "label", "disabled"], outputs: ["selected"] }, { kind: "component", type: TalosGridStatusCellComponent, selector: "talos-grid-status-cell", inputs: ["row", "column", "rawValue"] }, { kind: "component", type: TalosGridActionsCellComponent, selector: "talos-grid-actions-cell", inputs: ["row", "rowIndex", "actions"], outputs: ["actionClick"] }, { kind: "component", type: TalosGridFilterDialogComponent, selector: "talos-grid-filter-dialog", inputs: ["column", "distinctValues", "currentFilter", "align"], outputs: ["filterApplied", "filterCleared", "closed"] }, { kind: "pipe", type: TalosGridCellFormatPipe, name: "talosGridCellFormat" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosDataGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-data-grid', imports: [
+                        NgComponentOutlet,
+                        NgTemplateOutlet,
+                        OverlayModule,
+                        CdkConnectedOverlay,
+                        CdkOverlayOrigin,
+                        FormsModule,
+                        TalosButtonDirective,
+                        SelectInputComponent,
+                        OptionComponent,
+                        TalosGridStatusCellComponent,
+                        TalosGridActionsCellComponent,
+                        TalosGridFilterDialogComponent,
+                        TalosGridCellFormatPipe,
+                    ], host: {
+                        class: 'talos-data-grid-host',
+                        '[style.min-height]': 'normalizedMinHeight()',
+                        '[style.height]': 'normalizedHeight()',
+                    }, template: "<div\n  class=\"talos-data-grid-container\"\n  [class.density-compact]=\"density() === 'compact'\"\n  [class.density-comfortable]=\"density() === 'comfortable'\"\n  [class.density-spacious]=\"density() === 'spacious'\"\n  [class.is-bordered]=\"bordered()\"\n  [class.is-striped]=\"striped()\"\n  [class.is-resizing]=\"isResizing()\"\n>\n  <!-- Loading overlay -->\n  @if (loading()) {\n    <div class=\"talos-data-grid-loading-overlay\">\n      <ng-container *ngComponentOutlet=\"loaderIcon\" />\n    </div>\n  }\n\n  <!-- Main Scrollable Table Wrapper -->\n  <div class=\"talos-data-grid-table-wrapper\">\n    <table class=\"talos-data-grid-table\" [class.has-resizable-columns]=\"hasResizableColumns()\" role=\"grid\">\n      <thead>\n        <!-- Header Column Row -->\n        <tr>\n          @for (col of columns(); track col.field) {\n            <th\n              #thEl\n              [style.width]=\"getColumnWidth(col)\"\n              [style.min-width]=\"getColumnMinWidth(col)\"\n              [style.max-width]=\"col.maxWidth\"\n              [class.align-left]=\"!col.align || col.align === 'left'\"\n              [class.align-center]=\"col.align === 'center'\"\n              [class.align-right]=\"col.align === 'right'\"\n              [class.is-sortable]=\"isSortable(col)\"\n              [class.is-sorted]=\"isSorted(col)\"\n              [class.is-resizable]=\"isResizable(col)\"\n              [class.is-resizing]=\"isColumnResizing(col.field)\"\n              (click)=\"onHeaderClick(col)\"\n              role=\"columnheader\"\n              [attr.aria-sort]=\"getAriaSort(col)\"\n            >\n              <div class=\"header-content-wrapper\">\n                <span class=\"header-title\" [title]=\"col.header\">{{ col.header }}</span>\n                @if (isSortable(col) || isFilterable(col)) {\n                  <div class=\"header-tools\">\n                    @if (isSortable(col)) {\n                      <button\n                        talosButton\n                        variant=\"ghost\"\n                        size=\"xs\"\n                        [iconOnly]=\"true\"\n                        type=\"button\"\n                        class=\"header-sort-btn\"\n                        [class.is-sorted]=\"isSorted(col)\"\n                        (click)=\"$event.stopPropagation(); onHeaderClick(col)\"\n                        [attr.aria-label]=\"'Sort by ' + col.header\"\n                        [title]=\"'Sort by ' + col.header\"\n                      >\n                        @if (getSortDirection(col) === 'asc') {\n                          <ng-container *ngComponentOutlet=\"arrowUpIcon\" />\n                        } @else if (getSortDirection(col) === 'desc') {\n                          <ng-container *ngComponentOutlet=\"arrowDownIcon\" />\n                        } @else {\n                          <ng-container *ngComponentOutlet=\"arrowUpDownIcon\" />\n                        }\n                      </button>\n                    }\n                    @if (isFilterable(col)) {\n                      <div\n                        class=\"talos-grid-filter-anchor\"\n                        [class]=\"'filter-anchor-' + col.field\"\n                        cdkOverlayOrigin\n                        #filterOrigin=\"cdkOverlayOrigin\"\n                        (click)=\"$event.stopPropagation()\"\n                      >\n                        <button\n                          talosButton\n                          variant=\"ghost\"\n                          size=\"xs\"\n                          [iconOnly]=\"true\"\n                          type=\"button\"\n                          class=\"header-filter-btn\"\n                          [class.is-active]=\"hasFilter(col.field)\"\n                          [class.is-open]=\"isFilterDialogOpen(col.field)\"\n                          (click)=\"toggleFilterDialog(col.field, $event)\"\n                          [attr.aria-label]=\"'Filter ' + col.header\"\n                          title=\"Filter\"\n                        >\n                          <ng-container *ngComponentOutlet=\"filterIcon\" />\n                        </button>\n\n                        <ng-template\n                          cdkConnectedOverlay\n                          [cdkConnectedOverlayOrigin]=\"filterOrigin\"\n                          [cdkConnectedOverlayOpen]=\"isFilterDialogOpen(col.field)\"\n                          [cdkConnectedOverlayPositions]=\"overlayPositions\"\n                          [cdkConnectedOverlayPush]=\"true\"\n                          (overlayOutsideClick)=\"onOverlayOutsideClick($event, col.field)\"\n                        >\n                          <talos-grid-filter-dialog\n                            [column]=\"col\"\n                            [distinctValues]=\"activeColumnDistinctValues()\"\n                            [currentFilter]=\"getFilter(col.field)\"\n                            [align]=\"col.align === 'right' ? 'right' : 'left'\"\n                            (filterApplied)=\"onFilterApplied($event)\"\n                            (filterCleared)=\"onFilterCleared(col.field)\"\n                            (closed)=\"closeFilterDialog()\"\n                          />\n                        </ng-template>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n              @if (isResizable(col)) {\n                <div\n                  class=\"talos-grid-resize-handle\"\n                  [class.is-resizing]=\"isColumnResizing(col.field)\"\n                  (mousedown)=\"onResizeStart(col, $event, thEl)\"\n                  (touchstart)=\"onResizeStart(col, $event, thEl)\"\n                  (dblclick)=\"onResizeDoubleClick(col, $event)\"\n                  (click)=\"$event.stopPropagation()\"\n                  role=\"separator\"\n                  aria-orientation=\"vertical\"\n                  tabindex=\"0\"\n                  [attr.aria-label]=\"'Resize ' + col.header + ' column'\"\n                  (keydown)=\"onResizeKeydown(col, $event, thEl)\"\n                ></div>\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n\n      <!-- Table Body with TrackBy for Optimal Refresh Performance -->\n      <tbody>\n        @for (row of pagedData(); track trackByRow($index, row)) {\n          <tr\n            [class.is-hoverable]=\"hoverable()\"\n            [class.is-clickable]=\"hasRowClickListeners\"\n            (click)=\"onRowClick(row, $index)\"\n            role=\"row\"\n          >\n            @for (col of columns(); track col.field) {\n              <td\n                [class.align-left]=\"!col.align || col.align === 'left'\"\n                [class.align-center]=\"col.align === 'center'\"\n                [class.align-right]=\"col.align === 'right'\"\n                role=\"gridcell\"\n              >\n                @if (col.cellTemplate) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      col.cellTemplate;\n                      context: {\n                        $implicit: getCellValue(row, col),\n                        row: row,\n                        index: $index,\n                        column: col,\n                      }\n                    \"\n                  />\n                } @else if (col.type === 'status') {\n                  <talos-grid-status-cell\n                    [row]=\"row\"\n                    [column]=\"col\"\n                    [rawValue]=\"getCellValue(row, col)\"\n                  />\n                } @else if (col.type === 'actions' && col.actionsConfig) {\n                  <talos-grid-actions-cell\n                    [row]=\"row\"\n                    [rowIndex]=\"$index\"\n                    [actions]=\"col.actionsConfig\"\n                    (actionClick)=\"actionClick.emit($event)\"\n                  />\n                } @else {\n                  {{ row | talosGridCellFormat: col }}\n                }\n              </td>\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n\n    <!-- Empty State -->\n    @if (pagedData().length === 0) {\n      <div class=\"talos-data-grid-empty\">\n        <div class=\"empty-icon\">\n          <ng-container *ngComponentOutlet=\"inboxIcon\" />\n        </div>\n        <div class=\"empty-text\">\n          @if (hasActiveFilters()) {\n            <span>No results matching the active filters.</span>\n          } @else {\n            <span>{{ emptyMessage() }}</span>\n          }\n        </div>\n        @if (hasActiveFilters()) {\n          <button talosButton variant=\"outline\" size=\"sm\" (click)=\"clearAllFilters()\">\n            Clear Filters\n          </button>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Pagination Bar -->\n  @if (pagination()) {\n    <div class=\"talos-data-grid-pagination\">\n      <div class=\"pagination-left\">\n        <span class=\"pagination-info\">\n          Showing {{ startRecord() }} to {{ endRecord() }} of {{ totalCount() }} entries\n        </span>\n\n        @if (pageSizeOptions().length > 1) {\n          <div class=\"pagination-size-selector\">\n            <span>Rows per page:</span>\n            <talos-select-input\n              size=\"sm\"\n              placement=\"top\"\n              [ngModel]=\"internalPageSize()\"\n              (selectionChange)=\"onPageSizeChange(+$any($event))\"\n              aria-label=\"Select page size\"\n            >\n              @for (size of pageSizeOptions(); track size) {\n                <talos-option [value]=\"size\" [label]=\"size.toString()\">{{ size }}</talos-option>\n              }\n            </talos-select-input>\n          </div>\n        }\n      </div>\n\n      <div class=\"pagination-right\">\n        <button\n          talosButton\n          variant=\"ghost\"\n          size=\"sm\"\n          [iconOnly]=\"true\"\n          [disabled]=\"internalPageIndex() <= 0\"\n          (click)=\"setPage(0)\"\n          title=\"First page\"\n          aria-label=\"First page\"\n        >\n          <ng-container *ngComponentOutlet=\"chevronsLeftIcon\" />\n        </button>\n\n        <button\n          talosButton\n          variant=\"ghost\"\n          size=\"sm\"\n          [iconOnly]=\"true\"\n          [disabled]=\"internalPageIndex() <= 0\"\n          (click)=\"setPage(internalPageIndex() - 1)\"\n          title=\"Previous page\"\n          aria-label=\"Previous page\"\n        >\n          <ng-container *ngComponentOutlet=\"chevronLeftIcon\" />\n        </button>\n\n        <span class=\"page-indicator\">\n          Page {{ internalPageIndex() + 1 }} of {{ totalPages() }}\n        </span>\n\n        <button\n          talosButton\n          variant=\"ghost\"\n          size=\"sm\"\n          [iconOnly]=\"true\"\n          [disabled]=\"internalPageIndex() >= totalPages() - 1\"\n          (click)=\"setPage(internalPageIndex() + 1)\"\n          title=\"Next page\"\n          aria-label=\"Next page\"\n        >\n          <ng-container *ngComponentOutlet=\"chevronRightIcon\" />\n        </button>\n\n        <button\n          talosButton\n          variant=\"ghost\"\n          size=\"sm\"\n          [iconOnly]=\"true\"\n          [disabled]=\"internalPageIndex() >= totalPages() - 1\"\n          (click)=\"setPage(totalPages() - 1)\"\n          title=\"Last page\"\n          aria-label=\"Last page\"\n        >\n          <ng-container *ngComponentOutlet=\"chevronsRightIcon\" />\n        </button>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%;min-height:var(--talos-data-grid-min-height, 240px);flex:1 1 auto;font-family:var(--talos-font-sans, system-ui, -apple-system, sans-serif);color:var(--talos-text-primary, #0f172a)}.talos-data-grid-container{display:flex;flex-direction:column;background-color:var(--talos-bg-surface, #ffffff);border-radius:var(--talos-radius-lg, 8px);position:relative;width:100%;height:100%;min-height:inherit;flex:1 1 auto;overflow:hidden;container-type:inline-size}.talos-data-grid-container.is-bordered{border:1px solid var(--talos-border-default, #cbd5e1)}.talos-data-grid-container.is-resizing{cursor:col-resize!important;-webkit-user-select:none!important;user-select:none!important}.talos-data-grid-container.is-resizing *{-webkit-user-select:none!important;user-select:none!important;cursor:col-resize!important}.talos-data-grid-table-wrapper{width:100%;flex:1 1 auto;min-height:0;overflow-x:auto;overflow-y:auto;position:relative;display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:var(--talos-border-default, #cbd5e1) transparent}.talos-data-grid-table-wrapper::-webkit-scrollbar{height:6px;width:6px}.talos-data-grid-table-wrapper::-webkit-scrollbar-thumb{background:var(--talos-border-default, #cbd5e1);border-radius:4px}.talos-data-grid-table{width:max-content;min-width:100%;border-collapse:collapse;text-align:left;font-size:var(--talos-font-size-sm, 13px);line-height:var(--talos-line-height-normal, 1.5);flex-shrink:0}.talos-data-grid-container.density-compact{--grid-header-padding-y: 6px;--grid-header-padding-x: 10px;--grid-cell-padding-y: 5px;--grid-cell-padding-x: 10px;--grid-font-size: 12px;--grid-header-font-size: 11px;--grid-filter-height: 24px}.talos-data-grid-container.density-comfortable{--grid-header-padding-y: 10px;--grid-header-padding-x: 14px;--grid-cell-padding-y: 9px;--grid-cell-padding-x: 14px;--grid-font-size: 13.5px;--grid-header-font-size: 12px;--grid-filter-height: 28px}.talos-data-grid-container.density-spacious{--grid-header-padding-y: 14px;--grid-header-padding-x: 18px;--grid-cell-padding-y: 14px;--grid-cell-padding-x: 18px;--grid-font-size: 14.5px;--grid-header-font-size: 13px;--grid-filter-height: 32px}.talos-data-grid-table thead th{position:sticky;top:0;z-index:2;min-width:max-content;background-color:var(--talos-bg-subtle, #f8fafc);color:var(--talos-text-secondary, #475569);font-size:var(--grid-header-font-size, 12px);font-weight:var(--talos-font-weight-semibold, 600);text-transform:uppercase;letter-spacing:.04em;padding:var(--grid-header-padding-y) 8px var(--grid-header-padding-y) var(--grid-header-padding-x);border-bottom:1px solid var(--talos-border-default, #cbd5e1);white-space:nowrap;-webkit-user-select:none;user-select:none;vertical-align:middle;overflow:hidden}.talos-data-grid-table thead th.is-sortable{cursor:pointer;transition:background-color var(--talos-transition, .15s ease)}.talos-data-grid-table thead th.is-sortable:hover{background-color:var(--talos-neutral-subtle-bg-hover, #f1f5f9);color:var(--talos-text-primary, #0f172a)}.talos-data-grid-table thead th.is-sorted{color:var(--talos-primary, #2563eb);background-color:var(--talos-primary-subtle-bg, #eff6ff)}.talos-data-grid-table thead th.is-resizable{padding-right:10px}.talos-data-grid-table thead th.is-resizing{background-color:var(--talos-neutral-subtle-bg-hover, #f1f5f9)}.header-content-wrapper{display:flex;align-items:center;gap:4px;width:100%;min-width:0;overflow:hidden}.header-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-tools{display:inline-flex;align-items:center;gap:2px;flex-shrink:0}.sort-icon-wrapper{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;opacity:.45;transition:opacity var(--talos-transition, .15s ease),transform .15s ease}.sort-icon-wrapper ::ng-deep svg,.sort-icon-wrapper ::ng-deep .lucide,.sort-icon-wrapper svg,.sort-icon-wrapper .lucide{width:13px!important;height:13px!important;display:block}.is-sortable:hover .sort-icon-wrapper{opacity:.85}.is-sorted .sort-icon-wrapper{opacity:1;color:var(--talos-primary, #2563eb)}.header-sort-btn{width:22px!important;height:22px!important;min-width:22px!important;padding:0!important;border-radius:var(--talos-radius-sm, 4px)!important;border:1px solid transparent!important;background:transparent!important;color:var(--talos-text-muted, #94a3b8)!important;cursor:pointer;opacity:.45;transition:all var(--talos-transition, .15s ease);box-shadow:none!important}.header-sort-btn ::ng-deep svg,.header-sort-btn ::ng-deep .lucide,.header-sort-btn svg,.header-sort-btn .lucide{width:13px!important;height:13px!important;display:block;flex-shrink:0}th:hover .header-sort-btn{opacity:.85}.header-sort-btn:hover{opacity:1;color:var(--talos-text-primary, #0f172a)!important;background:var(--talos-neutral-subtle-bg-hover, rgba(0, 0, 0, .06))!important}.header-sort-btn.is-sorted{opacity:1;color:var(--talos-primary, #2563eb)!important;background:var(--talos-primary-subtle-bg, #eff6ff)!important}.align-left{text-align:left}.align-left .header-content-wrapper{justify-content:flex-start}.align-center{text-align:center}.align-center .header-content-wrapper{justify-content:center}.align-right{text-align:right}.align-right .header-content-wrapper{justify-content:flex-end}.talos-grid-resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;-webkit-user-select:none;user-select:none;touch-action:none;z-index:3;display:flex;align-items:center;justify-content:center}.talos-grid-resize-handle:after{content:\"\";display:block;width:2px;height:50%;border-radius:1px;background-color:transparent;transition:background-color var(--talos-transition, .15s ease),height var(--talos-transition, .15s ease)}.talos-grid-resize-handle:hover:after,.talos-grid-resize-handle:focus-visible:after,.talos-grid-resize-handle.is-resizing:after{background-color:var(--talos-primary, #2563eb);height:100%}.talos-grid-resize-handle:focus-visible{outline:none}.talos-grid-filter-anchor{position:relative;display:inline-flex;align-items:center}.header-filter-btn{display:inline-flex;align-items:center;justify-content:center;width:22px!important;height:22px!important;min-width:22px!important;padding:0!important;border-radius:var(--talos-radius-sm, 4px)!important;border:1px solid transparent!important;background:transparent!important;color:var(--talos-text-muted, #94a3b8)!important;cursor:pointer;opacity:.5;transition:all var(--talos-transition, .15s ease);box-shadow:none!important}.header-filter-btn ::ng-deep svg,.header-filter-btn ::ng-deep .lucide,.header-filter-btn svg,.header-filter-btn .lucide{width:13px!important;height:13px!important;display:block;flex-shrink:0}th:hover .header-filter-btn{opacity:.85}.header-filter-btn:hover,.header-filter-btn.is-open{opacity:1;color:var(--talos-text-primary, #0f172a)!important;background:var(--talos-neutral-subtle-bg-hover, rgba(0, 0, 0, .06))!important}.header-filter-btn.is-active{opacity:1;color:#fff!important;background:var(--talos-primary, #2563eb)!important;border-color:var(--talos-primary, #2563eb)!important}.talos-data-grid-table tbody tr{border-bottom:1px solid var(--talos-border-subtle, #f1f5f9);transition:background-color var(--talos-transition, .12s ease)}.talos-data-grid-table tbody tr.is-hoverable:hover{background-color:var(--talos-neutral-subtle-bg-hover, #f8fafc)}.talos-data-grid-table tbody tr.is-clickable{cursor:pointer}.talos-data-grid-container.is-striped .talos-data-grid-table tbody tr:nth-child(2n){background-color:var(--talos-bg-subtle, #fcfdfe)}.talos-data-grid-container.is-striped .talos-data-grid-table tbody tr:nth-child(2n).is-hoverable:hover{background-color:var(--talos-neutral-subtle-bg-hover, #f8fafc)}.talos-data-grid-table tbody td{padding:var(--grid-cell-padding-y) var(--grid-cell-padding-x);font-size:var(--grid-font-size, 13.5px);color:var(--talos-text-primary, #0f172a);vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.talos-data-grid-empty{flex:1 1 auto;position:sticky;left:0;align-self:flex-start;width:100%;width:100cqw;max-width:100%;max-width:100cqw;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;color:var(--talos-text-muted, #64748b);text-align:center;gap:12px}.talos-data-grid-empty .empty-icon{opacity:.5;width:36px;height:36px;display:flex;align-items:center;justify-content:center}.talos-data-grid-empty .empty-icon ::ng-deep svg,.talos-data-grid-empty .empty-icon ::ng-deep .lucide,.talos-data-grid-empty .empty-icon svg,.talos-data-grid-empty .empty-icon .lucide{width:36px;height:36px}.talos-data-grid-empty .empty-text{font-size:var(--talos-font-size-base, 14px);font-weight:var(--talos-font-weight-medium, 500)}.talos-data-grid-pagination{position:relative;z-index:10;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-top:1px solid var(--talos-border-default, #cbd5e1);background-color:var(--talos-bg-surface, #ffffff);gap:12px;flex-wrap:wrap}.pagination-left{display:flex;align-items:center;gap:12px}.pagination-info{font-size:var(--talos-font-size-sm, 13px);color:var(--talos-text-muted, #64748b)}.pagination-size-selector{display:flex;align-items:center;gap:6px;font-size:var(--talos-font-size-sm, 13px);color:var(--talos-text-secondary, #334155)}.pagination-size-selector talos-select-input{width:76px;min-width:76px}.pagination-right{display:flex;align-items:center;gap:4px}.pagination-right ::ng-deep button.talos-btn svg,.pagination-right ::ng-deep button.talos-btn .lucide{width:14px;height:14px}.page-indicator{font-size:var(--talos-font-size-sm, 13px);color:var(--talos-text-secondary, #334155);font-weight:var(--talos-font-weight-medium, 500);padding:0 8px}.talos-data-grid-loading-overlay{position:absolute;inset:0;background:#ffffffb3;display:flex;align-items:center;justify-content:center;z-index:10;-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px)}.talos-data-grid-loading-overlay ::ng-deep svg,.talos-data-grid-loading-overlay ::ng-deep .lucide,.talos-data-grid-loading-overlay svg,.talos-data-grid-loading-overlay .lucide{width:24px;height:24px;animation:talos-grid-spin .8s linear infinite}@keyframes talos-grid-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], pageIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageIndex", required: false }] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], clientSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "clientSort", required: false }] }], clientPagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "clientPagination", required: false }] }], clientFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "clientFilter", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], columnResize: [{ type: i0.Output, args: ["columnResize"] }] } });
+
+class TalosDataGridModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosDataGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: TalosDataGridModule, imports: [TalosDataGridComponent,
+            TalosGridStatusCellComponent,
+            TalosGridActionsCellComponent,
+            TalosGridFilterDialogComponent,
+            TalosGridCellFormatPipe], exports: [TalosDataGridComponent,
+            TalosGridStatusCellComponent,
+            TalosGridActionsCellComponent,
+            TalosGridFilterDialogComponent,
+            TalosGridCellFormatPipe] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosDataGridModule, imports: [TalosDataGridComponent,
+            TalosGridFilterDialogComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosDataGridModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        TalosDataGridComponent,
+                        TalosGridStatusCellComponent,
+                        TalosGridActionsCellComponent,
+                        TalosGridFilterDialogComponent,
+                        TalosGridCellFormatPipe,
+                    ],
+                    exports: [
+                        TalosDataGridComponent,
+                        TalosGridStatusCellComponent,
+                        TalosGridActionsCellComponent,
+                        TalosGridFilterDialogComponent,
+                        TalosGridCellFormatPipe,
+                    ],
+                }]
+        }] });
+
+class TalosTimelineDotDirective {
+    templateRef = inject(TemplateRef, { optional: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosTimelineDotDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: TalosTimelineDotDirective, isStandalone: true, selector: "[talosTimelineDot], ng-template[talosTimelineDot]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosTimelineDotDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[talosTimelineDot], ng-template[talosTimelineDot]'
+                }]
+        }] });
+class TalosTimelineTitleDirective {
+    templateRef = inject(TemplateRef, { optional: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosTimelineTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: TalosTimelineTitleDirective, isStandalone: true, selector: "[talosTimelineTitle], ng-template[talosTimelineTitle]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosTimelineTitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[talosTimelineTitle], ng-template[talosTimelineTitle]'
+                }]
+        }] });
+class TalosTimelineTimeDirective {
+    templateRef = inject(TemplateRef, { optional: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosTimelineTimeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: TalosTimelineTimeDirective, isStandalone: true, selector: "[talosTimelineTime], ng-template[talosTimelineTime]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosTimelineTimeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[talosTimelineTime], ng-template[talosTimelineTime]'
+                }]
+        }] });
+class TalosTimelineContentDirective {
+    templateRef = inject(TemplateRef, { optional: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosTimelineContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: TalosTimelineContentDirective, isStandalone: true, selector: "[talosTimelineContent], ng-template[talosTimelineContent]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosTimelineContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[talosTimelineContent], ng-template[talosTimelineContent]'
+                }]
+        }] });
+class TalosTimelineExtraDirective {
+    templateRef = inject(TemplateRef, { optional: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosTimelineExtraDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: TalosTimelineExtraDirective, isStandalone: true, selector: "[talosTimelineExtra], ng-template[talosTimelineExtra]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosTimelineExtraDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[talosTimelineExtra], ng-template[talosTimelineExtra]'
+                }]
+        }] });
+
+class TalosTimelineItemComponent {
+    // Inputs
+    status = input('neutral', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    dotVariant = input('solid', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dotVariant" }] : /* istanbul ignore next */ []));
+    dotSize = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dotSize" }] : /* istanbul ignore next */ []));
+    dotColor = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dotColor" }] : /* istanbul ignore next */ []));
+    icon = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    loading = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    active = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    lineStyle = input('solid', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lineStyle" }] : /* istanbul ignore next */ []));
+    timestamp = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timestamp" }] : /* istanbul ignore next */ []));
+    relativeTime = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "relativeTime" }] : /* istanbul ignore next */ []));
+    title = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    description = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    actor = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actor" }] : /* istanbul ignore next */ []));
+    tags = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tags" }] : /* istanbul ignore next */ []));
+    diffs = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "diffs" }] : /* istanbul ignore next */ []));
+    metadata = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "metadata" }] : /* istanbul ignore next */ []));
+    expandable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expandable" }] : /* istanbul ignore next */ []));
+    expanded = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    position = input('left', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    isLast = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLast" }] : /* istanbul ignore next */ []));
+    // Outputs
+    itemClick = output();
+    toggleExpand = output();
+    // Slot Directives
+    customDot;
+    customTitle;
+    customTime;
+    customContent;
+    customExtra;
+    // Internal state for accordion / collapse linked to input
+    isExpanded = linkedSignal(() => this.expanded(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
+    hasExpandableDetails = computed(() => {
+        return (this.expandable() ||
+            (this.diffs() && this.diffs().length > 0) ||
+            (this.metadata() && Object.keys(this.metadata()).length > 0));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasExpandableDetails" }] : /* istanbul ignore next */ []));
+    effectiveIcon = computed(() => {
+        if (this.loading()) {
+            return LucideLoader2;
+        }
+        if (this.icon()) {
+            return this.icon();
+        }
+        switch (this.status()) {
+            case 'success':
+            case 'completed':
+                return LucideCheck;
+            case 'error':
+            case 'cancelled':
+                return LucideAlertCircle;
+            case 'warning':
+                return LucideAlertTriangle;
+            case 'info':
+                return LucideInfo;
+            case 'pending':
+            case 'in-progress':
+                return LucideClock;
+            default:
+                return null;
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveIcon" }] : /* istanbul ignore next */ []));
+    isStatus(expected) {
+        return this.status() === expected;
+    }
+    toggleAccordion() {
+        this.isExpanded.update(current => !current);
+        this.toggleExpand.emit(this.isExpanded());
+    }
+    onItemClicked() {
+        this.itemClick.emit();
+    }
+    isDateObject(val) {
+        return val instanceof Date;
+    }
+    formatJsonValue(val) {
+        if (typeof val === 'string')
+            return `"${val}"`;
+        if (typeof val === 'object' && val !== null)
+            return JSON.stringify(val);
+        return String(val);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosTimelineItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TalosTimelineItemComponent, isStandalone: true, selector: "talos-timeline-item, [talosTimelineItem]", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, dotVariant: { classPropertyName: "dotVariant", publicName: "dotVariant", isSignal: true, isRequired: false, transformFunction: null }, dotSize: { classPropertyName: "dotSize", publicName: "dotSize", isSignal: true, isRequired: false, transformFunction: null }, dotColor: { classPropertyName: "dotColor", publicName: "dotColor", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, lineStyle: { classPropertyName: "lineStyle", publicName: "lineStyle", isSignal: true, isRequired: false, transformFunction: null }, timestamp: { classPropertyName: "timestamp", publicName: "timestamp", isSignal: true, isRequired: false, transformFunction: null }, relativeTime: { classPropertyName: "relativeTime", publicName: "relativeTime", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, actor: { classPropertyName: "actor", publicName: "actor", isSignal: true, isRequired: false, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: false, transformFunction: null }, diffs: { classPropertyName: "diffs", publicName: "diffs", isSignal: true, isRequired: false, transformFunction: null }, metadata: { classPropertyName: "metadata", publicName: "metadata", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, isLast: { classPropertyName: "isLast", publicName: "isLast", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", toggleExpand: "toggleExpand" }, host: { properties: { "class.talos-timeline-item--primary": "isStatus(\"primary\")", "class.talos-timeline-item--secondary": "isStatus(\"secondary\")", "class.talos-timeline-item--success": "isStatus(\"success\") || isStatus(\"completed\")", "class.talos-timeline-item--warning": "isStatus(\"warning\")", "class.talos-timeline-item--error": "isStatus(\"error\") || isStatus(\"cancelled\")", "class.talos-timeline-item--info": "isStatus(\"info\")", "class.talos-timeline-item--neutral": "isStatus(\"neutral\")", "class.talos-timeline-item--pending": "isStatus(\"pending\")", "class.talos-timeline-item--in-progress": "isStatus(\"in-progress\")", "class.talos-timeline-item--loading": "loading()", "class.talos-timeline-item--active": "active()", "class.talos-timeline-item--last": "isLast()", "class.talos-timeline-item--left": "position() === \"left\"", "class.talos-timeline-item--right": "position() === \"right\"", "class.talos-timeline-item--expanded": "isExpanded()" }, classAttribute: "talos-timeline-item" }, queries: [{ propertyName: "customDot", first: true, predicate: TalosTimelineDotDirective, descendants: true }, { propertyName: "customTitle", first: true, predicate: TalosTimelineTitleDirective, descendants: true }, { propertyName: "customTime", first: true, predicate: TalosTimelineTimeDirective, descendants: true }, { propertyName: "customContent", first: true, predicate: TalosTimelineContentDirective, descendants: true }, { propertyName: "customExtra", first: true, predicate: TalosTimelineExtraDirective, descendants: true }], ngImport: i0, template: "<!-- Left / Opposite Slot (Used for Timestamps/Actor in Alternating or Two-Sided mode) -->\n<div class=\"talos-timeline-item__opposite\" aria-hidden=\"true\">\n  @if (customTime?.templateRef) {\n    <ng-container [ngTemplateOutlet]=\"customTime!.templateRef!\" />\n  } @else if (timestamp() || relativeTime()) {\n    <div class=\"talos-timeline-item__time-stamp\">\n      @if (relativeTime()) {\n        <span class=\"talos-timeline-item__relative-time\">{{ relativeTime() }}</span>\n      }\n      @if (timestamp()) {\n        <span class=\"talos-timeline-item__absolute-time\">\n          @if (isDateObject(timestamp())) {\n            {{ timestamp() | date: 'medium' }}\n          } @else {\n            {{ timestamp() }}\n          }\n        </span>\n      }\n    </div>\n  }\n</div>\n\n<!-- Separator Column: Connector Track & Dot Marker -->\n<div class=\"talos-timeline-item__separator\">\n  <div\n    class=\"talos-timeline-item__connector talos-timeline-item__connector--top\"\n    [class.talos-timeline-item__connector--dashed]=\"lineStyle() === 'dashed'\"\n    [class.talos-timeline-item__connector--dotted]=\"lineStyle() === 'dotted'\"\n  ></div>\n\n  <div\n    class=\"talos-timeline-item__dot\"\n    [class.talos-timeline-item__dot--solid]=\"dotVariant() === 'solid'\"\n    [class.talos-timeline-item__dot--subtle]=\"dotVariant() === 'subtle'\"\n    [class.talos-timeline-item__dot--outline]=\"dotVariant() === 'outline'\"\n    [class.talos-timeline-item__dot--pure-dot]=\"dotVariant() === 'dot'\"\n    [class.talos-timeline-item__dot--xs]=\"dotSize() === 'xs'\"\n    [class.talos-timeline-item__dot--sm]=\"dotSize() === 'sm'\"\n    [class.talos-timeline-item__dot--md]=\"dotSize() === 'md'\"\n    [class.talos-timeline-item__dot--lg]=\"dotSize() === 'lg'\"\n    [class.talos-timeline-item__dot--loading]=\"loading()\"\n    [style.background-color]=\"dotColor()\"\n    [style.border-color]=\"dotColor()\"\n  >\n    @if (customDot?.templateRef) {\n      <ng-container [ngTemplateOutlet]=\"customDot!.templateRef!\" />\n    } @else if (effectiveIcon()) {\n      <ng-container *ngComponentOutlet=\"effectiveIcon()!\" />\n    }\n  </div>\n\n  <div\n    class=\"talos-timeline-item__connector talos-timeline-item__connector--bottom\"\n    [class.talos-timeline-item__connector--dashed]=\"lineStyle() === 'dashed'\"\n    [class.talos-timeline-item__connector--dotted]=\"lineStyle() === 'dotted'\"\n  ></div>\n</div>\n\n<!-- Main Body / Content Area -->\n<div class=\"talos-timeline-item__body\" (click)=\"onItemClicked()\">\n  <div class=\"talos-timeline-item__header\">\n    <div class=\"talos-timeline-item__title-group\">\n      <!-- Projected or Input Title -->\n      @if (customTitle?.templateRef) {\n        <ng-container [ngTemplateOutlet]=\"customTitle!.templateRef!\" />\n      } @else if (title()) {\n        <h4 class=\"talos-timeline-item__title\">{{ title() }}</h4>\n      }\n\n      <!-- Status Indicator Pill -->\n      @if (status() && status() !== 'neutral') {\n        <span class=\"talos-timeline-item__status-badge talos-timeline-item__status-badge--{{ status() }}\">\n          {{ status() }}\n        </span>\n      }\n    </div>\n\n    <!-- Header Right / Metadata (Timestamp in Left Align mode) -->\n    <div class=\"talos-timeline-item__header-meta\">\n      @if (relativeTime()) {\n        <span class=\"talos-timeline-item__header-time\">{{ relativeTime() }}</span>\n      } @else if (timestamp()) {\n        <span class=\"talos-timeline-item__header-time\">\n          @if (isDateObject(timestamp())) {\n            {{ timestamp() | date: 'short' }}\n          } @else {\n            {{ timestamp() }}\n          }\n        </span>\n      }\n\n      @if (hasExpandableDetails()) {\n        <button\n          type=\"button\"\n          class=\"talos-timeline-item__expand-btn\"\n          [attr.aria-expanded]=\"isExpanded()\"\n          aria-label=\"Toggle audit details\"\n          (click)=\"toggleAccordion(); $event.stopPropagation()\"\n        >\n          @if (isExpanded()) {\n            <svg lucideChevronUp [size]=\"14\"></svg>\n          } @else {\n            <svg lucideChevronDown [size]=\"14\"></svg>\n          }\n        </button>\n      }\n    </div>\n  </div>\n\n  <!-- Actor Info for Audit Logs -->\n  @if (actor(); as currentActor) {\n    <div class=\"talos-timeline-item__actor\">\n      <div class=\"talos-timeline-item__actor-avatar\">\n        @if (currentActor.avatar) {\n          <img [src]=\"currentActor.avatar\" [alt]=\"currentActor.name\" />\n        } @else {\n          <svg lucideUser [size]=\"12\"></svg>\n        }\n      </div>\n      <div class=\"talos-timeline-item__actor-details\">\n        <span class=\"talos-timeline-item__actor-name\">{{ currentActor.name }}</span>\n        @if (currentActor.role) {\n          <span class=\"talos-timeline-item__actor-role\">{{ currentActor.role }}</span>\n        }\n        @if (currentActor.ip) {\n          <span class=\"talos-timeline-item__actor-ip\">({{ currentActor.ip }})</span>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Description / Content Area -->\n  <div class=\"talos-timeline-item__content\">\n    @if (customContent?.templateRef) {\n      <ng-container [ngTemplateOutlet]=\"customContent!.templateRef!\" />\n    } @else if (description()) {\n      <p class=\"talos-timeline-item__description\">{{ description() }}</p>\n    }\n    <ng-content></ng-content>\n  </div>\n\n  <!-- Tags Pill Row -->\n  @if (tags() && tags()!.length > 0) {\n    <div class=\"talos-timeline-item__tags\">\n      @for (tag of tags()!; track tag) {\n        <span class=\"talos-timeline-item__tag\">{{ tag }}</span>\n      }\n    </div>\n  }\n\n  <!-- Audit Change Diffs (Expanded / Default) -->\n  @if (diffs() && diffs()!.length > 0 && isExpanded()) {\n    <div class=\"talos-timeline-item__diffs-table-wrapper\">\n      <table class=\"talos-timeline-item__diffs-table\">\n        <thead>\n          <tr>\n            <th>Field</th>\n            <th>Previous Value</th>\n            <th>New Value</th>\n          </tr>\n        </thead>\n        <tbody>\n          @for (diff of diffs()!; track diff.field) {\n            <tr class=\"talos-timeline-item__diff-row talos-timeline-item__diff-row--{{ diff.type || 'modified' }}\">\n              <td class=\"talos-timeline-item__diff-field\">{{ diff.field }}</td>\n              <td class=\"talos-timeline-item__diff-old\">\n                <code>{{ formatJsonValue(diff.previousValue) }}</code>\n              </td>\n              <td class=\"talos-timeline-item__diff-new\">\n                <code>{{ formatJsonValue(diff.newValue) }}</code>\n              </td>\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n  }\n\n  <!-- Expandable JSON / Metadata -->\n  @if (metadata() && isExpanded()) {\n    <div class=\"talos-timeline-item__metadata-card\">\n      <div class=\"talos-timeline-item__metadata-header\">Metadata & Payload</div>\n      <div class=\"talos-timeline-item__metadata-grid\">\n        @for (entry of metadata()! | keyvalue; track entry.key) {\n          <div class=\"talos-timeline-item__meta-item\">\n            <span class=\"talos-timeline-item__meta-key\">{{ entry.key }}:</span>\n            <span class=\"talos-timeline-item__meta-val\"><code>{{ formatJsonValue(entry.value) }}</code></span>\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Extra Slot Projection -->\n  @if (customExtra?.templateRef) {\n    <div class=\"talos-timeline-item__extra\">\n      <ng-container [ngTemplateOutlet]=\"customExtra!.templateRef!\" />\n    </div>\n  }\n</div>\n", styles: [":host{display:flex;position:relative;min-height:4.5rem;box-sizing:border-box;--timeline-line-color: var(--talos-border-color, #e2e8f0);--timeline-line-width: 2px;--timeline-dot-size: 1.5rem;--timeline-dot-color: var(--talos-text-muted, #64748b);--timeline-dot-bg: var(--talos-card-bg, #ffffff);--timeline-dot-border: var(--talos-border-color, #cbd5e1);--timeline-title-color: var(--talos-text-color, #0f172a);--timeline-desc-color: var(--talos-text-muted, #475569);--timeline-time-color: var(--talos-text-muted, #64748b)}:host(.talos-timeline-item--primary){--timeline-dot-color: var(--talos-primary-color, #2563eb);--timeline-dot-border: var(--talos-primary-color, #2563eb);--timeline-dot-bg: var(--talos-primary-color, #2563eb)}:host(.talos-timeline-item--secondary){--timeline-dot-color: #6366f1;--timeline-dot-border: #6366f1;--timeline-dot-bg: #6366f1}:host(.talos-timeline-item--success){--timeline-dot-color: var(--talos-success-color, #16a34a);--timeline-dot-border: var(--talos-success-color, #16a34a);--timeline-dot-bg: var(--talos-success-color, #16a34a)}:host(.talos-timeline-item--warning){--timeline-dot-color: var(--talos-warning-color, #d97706);--timeline-dot-border: var(--talos-warning-color, #d97706);--timeline-dot-bg: var(--talos-warning-color, #d97706)}:host(.talos-timeline-item--error){--timeline-dot-color: var(--talos-error-color, #ef4444);--timeline-dot-border: var(--talos-error-color, #ef4444);--timeline-dot-bg: var(--talos-error-color, #ef4444)}:host(.talos-timeline-item--info){--timeline-dot-color: #0284c7;--timeline-dot-border: #0284c7;--timeline-dot-bg: #0284c7}:host(.talos-timeline-item--pending),:host(.talos-timeline-item--in-progress){--timeline-dot-color: #0ea5e9;--timeline-dot-border: #0ea5e9;--timeline-dot-bg: #0ea5e9}.talos-timeline-item__opposite{display:none;flex:1;padding:0 1.25rem 1rem 0;text-align:right;box-sizing:border-box}.talos-timeline-item__opposite .talos-timeline-item__time-stamp{display:flex;flex-direction:column;gap:.125rem}.talos-timeline-item__opposite .talos-timeline-item__relative-time{font-size:.8125rem;font-weight:600;color:var(--timeline-title-color)}.talos-timeline-item__opposite .talos-timeline-item__absolute-time{font-size:.75rem;color:var(--timeline-time-color)}.talos-timeline-item__separator{display:flex;flex-direction:column;align-items:center;position:relative;min-width:2rem;margin:0 .75rem 0 0}.talos-timeline-item__connector{width:var(--timeline-line-width);background-color:var(--timeline-line-color);flex-grow:1}.talos-timeline-item__connector--top{height:.5rem;flex-grow:0}.talos-timeline-item__connector--dashed{background:none;border-left:var(--timeline-line-width) dashed var(--timeline-line-color)}.talos-timeline-item__connector--dotted{background:none;border-left:var(--timeline-line-width) dotted var(--timeline-line-color)}:host(:first-child) .talos-timeline-item__connector--top{visibility:hidden}:host(.talos-timeline-item--last) .talos-timeline-item__connector--bottom{visibility:hidden}.talos-timeline-item__dot{display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;box-sizing:border-box;flex-shrink:0;z-index:1;line-height:0;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 0 0 4px var(--talos-card-bg, #ffffff)}.talos-timeline-item__dot>*{display:inline-flex;align-items:center;justify-content:center;line-height:0;width:auto;height:auto}.talos-timeline-item__dot svg{display:block;stroke-width:2.25;overflow:visible}.talos-timeline-item__dot--xs{width:.625rem;height:.625rem;min-width:.625rem;min-height:.625rem}.talos-timeline-item__dot--sm{width:1.375rem;height:1.375rem;min-width:1.375rem;min-height:1.375rem}.talos-timeline-item__dot--sm svg,.talos-timeline-item__dot--sm>*{width:.6875rem!important;height:.6875rem!important;max-width:.6875rem!important;max-height:.6875rem!important}.talos-timeline-item__dot--md{width:1.875rem;height:1.875rem;min-width:1.875rem;min-height:1.875rem}.talos-timeline-item__dot--md svg,.talos-timeline-item__dot--md>*{width:.8125rem!important;height:.8125rem!important;max-width:.8125rem!important;max-height:.8125rem!important}.talos-timeline-item__dot--lg{width:2.375rem;height:2.375rem;min-width:2.375rem;min-height:2.375rem}.talos-timeline-item__dot--lg svg,.talos-timeline-item__dot--lg>*{width:1rem!important;height:1rem!important;max-width:1rem!important;max-height:1rem!important}.talos-timeline-item__dot--solid{background-color:var(--timeline-dot-bg);color:#fff;border:1px solid var(--timeline-dot-border)}.talos-timeline-item__dot--subtle{background-color:var(--talos-bg-subtle, #f1f5f9);color:var(--timeline-dot-color);border:1.5px solid var(--timeline-dot-border)}.talos-timeline-item__dot--outline{background-color:var(--talos-card-bg, #ffffff);color:var(--timeline-dot-color);border:2px solid var(--timeline-dot-border)}.talos-timeline-item__dot--pure-dot{background-color:var(--timeline-dot-bg);border:2px solid var(--talos-card-bg, #ffffff);width:.75rem;height:.75rem;min-width:.75rem;min-height:.75rem}.talos-timeline-item__dot--loading{animation:talosTimelineSpin 1s linear infinite}:host(.talos-timeline-item--loading) .talos-timeline-item__dot{box-shadow:0 0 0 4px var(--talos-card-bg, #ffffff),0 0 0 6px #2563eb40;animation:talosTimelinePulse 2s cubic-bezier(.4,0,.6,1) infinite}.talos-timeline-item__body{flex:1;padding-bottom:1.5rem;min-width:0}.talos-timeline-item__header{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;margin-bottom:.25rem}.talos-timeline-item__title-group{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}.talos-timeline-item__title{margin:0;font-size:.9375rem;font-weight:600;color:var(--timeline-title-color);line-height:1.4}.talos-timeline-item__status-badge{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:9999px;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;background-color:var(--talos-bg-subtle, #f1f5f9);color:var(--talos-text-muted, #64748b);border:1px solid var(--talos-border-color, #e2e8f0)}.talos-timeline-item__status-badge--primary{background-color:#2563eb1a;color:#2563eb;border-color:#2563eb33}.talos-timeline-item__status-badge--success,.talos-timeline-item__status-badge--completed{background-color:#16a34a1a;color:#16a34a;border-color:#16a34a33}.talos-timeline-item__status-badge--warning{background-color:#d977061a;color:#d97706;border-color:#d9770633}.talos-timeline-item__status-badge--error,.talos-timeline-item__status-badge--cancelled{background-color:#ef44441a;color:#ef4444;border-color:#ef444433}.talos-timeline-item__status-badge--info,.talos-timeline-item__status-badge--pending,.talos-timeline-item__status-badge--in-progress{background-color:#0ea5e91a;color:#0284c7;border-color:#0ea5e933}.talos-timeline-item__header-meta{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.talos-timeline-item__header-time{font-size:.75rem;color:var(--timeline-time-color);white-space:nowrap}.talos-timeline-item__expand-btn{display:inline-flex;align-items:center;justify-content:center;background:none;border:1px solid var(--talos-border-color, #e2e8f0);border-radius:.25rem;padding:.1875rem;color:var(--talos-text-muted, #64748b);cursor:pointer;transition:all .15s ease}.talos-timeline-item__expand-btn:hover{background-color:var(--talos-bg-subtle, #f1f5f9);color:var(--talos-text-color, #0f172a);border-color:var(--talos-border-hover, #cbd5e1)}.talos-timeline-item__actor{display:flex;align-items:center;gap:.5rem;margin-top:.25rem;margin-bottom:.375rem}.talos-timeline-item__actor-avatar{width:1.25rem;height:1.25rem;border-radius:9999px;background-color:var(--talos-bg-subtle, #e2e8f0);display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--talos-text-muted, #64748b)}.talos-timeline-item__actor-avatar img{width:100%;height:100%;object-fit:cover}.talos-timeline-item__actor-details{display:flex;align-items:center;gap:.375rem;font-size:.75rem}.talos-timeline-item__actor-name{font-weight:600;color:var(--timeline-title-color)}.talos-timeline-item__actor-role{color:var(--talos-text-muted, #64748b);background-color:var(--talos-bg-subtle, #f1f5f9);padding:.0625rem .375rem;border-radius:.25rem;font-size:.6875rem}.talos-timeline-item__actor-ip{color:var(--talos-text-muted, #94a3b8);font-family:monospace;font-size:.6875rem}.talos-timeline-item__description{margin:.25rem 0 .5rem;font-size:.8125rem;line-height:1.5;color:var(--timeline-desc-color)}.talos-timeline-item__tags{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.375rem}.talos-timeline-item__tag{display:inline-flex;align-items:center;padding:.125rem .4375rem;font-size:.6875rem;font-weight:500;border-radius:.25rem;background-color:var(--talos-bg-subtle, #f1f5f9);color:var(--talos-text-muted, #475569);border:1px solid var(--talos-border-color, #e2e8f0)}.talos-timeline-item__diffs-table-wrapper{margin-top:.75rem;border-radius:var(--talos-border-radius, .375rem);border:1px solid var(--talos-border-color, #e2e8f0);background-color:var(--talos-card-bg, #ffffff);overflow-x:auto}.talos-timeline-item__diffs-table{width:100%;border-collapse:collapse;font-size:.75rem;text-align:left}.talos-timeline-item__diffs-table th{padding:.375rem .625rem;font-weight:600;color:var(--talos-text-muted, #64748b);background-color:var(--talos-bg-subtle, #f8fafc);border-bottom:1px solid var(--talos-border-color, #e2e8f0)}.talos-timeline-item__diffs-table td{padding:.375rem .625rem;border-bottom:1px solid var(--talos-border-color, #f1f5f9);vertical-align:top}.talos-timeline-item__diffs-table tr:last-child td{border-bottom:none}.talos-timeline-item__diffs-table code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.75rem;padding:.0625rem .25rem;border-radius:.25rem;background-color:var(--talos-bg-subtle, #f1f5f9)}.talos-timeline-item__diff-row--modified .talos-timeline-item__diff-old code{color:#b91c1c;background-color:#ef44441a;text-decoration:line-through}.talos-timeline-item__diff-row--modified .talos-timeline-item__diff-new code,.talos-timeline-item__diff-row--added .talos-timeline-item__diff-new code{color:#15803d;background-color:#22c55e1a}.talos-timeline-item__diff-row--removed .talos-timeline-item__diff-old code{color:#b91c1c;background-color:#ef44441a;text-decoration:line-through}.talos-timeline-item__metadata-card{margin-top:.75rem;padding:.625rem .75rem;border-radius:var(--talos-border-radius, .375rem);border:1px solid var(--talos-border-color, #e2e8f0);background-color:var(--talos-bg-subtle, #f8fafc);font-size:.75rem}.talos-timeline-item__metadata-header{font-weight:600;color:var(--talos-text-muted, #64748b);margin-bottom:.375rem;font-size:.6875rem;text-transform:uppercase;letter-spacing:.04em}.talos-timeline-item__metadata-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.375rem .75rem}.talos-timeline-item__meta-item{display:flex;align-items:center;gap:.375rem}.talos-timeline-item__meta-key{font-weight:500;color:var(--talos-text-muted, #64748b)}.talos-timeline-item__meta-val code{font-family:monospace;font-size:.75rem;color:var(--talos-text-color, #0f172a)}.talos-timeline-item__extra{margin-top:.75rem}@keyframes talosTimelineSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes talosTimelinePulse{0%,to{box-shadow:0 0 0 4px var(--talos-card-bg, #ffffff),0 0 0 6px #2563eb40}50%{box-shadow:0 0 0 4px var(--talos-card-bg, #ffffff),0 0 0 10px #2563eb00}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }, { kind: "component", type: LucideChevronUp, selector: "svg[lucideChevronUp]" }, { kind: "component", type: LucideUser, selector: "svg[lucideUser]" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosTimelineItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-timeline-item, [talosTimelineItem]', imports: [
+                        DatePipe,
+                        KeyValuePipe,
+                        NgTemplateOutlet,
+                        NgComponentOutlet,
+                        LucideChevronDown,
+                        LucideChevronUp,
+                        LucideUser
+                    ], host: {
+                        'class': 'talos-timeline-item',
+                        '[class.talos-timeline-item--primary]': 'isStatus("primary")',
+                        '[class.talos-timeline-item--secondary]': 'isStatus("secondary")',
+                        '[class.talos-timeline-item--success]': 'isStatus("success") || isStatus("completed")',
+                        '[class.talos-timeline-item--warning]': 'isStatus("warning")',
+                        '[class.talos-timeline-item--error]': 'isStatus("error") || isStatus("cancelled")',
+                        '[class.talos-timeline-item--info]': 'isStatus("info")',
+                        '[class.talos-timeline-item--neutral]': 'isStatus("neutral")',
+                        '[class.talos-timeline-item--pending]': 'isStatus("pending")',
+                        '[class.talos-timeline-item--in-progress]': 'isStatus("in-progress")',
+                        '[class.talos-timeline-item--loading]': 'loading()',
+                        '[class.talos-timeline-item--active]': 'active()',
+                        '[class.talos-timeline-item--last]': 'isLast()',
+                        '[class.talos-timeline-item--left]': 'position() === "left"',
+                        '[class.talos-timeline-item--right]': 'position() === "right"',
+                        '[class.talos-timeline-item--expanded]': 'isExpanded()'
+                    }, template: "<!-- Left / Opposite Slot (Used for Timestamps/Actor in Alternating or Two-Sided mode) -->\n<div class=\"talos-timeline-item__opposite\" aria-hidden=\"true\">\n  @if (customTime?.templateRef) {\n    <ng-container [ngTemplateOutlet]=\"customTime!.templateRef!\" />\n  } @else if (timestamp() || relativeTime()) {\n    <div class=\"talos-timeline-item__time-stamp\">\n      @if (relativeTime()) {\n        <span class=\"talos-timeline-item__relative-time\">{{ relativeTime() }}</span>\n      }\n      @if (timestamp()) {\n        <span class=\"talos-timeline-item__absolute-time\">\n          @if (isDateObject(timestamp())) {\n            {{ timestamp() | date: 'medium' }}\n          } @else {\n            {{ timestamp() }}\n          }\n        </span>\n      }\n    </div>\n  }\n</div>\n\n<!-- Separator Column: Connector Track & Dot Marker -->\n<div class=\"talos-timeline-item__separator\">\n  <div\n    class=\"talos-timeline-item__connector talos-timeline-item__connector--top\"\n    [class.talos-timeline-item__connector--dashed]=\"lineStyle() === 'dashed'\"\n    [class.talos-timeline-item__connector--dotted]=\"lineStyle() === 'dotted'\"\n  ></div>\n\n  <div\n    class=\"talos-timeline-item__dot\"\n    [class.talos-timeline-item__dot--solid]=\"dotVariant() === 'solid'\"\n    [class.talos-timeline-item__dot--subtle]=\"dotVariant() === 'subtle'\"\n    [class.talos-timeline-item__dot--outline]=\"dotVariant() === 'outline'\"\n    [class.talos-timeline-item__dot--pure-dot]=\"dotVariant() === 'dot'\"\n    [class.talos-timeline-item__dot--xs]=\"dotSize() === 'xs'\"\n    [class.talos-timeline-item__dot--sm]=\"dotSize() === 'sm'\"\n    [class.talos-timeline-item__dot--md]=\"dotSize() === 'md'\"\n    [class.talos-timeline-item__dot--lg]=\"dotSize() === 'lg'\"\n    [class.talos-timeline-item__dot--loading]=\"loading()\"\n    [style.background-color]=\"dotColor()\"\n    [style.border-color]=\"dotColor()\"\n  >\n    @if (customDot?.templateRef) {\n      <ng-container [ngTemplateOutlet]=\"customDot!.templateRef!\" />\n    } @else if (effectiveIcon()) {\n      <ng-container *ngComponentOutlet=\"effectiveIcon()!\" />\n    }\n  </div>\n\n  <div\n    class=\"talos-timeline-item__connector talos-timeline-item__connector--bottom\"\n    [class.talos-timeline-item__connector--dashed]=\"lineStyle() === 'dashed'\"\n    [class.talos-timeline-item__connector--dotted]=\"lineStyle() === 'dotted'\"\n  ></div>\n</div>\n\n<!-- Main Body / Content Area -->\n<div class=\"talos-timeline-item__body\" (click)=\"onItemClicked()\">\n  <div class=\"talos-timeline-item__header\">\n    <div class=\"talos-timeline-item__title-group\">\n      <!-- Projected or Input Title -->\n      @if (customTitle?.templateRef) {\n        <ng-container [ngTemplateOutlet]=\"customTitle!.templateRef!\" />\n      } @else if (title()) {\n        <h4 class=\"talos-timeline-item__title\">{{ title() }}</h4>\n      }\n\n      <!-- Status Indicator Pill -->\n      @if (status() && status() !== 'neutral') {\n        <span class=\"talos-timeline-item__status-badge talos-timeline-item__status-badge--{{ status() }}\">\n          {{ status() }}\n        </span>\n      }\n    </div>\n\n    <!-- Header Right / Metadata (Timestamp in Left Align mode) -->\n    <div class=\"talos-timeline-item__header-meta\">\n      @if (relativeTime()) {\n        <span class=\"talos-timeline-item__header-time\">{{ relativeTime() }}</span>\n      } @else if (timestamp()) {\n        <span class=\"talos-timeline-item__header-time\">\n          @if (isDateObject(timestamp())) {\n            {{ timestamp() | date: 'short' }}\n          } @else {\n            {{ timestamp() }}\n          }\n        </span>\n      }\n\n      @if (hasExpandableDetails()) {\n        <button\n          type=\"button\"\n          class=\"talos-timeline-item__expand-btn\"\n          [attr.aria-expanded]=\"isExpanded()\"\n          aria-label=\"Toggle audit details\"\n          (click)=\"toggleAccordion(); $event.stopPropagation()\"\n        >\n          @if (isExpanded()) {\n            <svg lucideChevronUp [size]=\"14\"></svg>\n          } @else {\n            <svg lucideChevronDown [size]=\"14\"></svg>\n          }\n        </button>\n      }\n    </div>\n  </div>\n\n  <!-- Actor Info for Audit Logs -->\n  @if (actor(); as currentActor) {\n    <div class=\"talos-timeline-item__actor\">\n      <div class=\"talos-timeline-item__actor-avatar\">\n        @if (currentActor.avatar) {\n          <img [src]=\"currentActor.avatar\" [alt]=\"currentActor.name\" />\n        } @else {\n          <svg lucideUser [size]=\"12\"></svg>\n        }\n      </div>\n      <div class=\"talos-timeline-item__actor-details\">\n        <span class=\"talos-timeline-item__actor-name\">{{ currentActor.name }}</span>\n        @if (currentActor.role) {\n          <span class=\"talos-timeline-item__actor-role\">{{ currentActor.role }}</span>\n        }\n        @if (currentActor.ip) {\n          <span class=\"talos-timeline-item__actor-ip\">({{ currentActor.ip }})</span>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Description / Content Area -->\n  <div class=\"talos-timeline-item__content\">\n    @if (customContent?.templateRef) {\n      <ng-container [ngTemplateOutlet]=\"customContent!.templateRef!\" />\n    } @else if (description()) {\n      <p class=\"talos-timeline-item__description\">{{ description() }}</p>\n    }\n    <ng-content></ng-content>\n  </div>\n\n  <!-- Tags Pill Row -->\n  @if (tags() && tags()!.length > 0) {\n    <div class=\"talos-timeline-item__tags\">\n      @for (tag of tags()!; track tag) {\n        <span class=\"talos-timeline-item__tag\">{{ tag }}</span>\n      }\n    </div>\n  }\n\n  <!-- Audit Change Diffs (Expanded / Default) -->\n  @if (diffs() && diffs()!.length > 0 && isExpanded()) {\n    <div class=\"talos-timeline-item__diffs-table-wrapper\">\n      <table class=\"talos-timeline-item__diffs-table\">\n        <thead>\n          <tr>\n            <th>Field</th>\n            <th>Previous Value</th>\n            <th>New Value</th>\n          </tr>\n        </thead>\n        <tbody>\n          @for (diff of diffs()!; track diff.field) {\n            <tr class=\"talos-timeline-item__diff-row talos-timeline-item__diff-row--{{ diff.type || 'modified' }}\">\n              <td class=\"talos-timeline-item__diff-field\">{{ diff.field }}</td>\n              <td class=\"talos-timeline-item__diff-old\">\n                <code>{{ formatJsonValue(diff.previousValue) }}</code>\n              </td>\n              <td class=\"talos-timeline-item__diff-new\">\n                <code>{{ formatJsonValue(diff.newValue) }}</code>\n              </td>\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n  }\n\n  <!-- Expandable JSON / Metadata -->\n  @if (metadata() && isExpanded()) {\n    <div class=\"talos-timeline-item__metadata-card\">\n      <div class=\"talos-timeline-item__metadata-header\">Metadata & Payload</div>\n      <div class=\"talos-timeline-item__metadata-grid\">\n        @for (entry of metadata()! | keyvalue; track entry.key) {\n          <div class=\"talos-timeline-item__meta-item\">\n            <span class=\"talos-timeline-item__meta-key\">{{ entry.key }}:</span>\n            <span class=\"talos-timeline-item__meta-val\"><code>{{ formatJsonValue(entry.value) }}</code></span>\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Extra Slot Projection -->\n  @if (customExtra?.templateRef) {\n    <div class=\"talos-timeline-item__extra\">\n      <ng-container [ngTemplateOutlet]=\"customExtra!.templateRef!\" />\n    </div>\n  }\n</div>\n", styles: [":host{display:flex;position:relative;min-height:4.5rem;box-sizing:border-box;--timeline-line-color: var(--talos-border-color, #e2e8f0);--timeline-line-width: 2px;--timeline-dot-size: 1.5rem;--timeline-dot-color: var(--talos-text-muted, #64748b);--timeline-dot-bg: var(--talos-card-bg, #ffffff);--timeline-dot-border: var(--talos-border-color, #cbd5e1);--timeline-title-color: var(--talos-text-color, #0f172a);--timeline-desc-color: var(--talos-text-muted, #475569);--timeline-time-color: var(--talos-text-muted, #64748b)}:host(.talos-timeline-item--primary){--timeline-dot-color: var(--talos-primary-color, #2563eb);--timeline-dot-border: var(--talos-primary-color, #2563eb);--timeline-dot-bg: var(--talos-primary-color, #2563eb)}:host(.talos-timeline-item--secondary){--timeline-dot-color: #6366f1;--timeline-dot-border: #6366f1;--timeline-dot-bg: #6366f1}:host(.talos-timeline-item--success){--timeline-dot-color: var(--talos-success-color, #16a34a);--timeline-dot-border: var(--talos-success-color, #16a34a);--timeline-dot-bg: var(--talos-success-color, #16a34a)}:host(.talos-timeline-item--warning){--timeline-dot-color: var(--talos-warning-color, #d97706);--timeline-dot-border: var(--talos-warning-color, #d97706);--timeline-dot-bg: var(--talos-warning-color, #d97706)}:host(.talos-timeline-item--error){--timeline-dot-color: var(--talos-error-color, #ef4444);--timeline-dot-border: var(--talos-error-color, #ef4444);--timeline-dot-bg: var(--talos-error-color, #ef4444)}:host(.talos-timeline-item--info){--timeline-dot-color: #0284c7;--timeline-dot-border: #0284c7;--timeline-dot-bg: #0284c7}:host(.talos-timeline-item--pending),:host(.talos-timeline-item--in-progress){--timeline-dot-color: #0ea5e9;--timeline-dot-border: #0ea5e9;--timeline-dot-bg: #0ea5e9}.talos-timeline-item__opposite{display:none;flex:1;padding:0 1.25rem 1rem 0;text-align:right;box-sizing:border-box}.talos-timeline-item__opposite .talos-timeline-item__time-stamp{display:flex;flex-direction:column;gap:.125rem}.talos-timeline-item__opposite .talos-timeline-item__relative-time{font-size:.8125rem;font-weight:600;color:var(--timeline-title-color)}.talos-timeline-item__opposite .talos-timeline-item__absolute-time{font-size:.75rem;color:var(--timeline-time-color)}.talos-timeline-item__separator{display:flex;flex-direction:column;align-items:center;position:relative;min-width:2rem;margin:0 .75rem 0 0}.talos-timeline-item__connector{width:var(--timeline-line-width);background-color:var(--timeline-line-color);flex-grow:1}.talos-timeline-item__connector--top{height:.5rem;flex-grow:0}.talos-timeline-item__connector--dashed{background:none;border-left:var(--timeline-line-width) dashed var(--timeline-line-color)}.talos-timeline-item__connector--dotted{background:none;border-left:var(--timeline-line-width) dotted var(--timeline-line-color)}:host(:first-child) .talos-timeline-item__connector--top{visibility:hidden}:host(.talos-timeline-item--last) .talos-timeline-item__connector--bottom{visibility:hidden}.talos-timeline-item__dot{display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;box-sizing:border-box;flex-shrink:0;z-index:1;line-height:0;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 0 0 4px var(--talos-card-bg, #ffffff)}.talos-timeline-item__dot>*{display:inline-flex;align-items:center;justify-content:center;line-height:0;width:auto;height:auto}.talos-timeline-item__dot svg{display:block;stroke-width:2.25;overflow:visible}.talos-timeline-item__dot--xs{width:.625rem;height:.625rem;min-width:.625rem;min-height:.625rem}.talos-timeline-item__dot--sm{width:1.375rem;height:1.375rem;min-width:1.375rem;min-height:1.375rem}.talos-timeline-item__dot--sm svg,.talos-timeline-item__dot--sm>*{width:.6875rem!important;height:.6875rem!important;max-width:.6875rem!important;max-height:.6875rem!important}.talos-timeline-item__dot--md{width:1.875rem;height:1.875rem;min-width:1.875rem;min-height:1.875rem}.talos-timeline-item__dot--md svg,.talos-timeline-item__dot--md>*{width:.8125rem!important;height:.8125rem!important;max-width:.8125rem!important;max-height:.8125rem!important}.talos-timeline-item__dot--lg{width:2.375rem;height:2.375rem;min-width:2.375rem;min-height:2.375rem}.talos-timeline-item__dot--lg svg,.talos-timeline-item__dot--lg>*{width:1rem!important;height:1rem!important;max-width:1rem!important;max-height:1rem!important}.talos-timeline-item__dot--solid{background-color:var(--timeline-dot-bg);color:#fff;border:1px solid var(--timeline-dot-border)}.talos-timeline-item__dot--subtle{background-color:var(--talos-bg-subtle, #f1f5f9);color:var(--timeline-dot-color);border:1.5px solid var(--timeline-dot-border)}.talos-timeline-item__dot--outline{background-color:var(--talos-card-bg, #ffffff);color:var(--timeline-dot-color);border:2px solid var(--timeline-dot-border)}.talos-timeline-item__dot--pure-dot{background-color:var(--timeline-dot-bg);border:2px solid var(--talos-card-bg, #ffffff);width:.75rem;height:.75rem;min-width:.75rem;min-height:.75rem}.talos-timeline-item__dot--loading{animation:talosTimelineSpin 1s linear infinite}:host(.talos-timeline-item--loading) .talos-timeline-item__dot{box-shadow:0 0 0 4px var(--talos-card-bg, #ffffff),0 0 0 6px #2563eb40;animation:talosTimelinePulse 2s cubic-bezier(.4,0,.6,1) infinite}.talos-timeline-item__body{flex:1;padding-bottom:1.5rem;min-width:0}.talos-timeline-item__header{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;margin-bottom:.25rem}.talos-timeline-item__title-group{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}.talos-timeline-item__title{margin:0;font-size:.9375rem;font-weight:600;color:var(--timeline-title-color);line-height:1.4}.talos-timeline-item__status-badge{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:9999px;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;background-color:var(--talos-bg-subtle, #f1f5f9);color:var(--talos-text-muted, #64748b);border:1px solid var(--talos-border-color, #e2e8f0)}.talos-timeline-item__status-badge--primary{background-color:#2563eb1a;color:#2563eb;border-color:#2563eb33}.talos-timeline-item__status-badge--success,.talos-timeline-item__status-badge--completed{background-color:#16a34a1a;color:#16a34a;border-color:#16a34a33}.talos-timeline-item__status-badge--warning{background-color:#d977061a;color:#d97706;border-color:#d9770633}.talos-timeline-item__status-badge--error,.talos-timeline-item__status-badge--cancelled{background-color:#ef44441a;color:#ef4444;border-color:#ef444433}.talos-timeline-item__status-badge--info,.talos-timeline-item__status-badge--pending,.talos-timeline-item__status-badge--in-progress{background-color:#0ea5e91a;color:#0284c7;border-color:#0ea5e933}.talos-timeline-item__header-meta{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.talos-timeline-item__header-time{font-size:.75rem;color:var(--timeline-time-color);white-space:nowrap}.talos-timeline-item__expand-btn{display:inline-flex;align-items:center;justify-content:center;background:none;border:1px solid var(--talos-border-color, #e2e8f0);border-radius:.25rem;padding:.1875rem;color:var(--talos-text-muted, #64748b);cursor:pointer;transition:all .15s ease}.talos-timeline-item__expand-btn:hover{background-color:var(--talos-bg-subtle, #f1f5f9);color:var(--talos-text-color, #0f172a);border-color:var(--talos-border-hover, #cbd5e1)}.talos-timeline-item__actor{display:flex;align-items:center;gap:.5rem;margin-top:.25rem;margin-bottom:.375rem}.talos-timeline-item__actor-avatar{width:1.25rem;height:1.25rem;border-radius:9999px;background-color:var(--talos-bg-subtle, #e2e8f0);display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--talos-text-muted, #64748b)}.talos-timeline-item__actor-avatar img{width:100%;height:100%;object-fit:cover}.talos-timeline-item__actor-details{display:flex;align-items:center;gap:.375rem;font-size:.75rem}.talos-timeline-item__actor-name{font-weight:600;color:var(--timeline-title-color)}.talos-timeline-item__actor-role{color:var(--talos-text-muted, #64748b);background-color:var(--talos-bg-subtle, #f1f5f9);padding:.0625rem .375rem;border-radius:.25rem;font-size:.6875rem}.talos-timeline-item__actor-ip{color:var(--talos-text-muted, #94a3b8);font-family:monospace;font-size:.6875rem}.talos-timeline-item__description{margin:.25rem 0 .5rem;font-size:.8125rem;line-height:1.5;color:var(--timeline-desc-color)}.talos-timeline-item__tags{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.375rem}.talos-timeline-item__tag{display:inline-flex;align-items:center;padding:.125rem .4375rem;font-size:.6875rem;font-weight:500;border-radius:.25rem;background-color:var(--talos-bg-subtle, #f1f5f9);color:var(--talos-text-muted, #475569);border:1px solid var(--talos-border-color, #e2e8f0)}.talos-timeline-item__diffs-table-wrapper{margin-top:.75rem;border-radius:var(--talos-border-radius, .375rem);border:1px solid var(--talos-border-color, #e2e8f0);background-color:var(--talos-card-bg, #ffffff);overflow-x:auto}.talos-timeline-item__diffs-table{width:100%;border-collapse:collapse;font-size:.75rem;text-align:left}.talos-timeline-item__diffs-table th{padding:.375rem .625rem;font-weight:600;color:var(--talos-text-muted, #64748b);background-color:var(--talos-bg-subtle, #f8fafc);border-bottom:1px solid var(--talos-border-color, #e2e8f0)}.talos-timeline-item__diffs-table td{padding:.375rem .625rem;border-bottom:1px solid var(--talos-border-color, #f1f5f9);vertical-align:top}.talos-timeline-item__diffs-table tr:last-child td{border-bottom:none}.talos-timeline-item__diffs-table code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.75rem;padding:.0625rem .25rem;border-radius:.25rem;background-color:var(--talos-bg-subtle, #f1f5f9)}.talos-timeline-item__diff-row--modified .talos-timeline-item__diff-old code{color:#b91c1c;background-color:#ef44441a;text-decoration:line-through}.talos-timeline-item__diff-row--modified .talos-timeline-item__diff-new code,.talos-timeline-item__diff-row--added .talos-timeline-item__diff-new code{color:#15803d;background-color:#22c55e1a}.talos-timeline-item__diff-row--removed .talos-timeline-item__diff-old code{color:#b91c1c;background-color:#ef44441a;text-decoration:line-through}.talos-timeline-item__metadata-card{margin-top:.75rem;padding:.625rem .75rem;border-radius:var(--talos-border-radius, .375rem);border:1px solid var(--talos-border-color, #e2e8f0);background-color:var(--talos-bg-subtle, #f8fafc);font-size:.75rem}.talos-timeline-item__metadata-header{font-weight:600;color:var(--talos-text-muted, #64748b);margin-bottom:.375rem;font-size:.6875rem;text-transform:uppercase;letter-spacing:.04em}.talos-timeline-item__metadata-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.375rem .75rem}.talos-timeline-item__meta-item{display:flex;align-items:center;gap:.375rem}.talos-timeline-item__meta-key{font-weight:500;color:var(--talos-text-muted, #64748b)}.talos-timeline-item__meta-val code{font-family:monospace;font-size:.75rem;color:var(--talos-text-color, #0f172a)}.talos-timeline-item__extra{margin-top:.75rem}@keyframes talosTimelineSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes talosTimelinePulse{0%,to{box-shadow:0 0 0 4px var(--talos-card-bg, #ffffff),0 0 0 6px #2563eb40}50%{box-shadow:0 0 0 4px var(--talos-card-bg, #ffffff),0 0 0 10px #2563eb00}}\n"] }]
+        }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], dotVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "dotVariant", required: false }] }], dotSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "dotSize", required: false }] }], dotColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "dotColor", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], lineStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineStyle", required: false }] }], timestamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "timestamp", required: false }] }], relativeTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "relativeTime", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], actor: [{ type: i0.Input, args: [{ isSignal: true, alias: "actor", required: false }] }], tags: [{ type: i0.Input, args: [{ isSignal: true, alias: "tags", required: false }] }], diffs: [{ type: i0.Input, args: [{ isSignal: true, alias: "diffs", required: false }] }], metadata: [{ type: i0.Input, args: [{ isSignal: true, alias: "metadata", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], isLast: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLast", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], toggleExpand: [{ type: i0.Output, args: ["toggleExpand"] }], customDot: [{
+                type: ContentChild,
+                args: [TalosTimelineDotDirective]
+            }], customTitle: [{
+                type: ContentChild,
+                args: [TalosTimelineTitleDirective]
+            }], customTime: [{
+                type: ContentChild,
+                args: [TalosTimelineTimeDirective]
+            }], customContent: [{
+                type: ContentChild,
+                args: [TalosTimelineContentDirective]
+            }], customExtra: [{
+                type: ContentChild,
+                args: [TalosTimelineExtraDirective]
+            }] } });
+
+class TalosTimelineComponent {
+    // Inputs
+    orientation = input('vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    align = input('left', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    mode = input('standard', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    reverse = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "reverse" }] : /* istanbul ignore next */ []));
+    lineStyle = input('solid', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lineStyle" }] : /* istanbul ignore next */ []));
+    items = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    // Outputs
+    itemClick = output();
+    // Processed items for data-driven rendering
+    processedItems = computed(() => {
+        const raw = this.items();
+        if (!raw || raw.length === 0)
+            return [];
+        const list = [...raw];
+        if (this.reverse()) {
+            list.reverse();
+        }
+        return list;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "processedItems" }] : /* istanbul ignore next */ []));
+    getItemPosition(index) {
+        if (this.align() === 'alternate') {
+            return index % 2 === 0 ? 'left' : 'right';
+        }
+        return this.align() === 'right' ? 'right' : 'left';
+    }
+    onDataDrivenItemClick(item) {
+        this.itemClick.emit(item);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TalosTimelineComponent, isStandalone: true, selector: "talos-timeline, [talosTimeline]", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, reverse: { classPropertyName: "reverse", publicName: "reverse", isSignal: true, isRequired: false, transformFunction: null }, lineStyle: { classPropertyName: "lineStyle", publicName: "lineStyle", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, host: { attributes: { "role": "list" }, properties: { "class.talos-timeline--vertical": "orientation() === \"vertical\"", "class.talos-timeline--horizontal": "orientation() === \"horizontal\"", "class.talos-timeline--left": "align() === \"left\"", "class.talos-timeline--right": "align() === \"right\"", "class.talos-timeline--alternate": "align() === \"alternate\"", "class.talos-timeline--standard": "mode() === \"standard\"", "class.talos-timeline--dense": "mode() === \"dense\"", "class.talos-timeline--card": "mode() === \"card\"" }, classAttribute: "talos-timeline" }, ngImport: i0, template: "@if (items() && items()!.length > 0) {\n  @for (item of processedItems(); track item.id || $index; let idx = $index; let isLast = $last) {\n    <talos-timeline-item\n      [title]=\"item.title\"\n      [description]=\"item.description || null\"\n      [timestamp]=\"item.timestamp || null\"\n      [relativeTime]=\"item.relativeTime || null\"\n      [status]=\"item.status || 'neutral'\"\n      [dotVariant]=\"item.dotVariant || 'solid'\"\n      [dotSize]=\"item.dotSize || 'md'\"\n      [dotColor]=\"item.dotColor || null\"\n      [icon]=\"item.icon || null\"\n      [loading]=\"item.loading || false\"\n      [active]=\"item.active || false\"\n      [lineStyle]=\"item.lineStyle || lineStyle()\"\n      [actor]=\"item.actor || null\"\n      [tags]=\"item.tags || null\"\n      [diffs]=\"item.diffs || null\"\n      [metadata]=\"item.metadata || null\"\n      [expanded]=\"item.expanded || false\"\n      [expandable]=\"!!(item.diffs?.length || item.metadata)\"\n      [position]=\"getItemPosition(idx)\"\n      [isLast]=\"isLast\"\n      (itemClick)=\"onDataDrivenItemClick(item)\"\n    />\n  }\n} @else {\n  <ng-content></ng-content>\n}\n", styles: [":host{display:flex;box-sizing:border-box;width:100%}:host(.talos-timeline--vertical){flex-direction:column;position:relative}:host(.talos-timeline--horizontal){flex-direction:row;overflow-x:auto;padding-bottom:1rem}:host(.talos-timeline--horizontal) ::ng-deep talos-timeline-item,:host(.talos-timeline--horizontal) ::ng-deep .talos-timeline-item{flex-direction:column;min-height:auto;min-width:180px;flex:1}:host(.talos-timeline--horizontal) ::ng-deep talos-timeline-item .talos-timeline-item__separator,:host(.talos-timeline--horizontal) ::ng-deep .talos-timeline-item .talos-timeline-item__separator{flex-direction:row;min-width:auto;height:2rem;margin:0;width:100%}:host(.talos-timeline--horizontal) ::ng-deep talos-timeline-item .talos-timeline-item__connector,:host(.talos-timeline--horizontal) ::ng-deep .talos-timeline-item .talos-timeline-item__connector{height:var(--timeline-line-width, 2px);width:auto;flex-grow:1}:host(.talos-timeline--horizontal) ::ng-deep talos-timeline-item .talos-timeline-item__connector--top,:host(.talos-timeline--horizontal) ::ng-deep .talos-timeline-item .talos-timeline-item__connector--top{width:1rem;flex-grow:0}:host(.talos-timeline--horizontal) ::ng-deep talos-timeline-item .talos-timeline-item__body,:host(.talos-timeline--horizontal) ::ng-deep .talos-timeline-item .talos-timeline-item__body{padding-top:.75rem;padding-bottom:0;text-align:center}:host(.talos-timeline--horizontal) ::ng-deep talos-timeline-item .talos-timeline-item__header,:host(.talos-timeline--horizontal) ::ng-deep .talos-timeline-item .talos-timeline-item__header{flex-direction:column;align-items:center;text-align:center}:host(.talos-timeline--horizontal) ::ng-deep talos-timeline-item .talos-timeline-item__title-group,:host(.talos-timeline--horizontal) ::ng-deep .talos-timeline-item .talos-timeline-item__title-group{justify-content:center}:host(.talos-timeline--horizontal) ::ng-deep talos-timeline-item .talos-timeline-item__actor,:host(.talos-timeline--horizontal) ::ng-deep .talos-timeline-item .talos-timeline-item__actor{justify-content:center}:host(.talos-timeline--alternate) ::ng-deep talos-timeline-item .talos-timeline-item__opposite,:host(.talos-timeline--alternate) ::ng-deep .talos-timeline-item .talos-timeline-item__opposite{display:block}:host(.talos-timeline--alternate) ::ng-deep talos-timeline-item.talos-timeline-item--right,:host(.talos-timeline--alternate) ::ng-deep .talos-timeline-item.talos-timeline-item--right{flex-direction:row-reverse}:host(.talos-timeline--alternate) ::ng-deep talos-timeline-item.talos-timeline-item--right .talos-timeline-item__opposite,:host(.talos-timeline--alternate) ::ng-deep .talos-timeline-item.talos-timeline-item--right .talos-timeline-item__opposite{text-align:left;padding:0 0 1rem 1.25rem}:host(.talos-timeline--alternate) ::ng-deep talos-timeline-item.talos-timeline-item--right .talos-timeline-item__body,:host(.talos-timeline--alternate) ::ng-deep .talos-timeline-item.talos-timeline-item--right .talos-timeline-item__body{text-align:right}:host(.talos-timeline--alternate) ::ng-deep talos-timeline-item.talos-timeline-item--right .talos-timeline-item__header,:host(.talos-timeline--alternate) ::ng-deep .talos-timeline-item.talos-timeline-item--right .talos-timeline-item__header{flex-direction:row-reverse}:host(.talos-timeline--alternate) ::ng-deep talos-timeline-item.talos-timeline-item--right .talos-timeline-item__title-group,:host(.talos-timeline--alternate) ::ng-deep .talos-timeline-item.talos-timeline-item--right .talos-timeline-item__title-group{justify-content:flex-end}:host(.talos-timeline--alternate) ::ng-deep talos-timeline-item.talos-timeline-item--right .talos-timeline-item__actor,:host(.talos-timeline--alternate) ::ng-deep .talos-timeline-item.talos-timeline-item--right .talos-timeline-item__actor{justify-content:flex-end}:host(.talos-timeline--alternate) ::ng-deep talos-timeline-item.talos-timeline-item--right .talos-timeline-item__tags,:host(.talos-timeline--alternate) ::ng-deep .talos-timeline-item.talos-timeline-item--right .talos-timeline-item__tags{justify-content:flex-end}:host(.talos-timeline--alternate) ::ng-deep talos-timeline-item.talos-timeline-item--right .talos-timeline-item__separator,:host(.talos-timeline--alternate) ::ng-deep .talos-timeline-item.talos-timeline-item--right .talos-timeline-item__separator{margin:0 0 0 .75rem}:host(.talos-timeline--right) ::ng-deep talos-timeline-item,:host(.talos-timeline--right) ::ng-deep .talos-timeline-item{flex-direction:row-reverse}:host(.talos-timeline--right) ::ng-deep talos-timeline-item .talos-timeline-item__separator,:host(.talos-timeline--right) ::ng-deep .talos-timeline-item .talos-timeline-item__separator{margin:0 0 0 .75rem}:host(.talos-timeline--right) ::ng-deep talos-timeline-item .talos-timeline-item__body,:host(.talos-timeline--right) ::ng-deep .talos-timeline-item .talos-timeline-item__body{text-align:right}:host(.talos-timeline--right) ::ng-deep talos-timeline-item .talos-timeline-item__header,:host(.talos-timeline--right) ::ng-deep .talos-timeline-item .talos-timeline-item__header{flex-direction:row-reverse}:host(.talos-timeline--right) ::ng-deep talos-timeline-item .talos-timeline-item__title-group,:host(.talos-timeline--right) ::ng-deep .talos-timeline-item .talos-timeline-item__title-group{justify-content:flex-end}:host(.talos-timeline--right) ::ng-deep talos-timeline-item .talos-timeline-item__actor,:host(.talos-timeline--right) ::ng-deep .talos-timeline-item .talos-timeline-item__actor{justify-content:flex-end}:host(.talos-timeline--right) ::ng-deep talos-timeline-item .talos-timeline-item__tags,:host(.talos-timeline--right) ::ng-deep .talos-timeline-item .talos-timeline-item__tags{justify-content:flex-end}:host(.talos-timeline--dense) ::ng-deep talos-timeline-item,:host(.talos-timeline--dense) ::ng-deep .talos-timeline-item{min-height:2.75rem}:host(.talos-timeline--dense) ::ng-deep talos-timeline-item .talos-timeline-item__body,:host(.talos-timeline--dense) ::ng-deep .talos-timeline-item .talos-timeline-item__body{padding-bottom:.75rem}:host(.talos-timeline--dense) ::ng-deep talos-timeline-item .talos-timeline-item__title,:host(.talos-timeline--dense) ::ng-deep .talos-timeline-item .talos-timeline-item__title{font-size:.8125rem}:host(.talos-timeline--dense) ::ng-deep talos-timeline-item .talos-timeline-item__description,:host(.talos-timeline--dense) ::ng-deep .talos-timeline-item .talos-timeline-item__description{font-size:.75rem;margin:.125rem 0 .25rem}:host(.talos-timeline--dense) ::ng-deep talos-timeline-item .talos-timeline-item__separator,:host(.talos-timeline--dense) ::ng-deep .talos-timeline-item .talos-timeline-item__separator{min-width:1.5rem;margin-right:.5rem}:host(.talos-timeline--dense) ::ng-deep talos-timeline-item .talos-timeline-item__dot,:host(.talos-timeline--dense) ::ng-deep .talos-timeline-item .talos-timeline-item__dot{width:1rem;height:1rem;min-width:1rem;min-height:1rem;font-size:.625rem}:host(.talos-timeline--dense) ::ng-deep talos-timeline-item .talos-timeline-item__dot svg,:host(.talos-timeline--dense) ::ng-deep .talos-timeline-item .talos-timeline-item__dot svg{width:.625rem;height:.625rem}:host(.talos-timeline--card) ::ng-deep talos-timeline-item .talos-timeline-item__body,:host(.talos-timeline--card) ::ng-deep .talos-timeline-item .talos-timeline-item__body{padding:1rem 1.125rem;margin-bottom:1rem;background-color:var(--talos-card-bg, #ffffff);border:1px solid var(--talos-border-color, #e2e8f0);border-radius:var(--talos-border-radius, .5rem);box-shadow:0 1px 3px #0000000a,0 1px 2px -1px #0000000a;transition:all .2s ease}:host(.talos-timeline--card) ::ng-deep talos-timeline-item .talos-timeline-item__body:hover,:host(.talos-timeline--card) ::ng-deep .talos-timeline-item .talos-timeline-item__body:hover{border-color:var(--talos-border-hover, #cbd5e1);box-shadow:0 4px 6px -1px #0000000f,0 2px 4px -2px #0000000a}\n"], dependencies: [{ kind: "component", type: TalosTimelineItemComponent, selector: "talos-timeline-item, [talosTimelineItem]", inputs: ["status", "dotVariant", "dotSize", "dotColor", "icon", "loading", "active", "lineStyle", "timestamp", "relativeTime", "title", "description", "actor", "tags", "diffs", "metadata", "expandable", "expanded", "position", "isLast"], outputs: ["itemClick", "toggleExpand"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosTimelineComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-timeline, [talosTimeline]', imports: [TalosTimelineItemComponent], host: {
+                        'class': 'talos-timeline',
+                        '[class.talos-timeline--vertical]': 'orientation() === "vertical"',
+                        '[class.talos-timeline--horizontal]': 'orientation() === "horizontal"',
+                        '[class.talos-timeline--left]': 'align() === "left"',
+                        '[class.talos-timeline--right]': 'align() === "right"',
+                        '[class.talos-timeline--alternate]': 'align() === "alternate"',
+                        '[class.talos-timeline--standard]': 'mode() === "standard"',
+                        '[class.talos-timeline--dense]': 'mode() === "dense"',
+                        '[class.talos-timeline--card]': 'mode() === "card"',
+                        'role': 'list'
+                    }, template: "@if (items() && items()!.length > 0) {\n  @for (item of processedItems(); track item.id || $index; let idx = $index; let isLast = $last) {\n    <talos-timeline-item\n      [title]=\"item.title\"\n      [description]=\"item.description || null\"\n      [timestamp]=\"item.timestamp || null\"\n      [relativeTime]=\"item.relativeTime || null\"\n      [status]=\"item.status || 'neutral'\"\n      [dotVariant]=\"item.dotVariant || 'solid'\"\n      [dotSize]=\"item.dotSize || 'md'\"\n      [dotColor]=\"item.dotColor || null\"\n      [icon]=\"item.icon || null\"\n      [loading]=\"item.loading || false\"\n      [active]=\"item.active || false\"\n      [lineStyle]=\"item.lineStyle || lineStyle()\"\n      [actor]=\"item.actor || null\"\n      [tags]=\"item.tags || null\"\n      [diffs]=\"item.diffs || null\"\n      [metadata]=\"item.metadata || null\"\n      [expanded]=\"item.expanded || false\"\n      [expandable]=\"!!(item.diffs?.length || item.metadata)\"\n      [position]=\"getItemPosition(idx)\"\n      [isLast]=\"isLast\"\n      (itemClick)=\"onDataDrivenItemClick(item)\"\n    />\n  }\n} @else {\n  <ng-content></ng-content>\n}\n", styles: [":host{display:flex;box-sizing:border-box;width:100%}:host(.talos-timeline--vertical){flex-direction:column;position:relative}:host(.talos-timeline--horizontal){flex-direction:row;overflow-x:auto;padding-bottom:1rem}:host(.talos-timeline--horizontal) ::ng-deep talos-timeline-item,:host(.talos-timeline--horizontal) ::ng-deep .talos-timeline-item{flex-direction:column;min-height:auto;min-width:180px;flex:1}:host(.talos-timeline--horizontal) ::ng-deep talos-timeline-item .talos-timeline-item__separator,:host(.talos-timeline--horizontal) ::ng-deep .talos-timeline-item .talos-timeline-item__separator{flex-direction:row;min-width:auto;height:2rem;margin:0;width:100%}:host(.talos-timeline--horizontal) ::ng-deep talos-timeline-item .talos-timeline-item__connector,:host(.talos-timeline--horizontal) ::ng-deep .talos-timeline-item .talos-timeline-item__connector{height:var(--timeline-line-width, 2px);width:auto;flex-grow:1}:host(.talos-timeline--horizontal) ::ng-deep talos-timeline-item .talos-timeline-item__connector--top,:host(.talos-timeline--horizontal) ::ng-deep .talos-timeline-item .talos-timeline-item__connector--top{width:1rem;flex-grow:0}:host(.talos-timeline--horizontal) ::ng-deep talos-timeline-item .talos-timeline-item__body,:host(.talos-timeline--horizontal) ::ng-deep .talos-timeline-item .talos-timeline-item__body{padding-top:.75rem;padding-bottom:0;text-align:center}:host(.talos-timeline--horizontal) ::ng-deep talos-timeline-item .talos-timeline-item__header,:host(.talos-timeline--horizontal) ::ng-deep .talos-timeline-item .talos-timeline-item__header{flex-direction:column;align-items:center;text-align:center}:host(.talos-timeline--horizontal) ::ng-deep talos-timeline-item .talos-timeline-item__title-group,:host(.talos-timeline--horizontal) ::ng-deep .talos-timeline-item .talos-timeline-item__title-group{justify-content:center}:host(.talos-timeline--horizontal) ::ng-deep talos-timeline-item .talos-timeline-item__actor,:host(.talos-timeline--horizontal) ::ng-deep .talos-timeline-item .talos-timeline-item__actor{justify-content:center}:host(.talos-timeline--alternate) ::ng-deep talos-timeline-item .talos-timeline-item__opposite,:host(.talos-timeline--alternate) ::ng-deep .talos-timeline-item .talos-timeline-item__opposite{display:block}:host(.talos-timeline--alternate) ::ng-deep talos-timeline-item.talos-timeline-item--right,:host(.talos-timeline--alternate) ::ng-deep .talos-timeline-item.talos-timeline-item--right{flex-direction:row-reverse}:host(.talos-timeline--alternate) ::ng-deep talos-timeline-item.talos-timeline-item--right .talos-timeline-item__opposite,:host(.talos-timeline--alternate) ::ng-deep .talos-timeline-item.talos-timeline-item--right .talos-timeline-item__opposite{text-align:left;padding:0 0 1rem 1.25rem}:host(.talos-timeline--alternate) ::ng-deep talos-timeline-item.talos-timeline-item--right .talos-timeline-item__body,:host(.talos-timeline--alternate) ::ng-deep .talos-timeline-item.talos-timeline-item--right .talos-timeline-item__body{text-align:right}:host(.talos-timeline--alternate) ::ng-deep talos-timeline-item.talos-timeline-item--right .talos-timeline-item__header,:host(.talos-timeline--alternate) ::ng-deep .talos-timeline-item.talos-timeline-item--right .talos-timeline-item__header{flex-direction:row-reverse}:host(.talos-timeline--alternate) ::ng-deep talos-timeline-item.talos-timeline-item--right .talos-timeline-item__title-group,:host(.talos-timeline--alternate) ::ng-deep .talos-timeline-item.talos-timeline-item--right .talos-timeline-item__title-group{justify-content:flex-end}:host(.talos-timeline--alternate) ::ng-deep talos-timeline-item.talos-timeline-item--right .talos-timeline-item__actor,:host(.talos-timeline--alternate) ::ng-deep .talos-timeline-item.talos-timeline-item--right .talos-timeline-item__actor{justify-content:flex-end}:host(.talos-timeline--alternate) ::ng-deep talos-timeline-item.talos-timeline-item--right .talos-timeline-item__tags,:host(.talos-timeline--alternate) ::ng-deep .talos-timeline-item.talos-timeline-item--right .talos-timeline-item__tags{justify-content:flex-end}:host(.talos-timeline--alternate) ::ng-deep talos-timeline-item.talos-timeline-item--right .talos-timeline-item__separator,:host(.talos-timeline--alternate) ::ng-deep .talos-timeline-item.talos-timeline-item--right .talos-timeline-item__separator{margin:0 0 0 .75rem}:host(.talos-timeline--right) ::ng-deep talos-timeline-item,:host(.talos-timeline--right) ::ng-deep .talos-timeline-item{flex-direction:row-reverse}:host(.talos-timeline--right) ::ng-deep talos-timeline-item .talos-timeline-item__separator,:host(.talos-timeline--right) ::ng-deep .talos-timeline-item .talos-timeline-item__separator{margin:0 0 0 .75rem}:host(.talos-timeline--right) ::ng-deep talos-timeline-item .talos-timeline-item__body,:host(.talos-timeline--right) ::ng-deep .talos-timeline-item .talos-timeline-item__body{text-align:right}:host(.talos-timeline--right) ::ng-deep talos-timeline-item .talos-timeline-item__header,:host(.talos-timeline--right) ::ng-deep .talos-timeline-item .talos-timeline-item__header{flex-direction:row-reverse}:host(.talos-timeline--right) ::ng-deep talos-timeline-item .talos-timeline-item__title-group,:host(.talos-timeline--right) ::ng-deep .talos-timeline-item .talos-timeline-item__title-group{justify-content:flex-end}:host(.talos-timeline--right) ::ng-deep talos-timeline-item .talos-timeline-item__actor,:host(.talos-timeline--right) ::ng-deep .talos-timeline-item .talos-timeline-item__actor{justify-content:flex-end}:host(.talos-timeline--right) ::ng-deep talos-timeline-item .talos-timeline-item__tags,:host(.talos-timeline--right) ::ng-deep .talos-timeline-item .talos-timeline-item__tags{justify-content:flex-end}:host(.talos-timeline--dense) ::ng-deep talos-timeline-item,:host(.talos-timeline--dense) ::ng-deep .talos-timeline-item{min-height:2.75rem}:host(.talos-timeline--dense) ::ng-deep talos-timeline-item .talos-timeline-item__body,:host(.talos-timeline--dense) ::ng-deep .talos-timeline-item .talos-timeline-item__body{padding-bottom:.75rem}:host(.talos-timeline--dense) ::ng-deep talos-timeline-item .talos-timeline-item__title,:host(.talos-timeline--dense) ::ng-deep .talos-timeline-item .talos-timeline-item__title{font-size:.8125rem}:host(.talos-timeline--dense) ::ng-deep talos-timeline-item .talos-timeline-item__description,:host(.talos-timeline--dense) ::ng-deep .talos-timeline-item .talos-timeline-item__description{font-size:.75rem;margin:.125rem 0 .25rem}:host(.talos-timeline--dense) ::ng-deep talos-timeline-item .talos-timeline-item__separator,:host(.talos-timeline--dense) ::ng-deep .talos-timeline-item .talos-timeline-item__separator{min-width:1.5rem;margin-right:.5rem}:host(.talos-timeline--dense) ::ng-deep talos-timeline-item .talos-timeline-item__dot,:host(.talos-timeline--dense) ::ng-deep .talos-timeline-item .talos-timeline-item__dot{width:1rem;height:1rem;min-width:1rem;min-height:1rem;font-size:.625rem}:host(.talos-timeline--dense) ::ng-deep talos-timeline-item .talos-timeline-item__dot svg,:host(.talos-timeline--dense) ::ng-deep .talos-timeline-item .talos-timeline-item__dot svg{width:.625rem;height:.625rem}:host(.talos-timeline--card) ::ng-deep talos-timeline-item .talos-timeline-item__body,:host(.talos-timeline--card) ::ng-deep .talos-timeline-item .talos-timeline-item__body{padding:1rem 1.125rem;margin-bottom:1rem;background-color:var(--talos-card-bg, #ffffff);border:1px solid var(--talos-border-color, #e2e8f0);border-radius:var(--talos-border-radius, .5rem);box-shadow:0 1px 3px #0000000a,0 1px 2px -1px #0000000a;transition:all .2s ease}:host(.talos-timeline--card) ::ng-deep talos-timeline-item .talos-timeline-item__body:hover,:host(.talos-timeline--card) ::ng-deep .talos-timeline-item .talos-timeline-item__body:hover{border-color:var(--talos-border-hover, #cbd5e1);box-shadow:0 4px 6px -1px #0000000f,0 2px 4px -2px #0000000a}\n"] }]
+        }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], reverse: [{ type: i0.Input, args: [{ isSignal: true, alias: "reverse", required: false }] }], lineStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineStyle", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
+
+const TIMELINE_COMPONENTS = [
+    TalosTimelineComponent,
+    TalosTimelineItemComponent,
+    TalosTimelineDotDirective,
+    TalosTimelineTitleDirective,
+    TalosTimelineTimeDirective,
+    TalosTimelineContentDirective,
+    TalosTimelineExtraDirective
+];
+class TalosTimelineModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosTimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: TalosTimelineModule, imports: [TalosTimelineComponent,
+            TalosTimelineItemComponent,
+            TalosTimelineDotDirective,
+            TalosTimelineTitleDirective,
+            TalosTimelineTimeDirective,
+            TalosTimelineContentDirective,
+            TalosTimelineExtraDirective], exports: [TalosTimelineComponent,
+            TalosTimelineItemComponent,
+            TalosTimelineDotDirective,
+            TalosTimelineTitleDirective,
+            TalosTimelineTimeDirective,
+            TalosTimelineContentDirective,
+            TalosTimelineExtraDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosTimelineModule, imports: [TalosTimelineComponent,
+            TalosTimelineItemComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosTimelineModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: TIMELINE_COMPONENTS,
+                    exports: TIMELINE_COMPONENTS
+                }]
+        }] });
+
+/**
+ * Types and interfaces for TalosTrendIndicatorComponent
+ */
+
+class TalosTrendIndicatorComponent {
+    /** Explicit value to display (e.g. 14.2, -5.3, "+12%") */
+    value = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Current value for automatic delta calculation */
+    current = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+    /** Previous value for automatic delta calculation */
+    previous = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "previous" }] : /* istanbul ignore next */ []));
+    /** Explicit direction override or 'auto' */
+    direction = input('auto', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+    /** Explicit status override or 'auto' */
+    status = input('auto', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    /** Polarity: normal (+ is good), inverse (+ is bad), neutral */
+    polarity = input('normal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "polarity" }] : /* istanbul ignore next */ []));
+    /** Visual variant */
+    variant = input('badge', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Layout orientation: horizontal or vertical */
+    layout = input('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    /** Icon shape / style */
+    iconType = input('arrow-diagonal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconType" }] : /* istanbul ignore next */ []));
+    /** Size preset */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Value formatting mode */
+    format = input('percentage', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    /** Prefix string before number */
+    prefix = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "prefix" }] : /* istanbul ignore next */ []));
+    /** Suffix string after number (e.g. '%', 'pts') */
+    suffix = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "suffix" }] : /* istanbul ignore next */ []));
+    /** Number of decimal places */
+    decimals = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "decimals" }] : /* istanbul ignore next */ []));
+    /** Whether to show '+' / '-' sign */
+    showSign = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showSign" }] : /* istanbul ignore next */ []));
+    /** Whether to show arrow icon */
+    showIcon = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showIcon" }] : /* istanbul ignore next */ []));
+    /** Show only the icon without text */
+    iconOnly = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconOnly" }] : /* istanbul ignore next */ []));
+    /** Secondary comparison label (e.g. 'vs last month') */
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Currency symbol when format is 'currency' */
+    currencySymbol = input('$', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currencySymbol" }] : /* istanbul ignore next */ []));
+    /** Custom formatter function */
+    valueFormatter = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueFormatter" }] : /* istanbul ignore next */ []));
+    /** Accessible label */
+    ariaLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Calculation result */
+    calculation = computed(() => {
+        const cur = this.current();
+        const prev = this.previous();
+        const val = this.value();
+        const dec = this.decimals();
+        let delta = 0;
+        let deltaPct = 0;
+        let dir = 'flat';
+        if (cur !== null && prev !== null) {
+            delta = cur - prev;
+            deltaPct = prev !== 0 ? ((cur - prev) / Math.abs(prev)) * 100 : cur > 0 ? 100 : cur < 0 ? -100 : 0;
+            if (delta > 0.0001)
+                dir = 'up';
+            else if (delta < -0.0001)
+                dir = 'down';
+            else
+                dir = 'flat';
+        }
+        else if (typeof val === 'number') {
+            delta = val;
+            deltaPct = val;
+            if (val > 0.0001)
+                dir = 'up';
+            else if (val < -0.0001)
+                dir = 'down';
+            else
+                dir = 'flat';
+        }
+        else if (typeof val === 'string') {
+            const parsed = parseFloat(val.replace(/[^0-9.-]/g, ''));
+            delta = isNaN(parsed) ? 0 : parsed;
+            deltaPct = delta;
+            if (val.includes('+') || delta > 0.0001)
+                dir = 'up';
+            else if (val.includes('-') || delta < -0.0001)
+                dir = 'down';
+            else
+                dir = 'flat';
+        }
+        // Force direction override if specified
+        const explicitDir = this.direction();
+        if (explicitDir !== 'auto') {
+            dir = explicitDir;
+        }
+        // Determine status (positive / negative / neutral) based on polarity or explicit override
+        const explicitStatus = this.status();
+        let calculatedStatus = 'neutral';
+        if (explicitStatus !== 'auto') {
+            calculatedStatus = explicitStatus;
+        }
+        else {
+            const pol = this.polarity();
+            if (pol === 'neutral' || dir === 'flat') {
+                calculatedStatus = 'neutral';
+            }
+            else if (pol === 'normal') {
+                calculatedStatus = dir === 'up' ? 'positive' : 'negative';
+            }
+            else if (pol === 'inverse') {
+                calculatedStatus = dir === 'up' ? 'negative' : 'positive';
+            }
+        }
+        // Format text
+        let formattedText = '';
+        const customFmt = this.valueFormatter();
+        if (customFmt) {
+            formattedText = customFmt({ delta, deltaPercentage: deltaPct, direction: dir, status: calculatedStatus, formattedText: '' });
+        }
+        else if (typeof val === 'string' && cur === null) {
+            formattedText = val;
+        }
+        else {
+            const sign = this.showSign() ? (dir === 'up' ? '+' : dir === 'down' ? '-' : '') : '';
+            const absDelta = Math.abs(delta);
+            const absPct = Math.abs(deltaPct);
+            const pfx = this.prefix();
+            const sfx = this.suffix();
+            switch (this.format()) {
+                case 'percentage':
+                    formattedText = `${sign}${pfx}${absPct.toFixed(dec)}%${sfx}`;
+                    break;
+                case 'currency':
+                    formattedText = `${sign}${this.currencySymbol()}${pfx}${absDelta.toFixed(dec)}${sfx}`;
+                    break;
+                case 'points':
+                    formattedText = `${sign}${pfx}${absDelta.toFixed(dec)} pts${sfx}`;
+                    break;
+                case 'number':
+                default:
+                    formattedText = `${sign}${pfx}${absDelta.toFixed(dec)}${sfx}`;
+                    break;
+            }
+        }
+        return {
+            delta,
+            deltaPercentage: deltaPct,
+            direction: dir,
+            status: calculatedStatus,
+            formattedText
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "calculation" }] : /* istanbul ignore next */ []));
+    computedStatus = computed(() => this.calculation().status, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedStatus" }] : /* istanbul ignore next */ []));
+    computedDirection = computed(() => this.calculation().direction, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedDirection" }] : /* istanbul ignore next */ []));
+    displayValue = computed(() => this.calculation().formattedText, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    computedAriaLabel = computed(() => {
+        const custom = this.ariaLabel();
+        if (custom)
+            return custom;
+        const calc = this.calculation();
+        const dirWord = calc.direction === 'up' ? 'Increased by' : calc.direction === 'down' ? 'Decreased by' : 'No change';
+        const labelText = this.label() ? ` (${this.label()})` : '';
+        return `Trend: ${dirWord} ${calc.formattedText}${labelText}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosTrendIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TalosTrendIndicatorComponent, isStandalone: true, selector: "talos-trend-indicator", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null }, previous: { classPropertyName: "previous", publicName: "previous", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, polarity: { classPropertyName: "polarity", publicName: "polarity", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, iconType: { classPropertyName: "iconType", publicName: "iconType", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, showSign: { classPropertyName: "showSign", publicName: "showSign", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, currencySymbol: { classPropertyName: "currencySymbol", publicName: "currencySymbol", isSignal: true, isRequired: false, transformFunction: null }, valueFormatter: { classPropertyName: "valueFormatter", publicName: "valueFormatter", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.talos-trend-badge": "variant() === \"badge\"", "class.talos-trend-subtle": "variant() === \"subtle\"", "class.talos-trend-text": "variant() === \"text\"", "class.talos-trend-bordered": "variant() === \"bordered\"", "class.talos-trend-solid": "variant() === \"solid\"", "class.talos-trend-horizontal": "layout() === \"horizontal\"", "class.talos-trend-vertical": "layout() === \"vertical\"", "class.talos-trend-positive": "computedStatus() === \"positive\"", "class.talos-trend-negative": "computedStatus() === \"negative\"", "class.talos-trend-neutral": "computedStatus() === \"neutral\"", "class.talos-trend-xs": "size() === \"xs\"", "class.talos-trend-sm": "size() === \"sm\"", "class.talos-trend-md": "size() === \"md\"", "class.talos-trend-lg": "size() === \"lg\"", "attr.role": "\"status\"", "attr.aria-label": "computedAriaLabel()" }, classAttribute: "talos-trend-indicator" }, ngImport: i0, template: "<span class=\"talos-trend-main\">\n  @if (showIcon()) {\n    <span class=\"talos-trend-icon-wrapper\" aria-hidden=\"true\">\n      @switch (iconType()) {\n        @case ('arrow-vertical') {\n          @if (computedDirection() === 'up') {\n            <svg class=\"talos-trend-icon talos-trend-icon-up\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\">\n              <path d=\"M8 12.5V3.5M8 3.5L4.5 7M8 3.5L11.5 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          } @else if (computedDirection() === 'down') {\n            <svg class=\"talos-trend-icon talos-trend-icon-down\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\">\n              <path d=\"M8 3.5V12.5M8 12.5L4.5 9M8 12.5L11.5 9\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          } @else {\n            <svg class=\"talos-trend-icon talos-trend-icon-flat\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\">\n              <path d=\"M3.5 8H12.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          }\n        }\n        @case ('chevron') {\n          @if (computedDirection() === 'up') {\n            <svg class=\"talos-trend-icon talos-trend-icon-up\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\">\n              <path d=\"M3.5 10L8 5.5L12.5 10\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          } @else if (computedDirection() === 'down') {\n            <svg class=\"talos-trend-icon talos-trend-icon-down\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\">\n              <path d=\"M3.5 6L8 10.5L12.5 6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          } @else {\n            <svg class=\"talos-trend-icon talos-trend-icon-flat\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\">\n              <path d=\"M3.5 8H12.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          }\n        }\n        @case ('triangle') {\n          @if (computedDirection() === 'up') {\n            <svg class=\"talos-trend-icon talos-trend-icon-up talos-trend-icon--fill\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n              <path d=\"M8 4.5L13 12H3L8 4.5Z\"/>\n            </svg>\n          } @else if (computedDirection() === 'down') {\n            <svg class=\"talos-trend-icon talos-trend-icon-down talos-trend-icon--fill\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n              <path d=\"M8 11.5L3 4H13L8 11.5Z\"/>\n            </svg>\n          } @else {\n            <svg class=\"talos-trend-icon talos-trend-icon-flat talos-trend-icon--fill\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n              <rect x=\"3.5\" y=\"7\" width=\"9\" height=\"2\" rx=\"1\"/>\n            </svg>\n          }\n        }\n        @default {\n          @if (computedDirection() === 'up') {\n            <svg class=\"talos-trend-icon talos-trend-icon-up\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\">\n              <path d=\"M4 11.5L11.5 4M11.5 4H6M11.5 4V9.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          } @else if (computedDirection() === 'down') {\n            <svg class=\"talos-trend-icon talos-trend-icon-down\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\">\n              <path d=\"M4 4.5L11.5 12M11.5 12H6M11.5 12V6.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          } @else {\n            <svg class=\"talos-trend-icon talos-trend-icon-flat\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\">\n              <path d=\"M3.5 8H12.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          }\n        }\n      }\n    </span>\n  }\n\n  @if (!iconOnly()) {\n    <span class=\"talos-trend-value\">{{ displayValue() }}</span>\n  }\n</span>\n\n@if (label()) {\n  <span class=\"talos-trend-label\">{{ label() }}</span>\n}\n\n", styles: [":host{display:inline-flex;vertical-align:middle;box-sizing:border-box;font-family:inherit;font-weight:600;line-height:1;transition:background-color .15s ease,color .15s ease,border-color .15s ease;white-space:nowrap;--_trend-color: #64748b;--_trend-bg: #f1f5f9;--_trend-border: #e2e8f0;--_trend-solid-bg: #64748b;--_trend-solid-text: #ffffff;--_trend-subtle-bg: rgba(100, 116, 139, .1)}:host.talos-trend-positive{--_trend-color: #15803d;--_trend-bg: #dcfce7;--_trend-border: #bbf7d0;--_trend-solid-bg: #16a34a;--_trend-solid-text: #ffffff;--_trend-subtle-bg: rgba(22, 163, 74, .12)}:host.talos-trend-negative{--_trend-color: #b91c1c;--_trend-bg: #fee2e2;--_trend-border: #fecaca;--_trend-solid-bg: #dc2626;--_trend-solid-text: #ffffff;--_trend-subtle-bg: rgba(220, 38, 38, .12)}:host.talos-trend-neutral{--_trend-color: #475569;--_trend-bg: #f1f5f9;--_trend-border: #e2e8f0;--_trend-solid-bg: #64748b;--_trend-solid-text: #ffffff;--_trend-subtle-bg: rgba(100, 116, 139, .1)}:host.talos-trend-horizontal{flex-direction:row;align-items:center;gap:.25rem}:host.talos-trend-horizontal .talos-trend-label{font-weight:400;opacity:.8;margin-left:.125rem}:host.talos-trend-vertical{flex-direction:column;align-items:flex-start;gap:.125rem}:host.talos-trend-vertical .talos-trend-label{font-weight:400;opacity:.75;font-size:.85em}:host .talos-trend-main{display:inline-flex;align-items:center;gap:.25rem;line-height:1}:host .talos-trend-icon-wrapper{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1}:host .talos-trend-icon{display:block;width:.875rem;height:.875rem;flex-shrink:0}:host .talos-trend-icon--fill{fill:currentColor}:host .talos-trend-value{letter-spacing:-.01em}:host.talos-trend-xs{font-size:.6875rem}:host.talos-trend-xs .talos-trend-icon{width:.625rem;height:.625rem}:host.talos-trend-xs.talos-trend-badge,:host.talos-trend-xs.talos-trend-subtle,:host.talos-trend-xs.talos-trend-bordered,:host.talos-trend-xs.talos-trend-solid{padding:.125rem .375rem;border-radius:9999px}:host.talos-trend-sm{font-size:.75rem}:host.talos-trend-sm .talos-trend-icon{width:.75rem;height:.75rem}:host.talos-trend-sm.talos-trend-badge,:host.talos-trend-sm.talos-trend-subtle,:host.talos-trend-sm.talos-trend-bordered,:host.talos-trend-sm.talos-trend-solid{padding:.1875rem .5rem;border-radius:9999px}:host.talos-trend-md{font-size:.8125rem}:host.talos-trend-md .talos-trend-icon{width:.875rem;height:.875rem}:host.talos-trend-md.talos-trend-badge,:host.talos-trend-md.talos-trend-subtle,:host.talos-trend-md.talos-trend-bordered,:host.talos-trend-md.talos-trend-solid{padding:.25rem .625rem;border-radius:9999px}:host.talos-trend-lg{font-size:.9375rem}:host.talos-trend-lg .talos-trend-icon{width:1rem;height:1rem}:host.talos-trend-lg.talos-trend-badge,:host.talos-trend-lg.talos-trend-subtle,:host.talos-trend-lg.talos-trend-bordered,:host.talos-trend-lg.talos-trend-solid{padding:.3125rem .75rem;border-radius:9999px}:host.talos-trend-badge{background-color:var(--_trend-bg);color:var(--_trend-color)}:host.talos-trend-subtle{background-color:var(--_trend-subtle-bg);color:var(--_trend-color)}:host.talos-trend-bordered{background-color:var(--_trend-bg);border:1px solid var(--_trend-border);color:var(--_trend-color)}:host.talos-trend-solid{background-color:var(--_trend-solid-bg);color:var(--_trend-solid-text);box-shadow:0 1px 2px #00000014}:host.talos-trend-text{padding:0;background:transparent;color:var(--_trend-color)}:root[data-theme=dark] :host.talos-trend-positive,:root.dark :host.talos-trend-positive,[data-theme=dark] :host.talos-trend-positive,[data-mode=dark] :host.talos-trend-positive,.dark :host.talos-trend-positive,.dark-theme :host.talos-trend-positive{--_trend-color: #4ade80;--_trend-bg: rgba(34, 197, 94, .18);--_trend-border: rgba(74, 222, 128, .3);--_trend-solid-bg: #16a34a;--_trend-solid-text: #ffffff;--_trend-subtle-bg: rgba(34, 197, 94, .12)}:root[data-theme=dark] :host.talos-trend-negative,:root.dark :host.talos-trend-negative,[data-theme=dark] :host.talos-trend-negative,[data-mode=dark] :host.talos-trend-negative,.dark :host.talos-trend-negative,.dark-theme :host.talos-trend-negative{--_trend-color: #f87171;--_trend-bg: rgba(239, 68, 68, .18);--_trend-border: rgba(248, 113, 113, .3);--_trend-solid-bg: #dc2626;--_trend-solid-text: #ffffff;--_trend-subtle-bg: rgba(239, 68, 68, .12)}:root[data-theme=dark] :host.talos-trend-neutral,:root.dark :host.talos-trend-neutral,[data-theme=dark] :host.talos-trend-neutral,[data-mode=dark] :host.talos-trend-neutral,.dark :host.talos-trend-neutral,.dark-theme :host.talos-trend-neutral{--_trend-color: #94a3b8;--_trend-bg: rgba(100, 116, 139, .18);--_trend-border: rgba(148, 163, 184, .25);--_trend-solid-bg: #475569;--_trend-solid-text: #ffffff;--_trend-subtle-bg: rgba(100, 116, 139, .12)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosTrendIndicatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-trend-indicator', host: {
+                        'class': 'talos-trend-indicator',
+                        '[class.talos-trend-badge]': 'variant() === "badge"',
+                        '[class.talos-trend-subtle]': 'variant() === "subtle"',
+                        '[class.talos-trend-text]': 'variant() === "text"',
+                        '[class.talos-trend-bordered]': 'variant() === "bordered"',
+                        '[class.talos-trend-solid]': 'variant() === "solid"',
+                        '[class.talos-trend-horizontal]': 'layout() === "horizontal"',
+                        '[class.talos-trend-vertical]': 'layout() === "vertical"',
+                        '[class.talos-trend-positive]': 'computedStatus() === "positive"',
+                        '[class.talos-trend-negative]': 'computedStatus() === "negative"',
+                        '[class.talos-trend-neutral]': 'computedStatus() === "neutral"',
+                        '[class.talos-trend-xs]': 'size() === "xs"',
+                        '[class.talos-trend-sm]': 'size() === "sm"',
+                        '[class.talos-trend-md]': 'size() === "md"',
+                        '[class.talos-trend-lg]': 'size() === "lg"',
+                        '[attr.role]': '"status"',
+                        '[attr.aria-label]': 'computedAriaLabel()'
+                    }, template: "<span class=\"talos-trend-main\">\n  @if (showIcon()) {\n    <span class=\"talos-trend-icon-wrapper\" aria-hidden=\"true\">\n      @switch (iconType()) {\n        @case ('arrow-vertical') {\n          @if (computedDirection() === 'up') {\n            <svg class=\"talos-trend-icon talos-trend-icon-up\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\">\n              <path d=\"M8 12.5V3.5M8 3.5L4.5 7M8 3.5L11.5 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          } @else if (computedDirection() === 'down') {\n            <svg class=\"talos-trend-icon talos-trend-icon-down\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\">\n              <path d=\"M8 3.5V12.5M8 12.5L4.5 9M8 12.5L11.5 9\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          } @else {\n            <svg class=\"talos-trend-icon talos-trend-icon-flat\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\">\n              <path d=\"M3.5 8H12.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          }\n        }\n        @case ('chevron') {\n          @if (computedDirection() === 'up') {\n            <svg class=\"talos-trend-icon talos-trend-icon-up\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\">\n              <path d=\"M3.5 10L8 5.5L12.5 10\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          } @else if (computedDirection() === 'down') {\n            <svg class=\"talos-trend-icon talos-trend-icon-down\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\">\n              <path d=\"M3.5 6L8 10.5L12.5 6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          } @else {\n            <svg class=\"talos-trend-icon talos-trend-icon-flat\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\">\n              <path d=\"M3.5 8H12.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          }\n        }\n        @case ('triangle') {\n          @if (computedDirection() === 'up') {\n            <svg class=\"talos-trend-icon talos-trend-icon-up talos-trend-icon--fill\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n              <path d=\"M8 4.5L13 12H3L8 4.5Z\"/>\n            </svg>\n          } @else if (computedDirection() === 'down') {\n            <svg class=\"talos-trend-icon talos-trend-icon-down talos-trend-icon--fill\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n              <path d=\"M8 11.5L3 4H13L8 11.5Z\"/>\n            </svg>\n          } @else {\n            <svg class=\"talos-trend-icon talos-trend-icon-flat talos-trend-icon--fill\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n              <rect x=\"3.5\" y=\"7\" width=\"9\" height=\"2\" rx=\"1\"/>\n            </svg>\n          }\n        }\n        @default {\n          @if (computedDirection() === 'up') {\n            <svg class=\"talos-trend-icon talos-trend-icon-up\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\">\n              <path d=\"M4 11.5L11.5 4M11.5 4H6M11.5 4V9.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          } @else if (computedDirection() === 'down') {\n            <svg class=\"talos-trend-icon talos-trend-icon-down\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\">\n              <path d=\"M4 4.5L11.5 12M11.5 12H6M11.5 12V6.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          } @else {\n            <svg class=\"talos-trend-icon talos-trend-icon-flat\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\">\n              <path d=\"M3.5 8H12.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          }\n        }\n      }\n    </span>\n  }\n\n  @if (!iconOnly()) {\n    <span class=\"talos-trend-value\">{{ displayValue() }}</span>\n  }\n</span>\n\n@if (label()) {\n  <span class=\"talos-trend-label\">{{ label() }}</span>\n}\n\n", styles: [":host{display:inline-flex;vertical-align:middle;box-sizing:border-box;font-family:inherit;font-weight:600;line-height:1;transition:background-color .15s ease,color .15s ease,border-color .15s ease;white-space:nowrap;--_trend-color: #64748b;--_trend-bg: #f1f5f9;--_trend-border: #e2e8f0;--_trend-solid-bg: #64748b;--_trend-solid-text: #ffffff;--_trend-subtle-bg: rgba(100, 116, 139, .1)}:host.talos-trend-positive{--_trend-color: #15803d;--_trend-bg: #dcfce7;--_trend-border: #bbf7d0;--_trend-solid-bg: #16a34a;--_trend-solid-text: #ffffff;--_trend-subtle-bg: rgba(22, 163, 74, .12)}:host.talos-trend-negative{--_trend-color: #b91c1c;--_trend-bg: #fee2e2;--_trend-border: #fecaca;--_trend-solid-bg: #dc2626;--_trend-solid-text: #ffffff;--_trend-subtle-bg: rgba(220, 38, 38, .12)}:host.talos-trend-neutral{--_trend-color: #475569;--_trend-bg: #f1f5f9;--_trend-border: #e2e8f0;--_trend-solid-bg: #64748b;--_trend-solid-text: #ffffff;--_trend-subtle-bg: rgba(100, 116, 139, .1)}:host.talos-trend-horizontal{flex-direction:row;align-items:center;gap:.25rem}:host.talos-trend-horizontal .talos-trend-label{font-weight:400;opacity:.8;margin-left:.125rem}:host.talos-trend-vertical{flex-direction:column;align-items:flex-start;gap:.125rem}:host.talos-trend-vertical .talos-trend-label{font-weight:400;opacity:.75;font-size:.85em}:host .talos-trend-main{display:inline-flex;align-items:center;gap:.25rem;line-height:1}:host .talos-trend-icon-wrapper{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1}:host .talos-trend-icon{display:block;width:.875rem;height:.875rem;flex-shrink:0}:host .talos-trend-icon--fill{fill:currentColor}:host .talos-trend-value{letter-spacing:-.01em}:host.talos-trend-xs{font-size:.6875rem}:host.talos-trend-xs .talos-trend-icon{width:.625rem;height:.625rem}:host.talos-trend-xs.talos-trend-badge,:host.talos-trend-xs.talos-trend-subtle,:host.talos-trend-xs.talos-trend-bordered,:host.talos-trend-xs.talos-trend-solid{padding:.125rem .375rem;border-radius:9999px}:host.talos-trend-sm{font-size:.75rem}:host.talos-trend-sm .talos-trend-icon{width:.75rem;height:.75rem}:host.talos-trend-sm.talos-trend-badge,:host.talos-trend-sm.talos-trend-subtle,:host.talos-trend-sm.talos-trend-bordered,:host.talos-trend-sm.talos-trend-solid{padding:.1875rem .5rem;border-radius:9999px}:host.talos-trend-md{font-size:.8125rem}:host.talos-trend-md .talos-trend-icon{width:.875rem;height:.875rem}:host.talos-trend-md.talos-trend-badge,:host.talos-trend-md.talos-trend-subtle,:host.talos-trend-md.talos-trend-bordered,:host.talos-trend-md.talos-trend-solid{padding:.25rem .625rem;border-radius:9999px}:host.talos-trend-lg{font-size:.9375rem}:host.talos-trend-lg .talos-trend-icon{width:1rem;height:1rem}:host.talos-trend-lg.talos-trend-badge,:host.talos-trend-lg.talos-trend-subtle,:host.talos-trend-lg.talos-trend-bordered,:host.talos-trend-lg.talos-trend-solid{padding:.3125rem .75rem;border-radius:9999px}:host.talos-trend-badge{background-color:var(--_trend-bg);color:var(--_trend-color)}:host.talos-trend-subtle{background-color:var(--_trend-subtle-bg);color:var(--_trend-color)}:host.talos-trend-bordered{background-color:var(--_trend-bg);border:1px solid var(--_trend-border);color:var(--_trend-color)}:host.talos-trend-solid{background-color:var(--_trend-solid-bg);color:var(--_trend-solid-text);box-shadow:0 1px 2px #00000014}:host.talos-trend-text{padding:0;background:transparent;color:var(--_trend-color)}:root[data-theme=dark] :host.talos-trend-positive,:root.dark :host.talos-trend-positive,[data-theme=dark] :host.talos-trend-positive,[data-mode=dark] :host.talos-trend-positive,.dark :host.talos-trend-positive,.dark-theme :host.talos-trend-positive{--_trend-color: #4ade80;--_trend-bg: rgba(34, 197, 94, .18);--_trend-border: rgba(74, 222, 128, .3);--_trend-solid-bg: #16a34a;--_trend-solid-text: #ffffff;--_trend-subtle-bg: rgba(34, 197, 94, .12)}:root[data-theme=dark] :host.talos-trend-negative,:root.dark :host.talos-trend-negative,[data-theme=dark] :host.talos-trend-negative,[data-mode=dark] :host.talos-trend-negative,.dark :host.talos-trend-negative,.dark-theme :host.talos-trend-negative{--_trend-color: #f87171;--_trend-bg: rgba(239, 68, 68, .18);--_trend-border: rgba(248, 113, 113, .3);--_trend-solid-bg: #dc2626;--_trend-solid-text: #ffffff;--_trend-subtle-bg: rgba(239, 68, 68, .12)}:root[data-theme=dark] :host.talos-trend-neutral,:root.dark :host.talos-trend-neutral,[data-theme=dark] :host.talos-trend-neutral,[data-mode=dark] :host.talos-trend-neutral,.dark :host.talos-trend-neutral,.dark-theme :host.talos-trend-neutral{--_trend-color: #94a3b8;--_trend-bg: rgba(100, 116, 139, .18);--_trend-border: rgba(148, 163, 184, .25);--_trend-solid-bg: #475569;--_trend-solid-text: #ffffff;--_trend-subtle-bg: rgba(100, 116, 139, .12)}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }], previous: [{ type: i0.Input, args: [{ isSignal: true, alias: "previous", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], polarity: [{ type: i0.Input, args: [{ isSignal: true, alias: "polarity", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], iconType: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconType", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], decimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "decimals", required: false }] }], showSign: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSign", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], currencySymbol: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencySymbol", required: false }] }], valueFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormatter", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+class TalosTrendIndicatorModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosTrendIndicatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: TalosTrendIndicatorModule, imports: [TalosTrendIndicatorComponent], exports: [TalosTrendIndicatorComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosTrendIndicatorModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosTrendIndicatorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [TalosTrendIndicatorComponent],
+                    exports: [TalosTrendIndicatorComponent]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TALOS_STATUS_DESCRIPTORS, TalosBadgeDirective, TalosBadgeModule, TalosBreadcrumbComponent, TalosBreadcrumbItemComponent, TalosBreadcrumbItemDefDirective, TalosBreadcrumbModule, TalosBreadcrumbSeparatorDirective, TalosDataGridComponent, TalosDataGridModule, TalosGridActionsCellComponent, TalosGridCellFormatPipe, TalosGridFilterDialogComponent, TalosGridStatusCellComponent, TalosStatusTagComponent, TalosStatusTagModule, TalosTimelineComponent, TalosTimelineContentDirective, TalosTimelineDotDirective, TalosTimelineExtraDirective, TalosTimelineItemComponent, TalosTimelineModule, TalosTimelineTimeDirective, TalosTimelineTitleDirective, TalosTrendIndicatorComponent, TalosTrendIndicatorModule, formatBadgeContent, normalizeWorkflowStatus };
+//# sourceMappingURL=weeehaoooz-talos-ui-data-display.mjs.map