@praxisui/charts 3.0.0-beta.7 → 3.0.0-beta.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/fesm2022/praxisui-charts.mjs +254 -227
  2. package/index.d.ts +84 -17
  3. package/package.json +2 -2
  4. package/fesm2022/praxisui-charts.mjs.map +0 -1
package/fesm2022/praxisui-charts.mjs CHANGED
@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
2
2
  import * as i0 from '@angular/core';
3
3
  import { Injectable, Inject, InjectionToken, input, booleanAttribute, output, viewChild, inject, ElementRef, DestroyRef, signal, computed, afterNextRender, effect, ChangeDetectionStrategy, Component, ENVIRONMENT_INITIALIZER } from '@angular/core';
4
4
  import * as i1$2 from '@praxisui/core';
5
- import { buildApiUrl, API_URL, PraxisI18nService, SETTINGS_PANEL_BRIDGE, ComponentMetadataRegistry, createDefaultTableConfig, DynamicWidgetPageComponent, DynamicGridPageComponent, providePraxisI18n, SETTINGS_PANEL_DATA } from '@praxisui/core';
5
+ import { buildApiUrl, API_URL, PraxisI18nService, SETTINGS_PANEL_BRIDGE, ComponentMetadataRegistry, createDefaultTableConfig, DynamicWidgetPageComponent, providePraxisI18n, SETTINGS_PANEL_DATA } from '@praxisui/core';
6
6
  import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
7
7
  import * as i1$1 from '@angular/material/button';
8
8
  import { MatButtonModule } from '@angular/material/button';
@@ -254,6 +254,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
254
254
  args: [{ providedIn: 'root' }]
255
255
  }] });
256
256
 
