@weeehaoooz/talos-ui 0.1.0 → 0.1.2

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

@@ -0,0 +1,2414 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, input, output, signal, computed, Component, NgModule, model, effect, afterNextRender, DestroyRef } from '@angular/core';
+import { TalosTooltipDirective } from '@weeehaoooz/talos-ui/feedback';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { LucideRefreshCw, LucideUpload, LucideMaximize2, LucideMinimize2, LucideChevronDown, LucideCheck, LucideFileSpreadsheet, LucideFileJson, LucideCalendar, LucideClock, LucideArrowLeftRight } from '@lucide/angular';
+import { startOfDay, endOfDay, startOfISOWeek, subWeeks, endOfISOWeek, isSameDay, isBefore, addDays, addWeeks, isValid } from 'date-fns';
+import { formatDate } from '@weeehaoooz/talos-ui/core';
+import { DateRangePickerComponent } from '@weeehaoooz/talos-ui/form';
+
+/**
+ * Talos Category Bar Type Definitions
+ */
+
+const PRESET_PALETTE = {
+    blue: '#3b82f6',
+    emerald: '#10b981',
+    violet: '#8b5cf6',
+    purple: '#9333ea',
+    amber: '#f59e0b',
+    orange: '#f97316',
+    rose: '#f43f5e',
+    pink: '#ec4899',
+    cyan: '#06b6d4',
+    lime: '#84cc16',
+    indigo: '#6366f1',
+    teal: '#14b8a6',
+    sky: '#0284c7',
+    red: '#ef4444',
+    slate: '#64748b'
+};
+const DEFAULT_COLOR_ORDER = [
+    '#3b82f6', // blue
+    '#10b981', // emerald
+    '#8b5cf6', // violet
+    '#f59e0b', // amber
+    '#ec4899', // pink
+    '#06b6d4', // cyan
+    '#84cc16', // lime
+    '#f97316', // orange
+    '#6366f1', // indigo
+    '#14b8a6' // teal
+];
+class TalosCategoryBarComponent {
+    elementRef = inject(ElementRef);
+    /**
+     * Simple numeric values array for each category (e.g. [120, 80, 60, 40]).
+     */
+    values = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []));
+    /**
+     * Detailed category segments with labels, colors, and metadata.
+     */
+    categories = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "categories" }] : /* istanbul ignore next */ []));
+    /**
+     * Custom palette or color list for segments. Can be CSS color strings or preset names.
+     */
+    colors = input(DEFAULT_COLOR_ORDER, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "colors" }] : /* istanbul ignore next */ []));
+    /**
+     * Numeric position for the needle marker.
+     */
+    markerValue = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "markerValue" }] : /* istanbul ignore next */ []));
+    /**
+     * Detailed marker object definition.
+     */
+    marker = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "marker" }] : /* istanbul ignore next */ []));
+    /**
+     * Minimum scale bound (defaults to 0).
+     */
+    minValue = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minValue" }] : /* istanbul ignore next */ []));
+    /**
+     * Maximum scale bound (defaults to sum of all category values).
+     */
+    maxValue = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxValue" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to show category scale labels at segment boundaries.
+     */
+    showLabels = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showLabels" }] : /* istanbul ignore next */ []));
+    /**
+     * Custom boundary label strings. If not provided, computed cumulative values are shown.
+     */
+    labels = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
+    /**
+     * Placement of scale boundary labels: 'top', 'bottom', or 'none'.
+     */
+    labelPosition = input('top', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelPosition" }] : /* istanbul ignore next */ []));
+    /**
+     * Custom label formatter function for boundary values.
+     */
+    labelFormatter = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelFormatter" }] : /* istanbul ignore next */ []));
+    /**
+     * Custom value formatter for segment tooltip / legends.
+     */
+    valueFormatter = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueFormatter" }] : /* istanbul ignore next */ []));
+    /**
+     * Custom marker value formatter for tooltip.
+     */
+    markerFormatter = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "markerFormatter" }] : /* istanbul ignore next */ []));
+    /**
+     * Height size variant of the category bar: 'xs' (6px), 'sm' (8px), 'md' (12px), 'lg' (16px).
+     */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /**
+     * Corner shape of the bar: 'pill' (fully rounded capsule), 'rounded' (6px), 'square' (0px).
+     */
+    shape = input('pill', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional title above the bar.
+     */
+    title = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional subtitle below the title.
+     */
+    subtitle = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to display a bottom legend row with category names and color indicators.
+     */
+    showLegend = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showLegend" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether hovering segments or marker displays interactive tooltips.
+     */
+    showTooltip = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showTooltip" }] : /* istanbul ignore next */ []));
+    /**
+     * Enable smooth CSS transition animation.
+     */
+    animated = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "animated" }] : /* istanbul ignore next */ []));
+    /**
+     * Output event when a segment is clicked.
+     */
+    segmentClick = output();
+    /**
+     * Output event when the marker is clicked.
+     */
+    markerClick = output();
+    /**
+     * Output event when a segment is hovered.
+     */
+    segmentHover = output();
+    // Internal reactive hover states
+    hoveredSegment = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoveredSegment" }] : /* istanbul ignore next */ []));
+    hoveredMarker = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoveredMarker" }] : /* istanbul ignore next */ []));
+    tooltipPosition = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : /* istanbul ignore next */ []));
+    /**
+     * Resolves raw category items from either `categories` or `values` input.
+     */
+    rawCategories = computed(() => {
+        const cats = this.categories();
+        if (cats && cats.length > 0) {
+            return cats;
+        }
+        const vals = this.values();
+        if (vals && vals.length > 0) {
+            return vals.map((val, idx) => ({
+                value: val,
+                label: `Category ${idx + 1}`
+            }));
+        }
+        return [];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rawCategories" }] : /* istanbul ignore next */ []));
+    /**
+     * Resolved color array mapping named color presets to hex codes if needed.
+     */
+    resolvedPalette = computed(() => {
+        const customColors = this.colors();
+        if (customColors && customColors.length > 0) {
+            return customColors.map(c => PRESET_PALETTE[c] || c);
+        }
+        return DEFAULT_COLOR_ORDER;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedPalette" }] : /* istanbul ignore next */ []));
+    /**
+     * Total sum of all positive category values.
+     */
+    totalSum = computed(() => {
+        const raw = this.rawCategories();
+        return raw.reduce((sum, item) => sum + Math.max(0, item.value || 0), 0);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "totalSum" }] : /* istanbul ignore next */ []));
+    /**
+     * Computed minimum boundary.
+     */
+    computedMin = computed(() => {
+        const customMin = this.minValue();
+        return customMin !== null ? customMin : 0;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedMin" }] : /* istanbul ignore next */ []));
+    /**
+     * Computed maximum boundary.
+     */
+    computedMax = computed(() => {
+        const customMax = this.maxValue();
+        if (customMax !== null) {
+            return customMax;
+        }
+        const sum = this.totalSum();
+        return sum > 0 ? sum : 100;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedMax" }] : /* istanbul ignore next */ []));
+    /**
+     * Normalized computed segments for rendering with cumulative positions and percentages.
+     */
+    normalizedSegments = computed(() => {
+        const raw = this.rawCategories();
+        const total = this.totalSum();
+        const palette = this.resolvedPalette();
+        const vFormatter = this.valueFormatter();
+        if (raw.length === 0 || total <= 0) {
+            return [];
+        }
+        let cumulative = 0;
+        return raw.map((item, index) => {
+            const val = Math.max(0, item.value || 0);
+            const percentage = (val / total) * 100;
+            const start = cumulative;
+            const end = cumulative + val;
+            const startPercent = (start / total) * 100;
+            const endPercent = (end / total) * 100;
+            cumulative = end;
+            // Color resolution
+            let color = item.color;
+            if (!color && item.colorScheme) {
+                color = PRESET_PALETTE[item.colorScheme] || item.colorScheme;
+            }
+            if (!color) {
+                color = palette[index % palette.length];
+            }
+            const formattedVal = vFormatter ? vFormatter(val) : val.toLocaleString();
+            const label = item.label || `Category ${index + 1}`;
+            const tooltipText = item.tooltip || `${label}: ${formattedVal} (${percentage.toFixed(1)}%)`;
+            return {
+                index,
+                value: val,
+                label,
+                color,
+                percentage,
+                cumulativeStart: start,
+                cumulativeEnd: end,
+                cumulativeStartPercent: startPercent,
+                cumulativeEndPercent: endPercent,
+                formattedValue: formattedVal,
+                tooltipText,
+                raw: item
+            };
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "normalizedSegments" }] : /* istanbul ignore next */ []));
+    /**
+     * Computed scale boundary labels positioned at tick intersections.
+     */
+    scaleLabels = computed(() => {
+        if (!this.showLabels() || this.labelPosition() === 'none') {
+            return [];
+        }
+        const customLabels = this.labels();
+        const segments = this.normalizedSegments();
+        const lFormatter = this.labelFormatter();
+        const min = this.computedMin();
+        const max = this.computedMax();
+        if (customLabels && customLabels.length > 0) {
+            const count = customLabels.length;
+            return customLabels.map((text, index) => {
+                const leftPercent = count > 1 ? (index / (count - 1)) * 100 : 0;
+                return {
+                    index,
+                    value: min + ((max - min) * leftPercent) / 100,
+                    text,
+                    leftPercent
+                };
+            });
+        }
+        if (segments.length === 0) {
+            return [];
+        }
+        // Generate boundary ticks: [0, seg1.end, seg2.end, ...]
+        const ticks = [];
+        // Start tick (0 / min)
+        const startVal = min;
+        const startText = lFormatter ? lFormatter(startVal, 0) : startVal.toLocaleString();
+        ticks.push({
+            index: 0,
+            value: startVal,
+            text: startText,
+            leftPercent: 0
+        });
+        segments.forEach((seg, idx) => {
+            const val = seg.cumulativeEnd;
+            const text = lFormatter ? lFormatter(val, idx + 1) : val.toLocaleString();
+            ticks.push({
+                index: idx + 1,
+                value: val,
+                text,
+                leftPercent: seg.cumulativeEndPercent
+            });
+        });
+        return ticks;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scaleLabels" }] : /* istanbul ignore next */ []));
+    /**
+     * Resolved marker value.
+     */
+    markerVal = computed(() => {
+        const m = this.marker();
+        if (m && typeof m.value === 'number') {
+            return m.value;
+        }
+        const mv = this.markerValue();
+        return typeof mv === 'number' ? mv : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "markerVal" }] : /* istanbul ignore next */ []));
+    /**
+     * Marker needle placement and metadata.
+     */
+    markerState = computed(() => {
+        const val = this.markerVal();
+        if (val === null) {
+            return null;
+        }
+        const min = this.computedMin();
+        const max = this.computedMax();
+        const span = max - min;
+        if (span <= 0) {
+            return null;
+        }
+        const rawPercent = ((val - min) / span) * 100;
+        const clampedPercent = Math.max(0, Math.min(100, rawPercent));
+        const m = this.marker();
+        const mFormatter = this.markerFormatter();
+        const formattedVal = mFormatter ? mFormatter(val) : val.toLocaleString();
+        // Pick marker color: custom marker color -> category color at that position -> primary accent
+        let color = m?.color;
+        if (!color) {
+            const segments = this.normalizedSegments();
+            const currentSegment = segments.find(s => clampedPercent >= s.cumulativeStartPercent && clampedPercent <= s.cumulativeEndPercent);
+            color = currentSegment ? currentSegment.color : '#6366f1';
+        }
+        const label = m?.label || `Marker: ${formattedVal}`;
+        const tooltip = m?.tooltip || `${label} (${clampedPercent.toFixed(1)}%)`;
+        const variant = m?.variant || 'pill';
+        return {
+            visible: true,
+            percent: clampedPercent,
+            color,
+            label,
+            tooltip,
+            variant
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "markerState" }] : /* istanbul ignore next */ []));
+    /**
+     * Accessible description for screen readers.
+     */
+    ariaLabel = computed(() => {
+        const t = this.title();
+        const mVal = this.markerVal();
+        const total = this.totalSum();
+        if (t) {
+            return `${t}, Total: ${total}${mVal !== null ? `, Current Marker: ${mVal}` : ''}`;
+        }
+        return `Category bar with ${this.rawCategories().length} categories, Total: ${total}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    // Event handlers
+    onSegmentClick(seg, event) {
+        this.segmentClick.emit({
+            segment: seg,
+            index: seg.index,
+            event
+        });
+    }
+    onSegmentMouseEnter(seg, event) {
+        this.hoveredSegment.set(seg);
+        this.segmentHover.emit(seg);
+        this.updateTooltipPos(event);
+    }
+    onSegmentMouseLeave() {
+        this.hoveredSegment.set(null);
+        this.segmentHover.emit(null);
+    }
+    onMarkerMouseEnter(event) {
+        this.hoveredMarker.set(true);
+        this.updateTooltipPos(event);
+    }
+    onMarkerMouseLeave() {
+        this.hoveredMarker.set(false);
+    }
+    onMarkerClick(event) {
+        const ms = this.markerState();
+        const mVal = this.markerVal();
+        if (ms && mVal !== null) {
+            const mObj = this.marker() || { value: mVal };
+            this.markerClick.emit({
+                marker: mObj,
+                value: mVal,
+                percent: ms.percent,
+                event
+            });
+        }
+    }
+    updateTooltipPos(event) {
+        const hostEl = this.elementRef.nativeElement;
+        const rect = hostEl.getBoundingClientRect();
+        this.tooltipPosition.set({
+            x: event.clientX - rect.left,
+            y: event.clientY - rect.top
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosCategoryBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TalosCategoryBarComponent, isStandalone: true, selector: "talos-category-bar", inputs: { values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: false, transformFunction: null }, colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null }, markerValue: { classPropertyName: "markerValue", publicName: "markerValue", isSignal: true, isRequired: false, transformFunction: null }, marker: { classPropertyName: "marker", publicName: "marker", isSignal: true, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, labelFormatter: { classPropertyName: "labelFormatter", publicName: "labelFormatter", isSignal: true, isRequired: false, transformFunction: null }, valueFormatter: { classPropertyName: "valueFormatter", publicName: "valueFormatter", isSignal: true, isRequired: false, transformFunction: null }, markerFormatter: { classPropertyName: "markerFormatter", publicName: "markerFormatter", 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 }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showTooltip: { classPropertyName: "showTooltip", publicName: "showTooltip", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { segmentClick: "segmentClick", markerClick: "markerClick", segmentHover: "segmentHover" }, host: { properties: { "class.talos-category-bar-animated": "animated()", "class.talos-category-bar-sm": "size() === \"sm\"", "class.talos-category-bar-md": "size() === \"md\"", "class.talos-category-bar-lg": "size() === \"lg\"", "class.talos-category-bar-xs": "size() === \"xs\"", "attr.role": "\"meter\"", "attr.aria-valuenow": "markerVal()", "attr.aria-valuemin": "computedMin()", "attr.aria-valuemax": "computedMax()", "attr.aria-label": "ariaLabel()" }, classAttribute: "talos-category-bar" }, ngImport: i0, template: "<!-- Header Block (Title / Subtitle / Custom Header) -->\n@if (title() || subtitle()) {\n<div class=\"talos-category-bar-header\">\n  @if (title()) {\n  <div class=\"talos-category-bar-title\">{{ title() }}</div>\n  }\n  @if (subtitle()) {\n  <div class=\"talos-category-bar-subtitle\">{{ subtitle() }}</div>\n  }\n</div>\n}\n\n<ng-content select=\"[talosCategoryBarHeader]\"></ng-content>\n\n<!-- Top Scale Boundary Labels -->\n@if (showLabels() && labelPosition() === 'top' && scaleLabels().length > 0) {\n<div class=\"talos-category-bar-labels talos-category-bar-labels-top\" aria-hidden=\"true\">\n  @for (tick of scaleLabels(); track tick.index; let first = $first; let last = $last) {\n  <span class=\"talos-category-bar-label-tick\" [class.is-first]=\"first\" [class.is-last]=\"last\"\n    [style.left.%]=\"tick.leftPercent\">\n    {{ tick.text }}\n  </span>\n  }\n</div>\n}\n\n<!-- Main Bar Track Wrapper -->\n<div class=\"talos-category-bar-track-wrapper\">\n  <div class=\"talos-category-bar-track\" [class.shape-pill]=\"shape() === 'pill'\"\n    [class.shape-rounded]=\"shape() === 'rounded'\" [class.shape-square]=\"shape() === 'square'\"\n    [class.size-xs]=\"size() === 'xs'\" [class.size-sm]=\"size() === 'sm'\" [class.size-md]=\"size() === 'md'\"\n    [class.size-lg]=\"size() === 'lg'\">\n    @for (seg of normalizedSegments(); track seg.index; let first = $first; let last = $last) {\n    <div class=\"talos-category-bar-segment\" [class.is-first]=\"first\" [class.is-last]=\"last\"\n      [class.is-hovered]=\"hoveredSegment()?.index === seg.index\" [style.width.%]=\"seg.percentage\"\n      [style.background-color]=\"seg.color\" [talosTooltip]=\"seg.tooltipText\" [tooltipDisabled]=\"!showTooltip()\"\n      tooltipPosition=\"top\" role=\"button\" tabindex=\"0\" [attr.aria-label]=\"seg.tooltipText\"\n      (mouseenter)=\"onSegmentMouseEnter(seg, $event)\" (mouseleave)=\"onSegmentMouseLeave()\"\n      (click)=\"onSegmentClick(seg, $event)\" (keydown.enter)=\"onSegmentClick(seg, $event)\"\n      (keydown.space)=\"onSegmentClick(seg, $event)\"></div>\n    }\n\n    <!-- Marker Needle / Pin Indicator -->\n    @if (markerState(); as ms) {\n    <div class=\"talos-category-bar-marker\" [class.variant-pill]=\"ms.variant === 'pill'\"\n      [class.variant-line]=\"ms.variant === 'line'\" [class.variant-needle]=\"ms.variant === 'needle'\"\n      [class.is-hovered]=\"hoveredMarker()\" [style.left.%]=\"ms.percent\" [style.--marker-color]=\"ms.color\"\n      [talosTooltip]=\"ms.tooltip\" [tooltipDisabled]=\"!showTooltip()\" tooltipPosition=\"top\" role=\"slider\" tabindex=\"0\"\n      [attr.aria-valuenow]=\"markerVal()\" [attr.aria-label]=\"ms.label\" (mouseenter)=\"onMarkerMouseEnter($event)\"\n      (mouseleave)=\"onMarkerMouseLeave()\" (click)=\"onMarkerClick($event)\" (keydown.enter)=\"onMarkerClick($event)\"\n      (keydown.space)=\"onMarkerClick($event)\">\n      <div class=\"talos-category-bar-marker-handle\"></div>\n    </div>\n    }\n  </div>\n</div>\n\n<!-- Bottom Scale Boundary Labels -->\n@if (showLabels() && labelPosition() === 'bottom' && scaleLabels().length > 0) {\n<div class=\"talos-category-bar-labels talos-category-bar-labels-bottom\" aria-hidden=\"true\">\n  @for (tick of scaleLabels(); track tick.index; let first = $first; let last = $last) {\n  <span class=\"talos-category-bar-label-tick\" [class.is-first]=\"first\" [class.is-last]=\"last\"\n    [style.left.%]=\"tick.leftPercent\">\n    {{ tick.text }}\n  </span>\n  }\n</div>\n}\n\n<!-- Optional Legend Row -->\n@if (showLegend() && normalizedSegments().length > 0) {\n<div class=\"talos-category-bar-legend\">\n  @for (seg of normalizedSegments(); track seg.index) {\n  <div class=\"talos-category-bar-legend-item\" [class.is-hovered]=\"hoveredSegment()?.index === seg.index\"\n    [talosTooltip]=\"seg.tooltipText\" [tooltipDisabled]=\"!showTooltip()\" tooltipPosition=\"top\"\n    (mouseenter)=\"onSegmentMouseEnter(seg, $event)\" (mouseleave)=\"onSegmentMouseLeave()\"\n    (click)=\"onSegmentClick(seg, $event)\">\n    <span class=\"legend-dot\" [style.background-color]=\"seg.color\"></span>\n    <span class=\"legend-label\">{{ seg.label }}</span>\n    <span class=\"legend-value\">{{ seg.formattedValue }}</span>\n  </div>\n  }\n</div>\n}", styles: [":host{display:block;width:100%;box-sizing:border-box;font-family:inherit;color:var(--talos-text-color, var(--text-color, #0f172a));-webkit-user-select:none;user-select:none}.talos-category-bar-header{margin-bottom:.625rem}.talos-category-bar-header .talos-category-bar-title{font-size:.9375rem;font-weight:700;line-height:1.35;letter-spacing:-.01em;color:var(--talos-text-color, var(--text-color, #0f172a))}.talos-category-bar-header .talos-category-bar-subtitle{font-size:var(--talos-control-font-size, var(--control-font-size, .8125rem));color:var(--talos-text-muted, var(--text-muted, #64748b));margin:.25rem 0 0;line-height:1.4}.talos-category-bar-labels{position:relative;width:100%;height:1.25rem;box-sizing:border-box;pointer-events:none}.talos-category-bar-labels.talos-category-bar-labels-top{margin-bottom:.375rem}.talos-category-bar-labels.talos-category-bar-labels-bottom{margin-top:.375rem}.talos-category-bar-labels .talos-category-bar-label-tick{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:.75rem;font-weight:500;color:var(--talos-text-muted, var(--text-muted, #64748b));white-space:nowrap;line-height:1}.talos-category-bar-labels .talos-category-bar-label-tick.is-first{left:0!important;transform:translateY(-50%)}.talos-category-bar-labels .talos-category-bar-label-tick.is-last{left:100%!important;transform:translate(-100%,-50%)}.talos-category-bar-track-wrapper{position:relative;width:100%;box-sizing:border-box}.talos-category-bar-track{position:relative;display:flex;width:100%;overflow:visible;background-color:var(--talos-category-bar-track-bg, #f1f5f9);box-sizing:border-box;align-items:center}.talos-category-bar-track.size-xs{height:var(--talos-category-bar-height-xs, .25rem)}.talos-category-bar-track.size-sm{height:var(--talos-category-bar-height-sm, .375rem)}.talos-category-bar-track.size-md{height:var(--talos-category-bar-height-md, .5rem)}.talos-category-bar-track.size-lg{height:var(--talos-category-bar-height-lg, .75rem)}.talos-category-bar-track.shape-pill{border-radius:9999px}.talos-category-bar-track.shape-pill .talos-category-bar-segment.is-first{border-top-left-radius:9999px;border-bottom-left-radius:9999px}.talos-category-bar-track.shape-pill .talos-category-bar-segment.is-last{border-top-right-radius:9999px;border-bottom-right-radius:9999px}.talos-category-bar-track.shape-rounded{border-radius:var(--talos-category-bar-border-radius, var(--talos-border-radius, var(--border-radius, .375rem)))}.talos-category-bar-track.shape-rounded .talos-category-bar-segment.is-first{border-top-left-radius:var(--talos-category-bar-border-radius, var(--talos-border-radius, var(--border-radius, .375rem)));border-bottom-left-radius:var(--talos-category-bar-border-radius, var(--talos-border-radius, var(--border-radius, .375rem)))}.talos-category-bar-track.shape-rounded .talos-category-bar-segment.is-last{border-top-right-radius:var(--talos-category-bar-border-radius, var(--talos-border-radius, var(--border-radius, .375rem)));border-bottom-right-radius:var(--talos-category-bar-border-radius, var(--talos-border-radius, var(--border-radius, .375rem)))}.talos-category-bar-track.shape-square{border-radius:0}.talos-category-bar-segment{position:relative;height:100%;flex-shrink:0;cursor:pointer;outline:none;transition:opacity .15s ease,filter .15s ease;box-sizing:border-box;border-right:var(--talos-category-bar-gap, 2px) solid var(--talos-card-bg, var(--card-bg, #ffffff))}.talos-category-bar-segment.is-last{border-right:none}.talos-category-bar-segment:hover,.talos-category-bar-segment.is-hovered{filter:brightness(1.1);z-index:1}.talos-category-bar-segment:focus-visible{box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 3px rgba(37, 99, 235, .25)));z-index:2}.talos-category-bar-marker{position:absolute;top:50%;transform:translate(-50%,-50%);z-index:5;cursor:pointer;outline:none;display:flex;align-items:center;justify-content:center;transition:left .3s cubic-bezier(.4,0,.2,1),transform .15s ease}.talos-category-bar-marker .talos-category-bar-marker-handle{background-color:var(--marker-color, var(--talos-primary-color, var(--primary-color, #2592eb)));box-shadow:0 0 0 2px var(--talos-category-bar-marker-ring, var(--talos-card-bg, var(--card-bg, #ffffff))),0 2px 6px #0000002e;transition:transform .15s ease,box-shadow .15s ease,filter .15s ease}.talos-category-bar-marker.variant-pill .talos-category-bar-marker-handle{width:5px;height:20px;border-radius:9999px;border:1px solid rgba(255,255,255,.7)}.talos-category-bar-marker.variant-line .talos-category-bar-marker-handle{width:2.5px;height:24px;border-radius:1px;box-shadow:0 0 0 1.5px var(--talos-category-bar-marker-ring, var(--talos-card-bg, #ffffff)),0 2px 4px #00000026}.talos-category-bar-marker.variant-needle .talos-category-bar-marker-handle{width:10px;height:10px;border-radius:50%;border:2px solid #ffffff;box-shadow:0 0 0 2px var(--talos-category-bar-marker-ring, var(--talos-card-bg, #ffffff)),0 2px 6px #0003}.talos-category-bar-marker:hover .talos-category-bar-marker-handle,.talos-category-bar-marker.is-hovered .talos-category-bar-marker-handle{transform:scale(1.2);filter:brightness(1.1);box-shadow:0 0 0 3px var(--talos-category-bar-marker-ring, var(--talos-card-bg, var(--card-bg, #ffffff))),0 2px 8px #00000040}.talos-category-bar-marker:focus-visible .talos-category-bar-marker-handle{box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 3px rgba(37, 99, 235, .25))),0 0 8px #2563eb66}.talos-category-bar-legend{display:flex;flex-wrap:wrap;align-items:center;gap:.875rem 1.25rem;margin-top:.75rem;font-size:var(--talos-control-font-size, var(--control-font-size, .8125rem))}.talos-category-bar-legend .talos-category-bar-legend-item{display:inline-flex;align-items:center;gap:.375rem;cursor:pointer;color:var(--talos-text-muted, var(--text-muted, #64748b));transition:color .15s ease}.talos-category-bar-legend .talos-category-bar-legend-item .legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.talos-category-bar-legend .talos-category-bar-legend-item .legend-label{font-weight:500}.talos-category-bar-legend .talos-category-bar-legend-item .legend-value{font-weight:600;color:var(--talos-text-color, var(--text-color, #0f172a))}.talos-category-bar-legend .talos-category-bar-legend-item:hover,.talos-category-bar-legend .talos-category-bar-legend-item.is-hovered{color:var(--talos-text-color, var(--text-color, #0f172a))}\n"], dependencies: [{ 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: TalosCategoryBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-category-bar', imports: [TalosTooltipDirective], host: {
+                        'class': 'talos-category-bar',
+                        '[class.talos-category-bar-animated]': 'animated()',
+                        '[class.talos-category-bar-sm]': 'size() === "sm"',
+                        '[class.talos-category-bar-md]': 'size() === "md"',
+                        '[class.talos-category-bar-lg]': 'size() === "lg"',
+                        '[class.talos-category-bar-xs]': 'size() === "xs"',
+                        '[attr.role]': '"meter"',
+                        '[attr.aria-valuenow]': 'markerVal()',
+                        '[attr.aria-valuemin]': 'computedMin()',
+                        '[attr.aria-valuemax]': 'computedMax()',
+                        '[attr.aria-label]': 'ariaLabel()'
+                    }, template: "<!-- Header Block (Title / Subtitle / Custom Header) -->\n@if (title() || subtitle()) {\n<div class=\"talos-category-bar-header\">\n  @if (title()) {\n  <div class=\"talos-category-bar-title\">{{ title() }}</div>\n  }\n  @if (subtitle()) {\n  <div class=\"talos-category-bar-subtitle\">{{ subtitle() }}</div>\n  }\n</div>\n}\n\n<ng-content select=\"[talosCategoryBarHeader]\"></ng-content>\n\n<!-- Top Scale Boundary Labels -->\n@if (showLabels() && labelPosition() === 'top' && scaleLabels().length > 0) {\n<div class=\"talos-category-bar-labels talos-category-bar-labels-top\" aria-hidden=\"true\">\n  @for (tick of scaleLabels(); track tick.index; let first = $first; let last = $last) {\n  <span class=\"talos-category-bar-label-tick\" [class.is-first]=\"first\" [class.is-last]=\"last\"\n    [style.left.%]=\"tick.leftPercent\">\n    {{ tick.text }}\n  </span>\n  }\n</div>\n}\n\n<!-- Main Bar Track Wrapper -->\n<div class=\"talos-category-bar-track-wrapper\">\n  <div class=\"talos-category-bar-track\" [class.shape-pill]=\"shape() === 'pill'\"\n    [class.shape-rounded]=\"shape() === 'rounded'\" [class.shape-square]=\"shape() === 'square'\"\n    [class.size-xs]=\"size() === 'xs'\" [class.size-sm]=\"size() === 'sm'\" [class.size-md]=\"size() === 'md'\"\n    [class.size-lg]=\"size() === 'lg'\">\n    @for (seg of normalizedSegments(); track seg.index; let first = $first; let last = $last) {\n    <div class=\"talos-category-bar-segment\" [class.is-first]=\"first\" [class.is-last]=\"last\"\n      [class.is-hovered]=\"hoveredSegment()?.index === seg.index\" [style.width.%]=\"seg.percentage\"\n      [style.background-color]=\"seg.color\" [talosTooltip]=\"seg.tooltipText\" [tooltipDisabled]=\"!showTooltip()\"\n      tooltipPosition=\"top\" role=\"button\" tabindex=\"0\" [attr.aria-label]=\"seg.tooltipText\"\n      (mouseenter)=\"onSegmentMouseEnter(seg, $event)\" (mouseleave)=\"onSegmentMouseLeave()\"\n      (click)=\"onSegmentClick(seg, $event)\" (keydown.enter)=\"onSegmentClick(seg, $event)\"\n      (keydown.space)=\"onSegmentClick(seg, $event)\"></div>\n    }\n\n    <!-- Marker Needle / Pin Indicator -->\n    @if (markerState(); as ms) {\n    <div class=\"talos-category-bar-marker\" [class.variant-pill]=\"ms.variant === 'pill'\"\n      [class.variant-line]=\"ms.variant === 'line'\" [class.variant-needle]=\"ms.variant === 'needle'\"\n      [class.is-hovered]=\"hoveredMarker()\" [style.left.%]=\"ms.percent\" [style.--marker-color]=\"ms.color\"\n      [talosTooltip]=\"ms.tooltip\" [tooltipDisabled]=\"!showTooltip()\" tooltipPosition=\"top\" role=\"slider\" tabindex=\"0\"\n      [attr.aria-valuenow]=\"markerVal()\" [attr.aria-label]=\"ms.label\" (mouseenter)=\"onMarkerMouseEnter($event)\"\n      (mouseleave)=\"onMarkerMouseLeave()\" (click)=\"onMarkerClick($event)\" (keydown.enter)=\"onMarkerClick($event)\"\n      (keydown.space)=\"onMarkerClick($event)\">\n      <div class=\"talos-category-bar-marker-handle\"></div>\n    </div>\n    }\n  </div>\n</div>\n\n<!-- Bottom Scale Boundary Labels -->\n@if (showLabels() && labelPosition() === 'bottom' && scaleLabels().length > 0) {\n<div class=\"talos-category-bar-labels talos-category-bar-labels-bottom\" aria-hidden=\"true\">\n  @for (tick of scaleLabels(); track tick.index; let first = $first; let last = $last) {\n  <span class=\"talos-category-bar-label-tick\" [class.is-first]=\"first\" [class.is-last]=\"last\"\n    [style.left.%]=\"tick.leftPercent\">\n    {{ tick.text }}\n  </span>\n  }\n</div>\n}\n\n<!-- Optional Legend Row -->\n@if (showLegend() && normalizedSegments().length > 0) {\n<div class=\"talos-category-bar-legend\">\n  @for (seg of normalizedSegments(); track seg.index) {\n  <div class=\"talos-category-bar-legend-item\" [class.is-hovered]=\"hoveredSegment()?.index === seg.index\"\n    [talosTooltip]=\"seg.tooltipText\" [tooltipDisabled]=\"!showTooltip()\" tooltipPosition=\"top\"\n    (mouseenter)=\"onSegmentMouseEnter(seg, $event)\" (mouseleave)=\"onSegmentMouseLeave()\"\n    (click)=\"onSegmentClick(seg, $event)\">\n    <span class=\"legend-dot\" [style.background-color]=\"seg.color\"></span>\n    <span class=\"legend-label\">{{ seg.label }}</span>\n    <span class=\"legend-value\">{{ seg.formattedValue }}</span>\n  </div>\n  }\n</div>\n}", styles: [":host{display:block;width:100%;box-sizing:border-box;font-family:inherit;color:var(--talos-text-color, var(--text-color, #0f172a));-webkit-user-select:none;user-select:none}.talos-category-bar-header{margin-bottom:.625rem}.talos-category-bar-header .talos-category-bar-title{font-size:.9375rem;font-weight:700;line-height:1.35;letter-spacing:-.01em;color:var(--talos-text-color, var(--text-color, #0f172a))}.talos-category-bar-header .talos-category-bar-subtitle{font-size:var(--talos-control-font-size, var(--control-font-size, .8125rem));color:var(--talos-text-muted, var(--text-muted, #64748b));margin:.25rem 0 0;line-height:1.4}.talos-category-bar-labels{position:relative;width:100%;height:1.25rem;box-sizing:border-box;pointer-events:none}.talos-category-bar-labels.talos-category-bar-labels-top{margin-bottom:.375rem}.talos-category-bar-labels.talos-category-bar-labels-bottom{margin-top:.375rem}.talos-category-bar-labels .talos-category-bar-label-tick{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:.75rem;font-weight:500;color:var(--talos-text-muted, var(--text-muted, #64748b));white-space:nowrap;line-height:1}.talos-category-bar-labels .talos-category-bar-label-tick.is-first{left:0!important;transform:translateY(-50%)}.talos-category-bar-labels .talos-category-bar-label-tick.is-last{left:100%!important;transform:translate(-100%,-50%)}.talos-category-bar-track-wrapper{position:relative;width:100%;box-sizing:border-box}.talos-category-bar-track{position:relative;display:flex;width:100%;overflow:visible;background-color:var(--talos-category-bar-track-bg, #f1f5f9);box-sizing:border-box;align-items:center}.talos-category-bar-track.size-xs{height:var(--talos-category-bar-height-xs, .25rem)}.talos-category-bar-track.size-sm{height:var(--talos-category-bar-height-sm, .375rem)}.talos-category-bar-track.size-md{height:var(--talos-category-bar-height-md, .5rem)}.talos-category-bar-track.size-lg{height:var(--talos-category-bar-height-lg, .75rem)}.talos-category-bar-track.shape-pill{border-radius:9999px}.talos-category-bar-track.shape-pill .talos-category-bar-segment.is-first{border-top-left-radius:9999px;border-bottom-left-radius:9999px}.talos-category-bar-track.shape-pill .talos-category-bar-segment.is-last{border-top-right-radius:9999px;border-bottom-right-radius:9999px}.talos-category-bar-track.shape-rounded{border-radius:var(--talos-category-bar-border-radius, var(--talos-border-radius, var(--border-radius, .375rem)))}.talos-category-bar-track.shape-rounded .talos-category-bar-segment.is-first{border-top-left-radius:var(--talos-category-bar-border-radius, var(--talos-border-radius, var(--border-radius, .375rem)));border-bottom-left-radius:var(--talos-category-bar-border-radius, var(--talos-border-radius, var(--border-radius, .375rem)))}.talos-category-bar-track.shape-rounded .talos-category-bar-segment.is-last{border-top-right-radius:var(--talos-category-bar-border-radius, var(--talos-border-radius, var(--border-radius, .375rem)));border-bottom-right-radius:var(--talos-category-bar-border-radius, var(--talos-border-radius, var(--border-radius, .375rem)))}.talos-category-bar-track.shape-square{border-radius:0}.talos-category-bar-segment{position:relative;height:100%;flex-shrink:0;cursor:pointer;outline:none;transition:opacity .15s ease,filter .15s ease;box-sizing:border-box;border-right:var(--talos-category-bar-gap, 2px) solid var(--talos-card-bg, var(--card-bg, #ffffff))}.talos-category-bar-segment.is-last{border-right:none}.talos-category-bar-segment:hover,.talos-category-bar-segment.is-hovered{filter:brightness(1.1);z-index:1}.talos-category-bar-segment:focus-visible{box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 3px rgba(37, 99, 235, .25)));z-index:2}.talos-category-bar-marker{position:absolute;top:50%;transform:translate(-50%,-50%);z-index:5;cursor:pointer;outline:none;display:flex;align-items:center;justify-content:center;transition:left .3s cubic-bezier(.4,0,.2,1),transform .15s ease}.talos-category-bar-marker .talos-category-bar-marker-handle{background-color:var(--marker-color, var(--talos-primary-color, var(--primary-color, #2592eb)));box-shadow:0 0 0 2px var(--talos-category-bar-marker-ring, var(--talos-card-bg, var(--card-bg, #ffffff))),0 2px 6px #0000002e;transition:transform .15s ease,box-shadow .15s ease,filter .15s ease}.talos-category-bar-marker.variant-pill .talos-category-bar-marker-handle{width:5px;height:20px;border-radius:9999px;border:1px solid rgba(255,255,255,.7)}.talos-category-bar-marker.variant-line .talos-category-bar-marker-handle{width:2.5px;height:24px;border-radius:1px;box-shadow:0 0 0 1.5px var(--talos-category-bar-marker-ring, var(--talos-card-bg, #ffffff)),0 2px 4px #00000026}.talos-category-bar-marker.variant-needle .talos-category-bar-marker-handle{width:10px;height:10px;border-radius:50%;border:2px solid #ffffff;box-shadow:0 0 0 2px var(--talos-category-bar-marker-ring, var(--talos-card-bg, #ffffff)),0 2px 6px #0003}.talos-category-bar-marker:hover .talos-category-bar-marker-handle,.talos-category-bar-marker.is-hovered .talos-category-bar-marker-handle{transform:scale(1.2);filter:brightness(1.1);box-shadow:0 0 0 3px var(--talos-category-bar-marker-ring, var(--talos-card-bg, var(--card-bg, #ffffff))),0 2px 8px #00000040}.talos-category-bar-marker:focus-visible .talos-category-bar-marker-handle{box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 3px rgba(37, 99, 235, .25))),0 0 8px #2563eb66}.talos-category-bar-legend{display:flex;flex-wrap:wrap;align-items:center;gap:.875rem 1.25rem;margin-top:.75rem;font-size:var(--talos-control-font-size, var(--control-font-size, .8125rem))}.talos-category-bar-legend .talos-category-bar-legend-item{display:inline-flex;align-items:center;gap:.375rem;cursor:pointer;color:var(--talos-text-muted, var(--text-muted, #64748b));transition:color .15s ease}.talos-category-bar-legend .talos-category-bar-legend-item .legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.talos-category-bar-legend .talos-category-bar-legend-item .legend-label{font-weight:500}.talos-category-bar-legend .talos-category-bar-legend-item .legend-value{font-weight:600;color:var(--talos-text-color, var(--text-color, #0f172a))}.talos-category-bar-legend .talos-category-bar-legend-item:hover,.talos-category-bar-legend .talos-category-bar-legend-item.is-hovered{color:var(--talos-text-color, var(--text-color, #0f172a))}\n"] }]
+        }], propDecorators: { values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }], categories: [{ type: i0.Input, args: [{ isSignal: true, alias: "categories", required: false }] }], colors: [{ type: i0.Input, args: [{ isSignal: true, alias: "colors", required: false }] }], markerValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "markerValue", required: false }] }], marker: [{ type: i0.Input, args: [{ isSignal: true, alias: "marker", required: false }] }], minValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "minValue", required: false }] }], maxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxValue", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], labelFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelFormatter", required: false }] }], valueFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormatter", required: false }] }], markerFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "markerFormatter", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], showTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTooltip", required: false }] }], animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", required: false }] }], segmentClick: [{ type: i0.Output, args: ["segmentClick"] }], markerClick: [{ type: i0.Output, args: ["markerClick"] }], segmentHover: [{ type: i0.Output, args: ["segmentHover"] }] } });
+
+class TalosCategoryBarModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosCategoryBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: TalosCategoryBarModule, imports: [TalosCategoryBarComponent], exports: [TalosCategoryBarComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosCategoryBarModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosCategoryBarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [TalosCategoryBarComponent],
+                    exports: [TalosCategoryBarComponent]
+                }]
+        }] });
+
+const DEFAULT_DAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+const PALETTE_CONFIG = {
+    indigo: {
+        zero: { bg: '#eef2ff', text: '#4338ca' },
+        min: { r: 219, g: 228, b: 255 }, // #dbe4ff
+        max: { r: 67, g: 56, b: 202 }, // #4338ca
+        gradientCss: 'linear-gradient(90deg, #dbe4ff 0%, #818cf8 50%, #4338ca 100%)'
+    },
+    blue: {
+        zero: { bg: '#eff6ff', text: '#1d4ed8' },
+        min: { r: 219, g: 234, b: 254 }, // #dbeafe
+        max: { r: 29, g: 78, b: 216 }, // #1d4ed8
+        gradientCss: 'linear-gradient(90deg, #dbeafe 0%, #60a5fa 50%, #1d4ed8 100%)'
+    },
+    emerald: {
+        zero: { bg: '#ecfdf5', text: '#047857' },
+        min: { r: 209, g: 250, b: 229 }, // #d1fae5
+        max: { r: 4, g: 120, b: 87 }, // #047857
+        gradientCss: 'linear-gradient(90deg, #d1fae5 0%, #34d399 50%, #047857 100%)'
+    },
+    rose: {
+        zero: { bg: '#fff1f2', text: '#be123c' },
+        min: { r: 255, g: 228, b: 230 }, // #ffe4e6
+        max: { r: 190, g: 18, b: 60 }, // #be123c
+        gradientCss: 'linear-gradient(90deg, #ffe4e6 0%, #fb7185 50%, #be123c 100%)'
+    },
+    amber: {
+        zero: { bg: '#fffbeb', text: '#b45309' },
+        min: { r: 254, g: 243, b: 199 }, // #fef3c7
+        max: { r: 180, g: 83, b: 9 }, // #b45309
+        gradientCss: 'linear-gradient(90deg, #fef3c7 0%, #fbbf24 50%, #b45309 100%)'
+    },
+    violet: {
+        zero: { bg: '#f5f3ff', text: '#6d28d9' },
+        min: { r: 237, g: 233, b: 254 }, // #ede9fe
+        max: { r: 109, g: 40, b: 217 }, // #6d28d9
+        gradientCss: 'linear-gradient(90deg, #ede9fe 0%, #a78bfa 50%, #6d28d9 100%)'
+    },
+    slate: {
+        zero: { bg: '#f8fafc', text: '#334155' },
+        min: { r: 226, g: 232, b: 240 }, // #e2e8f0
+        max: { r: 51, g: 65, b: 85 }, // #334155
+        gradientCss: 'linear-gradient(90deg, #e2e8f0 0%, #94a3b8 50%, #334155 100%)'
+    },
+    custom: {
+        zero: { bg: '#eef2ff', text: '#4338ca' },
+        min: { r: 219, g: 228, b: 255 },
+        max: { r: 67, g: 56, b: 202 },
+        gradientCss: 'linear-gradient(90deg, #dbe4ff 0%, #4338ca 100%)'
+    }
+};
+class TalosHeatmapComponent {
+    elementRef = inject(ElementRef);
+    // Inputs & Models
+    data = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    metrics = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "metrics" }] : /* istanbul ignore next */ []));
+    selectedMetricId = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedMetricId" }] : /* istanbul ignore next */ []));
+    interval = model('hour', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "interval" }] : /* istanbul ignore next */ []));
+    dateRange = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateRange" }] : /* istanbul ignore next */ []));
+    swapAxes = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "swapAxes" }] : /* istanbul ignore next */ []));
+    title = input('Busiest times', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    hoursRange = input([9, 17], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoursRange" }] : /* istanbul ignore next */ []));
+    timeFormat = input('12h', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeFormat" }] : /* istanbul ignore next */ []));
+    days = input(DEFAULT_DAYS, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "days" }] : /* istanbul ignore next */ []));
+    colorScheme = input('indigo', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "colorScheme" }] : /* istanbul ignore next */ []));
+    customColorStops = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "customColorStops" }] : /* istanbul ignore next */ []));
+    showLegend = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showLegend" }] : /* istanbul ignore next */ []));
+    showValues = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showValues" }] : /* istanbul ignore next */ []));
+    cellShape = input('pill', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cellShape" }] : /* istanbul ignore next */ []));
+    cellSize = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cellSize" }] : /* istanbul ignore next */ []));
+    fitWidth = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fitWidth" }] : /* istanbul ignore next */ []));
+    loading = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    showToolbar = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showToolbar" }] : /* istanbul ignore next */ []));
+    showRefresh = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showRefresh" }] : /* istanbul ignore next */ []));
+    showExport = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showExport" }] : /* istanbul ignore next */ []));
+    showExpand = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showExpand" }] : /* istanbul ignore next */ []));
+    showSwapAxes = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showSwapAxes" }] : /* istanbul ignore next */ []));
+    showIntervalToggle = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showIntervalToggle" }] : /* istanbul ignore next */ []));
+    showDateRangePicker = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showDateRangePicker" }] : /* istanbul ignore next */ []));
+    dateRangePresets = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateRangePresets" }] : /* istanbul ignore next */ []));
+    unit = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "unit" }] : /* istanbul ignore next */ []));
+    maxValue = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxValue" }] : /* istanbul ignore next */ []));
+    minValue = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minValue" }] : /* istanbul ignore next */ []));
+    // Outputs
+    cellClick = output();
+    cellHover = output();
+    timeRangeChange = output();
+    refresh = output();
+    metricChange = output();
+    export = output();
+    // State signals
+    isExpanded = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
+    isMetricDropdownOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isMetricDropdownOpen" }] : /* istanbul ignore next */ []));
+    isExportDropdownOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isExportDropdownOpen" }] : /* istanbul ignore next */ []));
+    hoveredCell = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoveredCell" }] : /* istanbul ignore next */ []));
+    focusedCoord = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusedCoord" }] : /* istanbul ignore next */ []));
+    // Layout Fit computation
+    isFitWidth = computed(() => {
+        const fw = this.fitWidth();
+        if (fw !== undefined)
+            return fw;
+        return this.cellShape() !== 'square';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFitWidth" }] : /* istanbul ignore next */ []));
+    // Active Metric computation
+    currentMetric = computed(() => {
+        const list = this.metrics();
+        if (!list || list.length === 0)
+            return undefined;
+        const selectedId = this.selectedMetricId();
+        if (selectedId) {
+            const found = list.find((m) => m.id === selectedId);
+            if (found)
+                return found;
+        }
+        return list[0];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentMetric" }] : /* istanbul ignore next */ []));
+    // Effective Active Color Scheme
+    activeColorScheme = computed(() => {
+        const metric = this.currentMetric();
+        if (metric && metric.colorScheme)
+            return metric.colorScheme;
+        return this.colorScheme();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeColorScheme" }] : /* istanbul ignore next */ []));
+    // Effective Unit
+    activeUnit = computed(() => {
+        const metric = this.currentMetric();
+        if (metric && metric.unit !== undefined)
+            return metric.unit;
+        return this.unit();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeUnit" }] : /* istanbul ignore next */ []));
+    // Effective Raw Data Input
+    activeDataInput = computed(() => {
+        const metric = this.currentMetric();
+        if (metric)
+            return metric.data;
+        return this.data();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeDataInput" }] : /* istanbul ignore next */ []));
+    // Hours array from range (for hour-by-hour mode)
+    hours = computed(() => {
+        const [start, end] = this.hoursRange();
+        const clampedStart = Math.max(0, Math.min(23, start));
+        const clampedEnd = Math.max(clampedStart, Math.min(23, end));
+        const result = [];
+        for (let h = clampedStart; h <= clampedEnd; h++) {
+            result.push(h);
+        }
+        return result;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hours" }] : /* istanbul ignore next */ []));
+    // Resolved Date Range bounds
+    parsedDateRange = computed(() => {
+        const dr = this.dateRange();
+        if (!dr || (!dr.startDate && !dr.endDate)) {
+            return { start: null, end: null };
+        }
+        const s = dr.startDate ? startOfDay(new Date(dr.startDate)) : null;
+        const e = dr.endDate ? endOfDay(new Date(dr.endDate)) : (s ? endOfDay(s) : null);
+        return { start: s, end: e };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "parsedDateRange" }] : /* istanbul ignore next */ []));
+    // Day list for Day-by-Day mode (weeks grouping)
+    dayModeWeeks = computed(() => {
+        const { start, end } = this.parsedDateRange();
+        const effectiveStart = start || startOfISOWeek(subWeeks(new Date(), 3));
+        const effectiveEnd = end || endOfISOWeek(new Date());
+        const weeks = [];
+        let currentWeekStart = startOfISOWeek(effectiveStart);
+        const lastWeekEnd = endOfISOWeek(effectiveEnd);
+        while (isSameDay(currentWeekStart, lastWeekEnd) || isBefore(currentWeekStart, lastWeekEnd)) {
+            const currentWeekEnd = addDays(currentWeekStart, 6);
+            const daysInWeek = [];
+            for (let i = 0; i < 7; i++) {
+                daysInWeek.push(addDays(currentWeekStart, i));
+            }
+            const label = `${formatDate(currentWeekStart, 'MMM d')} - ${formatDate(currentWeekEnd, 'MMM d')}`;
+            weeks.push({
+                label,
+                start: currentWeekStart,
+                end: currentWeekEnd,
+                days: daysInWeek
+            });
+            currentWeekStart = addWeeks(currentWeekStart, 1);
+        }
+        return weeks;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dayModeWeeks" }] : /* istanbul ignore next */ []));
+    // Normalized Value Map:
+    // For 'hour': Map<`${colKey}_${hour}`, { value, meta }>
+    // For 'day': Map<`${yyyy-MM-dd}`, { value, meta }> AND Map<`${colKey}`, { value, meta }>
+    normalizedValueMap = computed(() => {
+        const map = new Map();
+        const rawInput = this.activeDataInput();
+        const currentDays = this.days();
+        const currentInterval = this.interval();
+        if (!rawInput)
+            return map;
+        if (Array.isArray(rawInput)) {
+            if (rawInput.length === 0)
+                return map;
+            const firstItem = rawInput[0];
+            if (typeof firstItem === 'string' ||
+                firstItem instanceof Date ||
+                (typeof firstItem === 'number' && firstItem > 1000000000)) {
+                // Raw Timestamp list
+                rawInput.forEach((ts) => {
+                    const date = new Date(ts);
+                    if (isValid(date)) {
+                        if (currentInterval === 'day') {
+                            const dayKey = formatDate(date, 'yyyy-MM-dd');
+                            const existing = map.get(dayKey);
+                            if (existing)
+                                existing.value += 1;
+                            else
+                                map.set(dayKey, { value: 1 });
+                        }
+                        else {
+                            const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+                            const dayName = dayNames[date.getDay()];
+                            const matchedDay = currentDays.find((d) => d.toLowerCase().startsWith(dayName.toLowerCase())) || dayName;
+                            const hour = date.getHours();
+                            const key = `${matchedDay}_${hour}`;
+                            const existing = map.get(key);
+                            if (existing)
+                                existing.value += 1;
+                            else
+                                map.set(key, { value: 1 });
+                        }
+                    }
+                });
+            }
+            else {
+                // HeatmapDataPoint array
+                rawInput.forEach((point) => {
+                    if (currentInterval === 'day') {
+                        let dayKey = '';
+                        if (point.date) {
+                            dayKey = typeof point.date === 'string' && /^\d{4}-\d{2}-\d{2}/.test(point.date)
+                                ? point.date.substring(0, 10)
+                                : formatDate(new Date(point.date), 'yyyy-MM-dd');
+                        }
+                        else if (point.day instanceof Date) {
+                            dayKey = formatDate(point.day, 'yyyy-MM-dd');
+                        }
+                        else if (typeof point.day === 'string' && /^\d{4}-\d{2}-\d{2}/.test(point.day)) {
+                            dayKey = point.day.substring(0, 10);
+                        }
+                        else {
+                            dayKey = String(point.day ?? '');
+                        }
+                        if (dayKey) {
+                            const existing = map.get(dayKey);
+                            if (existing) {
+                                existing.value += point.value;
+                                if (point.meta)
+                                    existing.meta = { ...existing.meta, ...point.meta };
+                            }
+                            else {
+                                map.set(dayKey, { value: point.value, meta: point.meta });
+                            }
+                        }
+                    }
+                    else {
+                        // Hour by hour
+                        let dayKey = '';
+                        if (point.day instanceof Date) {
+                            const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+                            const dayName = dayNames[point.day.getDay()];
+                            dayKey = currentDays.find((d) => d.toLowerCase().startsWith(dayName.toLowerCase())) || dayName;
+                        }
+                        else if (typeof point.day === 'number') {
+                            dayKey = currentDays[point.day] || String(point.day);
+                        }
+                        else {
+                            dayKey = String(point.day ?? '');
+                        }
+                        const hour = point.hour ?? 0;
+                        const key = `${dayKey}_${hour}`;
+                        const existing = map.get(key);
+                        if (existing) {
+                            existing.value += point.value;
+                            if (point.meta)
+                                existing.meta = { ...existing.meta, ...point.meta };
+                        }
+                        else {
+                            map.set(key, { value: point.value, meta: point.meta });
+                        }
+                    }
+                });
+            }
+        }
+        else if (typeof rawInput === 'object') {
+            // HeatmapMatrixData
+            const matrix = rawInput;
+            Object.entries(matrix).forEach(([outerKey, innerObj]) => {
+                if (typeof innerObj === 'object' && innerObj !== null) {
+                    Object.entries(innerObj).forEach(([innerKey, val]) => {
+                        const numVal = Number(val) || 0;
+                        if (currentInterval === 'day') {
+                            const key = `${outerKey}_${innerKey}`;
+                            map.set(key, { value: numVal });
+                        }
+                        else {
+                            const isInnerHour = !isNaN(Number(innerKey));
+                            if (isInnerHour) {
+                                const hour = Number(innerKey);
+                                const key = `${outerKey}_${hour}`;
+                                map.set(key, { value: numVal });
+                            }
+                            else {
+                                const hour = Number(outerKey);
+                                const key = `${innerKey}_${hour}`;
+                                map.set(key, { value: numVal });
+                            }
+                        }
+                    });
+                }
+            });
+        }
+        return map;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "normalizedValueMap" }] : /* istanbul ignore next */ []));
+    // Effective min & max value for heat scale
+    computedScaleBounds = computed(() => {
+        const customMin = this.minValue();
+        const customMax = this.maxValue();
+        const map = this.normalizedValueMap();
+        let dataMax = 0;
+        for (const item of map.values()) {
+            if (item.value > dataMax)
+                dataMax = item.value;
+        }
+        const min = customMin !== undefined ? customMin : 0;
+        const max = customMax !== undefined ? customMax : Math.max(1, dataMax);
+        return { min, max };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedScaleBounds" }] : /* istanbul ignore next */ []));
+    // Gradient CSS for Legend bar
+    legendGradientCss = computed(() => {
+        const scheme = this.activeColorScheme();
+        return PALETTE_CONFIG[scheme]?.gradientCss || PALETTE_CONFIG.indigo.gradientCss;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "legendGradientCss" }] : /* istanbul ignore next */ []));
+    // Column Headers computation (supports axis swapping)
+    columnHeaders = computed(() => {
+        const isSwapped = this.swapAxes();
+        const currentInterval = this.interval();
+        if (!isSwapped) {
+            return this.days().map((day) => ({ key: day, label: day }));
+        }
+        // When axes are swapped:
+        if (currentInterval === 'day') {
+            const weeks = this.dayModeWeeks();
+            return weeks.map((w) => ({ key: w.label, label: w.label }));
+        }
+        const hoursList = this.hours();
+        const format = this.timeFormat();
+        return hoursList.map((hour) => ({
+            key: hour,
+            label: this.formatHourLabel(hour, format)
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnHeaders" }] : /* istanbul ignore next */ []));
+    // Grid Matrix computation
+    gridRows = computed(() => {
+        const currentInterval = this.interval();
+        const isSwapped = this.swapAxes();
+        const map = this.normalizedValueMap();
+        const { min, max } = this.computedScaleBounds();
+        const scheme = this.activeColorScheme();
+        const palette = PALETTE_CONFIG[scheme] || PALETTE_CONFIG.indigo;
+        const unitStr = this.activeUnit();
+        const unitSuffix = unitStr ? ` ${unitStr}` : '';
+        const format = this.timeFormat();
+        const getVisuals = (val) => {
+            const intensity = max > min ? Math.max(0, Math.min(1, (val - min) / (max - min))) : 0;
+            let bgColor = '';
+            let textColor = '';
+            if (val === 0) {
+                bgColor = palette.zero.bg;
+                textColor = palette.zero.text;
+            }
+            else {
+                const r = Math.round(palette.min.r + (palette.max.r - palette.min.r) * intensity);
+                const g = Math.round(palette.min.g + (palette.max.g - palette.min.g) * intensity);
+                const b = Math.round(palette.min.b + (palette.max.b - palette.min.b) * intensity);
+                bgColor = `rgb(${r}, ${g}, ${b})`;
+                textColor = intensity >= 0.55 ? '#ffffff' : palette.zero.text;
+            }
+            return { intensity, bgColor, textColor };
+        };
+        // --- DAY-BY-DAY MODE ---
+        if (currentInterval === 'day') {
+            const weeks = this.dayModeWeeks();
+            const dayLabels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+            if (!isSwapped) {
+                // Standard: Rows = Weeks, Columns = Days
+                return weeks.map((week, weekIdx) => {
+                    const cells = week.days.map((d, dayIdx) => {
+                        const dateStr = formatDate(d, 'yyyy-MM-dd');
+                        const dayName = dayLabels[dayIdx];
+                        const entry = map.get(dateStr) || map.get(`${dayName}_${weekIdx}`);
+                        const val = entry?.value ?? 0;
+                        const { intensity, bgColor, textColor } = getVisuals(val);
+                        const tooltip = `${formatDate(d, 'EEEE, MMMM d, yyyy')}: ${val}${unitSuffix}`;
+                        return {
+                            id: dateStr,
+                            colKey: dayName,
+                            colLabel: `${dayName} (${formatDate(d, 'd')})`,
+                            rowKey: week.label,
+                            rowLabel: week.label,
+                            value: val,
+                            intensity,
+                            backgroundColor: bgColor,
+                            textColor,
+                            formattedValue: String(val),
+                            tooltipText: tooltip,
+                            date: d,
+                            meta: entry?.meta
+                        };
+                    });
+                    return {
+                        key: week.label,
+                        label: week.label,
+                        cells
+                    };
+                });
+            }
+            else {
+                // Swapped: Rows = Days (Mon..Sun), Columns = Weeks
+                return dayLabels.map((dayName, dayIdx) => {
+                    const cells = weeks.map((week, weekIdx) => {
+                        const d = week.days[dayIdx];
+                        const dateStr = formatDate(d, 'yyyy-MM-dd');
+                        const entry = map.get(dateStr) || map.get(`${dayName}_${weekIdx}`);
+                        const val = entry?.value ?? 0;
+                        const { intensity, bgColor, textColor } = getVisuals(val);
+                        const tooltip = `${formatDate(d, 'EEEE, MMMM d, yyyy')}: ${val}${unitSuffix}`;
+                        return {
+                            id: `${dateStr}_swapped`,
+                            colKey: week.label,
+                            colLabel: week.label,
+                            rowKey: dayName,
+                            rowLabel: dayName,
+                            value: val,
+                            intensity,
+                            backgroundColor: bgColor,
+                            textColor,
+                            formattedValue: String(val),
+                            tooltipText: tooltip,
+                            date: d,
+                            meta: entry?.meta
+                        };
+                    });
+                    return {
+                        key: dayName,
+                        label: dayName,
+                        cells
+                    };
+                });
+            }
+        }
+        // --- HOUR-BY-HOUR MODE ---
+        const hoursList = this.hours();
+        const colsList = this.days();
+        if (!isSwapped) {
+            // Standard: Rows = Hours, Columns = Days
+            return hoursList.map((hour) => {
+                const hourLabel = this.formatHourLabel(hour, format);
+                const cells = colsList.map((col) => {
+                    const key = `${col}_${hour}`;
+                    const entry = map.get(key);
+                    const val = entry?.value ?? 0;
+                    const { intensity, bgColor, textColor } = getVisuals(val);
+                    const tooltip = `${col}, ${hourLabel}: ${val}${unitSuffix}`;
+                    return {
+                        id: key,
+                        colKey: col,
+                        colLabel: col,
+                        rowKey: hour,
+                        rowLabel: hourLabel,
+                        value: val,
+                        intensity,
+                        backgroundColor: bgColor,
+                        textColor,
+                        formattedValue: String(val),
+                        tooltipText: tooltip,
+                        meta: entry?.meta
+                    };
+                });
+                return {
+                    key: hour,
+                    label: hourLabel,
+                    cells
+                };
+            });
+        }
+        else {
+            // Swapped: Rows = Days, Columns = Hours
+            return colsList.map((day) => {
+                const cells = hoursList.map((hour) => {
+                    const hourLabel = this.formatHourLabel(hour, format);
+                    const key = `${day}_${hour}`;
+                    const entry = map.get(key);
+                    const val = entry?.value ?? 0;
+                    const { intensity, bgColor, textColor } = getVisuals(val);
+                    const tooltip = `${day}, ${hourLabel}: ${val}${unitSuffix}`;
+                    return {
+                        id: `${key}_swapped`,
+                        colKey: hour,
+                        colLabel: hourLabel,
+                        rowKey: day,
+                        rowLabel: day,
+                        value: val,
+                        intensity,
+                        backgroundColor: bgColor,
+                        textColor,
+                        formattedValue: String(val),
+                        tooltipText: tooltip,
+                        meta: entry?.meta
+                    };
+                });
+                return {
+                    key: day,
+                    label: day,
+                    cells
+                };
+            });
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gridRows" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Notify parent on time range boundaries changes
+        effect(() => {
+            const days = this.days();
+            const hours = this.hours();
+            const inter = this.interval();
+            const dr = this.dateRange();
+            const swapped = this.swapAxes();
+            this.timeRangeChange.emit({
+                interval: inter,
+                startHour: hours.length > 0 ? hours[0] : undefined,
+                endHour: hours.length > 0 ? hours[hours.length - 1] : undefined,
+                days,
+                startDate: dr?.startDate ? new Date(dr.startDate) : undefined,
+                endDate: dr?.endDate ? new Date(dr.endDate) : undefined,
+                dateRange: dr,
+                swapAxes: swapped
+            });
+        });
+        // Close dropdowns on outside click
+        if (typeof document !== 'undefined') {
+            document.addEventListener('click', (event) => {
+                const target = event.target;
+                if (!this.elementRef.nativeElement.contains(target)) {
+                    this.isMetricDropdownOpen.set(false);
+                    this.isExportDropdownOpen.set(false);
+                }
+            });
+        }
+    }
+    formatHourLabel(hour, format) {
+        if (format === '24h') {
+            return `${hour.toString().padStart(2, '0')}:00`;
+        }
+        if (hour === 0)
+            return '12 AM';
+        if (hour < 12)
+            return `${hour} AM`;
+        if (hour === 12)
+            return '12 PM';
+        return `${hour - 12} PM`;
+    }
+    setInterval(newInterval) {
+        this.interval.set(newInterval);
+    }
+    toggleSwapAxes() {
+        this.swapAxes.update((v) => !v);
+    }
+    onDateRangePickerChange(val) {
+        this.dateRange.set(val);
+    }
+    toggleExpand() {
+        this.isExpanded.update((v) => !v);
+    }
+    toggleMetricDropdown(event) {
+        event.stopPropagation();
+        this.isMetricDropdownOpen.update((v) => !v);
+        this.isExportDropdownOpen.set(false);
+    }
+    toggleExportDropdown(event) {
+        event.stopPropagation();
+        this.isExportDropdownOpen.update((v) => !v);
+        this.isMetricDropdownOpen.set(false);
+    }
+    selectMetric(metric) {
+        this.selectedMetricId.set(metric.id);
+        this.isMetricDropdownOpen.set(false);
+        this.metricChange.emit(metric);
+    }
+    onRefreshClick() {
+        this.refresh.emit();
+    }
+    onCellMouseEnter(cell) {
+        this.hoveredCell.set(cell);
+        this.cellHover.emit(cell);
+    }
+    onCellMouseLeave() {
+        this.hoveredCell.set(null);
+        this.cellHover.emit(null);
+    }
+    onCellClick(cell, event) {
+        this.cellClick.emit({
+            cell,
+            colKey: cell.colKey,
+            rowKey: cell.rowKey,
+            value: cell.value,
+            interval: this.interval(),
+            event
+        });
+    }
+    onKeydown(event, colIdx, rowIdx) {
+        const rows = this.gridRows();
+        const cols = this.columnHeaders();
+        let targetRow = rowIdx;
+        let targetCol = colIdx;
+        if (event.key === 'ArrowUp') {
+            targetRow = Math.max(0, rowIdx - 1);
+            event.preventDefault();
+        }
+        else if (event.key === 'ArrowDown') {
+            targetRow = Math.min(rows.length - 1, rowIdx + 1);
+            event.preventDefault();
+        }
+        else if (event.key === 'ArrowLeft') {
+            targetCol = Math.max(0, colIdx - 1);
+            event.preventDefault();
+        }
+        else if (event.key === 'ArrowRight') {
+            targetCol = Math.min(cols.length - 1, colIdx + 1);
+            event.preventDefault();
+        }
+        else if (event.key === 'Enter' || event.key === ' ') {
+            const cell = rows[rowIdx]?.cells[colIdx];
+            if (cell) {
+                this.cellClick.emit({
+                    cell,
+                    colKey: cell.colKey,
+                    rowKey: cell.rowKey,
+                    value: cell.value,
+                    interval: this.interval(),
+                    event
+                });
+            }
+            event.preventDefault();
+            return;
+        }
+        if (targetRow !== rowIdx || targetCol !== colIdx) {
+            this.focusedCoord.set({ colIndex: targetCol, rowIndex: targetRow });
+            const cellEl = this.elementRef.nativeElement.querySelector(`[data-cell-coord="${targetRow}_${targetCol}"]`);
+            cellEl?.focus();
+        }
+    }
+    triggerExport(format) {
+        this.isExportDropdownOpen.set(false);
+        const rows = this.gridRows();
+        const cols = this.days();
+        if (format === 'csv') {
+            const header = ['Period', ...cols].join(',');
+            const body = rows.map((r) => [r.label, ...r.cells.map((c) => c.value)].join(',')).join('\n');
+            const csvContent = `${header}\n${body}`;
+            this.downloadFile(csvContent, 'text/csv;charset=utf-8;', `heatmap_${this.title().toLowerCase().replace(/\s+/g, '_')}.csv`);
+            this.export.emit({ format: 'csv', data: csvContent });
+        }
+        else if (format === 'json') {
+            const jsonRecords = {};
+            rows.forEach((r) => {
+                jsonRecords[r.label] = {};
+                r.cells.forEach((c) => {
+                    jsonRecords[r.label][c.colKey] = c.value;
+                });
+            });
+            const jsonStr = JSON.stringify(jsonRecords, null, 2);
+            this.downloadFile(jsonStr, 'application/json;charset=utf-8;', `heatmap_${this.title().toLowerCase().replace(/\s+/g, '_')}.json`);
+            this.export.emit({ format: 'json', data: jsonRecords });
+        }
+    }
+    downloadFile(content, mimeType, filename) {
+        if (typeof window === 'undefined')
+            return;
+        const blob = new Blob([content], { type: mimeType });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosHeatmapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TalosHeatmapComponent, isStandalone: true, selector: "talos-heatmap", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, metrics: { classPropertyName: "metrics", publicName: "metrics", isSignal: true, isRequired: false, transformFunction: null }, selectedMetricId: { classPropertyName: "selectedMetricId", publicName: "selectedMetricId", isSignal: true, isRequired: false, transformFunction: null }, interval: { classPropertyName: "interval", publicName: "interval", isSignal: true, isRequired: false, transformFunction: null }, dateRange: { classPropertyName: "dateRange", publicName: "dateRange", isSignal: true, isRequired: false, transformFunction: null }, swapAxes: { classPropertyName: "swapAxes", publicName: "swapAxes", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, hoursRange: { classPropertyName: "hoursRange", publicName: "hoursRange", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, days: { classPropertyName: "days", publicName: "days", isSignal: true, isRequired: false, transformFunction: null }, colorScheme: { classPropertyName: "colorScheme", publicName: "colorScheme", isSignal: true, isRequired: false, transformFunction: null }, customColorStops: { classPropertyName: "customColorStops", publicName: "customColorStops", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, cellShape: { classPropertyName: "cellShape", publicName: "cellShape", isSignal: true, isRequired: false, transformFunction: null }, cellSize: { classPropertyName: "cellSize", publicName: "cellSize", isSignal: true, isRequired: false, transformFunction: null }, fitWidth: { classPropertyName: "fitWidth", publicName: "fitWidth", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, showRefresh: { classPropertyName: "showRefresh", publicName: "showRefresh", isSignal: true, isRequired: false, transformFunction: null }, showExport: { classPropertyName: "showExport", publicName: "showExport", isSignal: true, isRequired: false, transformFunction: null }, showExpand: { classPropertyName: "showExpand", publicName: "showExpand", isSignal: true, isRequired: false, transformFunction: null }, showSwapAxes: { classPropertyName: "showSwapAxes", publicName: "showSwapAxes", isSignal: true, isRequired: false, transformFunction: null }, showIntervalToggle: { classPropertyName: "showIntervalToggle", publicName: "showIntervalToggle", isSignal: true, isRequired: false, transformFunction: null }, showDateRangePicker: { classPropertyName: "showDateRangePicker", publicName: "showDateRangePicker", isSignal: true, isRequired: false, transformFunction: null }, dateRangePresets: { classPropertyName: "dateRangePresets", publicName: "dateRangePresets", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedMetricId: "selectedMetricIdChange", interval: "intervalChange", dateRange: "dateRangeChange", swapAxes: "swapAxesChange", cellClick: "cellClick", cellHover: "cellHover", timeRangeChange: "timeRangeChange", refresh: "refresh", metricChange: "metricChange", export: "export" }, host: { properties: { "class.talos-heatmap-expanded": "isExpanded()", "class.talos-heatmap-loading": "loading()", "class.talos-heatmap-sm": "cellSize() === \"sm\"", "class.talos-heatmap-md": "cellSize() === \"md\"", "class.talos-heatmap-lg": "cellSize() === \"lg\"", "class.talos-heatmap-pill": "cellShape() === \"pill\"", "class.talos-heatmap-rounded": "cellShape() === \"rounded\"", "class.talos-heatmap-square": "cellShape() === \"square\"", "class.talos-heatmap-fit-width": "isFitWidth()", "class.talos-heatmap-compact-square": "!isFitWidth()", "class.talos-heatmap-swapped-axes": "swapAxes()", "attr.role": "\"region\"", "attr.aria-label": "title()" }, classAttribute: "talos-heatmap" }, ngImport: i0, template: "<div class=\"talos-heatmap-container\">\n  <!-- Header Toolbar -->\n  @if (showToolbar()) {\n  <div class=\"talos-heatmap-header\">\n    <div class=\"talos-heatmap-title-area\">\n      <h3 class=\"talos-heatmap-title\">{{ title() }}</h3>\n    </div>\n\n    <div class=\"talos-heatmap-actions\">\n      <!-- Interval Selector Toggle (Hour vs Day) -->\n      @if (showIntervalToggle()) {\n      <div class=\"talos-heatmap-interval-group\" role=\"radiogroup\" aria-label=\"Time Interval\">\n        <button type=\"button\" class=\"talos-heatmap-interval-btn\" [class.is-active]=\"interval() === 'hour'\"\n          (click)=\"setInterval('hour')\" role=\"radio\" [attr.aria-checked]=\"interval() === 'hour'\">\n          <svg lucideClock [size]=\"13\"></svg>\n          <span>Hour</span>\n        </button>\n        <button type=\"button\" class=\"talos-heatmap-interval-btn\" [class.is-active]=\"interval() === 'day'\"\n          (click)=\"setInterval('day')\" role=\"radio\" [attr.aria-checked]=\"interval() === 'day'\">\n          <svg lucideCalendar [size]=\"13\"></svg>\n          <span>Day</span>\n        </button>\n      </div>\n      }\n\n      <!-- Date Range Picker Integration -->\n      @if (showDateRangePicker()) {\n      <div class=\"talos-heatmap-daterange-box\">\n        <talos-date-range-picker size=\"sm\" [ngModel]=\"dateRange()\" (rangeChange)=\"onDateRangePickerChange($event)\"\n          [presets]=\"dateRangePresets()\" placeholder=\"Select date range\" />\n      </div>\n      }\n\n      <!-- Metric Dropdown Selector -->\n      @if (metrics().length > 0) {\n      <div class=\"talos-heatmap-dropdown-wrapper\">\n        <button type=\"button\" class=\"talos-heatmap-dropdown-btn\" [class.is-open]=\"isMetricDropdownOpen()\"\n          (click)=\"toggleMetricDropdown($event)\" aria-haspopup=\"listbox\" [attr.aria-expanded]=\"isMetricDropdownOpen()\">\n          <span class=\"talos-heatmap-dropdown-label\">{{ currentMetric()?.label || 'Select metric' }}</span>\n          <svg lucideChevronDown [size]=\"14\" class=\"talos-heatmap-dropdown-icon\"></svg>\n        </button>\n\n        @if (isMetricDropdownOpen()) {\n        <div class=\"talos-heatmap-menu\" role=\"listbox\">\n          @for (m of metrics(); track m.id) {\n          <button type=\"button\" class=\"talos-heatmap-menu-item\" [class.is-selected]=\"m.id === currentMetric()?.id\"\n            (click)=\"selectMetric(m)\" role=\"option\" [attr.aria-selected]=\"m.id === currentMetric()?.id\">\n            <span>{{ m.label }}</span>\n            @if (m.id === currentMetric()?.id) {\n            <svg lucideCheck [size]=\"14\" class=\"talos-heatmap-check-icon\"></svg>\n            }\n          </button>\n          }\n        </div>\n        }\n      </div>\n      }\n\n      <!-- Refresh Button -->\n      @if (showRefresh()) {\n      <button type=\"button\" class=\"talos-heatmap-icon-btn\" [class.is-spinning]=\"loading()\" (click)=\"onRefreshClick()\"\n        title=\"Refresh data\" aria-label=\"Refresh data\">\n        <svg lucideRefreshCw [size]=\"16\" class=\"talos-heatmap-action-icon\"></svg>\n      </button>\n      }\n\n      <!-- Export Dropdown Button -->\n      @if (showExport()) {\n      <div class=\"talos-heatmap-dropdown-wrapper\">\n        <button type=\"button\" class=\"talos-heatmap-icon-btn\" (click)=\"toggleExportDropdown($event)\" title=\"Export data\"\n          aria-label=\"Export data\">\n          <svg lucideUpload [size]=\"16\" class=\"talos-heatmap-action-icon\"></svg>\n        </button>\n\n        @if (isExportDropdownOpen()) {\n        <div class=\"talos-heatmap-menu talos-heatmap-export-menu\" role=\"menu\">\n          <button type=\"button\" class=\"talos-heatmap-menu-item\" (click)=\"triggerExport('csv')\" role=\"menuitem\">\n            <svg lucideFileSpreadsheet [size]=\"14\" class=\"talos-heatmap-menu-icon\"></svg>\n            <span>Export to CSV</span>\n          </button>\n          <button type=\"button\" class=\"talos-heatmap-menu-item\" (click)=\"triggerExport('json')\" role=\"menuitem\">\n            <svg lucideFileJson [size]=\"14\" class=\"talos-heatmap-menu-icon\"></svg>\n            <span>Export to JSON</span>\n          </button>\n        </div>\n        }\n      </div>\n      }\n\n      <!-- Swap Axes Button -->\n      @if (showSwapAxes()) {\n      <button type=\"button\" class=\"talos-heatmap-icon-btn\" [class.is-active]=\"swapAxes()\" (click)=\"toggleSwapAxes()\"\n        [title]=\"swapAxes() ? 'Reset axis orientation' : 'Swap axes (Days / Hours)'\"\n        [attr.aria-label]=\"swapAxes() ? 'Reset axis orientation' : 'Swap axes (Days / Hours)'\">\n        <svg lucideArrowLeftRight [size]=\"16\" class=\"talos-heatmap-action-icon\"></svg>\n      </button>\n      }\n\n      <!-- Fullscreen / Expand Button -->\n      @if (showExpand()) {\n      <button type=\"button\" class=\"talos-heatmap-icon-btn\" (click)=\"toggleExpand()\"\n        [title]=\"isExpanded() ? 'Minimize' : 'Expand'\" [aria-label]=\"isExpanded() ? 'Minimize' : 'Expand'\">\n        @if (isExpanded()) {\n        <svg lucideMinimize2 [size]=\"16\" class=\"talos-heatmap-action-icon\"></svg>\n        } @else {\n        <svg lucideMaximize2 [size]=\"16\" class=\"talos-heatmap-action-icon\"></svg>\n        }\n      </button>\n      }\n    </div>\n  </div>\n  }\n\n  <!-- Heatmap Matrix Grid Wrapper -->\n  <div class=\"talos-heatmap-body\" [class.is-loading]=\"loading()\">\n    <!-- Grid Table -->\n    <div class=\"talos-heatmap-grid\" role=\"grid\" [attr.aria-rowcount]=\"gridRows().length + 1\"\n      [attr.aria-colcount]=\"columnHeaders().length + 1\">\n      <!-- Column Headers -->\n      <div class=\"talos-heatmap-row talos-heatmap-header-row\" role=\"row\" aria-rowindex=\"1\">\n        <div class=\"talos-heatmap-corner-cell\" role=\"columnheader\"></div>\n        @for (col of columnHeaders(); track col.key; let colIdx = $index) {\n        <div class=\"talos-heatmap-col-header\" role=\"columnheader\" [attr.aria-colindex]=\"colIdx + 2\">\n          {{ col.label }}\n        </div>\n        }\n      </div>\n\n      <!-- Data Rows -->\n      @for (row of gridRows(); track row.key; let rowIdx = $index) {\n      <div class=\"talos-heatmap-row\" role=\"row\" [attr.aria-rowindex]=\"rowIdx + 2\">\n        <!-- Row Header (Hour or Week Range) -->\n        <div class=\"talos-heatmap-row-header\" role=\"rowheader\" aria-colindex=\"1\" [title]=\"row.label\">\n          {{ row.label }}\n        </div>\n\n        <!-- Heatmap Cells -->\n        @for (cell of row.cells; track cell.id; let colIdx = $index) {\n        <div class=\"talos-heatmap-cell-wrapper\" role=\"gridcell\" [attr.aria-colindex]=\"colIdx + 2\"\n          [attr.aria-label]=\"cell.tooltipText\" tabindex=\"0\" [attr.data-cell-coord]=\"rowIdx + '_' + colIdx\"\n          [talosTooltip]=\"cell.tooltipText\" (mouseenter)=\"onCellMouseEnter(cell)\" (mouseleave)=\"onCellMouseLeave()\"\n          (click)=\"onCellClick(cell, $event)\" (keydown)=\"onKeydown($event, colIdx, rowIdx)\">\n          <div class=\"talos-heatmap-pill\" [style.background-color]=\"cell.backgroundColor\" [style.color]=\"cell.textColor\"\n            [class.has-value]=\"cell.value > 0\">\n            @if (showValues()) {\n            <span class=\"talos-heatmap-cell-value\">{{ cell.formattedValue }}</span>\n            }\n          </div>\n        </div>\n        }\n      </div>\n      }\n    </div>\n\n    <!-- Loading Skeleton Shimmer Overlay -->\n    @if (loading()) {\n    <div class=\"talos-heatmap-loading-overlay\" aria-hidden=\"true\">\n      <div class=\"talos-heatmap-loading-spinner-box\">\n        <svg lucideRefreshCw [size]=\"16\" class=\"talos-heatmap-loading-spinner\"></svg>\n        <span>Loading data...</span>\n      </div>\n    </div>\n    }\n  </div>\n\n  <!-- Bottom Legend Bar -->\n  @if (showLegend()) {\n  <div class=\"talos-heatmap-legend\">\n    <span class=\"talos-heatmap-legend-bound\">{{ computedScaleBounds().min }}</span>\n    <div class=\"talos-heatmap-legend-bar\" [style.background]=\"legendGradientCss()\" aria-hidden=\"true\"></div>\n    <span class=\"talos-heatmap-legend-bound\">{{ computedScaleBounds().max }}</span>\n  </div>\n  }\n</div>", styles: [":host{display:block;font-family:inherit;--talos-heatmap-bg: var(--talos-card-bg, var(--talos-bg-surface, #ffffff));--talos-heatmap-text: var(--talos-text-color, #0f172a);--talos-heatmap-muted: var(--talos-text-muted, #64748b);--talos-heatmap-border: var(--talos-border-color, #e2e8f0);--talos-heatmap-hover-bg: var(--talos-primary-light, #f1f5f9);--talos-heatmap-cell-height: 28px;--talos-heatmap-cell-radius: 9999px;--talos-heatmap-row-header-width: 68px;--talos-heatmap-cell-font-size: .85rem;--talos-heatmap-gap: 6px;--talos-heatmap-square-size: 32px}:host(.talos-heatmap-sm){--talos-heatmap-cell-height: 22px;--talos-heatmap-row-header-width: 56px;--talos-heatmap-cell-font-size: .72rem;--talos-heatmap-square-size: 24px;--talos-heatmap-gap: 4px}:host(.talos-heatmap-md){--talos-heatmap-cell-height: 28px;--talos-heatmap-row-header-width: 68px;--talos-heatmap-cell-font-size: .82rem;--talos-heatmap-square-size: 32px;--talos-heatmap-gap: 6px}:host(.talos-heatmap-lg){--talos-heatmap-cell-height: 36px;--talos-heatmap-row-header-width: 80px;--talos-heatmap-cell-font-size: .92rem;--talos-heatmap-square-size: 40px;--talos-heatmap-gap: 8px}:host(.talos-heatmap-square){--talos-heatmap-cell-radius: 6px}:host(.talos-heatmap-rounded){--talos-heatmap-cell-radius: 8px}:host(.talos-heatmap-pill){--talos-heatmap-cell-radius: 9999px}:host(.talos-heatmap-expanded){position:fixed;inset:16px;z-index:1000;background:var(--talos-heatmap-bg);box-shadow:0 25px 50px -12px #00000059;border-radius:16px;padding:24px;overflow:auto;border:1px solid var(--talos-heatmap-border)}.talos-heatmap-container{display:flex;flex-direction:column;background:var(--talos-heatmap-bg);border-radius:12px;position:relative;width:100%}.talos-heatmap-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}.talos-heatmap-title{margin:0;font-size:1.15rem;font-weight:700;color:var(--talos-heatmap-text);letter-spacing:-.015em}.talos-heatmap-actions{display:flex;align-items:center;gap:8px;position:relative;flex-wrap:wrap}.talos-heatmap-interval-group{display:inline-flex;align-items:center;padding:2px;background:var(--talos-bg-color, #f1f5f9);border-radius:8px;border:1px solid var(--talos-heatmap-border);gap:2px}.talos-heatmap-interval-btn{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;font-size:.78rem;font-weight:600;color:var(--talos-heatmap-muted);background:transparent;border:none;border-radius:6px;cursor:pointer;outline:none;transition:all .15s ease}.talos-heatmap-interval-btn:hover{color:var(--talos-heatmap-text)}.talos-heatmap-interval-btn.is-active{background:var(--talos-card-bg, #ffffff);color:var(--talos-primary-color, #4338ca);box-shadow:0 1px 3px #00000014}.talos-heatmap-daterange-box{min-width:220px}.talos-heatmap-dropdown-wrapper{position:relative}.talos-heatmap-dropdown-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;font-size:.85rem;font-weight:500;color:var(--talos-heatmap-text);background:var(--talos-bg-color, #f8fafc);border:1px solid var(--talos-heatmap-border);border-radius:8px;cursor:pointer;outline:none;transition:all .15s ease}.talos-heatmap-dropdown-btn:hover{background:var(--talos-primary-light, #f1f5f9);border-color:var(--talos-border-hover, #cbd5e1)}.talos-heatmap-dropdown-btn.is-open{background:var(--talos-primary-light-hover, #e2e8f0);border-color:var(--talos-border-hover, #94a3b8)}.talos-heatmap-dropdown-btn .talos-heatmap-dropdown-icon{width:14px;height:14px;color:var(--talos-heatmap-muted)}.talos-heatmap-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--talos-heatmap-muted);cursor:pointer;outline:none;transition:all .15s ease}.talos-heatmap-icon-btn:hover{background:var(--talos-heatmap-hover-bg);color:var(--talos-heatmap-text)}.talos-heatmap-icon-btn.is-active{background:var(--talos-primary-light, #e0e7ff);color:var(--talos-primary-color, #4338ca);border-color:var(--talos-border-color, #c7d2fe)}.talos-heatmap-icon-btn:active{transform:scale(.95)}.talos-heatmap-icon-btn.is-spinning .talos-heatmap-action-icon{animation:talos-heatmap-spin .8s linear infinite}.talos-heatmap-icon-btn .talos-heatmap-action-icon{width:16px;height:16px}@keyframes talos-heatmap-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.talos-heatmap-menu{position:absolute;top:calc(100% + 4px);right:0;z-index:50;min-width:170px;background:var(--talos-dropdown-bg, var(--talos-card-bg, #ffffff));border:1px solid var(--talos-dropdown-border, var(--talos-heatmap-border));border-radius:10px;box-shadow:var(--talos-dropdown-shadow, 0 10px 25px -5px rgba(0, 0, 0, .12), 0 8px 10px -6px rgba(0, 0, 0, .08));padding:4px;display:flex;flex-direction:column;gap:2px;animation:talos-heatmap-menu-fade .15s cubic-bezier(.16,1,.3,1)}@keyframes talos-heatmap-menu-fade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.talos-heatmap-menu-item{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:7px 10px;font-size:.82rem;font-weight:500;color:var(--talos-heatmap-text);background:transparent;border:none;border-radius:6px;text-align:left;cursor:pointer;transition:background .12s ease}.talos-heatmap-menu-item:hover{background:var(--talos-dropdown-hover-bg, #f1f5f9)}.talos-heatmap-menu-item.is-selected{font-weight:600;color:var(--talos-primary-color, #4338ca)}.talos-heatmap-menu-item .talos-heatmap-check-icon{width:14px;height:14px;color:var(--talos-primary-color, #4338ca)}.talos-heatmap-menu-item .talos-heatmap-menu-icon{width:14px;height:14px;color:var(--talos-heatmap-muted)}.talos-heatmap-body{position:relative;width:100%;overflow-x:auto;padding-bottom:8px}.talos-heatmap-body.is-loading{pointer-events:none;-webkit-user-select:none;user-select:none}.talos-heatmap-grid{display:flex;flex-direction:column;gap:var(--talos-heatmap-gap);width:100%}.talos-heatmap-row{display:flex;align-items:center;gap:var(--talos-heatmap-gap);width:100%}.talos-heatmap-header-row{margin-bottom:2px}.talos-heatmap-corner-cell{width:var(--talos-heatmap-row-header-width);flex-shrink:0}.talos-heatmap-row-header{width:var(--talos-heatmap-row-header-width);flex-shrink:0;text-align:right;padding-right:12px;font-size:.82rem;font-weight:500;color:var(--talos-heatmap-muted);-webkit-user-select:none;user-select:none;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host(.talos-heatmap-fit-width) .talos-heatmap-grid{min-width:440px;width:100%}:host(.talos-heatmap-fit-width) .talos-heatmap-col-header{flex:1;text-align:center;font-size:.82rem;font-weight:600;color:var(--talos-heatmap-muted);-webkit-user-select:none;user-select:none;letter-spacing:.01em}:host(.talos-heatmap-fit-width) .talos-heatmap-cell-wrapper{flex:1;height:var(--talos-heatmap-cell-height);position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;outline:none;border-radius:var(--talos-heatmap-cell-radius);transition:transform .15s ease}:host(.talos-heatmap-fit-width) .talos-heatmap-cell-wrapper:focus-visible{box-shadow:0 0 0 2px #4338ca,0 0 0 4px #4338ca40;z-index:5}:host(.talos-heatmap-compact-square) .talos-heatmap-grid{min-width:auto;width:max-content}:host(.talos-heatmap-compact-square) .talos-heatmap-col-header{width:var(--talos-heatmap-square-size);flex:0 0 var(--talos-heatmap-square-size);text-align:center;font-size:.78rem;font-weight:600;color:var(--talos-heatmap-muted);-webkit-user-select:none;user-select:none;letter-spacing:.01em}:host(.talos-heatmap-compact-square) .talos-heatmap-cell-wrapper{width:var(--talos-heatmap-square-size);height:var(--talos-heatmap-square-size);flex:0 0 var(--talos-heatmap-square-size);aspect-ratio:1/1;position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;outline:none;border-radius:var(--talos-heatmap-cell-radius);transition:transform .15s ease}:host(.talos-heatmap-compact-square) .talos-heatmap-cell-wrapper:focus-visible{box-shadow:0 0 0 2px #4338ca,0 0 0 4px #4338ca40;z-index:5}.talos-heatmap-pill{width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:var(--talos-heatmap-cell-radius);font-size:var(--talos-heatmap-cell-font-size);font-weight:600;line-height:1;-webkit-user-select:none;user-select:none;box-shadow:inset 0 0 0 1px #0000000a;transition:transform .15s cubic-bezier(.16,1,.3,1),box-shadow .15s ease,filter .15s ease}.talos-heatmap-pill:not(.has-value){box-shadow:inset 0 0 0 1px #e2e8f0e6}.talos-heatmap-cell-wrapper:hover .talos-heatmap-pill{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 14px -2px #00000024,0 2px 4px -1px #0000000f;filter:brightness(1.03);z-index:2}.talos-heatmap-cell-wrapper:active .talos-heatmap-pill{transform:translateY(0) scale(.96)}.talos-heatmap-cell-value{display:inline-block;text-align:center}.talos-heatmap-loading-overlay{position:absolute;inset:0;background:var(--talos-loading-overlay-bg, rgba(255, 255, 255, .75));-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:40;border-radius:8px;animation:talos-heatmap-fade-in .2s ease}@keyframes talos-heatmap-fade-in{0%{opacity:0}to{opacity:1}}.talos-heatmap-loading-spinner-box{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--talos-card-bg, #ffffff);border:1px solid var(--talos-heatmap-border);border-radius:8px;box-shadow:0 4px 12px #00000014;font-size:.85rem;font-weight:500;color:var(--talos-heatmap-text)}.talos-heatmap-loading-spinner-box .talos-heatmap-loading-spinner{width:16px;height:16px;color:var(--talos-primary-color, #4338ca);animation:talos-heatmap-spin .8s linear infinite}.talos-heatmap-legend{display:flex;align-items:center;gap:12px;margin-top:18px;padding-left:var(--talos-heatmap-row-header-width)}.talos-heatmap-legend-bound{font-size:.82rem;font-weight:600;color:var(--talos-heatmap-muted);min-width:12px}.talos-heatmap-legend-bar{height:8px;width:130px;border-radius:9999px;box-shadow:inset 0 1px 2px #00000014}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DateRangePickerComponent, selector: "talos-date-range-picker", inputs: ["placeholder", "label", "floatingLabel", "floating", "required", "disabled", "clearable", "size", "displayFormat", "valueFormat", "showTime", "use24Hour", "showSeconds", "minuteStep", "minDate", "maxDate", "minSpan", "maxSpan", "firstDayOfWeek", "presets", "presetType", "filterDate"], outputs: ["rangeChange", "opened", "closed"] }, { kind: "directive", type: TalosTooltipDirective, selector: "[talosTooltip], [tooltip]", inputs: ["talosTooltip", "tooltip", "tooltipPosition", "tooltipDisabled"] }, { kind: "component", type: LucideRefreshCw, selector: "svg[lucideRefreshCw]" }, { kind: "component", type: LucideUpload, selector: "svg[lucideUpload]" }, { kind: "component", type: LucideMaximize2, selector: "svg[lucideMaximize2]" }, { kind: "component", type: LucideMinimize2, selector: "svg[lucideMinimize2]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }, { kind: "component", type: LucideCheck, selector: "svg[lucideCheck]" }, { kind: "component", type: LucideFileSpreadsheet, selector: "svg[lucideFileSpreadsheet]" }, { kind: "component", type: LucideFileJson, selector: "svg[lucideFileBraces], svg[lucideFileJson]" }, { kind: "component", type: LucideCalendar, selector: "svg[lucideCalendar]" }, { kind: "component", type: LucideClock, selector: "svg[lucideClock]" }, { kind: "component", type: LucideArrowLeftRight, selector: "svg[lucideArrowLeftRight]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosHeatmapComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-heatmap', imports: [
+                        FormsModule,
+                        DateRangePickerComponent,
+                        TalosTooltipDirective,
+                        LucideRefreshCw,
+                        LucideUpload,
+                        LucideMaximize2,
+                        LucideMinimize2,
+                        LucideChevronDown,
+                        LucideCheck,
+                        LucideFileSpreadsheet,
+                        LucideFileJson,
+                        LucideCalendar,
+                        LucideClock,
+                        LucideArrowLeftRight
+                    ], host: {
+                        'class': 'talos-heatmap',
+                        '[class.talos-heatmap-expanded]': 'isExpanded()',
+                        '[class.talos-heatmap-loading]': 'loading()',
+                        '[class.talos-heatmap-sm]': 'cellSize() === "sm"',
+                        '[class.talos-heatmap-md]': 'cellSize() === "md"',
+                        '[class.talos-heatmap-lg]': 'cellSize() === "lg"',
+                        '[class.talos-heatmap-pill]': 'cellShape() === "pill"',
+                        '[class.talos-heatmap-rounded]': 'cellShape() === "rounded"',
+                        '[class.talos-heatmap-square]': 'cellShape() === "square"',
+                        '[class.talos-heatmap-fit-width]': 'isFitWidth()',
+                        '[class.talos-heatmap-compact-square]': '!isFitWidth()',
+                        '[class.talos-heatmap-swapped-axes]': 'swapAxes()',
+                        '[attr.role]': '"region"',
+                        '[attr.aria-label]': 'title()'
+                    }, template: "<div class=\"talos-heatmap-container\">\n  <!-- Header Toolbar -->\n  @if (showToolbar()) {\n  <div class=\"talos-heatmap-header\">\n    <div class=\"talos-heatmap-title-area\">\n      <h3 class=\"talos-heatmap-title\">{{ title() }}</h3>\n    </div>\n\n    <div class=\"talos-heatmap-actions\">\n      <!-- Interval Selector Toggle (Hour vs Day) -->\n      @if (showIntervalToggle()) {\n      <div class=\"talos-heatmap-interval-group\" role=\"radiogroup\" aria-label=\"Time Interval\">\n        <button type=\"button\" class=\"talos-heatmap-interval-btn\" [class.is-active]=\"interval() === 'hour'\"\n          (click)=\"setInterval('hour')\" role=\"radio\" [attr.aria-checked]=\"interval() === 'hour'\">\n          <svg lucideClock [size]=\"13\"></svg>\n          <span>Hour</span>\n        </button>\n        <button type=\"button\" class=\"talos-heatmap-interval-btn\" [class.is-active]=\"interval() === 'day'\"\n          (click)=\"setInterval('day')\" role=\"radio\" [attr.aria-checked]=\"interval() === 'day'\">\n          <svg lucideCalendar [size]=\"13\"></svg>\n          <span>Day</span>\n        </button>\n      </div>\n      }\n\n      <!-- Date Range Picker Integration -->\n      @if (showDateRangePicker()) {\n      <div class=\"talos-heatmap-daterange-box\">\n        <talos-date-range-picker size=\"sm\" [ngModel]=\"dateRange()\" (rangeChange)=\"onDateRangePickerChange($event)\"\n          [presets]=\"dateRangePresets()\" placeholder=\"Select date range\" />\n      </div>\n      }\n\n      <!-- Metric Dropdown Selector -->\n      @if (metrics().length > 0) {\n      <div class=\"talos-heatmap-dropdown-wrapper\">\n        <button type=\"button\" class=\"talos-heatmap-dropdown-btn\" [class.is-open]=\"isMetricDropdownOpen()\"\n          (click)=\"toggleMetricDropdown($event)\" aria-haspopup=\"listbox\" [attr.aria-expanded]=\"isMetricDropdownOpen()\">\n          <span class=\"talos-heatmap-dropdown-label\">{{ currentMetric()?.label || 'Select metric' }}</span>\n          <svg lucideChevronDown [size]=\"14\" class=\"talos-heatmap-dropdown-icon\"></svg>\n        </button>\n\n        @if (isMetricDropdownOpen()) {\n        <div class=\"talos-heatmap-menu\" role=\"listbox\">\n          @for (m of metrics(); track m.id) {\n          <button type=\"button\" class=\"talos-heatmap-menu-item\" [class.is-selected]=\"m.id === currentMetric()?.id\"\n            (click)=\"selectMetric(m)\" role=\"option\" [attr.aria-selected]=\"m.id === currentMetric()?.id\">\n            <span>{{ m.label }}</span>\n            @if (m.id === currentMetric()?.id) {\n            <svg lucideCheck [size]=\"14\" class=\"talos-heatmap-check-icon\"></svg>\n            }\n          </button>\n          }\n        </div>\n        }\n      </div>\n      }\n\n      <!-- Refresh Button -->\n      @if (showRefresh()) {\n      <button type=\"button\" class=\"talos-heatmap-icon-btn\" [class.is-spinning]=\"loading()\" (click)=\"onRefreshClick()\"\n        title=\"Refresh data\" aria-label=\"Refresh data\">\n        <svg lucideRefreshCw [size]=\"16\" class=\"talos-heatmap-action-icon\"></svg>\n      </button>\n      }\n\n      <!-- Export Dropdown Button -->\n      @if (showExport()) {\n      <div class=\"talos-heatmap-dropdown-wrapper\">\n        <button type=\"button\" class=\"talos-heatmap-icon-btn\" (click)=\"toggleExportDropdown($event)\" title=\"Export data\"\n          aria-label=\"Export data\">\n          <svg lucideUpload [size]=\"16\" class=\"talos-heatmap-action-icon\"></svg>\n        </button>\n\n        @if (isExportDropdownOpen()) {\n        <div class=\"talos-heatmap-menu talos-heatmap-export-menu\" role=\"menu\">\n          <button type=\"button\" class=\"talos-heatmap-menu-item\" (click)=\"triggerExport('csv')\" role=\"menuitem\">\n            <svg lucideFileSpreadsheet [size]=\"14\" class=\"talos-heatmap-menu-icon\"></svg>\n            <span>Export to CSV</span>\n          </button>\n          <button type=\"button\" class=\"talos-heatmap-menu-item\" (click)=\"triggerExport('json')\" role=\"menuitem\">\n            <svg lucideFileJson [size]=\"14\" class=\"talos-heatmap-menu-icon\"></svg>\n            <span>Export to JSON</span>\n          </button>\n        </div>\n        }\n      </div>\n      }\n\n      <!-- Swap Axes Button -->\n      @if (showSwapAxes()) {\n      <button type=\"button\" class=\"talos-heatmap-icon-btn\" [class.is-active]=\"swapAxes()\" (click)=\"toggleSwapAxes()\"\n        [title]=\"swapAxes() ? 'Reset axis orientation' : 'Swap axes (Days / Hours)'\"\n        [attr.aria-label]=\"swapAxes() ? 'Reset axis orientation' : 'Swap axes (Days / Hours)'\">\n        <svg lucideArrowLeftRight [size]=\"16\" class=\"talos-heatmap-action-icon\"></svg>\n      </button>\n      }\n\n      <!-- Fullscreen / Expand Button -->\n      @if (showExpand()) {\n      <button type=\"button\" class=\"talos-heatmap-icon-btn\" (click)=\"toggleExpand()\"\n        [title]=\"isExpanded() ? 'Minimize' : 'Expand'\" [aria-label]=\"isExpanded() ? 'Minimize' : 'Expand'\">\n        @if (isExpanded()) {\n        <svg lucideMinimize2 [size]=\"16\" class=\"talos-heatmap-action-icon\"></svg>\n        } @else {\n        <svg lucideMaximize2 [size]=\"16\" class=\"talos-heatmap-action-icon\"></svg>\n        }\n      </button>\n      }\n    </div>\n  </div>\n  }\n\n  <!-- Heatmap Matrix Grid Wrapper -->\n  <div class=\"talos-heatmap-body\" [class.is-loading]=\"loading()\">\n    <!-- Grid Table -->\n    <div class=\"talos-heatmap-grid\" role=\"grid\" [attr.aria-rowcount]=\"gridRows().length + 1\"\n      [attr.aria-colcount]=\"columnHeaders().length + 1\">\n      <!-- Column Headers -->\n      <div class=\"talos-heatmap-row talos-heatmap-header-row\" role=\"row\" aria-rowindex=\"1\">\n        <div class=\"talos-heatmap-corner-cell\" role=\"columnheader\"></div>\n        @for (col of columnHeaders(); track col.key; let colIdx = $index) {\n        <div class=\"talos-heatmap-col-header\" role=\"columnheader\" [attr.aria-colindex]=\"colIdx + 2\">\n          {{ col.label }}\n        </div>\n        }\n      </div>\n\n      <!-- Data Rows -->\n      @for (row of gridRows(); track row.key; let rowIdx = $index) {\n      <div class=\"talos-heatmap-row\" role=\"row\" [attr.aria-rowindex]=\"rowIdx + 2\">\n        <!-- Row Header (Hour or Week Range) -->\n        <div class=\"talos-heatmap-row-header\" role=\"rowheader\" aria-colindex=\"1\" [title]=\"row.label\">\n          {{ row.label }}\n        </div>\n\n        <!-- Heatmap Cells -->\n        @for (cell of row.cells; track cell.id; let colIdx = $index) {\n        <div class=\"talos-heatmap-cell-wrapper\" role=\"gridcell\" [attr.aria-colindex]=\"colIdx + 2\"\n          [attr.aria-label]=\"cell.tooltipText\" tabindex=\"0\" [attr.data-cell-coord]=\"rowIdx + '_' + colIdx\"\n          [talosTooltip]=\"cell.tooltipText\" (mouseenter)=\"onCellMouseEnter(cell)\" (mouseleave)=\"onCellMouseLeave()\"\n          (click)=\"onCellClick(cell, $event)\" (keydown)=\"onKeydown($event, colIdx, rowIdx)\">\n          <div class=\"talos-heatmap-pill\" [style.background-color]=\"cell.backgroundColor\" [style.color]=\"cell.textColor\"\n            [class.has-value]=\"cell.value > 0\">\n            @if (showValues()) {\n            <span class=\"talos-heatmap-cell-value\">{{ cell.formattedValue }}</span>\n            }\n          </div>\n        </div>\n        }\n      </div>\n      }\n    </div>\n\n    <!-- Loading Skeleton Shimmer Overlay -->\n    @if (loading()) {\n    <div class=\"talos-heatmap-loading-overlay\" aria-hidden=\"true\">\n      <div class=\"talos-heatmap-loading-spinner-box\">\n        <svg lucideRefreshCw [size]=\"16\" class=\"talos-heatmap-loading-spinner\"></svg>\n        <span>Loading data...</span>\n      </div>\n    </div>\n    }\n  </div>\n\n  <!-- Bottom Legend Bar -->\n  @if (showLegend()) {\n  <div class=\"talos-heatmap-legend\">\n    <span class=\"talos-heatmap-legend-bound\">{{ computedScaleBounds().min }}</span>\n    <div class=\"talos-heatmap-legend-bar\" [style.background]=\"legendGradientCss()\" aria-hidden=\"true\"></div>\n    <span class=\"talos-heatmap-legend-bound\">{{ computedScaleBounds().max }}</span>\n  </div>\n  }\n</div>", styles: [":host{display:block;font-family:inherit;--talos-heatmap-bg: var(--talos-card-bg, var(--talos-bg-surface, #ffffff));--talos-heatmap-text: var(--talos-text-color, #0f172a);--talos-heatmap-muted: var(--talos-text-muted, #64748b);--talos-heatmap-border: var(--talos-border-color, #e2e8f0);--talos-heatmap-hover-bg: var(--talos-primary-light, #f1f5f9);--talos-heatmap-cell-height: 28px;--talos-heatmap-cell-radius: 9999px;--talos-heatmap-row-header-width: 68px;--talos-heatmap-cell-font-size: .85rem;--talos-heatmap-gap: 6px;--talos-heatmap-square-size: 32px}:host(.talos-heatmap-sm){--talos-heatmap-cell-height: 22px;--talos-heatmap-row-header-width: 56px;--talos-heatmap-cell-font-size: .72rem;--talos-heatmap-square-size: 24px;--talos-heatmap-gap: 4px}:host(.talos-heatmap-md){--talos-heatmap-cell-height: 28px;--talos-heatmap-row-header-width: 68px;--talos-heatmap-cell-font-size: .82rem;--talos-heatmap-square-size: 32px;--talos-heatmap-gap: 6px}:host(.talos-heatmap-lg){--talos-heatmap-cell-height: 36px;--talos-heatmap-row-header-width: 80px;--talos-heatmap-cell-font-size: .92rem;--talos-heatmap-square-size: 40px;--talos-heatmap-gap: 8px}:host(.talos-heatmap-square){--talos-heatmap-cell-radius: 6px}:host(.talos-heatmap-rounded){--talos-heatmap-cell-radius: 8px}:host(.talos-heatmap-pill){--talos-heatmap-cell-radius: 9999px}:host(.talos-heatmap-expanded){position:fixed;inset:16px;z-index:1000;background:var(--talos-heatmap-bg);box-shadow:0 25px 50px -12px #00000059;border-radius:16px;padding:24px;overflow:auto;border:1px solid var(--talos-heatmap-border)}.talos-heatmap-container{display:flex;flex-direction:column;background:var(--talos-heatmap-bg);border-radius:12px;position:relative;width:100%}.talos-heatmap-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}.talos-heatmap-title{margin:0;font-size:1.15rem;font-weight:700;color:var(--talos-heatmap-text);letter-spacing:-.015em}.talos-heatmap-actions{display:flex;align-items:center;gap:8px;position:relative;flex-wrap:wrap}.talos-heatmap-interval-group{display:inline-flex;align-items:center;padding:2px;background:var(--talos-bg-color, #f1f5f9);border-radius:8px;border:1px solid var(--talos-heatmap-border);gap:2px}.talos-heatmap-interval-btn{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;font-size:.78rem;font-weight:600;color:var(--talos-heatmap-muted);background:transparent;border:none;border-radius:6px;cursor:pointer;outline:none;transition:all .15s ease}.talos-heatmap-interval-btn:hover{color:var(--talos-heatmap-text)}.talos-heatmap-interval-btn.is-active{background:var(--talos-card-bg, #ffffff);color:var(--talos-primary-color, #4338ca);box-shadow:0 1px 3px #00000014}.talos-heatmap-daterange-box{min-width:220px}.talos-heatmap-dropdown-wrapper{position:relative}.talos-heatmap-dropdown-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;font-size:.85rem;font-weight:500;color:var(--talos-heatmap-text);background:var(--talos-bg-color, #f8fafc);border:1px solid var(--talos-heatmap-border);border-radius:8px;cursor:pointer;outline:none;transition:all .15s ease}.talos-heatmap-dropdown-btn:hover{background:var(--talos-primary-light, #f1f5f9);border-color:var(--talos-border-hover, #cbd5e1)}.talos-heatmap-dropdown-btn.is-open{background:var(--talos-primary-light-hover, #e2e8f0);border-color:var(--talos-border-hover, #94a3b8)}.talos-heatmap-dropdown-btn .talos-heatmap-dropdown-icon{width:14px;height:14px;color:var(--talos-heatmap-muted)}.talos-heatmap-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--talos-heatmap-muted);cursor:pointer;outline:none;transition:all .15s ease}.talos-heatmap-icon-btn:hover{background:var(--talos-heatmap-hover-bg);color:var(--talos-heatmap-text)}.talos-heatmap-icon-btn.is-active{background:var(--talos-primary-light, #e0e7ff);color:var(--talos-primary-color, #4338ca);border-color:var(--talos-border-color, #c7d2fe)}.talos-heatmap-icon-btn:active{transform:scale(.95)}.talos-heatmap-icon-btn.is-spinning .talos-heatmap-action-icon{animation:talos-heatmap-spin .8s linear infinite}.talos-heatmap-icon-btn .talos-heatmap-action-icon{width:16px;height:16px}@keyframes talos-heatmap-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.talos-heatmap-menu{position:absolute;top:calc(100% + 4px);right:0;z-index:50;min-width:170px;background:var(--talos-dropdown-bg, var(--talos-card-bg, #ffffff));border:1px solid var(--talos-dropdown-border, var(--talos-heatmap-border));border-radius:10px;box-shadow:var(--talos-dropdown-shadow, 0 10px 25px -5px rgba(0, 0, 0, .12), 0 8px 10px -6px rgba(0, 0, 0, .08));padding:4px;display:flex;flex-direction:column;gap:2px;animation:talos-heatmap-menu-fade .15s cubic-bezier(.16,1,.3,1)}@keyframes talos-heatmap-menu-fade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.talos-heatmap-menu-item{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:7px 10px;font-size:.82rem;font-weight:500;color:var(--talos-heatmap-text);background:transparent;border:none;border-radius:6px;text-align:left;cursor:pointer;transition:background .12s ease}.talos-heatmap-menu-item:hover{background:var(--talos-dropdown-hover-bg, #f1f5f9)}.talos-heatmap-menu-item.is-selected{font-weight:600;color:var(--talos-primary-color, #4338ca)}.talos-heatmap-menu-item .talos-heatmap-check-icon{width:14px;height:14px;color:var(--talos-primary-color, #4338ca)}.talos-heatmap-menu-item .talos-heatmap-menu-icon{width:14px;height:14px;color:var(--talos-heatmap-muted)}.talos-heatmap-body{position:relative;width:100%;overflow-x:auto;padding-bottom:8px}.talos-heatmap-body.is-loading{pointer-events:none;-webkit-user-select:none;user-select:none}.talos-heatmap-grid{display:flex;flex-direction:column;gap:var(--talos-heatmap-gap);width:100%}.talos-heatmap-row{display:flex;align-items:center;gap:var(--talos-heatmap-gap);width:100%}.talos-heatmap-header-row{margin-bottom:2px}.talos-heatmap-corner-cell{width:var(--talos-heatmap-row-header-width);flex-shrink:0}.talos-heatmap-row-header{width:var(--talos-heatmap-row-header-width);flex-shrink:0;text-align:right;padding-right:12px;font-size:.82rem;font-weight:500;color:var(--talos-heatmap-muted);-webkit-user-select:none;user-select:none;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host(.talos-heatmap-fit-width) .talos-heatmap-grid{min-width:440px;width:100%}:host(.talos-heatmap-fit-width) .talos-heatmap-col-header{flex:1;text-align:center;font-size:.82rem;font-weight:600;color:var(--talos-heatmap-muted);-webkit-user-select:none;user-select:none;letter-spacing:.01em}:host(.talos-heatmap-fit-width) .talos-heatmap-cell-wrapper{flex:1;height:var(--talos-heatmap-cell-height);position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;outline:none;border-radius:var(--talos-heatmap-cell-radius);transition:transform .15s ease}:host(.talos-heatmap-fit-width) .talos-heatmap-cell-wrapper:focus-visible{box-shadow:0 0 0 2px #4338ca,0 0 0 4px #4338ca40;z-index:5}:host(.talos-heatmap-compact-square) .talos-heatmap-grid{min-width:auto;width:max-content}:host(.talos-heatmap-compact-square) .talos-heatmap-col-header{width:var(--talos-heatmap-square-size);flex:0 0 var(--talos-heatmap-square-size);text-align:center;font-size:.78rem;font-weight:600;color:var(--talos-heatmap-muted);-webkit-user-select:none;user-select:none;letter-spacing:.01em}:host(.talos-heatmap-compact-square) .talos-heatmap-cell-wrapper{width:var(--talos-heatmap-square-size);height:var(--talos-heatmap-square-size);flex:0 0 var(--talos-heatmap-square-size);aspect-ratio:1/1;position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;outline:none;border-radius:var(--talos-heatmap-cell-radius);transition:transform .15s ease}:host(.talos-heatmap-compact-square) .talos-heatmap-cell-wrapper:focus-visible{box-shadow:0 0 0 2px #4338ca,0 0 0 4px #4338ca40;z-index:5}.talos-heatmap-pill{width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:var(--talos-heatmap-cell-radius);font-size:var(--talos-heatmap-cell-font-size);font-weight:600;line-height:1;-webkit-user-select:none;user-select:none;box-shadow:inset 0 0 0 1px #0000000a;transition:transform .15s cubic-bezier(.16,1,.3,1),box-shadow .15s ease,filter .15s ease}.talos-heatmap-pill:not(.has-value){box-shadow:inset 0 0 0 1px #e2e8f0e6}.talos-heatmap-cell-wrapper:hover .talos-heatmap-pill{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 14px -2px #00000024,0 2px 4px -1px #0000000f;filter:brightness(1.03);z-index:2}.talos-heatmap-cell-wrapper:active .talos-heatmap-pill{transform:translateY(0) scale(.96)}.talos-heatmap-cell-value{display:inline-block;text-align:center}.talos-heatmap-loading-overlay{position:absolute;inset:0;background:var(--talos-loading-overlay-bg, rgba(255, 255, 255, .75));-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:40;border-radius:8px;animation:talos-heatmap-fade-in .2s ease}@keyframes talos-heatmap-fade-in{0%{opacity:0}to{opacity:1}}.talos-heatmap-loading-spinner-box{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--talos-card-bg, #ffffff);border:1px solid var(--talos-heatmap-border);border-radius:8px;box-shadow:0 4px 12px #00000014;font-size:.85rem;font-weight:500;color:var(--talos-heatmap-text)}.talos-heatmap-loading-spinner-box .talos-heatmap-loading-spinner{width:16px;height:16px;color:var(--talos-primary-color, #4338ca);animation:talos-heatmap-spin .8s linear infinite}.talos-heatmap-legend{display:flex;align-items:center;gap:12px;margin-top:18px;padding-left:var(--talos-heatmap-row-header-width)}.talos-heatmap-legend-bound{font-size:.82rem;font-weight:600;color:var(--talos-heatmap-muted);min-width:12px}.talos-heatmap-legend-bar{height:8px;width:130px;border-radius:9999px;box-shadow:inset 0 1px 2px #00000014}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], metrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "metrics", required: false }] }], selectedMetricId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedMetricId", required: false }] }, { type: i0.Output, args: ["selectedMetricIdChange"] }], interval: [{ type: i0.Input, args: [{ isSignal: true, alias: "interval", required: false }] }, { type: i0.Output, args: ["intervalChange"] }], dateRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateRange", required: false }] }, { type: i0.Output, args: ["dateRangeChange"] }], swapAxes: [{ type: i0.Input, args: [{ isSignal: true, alias: "swapAxes", required: false }] }, { type: i0.Output, args: ["swapAxesChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], hoursRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoursRange", required: false }] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], days: [{ type: i0.Input, args: [{ isSignal: true, alias: "days", required: false }] }], colorScheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorScheme", required: false }] }], customColorStops: [{ type: i0.Input, args: [{ isSignal: true, alias: "customColorStops", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], showValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValues", required: false }] }], cellShape: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellShape", required: false }] }], cellSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellSize", required: false }] }], fitWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fitWidth", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], showToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToolbar", required: false }] }], showRefresh: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRefresh", required: false }] }], showExport: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExport", required: false }] }], showExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExpand", required: false }] }], showSwapAxes: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSwapAxes", required: false }] }], showIntervalToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIntervalToggle", required: false }] }], showDateRangePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDateRangePicker", required: false }] }], dateRangePresets: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateRangePresets", required: false }] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], maxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxValue", required: false }] }], minValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "minValue", required: false }] }], cellClick: [{ type: i0.Output, args: ["cellClick"] }], cellHover: [{ type: i0.Output, args: ["cellHover"] }], timeRangeChange: [{ type: i0.Output, args: ["timeRangeChange"] }], refresh: [{ type: i0.Output, args: ["refresh"] }], metricChange: [{ type: i0.Output, args: ["metricChange"] }], export: [{ type: i0.Output, args: ["export"] }] } });
+
+class TalosHeatmapModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosHeatmapModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: TalosHeatmapModule, imports: [TalosHeatmapComponent], exports: [TalosHeatmapComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosHeatmapModule, imports: [TalosHeatmapComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosHeatmapModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [TalosHeatmapComponent],
+                    exports: [TalosHeatmapComponent]
+                }]
+        }] });
+
+/**
+ * Types and interfaces for TalosMiniDonutComponent
+ */
+
+const PRESET_COLORS$1 = {
+    primary: '#2563eb',
+    blue: '#3b82f6',
+    success: '#16a34a',
+    emerald: '#10b981',
+    danger: '#ef4444',
+    rose: '#f43f5e',
+    warning: '#f59e0b',
+    amber: '#d97706',
+    info: '#0284c7',
+    cyan: '#06b6d4',
+    violet: '#8b5cf6',
+    purple: '#9333ea',
+    pink: '#ec4899',
+    slate: '#64748b'
+};
+const DEFAULT_PALETTE = ['#3b82f6', '#10b981', '#8b5cf6', '#f59e0b', '#ec4899', '#06b6d4'];
+const SIZE_PRESETS = {
+    xs: { px: 24, stroke: 3 },
+    sm: { px: 32, stroke: 4 },
+    md: { px: 48, stroke: 5 },
+    lg: { px: 64, stroke: 6 },
+    xl: { px: 88, stroke: 8 }
+};
+class TalosMiniDonutComponent {
+    /** Single progress value (e.g. 75 or 450) */
+    value = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Minimum value for single progress mode */
+    min = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    /** Maximum value for single progress mode */
+    max = input(100, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** Multi-segment dataset */
+    segments = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "segments" }] : /* istanbul ignore next */ []));
+    /** Size preset */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Custom dimension override in px */
+    dimension = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dimension" }] : /* istanbul ignore next */ []));
+    /** Custom stroke width override */
+    strokeWidth = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []));
+    /** Color scheme or hex string for single progress mode */
+    color = input('primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Background track ring color */
+    trackColor = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trackColor" }] : /* istanbul ignore next */ []));
+    /** Show background track */
+    showTrack = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showTrack" }] : /* istanbul ignore next */ []));
+    /** SVG stroke linecap */
+    lineCap = input('round', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lineCap" }] : /* istanbul ignore next */ []));
+    /** Gap spacing between segments in multi-segment mode (in px) */
+    gap = input(2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
+    /** Show built-in center percentage or text */
+    showCenterText = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showCenterText" }] : /* istanbul ignore next */ []));
+    /** Explicit center primary text override */
+    centerText = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "centerText" }] : /* istanbul ignore next */ []));
+    /** Secondary center subtext */
+    centerSubtext = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "centerSubtext" }] : /* istanbul ignore next */ []));
+    /** Enable smooth CSS animation */
+    animated = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "animated" }] : /* istanbul ignore next */ []));
+    /** Custom ARIA label */
+    ariaLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Segment click event */
+    segmentClick = output();
+    // Internal SVG coordinate constants (viewBox is 0 0 100 100)
+    svgSize = 100;
+    center = 50;
+    /** Computed pixel dimension */
+    pixelDimension = computed(() => {
+        const custom = this.dimension();
+        if (custom !== null)
+            return custom;
+        const s = this.size();
+        return s !== 'custom' ? SIZE_PRESETS[s].px : 48;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pixelDimension" }] : /* istanbul ignore next */ []));
+    /** Computed stroke width in SVG coordinates */
+    computedStrokeWidth = computed(() => {
+        const custom = this.strokeWidth();
+        if (custom !== null) {
+            // Scale according to ratio with pixel dimension
+            const px = this.pixelDimension();
+            return (custom / px) * this.svgSize;
+        }
+        const s = this.size();
+        const preset = s !== 'custom' ? SIZE_PRESETS[s] : SIZE_PRESETS['md'];
+        return (preset.stroke / preset.px) * this.svgSize;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedStrokeWidth" }] : /* istanbul ignore next */ []));
+    /** Radius in SVG coordinates */
+    radius = computed(() => {
+        const sw = this.computedStrokeWidth();
+        return (this.svgSize - sw) / 2;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
+    /** Circumference */
+    circumference = computed(() => {
+        return 2 * Math.PI * this.radius();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "circumference" }] : /* istanbul ignore next */ []));
+    /** Effective single progress color */
+    effectiveColor = computed(() => {
+        const c = this.color();
+        return PRESET_COLORS$1[c] || c;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveColor" }] : /* istanbul ignore next */ []));
+    /** Computed percentage for single progress mode */
+    singlePercentage = computed(() => {
+        const val = this.value();
+        if (val === null)
+            return 0;
+        const minVal = this.min();
+        const maxVal = this.max();
+        if (maxVal <= minVal)
+            return 0;
+        const pct = ((val - minVal) / (maxVal - minVal)) * 100;
+        return Math.min(100, Math.max(0, pct));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "singlePercentage" }] : /* istanbul ignore next */ []));
+    /** Single progress dash offset/array */
+    singleDashArray = computed(() => {
+        const circ = this.circumference();
+        const pct = this.singlePercentage();
+        const filled = (pct / 100) * circ;
+        return `${filled} ${circ}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "singleDashArray" }] : /* istanbul ignore next */ []));
+    /** Computed multi-segment values with offsets */
+    computedSegments = computed(() => {
+        const segs = this.segments();
+        if (!segs || segs.length === 0)
+            return [];
+        const circ = this.circumference();
+        const totalVal = segs.reduce((acc, s) => acc + Math.max(0, s.value), 0);
+        if (totalVal <= 0)
+            return [];
+        const gapPx = this.gap();
+        const count = segs.length;
+        const totalGap = count > 1 ? count * gapPx : 0;
+        const availableCirc = Math.max(0, circ - totalGap);
+        let accumulatedOffset = 0;
+        return segs.map((seg, idx) => {
+            const pct = (Math.max(0, seg.value) / totalVal) * 100;
+            const length = (Math.max(0, seg.value) / totalVal) * availableCirc;
+            const color = seg.color ? (PRESET_COLORS$1[seg.color] || seg.color) : DEFAULT_PALETTE[idx % DEFAULT_PALETTE.length];
+            const dashArray = `${length} ${circ}`;
+            // Dashoffset starts at accumulatedOffset (negative because SVG stroke-dashoffset clockwise)
+            const dashOffset = -accumulatedOffset;
+            accumulatedOffset += length + (count > 1 ? gapPx : 0);
+            return {
+                index: idx,
+                value: seg.value,
+                percentage: pct,
+                color,
+                label: seg.label,
+                tooltip: seg.tooltip,
+                dashArray,
+                dashOffset,
+                pathLength: circ
+            };
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedSegments" }] : /* istanbul ignore next */ []));
+    /** Display text inside center */
+    computedCenterText = computed(() => {
+        const explicit = this.centerText();
+        if (explicit !== null)
+            return explicit;
+        if (this.value() !== null) {
+            return `${Math.round(this.singlePercentage())}%`;
+        }
+        return '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedCenterText" }] : /* istanbul ignore next */ []));
+    /** ARIA attributes */
+    currentAriaValue = computed(() => {
+        if (this.value() !== null)
+            return this.value();
+        const segs = this.segments();
+        if (segs && segs.length > 0)
+            return segs.reduce((a, b) => a + b.value, 0);
+        return 0;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentAriaValue" }] : /* istanbul ignore next */ []));
+    computedAriaLabel = computed(() => {
+        const custom = this.ariaLabel();
+        if (custom)
+            return custom;
+        if (this.value() !== null) {
+            return `Progress: ${Math.round(this.singlePercentage())}%`;
+        }
+        const segs = this.segments();
+        if (segs && segs.length > 0) {
+            return `Donut chart with ${segs.length} categories`;
+        }
+        return 'Mini donut chart';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : /* istanbul ignore next */ []));
+    onSegmentClick(segIndex) {
+        const rawSegs = this.segments();
+        if (rawSegs && rawSegs[segIndex]) {
+            this.segmentClick.emit(rawSegs[segIndex]);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosMiniDonutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TalosMiniDonutComponent, isStandalone: true, selector: "talos-mini-donut", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, dimension: { classPropertyName: "dimension", publicName: "dimension", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, trackColor: { classPropertyName: "trackColor", publicName: "trackColor", isSignal: true, isRequired: false, transformFunction: null }, showTrack: { classPropertyName: "showTrack", publicName: "showTrack", isSignal: true, isRequired: false, transformFunction: null }, lineCap: { classPropertyName: "lineCap", publicName: "lineCap", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, showCenterText: { classPropertyName: "showCenterText", publicName: "showCenterText", isSignal: true, isRequired: false, transformFunction: null }, centerText: { classPropertyName: "centerText", publicName: "centerText", isSignal: true, isRequired: false, transformFunction: null }, centerSubtext: { classPropertyName: "centerSubtext", publicName: "centerSubtext", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { segmentClick: "segmentClick" }, host: { properties: { "class.talos-mini-donut-xs": "size() === \"xs\"", "class.talos-mini-donut-sm": "size() === \"sm\"", "class.talos-mini-donut-md": "size() === \"md\"", "class.talos-mini-donut-lg": "size() === \"lg\"", "class.talos-mini-donut-xl": "size() === \"xl\"", "class.talos-mini-donut-animated": "animated()", "style.width.px": "pixelDimension()", "style.height.px": "pixelDimension()", "attr.role": "\"meter\"", "attr.aria-valuenow": "currentAriaValue()", "attr.aria-valuemin": "min()", "attr.aria-valuemax": "max()", "attr.aria-label": "computedAriaLabel()" }, classAttribute: "talos-mini-donut" }, ngImport: i0, template: "<svg\n  class=\"talos-mini-donut-svg\"\n  [attr.viewBox]=\"'0 0 ' + svgSize + ' ' + svgSize\"\n  aria-hidden=\"true\"\n>\n  <!-- Background Track -->\n  @if (showTrack()) {\n    <circle\n      class=\"talos-mini-donut-track\"\n      [attr.cx]=\"center\"\n      [attr.cy]=\"center\"\n      [attr.r]=\"radius()\"\n      [attr.stroke-width]=\"computedStrokeWidth()\"\n      [attr.stroke]=\"trackColor() || 'var(--talos-border-color, #e2e8f0)'\"\n      fill=\"none\"\n    />\n  }\n\n  <!-- Single Value Progress Mode -->\n  @if (segments() === null && value() !== null) {\n    <circle\n      class=\"talos-mini-donut-progress\"\n      [attr.cx]=\"center\"\n      [attr.cy]=\"center\"\n      [attr.r]=\"radius()\"\n      [attr.stroke-width]=\"computedStrokeWidth()\"\n      [attr.stroke]=\"effectiveColor()\"\n      [attr.stroke-dasharray]=\"singleDashArray()\"\n      [attr.stroke-linecap]=\"lineCap()\"\n      fill=\"none\"\n    />\n  }\n\n  <!-- Multi-Segment Mode -->\n  @if (segments() !== null) {\n    @for (seg of computedSegments(); track seg.index) {\n      <circle\n        class=\"talos-mini-donut-segment\"\n        [attr.cx]=\"center\"\n        [attr.cy]=\"center\"\n        [attr.r]=\"radius()\"\n        [attr.stroke-width]=\"computedStrokeWidth()\"\n        [attr.stroke]=\"seg.color\"\n        [attr.stroke-dasharray]=\"seg.dashArray\"\n        [attr.stroke-dashoffset]=\"seg.dashOffset\"\n        [attr.stroke-linecap]=\"lineCap()\"\n        fill=\"none\"\n        (click)=\"onSegmentClick(seg.index)\"\n      />\n    }\n  }\n</svg>\n\n<!-- Center Content Slot or Built-in Text -->\n<div class=\"talos-mini-donut-center\">\n  <ng-content>\n    @if (showCenterText() && computedCenterText()) {\n      <span class=\"talos-mini-donut-center-text\">{{ computedCenterText() }}</span>\n      @if (centerSubtext()) {\n        <span class=\"talos-mini-donut-center-subtext\">{{ centerSubtext() }}</span>\n      }\n    }\n  </ng-content>\n</div>\n", styles: [":host{position:relative;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;box-sizing:border-box;flex-shrink:0}:host .talos-mini-donut-svg{width:100%;height:100%;overflow:visible;transform:rotate(-90deg)}:host .talos-mini-donut-track{opacity:.7;transition:stroke .2s ease}:host .talos-mini-donut-progress,:host .talos-mini-donut-segment{cursor:pointer}:host.talos-mini-donut-animated .talos-mini-donut-progress,:host.talos-mini-donut-animated .talos-mini-donut-segment{transition:stroke-dasharray .4s cubic-bezier(.4,0,.2,1),stroke-dashoffset .4s cubic-bezier(.4,0,.2,1),stroke .2s ease}:host .talos-mini-donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;text-align:center;line-height:1}:host .talos-mini-donut-center .talos-mini-donut-center-text{font-weight:700;color:var(--talos-text-color, #0f172a);letter-spacing:-.02em}:host .talos-mini-donut-center .talos-mini-donut-center-subtext{font-size:.625rem;font-weight:500;color:var(--talos-text-muted, #64748b);margin-top:2px}:host.talos-mini-donut-xs .talos-mini-donut-center-text{font-size:.5625rem}:host.talos-mini-donut-sm .talos-mini-donut-center-text{font-size:.6875rem}:host.talos-mini-donut-md .talos-mini-donut-center-text{font-size:.8125rem}:host.talos-mini-donut-lg .talos-mini-donut-center-text{font-size:1rem}:host.talos-mini-donut-xl .talos-mini-donut-center-text{font-size:1.25rem}:root[data-theme=dark] :host .talos-mini-donut-track,:root.dark :host .talos-mini-donut-track,[data-theme=dark] :host .talos-mini-donut-track,[data-mode=dark] :host .talos-mini-donut-track,.dark :host .talos-mini-donut-track,.dark-theme :host .talos-mini-donut-track{stroke:var(--talos-border-color, #334155);opacity:.5}:root[data-theme=dark] :host .talos-mini-donut-center-text,:root.dark :host .talos-mini-donut-center-text,[data-theme=dark] :host .talos-mini-donut-center-text,[data-mode=dark] :host .talos-mini-donut-center-text,.dark :host .talos-mini-donut-center-text,.dark-theme :host .talos-mini-donut-center-text{color:var(--talos-text-color, #f8fafc)}:root[data-theme=dark] :host .talos-mini-donut-center-subtext,:root.dark :host .talos-mini-donut-center-subtext,[data-theme=dark] :host .talos-mini-donut-center-subtext,[data-mode=dark] :host .talos-mini-donut-center-subtext,.dark :host .talos-mini-donut-center-subtext,.dark-theme :host .talos-mini-donut-center-subtext{color:var(--talos-text-muted, #94a3b8)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosMiniDonutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-mini-donut', host: {
+                        'class': 'talos-mini-donut',
+                        '[class.talos-mini-donut-xs]': 'size() === "xs"',
+                        '[class.talos-mini-donut-sm]': 'size() === "sm"',
+                        '[class.talos-mini-donut-md]': 'size() === "md"',
+                        '[class.talos-mini-donut-lg]': 'size() === "lg"',
+                        '[class.talos-mini-donut-xl]': 'size() === "xl"',
+                        '[class.talos-mini-donut-animated]': 'animated()',
+                        '[style.width.px]': 'pixelDimension()',
+                        '[style.height.px]': 'pixelDimension()',
+                        '[attr.role]': '"meter"',
+                        '[attr.aria-valuenow]': 'currentAriaValue()',
+                        '[attr.aria-valuemin]': 'min()',
+                        '[attr.aria-valuemax]': 'max()',
+                        '[attr.aria-label]': 'computedAriaLabel()'
+                    }, template: "<svg\n  class=\"talos-mini-donut-svg\"\n  [attr.viewBox]=\"'0 0 ' + svgSize + ' ' + svgSize\"\n  aria-hidden=\"true\"\n>\n  <!-- Background Track -->\n  @if (showTrack()) {\n    <circle\n      class=\"talos-mini-donut-track\"\n      [attr.cx]=\"center\"\n      [attr.cy]=\"center\"\n      [attr.r]=\"radius()\"\n      [attr.stroke-width]=\"computedStrokeWidth()\"\n      [attr.stroke]=\"trackColor() || 'var(--talos-border-color, #e2e8f0)'\"\n      fill=\"none\"\n    />\n  }\n\n  <!-- Single Value Progress Mode -->\n  @if (segments() === null && value() !== null) {\n    <circle\n      class=\"talos-mini-donut-progress\"\n      [attr.cx]=\"center\"\n      [attr.cy]=\"center\"\n      [attr.r]=\"radius()\"\n      [attr.stroke-width]=\"computedStrokeWidth()\"\n      [attr.stroke]=\"effectiveColor()\"\n      [attr.stroke-dasharray]=\"singleDashArray()\"\n      [attr.stroke-linecap]=\"lineCap()\"\n      fill=\"none\"\n    />\n  }\n\n  <!-- Multi-Segment Mode -->\n  @if (segments() !== null) {\n    @for (seg of computedSegments(); track seg.index) {\n      <circle\n        class=\"talos-mini-donut-segment\"\n        [attr.cx]=\"center\"\n        [attr.cy]=\"center\"\n        [attr.r]=\"radius()\"\n        [attr.stroke-width]=\"computedStrokeWidth()\"\n        [attr.stroke]=\"seg.color\"\n        [attr.stroke-dasharray]=\"seg.dashArray\"\n        [attr.stroke-dashoffset]=\"seg.dashOffset\"\n        [attr.stroke-linecap]=\"lineCap()\"\n        fill=\"none\"\n        (click)=\"onSegmentClick(seg.index)\"\n      />\n    }\n  }\n</svg>\n\n<!-- Center Content Slot or Built-in Text -->\n<div class=\"talos-mini-donut-center\">\n  <ng-content>\n    @if (showCenterText() && computedCenterText()) {\n      <span class=\"talos-mini-donut-center-text\">{{ computedCenterText() }}</span>\n      @if (centerSubtext()) {\n        <span class=\"talos-mini-donut-center-subtext\">{{ centerSubtext() }}</span>\n      }\n    }\n  </ng-content>\n</div>\n", styles: [":host{position:relative;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;box-sizing:border-box;flex-shrink:0}:host .talos-mini-donut-svg{width:100%;height:100%;overflow:visible;transform:rotate(-90deg)}:host .talos-mini-donut-track{opacity:.7;transition:stroke .2s ease}:host .talos-mini-donut-progress,:host .talos-mini-donut-segment{cursor:pointer}:host.talos-mini-donut-animated .talos-mini-donut-progress,:host.talos-mini-donut-animated .talos-mini-donut-segment{transition:stroke-dasharray .4s cubic-bezier(.4,0,.2,1),stroke-dashoffset .4s cubic-bezier(.4,0,.2,1),stroke .2s ease}:host .talos-mini-donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;text-align:center;line-height:1}:host .talos-mini-donut-center .talos-mini-donut-center-text{font-weight:700;color:var(--talos-text-color, #0f172a);letter-spacing:-.02em}:host .talos-mini-donut-center .talos-mini-donut-center-subtext{font-size:.625rem;font-weight:500;color:var(--talos-text-muted, #64748b);margin-top:2px}:host.talos-mini-donut-xs .talos-mini-donut-center-text{font-size:.5625rem}:host.talos-mini-donut-sm .talos-mini-donut-center-text{font-size:.6875rem}:host.talos-mini-donut-md .talos-mini-donut-center-text{font-size:.8125rem}:host.talos-mini-donut-lg .talos-mini-donut-center-text{font-size:1rem}:host.talos-mini-donut-xl .talos-mini-donut-center-text{font-size:1.25rem}:root[data-theme=dark] :host .talos-mini-donut-track,:root.dark :host .talos-mini-donut-track,[data-theme=dark] :host .talos-mini-donut-track,[data-mode=dark] :host .talos-mini-donut-track,.dark :host .talos-mini-donut-track,.dark-theme :host .talos-mini-donut-track{stroke:var(--talos-border-color, #334155);opacity:.5}:root[data-theme=dark] :host .talos-mini-donut-center-text,:root.dark :host .talos-mini-donut-center-text,[data-theme=dark] :host .talos-mini-donut-center-text,[data-mode=dark] :host .talos-mini-donut-center-text,.dark :host .talos-mini-donut-center-text,.dark-theme :host .talos-mini-donut-center-text{color:var(--talos-text-color, #f8fafc)}:root[data-theme=dark] :host .talos-mini-donut-center-subtext,:root.dark :host .talos-mini-donut-center-subtext,[data-theme=dark] :host .talos-mini-donut-center-subtext,[data-mode=dark] :host .talos-mini-donut-center-subtext,.dark :host .talos-mini-donut-center-subtext,.dark-theme :host .talos-mini-donut-center-subtext{color:var(--talos-text-muted, #94a3b8)}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], segments: [{ type: i0.Input, args: [{ isSignal: true, alias: "segments", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], dimension: [{ type: i0.Input, args: [{ isSignal: true, alias: "dimension", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], trackColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackColor", required: false }] }], showTrack: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrack", required: false }] }], lineCap: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineCap", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], showCenterText: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCenterText", required: false }] }], centerText: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerText", required: false }] }], centerSubtext: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerSubtext", required: false }] }], animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], segmentClick: [{ type: i0.Output, args: ["segmentClick"] }] } });
+
+class TalosMiniDonutModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosMiniDonutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: TalosMiniDonutModule, imports: [TalosMiniDonutComponent], exports: [TalosMiniDonutComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosMiniDonutModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosMiniDonutModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [TalosMiniDonutComponent],
+                    exports: [TalosMiniDonutComponent]
+                }]
+        }] });
+
+/**
+ * Types and interfaces for TalosMiniGaugeComponent
+ */
+
+const PRESET_COLORS = {
+    primary: '#2563eb',
+    blue: '#3b82f6',
+    success: '#16a34a',
+    emerald: '#10b981',
+    danger: '#ef4444',
+    rose: '#f43f5e',
+    warning: '#f59e0b',
+    amber: '#d97706',
+    info: '#0284c7',
+    cyan: '#06b6d4',
+    violet: '#8b5cf6',
+    slate: '#64748b'
+};
+const DEFAULT_THRESHOLDS = [
+    { from: 0, to: 60, color: '#10b981' },
+    { from: 60, to: 85, color: '#f59e0b' },
+    { from: 85, to: 100, color: '#ef4444' }
+];
+class TalosMiniGaugeComponent {
+    /** Current gauge value */
+    value = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Minimum gauge scale */
+    min = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    /** Maximum gauge scale */
+    max = input(100, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** Optional target benchmark marker value */
+    target = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []));
+    /** Gauge rendering style */
+    type = input('semi-circle', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /** Value indicator pointer style: arc fill, needle, or dot */
+    indicator = input('arc', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indicator" }] : /* istanbul ignore next */ []));
+    /** Custom colored threshold zones */
+    thresholds = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "thresholds" }] : /* istanbul ignore next */ []));
+    /** Base color or palette when no thresholds are used */
+    color = input('primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Background track color */
+    trackColor = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trackColor" }] : /* istanbul ignore next */ []));
+    /** Preset size */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Custom width */
+    width = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    /** Custom height */
+    height = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    /** Arc stroke width */
+    strokeWidth = input(8, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []));
+    /** Arc stroke linecap style ('round' | 'butt') */
+    lineCap = input('round', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lineCap" }] : /* istanbul ignore next */ []));
+    /** Show numerical value readout in center/bottom */
+    showValue = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showValue" }] : /* istanbul ignore next */ []));
+    /** Show min and max numbers at gauge edges */
+    showMinMax = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showMinMax" }] : /* istanbul ignore next */ []));
+    /** Unit label string (e.g. '%', 'ms', 'rpm') */
+    unit = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "unit" }] : /* istanbul ignore next */ []));
+    /** Value formatter */
+    valueFormatter = input((val) => val.toLocaleString(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueFormatter" }] : /* istanbul ignore next */ []));
+    /** Custom ARIA label */
+    ariaLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Enable animation */
+    animated = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "animated" }] : /* istanbul ignore next */ []));
+    /** SVG Coordinate constants */
+    cx = 50;
+    cySemi = 44;
+    cyArch = 42;
+    radius = 36;
+    /** Needle length tailored per circular gauge type */
+    needleLength = computed(() => {
+        return this.type() === 'semi-circle' ? 30 : 26;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "needleLength" }] : /* istanbul ignore next */ []));
+    hostWidth = computed(() => {
+        const custom = this.width();
+        if (custom !== null)
+            return typeof custom === 'number' ? `${custom}px` : custom;
+        if (this.size() === 'responsive')
+            return '100%';
+        return null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostWidth" }] : /* istanbul ignore next */ []));
+    hostHeight = computed(() => {
+        const custom = this.height();
+        if (custom !== null)
+            return typeof custom === 'number' ? `${custom}px` : custom;
+        return null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostHeight" }] : /* istanbul ignore next */ []));
+    /** Clamped and normalized ratio [0..1] */
+    normalizedRatio = computed(() => {
+        const val = this.value();
+        const minVal = this.min();
+        const maxVal = this.max();
+        if (maxVal <= minVal)
+            return 0;
+        return Math.min(1, Math.max(0, (val - minVal) / (maxVal - minVal)));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "normalizedRatio" }] : /* istanbul ignore next */ []));
+    /** Target ratio [0..1] */
+    targetRatio = computed(() => {
+        const tgt = this.target();
+        if (tgt === null)
+            return null;
+        const minVal = this.min();
+        const maxVal = this.max();
+        if (maxVal <= minVal)
+            return 0;
+        return Math.min(1, Math.max(0, (tgt - minVal) / (maxVal - minVal)));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "targetRatio" }] : /* istanbul ignore next */ []));
+    /** ViewBox string based on gauge type */
+    viewBox = computed(() => {
+        const t = this.type();
+        if (t === 'semi-circle')
+            return '0 0 100 50';
+        if (t === 'arch')
+            return '0 0 100 66';
+        return '0 0 100 14';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
+    /** Start & End angles in degrees for circular gauge types */
+    angleSpan = computed(() => {
+        const t = this.type();
+        if (t === 'semi-circle') {
+            return { start: 180, end: 0, total: 180 };
+        }
+        // Arch: 240 degree arc from 210° (bottom-left) to -30° (bottom-right)
+        return { start: 210, end: -30, total: 240 };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "angleSpan" }] : /* istanbul ignore next */ []));
+    /** Current value angle in degrees */
+    currentAngle = computed(() => {
+        const { start, total } = this.angleSpan();
+        const ratio = this.normalizedRatio();
+        return start - ratio * total;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentAngle" }] : /* istanbul ignore next */ []));
+    /** Needle transform for needle indicator */
+    needleTransform = computed(() => {
+        const t = this.type();
+        const cy = t === 'semi-circle' ? this.cySemi : this.cyArch;
+        const angle = this.currentAngle();
+        // SVG rotation: angle 0 is right, 180 is left. Standard SVG rotate origin is center.
+        const svgRotation = 180 - angle;
+        return `rotate(${svgRotation} ${this.cx} ${cy})`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "needleTransform" }] : /* istanbul ignore next */ []));
+    /** Target marker position & rotation */
+    targetMarkerProps = computed(() => {
+        const ratio = this.targetRatio();
+        if (ratio === null)
+            return null;
+        const t = this.type();
+        if (t === 'linear') {
+            return { x: ratio * 100, y: 0, rotation: 0 };
+        }
+        const { start, total } = this.angleSpan();
+        const angle = start - ratio * total;
+        const cy = t === 'semi-circle' ? this.cySemi : this.cyArch;
+        const rad = (angle * Math.PI) / 180;
+        const r = this.radius;
+        const x = this.cx + r * Math.cos(rad);
+        const y = cy - r * Math.sin(rad);
+        return { x, y, angle };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "targetMarkerProps" }] : /* istanbul ignore next */ []));
+    /** Dot transform for dot indicator (rotates along the circular arc path) */
+    dotTransform = computed(() => {
+        const t = this.type();
+        const cy = t === 'semi-circle' ? this.cySemi : this.cyArch;
+        const angle = this.currentAngle();
+        // SVG rotation: angle 0 is right, 180 is left. Standard SVG rotate origin is center.
+        const svgRotation = 180 - angle;
+        return `rotate(${svgRotation} ${this.cx} ${cy})`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dotTransform" }] : /* istanbul ignore next */ []));
+    /** Dot indicator position */
+    dotIndicatorPosition = computed(() => {
+        const t = this.type();
+        const cy = t === 'semi-circle' ? this.cySemi : this.cyArch;
+        const angle = this.currentAngle();
+        const rad = (angle * Math.PI) / 180;
+        const r = this.radius;
+        const x = this.cx + r * Math.cos(rad);
+        const y = cy - r * Math.sin(rad);
+        return { x, y };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dotIndicatorPosition" }] : /* istanbul ignore next */ []));
+    /** Base track SVG path */
+    trackPath = computed(() => {
+        const t = this.type();
+        if (t === 'linear')
+            return '';
+        const { start, end } = this.angleSpan();
+        const cy = t === 'semi-circle' ? this.cySemi : this.cyArch;
+        return this.createArcSvgPath(this.cx, cy, this.radius, start, end);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trackPath" }] : /* istanbul ignore next */ []));
+    /** Active value arc SVG path */
+    valueArcPath = computed(() => {
+        const t = this.type();
+        if (t === 'linear')
+            return '';
+        const { start } = this.angleSpan();
+        const curAngle = this.currentAngle();
+        const cy = t === 'semi-circle' ? this.cySemi : this.cyArch;
+        // Minimum small arc to prevent SVG zero-length render glitches
+        const safeEndAngle = Math.abs(curAngle - start) < 0.1 ? start - 0.1 : curAngle;
+        return this.createArcSvgPath(this.cx, cy, this.radius, start, safeEndAngle);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueArcPath" }] : /* istanbul ignore next */ []));
+    /** Active color based on thresholds or color input */
+    activeColor = computed(() => {
+        const val = this.value();
+        const ths = this.thresholds();
+        if (ths && ths.length > 0) {
+            for (const th of ths) {
+                if (val >= th.from && val <= th.to) {
+                    return PRESET_COLORS[th.color] || th.color;
+                }
+            }
+            return PRESET_COLORS[ths[ths.length - 1].color] || ths[ths.length - 1].color;
+        }
+        const c = this.color();
+        return PRESET_COLORS[c] || c;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeColor" }] : /* istanbul ignore next */ []));
+    /** Threshold band segments */
+    thresholdSegments = computed(() => {
+        const ths = this.thresholds();
+        if (!ths || ths.length === 0)
+            return [];
+        const t = this.type();
+        const minVal = this.min();
+        const maxVal = this.max();
+        const span = maxVal - minVal;
+        if (span <= 0)
+            return [];
+        const { start, total } = this.angleSpan();
+        const cy = t === 'semi-circle' ? this.cySemi : this.cyArch;
+        return ths.map((th, idx) => {
+            const fromRatio = Math.min(1, Math.max(0, (th.from - minVal) / span));
+            const toRatio = Math.min(1, Math.max(0, (th.to - minVal) / span));
+            const angleStart = start - fromRatio * total;
+            const angleEnd = start - toRatio * total;
+            const path = t !== 'linear' ? this.createArcSvgPath(this.cx, cy, this.radius, angleStart, angleEnd) : '';
+            const color = PRESET_COLORS[th.color] || th.color;
+            return {
+                path,
+                color,
+                from: th.from,
+                to: th.to,
+                isFirst: idx === 0,
+                isLast: idx === ths.length - 1
+            };
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "thresholdSegments" }] : /* istanbul ignore next */ []));
+    computedAriaLabel = computed(() => {
+        const custom = this.ariaLabel();
+        if (custom)
+            return custom;
+        const u = this.unit() ? ` ${this.unit()}` : '';
+        return `Gauge: ${this.valueFormatter()(this.value())}${u} (Range ${this.min()} to ${this.max()})`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : /* istanbul ignore next */ []));
+    /** Helper to generate SVG Arc Path 'M x1 y1 A r r 0 largeArc sweep x2 y2' */
+    createArcSvgPath(cx, cy, r, startAngleDeg, endAngleDeg) {
+        const startRad = (startAngleDeg * Math.PI) / 180;
+        const endRad = (endAngleDeg * Math.PI) / 180;
+        const x1 = cx + r * Math.cos(startRad);
+        const y1 = cy - r * Math.sin(startRad);
+        const x2 = cx + r * Math.cos(endRad);
+        const y2 = cy - r * Math.sin(endRad);
+        // Delta angle in degrees clockwise
+        const deltaAngle = startAngleDeg - endAngleDeg;
+        const largeArcFlag = deltaAngle > 180 ? 1 : 0;
+        const sweepFlag = 1; // clockwise downwards
+        return `M ${x1.toFixed(2)} ${y1.toFixed(2)} A ${r} ${r} 0 ${largeArcFlag} ${sweepFlag} ${x2.toFixed(2)} ${y2.toFixed(2)}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosMiniGaugeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TalosMiniGaugeComponent, isStandalone: true, selector: "talos-mini-gauge", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, indicator: { classPropertyName: "indicator", publicName: "indicator", isSignal: true, isRequired: false, transformFunction: null }, thresholds: { classPropertyName: "thresholds", publicName: "thresholds", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, trackColor: { classPropertyName: "trackColor", publicName: "trackColor", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, lineCap: { classPropertyName: "lineCap", publicName: "lineCap", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, showMinMax: { classPropertyName: "showMinMax", publicName: "showMinMax", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", 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 }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.talos-gauge-semi-circle": "type() === \"semi-circle\"", "class.talos-gauge-arch": "type() === \"arch\"", "class.talos-gauge-linear": "type() === \"linear\"", "class.talos-gauge-xs": "size() === \"xs\"", "class.talos-gauge-sm": "size() === \"sm\"", "class.talos-gauge-md": "size() === \"md\"", "class.talos-gauge-lg": "size() === \"lg\"", "class.talos-gauge-xl": "size() === \"xl\"", "class.talos-gauge-responsive": "size() === \"responsive\"", "class.talos-gauge-animated": "animated()", "style.width": "hostWidth()", "style.height": "hostHeight()", "attr.role": "\"meter\"", "attr.aria-valuenow": "value()", "attr.aria-valuemin": "min()", "attr.aria-valuemax": "max()", "attr.aria-label": "computedAriaLabel()" }, classAttribute: "talos-mini-gauge" }, ngImport: i0, template: "<svg\n  class=\"talos-mini-gauge-svg\"\n  [attr.viewBox]=\"viewBox()\"\n  aria-hidden=\"true\"\n>\n  <!-- Circular Types: Semi-circle and Arch -->\n  @if (type() === 'semi-circle' || type() === 'arch') {\n    <!-- Full Background Track (if no thresholds or as base) -->\n    @if (thresholds() === null) {\n      <path\n        class=\"talos-gauge-track\"\n        [attr.d]=\"trackPath()\"\n        [attr.stroke]=\"trackColor() || 'var(--talos-border-color, #e2e8f0)'\"\n        [attr.stroke-width]=\"strokeWidth()\"\n        fill=\"none\"\n        [attr.stroke-linecap]=\"lineCap()\"\n      />\n    }\n\n    <!-- Colored Threshold Bands with curved outer ends -->\n    @if (thresholds() !== null) {\n      @for (band of thresholdSegments(); track band.from) {\n        <path\n          class=\"talos-gauge-threshold-band\"\n          [attr.d]=\"band.path\"\n          [attr.stroke]=\"band.color\"\n          [attr.stroke-width]=\"strokeWidth()\"\n          fill=\"none\"\n          [attr.stroke-linecap]=\"lineCap() === 'round' && (band.isFirst || band.isLast) ? 'round' : 'butt'\"\n        />\n      }\n    }\n\n    <!-- Value Indicator: Arc Fill -->\n    @if (indicator() === 'arc' && thresholds() === null) {\n      <path\n        class=\"talos-gauge-value-arc\"\n        [attr.d]=\"valueArcPath()\"\n        [attr.stroke]=\"activeColor()\"\n        [attr.stroke-width]=\"strokeWidth()\"\n        fill=\"none\"\n        [attr.stroke-linecap]=\"lineCap()\"\n      />\n    }\n\n    <!-- Value Indicator: Needle -->\n    @if (indicator() === 'needle') {\n      <g\n        class=\"talos-gauge-needle-group\"\n        [attr.transform]=\"needleTransform()\"\n      >\n        <line\n          [attr.x1]=\"cx\"\n          [attr.y1]=\"type() === 'semi-circle' ? cySemi : cyArch\"\n          [attr.x2]=\"cx - needleLength()\"\n          [attr.y2]=\"type() === 'semi-circle' ? cySemi : cyArch\"\n          [attr.stroke]=\"activeColor()\"\n          stroke-width=\"2.5\"\n          stroke-linecap=\"round\"\n        />\n        <circle\n          [attr.cx]=\"cx\"\n          [attr.cy]=\"type() === 'semi-circle' ? cySemi : cyArch\"\n          r=\"4\"\n          [attr.fill]=\"activeColor()\"\n          stroke=\"#ffffff\"\n          stroke-width=\"1.5\"\n        />\n        <circle\n          [attr.cx]=\"cx\"\n          [attr.cy]=\"type() === 'semi-circle' ? cySemi : cyArch\"\n          r=\"1.5\"\n          fill=\"#ffffff\"\n        />\n      </g>\n    }\n\n    <!-- Value Indicator: Dot Glow Marker -->\n    @if (indicator() === 'dot') {\n      <g\n        class=\"talos-gauge-dot-group\"\n        [attr.transform]=\"dotTransform()\"\n      >\n        <circle\n          class=\"talos-gauge-dot-outer\"\n          [attr.cx]=\"cx - radius\"\n          [attr.cy]=\"type() === 'semi-circle' ? cySemi : cyArch\"\n          r=\"6\"\n          [attr.fill]=\"activeColor()\"\n          opacity=\"0.3\"\n        />\n        <circle\n          class=\"talos-gauge-dot\"\n          [attr.cx]=\"cx - radius\"\n          [attr.cy]=\"type() === 'semi-circle' ? cySemi : cyArch\"\n          r=\"3.5\"\n          [attr.fill]=\"activeColor()\"\n          stroke=\"#ffffff\"\n          stroke-width=\"1.5\"\n        />\n      </g>\n    }\n\n    <!-- Target Marker Tick -->\n    @if (targetMarkerProps(); as tgt) {\n      <circle\n        class=\"talos-gauge-target-tick\"\n        [attr.cx]=\"tgt.x\"\n        [attr.cy]=\"tgt.y\"\n        r=\"2.5\"\n        fill=\"var(--talos-text-color, #0f172a)\"\n        stroke=\"#ffffff\"\n        stroke-width=\"1\"\n      />\n    }\n  }\n\n  <!-- Linear / Bullet Type -->\n  @if (type() === 'linear') {\n    <!-- Linear Track -->\n    <rect\n      class=\"talos-gauge-linear-track\"\n      x=\"0\"\n      y=\"2\"\n      width=\"100\"\n      height=\"8\"\n      rx=\"4\"\n      ry=\"4\"\n      [attr.fill]=\"trackColor() || 'var(--talos-border-color, #e2e8f0)'\"\n    />\n\n    <!-- Linear Value Fill -->\n    <rect\n      class=\"talos-gauge-linear-fill\"\n      x=\"0\"\n      y=\"2\"\n      [attr.width]=\"normalizedRatio() * 100\"\n      height=\"8\"\n      rx=\"4\"\n      ry=\"4\"\n      [attr.fill]=\"activeColor()\"\n    />\n\n    <!-- Linear Target Marker -->\n    @if (targetRatio() !== null) {\n      <line\n        class=\"talos-gauge-linear-target\"\n        [attr.x1]=\"targetRatio()! * 100\"\n        y1=\"0\"\n        [attr.x2]=\"targetRatio()! * 100\"\n        y2=\"12\"\n        stroke=\"var(--talos-text-color, #0f172a)\"\n        stroke-width=\"2.5\"\n        stroke-linecap=\"round\"\n      />\n    }\n  }\n</svg>\n\n<!-- Center / Bottom Readout -->\n@if (showValue()) {\n  <div class=\"talos-gauge-readout\">\n    <span class=\"talos-gauge-value\">{{ valueFormatter()(value()) }}</span>\n    @if (unit()) {\n      <span class=\"talos-gauge-unit\">{{ unit() }}</span>\n    }\n  </div>\n}\n\n<!-- Min / Max labels -->\n@if (showMinMax()) {\n  <div class=\"talos-gauge-minmax\">\n    <span class=\"talos-gauge-min\">{{ min() }}</span>\n    <span class=\"talos-gauge-max\">{{ max() }}</span>\n  </div>\n}\n", styles: [":host{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:flex-start;vertical-align:middle;box-sizing:border-box;-webkit-user-select:none;user-select:none;height:auto;container-type:inline-size}:host.talos-gauge-xs{width:56px}:host.talos-gauge-xs.talos-gauge-linear{width:90px}:host.talos-gauge-sm{width:72px}:host.talos-gauge-sm.talos-gauge-linear{width:110px}:host.talos-gauge-md{width:96px}:host.talos-gauge-md.talos-gauge-linear{width:140px}:host.talos-gauge-lg{width:128px}:host.talos-gauge-lg.talos-gauge-linear{width:180px}:host.talos-gauge-xl{width:160px}:host.talos-gauge-xl.talos-gauge-linear{width:220px}:host.talos-gauge-responsive{width:100%;display:flex}:host .talos-mini-gauge-svg{width:100%;height:auto;display:block;flex-shrink:0;overflow:visible}:host .talos-gauge-track{opacity:.6}:host .talos-gauge-value-arc{transition:d .3s cubic-bezier(.4,0,.2,1),stroke .2s ease}:host .talos-gauge-needle-group{transition:transform .35s cubic-bezier(.34,1.56,.64,1);filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}:host .talos-gauge-dot-group{transition:transform .35s cubic-bezier(.34,1.56,.64,1);filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}:host .talos-gauge-dot,:host .talos-gauge-dot-outer{transition:fill .2s ease}:host .talos-gauge-linear-fill{transition:width .3s cubic-bezier(.4,0,.2,1),fill .2s ease}:host .talos-gauge-linear-target{filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}:host .talos-gauge-target-tick{filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}:host .talos-gauge-readout{position:relative;display:flex;align-items:baseline;justify-content:center;gap:1.5px;line-height:1.1;text-align:center;font-weight:700;color:var(--talos-text-color, #0f172a);font-variant-numeric:tabular-nums;letter-spacing:-.02em;width:100%;margin-top:4px}:host .talos-gauge-readout .talos-gauge-value{font-size:clamp(.75rem,16cqi,3.5rem)}:host .talos-gauge-readout .talos-gauge-unit{font-size:clamp(.5625rem,10.5cqi,2rem);font-weight:500;color:var(--talos-text-muted, #64748b);margin-left:1px}:host.talos-gauge-semi-circle .talos-gauge-readout{margin-top:4px}:host.talos-gauge-arch .talos-gauge-readout{margin-top:2px}:host.talos-gauge-linear .talos-gauge-readout{margin-top:6px}:host.talos-gauge-linear .talos-gauge-readout .talos-gauge-value{font-size:clamp(.75rem,9cqi,1.75rem)}:host.talos-gauge-linear .talos-gauge-readout .talos-gauge-unit{font-size:clamp(.5625rem,6.5cqi,1.25rem)}:host .talos-gauge-minmax{width:100%;display:flex;justify-content:space-between;font-size:clamp(.5rem,8cqi,1rem);color:var(--talos-text-muted, #64748b);font-weight:500;margin-top:2px;padding:0 4px;box-sizing:border-box}:host:not(.talos-gauge-animated) .talos-gauge-value-arc,:host:not(.talos-gauge-animated) .talos-gauge-needle-group,:host:not(.talos-gauge-animated) .talos-gauge-dot-group,:host:not(.talos-gauge-animated) .talos-gauge-linear-fill{transition:none!important}:root[data-theme=dark] :host .talos-gauge-track,:root[data-theme=dark] :host .talos-gauge-linear-track,:root.dark :host .talos-gauge-track,:root.dark :host .talos-gauge-linear-track,[data-theme=dark] :host .talos-gauge-track,[data-theme=dark] :host .talos-gauge-linear-track,[data-mode=dark] :host .talos-gauge-track,[data-mode=dark] :host .talos-gauge-linear-track,.dark :host .talos-gauge-track,.dark :host .talos-gauge-linear-track,.dark-theme :host .talos-gauge-track,.dark-theme :host .talos-gauge-linear-track{stroke:var(--talos-border-color, #334155);fill:var(--talos-border-color, #334155)}:root[data-theme=dark] :host .talos-gauge-readout,:root.dark :host .talos-gauge-readout,[data-theme=dark] :host .talos-gauge-readout,[data-mode=dark] :host .talos-gauge-readout,.dark :host .talos-gauge-readout,.dark-theme :host .talos-gauge-readout{color:var(--talos-text-color, #f8fafc)}:root[data-theme=dark] :host .talos-gauge-readout .talos-gauge-unit,:root.dark :host .talos-gauge-readout .talos-gauge-unit,[data-theme=dark] :host .talos-gauge-readout .talos-gauge-unit,[data-mode=dark] :host .talos-gauge-readout .talos-gauge-unit,.dark :host .talos-gauge-readout .talos-gauge-unit,.dark-theme :host .talos-gauge-readout .talos-gauge-unit{color:var(--talos-text-muted, #94a3b8)}:root[data-theme=dark] :host .talos-gauge-minmax,:root.dark :host .talos-gauge-minmax,[data-theme=dark] :host .talos-gauge-minmax,[data-mode=dark] :host .talos-gauge-minmax,.dark :host .talos-gauge-minmax,.dark-theme :host .talos-gauge-minmax{color:var(--talos-text-muted, #94a3b8)}:root[data-theme=dark] :host .talos-gauge-target-tick,:root.dark :host .talos-gauge-target-tick,[data-theme=dark] :host .talos-gauge-target-tick,[data-mode=dark] :host .talos-gauge-target-tick,.dark :host .talos-gauge-target-tick,.dark-theme :host .talos-gauge-target-tick{fill:#fff;stroke:#0f172a}:root[data-theme=dark] :host .talos-gauge-linear-target,:root.dark :host .talos-gauge-linear-target,[data-theme=dark] :host .talos-gauge-linear-target,[data-mode=dark] :host .talos-gauge-linear-target,.dark :host .talos-gauge-linear-target,.dark-theme :host .talos-gauge-linear-target{stroke:#fff}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosMiniGaugeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-mini-gauge', host: {
+                        'class': 'talos-mini-gauge',
+                        '[class.talos-gauge-semi-circle]': 'type() === "semi-circle"',
+                        '[class.talos-gauge-arch]': 'type() === "arch"',
+                        '[class.talos-gauge-linear]': 'type() === "linear"',
+                        '[class.talos-gauge-xs]': 'size() === "xs"',
+                        '[class.talos-gauge-sm]': 'size() === "sm"',
+                        '[class.talos-gauge-md]': 'size() === "md"',
+                        '[class.talos-gauge-lg]': 'size() === "lg"',
+                        '[class.talos-gauge-xl]': 'size() === "xl"',
+                        '[class.talos-gauge-responsive]': 'size() === "responsive"',
+                        '[class.talos-gauge-animated]': 'animated()',
+                        '[style.width]': 'hostWidth()',
+                        '[style.height]': 'hostHeight()',
+                        '[attr.role]': '"meter"',
+                        '[attr.aria-valuenow]': 'value()',
+                        '[attr.aria-valuemin]': 'min()',
+                        '[attr.aria-valuemax]': 'max()',
+                        '[attr.aria-label]': 'computedAriaLabel()'
+                    }, template: "<svg\n  class=\"talos-mini-gauge-svg\"\n  [attr.viewBox]=\"viewBox()\"\n  aria-hidden=\"true\"\n>\n  <!-- Circular Types: Semi-circle and Arch -->\n  @if (type() === 'semi-circle' || type() === 'arch') {\n    <!-- Full Background Track (if no thresholds or as base) -->\n    @if (thresholds() === null) {\n      <path\n        class=\"talos-gauge-track\"\n        [attr.d]=\"trackPath()\"\n        [attr.stroke]=\"trackColor() || 'var(--talos-border-color, #e2e8f0)'\"\n        [attr.stroke-width]=\"strokeWidth()\"\n        fill=\"none\"\n        [attr.stroke-linecap]=\"lineCap()\"\n      />\n    }\n\n    <!-- Colored Threshold Bands with curved outer ends -->\n    @if (thresholds() !== null) {\n      @for (band of thresholdSegments(); track band.from) {\n        <path\n          class=\"talos-gauge-threshold-band\"\n          [attr.d]=\"band.path\"\n          [attr.stroke]=\"band.color\"\n          [attr.stroke-width]=\"strokeWidth()\"\n          fill=\"none\"\n          [attr.stroke-linecap]=\"lineCap() === 'round' && (band.isFirst || band.isLast) ? 'round' : 'butt'\"\n        />\n      }\n    }\n\n    <!-- Value Indicator: Arc Fill -->\n    @if (indicator() === 'arc' && thresholds() === null) {\n      <path\n        class=\"talos-gauge-value-arc\"\n        [attr.d]=\"valueArcPath()\"\n        [attr.stroke]=\"activeColor()\"\n        [attr.stroke-width]=\"strokeWidth()\"\n        fill=\"none\"\n        [attr.stroke-linecap]=\"lineCap()\"\n      />\n    }\n\n    <!-- Value Indicator: Needle -->\n    @if (indicator() === 'needle') {\n      <g\n        class=\"talos-gauge-needle-group\"\n        [attr.transform]=\"needleTransform()\"\n      >\n        <line\n          [attr.x1]=\"cx\"\n          [attr.y1]=\"type() === 'semi-circle' ? cySemi : cyArch\"\n          [attr.x2]=\"cx - needleLength()\"\n          [attr.y2]=\"type() === 'semi-circle' ? cySemi : cyArch\"\n          [attr.stroke]=\"activeColor()\"\n          stroke-width=\"2.5\"\n          stroke-linecap=\"round\"\n        />\n        <circle\n          [attr.cx]=\"cx\"\n          [attr.cy]=\"type() === 'semi-circle' ? cySemi : cyArch\"\n          r=\"4\"\n          [attr.fill]=\"activeColor()\"\n          stroke=\"#ffffff\"\n          stroke-width=\"1.5\"\n        />\n        <circle\n          [attr.cx]=\"cx\"\n          [attr.cy]=\"type() === 'semi-circle' ? cySemi : cyArch\"\n          r=\"1.5\"\n          fill=\"#ffffff\"\n        />\n      </g>\n    }\n\n    <!-- Value Indicator: Dot Glow Marker -->\n    @if (indicator() === 'dot') {\n      <g\n        class=\"talos-gauge-dot-group\"\n        [attr.transform]=\"dotTransform()\"\n      >\n        <circle\n          class=\"talos-gauge-dot-outer\"\n          [attr.cx]=\"cx - radius\"\n          [attr.cy]=\"type() === 'semi-circle' ? cySemi : cyArch\"\n          r=\"6\"\n          [attr.fill]=\"activeColor()\"\n          opacity=\"0.3\"\n        />\n        <circle\n          class=\"talos-gauge-dot\"\n          [attr.cx]=\"cx - radius\"\n          [attr.cy]=\"type() === 'semi-circle' ? cySemi : cyArch\"\n          r=\"3.5\"\n          [attr.fill]=\"activeColor()\"\n          stroke=\"#ffffff\"\n          stroke-width=\"1.5\"\n        />\n      </g>\n    }\n\n    <!-- Target Marker Tick -->\n    @if (targetMarkerProps(); as tgt) {\n      <circle\n        class=\"talos-gauge-target-tick\"\n        [attr.cx]=\"tgt.x\"\n        [attr.cy]=\"tgt.y\"\n        r=\"2.5\"\n        fill=\"var(--talos-text-color, #0f172a)\"\n        stroke=\"#ffffff\"\n        stroke-width=\"1\"\n      />\n    }\n  }\n\n  <!-- Linear / Bullet Type -->\n  @if (type() === 'linear') {\n    <!-- Linear Track -->\n    <rect\n      class=\"talos-gauge-linear-track\"\n      x=\"0\"\n      y=\"2\"\n      width=\"100\"\n      height=\"8\"\n      rx=\"4\"\n      ry=\"4\"\n      [attr.fill]=\"trackColor() || 'var(--talos-border-color, #e2e8f0)'\"\n    />\n\n    <!-- Linear Value Fill -->\n    <rect\n      class=\"talos-gauge-linear-fill\"\n      x=\"0\"\n      y=\"2\"\n      [attr.width]=\"normalizedRatio() * 100\"\n      height=\"8\"\n      rx=\"4\"\n      ry=\"4\"\n      [attr.fill]=\"activeColor()\"\n    />\n\n    <!-- Linear Target Marker -->\n    @if (targetRatio() !== null) {\n      <line\n        class=\"talos-gauge-linear-target\"\n        [attr.x1]=\"targetRatio()! * 100\"\n        y1=\"0\"\n        [attr.x2]=\"targetRatio()! * 100\"\n        y2=\"12\"\n        stroke=\"var(--talos-text-color, #0f172a)\"\n        stroke-width=\"2.5\"\n        stroke-linecap=\"round\"\n      />\n    }\n  }\n</svg>\n\n<!-- Center / Bottom Readout -->\n@if (showValue()) {\n  <div class=\"talos-gauge-readout\">\n    <span class=\"talos-gauge-value\">{{ valueFormatter()(value()) }}</span>\n    @if (unit()) {\n      <span class=\"talos-gauge-unit\">{{ unit() }}</span>\n    }\n  </div>\n}\n\n<!-- Min / Max labels -->\n@if (showMinMax()) {\n  <div class=\"talos-gauge-minmax\">\n    <span class=\"talos-gauge-min\">{{ min() }}</span>\n    <span class=\"talos-gauge-max\">{{ max() }}</span>\n  </div>\n}\n", styles: [":host{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:flex-start;vertical-align:middle;box-sizing:border-box;-webkit-user-select:none;user-select:none;height:auto;container-type:inline-size}:host.talos-gauge-xs{width:56px}:host.talos-gauge-xs.talos-gauge-linear{width:90px}:host.talos-gauge-sm{width:72px}:host.talos-gauge-sm.talos-gauge-linear{width:110px}:host.talos-gauge-md{width:96px}:host.talos-gauge-md.talos-gauge-linear{width:140px}:host.talos-gauge-lg{width:128px}:host.talos-gauge-lg.talos-gauge-linear{width:180px}:host.talos-gauge-xl{width:160px}:host.talos-gauge-xl.talos-gauge-linear{width:220px}:host.talos-gauge-responsive{width:100%;display:flex}:host .talos-mini-gauge-svg{width:100%;height:auto;display:block;flex-shrink:0;overflow:visible}:host .talos-gauge-track{opacity:.6}:host .talos-gauge-value-arc{transition:d .3s cubic-bezier(.4,0,.2,1),stroke .2s ease}:host .talos-gauge-needle-group{transition:transform .35s cubic-bezier(.34,1.56,.64,1);filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}:host .talos-gauge-dot-group{transition:transform .35s cubic-bezier(.34,1.56,.64,1);filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}:host .talos-gauge-dot,:host .talos-gauge-dot-outer{transition:fill .2s ease}:host .talos-gauge-linear-fill{transition:width .3s cubic-bezier(.4,0,.2,1),fill .2s ease}:host .talos-gauge-linear-target{filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}:host .talos-gauge-target-tick{filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}:host .talos-gauge-readout{position:relative;display:flex;align-items:baseline;justify-content:center;gap:1.5px;line-height:1.1;text-align:center;font-weight:700;color:var(--talos-text-color, #0f172a);font-variant-numeric:tabular-nums;letter-spacing:-.02em;width:100%;margin-top:4px}:host .talos-gauge-readout .talos-gauge-value{font-size:clamp(.75rem,16cqi,3.5rem)}:host .talos-gauge-readout .talos-gauge-unit{font-size:clamp(.5625rem,10.5cqi,2rem);font-weight:500;color:var(--talos-text-muted, #64748b);margin-left:1px}:host.talos-gauge-semi-circle .talos-gauge-readout{margin-top:4px}:host.talos-gauge-arch .talos-gauge-readout{margin-top:2px}:host.talos-gauge-linear .talos-gauge-readout{margin-top:6px}:host.talos-gauge-linear .talos-gauge-readout .talos-gauge-value{font-size:clamp(.75rem,9cqi,1.75rem)}:host.talos-gauge-linear .talos-gauge-readout .talos-gauge-unit{font-size:clamp(.5625rem,6.5cqi,1.25rem)}:host .talos-gauge-minmax{width:100%;display:flex;justify-content:space-between;font-size:clamp(.5rem,8cqi,1rem);color:var(--talos-text-muted, #64748b);font-weight:500;margin-top:2px;padding:0 4px;box-sizing:border-box}:host:not(.talos-gauge-animated) .talos-gauge-value-arc,:host:not(.talos-gauge-animated) .talos-gauge-needle-group,:host:not(.talos-gauge-animated) .talos-gauge-dot-group,:host:not(.talos-gauge-animated) .talos-gauge-linear-fill{transition:none!important}:root[data-theme=dark] :host .talos-gauge-track,:root[data-theme=dark] :host .talos-gauge-linear-track,:root.dark :host .talos-gauge-track,:root.dark :host .talos-gauge-linear-track,[data-theme=dark] :host .talos-gauge-track,[data-theme=dark] :host .talos-gauge-linear-track,[data-mode=dark] :host .talos-gauge-track,[data-mode=dark] :host .talos-gauge-linear-track,.dark :host .talos-gauge-track,.dark :host .talos-gauge-linear-track,.dark-theme :host .talos-gauge-track,.dark-theme :host .talos-gauge-linear-track{stroke:var(--talos-border-color, #334155);fill:var(--talos-border-color, #334155)}:root[data-theme=dark] :host .talos-gauge-readout,:root.dark :host .talos-gauge-readout,[data-theme=dark] :host .talos-gauge-readout,[data-mode=dark] :host .talos-gauge-readout,.dark :host .talos-gauge-readout,.dark-theme :host .talos-gauge-readout{color:var(--talos-text-color, #f8fafc)}:root[data-theme=dark] :host .talos-gauge-readout .talos-gauge-unit,:root.dark :host .talos-gauge-readout .talos-gauge-unit,[data-theme=dark] :host .talos-gauge-readout .talos-gauge-unit,[data-mode=dark] :host .talos-gauge-readout .talos-gauge-unit,.dark :host .talos-gauge-readout .talos-gauge-unit,.dark-theme :host .talos-gauge-readout .talos-gauge-unit{color:var(--talos-text-muted, #94a3b8)}:root[data-theme=dark] :host .talos-gauge-minmax,:root.dark :host .talos-gauge-minmax,[data-theme=dark] :host .talos-gauge-minmax,[data-mode=dark] :host .talos-gauge-minmax,.dark :host .talos-gauge-minmax,.dark-theme :host .talos-gauge-minmax{color:var(--talos-text-muted, #94a3b8)}:root[data-theme=dark] :host .talos-gauge-target-tick,:root.dark :host .talos-gauge-target-tick,[data-theme=dark] :host .talos-gauge-target-tick,[data-mode=dark] :host .talos-gauge-target-tick,.dark :host .talos-gauge-target-tick,.dark-theme :host .talos-gauge-target-tick{fill:#fff;stroke:#0f172a}:root[data-theme=dark] :host .talos-gauge-linear-target,:root.dark :host .talos-gauge-linear-target,[data-theme=dark] :host .talos-gauge-linear-target,[data-mode=dark] :host .talos-gauge-linear-target,.dark :host .talos-gauge-linear-target,.dark-theme :host .talos-gauge-linear-target{stroke:#fff}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], indicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicator", required: false }] }], thresholds: [{ type: i0.Input, args: [{ isSignal: true, alias: "thresholds", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], trackColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackColor", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], lineCap: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineCap", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], showMinMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMinMax", required: false }] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], valueFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormatter", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", required: false }] }] } });
+
+class TalosMiniGaugeModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosMiniGaugeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: TalosMiniGaugeModule, imports: [TalosMiniGaugeComponent], exports: [TalosMiniGaugeComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosMiniGaugeModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosMiniGaugeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [TalosMiniGaugeComponent],
+                    exports: [TalosMiniGaugeComponent]
+                }]
+        }] });
+
+/**
+ * Types and interfaces for TalosSparklineComponent
+ */
+const GOLDEN_RATIO = 1.618;
+
+const PRESET_PALETTES = {
+    primary: { stroke: '#2563eb', fillStart: 'rgba(37, 99, 235, 0.35)', fillEnd: 'rgba(37, 99, 235, 0.0)' },
+    blue: { stroke: '#3b82f6', fillStart: 'rgba(59, 130, 246, 0.35)', fillEnd: 'rgba(59, 130, 246, 0.0)' },
+    success: { stroke: '#16a34a', fillStart: 'rgba(22, 163, 74, 0.35)', fillEnd: 'rgba(22, 163, 74, 0.0)' },
+    emerald: { stroke: '#10b981', fillStart: 'rgba(16, 185, 129, 0.35)', fillEnd: 'rgba(16, 185, 129, 0.0)' },
+    danger: { stroke: '#ef4444', fillStart: 'rgba(239, 68, 68, 0.35)', fillEnd: 'rgba(239, 68, 68, 0.0)' },
+    rose: { stroke: '#f43f5e', fillStart: 'rgba(244, 63, 94, 0.35)', fillEnd: 'rgba(244, 63, 94, 0.0)' },
+    warning: { stroke: '#f59e0b', fillStart: 'rgba(245, 158, 11, 0.35)', fillEnd: 'rgba(245, 158, 11, 0.0)' },
+    amber: { stroke: '#d97706', fillStart: 'rgba(217, 119, 6, 0.35)', fillEnd: 'rgba(217, 119, 6, 0.0)' },
+    info: { stroke: '#0284c7', fillStart: 'rgba(2, 132, 199, 0.35)', fillEnd: 'rgba(2, 132, 199, 0.0)' },
+    cyan: { stroke: '#06b6d4', fillStart: 'rgba(6, 182, 212, 0.35)', fillEnd: 'rgba(6, 182, 212, 0.0)' },
+    violet: { stroke: '#8b5cf6', fillStart: 'rgba(139, 92, 246, 0.35)', fillEnd: 'rgba(139, 92, 246, 0.0)' },
+    slate: { stroke: '#64748b', fillStart: 'rgba(100, 116, 139, 0.3)', fillEnd: 'rgba(100, 116, 139, 0.0)' }
+};
+// Golden Ratio (~1.618:1) and proportional defaults
+const DEFAULT_SIZE_DIMENSIONS = {
+    xs: { width: 64, height: 40 },
+    sm: { width: 96, height: 60 },
+    md: { width: 130, height: 80 },
+    lg: { width: 180, height: 110 },
+    responsive: { width: 240, height: 60 },
+    custom: { width: 130, height: 80 }
+};
+let uniqueIdCounter = 0;
+class TalosSparklineComponent {
+    elementRef = inject(ElementRef);
+    resizeObserver;
+    /** Data points (numbers or objects) */
+    data = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    /** Chart type: line, area, or bar */
+    type = input('area', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /** Visual color theme or custom hex code */
+    color = input('primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Automatically choose green/red based on first -> last delta */
+    autoColorTrend = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autoColorTrend" }] : /* istanbul ignore next */ []));
+    /** Smooth Bezier interpolation vs straight line */
+    smooth = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "smooth" }] : /* istanbul ignore next */ []));
+    /** Stroke line width */
+    strokeWidth = input(2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []));
+    /** Marker dots display mode */
+    showMarkers = input('none', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showMarkers" }] : /* istanbul ignore next */ []));
+    /** Marker circle radius */
+    markerRadius = input(3.5, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "markerRadius" }] : /* istanbul ignore next */ []));
+    /** Optional reference horizontal baseline */
+    referenceValue = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "referenceValue" }] : /* istanbul ignore next */ []));
+    /** Show interactive hover tooltip */
+    showTooltip = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showTooltip" }] : /* istanbul ignore next */ []));
+    /** Interactive mouse events enabled */
+    interactive = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []));
+    /** Gap between bars for bar sparklines */
+    barGap = input(3, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "barGap" }] : /* istanbul ignore next */ []));
+    /** Corner radius for bars */
+    barRadius = input(2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "barRadius" }] : /* istanbul ignore next */ []));
+    /** Preset size */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Aspect ratio configuration (e.g. 'golden', 1.618, '2:1', '16:9') */
+    aspectRatio = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "aspectRatio" }] : /* istanbul ignore next */ []));
+    /** Custom width override (e.g. '120px' or '100%') */
+    width = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    /** Custom height override (e.g. '36px') */
+    height = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    /** Explicit minimum value bounds */
+    min = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    /** Explicit maximum value bounds */
+    max = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** Custom accessible label */
+    ariaLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Value formatter for tooltip */
+    valueFormatter = input((val) => val.toLocaleString(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueFormatter" }] : /* istanbul ignore next */ []));
+    /** Hover event emitter */
+    pointHover = output();
+    /** Click event emitter */
+    pointClick = output();
+    // Unique ID for SVG linear gradient IDs
+    gradientId = `talos-sparkline-grad-${++uniqueIdCounter}`;
+    // Interactive hover state
+    hoveredPoint = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoveredPoint" }] : /* istanbul ignore next */ []));
+    isHovering = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isHovering" }] : /* istanbul ignore next */ []));
+    // Dynamic container dimensions for 1:1 SVG coordinate rendering (prevents non-uniform stretching)
+    containerWidth = signal(120, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "containerWidth" }] : /* istanbul ignore next */ []));
+    containerHeight = signal(36, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "containerHeight" }] : /* istanbul ignore next */ []));
+    svgWidth = computed(() => this.containerWidth(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "svgWidth" }] : /* istanbul ignore next */ []));
+    svgHeight = computed(() => this.containerHeight(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "svgHeight" }] : /* istanbul ignore next */ []));
+    padding = computed(() => {
+        if (this.type() === 'bar')
+            return 2;
+        if (this.showMarkers() !== 'none' || this.interactive())
+            return 5;
+        return 3;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterNextRender(() => {
+            this.updateDimensions();
+            if (typeof ResizeObserver !== 'undefined') {
+                this.resizeObserver = new ResizeObserver((entries) => {
+                    for (const entry of entries) {
+                        const { width, height } = entry.contentRect;
+                        if (width > 0 && height > 0) {
+                            this.containerWidth.set(Math.round(width));
+                            this.containerHeight.set(Math.round(height));
+                        }
+                    }
+                });
+                this.resizeObserver.observe(this.elementRef.nativeElement);
+            }
+        });
+        inject(DestroyRef).onDestroy(() => {
+            this.resizeObserver?.disconnect();
+        });
+    }
+    updateDimensions() {
+        const el = this.elementRef.nativeElement;
+        const rect = el.getBoundingClientRect();
+        if (rect.width > 0 && rect.height > 0) {
+            this.containerWidth.set(Math.round(rect.width));
+            this.containerHeight.set(Math.round(rect.height));
+        }
+        else {
+            const defaultDims = DEFAULT_SIZE_DIMENSIONS[this.size()] || DEFAULT_SIZE_DIMENSIONS.md;
+            this.containerWidth.set(defaultDims.width);
+            this.containerHeight.set(defaultDims.height);
+        }
+    }
+    /** Host styles */
+    hostWidth = computed(() => {
+        const custom = this.width();
+        if (custom !== null)
+            return typeof custom === 'number' ? `${custom}px` : custom;
+        return null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostWidth" }] : /* istanbul ignore next */ []));
+    hostHeight = computed(() => {
+        const custom = this.height();
+        if (custom !== null)
+            return typeof custom === 'number' ? `${custom}px` : custom;
+        return null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostHeight" }] : /* istanbul ignore next */ []));
+    computedAspectRatio = computed(() => {
+        const ar = this.aspectRatio();
+        if (ar === 'golden')
+            return `${GOLDEN_RATIO} / 1`;
+        if (typeof ar === 'number')
+            return `${ar} / 1`;
+        if (typeof ar === 'string') {
+            if (ar.includes(':')) {
+                const [w, h] = ar.split(':');
+                return `${w.trim()} / ${h.trim()}`;
+            }
+            return ar;
+        }
+        return null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedAspectRatio" }] : /* istanbul ignore next */ []));
+    /** Normalized points array */
+    normalizedPoints = computed(() => {
+        const raw = this.data();
+        if (!raw || raw.length === 0)
+            return [];
+        return raw.map((item, idx) => {
+            if (typeof item === 'number') {
+                return { value: item };
+            }
+            return item;
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "normalizedPoints" }] : /* istanbul ignore next */ []));
+    /** Determine effective color palette */
+    effectiveColor = computed(() => {
+        if (this.autoColorTrend()) {
+            const pts = this.normalizedPoints();
+            if (pts.length >= 2) {
+                const first = pts[0].value;
+                const last = pts[pts.length - 1].value;
+                if (last >= first) {
+                    return PRESET_PALETTES['success'];
+                }
+                else {
+                    return PRESET_PALETTES['danger'];
+                }
+            }
+        }
+        const c = this.color();
+        if (PRESET_PALETTES[c]) {
+            return PRESET_PALETTES[c];
+        }
+        // Custom hex/rgb
+        return {
+            stroke: c,
+            fillStart: c.startsWith('#') ? `${c}40` : 'rgba(37, 99, 235, 0.3)',
+            fillEnd: c.startsWith('#') ? `${c}00` : 'rgba(37, 99, 235, 0.0)'
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveColor" }] : /* istanbul ignore next */ []));
+    /** Min & Max calculation */
+    valueBounds = computed(() => {
+        const pts = this.normalizedPoints();
+        if (pts.length === 0)
+            return { min: 0, max: 100, span: 100, rawMin: 0, rawMax: 100 };
+        let calculatedMin = pts[0].value;
+        let calculatedMax = pts[0].value;
+        for (const p of pts) {
+            if (p.value < calculatedMin)
+                calculatedMin = p.value;
+            if (p.value > calculatedMax)
+                calculatedMax = p.value;
+        }
+        // Include reference value if set
+        const ref = this.referenceValue();
+        if (ref !== null) {
+            if (ref < calculatedMin)
+                calculatedMin = ref;
+            if (ref > calculatedMax)
+                calculatedMax = ref;
+        }
+        // Explicit override
+        const explicitMin = this.min();
+        const explicitMax = this.max();
+        const finalMin = explicitMin !== null ? explicitMin : calculatedMin;
+        const finalMax = explicitMax !== null ? explicitMax : calculatedMax;
+        // Prevent divide by zero if constant value
+        const span = finalMax === finalMin ? 1 : finalMax - finalMin;
+        return { min: finalMin, max: finalMax, span, rawMin: calculatedMin, rawMax: calculatedMax };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueBounds" }] : /* istanbul ignore next */ []));
+    /** Computed internal points with SVG coordinates */
+    internalPoints = computed(() => {
+        const pts = this.normalizedPoints();
+        if (pts.length === 0)
+            return [];
+        const { min, span, rawMin, rawMax } = this.valueBounds();
+        const w = this.svgWidth();
+        const h = this.svgHeight();
+        const p = this.padding();
+        const availableW = Math.max(1, w - p * 2);
+        const availableH = Math.max(1, h - p * 2);
+        const count = pts.length;
+        const stepX = count > 1 ? availableW / (count - 1) : availableW / 2;
+        return pts.map((pt, idx) => {
+            const x = count === 1 ? w / 2 : p + idx * stepX;
+            // Invert Y because SVG 0 is top
+            const normalizedRatio = (pt.value - min) / span;
+            const y = h - p - normalizedRatio * availableH;
+            return {
+                index: idx,
+                value: pt.value,
+                label: pt.label,
+                date: pt.date,
+                x,
+                y,
+                color: pt.color,
+                isMin: pt.value === rawMin,
+                isMax: pt.value === rawMax,
+                isFirst: idx === 0,
+                isLast: idx === count - 1
+            };
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "internalPoints" }] : /* istanbul ignore next */ []));
+    /** SVG Path line data */
+    linePath = computed(() => {
+        const pts = this.internalPoints();
+        if (pts.length < 2)
+            return '';
+        if (!this.smooth()) {
+            return pts.map((p, idx) => `${idx === 0 ? 'M' : 'L'} ${p.x.toFixed(2)} ${p.y.toFixed(2)}`).join(' ');
+        }
+        // Smooth Bezier Curve (Catmull-Rom or Monotone-like control points)
+        let d = `M ${pts[0].x.toFixed(2)} ${pts[0].y.toFixed(2)}`;
+        for (let i = 0; i < pts.length - 1; i++) {
+            const p0 = i > 0 ? pts[i - 1] : pts[i];
+            const p1 = pts[i];
+            const p2 = pts[i + 1];
+            const p3 = i < pts.length - 2 ? pts[i + 2] : p2;
+            const cp1x = p1.x + (p2.x - p0.x) / 6;
+            const cp1y = p1.y + (p2.y - p0.y) / 6;
+            const cp2x = p2.x - (p3.x - p1.x) / 6;
+            const cp2y = p2.y - (p3.y - p1.y) / 6;
+            d += ` C ${cp1x.toFixed(2)} ${cp1y.toFixed(2)}, ${cp2x.toFixed(2)} ${cp2y.toFixed(2)}, ${p2.x.toFixed(2)} ${p2.y.toFixed(2)}`;
+        }
+        return d;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "linePath" }] : /* istanbul ignore next */ []));
+    /** SVG Area path (closed polygon under curve) */
+    areaPath = computed(() => {
+        const line = this.linePath();
+        const pts = this.internalPoints();
+        if (!line || pts.length < 2)
+            return '';
+        const lastPt = pts[pts.length - 1];
+        const firstPt = pts[0];
+        const baselineY = this.svgHeight();
+        return `${line} L ${lastPt.x.toFixed(2)} ${baselineY} L ${firstPt.x.toFixed(2)} ${baselineY} Z`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "areaPath" }] : /* istanbul ignore next */ []));
+    /** Bar chart segments */
+    barSegments = computed(() => {
+        const pts = this.normalizedPoints();
+        if (pts.length === 0)
+            return [];
+        const explicitMin = this.min();
+        const explicitMax = this.max();
+        const { rawMin, rawMax } = this.valueBounds();
+        // For bar charts, default baseline is 0 unless min is explicitly provided
+        const barMin = explicitMin !== null ? explicitMin : Math.min(0, rawMin);
+        const barMax = explicitMax !== null ? explicitMax : Math.max(0, rawMax);
+        const barSpan = barMax === barMin ? (barMax !== 0 ? Math.abs(barMax) : 1) : barMax - barMin;
+        const w = this.svgWidth();
+        const h = this.svgHeight();
+        const p = this.padding();
+        const gap = this.barGap();
+        const count = pts.length;
+        const availableW = Math.max(1, w - p * 2);
+        const totalGaps = (count - 1) * gap;
+        const barW = Math.max(2, (availableW - totalGaps) / count);
+        const availableH = Math.max(1, h - p * 2);
+        const baseColor = this.effectiveColor().stroke;
+        // Calculate Y position of zero baseline
+        const zeroRatio = Math.max(0, Math.min(1, (0 - barMin) / barSpan));
+        const zeroY = h - p - zeroRatio * availableH;
+        return pts.map((pt, idx) => {
+            const x = p + idx * (barW + gap);
+            const val = pt.value;
+            let y;
+            let barH;
+            if (barMin >= 0) {
+                // All positive (standard case)
+                const ratio = Math.max(0, Math.min(1, (val - barMin) / barSpan));
+                barH = Math.max(2, ratio * availableH);
+                y = h - p - barH;
+            }
+            else if (barMax <= 0) {
+                // All negative
+                const ratio = Math.max(0, Math.min(1, Math.abs(val) / barSpan));
+                barH = Math.max(2, ratio * availableH);
+                y = p;
+            }
+            else {
+                // Mixed positive & negative values around zero baseline
+                if (val >= 0) {
+                    const ratio = Math.min(1, val / barSpan);
+                    barH = Math.max(2, ratio * availableH);
+                    y = zeroY - barH;
+                }
+                else {
+                    const ratio = Math.min(1, Math.abs(val) / barSpan);
+                    barH = Math.max(2, ratio * availableH);
+                    y = zeroY;
+                }
+            }
+            return {
+                index: idx,
+                value: pt.value,
+                label: pt.label,
+                x,
+                y,
+                width: barW,
+                height: barH,
+                color: pt.color || baseColor
+            };
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "barSegments" }] : /* istanbul ignore next */ []));
+    /** Highlight markers based on showMarkers input */
+    markersToRender = computed(() => {
+        const mode = this.showMarkers();
+        if (mode === 'none')
+            return [];
+        const pts = this.internalPoints();
+        switch (mode) {
+            case 'all':
+                return pts;
+            case 'endpoints':
+                return pts.filter((p) => p.isFirst || p.isLast);
+            case 'min-max':
+                return pts.filter((p) => p.isMin || p.isMax);
+            case 'last':
+                return pts.length > 0 ? [pts[pts.length - 1]] : [];
+            default:
+                return [];
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "markersToRender" }] : /* istanbul ignore next */ []));
+    /** Reference baseline Y coordinate */
+    referenceLineY = computed(() => {
+        const ref = this.referenceValue();
+        if (ref === null)
+            return null;
+        const { min, span } = this.valueBounds();
+        const h = this.svgHeight();
+        const p = this.padding();
+        const availableH = Math.max(1, h - p * 2);
+        const ratio = (ref - min) / span;
+        return h - p - ratio * availableH;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "referenceLineY" }] : /* istanbul ignore next */ []));
+    /** Aria label for accessibility */
+    computedAriaLabel = computed(() => {
+        const custom = this.ariaLabel();
+        if (custom)
+            return custom;
+        const pts = this.normalizedPoints();
+        if (pts.length === 0)
+            return 'Empty sparkline';
+        const first = pts[0].value;
+        const last = pts[pts.length - 1].value;
+        const delta = last - first;
+        const direction = delta >= 0 ? 'increased' : 'decreased';
+        return `Sparkline trend: ${first} to ${last} (${direction} by ${Math.abs(delta).toFixed(1)})`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : /* istanbul ignore next */ []));
+    /** Handle mouse move for interactive hover tracking */
+    onMouseMove(event) {
+        if (!this.interactive())
+            return;
+        const rect = this.elementRef.nativeElement.getBoundingClientRect();
+        const mouseX = event.clientX - rect.left;
+        if (this.type() === 'bar') {
+            const bars = this.barSegments();
+            if (bars.length === 0)
+                return;
+            let nearest = bars[0];
+            let minDistance = Math.abs(bars[0].x + bars[0].width / 2 - mouseX);
+            for (let i = 1; i < bars.length; i++) {
+                const centerX = bars[i].x + bars[i].width / 2;
+                const dist = Math.abs(centerX - mouseX);
+                if (dist < minDistance) {
+                    minDistance = dist;
+                    nearest = bars[i];
+                }
+            }
+            const point = {
+                index: nearest.index,
+                value: nearest.value,
+                label: nearest.label,
+                x: Math.round(nearest.x + nearest.width / 2),
+                y: nearest.y
+            };
+            this.hoveredPoint.set(point);
+            this.isHovering.set(true);
+            this.pointHover.emit({
+                index: nearest.index,
+                value: nearest.value,
+                label: nearest.label,
+                x: point.x,
+                y: point.y
+            });
+            return;
+        }
+        const pts = this.internalPoints();
+        if (pts.length === 0)
+            return;
+        // Find nearest point based on direct pixel coordinate
+        let nearest = pts[0];
+        let minDistance = Math.abs(pts[0].x - mouseX);
+        for (let i = 1; i < pts.length; i++) {
+            const dist = Math.abs(pts[i].x - mouseX);
+            if (dist < minDistance) {
+                minDistance = dist;
+                nearest = pts[i];
+            }
+        }
+        this.hoveredPoint.set(nearest);
+        this.isHovering.set(true);
+        this.pointHover.emit({
+            index: nearest.index,
+            value: nearest.value,
+            label: nearest.label,
+            x: nearest.x,
+            y: nearest.y
+        });
+    }
+    /** Handle mouse leave */
+    onMouseLeave() {
+        if (!this.interactive())
+            return;
+        this.hoveredPoint.set(null);
+        this.isHovering.set(false);
+        this.pointHover.emit(null);
+    }
+    /** Handle point click */
+    onPointClick(point) {
+        const x = 'width' in point ? Math.round(point.x + point.width / 2) : ('x' in point ? point.x : 0);
+        this.pointClick.emit({
+            index: point.index,
+            value: point.value,
+            label: point.label,
+            x,
+            y: 'y' in point ? point.y : 0
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosSparklineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TalosSparklineComponent, isStandalone: true, selector: "talos-sparkline", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, autoColorTrend: { classPropertyName: "autoColorTrend", publicName: "autoColorTrend", isSignal: true, isRequired: false, transformFunction: null }, smooth: { classPropertyName: "smooth", publicName: "smooth", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, showMarkers: { classPropertyName: "showMarkers", publicName: "showMarkers", isSignal: true, isRequired: false, transformFunction: null }, markerRadius: { classPropertyName: "markerRadius", publicName: "markerRadius", isSignal: true, isRequired: false, transformFunction: null }, referenceValue: { classPropertyName: "referenceValue", publicName: "referenceValue", isSignal: true, isRequired: false, transformFunction: null }, showTooltip: { classPropertyName: "showTooltip", publicName: "showTooltip", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, barGap: { classPropertyName: "barGap", publicName: "barGap", isSignal: true, isRequired: false, transformFunction: null }, barRadius: { classPropertyName: "barRadius", publicName: "barRadius", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, valueFormatter: { classPropertyName: "valueFormatter", publicName: "valueFormatter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointHover: "pointHover", pointClick: "pointClick" }, host: { properties: { "class.talos-sparkline-xs": "size() === \"xs\"", "class.talos-sparkline-sm": "size() === \"sm\"", "class.talos-sparkline-md": "size() === \"md\"", "class.talos-sparkline-lg": "size() === \"lg\"", "class.talos-sparkline-responsive": "size() === \"responsive\"", "style.width": "hostWidth()", "style.height": "hostHeight()", "style.aspectRatio": "computedAspectRatio()", "attr.role": "\"img\"", "attr.aria-label": "computedAriaLabel()" }, classAttribute: "talos-sparkline" }, ngImport: i0, template: "<svg\n  class=\"talos-sparkline-svg\"\n  [attr.viewBox]=\"'0 0 ' + svgWidth() + ' ' + svgHeight()\"\n  (mousemove)=\"onMouseMove($event)\"\n  (mouseleave)=\"onMouseLeave()\"\n  aria-hidden=\"true\"\n>\n  <defs>\n    <linearGradient [id]=\"gradientId\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n      <stop offset=\"0%\" [attr.stop-color]=\"effectiveColor().fillStart\" />\n      <stop offset=\"100%\" [attr.stop-color]=\"effectiveColor().fillEnd\" />\n    </linearGradient>\n  </defs>\n\n  <!-- Reference Baseline (if provided) -->\n  @if (referenceLineY() !== null) {\n    <line\n      class=\"talos-sparkline-reference-line\"\n      [attr.x1]=\"0\"\n      [attr.y1]=\"referenceLineY()\"\n      [attr.x2]=\"svgWidth()\"\n      [attr.y2]=\"referenceLineY()\"\n    />\n  }\n\n  <!-- Chart Type: Area / Line -->\n  @if (type() === 'area' || type() === 'line') {\n    @if (type() === 'area' && areaPath()) {\n      <path\n        class=\"talos-sparkline-area\"\n        [attr.d]=\"areaPath()\"\n        [attr.fill]=\"'url(#' + gradientId + ')'\"\n      />\n    }\n\n    @if (linePath()) {\n      <path\n        class=\"talos-sparkline-line\"\n        [attr.d]=\"linePath()\"\n        [attr.stroke]=\"effectiveColor().stroke\"\n        [attr.stroke-width]=\"strokeWidth()\"\n        fill=\"none\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    }\n  }\n\n  <!-- Chart Type: Bar -->\n  @if (type() === 'bar') {\n    @for (bar of barSegments(); track bar.index) {\n      <rect\n        class=\"talos-sparkline-bar\"\n        [class.talos-sparkline-bar-hovered]=\"isHovering() && hoveredPoint()?.index === bar.index\"\n        [attr.x]=\"bar.x\"\n        [attr.y]=\"bar.y\"\n        [attr.width]=\"bar.width\"\n        [attr.height]=\"bar.height\"\n        [attr.rx]=\"barRadius()\"\n        [attr.ry]=\"barRadius()\"\n        [attr.fill]=\"bar.color\"\n        (click)=\"onPointClick(bar)\"\n      />\n    }\n  }\n\n  <!-- Highlight Markers -->\n  @for (marker of markersToRender(); track marker.index) {\n    <circle\n      class=\"talos-sparkline-marker\"\n      [attr.cx]=\"marker.x\"\n      [attr.cy]=\"marker.y\"\n      [attr.r]=\"markerRadius()\"\n      [attr.fill]=\"marker.color || effectiveColor().stroke\"\n      [attr.stroke]=\"'#ffffff'\"\n      [attr.stroke-width]=\"1.5\"\n      (click)=\"onPointClick(marker)\"\n    />\n  }\n\n  <!-- Interactive Hover Crosshair / Cursor Dot (Line/Area only) -->\n  @if (type() !== 'bar' && isHovering() && hoveredPoint(); as pt) {\n    <line\n      class=\"talos-sparkline-cursor-line\"\n      [attr.x1]=\"pt.x\"\n      [attr.y1]=\"0\"\n      [attr.x2]=\"pt.x\"\n      [attr.y2]=\"svgHeight()\"\n    />\n    <circle\n      class=\"talos-sparkline-hover-dot-outer\"\n      [attr.cx]=\"pt.x\"\n      [attr.cy]=\"pt.y\"\n      [attr.r]=\"markerRadius() + 2.5\"\n      [attr.fill]=\"effectiveColor().stroke\"\n      opacity=\"0.25\"\n    />\n    <circle\n      class=\"talos-sparkline-hover-dot\"\n      [attr.cx]=\"pt.x\"\n      [attr.cy]=\"pt.y\"\n      [attr.r]=\"markerRadius() + 0.5\"\n      [attr.fill]=\"effectiveColor().stroke\"\n      stroke=\"#ffffff\"\n      [attr.stroke-width]=\"1.5\"\n    />\n  }\n</svg>\n\n<!-- Floating Tooltip on Hover -->\n@if (showTooltip() && isHovering() && hoveredPoint(); as pt) {\n  <div\n    class=\"talos-sparkline-tooltip\"\n    [style.left.px]=\"pt.x\"\n  >\n    @if (pt.label) {\n      <span class=\"talos-sparkline-tooltip-label\">{{ pt.label }}</span>\n    }\n    <span class=\"talos-sparkline-tooltip-value\">{{ valueFormatter()(pt.value) }}</span>\n  </div>\n}\n", styles: [":host{position:relative;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;box-sizing:border-box;overflow:visible;-webkit-user-select:none;user-select:none}:host.talos-sparkline-xs{width:64px;height:40px}:host.talos-sparkline-sm{width:96px;height:60px}:host.talos-sparkline-md{width:130px;height:80px}:host.talos-sparkline-lg{width:180px;height:110px}:host.talos-sparkline-responsive{display:block;width:100%;height:100%;min-height:48px}:host .talos-sparkline-svg{display:block;width:100%;height:100%;overflow:visible;cursor:crosshair}:host .talos-sparkline-area{transition:d .25s ease,opacity .2s ease}:host .talos-sparkline-line{transition:d .25s ease,stroke .2s ease}:host .talos-sparkline-bar{transition:height .2s ease,y .2s ease,opacity .15s ease,filter .15s ease;cursor:pointer}:host .talos-sparkline-bar:hover,:host .talos-sparkline-bar.talos-sparkline-bar-hovered{opacity:.85;filter:brightness(1.1)}:host .talos-sparkline-reference-line{stroke:var(--talos-border-hover, #94a3b8);stroke-width:1;stroke-dasharray:2 2;opacity:.65}:host .talos-sparkline-cursor-line{stroke:var(--talos-text-muted, #64748b);stroke-width:1;stroke-dasharray:2 2;opacity:.7;pointer-events:none}:host .talos-sparkline-marker{filter:drop-shadow(0 1px 2px rgba(0,0,0,.15));cursor:pointer;transition:transform .15s ease}:host .talos-sparkline-marker:hover{transform:scale(1.2)}:host .talos-sparkline-hover-dot{pointer-events:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}:host .talos-sparkline-tooltip{position:absolute;bottom:calc(100% + 4px);transform:translate(-50%);pointer-events:none;z-index:30;display:flex;flex-direction:column;align-items:center;padding:2px 6px;border-radius:4px;background:var(--talos-text-color, #0f172a);color:var(--talos-card-bg, #ffffff);font-size:.6875rem;font-weight:600;line-height:1.2;white-space:nowrap;box-shadow:0 4px 6px -1px #00000026,0 2px 4px -2px #0000001a;animation:talosSparklineFadeIn .12s ease-out}:host .talos-sparkline-tooltip .talos-sparkline-tooltip-label{font-size:.625rem;font-weight:400;opacity:.8}:host .talos-sparkline-tooltip .talos-sparkline-tooltip-value{letter-spacing:-.01em}:host .talos-sparkline-tooltip:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border-width:3px;border-style:solid;border-color:var(--talos-text-color, #0f172a) transparent transparent transparent}@keyframes talosSparklineFadeIn{0%{opacity:0;transform:translate(-50%,2px)}to{opacity:1;transform:translate(-50%)}}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosSparklineComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-sparkline', host: {
+                        'class': 'talos-sparkline',
+                        '[class.talos-sparkline-xs]': 'size() === "xs"',
+                        '[class.talos-sparkline-sm]': 'size() === "sm"',
+                        '[class.talos-sparkline-md]': 'size() === "md"',
+                        '[class.talos-sparkline-lg]': 'size() === "lg"',
+                        '[class.talos-sparkline-responsive]': 'size() === "responsive"',
+                        '[style.width]': 'hostWidth()',
+                        '[style.height]': 'hostHeight()',
+                        '[style.aspectRatio]': 'computedAspectRatio()',
+                        '[attr.role]': '"img"',
+                        '[attr.aria-label]': 'computedAriaLabel()'
+                    }, template: "<svg\n  class=\"talos-sparkline-svg\"\n  [attr.viewBox]=\"'0 0 ' + svgWidth() + ' ' + svgHeight()\"\n  (mousemove)=\"onMouseMove($event)\"\n  (mouseleave)=\"onMouseLeave()\"\n  aria-hidden=\"true\"\n>\n  <defs>\n    <linearGradient [id]=\"gradientId\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n      <stop offset=\"0%\" [attr.stop-color]=\"effectiveColor().fillStart\" />\n      <stop offset=\"100%\" [attr.stop-color]=\"effectiveColor().fillEnd\" />\n    </linearGradient>\n  </defs>\n\n  <!-- Reference Baseline (if provided) -->\n  @if (referenceLineY() !== null) {\n    <line\n      class=\"talos-sparkline-reference-line\"\n      [attr.x1]=\"0\"\n      [attr.y1]=\"referenceLineY()\"\n      [attr.x2]=\"svgWidth()\"\n      [attr.y2]=\"referenceLineY()\"\n    />\n  }\n\n  <!-- Chart Type: Area / Line -->\n  @if (type() === 'area' || type() === 'line') {\n    @if (type() === 'area' && areaPath()) {\n      <path\n        class=\"talos-sparkline-area\"\n        [attr.d]=\"areaPath()\"\n        [attr.fill]=\"'url(#' + gradientId + ')'\"\n      />\n    }\n\n    @if (linePath()) {\n      <path\n        class=\"talos-sparkline-line\"\n        [attr.d]=\"linePath()\"\n        [attr.stroke]=\"effectiveColor().stroke\"\n        [attr.stroke-width]=\"strokeWidth()\"\n        fill=\"none\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    }\n  }\n\n  <!-- Chart Type: Bar -->\n  @if (type() === 'bar') {\n    @for (bar of barSegments(); track bar.index) {\n      <rect\n        class=\"talos-sparkline-bar\"\n        [class.talos-sparkline-bar-hovered]=\"isHovering() && hoveredPoint()?.index === bar.index\"\n        [attr.x]=\"bar.x\"\n        [attr.y]=\"bar.y\"\n        [attr.width]=\"bar.width\"\n        [attr.height]=\"bar.height\"\n        [attr.rx]=\"barRadius()\"\n        [attr.ry]=\"barRadius()\"\n        [attr.fill]=\"bar.color\"\n        (click)=\"onPointClick(bar)\"\n      />\n    }\n  }\n\n  <!-- Highlight Markers -->\n  @for (marker of markersToRender(); track marker.index) {\n    <circle\n      class=\"talos-sparkline-marker\"\n      [attr.cx]=\"marker.x\"\n      [attr.cy]=\"marker.y\"\n      [attr.r]=\"markerRadius()\"\n      [attr.fill]=\"marker.color || effectiveColor().stroke\"\n      [attr.stroke]=\"'#ffffff'\"\n      [attr.stroke-width]=\"1.5\"\n      (click)=\"onPointClick(marker)\"\n    />\n  }\n\n  <!-- Interactive Hover Crosshair / Cursor Dot (Line/Area only) -->\n  @if (type() !== 'bar' && isHovering() && hoveredPoint(); as pt) {\n    <line\n      class=\"talos-sparkline-cursor-line\"\n      [attr.x1]=\"pt.x\"\n      [attr.y1]=\"0\"\n      [attr.x2]=\"pt.x\"\n      [attr.y2]=\"svgHeight()\"\n    />\n    <circle\n      class=\"talos-sparkline-hover-dot-outer\"\n      [attr.cx]=\"pt.x\"\n      [attr.cy]=\"pt.y\"\n      [attr.r]=\"markerRadius() + 2.5\"\n      [attr.fill]=\"effectiveColor().stroke\"\n      opacity=\"0.25\"\n    />\n    <circle\n      class=\"talos-sparkline-hover-dot\"\n      [attr.cx]=\"pt.x\"\n      [attr.cy]=\"pt.y\"\n      [attr.r]=\"markerRadius() + 0.5\"\n      [attr.fill]=\"effectiveColor().stroke\"\n      stroke=\"#ffffff\"\n      [attr.stroke-width]=\"1.5\"\n    />\n  }\n</svg>\n\n<!-- Floating Tooltip on Hover -->\n@if (showTooltip() && isHovering() && hoveredPoint(); as pt) {\n  <div\n    class=\"talos-sparkline-tooltip\"\n    [style.left.px]=\"pt.x\"\n  >\n    @if (pt.label) {\n      <span class=\"talos-sparkline-tooltip-label\">{{ pt.label }}</span>\n    }\n    <span class=\"talos-sparkline-tooltip-value\">{{ valueFormatter()(pt.value) }}</span>\n  </div>\n}\n", styles: [":host{position:relative;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;box-sizing:border-box;overflow:visible;-webkit-user-select:none;user-select:none}:host.talos-sparkline-xs{width:64px;height:40px}:host.talos-sparkline-sm{width:96px;height:60px}:host.talos-sparkline-md{width:130px;height:80px}:host.talos-sparkline-lg{width:180px;height:110px}:host.talos-sparkline-responsive{display:block;width:100%;height:100%;min-height:48px}:host .talos-sparkline-svg{display:block;width:100%;height:100%;overflow:visible;cursor:crosshair}:host .talos-sparkline-area{transition:d .25s ease,opacity .2s ease}:host .talos-sparkline-line{transition:d .25s ease,stroke .2s ease}:host .talos-sparkline-bar{transition:height .2s ease,y .2s ease,opacity .15s ease,filter .15s ease;cursor:pointer}:host .talos-sparkline-bar:hover,:host .talos-sparkline-bar.talos-sparkline-bar-hovered{opacity:.85;filter:brightness(1.1)}:host .talos-sparkline-reference-line{stroke:var(--talos-border-hover, #94a3b8);stroke-width:1;stroke-dasharray:2 2;opacity:.65}:host .talos-sparkline-cursor-line{stroke:var(--talos-text-muted, #64748b);stroke-width:1;stroke-dasharray:2 2;opacity:.7;pointer-events:none}:host .talos-sparkline-marker{filter:drop-shadow(0 1px 2px rgba(0,0,0,.15));cursor:pointer;transition:transform .15s ease}:host .talos-sparkline-marker:hover{transform:scale(1.2)}:host .talos-sparkline-hover-dot{pointer-events:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}:host .talos-sparkline-tooltip{position:absolute;bottom:calc(100% + 4px);transform:translate(-50%);pointer-events:none;z-index:30;display:flex;flex-direction:column;align-items:center;padding:2px 6px;border-radius:4px;background:var(--talos-text-color, #0f172a);color:var(--talos-card-bg, #ffffff);font-size:.6875rem;font-weight:600;line-height:1.2;white-space:nowrap;box-shadow:0 4px 6px -1px #00000026,0 2px 4px -2px #0000001a;animation:talosSparklineFadeIn .12s ease-out}:host .talos-sparkline-tooltip .talos-sparkline-tooltip-label{font-size:.625rem;font-weight:400;opacity:.8}:host .talos-sparkline-tooltip .talos-sparkline-tooltip-value{letter-spacing:-.01em}:host .talos-sparkline-tooltip:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border-width:3px;border-style:solid;border-color:var(--talos-text-color, #0f172a) transparent transparent transparent}@keyframes talosSparklineFadeIn{0%{opacity:0;transform:translate(-50%,2px)}to{opacity:1;transform:translate(-50%)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], autoColorTrend: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoColorTrend", required: false }] }], smooth: [{ type: i0.Input, args: [{ isSignal: true, alias: "smooth", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], showMarkers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMarkers", required: false }] }], markerRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "markerRadius", required: false }] }], referenceValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "referenceValue", required: false }] }], showTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTooltip", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], barGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "barGap", required: false }] }], barRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "barRadius", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], aspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspectRatio", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], valueFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormatter", required: false }] }], pointHover: [{ type: i0.Output, args: ["pointHover"] }], pointClick: [{ type: i0.Output, args: ["pointClick"] }] } });
+
+class TalosSparklineModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosSparklineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: TalosSparklineModule, imports: [TalosSparklineComponent], exports: [TalosSparklineComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosSparklineModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosSparklineModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [TalosSparklineComponent],
+                    exports: [TalosSparklineComponent]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { GOLDEN_RATIO, TalosCategoryBarComponent, TalosCategoryBarModule, TalosHeatmapComponent, TalosHeatmapModule, TalosMiniDonutComponent, TalosMiniDonutModule, TalosMiniGaugeComponent, TalosMiniGaugeModule, TalosSparklineComponent, TalosSparklineModule };
+//# sourceMappingURL=weeehaoooz-talos-ui-data-viz.mjs.map