@praxisui/charts 9.0.53 → 9.0.55

package/README.md

@@ -271,6 +271,8 @@ Rich charts still use the canonical `x-ui.chart` document flow above; micro visu
 
 `PraxisChartConfigEditor` is the initial editor shell for canonical `x-ui.chart` documents. It consumes governed resources, fields and targets and emits structured apply/save/reset events. The authoring manifest is exported as `PRAXIS_CHARTS_AUTHORING_MANIFEST` for backend/tooling workflows that need executable chart-edit operations.
 
+For the direct runtime editor, Apply updates only the chart preview and emits `chartDocumentApplied`. Save emits `chartDocumentSaved` for direct hosts and `chartDocumentPatchChange` with `inputPatch.chartDocument` for dynamic widget hosts. That explicit patch lets Dynamic Page/Page Builder materialize the saved canonical document without inferring persistence from an event name; unrelated widget inputs remain owned by the host.
+
 `ChartResourceCapabilityCatalogAdapter` derives resource operations and eligible dimension, time and metric options directly from `ResourceCapabilitySnapshot`, including fail-closed comparison eligibility.
 
 Applications should install `providePraxisCharts()` once. The registered `ComponentDocMeta.configEditor.contextResolver` materializes the editor context without making Page Builder own Chart semantics. Initial resolution groups `/schemas/catalog` endpoints by the stable `resourceKey`, exposes that value as `availableResources[].id`, and keeps the catalog's governed root-relative resource path as `availableResources[].path`. A selected `praxis.stats` source is normalized to that operational path before save; the discovery id is never persisted as an executable URL.
@@ -285,7 +287,7 @@ Visual authoring now consumes this projection, and the backend handler, resolver
 
 ## Public API Snapshot
 
-Main exports include `PraxisChartComponent`, `PraxisMicroVisualizationComponent`, `PraxisChartConfigEditor`, chart event/config models, `PraxisXUiChartContract`, engine adapter and factory tokens, `providePraxisCharts`, canonical mapping/normalization/validation services, analytics chart services, chart metadata and `PRAXIS_CHARTS_AUTHORING_MANIFEST`.
+Main exports include `PraxisChartComponent`, `PraxisChartDocumentPatchChangeEvent`, `PraxisMicroVisualizationComponent`, `PraxisChartConfigEditor`, chart event/config models, `PraxisXUiChartContract`, engine adapter and factory tokens, `providePraxisCharts`, canonical mapping/normalization/validation services, analytics chart services, chart metadata and `PRAXIS_CHARTS_AUTHORING_MANIFEST`.
 
 ## Official Links
 

package/ai/component-registry.json

@@ -1,8 +1,8 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-08-31T21:15:24.814Z",
+  "generatedAt": "2026-09-01T04:06:31.245Z",
   "packageName": "@praxisui/charts",
-  "packageVersion": "9.0.53",
+  "packageVersion": "9.0.55",
   "sourceRegistry": "praxis-component-registry-ingestion",
   "sourceRegistryVersion": "1.0.0",
   "componentCount": 3,
@@ -587,6 +587,12 @@
           "type": "PraxisXUiChartContract",
           "required": false,
           "description": "Emitted when the runtime chart editor saves a canonical x-ui.chart document through the settings panel bridge."
+        },
+        {
+          "name": "chartDocumentPatchChange",
+          "type": "PraxisChartDocumentPatchChangeEvent",
+          "required": false,
+          "description": "Emitted on Save with inputPatch.chartDocument so dynamic widget hosts can materialize the canonical document without inferring persistence from event names."
         }
       ],
       "configSchemaId": null,
