@praxisui/charts 9.0.0-beta.7 → 9.0.0-beta.71

package/fesm2022/praxisui-charts.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { Injectable, Inject, InjectionToken, input, booleanAttribute, output, viewChild, inject, ElementRef, NgZone, DestroyRef, signal, computed, afterNextRender, effect, ChangeDetectionStrategy, Component, ViewChild, Input, ENVIRONMENT_INITIALIZER } from '@angular/core';
 import * as i1$1 from '@praxisui/core';
-import { buildApiUrl, API_URL, PraxisI18nService, SETTINGS_PANEL_BRIDGE, providePraxisI18n, SETTINGS_PANEL_DATA, ComponentMetadataRegistry, createDefaultTableConfig, AnalyticsStatsRequestBuilderService, DynamicWidgetPageComponent } from '@praxisui/core';
+import { buildApiUrl, API_URL, PraxisI18nService, SETTINGS_PANEL_BRIDGE, normalizePraxisPresentationVisualization, providePraxisI18n, SETTINGS_PANEL_DATA, ComponentMetadataRegistry, createDefaultTableConfig, PRAXIS_TABLE_DETAIL_INLINE_RENDERERS, AnalyticsStatsRequestBuilderService, DynamicWidgetPageComponent } from '@praxisui/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { throwError, map, of, isObservable, from, BehaviorSubject, Subscription } from 'rxjs';
 import * as i1$2 from '@angular/material/button';
