@nanahoshi/mona-ui 0.18.5 → 0.19.0

package/fesm2022/nanahoshi-mona-ui-chart.mjs

@@ -1,6 +1,7 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
 import { inject, TemplateRef, Directive, InjectionToken, ElementRef, input, isDevMode, Injectable, signal, computed, DestroyRef, viewChild, contentChild, output, effect, untracked, afterNextRender, Component, model } from '@angular/core';
+import { MonaI18nService, injectComponentDirection, formatNumber } from '@nanahoshi/mona-ui/i18n';
 import { twMerge } from 'tailwind-merge';
 import { interpolate, parse, formatRgb, wcagContrast } from 'culori';
 import { scaleLinear, scaleLog, scaleSymlog, scalePow, scaleSqrt, scaleTime, scaleUtc, scaleBand } from 'd3-scale';
@@ -52,6 +53,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
+const CHART_DEFAULT_MESSAGES = {
+    change: "Change",
+    chart: "Chart",
+    chartLegend: "Chart legend",
+    close: "Close",
+    closeAbbreviation: "C",
+    colorScale: "Color scale",
+    conversion: "Conversion",
+    divergingRangeDescription: (title, min, mid, max) => `${title}, ${min} to ${mid} to ${max}`,
+    dropOff: "Drop-off",
+    falling: "Falling",
+    high: "High",
+    highAbbreviation: "H",
+    labelValueSeparator: ":",
+    low: "Low",
+    lowAbbreviation: "L",
+    noData: "No data available",
+    open: "Open",
+    openAbbreviation: "O",
+    overall: "Overall",
+    range: "Range",
+    rangeDescription: (title, min, max) => `${title}, ${min} to ${max}`,
+    rising: "Rising",
+    runningTotal: "Running Total",
+    size: "size",
+    unchanged: "Unchanged",
+    value: "Value",
+    visualIndicatorClamped: "Visual indicator clamped"
+};
+
 class BrowserAnimationClock {
     cancelFrame(id) {
         if (typeof cancelAnimationFrame !== "undefined") {
@@ -52669,8 +52700,8 @@ const chartLegendBaseThemeVariants = cva("flex flex-wrap items-center gap-4 text
             // to non-empty (or vice versa), which would otherwise shift the
             // X axis vertically as the last/first series is toggled.
             bottom: "justify-center mt-3 min-h-5",
-            left: "flex-col justify-center mr-4",
-            right: "flex-col justify-center ml-4",
+            left: "flex-col justify-center me-4",
+            right: "flex-col justify-center ms-4",
             top: "justify-center mb-2 min-h-5"
         }
     }
@@ -52693,8 +52724,8 @@ const chartHeaderBaseThemeVariants = cva("flex flex-col gap-1 mb-3 select-none",
     variants: {
         align: {
             center: "items-center text-center",
-            left: "items-start text-left",
-            right: "items-end text-right"
+            left: "items-start text-start",
+            right: "items-end text-end"
         }
     }
 });
@@ -52734,6 +52765,7 @@ class ChartComponent {
     #dataLabelMeasurements;
     #destroyRef;
     #elementRef;
+    #i18n;
     #hasInitializedDefaultSelection;
     #hasInitializedDefaultViewport;
     #internalSelectedMarkIds;
@@ -52836,6 +52868,7 @@ class ChartComponent {
         this.#dataLabelMeasurements = new Map();
         this.#destroyRef = inject(DestroyRef);
         this.#elementRef = inject(ElementRef);
+        this.#i18n = inject(MonaI18nService);
         this.#hasInitializedDefaultSelection = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#hasInitializedDefaultSelection" }] : /* istanbul ignore next */ []));
         this.#hasInitializedDefaultViewport = signal(false, /* @ts-ignore */
@@ -52939,6 +52972,7 @@ class ChartComponent {
         this.#suppressNextCanvasClick = false;
         this.#synchronizationController = null;
         this.#themeObserver = null;
+        this.messages = this.#i18n.componentMessages("chart", CHART_DEFAULT_MESSAGES);
         this.activeAccessibilityText = signal("", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "activeAccessibilityText" }] : /* istanbul ignore next */ []));
         this.animationDurationCss = computed(() => `${this.normalizedAnimationOptions().duration}ms`, /* @ts-ignore */
@@ -53081,7 +53115,7 @@ class ChartComponent {
         this.effectiveAriaLabel = computed(() => {
             const explicit = this.ariaLabel().trim();
             const builtIn = this.title().trim();
-            return explicit || builtIn || "Chart";
+            return explicit || builtIn || this.messages().chart;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "effectiveAriaLabel" }] : /* istanbul ignore next */ []));
         this.effectiveSelectedMarkIds = computed(() => {
@@ -54231,7 +54265,8 @@ class ChartComponent {
         const fromStr = matchingHit.formattedFrom ?? (matchingHit.fromValue !== undefined ? String(matchingHit.fromValue) : "");
         const toStr = matchingHit.formattedTo ?? (matchingHit.toValue !== undefined ? String(matchingHit.toValue) : "");
         if (isRange && fromStr && toStr) {
-            return `${matchingHit.seriesName}: ${xStr}, ${fromStr} to ${toStr}`;
+            const title = `${matchingHit.seriesName}: ${xStr}`;
+            return this.messages().rangeDescription(title, fromStr, toStr);
         }
         return `${matchingHit.seriesName}: ${xStr}, ${yStr}`;
     }
@@ -56943,7 +56978,7 @@ class ChartComponent {
                 provide: CHART_CONTEXT,
                 useExisting: ChartComponent
             }
-        ], queries: [{ propertyName: "noDataTemplate", first: true, predicate: ChartNoDataTemplateDirective, descendants: true, isSignal: true }, { propertyName: "subtitleTemplate", first: true, predicate: ChartSubtitleTemplateDirective, descendants: true, isSignal: true }, { propertyName: "titleTemplate", first: true, predicate: ChartTitleTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "canvasElement", first: true, predicate: ["canvas"], descendants: true, isSignal: true }, { propertyName: "plotSurfaceElement", first: true, predicate: ["plotSurface"], descendants: true, isSignal: true }, { propertyName: "svgElement", first: true, predicate: ["svgSurface"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasHeader()) {\n    <div [class]=\"headerClasses()\" [style.text-align]=\"titleAlign()\">\n        @if (titleTemplate(); as tpl) {\n            <div data-mona-chart-export-role=\"title-template\">\n                <ng-container\n                    [ngTemplateOutlet]=\"tpl.templateRef\"\n                    [ngTemplateOutletContext]=\"{ $implicit: title(), title: title() }\" />\n            </div>\n        } @else if (title()) {\n            <div [class]=\"titleClasses()\" data-mona-chart-export-role=\"title\">{{ title() }}</div>\n        }\n        @if (subtitleTemplate(); as subTpl) {\n            <div data-mona-chart-export-role=\"subtitle-template\">\n                <ng-container\n                    [ngTemplateOutlet]=\"subTpl.templateRef\"\n                    [ngTemplateOutletContext]=\"{ $implicit: subtitle(), subtitle: subtitle() }\" />\n            </div>\n        } @else if (subtitle()) {\n            <div [class]=\"subtitleClasses()\" data-mona-chart-export-role=\"subtitle\">{{ subtitle() }}</div>\n        }\n    </div>\n}\n<div [class]=\"layoutClasses()\">\n    <div\n        #plotSurface\n        class=\"relative flex-1 min-h-0 min-w-0 w-full h-full overflow-hidden\"\n        [style.order]=\"plotOrder()\"\n        [style.touch-action]=\"touchActionStyle()\"\n        [style.cursor]=\"viewportCursor() ?? 'default'\"\n        (pointerdown)=\"onPointerDown($event)\"\n        (pointermove)=\"onPointerMove($event)\"\n        (pointerup)=\"onPointerUp($event)\"\n        (pointercancel)=\"onPointerCancel($event)\"\n        (lostpointercapture)=\"onLostPointerCapture($event)\"\n        (pointerleave)=\"onPointerLeave($event)\"\n        (wheel)=\"onWheel($event)\"\n        (click)=\"onCanvasClick($event)\">\n        @if (renderer() === \"canvas\") {\n            <canvas #canvas class=\"absolute inset-0 block h-full w-full pointer-events-none\"></canvas>\n        } @else {\n            <svg\n                #svgSurface\n                aria-hidden=\"true\"\n                focusable=\"false\"\n                class=\"absolute inset-0 block h-full w-full pointer-events-none\"\n                xmlns=\"http://www.w3.org/2000/svg\"></svg>\n        }\n\n        <!-- DOM Cartesian Axis Labels & Titles -->\n        @if (cartesianScene(); as cart) {\n            @for (axisScene of cart.axes; track axisScene.axis + \":\" + (axisScene.axisId ?? \"\")) {\n                @if (axisScene.visible) {\n                    @if (axisScene.labels !== false) {\n                        @for (\n                            tick of axisScene.ticks;\n                            track tick.tickKey ? tick.tickKey + \":\" + tick.index : tick.index\n                        ) {\n                            @if (tick.labelVisible !== false) {\n                                <div\n                                    [class]=\"axisLabelClasses()\"\n                                    [monaChartLabelMeasure]=\"tick.tickKey ?? ''\"\n                                    data-mona-chart-export-role=\"axis-label\"\n                                    [attr.data-mona-chart-export-mode]=\"\n                                        resolveAxisLabelTemplate(axisScene) ? 'raster' : 'vector'\n                                    \"\n                                    [style.left.px]=\"axisLabelLeft(cart, axisScene, tick)\"\n                                    [style.top.px]=\"axisLabelTop(cart, axisScene, tick)\"\n                                    [style.max-width.px]=\"axisScene.labelMaxWidth ?? null\"\n                                    [style.transform]=\"axisLabelTransform(axisScene, tick)\"\n                                    [style.transform-origin]=\"axisLabelTransformOrigin(axisScene)\">\n                                    @if (resolveAxisLabelTemplate(axisScene); as template) {\n                                        <ng-container\n                                            [ngTemplateOutlet]=\"template.templateRef\"\n                                            [ngTemplateOutletContext]=\"{\n                                                $implicit: tick.value,\n                                                axis: axisScene.axis,\n                                                axisId: axisScene.axisId,\n                                                index: tick.index,\n                                                position: axisScene.position,\n                                                scaleType: axisScene.scaleType,\n                                                value: tick.value\n                                            }\" />\n                                    } @else {\n                                        {{ tick.formattedValue }}\n                                    }\n                                </div>\n                            }\n                        }\n                    }\n\n                    <!-- Axis Title -->\n                    @if (axisScene.title) {\n                        <div\n                            class=\"mona-chart-axis-title absolute text-xs font-medium text-muted-foreground select-none pointer-events-none whitespace-nowrap\"\n                            data-mona-chart-export-role=\"axis-title\"\n                            data-mona-chart-export-mode=\"vector\"\n                            [style.left.px]=\"axisTitleLeft(cart, axisScene)\"\n                            [style.top.px]=\"axisTitleTop(cart, axisScene)\"\n                            [style.transform]=\"\n                                axisScene.axis === 'x'\n                                    ? axisScene.position === 'top'\n                                        ? 'translate(-50%, 0)'\n                                        : 'translate(-50%, -100%)'\n                                    : axisScene.position === 'right'\n                                      ? 'translate(-50%, -50%) rotate(90deg)'\n                                      : 'translate(-50%, -50%) rotate(-90deg)'\n                            \">\n                            {{ axisScene.title }}\n                        </div>\n                    }\n                }\n            }\n        }\n\n        <!-- DOM Sector Slice Labels and Donut Center Overlay -->\n        @if (polarSectorScene(); as pol) {\n            @for (seriesScene of pol.series; track seriesScene.id) {\n                @for (slice of seriesScene.slices; track slice.sliceId) {\n                    @if (shouldShowSliceLabel(slice)) {\n                        @if (isOutsideLabel() && slice.label) {\n                            <div\n                                aria-hidden=\"true\"\n                                class=\"absolute pointer-events-none text-xs text-foreground select-none whitespace-nowrap transition-opacity duration-[var(--mona-chart-animation-duration,300ms)] ease-[var(--mona-chart-animation-easing,cubic-bezier(0,0,0.2,1))]\"\n                                [class.opacity-0]=\"isAnimating() && isStructuralAnimation()\"\n                                [attr.data-mona-chart-export-animation-suppression]=\"\n                                    isAnimating() && isStructuralAnimation() ? 'opacity' : null\n                                \"\n                                [monaChartLabelMeasure]=\"'sector:' + slice.sliceId\"\n                                data-mona-chart-export-role=\"sector-label\"\n                                [attr.data-mona-chart-export-mode]=\"\n                                    polarSeriesRegistration()?.sliceLabelTemplate?.() ? 'raster' : 'vector'\n                                \"\n                                [style.left.px]=\"slice.label.position.x\"\n                                [style.top.px]=\"slice.label.position.y\"\n                                [style.transform]=\"\n                                    slice.label.side === 'right' ? 'translate(0, -50%)' : 'translate(-100%, -50%)'\n                                \">\n                                @if (polarSeriesRegistration()?.sliceLabelTemplate?.(); as labelTemplate) {\n                                    <ng-container\n                                        [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n                                        [ngTemplateOutletContext]=\"sliceLabelContext(slice)\" />\n                                } @else {\n                                    {{ sliceLabelText(slice) }}\n                                }\n                            </div>\n                        } @else {\n                            <div\n                                aria-hidden=\"true\"\n                                class=\"absolute pointer-events-none text-xs font-semibold select-none whitespace-nowrap flex items-center justify-center transition-opacity duration-[var(--mona-chart-animation-duration,300ms)] ease-[var(--mona-chart-animation-easing,cubic-bezier(0,0,0.2,1))]\"\n                                [class.opacity-0]=\"isAnimating() && isStructuralAnimation()\"\n                                [attr.data-mona-chart-export-animation-suppression]=\"\n                                    isAnimating() && isStructuralAnimation() ? 'opacity' : null\n                                \"\n                                data-mona-chart-export-role=\"sector-label\"\n                                [attr.data-mona-chart-export-mode]=\"\n                                    polarSeriesRegistration()?.sliceLabelTemplate?.() ? 'raster' : 'vector'\n                                \"\n                                [style.left.px]=\"slice.insideLabelPoint.x\"\n                                [style.top.px]=\"slice.insideLabelPoint.y\"\n                                [style.transform]=\"'translate(-50%, -50%)'\"\n                                [style.color]=\"sliceContrastColor(slice)\">\n                                @if (polarSeriesRegistration()?.sliceLabelTemplate?.(); as labelTemplate) {\n                                    <ng-container\n                                        [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n                                        [ngTemplateOutletContext]=\"sliceLabelContext(slice)\" />\n                                } @else {\n                                    {{ sliceLabelText(slice) }}\n                                }\n                            </div>\n                        }\n                    }\n                }\n            }\n\n            @for (seriesScene of pol.series; track seriesScene.id) {\n                <!-- Donut Center Template -->\n                @if (\n                    seriesScene.type === \"donut\" &&\n                        pol.hasRenderableData &&\n                        seriesScene.slices.length > 0 &&\n                        donutSeriesRegistration()?.centerTemplate?.();\n                    as centerTemplate\n                ) {\n                    <div\n                        class=\"absolute pointer-events-none flex flex-col items-center justify-center text-center overflow-hidden\"\n                        data-mona-chart-export-role=\"donut-center\"\n                        data-mona-chart-export-mode=\"raster\"\n                        [style.left.px]=\"pol.center.x\"\n                        [style.top.px]=\"pol.center.y\"\n                        [style.transform]=\"'translate(-50%, -50%)'\"\n                        [style.max-width.px]=\"seriesScene.innerRadius * 1.6\"\n                        [style.max-height.px]=\"seriesScene.innerRadius * 1.6\">\n                        <ng-container\n                            [ngTemplateOutlet]=\"centerTemplate.templateRef\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: seriesScene.total,\n                                total: seriesScene.total,\n                                formattedTotal: seriesScene.formattedTotal,\n                                visibleSliceCount: seriesScene.slices.length,\n                                seriesId: seriesScene.id,\n                                seriesName: seriesScene.name\n                            }\" />\n                    </div>\n                }\n            }\n        }\n\n        <!-- DOM Gauge Center Overlay -->\n        @if (polarArcScene(); as arcScene) {\n            @if (gaugeScene(); as gaugeSeries) {\n                @if (gaugeSeriesRegistration()?.centerTemplate?.(); as centerTemplate) {\n                    <div\n                        class=\"absolute pointer-events-none flex flex-col items-center justify-center text-center overflow-hidden\"\n                        data-mona-chart-export-role=\"gauge-center\"\n                        data-mona-chart-export-mode=\"raster\"\n                        [style.left.px]=\"arcScene.center.x\"\n                        [style.top.px]=\"arcScene.center.y\"\n                        [style.transform]=\"'translate(-50%, -50%)'\"\n                        [style.max-width.px]=\"gaugeSeries.value.innerRadius * 1.6\"\n                        [style.max-height.px]=\"gaugeSeries.value.innerRadius * 1.6\">\n                        <ng-container\n                            [ngTemplateOutlet]=\"centerTemplate.templateRef\"\n                            [ngTemplateOutletContext]=\"gaugeCenterContext(gaugeSeries)\" />\n                    </div>\n                } @else if (gaugeSeries.showValue) {\n                    <div\n                        class=\"absolute pointer-events-none flex flex-col items-center justify-center text-center font-bold text-foreground select-none\"\n                        data-mona-chart-export-role=\"gauge-value\"\n                        data-mona-chart-export-mode=\"vector\"\n                        [style.left.px]=\"arcScene.center.x\"\n                        [style.top.px]=\"arcScene.center.y\"\n                        [style.transform]=\"'translate(-50%, -50%)'\"\n                        [style.font-size.px]=\"gaugeFontSize(gaugeSeries)\">\n                        <span>{{ gaugeSeries.value.formattedValue }}</span>\n                    </div>\n                }\n            }\n        }\n\n        <!-- DOM Radial Axis Labels (Angular Categories/Degrees and Radial Values) -->\n        @if (polarAxisScene(); as radScene) {\n            <!-- Angular Spoke Labels -->\n            @if (radScene.angularAxis?.visible && radScene.angularAxis?.labels) {\n                @for (tick of radScene.angularAxis.ticks; track tick.index) {\n                    @if (tick.visible) {\n                        <div\n                            aria-hidden=\"true\"\n                            class=\"absolute pointer-events-none text-xs text-foreground select-none whitespace-nowrap\"\n                            [monaChartLabelMeasure]=\"'angular:' + tick.tickKey\"\n                            data-mona-chart-export-role=\"polar-angular-label\"\n                            [attr.data-mona-chart-export-mode]=\"\n                                angularAxisRegistration()?.labelTemplate?.() ? 'raster' : 'vector'\n                            \"\n                            [style.left.px]=\"tick.labelPoint.x\"\n                            [style.top.px]=\"tick.labelPoint.y\"\n                            [style.transform]=\"angularLabelTransform(tick)\">\n                            @if (angularAxisRegistration()?.labelTemplate?.(); as template) {\n                                <ng-container\n                                    [ngTemplateOutlet]=\"template.templateRef\"\n                                    [ngTemplateOutletContext]=\"{\n                                        $implicit: tick.value,\n                                        axis: 'angular',\n                                        index: tick.index,\n                                        value: tick.value\n                                    }\" />\n                            } @else {\n                                {{ tick.formattedValue }}\n                            }\n                        </div>\n                    }\n                }\n            }\n\n            <!-- Radial Numeric Tick Labels -->\n            @if (radScene.radialAxis?.visible && radScene.radialAxis?.labels) {\n                @for (tick of radScene.radialAxis.ticks; track tick.index) {\n                    @if (tick.visible) {\n                        <div\n                            aria-hidden=\"true\"\n                            class=\"absolute pointer-events-none text-xs text-muted-foreground select-none whitespace-nowrap\"\n                            [monaChartLabelMeasure]=\"'radial:' + tick.tickKey\"\n                            data-mona-chart-export-role=\"polar-radial-label\"\n                            [attr.data-mona-chart-export-mode]=\"\n                                radialAxisRegistration()?.labelTemplate?.() ? 'raster' : 'vector'\n                            \"\n                            [style.left.px]=\"tick.labelPoint.x\"\n                            [style.top.px]=\"tick.labelPoint.y\"\n                            [style.transform]=\"radialLabelTransform(tick, radScene.radialAxis.labelAngle)\">\n                            @if (radialAxisRegistration()?.labelTemplate?.(); as template) {\n                                <ng-container\n                                    [ngTemplateOutlet]=\"template.templateRef\"\n                                    [ngTemplateOutletContext]=\"{\n                                        $implicit: tick.value,\n                                        axis: 'radial',\n                                        index: tick.index,\n                                        value: tick.value\n                                    }\" />\n                            } @else {\n                                {{ tick.formattedValue }}\n                            }\n                        </div>\n                    }\n                }\n            }\n        }\n\n        <!-- DOM Treemap Labels -->\n        @if (treemapScene(); as tm) {\n            @for (seriesScene of tm.series; track seriesScene.id) {\n                @for (lbl of seriesScene.labels; track lbl.nodeId) {\n                    <div\n                        aria-hidden=\"true\"\n                        class=\"absolute pointer-events-none text-xs select-none overflow-hidden text-ellipsis whitespace-nowrap px-1.5 py-0.5 flex flex-col justify-center transition-opacity duration-[var(--mona-chart-animation-duration,300ms)] ease-[var(--mona-chart-animation-easing,cubic-bezier(0,0,0.2,1))]\"\n                        [class.opacity-0]=\"isAnimating()\"\n                        [attr.data-mona-chart-export-animation-suppression]=\"isAnimating() ? 'opacity' : null\"\n                        data-mona-chart-export-role=\"treemap-label\"\n                        data-mona-chart-export-mode=\"raster\"\n                        [style.left.px]=\"lbl.bounds.x\"\n                        [style.top.px]=\"lbl.bounds.y\"\n                        [style.width.px]=\"lbl.bounds.width\"\n                        [style.height.px]=\"lbl.bounds.height\"\n                        [style.color]=\"lbl.textColor\">\n                        @if (treemapSeriesRegistration()?.labelTemplate?.(); as labelTemplate) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n                                [ngTemplateOutletContext]=\"treemapLabelContext(lbl, seriesScene)\" />\n                        } @else {\n                            <span class=\"font-medium truncate\">{{ lbl.formattedLabel }}</span>\n                            @if (lbl.showValue) {\n                                <span class=\"text-[11px] opacity-80 truncate\">{{ lbl.formattedValue }}</span>\n                            }\n                        }\n                    </div>\n                }\n            }\n        }\n\n        <!-- DOM Funnel Labels -->\n        @if (funnelScene(); as fn) {\n            @for (seriesScene of fn.series; track seriesScene.id) {\n                @for (lbl of seriesScene.labels; track lbl.stageId) {\n                    <div\n                        aria-hidden=\"true\"\n                        class=\"absolute pointer-events-none text-xs select-none overflow-hidden text-ellipsis whitespace-nowrap flex flex-col items-center justify-center transition-opacity duration-[var(--mona-chart-animation-duration,300ms)] ease-[var(--mona-chart-animation-easing,cubic-bezier(0,0,0.2,1))]\"\n                        [class.opacity-0]=\"isAnimating()\"\n                        [attr.data-mona-chart-export-animation-suppression]=\"isAnimating() ? 'opacity' : null\"\n                        data-mona-chart-export-role=\"funnel-label\"\n                        data-mona-chart-export-mode=\"raster\"\n                        [style.left.px]=\"lbl.bounds.x\"\n                        [style.top.px]=\"lbl.bounds.y\"\n                        [style.width.px]=\"lbl.bounds.width\"\n                        [style.height.px]=\"lbl.bounds.height\"\n                        [style.color]=\"lbl.textColor\">\n                        @if (funnelSeriesRegistration()?.labelTemplate?.(); as labelTemplate) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n                                [ngTemplateOutletContext]=\"funnelLabelContext(lbl, seriesScene)\" />\n                        } @else {\n                            <span class=\"font-medium truncate\">{{ lbl.text }}</span>\n                        }\n                    </div>\n                }\n            }\n        }\n\n        <!-- DOM Waterfall Labels -->\n        @if (waterfallScene(); as wf) {\n            @for (seriesScene of wf.series; track seriesScene.id) {\n                @for (lbl of seriesScene.labels; track lbl.itemId) {\n                    <div\n                        aria-hidden=\"true\"\n                        class=\"absolute pointer-events-none text-xs select-none overflow-hidden text-ellipsis whitespace-nowrap flex items-center justify-center transition-opacity duration-[var(--mona-chart-animation-duration,300ms)] ease-[var(--mona-chart-animation-easing,cubic-bezier(0,0,0.2,1))]\"\n                        [class.opacity-0]=\"isAnimating()\"\n                        [attr.data-mona-chart-export-animation-suppression]=\"isAnimating() ? 'opacity' : null\"\n                        data-mona-chart-export-role=\"waterfall-label\"\n                        data-mona-chart-export-mode=\"raster\"\n                        [style.left.px]=\"lbl.bounds.x\"\n                        [style.top.px]=\"lbl.bounds.y\"\n                        [style.width.px]=\"lbl.bounds.width\"\n                        [style.height.px]=\"lbl.bounds.height\"\n                        [style.color]=\"lbl.textColor\">\n                        @if (waterfallSeriesRegistration()?.labelTemplate?.(); as labelTemplate) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n                                [ngTemplateOutletContext]=\"waterfallLabelContext(lbl, seriesScene)\" />\n                        } @else {\n                            <span class=\"font-medium truncate\">{{ lbl.text }}</span>\n                        }\n                    </div>\n                }\n            }\n        }\n\n        <!-- DOM Cartesian Overlays (Reference Lines, Reference Bands, Point Annotations) -->\n        @if (cartesianOverlayScene(); as overlays) {\n            <!-- Reference Lines -->\n            @for (line of overlays.referenceLines; track line.id) {\n                @if (line.label) {\n                    <div\n                        aria-hidden=\"true\"\n                        [class]=\"referenceLabelClasses() + (line.label.labelClass ? ' ' + line.label.labelClass : '')\"\n                        [class.hidden]=\"!line.label.formattedText && !resolveReferenceLineTemplate(line.id)\"\n                        [monaChartOverlayLabelMeasure]=\"'overlay:line:' + line.id\"\n                        data-mona-chart-export-role=\"reference-label\"\n                        [attr.data-mona-chart-export-mode]=\"resolveReferenceLineTemplate(line.id) ? 'raster' : 'vector'\"\n                        [style.left.px]=\"referenceLineLabelLeft(line)\"\n                        [style.top.px]=\"referenceLineLabelTop(line)\"\n                        [style.transform]=\"referenceLineLabelTransform(line)\">\n                        @if (resolveReferenceLineTemplate(line.id); as template) {\n                            @if (resolveReferenceLineRegistration(line.id); as reg) {\n                                <ng-container\n                                    [ngTemplateOutlet]=\"template.templateRef\"\n                                    [ngTemplateOutletContext]=\"{\n                                        $implicit: reg.value(),\n                                        axis: line.axis,\n                                        axisId: line.axisId,\n                                        coordinate: line.coordinate,\n                                        formattedValue: line.formattedValue,\n                                        kind: 'line',\n                                        value: reg.value()\n                                    }\" />\n                            }\n                        } @else {\n                            {{ line.label.formattedText }}\n                        }\n                    </div>\n                }\n            }\n\n            <!-- Reference Bands -->\n            @for (band of overlays.referenceBands; track band.id) {\n                @if (band.label) {\n                    <div\n                        aria-hidden=\"true\"\n                        [class]=\"referenceLabelClasses() + (band.label.labelClass ? ' ' + band.label.labelClass : '')\"\n                        [class.hidden]=\"!band.label.formattedText && !resolveReferenceBandTemplate(band.id)\"\n                        [monaChartOverlayLabelMeasure]=\"'overlay:band:' + band.id\"\n                        data-mona-chart-export-role=\"reference-label\"\n                        [attr.data-mona-chart-export-mode]=\"resolveReferenceBandTemplate(band.id) ? 'raster' : 'vector'\"\n                        [style.left.px]=\"referenceBandLabelLeft(band)\"\n                        [style.top.px]=\"referenceBandLabelTop(band)\"\n                        [style.transform]=\"referenceBandLabelTransform(band)\">\n                        @if (resolveReferenceBandTemplate(band.id); as template) {\n                            @if (resolveReferenceBandRegistration(band.id); as reg) {\n                                <ng-container\n                                    [ngTemplateOutlet]=\"template.templateRef\"\n                                    [ngTemplateOutletContext]=\"{\n                                        $implicit: { from: reg.from(), to: reg.to() },\n                                        axis: band.axis,\n                                        axisId: band.axisId,\n                                        bounds: band.bounds,\n                                        formattedFrom: band.formattedFrom,\n                                        formattedTo: band.formattedTo,\n                                        from: reg.from(),\n                                        kind: 'band',\n                                        to: reg.to()\n                                    }\" />\n                            }\n                        } @else {\n                            {{ band.label.formattedText }}\n                        }\n                    </div>\n                }\n            }\n\n            <!-- Point Annotations -->\n            @for (ann of overlays.annotations; track ann.id) {\n                @if (ann.label) {\n                    <div\n                        aria-hidden=\"true\"\n                        [class]=\"annotationLabelClasses() + (ann.label.labelClass ? ' ' + ann.label.labelClass : '')\"\n                        [class.hidden]=\"!ann.label.formattedText && !resolveAnnotationTemplate(ann.id)\"\n                        [monaChartOverlayLabelMeasure]=\"'overlay:ann:' + ann.id\"\n                        data-mona-chart-export-role=\"annotation-label\"\n                        [attr.data-mona-chart-export-mode]=\"resolveAnnotationTemplate(ann.id) ? 'raster' : 'vector'\"\n                        [style.left.px]=\"annotationLabelLeft(ann)\"\n                        [style.top.px]=\"annotationLabelTop(ann)\"\n                        [style.transform]=\"annotationLabelTransform(ann)\">\n                        @if (resolveAnnotationTemplate(ann.id); as template) {\n                            @if (resolveAnnotationRegistration(ann.id); as reg) {\n                                <ng-container\n                                    [ngTemplateOutlet]=\"template.templateRef\"\n                                    [ngTemplateOutletContext]=\"{\n                                        $implicit: ann.data,\n                                        data: ann.data,\n                                        formattedX: ann.formattedX,\n                                        formattedY: ann.formattedY,\n                                        point: ann.point,\n                                        x: reg.x(),\n                                        xAxisId: ann.xAxisId,\n                                        y: reg.y(),\n                                        yAxisId: ann.yAxisId\n                                    }\" />\n                            }\n                        } @else {\n                            {{ ann.label.formattedText }}\n                        }\n                    </div>\n                }\n            }\n        }\n\n        <!-- DOM Cartesian Data Labels (Template Layer) -->\n        @if (cartesianDataLabelScene(); as labelScene) {\n            @for (label of labelScene.templateLabels; track label.seriesId + \":\" + label.markId) {\n                <div\n                    aria-hidden=\"true\"\n                    class=\"absolute pointer-events-none select-none whitespace-nowrap transition-opacity duration-[var(--mona-chart-animation-duration,300ms)] ease-[var(--mona-chart-animation-easing,cubic-bezier(0,0,0.2,1))]\"\n                    [class.opacity-0]=\"isAnimating()\"\n                    [attr.data-mona-chart-export-animation-suppression]=\"isAnimating() ? 'opacity' : null\"\n                    [monaChartDataLabelMeasure]=\"label.seriesId + ':' + label.markId\"\n                    data-mona-chart-export-role=\"data-label-template\"\n                    data-mona-chart-export-mode=\"raster\"\n                    [style.left.px]=\"label.bounds.x\"\n                    [style.top.px]=\"label.bounds.y\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"label.template.templateRef\"\n                        [ngTemplateOutletContext]=\"label.context\" />\n                </div>\n            }\n        }\n\n        <!-- Crosshair DOM Axis Labels -->\n        @if (crosshairState(); as chState) {\n            @if (cartesianXYScene(); as cart) {\n                @if (resolveCrosshairRegistration(); as chReg) {\n                    @if (chReg.enabled() !== false) {\n                        @if (chState.x && chReg.showAxisLabels() !== false && chReg.showXLabel() !== false) {\n                            <div\n                                aria-hidden=\"true\"\n                                [class]=\"crosshairLabelClasses()\"\n                                [monaChartOverlayLabelMeasure]=\"'crosshair:x'\"\n                                data-mona-chart-export-role=\"crosshair-label\"\n                                [attr.data-mona-chart-export-mode]=\"chReg.template?.() ? 'raster' : 'vector'\"\n                                [style.left.px]=\"crosshairXLabelLeft(cart, chState)\"\n                                [style.top.px]=\"crosshairXLabelTop(cart, chState)\"\n                                [style.transform]=\"crosshairXLabelTransform(cart, chState)\">\n                                @if (chReg.template?.(); as template) {\n                                    <ng-container\n                                        [ngTemplateOutlet]=\"template.templateRef\"\n                                        [ngTemplateOutletContext]=\"{\n                                            $implicit: chState.x.value,\n                                            axis: 'x',\n                                            axisId: chState.x.axisId,\n                                            coordinate: chState.x.coordinate,\n                                            formattedValue: chState.x.formattedValue,\n                                            snapped: chState.snapped,\n                                            source: chState.source,\n                                            value: chState.x.value\n                                        }\" />\n                                } @else {\n                                    {{ chState.x.formattedValue }}\n                                }\n                            </div>\n                        }\n\n                        @if (chState.y && chReg.showAxisLabels() !== false && chReg.showYLabel() !== false) {\n                            <div\n                                aria-hidden=\"true\"\n                                [class]=\"crosshairLabelClasses()\"\n                                [monaChartOverlayLabelMeasure]=\"'crosshair:y'\"\n                                data-mona-chart-export-role=\"crosshair-label\"\n                                [attr.data-mona-chart-export-mode]=\"chReg.template?.() ? 'raster' : 'vector'\"\n                                [style.left.px]=\"crosshairYLabelLeft(cart, chState)\"\n                                [style.top.px]=\"crosshairYLabelTop(cart, chState)\"\n                                [style.transform]=\"crosshairYLabelTransform(cart, chState)\">\n                                @if (chReg.template?.(); as template) {\n                                    <ng-container\n                                        [ngTemplateOutlet]=\"template.templateRef\"\n                                        [ngTemplateOutletContext]=\"{\n                                            $implicit: chState.y.value,\n                                            axis: 'y',\n                                            axisId: chState.y.axisId,\n                                            coordinate: chState.y.coordinate,\n                                            formattedValue: chState.y.formattedValue,\n                                            snapped: chState.snapped,\n                                            source: chState.source,\n                                            value: chState.y.value\n                                        }\" />\n                                } @else {\n                                    {{ chState.y.formattedValue }}\n                                }\n                            </div>\n                        }\n                    }\n                }\n            }\n        }\n\n        <!-- Tooltip overlay in plot-local coordinates -->\n        <ng-content select=\"mona-chart-tooltip\"></ng-content>\n\n        <!-- No Data Placeholder -->\n        @if (hasNoData()) {\n            <div\n                [class]=\"noDataClasses()\"\n                data-mona-chart-export-role=\"no-data\"\n                [attr.data-mona-chart-export-mode]=\"noDataTemplate() ? 'raster' : 'vector'\">\n                @if (noDataTemplate(); as template) {\n                    <ng-container [ngTemplateOutlet]=\"template.templateRef\" />\n                } @else {\n                    <span>No data available</span>\n                }\n            </div>\n        }\n\n        <!-- Off-screen Accessible Live Region for Keyboard/Screen-reader Exploration -->\n        <div class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n            {{ activeAccessibilityText() }}\n        </div>\n    </div>\n\n    <!-- Projected Legend Outside Plot Container -->\n    <ng-content select=\"mona-chart-legend\"></ng-content>\n\n    <!-- Other Projected Content (Series, Axes, Templates) -->\n    <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ChartLabelMeasureDirective, selector: "[monaChartLabelMeasure]", inputs: ["monaChartLabelMeasure"] }, { kind: "directive", type: ChartOverlayLabelMeasureDirective, selector: "[monaChartOverlayLabelMeasure]", inputs: ["monaChartOverlayLabelMeasure"] }, { kind: "directive", type: ChartDataLabelMeasureDirective, selector: "[monaChartDataLabelMeasure]", inputs: ["monaChartDataLabelMeasure"] }] }); }
+        ], queries: [{ propertyName: "noDataTemplate", first: true, predicate: ChartNoDataTemplateDirective, descendants: true, isSignal: true }, { propertyName: "subtitleTemplate", first: true, predicate: ChartSubtitleTemplateDirective, descendants: true, isSignal: true }, { propertyName: "titleTemplate", first: true, predicate: ChartTitleTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "canvasElement", first: true, predicate: ["canvas"], descendants: true, isSignal: true }, { propertyName: "plotSurfaceElement", first: true, predicate: ["plotSurface"], descendants: true, isSignal: true }, { propertyName: "svgElement", first: true, predicate: ["svgSurface"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasHeader()) {\n    <div [class]=\"headerClasses()\" [style.text-align]=\"titleAlign()\">\n        @if (titleTemplate(); as tpl) {\n            <div data-mona-chart-export-role=\"title-template\">\n                <ng-container\n                    [ngTemplateOutlet]=\"tpl.templateRef\"\n                    [ngTemplateOutletContext]=\"{ $implicit: title(), title: title() }\" />\n            </div>\n        } @else if (title()) {\n            <div [class]=\"titleClasses()\" data-mona-chart-export-role=\"title\">{{ title() }}</div>\n        }\n        @if (subtitleTemplate(); as subTpl) {\n            <div data-mona-chart-export-role=\"subtitle-template\">\n                <ng-container\n                    [ngTemplateOutlet]=\"subTpl.templateRef\"\n                    [ngTemplateOutletContext]=\"{ $implicit: subtitle(), subtitle: subtitle() }\" />\n            </div>\n        } @else if (subtitle()) {\n            <div [class]=\"subtitleClasses()\" data-mona-chart-export-role=\"subtitle\">{{ subtitle() }}</div>\n        }\n    </div>\n}\n<div [class]=\"layoutClasses()\">\n    <div\n        #plotSurface\n        class=\"relative flex-1 min-h-0 min-w-0 w-full h-full overflow-hidden\"\n        [style.order]=\"plotOrder()\"\n        [style.touch-action]=\"touchActionStyle()\"\n        [style.cursor]=\"viewportCursor() ?? 'default'\"\n        (pointerdown)=\"onPointerDown($event)\"\n        (pointermove)=\"onPointerMove($event)\"\n        (pointerup)=\"onPointerUp($event)\"\n        (pointercancel)=\"onPointerCancel($event)\"\n        (lostpointercapture)=\"onLostPointerCapture($event)\"\n        (pointerleave)=\"onPointerLeave($event)\"\n        (wheel)=\"onWheel($event)\"\n        (click)=\"onCanvasClick($event)\">\n        @if (renderer() === \"canvas\") {\n            <canvas #canvas class=\"absolute inset-0 block h-full w-full pointer-events-none\"></canvas>\n        } @else {\n            <svg\n                #svgSurface\n                aria-hidden=\"true\"\n                focusable=\"false\"\n                class=\"absolute inset-0 block h-full w-full pointer-events-none\"\n                xmlns=\"http://www.w3.org/2000/svg\"></svg>\n        }\n\n        <!-- DOM Cartesian Axis Labels & Titles -->\n        @if (cartesianScene(); as cart) {\n            @for (axisScene of cart.axes; track axisScene.axis + \":\" + (axisScene.axisId ?? \"\")) {\n                @if (axisScene.visible) {\n                    @if (axisScene.labels !== false) {\n                        @for (\n                            tick of axisScene.ticks;\n                            track tick.tickKey ? tick.tickKey + \":\" + tick.index : tick.index\n                        ) {\n                            @if (tick.labelVisible !== false) {\n                                <div\n                                    [class]=\"axisLabelClasses()\"\n                                    [monaChartLabelMeasure]=\"tick.tickKey ?? ''\"\n                                    data-mona-chart-export-role=\"axis-label\"\n                                    [attr.data-mona-chart-export-mode]=\"\n                                        resolveAxisLabelTemplate(axisScene) ? 'raster' : 'vector'\n                                    \"\n                                    [style.left.px]=\"axisLabelLeft(cart, axisScene, tick)\"\n                                    [style.top.px]=\"axisLabelTop(cart, axisScene, tick)\"\n                                    [style.max-width.px]=\"axisScene.labelMaxWidth ?? null\"\n                                    [style.transform]=\"axisLabelTransform(axisScene, tick)\"\n                                    [style.transform-origin]=\"axisLabelTransformOrigin(axisScene)\">\n                                    @if (resolveAxisLabelTemplate(axisScene); as template) {\n                                        <ng-container\n                                            [ngTemplateOutlet]=\"template.templateRef\"\n                                            [ngTemplateOutletContext]=\"{\n                                                $implicit: tick.value,\n                                                axis: axisScene.axis,\n                                                axisId: axisScene.axisId,\n                                                index: tick.index,\n                                                position: axisScene.position,\n                                                scaleType: axisScene.scaleType,\n                                                value: tick.value\n                                            }\" />\n                                    } @else {\n                                        {{ tick.formattedValue }}\n                                    }\n                                </div>\n                            }\n                        }\n                    }\n\n                    <!-- Axis Title -->\n                    @if (axisScene.title) {\n                        <div\n                            class=\"mona-chart-axis-title absolute text-xs font-medium text-muted-foreground select-none pointer-events-none whitespace-nowrap\"\n                            data-mona-chart-export-role=\"axis-title\"\n                            data-mona-chart-export-mode=\"vector\"\n                            [style.left.px]=\"axisTitleLeft(cart, axisScene)\"\n                            [style.top.px]=\"axisTitleTop(cart, axisScene)\"\n                            [style.transform]=\"\n                                axisScene.axis === 'x'\n                                    ? axisScene.position === 'top'\n                                        ? 'translate(-50%, 0)'\n                                        : 'translate(-50%, -100%)'\n                                    : axisScene.position === 'right'\n                                      ? 'translate(-50%, -50%) rotate(90deg)'\n                                      : 'translate(-50%, -50%) rotate(-90deg)'\n                            \">\n                            {{ axisScene.title }}\n                        </div>\n                    }\n                }\n            }\n        }\n\n        <!-- DOM Sector Slice Labels and Donut Center Overlay -->\n        @if (polarSectorScene(); as pol) {\n            @for (seriesScene of pol.series; track seriesScene.id) {\n                @for (slice of seriesScene.slices; track slice.sliceId) {\n                    @if (shouldShowSliceLabel(slice)) {\n                        @if (isOutsideLabel() && slice.label) {\n                            <div\n                                aria-hidden=\"true\"\n                                class=\"absolute pointer-events-none text-xs text-foreground select-none whitespace-nowrap transition-opacity duration-[var(--mona-chart-animation-duration,300ms)] ease-[var(--mona-chart-animation-easing,cubic-bezier(0,0,0.2,1))]\"\n                                [class.opacity-0]=\"isAnimating() && isStructuralAnimation()\"\n                                [attr.data-mona-chart-export-animation-suppression]=\"\n                                    isAnimating() && isStructuralAnimation() ? 'opacity' : null\n                                \"\n                                [monaChartLabelMeasure]=\"'sector:' + slice.sliceId\"\n                                data-mona-chart-export-role=\"sector-label\"\n                                [attr.data-mona-chart-export-mode]=\"\n                                    polarSeriesRegistration()?.sliceLabelTemplate?.() ? 'raster' : 'vector'\n                                \"\n                                [style.left.px]=\"slice.label.position.x\"\n                                [style.top.px]=\"slice.label.position.y\"\n                                [style.transform]=\"\n                                    slice.label.side === 'right' ? 'translate(0, -50%)' : 'translate(-100%, -50%)'\n                                \">\n                                @if (polarSeriesRegistration()?.sliceLabelTemplate?.(); as labelTemplate) {\n                                    <ng-container\n                                        [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n                                        [ngTemplateOutletContext]=\"sliceLabelContext(slice)\" />\n                                } @else {\n                                    {{ sliceLabelText(slice) }}\n                                }\n                            </div>\n                        } @else {\n                            <div\n                                aria-hidden=\"true\"\n                                class=\"absolute pointer-events-none text-xs font-semibold select-none whitespace-nowrap flex items-center justify-center transition-opacity duration-[var(--mona-chart-animation-duration,300ms)] ease-[var(--mona-chart-animation-easing,cubic-bezier(0,0,0.2,1))]\"\n                                [class.opacity-0]=\"isAnimating() && isStructuralAnimation()\"\n                                [attr.data-mona-chart-export-animation-suppression]=\"\n                                    isAnimating() && isStructuralAnimation() ? 'opacity' : null\n                                \"\n                                data-mona-chart-export-role=\"sector-label\"\n                                [attr.data-mona-chart-export-mode]=\"\n                                    polarSeriesRegistration()?.sliceLabelTemplate?.() ? 'raster' : 'vector'\n                                \"\n                                [style.left.px]=\"slice.insideLabelPoint.x\"\n                                [style.top.px]=\"slice.insideLabelPoint.y\"\n                                [style.transform]=\"'translate(-50%, -50%)'\"\n                                [style.color]=\"sliceContrastColor(slice)\">\n                                @if (polarSeriesRegistration()?.sliceLabelTemplate?.(); as labelTemplate) {\n                                    <ng-container\n                                        [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n                                        [ngTemplateOutletContext]=\"sliceLabelContext(slice)\" />\n                                } @else {\n                                    {{ sliceLabelText(slice) }}\n                                }\n                            </div>\n                        }\n                    }\n                }\n            }\n\n            @for (seriesScene of pol.series; track seriesScene.id) {\n                <!-- Donut Center Template -->\n                @if (\n                    seriesScene.type === \"donut\" &&\n                        pol.hasRenderableData &&\n                        seriesScene.slices.length > 0 &&\n                        donutSeriesRegistration()?.centerTemplate?.();\n                    as centerTemplate\n                ) {\n                    <div\n                        class=\"absolute pointer-events-none flex flex-col items-center justify-center text-center overflow-hidden\"\n                        data-mona-chart-export-role=\"donut-center\"\n                        data-mona-chart-export-mode=\"raster\"\n                        [style.left.px]=\"pol.center.x\"\n                        [style.top.px]=\"pol.center.y\"\n                        [style.transform]=\"'translate(-50%, -50%)'\"\n                        [style.max-width.px]=\"seriesScene.innerRadius * 1.6\"\n                        [style.max-height.px]=\"seriesScene.innerRadius * 1.6\">\n                        <ng-container\n                            [ngTemplateOutlet]=\"centerTemplate.templateRef\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: seriesScene.total,\n                                total: seriesScene.total,\n                                formattedTotal: seriesScene.formattedTotal,\n                                visibleSliceCount: seriesScene.slices.length,\n                                seriesId: seriesScene.id,\n                                seriesName: seriesScene.name\n                            }\" />\n                    </div>\n                }\n            }\n        }\n\n        <!-- DOM Gauge Center Overlay -->\n        @if (polarArcScene(); as arcScene) {\n            @if (gaugeScene(); as gaugeSeries) {\n                @if (gaugeSeriesRegistration()?.centerTemplate?.(); as centerTemplate) {\n                    <div\n                        class=\"absolute pointer-events-none flex flex-col items-center justify-center text-center overflow-hidden\"\n                        data-mona-chart-export-role=\"gauge-center\"\n                        data-mona-chart-export-mode=\"raster\"\n                        [style.left.px]=\"arcScene.center.x\"\n                        [style.top.px]=\"arcScene.center.y\"\n                        [style.transform]=\"'translate(-50%, -50%)'\"\n                        [style.max-width.px]=\"gaugeSeries.value.innerRadius * 1.6\"\n                        [style.max-height.px]=\"gaugeSeries.value.innerRadius * 1.6\">\n                        <ng-container\n                            [ngTemplateOutlet]=\"centerTemplate.templateRef\"\n                            [ngTemplateOutletContext]=\"gaugeCenterContext(gaugeSeries)\" />\n                    </div>\n                } @else if (gaugeSeries.showValue) {\n                    <div\n                        class=\"absolute pointer-events-none flex flex-col items-center justify-center text-center font-bold text-foreground select-none\"\n                        data-mona-chart-export-role=\"gauge-value\"\n                        data-mona-chart-export-mode=\"vector\"\n                        [style.left.px]=\"arcScene.center.x\"\n                        [style.top.px]=\"arcScene.center.y\"\n                        [style.transform]=\"'translate(-50%, -50%)'\"\n                        [style.font-size.px]=\"gaugeFontSize(gaugeSeries)\">\n                        <span>{{ gaugeSeries.value.formattedValue }}</span>\n                    </div>\n                }\n            }\n        }\n\n        <!-- DOM Radial Axis Labels (Angular Categories/Degrees and Radial Values) -->\n        @if (polarAxisScene(); as radScene) {\n            <!-- Angular Spoke Labels -->\n            @if (radScene.angularAxis?.visible && radScene.angularAxis?.labels) {\n                @for (tick of radScene.angularAxis.ticks; track tick.index) {\n                    @if (tick.visible) {\n                        <div\n                            aria-hidden=\"true\"\n                            class=\"absolute pointer-events-none text-xs text-foreground select-none whitespace-nowrap\"\n                            [monaChartLabelMeasure]=\"'angular:' + tick.tickKey\"\n                            data-mona-chart-export-role=\"polar-angular-label\"\n                            [attr.data-mona-chart-export-mode]=\"\n                                angularAxisRegistration()?.labelTemplate?.() ? 'raster' : 'vector'\n                            \"\n                            [style.left.px]=\"tick.labelPoint.x\"\n                            [style.top.px]=\"tick.labelPoint.y\"\n                            [style.transform]=\"angularLabelTransform(tick)\">\n                            @if (angularAxisRegistration()?.labelTemplate?.(); as template) {\n                                <ng-container\n                                    [ngTemplateOutlet]=\"template.templateRef\"\n                                    [ngTemplateOutletContext]=\"{\n                                        $implicit: tick.value,\n                                        axis: 'angular',\n                                        index: tick.index,\n                                        value: tick.value\n                                    }\" />\n                            } @else {\n                                {{ tick.formattedValue }}\n                            }\n                        </div>\n                    }\n                }\n            }\n\n            <!-- Radial Numeric Tick Labels -->\n            @if (radScene.radialAxis?.visible && radScene.radialAxis?.labels) {\n                @for (tick of radScene.radialAxis.ticks; track tick.index) {\n                    @if (tick.visible) {\n                        <div\n                            aria-hidden=\"true\"\n                            class=\"absolute pointer-events-none text-xs text-muted-foreground select-none whitespace-nowrap\"\n                            [monaChartLabelMeasure]=\"'radial:' + tick.tickKey\"\n                            data-mona-chart-export-role=\"polar-radial-label\"\n                            [attr.data-mona-chart-export-mode]=\"\n                                radialAxisRegistration()?.labelTemplate?.() ? 'raster' : 'vector'\n                            \"\n                            [style.left.px]=\"tick.labelPoint.x\"\n                            [style.top.px]=\"tick.labelPoint.y\"\n                            [style.transform]=\"radialLabelTransform(tick, radScene.radialAxis.labelAngle)\">\n                            @if (radialAxisRegistration()?.labelTemplate?.(); as template) {\n                                <ng-container\n                                    [ngTemplateOutlet]=\"template.templateRef\"\n                                    [ngTemplateOutletContext]=\"{\n                                        $implicit: tick.value,\n                                        axis: 'radial',\n                                        index: tick.index,\n                                        value: tick.value\n                                    }\" />\n                            } @else {\n                                {{ tick.formattedValue }}\n                            }\n                        </div>\n                    }\n                }\n            }\n        }\n\n        <!-- DOM Treemap Labels -->\n        @if (treemapScene(); as tm) {\n            @for (seriesScene of tm.series; track seriesScene.id) {\n                @for (lbl of seriesScene.labels; track lbl.nodeId) {\n                    <div\n                        aria-hidden=\"true\"\n                        class=\"absolute pointer-events-none text-xs select-none overflow-hidden text-ellipsis whitespace-nowrap px-1.5 py-0.5 flex flex-col justify-center transition-opacity duration-[var(--mona-chart-animation-duration,300ms)] ease-[var(--mona-chart-animation-easing,cubic-bezier(0,0,0.2,1))]\"\n                        [class.opacity-0]=\"isAnimating()\"\n                        [attr.data-mona-chart-export-animation-suppression]=\"isAnimating() ? 'opacity' : null\"\n                        data-mona-chart-export-role=\"treemap-label\"\n                        data-mona-chart-export-mode=\"raster\"\n                        [style.left.px]=\"lbl.bounds.x\"\n                        [style.top.px]=\"lbl.bounds.y\"\n                        [style.width.px]=\"lbl.bounds.width\"\n                        [style.height.px]=\"lbl.bounds.height\"\n                        [style.color]=\"lbl.textColor\">\n                        @if (treemapSeriesRegistration()?.labelTemplate?.(); as labelTemplate) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n                                [ngTemplateOutletContext]=\"treemapLabelContext(lbl, seriesScene)\" />\n                        } @else {\n                            <span class=\"font-medium truncate\">{{ lbl.formattedLabel }}</span>\n                            @if (lbl.showValue) {\n                                <span class=\"text-[11px] opacity-80 truncate\">{{ lbl.formattedValue }}</span>\n                            }\n                        }\n                    </div>\n                }\n            }\n        }\n\n        <!-- DOM Funnel Labels -->\n        @if (funnelScene(); as fn) {\n            @for (seriesScene of fn.series; track seriesScene.id) {\n                @for (lbl of seriesScene.labels; track lbl.stageId) {\n                    <div\n                        aria-hidden=\"true\"\n                        class=\"absolute pointer-events-none text-xs select-none overflow-hidden text-ellipsis whitespace-nowrap flex flex-col items-center justify-center transition-opacity duration-[var(--mona-chart-animation-duration,300ms)] ease-[var(--mona-chart-animation-easing,cubic-bezier(0,0,0.2,1))]\"\n                        [class.opacity-0]=\"isAnimating()\"\n                        [attr.data-mona-chart-export-animation-suppression]=\"isAnimating() ? 'opacity' : null\"\n                        data-mona-chart-export-role=\"funnel-label\"\n                        data-mona-chart-export-mode=\"raster\"\n                        [style.left.px]=\"lbl.bounds.x\"\n                        [style.top.px]=\"lbl.bounds.y\"\n                        [style.width.px]=\"lbl.bounds.width\"\n                        [style.height.px]=\"lbl.bounds.height\"\n                        [style.color]=\"lbl.textColor\">\n                        @if (funnelSeriesRegistration()?.labelTemplate?.(); as labelTemplate) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n                                [ngTemplateOutletContext]=\"funnelLabelContext(lbl, seriesScene)\" />\n                        } @else {\n                            <span class=\"font-medium truncate\">{{ lbl.text }}</span>\n                        }\n                    </div>\n                }\n            }\n        }\n\n        <!-- DOM Waterfall Labels -->\n        @if (waterfallScene(); as wf) {\n            @for (seriesScene of wf.series; track seriesScene.id) {\n                @for (lbl of seriesScene.labels; track lbl.itemId) {\n                    <div\n                        aria-hidden=\"true\"\n                        class=\"absolute pointer-events-none text-xs select-none overflow-hidden text-ellipsis whitespace-nowrap flex items-center justify-center transition-opacity duration-[var(--mona-chart-animation-duration,300ms)] ease-[var(--mona-chart-animation-easing,cubic-bezier(0,0,0.2,1))]\"\n                        [class.opacity-0]=\"isAnimating()\"\n                        [attr.data-mona-chart-export-animation-suppression]=\"isAnimating() ? 'opacity' : null\"\n                        data-mona-chart-export-role=\"waterfall-label\"\n                        data-mona-chart-export-mode=\"raster\"\n                        [style.left.px]=\"lbl.bounds.x\"\n                        [style.top.px]=\"lbl.bounds.y\"\n                        [style.width.px]=\"lbl.bounds.width\"\n                        [style.height.px]=\"lbl.bounds.height\"\n                        [style.color]=\"lbl.textColor\">\n                        @if (waterfallSeriesRegistration()?.labelTemplate?.(); as labelTemplate) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n                                [ngTemplateOutletContext]=\"waterfallLabelContext(lbl, seriesScene)\" />\n                        } @else {\n                            <span class=\"font-medium truncate\">{{ lbl.text }}</span>\n                        }\n                    </div>\n                }\n            }\n        }\n\n        <!-- DOM Cartesian Overlays (Reference Lines, Reference Bands, Point Annotations) -->\n        @if (cartesianOverlayScene(); as overlays) {\n            <!-- Reference Lines -->\n            @for (line of overlays.referenceLines; track line.id) {\n                @if (line.label) {\n                    <div\n                        aria-hidden=\"true\"\n                        [class]=\"referenceLabelClasses() + (line.label.labelClass ? ' ' + line.label.labelClass : '')\"\n                        [class.hidden]=\"!line.label.formattedText && !resolveReferenceLineTemplate(line.id)\"\n                        [monaChartOverlayLabelMeasure]=\"'overlay:line:' + line.id\"\n                        data-mona-chart-export-role=\"reference-label\"\n                        [attr.data-mona-chart-export-mode]=\"resolveReferenceLineTemplate(line.id) ? 'raster' : 'vector'\"\n                        [style.left.px]=\"referenceLineLabelLeft(line)\"\n                        [style.top.px]=\"referenceLineLabelTop(line)\"\n                        [style.transform]=\"referenceLineLabelTransform(line)\">\n                        @if (resolveReferenceLineTemplate(line.id); as template) {\n                            @if (resolveReferenceLineRegistration(line.id); as reg) {\n                                <ng-container\n                                    [ngTemplateOutlet]=\"template.templateRef\"\n                                    [ngTemplateOutletContext]=\"{\n                                        $implicit: reg.value(),\n                                        axis: line.axis,\n                                        axisId: line.axisId,\n                                        coordinate: line.coordinate,\n                                        formattedValue: line.formattedValue,\n                                        kind: 'line',\n                                        value: reg.value()\n                                    }\" />\n                            }\n                        } @else {\n                            {{ line.label.formattedText }}\n                        }\n                    </div>\n                }\n            }\n\n            <!-- Reference Bands -->\n            @for (band of overlays.referenceBands; track band.id) {\n                @if (band.label) {\n                    <div\n                        aria-hidden=\"true\"\n                        [class]=\"referenceLabelClasses() + (band.label.labelClass ? ' ' + band.label.labelClass : '')\"\n                        [class.hidden]=\"!band.label.formattedText && !resolveReferenceBandTemplate(band.id)\"\n                        [monaChartOverlayLabelMeasure]=\"'overlay:band:' + band.id\"\n                        data-mona-chart-export-role=\"reference-label\"\n                        [attr.data-mona-chart-export-mode]=\"resolveReferenceBandTemplate(band.id) ? 'raster' : 'vector'\"\n                        [style.left.px]=\"referenceBandLabelLeft(band)\"\n                        [style.top.px]=\"referenceBandLabelTop(band)\"\n                        [style.transform]=\"referenceBandLabelTransform(band)\">\n                        @if (resolveReferenceBandTemplate(band.id); as template) {\n                            @if (resolveReferenceBandRegistration(band.id); as reg) {\n                                <ng-container\n                                    [ngTemplateOutlet]=\"template.templateRef\"\n                                    [ngTemplateOutletContext]=\"{\n                                        $implicit: { from: reg.from(), to: reg.to() },\n                                        axis: band.axis,\n                                        axisId: band.axisId,\n                                        bounds: band.bounds,\n                                        formattedFrom: band.formattedFrom,\n                                        formattedTo: band.formattedTo,\n                                        from: reg.from(),\n                                        kind: 'band',\n                                        to: reg.to()\n                                    }\" />\n                            }\n                        } @else {\n                            {{ band.label.formattedText }}\n                        }\n                    </div>\n                }\n            }\n\n            <!-- Point Annotations -->\n            @for (ann of overlays.annotations; track ann.id) {\n                @if (ann.label) {\n                    <div\n                        aria-hidden=\"true\"\n                        [class]=\"annotationLabelClasses() + (ann.label.labelClass ? ' ' + ann.label.labelClass : '')\"\n                        [class.hidden]=\"!ann.label.formattedText && !resolveAnnotationTemplate(ann.id)\"\n                        [monaChartOverlayLabelMeasure]=\"'overlay:ann:' + ann.id\"\n                        data-mona-chart-export-role=\"annotation-label\"\n                        [attr.data-mona-chart-export-mode]=\"resolveAnnotationTemplate(ann.id) ? 'raster' : 'vector'\"\n                        [style.left.px]=\"annotationLabelLeft(ann)\"\n                        [style.top.px]=\"annotationLabelTop(ann)\"\n                        [style.transform]=\"annotationLabelTransform(ann)\">\n                        @if (resolveAnnotationTemplate(ann.id); as template) {\n                            @if (resolveAnnotationRegistration(ann.id); as reg) {\n                                <ng-container\n                                    [ngTemplateOutlet]=\"template.templateRef\"\n                                    [ngTemplateOutletContext]=\"{\n                                        $implicit: ann.data,\n                                        data: ann.data,\n                                        formattedX: ann.formattedX,\n                                        formattedY: ann.formattedY,\n                                        point: ann.point,\n                                        x: reg.x(),\n                                        xAxisId: ann.xAxisId,\n                                        y: reg.y(),\n                                        yAxisId: ann.yAxisId\n                                    }\" />\n                            }\n                        } @else {\n                            {{ ann.label.formattedText }}\n                        }\n                    </div>\n                }\n            }\n        }\n\n        <!-- DOM Cartesian Data Labels (Template Layer) -->\n        @if (cartesianDataLabelScene(); as labelScene) {\n            @for (label of labelScene.templateLabels; track label.seriesId + \":\" + label.markId) {\n                <div\n                    aria-hidden=\"true\"\n                    class=\"absolute pointer-events-none select-none whitespace-nowrap transition-opacity duration-[var(--mona-chart-animation-duration,300ms)] ease-[var(--mona-chart-animation-easing,cubic-bezier(0,0,0.2,1))]\"\n                    [class.opacity-0]=\"isAnimating()\"\n                    [attr.data-mona-chart-export-animation-suppression]=\"isAnimating() ? 'opacity' : null\"\n                    [monaChartDataLabelMeasure]=\"label.seriesId + ':' + label.markId\"\n                    data-mona-chart-export-role=\"data-label-template\"\n                    data-mona-chart-export-mode=\"raster\"\n                    [style.left.px]=\"label.bounds.x\"\n                    [style.top.px]=\"label.bounds.y\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"label.template.templateRef\"\n                        [ngTemplateOutletContext]=\"label.context\" />\n                </div>\n            }\n        }\n\n        <!-- Crosshair DOM Axis Labels -->\n        @if (crosshairState(); as chState) {\n            @if (cartesianXYScene(); as cart) {\n                @if (resolveCrosshairRegistration(); as chReg) {\n                    @if (chReg.enabled() !== false) {\n                        @if (chState.x && chReg.showAxisLabels() !== false && chReg.showXLabel() !== false) {\n                            <div\n                                aria-hidden=\"true\"\n                                [class]=\"crosshairLabelClasses()\"\n                                [monaChartOverlayLabelMeasure]=\"'crosshair:x'\"\n                                data-mona-chart-export-role=\"crosshair-label\"\n                                [attr.data-mona-chart-export-mode]=\"chReg.template?.() ? 'raster' : 'vector'\"\n                                [style.left.px]=\"crosshairXLabelLeft(cart, chState)\"\n                                [style.top.px]=\"crosshairXLabelTop(cart, chState)\"\n                                [style.transform]=\"crosshairXLabelTransform(cart, chState)\">\n                                @if (chReg.template?.(); as template) {\n                                    <ng-container\n                                        [ngTemplateOutlet]=\"template.templateRef\"\n                                        [ngTemplateOutletContext]=\"{\n                                            $implicit: chState.x.value,\n                                            axis: 'x',\n                                            axisId: chState.x.axisId,\n                                            coordinate: chState.x.coordinate,\n                                            formattedValue: chState.x.formattedValue,\n                                            snapped: chState.snapped,\n                                            source: chState.source,\n                                            value: chState.x.value\n                                        }\" />\n                                } @else {\n                                    {{ chState.x.formattedValue }}\n                                }\n                            </div>\n                        }\n\n                        @if (chState.y && chReg.showAxisLabels() !== false && chReg.showYLabel() !== false) {\n                            <div\n                                aria-hidden=\"true\"\n                                [class]=\"crosshairLabelClasses()\"\n                                [monaChartOverlayLabelMeasure]=\"'crosshair:y'\"\n                                data-mona-chart-export-role=\"crosshair-label\"\n                                [attr.data-mona-chart-export-mode]=\"chReg.template?.() ? 'raster' : 'vector'\"\n                                [style.left.px]=\"crosshairYLabelLeft(cart, chState)\"\n                                [style.top.px]=\"crosshairYLabelTop(cart, chState)\"\n                                [style.transform]=\"crosshairYLabelTransform(cart, chState)\">\n                                @if (chReg.template?.(); as template) {\n                                    <ng-container\n                                        [ngTemplateOutlet]=\"template.templateRef\"\n                                        [ngTemplateOutletContext]=\"{\n                                            $implicit: chState.y.value,\n                                            axis: 'y',\n                                            axisId: chState.y.axisId,\n                                            coordinate: chState.y.coordinate,\n                                            formattedValue: chState.y.formattedValue,\n                                            snapped: chState.snapped,\n                                            source: chState.source,\n                                            value: chState.y.value\n                                        }\" />\n                                } @else {\n                                    {{ chState.y.formattedValue }}\n                                }\n                            </div>\n                        }\n                    }\n                }\n            }\n        }\n\n        <!-- Tooltip overlay in plot-local coordinates -->\n        <ng-content select=\"mona-chart-tooltip\"></ng-content>\n\n        <!-- No Data Placeholder -->\n        @if (hasNoData()) {\n            <div\n                [class]=\"noDataClasses()\"\n                data-mona-chart-export-role=\"no-data\"\n                [attr.data-mona-chart-export-mode]=\"noDataTemplate() ? 'raster' : 'vector'\">\n                @if (noDataTemplate(); as template) {\n                    <ng-container [ngTemplateOutlet]=\"template.templateRef\" />\n                } @else {\n                    <span>{{ messages().noData }}</span>\n                }\n            </div>\n        }\n\n        <!-- Off-screen Accessible Live Region for Keyboard/Screen-reader Exploration -->\n        <div class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n            {{ activeAccessibilityText() }}\n        </div>\n    </div>\n\n    <!-- Projected Legend Outside Plot Container -->\n    <ng-content select=\"mona-chart-legend\"></ng-content>\n\n    <!-- Other Projected Content (Series, Axes, Templates) -->\n    <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ChartLabelMeasureDirective, selector: "[monaChartLabelMeasure]", inputs: ["monaChartLabelMeasure"] }, { kind: "directive", type: ChartOverlayLabelMeasureDirective, selector: "[monaChartOverlayLabelMeasure]", inputs: ["monaChartOverlayLabelMeasure"] }, { kind: "directive", type: ChartDataLabelMeasureDirective, selector: "[monaChartDataLabelMeasure]", inputs: ["monaChartDataLabelMeasure"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ChartComponent, decorators: [{
             type: Component,
@@ -56967,7 +57002,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[style.--mona-chart-animation-easing]": "animationEasingCss()",
                         "(keydown)": "onKeyDown($event)",
                         "(focusout)": "onFocusOut($event)"
-                    }, template: "@if (hasHeader()) {\n    <div [class]=\"headerClasses()\" [style.text-align]=\"titleAlign()\">\n        @if (titleTemplate(); as tpl) {\n            <div data-mona-chart-export-role=\"title-template\">\n                <ng-container\n                    [ngTemplateOutlet]=\"tpl.templateRef\"\n                    [ngTemplateOutletContext]=\"{ $implicit: title(), title: title() }\" />\n            </div>\n        } @else if (title()) {\n            <div [class]=\"titleClasses()\" data-mona-chart-export-role=\"title\">{{ title() }}</div>\n        }\n        @if (subtitleTemplate(); as subTpl) {\n            <div data-mona-chart-export-role=\"subtitle-template\">\n                <ng-container\n                    [ngTemplateOutlet]=\"subTpl.templateRef\"\n                    [ngTemplateOutletContext]=\"{ $implicit: subtitle(), subtitle: subtitle() }\" />\n            </div>\n        } @else if (subtitle()) {\n            <div [class]=\"subtitleClasses()\" data-mona-chart-export-role=\"subtitle\">{{ subtitle() }}</div>\n        }\n    </div>\n}\n<div [class]=\"layoutClasses()\">\n    <div\n        #plotSurface\n        class=\"relative flex-1 min-h-0 min-w-0 w-full h-full overflow-hidden\"\n        [style.order]=\"plotOrder()\"\n        [style.touch-action]=\"touchActionStyle()\"\n        [style.cursor]=\"viewportCursor() ?? 'default'\"\n        (pointerdown)=\"onPointerDown($event)\"\n        (pointermove)=\"onPointerMove($event)\"\n        (pointerup)=\"onPointerUp($event)\"\n        (pointercancel)=\"onPointerCancel($event)\"\n        (lostpointercapture)=\"onLostPointerCapture($event)\"\n        (pointerleave)=\"onPointerLeave($event)\"\n        (wheel)=\"onWheel($event)\"\n        (click)=\"onCanvasClick($event)\">\n        @if (renderer() === \"canvas\") {\n            <canvas #canvas class=\"absolute inset-0 block h-full w-full pointer-events-none\"></canvas>\n        } @else {\n            <svg\n                #svgSurface\n                aria-hidden=\"true\"\n                focusable=\"false\"\n                class=\"absolute inset-0 block h-full w-full pointer-events-none\"\n                xmlns=\"http://www.w3.org/2000/svg\"></svg>\n        }\n\n        <!-- DOM Cartesian Axis Labels & Titles -->\n        @if (cartesianScene(); as cart) {\n            @for (axisScene of cart.axes; track axisScene.axis + \":\" + (axisScene.axisId ?? \"\")) {\n                @if (axisScene.visible) {\n                    @if (axisScene.labels !== false) {\n                        @for (\n                            tick of axisScene.ticks;\n                            track tick.tickKey ? tick.tickKey + \":\" + tick.index : tick.index\n                        ) {\n                            @if (tick.labelVisible !== false) {\n                                <div\n                                    [class]=\"axisLabelClasses()\"\n                                    [monaChartLabelMeasure]=\"tick.tickKey ?? ''\"\n                                    data-mona-chart-export-role=\"axis-label\"\n                                    [attr.data-mona-chart-export-mode]=\"\n                                        resolveAxisLabelTemplate(axisScene) ? 'raster' : 'vector'\n                                    \"\n                                    [style.left.px]=\"axisLabelLeft(cart, axisScene, tick)\"\n                                    [style.top.px]=\"axisLabelTop(cart, axisScene, tick)\"\n                                    [style.max-width.px]=\"axisScene.labelMaxWidth ?? null\"\n                                    [style.transform]=\"axisLabelTransform(axisScene, tick)\"\n                                    [style.transform-origin]=\"axisLabelTransformOrigin(axisScene)\">\n                                    @if (resolveAxisLabelTemplate(axisScene); as template) {\n                                        <ng-container\n                                            [ngTemplateOutlet]=\"template.templateRef\"\n                                            [ngTemplateOutletContext]=\"{\n                                                $implicit: tick.value,\n                                                axis: axisScene.axis,\n                                                axisId: axisScene.axisId,\n                                                index: tick.index,\n                                                position: axisScene.position,\n                                                scaleType: axisScene.scaleType,\n                                                value: tick.value\n                                            }\" />\n                                    } @else {\n                                        {{ tick.formattedValue }}\n                                    }\n                                </div>\n                            }\n                        }\n                    }\n\n                    <!-- Axis Title -->\n                    @if (axisScene.title) {\n                        <div\n                            class=\"mona-chart-axis-title absolute text-xs font-medium text-muted-foreground select-none pointer-events-none whitespace-nowrap\"\n                            data-mona-chart-export-role=\"axis-title\"\n                            data-mona-chart-export-mode=\"vector\"\n                            [style.left.px]=\"axisTitleLeft(cart, axisScene)\"\n                            [style.top.px]=\"axisTitleTop(cart, axisScene)\"\n                            [style.transform]=\"\n                                axisScene.axis === 'x'\n                                    ? axisScene.position === 'top'\n                                        ? 'translate(-50%, 0)'\n                                        : 'translate(-50%, -100%)'\n                                    : axisScene.position === 'right'\n                                      ? 'translate(-50%, -50%) rotate(90deg)'\n                                      : 'translate(-50%, -50%) rotate(-90deg)'\n                            \">\n                            {{ axisScene.title }}\n                        </div>\n                    }\n                }\n            }\n        }\n\n        <!-- DOM Sector Slice Labels and Donut Center Overlay -->\n        @if (polarSectorScene(); as pol) {\n            @for (seriesScene of pol.series; track seriesScene.id) {\n                @for (slice of seriesScene.slices; track slice.sliceId) {\n                    @if (shouldShowSliceLabel(slice)) {\n                        @if (isOutsideLabel() && slice.label) {\n                            <div\n                                aria-hidden=\"true\"\n                                class=\"absolute pointer-events-none text-xs text-foreground select-none whitespace-nowrap transition-opacity duration-[var(--mona-chart-animation-duration,300ms)] ease-[var(--mona-chart-animation-easing,cubic-bezier(0,0,0.2,1))]\"\n                                [class.opacity-0]=\"isAnimating() && isStructuralAnimation()\"\n                                [attr.data-mona-chart-export-animation-suppression]=\"\n                                    isAnimating() && isStructuralAnimation() ? 'opacity' : null\n                                \"\n                                [monaChartLabelMeasure]=\"'sector:' + slice.sliceId\"\n                                data-mona-chart-export-role=\"sector-label\"\n                                [attr.data-mona-chart-export-mode]=\"\n                                    polarSeriesRegistration()?.sliceLabelTemplate?.() ? 'raster' : 'vector'\n                                \"\n                                [style.left.px]=\"slice.label.position.x\"\n                                [style.top.px]=\"slice.label.position.y\"\n                                [style.transform]=\"\n                                    slice.label.side === 'right' ? 'translate(0, -50%)' : 'translate(-100%, -50%)'\n                                \">\n                                @if (polarSeriesRegistration()?.sliceLabelTemplate?.(); as labelTemplate) {\n                                    <ng-container\n                                        [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n                                        [ngTemplateOutletContext]=\"sliceLabelContext(slice)\" />\n                                } @else {\n                                    {{ sliceLabelText(slice) }}\n                                }\n                            </div>\n                        } @else {\n                            <div\n                                aria-hidden=\"true\"\n                                class=\"absolute pointer-events-none text-xs font-semibold select-none whitespace-nowrap flex items-center justify-center transition-opacity duration-[var(--mona-chart-animation-duration,300ms)] ease-[var(--mona-chart-animation-easing,cubic-bezier(0,0,0.2,1))]\"\n                                [class.opacity-0]=\"isAnimating() && isStructuralAnimation()\"\n                                [attr.data-mona-chart-export-animation-suppression]=\"\n                                    isAnimating() && isStructuralAnimation() ? 'opacity' : null\n                                \"\n                                data-mona-chart-export-role=\"sector-label\"\n                                [attr.data-mona-chart-export-mode]=\"\n                                    polarSeriesRegistration()?.sliceLabelTemplate?.() ? 'raster' : 'vector'\n                                \"\n                                [style.left.px]=\"slice.insideLabelPoint.x\"\n                                [style.top.px]=\"slice.insideLabelPoint.y\"\n                                [style.transform]=\"'translate(-50%, -50%)'\"\n                                [style.color]=\"sliceContrastColor(slice)\">\n                                @if (polarSeriesRegistration()?.sliceLabelTemplate?.(); as labelTemplate) {\n                                    <ng-container\n                                        [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n                                        [ngTemplateOutletContext]=\"sliceLabelContext(slice)\" />\n                                } @else {\n                                    {{ sliceLabelText(slice) }}\n                                }\n                            </div>\n                        }\n                    }\n                }\n            }\n\n            @for (seriesScene of pol.series; track seriesScene.id) {\n                <!-- Donut Center Template -->\n                @if (\n                    seriesScene.type === \"donut\" &&\n                        pol.hasRenderableData &&\n                        seriesScene.slices.length > 0 &&\n                        donutSeriesRegistration()?.centerTemplate?.();\n                    as centerTemplate\n                ) {\n                    <div\n                        class=\"absolute pointer-events-none flex flex-col items-center justify-center text-center overflow-hidden\"\n                        data-mona-chart-export-role=\"donut-center\"\n                        data-mona-chart-export-mode=\"raster\"\n                        [style.left.px]=\"pol.center.x\"\n                        [style.top.px]=\"pol.center.y\"\n                        [style.transform]=\"'translate(-50%, -50%)'\"\n                        [style.max-width.px]=\"seriesScene.innerRadius * 1.6\"\n                        [style.max-height.px]=\"seriesScene.innerRadius * 1.6\">\n                        <ng-container\n                            [ngTemplateOutlet]=\"centerTemplate.templateRef\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: seriesScene.total,\n                                total: seriesScene.total,\n                                formattedTotal: seriesScene.formattedTotal,\n                                visibleSliceCount: seriesScene.slices.length,\n                                seriesId: seriesScene.id,\n                                seriesName: seriesScene.name\n                            }\" />\n                    </div>\n                }\n            }\n        }\n\n        <!-- DOM Gauge Center Overlay -->\n        @if (polarArcScene(); as arcScene) {\n            @if (gaugeScene(); as gaugeSeries) {\n                @if (gaugeSeriesRegistration()?.centerTemplate?.(); as centerTemplate) {\n                    <div\n                        class=\"absolute pointer-events-none flex flex-col items-center justify-center text-center overflow-hidden\"\n                        data-mona-chart-export-role=\"gauge-center\"\n                        data-mona-chart-export-mode=\"raster\"\n                        [style.left.px]=\"arcScene.center.x\"\n                        [style.top.px]=\"arcScene.center.y\"\n                        [style.transform]=\"'translate(-50%, -50%)'\"\n                        [style.max-width.px]=\"gaugeSeries.value.innerRadius * 1.6\"\n                        [style.max-height.px]=\"gaugeSeries.value.innerRadius * 1.6\">\n                        <ng-container\n                            [ngTemplateOutlet]=\"centerTemplate.templateRef\"\n                            [ngTemplateOutletContext]=\"gaugeCenterContext(gaugeSeries)\" />\n                    </div>\n                } @else if (gaugeSeries.showValue) {\n                    <div\n                        class=\"absolute pointer-events-none flex flex-col items-center justify-center text-center font-bold text-foreground select-none\"\n                        data-mona-chart-export-role=\"gauge-value\"\n                        data-mona-chart-export-mode=\"vector\"\n                        [style.left.px]=\"arcScene.center.x\"\n                        [style.top.px]=\"arcScene.center.y\"\n                        [style.transform]=\"'translate(-50%, -50%)'\"\n                        [style.font-size.px]=\"gaugeFontSize(gaugeSeries)\">\n                        <span>{{ gaugeSeries.value.formattedValue }}</span>\n                    </div>\n                }\n            }\n        }\n\n        <!-- DOM Radial Axis Labels (Angular Categories/Degrees and Radial Values) -->\n        @if (polarAxisScene(); as radScene) {\n            <!-- Angular Spoke Labels -->\n            @if (radScene.angularAxis?.visible && radScene.angularAxis?.labels) {\n                @for (tick of radScene.angularAxis.ticks; track tick.index) {\n                    @if (tick.visible) {\n                        <div\n                            aria-hidden=\"true\"\n                            class=\"absolute pointer-events-none text-xs text-foreground select-none whitespace-nowrap\"\n                            [monaChartLabelMeasure]=\"'angular:' + tick.tickKey\"\n                            data-mona-chart-export-role=\"polar-angular-label\"\n                            [attr.data-mona-chart-export-mode]=\"\n                                angularAxisRegistration()?.labelTemplate?.() ? 'raster' : 'vector'\n                            \"\n                            [style.left.px]=\"tick.labelPoint.x\"\n                            [style.top.px]=\"tick.labelPoint.y\"\n                            [style.transform]=\"angularLabelTransform(tick)\">\n                            @if (angularAxisRegistration()?.labelTemplate?.(); as template) {\n                                <ng-container\n                                    [ngTemplateOutlet]=\"template.templateRef\"\n                                    [ngTemplateOutletContext]=\"{\n                                        $implicit: tick.value,\n                                        axis: 'angular',\n                                        index: tick.index,\n                                        value: tick.value\n                                    }\" />\n                            } @else {\n                                {{ tick.formattedValue }}\n                            }\n                        </div>\n                    }\n                }\n            }\n\n            <!-- Radial Numeric Tick Labels -->\n            @if (radScene.radialAxis?.visible && radScene.radialAxis?.labels) {\n                @for (tick of radScene.radialAxis.ticks; track tick.index) {\n                    @if (tick.visible) {\n                        <div\n                            aria-hidden=\"true\"\n                            class=\"absolute pointer-events-none text-xs text-muted-foreground select-none whitespace-nowrap\"\n                            [monaChartLabelMeasure]=\"'radial:' + tick.tickKey\"\n                            data-mona-chart-export-role=\"polar-radial-label\"\n                            [attr.data-mona-chart-export-mode]=\"\n                                radialAxisRegistration()?.labelTemplate?.() ? 'raster' : 'vector'\n                            \"\n                            [style.left.px]=\"tick.labelPoint.x\"\n                            [style.top.px]=\"tick.labelPoint.y\"\n                            [style.transform]=\"radialLabelTransform(tick, radScene.radialAxis.labelAngle)\">\n                            @if (radialAxisRegistration()?.labelTemplate?.(); as template) {\n                                <ng-container\n                                    [ngTemplateOutlet]=\"template.templateRef\"\n                                    [ngTemplateOutletContext]=\"{\n                                        $implicit: tick.value,\n                                        axis: 'radial',\n                                        index: tick.index,\n                                        value: tick.value\n                                    }\" />\n                            } @else {\n                                {{ tick.formattedValue }}\n                            }\n                        </div>\n                    }\n                }\n            }\n        }\n\n        <!-- DOM Treemap Labels -->\n        @if (treemapScene(); as tm) {\n            @for (seriesScene of tm.series; track seriesScene.id) {\n                @for (lbl of seriesScene.labels; track lbl.nodeId) {\n                    <div\n                        aria-hidden=\"true\"\n                        class=\"absolute pointer-events-none text-xs select-none overflow-hidden text-ellipsis whitespace-nowrap px-1.5 py-0.5 flex flex-col justify-center transition-opacity duration-[var(--mona-chart-animation-duration,300ms)] ease-[var(--mona-chart-animation-easing,cubic-bezier(0,0,0.2,1))]\"\n                        [class.opacity-0]=\"isAnimating()\"\n                        [attr.data-mona-chart-export-animation-suppression]=\"isAnimating() ? 'opacity' : null\"\n                        data-mona-chart-export-role=\"treemap-label\"\n                        data-mona-chart-export-mode=\"raster\"\n                        [style.left.px]=\"lbl.bounds.x\"\n                        [style.top.px]=\"lbl.bounds.y\"\n                        [style.width.px]=\"lbl.bounds.width\"\n                        [style.height.px]=\"lbl.bounds.height\"\n                        [style.color]=\"lbl.textColor\">\n                        @if (treemapSeriesRegistration()?.labelTemplate?.(); as labelTemplate) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n                                [ngTemplateOutletContext]=\"treemapLabelContext(lbl, seriesScene)\" />\n                        } @else {\n                            <span class=\"font-medium truncate\">{{ lbl.formattedLabel }}</span>\n                            @if (lbl.showValue) {\n                                <span class=\"text-[11px] opacity-80 truncate\">{{ lbl.formattedValue }}</span>\n                            }\n                        }\n                    </div>\n                }\n            }\n        }\n\n        <!-- DOM Funnel Labels -->\n        @if (funnelScene(); as fn) {\n            @for (seriesScene of fn.series; track seriesScene.id) {\n                @for (lbl of seriesScene.labels; track lbl.stageId) {\n                    <div\n                        aria-hidden=\"true\"\n                        class=\"absolute pointer-events-none text-xs select-none overflow-hidden text-ellipsis whitespace-nowrap flex flex-col items-center justify-center transition-opacity duration-[var(--mona-chart-animation-duration,300ms)] ease-[var(--mona-chart-animation-easing,cubic-bezier(0,0,0.2,1))]\"\n                        [class.opacity-0]=\"isAnimating()\"\n                        [attr.data-mona-chart-export-animation-suppression]=\"isAnimating() ? 'opacity' : null\"\n                        data-mona-chart-export-role=\"funnel-label\"\n                        data-mona-chart-export-mode=\"raster\"\n                        [style.left.px]=\"lbl.bounds.x\"\n                        [style.top.px]=\"lbl.bounds.y\"\n                        [style.width.px]=\"lbl.bounds.width\"\n                        [style.height.px]=\"lbl.bounds.height\"\n                        [style.color]=\"lbl.textColor\">\n                        @if (funnelSeriesRegistration()?.labelTemplate?.(); as labelTemplate) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n                                [ngTemplateOutletContext]=\"funnelLabelContext(lbl, seriesScene)\" />\n                        } @else {\n                            <span class=\"font-medium truncate\">{{ lbl.text }}</span>\n                        }\n                    </div>\n                }\n            }\n        }\n\n        <!-- DOM Waterfall Labels -->\n        @if (waterfallScene(); as wf) {\n            @for (seriesScene of wf.series; track seriesScene.id) {\n                @for (lbl of seriesScene.labels; track lbl.itemId) {\n                    <div\n                        aria-hidden=\"true\"\n                        class=\"absolute pointer-events-none text-xs select-none overflow-hidden text-ellipsis whitespace-nowrap flex items-center justify-center transition-opacity duration-[var(--mona-chart-animation-duration,300ms)] ease-[var(--mona-chart-animation-easing,cubic-bezier(0,0,0.2,1))]\"\n                        [class.opacity-0]=\"isAnimating()\"\n                        [attr.data-mona-chart-export-animation-suppression]=\"isAnimating() ? 'opacity' : null\"\n                        data-mona-chart-export-role=\"waterfall-label\"\n                        data-mona-chart-export-mode=\"raster\"\n                        [style.left.px]=\"lbl.bounds.x\"\n                        [style.top.px]=\"lbl.bounds.y\"\n                        [style.width.px]=\"lbl.bounds.width\"\n                        [style.height.px]=\"lbl.bounds.height\"\n                        [style.color]=\"lbl.textColor\">\n                        @if (waterfallSeriesRegistration()?.labelTemplate?.(); as labelTemplate) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n                                [ngTemplateOutletContext]=\"waterfallLabelContext(lbl, seriesScene)\" />\n                        } @else {\n                            <span class=\"font-medium truncate\">{{ lbl.text }}</span>\n                        }\n                    </div>\n                }\n            }\n        }\n\n        <!-- DOM Cartesian Overlays (Reference Lines, Reference Bands, Point Annotations) -->\n        @if (cartesianOverlayScene(); as overlays) {\n            <!-- Reference Lines -->\n            @for (line of overlays.referenceLines; track line.id) {\n                @if (line.label) {\n                    <div\n                        aria-hidden=\"true\"\n                        [class]=\"referenceLabelClasses() + (line.label.labelClass ? ' ' + line.label.labelClass : '')\"\n                        [class.hidden]=\"!line.label.formattedText && !resolveReferenceLineTemplate(line.id)\"\n                        [monaChartOverlayLabelMeasure]=\"'overlay:line:' + line.id\"\n                        data-mona-chart-export-role=\"reference-label\"\n                        [attr.data-mona-chart-export-mode]=\"resolveReferenceLineTemplate(line.id) ? 'raster' : 'vector'\"\n                        [style.left.px]=\"referenceLineLabelLeft(line)\"\n                        [style.top.px]=\"referenceLineLabelTop(line)\"\n                        [style.transform]=\"referenceLineLabelTransform(line)\">\n                        @if (resolveReferenceLineTemplate(line.id); as template) {\n                            @if (resolveReferenceLineRegistration(line.id); as reg) {\n                                <ng-container\n                                    [ngTemplateOutlet]=\"template.templateRef\"\n                                    [ngTemplateOutletContext]=\"{\n                                        $implicit: reg.value(),\n                                        axis: line.axis,\n                                        axisId: line.axisId,\n                                        coordinate: line.coordinate,\n                                        formattedValue: line.formattedValue,\n                                        kind: 'line',\n                                        value: reg.value()\n                                    }\" />\n                            }\n                        } @else {\n                            {{ line.label.formattedText }}\n                        }\n                    </div>\n                }\n            }\n\n            <!-- Reference Bands -->\n            @for (band of overlays.referenceBands; track band.id) {\n                @if (band.label) {\n                    <div\n                        aria-hidden=\"true\"\n                        [class]=\"referenceLabelClasses() + (band.label.labelClass ? ' ' + band.label.labelClass : '')\"\n                        [class.hidden]=\"!band.label.formattedText && !resolveReferenceBandTemplate(band.id)\"\n                        [monaChartOverlayLabelMeasure]=\"'overlay:band:' + band.id\"\n                        data-mona-chart-export-role=\"reference-label\"\n                        [attr.data-mona-chart-export-mode]=\"resolveReferenceBandTemplate(band.id) ? 'raster' : 'vector'\"\n                        [style.left.px]=\"referenceBandLabelLeft(band)\"\n                        [style.top.px]=\"referenceBandLabelTop(band)\"\n                        [style.transform]=\"referenceBandLabelTransform(band)\">\n                        @if (resolveReferenceBandTemplate(band.id); as template) {\n                            @if (resolveReferenceBandRegistration(band.id); as reg) {\n                                <ng-container\n                                    [ngTemplateOutlet]=\"template.templateRef\"\n                                    [ngTemplateOutletContext]=\"{\n                                        $implicit: { from: reg.from(), to: reg.to() },\n                                        axis: band.axis,\n                                        axisId: band.axisId,\n                                        bounds: band.bounds,\n                                        formattedFrom: band.formattedFrom,\n                                        formattedTo: band.formattedTo,\n                                        from: reg.from(),\n                                        kind: 'band',\n                                        to: reg.to()\n                                    }\" />\n                            }\n                        } @else {\n                            {{ band.label.formattedText }}\n                        }\n                    </div>\n                }\n            }\n\n            <!-- Point Annotations -->\n            @for (ann of overlays.annotations; track ann.id) {\n                @if (ann.label) {\n                    <div\n                        aria-hidden=\"true\"\n                        [class]=\"annotationLabelClasses() + (ann.label.labelClass ? ' ' + ann.label.labelClass : '')\"\n                        [class.hidden]=\"!ann.label.formattedText && !resolveAnnotationTemplate(ann.id)\"\n                        [monaChartOverlayLabelMeasure]=\"'overlay:ann:' + ann.id\"\n                        data-mona-chart-export-role=\"annotation-label\"\n                        [attr.data-mona-chart-export-mode]=\"resolveAnnotationTemplate(ann.id) ? 'raster' : 'vector'\"\n                        [style.left.px]=\"annotationLabelLeft(ann)\"\n                        [style.top.px]=\"annotationLabelTop(ann)\"\n                        [style.transform]=\"annotationLabelTransform(ann)\">\n                        @if (resolveAnnotationTemplate(ann.id); as template) {\n                            @if (resolveAnnotationRegistration(ann.id); as reg) {\n                                <ng-container\n                                    [ngTemplateOutlet]=\"template.templateRef\"\n                                    [ngTemplateOutletContext]=\"{\n                                        $implicit: ann.data,\n                                        data: ann.data,\n                                        formattedX: ann.formattedX,\n                                        formattedY: ann.formattedY,\n                                        point: ann.point,\n                                        x: reg.x(),\n                                        xAxisId: ann.xAxisId,\n                                        y: reg.y(),\n                                        yAxisId: ann.yAxisId\n                                    }\" />\n                            }\n                        } @else {\n                            {{ ann.label.formattedText }}\n                        }\n                    </div>\n                }\n            }\n        }\n\n        <!-- DOM Cartesian Data Labels (Template Layer) -->\n        @if (cartesianDataLabelScene(); as labelScene) {\n            @for (label of labelScene.templateLabels; track label.seriesId + \":\" + label.markId) {\n                <div\n                    aria-hidden=\"true\"\n                    class=\"absolute pointer-events-none select-none whitespace-nowrap transition-opacity duration-[var(--mona-chart-animation-duration,300ms)] ease-[var(--mona-chart-animation-easing,cubic-bezier(0,0,0.2,1))]\"\n                    [class.opacity-0]=\"isAnimating()\"\n                    [attr.data-mona-chart-export-animation-suppression]=\"isAnimating() ? 'opacity' : null\"\n                    [monaChartDataLabelMeasure]=\"label.seriesId + ':' + label.markId\"\n                    data-mona-chart-export-role=\"data-label-template\"\n                    data-mona-chart-export-mode=\"raster\"\n                    [style.left.px]=\"label.bounds.x\"\n                    [style.top.px]=\"label.bounds.y\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"label.template.templateRef\"\n                        [ngTemplateOutletContext]=\"label.context\" />\n                </div>\n            }\n        }\n\n        <!-- Crosshair DOM Axis Labels -->\n        @if (crosshairState(); as chState) {\n            @if (cartesianXYScene(); as cart) {\n                @if (resolveCrosshairRegistration(); as chReg) {\n                    @if (chReg.enabled() !== false) {\n                        @if (chState.x && chReg.showAxisLabels() !== false && chReg.showXLabel() !== false) {\n                            <div\n                                aria-hidden=\"true\"\n                                [class]=\"crosshairLabelClasses()\"\n                                [monaChartOverlayLabelMeasure]=\"'crosshair:x'\"\n                                data-mona-chart-export-role=\"crosshair-label\"\n                                [attr.data-mona-chart-export-mode]=\"chReg.template?.() ? 'raster' : 'vector'\"\n                                [style.left.px]=\"crosshairXLabelLeft(cart, chState)\"\n                                [style.top.px]=\"crosshairXLabelTop(cart, chState)\"\n                                [style.transform]=\"crosshairXLabelTransform(cart, chState)\">\n                                @if (chReg.template?.(); as template) {\n                                    <ng-container\n                                        [ngTemplateOutlet]=\"template.templateRef\"\n                                        [ngTemplateOutletContext]=\"{\n                                            $implicit: chState.x.value,\n                                            axis: 'x',\n                                            axisId: chState.x.axisId,\n                                            coordinate: chState.x.coordinate,\n                                            formattedValue: chState.x.formattedValue,\n                                            snapped: chState.snapped,\n                                            source: chState.source,\n                                            value: chState.x.value\n                                        }\" />\n                                } @else {\n                                    {{ chState.x.formattedValue }}\n                                }\n                            </div>\n                        }\n\n                        @if (chState.y && chReg.showAxisLabels() !== false && chReg.showYLabel() !== false) {\n                            <div\n                                aria-hidden=\"true\"\n                                [class]=\"crosshairLabelClasses()\"\n                                [monaChartOverlayLabelMeasure]=\"'crosshair:y'\"\n                                data-mona-chart-export-role=\"crosshair-label\"\n                                [attr.data-mona-chart-export-mode]=\"chReg.template?.() ? 'raster' : 'vector'\"\n                                [style.left.px]=\"crosshairYLabelLeft(cart, chState)\"\n                                [style.top.px]=\"crosshairYLabelTop(cart, chState)\"\n                                [style.transform]=\"crosshairYLabelTransform(cart, chState)\">\n                                @if (chReg.template?.(); as template) {\n                                    <ng-container\n                                        [ngTemplateOutlet]=\"template.templateRef\"\n                                        [ngTemplateOutletContext]=\"{\n                                            $implicit: chState.y.value,\n                                            axis: 'y',\n                                            axisId: chState.y.axisId,\n                                            coordinate: chState.y.coordinate,\n                                            formattedValue: chState.y.formattedValue,\n                                            snapped: chState.snapped,\n                                            source: chState.source,\n                                            value: chState.y.value\n                                        }\" />\n                                } @else {\n                                    {{ chState.y.formattedValue }}\n                                }\n                            </div>\n                        }\n                    }\n                }\n            }\n        }\n\n        <!-- Tooltip overlay in plot-local coordinates -->\n        <ng-content select=\"mona-chart-tooltip\"></ng-content>\n\n        <!-- No Data Placeholder -->\n        @if (hasNoData()) {\n            <div\n                [class]=\"noDataClasses()\"\n                data-mona-chart-export-role=\"no-data\"\n                [attr.data-mona-chart-export-mode]=\"noDataTemplate() ? 'raster' : 'vector'\">\n                @if (noDataTemplate(); as template) {\n                    <ng-container [ngTemplateOutlet]=\"template.templateRef\" />\n                } @else {\n                    <span>No data available</span>\n                }\n            </div>\n        }\n\n        <!-- Off-screen Accessible Live Region for Keyboard/Screen-reader Exploration -->\n        <div class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n            {{ activeAccessibilityText() }}\n        </div>\n    </div>\n\n    <!-- Projected Legend Outside Plot Container -->\n    <ng-content select=\"mona-chart-legend\"></ng-content>\n\n    <!-- Other Projected Content (Series, Axes, Templates) -->\n    <ng-content></ng-content>\n</div>\n" }]
+                    }, template: "@if (hasHeader()) {\n    <div [class]=\"headerClasses()\" [style.text-align]=\"titleAlign()\">\n        @if (titleTemplate(); as tpl) {\n            <div data-mona-chart-export-role=\"title-template\">\n                <ng-container\n                    [ngTemplateOutlet]=\"tpl.templateRef\"\n                    [ngTemplateOutletContext]=\"{ $implicit: title(), title: title() }\" />\n            </div>\n        } @else if (title()) {\n            <div [class]=\"titleClasses()\" data-mona-chart-export-role=\"title\">{{ title() }}</div>\n        }\n        @if (subtitleTemplate(); as subTpl) {\n            <div data-mona-chart-export-role=\"subtitle-template\">\n                <ng-container\n                    [ngTemplateOutlet]=\"subTpl.templateRef\"\n                    [ngTemplateOutletContext]=\"{ $implicit: subtitle(), subtitle: subtitle() }\" />\n            </div>\n        } @else if (subtitle()) {\n            <div [class]=\"subtitleClasses()\" data-mona-chart-export-role=\"subtitle\">{{ subtitle() }}</div>\n        }\n    </div>\n}\n<div [class]=\"layoutClasses()\">\n    <div\n        #plotSurface\n        class=\"relative flex-1 min-h-0 min-w-0 w-full h-full overflow-hidden\"\n        [style.order]=\"plotOrder()\"\n        [style.touch-action]=\"touchActionStyle()\"\n        [style.cursor]=\"viewportCursor() ?? 'default'\"\n        (pointerdown)=\"onPointerDown($event)\"\n        (pointermove)=\"onPointerMove($event)\"\n        (pointerup)=\"onPointerUp($event)\"\n        (pointercancel)=\"onPointerCancel($event)\"\n        (lostpointercapture)=\"onLostPointerCapture($event)\"\n        (pointerleave)=\"onPointerLeave($event)\"\n        (wheel)=\"onWheel($event)\"\n        (click)=\"onCanvasClick($event)\">\n        @if (renderer() === \"canvas\") {\n            <canvas #canvas class=\"absolute inset-0 block h-full w-full pointer-events-none\"></canvas>\n        } @else {\n            <svg\n                #svgSurface\n                aria-hidden=\"true\"\n                focusable=\"false\"\n                class=\"absolute inset-0 block h-full w-full pointer-events-none\"\n                xmlns=\"http://www.w3.org/2000/svg\"></svg>\n        }\n\n        <!-- DOM Cartesian Axis Labels & Titles -->\n        @if (cartesianScene(); as cart) {\n            @for (axisScene of cart.axes; track axisScene.axis + \":\" + (axisScene.axisId ?? \"\")) {\n                @if (axisScene.visible) {\n                    @if (axisScene.labels !== false) {\n                        @for (\n                            tick of axisScene.ticks;\n                            track tick.tickKey ? tick.tickKey + \":\" + tick.index : tick.index\n                        ) {\n                            @if (tick.labelVisible !== false) {\n                                <div\n                                    [class]=\"axisLabelClasses()\"\n                                    [monaChartLabelMeasure]=\"tick.tickKey ?? ''\"\n                                    data-mona-chart-export-role=\"axis-label\"\n                                    [attr.data-mona-chart-export-mode]=\"\n                                        resolveAxisLabelTemplate(axisScene) ? 'raster' : 'vector'\n                                    \"\n                                    [style.left.px]=\"axisLabelLeft(cart, axisScene, tick)\"\n                                    [style.top.px]=\"axisLabelTop(cart, axisScene, tick)\"\n                                    [style.max-width.px]=\"axisScene.labelMaxWidth ?? null\"\n                                    [style.transform]=\"axisLabelTransform(axisScene, tick)\"\n                                    [style.transform-origin]=\"axisLabelTransformOrigin(axisScene)\">\n                                    @if (resolveAxisLabelTemplate(axisScene); as template) {\n                                        <ng-container\n                                            [ngTemplateOutlet]=\"template.templateRef\"\n                                            [ngTemplateOutletContext]=\"{\n                                                $implicit: tick.value,\n                                                axis: axisScene.axis,\n                                                axisId: axisScene.axisId,\n                                                index: tick.index,\n                                                position: axisScene.position,\n                                                scaleType: axisScene.scaleType,\n                                                value: tick.value\n                                            }\" />\n                                    } @else {\n                                        {{ tick.formattedValue }}\n                                    }\n                                </div>\n                            }\n                        }\n                    }\n\n                    <!-- Axis Title -->\n                    @if (axisScene.title) {\n                        <div\n                            class=\"mona-chart-axis-title absolute text-xs font-medium text-muted-foreground select-none pointer-events-none whitespace-nowrap\"\n                            data-mona-chart-export-role=\"axis-title\"\n                            data-mona-chart-export-mode=\"vector\"\n                            [style.left.px]=\"axisTitleLeft(cart, axisScene)\"\n                            [style.top.px]=\"axisTitleTop(cart, axisScene)\"\n                            [style.transform]=\"\n                                axisScene.axis === 'x'\n                                    ? axisScene.position === 'top'\n                                        ? 'translate(-50%, 0)'\n                                        : 'translate(-50%, -100%)'\n                                    : axisScene.position === 'right'\n                                      ? 'translate(-50%, -50%) rotate(90deg)'\n                                      : 'translate(-50%, -50%) rotate(-90deg)'\n                            \">\n                            {{ axisScene.title }}\n                        </div>\n                    }\n                }\n            }\n        }\n\n        <!-- DOM Sector Slice Labels and Donut Center Overlay -->\n        @if (polarSectorScene(); as pol) {\n            @for (seriesScene of pol.series; track seriesScene.id) {\n                @for (slice of seriesScene.slices; track slice.sliceId) {\n                    @if (shouldShowSliceLabel(slice)) {\n                        @if (isOutsideLabel() && slice.label) {\n                            <div\n                                aria-hidden=\"true\"\n                                class=\"absolute pointer-events-none text-xs text-foreground select-none whitespace-nowrap transition-opacity duration-[var(--mona-chart-animation-duration,300ms)] ease-[var(--mona-chart-animation-easing,cubic-bezier(0,0,0.2,1))]\"\n                                [class.opacity-0]=\"isAnimating() && isStructuralAnimation()\"\n                                [attr.data-mona-chart-export-animation-suppression]=\"\n                                    isAnimating() && isStructuralAnimation() ? 'opacity' : null\n                                \"\n                                [monaChartLabelMeasure]=\"'sector:' + slice.sliceId\"\n                                data-mona-chart-export-role=\"sector-label\"\n                                [attr.data-mona-chart-export-mode]=\"\n                                    polarSeriesRegistration()?.sliceLabelTemplate?.() ? 'raster' : 'vector'\n                                \"\n                                [style.left.px]=\"slice.label.position.x\"\n                                [style.top.px]=\"slice.label.position.y\"\n                                [style.transform]=\"\n                                    slice.label.side === 'right' ? 'translate(0, -50%)' : 'translate(-100%, -50%)'\n                                \">\n                                @if (polarSeriesRegistration()?.sliceLabelTemplate?.(); as labelTemplate) {\n                                    <ng-container\n                                        [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n                                        [ngTemplateOutletContext]=\"sliceLabelContext(slice)\" />\n                                } @else {\n                                    {{ sliceLabelText(slice) }}\n                                }\n                            </div>\n                        } @else {\n                            <div\n                                aria-hidden=\"true\"\n                                class=\"absolute pointer-events-none text-xs font-semibold select-none whitespace-nowrap flex items-center justify-center transition-opacity duration-[var(--mona-chart-animation-duration,300ms)] ease-[var(--mona-chart-animation-easing,cubic-bezier(0,0,0.2,1))]\"\n                                [class.opacity-0]=\"isAnimating() && isStructuralAnimation()\"\n                                [attr.data-mona-chart-export-animation-suppression]=\"\n                                    isAnimating() && isStructuralAnimation() ? 'opacity' : null\n                                \"\n                                data-mona-chart-export-role=\"sector-label\"\n                                [attr.data-mona-chart-export-mode]=\"\n                                    polarSeriesRegistration()?.sliceLabelTemplate?.() ? 'raster' : 'vector'\n                                \"\n                                [style.left.px]=\"slice.insideLabelPoint.x\"\n                                [style.top.px]=\"slice.insideLabelPoint.y\"\n                                [style.transform]=\"'translate(-50%, -50%)'\"\n                                [style.color]=\"sliceContrastColor(slice)\">\n                                @if (polarSeriesRegistration()?.sliceLabelTemplate?.(); as labelTemplate) {\n                                    <ng-container\n                                        [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n                                        [ngTemplateOutletContext]=\"sliceLabelContext(slice)\" />\n                                } @else {\n                                    {{ sliceLabelText(slice) }}\n                                }\n                            </div>\n                        }\n                    }\n                }\n            }\n\n            @for (seriesScene of pol.series; track seriesScene.id) {\n                <!-- Donut Center Template -->\n                @if (\n                    seriesScene.type === \"donut\" &&\n                        pol.hasRenderableData &&\n                        seriesScene.slices.length > 0 &&\n                        donutSeriesRegistration()?.centerTemplate?.();\n                    as centerTemplate\n                ) {\n                    <div\n                        class=\"absolute pointer-events-none flex flex-col items-center justify-center text-center overflow-hidden\"\n                        data-mona-chart-export-role=\"donut-center\"\n                        data-mona-chart-export-mode=\"raster\"\n                        [style.left.px]=\"pol.center.x\"\n                        [style.top.px]=\"pol.center.y\"\n                        [style.transform]=\"'translate(-50%, -50%)'\"\n                        [style.max-width.px]=\"seriesScene.innerRadius * 1.6\"\n                        [style.max-height.px]=\"seriesScene.innerRadius * 1.6\">\n                        <ng-container\n                            [ngTemplateOutlet]=\"centerTemplate.templateRef\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: seriesScene.total,\n                                total: seriesScene.total,\n                                formattedTotal: seriesScene.formattedTotal,\n                                visibleSliceCount: seriesScene.slices.length,\n                                seriesId: seriesScene.id,\n                                seriesName: seriesScene.name\n                            }\" />\n                    </div>\n                }\n            }\n        }\n\n        <!-- DOM Gauge Center Overlay -->\n        @if (polarArcScene(); as arcScene) {\n            @if (gaugeScene(); as gaugeSeries) {\n                @if (gaugeSeriesRegistration()?.centerTemplate?.(); as centerTemplate) {\n                    <div\n                        class=\"absolute pointer-events-none flex flex-col items-center justify-center text-center overflow-hidden\"\n                        data-mona-chart-export-role=\"gauge-center\"\n                        data-mona-chart-export-mode=\"raster\"\n                        [style.left.px]=\"arcScene.center.x\"\n                        [style.top.px]=\"arcScene.center.y\"\n                        [style.transform]=\"'translate(-50%, -50%)'\"\n                        [style.max-width.px]=\"gaugeSeries.value.innerRadius * 1.6\"\n                        [style.max-height.px]=\"gaugeSeries.value.innerRadius * 1.6\">\n                        <ng-container\n                            [ngTemplateOutlet]=\"centerTemplate.templateRef\"\n                            [ngTemplateOutletContext]=\"gaugeCenterContext(gaugeSeries)\" />\n                    </div>\n                } @else if (gaugeSeries.showValue) {\n                    <div\n                        class=\"absolute pointer-events-none flex flex-col items-center justify-center text-center font-bold text-foreground select-none\"\n                        data-mona-chart-export-role=\"gauge-value\"\n                        data-mona-chart-export-mode=\"vector\"\n                        [style.left.px]=\"arcScene.center.x\"\n                        [style.top.px]=\"arcScene.center.y\"\n                        [style.transform]=\"'translate(-50%, -50%)'\"\n                        [style.font-size.px]=\"gaugeFontSize(gaugeSeries)\">\n                        <span>{{ gaugeSeries.value.formattedValue }}</span>\n                    </div>\n                }\n            }\n        }\n\n        <!-- DOM Radial Axis Labels (Angular Categories/Degrees and Radial Values) -->\n        @if (polarAxisScene(); as radScene) {\n            <!-- Angular Spoke Labels -->\n            @if (radScene.angularAxis?.visible && radScene.angularAxis?.labels) {\n                @for (tick of radScene.angularAxis.ticks; track tick.index) {\n                    @if (tick.visible) {\n                        <div\n                            aria-hidden=\"true\"\n                            class=\"absolute pointer-events-none text-xs text-foreground select-none whitespace-nowrap\"\n                            [monaChartLabelMeasure]=\"'angular:' + tick.tickKey\"\n                            data-mona-chart-export-role=\"polar-angular-label\"\n                            [attr.data-mona-chart-export-mode]=\"\n                                angularAxisRegistration()?.labelTemplate?.() ? 'raster' : 'vector'\n                            \"\n                            [style.left.px]=\"tick.labelPoint.x\"\n                            [style.top.px]=\"tick.labelPoint.y\"\n                            [style.transform]=\"angularLabelTransform(tick)\">\n                            @if (angularAxisRegistration()?.labelTemplate?.(); as template) {\n                                <ng-container\n                                    [ngTemplateOutlet]=\"template.templateRef\"\n                                    [ngTemplateOutletContext]=\"{\n                                        $implicit: tick.value,\n                                        axis: 'angular',\n                                        index: tick.index,\n                                        value: tick.value\n                                    }\" />\n                            } @else {\n                                {{ tick.formattedValue }}\n                            }\n                        </div>\n                    }\n                }\n            }\n\n            <!-- Radial Numeric Tick Labels -->\n            @if (radScene.radialAxis?.visible && radScene.radialAxis?.labels) {\n                @for (tick of radScene.radialAxis.ticks; track tick.index) {\n                    @if (tick.visible) {\n                        <div\n                            aria-hidden=\"true\"\n                            class=\"absolute pointer-events-none text-xs text-muted-foreground select-none whitespace-nowrap\"\n                            [monaChartLabelMeasure]=\"'radial:' + tick.tickKey\"\n                            data-mona-chart-export-role=\"polar-radial-label\"\n                            [attr.data-mona-chart-export-mode]=\"\n                                radialAxisRegistration()?.labelTemplate?.() ? 'raster' : 'vector'\n                            \"\n                            [style.left.px]=\"tick.labelPoint.x\"\n                            [style.top.px]=\"tick.labelPoint.y\"\n                            [style.transform]=\"radialLabelTransform(tick, radScene.radialAxis.labelAngle)\">\n                            @if (radialAxisRegistration()?.labelTemplate?.(); as template) {\n                                <ng-container\n                                    [ngTemplateOutlet]=\"template.templateRef\"\n                                    [ngTemplateOutletContext]=\"{\n                                        $implicit: tick.value,\n                                        axis: 'radial',\n                                        index: tick.index,\n                                        value: tick.value\n                                    }\" />\n                            } @else {\n                                {{ tick.formattedValue }}\n                            }\n                        </div>\n                    }\n                }\n            }\n        }\n\n        <!-- DOM Treemap Labels -->\n        @if (treemapScene(); as tm) {\n            @for (seriesScene of tm.series; track seriesScene.id) {\n                @for (lbl of seriesScene.labels; track lbl.nodeId) {\n                    <div\n                        aria-hidden=\"true\"\n                        class=\"absolute pointer-events-none text-xs select-none overflow-hidden text-ellipsis whitespace-nowrap px-1.5 py-0.5 flex flex-col justify-center transition-opacity duration-[var(--mona-chart-animation-duration,300ms)] ease-[var(--mona-chart-animation-easing,cubic-bezier(0,0,0.2,1))]\"\n                        [class.opacity-0]=\"isAnimating()\"\n                        [attr.data-mona-chart-export-animation-suppression]=\"isAnimating() ? 'opacity' : null\"\n                        data-mona-chart-export-role=\"treemap-label\"\n                        data-mona-chart-export-mode=\"raster\"\n                        [style.left.px]=\"lbl.bounds.x\"\n                        [style.top.px]=\"lbl.bounds.y\"\n                        [style.width.px]=\"lbl.bounds.width\"\n                        [style.height.px]=\"lbl.bounds.height\"\n                        [style.color]=\"lbl.textColor\">\n                        @if (treemapSeriesRegistration()?.labelTemplate?.(); as labelTemplate) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n                                [ngTemplateOutletContext]=\"treemapLabelContext(lbl, seriesScene)\" />\n                        } @else {\n                            <span class=\"font-medium truncate\">{{ lbl.formattedLabel }}</span>\n                            @if (lbl.showValue) {\n                                <span class=\"text-[11px] opacity-80 truncate\">{{ lbl.formattedValue }}</span>\n                            }\n                        }\n                    </div>\n                }\n            }\n        }\n\n        <!-- DOM Funnel Labels -->\n        @if (funnelScene(); as fn) {\n            @for (seriesScene of fn.series; track seriesScene.id) {\n                @for (lbl of seriesScene.labels; track lbl.stageId) {\n                    <div\n                        aria-hidden=\"true\"\n                        class=\"absolute pointer-events-none text-xs select-none overflow-hidden text-ellipsis whitespace-nowrap flex flex-col items-center justify-center transition-opacity duration-[var(--mona-chart-animation-duration,300ms)] ease-[var(--mona-chart-animation-easing,cubic-bezier(0,0,0.2,1))]\"\n                        [class.opacity-0]=\"isAnimating()\"\n                        [attr.data-mona-chart-export-animation-suppression]=\"isAnimating() ? 'opacity' : null\"\n                        data-mona-chart-export-role=\"funnel-label\"\n                        data-mona-chart-export-mode=\"raster\"\n                        [style.left.px]=\"lbl.bounds.x\"\n                        [style.top.px]=\"lbl.bounds.y\"\n                        [style.width.px]=\"lbl.bounds.width\"\n                        [style.height.px]=\"lbl.bounds.height\"\n                        [style.color]=\"lbl.textColor\">\n                        @if (funnelSeriesRegistration()?.labelTemplate?.(); as labelTemplate) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n                                [ngTemplateOutletContext]=\"funnelLabelContext(lbl, seriesScene)\" />\n                        } @else {\n                            <span class=\"font-medium truncate\">{{ lbl.text }}</span>\n                        }\n                    </div>\n                }\n            }\n        }\n\n        <!-- DOM Waterfall Labels -->\n        @if (waterfallScene(); as wf) {\n            @for (seriesScene of wf.series; track seriesScene.id) {\n                @for (lbl of seriesScene.labels; track lbl.itemId) {\n                    <div\n                        aria-hidden=\"true\"\n                        class=\"absolute pointer-events-none text-xs select-none overflow-hidden text-ellipsis whitespace-nowrap flex items-center justify-center transition-opacity duration-[var(--mona-chart-animation-duration,300ms)] ease-[var(--mona-chart-animation-easing,cubic-bezier(0,0,0.2,1))]\"\n                        [class.opacity-0]=\"isAnimating()\"\n                        [attr.data-mona-chart-export-animation-suppression]=\"isAnimating() ? 'opacity' : null\"\n                        data-mona-chart-export-role=\"waterfall-label\"\n                        data-mona-chart-export-mode=\"raster\"\n                        [style.left.px]=\"lbl.bounds.x\"\n                        [style.top.px]=\"lbl.bounds.y\"\n                        [style.width.px]=\"lbl.bounds.width\"\n                        [style.height.px]=\"lbl.bounds.height\"\n                        [style.color]=\"lbl.textColor\">\n                        @if (waterfallSeriesRegistration()?.labelTemplate?.(); as labelTemplate) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n                                [ngTemplateOutletContext]=\"waterfallLabelContext(lbl, seriesScene)\" />\n                        } @else {\n                            <span class=\"font-medium truncate\">{{ lbl.text }}</span>\n                        }\n                    </div>\n                }\n            }\n        }\n\n        <!-- DOM Cartesian Overlays (Reference Lines, Reference Bands, Point Annotations) -->\n        @if (cartesianOverlayScene(); as overlays) {\n            <!-- Reference Lines -->\n            @for (line of overlays.referenceLines; track line.id) {\n                @if (line.label) {\n                    <div\n                        aria-hidden=\"true\"\n                        [class]=\"referenceLabelClasses() + (line.label.labelClass ? ' ' + line.label.labelClass : '')\"\n                        [class.hidden]=\"!line.label.formattedText && !resolveReferenceLineTemplate(line.id)\"\n                        [monaChartOverlayLabelMeasure]=\"'overlay:line:' + line.id\"\n                        data-mona-chart-export-role=\"reference-label\"\n                        [attr.data-mona-chart-export-mode]=\"resolveReferenceLineTemplate(line.id) ? 'raster' : 'vector'\"\n                        [style.left.px]=\"referenceLineLabelLeft(line)\"\n                        [style.top.px]=\"referenceLineLabelTop(line)\"\n                        [style.transform]=\"referenceLineLabelTransform(line)\">\n                        @if (resolveReferenceLineTemplate(line.id); as template) {\n                            @if (resolveReferenceLineRegistration(line.id); as reg) {\n                                <ng-container\n                                    [ngTemplateOutlet]=\"template.templateRef\"\n                                    [ngTemplateOutletContext]=\"{\n                                        $implicit: reg.value(),\n                                        axis: line.axis,\n                                        axisId: line.axisId,\n                                        coordinate: line.coordinate,\n                                        formattedValue: line.formattedValue,\n                                        kind: 'line',\n                                        value: reg.value()\n                                    }\" />\n                            }\n                        } @else {\n                            {{ line.label.formattedText }}\n                        }\n                    </div>\n                }\n            }\n\n            <!-- Reference Bands -->\n            @for (band of overlays.referenceBands; track band.id) {\n                @if (band.label) {\n                    <div\n                        aria-hidden=\"true\"\n                        [class]=\"referenceLabelClasses() + (band.label.labelClass ? ' ' + band.label.labelClass : '')\"\n                        [class.hidden]=\"!band.label.formattedText && !resolveReferenceBandTemplate(band.id)\"\n                        [monaChartOverlayLabelMeasure]=\"'overlay:band:' + band.id\"\n                        data-mona-chart-export-role=\"reference-label\"\n                        [attr.data-mona-chart-export-mode]=\"resolveReferenceBandTemplate(band.id) ? 'raster' : 'vector'\"\n                        [style.left.px]=\"referenceBandLabelLeft(band)\"\n                        [style.top.px]=\"referenceBandLabelTop(band)\"\n                        [style.transform]=\"referenceBandLabelTransform(band)\">\n                        @if (resolveReferenceBandTemplate(band.id); as template) {\n                            @if (resolveReferenceBandRegistration(band.id); as reg) {\n                                <ng-container\n                                    [ngTemplateOutlet]=\"template.templateRef\"\n                                    [ngTemplateOutletContext]=\"{\n                                        $implicit: { from: reg.from(), to: reg.to() },\n                                        axis: band.axis,\n                                        axisId: band.axisId,\n                                        bounds: band.bounds,\n                                        formattedFrom: band.formattedFrom,\n                                        formattedTo: band.formattedTo,\n                                        from: reg.from(),\n                                        kind: 'band',\n                                        to: reg.to()\n                                    }\" />\n                            }\n                        } @else {\n                            {{ band.label.formattedText }}\n                        }\n                    </div>\n                }\n            }\n\n            <!-- Point Annotations -->\n            @for (ann of overlays.annotations; track ann.id) {\n                @if (ann.label) {\n                    <div\n                        aria-hidden=\"true\"\n                        [class]=\"annotationLabelClasses() + (ann.label.labelClass ? ' ' + ann.label.labelClass : '')\"\n                        [class.hidden]=\"!ann.label.formattedText && !resolveAnnotationTemplate(ann.id)\"\n                        [monaChartOverlayLabelMeasure]=\"'overlay:ann:' + ann.id\"\n                        data-mona-chart-export-role=\"annotation-label\"\n                        [attr.data-mona-chart-export-mode]=\"resolveAnnotationTemplate(ann.id) ? 'raster' : 'vector'\"\n                        [style.left.px]=\"annotationLabelLeft(ann)\"\n                        [style.top.px]=\"annotationLabelTop(ann)\"\n                        [style.transform]=\"annotationLabelTransform(ann)\">\n                        @if (resolveAnnotationTemplate(ann.id); as template) {\n                            @if (resolveAnnotationRegistration(ann.id); as reg) {\n                                <ng-container\n                                    [ngTemplateOutlet]=\"template.templateRef\"\n                                    [ngTemplateOutletContext]=\"{\n                                        $implicit: ann.data,\n                                        data: ann.data,\n                                        formattedX: ann.formattedX,\n                                        formattedY: ann.formattedY,\n                                        point: ann.point,\n                                        x: reg.x(),\n                                        xAxisId: ann.xAxisId,\n                                        y: reg.y(),\n                                        yAxisId: ann.yAxisId\n                                    }\" />\n                            }\n                        } @else {\n                            {{ ann.label.formattedText }}\n                        }\n                    </div>\n                }\n            }\n        }\n\n        <!-- DOM Cartesian Data Labels (Template Layer) -->\n        @if (cartesianDataLabelScene(); as labelScene) {\n            @for (label of labelScene.templateLabels; track label.seriesId + \":\" + label.markId) {\n                <div\n                    aria-hidden=\"true\"\n                    class=\"absolute pointer-events-none select-none whitespace-nowrap transition-opacity duration-[var(--mona-chart-animation-duration,300ms)] ease-[var(--mona-chart-animation-easing,cubic-bezier(0,0,0.2,1))]\"\n                    [class.opacity-0]=\"isAnimating()\"\n                    [attr.data-mona-chart-export-animation-suppression]=\"isAnimating() ? 'opacity' : null\"\n                    [monaChartDataLabelMeasure]=\"label.seriesId + ':' + label.markId\"\n                    data-mona-chart-export-role=\"data-label-template\"\n                    data-mona-chart-export-mode=\"raster\"\n                    [style.left.px]=\"label.bounds.x\"\n                    [style.top.px]=\"label.bounds.y\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"label.template.templateRef\"\n                        [ngTemplateOutletContext]=\"label.context\" />\n                </div>\n            }\n        }\n\n        <!-- Crosshair DOM Axis Labels -->\n        @if (crosshairState(); as chState) {\n            @if (cartesianXYScene(); as cart) {\n                @if (resolveCrosshairRegistration(); as chReg) {\n                    @if (chReg.enabled() !== false) {\n                        @if (chState.x && chReg.showAxisLabels() !== false && chReg.showXLabel() !== false) {\n                            <div\n                                aria-hidden=\"true\"\n                                [class]=\"crosshairLabelClasses()\"\n                                [monaChartOverlayLabelMeasure]=\"'crosshair:x'\"\n                                data-mona-chart-export-role=\"crosshair-label\"\n                                [attr.data-mona-chart-export-mode]=\"chReg.template?.() ? 'raster' : 'vector'\"\n                                [style.left.px]=\"crosshairXLabelLeft(cart, chState)\"\n                                [style.top.px]=\"crosshairXLabelTop(cart, chState)\"\n                                [style.transform]=\"crosshairXLabelTransform(cart, chState)\">\n                                @if (chReg.template?.(); as template) {\n                                    <ng-container\n                                        [ngTemplateOutlet]=\"template.templateRef\"\n                                        [ngTemplateOutletContext]=\"{\n                                            $implicit: chState.x.value,\n                                            axis: 'x',\n                                            axisId: chState.x.axisId,\n                                            coordinate: chState.x.coordinate,\n                                            formattedValue: chState.x.formattedValue,\n                                            snapped: chState.snapped,\n                                            source: chState.source,\n                                            value: chState.x.value\n                                        }\" />\n                                } @else {\n                                    {{ chState.x.formattedValue }}\n                                }\n                            </div>\n                        }\n\n                        @if (chState.y && chReg.showAxisLabels() !== false && chReg.showYLabel() !== false) {\n                            <div\n                                aria-hidden=\"true\"\n                                [class]=\"crosshairLabelClasses()\"\n                                [monaChartOverlayLabelMeasure]=\"'crosshair:y'\"\n                                data-mona-chart-export-role=\"crosshair-label\"\n                                [attr.data-mona-chart-export-mode]=\"chReg.template?.() ? 'raster' : 'vector'\"\n                                [style.left.px]=\"crosshairYLabelLeft(cart, chState)\"\n                                [style.top.px]=\"crosshairYLabelTop(cart, chState)\"\n                                [style.transform]=\"crosshairYLabelTransform(cart, chState)\">\n                                @if (chReg.template?.(); as template) {\n                                    <ng-container\n                                        [ngTemplateOutlet]=\"template.templateRef\"\n                                        [ngTemplateOutletContext]=\"{\n                                            $implicit: chState.y.value,\n                                            axis: 'y',\n                                            axisId: chState.y.axisId,\n                                            coordinate: chState.y.coordinate,\n                                            formattedValue: chState.y.formattedValue,\n                                            snapped: chState.snapped,\n                                            source: chState.source,\n                                            value: chState.y.value\n                                        }\" />\n                                } @else {\n                                    {{ chState.y.formattedValue }}\n                                }\n                            </div>\n                        }\n                    }\n                }\n            }\n        }\n\n        <!-- Tooltip overlay in plot-local coordinates -->\n        <ng-content select=\"mona-chart-tooltip\"></ng-content>\n\n        <!-- No Data Placeholder -->\n        @if (hasNoData()) {\n            <div\n                [class]=\"noDataClasses()\"\n                data-mona-chart-export-role=\"no-data\"\n                [attr.data-mona-chart-export-mode]=\"noDataTemplate() ? 'raster' : 'vector'\">\n                @if (noDataTemplate(); as template) {\n                    <ng-container [ngTemplateOutlet]=\"template.templateRef\" />\n                } @else {\n                    <span>{{ messages().noData }}</span>\n                }\n            </div>\n        }\n\n        <!-- Off-screen Accessible Live Region for Keyboard/Screen-reader Exploration -->\n        <div class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n            {{ activeAccessibilityText() }}\n        </div>\n    </div>\n\n    <!-- Projected Legend Outside Plot Container -->\n    <ng-content select=\"mona-chart-legend\"></ng-content>\n\n    <!-- Other Projected Content (Series, Axes, Templates) -->\n    <ng-content></ng-content>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { canvasElement: [{ type: i0.ViewChild, args: ["canvas", { isSignal: true }] }], noDataTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ChartNoDataTemplateDirective), { isSignal: true }] }], plotSurfaceElement: [{ type: i0.ViewChild, args: ["plotSurface", { isSignal: true }] }], subtitleTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ChartSubtitleTemplateDirective), { isSignal: true }] }], svgElement: [{ type: i0.ViewChild, args: ["svgSurface", { isSignal: true }] }], titleTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ChartTitleTemplateDirective), { isSignal: true }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], ariaDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-description", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], defaultViewport: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultViewport", required: false }] }], downsampling: [{ type: i0.Input, args: [{ isSignal: true, alias: "downsampling", required: false }] }], navigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigation", required: false }] }], pointClick: [{ type: i0.Output, args: ["pointClick"] }], pointFocusChange: [{ type: i0.Output, args: ["pointFocusChange"] }], renderer: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderer", required: false }] }], seriesVisibilityChange: [{ type: i0.Output, args: ["seriesVisibilityChange"] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], synchronization: [{ type: i0.Input, args: [{ isSignal: true, alias: "synchronization", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], titleAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleAlign", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], viewport: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewport", required: false }] }], viewportChange: [{ type: i0.Output, args: ["viewportChange"] }], xField: [{ type: i0.Input, args: [{ isSignal: true, alias: "xField", required: false }] }] } });
 
 class ChartAxisLabelTemplateDirective {
@@ -59498,9 +59533,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 class ChartLegendComponent {
     #chartContext;
     #destroyRef;
+    #direction;
+    #i18n;
     constructor() {
         this.#chartContext = inject(CHART_CONTEXT, { optional: true });
         this.#destroyRef = inject(DestroyRef);
+        this.#direction = injectComponentDirection();
+        this.#i18n = inject(MonaI18nService);
+        this.messages = this.#i18n.componentMessages("chart", CHART_DEFAULT_MESSAGES);
         this.containerClasses = computed(() => twMerge(chartLegendBaseThemeVariants({ position: this.position() }), this.userClass()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "containerClasses" }] : /* istanbul ignore next */ []));
         this.gradientCss = computed(() => {
@@ -59508,7 +59548,7 @@ class ChartLegendComponent {
             if (!scale || !scale.stops || scale.stops.length === 0)
                 return "";
             const isVertical = this.position() === "left" || this.position() === "right";
-            const dir = isVertical ? "to top" : "to right";
+            const dir = isVertical ? "to top" : this.#direction() === "rtl" ? "to left" : "to right";
             const stopStrs = scale.stops.map(s => `${s.color} ${Math.round(s.offset * 100)}%`).join(", ");
             return `linear-gradient(${dir}, ${stopStrs})`;
         }, /* @ts-ignore */
@@ -59540,13 +59580,14 @@ class ChartLegendComponent {
         ...(ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
         this.legendAriaLabel = computed(() => {
             const scale = this.legendScale();
+            const msgs = this.messages();
             if (!scale)
-                return "Chart legend";
-            const title = scale.title || "Color scale";
+                return msgs.chartLegend;
+            const title = scale.title || msgs.colorScale;
             if (scale.mode === "diverging" && scale.formattedMidpoint) {
-                return `${title}, ${scale.formattedMin} to ${scale.formattedMidpoint} to ${scale.formattedMax}`;
+                return msgs.divergingRangeDescription(title, scale.formattedMin, scale.formattedMidpoint, scale.formattedMax);
             }
-            return `${title}, ${scale.formattedMin} to ${scale.formattedMax}`;
+            return msgs.rangeDescription(title, scale.formattedMin, scale.formattedMax);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "legendAriaLabel" }] : /* istanbul ignore next */ []));
         this.legendItems = computed(() => this.#chartContext?.legendItems() ?? [], /* @ts-ignore */
@@ -59609,14 +59650,14 @@ class ChartLegendComponent {
         this.#chartContext.toggleLegendItem(item);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ChartLegendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ChartLegendComponent, isStandalone: true, selector: "mona-chart-legend", inputs: { interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "style.order": "hostOrder()" } }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ChartLegendItemTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (isColorScaleMode() && legendScale(); as scale) {\n    <div\n        [class]=\"containerClasses()\"\n        [attr.aria-label]=\"legendAriaLabel()\"\n        role=\"region\"\n        data-mona-chart-export-role=\"legend-color-scale\"\n        data-mona-chart-export-mode=\"raster\">\n        @if (position() === \"left\" || position() === \"right\") {\n            <div class=\"flex flex-col items-center gap-1.5 px-1 py-2\">\n                @if (scale.title) {\n                    <div class=\"text-xs font-semibold text-foreground text-center\">{{ scale.title }}</div>\n                }\n                <div class=\"flex items-center gap-2\">\n                    <div\n                        class=\"w-2.5 h-32 rounded-full border border-border/50 flex-shrink-0\"\n                        [style.background]=\"gradientCss()\"\n                        aria-hidden=\"true\"></div>\n                    <div class=\"flex flex-col justify-between h-32 text-[11px] font-medium text-muted-foreground\">\n                        <span class=\"text-left\">{{ scale.formattedMax }}</span>\n                        @if (scale.formattedMidpoint) {\n                            <span class=\"text-left\">{{ scale.formattedMidpoint }}</span>\n                        }\n                        <span class=\"text-left\">{{ scale.formattedMin }}</span>\n                    </div>\n                </div>\n            </div>\n        } @else {\n            <div class=\"flex flex-col items-center gap-1.5 py-1\">\n                @if (scale.title) {\n                    <div class=\"text-xs font-semibold text-foreground\">{{ scale.title }}</div>\n                }\n                <div class=\"flex flex-col items-center gap-1 w-48 sm:w-60\">\n                    <div\n                        class=\"h-2.5 w-full rounded-full border border-border/50 flex-shrink-0\"\n                        [style.background]=\"gradientCss()\"\n                        aria-hidden=\"true\"></div>\n                    <div class=\"flex justify-between w-full text-[11px] font-medium text-muted-foreground\">\n                        @if (scale.ticks && scale.ticks.length > 0) {\n                            @for (tick of scale.ticks; track tick.value) {\n                                <span\n                                    [style.text-align]=\"\n                                        tick.offset === 0 ? 'left' : tick.offset === 1 ? 'right' : 'center'\n                                    \">\n                                    {{ tick.formattedValue }}\n                                </span>\n                            }\n                        } @else {\n                            <span class=\"text-left\">{{ scale.formattedMin }}</span>\n                            @if (scale.formattedMidpoint) {\n                                <span class=\"text-center\">{{ scale.formattedMidpoint }}</span>\n                            }\n                            <span class=\"text-right\">{{ scale.formattedMax }}</span>\n                        }\n                    </div>\n                </div>\n            </div>\n        }\n    </div>\n} @else {\n    <div [class]=\"containerClasses()\">\n        @for (item of legendItems(); track item.itemId) {\n            @if (itemTemplate(); as template) {\n                <div\n                    (click)=\"onItemClick(item)\"\n                    (keydown.enter)=\"onItemClick(item)\"\n                    (keydown.space)=\"onItemClick(item); $event.preventDefault()\"\n                    [class]=\"itemClasses(item)\"\n                    [attr.role]=\"isItemInteractive(item) ? 'button' : null\"\n                    [attr.tabindex]=\"isItemInteractive(item) ? 0 : null\"\n                    [attr.aria-pressed]=\"isItemInteractive(item) ? item.visible : null\"\n                    data-mona-chart-export-role=\"legend-item-template\"\n                    data-mona-chart-export-mode=\"raster\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"template.templateRef\"\n                        [ngTemplateOutletContext]=\"{\n                            $implicit: item,\n                            color: item.color,\n                            dataIndex: item.dataIndex,\n                            datum: item.datum,\n                            interactive: isItemInteractive(item),\n                            itemId: item.itemId,\n                            kind: item.kind,\n                            name: item.name,\n                            percentage: item.percentage,\n                            secondaryColor: item.secondaryColor,\n                            series: item,\n                            seriesId: item.seriesId,\n                            seriesType: item.seriesType,\n                            value: item.value,\n                            visible: item.visible\n                        }\" />\n                </div>\n            } @else {\n                @if (isItemInteractive(item)) {\n                    <button\n                        type=\"button\"\n                        (click)=\"onItemClick(item)\"\n                        [class]=\"itemClasses(item)\"\n                        [attr.aria-pressed]=\"item.visible\">\n                        <span\n                            class=\"inline-block h-2.5 w-2.5 rounded-full flex-shrink-0\"\n                            [style.background]=\"\n                                item.secondaryColor\n                                    ? 'linear-gradient(135deg, ' + item.color + ' 50%, ' + item.secondaryColor + ' 50%)'\n                                    : item.color\n                            \"\n                            [style.backgroundColor]=\"item.color\"\n                            data-mona-chart-export-role=\"legend-bullet\"></span>\n                        <span class=\"text-xs font-medium\" data-mona-chart-export-role=\"legend-text\">{{\n                            item.name\n                        }}</span>\n                    </button>\n                } @else {\n                    <div [class]=\"itemClasses(item)\">\n                        <span\n                            class=\"inline-block h-2.5 w-2.5 rounded-full flex-shrink-0\"\n                            [style.background]=\"\n                                item.secondaryColor\n                                    ? 'linear-gradient(135deg, ' + item.color + ' 50%, ' + item.secondaryColor + ' 50%)'\n                                    : item.color\n                            \"\n                            [style.backgroundColor]=\"item.color\"\n                            data-mona-chart-export-role=\"legend-bullet\"></span>\n                        <span class=\"text-xs font-medium\" data-mona-chart-export-role=\"legend-text\">{{\n                            item.name\n                        }}</span>\n                    </div>\n                }\n            }\n        }\n    </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ChartLegendComponent, isStandalone: true, selector: "mona-chart-legend", inputs: { interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "style.order": "hostOrder()" } }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ChartLegendItemTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (isColorScaleMode() && legendScale(); as scale) {\n    <div\n        [class]=\"containerClasses()\"\n        [attr.aria-label]=\"legendAriaLabel()\"\n        role=\"region\"\n        data-mona-chart-export-role=\"legend-color-scale\"\n        data-mona-chart-export-mode=\"raster\">\n        @if (position() === \"left\" || position() === \"right\") {\n            <div class=\"flex flex-col items-center gap-1.5 px-1 py-2\">\n                @if (scale.title) {\n                    <div class=\"text-xs font-semibold text-foreground text-center\">{{ scale.title }}</div>\n                }\n                <div class=\"flex items-center gap-2\">\n                    <div\n                        class=\"w-2.5 h-32 rounded-full border border-border/50 flex-shrink-0\"\n                        [style.background]=\"gradientCss()\"\n                        aria-hidden=\"true\"></div>\n                    <div class=\"flex flex-col justify-between h-32 text-[11px] font-medium text-muted-foreground\">\n                        <span class=\"text-start\">{{ scale.formattedMax }}</span>\n                        @if (scale.formattedMidpoint) {\n                            <span class=\"text-start\">{{ scale.formattedMidpoint }}</span>\n                        }\n                        <span class=\"text-start\">{{ scale.formattedMin }}</span>\n                    </div>\n                </div>\n            </div>\n        } @else {\n            <div class=\"flex flex-col items-center gap-1.5 py-1\">\n                @if (scale.title) {\n                    <div class=\"text-xs font-semibold text-foreground\">{{ scale.title }}</div>\n                }\n                <div class=\"flex flex-col items-center gap-1 w-48 sm:w-60\">\n                    <div\n                        class=\"h-2.5 w-full rounded-full border border-border/50 flex-shrink-0\"\n                        [style.background]=\"gradientCss()\"\n                        aria-hidden=\"true\"></div>\n                    <div class=\"flex justify-between w-full text-[11px] font-medium text-muted-foreground\">\n                        @if (scale.ticks && scale.ticks.length > 0) {\n                            @for (tick of scale.ticks; track tick.value) {\n                                <span\n                                    [style.text-align]=\"\n                                        tick.offset === 0 ? 'start' : tick.offset === 1 ? 'end' : 'center'\n                                    \">\n                                    {{ tick.formattedValue }}\n                                </span>\n                            }\n                        } @else {\n                            <span class=\"text-start\">{{ scale.formattedMin }}</span>\n                            @if (scale.formattedMidpoint) {\n                                <span class=\"text-center\">{{ scale.formattedMidpoint }}</span>\n                            }\n                            <span class=\"text-end\">{{ scale.formattedMax }}</span>\n                        }\n                    </div>\n                </div>\n            </div>\n        }\n    </div>\n} @else {\n    <div [class]=\"containerClasses()\">\n        @for (item of legendItems(); track item.itemId) {\n            @if (itemTemplate(); as template) {\n                <div\n                    (click)=\"onItemClick(item)\"\n                    (keydown.enter)=\"onItemClick(item)\"\n                    (keydown.space)=\"onItemClick(item); $event.preventDefault()\"\n                    [class]=\"itemClasses(item)\"\n                    [attr.role]=\"isItemInteractive(item) ? 'button' : null\"\n                    [attr.tabindex]=\"isItemInteractive(item) ? 0 : null\"\n                    [attr.aria-pressed]=\"isItemInteractive(item) ? item.visible : null\"\n                    data-mona-chart-export-role=\"legend-item-template\"\n                    data-mona-chart-export-mode=\"raster\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"template.templateRef\"\n                        [ngTemplateOutletContext]=\"{\n                            $implicit: item,\n                            color: item.color,\n                            dataIndex: item.dataIndex,\n                            datum: item.datum,\n                            interactive: isItemInteractive(item),\n                            itemId: item.itemId,\n                            kind: item.kind,\n                            name: item.name,\n                            percentage: item.percentage,\n                            secondaryColor: item.secondaryColor,\n                            series: item,\n                            seriesId: item.seriesId,\n                            seriesType: item.seriesType,\n                            value: item.value,\n                            visible: item.visible\n                        }\" />\n                </div>\n            } @else {\n                @if (isItemInteractive(item)) {\n                    <button\n                        type=\"button\"\n                        (click)=\"onItemClick(item)\"\n                        [class]=\"itemClasses(item)\"\n                        [attr.aria-pressed]=\"item.visible\">\n                        <span\n                            class=\"inline-block h-2.5 w-2.5 rounded-full flex-shrink-0\"\n                            [style.background]=\"\n                                item.secondaryColor\n                                    ? 'linear-gradient(135deg, ' + item.color + ' 50%, ' + item.secondaryColor + ' 50%)'\n                                    : item.color\n                            \"\n                            [style.backgroundColor]=\"item.color\"\n                            data-mona-chart-export-role=\"legend-bullet\"></span>\n                        <span class=\"text-xs font-medium\" data-mona-chart-export-role=\"legend-text\">{{\n                            item.name\n                        }}</span>\n                    </button>\n                } @else {\n                    <div [class]=\"itemClasses(item)\">\n                        <span\n                            class=\"inline-block h-2.5 w-2.5 rounded-full flex-shrink-0\"\n                            [style.background]=\"\n                                item.secondaryColor\n                                    ? 'linear-gradient(135deg, ' + item.color + ' 50%, ' + item.secondaryColor + ' 50%)'\n                                    : item.color\n                            \"\n                            [style.backgroundColor]=\"item.color\"\n                            data-mona-chart-export-role=\"legend-bullet\"></span>\n                        <span class=\"text-xs font-medium\" data-mona-chart-export-role=\"legend-text\">{{\n                            item.name\n                        }}</span>\n                    </div>\n                }\n            }\n        }\n    </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ChartLegendComponent, decorators: [{
             type: Component,
             args: [{ selector: "mona-chart-legend", imports: [NgTemplateOutlet], host: {
                         "[class]": "hostClasses()",
                         "[style.order]": "hostOrder()"
-                    }, template: "@if (isColorScaleMode() && legendScale(); as scale) {\n    <div\n        [class]=\"containerClasses()\"\n        [attr.aria-label]=\"legendAriaLabel()\"\n        role=\"region\"\n        data-mona-chart-export-role=\"legend-color-scale\"\n        data-mona-chart-export-mode=\"raster\">\n        @if (position() === \"left\" || position() === \"right\") {\n            <div class=\"flex flex-col items-center gap-1.5 px-1 py-2\">\n                @if (scale.title) {\n                    <div class=\"text-xs font-semibold text-foreground text-center\">{{ scale.title }}</div>\n                }\n                <div class=\"flex items-center gap-2\">\n                    <div\n                        class=\"w-2.5 h-32 rounded-full border border-border/50 flex-shrink-0\"\n                        [style.background]=\"gradientCss()\"\n                        aria-hidden=\"true\"></div>\n                    <div class=\"flex flex-col justify-between h-32 text-[11px] font-medium text-muted-foreground\">\n                        <span class=\"text-left\">{{ scale.formattedMax }}</span>\n                        @if (scale.formattedMidpoint) {\n                            <span class=\"text-left\">{{ scale.formattedMidpoint }}</span>\n                        }\n                        <span class=\"text-left\">{{ scale.formattedMin }}</span>\n                    </div>\n                </div>\n            </div>\n        } @else {\n            <div class=\"flex flex-col items-center gap-1.5 py-1\">\n                @if (scale.title) {\n                    <div class=\"text-xs font-semibold text-foreground\">{{ scale.title }}</div>\n                }\n                <div class=\"flex flex-col items-center gap-1 w-48 sm:w-60\">\n                    <div\n                        class=\"h-2.5 w-full rounded-full border border-border/50 flex-shrink-0\"\n                        [style.background]=\"gradientCss()\"\n                        aria-hidden=\"true\"></div>\n                    <div class=\"flex justify-between w-full text-[11px] font-medium text-muted-foreground\">\n                        @if (scale.ticks && scale.ticks.length > 0) {\n                            @for (tick of scale.ticks; track tick.value) {\n                                <span\n                                    [style.text-align]=\"\n                                        tick.offset === 0 ? 'left' : tick.offset === 1 ? 'right' : 'center'\n                                    \">\n                                    {{ tick.formattedValue }}\n                                </span>\n                            }\n                        } @else {\n                            <span class=\"text-left\">{{ scale.formattedMin }}</span>\n                            @if (scale.formattedMidpoint) {\n                                <span class=\"text-center\">{{ scale.formattedMidpoint }}</span>\n                            }\n                            <span class=\"text-right\">{{ scale.formattedMax }}</span>\n                        }\n                    </div>\n                </div>\n            </div>\n        }\n    </div>\n} @else {\n    <div [class]=\"containerClasses()\">\n        @for (item of legendItems(); track item.itemId) {\n            @if (itemTemplate(); as template) {\n                <div\n                    (click)=\"onItemClick(item)\"\n                    (keydown.enter)=\"onItemClick(item)\"\n                    (keydown.space)=\"onItemClick(item); $event.preventDefault()\"\n                    [class]=\"itemClasses(item)\"\n                    [attr.role]=\"isItemInteractive(item) ? 'button' : null\"\n                    [attr.tabindex]=\"isItemInteractive(item) ? 0 : null\"\n                    [attr.aria-pressed]=\"isItemInteractive(item) ? item.visible : null\"\n                    data-mona-chart-export-role=\"legend-item-template\"\n                    data-mona-chart-export-mode=\"raster\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"template.templateRef\"\n                        [ngTemplateOutletContext]=\"{\n                            $implicit: item,\n                            color: item.color,\n                            dataIndex: item.dataIndex,\n                            datum: item.datum,\n                            interactive: isItemInteractive(item),\n                            itemId: item.itemId,\n                            kind: item.kind,\n                            name: item.name,\n                            percentage: item.percentage,\n                            secondaryColor: item.secondaryColor,\n                            series: item,\n                            seriesId: item.seriesId,\n                            seriesType: item.seriesType,\n                            value: item.value,\n                            visible: item.visible\n                        }\" />\n                </div>\n            } @else {\n                @if (isItemInteractive(item)) {\n                    <button\n                        type=\"button\"\n                        (click)=\"onItemClick(item)\"\n                        [class]=\"itemClasses(item)\"\n                        [attr.aria-pressed]=\"item.visible\">\n                        <span\n                            class=\"inline-block h-2.5 w-2.5 rounded-full flex-shrink-0\"\n                            [style.background]=\"\n                                item.secondaryColor\n                                    ? 'linear-gradient(135deg, ' + item.color + ' 50%, ' + item.secondaryColor + ' 50%)'\n                                    : item.color\n                            \"\n                            [style.backgroundColor]=\"item.color\"\n                            data-mona-chart-export-role=\"legend-bullet\"></span>\n                        <span class=\"text-xs font-medium\" data-mona-chart-export-role=\"legend-text\">{{\n                            item.name\n                        }}</span>\n                    </button>\n                } @else {\n                    <div [class]=\"itemClasses(item)\">\n                        <span\n                            class=\"inline-block h-2.5 w-2.5 rounded-full flex-shrink-0\"\n                            [style.background]=\"\n                                item.secondaryColor\n                                    ? 'linear-gradient(135deg, ' + item.color + ' 50%, ' + item.secondaryColor + ' 50%)'\n                                    : item.color\n                            \"\n                            [style.backgroundColor]=\"item.color\"\n                            data-mona-chart-export-role=\"legend-bullet\"></span>\n                        <span class=\"text-xs font-medium\" data-mona-chart-export-role=\"legend-text\">{{\n                            item.name\n                        }}</span>\n                    </div>\n                }\n            }\n        }\n    </div>\n}\n" }]
+                    }, template: "@if (isColorScaleMode() && legendScale(); as scale) {\n    <div\n        [class]=\"containerClasses()\"\n        [attr.aria-label]=\"legendAriaLabel()\"\n        role=\"region\"\n        data-mona-chart-export-role=\"legend-color-scale\"\n        data-mona-chart-export-mode=\"raster\">\n        @if (position() === \"left\" || position() === \"right\") {\n            <div class=\"flex flex-col items-center gap-1.5 px-1 py-2\">\n                @if (scale.title) {\n                    <div class=\"text-xs font-semibold text-foreground text-center\">{{ scale.title }}</div>\n                }\n                <div class=\"flex items-center gap-2\">\n                    <div\n                        class=\"w-2.5 h-32 rounded-full border border-border/50 flex-shrink-0\"\n                        [style.background]=\"gradientCss()\"\n                        aria-hidden=\"true\"></div>\n                    <div class=\"flex flex-col justify-between h-32 text-[11px] font-medium text-muted-foreground\">\n                        <span class=\"text-start\">{{ scale.formattedMax }}</span>\n                        @if (scale.formattedMidpoint) {\n                            <span class=\"text-start\">{{ scale.formattedMidpoint }}</span>\n                        }\n                        <span class=\"text-start\">{{ scale.formattedMin }}</span>\n                    </div>\n                </div>\n            </div>\n        } @else {\n            <div class=\"flex flex-col items-center gap-1.5 py-1\">\n                @if (scale.title) {\n                    <div class=\"text-xs font-semibold text-foreground\">{{ scale.title }}</div>\n                }\n                <div class=\"flex flex-col items-center gap-1 w-48 sm:w-60\">\n                    <div\n                        class=\"h-2.5 w-full rounded-full border border-border/50 flex-shrink-0\"\n                        [style.background]=\"gradientCss()\"\n                        aria-hidden=\"true\"></div>\n                    <div class=\"flex justify-between w-full text-[11px] font-medium text-muted-foreground\">\n                        @if (scale.ticks && scale.ticks.length > 0) {\n                            @for (tick of scale.ticks; track tick.value) {\n                                <span\n                                    [style.text-align]=\"\n                                        tick.offset === 0 ? 'start' : tick.offset === 1 ? 'end' : 'center'\n                                    \">\n                                    {{ tick.formattedValue }}\n                                </span>\n                            }\n                        } @else {\n                            <span class=\"text-start\">{{ scale.formattedMin }}</span>\n                            @if (scale.formattedMidpoint) {\n                                <span class=\"text-center\">{{ scale.formattedMidpoint }}</span>\n                            }\n                            <span class=\"text-end\">{{ scale.formattedMax }}</span>\n                        }\n                    </div>\n                </div>\n            </div>\n        }\n    </div>\n} @else {\n    <div [class]=\"containerClasses()\">\n        @for (item of legendItems(); track item.itemId) {\n            @if (itemTemplate(); as template) {\n                <div\n                    (click)=\"onItemClick(item)\"\n                    (keydown.enter)=\"onItemClick(item)\"\n                    (keydown.space)=\"onItemClick(item); $event.preventDefault()\"\n                    [class]=\"itemClasses(item)\"\n                    [attr.role]=\"isItemInteractive(item) ? 'button' : null\"\n                    [attr.tabindex]=\"isItemInteractive(item) ? 0 : null\"\n                    [attr.aria-pressed]=\"isItemInteractive(item) ? item.visible : null\"\n                    data-mona-chart-export-role=\"legend-item-template\"\n                    data-mona-chart-export-mode=\"raster\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"template.templateRef\"\n                        [ngTemplateOutletContext]=\"{\n                            $implicit: item,\n                            color: item.color,\n                            dataIndex: item.dataIndex,\n                            datum: item.datum,\n                            interactive: isItemInteractive(item),\n                            itemId: item.itemId,\n                            kind: item.kind,\n                            name: item.name,\n                            percentage: item.percentage,\n                            secondaryColor: item.secondaryColor,\n                            series: item,\n                            seriesId: item.seriesId,\n                            seriesType: item.seriesType,\n                            value: item.value,\n                            visible: item.visible\n                        }\" />\n                </div>\n            } @else {\n                @if (isItemInteractive(item)) {\n                    <button\n                        type=\"button\"\n                        (click)=\"onItemClick(item)\"\n                        [class]=\"itemClasses(item)\"\n                        [attr.aria-pressed]=\"item.visible\">\n                        <span\n                            class=\"inline-block h-2.5 w-2.5 rounded-full flex-shrink-0\"\n                            [style.background]=\"\n                                item.secondaryColor\n                                    ? 'linear-gradient(135deg, ' + item.color + ' 50%, ' + item.secondaryColor + ' 50%)'\n                                    : item.color\n                            \"\n                            [style.backgroundColor]=\"item.color\"\n                            data-mona-chart-export-role=\"legend-bullet\"></span>\n                        <span class=\"text-xs font-medium\" data-mona-chart-export-role=\"legend-text\">{{\n                            item.name\n                        }}</span>\n                    </button>\n                } @else {\n                    <div [class]=\"itemClasses(item)\">\n                        <span\n                            class=\"inline-block h-2.5 w-2.5 rounded-full flex-shrink-0\"\n                            [style.background]=\"\n                                item.secondaryColor\n                                    ? 'linear-gradient(135deg, ' + item.color + ' 50%, ' + item.secondaryColor + ' 50%)'\n                                    : item.color\n                            \"\n                            [style.backgroundColor]=\"item.color\"\n                            data-mona-chart-export-role=\"legend-bullet\"></span>\n                        <span class=\"text-xs font-medium\" data-mona-chart-export-role=\"legend-text\">{{\n                            item.name\n                        }}</span>\n                    </div>\n                }\n            }\n        }\n    </div>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ChartLegendItemTemplateDirective), { isSignal: true }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 class ChartTooltipTemplateDirective {
@@ -59636,17 +59677,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 class ChartTooltipComponent {
     #chartContext;
     #destroyRef;
+    #i18n;
     #measuredHeight;
     #measuredWidth;
     #tooltipResizeObserver;
     constructor() {
         this.#chartContext = inject(CHART_CONTEXT, { optional: true });
         this.#destroyRef = inject(DestroyRef);
+        this.#i18n = inject(MonaI18nService);
         this.#measuredHeight = signal(60, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#measuredHeight" }] : /* istanbul ignore next */ []));
         this.#measuredWidth = signal(180, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#measuredWidth" }] : /* istanbul ignore next */ []));
         this.#tooltipResizeObserver = null;
+        this.messages = this.#i18n.componentMessages("chart", CHART_DEFAULT_MESSAGES);
         this.customTemplate = contentChild(ChartTooltipTemplateDirective, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "customTemplate" }] : /* istanbul ignore next */ []));
         this.placement = computed(() => {
@@ -59768,14 +59812,30 @@ class ChartTooltipComponent {
         });
         this.#destroyRef.onDestroy(unregister);
     }
+    financialDirectionLabel(dir) {
+        if (dir === "rising") {
+            return this.messages().rising;
+        }
+        if (dir === "falling") {
+            return this.messages().falling;
+        }
+        return this.messages().unchanged;
+    }
+    formatPercent(value) {
+        return formatNumber(value, this.#i18n.localeId(), {
+            style: "percent",
+            minimumFractionDigits: 1,
+            maximumFractionDigits: 1
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ChartTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ChartTooltipComponent, isStandalone: true, selector: "mona-chart-tooltip", inputs: { enabled: { classPropertyName: "enabled", publicName: "enabled", isSignal: true, isRequired: false, transformFunction: null }, shared: { classPropertyName: "shared", publicName: "shared", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, queries: [{ propertyName: "customTemplate", first: true, predicate: ChartTooltipTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "tooltipContainer", first: true, predicate: ["tooltipContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (enabled() && tooltipContext(); as context) {\n    <div\n        #tooltipContainer\n        [class]=\"tooltipClasses()\"\n        [style.left.px]=\"placement().left\"\n        [style.top.px]=\"placement().top\"\n        [attr.data-placement]=\"placement().placement\">\n        @if (customTemplate(); as template) {\n            <ng-container [ngTemplateOutlet]=\"template.templateRef\" [ngTemplateOutletContext]=\"context\" />\n        } @else if (context.point.seriesType === \"heatmap\") {\n            <div class=\"flex items-center gap-1.5 mb-1\">\n                <span\n                    class=\"inline-block h-2 w-2 rounded-full flex-shrink-0\"\n                    [style.background-color]=\"context.point.color\"></span>\n                <span class=\"font-semibold text-foreground\">{{ context.point.seriesName }}</span>\n            </div>\n            <div class=\"flex flex-col gap-0.5 text-xs text-muted-foreground\">\n                <div>\n                    <span class=\"font-medium text-foreground\">{{ context.point.formattedX }}</span\n                    >,\n                    <span class=\"font-medium text-foreground\">{{\n                        context.point.formattedYCategory || context.point.categoryY\n                    }}</span>\n                </div>\n                <div>\n                    Value: <span class=\"font-medium text-foreground\">{{ context.point.formattedY }}</span>\n                </div>\n            </div>\n        } @else if (context.point.seriesType === \"pie\" || context.point.seriesType === \"donut\") {\n            <div class=\"flex items-center gap-1.5 mb-1\">\n                <span\n                    class=\"inline-block h-2 w-2 rounded-full flex-shrink-0\"\n                    [style.background-color]=\"context.point.color\"></span>\n                <span class=\"font-semibold text-foreground\">{{\n                    context.point.formattedCategory || context.point.seriesName\n                }}</span>\n            </div>\n            <div class=\"flex items-center gap-2 text-xs text-muted-foreground\">\n                <span class=\"font-medium text-foreground\">{{ context.point.formattedY }}</span>\n                @if (context.point.formattedPercentage) {\n                    <span>\u00B7</span>\n                    <span>{{ context.point.formattedPercentage }}</span>\n                }\n            </div>\n        } @else if (context.point.seriesType === \"gauge\") {\n            <div class=\"flex items-center gap-1.5 mb-1\">\n                <span\n                    class=\"inline-block h-2 w-2 rounded-full flex-shrink-0\"\n                    [style.background-color]=\"context.point.color\"></span>\n                <span class=\"font-semibold text-foreground\">{{ context.point.seriesName }}</span>\n            </div>\n            <div class=\"flex flex-col gap-0.5 text-xs text-muted-foreground\">\n                <div>\n                    Value: <span class=\"font-medium text-foreground\">{{ context.point.formattedY }}</span>\n                </div>\n                @if (context.point.formattedRadialMin && context.point.formattedRadialMax) {\n                    <div>\n                        Range:\n                        <span class=\"font-medium text-foreground\"\n                            >{{ context.point.formattedRadialMin }} \u2013 {{ context.point.formattedRadialMax }}</span\n                        >\n                    </div>\n                }\n                @if (context.point.isClamped) {\n                    <div class=\"text-[11px] text-amber-500 font-medium\">Visual indicator clamped</div>\n                }\n            </div>\n        } @else if (context.point.seriesType === \"treemap\") {\n            <div class=\"flex items-center gap-1.5 mb-1\">\n                <span\n                    class=\"inline-block h-2 w-2 rounded-full flex-shrink-0\"\n                    [style.background-color]=\"context.point.color\"></span>\n                <span class=\"font-semibold text-foreground\">{{\n                    context.point.hierarchy?.formattedLabel || context.point.formattedX || context.point.seriesName\n                }}</span>\n            </div>\n            <div class=\"flex flex-col gap-0.5 text-xs text-muted-foreground\">\n                @if (context.point.hierarchy?.formattedPath && context.point.hierarchy!.formattedPath.length > 1) {\n                    <div class=\"text-[11px] truncate max-w-[220px]\">\n                        {{ context.point.hierarchy!.formattedPath.join(\" / \") }}\n                    </div>\n                }\n                <div class=\"flex items-center gap-2\">\n                    <span\n                        >Value: <span class=\"font-medium text-foreground\">{{ context.point.formattedY }}</span></span\n                    >\n                    @if (\n                        context.point.hierarchy?.percentageOfRoot !== undefined &&\n                        context.point.hierarchy!.percentageOfRoot > 0\n                    ) {\n                        <span>\u00B7</span>\n                        <span>{{ (context.point.hierarchy!.percentageOfRoot * 100).toFixed(1) }}%</span>\n                    }\n                </div>\n            </div>\n        } @else if (context.point.seriesType === \"funnel\") {\n            <div class=\"flex items-center gap-1.5 mb-1\">\n                <span\n                    class=\"inline-block h-2 w-2 rounded-full flex-shrink-0\"\n                    [style.background-color]=\"context.point.color\"></span>\n                <span class=\"font-semibold text-foreground\">{{\n                    context.point.formattedCategory || context.point.formattedX || context.point.seriesName\n                }}</span>\n            </div>\n            <div class=\"flex flex-col gap-0.5 text-xs text-muted-foreground\">\n                <div>\n                    Value:\n                    <span class=\"font-medium text-foreground\">{{\n                        context.point.funnel?.formattedValue || context.point.formattedY\n                    }}</span>\n                </div>\n                @if (context.point.funnel?.formattedConversionRate) {\n                    <div>\n                        Conversion:\n                        <span class=\"font-medium text-foreground\">{{\n                            context.point.funnel!.formattedConversionRate\n                        }}</span>\n                    </div>\n                }\n                @if (context.point.funnel?.formattedOverallConversionRate) {\n                    <div>\n                        Overall:\n                        <span class=\"font-medium text-foreground\">{{\n                            context.point.funnel!.formattedOverallConversionRate\n                        }}</span>\n                    </div>\n                }\n                @if (context.point.funnel?.dropOff !== undefined && context.point.funnel!.dropOff > 0) {\n                    <div>\n                        Drop-off: <span class=\"font-medium text-foreground\">{{ context.point.funnel!.dropOff }}</span>\n                    </div>\n                }\n            </div>\n        } @else if (context.point.seriesType === \"waterfall\") {\n            <div class=\"flex items-center gap-1.5 mb-1\">\n                <span\n                    class=\"inline-block h-2 w-2 rounded-full flex-shrink-0\"\n                    [style.background-color]=\"context.point.color\"></span>\n                <span class=\"font-semibold text-foreground\">{{\n                    context.point.formattedCategory || context.point.formattedX || context.point.seriesName\n                }}</span>\n            </div>\n            <div class=\"flex flex-col gap-0.5 text-xs text-muted-foreground\">\n                @if (context.point.waterfall?.kind === \"change\") {\n                    <div>\n                        Change:\n                        <span class=\"font-medium text-foreground\">{{\n                            context.point.waterfall?.formattedDelta || context.point.formattedY\n                        }}</span>\n                    </div>\n                    @if (\n                        context.point.waterfall?.formattedCumulativeBefore &&\n                        context.point.waterfall?.formattedCumulativeAfter\n                    ) {\n                        <div>\n                            Running Total:\n                            <span class=\"font-medium text-foreground\"\n                                >{{ context.point.waterfall!.formattedCumulativeBefore }} \u2192\n                                {{ context.point.waterfall!.formattedCumulativeAfter }}</span\n                            >\n                        </div>\n                    } @else if (context.point.waterfall?.formattedCumulativeAfter) {\n                        <div>\n                            Running Total:\n                            <span class=\"font-medium text-foreground\">{{\n                                context.point.waterfall!.formattedCumulativeAfter\n                            }}</span>\n                        </div>\n                    }\n                } @else {\n                    <div>\n                        Value: <span class=\"font-medium text-foreground\">{{ context.point.formattedY }}</span>\n                    </div>\n                }\n            </div>\n        } @else if (context.shared) {\n            <div class=\"mb-1 font-semibold text-foreground\">{{ context.point.formattedX }}</div>\n            <div class=\"flex flex-col gap-1.5\">\n                @for (pt of context.points; track pt.markId) {\n                    @if (pt.valueKind === \"ohlc\" || pt.seriesType === \"candlestick\" || pt.seriesType === \"ohlc\") {\n                        <div class=\"flex flex-col gap-0.5\">\n                            <div class=\"flex items-center justify-between gap-3\">\n                                <div class=\"flex items-center gap-1.5\">\n                                    <span\n                                        class=\"inline-block h-2 w-2 rounded-full flex-shrink-0\"\n                                        [style.background-color]=\"pt.color\"></span>\n                                    <span class=\"text-xs text-muted-foreground font-medium\">{{ pt.seriesName }}</span>\n                                </div>\n                                @if (pt.financialDirection; as dir) {\n                                    <span\n                                        class=\"text-[10px] font-medium px-1 py-0.2 rounded capitalize\"\n                                        [style.background-color]=\"\n                                            dir === 'rising'\n                                                ? 'rgba(34, 197, 94, 0.15)'\n                                                : dir === 'falling'\n                                                  ? 'rgba(239, 68, 68, 0.15)'\n                                                  : 'rgba(107, 114, 128, 0.15)'\n                                        \"\n                                        [style.color]=\"pt.color\">\n                                        {{ dir }}\n                                    </span>\n                                }\n                            </div>\n                            <div class=\"text-[11px] text-muted-foreground pl-3.5 flex items-center gap-1 flex-wrap\">\n                                <span\n                                    >O:\n                                    <span class=\"font-medium text-foreground\">{{\n                                        pt.formattedOpen || pt.open\n                                    }}</span></span\n                                >\n                                <span\n                                    >H:\n                                    <span class=\"font-medium text-foreground\">{{\n                                        pt.formattedHigh || pt.high\n                                    }}</span></span\n                                >\n                                <span\n                                    >L:\n                                    <span class=\"font-medium text-foreground\">{{\n                                        pt.formattedLow || pt.low\n                                    }}</span></span\n                                >\n                                <span\n                                    >C:\n                                    <span class=\"font-medium text-foreground\">{{\n                                        pt.formattedClose || pt.close\n                                    }}</span></span\n                                >\n                                @if (pt.formattedChange) {\n                                    <span class=\"font-medium text-foreground\">({{ pt.formattedChange }})</span>\n                                }\n                            </div>\n                        </div>\n                    } @else if (pt.valueKind === \"range\") {\n                        <div class=\"flex items-center justify-between gap-3\">\n                            <div class=\"flex items-center gap-1.5\">\n                                <span\n                                    class=\"inline-block h-2 w-2 rounded-full flex-shrink-0\"\n                                    [style.background-color]=\"pt.color\"></span>\n                                <span class=\"text-muted-foreground\">{{ pt.seriesName }}</span>\n                            </div>\n                            <div class=\"flex items-center gap-1\">\n                                <span class=\"font-medium text-foreground\"\n                                    >{{ pt.formattedFrom }} \u2013 {{ pt.formattedTo }}</span\n                                >\n                            </div>\n                        </div>\n                    } @else {\n                        <div class=\"flex items-center justify-between gap-3\">\n                            <div class=\"flex items-center gap-1.5\">\n                                <span\n                                    class=\"inline-block h-2 w-2 rounded-full flex-shrink-0\"\n                                    [style.background-color]=\"pt.color\"></span>\n                                <span class=\"text-muted-foreground\">{{ pt.seriesName }}</span>\n                            </div>\n                            <div class=\"flex items-center gap-1\">\n                                <span class=\"font-medium text-foreground\">{{ pt.formattedY }}</span>\n                                @if (pt.formattedStackPercentage) {\n                                    <span class=\"text-xs text-muted-foreground\"\n                                        >({{ pt.formattedStackPercentage }})</span\n                                    >\n                                }\n                                @if (pt.formattedSize) {\n                                    <span class=\"text-xs text-muted-foreground\">({{ pt.formattedSize }})</span>\n                                }\n                            </div>\n                        </div>\n                    }\n                }\n            </div>\n        } @else if (\n            context.point.seriesType === \"candlestick\" ||\n            context.point.seriesType === \"ohlc\" ||\n            context.point.valueKind === \"ohlc\"\n        ) {\n            <div class=\"flex items-center justify-between gap-2 mb-1\">\n                <div class=\"flex items-center gap-1.5\">\n                    <span\n                        class=\"inline-block h-2 w-2 rounded-full flex-shrink-0\"\n                        [style.background-color]=\"context.point.color\"></span>\n                    <span class=\"font-semibold text-foreground\">{{ context.point.seriesName }}</span>\n                </div>\n                @if (context.point.financialDirection; as dir) {\n                    <span\n                        class=\"text-[10px] font-medium px-1 py-0.5 rounded capitalize\"\n                        [style.background-color]=\"\n                            dir === 'rising'\n                                ? 'rgba(34, 197, 94, 0.15)'\n                                : dir === 'falling'\n                                  ? 'rgba(239, 68, 68, 0.15)'\n                                  : 'rgba(107, 114, 128, 0.15)'\n                        \"\n                        [style.color]=\"context.point.color\">\n                        {{ dir }}\n                    </span>\n                }\n            </div>\n            <div class=\"text-xs text-muted-foreground mb-1.5\">\n                <span class=\"font-medium text-foreground\">{{ context.point.formattedX }}</span>\n            </div>\n            <div class=\"grid grid-cols-2 gap-x-3 gap-y-0.5 text-xs\">\n                <div class=\"flex items-center justify-between gap-1.5\">\n                    <span class=\"text-muted-foreground\">Open:</span>\n                    <span class=\"font-medium text-foreground\">{{\n                        context.point.formattedOpen || context.point.open\n                    }}</span>\n                </div>\n                <div class=\"flex items-center justify-between gap-1.5\">\n                    <span class=\"text-muted-foreground\">High:</span>\n                    <span class=\"font-medium text-foreground\">{{\n                        context.point.formattedHigh || context.point.high\n                    }}</span>\n                </div>\n                <div class=\"flex items-center justify-between gap-1.5\">\n                    <span class=\"text-muted-foreground\">Low:</span>\n                    <span class=\"font-medium text-foreground\">{{\n                        context.point.formattedLow || context.point.low\n                    }}</span>\n                </div>\n                <div class=\"flex items-center justify-between gap-1.5\">\n                    <span class=\"text-muted-foreground\">Close:</span>\n                    <span class=\"font-medium text-foreground\">{{\n                        context.point.formattedClose || context.point.close\n                    }}</span>\n                </div>\n            </div>\n            @if (context.point.formattedChange || context.point.change !== undefined) {\n                <div class=\"mt-1 pt-1 border-t border-border/50 flex items-center justify-between text-xs\">\n                    <span class=\"text-muted-foreground\">Change:</span>\n                    <span class=\"font-medium text-foreground\">\n                        {{ context.point.formattedChange || context.point.change }}\n                        @if (context.point.formattedChangePercentage) {\n                            <span>({{ context.point.formattedChangePercentage }})</span>\n                        }\n                    </span>\n                </div>\n            }\n        } @else {\n            <div class=\"flex items-center gap-1.5 mb-0.5\">\n                <span class=\"inline-block h-2 w-2 rounded-full\" [style.background-color]=\"context.point.color\"></span>\n                <span class=\"font-semibold text-foreground\">{{ context.point.seriesName }}</span>\n            </div>\n            <div class=\"text-muted-foreground\">\n                {{ context.point.formattedX }}:\n                <span class=\"font-medium text-foreground\">{{ context.point.formattedY }}</span>\n                @if (context.point.formattedStackPercentage) {\n                    <span>\u00B7</span>\n                    <span class=\"font-medium text-foreground\">{{ context.point.formattedStackPercentage }}</span>\n                }\n                @if (context.point.formattedSize) {\n                    <span class=\"ml-1.5\"\n                        >(size: <span class=\"font-medium text-foreground\">{{ context.point.formattedSize }}</span\n                        >)</span\n                    >\n                }\n            </div>\n        }\n    </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ChartTooltipComponent, isStandalone: true, selector: "mona-chart-tooltip", inputs: { enabled: { classPropertyName: "enabled", publicName: "enabled", isSignal: true, isRequired: false, transformFunction: null }, shared: { classPropertyName: "shared", publicName: "shared", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, queries: [{ propertyName: "customTemplate", first: true, predicate: ChartTooltipTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "tooltipContainer", first: true, predicate: ["tooltipContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (enabled() && tooltipContext(); as context) {\n    <div\n        #tooltipContainer\n        [class]=\"tooltipClasses()\"\n        [style.left.px]=\"placement().left\"\n        [style.top.px]=\"placement().top\"\n        [attr.data-placement]=\"placement().placement\">\n        @if (customTemplate(); as template) {\n            <ng-container [ngTemplateOutlet]=\"template.templateRef\" [ngTemplateOutletContext]=\"context\" />\n        } @else if (context.point.seriesType === \"heatmap\") {\n            <div class=\"flex items-center gap-1.5 mb-1\">\n                <span\n                    class=\"inline-block h-2 w-2 rounded-full flex-shrink-0\"\n                    [style.background-color]=\"context.point.color\"></span>\n                <span class=\"font-semibold text-foreground\">{{ context.point.seriesName }}</span>\n            </div>\n            <div class=\"flex flex-col gap-0.5 text-xs text-muted-foreground\">\n                <div>\n                    <span class=\"font-medium text-foreground\">{{ context.point.formattedX }}</span\n                    >,\n                    <span class=\"font-medium text-foreground\">{{\n                        context.point.formattedYCategory || context.point.categoryY\n                    }}</span>\n                </div>\n                <div>\n                    {{ messages().value }}{{ messages().labelValueSeparator }} <span class=\"font-medium text-foreground\">{{ context.point.formattedY }}</span>\n                </div>\n            </div>\n        } @else if (context.point.seriesType === \"pie\" || context.point.seriesType === \"donut\") {\n            <div class=\"flex items-center gap-1.5 mb-1\">\n                <span\n                    class=\"inline-block h-2 w-2 rounded-full flex-shrink-0\"\n                    [style.background-color]=\"context.point.color\"></span>\n                <span class=\"font-semibold text-foreground\">{{\n                    context.point.formattedCategory || context.point.seriesName\n                }}</span>\n            </div>\n            <div class=\"flex items-center gap-2 text-xs text-muted-foreground\">\n                <span class=\"font-medium text-foreground\">{{ context.point.formattedY }}</span>\n                @if (context.point.formattedPercentage) {\n                    <span>\u00B7</span>\n                    <span>{{ context.point.formattedPercentage }}</span>\n                }\n            </div>\n        } @else if (context.point.seriesType === \"gauge\") {\n            <div class=\"flex items-center gap-1.5 mb-1\">\n                <span\n                    class=\"inline-block h-2 w-2 rounded-full flex-shrink-0\"\n                    [style.background-color]=\"context.point.color\"></span>\n                <span class=\"font-semibold text-foreground\">{{ context.point.seriesName }}</span>\n            </div>\n            <div class=\"flex flex-col gap-0.5 text-xs text-muted-foreground\">\n                <div>\n                    {{ messages().value }}{{ messages().labelValueSeparator }} <span class=\"font-medium text-foreground\">{{ context.point.formattedY }}</span>\n                </div>\n                @if (context.point.formattedRadialMin && context.point.formattedRadialMax) {\n                    <div>\n                        {{ messages().range }}{{ messages().labelValueSeparator }}\n                        <span class=\"font-medium text-foreground\"\n                            >{{ context.point.formattedRadialMin }} \u2013 {{ context.point.formattedRadialMax }}</span\n                        >\n                    </div>\n                }\n                @if (context.point.isClamped) {\n                    <div class=\"text-[11px] text-amber-500 font-medium\">{{ messages().visualIndicatorClamped }}</div>\n                }\n            </div>\n        } @else if (context.point.seriesType === \"treemap\") {\n            <div class=\"flex items-center gap-1.5 mb-1\">\n                <span\n                    class=\"inline-block h-2 w-2 rounded-full flex-shrink-0\"\n                    [style.background-color]=\"context.point.color\"></span>\n                <span class=\"font-semibold text-foreground\">{{\n                    context.point.hierarchy?.formattedLabel || context.point.formattedX || context.point.seriesName\n                }}</span>\n            </div>\n            <div class=\"flex flex-col gap-0.5 text-xs text-muted-foreground\">\n                @if (context.point.hierarchy?.formattedPath && context.point.hierarchy!.formattedPath.length > 1) {\n                    <div class=\"text-[11px] truncate max-w-[220px]\">\n                        {{ context.point.hierarchy!.formattedPath.join(\" / \") }}\n                    </div>\n                }\n                <div class=\"flex items-center gap-2\">\n                    <span\n                        >{{ messages().value }}{{ messages().labelValueSeparator }} <span class=\"font-medium text-foreground\">{{ context.point.formattedY }}</span></span\n                    >\n                    @if (\n                        context.point.hierarchy?.percentageOfRoot !== undefined &&\n                        context.point.hierarchy!.percentageOfRoot > 0\n                    ) {\n                        <span>\u00B7</span>\n                        <span>{{ formatPercent(context.point.hierarchy!.percentageOfRoot) }}</span>\n                    }\n                </div>\n            </div>\n        } @else if (context.point.seriesType === \"funnel\") {\n            <div class=\"flex items-center gap-1.5 mb-1\">\n                <span\n                    class=\"inline-block h-2 w-2 rounded-full flex-shrink-0\"\n                    [style.background-color]=\"context.point.color\"></span>\n                <span class=\"font-semibold text-foreground\">{{\n                    context.point.formattedCategory || context.point.formattedX || context.point.seriesName\n                }}</span>\n            </div>\n            <div class=\"flex flex-col gap-0.5 text-xs text-muted-foreground\">\n                <div>\n                    {{ messages().value }}{{ messages().labelValueSeparator }}\n                    <span class=\"font-medium text-foreground\">{{\n                        context.point.funnel?.formattedValue || context.point.formattedY\n                    }}</span>\n                </div>\n                @if (context.point.funnel?.formattedConversionRate) {\n                    <div>\n                        {{ messages().conversion }}{{ messages().labelValueSeparator }}\n                        <span class=\"font-medium text-foreground\">{{\n                            context.point.funnel!.formattedConversionRate\n                        }}</span>\n                    </div>\n                }\n                @if (context.point.funnel?.formattedOverallConversionRate) {\n                    <div>\n                        {{ messages().overall }}{{ messages().labelValueSeparator }}\n                        <span class=\"font-medium text-foreground\">{{\n                            context.point.funnel!.formattedOverallConversionRate\n                        }}</span>\n                    </div>\n                }\n                @if (context.point.funnel?.dropOff !== undefined && context.point.funnel!.dropOff > 0) {\n                    <div>\n                        {{ messages().dropOff }}{{ messages().labelValueSeparator }} <span class=\"font-medium text-foreground\">{{ context.point.funnel!.dropOff }}</span>\n                    </div>\n                }\n            </div>\n        } @else if (context.point.seriesType === \"waterfall\") {\n            <div class=\"flex items-center gap-1.5 mb-1\">\n                <span\n                    class=\"inline-block h-2 w-2 rounded-full flex-shrink-0\"\n                    [style.background-color]=\"context.point.color\"></span>\n                <span class=\"font-semibold text-foreground\">{{\n                    context.point.formattedCategory || context.point.formattedX || context.point.seriesName\n                }}</span>\n            </div>\n            <div class=\"flex flex-col gap-0.5 text-xs text-muted-foreground\">\n                @if (context.point.waterfall?.kind === \"change\") {\n                    <div>\n                        {{ messages().change }}{{ messages().labelValueSeparator }}\n                        <span class=\"font-medium text-foreground\">{{\n                            context.point.waterfall?.formattedDelta || context.point.formattedY\n                        }}</span>\n                    </div>\n                    @if (\n                        context.point.waterfall?.formattedCumulativeBefore &&\n                        context.point.waterfall?.formattedCumulativeAfter\n                    ) {\n                        <div>\n                            {{ messages().runningTotal }}{{ messages().labelValueSeparator }}\n                            <span class=\"font-medium text-foreground\"\n                                >{{ context.point.waterfall!.formattedCumulativeBefore }} \u2192\n                                {{ context.point.waterfall!.formattedCumulativeAfter }}</span\n                            >\n                        </div>\n                    } @else if (context.point.waterfall?.formattedCumulativeAfter) {\n                        <div>\n                            {{ messages().runningTotal }}{{ messages().labelValueSeparator }}\n                            <span class=\"font-medium text-foreground\">{{\n                                context.point.waterfall!.formattedCumulativeAfter\n                            }}</span>\n                        </div>\n                    }\n                } @else {\n                    <div>\n                        {{ messages().value }}{{ messages().labelValueSeparator }} <span class=\"font-medium text-foreground\">{{ context.point.formattedY }}</span>\n                    </div>\n                }\n            </div>\n        } @else if (context.shared) {\n            <div class=\"mb-1 font-semibold text-foreground\">{{ context.point.formattedX }}</div>\n            <div class=\"flex flex-col gap-1.5\">\n                @for (pt of context.points; track pt.markId) {\n                    @if (pt.valueKind === \"ohlc\" || pt.seriesType === \"candlestick\" || pt.seriesType === \"ohlc\") {\n                        <div class=\"flex flex-col gap-0.5\">\n                            <div class=\"flex items-center justify-between gap-3\">\n                                <div class=\"flex items-center gap-1.5\">\n                                    <span\n                                        class=\"inline-block h-2 w-2 rounded-full flex-shrink-0\"\n                                        [style.background-color]=\"pt.color\"></span>\n                                    <span class=\"text-xs text-muted-foreground font-medium\">{{ pt.seriesName }}</span>\n                                </div>\n                                @if (pt.financialDirection; as dir) {\n                                    <span\n                                        class=\"text-[10px] font-medium px-1 py-0.2 rounded\"\n                                        [style.background-color]=\"\n                                            dir === 'rising'\n                                                ? 'rgba(34, 197, 94, 0.15)'\n                                                : dir === 'falling'\n                                                  ? 'rgba(239, 68, 68, 0.15)'\n                                                  : 'rgba(107, 114, 128, 0.15)'\n                                        \"\n                                        [style.color]=\"pt.color\">\n                                        {{ financialDirectionLabel(dir) }}\n                                    </span>\n                                }\n                            </div>\n                            <div class=\"text-[11px] text-muted-foreground ps-3.5 flex items-center gap-1 flex-wrap\">\n                                <span\n                                    >{{ messages().openAbbreviation }}{{ messages().labelValueSeparator }}\n                                    <span class=\"font-medium text-foreground\">{{\n                                        pt.formattedOpen || pt.open\n                                    }}</span></span\n                                >\n                                <span\n                                    >{{ messages().highAbbreviation }}{{ messages().labelValueSeparator }}\n                                    <span class=\"font-medium text-foreground\">{{\n                                        pt.formattedHigh || pt.high\n                                    }}</span></span\n                                >\n                                <span\n                                    >{{ messages().lowAbbreviation }}{{ messages().labelValueSeparator }}\n                                    <span class=\"font-medium text-foreground\">{{\n                                        pt.formattedLow || pt.low\n                                    }}</span></span\n                                >\n                                <span\n                                    >{{ messages().closeAbbreviation }}{{ messages().labelValueSeparator }}\n                                    <span class=\"font-medium text-foreground\">{{\n                                        pt.formattedClose || pt.close\n                                    }}</span></span\n                                >\n                                @if (pt.formattedChange) {\n                                    <span class=\"font-medium text-foreground\">({{ pt.formattedChange }})</span>\n                                }\n                            </div>\n                        </div>\n                    } @else if (pt.valueKind === \"range\") {\n                        <div class=\"flex items-center justify-between gap-3\">\n                            <div class=\"flex items-center gap-1.5\">\n                                <span\n                                    class=\"inline-block h-2 w-2 rounded-full flex-shrink-0\"\n                                    [style.background-color]=\"pt.color\"></span>\n                                <span class=\"text-muted-foreground\">{{ pt.seriesName }}</span>\n                            </div>\n                            <div class=\"flex items-center gap-1\">\n                                <span class=\"font-medium text-foreground\"\n                                    >{{ pt.formattedFrom }} \u2013 {{ pt.formattedTo }}</span\n                                >\n                            </div>\n                        </div>\n                    } @else {\n                        <div class=\"flex items-center justify-between gap-3\">\n                            <div class=\"flex items-center gap-1.5\">\n                                <span\n                                    class=\"inline-block h-2 w-2 rounded-full flex-shrink-0\"\n                                    [style.background-color]=\"pt.color\"></span>\n                                <span class=\"text-muted-foreground\">{{ pt.seriesName }}</span>\n                            </div>\n                            <div class=\"flex items-center gap-1\">\n                                <span class=\"font-medium text-foreground\">{{ pt.formattedY }}</span>\n                                @if (pt.formattedStackPercentage) {\n                                    <span class=\"text-xs text-muted-foreground\"\n                                        >({{ pt.formattedStackPercentage }})</span\n                                    >\n                                }\n                                @if (pt.formattedSize) {\n                                    <span class=\"text-xs text-muted-foreground\">({{ pt.formattedSize }})</span>\n                                }\n                            </div>\n                        </div>\n                    }\n                }\n            </div>\n        } @else if (\n            context.point.seriesType === \"candlestick\" ||\n            context.point.seriesType === \"ohlc\" ||\n            context.point.valueKind === \"ohlc\"\n        ) {\n            <div class=\"flex items-center justify-between gap-2 mb-1\">\n                <div class=\"flex items-center gap-1.5\">\n                    <span\n                        class=\"inline-block h-2 w-2 rounded-full flex-shrink-0\"\n                        [style.background-color]=\"context.point.color\"></span>\n                    <span class=\"font-semibold text-foreground\">{{ context.point.seriesName }}</span>\n                </div>\n                @if (context.point.financialDirection; as dir) {\n                    <span\n                        class=\"text-[10px] font-medium px-1 py-0.5 rounded\"\n                        [style.background-color]=\"\n                            dir === 'rising'\n                                ? 'rgba(34, 197, 94, 0.15)'\n                                : dir === 'falling'\n                                  ? 'rgba(239, 68, 68, 0.15)'\n                                  : 'rgba(107, 114, 128, 0.15)'\n                        \"\n                        [style.color]=\"context.point.color\">\n                        {{ financialDirectionLabel(dir) }}\n                    </span>\n                }\n            </div>\n            <div class=\"text-xs text-muted-foreground mb-1.5\">\n                <span class=\"font-medium text-foreground\">{{ context.point.formattedX }}</span>\n            </div>\n            <div class=\"grid grid-cols-2 gap-x-3 gap-y-0.5 text-xs\">\n                <div class=\"flex items-center justify-between gap-1.5\">\n                    <span class=\"text-muted-foreground\">{{ messages().open }}{{ messages().labelValueSeparator }}</span>\n                    <span class=\"font-medium text-foreground\">{{\n                        context.point.formattedOpen || context.point.open\n                    }}</span>\n                </div>\n                <div class=\"flex items-center justify-between gap-1.5\">\n                    <span class=\"text-muted-foreground\">{{ messages().high }}{{ messages().labelValueSeparator }}</span>\n                    <span class=\"font-medium text-foreground\">{{\n                        context.point.formattedHigh || context.point.high\n                    }}</span>\n                </div>\n                <div class=\"flex items-center justify-between gap-1.5\">\n                    <span class=\"text-muted-foreground\">{{ messages().low }}{{ messages().labelValueSeparator }}</span>\n                    <span class=\"font-medium text-foreground\">{{\n                        context.point.formattedLow || context.point.low\n                    }}</span>\n                </div>\n                <div class=\"flex items-center justify-between gap-1.5\">\n                    <span class=\"text-muted-foreground\">{{ messages().close }}{{ messages().labelValueSeparator }}</span>\n                    <span class=\"font-medium text-foreground\">{{\n                        context.point.formattedClose || context.point.close\n                    }}</span>\n                </div>\n            </div>\n            @if (context.point.formattedChange || context.point.change !== undefined) {\n                <div class=\"mt-1 pt-1 border-t border-border/50 flex items-center justify-between text-xs\">\n                    <span class=\"text-muted-foreground\">{{ messages().change }}{{ messages().labelValueSeparator }}</span>\n                    <span class=\"font-medium text-foreground\">\n                        {{ context.point.formattedChange || context.point.change }}\n                        @if (context.point.formattedChangePercentage) {\n                            <span>({{ context.point.formattedChangePercentage }})</span>\n                        }\n                    </span>\n                </div>\n            }\n        } @else {\n            <div class=\"flex items-center gap-1.5 mb-0.5\">\n                <span class=\"inline-block h-2 w-2 rounded-full\" [style.background-color]=\"context.point.color\"></span>\n                <span class=\"font-semibold text-foreground\">{{ context.point.seriesName }}</span>\n            </div>\n            <div class=\"text-muted-foreground\">\n                {{ context.point.formattedX }}{{ messages().labelValueSeparator }}\n                <span class=\"font-medium text-foreground\">{{ context.point.formattedY }}</span>\n                @if (context.point.formattedStackPercentage) {\n                    <span>\u00B7</span>\n                    <span class=\"font-medium text-foreground\">{{ context.point.formattedStackPercentage }}</span>\n                }\n                @if (context.point.formattedSize) {\n                    <span class=\"ms-1.5\"\n                        >({{ messages().size }}{{ messages().labelValueSeparator }} <span class=\"font-medium text-foreground\">{{ context.point.formattedSize }}</span>)</span>\n                }\n            </div>\n        }\n    </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ChartTooltipComponent, decorators: [{
             type: Component,
             args: [{ selector: "mona-chart-tooltip", imports: [NgTemplateOutlet], host: {
                         class: "contents"
-                    }, template: "@if (enabled() && tooltipContext(); as context) {\n    <div\n        #tooltipContainer\n        [class]=\"tooltipClasses()\"\n        [style.left.px]=\"placement().left\"\n        [style.top.px]=\"placement().top\"\n        [attr.data-placement]=\"placement().placement\">\n        @if (customTemplate(); as template) {\n            <ng-container [ngTemplateOutlet]=\"template.templateRef\" [ngTemplateOutletContext]=\"context\" />\n        } @else if (context.point.seriesType === \"heatmap\") {\n            <div class=\"flex items-center gap-1.5 mb-1\">\n                <span\n                    class=\"inline-block h-2 w-2 rounded-full flex-shrink-0\"\n                    [style.background-color]=\"context.point.color\"></span>\n                <span class=\"font-semibold text-foreground\">{{ context.point.seriesName }}</span>\n            </div>\n            <div class=\"flex flex-col gap-0.5 text-xs text-muted-foreground\">\n                <div>\n                    <span class=\"font-medium text-foreground\">{{ context.point.formattedX }}</span\n                    >,\n                    <span class=\"font-medium text-foreground\">{{\n                        context.point.formattedYCategory || context.point.categoryY\n                    }}</span>\n                </div>\n                <div>\n                    Value: <span class=\"font-medium text-foreground\">{{ context.point.formattedY }}</span>\n                </div>\n            </div>\n        } @else if (context.point.seriesType === \"pie\" || context.point.seriesType === \"donut\") {\n            <div class=\"flex items-center gap-1.5 mb-1\">\n                <span\n                    class=\"inline-block h-2 w-2 rounded-full flex-shrink-0\"\n                    [style.background-color]=\"context.point.color\"></span>\n                <span class=\"font-semibold text-foreground\">{{\n                    context.point.formattedCategory || context.point.seriesName\n                }}</span>\n            </div>\n            <div class=\"flex items-center gap-2 text-xs text-muted-foreground\">\n                <span class=\"font-medium text-foreground\">{{ context.point.formattedY }}</span>\n                @if (context.point.formattedPercentage) {\n                    <span>\u00B7</span>\n                    <span>{{ context.point.formattedPercentage }}</span>\n                }\n            </div>\n        } @else if (context.point.seriesType === \"gauge\") {\n            <div class=\"flex items-center gap-1.5 mb-1\">\n                <span\n                    class=\"inline-block h-2 w-2 rounded-full flex-shrink-0\"\n                    [style.background-color]=\"context.point.color\"></span>\n                <span class=\"font-semibold text-foreground\">{{ context.point.seriesName }}</span>\n            </div>\n            <div class=\"flex flex-col gap-0.5 text-xs text-muted-foreground\">\n                <div>\n                    Value: <span class=\"font-medium text-foreground\">{{ context.point.formattedY }}</span>\n                </div>\n                @if (context.point.formattedRadialMin && context.point.formattedRadialMax) {\n                    <div>\n                        Range:\n                        <span class=\"font-medium text-foreground\"\n                            >{{ context.point.formattedRadialMin }} \u2013 {{ context.point.formattedRadialMax }}</span\n                        >\n                    </div>\n                }\n                @if (context.point.isClamped) {\n                    <div class=\"text-[11px] text-amber-500 font-medium\">Visual indicator clamped</div>\n                }\n            </div>\n        } @else if (context.point.seriesType === \"treemap\") {\n            <div class=\"flex items-center gap-1.5 mb-1\">\n                <span\n                    class=\"inline-block h-2 w-2 rounded-full flex-shrink-0\"\n                    [style.background-color]=\"context.point.color\"></span>\n                <span class=\"font-semibold text-foreground\">{{\n                    context.point.hierarchy?.formattedLabel || context.point.formattedX || context.point.seriesName\n                }}</span>\n            </div>\n            <div class=\"flex flex-col gap-0.5 text-xs text-muted-foreground\">\n                @if (context.point.hierarchy?.formattedPath && context.point.hierarchy!.formattedPath.length > 1) {\n                    <div class=\"text-[11px] truncate max-w-[220px]\">\n                        {{ context.point.hierarchy!.formattedPath.join(\" / \") }}\n                    </div>\n                }\n                <div class=\"flex items-center gap-2\">\n                    <span\n                        >Value: <span class=\"font-medium text-foreground\">{{ context.point.formattedY }}</span></span\n                    >\n                    @if (\n                        context.point.hierarchy?.percentageOfRoot !== undefined &&\n                        context.point.hierarchy!.percentageOfRoot > 0\n                    ) {\n                        <span>\u00B7</span>\n                        <span>{{ (context.point.hierarchy!.percentageOfRoot * 100).toFixed(1) }}%</span>\n                    }\n                </div>\n            </div>\n        } @else if (context.point.seriesType === \"funnel\") {\n            <div class=\"flex items-center gap-1.5 mb-1\">\n                <span\n                    class=\"inline-block h-2 w-2 rounded-full flex-shrink-0\"\n                    [style.background-color]=\"context.point.color\"></span>\n                <span class=\"font-semibold text-foreground\">{{\n                    context.point.formattedCategory || context.point.formattedX || context.point.seriesName\n                }}</span>\n            </div>\n            <div class=\"flex flex-col gap-0.5 text-xs text-muted-foreground\">\n                <div>\n                    Value:\n                    <span class=\"font-medium text-foreground\">{{\n                        context.point.funnel?.formattedValue || context.point.formattedY\n                    }}</span>\n                </div>\n                @if (context.point.funnel?.formattedConversionRate) {\n                    <div>\n                        Conversion:\n                        <span class=\"font-medium text-foreground\">{{\n                            context.point.funnel!.formattedConversionRate\n                        }}</span>\n                    </div>\n                }\n                @if (context.point.funnel?.formattedOverallConversionRate) {\n                    <div>\n                        Overall:\n                        <span class=\"font-medium text-foreground\">{{\n                            context.point.funnel!.formattedOverallConversionRate\n                        }}</span>\n                    </div>\n                }\n                @if (context.point.funnel?.dropOff !== undefined && context.point.funnel!.dropOff > 0) {\n                    <div>\n                        Drop-off: <span class=\"font-medium text-foreground\">{{ context.point.funnel!.dropOff }}</span>\n                    </div>\n                }\n            </div>\n        } @else if (context.point.seriesType === \"waterfall\") {\n            <div class=\"flex items-center gap-1.5 mb-1\">\n                <span\n                    class=\"inline-block h-2 w-2 rounded-full flex-shrink-0\"\n                    [style.background-color]=\"context.point.color\"></span>\n                <span class=\"font-semibold text-foreground\">{{\n                    context.point.formattedCategory || context.point.formattedX || context.point.seriesName\n                }}</span>\n            </div>\n            <div class=\"flex flex-col gap-0.5 text-xs text-muted-foreground\">\n                @if (context.point.waterfall?.kind === \"change\") {\n                    <div>\n                        Change:\n                        <span class=\"font-medium text-foreground\">{{\n                            context.point.waterfall?.formattedDelta || context.point.formattedY\n                        }}</span>\n                    </div>\n                    @if (\n                        context.point.waterfall?.formattedCumulativeBefore &&\n                        context.point.waterfall?.formattedCumulativeAfter\n                    ) {\n                        <div>\n                            Running Total:\n                            <span class=\"font-medium text-foreground\"\n                                >{{ context.point.waterfall!.formattedCumulativeBefore }} \u2192\n                                {{ context.point.waterfall!.formattedCumulativeAfter }}</span\n                            >\n                        </div>\n                    } @else if (context.point.waterfall?.formattedCumulativeAfter) {\n                        <div>\n                            Running Total:\n                            <span class=\"font-medium text-foreground\">{{\n                                context.point.waterfall!.formattedCumulativeAfter\n                            }}</span>\n                        </div>\n                    }\n                } @else {\n                    <div>\n                        Value: <span class=\"font-medium text-foreground\">{{ context.point.formattedY }}</span>\n                    </div>\n                }\n            </div>\n        } @else if (context.shared) {\n            <div class=\"mb-1 font-semibold text-foreground\">{{ context.point.formattedX }}</div>\n            <div class=\"flex flex-col gap-1.5\">\n                @for (pt of context.points; track pt.markId) {\n                    @if (pt.valueKind === \"ohlc\" || pt.seriesType === \"candlestick\" || pt.seriesType === \"ohlc\") {\n                        <div class=\"flex flex-col gap-0.5\">\n                            <div class=\"flex items-center justify-between gap-3\">\n                                <div class=\"flex items-center gap-1.5\">\n                                    <span\n                                        class=\"inline-block h-2 w-2 rounded-full flex-shrink-0\"\n                                        [style.background-color]=\"pt.color\"></span>\n                                    <span class=\"text-xs text-muted-foreground font-medium\">{{ pt.seriesName }}</span>\n                                </div>\n                                @if (pt.financialDirection; as dir) {\n                                    <span\n                                        class=\"text-[10px] font-medium px-1 py-0.2 rounded capitalize\"\n                                        [style.background-color]=\"\n                                            dir === 'rising'\n                                                ? 'rgba(34, 197, 94, 0.15)'\n                                                : dir === 'falling'\n                                                  ? 'rgba(239, 68, 68, 0.15)'\n                                                  : 'rgba(107, 114, 128, 0.15)'\n                                        \"\n                                        [style.color]=\"pt.color\">\n                                        {{ dir }}\n                                    </span>\n                                }\n                            </div>\n                            <div class=\"text-[11px] text-muted-foreground pl-3.5 flex items-center gap-1 flex-wrap\">\n                                <span\n                                    >O:\n                                    <span class=\"font-medium text-foreground\">{{\n                                        pt.formattedOpen || pt.open\n                                    }}</span></span\n                                >\n                                <span\n                                    >H:\n                                    <span class=\"font-medium text-foreground\">{{\n                                        pt.formattedHigh || pt.high\n                                    }}</span></span\n                                >\n                                <span\n                                    >L:\n                                    <span class=\"font-medium text-foreground\">{{\n                                        pt.formattedLow || pt.low\n                                    }}</span></span\n                                >\n                                <span\n                                    >C:\n                                    <span class=\"font-medium text-foreground\">{{\n                                        pt.formattedClose || pt.close\n                                    }}</span></span\n                                >\n                                @if (pt.formattedChange) {\n                                    <span class=\"font-medium text-foreground\">({{ pt.formattedChange }})</span>\n                                }\n                            </div>\n                        </div>\n                    } @else if (pt.valueKind === \"range\") {\n                        <div class=\"flex items-center justify-between gap-3\">\n                            <div class=\"flex items-center gap-1.5\">\n                                <span\n                                    class=\"inline-block h-2 w-2 rounded-full flex-shrink-0\"\n                                    [style.background-color]=\"pt.color\"></span>\n                                <span class=\"text-muted-foreground\">{{ pt.seriesName }}</span>\n                            </div>\n                            <div class=\"flex items-center gap-1\">\n                                <span class=\"font-medium text-foreground\"\n                                    >{{ pt.formattedFrom }} \u2013 {{ pt.formattedTo }}</span\n                                >\n                            </div>\n                        </div>\n                    } @else {\n                        <div class=\"flex items-center justify-between gap-3\">\n                            <div class=\"flex items-center gap-1.5\">\n                                <span\n                                    class=\"inline-block h-2 w-2 rounded-full flex-shrink-0\"\n                                    [style.background-color]=\"pt.color\"></span>\n                                <span class=\"text-muted-foreground\">{{ pt.seriesName }}</span>\n                            </div>\n                            <div class=\"flex items-center gap-1\">\n                                <span class=\"font-medium text-foreground\">{{ pt.formattedY }}</span>\n                                @if (pt.formattedStackPercentage) {\n                                    <span class=\"text-xs text-muted-foreground\"\n                                        >({{ pt.formattedStackPercentage }})</span\n                                    >\n                                }\n                                @if (pt.formattedSize) {\n                                    <span class=\"text-xs text-muted-foreground\">({{ pt.formattedSize }})</span>\n                                }\n                            </div>\n                        </div>\n                    }\n                }\n            </div>\n        } @else if (\n            context.point.seriesType === \"candlestick\" ||\n            context.point.seriesType === \"ohlc\" ||\n            context.point.valueKind === \"ohlc\"\n        ) {\n            <div class=\"flex items-center justify-between gap-2 mb-1\">\n                <div class=\"flex items-center gap-1.5\">\n                    <span\n                        class=\"inline-block h-2 w-2 rounded-full flex-shrink-0\"\n                        [style.background-color]=\"context.point.color\"></span>\n                    <span class=\"font-semibold text-foreground\">{{ context.point.seriesName }}</span>\n                </div>\n                @if (context.point.financialDirection; as dir) {\n                    <span\n                        class=\"text-[10px] font-medium px-1 py-0.5 rounded capitalize\"\n                        [style.background-color]=\"\n                            dir === 'rising'\n                                ? 'rgba(34, 197, 94, 0.15)'\n                                : dir === 'falling'\n                                  ? 'rgba(239, 68, 68, 0.15)'\n                                  : 'rgba(107, 114, 128, 0.15)'\n                        \"\n                        [style.color]=\"context.point.color\">\n                        {{ dir }}\n                    </span>\n                }\n            </div>\n            <div class=\"text-xs text-muted-foreground mb-1.5\">\n                <span class=\"font-medium text-foreground\">{{ context.point.formattedX }}</span>\n            </div>\n            <div class=\"grid grid-cols-2 gap-x-3 gap-y-0.5 text-xs\">\n                <div class=\"flex items-center justify-between gap-1.5\">\n                    <span class=\"text-muted-foreground\">Open:</span>\n                    <span class=\"font-medium text-foreground\">{{\n                        context.point.formattedOpen || context.point.open\n                    }}</span>\n                </div>\n                <div class=\"flex items-center justify-between gap-1.5\">\n                    <span class=\"text-muted-foreground\">High:</span>\n                    <span class=\"font-medium text-foreground\">{{\n                        context.point.formattedHigh || context.point.high\n                    }}</span>\n                </div>\n                <div class=\"flex items-center justify-between gap-1.5\">\n                    <span class=\"text-muted-foreground\">Low:</span>\n                    <span class=\"font-medium text-foreground\">{{\n                        context.point.formattedLow || context.point.low\n                    }}</span>\n                </div>\n                <div class=\"flex items-center justify-between gap-1.5\">\n                    <span class=\"text-muted-foreground\">Close:</span>\n                    <span class=\"font-medium text-foreground\">{{\n                        context.point.formattedClose || context.point.close\n                    }}</span>\n                </div>\n            </div>\n            @if (context.point.formattedChange || context.point.change !== undefined) {\n                <div class=\"mt-1 pt-1 border-t border-border/50 flex items-center justify-between text-xs\">\n                    <span class=\"text-muted-foreground\">Change:</span>\n                    <span class=\"font-medium text-foreground\">\n                        {{ context.point.formattedChange || context.point.change }}\n                        @if (context.point.formattedChangePercentage) {\n                            <span>({{ context.point.formattedChangePercentage }})</span>\n                        }\n                    </span>\n                </div>\n            }\n        } @else {\n            <div class=\"flex items-center gap-1.5 mb-0.5\">\n                <span class=\"inline-block h-2 w-2 rounded-full\" [style.background-color]=\"context.point.color\"></span>\n                <span class=\"font-semibold text-foreground\">{{ context.point.seriesName }}</span>\n            </div>\n            <div class=\"text-muted-foreground\">\n                {{ context.point.formattedX }}:\n                <span class=\"font-medium text-foreground\">{{ context.point.formattedY }}</span>\n                @if (context.point.formattedStackPercentage) {\n                    <span>\u00B7</span>\n                    <span class=\"font-medium text-foreground\">{{ context.point.formattedStackPercentage }}</span>\n                }\n                @if (context.point.formattedSize) {\n                    <span class=\"ml-1.5\"\n                        >(size: <span class=\"font-medium text-foreground\">{{ context.point.formattedSize }}</span\n                        >)</span\n                    >\n                }\n            </div>\n        }\n    </div>\n}\n" }]
+                    }, template: "@if (enabled() && tooltipContext(); as context) {\n    <div\n        #tooltipContainer\n        [class]=\"tooltipClasses()\"\n        [style.left.px]=\"placement().left\"\n        [style.top.px]=\"placement().top\"\n        [attr.data-placement]=\"placement().placement\">\n        @if (customTemplate(); as template) {\n            <ng-container [ngTemplateOutlet]=\"template.templateRef\" [ngTemplateOutletContext]=\"context\" />\n        } @else if (context.point.seriesType === \"heatmap\") {\n            <div class=\"flex items-center gap-1.5 mb-1\">\n                <span\n                    class=\"inline-block h-2 w-2 rounded-full flex-shrink-0\"\n                    [style.background-color]=\"context.point.color\"></span>\n                <span class=\"font-semibold text-foreground\">{{ context.point.seriesName }}</span>\n            </div>\n            <div class=\"flex flex-col gap-0.5 text-xs text-muted-foreground\">\n                <div>\n                    <span class=\"font-medium text-foreground\">{{ context.point.formattedX }}</span\n                    >,\n                    <span class=\"font-medium text-foreground\">{{\n                        context.point.formattedYCategory || context.point.categoryY\n                    }}</span>\n                </div>\n                <div>\n                    {{ messages().value }}{{ messages().labelValueSeparator }} <span class=\"font-medium text-foreground\">{{ context.point.formattedY }}</span>\n                </div>\n            </div>\n        } @else if (context.point.seriesType === \"pie\" || context.point.seriesType === \"donut\") {\n            <div class=\"flex items-center gap-1.5 mb-1\">\n                <span\n                    class=\"inline-block h-2 w-2 rounded-full flex-shrink-0\"\n                    [style.background-color]=\"context.point.color\"></span>\n                <span class=\"font-semibold text-foreground\">{{\n                    context.point.formattedCategory || context.point.seriesName\n                }}</span>\n            </div>\n            <div class=\"flex items-center gap-2 text-xs text-muted-foreground\">\n                <span class=\"font-medium text-foreground\">{{ context.point.formattedY }}</span>\n                @if (context.point.formattedPercentage) {\n                    <span>\u00B7</span>\n                    <span>{{ context.point.formattedPercentage }}</span>\n                }\n            </div>\n        } @else if (context.point.seriesType === \"gauge\") {\n            <div class=\"flex items-center gap-1.5 mb-1\">\n                <span\n                    class=\"inline-block h-2 w-2 rounded-full flex-shrink-0\"\n                    [style.background-color]=\"context.point.color\"></span>\n                <span class=\"font-semibold text-foreground\">{{ context.point.seriesName }}</span>\n            </div>\n            <div class=\"flex flex-col gap-0.5 text-xs text-muted-foreground\">\n                <div>\n                    {{ messages().value }}{{ messages().labelValueSeparator }} <span class=\"font-medium text-foreground\">{{ context.point.formattedY }}</span>\n                </div>\n                @if (context.point.formattedRadialMin && context.point.formattedRadialMax) {\n                    <div>\n                        {{ messages().range }}{{ messages().labelValueSeparator }}\n                        <span class=\"font-medium text-foreground\"\n                            >{{ context.point.formattedRadialMin }} \u2013 {{ context.point.formattedRadialMax }}</span\n                        >\n                    </div>\n                }\n                @if (context.point.isClamped) {\n                    <div class=\"text-[11px] text-amber-500 font-medium\">{{ messages().visualIndicatorClamped }}</div>\n                }\n            </div>\n        } @else if (context.point.seriesType === \"treemap\") {\n            <div class=\"flex items-center gap-1.5 mb-1\">\n                <span\n                    class=\"inline-block h-2 w-2 rounded-full flex-shrink-0\"\n                    [style.background-color]=\"context.point.color\"></span>\n                <span class=\"font-semibold text-foreground\">{{\n                    context.point.hierarchy?.formattedLabel || context.point.formattedX || context.point.seriesName\n                }}</span>\n            </div>\n            <div class=\"flex flex-col gap-0.5 text-xs text-muted-foreground\">\n                @if (context.point.hierarchy?.formattedPath && context.point.hierarchy!.formattedPath.length > 1) {\n                    <div class=\"text-[11px] truncate max-w-[220px]\">\n                        {{ context.point.hierarchy!.formattedPath.join(\" / \") }}\n                    </div>\n                }\n                <div class=\"flex items-center gap-2\">\n                    <span\n                        >{{ messages().value }}{{ messages().labelValueSeparator }} <span class=\"font-medium text-foreground\">{{ context.point.formattedY }}</span></span\n                    >\n                    @if (\n                        context.point.hierarchy?.percentageOfRoot !== undefined &&\n                        context.point.hierarchy!.percentageOfRoot > 0\n                    ) {\n                        <span>\u00B7</span>\n                        <span>{{ formatPercent(context.point.hierarchy!.percentageOfRoot) }}</span>\n                    }\n                </div>\n            </div>\n        } @else if (context.point.seriesType === \"funnel\") {\n            <div class=\"flex items-center gap-1.5 mb-1\">\n                <span\n                    class=\"inline-block h-2 w-2 rounded-full flex-shrink-0\"\n                    [style.background-color]=\"context.point.color\"></span>\n                <span class=\"font-semibold text-foreground\">{{\n                    context.point.formattedCategory || context.point.formattedX || context.point.seriesName\n                }}</span>\n            </div>\n            <div class=\"flex flex-col gap-0.5 text-xs text-muted-foreground\">\n                <div>\n                    {{ messages().value }}{{ messages().labelValueSeparator }}\n                    <span class=\"font-medium text-foreground\">{{\n                        context.point.funnel?.formattedValue || context.point.formattedY\n                    }}</span>\n                </div>\n                @if (context.point.funnel?.formattedConversionRate) {\n                    <div>\n                        {{ messages().conversion }}{{ messages().labelValueSeparator }}\n                        <span class=\"font-medium text-foreground\">{{\n                            context.point.funnel!.formattedConversionRate\n                        }}</span>\n                    </div>\n                }\n                @if (context.point.funnel?.formattedOverallConversionRate) {\n                    <div>\n                        {{ messages().overall }}{{ messages().labelValueSeparator }}\n                        <span class=\"font-medium text-foreground\">{{\n                            context.point.funnel!.formattedOverallConversionRate\n                        }}</span>\n                    </div>\n                }\n                @if (context.point.funnel?.dropOff !== undefined && context.point.funnel!.dropOff > 0) {\n                    <div>\n                        {{ messages().dropOff }}{{ messages().labelValueSeparator }} <span class=\"font-medium text-foreground\">{{ context.point.funnel!.dropOff }}</span>\n                    </div>\n                }\n            </div>\n        } @else if (context.point.seriesType === \"waterfall\") {\n            <div class=\"flex items-center gap-1.5 mb-1\">\n                <span\n                    class=\"inline-block h-2 w-2 rounded-full flex-shrink-0\"\n                    [style.background-color]=\"context.point.color\"></span>\n                <span class=\"font-semibold text-foreground\">{{\n                    context.point.formattedCategory || context.point.formattedX || context.point.seriesName\n                }}</span>\n            </div>\n            <div class=\"flex flex-col gap-0.5 text-xs text-muted-foreground\">\n                @if (context.point.waterfall?.kind === \"change\") {\n                    <div>\n                        {{ messages().change }}{{ messages().labelValueSeparator }}\n                        <span class=\"font-medium text-foreground\">{{\n                            context.point.waterfall?.formattedDelta || context.point.formattedY\n                        }}</span>\n                    </div>\n                    @if (\n                        context.point.waterfall?.formattedCumulativeBefore &&\n                        context.point.waterfall?.formattedCumulativeAfter\n                    ) {\n                        <div>\n                            {{ messages().runningTotal }}{{ messages().labelValueSeparator }}\n                            <span class=\"font-medium text-foreground\"\n                                >{{ context.point.waterfall!.formattedCumulativeBefore }} \u2192\n                                {{ context.point.waterfall!.formattedCumulativeAfter }}</span\n                            >\n                        </div>\n                    } @else if (context.point.waterfall?.formattedCumulativeAfter) {\n                        <div>\n                            {{ messages().runningTotal }}{{ messages().labelValueSeparator }}\n                            <span class=\"font-medium text-foreground\">{{\n                                context.point.waterfall!.formattedCumulativeAfter\n                            }}</span>\n                        </div>\n                    }\n                } @else {\n                    <div>\n                        {{ messages().value }}{{ messages().labelValueSeparator }} <span class=\"font-medium text-foreground\">{{ context.point.formattedY }}</span>\n                    </div>\n                }\n            </div>\n        } @else if (context.shared) {\n            <div class=\"mb-1 font-semibold text-foreground\">{{ context.point.formattedX }}</div>\n            <div class=\"flex flex-col gap-1.5\">\n                @for (pt of context.points; track pt.markId) {\n                    @if (pt.valueKind === \"ohlc\" || pt.seriesType === \"candlestick\" || pt.seriesType === \"ohlc\") {\n                        <div class=\"flex flex-col gap-0.5\">\n                            <div class=\"flex items-center justify-between gap-3\">\n                                <div class=\"flex items-center gap-1.5\">\n                                    <span\n                                        class=\"inline-block h-2 w-2 rounded-full flex-shrink-0\"\n                                        [style.background-color]=\"pt.color\"></span>\n                                    <span class=\"text-xs text-muted-foreground font-medium\">{{ pt.seriesName }}</span>\n                                </div>\n                                @if (pt.financialDirection; as dir) {\n                                    <span\n                                        class=\"text-[10px] font-medium px-1 py-0.2 rounded\"\n                                        [style.background-color]=\"\n                                            dir === 'rising'\n                                                ? 'rgba(34, 197, 94, 0.15)'\n                                                : dir === 'falling'\n                                                  ? 'rgba(239, 68, 68, 0.15)'\n                                                  : 'rgba(107, 114, 128, 0.15)'\n                                        \"\n                                        [style.color]=\"pt.color\">\n                                        {{ financialDirectionLabel(dir) }}\n                                    </span>\n                                }\n                            </div>\n                            <div class=\"text-[11px] text-muted-foreground ps-3.5 flex items-center gap-1 flex-wrap\">\n                                <span\n                                    >{{ messages().openAbbreviation }}{{ messages().labelValueSeparator }}\n                                    <span class=\"font-medium text-foreground\">{{\n                                        pt.formattedOpen || pt.open\n                                    }}</span></span\n                                >\n                                <span\n                                    >{{ messages().highAbbreviation }}{{ messages().labelValueSeparator }}\n                                    <span class=\"font-medium text-foreground\">{{\n                                        pt.formattedHigh || pt.high\n                                    }}</span></span\n                                >\n                                <span\n                                    >{{ messages().lowAbbreviation }}{{ messages().labelValueSeparator }}\n                                    <span class=\"font-medium text-foreground\">{{\n                                        pt.formattedLow || pt.low\n                                    }}</span></span\n                                >\n                                <span\n                                    >{{ messages().closeAbbreviation }}{{ messages().labelValueSeparator }}\n                                    <span class=\"font-medium text-foreground\">{{\n                                        pt.formattedClose || pt.close\n                                    }}</span></span\n                                >\n                                @if (pt.formattedChange) {\n                                    <span class=\"font-medium text-foreground\">({{ pt.formattedChange }})</span>\n                                }\n                            </div>\n                        </div>\n                    } @else if (pt.valueKind === \"range\") {\n                        <div class=\"flex items-center justify-between gap-3\">\n                            <div class=\"flex items-center gap-1.5\">\n                                <span\n                                    class=\"inline-block h-2 w-2 rounded-full flex-shrink-0\"\n                                    [style.background-color]=\"pt.color\"></span>\n                                <span class=\"text-muted-foreground\">{{ pt.seriesName }}</span>\n                            </div>\n                            <div class=\"flex items-center gap-1\">\n                                <span class=\"font-medium text-foreground\"\n                                    >{{ pt.formattedFrom }} \u2013 {{ pt.formattedTo }}</span\n                                >\n                            </div>\n                        </div>\n                    } @else {\n                        <div class=\"flex items-center justify-between gap-3\">\n                            <div class=\"flex items-center gap-1.5\">\n                                <span\n                                    class=\"inline-block h-2 w-2 rounded-full flex-shrink-0\"\n                                    [style.background-color]=\"pt.color\"></span>\n                                <span class=\"text-muted-foreground\">{{ pt.seriesName }}</span>\n                            </div>\n                            <div class=\"flex items-center gap-1\">\n                                <span class=\"font-medium text-foreground\">{{ pt.formattedY }}</span>\n                                @if (pt.formattedStackPercentage) {\n                                    <span class=\"text-xs text-muted-foreground\"\n                                        >({{ pt.formattedStackPercentage }})</span\n                                    >\n                                }\n                                @if (pt.formattedSize) {\n                                    <span class=\"text-xs text-muted-foreground\">({{ pt.formattedSize }})</span>\n                                }\n                            </div>\n                        </div>\n                    }\n                }\n            </div>\n        } @else if (\n            context.point.seriesType === \"candlestick\" ||\n            context.point.seriesType === \"ohlc\" ||\n            context.point.valueKind === \"ohlc\"\n        ) {\n            <div class=\"flex items-center justify-between gap-2 mb-1\">\n                <div class=\"flex items-center gap-1.5\">\n                    <span\n                        class=\"inline-block h-2 w-2 rounded-full flex-shrink-0\"\n                        [style.background-color]=\"context.point.color\"></span>\n                    <span class=\"font-semibold text-foreground\">{{ context.point.seriesName }}</span>\n                </div>\n                @if (context.point.financialDirection; as dir) {\n                    <span\n                        class=\"text-[10px] font-medium px-1 py-0.5 rounded\"\n                        [style.background-color]=\"\n                            dir === 'rising'\n                                ? 'rgba(34, 197, 94, 0.15)'\n                                : dir === 'falling'\n                                  ? 'rgba(239, 68, 68, 0.15)'\n                                  : 'rgba(107, 114, 128, 0.15)'\n                        \"\n                        [style.color]=\"context.point.color\">\n                        {{ financialDirectionLabel(dir) }}\n                    </span>\n                }\n            </div>\n            <div class=\"text-xs text-muted-foreground mb-1.5\">\n                <span class=\"font-medium text-foreground\">{{ context.point.formattedX }}</span>\n            </div>\n            <div class=\"grid grid-cols-2 gap-x-3 gap-y-0.5 text-xs\">\n                <div class=\"flex items-center justify-between gap-1.5\">\n                    <span class=\"text-muted-foreground\">{{ messages().open }}{{ messages().labelValueSeparator }}</span>\n                    <span class=\"font-medium text-foreground\">{{\n                        context.point.formattedOpen || context.point.open\n                    }}</span>\n                </div>\n                <div class=\"flex items-center justify-between gap-1.5\">\n                    <span class=\"text-muted-foreground\">{{ messages().high }}{{ messages().labelValueSeparator }}</span>\n                    <span class=\"font-medium text-foreground\">{{\n                        context.point.formattedHigh || context.point.high\n                    }}</span>\n                </div>\n                <div class=\"flex items-center justify-between gap-1.5\">\n                    <span class=\"text-muted-foreground\">{{ messages().low }}{{ messages().labelValueSeparator }}</span>\n                    <span class=\"font-medium text-foreground\">{{\n                        context.point.formattedLow || context.point.low\n                    }}</span>\n                </div>\n                <div class=\"flex items-center justify-between gap-1.5\">\n                    <span class=\"text-muted-foreground\">{{ messages().close }}{{ messages().labelValueSeparator }}</span>\n                    <span class=\"font-medium text-foreground\">{{\n                        context.point.formattedClose || context.point.close\n                    }}</span>\n                </div>\n            </div>\n            @if (context.point.formattedChange || context.point.change !== undefined) {\n                <div class=\"mt-1 pt-1 border-t border-border/50 flex items-center justify-between text-xs\">\n                    <span class=\"text-muted-foreground\">{{ messages().change }}{{ messages().labelValueSeparator }}</span>\n                    <span class=\"font-medium text-foreground\">\n                        {{ context.point.formattedChange || context.point.change }}\n                        @if (context.point.formattedChangePercentage) {\n                            <span>({{ context.point.formattedChangePercentage }})</span>\n                        }\n                    </span>\n                </div>\n            }\n        } @else {\n            <div class=\"flex items-center gap-1.5 mb-0.5\">\n                <span class=\"inline-block h-2 w-2 rounded-full\" [style.background-color]=\"context.point.color\"></span>\n                <span class=\"font-semibold text-foreground\">{{ context.point.seriesName }}</span>\n            </div>\n            <div class=\"text-muted-foreground\">\n                {{ context.point.formattedX }}{{ messages().labelValueSeparator }}\n                <span class=\"font-medium text-foreground\">{{ context.point.formattedY }}</span>\n                @if (context.point.formattedStackPercentage) {\n                    <span>\u00B7</span>\n                    <span class=\"font-medium text-foreground\">{{ context.point.formattedStackPercentage }}</span>\n                }\n                @if (context.point.formattedSize) {\n                    <span class=\"ms-1.5\"\n                        >({{ messages().size }}{{ messages().labelValueSeparator }} <span class=\"font-medium text-foreground\">{{ context.point.formattedSize }}</span>)</span>\n                }\n            </div>\n        }\n    </div>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { customTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ChartTooltipTemplateDirective), { isSignal: true }] }], tooltipContainer: [{ type: i0.ViewChild, args: ["tooltipContainer", { isSignal: true }] }], enabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "enabled", required: false }] }], shared: [{ type: i0.Input, args: [{ isSignal: true, alias: "shared", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 let nextSeriesId$6 = 0;
@@ -64420,5 +64480,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AreaSeriesComponent, BarSeriesComponent, BubbleSeriesComponent, CandlestickSeriesComponent, ChartAngularAxisComponent, ChartAnnotationComponent, ChartAnnotationLabelTemplateDirective, ChartAxisLabelTemplateDirective, ChartBrushComponent, ChartCenterTemplateDirective, ChartComponent, ChartCrosshairComponent, ChartCrosshairLabelTemplateDirective, ChartDataLabelTemplateDirective, ChartExportError, ChartFunnelLabelTemplateDirective, ChartGaugeCenterTemplateDirective, ChartLegendComponent, ChartLegendItemTemplateDirective, ChartNoDataTemplateDirective, ChartRadialAxisComponent, ChartReferenceBandComponent, ChartReferenceLabelTemplateDirective, ChartReferenceLineComponent, ChartSelectionComponent, ChartSliceLabelTemplateDirective, ChartSubtitleTemplateDirective, ChartTitleTemplateDirective, ChartTooltipComponent, ChartTooltipTemplateDirective, ChartTreemapLabelTemplateDirective, ChartWaterfallLabelTemplateDirective, ChartXAxisComponent, ChartYAxisComponent, DonutSeriesComponent, FunnelSeriesComponent, GaugeSeriesComponent, HeatmapSeriesComponent, LineSeriesComponent, OhlcSeriesComponent, PieSeriesComponent, PolarSeriesComponent, RadarSeriesComponent, RadialBarSeriesComponent, RangeAreaSeriesComponent, RangeBarSeriesComponent, RoseSeriesComponent, ScatterSeriesComponent, TreemapSeriesComponent, WaterfallSeriesComponent, getChartSeriesFamily, isCartesianCoordinateFamily, isHierarchicalCoordinateFamily, isPolarCoordinateFamily };
+export { AreaSeriesComponent, BarSeriesComponent, BubbleSeriesComponent, CHART_DEFAULT_MESSAGES, CandlestickSeriesComponent, ChartAngularAxisComponent, ChartAnnotationComponent, ChartAnnotationLabelTemplateDirective, ChartAxisLabelTemplateDirective, ChartBrushComponent, ChartCenterTemplateDirective, ChartComponent, ChartCrosshairComponent, ChartCrosshairLabelTemplateDirective, ChartDataLabelTemplateDirective, ChartExportError, ChartFunnelLabelTemplateDirective, ChartGaugeCenterTemplateDirective, ChartLegendComponent, ChartLegendItemTemplateDirective, ChartNoDataTemplateDirective, ChartRadialAxisComponent, ChartReferenceBandComponent, ChartReferenceLabelTemplateDirective, ChartReferenceLineComponent, ChartSelectionComponent, ChartSliceLabelTemplateDirective, ChartSubtitleTemplateDirective, ChartTitleTemplateDirective, ChartTooltipComponent, ChartTooltipTemplateDirective, ChartTreemapLabelTemplateDirective, ChartWaterfallLabelTemplateDirective, ChartXAxisComponent, ChartYAxisComponent, DonutSeriesComponent, FunnelSeriesComponent, GaugeSeriesComponent, HeatmapSeriesComponent, LineSeriesComponent, OhlcSeriesComponent, PieSeriesComponent, PolarSeriesComponent, RadarSeriesComponent, RadialBarSeriesComponent, RangeAreaSeriesComponent, RangeBarSeriesComponent, RoseSeriesComponent, ScatterSeriesComponent, TreemapSeriesComponent, WaterfallSeriesComponent, getChartSeriesFamily, isCartesianCoordinateFamily, isHierarchicalCoordinateFamily, isPolarCoordinateFamily };
 //# sourceMappingURL=nanahoshi-mona-ui-chart.mjs.map