@@ -3105,9 +3111,9 @@
         {
           "chunkIndex": 0,
           "chunkKind": "summary",
-          "content": "Component ID: praxis-chart\nSelector: praxis-chart\nFriendly Name: Praxis Chart\nDescription: Chart component for analytics and metadata-driven visualizations in Praxis UI.\nLib/Package: @praxisui/charts\nTags: chart, analytics, widget, visualization\nInputs:\n  - config (PraxisChartConfig)\n  - data (PraxisChartDataRow[])\n  - chartDocument (PraxisXUiChartContract | null)\n  - queryContext (PraxisDataQueryContext | null)\n  - remoteDataResolver (PraxisChartRemoteDataResolver | null)\n  - filterCriteria (Record<string, unknown> | null)\n  - enableCustomization (boolean)\n  - availableResources (ReadonlyArray<ChartEditorResourceOption>)\n  - availableFields (ReadonlyArray<ChartEditorFieldOption>)\n  - availableTargets (ReadonlyArray<ChartEditorTargetOption>)\nOutputs:\n  - pointClick (PraxisChartPointEvent)\n  - pointAction (PraxisChartPointActionEvent)\n  - selectionChange (PraxisChartSelectionEvent)\n  - drillDown (PraxisChartDrillDownEvent)\n  - crossFilter (PraxisChartCrossFilterEvent)\n  - queryRequest (PraxisChartQueryRequestEvent)\n  - loadStateChange (PraxisChartLoadState)\n  - chartDocumentApplied (PraxisXUiChartContract)\n  - chartDocumentSaved (PraxisXUiChartContract)\nInsertion Presets:\n  - canonical-chart: Canonical chart - Creates a chart widget from the canonical x-ui.chart authoring document.\n",
+          "content": "Component ID: praxis-chart\nSelector: praxis-chart\nFriendly Name: Praxis Chart\nDescription: Chart component for analytics and metadata-driven visualizations in Praxis UI.\nLib/Package: @praxisui/charts\nTags: chart, analytics, widget, visualization\nInputs:\n  - config (PraxisChartConfig)\n  - data (PraxisChartDataRow[])\n  - chartDocument (PraxisXUiChartContract | null)\n  - queryContext (PraxisDataQueryContext | null)\n  - remoteDataResolver (PraxisChartRemoteDataResolver | null)\n  - filterCriteria (Record<string, unknown> | null)\n  - enableCustomization (boolean)\n  - availableResources (ReadonlyArray<ChartEditorResourceOption>)\n  - availableFields (ReadonlyArray<ChartEditorFieldOption>)\n  - availableTargets (ReadonlyArray<ChartEditorTargetOption>)\nOutputs:\n  - pointClick (PraxisChartPointEvent)\n  - pointAction (PraxisChartPointActionEvent)\n  - selectionChange (PraxisChartSelectionEvent)\n  - drillDown (PraxisChartDrillDownEvent)\n  - crossFilter (PraxisChartCrossFilterEvent)\n  - queryRequest (PraxisChartQueryRequestEvent)\n  - loadStateChange (PraxisChartLoadState)\n  - chartDocumentApplied (PraxisXUiChartContract)\n  - chartDocumentSaved (PraxisXUiChartContract)\n  - chartDocumentPatchChange (PraxisChartDocumentPatchChangeEvent)\nInsertion Presets:\n  - canonical-chart: Canonical chart - Creates a chart widget from the canonical x-ui.chart authoring document.\n",
           "sourcePointer": "projects/praxis-charts/src/lib/praxis-chart.metadata.ts",
-          "contentHash": "5d9a01947277da58d7d6fe751dd45eb420c4607728eb61e1df417322506f917d",
+          "contentHash": "2ca641ce6260ffda9f9278a77c49b6538d96b1bf61640cf269ba510b521af788",
           "sourceKind": "component_definition",
           "sourceId": "praxis-chart",
           "corpusVersion": "1.0.0"

package/fesm2022/praxisui-charts.mjs

@@ -1889,6 +1889,7 @@ class PraxisChartComponent {
     loadStateChange = output();
     chartDocumentApplied = output();
     chartDocumentSaved = output();
+    chartDocumentPatchChange = output();
     chartHost = viewChild('chartHost', ...(ngDevMode ? [{ debugName: "chartHost" }] : /* istanbul ignore next */ []));
     hostElement = inject(ElementRef);
     engine = inject(PRAXIS_CHART_ENGINE_FACTORY)();
@@ -2357,6 +2358,9 @@ class PraxisChartComponent {
                 const clone = structuredClone(nextDocument);
                 this.runtimeChartDocument.set(clone);
                 this.chartDocumentSaved.emit(clone);
+                this.chartDocumentPatchChange.emit({
+                    inputPatch: { chartDocument: structuredClone(clone) },
+                });
             });
             const closedSubscription = ref.closed$?.subscribe(() => {
                 this.restoreFocus(focusReturnTarget);
@@ -2853,7 +2857,7 @@ class PraxisChartComponent {
         this.resizeFrameId = null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisChartComponent, isStandalone: true, selector: "praxis-chart", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, chartDocument: { classPropertyName: "chartDocument", publicName: "chartDocument", isSignal: true, isRequired: false, transformFunction: null }, filterCriteria: { classPropertyName: "filterCriteria", publicName: "filterCriteria", isSignal: true, isRequired: false, transformFunction: null }, queryContext: { classPropertyName: "queryContext", publicName: "queryContext", isSignal: true, isRequired: false, transformFunction: null }, remoteDataResolver: { classPropertyName: "remoteDataResolver", publicName: "remoteDataResolver", isSignal: true, isRequired: false, transformFunction: null }, enableCustomization: { classPropertyName: "enableCustomization", publicName: "enableCustomization", isSignal: true, isRequired: false, transformFunction: null }, availableResources: { classPropertyName: "availableResources", publicName: "availableResources", isSignal: true, isRequired: false, transformFunction: null }, availableFields: { classPropertyName: "availableFields", publicName: "availableFields", isSignal: true, isRequired: false, transformFunction: null }, availableTargets: { classPropertyName: "availableTargets", publicName: "availableTargets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointClick: "pointClick", pointAction: "pointAction", selectionChange: "selectionChange", drillDown: "drillDown", crossFilter: "crossFilter", queryRequest: "queryRequest", loadStateChange: "loadStateChange", chartDocumentApplied: "chartDocumentApplied", chartDocumentSaved: "chartDocumentSaved" }, host: { properties: { "class.praxis-chart-host-fill-container": "isFillContainerMode()" } }, viewQueries: [{ propertyName: "chartHost", first: true, predicate: ["chartHost"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisChartComponent, isStandalone: true, selector: "praxis-chart", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, chartDocument: { classPropertyName: "chartDocument", publicName: "chartDocument", isSignal: true, isRequired: false, transformFunction: null }, filterCriteria: { classPropertyName: "filterCriteria", publicName: "filterCriteria", isSignal: true, isRequired: false, transformFunction: null }, queryContext: { classPropertyName: "queryContext", publicName: "queryContext", isSignal: true, isRequired: false, transformFunction: null }, remoteDataResolver: { classPropertyName: "remoteDataResolver", publicName: "remoteDataResolver", isSignal: true, isRequired: false, transformFunction: null }, enableCustomization: { classPropertyName: "enableCustomization", publicName: "enableCustomization", isSignal: true, isRequired: false, transformFunction: null }, availableResources: { classPropertyName: "availableResources", publicName: "availableResources", isSignal: true, isRequired: false, transformFunction: null }, availableFields: { classPropertyName: "availableFields", publicName: "availableFields", isSignal: true, isRequired: false, transformFunction: null }, availableTargets: { classPropertyName: "availableTargets", publicName: "availableTargets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointClick: "pointClick", pointAction: "pointAction", selectionChange: "selectionChange", drillDown: "drillDown", crossFilter: "crossFilter", queryRequest: "queryRequest", loadStateChange: "loadStateChange", chartDocumentApplied: "chartDocumentApplied", chartDocumentSaved: "chartDocumentSaved", chartDocumentPatchChange: "chartDocumentPatchChange" }, host: { properties: { "class.praxis-chart-host-fill-container": "isFillContainerMode()" } }, viewQueries: [{ propertyName: "chartHost", first: true, predicate: ["chartHost"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <section
       class="praxis-chart-shell"
       [class.praxis-chart-shell-fill-container]="isFillContainerMode()"
@@ -3158,7 +3162,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
       }
     </section>
   `, styles: [":host{display:block;min-height:var(--praxis-chart-runtime-height, 320px);min-width:0;color:var(--md-sys-color-on-surface, #1a1b20)}:host(.praxis-chart-host-fill-container){height:100%;min-height:0}:host-context(.pdx-shell.no-shell) .praxis-chart-shell,:host-context(.pdx-shell.body-fill) .praxis-chart-shell,:host-context(.pdx-shell.expanded) .praxis-chart-shell,:host-context(.pdx-shell.fullscreen) .praxis-chart-shell{height:100%!important}.praxis-chart-shell{position:relative;width:100%;height:100%;min-height:240px;border-radius:var(--praxis-chart-config-surface-radius, var(--praxis-chart-surface-radius, 8px));overflow:hidden;background:var( --praxis-chart-config-surface-bg, var(--praxis-chart-surface-bg, var(--md-sys-color-surface-container-lowest, #fff)) );border-color:var( --praxis-chart-config-surface-border, var( --praxis-chart-surface-border, color-mix(in srgb, var(--md-sys-color-outline, #c5c7ce) 44%, transparent) ) );border-style:solid;border-width:var(--praxis-chart-config-surface-border-width, 1px)}.praxis-chart-shell-fill-container{min-height:0}:host-context(.pdx-shell) .praxis-chart-shell:not(.praxis-chart-shell-contained),.praxis-chart-shell-embedded{border-width:var( --praxis-chart-config-surface-border-width, var(--praxis-chart-embedded-surface-border-width, 0) );border-radius:var( --praxis-chart-config-surface-radius, var(--praxis-chart-embedded-surface-radius, 0) );background:var( --praxis-chart-config-surface-bg, var(--praxis-chart-embedded-surface-bg, transparent) )}.praxis-chart-settings-trigger{position:absolute;top:10px;right:10px;z-index:3;--praxis-icon-button-filled-background: color-mix(in srgb, var(--md-sys-color-surface, #fff) 88%, rgba(18, 99, 180, .12));--praxis-icon-button-filled-foreground: var(--md-sys-color-on-surface-variant, #44474f);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.praxis-chart-data-trigger{position:absolute;top:10px;right:10px;z-index:5;--praxis-icon-button-filled-background: color-mix(in srgb, var(--md-sys-color-surface, #fff) 88%, rgba(18, 99, 180, .12));--praxis-icon-button-filled-foreground: var(--md-sys-color-on-surface-variant, #44474f);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.praxis-chart-data-trigger-with-settings{right:50px}.praxis-chart-accessible-data{position:absolute;inset:0;z-index:4;overflow:auto;padding:52px 16px 16px;color:var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface, #1a1b20));background:var( --praxis-chart-config-surface-bg, var(--praxis-chart-surface-bg, var(--md-sys-color-surface-container-lowest, #fff)) )}.praxis-chart-accessible-data h3{margin:0 0 12px;font-size:1rem;line-height:1.4}.praxis-chart-accessible-data table{width:100%;border-collapse:collapse;font-size:.875rem}.praxis-chart-accessible-data caption{padding:0 0 12px;text-align:left;color:inherit}.praxis-chart-accessible-data th,.praxis-chart-accessible-data td{padding:8px;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 44%,transparent);text-align:left}.praxis-chart-accessible-data thead th{font-weight:600}.praxis-chart-point-action{appearance:none;padding:4px 6px;border:0;border-radius:4px;color:inherit;background:transparent;font:inherit;font-weight:600;text-align:left;text-decoration:underline;text-decoration-thickness:from-font;text-underline-offset:.16em;cursor:pointer}.praxis-chart-point-action:hover{background:color-mix(in srgb,currentColor 10%,transparent)}.praxis-chart-point-action:focus-visible{outline:3px solid currentColor;outline-offset:2px}.praxis-chart-point-action[aria-pressed=true]{color:var(--md-sys-color-on-primary-container, #001b3f);background:var(--md-sys-color-primary-container, #d7e3ff)}.praxis-chart-host{width:100%;height:100%;min-height:inherit}.praxis-chart-state{height:100%;min-height:min(240px,100%);display:grid;align-content:center;justify-items:center;gap:14px;padding:24px;text-align:center}.praxis-chart-state-copy{display:grid;gap:6px;justify-items:center}.praxis-chart-state-title{font-size:1rem;font-weight:600;color:var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface, #1a1b20))}.praxis-chart-state-description{font-size:.925rem;color:color-mix(in srgb,var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface-variant, #5a5d67)) 72%,transparent);max-width:36rem}.praxis-chart-loading-hero{width:min(100%,320px);display:grid;gap:14px}.praxis-chart-loading-summary{display:flex;gap:8px;justify-content:center}.praxis-chart-loading-chip,.praxis-chart-loading-bar{border-radius:999px;background:linear-gradient(90deg,#1263b414,#1263b438,#1263b414);background-size:200% 100%;animation:praxis-chart-loading-wave 1.2s ease-in-out infinite}.praxis-chart-loading-chip{display:block;width:104px;height:12px}.praxis-chart-loading-chip--short{width:64px}.praxis-chart-loading-plot{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;gap:10px;height:108px;padding:12px 8px 4px;border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-surface-container, #eef3f8) 72%,transparent);border:1px solid rgba(18,99,180,.08)}.praxis-chart-loading-bar{display:block;width:100%}.praxis-chart-loading-bar--1{height:32%}.praxis-chart-loading-bar--2{height:68%}.praxis-chart-loading-bar--3{height:48%}.praxis-chart-loading-bar--4{height:78%}.praxis-chart-loading-bar--5{height:56%}@keyframes praxis-chart-loading-wave{0%{background-position:100% 0}to{background-position:-100% 0}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], chartDocument: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartDocument", required: false }] }], filterCriteria: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterCriteria", required: false }] }], queryContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryContext", required: false }] }], remoteDataResolver: [{ type: i0.Input, args: [{ isSignal: true, alias: "remoteDataResolver", required: false }] }], enableCustomization: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableCustomization", required: false }] }], availableResources: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableResources", required: false }] }], availableFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableFields", required: false }] }], availableTargets: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableTargets", required: false }] }], pointClick: [{ type: i0.Output, args: ["pointClick"] }], pointAction: [{ type: i0.Output, args: ["pointAction"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], drillDown: [{ type: i0.Output, args: ["drillDown"] }], crossFilter: [{ type: i0.Output, args: ["crossFilter"] }], queryRequest: [{ type: i0.Output, args: ["queryRequest"] }], loadStateChange: [{ type: i0.Output, args: ["loadStateChange"] }], chartDocumentApplied: [{ type: i0.Output, args: ["chartDocumentApplied"] }], chartDocumentSaved: [{ type: i0.Output, args: ["chartDocumentSaved"] }], chartHost: [{ type: i0.ViewChild, args: ['chartHost', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], chartDocument: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartDocument", required: false }] }], filterCriteria: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterCriteria", required: false }] }], queryContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryContext", required: false }] }], remoteDataResolver: [{ type: i0.Input, args: [{ isSignal: true, alias: "remoteDataResolver", required: false }] }], enableCustomization: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableCustomization", required: false }] }], availableResources: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableResources", required: false }] }], availableFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableFields", required: false }] }], availableTargets: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableTargets", required: false }] }], pointClick: [{ type: i0.Output, args: ["pointClick"] }], pointAction: [{ type: i0.Output, args: ["pointAction"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], drillDown: [{ type: i0.Output, args: ["drillDown"] }], crossFilter: [{ type: i0.Output, args: ["crossFilter"] }], queryRequest: [{ type: i0.Output, args: ["queryRequest"] }], loadStateChange: [{ type: i0.Output, args: ["loadStateChange"] }], chartDocumentApplied: [{ type: i0.Output, args: ["chartDocumentApplied"] }], chartDocumentSaved: [{ type: i0.Output, args: ["chartDocumentSaved"] }], chartDocumentPatchChange: [{ type: i0.Output, args: ["chartDocumentPatchChange"] }], chartHost: [{ type: i0.ViewChild, args: ['chartHost', { isSignal: true }] }] } });
 function mergeRemoteQueryContext(config, queryContext, runtimeFilters) {
     const dataSource = config.dataSource;
     if (dataSource?.kind !== 'remote' || !dataSource.query)
@@ -4308,7 +4312,7 @@ class PraxisChartDrilldownPanelComponent {
         [data]="detailData()"
       ></praxis-chart>
     </section>
-  `, isInline: true, styles: [":host{display:block}.drilldown-shell{display:grid;gap:14px}.drilldown-header h3,.drilldown-eyebrow,.drilldown-description{margin:0}.drilldown-eyebrow{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant, #5a5d67)}.drilldown-header h3{font-size:1.2rem;color:var(--md-sys-color-on-surface, #1a1b20)}.drilldown-description{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", "pointAction", "selectionChange", "drillDown", "crossFilter", "queryRequest", "loadStateChange", "chartDocumentApplied", "chartDocumentSaved"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block}.drilldown-shell{display:grid;gap:14px}.drilldown-header h3,.drilldown-eyebrow,.drilldown-description{margin:0}.drilldown-eyebrow{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant, #5a5d67)}.drilldown-header h3{font-size:1.2rem;color:var(--md-sys-color-on-surface, #1a1b20)}.drilldown-description{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", "pointAction", "selectionChange", "drillDown", "crossFilter", "queryRequest", "loadStateChange", "chartDocumentApplied", "chartDocumentSaved", "chartDocumentPatchChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisChartDrilldownPanelComponent, decorators: [{
             type: Component,
@@ -4791,7 +4795,7 @@ class PraxisAnalyticsPresentationComponent {
         return Object.entries(values).reduce((message, [name, value]) => message.replaceAll(`{${name}}`, value), this.t(key, fallback));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisAnalyticsPresentationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisAnalyticsPresentationComponent, isStandalone: true, selector: "praxis-analytics-presentation", inputs: { analytics: { classPropertyName: "analytics", publicName: "analytics", isSignal: true, isRequired: true, transformFunction: null }, projectionId: { classPropertyName: "projectionId", publicName: "projectionId", isSignal: true, isRequired: true, transformFunction: null }, availableFamilies: { classPropertyName: "availableFamilies", publicName: "availableFamilies", isSignal: true, isRequired: false, transformFunction: null }, preferredFamily: { classPropertyName: "preferredFamily", publicName: "preferredFamily", isSignal: true, isRequired: false, transformFunction: null }, queryContext: { classPropertyName: "queryContext", publicName: "queryContext", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, enableCustomization: { classPropertyName: "enableCustomization", publicName: "enableCustomization", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { presentationChange: "presentationChange", pointClick: "pointClick", pointAction: "pointAction", selectionChange: "selectionChange", drillDown: "drillDown", crossFilter: "crossFilter", queryRequest: "queryRequest", loadStateChange: "loadStateChange" }, ngImport: i0, template: "<section class=\"analytics-presentation\" [attr.aria-label]=\"projectionId()\">\n  <div class=\"analytics-presentation__toolbar\" role=\"group\" [attr.aria-label]=\"t('praxis.charts.analyticsPresentation.selectorLabel', 'Analytics presentation')\">\n    @if (eligibleFamilies().includes('chart')) {\n      <button type=\"button\" [attr.aria-pressed]=\"activeFamily() === 'chart'\" (click)=\"selectFamily('chart')\">\n        {{ t('praxis.charts.analyticsPresentation.chart', 'Chart') }}\n      </button>\n    }\n    @if (eligibleFamilies().includes('analytic-table')) {\n      <button type=\"button\" [attr.aria-pressed]=\"activeFamily() === 'analytic-table'\" (click)=\"selectFamily('analytic-table')\">\n        {{ t('praxis.charts.analyticsPresentation.table', 'Table') }}\n      </button>\n    }\n    @if (eligibleFamilies().includes('kpi')) {\n      <button type=\"button\" [attr.aria-pressed]=\"activeFamily() === 'kpi'\" (click)=\"selectFamily('kpi')\">\n        {{ t('praxis.charts.analyticsPresentation.kpi', 'KPI') }}\n      </button>\n    }\n  </div>\n\n  @if (diagnostic(); as message) {\n    <section class=\"analytics-presentation__state analytics-presentation__state--error\" role=\"alert\">\n      <strong>{{ t('praxis.charts.analyticsPresentation.unavailable', 'Presentation unavailable') }}</strong>\n      <span>{{ message }}</span>\n    </section>\n  } @else if (activeFamily() === 'chart' && chartConfig(); as config) {\n    <praxis-chart\n      [config]=\"config\"\n      [queryContext]=\"queryContext()\"\n      [enableCustomization]=\"enableCustomization()\"\n      (pointClick)=\"pointClick.emit($event)\"\n      (pointAction)=\"pointAction.emit($event)\"\n      (selectionChange)=\"selectionChange.emit($event)\"\n      (drillDown)=\"drillDown.emit($event)\"\n      (crossFilter)=\"crossFilter.emit($event)\"\n      (queryRequest)=\"queryRequest.emit($event)\"\n      (loadStateChange)=\"loadStateChange.emit($event)\"\n    />\n  } @else if (activeFamily() === 'analytic-table' && tableConfig(); as config) {\n    @if (isResultLoading()) {\n      <section class=\"analytics-presentation__state\" role=\"status\">{{ t('praxis.charts.analyticsPresentation.loading', 'Loading analytics\u2026') }}</section>\n    } @else if (isResultEmpty()) {\n      <section class=\"analytics-presentation__state\" role=\"status\">{{ t('praxis.charts.analyticsPresentation.empty', 'No data available.') }}</section>\n    } @else {\n      <praxis-table\n        [config]=\"config\"\n        [data]=\"resultRows()\"\n        [tableId]=\"projectionId() + '-analytic-table'\"\n        (rowClick)=\"handleTableRowClick($event)\"\n      />\n    }\n  } @else if (activeFamily() === 'kpi') {\n    @if (isResultLoading()) {\n      <section class=\"analytics-presentation__state\" role=\"status\">{{ t('praxis.charts.analyticsPresentation.loading', 'Loading analytics\u2026') }}</section>\n    } @else if (isResultEmpty()) {\n      <section class=\"analytics-presentation__state\" role=\"status\">{{ t('praxis.charts.analyticsPresentation.empty', 'No data available.') }}</section>\n    } @else {\n      <section class=\"analytics-presentation__kpi\" [attr.aria-label]=\"kpiTitle() || t('praxis.charts.analyticsPresentation.kpiCollection', 'Key metrics')\">\n        @if (kpiTitle(); as heading) {\n          <header class=\"analytics-presentation__kpi-header\">\n            <h3>{{ heading }}</h3>\n            @if (kpiSubtitle(); as description) {\n              <p>{{ description }}</p>\n            }\n          </header>\n        }\n        <div class=\"analytics-presentation__kpi-grid\" role=\"list\">\n          @for (item of kpiItems(); track item.trackId) {\n            <div role=\"listitem\">\n              <button\n                class=\"analytics-presentation__kpi-card\"\n                type=\"button\"\n                [attr.aria-label]=\"kpiItemAriaLabel(item.label, item.formattedValue, item.metricLabel)\"\n                (click)=\"handleKpiClick(item.row, item.label, item.value)\"\n              >\n                <strong>{{ item.formattedValue }}</strong>\n                <span>{{ item.label }}</span>\n                <small>{{ item.metricLabel }}</small>\n              </button>\n            </div>\n          }\n        </div>\n      </section>\n    }\n  }\n</section>\n", styles: [":host{display:block;min-width:0}.analytics-presentation{display:grid;gap:12px;min-width:0}.analytics-presentation__toolbar{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px}.analytics-presentation__toolbar button{min-height:40px;padding:0 14px;border:1px solid var(--md-sys-color-outline-variant, #c4c7c5);border-radius:999px;background:var(--md-sys-color-surface, #fff);color:var(--md-sys-color-on-surface, #1a1c1e);font:inherit;cursor:pointer}.analytics-presentation__toolbar button[aria-pressed=true]{border-color:var(--md-sys-color-primary, #1263b4);background:var(--md-sys-color-primary-container, #d7e3ff);color:var(--md-sys-color-on-primary-container, #001b3e)}.analytics-presentation__toolbar button:focus-visible{outline:3px solid color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 45%,transparent);outline-offset:2px}.analytics-presentation__state{min-height:220px;display:grid;place-content:center;gap:6px;padding:24px;border:1px solid var(--md-sys-color-outline-variant, #c4c7c5);border-radius:16px;background:var(--md-sys-color-surface-container-low, #f7f8fa);color:var(--md-sys-color-on-surface, #1a1c1e);text-align:center}.analytics-presentation__state--error{border-color:var(--md-sys-color-error, #ba1a1a);color:var(--md-sys-color-error, #ba1a1a)}.analytics-presentation__kpi{display:grid;gap:16px;min-width:0}.analytics-presentation__kpi-header{display:grid;gap:4px}.analytics-presentation__kpi-header h3,.analytics-presentation__kpi-header p{margin:0}.analytics-presentation__kpi-header h3{color:var(--md-sys-color-on-surface, #1a1c1e);font-size:1rem;font-weight:650}.analytics-presentation__kpi-header p{color:var(--md-sys-color-on-surface-variant, #44474e);font-size:.875rem}.analytics-presentation__kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,176px),1fr));gap:12px;min-width:0}.analytics-presentation__kpi-card{display:grid;gap:6px;width:100%;height:100%;min-width:0;min-height:132px;align-content:center;padding:18px;border:1px solid var(--md-sys-color-outline-variant, #c4c7c5);border-radius:16px;background:var(--md-sys-color-surface-container-low, #f7f8fa);color:var(--md-sys-color-on-surface, #1a1c1e);font:inherit;text-align:left;cursor:pointer}.analytics-presentation__kpi-card:hover{border-color:var(--md-sys-color-primary, #1263b4);background:var(--md-sys-color-surface-container, #f0f1f3)}.analytics-presentation__kpi-card:focus-visible{outline:3px solid color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 45%,transparent);outline-offset:2px}.analytics-presentation__kpi-card strong{overflow-wrap:anywhere;color:var(--md-sys-color-primary, #1263b4);font-size:clamp(1.75rem,5vw,2.5rem);font-variant-numeric:tabular-nums;line-height:1}.analytics-presentation__kpi-card span,.analytics-presentation__kpi-card small{overflow-wrap:anywhere}.analytics-presentation__kpi-card span{font-weight:600}.analytics-presentation__kpi-card small{color:var(--md-sys-color-on-surface-variant, #44474e)}@media(max-width:600px){.analytics-presentation__toolbar{justify-content:stretch}.analytics-presentation__toolbar button{flex:1 1 0}}\n"], dependencies: [{ kind: "component", type: PraxisChartComponent, selector: "praxis-chart", inputs: ["config", "data", "chartDocument", "filterCriteria", "queryContext", "remoteDataResolver", "enableCustomization", "availableResources", "availableFields", "availableTargets"], outputs: ["pointClick", "pointAction", "selectionChange", "drillDown", "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", "authoringCapability", "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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisAnalyticsPresentationComponent, isStandalone: true, selector: "praxis-analytics-presentation", inputs: { analytics: { classPropertyName: "analytics", publicName: "analytics", isSignal: true, isRequired: true, transformFunction: null }, projectionId: { classPropertyName: "projectionId", publicName: "projectionId", isSignal: true, isRequired: true, transformFunction: null }, availableFamilies: { classPropertyName: "availableFamilies", publicName: "availableFamilies", isSignal: true, isRequired: false, transformFunction: null }, preferredFamily: { classPropertyName: "preferredFamily", publicName: "preferredFamily", isSignal: true, isRequired: false, transformFunction: null }, queryContext: { classPropertyName: "queryContext", publicName: "queryContext", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, enableCustomization: { classPropertyName: "enableCustomization", publicName: "enableCustomization", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { presentationChange: "presentationChange", pointClick: "pointClick", pointAction: "pointAction", selectionChange: "selectionChange", drillDown: "drillDown", crossFilter: "crossFilter", queryRequest: "queryRequest", loadStateChange: "loadStateChange" }, ngImport: i0, template: "<section class=\"analytics-presentation\" [attr.aria-label]=\"projectionId()\">\n  <div class=\"analytics-presentation__toolbar\" role=\"group\" [attr.aria-label]=\"t('praxis.charts.analyticsPresentation.selectorLabel', 'Analytics presentation')\">\n    @if (eligibleFamilies().includes('chart')) {\n      <button type=\"button\" [attr.aria-pressed]=\"activeFamily() === 'chart'\" (click)=\"selectFamily('chart')\">\n        {{ t('praxis.charts.analyticsPresentation.chart', 'Chart') }}\n      </button>\n    }\n    @if (eligibleFamilies().includes('analytic-table')) {\n      <button type=\"button\" [attr.aria-pressed]=\"activeFamily() === 'analytic-table'\" (click)=\"selectFamily('analytic-table')\">\n        {{ t('praxis.charts.analyticsPresentation.table', 'Table') }}\n      </button>\n    }\n    @if (eligibleFamilies().includes('kpi')) {\n      <button type=\"button\" [attr.aria-pressed]=\"activeFamily() === 'kpi'\" (click)=\"selectFamily('kpi')\">\n        {{ t('praxis.charts.analyticsPresentation.kpi', 'KPI') }}\n      </button>\n    }\n  </div>\n\n  @if (diagnostic(); as message) {\n    <section class=\"analytics-presentation__state analytics-presentation__state--error\" role=\"alert\">\n      <strong>{{ t('praxis.charts.analyticsPresentation.unavailable', 'Presentation unavailable') }}</strong>\n      <span>{{ message }}</span>\n    </section>\n  } @else if (activeFamily() === 'chart' && chartConfig(); as config) {\n    <praxis-chart\n      [config]=\"config\"\n      [queryContext]=\"queryContext()\"\n      [enableCustomization]=\"enableCustomization()\"\n      (pointClick)=\"pointClick.emit($event)\"\n      (pointAction)=\"pointAction.emit($event)\"\n      (selectionChange)=\"selectionChange.emit($event)\"\n      (drillDown)=\"drillDown.emit($event)\"\n      (crossFilter)=\"crossFilter.emit($event)\"\n      (queryRequest)=\"queryRequest.emit($event)\"\n      (loadStateChange)=\"loadStateChange.emit($event)\"\n    />\n  } @else if (activeFamily() === 'analytic-table' && tableConfig(); as config) {\n    @if (isResultLoading()) {\n      <section class=\"analytics-presentation__state\" role=\"status\">{{ t('praxis.charts.analyticsPresentation.loading', 'Loading analytics\u2026') }}</section>\n    } @else if (isResultEmpty()) {\n      <section class=\"analytics-presentation__state\" role=\"status\">{{ t('praxis.charts.analyticsPresentation.empty', 'No data available.') }}</section>\n    } @else {\n      <praxis-table\n        [config]=\"config\"\n        [data]=\"resultRows()\"\n        [tableId]=\"projectionId() + '-analytic-table'\"\n        (rowClick)=\"handleTableRowClick($event)\"\n      />\n    }\n  } @else if (activeFamily() === 'kpi') {\n    @if (isResultLoading()) {\n      <section class=\"analytics-presentation__state\" role=\"status\">{{ t('praxis.charts.analyticsPresentation.loading', 'Loading analytics\u2026') }}</section>\n    } @else if (isResultEmpty()) {\n      <section class=\"analytics-presentation__state\" role=\"status\">{{ t('praxis.charts.analyticsPresentation.empty', 'No data available.') }}</section>\n    } @else {\n      <section class=\"analytics-presentation__kpi\" [attr.aria-label]=\"kpiTitle() || t('praxis.charts.analyticsPresentation.kpiCollection', 'Key metrics')\">\n        @if (kpiTitle(); as heading) {\n          <header class=\"analytics-presentation__kpi-header\">\n            <h3>{{ heading }}</h3>\n            @if (kpiSubtitle(); as description) {\n              <p>{{ description }}</p>\n            }\n          </header>\n        }\n        <div class=\"analytics-presentation__kpi-grid\" role=\"list\">\n          @for (item of kpiItems(); track item.trackId) {\n            <div role=\"listitem\">\n              <button\n                class=\"analytics-presentation__kpi-card\"\n                type=\"button\"\n                [attr.aria-label]=\"kpiItemAriaLabel(item.label, item.formattedValue, item.metricLabel)\"\n                (click)=\"handleKpiClick(item.row, item.label, item.value)\"\n              >\n                <strong>{{ item.formattedValue }}</strong>\n                <span>{{ item.label }}</span>\n                <small>{{ item.metricLabel }}</small>\n              </button>\n            </div>\n          }\n        </div>\n      </section>\n    }\n  }\n</section>\n", styles: [":host{display:block;min-width:0}.analytics-presentation{display:grid;gap:12px;min-width:0}.analytics-presentation__toolbar{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px}.analytics-presentation__toolbar button{min-height:40px;padding:0 14px;border:1px solid var(--md-sys-color-outline-variant, #c4c7c5);border-radius:999px;background:var(--md-sys-color-surface, #fff);color:var(--md-sys-color-on-surface, #1a1c1e);font:inherit;cursor:pointer}.analytics-presentation__toolbar button[aria-pressed=true]{border-color:var(--md-sys-color-primary, #1263b4);background:var(--md-sys-color-primary-container, #d7e3ff);color:var(--md-sys-color-on-primary-container, #001b3e)}.analytics-presentation__toolbar button:focus-visible{outline:3px solid color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 45%,transparent);outline-offset:2px}.analytics-presentation__state{min-height:220px;display:grid;place-content:center;gap:6px;padding:24px;border:1px solid var(--md-sys-color-outline-variant, #c4c7c5);border-radius:16px;background:var(--md-sys-color-surface-container-low, #f7f8fa);color:var(--md-sys-color-on-surface, #1a1c1e);text-align:center}.analytics-presentation__state--error{border-color:var(--md-sys-color-error, #ba1a1a);color:var(--md-sys-color-error, #ba1a1a)}.analytics-presentation__kpi{display:grid;gap:16px;min-width:0}.analytics-presentation__kpi-header{display:grid;gap:4px}.analytics-presentation__kpi-header h3,.analytics-presentation__kpi-header p{margin:0}.analytics-presentation__kpi-header h3{color:var(--md-sys-color-on-surface, #1a1c1e);font-size:1rem;font-weight:650}.analytics-presentation__kpi-header p{color:var(--md-sys-color-on-surface-variant, #44474e);font-size:.875rem}.analytics-presentation__kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,176px),1fr));gap:12px;min-width:0}.analytics-presentation__kpi-card{display:grid;gap:6px;width:100%;height:100%;min-width:0;min-height:132px;align-content:center;padding:18px;border:1px solid var(--md-sys-color-outline-variant, #c4c7c5);border-radius:16px;background:var(--md-sys-color-surface-container-low, #f7f8fa);color:var(--md-sys-color-on-surface, #1a1c1e);font:inherit;text-align:left;cursor:pointer}.analytics-presentation__kpi-card:hover{border-color:var(--md-sys-color-primary, #1263b4);background:var(--md-sys-color-surface-container, #f0f1f3)}.analytics-presentation__kpi-card:focus-visible{outline:3px solid color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 45%,transparent);outline-offset:2px}.analytics-presentation__kpi-card strong{overflow-wrap:anywhere;color:var(--md-sys-color-primary, #1263b4);font-size:clamp(1.75rem,5vw,2.5rem);font-variant-numeric:tabular-nums;line-height:1}.analytics-presentation__kpi-card span,.analytics-presentation__kpi-card small{overflow-wrap:anywhere}.analytics-presentation__kpi-card span{font-weight:600}.analytics-presentation__kpi-card small{color:var(--md-sys-color-on-surface-variant, #44474e)}@media(max-width:600px){.analytics-presentation__toolbar{justify-content:stretch}.analytics-presentation__toolbar button{flex:1 1 0}}\n"], dependencies: [{ kind: "component", type: PraxisChartComponent, selector: "praxis-chart", inputs: ["config", "data", "chartDocument", "filterCriteria", "queryContext", "remoteDataResolver", "enableCustomization", "availableResources", "availableFields", "availableTargets"], outputs: ["pointClick", "pointAction", "selectionChange", "drillDown", "crossFilter", "queryRequest", "loadStateChange", "chartDocumentApplied", "chartDocumentSaved", "chartDocumentPatchChange"] }, { 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", "authoringCapability", "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: PraxisAnalyticsPresentationComponent, decorators: [{
             type: Component,
@@ -8769,7 +8773,7 @@ class PraxisChartConfigEditor {
         this.documentChange.emit(structuredClone(this.normalizedDocument()));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisChartConfigEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisChartConfigEditor, isStandalone: true, selector: "praxis-chart-config-editor", inputs: { documentInput: { classPropertyName: "documentInput", publicName: "document", isSignal: true, isRequired: false, transformFunction: null }, modeInput: { classPropertyName: "modeInput", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, availableResourcesInput: { classPropertyName: "availableResourcesInput", publicName: "availableResources", isSignal: true, isRequired: false, transformFunction: null }, availableFieldsInput: { classPropertyName: "availableFieldsInput", publicName: "availableFields", isSignal: true, isRequired: false, transformFunction: null }, availableTargetsInput: { classPropertyName: "availableTargetsInput", publicName: "availableTargets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply", save: "save", resetChange: "resetChange", documentChange: "documentChange" }, providers: [providePraxisChartsI18n()], ngImport: i0, template: "<div class=\"editor-shell\">\n  <div class=\"editor-nav\">\n    @for (section of sections; track section.id) {\n      <button\n        mat-stroked-button\n        type=\"button\"\n        [attr.data-testid]=\"'chart-editor-section-' + section.id\"\n        [class.active]=\"activeSection() === section.id\"\n        (click)=\"setSection(section.id)\"\n      >\n        {{ t(section.labelKey, section.fallback) }}\n      </button>\n    }\n  </div>\n\n  <div class=\"editor-layout\">\n    <div class=\"editor-form\">\n      <mat-card class=\"editor-card\">\n        <mat-card-content>\n          @switch (activeSection()) {\n            @case ('general') {\n              <div class=\"editor-grid\">\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.chartId', 'Chart ID') }}</mat-label>\n                  <input matInput [ngModel]=\"doc().chartId || ''\" (ngModelChange)=\"setChartId($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.kind', 'Kind') }}</mat-label>\n                  <mat-select [ngModel]=\"doc().kind\" (ngModelChange)=\"setKind($event)\" [disabled]=\"isReadonly()\">\n                    @for (kind of chartKinds; track kind) {\n                      <mat-option [value]=\"kind\">\n                        {{ t('praxis.charts.editor.kind.' + kind, kind) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.title', 'Title') }}</mat-label>\n                  <input matInput data-testid=\"chart-editor-title-input\" [ngModel]=\"titleValue()\" (ngModelChange)=\"setTitle($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.subtitle', 'Subtitle') }}</mat-label>\n                  <input matInput [ngModel]=\"subtitleValue()\" (ngModelChange)=\"setSubtitle($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.sizingMode', 'Sizing') }}</mat-label>\n                  <mat-select [ngModel]=\"sizingModeValue()\" (ngModelChange)=\"setSizingMode($event)\" [disabled]=\"isReadonly()\">\n                    @for (mode of sizingModes; track mode) {\n                      <mat-option [value]=\"mode\">\n                        {{ t('praxis.charts.editor.sizing.' + mode, mode) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                  <mat-hint>{{ t('praxis.charts.editor.hint.sizingMode', 'Use fill-container only when the host widget provides a defined body height.') }}</mat-hint>\n                </mat-form-field>\n\n                @if (sizingModeValue() === 'fixed') {\n                  <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                    <mat-label>{{ t('praxis.charts.editor.field.height', 'Height') }}</mat-label>\n                    <input matInput [ngModel]=\"heightValue()\" (ngModelChange)=\"setSizingHeight($event)\" [disabled]=\"isReadonly()\" />\n                    <mat-hint>{{ t('praxis.charts.editor.hint.height', 'Numbers are saved as pixels; CSS lengths such as 20rem are also accepted.') }}</mat-hint>\n                  </mat-form-field>\n                }\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.minHeight', 'Minimum height') }}</mat-label>\n                  <input matInput [ngModel]=\"sizingMinHeightValue()\" (ngModelChange)=\"setSizingMinHeight($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.minHeight', 'Set a readable minimum for compact dashboard widgets.') }}</mat-hint>\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.maxHeight', 'Maximum height') }}</mat-label>\n                  <input matInput [ngModel]=\"sizingMaxHeightValue()\" (ngModelChange)=\"setSizingMaxHeight($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.maxHeight', 'Leave empty unless the chart must stop growing inside a flexible layout.') }}</mat-hint>\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.aspectRatio', 'Aspect ratio') }}</mat-label>\n                  <input matInput [ngModel]=\"sizingAspectRatioValue()\" (ngModelChange)=\"setSizingAspectRatio($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.aspectRatio', 'Optional. Use values such as 1.777 or 16 / 9.') }}</mat-hint>\n                </mat-form-field>\n              </div>\n            }\n\n            @case ('data') {\n              <div class=\"editor-stack\">\n                <div class=\"editor-grid\">\n                  <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                    <mat-label>{{ t('praxis.charts.editor.field.sourceKind', 'Source') }}</mat-label>\n                    <mat-select data-testid=\"chart-editor-source-kind\" [ngModel]=\"doc().source.kind\" (ngModelChange)=\"setSourceKind($event)\" [disabled]=\"isReadonly()\">\n                      @for (sourceKind of sourceKinds; track sourceKind) {\n                        <mat-option [value]=\"sourceKind\">\n                          {{ t('praxis.charts.editor.sourceKind.' + (sourceKind === 'praxis.stats' ? 'praxisStats' : 'derived'), sourceKind) }}\n                        </mat-option>\n                      }\n                    </mat-select>\n                  </mat-form-field>\n\n                  @if (doc().source.kind === 'praxis.stats') {\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.resource', 'Resource') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-resource\" [ngModel]=\"resourceValue()\" (ngModelChange)=\"setResource($event)\" [disabled]=\"isReadonly() || resourceCatalogUnavailable()\">\n                        @for (resource of resourceOptions(); track resource.id) {\n                          <mat-option [value]=\"resource.path\">{{ resource.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (resourceCatalogUnavailable()) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.resourceMissing', 'Resource catalog is required for governed praxis.stats authoring.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.operation', 'Operation') }}</mat-label>\n                      <mat-select\n                        data-testid=\"chart-editor-operation\"\n                        [ngModel]=\"doc().source.operation || 'group-by'\"\n                        (ngModelChange)=\"setOperation($event)\"\n                        [disabled]=\"isReadonly() || operationCatalogUnavailable()\"\n                      >\n                        @for (operation of operationOptions(); track operation) {\n                          <mat-option [value]=\"operation\">\n                            {{ t('praxis.charts.editor.operation.' + (operation === 'group-by' ? 'groupBy' : operation), operation) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                      @if (operationCatalogUnavailable()) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.operationMissing', 'Selected resource does not publish authorable stats operations.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n                  }\n                </div>\n\n                @if (showTimeseriesControls()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.timeseriesTitle', 'Timeseries options') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.granularity', 'Granularity') }}</mat-label>\n                        <mat-select [ngModel]=\"granularityValue()\" (ngModelChange)=\"setGranularity($event)\" [disabled]=\"isReadonly()\">\n                          @for (granularity of timeGranularities; track granularity) {\n                            <mat-option [value]=\"granularity\">\n                              {{ t('praxis.charts.editor.granularity.' + granularity, granularity) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      <mat-slide-toggle\n                        [ngModel]=\"fillGapsValue()\"\n                        (ngModelChange)=\"setFillGaps($event)\"\n                        [disabled]=\"isReadonly()\"\n                      >\n                        {{ t('praxis.charts.editor.field.fillGaps', 'Fill missing intervals') }}\n                      </mat-slide-toggle>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showDistributionControls()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.distributionTitle', 'Distribution options') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.distributionMode', 'Distribution mode') }}</mat-label>\n                        <mat-select data-testid=\"chart-editor-distribution-mode\" [ngModel]=\"distributionModeValue()\" (ngModelChange)=\"setDistributionMode($event)\" [disabled]=\"isReadonly()\">\n                          @for (mode of distributionModes; track mode) {\n                            <mat-option [value]=\"mode\">\n                              {{ t('praxis.charts.editor.distributionMode.' + mode, mode) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      @if (distributionModeValue() === 'histogram') {\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.bucketSize', 'Bucket size') }}</mat-label>\n                          <input matInput data-testid=\"chart-editor-bucket-size\" [ngModel]=\"bucketSizeValue()\" (ngModelChange)=\"setBucketSize($event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.bucketCount', 'Bucket count') }}</mat-label>\n                          <input matInput data-testid=\"chart-editor-bucket-count\" [ngModel]=\"bucketCountValue()\" (ngModelChange)=\"setBucketCount($event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n                      }\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showComparisonControls()) {\n                  <mat-card class=\"editor-card\" data-testid=\"chart-editor-comparison-options\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.comparisonTitle', 'Comparison period') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonPeriodField', 'Period field') }}</mat-label>\n                        @if (fieldOptions('time').length) {\n                          <mat-select\n                            [ngModel]=\"comparisonPeriodFieldValue()\"\n                            (ngModelChange)=\"setComparisonPeriodField($event)\"\n                            [disabled]=\"isReadonly()\"\n                          >\n                            @for (field of fieldOptions('time'); track field.field) {\n                              <mat-option [value]=\"field.field\">{{ field.label || field.field }}</mat-option>\n                            }\n                          </mat-select>\n                        } @else {\n                          <mat-select [ngModel]=\"comparisonPeriodFieldValue()\" [disabled]=\"true\"></mat-select>\n                          <mat-hint>{{ t('praxis.charts.editor.catalog.comparisonPeriodFieldsMissing', 'No governed time-series field is available for comparison periods.') }}</mat-hint>\n                        }\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonTimezone', 'Timezone') }}</mat-label>\n                        <input\n                          matInput\n                          [ngModel]=\"comparisonPeriodTimezoneValue()\"\n                          (ngModelChange)=\"setComparisonPeriodTimezone($event)\"\n                          [disabled]=\"isReadonly()\"\n                        />\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonPreset', 'Period preset') }}</mat-label>\n                        <mat-select\n                          [ngModel]=\"comparisonPeriodPresetValue()\"\n                          (ngModelChange)=\"setComparisonPeriodPreset($event)\"\n                          [disabled]=\"isReadonly()\"\n                        >\n                          @for (preset of comparisonPeriodPresets; track preset) {\n                            <mat-option [value]=\"preset\">\n                              {{ t('praxis.charts.editor.comparisonPreset.' + preset, preset) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonMode', 'Comparison mode') }}</mat-label>\n                        <mat-select\n                          [ngModel]=\"comparisonPeriodModeValue()\"\n                          (ngModelChange)=\"setComparisonPeriodMode($event)\"\n                          [disabled]=\"isReadonly()\"\n                        >\n                          @for (mode of comparisonPeriodModes; track mode) {\n                            <mat-option [value]=\"mode\">\n                              {{ t('praxis.charts.editor.comparisonMode.' + mode, mode) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n                    </mat-card-content>\n                  </mat-card>\n                }\n              </div>\n            }\n\n            @case ('motion') {\n              <div class=\"editor-grid\">\n                <mat-slide-toggle\n                  [ngModel]=\"normalizedDocument().motion?.enabled !== false\"\n                  (ngModelChange)=\"setMotionEnabled($event)\"\n                  [disabled]=\"isReadonly()\"\n                >\n                  {{ t('praxis.charts.editor.field.motionEnabled', 'Enable animations') }}\n                </mat-slide-toggle>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.motionPreset', 'Motion preset') }}</mat-label>\n                  <mat-select\n                    [ngModel]=\"normalizedDocument().motion?.preset || 'standard'\"\n                    (ngModelChange)=\"setMotionPreset($event)\"\n                    [disabled]=\"isReadonly() || normalizedDocument().motion?.enabled === false\"\n                  >\n                    @for (preset of motionPresets; track preset) {\n                      <mat-option [value]=\"preset\">\n                        {{ t('praxis.charts.editor.motionPreset.' + preset, preset) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n              </div>\n            }\n\n            @case ('appearance') {\n              <div class=\"editor-stack\">\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.featuresTitle', 'Display features') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('legend')\"\n                      (ngModelChange)=\"setFeatureEnabled('legend', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.legendEnabled', 'Show legend') }}\n                    </mat-slide-toggle>\n\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('labels')\"\n                      (ngModelChange)=\"setFeatureEnabled('labels', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.labelsEnabled', 'Show labels') }}\n                    </mat-slide-toggle>\n\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('tooltip')\"\n                      (ngModelChange)=\"setFeatureEnabled('tooltip', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.tooltipEnabled', 'Show tooltip') }}\n                    </mat-slide-toggle>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.paletteTitle', 'Palette') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.themeVariant', 'Theme variant') }}</mat-label>\n                      <mat-select [ngModel]=\"themeVariantValue()\" (ngModelChange)=\"setThemeVariant($event)\" [disabled]=\"isReadonly()\">\n                        <mat-option [value]=\"''\">\n                          {{ t('praxis.charts.editor.themeVariant.none', 'No variant') }}\n                        </mat-option>\n                        @for (variant of themeVariants; track variant) {\n                          <mat-option [value]=\"variant\">\n                            {{ t('praxis.charts.editor.themeVariant.' + variant, variant) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.paletteMode', 'Palette mode') }}</mat-label>\n                      <mat-select [ngModel]=\"paletteModeValue()\" (ngModelChange)=\"setPaletteMode($event)\" [disabled]=\"isReadonly()\">\n                        @for (mode of paletteModes; track mode) {\n                          <mat-option [value]=\"mode\">\n                            {{ t('praxis.charts.editor.paletteMode.' + mode, mode) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    @if (paletteModeValue() === 'token') {\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.paletteToken', 'Palette token') }}</mat-label>\n                        <mat-select [ngModel]=\"paletteTokenValue()\" (ngModelChange)=\"setPaletteToken($event)\" [disabled]=\"isReadonly()\">\n                          @for (token of paletteTokens; track token) {\n                            <mat-option [value]=\"token\">\n                              {{ t('praxis.charts.editor.paletteToken.' + token, token) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n                    } @else {\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.palette', 'Palette colors') }}</mat-label>\n                        <textarea\n                          matInput\n                          rows=\"3\"\n                          [ngModel]=\"paletteValue()\"\n                          (ngModelChange)=\"setPalette($event)\"\n                          [disabled]=\"isReadonly()\"\n                        ></textarea>\n                      </mat-form-field>\n                    }\n\n                    <p class=\"editor-caption\">\n                      {{ t('praxis.charts.editor.appearance.paletteHint', 'Use a registered token or comma-separated colors to persist theme.palette in the canonical contract.') }}\n                    </p>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.surfaceTitle', 'Surface') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content>\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.surfaceMode', 'Surface mode') }}</mat-label>\n                      <mat-select [ngModel]=\"surfaceModeValue()\" (ngModelChange)=\"setSurfaceMode($event)\" [disabled]=\"isReadonly()\">\n                        @for (mode of surfaceModes; track mode) {\n                          <mat-option [value]=\"mode\">\n                            {{ t('praxis.charts.editor.surface.' + mode, mode) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                    <p class=\"editor-caption\">\n                      {{ t('praxis.charts.editor.appearance.surfaceHint', 'Use embedded for dashboard widgets and contained only when the chart must own its visual surface.') }}\n                    </p>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.statesTitle', 'State messages') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.emptyTitle', 'Empty title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('empty')\" (ngModelChange)=\"setStateTitle('empty', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.emptyDescription', 'Empty description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('empty')\" (ngModelChange)=\"setStateDescription('empty', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.loadingTitle', 'Loading title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('loading')\" (ngModelChange)=\"setStateTitle('loading', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.loadingDescription', 'Loading description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('loading')\" (ngModelChange)=\"setStateDescription('loading', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.errorTitle', 'Error title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('error')\" (ngModelChange)=\"setStateTitle('error', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.errorDescription', 'Error description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('error')\" (ngModelChange)=\"setStateDescription('error', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('analytics') {\n              <div class=\"editor-stack\">\n                @if (showGaugePanel()) {\n                  <mat-card class=\"editor-card\" data-testid=\"chart-editor-gauge-scale\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.gaugeTitle', 'Gauge scale') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-stack\">\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.gaugeHint', 'Gauge charts render exactly one bucket and one metric. Remote stats use group-by with limit 1; values outside the scale fail instead of being clamped.') }}\n                      </p>\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.gaugeMin', 'Scale minimum') }}</mat-label>\n                          <input\n                            matInput\n                            type=\"number\"\n                            data-testid=\"chart-editor-gauge-min\"\n                            [ngModel]=\"gaugeMinValue()\"\n                            (ngModelChange)=\"setGaugeMin($event)\"\n                            [disabled]=\"isReadonly()\"\n                          />\n                        </mat-form-field>\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.gaugeMax', 'Scale maximum') }}</mat-label>\n                          <input\n                            matInput\n                            type=\"number\"\n                            data-testid=\"chart-editor-gauge-max\"\n                            [ngModel]=\"gaugeMaxValue()\"\n                            (ngModelChange)=\"setGaugeMax($event)\"\n                            [disabled]=\"isReadonly()\"\n                          />\n                        </mat-form-field>\n                      </div>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showComboPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.comboTitle', 'Combo guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.comboHint', 'Combo charts require at least two metrics and allow per-metric axis and series kind mapping.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showPieDonutPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.pieDonutTitle', 'Composition guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.pieDonutHint', 'Pie, donut, funnel, pyramid and treemap charts keep one metric and use the first dimension as the category segment.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showScatterPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.scatterTitle', 'Scatter guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.scatterHint', 'With one metric, scatter uses the first dimension as X and the metric as Y. With two metrics, the dimension identifies the grouped bucket and the metrics map to X and Y.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.analytics.dimensionsTitle', 'Dimensions') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    @for (dimension of dimensions(); track $index) {\n                      <div class=\"editor-row-card\" [attr.data-testid]=\"'chart-editor-dimension-row-' + $index\">\n                        <div class=\"editor-grid\">\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-dimension-field-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.dimension', 'Dimension') }}</mat-label>\n                            @if (fieldOptions('dimension').length) {\n                              <mat-select [ngModel]=\"dimension.field || ''\" (ngModelChange)=\"setDimensionField($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (field of fieldOptions('dimension'); track field.field) {\n                                  <mat-option [value]=\"field.field\">{{ fieldOptionLabel(field) }}</mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <mat-select [ngModel]=\"dimension.field || ''\" (ngModelChange)=\"setDimensionField($index, $event)\" [disabled]=\"true\"></mat-select>\n                              <mat-hint>{{ t('praxis.charts.editor.catalog.dimensionFieldsMissing', 'No governed dimensions are available for the current resource and operation.') }}</mat-hint>\n                            }\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-dimension-role-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.dimensionRole', 'Dimension role') }}</mat-label>\n                            <mat-select [ngModel]=\"dimension.role || 'category'\" (ngModelChange)=\"setDimensionRole($index, $event)\" [disabled]=\"isReadonly()\">\n                              @for (role of dimensionRoles; track role) {\n                                <mat-option [value]=\"role\">\n                                  {{ t('praxis.charts.editor.dimensionRole.' + role, role) }}\n                                </mat-option>\n                              }\n                            </mat-select>\n                          </mat-form-field>\n                        </div>\n\n                        <div class=\"editor-row-actions\">\n                          <button mat-button type=\"button\" (click)=\"removeDimension($index)\" [disabled]=\"isReadonly() || dimensions().length <= 1\">\n                            {{ t('praxis.charts.editor.analytics.removeDimension', 'Remove dimension') }}\n                          </button>\n                        </div>\n                      </div>\n                    }\n\n                    <div>\n                      <button mat-stroked-button type=\"button\" data-testid=\"chart-editor-add-dimension\" (click)=\"addDimension()\" [disabled]=\"isReadonly()\">\n                        {{ t('praxis.charts.editor.analytics.addDimension', 'Add dimension') }}\n                      </button>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.analytics.metricsTitle', 'Metrics') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    @for (metric of metrics(); track $index) {\n                      <div class=\"editor-row-card\" [attr.data-testid]=\"'chart-editor-metric-row-' + $index\">\n                        <div class=\"editor-grid\">\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-field-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metric', 'Metric') }}</mat-label>\n                            @if (fieldOptions('metric').length) {\n                              <mat-select [ngModel]=\"metric.field || ''\" (ngModelChange)=\"setMetricField($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (field of fieldOptions('metric'); track field.field) {\n                                  <mat-option [value]=\"field.field\">{{ fieldOptionLabel(field) }}</mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <mat-select [ngModel]=\"metric.field || ''\" (ngModelChange)=\"setMetricField($index, $event)\" [disabled]=\"true\"></mat-select>\n                              <mat-hint>{{ t('praxis.charts.editor.catalog.metricFieldsMissing', 'No governed metrics are available for the current resource and operation.') }}</mat-hint>\n                            }\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-label-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metricLabel', 'Metric label') }}</mat-label>\n                            <input matInput [ngModel]=\"metric.label || ''\" (ngModelChange)=\"setMetricLabel($index, $event)\" [disabled]=\"isReadonly()\" />\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-aggregation-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metricAggregation', 'Aggregation') }}</mat-label>\n                            <mat-select [ngModel]=\"metric.aggregation || 'sum'\" (ngModelChange)=\"setMetricAggregation($index, $event)\" [disabled]=\"isReadonly()\">\n                              @for (aggregation of metricAggregationOptions(metric.field); track aggregation) {\n                                <mat-option [value]=\"aggregation\">\n                                  {{ t('praxis.charts.editor.metricAggregation.' + aggregation, aggregation) }}\n                                </mat-option>\n                              }\n                            </mat-select>\n                          </mat-form-field>\n\n                          @if (showMetricAxisControls()) {\n                            <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-axis-' + $index\">\n                              <mat-label>{{ t('praxis.charts.editor.field.metricAxis', 'Axis') }}</mat-label>\n                              <mat-select [ngModel]=\"metric.axis || 'primary'\" (ngModelChange)=\"setMetricAxis($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (axis of metricAxes; track axis) {\n                                  <mat-option [value]=\"axis\">\n                                    {{ t('praxis.charts.editor.metricAxis.' + axis, axis) }}\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            </mat-form-field>\n                          }\n\n                          @if (showMetricSeriesKindControls()) {\n                            <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-series-kind-' + $index\">\n                              <mat-label>{{ t('praxis.charts.editor.field.metricSeriesKind', 'Series kind') }}</mat-label>\n                              <mat-select [ngModel]=\"metric.seriesKind || 'bar'\" (ngModelChange)=\"setMetricSeriesKind($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (seriesKind of metricSeriesKinds; track seriesKind) {\n                                  <mat-option [value]=\"seriesKind\">\n                                    {{ t('praxis.charts.editor.metricSeriesKind.' + seriesKind, seriesKind) }}\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            </mat-form-field>\n                          }\n                        </div>\n\n                        <div class=\"editor-row-actions\">\n                          <button mat-button type=\"button\" [attr.data-testid]=\"'chart-editor-remove-metric-' + $index\" (click)=\"removeMetric($index)\" [disabled]=\"isReadonly() || metrics().length <= 1\">\n                            {{ t('praxis.charts.editor.analytics.removeMetric', 'Remove metric') }}\n                          </button>\n                        </div>\n                      </div>\n                    }\n\n                    <div>\n                      <button mat-stroked-button type=\"button\" data-testid=\"chart-editor-add-metric\" (click)=\"addMetric()\" [disabled]=\"isReadonly() || !canAddMetric()\">\n                        {{ t('praxis.charts.editor.analytics.addMetric', 'Add metric') }}\n                      </button>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('events') {\n              <div class=\"editor-stack\">\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-pointClick\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.pointClickTitle', 'Point click') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-pointClick-action\" [ngModel]=\"eventAction('pointClick')\" (ngModelChange)=\"setEventAction('pointClick', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-pointClick-target\" [ngModel]=\"eventTarget('pointClick')\" (ngModelChange)=\"setEventTarget('pointClick', $event)\" [disabled]=\"isReadonly() || !eventAction('pointClick') || targetCatalogUnavailable(eventAction('pointClick'), 'pointClick')\">\n                        @for (target of targetOptions(eventAction('pointClick'), 'pointClick'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('pointClick'), 'pointClick')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-pointClick-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('pointClick')\"\n                        (ngModelChange)=\"setEventMapping('pointClick', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('pointClick')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-selectionChange\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.selectionChangeTitle', 'Selection change') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-selectionChange-action\" [ngModel]=\"eventAction('selectionChange')\" (ngModelChange)=\"setEventAction('selectionChange', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-selectionChange-target\" [ngModel]=\"eventTarget('selectionChange')\" (ngModelChange)=\"setEventTarget('selectionChange', $event)\" [disabled]=\"isReadonly() || !eventAction('selectionChange') || targetCatalogUnavailable(eventAction('selectionChange'), 'selectionChange')\">\n                        @for (target of targetOptions(eventAction('selectionChange'), 'selectionChange'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('selectionChange'), 'selectionChange')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-selectionChange-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('selectionChange')\"\n                        (ngModelChange)=\"setEventMapping('selectionChange', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('selectionChange')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-drillDown\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.drillDownTitle', 'Drill down') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-drillDown-action\" [ngModel]=\"eventAction('drillDown')\" (ngModelChange)=\"setEventAction('drillDown', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-drillDown-target\" [ngModel]=\"eventTarget('drillDown')\" (ngModelChange)=\"setEventTarget('drillDown', $event)\" [disabled]=\"isReadonly() || !eventAction('drillDown') || targetCatalogUnavailable(eventAction('drillDown'), 'drillDown')\">\n                        @for (target of targetOptions(eventAction('drillDown'), 'drillDown'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('drillDown'), 'drillDown')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-drillDown-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('drillDown')\"\n                        (ngModelChange)=\"setEventMapping('drillDown', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('drillDown')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-crossFilter\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.crossFilterTitle', 'Cross filter') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-crossFilter-action\" [ngModel]=\"eventAction('crossFilter')\" (ngModelChange)=\"setEventAction('crossFilter', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-crossFilter-target\" [ngModel]=\"eventTarget('crossFilter')\" (ngModelChange)=\"setEventTarget('crossFilter', $event)\" [disabled]=\"isReadonly() || !eventAction('crossFilter') || targetCatalogUnavailable(eventAction('crossFilter'), 'crossFilter')\">\n                        @for (target of targetOptions(eventAction('crossFilter'), 'crossFilter'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('crossFilter'), 'crossFilter')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-crossFilter-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('crossFilter')\"\n                        (ngModelChange)=\"setEventMapping('crossFilter', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('crossFilter')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('preview') {\n              <p class=\"editor-caption\">\n                {{ t('praxis.charts.editor.preview.caption', 'Local preview derived from the canonical contract without remote calls.') }}\n              </p>\n            }\n          }\n        </mat-card-content>\n      </mat-card>\n    </div>\n\n    <div class=\"editor-side\">\n      <mat-card class=\"editor-card\">\n        <mat-card-header>\n          <mat-card-title>{{ t('praxis.charts.editor.issues.title', 'Validation issues') }}</mat-card-title>\n        </mat-card-header>\n        <mat-card-content>\n          @if (issues().length) {\n            <ul class=\"editor-issues\">\n              @for (issue of issues(); track issueTrackBy($index, issue)) {\n                <li class=\"editor-issue\">\n                  <strong>{{ issue.field }}</strong>\n                  <span>{{ issue.message }}</span>\n                </li>\n              }\n            </ul>\n          } @else {\n            <div class=\"editor-empty\">\n              {{ t('praxis.charts.editor.issues.empty', 'No issues were identified.') }}\n            </div>\n          }\n        </mat-card-content>\n      </mat-card>\n\n      <mat-card class=\"editor-card\">\n        <mat-card-header>\n          <mat-card-title>{{ t('praxis.charts.editor.preview.title', 'Chart preview') }}</mat-card-title>\n        </mat-card-header>\n        <mat-card-content>\n          @if (preview(); as chartPreview) {\n            <p class=\"editor-caption\">\n              {{ t('praxis.charts.editor.preview.caption', 'Local preview derived from the canonical contract without remote calls.') }}\n            </p>\n            <praxis-chart [config]=\"chartPreview.config\" [data]=\"chartPreview.data\"></praxis-chart>\n          } @else {\n            <div class=\"editor-empty\">\n              {{ t('praxis.charts.editor.preview.invalid', 'Preview is unavailable while the contract has blocking errors.') }}\n            </div>\n          }\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;min-width:0;container:praxis-chart-editor / inline-size;color:var(--md-sys-color-on-surface, #1a1b20)}.editor-shell{display:grid;gap:18px;min-width:0}.editor-nav{display:flex;gap:8px;flex-wrap:wrap}.editor-nav button.active{background:color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 18%,transparent);color:var(--md-sys-color-primary, #1263b4)}.editor-layout{display:grid;gap:18px;grid-template-columns:minmax(0,1.35fr) minmax(320px,.9fr);align-items:start}.editor-form,.editor-side{display:grid;gap:16px;min-width:0}.editor-card{box-sizing:border-box;width:100%;min-width:0;border-radius:20px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 72%,transparent);background:linear-gradient(180deg,#1263b408,#1263b400)}.editor-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.editor-stack{display:grid;gap:14px}.editor-row-card{padding:14px;border-radius:16px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 54%,transparent);background:color-mix(in srgb,var(--md-sys-color-surface, #fff) 92%,rgba(18,99,180,.04))}.editor-row-actions{display:flex;justify-content:flex-end}.editor-field{width:100%}.editor-issues{display:grid;gap:10px;margin:0;padding:0;list-style:none}.editor-issue{padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--md-sys-color-error, #b3261e) 8%,transparent);border:1px solid color-mix(in srgb,var(--md-sys-color-error, #b3261e) 18%,transparent)}.editor-issue strong{display:block;margin-bottom:4px}.editor-caption{margin:0 0 12px;color:var(--md-sys-color-on-surface-variant, #5a5d67);font-size:.92rem}.editor-empty{padding:18px;border-radius:14px;background:color-mix(in srgb,var(--md-sys-color-surface-variant, #eceff4) 78%,transparent)}.editor-side praxis-chart{display:block;width:100%;min-width:0;max-width:100%}@container praxis-chart-editor (max-width: 840px){.editor-layout{grid-template-columns:minmax(0,1fr)}}@media(max-width:960px){.editor-layout{grid-template-columns:minmax(0,1fr)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: PraxisChartComponent, selector: "praxis-chart", inputs: ["config", "data", "chartDocument", "filterCriteria", "queryContext", "remoteDataResolver", "enableCustomization", "availableResources", "availableFields", "availableTargets"], outputs: ["pointClick", "pointAction", "selectionChange", "drillDown", "crossFilter", "queryRequest", "loadStateChange", "chartDocumentApplied", "chartDocumentSaved"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisChartConfigEditor, isStandalone: true, selector: "praxis-chart-config-editor", inputs: { documentInput: { classPropertyName: "documentInput", publicName: "document", isSignal: true, isRequired: false, transformFunction: null }, modeInput: { classPropertyName: "modeInput", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, availableResourcesInput: { classPropertyName: "availableResourcesInput", publicName: "availableResources", isSignal: true, isRequired: false, transformFunction: null }, availableFieldsInput: { classPropertyName: "availableFieldsInput", publicName: "availableFields", isSignal: true, isRequired: false, transformFunction: null }, availableTargetsInput: { classPropertyName: "availableTargetsInput", publicName: "availableTargets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply", save: "save", resetChange: "resetChange", documentChange: "documentChange" }, providers: [providePraxisChartsI18n()], ngImport: i0, template: "<div class=\"editor-shell\">\n  <div class=\"editor-nav\">\n    @for (section of sections; track section.id) {\n      <button\n        mat-stroked-button\n        type=\"button\"\n        [attr.data-testid]=\"'chart-editor-section-' + section.id\"\n        [class.active]=\"activeSection() === section.id\"\n        (click)=\"setSection(section.id)\"\n      >\n        {{ t(section.labelKey, section.fallback) }}\n      </button>\n    }\n  </div>\n\n  <div class=\"editor-layout\">\n    <div class=\"editor-form\">\n      <mat-card class=\"editor-card\">\n        <mat-card-content>\n          @switch (activeSection()) {\n            @case ('general') {\n              <div class=\"editor-grid\">\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.chartId', 'Chart ID') }}</mat-label>\n                  <input matInput [ngModel]=\"doc().chartId || ''\" (ngModelChange)=\"setChartId($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.kind', 'Kind') }}</mat-label>\n                  <mat-select [ngModel]=\"doc().kind\" (ngModelChange)=\"setKind($event)\" [disabled]=\"isReadonly()\">\n                    @for (kind of chartKinds; track kind) {\n                      <mat-option [value]=\"kind\">\n                        {{ t('praxis.charts.editor.kind.' + kind, kind) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.title', 'Title') }}</mat-label>\n                  <input matInput data-testid=\"chart-editor-title-input\" [ngModel]=\"titleValue()\" (ngModelChange)=\"setTitle($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.subtitle', 'Subtitle') }}</mat-label>\n                  <input matInput [ngModel]=\"subtitleValue()\" (ngModelChange)=\"setSubtitle($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.sizingMode', 'Sizing') }}</mat-label>\n                  <mat-select [ngModel]=\"sizingModeValue()\" (ngModelChange)=\"setSizingMode($event)\" [disabled]=\"isReadonly()\">\n                    @for (mode of sizingModes; track mode) {\n                      <mat-option [value]=\"mode\">\n                        {{ t('praxis.charts.editor.sizing.' + mode, mode) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                  <mat-hint>{{ t('praxis.charts.editor.hint.sizingMode', 'Use fill-container only when the host widget provides a defined body height.') }}</mat-hint>\n                </mat-form-field>\n\n                @if (sizingModeValue() === 'fixed') {\n                  <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                    <mat-label>{{ t('praxis.charts.editor.field.height', 'Height') }}</mat-label>\n                    <input matInput [ngModel]=\"heightValue()\" (ngModelChange)=\"setSizingHeight($event)\" [disabled]=\"isReadonly()\" />\n                    <mat-hint>{{ t('praxis.charts.editor.hint.height', 'Numbers are saved as pixels; CSS lengths such as 20rem are also accepted.') }}</mat-hint>\n                  </mat-form-field>\n                }\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.minHeight', 'Minimum height') }}</mat-label>\n                  <input matInput [ngModel]=\"sizingMinHeightValue()\" (ngModelChange)=\"setSizingMinHeight($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.minHeight', 'Set a readable minimum for compact dashboard widgets.') }}</mat-hint>\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.maxHeight', 'Maximum height') }}</mat-label>\n                  <input matInput [ngModel]=\"sizingMaxHeightValue()\" (ngModelChange)=\"setSizingMaxHeight($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.maxHeight', 'Leave empty unless the chart must stop growing inside a flexible layout.') }}</mat-hint>\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.aspectRatio', 'Aspect ratio') }}</mat-label>\n                  <input matInput [ngModel]=\"sizingAspectRatioValue()\" (ngModelChange)=\"setSizingAspectRatio($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.aspectRatio', 'Optional. Use values such as 1.777 or 16 / 9.') }}</mat-hint>\n                </mat-form-field>\n              </div>\n            }\n\n            @case ('data') {\n              <div class=\"editor-stack\">\n                <div class=\"editor-grid\">\n                  <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                    <mat-label>{{ t('praxis.charts.editor.field.sourceKind', 'Source') }}</mat-label>\n                    <mat-select data-testid=\"chart-editor-source-kind\" [ngModel]=\"doc().source.kind\" (ngModelChange)=\"setSourceKind($event)\" [disabled]=\"isReadonly()\">\n                      @for (sourceKind of sourceKinds; track sourceKind) {\n                        <mat-option [value]=\"sourceKind\">\n                          {{ t('praxis.charts.editor.sourceKind.' + (sourceKind === 'praxis.stats' ? 'praxisStats' : 'derived'), sourceKind) }}\n                        </mat-option>\n                      }\n                    </mat-select>\n                  </mat-form-field>\n\n                  @if (doc().source.kind === 'praxis.stats') {\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.resource', 'Resource') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-resource\" [ngModel]=\"resourceValue()\" (ngModelChange)=\"setResource($event)\" [disabled]=\"isReadonly() || resourceCatalogUnavailable()\">\n                        @for (resource of resourceOptions(); track resource.id) {\n                          <mat-option [value]=\"resource.path\">{{ resource.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (resourceCatalogUnavailable()) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.resourceMissing', 'Resource catalog is required for governed praxis.stats authoring.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.operation', 'Operation') }}</mat-label>\n                      <mat-select\n                        data-testid=\"chart-editor-operation\"\n                        [ngModel]=\"doc().source.operation || 'group-by'\"\n                        (ngModelChange)=\"setOperation($event)\"\n                        [disabled]=\"isReadonly() || operationCatalogUnavailable()\"\n                      >\n                        @for (operation of operationOptions(); track operation) {\n                          <mat-option [value]=\"operation\">\n                            {{ t('praxis.charts.editor.operation.' + (operation === 'group-by' ? 'groupBy' : operation), operation) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                      @if (operationCatalogUnavailable()) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.operationMissing', 'Selected resource does not publish authorable stats operations.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n                  }\n                </div>\n\n                @if (showTimeseriesControls()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.timeseriesTitle', 'Timeseries options') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.granularity', 'Granularity') }}</mat-label>\n                        <mat-select [ngModel]=\"granularityValue()\" (ngModelChange)=\"setGranularity($event)\" [disabled]=\"isReadonly()\">\n                          @for (granularity of timeGranularities; track granularity) {\n                            <mat-option [value]=\"granularity\">\n                              {{ t('praxis.charts.editor.granularity.' + granularity, granularity) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      <mat-slide-toggle\n                        [ngModel]=\"fillGapsValue()\"\n                        (ngModelChange)=\"setFillGaps($event)\"\n                        [disabled]=\"isReadonly()\"\n                      >\n                        {{ t('praxis.charts.editor.field.fillGaps', 'Fill missing intervals') }}\n                      </mat-slide-toggle>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showDistributionControls()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.distributionTitle', 'Distribution options') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.distributionMode', 'Distribution mode') }}</mat-label>\n                        <mat-select data-testid=\"chart-editor-distribution-mode\" [ngModel]=\"distributionModeValue()\" (ngModelChange)=\"setDistributionMode($event)\" [disabled]=\"isReadonly()\">\n                          @for (mode of distributionModes; track mode) {\n                            <mat-option [value]=\"mode\">\n                              {{ t('praxis.charts.editor.distributionMode.' + mode, mode) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      @if (distributionModeValue() === 'histogram') {\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.bucketSize', 'Bucket size') }}</mat-label>\n                          <input matInput data-testid=\"chart-editor-bucket-size\" [ngModel]=\"bucketSizeValue()\" (ngModelChange)=\"setBucketSize($event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.bucketCount', 'Bucket count') }}</mat-label>\n                          <input matInput data-testid=\"chart-editor-bucket-count\" [ngModel]=\"bucketCountValue()\" (ngModelChange)=\"setBucketCount($event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n                      }\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showComparisonControls()) {\n                  <mat-card class=\"editor-card\" data-testid=\"chart-editor-comparison-options\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.comparisonTitle', 'Comparison period') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonPeriodField', 'Period field') }}</mat-label>\n                        @if (fieldOptions('time').length) {\n                          <mat-select\n                            [ngModel]=\"comparisonPeriodFieldValue()\"\n                            (ngModelChange)=\"setComparisonPeriodField($event)\"\n                            [disabled]=\"isReadonly()\"\n                          >\n                            @for (field of fieldOptions('time'); track field.field) {\n                              <mat-option [value]=\"field.field\">{{ field.label || field.field }}</mat-option>\n                            }\n                          </mat-select>\n                        } @else {\n                          <mat-select [ngModel]=\"comparisonPeriodFieldValue()\" [disabled]=\"true\"></mat-select>\n                          <mat-hint>{{ t('praxis.charts.editor.catalog.comparisonPeriodFieldsMissing', 'No governed time-series field is available for comparison periods.') }}</mat-hint>\n                        }\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonTimezone', 'Timezone') }}</mat-label>\n                        <input\n                          matInput\n                          [ngModel]=\"comparisonPeriodTimezoneValue()\"\n                          (ngModelChange)=\"setComparisonPeriodTimezone($event)\"\n                          [disabled]=\"isReadonly()\"\n                        />\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonPreset', 'Period preset') }}</mat-label>\n                        <mat-select\n                          [ngModel]=\"comparisonPeriodPresetValue()\"\n                          (ngModelChange)=\"setComparisonPeriodPreset($event)\"\n                          [disabled]=\"isReadonly()\"\n                        >\n                          @for (preset of comparisonPeriodPresets; track preset) {\n                            <mat-option [value]=\"preset\">\n                              {{ t('praxis.charts.editor.comparisonPreset.' + preset, preset) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonMode', 'Comparison mode') }}</mat-label>\n                        <mat-select\n                          [ngModel]=\"comparisonPeriodModeValue()\"\n                          (ngModelChange)=\"setComparisonPeriodMode($event)\"\n                          [disabled]=\"isReadonly()\"\n                        >\n                          @for (mode of comparisonPeriodModes; track mode) {\n                            <mat-option [value]=\"mode\">\n                              {{ t('praxis.charts.editor.comparisonMode.' + mode, mode) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n                    </mat-card-content>\n                  </mat-card>\n                }\n              </div>\n            }\n\n            @case ('motion') {\n              <div class=\"editor-grid\">\n                <mat-slide-toggle\n                  [ngModel]=\"normalizedDocument().motion?.enabled !== false\"\n                  (ngModelChange)=\"setMotionEnabled($event)\"\n                  [disabled]=\"isReadonly()\"\n                >\n                  {{ t('praxis.charts.editor.field.motionEnabled', 'Enable animations') }}\n                </mat-slide-toggle>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.motionPreset', 'Motion preset') }}</mat-label>\n                  <mat-select\n                    [ngModel]=\"normalizedDocument().motion?.preset || 'standard'\"\n                    (ngModelChange)=\"setMotionPreset($event)\"\n                    [disabled]=\"isReadonly() || normalizedDocument().motion?.enabled === false\"\n                  >\n                    @for (preset of motionPresets; track preset) {\n                      <mat-option [value]=\"preset\">\n                        {{ t('praxis.charts.editor.motionPreset.' + preset, preset) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n              </div>\n            }\n\n            @case ('appearance') {\n              <div class=\"editor-stack\">\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.featuresTitle', 'Display features') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('legend')\"\n                      (ngModelChange)=\"setFeatureEnabled('legend', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.legendEnabled', 'Show legend') }}\n                    </mat-slide-toggle>\n\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('labels')\"\n                      (ngModelChange)=\"setFeatureEnabled('labels', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.labelsEnabled', 'Show labels') }}\n                    </mat-slide-toggle>\n\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('tooltip')\"\n                      (ngModelChange)=\"setFeatureEnabled('tooltip', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.tooltipEnabled', 'Show tooltip') }}\n                    </mat-slide-toggle>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.paletteTitle', 'Palette') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.themeVariant', 'Theme variant') }}</mat-label>\n                      <mat-select [ngModel]=\"themeVariantValue()\" (ngModelChange)=\"setThemeVariant($event)\" [disabled]=\"isReadonly()\">\n                        <mat-option [value]=\"''\">\n                          {{ t('praxis.charts.editor.themeVariant.none', 'No variant') }}\n                        </mat-option>\n                        @for (variant of themeVariants; track variant) {\n                          <mat-option [value]=\"variant\">\n                            {{ t('praxis.charts.editor.themeVariant.' + variant, variant) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.paletteMode', 'Palette mode') }}</mat-label>\n                      <mat-select [ngModel]=\"paletteModeValue()\" (ngModelChange)=\"setPaletteMode($event)\" [disabled]=\"isReadonly()\">\n                        @for (mode of paletteModes; track mode) {\n                          <mat-option [value]=\"mode\">\n                            {{ t('praxis.charts.editor.paletteMode.' + mode, mode) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    @if (paletteModeValue() === 'token') {\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.paletteToken', 'Palette token') }}</mat-label>\n                        <mat-select [ngModel]=\"paletteTokenValue()\" (ngModelChange)=\"setPaletteToken($event)\" [disabled]=\"isReadonly()\">\n                          @for (token of paletteTokens; track token) {\n                            <mat-option [value]=\"token\">\n                              {{ t('praxis.charts.editor.paletteToken.' + token, token) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n                    } @else {\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.palette', 'Palette colors') }}</mat-label>\n                        <textarea\n                          matInput\n                          rows=\"3\"\n                          [ngModel]=\"paletteValue()\"\n                          (ngModelChange)=\"setPalette($event)\"\n                          [disabled]=\"isReadonly()\"\n                        ></textarea>\n                      </mat-form-field>\n                    }\n\n                    <p class=\"editor-caption\">\n                      {{ t('praxis.charts.editor.appearance.paletteHint', 'Use a registered token or comma-separated colors to persist theme.palette in the canonical contract.') }}\n                    </p>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.surfaceTitle', 'Surface') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content>\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.surfaceMode', 'Surface mode') }}</mat-label>\n                      <mat-select [ngModel]=\"surfaceModeValue()\" (ngModelChange)=\"setSurfaceMode($event)\" [disabled]=\"isReadonly()\">\n                        @for (mode of surfaceModes; track mode) {\n                          <mat-option [value]=\"mode\">\n                            {{ t('praxis.charts.editor.surface.' + mode, mode) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                    <p class=\"editor-caption\">\n                      {{ t('praxis.charts.editor.appearance.surfaceHint', 'Use embedded for dashboard widgets and contained only when the chart must own its visual surface.') }}\n                    </p>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.statesTitle', 'State messages') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.emptyTitle', 'Empty title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('empty')\" (ngModelChange)=\"setStateTitle('empty', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.emptyDescription', 'Empty description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('empty')\" (ngModelChange)=\"setStateDescription('empty', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.loadingTitle', 'Loading title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('loading')\" (ngModelChange)=\"setStateTitle('loading', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.loadingDescription', 'Loading description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('loading')\" (ngModelChange)=\"setStateDescription('loading', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.errorTitle', 'Error title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('error')\" (ngModelChange)=\"setStateTitle('error', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.errorDescription', 'Error description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('error')\" (ngModelChange)=\"setStateDescription('error', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('analytics') {\n              <div class=\"editor-stack\">\n                @if (showGaugePanel()) {\n                  <mat-card class=\"editor-card\" data-testid=\"chart-editor-gauge-scale\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.gaugeTitle', 'Gauge scale') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-stack\">\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.gaugeHint', 'Gauge charts render exactly one bucket and one metric. Remote stats use group-by with limit 1; values outside the scale fail instead of being clamped.') }}\n                      </p>\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.gaugeMin', 'Scale minimum') }}</mat-label>\n                          <input\n                            matInput\n                            type=\"number\"\n                            data-testid=\"chart-editor-gauge-min\"\n                            [ngModel]=\"gaugeMinValue()\"\n                            (ngModelChange)=\"setGaugeMin($event)\"\n                            [disabled]=\"isReadonly()\"\n                          />\n                        </mat-form-field>\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.gaugeMax', 'Scale maximum') }}</mat-label>\n                          <input\n                            matInput\n                            type=\"number\"\n                            data-testid=\"chart-editor-gauge-max\"\n                            [ngModel]=\"gaugeMaxValue()\"\n                            (ngModelChange)=\"setGaugeMax($event)\"\n                            [disabled]=\"isReadonly()\"\n                          />\n                        </mat-form-field>\n                      </div>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showComboPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.comboTitle', 'Combo guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.comboHint', 'Combo charts require at least two metrics and allow per-metric axis and series kind mapping.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showPieDonutPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.pieDonutTitle', 'Composition guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.pieDonutHint', 'Pie, donut, funnel, pyramid and treemap charts keep one metric and use the first dimension as the category segment.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showScatterPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.scatterTitle', 'Scatter guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.scatterHint', 'With one metric, scatter uses the first dimension as X and the metric as Y. With two metrics, the dimension identifies the grouped bucket and the metrics map to X and Y.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.analytics.dimensionsTitle', 'Dimensions') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    @for (dimension of dimensions(); track $index) {\n                      <div class=\"editor-row-card\" [attr.data-testid]=\"'chart-editor-dimension-row-' + $index\">\n                        <div class=\"editor-grid\">\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-dimension-field-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.dimension', 'Dimension') }}</mat-label>\n                            @if (fieldOptions('dimension').length) {\n                              <mat-select [ngModel]=\"dimension.field || ''\" (ngModelChange)=\"setDimensionField($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (field of fieldOptions('dimension'); track field.field) {\n                                  <mat-option [value]=\"field.field\">{{ fieldOptionLabel(field) }}</mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <mat-select [ngModel]=\"dimension.field || ''\" (ngModelChange)=\"setDimensionField($index, $event)\" [disabled]=\"true\"></mat-select>\n                              <mat-hint>{{ t('praxis.charts.editor.catalog.dimensionFieldsMissing', 'No governed dimensions are available for the current resource and operation.') }}</mat-hint>\n                            }\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-dimension-role-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.dimensionRole', 'Dimension role') }}</mat-label>\n                            <mat-select [ngModel]=\"dimension.role || 'category'\" (ngModelChange)=\"setDimensionRole($index, $event)\" [disabled]=\"isReadonly()\">\n                              @for (role of dimensionRoles; track role) {\n                                <mat-option [value]=\"role\">\n                                  {{ t('praxis.charts.editor.dimensionRole.' + role, role) }}\n                                </mat-option>\n                              }\n                            </mat-select>\n                          </mat-form-field>\n                        </div>\n\n                        <div class=\"editor-row-actions\">\n                          <button mat-button type=\"button\" (click)=\"removeDimension($index)\" [disabled]=\"isReadonly() || dimensions().length <= 1\">\n                            {{ t('praxis.charts.editor.analytics.removeDimension', 'Remove dimension') }}\n                          </button>\n                        </div>\n                      </div>\n                    }\n\n                    <div>\n                      <button mat-stroked-button type=\"button\" data-testid=\"chart-editor-add-dimension\" (click)=\"addDimension()\" [disabled]=\"isReadonly()\">\n                        {{ t('praxis.charts.editor.analytics.addDimension', 'Add dimension') }}\n                      </button>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.analytics.metricsTitle', 'Metrics') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    @for (metric of metrics(); track $index) {\n                      <div class=\"editor-row-card\" [attr.data-testid]=\"'chart-editor-metric-row-' + $index\">\n                        <div class=\"editor-grid\">\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-field-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metric', 'Metric') }}</mat-label>\n                            @if (fieldOptions('metric').length) {\n                              <mat-select [ngModel]=\"metric.field || ''\" (ngModelChange)=\"setMetricField($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (field of fieldOptions('metric'); track field.field) {\n                                  <mat-option [value]=\"field.field\">{{ fieldOptionLabel(field) }}</mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <mat-select [ngModel]=\"metric.field || ''\" (ngModelChange)=\"setMetricField($index, $event)\" [disabled]=\"true\"></mat-select>\n                              <mat-hint>{{ t('praxis.charts.editor.catalog.metricFieldsMissing', 'No governed metrics are available for the current resource and operation.') }}</mat-hint>\n                            }\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-label-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metricLabel', 'Metric label') }}</mat-label>\n                            <input matInput [ngModel]=\"metric.label || ''\" (ngModelChange)=\"setMetricLabel($index, $event)\" [disabled]=\"isReadonly()\" />\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-aggregation-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metricAggregation', 'Aggregation') }}</mat-label>\n                            <mat-select [ngModel]=\"metric.aggregation || 'sum'\" (ngModelChange)=\"setMetricAggregation($index, $event)\" [disabled]=\"isReadonly()\">\n                              @for (aggregation of metricAggregationOptions(metric.field); track aggregation) {\n                                <mat-option [value]=\"aggregation\">\n                                  {{ t('praxis.charts.editor.metricAggregation.' + aggregation, aggregation) }}\n                                </mat-option>\n                              }\n                            </mat-select>\n                          </mat-form-field>\n\n                          @if (showMetricAxisControls()) {\n                            <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-axis-' + $index\">\n                              <mat-label>{{ t('praxis.charts.editor.field.metricAxis', 'Axis') }}</mat-label>\n                              <mat-select [ngModel]=\"metric.axis || 'primary'\" (ngModelChange)=\"setMetricAxis($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (axis of metricAxes; track axis) {\n                                  <mat-option [value]=\"axis\">\n                                    {{ t('praxis.charts.editor.metricAxis.' + axis, axis) }}\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            </mat-form-field>\n                          }\n\n                          @if (showMetricSeriesKindControls()) {\n                            <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-series-kind-' + $index\">\n                              <mat-label>{{ t('praxis.charts.editor.field.metricSeriesKind', 'Series kind') }}</mat-label>\n                              <mat-select [ngModel]=\"metric.seriesKind || 'bar'\" (ngModelChange)=\"setMetricSeriesKind($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (seriesKind of metricSeriesKinds; track seriesKind) {\n                                  <mat-option [value]=\"seriesKind\">\n                                    {{ t('praxis.charts.editor.metricSeriesKind.' + seriesKind, seriesKind) }}\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            </mat-form-field>\n                          }\n                        </div>\n\n                        <div class=\"editor-row-actions\">\n                          <button mat-button type=\"button\" [attr.data-testid]=\"'chart-editor-remove-metric-' + $index\" (click)=\"removeMetric($index)\" [disabled]=\"isReadonly() || metrics().length <= 1\">\n                            {{ t('praxis.charts.editor.analytics.removeMetric', 'Remove metric') }}\n                          </button>\n                        </div>\n                      </div>\n                    }\n\n                    <div>\n                      <button mat-stroked-button type=\"button\" data-testid=\"chart-editor-add-metric\" (click)=\"addMetric()\" [disabled]=\"isReadonly() || !canAddMetric()\">\n                        {{ t('praxis.charts.editor.analytics.addMetric', 'Add metric') }}\n                      </button>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('events') {\n              <div class=\"editor-stack\">\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-pointClick\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.pointClickTitle', 'Point click') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-pointClick-action\" [ngModel]=\"eventAction('pointClick')\" (ngModelChange)=\"setEventAction('pointClick', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-pointClick-target\" [ngModel]=\"eventTarget('pointClick')\" (ngModelChange)=\"setEventTarget('pointClick', $event)\" [disabled]=\"isReadonly() || !eventAction('pointClick') || targetCatalogUnavailable(eventAction('pointClick'), 'pointClick')\">\n                        @for (target of targetOptions(eventAction('pointClick'), 'pointClick'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('pointClick'), 'pointClick')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-pointClick-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('pointClick')\"\n                        (ngModelChange)=\"setEventMapping('pointClick', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('pointClick')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-selectionChange\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.selectionChangeTitle', 'Selection change') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-selectionChange-action\" [ngModel]=\"eventAction('selectionChange')\" (ngModelChange)=\"setEventAction('selectionChange', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-selectionChange-target\" [ngModel]=\"eventTarget('selectionChange')\" (ngModelChange)=\"setEventTarget('selectionChange', $event)\" [disabled]=\"isReadonly() || !eventAction('selectionChange') || targetCatalogUnavailable(eventAction('selectionChange'), 'selectionChange')\">\n                        @for (target of targetOptions(eventAction('selectionChange'), 'selectionChange'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('selectionChange'), 'selectionChange')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-selectionChange-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('selectionChange')\"\n                        (ngModelChange)=\"setEventMapping('selectionChange', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('selectionChange')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-drillDown\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.drillDownTitle', 'Drill down') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-drillDown-action\" [ngModel]=\"eventAction('drillDown')\" (ngModelChange)=\"setEventAction('drillDown', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-drillDown-target\" [ngModel]=\"eventTarget('drillDown')\" (ngModelChange)=\"setEventTarget('drillDown', $event)\" [disabled]=\"isReadonly() || !eventAction('drillDown') || targetCatalogUnavailable(eventAction('drillDown'), 'drillDown')\">\n                        @for (target of targetOptions(eventAction('drillDown'), 'drillDown'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('drillDown'), 'drillDown')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-drillDown-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('drillDown')\"\n                        (ngModelChange)=\"setEventMapping('drillDown', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('drillDown')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-crossFilter\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.crossFilterTitle', 'Cross filter') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-crossFilter-action\" [ngModel]=\"eventAction('crossFilter')\" (ngModelChange)=\"setEventAction('crossFilter', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-crossFilter-target\" [ngModel]=\"eventTarget('crossFilter')\" (ngModelChange)=\"setEventTarget('crossFilter', $event)\" [disabled]=\"isReadonly() || !eventAction('crossFilter') || targetCatalogUnavailable(eventAction('crossFilter'), 'crossFilter')\">\n                        @for (target of targetOptions(eventAction('crossFilter'), 'crossFilter'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('crossFilter'), 'crossFilter')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-crossFilter-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('crossFilter')\"\n                        (ngModelChange)=\"setEventMapping('crossFilter', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('crossFilter')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('preview') {\n              <p class=\"editor-caption\">\n                {{ t('praxis.charts.editor.preview.caption', 'Local preview derived from the canonical contract without remote calls.') }}\n              </p>\n            }\n          }\n        </mat-card-content>\n      </mat-card>\n    </div>\n\n    <div class=\"editor-side\">\n      <mat-card class=\"editor-card\">\n        <mat-card-header>\n          <mat-card-title>{{ t('praxis.charts.editor.issues.title', 'Validation issues') }}</mat-card-title>\n        </mat-card-header>\n        <mat-card-content>\n          @if (issues().length) {\n            <ul class=\"editor-issues\">\n              @for (issue of issues(); track issueTrackBy($index, issue)) {\n                <li class=\"editor-issue\">\n                  <strong>{{ issue.field }}</strong>\n                  <span>{{ issue.message }}</span>\n                </li>\n              }\n            </ul>\n          } @else {\n            <div class=\"editor-empty\">\n              {{ t('praxis.charts.editor.issues.empty', 'No issues were identified.') }}\n            </div>\n          }\n        </mat-card-content>\n      </mat-card>\n\n      <mat-card class=\"editor-card\">\n        <mat-card-header>\n          <mat-card-title>{{ t('praxis.charts.editor.preview.title', 'Chart preview') }}</mat-card-title>\n        </mat-card-header>\n        <mat-card-content>\n          @if (preview(); as chartPreview) {\n            <p class=\"editor-caption\">\n              {{ t('praxis.charts.editor.preview.caption', 'Local preview derived from the canonical contract without remote calls.') }}\n            </p>\n            <praxis-chart [config]=\"chartPreview.config\" [data]=\"chartPreview.data\"></praxis-chart>\n          } @else {\n            <div class=\"editor-empty\">\n              {{ t('praxis.charts.editor.preview.invalid', 'Preview is unavailable while the contract has blocking errors.') }}\n            </div>\n          }\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;min-width:0;container:praxis-chart-editor / inline-size;color:var(--md-sys-color-on-surface, #1a1b20)}.editor-shell{display:grid;gap:18px;min-width:0}.editor-nav{display:flex;gap:8px;flex-wrap:wrap}.editor-nav button.active{background:color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 18%,transparent);color:var(--md-sys-color-primary, #1263b4)}.editor-layout{display:grid;gap:18px;grid-template-columns:minmax(0,1.35fr) minmax(320px,.9fr);align-items:start}.editor-form,.editor-side{display:grid;gap:16px;min-width:0}.editor-card{box-sizing:border-box;width:100%;min-width:0;border-radius:20px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 72%,transparent);background:linear-gradient(180deg,#1263b408,#1263b400)}.editor-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.editor-stack{display:grid;gap:14px}.editor-row-card{padding:14px;border-radius:16px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 54%,transparent);background:color-mix(in srgb,var(--md-sys-color-surface, #fff) 92%,rgba(18,99,180,.04))}.editor-row-actions{display:flex;justify-content:flex-end}.editor-field{width:100%}.editor-issues{display:grid;gap:10px;margin:0;padding:0;list-style:none}.editor-issue{padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--md-sys-color-error, #b3261e) 8%,transparent);border:1px solid color-mix(in srgb,var(--md-sys-color-error, #b3261e) 18%,transparent)}.editor-issue strong{display:block;margin-bottom:4px}.editor-caption{margin:0 0 12px;color:var(--md-sys-color-on-surface-variant, #5a5d67);font-size:.92rem}.editor-empty{padding:18px;border-radius:14px;background:color-mix(in srgb,var(--md-sys-color-surface-variant, #eceff4) 78%,transparent)}.editor-side praxis-chart{display:block;width:100%;min-width:0;max-width:100%}@container praxis-chart-editor (max-width: 840px){.editor-layout{grid-template-columns:minmax(0,1fr)}}@media(max-width:960px){.editor-layout{grid-template-columns:minmax(0,1fr)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: PraxisChartComponent, selector: "praxis-chart", inputs: ["config", "data", "chartDocument", "filterCriteria", "queryContext", "remoteDataResolver", "enableCustomization", "availableResources", "availableFields", "availableTargets"], outputs: ["pointClick", "pointAction", "selectionChange", "drillDown", "crossFilter", "queryRequest", "loadStateChange", "chartDocumentApplied", "chartDocumentSaved", "chartDocumentPatchChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisChartConfigEditor, decorators: [{
             type: Component,
@@ -9460,6 +9464,11 @@ const PRAXIS_CHART_COMPONENT_METADATA = {
             type: 'PraxisXUiChartContract',
             description: 'Emitted when the runtime chart editor saves a canonical x-ui.chart document through the settings panel bridge.',
         },
+        {
+            name: 'chartDocumentPatchChange',
+            type: 'PraxisChartDocumentPatchChangeEvent',
+            description: 'Emitted on Save with inputPatch.chartDocument so dynamic widget hosts can materialize the canonical document without inferring persistence from event names.',
+        },
     ],
     actions: [
         {
@@ -9726,7 +9735,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", "pointAction", "selectionChange", "drillDown", "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", "authoringCapability", "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 });
+  `, 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", "pointAction", "selectionChange", "drillDown", "crossFilter", "queryRequest", "loadStateChange", "chartDocumentApplied", "chartDocumentSaved", "chartDocumentPatchChange"] }, { 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", "authoringCapability", "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,
@@ -11421,7 +11430,7 @@ class PraxisChartCompositionShowcaseComponent {
         </article>
       </div>
     </section>
-  `, isInline: true, styles: [":host{display:block}.showcase-shell{display:grid;gap:24px}.showcase-hero{display:grid;gap:20px;padding:28px;border-radius:28px;background:radial-gradient(circle at top right,rgba(18,99,180,.18),transparent 30%),linear-gradient(135deg,#071836f2,#1263b4c7);color:#f7fbff}.showcase-copy h2{margin:0 0 10px;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.05}.showcase-copy p{margin:0;max-width:52rem;color:#f7fbffe0}.showcase-eyebrow,.panel-kicker{margin:0 0 8px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#f7fbffb8}.showcase-controls{display:flex;flex-wrap:wrap;gap:16px}.control-group{display:grid;gap:8px}.control-group span{font-size:.84rem;color:#f7fbffc2}.control-buttons{display:flex;flex-wrap:wrap;gap:8px}.control-buttons button{border:1px solid rgba(247,251,255,.22);background:#f7fbff14;color:#f7fbff;border-radius:999px;padding:10px 14px;cursor:pointer;transition:background .16s ease,transform .16s ease}.control-buttons button.active{background:#f7fbff;color:#0d2d5f}.showcase-grid{display:grid;gap:20px;grid-template-columns:minmax(0,1.3fr) minmax(320px,.9fr)}.runtime-panel,.payload-panel{display:grid;gap:16px;padding:20px;border-radius:24px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 76%,transparent);background:linear-gradient(180deg,#fffffff0,#f4f7fbf5)}.panel-header{display:flex;align-items:start;justify-content:space-between;gap:12px}.panel-header h3{margin:0;color:#142033}.panel-caption{margin:6px 0 0;color:#516074;font-size:.88rem;line-height:1.45}.panel-chip{border-radius:999px;padding:6px 10px;font-size:.76rem;background:#1263b41f;color:#1263b4}.payload-panel pre{margin:0;padding:16px;border-radius:18px;background:#09111f;color:#d7e6ff;overflow:auto;font-size:.84rem;line-height:1.5}@media(max-width:1080px){.showcase-grid{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "component", type: DynamicWidgetPageComponent, selector: "praxis-dynamic-page", inputs: ["page", "context", "strictValidation", "enableCustomization", "authoringCapabilities", "showPageSettingsButton", "shellEditorComponent", "pageEditorComponent", "autoPersist", "pageIdentity", "componentInstanceId", "showWidgetAssistantButton"], outputs: ["pageChange", "widgetEvent", "widgetSelectionChange", "widgetAssistantRequested", "widgetDiagnosticsChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block}.showcase-shell{display:grid;gap:24px}.showcase-hero{display:grid;gap:20px;padding:28px;border-radius:28px;background:radial-gradient(circle at top right,rgba(18,99,180,.18),transparent 30%),linear-gradient(135deg,#071836f2,#1263b4c7);color:#f7fbff}.showcase-copy h2{margin:0 0 10px;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.05}.showcase-copy p{margin:0;max-width:52rem;color:#f7fbffe0}.showcase-eyebrow,.panel-kicker{margin:0 0 8px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#f7fbffb8}.showcase-controls{display:flex;flex-wrap:wrap;gap:16px}.control-group{display:grid;gap:8px}.control-group span{font-size:.84rem;color:#f7fbffc2}.control-buttons{display:flex;flex-wrap:wrap;gap:8px}.control-buttons button{border:1px solid rgba(247,251,255,.22);background:#f7fbff14;color:#f7fbff;border-radius:999px;padding:10px 14px;cursor:pointer;transition:background .16s ease,transform .16s ease}.control-buttons button.active{background:#f7fbff;color:#0d2d5f}.showcase-grid{display:grid;gap:20px;grid-template-columns:minmax(0,1.3fr) minmax(320px,.9fr)}.runtime-panel,.payload-panel{display:grid;gap:16px;padding:20px;border-radius:24px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 76%,transparent);background:linear-gradient(180deg,#fffffff0,#f4f7fbf5)}.panel-header{display:flex;align-items:start;justify-content:space-between;gap:12px}.panel-header h3{margin:0;color:#142033}.panel-caption{margin:6px 0 0;color:#516074;font-size:.88rem;line-height:1.45}.panel-chip{border-radius:999px;padding:6px 10px;font-size:.76rem;background:#1263b41f;color:#1263b4}.payload-panel pre{margin:0;padding:16px;border-radius:18px;background:#09111f;color:#d7e6ff;overflow:auto;font-size:.84rem;line-height:1.5}@media(max-width:1080px){.showcase-grid{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "component", type: DynamicWidgetPageComponent, selector: "praxis-dynamic-page", inputs: ["page", "context", "strictValidation", "enableCustomization", "authoringCapabilities", "showPageSettingsButton", "shellEditorComponent", "pageEditorComponent", "autoPersist", "pageIdentity", "componentInstanceId", "showWidgetAssistantButton"], outputs: ["pageChange", "pageAuthoringChange", "widgetEvent", "widgetSelectionChange", "widgetAssistantRequested", "widgetDiagnosticsChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisChartCompositionShowcaseComponent, decorators: [{
             type: Component,

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@praxisui/charts",
-  "version": "9.0.53",
+  "version": "9.0.55",
   "description": "Metadata-driven charts library for Praxis UI Angular with engine adapters and Apache ECharts as the initial renderer.",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0",
-    "@praxisui/core": "^9.0.53",
+    "@praxisui/core": "^9.0.55",
     "@angular/forms": "^21.0.0",
     "@angular/material": "^21.0.0",
-    "@praxisui/table": "^9.0.53",
+    "@praxisui/table": "^9.0.55",
     "rxjs": "~7.8.0"
   },
   "dependencies": {

package/types/praxisui-charts.d.ts

@@ -547,6 +547,11 @@ interface ChartEditorTargetOption {
     events?: ChartEditorEventKey[];
 }
 
+interface PraxisChartDocumentPatchChangeEvent {
+    inputPatch: {
+        chartDocument: PraxisXUiChartContract;
+    };
+}
 interface PraxisChartAccessiblePoint extends PraxisChartPointEvent {
     id: string;
     categoryLabel: string;
@@ -573,6 +578,7 @@ declare class PraxisChartComponent {
     readonly loadStateChange: _angular_core.OutputEmitterRef<PraxisChartLoadState>;
     readonly chartDocumentApplied: _angular_core.OutputEmitterRef<PraxisXUiChartContract>;
     readonly chartDocumentSaved: _angular_core.OutputEmitterRef<PraxisXUiChartContract>;
+    readonly chartDocumentPatchChange: _angular_core.OutputEmitterRef<PraxisChartDocumentPatchChangeEvent>;
     private readonly chartHost;
     private readonly hostElement;
     private readonly engine;
@@ -692,7 +698,7 @@ declare class PraxisChartComponent {
     private cancelScheduledRender;
     private cancelScheduledResize;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<PraxisChartComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PraxisChartComponent, "praxis-chart", never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "chartDocument": { "alias": "chartDocument"; "required": false; "isSignal": true; }; "filterCriteria": { "alias": "filterCriteria"; "required": false; "isSignal": true; }; "queryContext": { "alias": "queryContext"; "required": false; "isSignal": true; }; "remoteDataResolver": { "alias": "remoteDataResolver"; "required": false; "isSignal": true; }; "enableCustomization": { "alias": "enableCustomization"; "required": false; "isSignal": true; }; "availableResources": { "alias": "availableResources"; "required": false; "isSignal": true; }; "availableFields": { "alias": "availableFields"; "required": false; "isSignal": true; }; "availableTargets": { "alias": "availableTargets"; "required": false; "isSignal": true; }; }, { "pointClick": "pointClick"; "pointAction": "pointAction"; "selectionChange": "selectionChange"; "drillDown": "drillDown"; "crossFilter": "crossFilter"; "queryRequest": "queryRequest"; "loadStateChange": "loadStateChange"; "chartDocumentApplied": "chartDocumentApplied"; "chartDocumentSaved": "chartDocumentSaved"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PraxisChartComponent, "praxis-chart", never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "chartDocument": { "alias": "chartDocument"; "required": false; "isSignal": true; }; "filterCriteria": { "alias": "filterCriteria"; "required": false; "isSignal": true; }; "queryContext": { "alias": "queryContext"; "required": false; "isSignal": true; }; "remoteDataResolver": { "alias": "remoteDataResolver"; "required": false; "isSignal": true; }; "enableCustomization": { "alias": "enableCustomization"; "required": false; "isSignal": true; }; "availableResources": { "alias": "availableResources"; "required": false; "isSignal": true; }; "availableFields": { "alias": "availableFields"; "required": false; "isSignal": true; }; "availableTargets": { "alias": "availableTargets"; "required": false; "isSignal": true; }; }, { "pointClick": "pointClick"; "pointAction": "pointAction"; "selectionChange": "selectionChange"; "drillDown": "drillDown"; "crossFilter": "crossFilter"; "queryRequest": "queryRequest"; "loadStateChange": "loadStateChange"; "chartDocumentApplied": "chartDocumentApplied"; "chartDocumentSaved": "chartDocumentSaved"; "chartDocumentPatchChange": "chartDocumentPatchChange"; }, never, never, true, never>;
 }
 
 interface BulletBand {
@@ -2031,4 +2037,4 @@ declare const PRAXIS_ANALYTICS_PRESENTATION_COMPONENT_METADATA: ComponentDocMeta
 declare function providePraxisAnalyticsPresentationMetadata(): Provider;
 
 export { AnalyticsChartConfigAdapterService, AnalyticsChartContractService, ChartContractNormalizerService, ChartContractValidationService, ChartEditorDefaultsService, ChartEditorPreviewMapperService, ChartResourceCapabilityCatalogAdapter, PRAXIS_ANALYTICS_PRESENTATION_AUTHORING_MANIFEST, PRAXIS_ANALYTICS_PRESENTATION_COMPONENT_METADATA, PRAXIS_CHARTS_AUTHORING_MANIFEST, PRAXIS_CHARTS_I18N, PRAXIS_CHART_AUTHORING_COVERAGE, 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_ENGINE_FACTORY, PRAXIS_CHART_PALETTE_TOKENS, PRAXIS_CHART_STATE_PROBE_COMPONENT_METADATA, PRAXIS_CHART_THEME_VARIANTS, PRAXIS_X_UI_CHART_AUTHORABLE_VERSION, PraxisAnalyticsPresentationComponent, PraxisChartBackendPayloadAdapterService, PraxisChartCanonicalContractMapperService, PraxisChartComponent, PraxisChartCompositionShowcaseComponent, PraxisChartConfigEditor, PraxisChartDataTransformerService, PraxisChartDrilldownPanelComponent, PraxisChartSchemaMapperService, PraxisChartStateProbeComponent, PraxisChartStatsApiService, PraxisChartWidgetConfigEditor, PraxisMicroVisualizationComponent, buildPraxisChartInteractiveCanvasPage, buildPraxisChartInteractiveWidgetPage, buildPraxisChartMockCanvasPage, buildPraxisChartMockWidgetPage, createPraxisChartsI18nConfig, isPraxisChartPaletteToken, providePraxisAnalyticsPresentationMetadata, providePraxisChartDrilldownPanelMetadata, providePraxisChartStateProbeMetadata, providePraxisCharts, providePraxisChartsI18n, providePraxisChartsMetadata, resolvePraxisChartPaletteToken, resolvePraxisChartsText };
-export type { AnalyticsChartConfigAdapterOptions, AnalyticsChartContractDefinition, AnalyticsChartContractLoadOptions, AnalyticsChartContractLoadResult, AnalyticsChartContractSource, ChartConfigEditorApplyEvent, ChartConfigEditorResetEvent, ChartConfigEditorSaveEvent, ChartContractIssueSeverity, ChartContractValidationIssue, ChartContractValidationResult, ChartEditorEventKey, ChartEditorFieldOption, ChartEditorPreviewPayload, ChartEditorResourceOption, ChartEditorTargetOption, PraxisAnalyticsPresentationChange, PraxisChartAggregation, PraxisChartAuthoringCoverageMode, PraxisChartAuthoringCoverageOwner, PraxisChartAuthoringCoverageRow, PraxisChartAxisConfig, PraxisChartAxisLabelConfig, PraxisChartAxisPosition, PraxisChartAxisType, PraxisChartBackendPayload, PraxisChartBackendWidgetPayload, PraxisChartCanvasItem, PraxisChartCartesianSeries, PraxisChartCategorySlice, PraxisChartConfig, PraxisChartConfigEditorData, PraxisChartCrossFilterEvent, PraxisChartDataDiagnostic, PraxisChartDataDiagnosticCode, PraxisChartDataRow, PraxisChartDataSource, PraxisChartDeclarativeEventAction, PraxisChartDistributionStatsRequest, PraxisChartDrillDownEvent, PraxisChartEmptyStateConfig, PraxisChartEngineAdapter, PraxisChartEngineFactory, PraxisChartEngineRenderPayload, PraxisChartErrorStateConfig, PraxisChartGaugeConfig, PraxisChartGaugeScale, PraxisChartGaugeValue, PraxisChartGroupByStatsRequest, PraxisChartInteractionConfig, PraxisChartLegendConfig, PraxisChartLoadState, PraxisChartLocalDataSource, PraxisChartMetricConfig, PraxisChartMotionConfig, PraxisChartMotionPreset, PraxisChartPaletteToken, PraxisChartPointActionEvent, PraxisChartPointEvent, PraxisChartPrimitive, PraxisChartQueryConfig, PraxisChartQueryContext, PraxisChartQueryMetricConfig, PraxisChartQueryRequestEvent, PraxisChartRemoteDataResolver, PraxisChartRemoteDataResolverResult, PraxisChartRemoteDataSource, PraxisChartSchemaMeta, PraxisChartSelectionEvent, PraxisChartSeriesConfig, PraxisChartSeriesLabelConfig, PraxisChartSizingConfig, PraxisChartSizingMode, PraxisChartStateConfig, PraxisChartStatsDistributionMode, PraxisChartStatsGranularity, PraxisChartStatsMetricOperation, PraxisChartStatsMetricRequest, PraxisChartStatsOperation, PraxisChartStatsOrderBy, PraxisChartStatsRequest, PraxisChartSurfaceConfig, PraxisChartSurfaceMode, PraxisChartThemeConfig, PraxisChartThemeVariant, PraxisChartTimeSeriesStatsRequest, PraxisChartTooltipConfig, PraxisChartTransformedData, PraxisChartType, PraxisChartWidgetEditorContext, PraxisChartWidgetEditorInputs, PraxisChartWidgetEditorValue, PraxisChartWidgetInstance, PraxisChartWidgetLike, PraxisChartWidgetResolution, PraxisChartWidgetSchema, PraxisChartsI18nOptions, PraxisChartsProviderOptions, PraxisChartsText, PraxisXUiChartAggregation, PraxisXUiChartAggregationConfig, PraxisXUiChartComparisonPeriod, PraxisXUiChartComparisonPeriodMode, PraxisXUiChartComparisonPeriodPreset, PraxisXUiChartContract, PraxisXUiChartDimension, PraxisXUiChartEventAction, PraxisXUiChartEvents, PraxisXUiChartFilter, PraxisXUiChartGaugeConfig, PraxisXUiChartGaugeScale, PraxisXUiChartKind, PraxisXUiChartMetric, PraxisXUiChartMotion, PraxisXUiChartMotionPreset, PraxisXUiChartPreset, PraxisXUiChartRefresh, PraxisXUiChartRuntimeHints, PraxisXUiChartSizing, PraxisXUiChartSizingMode, PraxisXUiChartSort, PraxisXUiChartSource, PraxisXUiChartSourceKind, PraxisXUiChartState, PraxisXUiChartStateDescriptor, PraxisXUiChartStatsDistributionMode, PraxisXUiChartStatsOperation, PraxisXUiChartStatsOrderBy, PraxisXUiChartStatsSourceOptions, PraxisXUiChartSurface, PraxisXUiChartSurfaceMode, PraxisXUiChartTextValue, PraxisXUiChartTheme, PraxisXUiChartToggleableFeature };
+export type { AnalyticsChartConfigAdapterOptions, AnalyticsChartContractDefinition, AnalyticsChartContractLoadOptions, AnalyticsChartContractLoadResult, AnalyticsChartContractSource, ChartConfigEditorApplyEvent, ChartConfigEditorResetEvent, ChartConfigEditorSaveEvent, ChartContractIssueSeverity, ChartContractValidationIssue, ChartContractValidationResult, ChartEditorEventKey, ChartEditorFieldOption, ChartEditorPreviewPayload, ChartEditorResourceOption, ChartEditorTargetOption, PraxisAnalyticsPresentationChange, PraxisChartAggregation, PraxisChartAuthoringCoverageMode, PraxisChartAuthoringCoverageOwner, PraxisChartAuthoringCoverageRow, PraxisChartAxisConfig, PraxisChartAxisLabelConfig, PraxisChartAxisPosition, PraxisChartAxisType, PraxisChartBackendPayload, PraxisChartBackendWidgetPayload, PraxisChartCanvasItem, PraxisChartCartesianSeries, PraxisChartCategorySlice, PraxisChartConfig, PraxisChartConfigEditorData, PraxisChartCrossFilterEvent, PraxisChartDataDiagnostic, PraxisChartDataDiagnosticCode, PraxisChartDataRow, PraxisChartDataSource, PraxisChartDeclarativeEventAction, PraxisChartDistributionStatsRequest, PraxisChartDocumentPatchChangeEvent, PraxisChartDrillDownEvent, PraxisChartEmptyStateConfig, PraxisChartEngineAdapter, PraxisChartEngineFactory, PraxisChartEngineRenderPayload, PraxisChartErrorStateConfig, PraxisChartGaugeConfig, PraxisChartGaugeScale, PraxisChartGaugeValue, PraxisChartGroupByStatsRequest, PraxisChartInteractionConfig, PraxisChartLegendConfig, PraxisChartLoadState, PraxisChartLocalDataSource, PraxisChartMetricConfig, PraxisChartMotionConfig, PraxisChartMotionPreset, PraxisChartPaletteToken, PraxisChartPointActionEvent, PraxisChartPointEvent, PraxisChartPrimitive, PraxisChartQueryConfig, PraxisChartQueryContext, PraxisChartQueryMetricConfig, PraxisChartQueryRequestEvent, PraxisChartRemoteDataResolver, PraxisChartRemoteDataResolverResult, PraxisChartRemoteDataSource, PraxisChartSchemaMeta, PraxisChartSelectionEvent, PraxisChartSeriesConfig, PraxisChartSeriesLabelConfig, PraxisChartSizingConfig, PraxisChartSizingMode, PraxisChartStateConfig, PraxisChartStatsDistributionMode, PraxisChartStatsGranularity, PraxisChartStatsMetricOperation, PraxisChartStatsMetricRequest, PraxisChartStatsOperation, PraxisChartStatsOrderBy, PraxisChartStatsRequest, PraxisChartSurfaceConfig, PraxisChartSurfaceMode, PraxisChartThemeConfig, PraxisChartThemeVariant, PraxisChartTimeSeriesStatsRequest, PraxisChartTooltipConfig, PraxisChartTransformedData, PraxisChartType, PraxisChartWidgetEditorContext, PraxisChartWidgetEditorInputs, PraxisChartWidgetEditorValue, PraxisChartWidgetInstance, PraxisChartWidgetLike, PraxisChartWidgetResolution, PraxisChartWidgetSchema, PraxisChartsI18nOptions, PraxisChartsProviderOptions, PraxisChartsText, PraxisXUiChartAggregation, PraxisXUiChartAggregationConfig, PraxisXUiChartComparisonPeriod, PraxisXUiChartComparisonPeriodMode, PraxisXUiChartComparisonPeriodPreset, PraxisXUiChartContract, PraxisXUiChartDimension, PraxisXUiChartEventAction, PraxisXUiChartEvents, PraxisXUiChartFilter, PraxisXUiChartGaugeConfig, PraxisXUiChartGaugeScale, PraxisXUiChartKind, PraxisXUiChartMetric, PraxisXUiChartMotion, PraxisXUiChartMotionPreset, PraxisXUiChartPreset, PraxisXUiChartRefresh, PraxisXUiChartRuntimeHints, PraxisXUiChartSizing, PraxisXUiChartSizingMode, PraxisXUiChartSort, PraxisXUiChartSource, PraxisXUiChartSourceKind, PraxisXUiChartState, PraxisXUiChartStateDescriptor, PraxisXUiChartStatsDistributionMode, PraxisXUiChartStatsOperation, PraxisXUiChartStatsOrderBy, PraxisXUiChartStatsSourceOptions, PraxisXUiChartSurface, PraxisXUiChartSurfaceMode, PraxisXUiChartTextValue, PraxisXUiChartTheme, PraxisXUiChartToggleableFeature };