@@ -2263,7 +2263,13 @@ class PraxisChartComponent {
         const dataSource = config.dataSource;
         const explicitData = this.data();
         if (dataSource?.kind === 'remote' && (explicitData === null || explicitData === undefined)) {
-            return this.remoteRuntimeState() === 'ready' ? 'ready' : 'loading';
+            const remoteState = this.remoteRuntimeState();
+            if (remoteState === 'error') {
+                return 'error';
+            }
+            if (remoteState !== 'ready') {
+                return 'loading';
+            }
         }
         const transformed = this.transformer.transform(config, this.resolvedData());
         return transformed.hasData ? 'ready' : 'empty';
@@ -2929,6 +2935,915 @@ function normalizeRemoteDataResolverResult$1(result) {
     return of([]);
 }
 
+const SUPPORTED_KINDS = new Set([
+    'comparison',
+    'stackedBar',
+    'bullet',
+    'delta',
+    'radial',
+    'harveyBall',
+    'line',
+    'area',
+    'column',
+    'processFlow',
+]);
+class PraxisMicroVisualizationComponent {
+    visualizationInput = input(null, { ...(ngDevMode ? { debugName: "visualizationInput" } : /* istanbul ignore next */ {}), alias: 'visualization' });
+    fallbackInput = input('', { ...(ngDevMode ? { debugName: "fallbackInput" } : /* istanbul ignore next */ {}), alias: 'fallbackText' });
+    visualization = computed(() => {
+        const normalized = normalizePraxisPresentationVisualization(this.visualizationInput());
+        return normalized && SUPPORTED_KINDS.has(normalized.kind)
+            ? normalized
+            : null;
+    }, ...(ngDevMode ? [{ debugName: "visualization" }] : /* istanbul ignore next */ []));
+    fallbackText = computed(() => this.visualizationInput()?.fallbackText?.trim() || this.fallbackInput().trim(), ...(ngDevMode ? [{ debugName: "fallbackText" }] : /* istanbul ignore next */ []));
+    kind = computed(() => this.visualization()?.kind ?? 'fallback', ...(ngDevMode ? [{ debugName: "kind" }] : /* istanbul ignore next */ []));
+    surface = computed(() => this.visualization()?.surface ?? null, ...(ngDevMode ? [{ debugName: "surface" }] : /* istanbul ignore next */ []));
+    size = computed(() => this.visualization()?.size ?? null, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    isTableCell = computed(() => this.surface() === 'table-cell', ...(ngDevMode ? [{ debugName: "isTableCell" }] : /* istanbul ignore next */ []));
+    ariaLabel = computed(() => {
+        const config = this.visualization();
+        return config?.ariaLabel || config?.fallbackText || null;
+    }, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    comparisonItems = computed(() => this.visualization()?.points ?? [], ...(ngDevMode ? [{ debugName: "comparisonItems" }] : /* istanbul ignore next */ []));
+    stackedSegments = computed(() => this.visualization()?.segments ?? [], ...(ngDevMode ? [{ debugName: "stackedSegments" }] : /* istanbul ignore next */ []));
+    bulletThresholds = computed(() => this.visualization()?.thresholds ?? [], ...(ngDevMode ? [{ debugName: "bulletThresholds" }] : /* istanbul ignore next */ []));
+    bulletBands = computed(() => {
+        const max = this.resolveBulletMax();
+        let previous = 0;
+        return this.bulletThresholds()
+            .map((threshold) => {
+            const current = Math.max(threshold.value, previous);
+            const left = max > 0 ? clampPercent((previous / max) * 100) : 0;
+            const width = max > 0 ? clampPercent(((current - previous) / max) * 100) : 0;
+            previous = current;
+            return {
+                ...(threshold.label ? { label: threshold.label } : {}),
+                ...(threshold.tone ? { tone: threshold.tone } : {}),
+                left,
+                width,
+            };
+        })
+            .filter((band) => band.width > 0);
+    }, ...(ngDevMode ? [{ debugName: "bulletBands" }] : /* istanbul ignore next */ []));
+    deltaValue = computed(() => {
+        const value = this.visualization()?.value;
+        return typeof value === 'number' && Number.isFinite(value) ? value : 0;
+    }, ...(ngDevMode ? [{ debugName: "deltaValue" }] : /* istanbul ignore next */ []));
+    deltaText = computed(() => {
+        const config = this.visualization();
+        if (!config) {
+            return '';
+        }
+        return config.fallbackText || this.formatNumber(this.deltaValue());
+    }, ...(ngDevMode ? [{ debugName: "deltaText" }] : /* istanbul ignore next */ []));
+    deltaIcon = computed(() => {
+        const fallbackText = this.visualization()?.fallbackText?.trim() ?? '';
+        if (/^[+-]/.test(fallbackText)) {
+            return '';
+        }
+        const value = this.deltaValue();
+        if (value > 0) {
+            return '+';
+        }
+        if (value < 0) {
+            return '-';
+        }
+        return '';
+    }, ...(ngDevMode ? [{ debugName: "deltaIcon" }] : /* istanbul ignore next */ []));
+    itemPercent(value) {
+        if (!Number.isFinite(value)) {
+            return 0;
+        }
+        const values = this.comparisonItems()
+            .map((item) => item.value)
+            .filter((itemValue) => Number.isFinite(itemValue));
+        const max = Math.max(...values, 0);
+        return max > 0 ? clampPercent((value / max) * 100) : 0;
+    }
+    segmentPercent(value) {
+        const total = this.stackedSegments()
+            .reduce((sum, segment) => sum + Math.max(segment.value, 0), 0);
+        return total > 0 ? clampPercent((Math.max(value, 0) / total) * 100) : 0;
+    }
+    valuePercent(value) {
+        const max = this.resolveBulletMax();
+        return typeof value === 'number' && max > 0 ? clampPercent((Math.max(value, 0) / max) * 100) : 0;
+    }
+    formatNumber(value) {
+        if (typeof value !== 'number' || !Number.isFinite(value)) {
+            return '';
+        }
+        return new Intl.NumberFormat(undefined, {
+            maximumFractionDigits: Math.abs(value) < 10 ? 2 : 0,
+        }).format(value);
+    }
+    radialPercent = computed(() => {
+        const config = this.visualization();
+        if (!config)
+            return 0;
+        const val = typeof config.value === 'number' ? config.value : 0;
+        const total = config.total && config.total > 0 ? config.total : 100;
+        return clampPercent((val / total) * 100);
+    }, ...(ngDevMode ? [{ debugName: "radialPercent" }] : /* istanbul ignore next */ []));
+    radialDashArray = computed(() => {
+        return `${this.radialPercent().toFixed(1)}, 100`;
+    }, ...(ngDevMode ? [{ debugName: "radialDashArray" }] : /* istanbul ignore next */ []));
+    radialText = computed(() => `${Math.round(this.radialPercent())}%`, ...(ngDevMode ? [{ debugName: "radialText" }] : /* istanbul ignore next */ []));
+    harveyPercent = computed(() => {
+        const config = this.visualization();
+        if (!config)
+            return 0;
+        const val = typeof config.value === 'number' ? config.value : 0;
+        const total = config.total && config.total > 0 ? config.total : 100;
+        return clampPercent((val / total) * 100);
+    }, ...(ngDevMode ? [{ debugName: "harveyPercent" }] : /* istanbul ignore next */ []));
+    harveyDashArray = computed(() => {
+        const len = this.harveyPercent() * 0.50265;
+        return `${len.toFixed(3)} 50.265`;
+    }, ...(ngDevMode ? [{ debugName: "harveyDashArray" }] : /* istanbul ignore next */ []));
+    harveyText = computed(() => `${Math.round(this.harveyPercent())}%`, ...(ngDevMode ? [{ debugName: "harveyText" }] : /* istanbul ignore next */ []));
+    firstPoint = computed(() => {
+        const points = this.visualization()?.points ?? [];
+        return points.length > 0 ? points[0] : null;
+    }, ...(ngDevMode ? [{ debugName: "firstPoint" }] : /* istanbul ignore next */ []));
+    lastPoint = computed(() => {
+        const points = this.visualization()?.points ?? [];
+        return points.length > 0 ? points[points.length - 1] : null;
+    }, ...(ngDevMode ? [{ debugName: "lastPoint" }] : /* istanbul ignore next */ []));
+    minPointIndex = computed(() => {
+        const points = this.visualization()?.points ?? [];
+        if (points.length === 0)
+            return -1;
+        let minIdx = 0;
+        for (let i = 1; i < points.length; i++) {
+            if (points[i].value < points[minIdx].value) {
+                minIdx = i;
+            }
+        }
+        return minIdx;
+    }, ...(ngDevMode ? [{ debugName: "minPointIndex" }] : /* istanbul ignore next */ []));
+    maxPointIndex = computed(() => {
+        const points = this.visualization()?.points ?? [];
+        if (points.length === 0)
+            return -1;
+        let maxIdx = 0;
+        for (let i = 1; i < points.length; i++) {
+            if (points[i].value > points[maxIdx].value) {
+                maxIdx = i;
+            }
+        }
+        return maxIdx;
+    }, ...(ngDevMode ? [{ debugName: "maxPointIndex" }] : /* istanbul ignore next */ []));
+    trendMarkers = computed(() => {
+        const coords = this.trendCoords();
+        const points = this.visualization()?.points ?? [];
+        if (coords.length === 0)
+            return [];
+        const markers = [];
+        const minIdx = this.minPointIndex();
+        const maxIdx = this.maxPointIndex();
+        const tone = this.visualization()?.tone ?? 'info';
+        // Add first point
+        markers.push({
+            x: coords[0].x,
+            y: coords[0].y,
+            tone: points[0].tone ?? tone,
+            label: `First: ${points[0].value}`,
+        });
+        // Add last point
+        if (coords.length > 1) {
+            markers.push({
+                x: coords[coords.length - 1].x,
+                y: coords[coords.length - 1].y,
+                tone: points[points.length - 1].tone ?? tone,
+                label: `Last: ${points[points.length - 1].value}`,
+            });
+        }
+        // Add min point (if not first/last)
+        if (minIdx !== 0 && minIdx !== coords.length - 1 && minIdx !== -1) {
+            markers.push({
+                x: coords[minIdx].x,
+                y: coords[minIdx].y,
+                tone: points[minIdx].tone ?? 'danger',
+                label: `Min: ${points[minIdx].value}`,
+            });
+        }
+        // Add max point (if not first/last)
+        if (maxIdx !== 0 && maxIdx !== coords.length - 1 && maxIdx !== -1) {
+            markers.push({
+                x: coords[maxIdx].x,
+                y: coords[maxIdx].y,
+                tone: points[maxIdx].tone ?? 'success',
+                label: `Max: ${points[maxIdx].value}`,
+            });
+        }
+        return markers;
+    }, ...(ngDevMode ? [{ debugName: "trendMarkers" }] : /* istanbul ignore next */ []));
+    trendCoords = computed(() => {
+        const config = this.visualization();
+        const points = config?.points ?? [];
+        if (points.length < 2)
+            return [];
+        const width = 100;
+        const height = 30;
+        const padding = 4;
+        const values = points.map(p => p.value);
+        const minVal = Math.min(...values);
+        const maxVal = Math.max(...values);
+        const valRange = maxVal - minVal === 0 ? 1 : maxVal - minVal;
+        return points.map((p, index) => {
+            const x = padding + (index / (points.length - 1)) * (width - 2 * padding);
+            const y = height - padding - ((p.value - minVal) / valRange) * (height - 2 * padding);
+            return { x, y };
+        });
+    }, ...(ngDevMode ? [{ debugName: "trendCoords" }] : /* istanbul ignore next */ []));
+    trendPathD = computed(() => {
+        const coords = this.trendCoords();
+        if (coords.length < 2)
+            return '';
+        return coords.map((c, i) => `${i === 0 ? 'M' : 'L'} ${c.x.toFixed(1)} ${c.y.toFixed(1)}`).join(' ');
+    }, ...(ngDevMode ? [{ debugName: "trendPathD" }] : /* istanbul ignore next */ []));
+    trendAreaD = computed(() => {
+        const pathD = this.trendPathD();
+        const coords = this.trendCoords();
+        if (!pathD || coords.length < 2)
+            return '';
+        const height = 30;
+        const firstX = coords[0].x.toFixed(1);
+        const lastX = coords[coords.length - 1].x.toFixed(1);
+        return `${pathD} L ${lastX} ${height} L ${firstX} ${height} Z`;
+    }, ...(ngDevMode ? [{ debugName: "trendAreaD" }] : /* istanbul ignore next */ []));
+    trendColumns = computed(() => {
+        const config = this.visualization();
+        const points = config?.points ?? [];
+        if (points.length === 0)
+            return [];
+        const width = 100;
+        const height = 30;
+        const padding = 4;
+        const values = points.map(p => p.value);
+        const maxVal = Math.max(...values, 0);
+        const minVal = Math.min(...values, 0);
+        const valRange = maxVal - minVal === 0 ? 1 : maxVal - minVal;
+        const colWidth = Math.max(2, (width - 2 * padding) / points.length - 2);
+        const tone = config?.tone ?? 'info';
+        return points.map((p, i) => {
+            const x = padding + i * ((width - 2 * padding) / points.length) + 1;
+            const rectHeight = Math.max(2, ((p.value - minVal) / valRange) * (height - 2 * padding));
+            const rectY = height - padding - rectHeight;
+            return {
+                x: x.toFixed(1),
+                y: rectY.toFixed(1),
+                width: colWidth.toFixed(1),
+                height: rectHeight.toFixed(1),
+                tone: p.tone ?? tone,
+            };
+        });
+    }, ...(ngDevMode ? [{ debugName: "trendColumns" }] : /* istanbul ignore next */ []));
+    processSteps = computed(() => {
+        const config = this.visualization();
+        return config?.items ?? [];
+    }, ...(ngDevMode ? [{ debugName: "processSteps" }] : /* istanbul ignore next */ []));
+    resolveBulletMax() {
+        const config = this.visualization();
+        const values = [
+            typeof config?.value === 'number' ? config.value : 0,
+            config?.target ?? 0,
+            config?.total ?? 0,
+            ...this.bulletThresholds().map((threshold) => threshold.value),
+        ].filter((value) => Number.isFinite(value) && value > 0);
+        return Math.max(...values, 100);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisMicroVisualizationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisMicroVisualizationComponent, isStandalone: true, selector: "praxis-micro-visualization", inputs: { visualizationInput: { classPropertyName: "visualizationInput", publicName: "visualization", isSignal: true, isRequired: false, transformFunction: null }, fallbackInput: { classPropertyName: "fallbackInput", publicName: "fallbackText", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-kind": "kind()", "attr.data-surface": "surface()", "attr.data-size": "size()", "class.prx-micro-visualization--table-cell": "surface() === \"table-cell\"" } }, ngImport: i0, template: `
+    @if (visualization(); as config) {
+      <figure
+        class="prx-micro-visualization"
+        [attr.aria-label]="ariaLabel()"
+        role="img"
+      >
+        @switch (config.kind) {
+          @case ('comparison') {
+            <div class="prx-micro-comparison">
+              @for (item of comparisonItems(); track item.label ?? $index) {
+                <div class="prx-micro-comparison__row">
+                  @if (item.label) {
+                    <span class="prx-micro-comparison__label">{{ item.label }}</span>
+                  }
+                  <span class="prx-micro-comparison__track" aria-hidden="true">
+                    <span
+                      class="prx-micro-comparison__bar"
+                      [attr.data-tone]="item.tone || null"
+                      [style.width.%]="itemPercent(item.value)"
+                    ></span>
+                  </span>
+                  @if (item.value !== undefined) {
+                    <span class="prx-micro-comparison__value">{{ formatNumber(item.value) }}</span>
+                  }
+                </div>
+              }
+            </div>
+          }
+
+          @case ('stackedBar') {
+            <div class="prx-micro-stacked">
+              <div class="prx-micro-stacked__track" aria-hidden="true">
+                @for (segment of stackedSegments(); track segment.label ?? $index) {
+                  <span
+                    class="prx-micro-stacked__segment"
+                    [attr.data-tone]="segment.tone || null"
+                    [style.width.%]="segmentPercent(segment.value)"
+                  ></span>
+                }
+              </div>
+              @if (!isTableCell() && config.fallbackText) {
+                <figcaption class="prx-micro-visualization__caption">{{ config.fallbackText }}</figcaption>
+              }
+            </div>
+          }
+
+          @case ('bullet') {
+            <div class="prx-micro-bullet-container">
+              @if (!isTableCell()) {
+                <div class="prx-micro-bullet__top">
+                  <span class="prx-micro-bullet__label">{{ config.fallbackText }}</span>
+                  <span class="prx-micro-bullet__value" [attr.data-tone]="config.tone || null">
+                    {{ formatNumber(config.value) }}
+                    @if (config.target !== undefined) {
+                      <span class="prx-micro-bullet__target-val">/ Target: {{ formatNumber(config.target) }}</span>
+                    }
+                  </span>
+                </div>
+              }
+
+              <div class="prx-micro-bullet__track" aria-hidden="true">
+                @for (band of bulletBands(); track band.label ?? $index) {
+                  <span
+                    class="prx-micro-bullet__range"
+                    [attr.data-tone]="band.tone || null"
+                    [style.left.%]="band.left"
+                    [style.width.%]="band.width"
+                  ></span>
+                }
+                <span
+                  class="prx-micro-bullet__actual"
+                  [attr.data-tone]="config.tone || null"
+                  [style.width.%]="valuePercent(config.value)"
+                ></span>
+                @if (config.target !== undefined) {
+                  <span
+                    class="prx-micro-bullet__target"
+                    [style.left.%]="valuePercent(config.target)"
+                  ></span>
+                }
+              </div>
+
+              @if (!isTableCell()) {
+                <div class="prx-micro-bullet__bottom">
+                  <span class="prx-micro-bullet__scale-min">{{ formatNumber(config.baseline ?? 0) }}</span>
+                  <span class="prx-micro-bullet__scale-max">{{ formatNumber(config.total ?? 100) }}</span>
+                </div>
+              }
+            </div>
+          }
+
+          @case ('delta') {
+            <div
+              class="prx-micro-delta"
+              [class.prx-micro-delta--positive]="deltaValue() > 0"
+              [class.prx-micro-delta--negative]="deltaValue() < 0"
+            >
+              @if (deltaIcon(); as icon) {
+                <span class="prx-micro-delta__icon" aria-hidden="true">{{ icon }}</span>
+              }
+              <span class="prx-micro-delta__value">{{ deltaText() }}</span>
+            </div>
+          }
+
+          @case ('radial') {
+            <div class="prx-micro-radial" [attr.data-tone]="config.tone || null">
+              <svg class="prx-micro-radial__svg" viewBox="0 0 36 36">
+                <circle class="prx-micro-radial__track" cx="18" cy="18" r="15.9155" />
+                <circle
+                  class="prx-micro-radial__bar"
+                  cx="18"
+                  cy="18"
+                  r="15.9155"
+                  [style.strokeDasharray]="radialDashArray()"
+                />
+                <text x="18" y="21" class="prx-micro-radial__svg-text prx-micro-radial__value">{{ radialText() }}</text>
+              </svg>
+            </div>
+          }
+
+          @case ('harveyBall') {
+            <div class="prx-micro-harvey" [attr.data-tone]="config.tone || null">
+              <svg class="prx-micro-harvey__svg" viewBox="0 0 36 36">
+                <circle class="prx-micro-harvey__track" cx="18" cy="18" r="16" />
+                <circle
+                  class="prx-micro-harvey__bar"
+                  cx="18"
+                  cy="18"
+                  r="8"
+                  [style.strokeDasharray]="harveyDashArray()"
+                />
+              </svg>
+              <span class="prx-micro-harvey__fraction">
+                <strong class="prx-micro-harvey__value">{{ formatNumber(config.value) }}</strong>
+                <span class="prx-micro-harvey__separator">/</span>
+                <span class="prx-micro-harvey__total">{{ formatNumber(config.total) }}</span>
+              </span>
+            </div>
+          }
+
+          @case ('line') {
+            <div class="prx-micro-trend-container">
+              @if (!isTableCell() && firstPoint()) {
+                <div class="prx-micro-trend__label-col prx-micro-trend__label-col--start">
+                  <span class="prx-micro-trend__value">{{ formatNumber(firstPoint()?.value) }}</span>
+                  <span class="prx-micro-trend__label">{{ firstPoint()?.label }}</span>
+                </div>
+              }
+
+              <div class="prx-micro-trend__chart">
+                <div class="prx-micro-line" [attr.data-tone]="config.tone || null">
+                  <svg class="prx-micro-line__svg" viewBox="0 0 100 30">
+                    <path
+                      class="prx-micro-line__path"
+                      [attr.d]="trendPathD()"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                    @for (marker of trendMarkers(); track $index) {
+                      <circle
+                        [attr.cx]="marker.x"
+                        [attr.cy]="marker.y"
+                        r="2.5"
+                        class="prx-micro-trend__marker"
+                        [attr.data-tone]="marker.tone || null"
+                        [attr.title]="marker.label"
+                      />
+                    }
+                  </svg>
+                </div>
+              </div>
+
+              @if (!isTableCell() && lastPoint()) {
+                <div class="prx-micro-trend__label-col prx-micro-trend__label-col--end">
+                  <span class="prx-micro-trend__value">{{ formatNumber(lastPoint()?.value) }}</span>
+                  <span class="prx-micro-trend__label">{{ lastPoint()?.label }}</span>
+                </div>
+              }
+            </div>
+          }
+
+          @case ('area') {
+            <div class="prx-micro-trend-container">
+              @if (!isTableCell() && firstPoint()) {
+                <div class="prx-micro-trend__label-col prx-micro-trend__label-col--start">
+                  <span class="prx-micro-trend__value">{{ formatNumber(firstPoint()?.value) }}</span>
+                  <span class="prx-micro-trend__label">{{ firstPoint()?.label }}</span>
+                </div>
+              }
+
+              <div class="prx-micro-trend__chart">
+                <div class="prx-micro-area" [attr.data-tone]="config.tone || null">
+                  <svg class="prx-micro-area__svg" viewBox="0 0 100 30">
+                    <path
+                      class="prx-micro-area__fill"
+                      [attr.d]="trendAreaD()"
+                      fill="currentColor"
+                      fill-opacity="0.15"
+                    />
+                    <path
+                      class="prx-micro-area__path"
+                      [attr.d]="trendPathD()"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                    @for (marker of trendMarkers(); track $index) {
+                      <circle
+                        [attr.cx]="marker.x"
+                        [attr.cy]="marker.y"
+                        r="2.5"
+                        class="prx-micro-trend__marker"
+                        [attr.data-tone]="marker.tone || null"
+                        [attr.title]="marker.label"
+                      />
+                    }
+                  </svg>
+                </div>
+              </div>
+
+              @if (!isTableCell() && lastPoint()) {
+                <div class="prx-micro-trend__label-col prx-micro-trend__label-col--end">
+                  <span class="prx-micro-trend__value">{{ formatNumber(lastPoint()?.value) }}</span>
+                  <span class="prx-micro-trend__label">{{ lastPoint()?.label }}</span>
+                </div>
+              }
+            </div>
+          }
+
+          @case ('column') {
+            <div class="prx-micro-trend-container">
+              @if (!isTableCell() && firstPoint()) {
+                <div class="prx-micro-trend__label-col prx-micro-trend__label-col--start">
+                  <span class="prx-micro-trend__value">{{ formatNumber(firstPoint()?.value) }}</span>
+                  <span class="prx-micro-trend__label">{{ firstPoint()?.label }}</span>
+                </div>
+              }
+
+              <div class="prx-micro-trend__chart">
+                <div class="prx-micro-column" [attr.data-tone]="config.tone || null">
+                  <svg class="prx-micro-column__svg" viewBox="0 0 100 30">
+                    @for (col of trendColumns(); track $index) {
+                      <rect
+                        class="prx-micro-column__bar"
+                        [attr.x]="col.x"
+                        [attr.y]="col.y"
+                        [attr.width]="col.width"
+                        [attr.height]="col.height"
+                        [attr.data-tone]="col.tone || null"
+                      />
+                    }
+                  </svg>
+                </div>
+              </div>
+
+              @if (!isTableCell() && lastPoint()) {
+                <div class="prx-micro-trend__label-col prx-micro-trend__label-col--end">
+                  <span class="prx-micro-trend__value">{{ formatNumber(lastPoint()?.value) }}</span>
+                  <span class="prx-micro-trend__label">{{ lastPoint()?.label }}</span>
+                </div>
+              }
+            </div>
+          }
+
+          @case ('processFlow') {
+            <div class="prx-micro-process">
+              @for (item of processSteps(); track item.id ?? $index) {
+                <div class="prx-micro-process__step" [class.prx-micro-process__step--last]="$last">
+                  <div class="prx-micro-process__node-wrapper">
+                    <span
+                      class="prx-micro-process__node"
+                      [attr.data-tone]="item.tone || null"
+                      [attr.title]="item.label || null"
+                    >
+                      @if (item.icon) {
+                        <span class="material-icons prx-micro-process__icon" aria-hidden="true">{{ item.icon }}</span>
+                      } @else {
+                        {{ $index + 1 }}
+                      }
+                    </span>
+                    @if (item.label) {
+                      <span class="prx-micro-process__label" [attr.title]="item.label">{{ item.label }}</span>
+                    }
+                  </div>
+                  @if (!$last) {
+                    <span
+                      class="prx-micro-process__connector"
+                      [attr.data-tone]="item.tone || null"
+                    ></span>
+                  }
+                </div>
+              }
+            </div>
+          }
+        }
+      </figure>
+    } @else {
+      <span class="prx-micro-visualization-fallback">{{ fallbackText() }}</span>
+    }
+  `, isInline: true, styles: [":host{display:inline-block;min-width:0;max-width:100%;color:var(--prx-micro-text-color, var(--md-sys-color-on-surface, #1f2937))}.prx-micro-visualization{display:block;min-width:0;margin:0}:host([data-size=\"xs\"]) .prx-micro-visualization{inline-size:var(--prx-micro-xs-width, 96px)}:host([data-size=\"sm\"]) .prx-micro-visualization{inline-size:var(--prx-micro-sm-width, 136px)}:host([data-size=\"md\"]) .prx-micro-visualization,:host([data-size=\"responsive\"]) .prx-micro-visualization{inline-size:100%}:host(.prx-micro-visualization--table-cell) .prx-micro-visualization{inline-size:var(--prx-micro-table-cell-width, 112px)}.prx-micro-comparison{display:grid;gap:3px}.prx-micro-comparison__row{display:grid;grid-template-columns:minmax(0,52px) minmax(32px,1fr) auto;align-items:center;gap:6px;min-block-size:12px}.prx-micro-comparison__label,.prx-micro-comparison__value,.prx-micro-visualization__caption,.prx-micro-visualization-fallback{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--prx-micro-font-size, 11px);line-height:1.2}.prx-micro-comparison__label{color:var(--prx-micro-label-color, var(--md-sys-color-on-surface-variant, #4b5563))}.prx-micro-comparison__value{justify-self:end;font-variant-numeric:tabular-nums}.prx-micro-comparison__track,.prx-micro-stacked__track,.prx-micro-bullet__track{position:relative;display:block;overflow:hidden;border-radius:var(--prx-micro-track-radius, 999px);background:var(--prx-micro-track-color, var(--md-sys-color-surface-container-high, #e5e7eb))}.prx-micro-comparison__track{block-size:5px}.prx-micro-comparison__bar,.prx-micro-stacked__segment,.prx-micro-bullet__range,.prx-micro-bullet__actual{display:block;min-inline-size:1px;background:linear-gradient(90deg,color-mix(in srgb,var(--prx-micro-tone-neutral, var(--md-sys-color-secondary, #5c6b73)) 88%,#ffffff),color-mix(in srgb,var(--prx-micro-tone-neutral, var(--md-sys-color-secondary, #5c6b73)) 84%,#111827))}.prx-micro-comparison__bar{block-size:100%}.prx-micro-stacked__track{display:flex;block-size:8px}.prx-micro-stacked__segment{block-size:100%}.prx-micro-bullet__track{block-size:10px}.prx-micro-bullet__range{position:absolute;inset-block:0;display:block;block-size:100%;opacity:.32}.prx-micro-bullet__actual{position:absolute;inset-block-start:3px;inset-inline-start:0;block-size:4px;border-radius:inherit}.prx-micro-bullet__target{position:absolute;inset-block:0;inline-size:2px;background:var(--prx-micro-target-color, var(--md-sys-color-on-surface, #111827))}.prx-micro-delta{display:inline-flex;align-items:center;gap:4px;min-inline-size:0;font-size:var(--prx-micro-font-size, 12px);line-height:1.2;font-variant-numeric:tabular-nums}.prx-micro-delta__icon{flex:0 0 auto}.prx-micro-delta__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.prx-micro-visualization__caption{display:block;margin-block-start:4px;color:var(--prx-micro-caption-color, var(--md-sys-color-on-surface-variant, #4b5563))}.prx-micro-bullet-container{display:flex;flex-direction:column;gap:4px;width:100%}.prx-micro-bullet__top{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--prx-micro-font-size, 11px)}.prx-micro-bullet__label{color:var(--prx-micro-label-color, var(--md-sys-color-on-surface-variant, #4b5563));font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.prx-micro-bullet__value{font-weight:700;color:currentColor;font-variant-numeric:tabular-nums;flex-shrink:0}.prx-micro-bullet__target-val{font-weight:400;font-size:10px;color:var(--prx-micro-label-color, var(--md-sys-color-on-surface-variant, #4b5563));margin-left:4px}.prx-micro-bullet__bottom{display:flex;justify-content:space-between;font-size:9px;color:var(--prx-micro-label-color, var(--md-sys-color-on-surface-variant, #4b5563))}[data-tone=info]{color:var(--prx-micro-tone-info-text, var(--md-sys-color-primary, #0a6eb4))}.prx-micro-comparison__bar[data-tone=info],.prx-micro-stacked__segment[data-tone=info],.prx-micro-bullet__range[data-tone=info],.prx-micro-bullet__actual[data-tone=info],.prx-micro-process__node[data-tone=info],.prx-micro-process__connector[data-tone=info]{background:linear-gradient(90deg,color-mix(in srgb,var(--prx-micro-tone-info, var(--md-sys-color-primary, #0a6eb4)) 88%,#ffffff),color-mix(in srgb,var(--prx-micro-tone-info, var(--md-sys-color-primary, #0a6eb4)) 84%,#111827))}[data-tone=success]{color:var(--prx-micro-tone-success-text, #1b7a43)}.prx-micro-comparison__bar[data-tone=success],.prx-micro-stacked__segment[data-tone=success],.prx-micro-bullet__range[data-tone=success],.prx-micro-bullet__actual[data-tone=success],.prx-micro-process__node[data-tone=success],.prx-micro-process__connector[data-tone=success]{background:linear-gradient(90deg,color-mix(in srgb,var(--prx-micro-tone-success, #1b7a43) 88%,#ffffff),color-mix(in srgb,var(--prx-micro-tone-success, #1b7a43) 84%,#111827))}[data-tone=warning]{color:var(--prx-micro-tone-warning-text, #d97706)}.prx-micro-comparison__bar[data-tone=warning],.prx-micro-stacked__segment[data-tone=warning],.prx-micro-bullet__range[data-tone=warning],.prx-micro-bullet__actual[data-tone=warning],.prx-micro-process__node[data-tone=warning],.prx-micro-process__connector[data-tone=warning]{background:linear-gradient(90deg,color-mix(in srgb,var(--prx-micro-tone-warning, #d97706) 88%,#ffffff),color-mix(in srgb,var(--prx-micro-tone-warning, #d97706) 84%,#111827))}[data-tone=danger],[data-tone=critical]{color:var(--prx-micro-tone-danger-text, var(--md-sys-color-error, #c62828))}.prx-micro-comparison__bar[data-tone=danger],.prx-micro-comparison__bar[data-tone=critical],.prx-micro-stacked__segment[data-tone=danger],.prx-micro-stacked__segment[data-tone=critical],.prx-micro-bullet__range[data-tone=danger],.prx-micro-bullet__range[data-tone=critical],.prx-micro-bullet__actual[data-tone=danger],.prx-micro-bullet__actual[data-tone=critical],.prx-micro-process__node[data-tone=danger],.prx-micro-process__node[data-tone=critical],.prx-micro-process__connector[data-tone=danger],.prx-micro-process__connector[data-tone=critical]{background:linear-gradient(90deg,color-mix(in srgb,var(--prx-micro-tone-danger, var(--md-sys-color-error, #c62828)) 88%,#ffffff),color-mix(in srgb,var(--prx-micro-tone-danger, var(--md-sys-color-error, #c62828)) 84%,#111827))}.prx-micro-delta--positive{color:var(--prx-micro-tone-success-text, #1b7a43)}.prx-micro-delta--negative{color:var(--prx-micro-tone-danger-text, var(--md-sys-color-error, #c62828))}.prx-micro-radial{display:inline-flex;align-items:center;justify-content:center;position:relative}.prx-micro-radial__svg{width:24px;height:24px;overflow:visible;flex-shrink:0;display:block}.prx-micro-radial__track{fill:none;stroke:var(--prx-micro-track-color, var(--md-sys-color-surface-container-high, #e5e7eb));stroke-width:3}.prx-micro-radial__bar{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dasharray .35s ease}.prx-micro-radial__svg-text{font-size:8px;font-weight:700;text-anchor:middle;fill:currentColor;font-family:var(--md-sys-typescale-body-medium-font-family, sans-serif)}.prx-micro-harvey{display:inline-flex;align-items:center;gap:0}.prx-micro-harvey__svg{width:18px;height:18px;overflow:visible;flex-shrink:0}.prx-micro-harvey__track{fill:none;stroke:var(--prx-micro-track-color, var(--md-sys-color-surface-container-high, #e5e7eb));stroke-width:2}.prx-micro-harvey__bar{fill:none;stroke:currentColor;stroke-width:16;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dasharray .35s ease}.prx-micro-harvey__fraction{display:inline-flex;align-items:center;font-size:var(--prx-micro-font-size, 11px);font-variant-numeric:tabular-nums;margin-left:6px;font-family:var(--md-sys-typescale-body-medium-font-family, sans-serif)}.prx-micro-harvey__value{color:currentColor;font-weight:700}.prx-micro-harvey__separator{opacity:.6;color:var(--prx-micro-label-color, var(--md-sys-color-on-surface-variant, #4b5563));margin-inline:2px}.prx-micro-harvey__total{color:var(--prx-micro-label-color, var(--md-sys-color-on-surface-variant, #4b5563))}.prx-micro-trend-container{display:flex;align-items:center;gap:8px;width:100%}.prx-micro-trend__label-col{display:flex;flex-direction:column;justify-content:center;font-size:var(--prx-micro-font-size, 11px);line-height:1.2;flex-shrink:0;min-width:24px;font-family:var(--md-sys-typescale-body-medium-font-family, sans-serif)}.prx-micro-trend__label-col--start{align-items:flex-end;text-align:right}.prx-micro-trend__label-col--end{align-items:flex-start;text-align:left}.prx-micro-trend__value{font-weight:700;color:var(--md-sys-color-on-surface, #1f2937)}.prx-micro-trend__label{color:var(--prx-micro-label-color, var(--md-sys-color-on-surface-variant, #4b5563));font-size:9px}.prx-micro-trend__chart{flex:1 1 auto;height:30px;min-width:48px;overflow:visible}.prx-micro-line,.prx-micro-area,.prx-micro-column{display:block;width:100%;height:30px;overflow:visible}.prx-micro-line__svg,.prx-micro-area__svg,.prx-micro-column__svg{width:100%;height:100%;display:block;overflow:visible}.prx-micro-line__path,.prx-micro-area__path{stroke:currentColor}.prx-micro-area__fill,.prx-micro-column__bar{fill:currentColor}.prx-micro-trend__marker{fill:currentColor;stroke:var(--md-sys-color-surface, #ffffff);stroke-width:1.5px}.prx-micro-process{display:flex;align-items:flex-start;width:100%;min-width:0;padding-block:6px 2px;overflow-x:auto;-webkit-overflow-scrolling:touch}.prx-micro-process__step{display:grid;grid-template-columns:minmax(42px,auto) minmax(14px,1fr);align-items:start;flex:1 1 0%;min-width:0}.prx-micro-process__step--last{grid-template-columns:minmax(42px,auto);flex:0 0 auto}.prx-micro-process__node-wrapper{display:flex;flex-direction:column;align-items:center;position:relative;flex-shrink:0;min-width:42px}.prx-micro-process__node{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;font-size:12px;font-weight:700;background:linear-gradient(135deg,color-mix(in srgb,var(--md-sys-color-surface-container-high, #e5e7eb) 92%,#ffffff),color-mix(in srgb,var(--md-sys-color-surface-container-high, #e5e7eb) 82%,#111827));color:var(--md-sys-color-on-surface, #1f2937);box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 16%,transparent);transition:background-color .2s ease,color .2s ease}.prx-micro-process__icon{font-size:14px;line-height:1}.prx-micro-process__label{display:-webkit-box;inline-size:56px;max-width:56px;margin-top:5px;overflow:hidden;overflow-wrap:anywhere;-webkit-box-orient:vertical;-webkit-line-clamp:2;color:var(--md-sys-color-on-surface-variant, #4b5563);font-size:9px;font-weight:600;line-height:1.15;text-align:center}.prx-micro-process__connector{flex:1 1 auto;height:2px;background:linear-gradient(90deg,color-mix(in srgb,var(--prx-micro-track-color, var(--md-sys-color-surface-container-high, #e5e7eb)) 78%,transparent),color-mix(in srgb,var(--prx-micro-track-color, var(--md-sys-color-surface-container-high, #e5e7eb)) 42%,transparent));margin-block-start:11px;margin-inline:6px;min-width:14px;border-radius:999px;opacity:.85}:host(.prx-micro-visualization--table-cell) .prx-micro-process{align-items:center;min-width:112px;padding-block:0;overflow:hidden}:host(.prx-micro-visualization--table-cell) .prx-micro-process__step{display:flex;align-items:center;flex:0 1 auto}:host(.prx-micro-visualization--table-cell) .prx-micro-process__node-wrapper{min-width:0}:host(.prx-micro-visualization--table-cell) .prx-micro-process__node{width:22px;height:22px}:host(.prx-micro-visualization--table-cell) .prx-micro-process__label{display:none}:host(.prx-micro-visualization--table-cell) .prx-micro-process__connector{flex:0 1 22px;min-width:10px;max-width:26px;margin-block-start:0;margin-inline:5px}.prx-micro-process__node[data-tone=info]{background:linear-gradient(135deg,color-mix(in srgb,var(--prx-micro-tone-info, var(--md-sys-color-primary, #0a6eb4)) 88%,#ffffff),color-mix(in srgb,var(--prx-micro-tone-info, var(--md-sys-color-primary, #0a6eb4)) 82%,#111827));color:#fff}.prx-micro-process__node[data-tone=success]{background:linear-gradient(135deg,color-mix(in srgb,var(--prx-micro-tone-success, #1b7a43) 88%,#ffffff),color-mix(in srgb,var(--prx-micro-tone-success, #1b7a43) 82%,#111827));color:#fff}.prx-micro-process__node[data-tone=warning]{background:linear-gradient(135deg,color-mix(in srgb,var(--prx-micro-tone-warning, #d97706) 88%,#ffffff),color-mix(in srgb,var(--prx-micro-tone-warning, #d97706) 82%,#111827));color:#fff}.prx-micro-process__node[data-tone=danger],.prx-micro-process__node[data-tone=critical]{background:linear-gradient(135deg,color-mix(in srgb,var(--prx-micro-tone-danger, var(--md-sys-color-error, #c62828)) 88%,#ffffff),color-mix(in srgb,var(--prx-micro-tone-danger, var(--md-sys-color-error, #c62828)) 82%,#111827));color:#fff}.prx-micro-process__connector[data-tone=info]{background:linear-gradient(90deg,var(--prx-micro-tone-info, var(--md-sys-color-primary, #0a6eb4)),color-mix(in srgb,var(--prx-micro-tone-info, var(--md-sys-color-primary, #0a6eb4)) 38%,transparent))}.prx-micro-process__connector[data-tone=success]{background:linear-gradient(90deg,var(--prx-micro-tone-success, #1b7a43),color-mix(in srgb,var(--prx-micro-tone-success, #1b7a43) 38%,transparent))}.prx-micro-process__connector[data-tone=warning]{background:linear-gradient(90deg,var(--prx-micro-tone-warning, #d97706),color-mix(in srgb,var(--prx-micro-tone-warning, #d97706) 38%,transparent))}.prx-micro-process__connector[data-tone=danger],.prx-micro-process__connector[data-tone=critical]{background:linear-gradient(90deg,var(--prx-micro-tone-danger, var(--md-sys-color-error, #c62828)),color-mix(in srgb,var(--prx-micro-tone-danger, var(--md-sys-color-error, #c62828)) 38%,transparent))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisMicroVisualizationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'praxis-micro-visualization', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[attr.data-kind]': 'kind()',
+                        '[attr.data-surface]': 'surface()',
+                        '[attr.data-size]': 'size()',
+                        '[class.prx-micro-visualization--table-cell]': 'surface() === "table-cell"',
+                    }, template: `
+    @if (visualization(); as config) {
+      <figure
+        class="prx-micro-visualization"
+        [attr.aria-label]="ariaLabel()"
+        role="img"
+      >
+        @switch (config.kind) {
+          @case ('comparison') {
+            <div class="prx-micro-comparison">
+              @for (item of comparisonItems(); track item.label ?? $index) {
+                <div class="prx-micro-comparison__row">
+                  @if (item.label) {
+                    <span class="prx-micro-comparison__label">{{ item.label }}</span>
+                  }
+                  <span class="prx-micro-comparison__track" aria-hidden="true">
+                    <span
+                      class="prx-micro-comparison__bar"
+                      [attr.data-tone]="item.tone || null"
+                      [style.width.%]="itemPercent(item.value)"
+                    ></span>
+                  </span>
+                  @if (item.value !== undefined) {
+                    <span class="prx-micro-comparison__value">{{ formatNumber(item.value) }}</span>
+                  }
+                </div>
+              }
+            </div>
+          }
+
+          @case ('stackedBar') {
+            <div class="prx-micro-stacked">
+              <div class="prx-micro-stacked__track" aria-hidden="true">
+                @for (segment of stackedSegments(); track segment.label ?? $index) {
+                  <span
+                    class="prx-micro-stacked__segment"
+                    [attr.data-tone]="segment.tone || null"
+                    [style.width.%]="segmentPercent(segment.value)"
+                  ></span>
+                }
+              </div>
+              @if (!isTableCell() && config.fallbackText) {
+                <figcaption class="prx-micro-visualization__caption">{{ config.fallbackText }}</figcaption>
+              }
+            </div>
+          }
+
+          @case ('bullet') {
+            <div class="prx-micro-bullet-container">
+              @if (!isTableCell()) {
+                <div class="prx-micro-bullet__top">
+                  <span class="prx-micro-bullet__label">{{ config.fallbackText }}</span>
+                  <span class="prx-micro-bullet__value" [attr.data-tone]="config.tone || null">
+                    {{ formatNumber(config.value) }}
+                    @if (config.target !== undefined) {
+                      <span class="prx-micro-bullet__target-val">/ Target: {{ formatNumber(config.target) }}</span>
+                    }
+                  </span>
+                </div>
+              }
+
+              <div class="prx-micro-bullet__track" aria-hidden="true">
+                @for (band of bulletBands(); track band.label ?? $index) {
+                  <span
+                    class="prx-micro-bullet__range"
+                    [attr.data-tone]="band.tone || null"
+                    [style.left.%]="band.left"
+                    [style.width.%]="band.width"
+                  ></span>
+                }
+                <span
+                  class="prx-micro-bullet__actual"
+                  [attr.data-tone]="config.tone || null"
+                  [style.width.%]="valuePercent(config.value)"
+                ></span>
+                @if (config.target !== undefined) {
+                  <span
+                    class="prx-micro-bullet__target"
+                    [style.left.%]="valuePercent(config.target)"
+                  ></span>
+                }
+              </div>
+
+              @if (!isTableCell()) {
+                <div class="prx-micro-bullet__bottom">
+                  <span class="prx-micro-bullet__scale-min">{{ formatNumber(config.baseline ?? 0) }}</span>
+                  <span class="prx-micro-bullet__scale-max">{{ formatNumber(config.total ?? 100) }}</span>
+                </div>
+              }
+            </div>
+          }
+
+          @case ('delta') {
+            <div
+              class="prx-micro-delta"
+              [class.prx-micro-delta--positive]="deltaValue() > 0"
+              [class.prx-micro-delta--negative]="deltaValue() < 0"
+            >
+              @if (deltaIcon(); as icon) {
+                <span class="prx-micro-delta__icon" aria-hidden="true">{{ icon }}</span>
+              }
+              <span class="prx-micro-delta__value">{{ deltaText() }}</span>
+            </div>
+          }
+
+          @case ('radial') {
+            <div class="prx-micro-radial" [attr.data-tone]="config.tone || null">
+              <svg class="prx-micro-radial__svg" viewBox="0 0 36 36">
+                <circle class="prx-micro-radial__track" cx="18" cy="18" r="15.9155" />
+                <circle
+                  class="prx-micro-radial__bar"
+                  cx="18"
+                  cy="18"
+                  r="15.9155"
+                  [style.strokeDasharray]="radialDashArray()"
+                />
+                <text x="18" y="21" class="prx-micro-radial__svg-text prx-micro-radial__value">{{ radialText() }}</text>
+              </svg>
+            </div>
+          }
+
+          @case ('harveyBall') {
+            <div class="prx-micro-harvey" [attr.data-tone]="config.tone || null">
+              <svg class="prx-micro-harvey__svg" viewBox="0 0 36 36">
+                <circle class="prx-micro-harvey__track" cx="18" cy="18" r="16" />
+                <circle
+                  class="prx-micro-harvey__bar"
+                  cx="18"
+                  cy="18"
+                  r="8"
+                  [style.strokeDasharray]="harveyDashArray()"
+                />
+              </svg>
+              <span class="prx-micro-harvey__fraction">
+                <strong class="prx-micro-harvey__value">{{ formatNumber(config.value) }}</strong>
+                <span class="prx-micro-harvey__separator">/</span>
+                <span class="prx-micro-harvey__total">{{ formatNumber(config.total) }}</span>
+              </span>
+            </div>
+          }
+
+          @case ('line') {
+            <div class="prx-micro-trend-container">
+              @if (!isTableCell() && firstPoint()) {
+                <div class="prx-micro-trend__label-col prx-micro-trend__label-col--start">
+                  <span class="prx-micro-trend__value">{{ formatNumber(firstPoint()?.value) }}</span>
+                  <span class="prx-micro-trend__label">{{ firstPoint()?.label }}</span>
+                </div>
+              }
+
+              <div class="prx-micro-trend__chart">
+                <div class="prx-micro-line" [attr.data-tone]="config.tone || null">
+                  <svg class="prx-micro-line__svg" viewBox="0 0 100 30">
+                    <path
+                      class="prx-micro-line__path"
+                      [attr.d]="trendPathD()"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                    @for (marker of trendMarkers(); track $index) {
+                      <circle
+                        [attr.cx]="marker.x"
+                        [attr.cy]="marker.y"
+                        r="2.5"
+                        class="prx-micro-trend__marker"
+                        [attr.data-tone]="marker.tone || null"
+                        [attr.title]="marker.label"
+                      />
+                    }
+                  </svg>
+                </div>
+              </div>
+
+              @if (!isTableCell() && lastPoint()) {
+                <div class="prx-micro-trend__label-col prx-micro-trend__label-col--end">
+                  <span class="prx-micro-trend__value">{{ formatNumber(lastPoint()?.value) }}</span>
+                  <span class="prx-micro-trend__label">{{ lastPoint()?.label }}</span>
+                </div>
+              }
+            </div>
+          }
+
+          @case ('area') {
+            <div class="prx-micro-trend-container">
+              @if (!isTableCell() && firstPoint()) {
+                <div class="prx-micro-trend__label-col prx-micro-trend__label-col--start">
+                  <span class="prx-micro-trend__value">{{ formatNumber(firstPoint()?.value) }}</span>
+                  <span class="prx-micro-trend__label">{{ firstPoint()?.label }}</span>
+                </div>
+              }
+
+              <div class="prx-micro-trend__chart">
+                <div class="prx-micro-area" [attr.data-tone]="config.tone || null">
+                  <svg class="prx-micro-area__svg" viewBox="0 0 100 30">
+                    <path
+                      class="prx-micro-area__fill"
+                      [attr.d]="trendAreaD()"
+                      fill="currentColor"
+                      fill-opacity="0.15"
+                    />
+                    <path
+                      class="prx-micro-area__path"
+                      [attr.d]="trendPathD()"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                    @for (marker of trendMarkers(); track $index) {
+                      <circle
+                        [attr.cx]="marker.x"
+                        [attr.cy]="marker.y"
+                        r="2.5"
+                        class="prx-micro-trend__marker"
+                        [attr.data-tone]="marker.tone || null"
+                        [attr.title]="marker.label"
+                      />
+                    }
+                  </svg>
+                </div>
+              </div>
+
+              @if (!isTableCell() && lastPoint()) {
+                <div class="prx-micro-trend__label-col prx-micro-trend__label-col--end">
+                  <span class="prx-micro-trend__value">{{ formatNumber(lastPoint()?.value) }}</span>
+                  <span class="prx-micro-trend__label">{{ lastPoint()?.label }}</span>
+                </div>
+              }
+            </div>
+          }
+
+          @case ('column') {
+            <div class="prx-micro-trend-container">
+              @if (!isTableCell() && firstPoint()) {
+                <div class="prx-micro-trend__label-col prx-micro-trend__label-col--start">
+                  <span class="prx-micro-trend__value">{{ formatNumber(firstPoint()?.value) }}</span>
+                  <span class="prx-micro-trend__label">{{ firstPoint()?.label }}</span>
+                </div>
+              }
+
+              <div class="prx-micro-trend__chart">
+                <div class="prx-micro-column" [attr.data-tone]="config.tone || null">
+                  <svg class="prx-micro-column__svg" viewBox="0 0 100 30">
+                    @for (col of trendColumns(); track $index) {
+                      <rect
+                        class="prx-micro-column__bar"
+                        [attr.x]="col.x"
+                        [attr.y]="col.y"
+                        [attr.width]="col.width"
+                        [attr.height]="col.height"
+                        [attr.data-tone]="col.tone || null"
+                      />
+                    }
+                  </svg>
+                </div>
+              </div>
+
+              @if (!isTableCell() && lastPoint()) {
+                <div class="prx-micro-trend__label-col prx-micro-trend__label-col--end">
+                  <span class="prx-micro-trend__value">{{ formatNumber(lastPoint()?.value) }}</span>
+                  <span class="prx-micro-trend__label">{{ lastPoint()?.label }}</span>
+                </div>
+              }
+            </div>
+          }
+
+          @case ('processFlow') {
+            <div class="prx-micro-process">
+              @for (item of processSteps(); track item.id ?? $index) {
+                <div class="prx-micro-process__step" [class.prx-micro-process__step--last]="$last">
+                  <div class="prx-micro-process__node-wrapper">
+                    <span
+                      class="prx-micro-process__node"
+                      [attr.data-tone]="item.tone || null"
+                      [attr.title]="item.label || null"
+                    >
+                      @if (item.icon) {
+                        <span class="material-icons prx-micro-process__icon" aria-hidden="true">{{ item.icon }}</span>
+                      } @else {
+                        {{ $index + 1 }}
+                      }
+                    </span>
+                    @if (item.label) {
+                      <span class="prx-micro-process__label" [attr.title]="item.label">{{ item.label }}</span>
+                    }
+                  </div>
+                  @if (!$last) {
+                    <span
+                      class="prx-micro-process__connector"
+                      [attr.data-tone]="item.tone || null"
+                    ></span>
+                  }
+                </div>
+              }
+            </div>
+          }
+        }
+      </figure>
+    } @else {
+      <span class="prx-micro-visualization-fallback">{{ fallbackText() }}</span>
+    }
+  `, styles: [":host{display:inline-block;min-width:0;max-width:100%;color:var(--prx-micro-text-color, var(--md-sys-color-on-surface, #1f2937))}.prx-micro-visualization{display:block;min-width:0;margin:0}:host([data-size=\"xs\"]) .prx-micro-visualization{inline-size:var(--prx-micro-xs-width, 96px)}:host([data-size=\"sm\"]) .prx-micro-visualization{inline-size:var(--prx-micro-sm-width, 136px)}:host([data-size=\"md\"]) .prx-micro-visualization,:host([data-size=\"responsive\"]) .prx-micro-visualization{inline-size:100%}:host(.prx-micro-visualization--table-cell) .prx-micro-visualization{inline-size:var(--prx-micro-table-cell-width, 112px)}.prx-micro-comparison{display:grid;gap:3px}.prx-micro-comparison__row{display:grid;grid-template-columns:minmax(0,52px) minmax(32px,1fr) auto;align-items:center;gap:6px;min-block-size:12px}.prx-micro-comparison__label,.prx-micro-comparison__value,.prx-micro-visualization__caption,.prx-micro-visualization-fallback{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--prx-micro-font-size, 11px);line-height:1.2}.prx-micro-comparison__label{color:var(--prx-micro-label-color, var(--md-sys-color-on-surface-variant, #4b5563))}.prx-micro-comparison__value{justify-self:end;font-variant-numeric:tabular-nums}.prx-micro-comparison__track,.prx-micro-stacked__track,.prx-micro-bullet__track{position:relative;display:block;overflow:hidden;border-radius:var(--prx-micro-track-radius, 999px);background:var(--prx-micro-track-color, var(--md-sys-color-surface-container-high, #e5e7eb))}.prx-micro-comparison__track{block-size:5px}.prx-micro-comparison__bar,.prx-micro-stacked__segment,.prx-micro-bullet__range,.prx-micro-bullet__actual{display:block;min-inline-size:1px;background:linear-gradient(90deg,color-mix(in srgb,var(--prx-micro-tone-neutral, var(--md-sys-color-secondary, #5c6b73)) 88%,#ffffff),color-mix(in srgb,var(--prx-micro-tone-neutral, var(--md-sys-color-secondary, #5c6b73)) 84%,#111827))}.prx-micro-comparison__bar{block-size:100%}.prx-micro-stacked__track{display:flex;block-size:8px}.prx-micro-stacked__segment{block-size:100%}.prx-micro-bullet__track{block-size:10px}.prx-micro-bullet__range{position:absolute;inset-block:0;display:block;block-size:100%;opacity:.32}.prx-micro-bullet__actual{position:absolute;inset-block-start:3px;inset-inline-start:0;block-size:4px;border-radius:inherit}.prx-micro-bullet__target{position:absolute;inset-block:0;inline-size:2px;background:var(--prx-micro-target-color, var(--md-sys-color-on-surface, #111827))}.prx-micro-delta{display:inline-flex;align-items:center;gap:4px;min-inline-size:0;font-size:var(--prx-micro-font-size, 12px);line-height:1.2;font-variant-numeric:tabular-nums}.prx-micro-delta__icon{flex:0 0 auto}.prx-micro-delta__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.prx-micro-visualization__caption{display:block;margin-block-start:4px;color:var(--prx-micro-caption-color, var(--md-sys-color-on-surface-variant, #4b5563))}.prx-micro-bullet-container{display:flex;flex-direction:column;gap:4px;width:100%}.prx-micro-bullet__top{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--prx-micro-font-size, 11px)}.prx-micro-bullet__label{color:var(--prx-micro-label-color, var(--md-sys-color-on-surface-variant, #4b5563));font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.prx-micro-bullet__value{font-weight:700;color:currentColor;font-variant-numeric:tabular-nums;flex-shrink:0}.prx-micro-bullet__target-val{font-weight:400;font-size:10px;color:var(--prx-micro-label-color, var(--md-sys-color-on-surface-variant, #4b5563));margin-left:4px}.prx-micro-bullet__bottom{display:flex;justify-content:space-between;font-size:9px;color:var(--prx-micro-label-color, var(--md-sys-color-on-surface-variant, #4b5563))}[data-tone=info]{color:var(--prx-micro-tone-info-text, var(--md-sys-color-primary, #0a6eb4))}.prx-micro-comparison__bar[data-tone=info],.prx-micro-stacked__segment[data-tone=info],.prx-micro-bullet__range[data-tone=info],.prx-micro-bullet__actual[data-tone=info],.prx-micro-process__node[data-tone=info],.prx-micro-process__connector[data-tone=info]{background:linear-gradient(90deg,color-mix(in srgb,var(--prx-micro-tone-info, var(--md-sys-color-primary, #0a6eb4)) 88%,#ffffff),color-mix(in srgb,var(--prx-micro-tone-info, var(--md-sys-color-primary, #0a6eb4)) 84%,#111827))}[data-tone=success]{color:var(--prx-micro-tone-success-text, #1b7a43)}.prx-micro-comparison__bar[data-tone=success],.prx-micro-stacked__segment[data-tone=success],.prx-micro-bullet__range[data-tone=success],.prx-micro-bullet__actual[data-tone=success],.prx-micro-process__node[data-tone=success],.prx-micro-process__connector[data-tone=success]{background:linear-gradient(90deg,color-mix(in srgb,var(--prx-micro-tone-success, #1b7a43) 88%,#ffffff),color-mix(in srgb,var(--prx-micro-tone-success, #1b7a43) 84%,#111827))}[data-tone=warning]{color:var(--prx-micro-tone-warning-text, #d97706)}.prx-micro-comparison__bar[data-tone=warning],.prx-micro-stacked__segment[data-tone=warning],.prx-micro-bullet__range[data-tone=warning],.prx-micro-bullet__actual[data-tone=warning],.prx-micro-process__node[data-tone=warning],.prx-micro-process__connector[data-tone=warning]{background:linear-gradient(90deg,color-mix(in srgb,var(--prx-micro-tone-warning, #d97706) 88%,#ffffff),color-mix(in srgb,var(--prx-micro-tone-warning, #d97706) 84%,#111827))}[data-tone=danger],[data-tone=critical]{color:var(--prx-micro-tone-danger-text, var(--md-sys-color-error, #c62828))}.prx-micro-comparison__bar[data-tone=danger],.prx-micro-comparison__bar[data-tone=critical],.prx-micro-stacked__segment[data-tone=danger],.prx-micro-stacked__segment[data-tone=critical],.prx-micro-bullet__range[data-tone=danger],.prx-micro-bullet__range[data-tone=critical],.prx-micro-bullet__actual[data-tone=danger],.prx-micro-bullet__actual[data-tone=critical],.prx-micro-process__node[data-tone=danger],.prx-micro-process__node[data-tone=critical],.prx-micro-process__connector[data-tone=danger],.prx-micro-process__connector[data-tone=critical]{background:linear-gradient(90deg,color-mix(in srgb,var(--prx-micro-tone-danger, var(--md-sys-color-error, #c62828)) 88%,#ffffff),color-mix(in srgb,var(--prx-micro-tone-danger, var(--md-sys-color-error, #c62828)) 84%,#111827))}.prx-micro-delta--positive{color:var(--prx-micro-tone-success-text, #1b7a43)}.prx-micro-delta--negative{color:var(--prx-micro-tone-danger-text, var(--md-sys-color-error, #c62828))}.prx-micro-radial{display:inline-flex;align-items:center;justify-content:center;position:relative}.prx-micro-radial__svg{width:24px;height:24px;overflow:visible;flex-shrink:0;display:block}.prx-micro-radial__track{fill:none;stroke:var(--prx-micro-track-color, var(--md-sys-color-surface-container-high, #e5e7eb));stroke-width:3}.prx-micro-radial__bar{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dasharray .35s ease}.prx-micro-radial__svg-text{font-size:8px;font-weight:700;text-anchor:middle;fill:currentColor;font-family:var(--md-sys-typescale-body-medium-font-family, sans-serif)}.prx-micro-harvey{display:inline-flex;align-items:center;gap:0}.prx-micro-harvey__svg{width:18px;height:18px;overflow:visible;flex-shrink:0}.prx-micro-harvey__track{fill:none;stroke:var(--prx-micro-track-color, var(--md-sys-color-surface-container-high, #e5e7eb));stroke-width:2}.prx-micro-harvey__bar{fill:none;stroke:currentColor;stroke-width:16;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dasharray .35s ease}.prx-micro-harvey__fraction{display:inline-flex;align-items:center;font-size:var(--prx-micro-font-size, 11px);font-variant-numeric:tabular-nums;margin-left:6px;font-family:var(--md-sys-typescale-body-medium-font-family, sans-serif)}.prx-micro-harvey__value{color:currentColor;font-weight:700}.prx-micro-harvey__separator{opacity:.6;color:var(--prx-micro-label-color, var(--md-sys-color-on-surface-variant, #4b5563));margin-inline:2px}.prx-micro-harvey__total{color:var(--prx-micro-label-color, var(--md-sys-color-on-surface-variant, #4b5563))}.prx-micro-trend-container{display:flex;align-items:center;gap:8px;width:100%}.prx-micro-trend__label-col{display:flex;flex-direction:column;justify-content:center;font-size:var(--prx-micro-font-size, 11px);line-height:1.2;flex-shrink:0;min-width:24px;font-family:var(--md-sys-typescale-body-medium-font-family, sans-serif)}.prx-micro-trend__label-col--start{align-items:flex-end;text-align:right}.prx-micro-trend__label-col--end{align-items:flex-start;text-align:left}.prx-micro-trend__value{font-weight:700;color:var(--md-sys-color-on-surface, #1f2937)}.prx-micro-trend__label{color:var(--prx-micro-label-color, var(--md-sys-color-on-surface-variant, #4b5563));font-size:9px}.prx-micro-trend__chart{flex:1 1 auto;height:30px;min-width:48px;overflow:visible}.prx-micro-line,.prx-micro-area,.prx-micro-column{display:block;width:100%;height:30px;overflow:visible}.prx-micro-line__svg,.prx-micro-area__svg,.prx-micro-column__svg{width:100%;height:100%;display:block;overflow:visible}.prx-micro-line__path,.prx-micro-area__path{stroke:currentColor}.prx-micro-area__fill,.prx-micro-column__bar{fill:currentColor}.prx-micro-trend__marker{fill:currentColor;stroke:var(--md-sys-color-surface, #ffffff);stroke-width:1.5px}.prx-micro-process{display:flex;align-items:flex-start;width:100%;min-width:0;padding-block:6px 2px;overflow-x:auto;-webkit-overflow-scrolling:touch}.prx-micro-process__step{display:grid;grid-template-columns:minmax(42px,auto) minmax(14px,1fr);align-items:start;flex:1 1 0%;min-width:0}.prx-micro-process__step--last{grid-template-columns:minmax(42px,auto);flex:0 0 auto}.prx-micro-process__node-wrapper{display:flex;flex-direction:column;align-items:center;position:relative;flex-shrink:0;min-width:42px}.prx-micro-process__node{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;font-size:12px;font-weight:700;background:linear-gradient(135deg,color-mix(in srgb,var(--md-sys-color-surface-container-high, #e5e7eb) 92%,#ffffff),color-mix(in srgb,var(--md-sys-color-surface-container-high, #e5e7eb) 82%,#111827));color:var(--md-sys-color-on-surface, #1f2937);box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 16%,transparent);transition:background-color .2s ease,color .2s ease}.prx-micro-process__icon{font-size:14px;line-height:1}.prx-micro-process__label{display:-webkit-box;inline-size:56px;max-width:56px;margin-top:5px;overflow:hidden;overflow-wrap:anywhere;-webkit-box-orient:vertical;-webkit-line-clamp:2;color:var(--md-sys-color-on-surface-variant, #4b5563);font-size:9px;font-weight:600;line-height:1.15;text-align:center}.prx-micro-process__connector{flex:1 1 auto;height:2px;background:linear-gradient(90deg,color-mix(in srgb,var(--prx-micro-track-color, var(--md-sys-color-surface-container-high, #e5e7eb)) 78%,transparent),color-mix(in srgb,var(--prx-micro-track-color, var(--md-sys-color-surface-container-high, #e5e7eb)) 42%,transparent));margin-block-start:11px;margin-inline:6px;min-width:14px;border-radius:999px;opacity:.85}:host(.prx-micro-visualization--table-cell) .prx-micro-process{align-items:center;min-width:112px;padding-block:0;overflow:hidden}:host(.prx-micro-visualization--table-cell) .prx-micro-process__step{display:flex;align-items:center;flex:0 1 auto}:host(.prx-micro-visualization--table-cell) .prx-micro-process__node-wrapper{min-width:0}:host(.prx-micro-visualization--table-cell) .prx-micro-process__node{width:22px;height:22px}:host(.prx-micro-visualization--table-cell) .prx-micro-process__label{display:none}:host(.prx-micro-visualization--table-cell) .prx-micro-process__connector{flex:0 1 22px;min-width:10px;max-width:26px;margin-block-start:0;margin-inline:5px}.prx-micro-process__node[data-tone=info]{background:linear-gradient(135deg,color-mix(in srgb,var(--prx-micro-tone-info, var(--md-sys-color-primary, #0a6eb4)) 88%,#ffffff),color-mix(in srgb,var(--prx-micro-tone-info, var(--md-sys-color-primary, #0a6eb4)) 82%,#111827));color:#fff}.prx-micro-process__node[data-tone=success]{background:linear-gradient(135deg,color-mix(in srgb,var(--prx-micro-tone-success, #1b7a43) 88%,#ffffff),color-mix(in srgb,var(--prx-micro-tone-success, #1b7a43) 82%,#111827));color:#fff}.prx-micro-process__node[data-tone=warning]{background:linear-gradient(135deg,color-mix(in srgb,var(--prx-micro-tone-warning, #d97706) 88%,#ffffff),color-mix(in srgb,var(--prx-micro-tone-warning, #d97706) 82%,#111827));color:#fff}.prx-micro-process__node[data-tone=danger],.prx-micro-process__node[data-tone=critical]{background:linear-gradient(135deg,color-mix(in srgb,var(--prx-micro-tone-danger, var(--md-sys-color-error, #c62828)) 88%,#ffffff),color-mix(in srgb,var(--prx-micro-tone-danger, var(--md-sys-color-error, #c62828)) 82%,#111827));color:#fff}.prx-micro-process__connector[data-tone=info]{background:linear-gradient(90deg,var(--prx-micro-tone-info, var(--md-sys-color-primary, #0a6eb4)),color-mix(in srgb,var(--prx-micro-tone-info, var(--md-sys-color-primary, #0a6eb4)) 38%,transparent))}.prx-micro-process__connector[data-tone=success]{background:linear-gradient(90deg,var(--prx-micro-tone-success, #1b7a43),color-mix(in srgb,var(--prx-micro-tone-success, #1b7a43) 38%,transparent))}.prx-micro-process__connector[data-tone=warning]{background:linear-gradient(90deg,var(--prx-micro-tone-warning, #d97706),color-mix(in srgb,var(--prx-micro-tone-warning, #d97706) 38%,transparent))}.prx-micro-process__connector[data-tone=danger],.prx-micro-process__connector[data-tone=critical]{background:linear-gradient(90deg,var(--prx-micro-tone-danger, var(--md-sys-color-error, #c62828)),color-mix(in srgb,var(--prx-micro-tone-danger, var(--md-sys-color-error, #c62828)) 38%,transparent))}\n"] }]
+        }], propDecorators: { visualizationInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "visualization", required: false }] }], fallbackInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallbackText", required: false }] }] } });
+function clampPercent(value) {
+    if (!Number.isFinite(value)) {
+        return 0;
+    }
+    return Math.min(Math.max(value, 0), 100);
+}
+
 const PRAXIS_CHART_DRILLDOWN_DATA_BY_MONTH = {
     Jan: [
         { segment: 'Enterprise', total: 52000 },
@@ -5019,7 +5934,7 @@ class PraxisChartShowcaseWidgetComponent {
         (rowClick)="handleRowClick($event)"
       ></praxis-table>
     }
-  `, isInline: true, styles: [":host{display:block;height:100%;min-width:0}.showcase-state-card{min-height:240px;display:grid;place-content:center;gap:8px;padding:24px;border-radius:18px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 72%,transparent);background:linear-gradient(180deg,#fffffff5,#f4f7fbfa);text-align:center}.showcase-state-card h4{margin:0;font-size:1rem;font-weight:600;color:var(--md-sys-color-on-surface, #1a1b20)}.showcase-state-card p{margin:0;color:var(--md-sys-color-on-surface-variant, #5a5d67)}\n"], dependencies: [{ kind: "component", type: PraxisChartComponent, selector: "praxis-chart", inputs: ["config", "data", "chartDocument", "filterCriteria", "queryContext", "remoteDataResolver", "enableCustomization", "availableResources", "availableFields", "availableTargets"], outputs: ["pointClick", "selectionChange", "crossFilter", "queryRequest", "loadStateChange", "chartDocumentApplied", "chartDocumentSaved"] }, { kind: "component", type: PraxisTable, selector: "praxis-table", inputs: ["config", "resourcePath", "data", "tableId", "componentInstanceId", "configPersistenceStrategy", "title", "subtitle", "icon", "autoDelete", "notifyIfOutdated", "snoozeMs", "autoOpenSettingsOnOutdated", "crudContext", "filterCriteria", "queryContext", "aiContext", "aiAssistantVoiceInputMode", "aiAssistantVoiceLanguage", "horizontalScroll", "enableCustomization", "dense"], outputs: ["rowClick", "widgetEvent", "rowDoubleClick", "rowExpansionChange", "rowAction", "toolbarAction", "bulkAction", "exportAction", "columnReorder", "columnReorderAttempt", "beforeDelete", "afterDelete", "deleteError", "beforeBulkDelete", "afterBulkDelete", "bulkDeleteError", "schemaStatusChange", "configChange", "metadataChange", "loadingStateChange", "collectionLinksChange", "selectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;height:100%;min-width:0}.showcase-state-card{min-height:240px;display:grid;place-content:center;gap:8px;padding:24px;border-radius:18px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 72%,transparent);background:linear-gradient(180deg,#fffffff5,#f4f7fbfa);text-align:center}.showcase-state-card h4{margin:0;font-size:1rem;font-weight:600;color:var(--md-sys-color-on-surface, #1a1b20)}.showcase-state-card p{margin:0;color:var(--md-sys-color-on-surface-variant, #5a5d67)}\n"], dependencies: [{ kind: "component", type: PraxisChartComponent, selector: "praxis-chart", inputs: ["config", "data", "chartDocument", "filterCriteria", "queryContext", "remoteDataResolver", "enableCustomization", "availableResources", "availableFields", "availableTargets"], outputs: ["pointClick", "selectionChange", "crossFilter", "queryRequest", "loadStateChange", "chartDocumentApplied", "chartDocumentSaved"] }, { kind: "component", type: PraxisTable, selector: "praxis-table", inputs: ["config", "resourcePath", "data", "tableId", "componentInstanceId", "configPersistenceStrategy", "title", "subtitle", "icon", "autoDelete", "notifyIfOutdated", "snoozeMs", "autoOpenSettingsOnOutdated", "crudContext", "filterCriteria", "queryContext", "aiContext", "aiAssistantVoiceInputMode", "aiAssistantVoiceLanguage", "horizontalScroll", "enableCustomization", "dense"], outputs: ["rowClick", "widgetEvent", "resourceEvent", "rowDoubleClick", "rowExpansionChange", "rowAction", "toolbarAction", "bulkAction", "exportAction", "columnReorder", "columnReorderAttempt", "columnResize", "beforeDelete", "afterDelete", "deleteError", "beforeBulkDelete", "afterBulkDelete", "bulkDeleteError", "schemaStatusChange", "configChange", "metadataChange", "loadingStateChange", "collectionLinksChange", "selectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisChartShowcaseWidgetComponent, decorators: [{
             type: Component,
@@ -5274,6 +6189,20 @@ function providePraxisChartShowcaseWidgetMetadata() {
     };
 }
 
+const PRAXIS_TABLE_CHART_DETAIL_RENDERER = {
+    nodeType: 'chartRef',
+    renderMode: 'inline',
+    component: PraxisChartComponent,
+    buildInputs: ({ node }) => {
+        if (!node.chartDocument || typeof node.chartDocument !== 'object') {
+            return null;
+        }
+        return {
+            ...(node.inputs && typeof node.inputs === 'object' ? node.inputs : {}),
+            chartDocument: node.chartDocument,
+        };
+    },
+};
 function providePraxisCharts() {
     return [
         EChartsEngineAdapter,
@@ -5285,6 +6214,11 @@ function providePraxisCharts() {
         providePraxisChartDrilldownPanelMetadata(),
         providePraxisChartStateProbeMetadata(),
         providePraxisChartShowcaseWidgetMetadata(),
+        {
+            provide: PRAXIS_TABLE_DETAIL_INLINE_RENDERERS,
+            multi: true,
+            useValue: PRAXIS_TABLE_CHART_DETAIL_RENDERER,
+        },
     ];
 }
 
@@ -7113,7 +8047,7 @@ const PRAXIS_CHARTS_AUTHORING_MANIFEST = {
             requiresConfirmation: false,
             validators: ['query-context-structured', 'query-context-fields-exist', 'query-context-safe-values', 'editor-runtime-round-trip'],
             affectedPaths: ['queryContext'],
-            submissionImpact: 'config-only',
+            submissionImpact: 'affects-schema-backed-data',
             preconditions: ['config-initialized'],
         },
         {
@@ -7135,7 +8069,7 @@ const PRAXIS_CHARTS_AUTHORING_MANIFEST = {
             requiresConfirmation: false,
             validators: ['cross-filter-output-structured', 'event-target-governed', 'event-mapping-fields-exist', 'editor-runtime-round-trip'],
             affectedPaths: ['chartDocument.events.crossFilter'],
-            submissionImpact: 'config-only',
+            submissionImpact: 'affects-schema-backed-data',
             preconditions: ['config-initialized'],
         },
         {
@@ -7172,7 +8106,7 @@ const PRAXIS_CHARTS_AUTHORING_MANIFEST = {
             requiresConfirmation: false,
             validators: ['selection-output-structured', 'event-mapping-fields-exist', 'event-action-supported', 'editor-runtime-round-trip'],
             affectedPaths: ['chartDocument.events.selectionChange'],
-            submissionImpact: 'config-only',
+            submissionImpact: 'affects-schema-backed-data',
             preconditions: ['config-initialized'],
         },
         {
@@ -7270,4 +8204,4 @@ const PRAXIS_CHARTS_AUTHORING_MANIFEST = {
  * Generated bundle index. Do not edit.
  */
 
-export { AnalyticsChartConfigAdapterService, AnalyticsChartContractService, ChartContractNormalizerService, ChartContractValidationService, ChartEditorDefaultsService, ChartEditorPreviewMapperService, PRAXIS_CHARTS_AUTHORING_MANIFEST, PRAXIS_CHARTS_I18N, PRAXIS_CHART_BACKEND_MOCK_BAR, PRAXIS_CHART_BACKEND_MOCK_COMBO, PRAXIS_CHART_BACKEND_MOCK_DONUT, PRAXIS_CHART_BACKEND_MOCK_HORIZONTAL_BAR, PRAXIS_CHART_BACKEND_MOCK_MULTI_METRIC_BAR, PRAXIS_CHART_BACKEND_MOCK_SCATTER, PRAXIS_CHART_BACKEND_MOCK_STACKED_AREA, PRAXIS_CHART_BACKEND_MOCK_TIMESERIES, PRAXIS_CHART_COMPONENT_METADATA, PRAXIS_CHART_DRILLDOWN_DATA_BY_MONTH, PRAXIS_CHART_DRILLDOWN_PANEL_METADATA, PRAXIS_CHART_ENGINE, PRAXIS_CHART_PALETTE_TOKENS, PRAXIS_CHART_STATE_PROBE_COMPONENT_METADATA, PRAXIS_CHART_THEME_VARIANTS, PraxisChartBackendPayloadAdapterService, PraxisChartCanonicalContractMapperService, PraxisChartComponent, PraxisChartCompositionShowcaseComponent, PraxisChartConfigEditor, PraxisChartDataTransformerService, PraxisChartDrilldownPanelComponent, PraxisChartOptionBuilderService, PraxisChartSchemaMapperService, PraxisChartStateProbeComponent, PraxisChartStatsApiService, PraxisChartWidgetConfigEditor, buildPraxisChartInteractiveCanvasPage, buildPraxisChartInteractiveWidgetPage, buildPraxisChartMockCanvasPage, buildPraxisChartMockWidgetPage, createPraxisChartsI18nConfig, isPraxisChartPaletteToken, providePraxisChartDrilldownPanelMetadata, providePraxisChartStateProbeMetadata, providePraxisCharts, providePraxisChartsI18n, providePraxisChartsMetadata, resolvePraxisChartPaletteToken, resolvePraxisChartsText };
+export { AnalyticsChartConfigAdapterService, AnalyticsChartContractService, ChartContractNormalizerService, ChartContractValidationService, ChartEditorDefaultsService, ChartEditorPreviewMapperService, PRAXIS_CHARTS_AUTHORING_MANIFEST, PRAXIS_CHARTS_I18N, PRAXIS_CHART_BACKEND_MOCK_BAR, PRAXIS_CHART_BACKEND_MOCK_COMBO, PRAXIS_CHART_BACKEND_MOCK_DONUT, PRAXIS_CHART_BACKEND_MOCK_HORIZONTAL_BAR, PRAXIS_CHART_BACKEND_MOCK_MULTI_METRIC_BAR, PRAXIS_CHART_BACKEND_MOCK_SCATTER, PRAXIS_CHART_BACKEND_MOCK_STACKED_AREA, PRAXIS_CHART_BACKEND_MOCK_TIMESERIES, PRAXIS_CHART_COMPONENT_METADATA, PRAXIS_CHART_DRILLDOWN_DATA_BY_MONTH, PRAXIS_CHART_DRILLDOWN_PANEL_METADATA, PRAXIS_CHART_ENGINE, PRAXIS_CHART_PALETTE_TOKENS, PRAXIS_CHART_STATE_PROBE_COMPONENT_METADATA, PRAXIS_CHART_THEME_VARIANTS, PraxisChartBackendPayloadAdapterService, PraxisChartCanonicalContractMapperService, PraxisChartComponent, PraxisChartCompositionShowcaseComponent, PraxisChartConfigEditor, PraxisChartDataTransformerService, PraxisChartDrilldownPanelComponent, PraxisChartOptionBuilderService, PraxisChartSchemaMapperService, PraxisChartStateProbeComponent, PraxisChartStatsApiService, PraxisChartWidgetConfigEditor, PraxisMicroVisualizationComponent, buildPraxisChartInteractiveCanvasPage, buildPraxisChartInteractiveWidgetPage, buildPraxisChartMockCanvasPage, buildPraxisChartMockWidgetPage, createPraxisChartsI18nConfig, isPraxisChartPaletteToken, providePraxisChartDrilldownPanelMetadata, providePraxisChartStateProbeMetadata, providePraxisCharts, providePraxisChartsI18n, providePraxisChartsMetadata, resolvePraxisChartPaletteToken, resolvePraxisChartsText };