@weeehaoooz/talos-ui 0.1.1 → 0.1.2

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

@@ -1,805 +0,0 @@
-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