@nanahoshi/mona-ui 0.15.0 → 0.15.1

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

@@ -1,6 +1,6 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, TemplateRef, Directive, InjectionToken, ElementRef, input, isDevMode, Injectable, signal, computed, viewChild, contentChild, DestroyRef, output, effect, untracked, afterNextRender, Component, model } 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 { twMerge } from 'tailwind-merge';
 import { interpolate, parse, formatRgb, wcagContrast } from 'culori';
 import { scaleLinear, scaleLog, scaleSymlog, scalePow, scaleSqrt, scaleTime, scaleUtc, scaleBand } from 'd3-scale';
@@ -69,7 +69,7 @@ class BrowserAnimationClock {
     }
     requestFrame(callback) {
         if (typeof requestAnimationFrame !== "undefined") {
-            return requestAnimationFrame(callback);
+            return requestAnimationFrame(() => callback(this.now()));
         }
         return setTimeout(() => callback(this.now()), 16);
     }
@@ -146,8 +146,8 @@ function getEasingFunction(easing) {
 }
 
 class CartesianPointSpatialIndex {
-    #cells = new Map();
     #cellSize;
+    #cells = new Map();
     constructor(cellSize = 32) {
         this.#cellSize = Math.max(8, cellSize);
     }
@@ -662,13 +662,13 @@ class GaugeHitIndex {
 }
 
 class TreemapHitIndex {
-    #plotRect;
-    #cols;
-    #rows;
-    #cellWidth;
+    #allTargets;
     #cellHeight;
+    #cellWidth;
+    #cols;
     #grid;
-    #allTargets;
+    #plotRect;
+    #rows;
     constructor(plotRect, hitTargets) {
         this.#plotRect = plotRect;
         this.#allTargets = hitTargets;
@@ -9779,11 +9779,11 @@ function composeMarkKey(seriesPrefix, part, occurrenceRank) {
     return JSON.stringify([seriesPrefix, part.type, part.value, occurrenceRank]);
 }
 class ChartMarkKeyResolver {
+    #keyField;
     #occurrenceTracker = new Map();
-    #warnedDuplicateKeys = new Set();
     #seriesId;
     #seriesPrefix;
-    #keyField;
+    #warnedDuplicateKeys = new Set();
     constructor(seriesId, keyField, seriesKey) {
         this.#seriesId = seriesId;
         const normKey = normalizeSeriesKey(seriesKey);
@@ -13495,8 +13495,8 @@ const noResult = { firstValidIndex: -1, lastValidIndex: -1, maxIndex: -1, minInd
  * blocks directly and scan summaries for whole interior blocks.
  */
 class CartesianMinMaxBlockIndex {
-    #blocks = [];
     #blockSize;
+    #blocks = [];
     #y;
     constructor(y, blockSize = 256) {
         this.#y = y;
@@ -27623,12 +27623,12 @@ function computeTightBounds(indices, u, v) {
 class ChartSeriesMarkIdentityAuthority {
     #extractNaturalKey;
     #keyField;
-    #occurrenceRanks;
     #seriesId;
     #seriesPrefix;
-    #sourceData;
-    #reverseMap = null;
+    #occurrenceRanks;
     #released = false;
+    #reverseMap = null;
+    #sourceData;
     constructor(seriesId, sourceData, options) {
         this.#seriesId = seriesId;
         this.#sourceData = sourceData;
@@ -39199,13 +39199,13 @@ class CanvasChartRenderBackend {
     #context;
     #viewport;
     constructor(canvas) {
-        this.kind = "canvas";
         this.#context = null;
         this.#viewport = {
             devicePixelRatio: 1,
             height: 0,
             width: 0
         };
+        this.kind = "canvas";
         this.#canvas = canvas;
         this.#context = canvas.getContext("2d");
     }
@@ -43946,7 +43946,6 @@ class SvgChartRenderBackend {
     #toTreemapRenderer;
     #toWaterfallRenderer;
     constructor(root, instanceId) {
-        this.kind = "svg";
         this.#fromCartesianRenderer = null;
         this.#fromFunnelRenderer = null;
         this.#fromHeatmapRenderer = null;
@@ -43962,6 +43961,7 @@ class SvgChartRenderBackend {
         this.#toPolarRenderer = null;
         this.#toTreemapRenderer = null;
         this.#toWaterfallRenderer = null;
+        this.kind = "svg";
         this.#root = root;
         this.#namespace = new SvgIdNamespace(instanceId);
         this.#layers = new SvgRootLayers(root);
@@ -46836,8 +46836,8 @@ async function readResponseBytesBounded(response, maxBytes) {
  * media validation, and aggregate byte budget tracking (R5-02 / R5-03 / R5-12 / R6-01 / R6-03 / R6-06).
  */
 class ChartExportResourceTransaction {
-    #totalBytes = 0;
     #cache = new Map();
+    #totalBytes = 0;
     constructor(signal, decodeEnvironment) {
         this.signal = signal;
         this.decodeEnvironment = decodeEnvironment;
@@ -52684,6 +52684,8 @@ class ChartComponent {
     #hasWarnedMultiBrush;
     #hasWarnedMultiSelection;
     #hasWarnedSelectionNonCartesian;
+    #initialMeasurementFrameId;
+    #initialMeasurementPending;
     #interactionOwner;
     #interactionRevision;
     #interactionState;
@@ -52705,10 +52707,142 @@ class ChartComponent {
     #renderBackend;
     #renderScene;
     #resizeObserver;
+    #resizeObserverTarget;
     #suppressNextCanvasClick;
     #synchronizationController;
     #themeObserver;
     constructor() {
+        this.#activeBrushBounds = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#activeBrushBounds" }] : /* istanbul ignore next */ []));
+        this.#activeExportControllers = new Set();
+        this.#angularAxis = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#angularAxis" }] : /* istanbul ignore next */ []));
+        this.#animationMode = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#animationMode" }] : /* istanbul ignore next */ []));
+        this.#annotationById = computed(() => {
+            const map = new Map();
+            for (const r of this.#annotations()) {
+                map.set(r.id, r);
+            }
+            return map;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#annotationById" }] : /* istanbul ignore next */ []));
+        this.#annotations = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#annotations" }] : /* istanbul ignore next */ []));
+        this.#brush = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#brush" }] : /* istanbul ignore next */ []));
+        this.#brushGestureController = new ChartBrushGestureController();
+        this.#crosshair = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#crosshair" }] : /* istanbul ignore next */ []));
+        this.#dataLabelMeasurementRevision = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#dataLabelMeasurementRevision" }] : /* istanbul ignore next */ []));
+        this.#dataLabelMeasurements = new Map();
+        this.#destroyRef = inject(DestroyRef);
+        this.#elementRef = inject(ElementRef);
+        this.#hasInitializedDefaultSelection = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#hasInitializedDefaultSelection" }] : /* istanbul ignore next */ []));
+        this.#hasInitializedDefaultViewport = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#hasInitializedDefaultViewport" }] : /* istanbul ignore next */ []));
+        this.#internalSelectedMarkIds = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#internalSelectedMarkIds" }] : /* istanbul ignore next */ []));
+        this.#isAnimating = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#isAnimating" }] : /* istanbul ignore next */ []));
+        this.#isExitingData = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#isExitingData" }] : /* istanbul ignore next */ []));
+        this.#isStructuralAnimation = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#isStructuralAnimation" }] : /* istanbul ignore next */ []));
+        this.#labelMeasurements = new Map();
+        this.#legend = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#legend" }] : /* istanbul ignore next */ []));
+        this.#observedDataLabelElements = new Map();
+        this.#observedLabelElements = new Map();
+        this.#observedOverlayLabelElements = new Map();
+        this.#overlayLabelMeasurementRevision = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#overlayLabelMeasurementRevision" }] : /* istanbul ignore next */ []));
+        this.#overlayLabelMeasurements = new Map();
+        this.#radialAxis = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#radialAxis" }] : /* istanbul ignore next */ []));
+        this.#referenceBandById = computed(() => {
+            const map = new Map();
+            for (const r of this.#referenceBands()) {
+                map.set(r.id, r);
+            }
+            return map;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#referenceBandById" }] : /* istanbul ignore next */ []));
+        this.#referenceBands = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#referenceBands" }] : /* istanbul ignore next */ []));
+        this.#referenceLineById = computed(() => {
+            const map = new Map();
+            for (const r of this.#referenceLines()) {
+                map.set(r.id, r);
+            }
+            return map;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#referenceLineById" }] : /* istanbul ignore next */ []));
+        this.#referenceLines = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#referenceLines" }] : /* istanbul ignore next */ []));
+        this.#registeredSeries = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#registeredSeries" }] : /* istanbul ignore next */ []));
+        this.#selection = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#selection" }] : /* istanbul ignore next */ []));
+        this.#synchronizationCoordinator = inject(ChartSynchronizationCoordinator);
+        this.#tooltip = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#tooltip" }] : /* istanbul ignore next */ []));
+        this.#uncontrolledViewportState = signal({ x: new Map(), y: new Map() }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#uncontrolledViewportState" }] : /* istanbul ignore next */ []));
+        this.#warnedDiagnosticSignatures = new Set();
+        this.#xAxes = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#xAxes" }] : /* istanbul ignore next */ []));
+        this.#yAxes = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#yAxes" }] : /* istanbul ignore next */ []));
+        this.#activeKeyboardBucketIndex = -1;
+        this.#activeKeyboardHitKey = null;
+        this.#activeKeyboardNamespace = null;
+        this.#activeKeyboardSeriesId = null;
+        this.#brushMarkIndex = null;
+        this.#brushMarkIndexScene = null;
+        this.#canvasContext = null;
+        this.#canvasReady = false;
+        this.#cartesianLayoutRuntime = null;
+        this.#currentHeight = 300;
+        this.#currentWidth = 500;
+        this.#dataLabelResizeObserver = null;
+        this.#gestureController = null;
+        this.#hasCommittedVisualScene = false;
+        this.#hasEmittedBrushStart = false;
+        this.#hasPendingSizeReflow = false;
+        this.#hasWarnedBrushWithoutSelection = false;
+        this.#hasWarnedMultiBrush = false;
+        this.#hasWarnedMultiSelection = false;
+        this.#hasWarnedSelectionNonCartesian = false;
+        this.#initialMeasurementFrameId = null;
+        this.#initialMeasurementPending = true;
+        this.#interactionOwner = null;
+        this.#interactionRevision = 0;
+        this.#interactionState = null;
+        this.#isDestroyed = false;
+        this.#labelResizeObserver = null;
+        this.#lastControlledSelection = undefined;
+        this.#lastInteractionSource = null;
+        this.#lastNormalizedControlledViewport = null;
+        this.#lastPointerResolution = null;
+        this.#lastSelectionMode = undefined;
+        this.#mediaQueryList = null;
+        this.#mediaQueryListener = null;
+        this.#overlayLabelResizeObserver = null;
+        this.#pendingBrushFrame = null;
+        this.#pendingBrushRafId = null;
+        this.#pendingLabelMeasurementReason = 0;
+        this.#pendingPointerEvent = null;
+        this.#pointerFrameId = null;
+        this.#renderBackend = null;
+        this.#renderScene = null;
+        this.#resizeObserver = null;
+        this.#resizeObserverTarget = null;
+        this.#suppressNextCanvasClick = false;
+        this.#synchronizationController = null;
+        this.#themeObserver = null;
         this.activeAccessibilityText = signal("", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "activeAccessibilityText" }] : /* istanbul ignore next */ []));
         this.animationDurationCss = computed(() => `${this.normalizedAnimationOptions().duration}ms`, /* @ts-ignore */
@@ -53069,90 +53203,6 @@ class ChartComponent {
             return list.find(s => s.type === "waterfall") ?? null;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "waterfallSeriesRegistration" }] : /* istanbul ignore next */ []));
-        this.#activeBrushBounds = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#activeBrushBounds" }] : /* istanbul ignore next */ []));
-        this.#activeExportControllers = new Set();
-        this.#angularAxis = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#angularAxis" }] : /* istanbul ignore next */ []));
-        this.#animationMode = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#animationMode" }] : /* istanbul ignore next */ []));
-        this.#annotationById = computed(() => {
-            const map = new Map();
-            for (const r of this.#annotations()) {
-                map.set(r.id, r);
-            }
-            return map;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#annotationById" }] : /* istanbul ignore next */ []));
-        this.#annotations = signal([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#annotations" }] : /* istanbul ignore next */ []));
-        this.#brush = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#brush" }] : /* istanbul ignore next */ []));
-        this.#brushGestureController = new ChartBrushGestureController();
-        this.#crosshair = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#crosshair" }] : /* istanbul ignore next */ []));
-        this.#dataLabelMeasurementRevision = signal(0, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#dataLabelMeasurementRevision" }] : /* istanbul ignore next */ []));
-        this.#dataLabelMeasurements = new Map();
-        this.#destroyRef = inject(DestroyRef);
-        this.#elementRef = inject(ElementRef);
-        this.#hasInitializedDefaultSelection = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#hasInitializedDefaultSelection" }] : /* istanbul ignore next */ []));
-        this.#hasInitializedDefaultViewport = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#hasInitializedDefaultViewport" }] : /* istanbul ignore next */ []));
-        this.#internalSelectedMarkIds = signal([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#internalSelectedMarkIds" }] : /* istanbul ignore next */ []));
-        this.#isAnimating = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#isAnimating" }] : /* istanbul ignore next */ []));
-        this.#isExitingData = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#isExitingData" }] : /* istanbul ignore next */ []));
-        this.#isStructuralAnimation = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#isStructuralAnimation" }] : /* istanbul ignore next */ []));
-        this.#labelMeasurements = new Map();
-        this.#legend = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#legend" }] : /* istanbul ignore next */ []));
-        this.#observedDataLabelElements = new Map();
-        this.#observedLabelElements = new Map();
-        this.#observedOverlayLabelElements = new Map();
-        this.#overlayLabelMeasurementRevision = signal(0, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#overlayLabelMeasurementRevision" }] : /* istanbul ignore next */ []));
-        this.#overlayLabelMeasurements = new Map();
-        this.#radialAxis = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#radialAxis" }] : /* istanbul ignore next */ []));
-        this.#referenceBandById = computed(() => {
-            const map = new Map();
-            for (const r of this.#referenceBands()) {
-                map.set(r.id, r);
-            }
-            return map;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#referenceBandById" }] : /* istanbul ignore next */ []));
-        this.#referenceBands = signal([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#referenceBands" }] : /* istanbul ignore next */ []));
-        this.#referenceLineById = computed(() => {
-            const map = new Map();
-            for (const r of this.#referenceLines()) {
-                map.set(r.id, r);
-            }
-            return map;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#referenceLineById" }] : /* istanbul ignore next */ []));
-        this.#referenceLines = signal([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#referenceLines" }] : /* istanbul ignore next */ []));
-        this.#registeredSeries = signal([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#registeredSeries" }] : /* istanbul ignore next */ []));
-        this.#selection = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#selection" }] : /* istanbul ignore next */ []));
-        this.#synchronizationCoordinator = inject(ChartSynchronizationCoordinator);
-        this.#tooltip = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#tooltip" }] : /* istanbul ignore next */ []));
-        this.#uncontrolledViewportState = signal({ x: new Map(), y: new Map() }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#uncontrolledViewportState" }] : /* istanbul ignore next */ []));
-        this.#warnedDiagnosticSignatures = new Set();
-        this.#xAxes = signal([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#xAxes" }] : /* istanbul ignore next */ []));
-        this.#yAxes = signal([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#yAxes" }] : /* istanbul ignore next */ []));
         this.angularAxisRegistration = this.#angularAxis.asReadonly();
         /**
          * @description Animation settings for initial render and subsequent data or visibility transitions.
@@ -53291,50 +53341,6 @@ class ChartComponent {
         this.yAxesRegistration = this.#yAxes.asReadonly();
         this.yAxisRegistration = computed(() => this.#yAxes()[0] ?? null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "yAxisRegistration" }] : /* istanbul ignore next */ []));
-        this.#activeKeyboardBucketIndex = -1;
-        this.#activeKeyboardHitKey = null;
-        this.#activeKeyboardNamespace = null;
-        this.#activeKeyboardSeriesId = null;
-        this.#brushMarkIndex = null;
-        this.#brushMarkIndexScene = null;
-        this.#canvasContext = null;
-        this.#canvasReady = false;
-        this.#cartesianLayoutRuntime = null;
-        this.#currentHeight = 300;
-        this.#currentWidth = 500;
-        this.#dataLabelResizeObserver = null;
-        this.#gestureController = null;
-        this.#hasCommittedVisualScene = false;
-        this.#hasEmittedBrushStart = false;
-        this.#hasPendingSizeReflow = false;
-        this.#hasWarnedBrushWithoutSelection = false;
-        this.#hasWarnedMultiBrush = false;
-        this.#hasWarnedMultiSelection = false;
-        this.#hasWarnedSelectionNonCartesian = false;
-        this.#interactionOwner = null;
-        this.#interactionRevision = 0;
-        this.#interactionState = null;
-        this.#isDestroyed = false;
-        this.#labelResizeObserver = null;
-        this.#lastControlledSelection = undefined;
-        this.#lastInteractionSource = null;
-        this.#lastNormalizedControlledViewport = null;
-        this.#lastPointerResolution = null;
-        this.#lastSelectionMode = undefined;
-        this.#mediaQueryList = null;
-        this.#mediaQueryListener = null;
-        this.#overlayLabelResizeObserver = null;
-        this.#pendingBrushFrame = null;
-        this.#pendingBrushRafId = null;
-        this.#pendingLabelMeasurementReason = 0;
-        this.#pendingPointerEvent = null;
-        this.#pointerFrameId = null;
-        this.#renderBackend = null;
-        this.#renderScene = null;
-        this.#resizeObserver = null;
-        this.#suppressNextCanvasClick = false;
-        this.#synchronizationController = null;
-        this.#themeObserver = null;
         this.#styleResolver = new ChartStyleResolver(this.#elementRef.nativeElement);
         this.#animationController = new ChartAnimationController(new BrowserAnimationClock());
         this.#renderScheduler = new ChartRenderScheduler(reason => this.#recomputeAndPaint(reason));
@@ -53435,10 +53441,15 @@ class ChartComponent {
                 cancelAnimationFrame(this.#pointerFrameId);
                 this.#pointerFrameId = null;
             }
+            if (this.#initialMeasurementFrameId !== null) {
+                cancelAnimationFrame(this.#initialMeasurementFrameId);
+                this.#initialMeasurementFrameId = null;
+            }
             if (this.#resizeObserver) {
                 this.#resizeObserver.disconnect();
                 this.#resizeObserver = null;
             }
+            this.#resizeObserverTarget = null;
             if (this.#labelResizeObserver) {
                 this.#labelResizeObserver.disconnect();
                 this.#labelResizeObserver = null;
@@ -54165,28 +54176,86 @@ class ChartComponent {
     #getSurfaceElement() {
         return this.plotSurfaceElement()?.nativeElement ?? this.canvasElement()?.nativeElement ?? null;
     }
+    #getPlotElement() {
+        return (this.plotSurfaceElement()?.nativeElement ||
+            this.canvasElement()?.nativeElement.parentElement ||
+            this.#elementRef.nativeElement);
+    }
+    #measurePlotElement(plotEl) {
+        const rect = plotEl.getBoundingClientRect();
+        const width = rect.width > 0 ? rect.width : plotEl.offsetWidth;
+        const height = rect.height > 0 ? rect.height : plotEl.offsetHeight;
+        if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) {
+            return null;
+        }
+        return { height, width };
+    }
+    #applyMeasuredSize(width, height) {
+        if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) {
+            return false;
+        }
+        const wasPending = this.#initialMeasurementPending;
+        const changed = Math.abs(width - this.#currentWidth) >= 0.5 || Math.abs(height - this.#currentHeight) >= 0.5;
+        this.#currentWidth = width;
+        this.#currentHeight = height;
+        this.#initialMeasurementPending = false;
+        const requiresRepaint = changed || wasPending;
+        if (requiresRepaint) {
+            this.#updateCanvasBackingStore(width, height);
+        }
+        return requiresRepaint;
+    }
+    #syncResizeObserverTarget() {
+        const plotEl = this.#getPlotElement();
+        if (this.#resizeObserver && this.#resizeObserverTarget !== plotEl) {
+            if (this.#resizeObserverTarget) {
+                this.#resizeObserver.unobserve(this.#resizeObserverTarget);
+            }
+            this.#resizeObserverTarget = plotEl;
+            this.#resizeObserver.observe(plotEl);
+        }
+        return plotEl;
+    }
+    #scheduleInitialMeasurement(attempt = 0) {
+        if (!this.#initialMeasurementPending ||
+            this.#initialMeasurementFrameId !== null ||
+            typeof requestAnimationFrame === "undefined" ||
+            attempt >= 3) {
+            return;
+        }
+        this.#initialMeasurementFrameId = requestAnimationFrame(() => {
+            this.#initialMeasurementFrameId = null;
+            if (this.#isDestroyed) {
+                return;
+            }
+            const plotEl = this.#syncResizeObserverTarget();
+            const measurement = this.#measurePlotElement(plotEl);
+            if (measurement) {
+                if (this.#applyMeasuredSize(measurement.width, measurement.height)) {
+                    this.invalidate(16 /* ChartInvalidationReason.Size */);
+                }
+                return;
+            }
+            this.#scheduleInitialMeasurement(attempt + 1);
+        });
+    }
     #initCanvasAndObserver() {
-        const plotSurfaceRef = this.plotSurfaceElement();
         const canvasRef = this.canvasElement();
         if (canvasRef?.nativeElement) {
             this.#canvasContext = canvasRef.nativeElement.getContext("2d");
         }
-        const plotEl = plotSurfaceRef?.nativeElement || canvasRef?.nativeElement.parentElement || this.#elementRef.nativeElement;
+        const plotEl = this.#getPlotElement();
         if (typeof ResizeObserver !== "undefined") {
             this.#resizeObserver = new ResizeObserver(entries => {
+                this.#syncResizeObserverTarget();
                 for (const entry of entries) {
                     const { height, width } = entry.contentRect;
-                    if (width > 0 &&
-                        height > 0 &&
-                        (Math.abs(width - this.#currentWidth) >= 0.5 || Math.abs(height - this.#currentHeight) >= 0.5)) {
-                        this.#currentWidth = width;
-                        this.#currentHeight = height;
-                        this.#updateCanvasBackingStore(width, height);
+                    if (width > 0 && height > 0 && this.#applyMeasuredSize(width, height)) {
                         this.invalidate(16 /* ChartInvalidationReason.Size */);
                     }
                 }
             });
-            this.#resizeObserver.observe(plotEl);
+            this.#syncResizeObserverTarget();
         }
         if (typeof MutationObserver !== "undefined") {
             this.#themeObserver = new MutationObserver(() => {
@@ -54207,12 +54276,14 @@ class ChartComponent {
             }
         }
         // Initial layout pass
-        const rect = plotEl.getBoundingClientRect();
-        const initialWidth = rect.width > 0 ? rect.width : plotEl.offsetWidth || 500;
-        const initialHeight = rect.height > 0 ? rect.height : plotEl.offsetHeight || 300;
-        this.#currentWidth = initialWidth;
-        this.#currentHeight = initialHeight;
-        this.#updateCanvasBackingStore(initialWidth, initialHeight);
+        const initialMeasurement = this.#measurePlotElement(plotEl);
+        if (initialMeasurement) {
+            this.#applyMeasuredSize(initialMeasurement.width, initialMeasurement.height);
+        }
+        else {
+            this.#initialMeasurementPending = true;
+            this.#scheduleInitialMeasurement();
+        }
     }
     #normalizePointer(event) {
         const element = this.#getSurfaceElement();
@@ -54309,15 +54380,10 @@ class ChartComponent {
             this.#paint();
             return;
         }
-        if (this.#currentWidth <= 0 || this.#currentHeight <= 0) {
-            const plotEl = this.plotSurfaceElement()?.nativeElement ||
-                this.canvasElement()?.nativeElement.parentElement ||
-                this.#elementRef.nativeElement;
-            const rect = plotEl.getBoundingClientRect();
-            if (rect.width > 0 && rect.height > 0) {
-                this.#currentWidth = rect.width;
-                this.#currentHeight = rect.height;
-                this.#updateCanvasBackingStore(rect.width, rect.height);
+        if (this.#initialMeasurementPending || this.#currentWidth <= 0 || this.#currentHeight <= 0) {
+            const measurement = this.#measurePlotElement(this.#getPlotElement());
+            if (measurement) {
+                this.#applyMeasuredSize(measurement.width, measurement.height);
             }
         }
         const sizeChanged = !this.scene() ||
@@ -54336,8 +54402,12 @@ class ChartComponent {
             !isChromeOnly &&
             !hasInvalidationReason(reason, 4 /* ChartInvalidationReason.Style */) &&
             this.#cartesianLayoutRuntime !== null;
+        const isNonCartesianSizeChange = hasInvalidationReason(reason, 16 /* ChartInvalidationReason.Size */) &&
+            sizeChanged &&
+            this.#cartesianLayoutRuntime === null;
         const requiresSceneRefresh = isStructural ||
             isChromeOnly ||
+            isNonCartesianSizeChange ||
             hasInvalidationReason(reason, 4 /* ChartInvalidationReason.Style */) ||
             hasInvalidationReason(reason, 64 /* ChartInvalidationReason.Viewport */) ||
             !this.scene();
@@ -54418,6 +54488,19 @@ class ChartComponent {
         // Commit semantic target scene immediately
         this.scene.set(newScene);
         this.#updateGestureController();
+        const isWaitingForInitialPolarSvgMeasurement = this.#initialMeasurementPending &&
+            this.renderer() === "svg" &&
+            newScene.coordinateSystem === "polar" &&
+            newScene.polarKind === "arc";
+        if (isWaitingForInitialPolarSvgMeasurement) {
+            this.#renderScene = null;
+            this.#hasCommittedVisualScene = false;
+            this.#isAnimating.set(false);
+            this.#isStructuralAnimation.set(false);
+            this.#animationMode.set(null);
+            this.#isExitingData.set(false);
+            return;
+        }
         const isInitial = !this.#hasCommittedVisualScene;
         const isVisibility = hasInvalidationReason(reason, 32 /* ChartInvalidationReason.Visibility */);
         const isData = hasInvalidationReason(reason, 1 /* ChartInvalidationReason.Data */);
@@ -55070,7 +55153,7 @@ class ChartComponent {
         }
         try {
             this.#renderBackend = createChartRenderBackend(mode, canvas, svg);
-            if (this.#currentWidth > 0 && this.#currentHeight > 0) {
+            if (!this.#initialMeasurementPending && this.#currentWidth > 0 && this.#currentHeight > 0) {
                 const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
                 this.#renderBackend.resize({
                     devicePixelRatio: dpr,
@@ -55358,15 +55441,17 @@ class ChartComponent {
         this.#renderScheduler.schedule(reason);
     }
     ngAfterContentChecked() {
-        if (!this.#canvasReady) {
-            const plotEl = this.plotSurfaceElement()?.nativeElement ||
-                this.canvasElement()?.nativeElement.parentElement ||
-                this.#elementRef.nativeElement;
-            const rect = plotEl.getBoundingClientRect();
-            if (rect.width > 0 && rect.height > 0) {
-                this.#currentWidth = rect.width;
-                this.#currentHeight = rect.height;
-                this.#updateCanvasBackingStore(rect.width, rect.height);
+        this.#syncResizeObserverTarget();
+        if (!this.#canvasReady ||
+            this.#initialMeasurementPending ||
+            this.#currentWidth <= 0 ||
+            this.#currentHeight <= 0) {
+            const measurement = this.#measurePlotElement(this.#getPlotElement());
+            if (measurement) {
+                const changed = this.#applyMeasuredSize(measurement.width, measurement.height);
+                if (this.#canvasReady && changed) {
+                    this.invalidate(16 /* ChartInvalidationReason.Size */);
+                }
             }
         }
         this.#renderScheduler.flushStructural();
@@ -56807,14 +56892,15 @@ class ChartXAxisComponent {
     #chartContext;
     #destroyRef;
     #registrationId;
+    #registered;
     get registrationId() {
         return this.#registrationId;
     }
-    #registered;
     constructor() {
         this.#chartContext = inject(CHART_CONTEXT, { optional: true });
         this.#destroyRef = inject(DestroyRef);
         this.#registrationId = `mona-x-axis-${++nextXAxisId}`;
+        this.#registered = false;
         this.labelTemplate = contentChild(ChartAxisLabelTemplateDirective, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "labelTemplate" }] : /* istanbul ignore next */ []));
         /**
@@ -56955,7 +57041,6 @@ class ChartXAxisComponent {
          */
         this.visible = input(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.axisId();
             this.axisLine();
@@ -57040,14 +57125,15 @@ class ChartYAxisComponent {
     #chartContext;
     #destroyRef;
     #registrationId;
+    #registered;
     get registrationId() {
         return this.#registrationId;
     }
-    #registered;
     constructor() {
         this.#chartContext = inject(CHART_CONTEXT, { optional: true });
         this.#destroyRef = inject(DestroyRef);
         this.#registrationId = `mona-y-axis-${++nextYAxisId}`;
+        this.#registered = false;
         this.labelTemplate = contentChild(ChartAxisLabelTemplateDirective, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "labelTemplate" }] : /* istanbul ignore next */ []));
         /**
@@ -57182,7 +57268,6 @@ class ChartYAxisComponent {
          */
         this.visible = input(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.axisId();
             this.axisLine();
@@ -57267,6 +57352,7 @@ class ChartAngularAxisComponent {
     constructor() {
         this.#chartContext = inject(CHART_CONTEXT, { optional: true });
         this.#destroyRef = inject(DestroyRef);
+        this.#registered = false;
         this.labelTemplate = contentChild(ChartAxisLabelTemplateDirective, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "labelTemplate" }] : /* istanbul ignore next */ []));
         /**
@@ -57322,7 +57408,6 @@ class ChartAngularAxisComponent {
          */
         this.visible = input(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.axisLine();
             this.formatter();
@@ -57380,6 +57465,7 @@ class ChartRadialAxisComponent {
     constructor() {
         this.#chartContext = inject(CHART_CONTEXT, { optional: true });
         this.#destroyRef = inject(DestroyRef);
+        this.#registered = false;
         this.labelTemplate = contentChild(ChartAxisLabelTemplateDirective, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "labelTemplate" }] : /* istanbul ignore next */ []));
         /**
@@ -57459,7 +57545,6 @@ class ChartRadialAxisComponent {
          */
         this.visible = input(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.axisLine();
             this.formatter();
@@ -57544,6 +57629,7 @@ class LineSeriesComponent {
         this.#destroyRef = inject(DestroyRef);
         this.#elementRef = inject(ElementRef);
         this.#id = `mona-line-series-${++nextSeriesId$9}`;
+        this.#registered = false;
         /**
          * @description Explicit stroke color override for the series line.
          * @default ""
@@ -57653,7 +57739,6 @@ class LineSeriesComponent {
          */
         this.yAxisId = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "yAxisId" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.visible();
             if (this.#registered) {
@@ -57763,6 +57848,7 @@ class AreaSeriesComponent {
         this.#destroyRef = inject(DestroyRef);
         this.#elementRef = inject(ElementRef);
         this.#id = `mona-area-series-${++nextSeriesId$8}`;
+        this.#registered = false;
         /**
          * @description Explicit stroke and fill color override for the area series.
          * @default ""
@@ -57902,7 +57988,6 @@ class AreaSeriesComponent {
          */
         this.yAxisId = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "yAxisId" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.visible();
             if (this.#registered) {
@@ -58022,6 +58107,7 @@ class BarSeriesComponent {
         this.#destroyRef = inject(DestroyRef);
         this.#elementRef = inject(ElementRef);
         this.#id = `mona-bar-series-${++nextSeriesId$7}`;
+        this.#registered = false;
         /**
          * @description Corner radius in pixels for the bar caps.
          * @default undefined
@@ -58137,7 +58223,6 @@ class BarSeriesComponent {
          */
         this.yAxisId = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "yAxisId" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         let initialVisible = true;
         effect(() => {
             this.visible();
@@ -58284,6 +58369,7 @@ class PieSeriesComponent {
         this.#seriesId = `mona-pie-series-${++nextPieSeriesId}`;
         this.#visibilityRevision = signal(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#visibilityRevision" }] : /* istanbul ignore next */ []));
+        this.#registered = false;
         this.sliceLabelTemplate = contentChild(ChartSliceLabelTemplateDirective, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "sliceLabelTemplate" }] : /* istanbul ignore next */ []));
         /**
@@ -58433,7 +58519,6 @@ class PieSeriesComponent {
          */
         this.visible = model(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.visible();
             if (this.#registered) {
@@ -58600,6 +58685,7 @@ class DonutSeriesComponent {
         this.#seriesId = `mona-donut-series-${++nextDonutSeriesId}`;
         this.#visibilityRevision = signal(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#visibilityRevision" }] : /* istanbul ignore next */ []));
+        this.#registered = false;
         this.centerTemplate = contentChild(ChartCenterTemplateDirective, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "centerTemplate" }] : /* istanbul ignore next */ []));
         this.sliceLabelTemplate = contentChild(ChartSliceLabelTemplateDirective, /* @ts-ignore */
@@ -58757,7 +58843,6 @@ class DonutSeriesComponent {
          */
         this.visible = model(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.visible();
             if (this.#registered) {
@@ -58907,6 +58992,7 @@ class RadarSeriesComponent {
         this.#destroyRef = inject(DestroyRef);
         this.#elementRef = inject(ElementRef);
         this.#id = `mona-radar-series-${++nextRadarSeriesId}`;
+        this.#registered = false;
         /**
          * @description Property key or accessor function extracting the angular spoke category for each data item.
          * @default "category"
@@ -59002,7 +59088,6 @@ class RadarSeriesComponent {
          */
         this.visible = model(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.visible();
             if (this.#registered) {
@@ -59101,6 +59186,7 @@ class PolarSeriesComponent {
         this.#destroyRef = inject(DestroyRef);
         this.#elementRef = inject(ElementRef);
         this.#id = `mona-polar-series-${++nextPolarSeriesId}`;
+        this.#registered = false;
         /**
          * @description Property key or accessor function extracting the degree angle (0° to 360°) for each data item.
          * @default "angle"
@@ -59196,7 +59282,6 @@ class PolarSeriesComponent {
          */
         this.visible = model(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.visible();
             if (this.#registered) {
@@ -59301,6 +59386,8 @@ class ChartLegendComponent {
     #chartContext;
     #destroyRef;
     constructor() {
+        this.#chartContext = inject(CHART_CONTEXT, { optional: true });
+        this.#destroyRef = inject(DestroyRef);
         this.containerClasses = computed(() => twMerge(chartLegendBaseThemeVariants({ position: this.position() }), this.userClass()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "containerClasses" }] : /* istanbul ignore next */ []));
         this.gradientCss = computed(() => {
@@ -59353,8 +59440,6 @@ class ChartLegendComponent {
         ...(ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []));
         this.legendScale = computed(() => this.#chartContext?.legendScale?.() ?? null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "legendScale" }] : /* istanbul ignore next */ []));
-        this.#chartContext = inject(CHART_CONTEXT, { optional: true });
-        this.#destroyRef = inject(DestroyRef);
         /**
          * @description Whether clicking or pressing Enter/Space on legend items toggles series visibility.
          * @default true
@@ -59592,6 +59677,7 @@ class ScatterSeriesComponent {
         this.#destroyRef = inject(DestroyRef);
         this.#elementRef = inject(ElementRef);
         this.#id = `mona-scatter-series-${++nextSeriesId$6}`;
+        this.#registered = false;
         /**
          * @description Explicit fill color for the scatter points.
          * @default ""
@@ -59695,7 +59781,6 @@ class ScatterSeriesComponent {
          */
         this.yAxisId = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "yAxisId" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.visible();
             if (this.#registered) {
@@ -59803,6 +59888,7 @@ class BubbleSeriesComponent {
         this.#destroyRef = inject(DestroyRef);
         this.#elementRef = inject(ElementRef);
         this.#id = `mona-bubble-series-${++nextSeriesId$5}`;
+        this.#registered = false;
         /**
          * @description Explicit fill color for the bubbles.
          * @default ""
@@ -59924,7 +60010,6 @@ class BubbleSeriesComponent {
          */
         this.yAxisId = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "yAxisId" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.visible();
             if (this.#registered) {
@@ -60038,6 +60123,7 @@ class RangeBarSeriesComponent {
         this.#destroyRef = inject(DestroyRef);
         this.#elementRef = inject(ElementRef);
         this.#id = `mona-range-bar-series-${++nextSeriesId$4}`;
+        this.#registered = false;
         /**
          * @description Corner radius in pixels for the floating bar caps.
          * @default undefined
@@ -60145,7 +60231,6 @@ class RangeBarSeriesComponent {
          */
         this.yAxisId = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "yAxisId" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.visible();
             if (this.#registered) {
@@ -60255,6 +60340,7 @@ class RangeAreaSeriesComponent {
         this.#destroyRef = inject(DestroyRef);
         this.#elementRef = inject(ElementRef);
         this.#id = `mona-range-area-series-${++nextSeriesId$3}`;
+        this.#registered = false;
         /**
          * @description Explicit stroke and fill color override for the range area series.
          * @default ""
@@ -60380,7 +60466,6 @@ class RangeAreaSeriesComponent {
          */
         this.yAxisId = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "yAxisId" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.visible();
             if (this.#registered) {
@@ -60496,6 +60581,7 @@ class HeatmapSeriesComponent {
         this.#destroyRef = inject(DestroyRef);
         this.#elementRef = inject(ElementRef);
         this.#id = `mona-heatmap-series-${++nextSeriesId$2}`;
+        this.#registered = false;
         /**
          * @description Corner radius in pixels for each individual heat cell.
          * @default undefined
@@ -60631,7 +60717,6 @@ class HeatmapSeriesComponent {
          */
         this.yField = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "yField" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.visible();
             if (this.#registered) {
@@ -60739,6 +60824,7 @@ class CandlestickSeriesComponent {
         this.#destroyRef = inject(DestroyRef);
         this.#elementRef = inject(ElementRef);
         this.#id = `mona-candlestick-series-${++nextSeriesId$1}`;
+        this.#registered = false;
         /**
          * @description Explicit body width in pixels for candlestick candles.
          * @default undefined
@@ -60892,7 +60978,6 @@ class CandlestickSeriesComponent {
          */
         this.yAxisId = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "yAxisId" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.closeField();
             this.data();
@@ -61009,12 +61094,13 @@ class OhlcSeriesComponent {
     #id;
     #registered;
     constructor() {
-        this.effectiveTickLength = computed(() => this.tickLength() ?? this.tickWidth(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "effectiveTickLength" }] : /* istanbul ignore next */ []));
         this.#chartContext = inject(CHART_CONTEXT, { optional: true });
         this.#destroyRef = inject(DestroyRef);
         this.#elementRef = inject(ElementRef);
         this.#id = `mona-ohlc-series-${++nextSeriesId}`;
+        this.#registered = false;
+        this.effectiveTickLength = computed(() => this.tickLength() ?? this.tickWidth(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveTickLength" }] : /* istanbul ignore next */ []));
         /**
          * @description Explicit total width in pixels for open/close tick arms.
          * @default undefined
@@ -61174,7 +61260,6 @@ class OhlcSeriesComponent {
          */
         this.yAxisId = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "yAxisId" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.closeField();
             this.data();
@@ -61304,6 +61389,7 @@ class RadialBarSeriesComponent {
         this.#seriesId = `mona-radial-bar-series-${++nextRadialBarSeriesId}`;
         this.#visibilityRevision = signal(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#visibilityRevision" }] : /* istanbul ignore next */ []));
+        this.#registered = false;
         /**
          * @description Spacing in pixels between concentric radial rings.
          * @default 4
@@ -61469,7 +61555,6 @@ class RadialBarSeriesComponent {
          */
         this.visible = model(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.visible();
             if (this.#registered) {
@@ -61638,6 +61723,7 @@ class RoseSeriesComponent {
         this.#seriesId = `mona-rose-series-${++nextRoseSeriesId}`;
         this.#visibilityRevision = signal(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#visibilityRevision" }] : /* istanbul ignore next */ []));
+        this.#registered = false;
         /**
          * @description Property key or accessor extracting the category label for each rose petal.
          * @default "category"
@@ -61773,7 +61859,6 @@ class RoseSeriesComponent {
          */
         this.visible = model(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.visible();
             if (this.#registered) {
@@ -61937,12 +62022,13 @@ class GaugeSeriesComponent {
     #seriesId;
     #registered;
     constructor() {
-        this.centerTemplate = contentChild(ChartGaugeCenterTemplateDirective, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "centerTemplate" }] : /* istanbul ignore next */ []));
         this.#chartContext = inject(CHART_CONTEXT, { optional: true });
         this.#destroyRef = inject(DestroyRef);
         this.#elementRef = inject(ElementRef);
         this.#seriesId = `mona-gauge-series-${++nextGaugeSeriesId}`;
+        this.#registered = false;
+        this.centerTemplate = contentChild(ChartGaugeCenterTemplateDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "centerTemplate" }] : /* istanbul ignore next */ []));
         /**
          * @description Primary color of the gauge value arc.
          * @default ""
@@ -62098,7 +62184,6 @@ class GaugeSeriesComponent {
          */
         this.visible = model(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.visible();
             if (this.#registered) {
@@ -62236,6 +62321,7 @@ class TreemapSeriesComponent {
         this.#seriesId = `mona-treemap-series-${++nextTreemapSeriesId}`;
         this.#visibilityRevision = signal(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#visibilityRevision" }] : /* istanbul ignore next */ []));
+        this.#registered = false;
         /**
          * @description Corner radius in pixels applied to leaf node rectangles.
          * @default undefined
@@ -62424,7 +62510,6 @@ class TreemapSeriesComponent {
          */
         this.visible = model(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.visible();
             if (this.#registered) {
@@ -62626,6 +62711,7 @@ class FunnelSeriesComponent {
         this.#stageIdentityMap = new Map();
         this.#visibilityRevision = signal(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#visibilityRevision" }] : /* istanbul ignore next */ []));
+        this.#registered = false;
         /**
          * @description Property key or accessor extracting stage names.
          * @default "category"
@@ -62773,7 +62859,6 @@ class FunnelSeriesComponent {
          */
         this.widthRatio = input(0.9, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "widthRatio" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             const rawData = this.data() ?? this.#chartContext?.rootData() ?? [];
             const keyF = this.keyField();
@@ -62985,6 +63070,7 @@ class WaterfallSeriesComponent {
         this.#destroyRef = inject(DestroyRef);
         this.#elementRef = inject(ElementRef);
         this.#seriesId = `mona-waterfall-series-${++nextWaterfallSeriesId}`;
+        this.#registered = false;
         /**
          * @description Corner radius in pixels applied to the four corners of waterfall bars.
          * @default undefined
@@ -63146,7 +63232,6 @@ class WaterfallSeriesComponent {
          */
         this.xField = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "xField" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.visible();
             if (this.#registered) {
@@ -63921,6 +64006,7 @@ class ChartSelectionComponent {
     constructor() {
         this.#chartContext = inject(CHART_CONTEXT, { optional: true });
         this.#destroyRef = inject(DestroyRef);
+        this.#registered = false;
         /**
          * @description Whether clicking plot background clears active selection.
          * @default true
@@ -63991,7 +64077,6 @@ class ChartSelectionComponent {
          */
         this.strokeWidth = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.enabled();
             this.mode();
@@ -64065,6 +64150,7 @@ class ChartBrushComponent {
     constructor() {
         this.#chartContext = inject(CHART_CONTEXT, { optional: true });
         this.#destroyRef = inject(DestroyRef);
+        this.#registered = false;
         /**
          * @description Activation trigger gesture ('drag' or 'shift-drag').
          * @default "shift-drag"
@@ -64147,7 +64233,6 @@ class ChartBrushComponent {
          */
         this.yAxisId = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "yAxisId" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.enabled();
             this.mode();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanahoshi/mona-ui",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "description": "A very light Angular UI framework",
   "author": "Nanahoshi",
   "repository": {

package/types/nanahoshi-mona-ui-chart.d.ts

@@ -4488,8 +4488,8 @@ declare class ChartComponent implements ChartRegistrationContext, AfterContentCh
 
 declare class ChartXAxisComponent implements OnInit {
     #private;
-    protected readonly labelTemplate: _angular_core.Signal<ChartAxisLabelTemplateDirective | undefined>;
     get registrationId(): string;
+    protected readonly labelTemplate: _angular_core.Signal<ChartAxisLabelTemplateDirective | undefined>;
     /**
      * @description Optional semantic identifier for the X axis, referenced by series `xAxisId`.
      * @default undefined
@@ -4613,8 +4613,8 @@ declare class ChartXAxisComponent implements OnInit {
 
 declare class ChartYAxisComponent implements OnInit {
     #private;
-    protected readonly labelTemplate: _angular_core.Signal<ChartAxisLabelTemplateDirective | undefined>;
     get registrationId(): string;
+    protected readonly labelTemplate: _angular_core.Signal<ChartAxisLabelTemplateDirective | undefined>;
     /**
      * @description Optional semantic identifier for the Y axis, referenced by series `yAxisId`.
      * @default undefined