257
+ const PRAXIS_CHART_DEFAULT_PALETTE = ['#1263b4', '#0f766e', '#f08c00', '#c92a2a', '#7b61ff'];
257
258
  class PraxisChartOptionBuilderService {
258
259
  transformer;
259
260
  constructor(transformer) {
@@ -261,7 +262,7 @@ class PraxisChartOptionBuilderService {
261
262
  }
262
263
  build(config, rows) {
263
264
  const transformed = this.transformer.transform(config, rows);
264
- const palette = config.theme?.palette;
265
+ const palette = config.theme?.palette?.length ? config.theme.palette : PRAXIS_CHART_DEFAULT_PALETTE;
265
266
  const tooltipEnabled = config.theme?.tooltip?.enabled ?? true;
266
267
  const legendVisible = config.theme?.legend?.visible ?? true;
267
268
  if (transformed.mode === 'pie') {
@@ -2011,6 +2012,93 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
2011
2012
  `, styles: [":host{display:block}.probe-shell{display:grid;gap:12px;min-height:220px;padding:18px;border-radius:20px;background:linear-gradient(180deg,#0b111ff5,#0b111fe0),radial-gradient(circle at top right,rgba(18,99,180,.32),transparent 35%);color:#d7e6ff}.probe-header h3,.probe-eyebrow{margin:0}.probe-eyebrow{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:#d7e6ffb3}.probe-empty{color:#d7e6ffc7}pre{margin:0;overflow:auto;white-space:pre-wrap;word-break:break-word;font-size:.84rem;line-height:1.45}\n"] }]
2012
2013
  }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
2013
2014
 
2015
+ const PRAXIS_CHART_PHASE1_PORTS = [
2016
+ {
2017
+ id: 'queryContext',
2018
+ label: 'Query Context',
2019
+ direction: 'input',
2020
+ semanticKind: 'query-context',
2021
+ description: 'Primary semantic query contract for declarative orchestration and connected filters.',
2022
+ schema: {
2023
+ id: 'PraxisDataQueryContext',
2024
+ kind: 'ts-type',
2025
+ ref: 'PraxisDataQueryContext',
2026
+ },
2027
+ compatibility: {
2028
+ acceptsSemanticKinds: ['query-context'],
2029
+ schemaMode: 'structural',
2030
+ },
2031
+ exposure: { public: true, group: 'data' },
2032
+ },
2033
+ {
2034
+ id: 'chartDocument',
2035
+ label: 'Chart Document',
2036
+ direction: 'input',
2037
+ semanticKind: 'config-fragment',
2038
+ description: 'Canonical x-ui.chart document used as the authoring source of truth.',
2039
+ schema: {
2040
+ id: 'PraxisXUiChartContract',
2041
+ kind: 'ts-type',
2042
+ ref: 'PraxisXUiChartContract',
2043
+ },
2044
+ exposure: { public: true, group: 'config' },
2045
+ },
2046
+ {
2047
+ id: 'config',
2048
+ label: 'Chart Config',
2049
+ direction: 'input',
2050
+ semanticKind: 'config-fragment',
2051
+ description: 'Declarative chart configuration consumed directly by the runtime.',
2052
+ schema: {
2053
+ id: 'PraxisChartConfig',
2054
+ kind: 'ts-type',
2055
+ ref: 'PraxisChartConfig',
2056
+ },
2057
+ exposure: { public: true, group: 'config' },
2058
+ },
2059
+ {
2060
+ id: 'pointClick',
2061
+ label: 'Point Click',
2062
+ direction: 'output',
2063
+ semanticKind: 'event',
2064
+ description: 'Interaction event emitted when a point or series is clicked.',
2065
+ cardinality: 'stream',
2066
+ schema: {
2067
+ id: 'PraxisChartPointEvent',
2068
+ kind: 'ts-type',
2069
+ ref: 'PraxisChartPointEvent',
2070
+ },
2071
+ exposure: { public: true, group: 'interaction' },
2072
+ },
2073
+ {
2074
+ id: 'queryRequest',
2075
+ label: 'Query Request',
2076
+ direction: 'output',
2077
+ semanticKind: 'diagnostic',
2078
+ description: 'Outgoing remote query request emitted before datasource resolution.',
2079
+ cardinality: 'stream',
2080
+ schema: {
2081
+ id: 'PraxisChartQueryRequestEvent',
2082
+ kind: 'ts-type',
2083
+ ref: 'PraxisChartQueryRequestEvent',
2084
+ },
2085
+ exposure: { public: true, group: 'diagnostics' },
2086
+ },
2087
+ {
2088
+ id: 'loadStateChange',
2089
+ label: 'Load State',
2090
+ direction: 'output',
2091
+ semanticKind: 'status',
2092
+ description: 'Operational state signal for loading, ready and error transitions.',
2093
+ cardinality: 'stream',
2094
+ schema: {
2095
+ id: 'PraxisChartLoadState',
2096
+ kind: 'ts-type',
2097
+ ref: 'PraxisChartLoadState',
2098
+ },
2099
+ exposure: { public: true, group: 'status' },
2100
+ },
2101
+ ];
2014
2102
  const PRAXIS_CHART_COMPONENT_METADATA = {
2015
2103
  id: 'praxis-chart',
2016
2104
  componentType: 'praxis-chart',
@@ -2110,6 +2198,7 @@ const PRAXIS_CHART_COMPONENT_METADATA = {
2110
2198
  scope: 'toolbar',
2111
2199
  },
2112
2200
  ],
2201
+ ports: PRAXIS_CHART_PHASE1_PORTS,
2113
2202
  };
2114
2203
  function providePraxisChartsMetadata() {
2115
2204
  return {
@@ -2330,7 +2419,7 @@ class PraxisChartShowcaseWidgetComponent {
2330
2419
  (rowClick)="handleRowClick($event)"
2331
2420
  ></praxis-table>
2332
2421
  }
2333
- `, 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: "ngmodule", type: CommonModule }, { kind: "component", type: PraxisChartComponent, selector: "praxis-chart", inputs: ["config", "data", "chartDocument", "filterCriteria", "queryContext", "enableCustomization", "availableResources", "availableFields", "availableTargets"], outputs: ["pointClick", "queryRequest", "loadStateChange", "chartDocumentApplied", "chartDocumentSaved"] }, { kind: "component", type: PraxisTable, selector: "praxis-table", inputs: ["config", "resourcePath", "data", "tableId", "componentInstanceId", "title", "subtitle", "icon", "autoDelete", "notifyIfOutdated", "snoozeMs", "autoOpenSettingsOnOutdated", "crudContext", "dslFunctionRegistry", "editModeEnabled", "dense"], outputs: ["rowClick", "rowDoubleClick", "rowExpansionChange", "rowAction", "toolbarAction", "bulkAction", "columnReorder", "columnReorderAttempt", "beforeDelete", "afterDelete", "deleteError", "beforeBulkDelete", "afterBulkDelete", "bulkDeleteError", "schemaStatusChange", "metadataChange", "loadingStateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2422
+ `, 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: "ngmodule", type: CommonModule }, { kind: "component", type: PraxisChartComponent, selector: "praxis-chart", inputs: ["config", "data", "chartDocument", "filterCriteria", "queryContext", "enableCustomization", "availableResources", "availableFields", "availableTargets"], outputs: ["pointClick", "queryRequest", "loadStateChange", "chartDocumentApplied", "chartDocumentSaved"] }, { kind: "component", type: PraxisTable, selector: "praxis-table", inputs: ["config", "resourcePath", "data", "tableId", "componentInstanceId", "title", "subtitle", "icon", "autoDelete", "notifyIfOutdated", "snoozeMs", "autoOpenSettingsOnOutdated", "crudContext", "dslFunctionRegistry", "filterCriteria", "queryContext", "enableCustomization", "dense"], outputs: ["rowClick", "rowDoubleClick", "rowExpansionChange", "rowAction", "toolbarAction", "bulkAction", "columnReorder", "columnReorderAttempt", "beforeDelete", "afterDelete", "deleteError", "beforeBulkDelete", "afterBulkDelete", "bulkDeleteError", "schemaStatusChange", "metadataChange", "loadingStateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2334
2423
  }
2335
2424
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartShowcaseWidgetComponent, decorators: [{
2336
2425
  type: Component,
@@ -2591,7 +2680,7 @@ class PraxisChartSchemaMapperService {
2591
2680
  key,
2592
2681
  className: schema.className,
2593
2682
  shell: schema.shell,
2594
- layout: schema.layout ?? defaults?.layout,
2683
+ canvasItem: schema.canvasItem ?? defaults?.canvasItem,
2595
2684
  definition: this.toWidgetDefinition(schema),
2596
2685
  };
2597
2686
  }
@@ -2616,16 +2705,6 @@ class PraxisChartSchemaMapperService {
2616
2705
  shell: resolved.shell,
2617
2706
  };
2618
2707
  }
2619
- toGridWidgetInstance(input, defaults) {
2620
- const resolved = this.resolve(input, defaults);
2621
- return {
2622
- key: resolved.key,
2623
- definition: resolved.definition,
2624
- layout: resolved.layout ?? defaults.layout,
2625
- className: resolved.className,
2626
- shell: resolved.shell,
2627
- };
2628
- }
2629
2708
  normalize(input) {
2630
2709
  if (this.isCanonicalChartContract(input)) {
2631
2710
  return {
@@ -2653,7 +2732,7 @@ class PraxisChartSchemaMapperService {
2653
2732
  || 'outputs' in input
2654
2733
  || 'bindingOrder' in input
2655
2734
  || 'shell' in input
2656
- || 'layout' in input
2735
+ || 'canvasItem' in input
2657
2736
  || 'data' in input);
2658
2737
  }
2659
2738
  isCanonicalChartContract(input) {
@@ -2728,33 +2807,8 @@ class PraxisChartBackendPayloadAdapterService {
2728
2807
  },
2729
2808
  };
2730
2809
  }
2731
- toGridWidgetInstance(payload) {
2732
- const layout = payload.widget.layout ?? { col: 1, row: 1, colSpan: 6, rowSpan: 4 };
2733
- const widget = this.chartSchemaMapper.toGridWidgetInstance({
2734
- kind: payload.widget.kind ?? 'x-ui.chart',
2735
- key: payload.widget.key,
2736
- className: payload.widget.className,
2737
- shell: payload.widget.shell,
2738
- bindingOrder: payload.widget.bindingOrder,
2739
- outputs: payload.widget.outputs,
2740
- layout,
2741
- chart: payload.widget.chart,
2742
- data: payload.data,
2743
- }, {
2744
- key: payload.widget.key,
2745
- layout,
2746
- });
2747
- return {
2748
- ...widget,
2749
- definition: {
2750
- ...widget.definition,
2751
- inputs: {
2752
- ...(widget.definition.inputs || {}),
2753
- config: this.toChartConfig(payload),
2754
- chartDocument: payload.widget.chart ?? null,
2755
- },
2756
- },
2757
- };
2810
+ toCanvasItem(payload, fallback = { col: 1, row: 1, colSpan: 6, rowSpan: 4 }) {
2811
+ return payload.widget.canvasItem ?? fallback;
2758
2812
  }
2759
2813
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartBackendPayloadAdapterService, deps: [{ token: PraxisChartSchemaMapperService }, { token: PraxisChartCanonicalContractMapperService }], target: i0.ɵɵFactoryTarget.Injectable });
2760
2814
  static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartBackendPayloadAdapterService, providedIn: 'root' });
@@ -2777,7 +2831,7 @@ const PRAXIS_CHART_BACKEND_MOCK_BAR = {
2777
2831
  kind: 'x-ui.chart',
2778
2832
  key: 'monthly-revenue-chart',
2779
2833
  className: 'analytics-widget analytics-widget-revenue',
2780
- layout: { col: 1, row: 1, colSpan: 6, rowSpan: 4 },
2834
+ canvasItem: { col: 1, row: 1, colSpan: 6, rowSpan: 4 },
2781
2835
  shell: {
2782
2836
  title: 'Heroes por universo',
2783
2837
  subtitle: 'Group-by real consumindo praxis.stats publicado',
@@ -2858,7 +2912,7 @@ const PRAXIS_CHART_BACKEND_MOCK_TIMESERIES = {
2858
2912
  widget: {
2859
2913
  kind: 'x-ui.chart',
2860
2914
  key: 'incident-timeseries-chart',
2861
- layout: { col: 7, row: 1, colSpan: 6, rowSpan: 4 },
2915
+ canvasItem: { col: 7, row: 1, colSpan: 6, rowSpan: 4 },
2862
2916
  shell: {
2863
2917
  title: 'Incidentes por mes',
2864
2918
  subtitle: 'Time series real consumindo praxis.stats publicado',
@@ -2914,7 +2968,7 @@ const PRAXIS_CHART_BACKEND_MOCK_DONUT = {
2914
2968
  widget: {
2915
2969
  kind: 'x-ui.chart',
2916
2970
  key: 'ticket-status-chart',
2917
- layout: { col: 7, row: 5, colSpan: 6, rowSpan: 4 },
2971
+ canvasItem: { col: 7, row: 5, colSpan: 6, rowSpan: 4 },
2918
2972
  shell: {
2919
2973
  title: 'Severidade de incidentes',
2920
2974
  subtitle: 'Distribution real consumindo praxis.stats publicado',
@@ -2970,7 +3024,7 @@ const PRAXIS_CHART_BACKEND_MOCK_HORIZONTAL_BAR = {
2970
3024
  widget: {
2971
3025
  kind: 'x-ui.chart',
2972
3026
  key: 'payroll-department-horizontal-bar',
2973
- layout: { col: 1, row: 5, colSpan: 6, rowSpan: 4 },
3027
+ canvasItem: { col: 1, row: 5, colSpan: 6, rowSpan: 4 },
2974
3028
  shell: {
2975
3029
  title: 'Massa salarial por departamento',
2976
3030
  subtitle: 'Ranking horizontal em payroll analytics',
@@ -3032,7 +3086,7 @@ const PRAXIS_CHART_BACKEND_MOCK_STACKED_AREA = {
3032
3086
  widget: {
3033
3087
  kind: 'x-ui.chart',
3034
3088
  key: 'payroll-net-stacked-area',
3035
- layout: { col: 1, row: 9, colSpan: 12, rowSpan: 4 },
3089
+ canvasItem: { col: 1, row: 9, colSpan: 12, rowSpan: 4 },
3036
3090
  shell: {
3037
3091
  title: 'Composicao temporal da folha',
3038
3092
  subtitle: 'Stacked area inicial sobre timeseries published',
@@ -3088,7 +3142,7 @@ const PRAXIS_CHART_BACKEND_MOCK_MULTI_METRIC_BAR = {
3088
3142
  widget: {
3089
3143
  kind: 'x-ui.chart',
3090
3144
  key: 'payroll-multi-metric-bar',
3091
- layout: { col: 1, row: 13, colSpan: 12, rowSpan: 4 },
3145
+ canvasItem: { col: 1, row: 13, colSpan: 12, rowSpan: 4 },
3092
3146
  shell: {
3093
3147
  title: 'Comparativo por departamento',
3094
3148
  subtitle: 'Bar chart multi-metrico sobre praxis.stats group-by',
@@ -3154,7 +3208,7 @@ const PRAXIS_CHART_BACKEND_MOCK_SCATTER = {
3154
3208
  widget: {
3155
3209
  kind: 'x-ui.chart',
3156
3210
  key: 'payroll-net-vs-discount-scatter',
3157
- layout: { col: 1, row: 13, colSpan: 12, rowSpan: 4 },
3211
+ canvasItem: { col: 1, row: 13, colSpan: 12, rowSpan: 4 },
3158
3212
  shell: {
3159
3213
  title: 'Liquido x desconto medio',
3160
3214
  subtitle: 'Dispersao inicial sobre payroll analytics',
@@ -3210,7 +3264,7 @@ const PRAXIS_CHART_BACKEND_MOCK_COMBO = {
3210
3264
  widget: {
3211
3265
  kind: 'x-ui.chart',
3212
3266
  key: 'payroll-combo-variance',
3213
- layout: { col: 1, row: 17, colSpan: 12, rowSpan: 4 },
3267
+ canvasItem: { col: 1, row: 17, colSpan: 12, rowSpan: 4 },
3214
3268
  shell: {
3215
3269
  title: 'Folha liquida e desconto medio',
3216
3270
  subtitle: 'Combo remoto sobre praxis.stats multi-metrica',
@@ -3285,24 +3339,21 @@ function buildPraxisChartMockWidgetPage(adapter) {
3285
3339
  },
3286
3340
  };
3287
3341
  }
3288
- function buildPraxisChartMockGridPage(adapter) {
3289
- return {
3290
- widgets: [
3291
- withShowcaseViewToggle(adapter.toGridWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_BAR)),
3292
- withShowcaseViewToggle(adapter.toGridWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_TIMESERIES)),
3293
- withShowcaseViewToggle(adapter.toGridWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_DONUT)),
3294
- withShowcaseViewToggle(adapter.toGridWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_HORIZONTAL_BAR)),
3295
- withShowcaseViewToggle(adapter.toGridWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_STACKED_AREA)),
3296
- withShowcaseViewToggle(adapter.toGridWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_MULTI_METRIC_BAR)),
3297
- withShowcaseViewToggle(adapter.toGridWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_SCATTER)),
3298
- withShowcaseViewToggle(adapter.toGridWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_COMBO)),
3299
- ],
3300
- options: {
3301
- cols: 12,
3302
- rowHeight: 88,
3303
- gap: 16,
3304
- },
3305
- };
3342
+ function buildPraxisChartMockCanvasPage(adapter) {
3343
+ const payloads = [
3344
+ PRAXIS_CHART_BACKEND_MOCK_BAR,
3345
+ PRAXIS_CHART_BACKEND_MOCK_TIMESERIES,
3346
+ PRAXIS_CHART_BACKEND_MOCK_DONUT,
3347
+ PRAXIS_CHART_BACKEND_MOCK_HORIZONTAL_BAR,
3348
+ PRAXIS_CHART_BACKEND_MOCK_STACKED_AREA,
3349
+ PRAXIS_CHART_BACKEND_MOCK_MULTI_METRIC_BAR,
3350
+ PRAXIS_CHART_BACKEND_MOCK_SCATTER,
3351
+ PRAXIS_CHART_BACKEND_MOCK_COMBO,
3352
+ ];
3353
+ return buildCanvasPage(payloads.map((payload) => ({
3354
+ widget: withShowcaseViewToggle(adapter.toWidgetInstance(payload)),
3355
+ canvasItem: adapter.toCanvasItem(payload),
3356
+ })));
3306
3357
  }
3307
3358
  function buildPraxisChartInteractiveWidgetPage(adapter) {
3308
3359
  return {
@@ -3361,80 +3412,73 @@ function buildPraxisChartInteractiveWidgetPage(adapter) {
3361
3412
  },
3362
3413
  };
3363
3414
  }
3364
- function buildPraxisChartInteractiveGridPage(adapter) {
3415
+ function buildPraxisChartInteractiveCanvasPage(adapter) {
3416
+ return buildCanvasPage([
3417
+ {
3418
+ widget: withShowcaseViewToggle(adapter.toWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_BAR)),
3419
+ canvasItem: adapter.toCanvasItem(PRAXIS_CHART_BACKEND_MOCK_BAR),
3420
+ },
3421
+ {
3422
+ widget: buildDrilldownWidget(),
3423
+ canvasItem: { col: 7, row: 1, colSpan: 6, rowSpan: 4 },
3424
+ },
3425
+ {
3426
+ widget: withShowcaseViewToggle(adapter.toWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_TIMESERIES)),
3427
+ canvasItem: { col: 1, row: 5, colSpan: 6, rowSpan: 4 },
3428
+ },
3429
+ {
3430
+ widget: buildProbeWidget(),
3431
+ canvasItem: { col: 7, row: 9, colSpan: 6, rowSpan: 3 },
3432
+ },
3433
+ {
3434
+ widget: withShowcaseViewToggle(adapter.toWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_DONUT)),
3435
+ canvasItem: { col: 7, row: 5, colSpan: 6, rowSpan: 4 },
3436
+ },
3437
+ {
3438
+ widget: withShowcaseViewToggle(adapter.toWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_HORIZONTAL_BAR)),
3439
+ canvasItem: { col: 1, row: 9, colSpan: 6, rowSpan: 4 },
3440
+ },
3441
+ {
3442
+ widget: withShowcaseViewToggle(adapter.toWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_STACKED_AREA)),
3443
+ canvasItem: { col: 1, row: 13, colSpan: 12, rowSpan: 4 },
3444
+ },
3445
+ {
3446
+ widget: withShowcaseViewToggle(adapter.toWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_MULTI_METRIC_BAR)),
3447
+ canvasItem: { col: 1, row: 17, colSpan: 12, rowSpan: 4 },
3448
+ },
3449
+ {
3450
+ widget: withShowcaseViewToggle(adapter.toWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_SCATTER)),
3451
+ canvasItem: { col: 1, row: 21, colSpan: 12, rowSpan: 4 },
3452
+ },
3453
+ {
3454
+ widget: withShowcaseViewToggle(adapter.toWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_COMBO)),
3455
+ canvasItem: { col: 1, row: 25, colSpan: 12, rowSpan: 4 },
3456
+ },
3457
+ ], [
3458
+ {
3459
+ from: { widget: 'monthly-revenue-chart', output: 'pointClick' },
3460
+ to: { widget: 'chart-event-probe', input: 'value' },
3461
+ },
3462
+ {
3463
+ from: { widget: 'monthly-revenue-chart', output: 'pointClick' },
3464
+ to: { widget: 'chart-drilldown-panel', input: 'selection' },
3465
+ },
3466
+ ]);
3467
+ }
3468
+ function buildCanvasPage(entries, connections) {
3365
3469
  return {
3366
- widgets: [
3367
- withShowcaseViewToggle(adapter.toGridWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_BAR)),
3368
- buildDrilldownGridWidget(),
3369
- withShowcaseViewToggle(adapter.toGridWidgetInstance({
3370
- ...PRAXIS_CHART_BACKEND_MOCK_TIMESERIES,
3371
- widget: {
3372
- ...PRAXIS_CHART_BACKEND_MOCK_TIMESERIES.widget,
3373
- layout: { col: 1, row: 5, colSpan: 6, rowSpan: 4 },
3374
- },
3375
- })),
3376
- buildProbeGridWidget(),
3377
- withShowcaseViewToggle(adapter.toGridWidgetInstance({
3378
- ...PRAXIS_CHART_BACKEND_MOCK_DONUT,
3379
- widget: {
3380
- ...PRAXIS_CHART_BACKEND_MOCK_DONUT.widget,
3381
- layout: { col: 7, row: 5, colSpan: 6, rowSpan: 4 },
3382
- },
3383
- })),
3384
- withShowcaseViewToggle(adapter.toGridWidgetInstance({
3385
- ...PRAXIS_CHART_BACKEND_MOCK_HORIZONTAL_BAR,
3386
- widget: {
3387
- ...PRAXIS_CHART_BACKEND_MOCK_HORIZONTAL_BAR.widget,
3388
- layout: { col: 1, row: 9, colSpan: 6, rowSpan: 4 },
3389
- },
3390
- })),
3391
- withShowcaseViewToggle(adapter.toGridWidgetInstance({
3392
- ...PRAXIS_CHART_BACKEND_MOCK_STACKED_AREA,
3393
- widget: {
3394
- ...PRAXIS_CHART_BACKEND_MOCK_STACKED_AREA.widget,
3395
- layout: { col: 1, row: 13, colSpan: 12, rowSpan: 4 },
3396
- },
3397
- })),
3398
- withShowcaseViewToggle(adapter.toGridWidgetInstance({
3399
- ...PRAXIS_CHART_BACKEND_MOCK_MULTI_METRIC_BAR,
3400
- widget: {
3401
- ...PRAXIS_CHART_BACKEND_MOCK_MULTI_METRIC_BAR.widget,
3402
- layout: { col: 1, row: 17, colSpan: 12, rowSpan: 4 },
3403
- },
3404
- })),
3405
- withShowcaseViewToggle(adapter.toGridWidgetInstance({
3406
- ...PRAXIS_CHART_BACKEND_MOCK_SCATTER,
3407
- widget: {
3408
- ...PRAXIS_CHART_BACKEND_MOCK_SCATTER.widget,
3409
- layout: { col: 1, row: 21, colSpan: 12, rowSpan: 4 },
3410
- },
3411
- })),
3412
- withShowcaseViewToggle(adapter.toGridWidgetInstance({
3413
- ...PRAXIS_CHART_BACKEND_MOCK_COMBO,
3414
- widget: {
3415
- ...PRAXIS_CHART_BACKEND_MOCK_COMBO.widget,
3416
- layout: { col: 1, row: 25, colSpan: 12, rowSpan: 4 },
3417
- },
3418
- })),
3419
- ],
3420
- connections: [
3421
- {
3422
- from: { widget: 'monthly-revenue-chart', output: 'pointClick' },
3423
- to: { widget: 'chart-event-probe', input: 'value' },
3424
- },
3425
- {
3426
- from: { widget: 'monthly-revenue-chart', output: 'pointClick' },
3427
- to: { widget: 'chart-drilldown-panel', input: 'selection' },
3428
- },
3429
- ],
3430
- options: {
3431
- cols: 12,
3432
- rowHeight: 88,
3433
- gap: 16,
3470
+ widgets: entries.map((entry) => entry.widget),
3471
+ connections,
3472
+ canvas: {
3473
+ mode: 'grid',
3474
+ columns: 12,
3475
+ rowUnit: '88px',
3476
+ gap: '16px',
3477
+ items: Object.fromEntries(entries.map((entry) => [entry.widget.key, entry.canvasItem])),
3434
3478
  },
3435
3479
  };
3436
3480
  }
3437
- function buildDrilldownGridWidget() {
3481
+ function buildDrilldownWidget() {
3438
3482
  return {
3439
3483
  key: 'chart-drilldown-panel',
3440
3484
  definition: {
@@ -3444,14 +3488,13 @@ function buildDrilldownGridWidget() {
3444
3488
  selection: null,
3445
3489
  },
3446
3490
  },
3447
- layout: { col: 7, row: 1, colSpan: 6, rowSpan: 4 },
3448
3491
  shell: {
3449
3492
  title: 'Local Drill-down',
3450
3493
  subtitle: 'Filtrado por pointClick do chart principal',
3451
3494
  },
3452
3495
  };
3453
3496
  }
3454
- function buildProbeGridWidget() {
3497
+ function buildProbeWidget() {
3455
3498
  return {
3456
3499
  key: 'chart-event-probe',
3457
3500
  definition: {
@@ -3461,7 +3504,6 @@ function buildProbeGridWidget() {
3461
3504
  value: 'Clique em uma barra para inspecionar o payload emitido.',
3462
3505
  },
3463
3506
  },
3464
- layout: { col: 7, row: 9, colSpan: 6, rowSpan: 3 },
3465
3507
  shell: {
3466
3508
  title: 'Runtime Probe',
3467
3509
  subtitle: 'Conectado via WidgetDefinition.connections',
@@ -3577,63 +3619,43 @@ class PraxisChartCompositionShowcaseComponent {
3577
3619
  return buildPraxisChartMockWidgetPage(this.backendPayloadAdapter);
3578
3620
  }
3579
3621
  }, ...(ngDevMode ? [{ debugName: "widgetPage" }] : []));
3580
- gridPage = computed(() => {
3622
+ canvasPage = computed(() => {
3581
3623
  switch (this.scenarioMode()) {
3582
3624
  case 'interactive':
3583
- return buildPraxisChartInteractiveGridPage(this.backendPayloadAdapter);
3625
+ return buildPraxisChartInteractiveCanvasPage(this.backendPayloadAdapter);
3584
3626
  case 'empty':
3585
- return {
3586
- ...buildPraxisChartMockGridPage(this.backendPayloadAdapter),
3587
- widgets: [
3588
- this.backendPayloadAdapter.toGridWidgetInstance({
3589
- ...PRAXIS_CHART_BACKEND_MOCK_BAR,
3590
- data: [],
3591
- }),
3592
- this.backendPayloadAdapter.toGridWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_TIMESERIES),
3593
- this.backendPayloadAdapter.toGridWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_DONUT),
3594
- ],
3595
- };
3627
+ return this.buildScenarioCanvasPage({
3628
+ ...PRAXIS_CHART_BACKEND_MOCK_BAR,
3629
+ data: [],
3630
+ });
3596
3631
  case 'loading':
3597
- return {
3598
- ...buildPraxisChartMockGridPage(this.backendPayloadAdapter),
3599
- widgets: [
3600
- this.backendPayloadAdapter.toGridWidgetInstance({
3601
- ...PRAXIS_CHART_BACKEND_MOCK_BAR,
3602
- data: [],
3603
- widget: {
3604
- ...PRAXIS_CHART_BACKEND_MOCK_BAR.widget,
3605
- runtime: {
3606
- preferredLoadState: 'loading',
3607
- },
3608
- },
3609
- }),
3610
- this.backendPayloadAdapter.toGridWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_TIMESERIES),
3611
- this.backendPayloadAdapter.toGridWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_DONUT),
3612
- ],
3613
- };
3632
+ return this.buildScenarioCanvasPage({
3633
+ ...PRAXIS_CHART_BACKEND_MOCK_BAR,
3634
+ data: [],
3635
+ widget: {
3636
+ ...PRAXIS_CHART_BACKEND_MOCK_BAR.widget,
3637
+ runtime: {
3638
+ preferredLoadState: 'loading',
3639
+ },
3640
+ },
3641
+ });
3614
3642
  case 'error':
3615
- return {
3616
- ...buildPraxisChartMockGridPage(this.backendPayloadAdapter),
3617
- widgets: [
3618
- this.backendPayloadAdapter.toGridWidgetInstance({
3619
- ...PRAXIS_CHART_BACKEND_MOCK_BAR,
3620
- data: [],
3621
- widget: {
3622
- ...PRAXIS_CHART_BACKEND_MOCK_BAR.widget,
3623
- runtime: {
3624
- preferredLoadState: 'error',
3625
- },
3626
- },
3627
- }),
3628
- this.backendPayloadAdapter.toGridWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_TIMESERIES),
3629
- this.backendPayloadAdapter.toGridWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_DONUT),
3630
- ],
3631
- };
3643
+ return this.buildScenarioCanvasPage({
3644
+ ...PRAXIS_CHART_BACKEND_MOCK_BAR,
3645
+ data: [],
3646
+ widget: {
3647
+ ...PRAXIS_CHART_BACKEND_MOCK_BAR.widget,
3648
+ runtime: {
3649
+ preferredLoadState: 'error',
3650
+ },
3651
+ },
3652
+ });
3632
3653
  case 'baseline':
3633
3654
  default:
3634
- return buildPraxisChartMockGridPage(this.backendPayloadAdapter);
3655
+ return buildPraxisChartMockCanvasPage(this.backendPayloadAdapter);
3635
3656
  }
3636
- }, ...(ngDevMode ? [{ debugName: "gridPage" }] : []));
3657
+ }, ...(ngDevMode ? [{ debugName: "canvasPage" }] : []));
3658
+ resolvedPage = computed(() => (this.layoutMode() === 'canvas' ? this.canvasPage() : this.widgetPage()), ...(ngDevMode ? [{ debugName: "resolvedPage" }] : []));
3637
3659
  payloadTitle = computed(() => {
3638
3660
  switch (this.payloadMode()) {
3639
3661
  case 'timeseries':
@@ -3677,8 +3699,28 @@ class PraxisChartCompositionShowcaseComponent {
3677
3699
  return PRAXIS_CHART_BACKEND_MOCK_BAR;
3678
3700
  }
3679
3701
  }, ...(ngDevMode ? [{ debugName: "selectedPayload" }] : []));
3702
+ buildScenarioCanvasPage(primaryPayload) {
3703
+ const base = buildPraxisChartMockCanvasPage(this.backendPayloadAdapter);
3704
+ const widgets = [
3705
+ this.backendPayloadAdapter.toWidgetInstance(primaryPayload),
3706
+ this.backendPayloadAdapter.toWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_TIMESERIES),
3707
+ this.backendPayloadAdapter.toWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_DONUT),
3708
+ ];
3709
+ return {
3710
+ ...base,
3711
+ widgets,
3712
+ canvas: {
3713
+ ...base.canvas,
3714
+ items: {
3715
+ [widgets[0].key]: this.backendPayloadAdapter.toCanvasItem(primaryPayload),
3716
+ [widgets[1].key]: this.backendPayloadAdapter.toCanvasItem(PRAXIS_CHART_BACKEND_MOCK_TIMESERIES),
3717
+ [widgets[2].key]: this.backendPayloadAdapter.toCanvasItem(PRAXIS_CHART_BACKEND_MOCK_DONUT),
3718
+ },
3719
+ },
3720
+ };
3721
+ }
3680
3722
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartCompositionShowcaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3681
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PraxisChartCompositionShowcaseComponent, isStandalone: true, selector: "praxis-chart-composition-showcase", inputs: { enableCustomization: { classPropertyName: "enableCustomization", publicName: "enableCustomization", isSignal: true, isRequired: false, transformFunction: null } }, providers: [providePraxisCharts()], ngImport: i0, template: `
3723
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.17", type: PraxisChartCompositionShowcaseComponent, isStandalone: true, selector: "praxis-chart-composition-showcase", inputs: { enableCustomization: { classPropertyName: "enableCustomization", publicName: "enableCustomization", isSignal: true, isRequired: false, transformFunction: null } }, providers: [providePraxisCharts()], ngImport: i0, template: `
3682
3724
  <section class="showcase-shell">
3683
3725
  <header class="showcase-hero">
3684
3726
  <div class="showcase-copy">
@@ -3698,10 +3740,10 @@ class PraxisChartCompositionShowcaseComponent {
3698
3740
  <span>Layout</span>
3699
3741
  <div class="control-buttons">
3700
3742
  <button type="button" [class.active]="layoutMode() === 'widget'" (click)="layoutMode.set('widget')">
3701
- Widget Page
3743
+ Widget Layout
3702
3744
  </button>
3703
- <button type="button" [class.active]="layoutMode() === 'grid'" (click)="layoutMode.set('grid')">
3704
- Grid Page
3745
+ <button type="button" [class.active]="layoutMode() === 'canvas'" (click)="layoutMode.set('canvas')">
3746
+ Canvas Layout
3705
3747
  </button>
3706
3748
  </div>
3707
3749
  </div>
@@ -3764,23 +3806,16 @@ class PraxisChartCompositionShowcaseComponent {
3764
3806
  <div class="panel-header">
3765
3807
  <div>
3766
3808
  <p class="panel-kicker">Runtime</p>
3767
- <h3>{{ layoutMode() === 'widget' ? 'DynamicWidgetPage' : 'DynamicGridPage' }}</h3>
3809
+ <h3>{{ layoutMode() === 'widget' ? 'DynamicWidgetPage / Layout' : 'DynamicWidgetPage / Canvas' }}</h3>
3768
3810
  </div>
3769
3811
  <span class="panel-chip">{{ layoutMode() }} / {{ scenarioMode() }}</span>
3770
3812
  </div>
3771
3813
 
3772
- @if (layoutMode() === 'widget') {
3773
- <praxis-dynamic-page
3774
- [page]="widgetPage()"
3775
- [context]="runtimeContext()"
3776
- [autoPersist]="false"
3777
- ></praxis-dynamic-page>
3778
- } @else {
3779
- <praxis-dynamic-grid-page
3780
- [page]="gridPage()"
3781
- [context]="runtimeContext()"
3782
- ></praxis-dynamic-grid-page>
3783
- }
3814
+ <praxis-dynamic-page
3815
+ [page]="resolvedPage()"
3816
+ [context]="runtimeContext()"
3817
+ [autoPersist]="false"
3818
+ ></praxis-dynamic-page>
3784
3819
  </article>
3785
3820
 
3786
3821
  <article class="payload-panel">
@@ -3797,11 +3832,11 @@ class PraxisChartCompositionShowcaseComponent {
3797
3832
  </article>
3798
3833
  </div>
3799
3834
  </section>
3800
- `, 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: "ngmodule", type: CommonModule }, { kind: "component", type: DynamicWidgetPageComponent, selector: "praxis-dynamic-page", inputs: ["page", "context", "strictValidation", "enableCustomization", "showPageSettingsButton", "shellEditorComponent", "pageEditorComponent", "autoPersist", "pageIdentity", "componentInstanceId"], outputs: ["pageChange"] }, { kind: "component", type: DynamicGridPageComponent, selector: "praxis-dynamic-grid-page", inputs: ["page", "context", "strictValidation", "gridOptions", "enableCustomization"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3835
+ `, 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: "ngmodule", type: CommonModule }, { kind: "component", type: DynamicWidgetPageComponent, selector: "praxis-dynamic-page", inputs: ["page", "context", "strictValidation", "enableCustomization", "showPageSettingsButton", "shellEditorComponent", "pageEditorComponent", "autoPersist", "pageIdentity", "componentInstanceId"], outputs: ["pageChange", "widgetDiagnosticsChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3801
3836
  }
3802
3837
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartCompositionShowcaseComponent, decorators: [{
3803
3838
  type: Component,
3804
- args: [{ selector: 'praxis-chart-composition-showcase', standalone: true, imports: [CommonModule, DynamicWidgetPageComponent, DynamicGridPageComponent], providers: [providePraxisCharts()], changeDetection: ChangeDetectionStrategy.OnPush, template: `
3839
+ args: [{ selector: 'praxis-chart-composition-showcase', standalone: true, imports: [CommonModule, DynamicWidgetPageComponent], providers: [providePraxisCharts()], changeDetection: ChangeDetectionStrategy.OnPush, template: `
3805
3840
  <section class="showcase-shell">
3806
3841
  <header class="showcase-hero">
3807
3842
  <div class="showcase-copy">
@@ -3821,10 +3856,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
3821
3856
  <span>Layout</span>
3822
3857
  <div class="control-buttons">
3823
3858
  <button type="button" [class.active]="layoutMode() === 'widget'" (click)="layoutMode.set('widget')">
3824
- Widget Page
3859
+ Widget Layout
3825
3860
  </button>
3826
- <button type="button" [class.active]="layoutMode() === 'grid'" (click)="layoutMode.set('grid')">
3827
- Grid Page
3861
+ <button type="button" [class.active]="layoutMode() === 'canvas'" (click)="layoutMode.set('canvas')">
3862
+ Canvas Layout
3828
3863
  </button>
3829
3864
  </div>
3830
3865
  </div>
@@ -3887,23 +3922,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
3887
3922
  <div class="panel-header">
3888
3923
  <div>
3889
3924
  <p class="panel-kicker">Runtime</p>
3890
- <h3>{{ layoutMode() === 'widget' ? 'DynamicWidgetPage' : 'DynamicGridPage' }}</h3>
3925
+ <h3>{{ layoutMode() === 'widget' ? 'DynamicWidgetPage / Layout' : 'DynamicWidgetPage / Canvas' }}</h3>
3891
3926
  </div>
3892
3927
  <span class="panel-chip">{{ layoutMode() }} / {{ scenarioMode() }}</span>
3893
3928
  </div>
3894
3929
 
3895
- @if (layoutMode() === 'widget') {
3896
- <praxis-dynamic-page
3897
- [page]="widgetPage()"
3898
- [context]="runtimeContext()"
3899
- [autoPersist]="false"
3900
- ></praxis-dynamic-page>
3901
- } @else {
3902
- <praxis-dynamic-grid-page
3903
- [page]="gridPage()"
3904
- [context]="runtimeContext()"
3905
- ></praxis-dynamic-grid-page>
3906
- }
3930
+ <praxis-dynamic-page
3931
+ [page]="resolvedPage()"
3932
+ [context]="runtimeContext()"
3933
+ [autoPersist]="false"
3934
+ ></praxis-dynamic-page>
3907
3935
  </article>
3908
3936
 
3909
3937
  <article class="payload-panel">
@@ -4971,5 +4999,4 @@ var praxisChartConfigEditor = /*#__PURE__*/Object.freeze({
4971
4999
  * Generated bundle index. Do not edit.
4972
5000
  */
4973
5001
 
4974
- export { ChartContractNormalizerService, ChartContractValidationService, ChartEditorDefaultsService, ChartEditorPreviewMapperService, PRAXIS_CHARTS_I18N, PRAXIS_CHART_BACKEND_MOCK_BAR, PRAXIS_CHART_BACKEND_MOCK_COMBO, PRAXIS_CHART_BACKEND_MOCK_DONUT, PRAXIS_CHART_BACKEND_MOCK_HORIZONTAL_BAR, PRAXIS_CHART_BACKEND_MOCK_MULTI_METRIC_BAR, PRAXIS_CHART_BACKEND_MOCK_SCATTER, PRAXIS_CHART_BACKEND_MOCK_STACKED_AREA, PRAXIS_CHART_BACKEND_MOCK_TIMESERIES, PRAXIS_CHART_COMPONENT_METADATA, PRAXIS_CHART_DRILLDOWN_DATA_BY_MONTH, PRAXIS_CHART_DRILLDOWN_PANEL_METADATA, PRAXIS_CHART_ENGINE, PRAXIS_CHART_STATE_PROBE_COMPONENT_METADATA, PraxisChartBackendPayloadAdapterService, PraxisChartCanonicalContractMapperService, PraxisChartComponent, PraxisChartCompositionShowcaseComponent, PraxisChartConfigEditor, PraxisChartDataTransformerService, PraxisChartDrilldownPanelComponent, PraxisChartOptionBuilderService, PraxisChartSchemaMapperService, PraxisChartStateProbeComponent, PraxisChartStatsApiService, buildPraxisChartInteractiveGridPage, buildPraxisChartInteractiveWidgetPage, buildPraxisChartMockGridPage, buildPraxisChartMockWidgetPage, createPraxisChartsI18nConfig, providePraxisChartDrilldownPanelMetadata, providePraxisChartStateProbeMetadata, providePraxisCharts, providePraxisChartsI18n, providePraxisChartsMetadata, resolvePraxisChartsText };
4975
- //# sourceMappingURL=praxisui-charts.mjs.map
5002
+ export { ChartContractNormalizerService, ChartContractValidationService, ChartEditorDefaultsService, ChartEditorPreviewMapperService, PRAXIS_CHARTS_I18N, PRAXIS_CHART_BACKEND_MOCK_BAR, PRAXIS_CHART_BACKEND_MOCK_COMBO, PRAXIS_CHART_BACKEND_MOCK_DONUT, PRAXIS_CHART_BACKEND_MOCK_HORIZONTAL_BAR, PRAXIS_CHART_BACKEND_MOCK_MULTI_METRIC_BAR, PRAXIS_CHART_BACKEND_MOCK_SCATTER, PRAXIS_CHART_BACKEND_MOCK_STACKED_AREA, PRAXIS_CHART_BACKEND_MOCK_TIMESERIES, PRAXIS_CHART_COMPONENT_METADATA, PRAXIS_CHART_DRILLDOWN_DATA_BY_MONTH, PRAXIS_CHART_DRILLDOWN_PANEL_METADATA, PRAXIS_CHART_ENGINE, PRAXIS_CHART_STATE_PROBE_COMPONENT_METADATA, PraxisChartBackendPayloadAdapterService, PraxisChartCanonicalContractMapperService, PraxisChartComponent, PraxisChartCompositionShowcaseComponent, PraxisChartConfigEditor, PraxisChartDataTransformerService, PraxisChartDrilldownPanelComponent, PraxisChartOptionBuilderService, PraxisChartSchemaMapperService, PraxisChartStateProbeComponent, PraxisChartStatsApiService, buildPraxisChartInteractiveCanvasPage, buildPraxisChartInteractiveWidgetPage, buildPraxisChartMockCanvasPage, buildPraxisChartMockWidgetPage, createPraxisChartsI18nConfig, providePraxisChartDrilldownPanelMetadata, providePraxisChartStateProbeMetadata, providePraxisCharts, providePraxisChartsI18n, providePraxisChartsMetadata, resolvePraxisChartsText };