@weeehaoooz/talos-ui 0.1.0

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

@@ -0,0 +1,805 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, input, model, output, signal, computed, effect, Component, NgModule } from '@angular/core';
+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/date-range-picker';
+import { TalosTooltipDirective } from '@weeehaoooz/talos-ui/feedback/tooltip';
+
+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]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TalosHeatmapComponent, TalosHeatmapModule };
+//# sourceMappingURL=weeehaoooz-talos-ui-data-viz-heatmap.mjs.map