@firestitch/report 18.1.0 → 18.2.1

package/fesm2022/{firestitch-report-firestitch-report-BSGrWdzK.mjs → firestitch-report-firestitch-report-eTeJyMPo.mjs}

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, Component, ChangeDetectionStrategy, Input, DestroyRef, ViewChild, EventEmitter, ChangeDetectorRef, NgZone, ElementRef, Output, HostBinding, ViewChildren, signal, CUSTOM_ELEMENTS_SCHEMA, model, input, computed, viewChild, effect, output } from '@angular/core';
+import { inject, Injectable, Component, ChangeDetectionStrategy, Input, signal, DestroyRef, ViewChild, EventEmitter, ChangeDetectorRef, NgZone, ElementRef, Output, HostBinding, ViewChildren, CUSTOM_ELEMENTS_SCHEMA, model, input, computed, viewChild, effect, output } from '@angular/core';
 import * as i1$3 from '@angular/forms';
 import { FormsModule, ControlContainer, NgForm } from '@angular/forms';
-import { MAT_DIALOG_DATA, MatDialogRef, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialog, MatDialogClose } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose, MatDialog } from '@angular/material/dialog';
 import * as i4$1 from '@angular/material/icon';
 import { MatIcon, MatIconModule } from '@angular/material/icon';
 import * as i2$3 from '@firestitch/autocomplete-chips';
@@ -13,7 +13,7 @@ import * as i2$1 from '@firestitch/menu';
 import { FsMenuModule } from '@firestitch/menu';
 import { FsProcess } from '@firestitch/process';
 import { FsPrompt } from '@firestitch/prompt';
-import { map, shareReplay, filter, tap, switchMap as switchMap$1, mergeMap, toArray, catchError, finalize, takeUntil, take } from 'rxjs/operators';
+import { map, shareReplay, filter, switchMap as switchMap$1, tap, mergeMap, toArray, catchError, finalize, takeUntil, take } from 'rxjs/operators';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NgxEchartsDirective, provideEchartsCore } from 'ngx-echarts';
 import { FsAiChatComponent } from '@firestitch/ai';
@@ -185,6 +185,15 @@ class ReportData {
             ...config,
         });
     }
+    // Delete one component from the canvas, together with its filters and any
+    // filter group they leave empty. Soft server-side, but there is no restore
+    // anywhere in the UI, so the dialog's confirm presents it as permanent.
+    deleteComponent(reportId, componentId, config = {}) {
+        return this._api.delete(this._path(`${reportId}/components/${componentId}`), {}, {
+            key: 'component',
+            ...config,
+        });
+    }
     // Soft-delete: the report leaves the listing but keeps its pages and
     // components, so undelete() brings back the same document.
     delete(reportId, config = {}) {
@@ -951,8 +960,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 // colorBy applies only to single-dimension bar charts, and only when splitBy
 // isn't already driving multiple series: it colors each bar by its category and
 // shows a legend (one series per category, overlapped to full width).
+//
+// It is the DEFAULT for a categorical bar chart rather than something the config
+// has to ask for. A bar chart whose x-axis is a category — provinces, statuses,
+// clinics — is comparing those categories to each other, and one flat color with
+// no legend is the wrong reading of it in essentially every case. Requiring
+// colorBy to opt in meant every such chart rendered monochrome unless whoever
+// wrote the config remembered an optional property, which is a default set the
+// wrong way round: the common case should not need the flag.
+//
+// A TIME axis is excluded: consecutive periods are one series moving, not
+// categories being compared, and coloring each month differently reads as
+// unrelated groups. Explicitly opting out — colorBy: {column: ''} or a
+// config.legend of 'hidden' — still wins, so a caller that wants one flat color
+// can say so.
 function isColorBy(config) {
-    return !!config.colorBy?.column && !config.splitBy?.column && (config.chartType ?? 'bar') === 'bar';
+    if (config.splitBy?.column || (config.chartType ?? 'bar') !== 'bar') {
+        return false;
+    }
+    if (config.colorBy) {
+        return !!config.colorBy.column;
+    }
+    return (config.xAxis?.kind ?? 'category') === 'category'
+        && !config.xAxis?.granularity
+        && (config.measures?.length ?? 1) <= 1;
+}
+// The column colorBy groups by — its own when the config named one, otherwise
+// the x-axis it defaults to coloring.
+function colorByColumn(config) {
+    return isColorBy(config)
+        ? (config.colorBy?.column || config.xAxis?.column)
+        : undefined;
 }
 function extractChartSeries(component, data) {
     const config = component.config;
@@ -961,7 +999,7 @@ function extractChartSeries(component, data) {
     // colorBy emits one series per category too (so each bar carries its own
     // color + legend entry), but the bars are overlapped to full width in
     // buildAxisOption rather than laid side-by-side. splitBy wins if both are set.
-    const groupColumn = splitColumn || (isColorBy(config) ? config.colorBy?.column : undefined);
+    const groupColumn = splitColumn || colorByColumn(config);
     const measures = config.measures?.length
         ? config.measures
         : [{ column: data.columns[data.columns.length - 1] }];
@@ -1365,13 +1403,29 @@ class ComponentListComponent {
     groups;
     listComponent;
     listConfig;
-    columns = [];
+    // A plain list's columns are authored and fixed at init. A cross-tab's are
+    // the pivot dimension's VALUES, so they arrive with the rows and change
+    // whenever the filters do — which is why this is a signal rather than the
+    // one-shot read it used to be.
+    columns = signal([]);
+    // A cross-tab sorts only by its row-key column: every other header is a
+    // pivot value, and the server orders the long rows before pivoting, so a
+    // click on "Mar 2026" has nothing to order by.
+    pivoted = signal(false);
+    // A cut result is worse for a grid than for a list: the cut lands on the LONG
+    // rows before the reshape, so a pivot value living only in the tail vanishes
+    // as a whole COLUMN and straddled cells come back blank, indistinguishable
+    // from a real zero. The parent's truncation banner never fires for a list
+    // (it only renders what _load() fetched, which lists skip), so the warning
+    // belongs here.
+    truncated = signal(false);
     _reportData = inject(ReportData);
     _filterState = inject(ReportFilterStateService);
     _destroyRef = inject(DestroyRef);
     ngOnInit() {
         const config = (this.component.config ?? {});
-        this.columns = config.columns ?? [];
+        this.pivoted.set(!!config.pivotBy?.column);
+        this.columns.set(config.columns ?? []);
         this._initListConfig(config);
         // Report-level filter changes that scope this component re-run the list.
         this._filterState.changesFor(this.component)
@@ -1481,14 +1535,52 @@ class ComponentListComponent {
         }
         return this._reportData
             .componentData(this.reportId, this.component.id, [...resolved.values()], state)
-            .pipe(map$1((data) => ({
-            data: data.rows ?? [],
-            paging: {
-                limit: data.paging?.pageSize ?? state.pageSize,
-                records: data.paging?.total ?? (data.rows?.length ?? 0),
-                page: data.paging?.page ?? state.page,
-            },
-        })));
+            .pipe(map$1((data) => {
+            // A cross-tab's headers come back with the rows: the row-key column
+            // first, then one per pivot value. Re-read them on every fetch, since
+            // a filter change can add or remove a column.
+            if (this.pivoted()) {
+                this.columns.set(this._pivotColumns(data));
+                this.truncated.set(!!data.truncated);
+            }
+            return {
+                data: data.rows ?? [],
+                paging: {
+                    limit: data.paging?.pageSize ?? state.pageSize,
+                    records: data.paging?.total ?? (data.rows?.length ?? 0),
+                    page: data.paging?.page ?? state.page,
+                },
+            };
+        }));
+    }
+    // A cross-tab's columns, built from the wire. The first is the row key and
+    // keeps its authored label; the rest are pivot VALUES used as headings. When
+    // the pivot axis is a time dimension the server sends the grain it bucketed
+    // at, so a period-start like "2026-01-01" is shown as "Jan 2026" — the same
+    // formatter the chart's x-axis uses, so a grid and a chart of the same query
+    // label their periods identically.
+    _pivotColumns(data) {
+        const config = (this.component.config ?? {});
+        const granularity = data.granularity;
+        const multiYear = this._spansMultipleYears(data.columns ?? []);
+        return (data.columns ?? []).map((column, index) => {
+            if (index === 0) {
+                return { column, label: config.rowBy?.label || column };
+            }
+            return {
+                column,
+                label: granularity ? formatPeriodLabel(column, granularity, multiYear) : column,
+            };
+        });
+    }
+    // Whether the period columns cross a year boundary, which decides if the
+    // formatter appends the year to each heading.
+    _spansMultipleYears(columns) {
+        const years = new Set(columns
+            .map((column) => /^(\d{4})-\d{2}-\d{2}/.exec(column))
+            .filter(Boolean)
+            .map((match) => match[1]));
+        return years.size > 1;
     }
     // The list's own FsFilter values, read back out of the fetch query by the
     // `f<filterId>` naming convention.
@@ -1525,14 +1617,14 @@ class ComponentListComponent {
         return values;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ComponentListComponent, isStandalone: true, selector: "app-report-component-list", inputs: { reportId: "reportId", component: "component", groups: "groups" }, viewQueries: [{ propertyName: "listComponent", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "<fs-list [config]=\"listConfig\">\n  @for (column of columns; track column.column) {\n    <fs-list-column\n      [name]=\"column.column\"\n      [title]=\"column.label || column.column\"\n      [sortable]=\"true\">\n      <ng-template\n        fs-list-cell\n        let-row=\"row\">\n        @if (column.format === 'date') {\n          {{ row[column.column] | date: 'mediumDate' }}\n        } @else {\n          {{ row[column.column] }}\n        }\n      </ng-template>\n    </fs-list-column>\n  }\n</fs-list>\n", styles: [":host{display:block;width:100%;height:100%;min-height:0}:host ::ng-deep fs-list{display:flex;flex-direction:column;height:100%;min-height:0}:host ::ng-deep fs-list .fs-list-container{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;height:100%}:host ::ng-deep fs-list .fs-list-header-container{flex:0 0 auto}:host ::ng-deep fs-list .fs-list-container .fs-list-table-container{flex:1 1 auto;min-height:0;overflow-y:auto!important}:host ::ng-deep fs-list .fs-list-table thead th{position:sticky;top:0;z-index:1;background-color:#fff}:host ::ng-deep fs-list fs-list-pagination{flex:0 0 auto}:host ::ng-deep fs-list .fs-list-load-more{position:sticky;bottom:0;background-color:#fff}:host ::ng-deep fs-list .fs-list-load-more button{margin-top:0}\n"], dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: FsListModule }, { kind: "component", type: i1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines", "cellRowType"], outputs: ["filtersReady"] }, { kind: "directive", type: i1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i1.FsListCellDirective, selector: "[fs-list-cell],[fsListCell]", inputs: ["colspan", "align", "class", "fsListCell", "configTyping"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ComponentListComponent, isStandalone: true, selector: "app-report-component-list", inputs: { reportId: "reportId", component: "component", groups: "groups" }, viewQueries: [{ propertyName: "listComponent", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "@if (truncated()) {\n  <div class=\"pivot-truncated\">\n    This grid was built from a partial result, so some columns or values may be missing. Narrow it with a filter.\n  </div>\n}\n\n<fs-list [config]=\"listConfig\">\n  @for (column of columns(); track column.column) {\n    <fs-list-column\n      [name]=\"column.column\"\n      [title]=\"column.label || column.column\"\n      [sortable]=\"!pivoted() || $first\">\n      <ng-template\n        fs-list-cell\n        let-row=\"row\">\n        @if (column.format === 'date') {\n          {{ row[column.column] | date: 'mediumDate' }}\n        } @else {\n          {{ row[column.column] }}\n        }\n      </ng-template>\n    </fs-list-column>\n  }\n</fs-list>\n", styles: [":host{display:block;width:100%;height:100%;min-height:0}:host ::ng-deep fs-list{display:flex;flex-direction:column;height:100%;min-height:0}:host ::ng-deep fs-list .fs-list-container{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;height:100%}:host ::ng-deep fs-list .fs-list-header-container{flex:0 0 auto}:host ::ng-deep fs-list .fs-list-container .fs-list-table-container{flex:1 1 auto;min-height:0;overflow-y:auto!important}:host ::ng-deep fs-list .fs-list-table thead th{position:sticky;top:0;z-index:1;background-color:#fff}:host ::ng-deep fs-list fs-list-pagination{flex:0 0 auto}:host ::ng-deep fs-list .fs-list-load-more{position:sticky;bottom:0;background-color:#fff}:host ::ng-deep fs-list .fs-list-load-more button{margin-top:0}.pivot-truncated{flex:0 0 auto;padding:8px 12px;margin-bottom:8px;border-radius:4px;background-color:#fff4e5;color:#663c00}\n"], dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: FsListModule }, { kind: "component", type: i1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines", "cellRowType"], outputs: ["filtersReady"] }, { kind: "directive", type: i1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i1.FsListCellDirective, selector: "[fs-list-cell],[fsListCell]", inputs: ["colspan", "align", "class", "fsListCell", "configTyping"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-report-component-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         DatePipe,
                         FsListModule,
-                    ], template: "<fs-list [config]=\"listConfig\">\n  @for (column of columns; track column.column) {\n    <fs-list-column\n      [name]=\"column.column\"\n      [title]=\"column.label || column.column\"\n      [sortable]=\"true\">\n      <ng-template\n        fs-list-cell\n        let-row=\"row\">\n        @if (column.format === 'date') {\n          {{ row[column.column] | date: 'mediumDate' }}\n        } @else {\n          {{ row[column.column] }}\n        }\n      </ng-template>\n    </fs-list-column>\n  }\n</fs-list>\n", styles: [":host{display:block;width:100%;height:100%;min-height:0}:host ::ng-deep fs-list{display:flex;flex-direction:column;height:100%;min-height:0}:host ::ng-deep fs-list .fs-list-container{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;height:100%}:host ::ng-deep fs-list .fs-list-header-container{flex:0 0 auto}:host ::ng-deep fs-list .fs-list-container .fs-list-table-container{flex:1 1 auto;min-height:0;overflow-y:auto!important}:host ::ng-deep fs-list .fs-list-table thead th{position:sticky;top:0;z-index:1;background-color:#fff}:host ::ng-deep fs-list fs-list-pagination{flex:0 0 auto}:host ::ng-deep fs-list .fs-list-load-more{position:sticky;bottom:0;background-color:#fff}:host ::ng-deep fs-list .fs-list-load-more button{margin-top:0}\n"] }]
+                    ], template: "@if (truncated()) {\n  <div class=\"pivot-truncated\">\n    This grid was built from a partial result, so some columns or values may be missing. Narrow it with a filter.\n  </div>\n}\n\n<fs-list [config]=\"listConfig\">\n  @for (column of columns(); track column.column) {\n    <fs-list-column\n      [name]=\"column.column\"\n      [title]=\"column.label || column.column\"\n      [sortable]=\"!pivoted() || $first\">\n      <ng-template\n        fs-list-cell\n        let-row=\"row\">\n        @if (column.format === 'date') {\n          {{ row[column.column] | date: 'mediumDate' }}\n        } @else {\n          {{ row[column.column] }}\n        }\n      </ng-template>\n    </fs-list-column>\n  }\n</fs-list>\n", styles: [":host{display:block;width:100%;height:100%;min-height:0}:host ::ng-deep fs-list{display:flex;flex-direction:column;height:100%;min-height:0}:host ::ng-deep fs-list .fs-list-container{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;height:100%}:host ::ng-deep fs-list .fs-list-header-container{flex:0 0 auto}:host ::ng-deep fs-list .fs-list-container .fs-list-table-container{flex:1 1 auto;min-height:0;overflow-y:auto!important}:host ::ng-deep fs-list .fs-list-table thead th{position:sticky;top:0;z-index:1;background-color:#fff}:host ::ng-deep fs-list fs-list-pagination{flex:0 0 auto}:host ::ng-deep fs-list .fs-list-load-more{position:sticky;bottom:0;background-color:#fff}:host ::ng-deep fs-list .fs-list-load-more button{margin-top:0}.pivot-truncated{flex:0 0 auto;padding:8px 12px;margin-bottom:8px;border-radius:4px;background-color:#fff4e5;color:#663c00}\n"] }]
         }], propDecorators: { reportId: [{
                 type: Input
             }], component: [{
@@ -2049,6 +2141,10 @@ class ReportCanvasComponent {
     _destroyRef = inject(DestroyRef);
     _fitted = false;
     _previousPageCount = 0;
+    // The page id last announced through pageChanged, so a re-render that lands on
+    // the same page stays quiet — hosts reload on this and an unchanged page is
+    // not news.
+    _emittedPageId = null;
     ngOnChanges() {
         this.groups = new Map((this.report?.filterGroups ?? []).map((group) => [group.id, group]));
         const pageCount = this.report?.pages?.length ?? 0;
@@ -2072,6 +2168,16 @@ class ReportCanvasComponent {
         if (this.activePageIndex >= pageCount) {
             this.activePageIndex = 0;
         }
+        // Tell the host which page is open whenever that changes — including the
+        // FIRST time the report renders, not only when someone clicks a page.
+        // Hosts bind things to the open page (the report chat scopes its
+        // conversations to it), and without this they would sit on no page at all
+        // until the first manual page click.
+        const activePageId = this.activePage?.id ?? null;
+        if (activePageId !== this._emittedPageId) {
+            this._emittedPageId = activePageId;
+            this.pageChanged.emit(activePageId);
+        }
     }
     // Report heading size in px (config is points; the canvas renders at
     // 96px/in, so points × 96/72). Inherited by component titles via a CSS var.
@@ -2098,7 +2204,10 @@ class ReportCanvasComponent {
     selectPage(index) {
         this.activePageIndex = index;
         this.selectedComponentId = null;
-        this.pageChanged.emit(this.activePage?.id ?? null);
+        // Kept in step with the ngOnChanges announcement so the two can't disagree
+        // about what the host was last told.
+        this._emittedPageId = this.activePage?.id ?? null;
+        this.pageChanged.emit(this._emittedPageId);
     }
     // Append a blank page; the host re-fetches the report and ngOnChanges lands
     // the view on the new (last) page.
@@ -2395,7 +2504,7 @@ class ReportCanvasComponent {
         this._guides?.nativeElement?.replaceChildren();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportCanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ReportCanvasComponent, isStandalone: true, selector: "app-report-canvas", inputs: { report: "report", editMode: "editMode", pageId: "pageId" }, outputs: { componentSettings: "componentSettings", reportChanged: "reportChanged", editDone: "editDone", pageChanged: "pageChanged" }, viewQueries: [{ propertyName: "zoomPan", first: true, predicate: FsZoomPanComponent, descendants: true }, { propertyName: "_viewport", first: true, predicate: ["viewport"], descendants: true, static: true }, { propertyName: "_guides", first: true, predicate: ["guides"], descendants: true }, { propertyName: "_renderedComponents", predicate: ReportComponentComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"canvas\">\n  <div\n    #viewport\n    class=\"page-viewport\"\n    (pointerdown)=\"onCanvasPointerDown()\">\n    <fs-zoom-pan\n      [zoomMin]=\"0.1\"\n      [zoomMax]=\"3\"\n      (zoomed)=\"onZoomed($event)\">\n      @if (activePage; as page) {\n        <div\n          class=\"page\"\n          [class.flow]=\"isFlow\"\n          [class.editing]=\"editMode\"\n          [style.width.px]=\"report.pageWidth * PX\"\n          [style.height.px]=\"report.pageHeight * PX\"\n          [style.padding.px]=\"isFlow ? flowPadding * PX : 0\"\n          [style.--canvas-zoom]=\"zoom\"\n          [style.--report-heading-size.px]=\"headingSizePx\">\n          @if (isFlow) {\n            @for (component of flowComponents; track component.id) {\n              <app-report-component\n                class=\"flow-item\"\n                [reportId]=\"report.id\"\n                [component]=\"component\"\n                [groups]=\"groups\"\n                [editMode]=\"editMode\"\n                [layout]=\"'flow'\"\n                [zoom]=\"zoom\"\n                [snapper]=\"snapper\"\n                [selected]=\"component.id === selectedComponentId\"\n                [style.width.%]=\"component.flowWidth\"\n                [style.height.px]=\"component.autoHeight ? null : component.h * PX\"\n                (selectComponent)=\"selectComponent($event)\"\n                (positionChanged)=\"onPositionChanged($event)\"\n                (flowReorder)=\"onFlowReorder($event)\"\n                (openSettings)=\"componentSettings.emit($event)\">\n              </app-report-component>\n            }\n          } @else {\n            @for (component of page.components; track component.id) {\n              <app-report-component\n                [reportId]=\"report.id\"\n                [component]=\"component\"\n                [groups]=\"groups\"\n                [editMode]=\"editMode\"\n                [layout]=\"'freeform'\"\n                [zoom]=\"zoom\"\n                [snapper]=\"snapper\"\n                [selected]=\"component.id === selectedComponentId\"\n                [style.left.px]=\"component.x * PX\"\n                [style.top.px]=\"component.y * PX\"\n                [style.width.px]=\"component.w * PX\"\n                [style.height.px]=\"component.autoHeight ? null : component.h * PX\"\n                (selectComponent)=\"selectComponent($event)\"\n                (positionChanged)=\"onPositionChanged($event)\"\n                (openSettings)=\"componentSettings.emit($event)\">\n              </app-report-component>\n            }\n          }\n\n          <div\n            #guides\n            class=\"guides\">\n          </div>\n\n          @if (!page.components.length) {\n            <div class=\"page-empty\">\n              Ask the assistant to add a chart, list or KPI to this page.\n            </div>\n          }\n        </div>\n      }\n    </fs-zoom-pan>\n\n    @if (editMode) {\n      <button\n        mat-flat-button\n        type=\"button\"\n        color=\"primary\"\n        class=\"edit-done\"\n        matTooltip=\"Exit layout editing\"\n        (click)=\"editDone.emit()\">\n        <mat-icon>check</mat-icon>\n        Done editing\n      </button>\n    }\n  </div>\n\n  <div class=\"canvas-toolbar\">\n    <!-- Tabs are one horizontal drop list: dragging a chip reorders the pages.\n         The drop INDEX is computed along X (orientation), but the preview is\n         deliberately left unbounded on both axes \u2014 pinning it to the row with\n         cdkDragBoundary means the chip you are dragging covers the chips you\n         are dragging it past, and you cannot see where it is going to land. -->\n    <div\n      class=\"page-tabs\"\n      cdkDropList\n      cdkDropListOrientation=\"horizontal\"\n      (cdkDropListDropped)=\"onPageDropped($event)\">\n      @if ((report?.pages?.length ?? 0) > 1) {\n        @for (page of report.pages; track page.id; let index = $index) {\n          <!-- The chip is the drag handle AND the tab: clicking selects,\n               dragging reorders. The kebab lives inside it, so the whole\n               control stays one chip instead of growing a second button. -->\n          <div\n            cdkDrag\n            class=\"page-tab\"\n            [class.active]=\"index === activePageIndex\"\n            (click)=\"selectPage(index)\">\n            <span class=\"page-tab-label\">{{ pageLabel(page, index) }}</span>\n            <!-- The kebab opens the menu rather than starting a drag or\n                 switching pages, so it swallows its own click. -->\n            <span\n              class=\"page-tab-menu\"\n              [fsMenuTriggerFor]=\"pageMenu\"\n              (click)=\"$event.stopPropagation()\"\n              (mousedown)=\"$event.stopPropagation()\">\n              <mat-icon>more_vert</mat-icon>\n            </span>\n          </div>\n          <!-- Outside the chip: cdkDrag clones its host into the drag preview,\n               and a menu overlay anchored to a cloned trigger opens detached\n               from the real tab. -->\n          <fs-menu #pageMenu>\n            <ng-template\n              fs-menu-item\n              (click)=\"renamePage(page)\">\n              Edit name\n            </ng-template>\n            <ng-template\n              fs-menu-item\n              (click)=\"deletePage(page)\">\n              Delete\n            </ng-template>\n          </fs-menu>\n        }\n      }\n      <button\n        type=\"button\"\n        class=\"page-tab add-page\"\n        matTooltip=\"Add page\"\n        (click)=\"addPage()\">\n        <mat-icon>add</mat-icon>\n        Page\n      </button>\n    </div>\n\n    <div class=\"zoom-controls\">\n      <button\n        type=\"button\"\n        class=\"zoom-button\"\n        matTooltip=\"Zoom out\"\n        (click)=\"zoomOut()\">\n        <mat-icon>remove</mat-icon>\n      </button>\n      <button\n        type=\"button\"\n        class=\"zoom-label\"\n        matTooltip=\"Zoom to 100%\"\n        (click)=\"zoomActual()\">\n        {{ (zoom * 100).toFixed(0) }}%\n      </button>\n      <button\n        type=\"button\"\n        class=\"zoom-button\"\n        matTooltip=\"Zoom in\"\n        (click)=\"zoomIn()\">\n        <mat-icon>add</mat-icon>\n      </button>\n      <button\n        type=\"button\"\n        class=\"zoom-button\"\n        matTooltip=\"Fit page\"\n        (click)=\"zoomFit()\">\n        <mat-icon>fit_screen</mat-icon>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-width:0;min-height:0;flex:1;margin-top:10px}.canvas{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0}.canvas-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px}.canvas-toolbar .page-tabs{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.canvas-toolbar .page-tabs fs-menu{display:none}.canvas-toolbar .page-tabs .page-tab{display:inline-flex;align-items:center;box-sizing:border-box;border:1px solid #e4e7eb;border-radius:16px;background:#fff;padding:4px 6px 4px 14px;font-size:12px;line-height:16px;color:#52606d;cursor:pointer}.canvas-toolbar .page-tabs .page-tab.active{background:var(--brand-primary-color, #3b82f6);border-color:var(--brand-primary-color, #3b82f6);color:#fff}.canvas-toolbar .page-tabs .page-tab .page-tab-label{white-space:nowrap}.canvas-toolbar .page-tabs .page-tab .page-tab-menu{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:16px;height:16px;margin-left:2px;border-radius:50%;opacity:.75}.canvas-toolbar .page-tabs .page-tab .page-tab-menu mat-icon{font-size:14px;width:14px;height:14px;line-height:14px}.canvas-toolbar .page-tabs .page-tab .page-tab-menu:hover{background:#0f172a14;opacity:1}.canvas-toolbar .page-tabs .page-tab.active .page-tab-menu:hover{background:#ffffff38}.canvas-toolbar .page-tabs .page-tab.add-page{gap:2px;padding:4px 14px 4px 8px;border-style:dashed;color:#52606d}.canvas-toolbar .page-tabs .page-tab.add-page mat-icon{font-size:16px;width:16px;height:16px}.canvas-toolbar .page-tabs .page-tab.cdk-drag-placeholder{background:transparent;border-style:dashed;border-color:#cbd2d9}.canvas-toolbar .page-tabs .page-tab.cdk-drag-placeholder .page-tab-label,.canvas-toolbar .page-tabs .page-tab.cdk-drag-placeholder .page-tab-menu{visibility:hidden}.canvas-toolbar .page-tabs .cdk-drag-animating,.canvas-toolbar .page-tabs.cdk-drop-list-dragging .page-tab:not(.cdk-drag-placeholder){transition:transform .18s cubic-bezier(0,0,.2,1)}.canvas-toolbar .zoom-controls{display:flex;align-items:center;gap:2px;margin-left:auto;border:1px solid #e4e7eb;border-radius:18px;background:#fff;padding:2px 6px}.canvas-toolbar .zoom-controls .zoom-button{display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:transparent;color:#52606d;cursor:pointer}.canvas-toolbar .zoom-controls .zoom-button:hover{background:#f0f4f8}.canvas-toolbar .zoom-controls .zoom-button mat-icon{font-size:18px;width:18px;height:18px}.canvas-toolbar .zoom-controls .zoom-label{border:none;background:transparent;font-size:12px;color:#52606d;min-width:44px;cursor:pointer}.canvas-toolbar .zoom-controls .zoom-label:hover{color:#1f2933}.page-tab.cdk-drag-preview{display:inline-flex;align-items:center;box-sizing:border-box;border:1px solid #e4e7eb;border-radius:16px;background:#fff;padding:4px 6px 4px 14px;font-size:12px;line-height:16px;color:#52606d;box-shadow:0 3px 10px #0f172a3d}.page-tab.cdk-drag-preview.active{background:var(--brand-primary-color, #3b82f6);border-color:var(--brand-primary-color, #3b82f6);color:#fff}.page-tab.cdk-drag-preview .page-tab-label{white-space:nowrap}.page-tab.cdk-drag-preview .page-tab-menu{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:16px;height:16px;margin-left:2px;border-radius:50%;opacity:.75}.page-tab.cdk-drag-preview .page-tab-menu mat-icon{font-size:14px;width:14px;height:14px;line-height:14px}.page-viewport{position:relative;flex:1;min-height:420px;border:1px solid #e4e7eb;border-radius:8px;background:#eef1f5;overflow:hidden}.page-viewport fs-zoom-pan{width:100%;height:100%}.edit-done{position:absolute;top:12px;right:12px;z-index:40;border-radius:999px;box-shadow:0 2px 10px #0f172a2e}.page{position:relative;background:#fff;border-radius:2px;box-shadow:0 2px 12px #0f172a1f,0 0 0 1px #0f172a0a;box-sizing:border-box}.page.flow{display:flex;flex-wrap:wrap;align-content:flex-start;align-items:flex-start}.page.editing{background-image:radial-gradient(circle,#d8dee6 1px,transparent 1px);background-size:24px 24px}.guides{position:absolute;inset:0;pointer-events:none;z-index:30}.guides ::ng-deep .guide{position:absolute;background:#2196f3}.guides ::ng-deep .guide.guide-v{top:0;bottom:0;width:calc(1.25px / var(--canvas-zoom, 1))}.guides ::ng-deep .guide.guide-h{left:0;right:0;height:calc(1.25px / var(--canvas-zoom, 1))}.page-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#9aa5b1;font-size:14px;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FsMenuModule }, { kind: "component", type: i2$1.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i2$1.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "directive", type: i2$1.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { kind: "ngmodule", type: FsZoomPanModule }, { kind: "component", type: i3.FsZoomPanComponent, selector: "fs-zoom-pan", inputs: ["zoomMax", "zoomMin", "zoomScale", "zoomDefault", "zoomFactor", "top", "left"], outputs: ["moved", "zoomed"] }, { kind: "component", type: ReportComponentComponent, selector: "app-report-component", inputs: ["reportId", "component", "groups", "editMode", "layout", "zoom", "snapper", "selected"], outputs: ["selectComponent", "positionChanged", "flowReorder", "openSettings"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ReportCanvasComponent, isStandalone: true, selector: "app-report-canvas", inputs: { report: "report", editMode: "editMode", pageId: "pageId" }, outputs: { componentSettings: "componentSettings", reportChanged: "reportChanged", editDone: "editDone", pageChanged: "pageChanged" }, viewQueries: [{ propertyName: "zoomPan", first: true, predicate: FsZoomPanComponent, descendants: true }, { propertyName: "_viewport", first: true, predicate: ["viewport"], descendants: true, static: true }, { propertyName: "_guides", first: true, predicate: ["guides"], descendants: true }, { propertyName: "_renderedComponents", predicate: ReportComponentComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"canvas\">\n  <div\n    #viewport\n    class=\"page-viewport\"\n    (pointerdown)=\"onCanvasPointerDown()\">\n    <fs-zoom-pan\n      [zoomMin]=\"0.1\"\n      [zoomMax]=\"3\"\n      (zoomed)=\"onZoomed($event)\">\n      @if (activePage; as page) {\n        <div\n          class=\"page\"\n          [class.flow]=\"isFlow\"\n          [class.editing]=\"editMode\"\n          [style.width.px]=\"report.pageWidth * PX\"\n          [style.height.px]=\"report.pageHeight * PX\"\n          [style.padding.px]=\"isFlow ? flowPadding * PX : 0\"\n          [style.--canvas-zoom]=\"zoom\"\n          [style.--report-heading-size.px]=\"headingSizePx\">\n          @if (isFlow) {\n            @for (component of flowComponents; track component.id) {\n              <app-report-component\n                class=\"flow-item\"\n                [reportId]=\"report.id\"\n                [component]=\"component\"\n                [groups]=\"groups\"\n                [editMode]=\"editMode\"\n                [layout]=\"'flow'\"\n                [zoom]=\"zoom\"\n                [snapper]=\"snapper\"\n                [selected]=\"component.id === selectedComponentId\"\n                [style.width.%]=\"component.flowWidth\"\n                [style.height.px]=\"component.autoHeight ? null : component.h * PX\"\n                (selectComponent)=\"selectComponent($event)\"\n                (positionChanged)=\"onPositionChanged($event)\"\n                (flowReorder)=\"onFlowReorder($event)\"\n                (openSettings)=\"componentSettings.emit($event)\">\n              </app-report-component>\n            }\n          } @else {\n            @for (component of page.components; track component.id) {\n              <app-report-component\n                [reportId]=\"report.id\"\n                [component]=\"component\"\n                [groups]=\"groups\"\n                [editMode]=\"editMode\"\n                [layout]=\"'freeform'\"\n                [zoom]=\"zoom\"\n                [snapper]=\"snapper\"\n                [selected]=\"component.id === selectedComponentId\"\n                [style.left.px]=\"component.x * PX\"\n                [style.top.px]=\"component.y * PX\"\n                [style.width.px]=\"component.w * PX\"\n                [style.height.px]=\"component.autoHeight ? null : component.h * PX\"\n                (selectComponent)=\"selectComponent($event)\"\n                (positionChanged)=\"onPositionChanged($event)\"\n                (openSettings)=\"componentSettings.emit($event)\">\n              </app-report-component>\n            }\n          }\n\n          <div\n            #guides\n            class=\"guides\">\n          </div>\n\n          @if (!page.components.length) {\n            <div class=\"page-empty\">\n              Ask the assistant to add a chart, list or KPI to this page.\n            </div>\n          }\n        </div>\n      }\n    </fs-zoom-pan>\n\n    @if (editMode) {\n      <button\n        mat-flat-button\n        type=\"button\"\n        color=\"primary\"\n        class=\"edit-done\"\n        matTooltip=\"Exit layout editing\"\n        (click)=\"editDone.emit()\">\n        <mat-icon>check</mat-icon>\n        Done editing\n      </button>\n    }\n  </div>\n\n  <div class=\"canvas-toolbar\">\n    <!-- Tabs are one horizontal drop list: dragging a chip reorders the pages.\n         The drop INDEX is computed along X (orientation), but the preview is\n         deliberately left unbounded on both axes \u2014 pinning it to the row with\n         cdkDragBoundary means the chip you are dragging covers the chips you\n         are dragging it past, and you cannot see where it is going to land.\n         Every page gets a chip, including a lone one: the chip is what tells\n         you which page you are on, and a report that hid it left you unable to\n         tell page 1 of 1 from a page that failed to load. Deleting the last\n         page is refused server-side, so the kebab is safe to expose here. -->\n    <div\n      class=\"page-tabs\"\n      cdkDropList\n      cdkDropListOrientation=\"horizontal\"\n      (cdkDropListDropped)=\"onPageDropped($event)\">\n      @for (page of report?.pages ?? []; track page.id; let index = $index) {\n        <!-- The chip is the drag handle AND the tab: clicking selects,\n             dragging reorders. The kebab lives inside it, so the whole\n             control stays one chip instead of growing a second button. -->\n        <div\n          cdkDrag\n          class=\"page-tab\"\n          [class.active]=\"index === activePageIndex\"\n          (click)=\"selectPage(index)\">\n          <span class=\"page-tab-label\">{{ pageLabel(page, index) }}</span>\n          <!-- The kebab opens the menu rather than starting a drag or\n               switching pages, so it swallows its own click. -->\n          <span\n            class=\"page-tab-menu\"\n            [fsMenuTriggerFor]=\"pageMenu\"\n            (click)=\"$event.stopPropagation()\"\n            (mousedown)=\"$event.stopPropagation()\">\n            <mat-icon>more_vert</mat-icon>\n          </span>\n        </div>\n        <!-- Outside the chip: cdkDrag clones its host into the drag preview,\n             and a menu overlay anchored to a cloned trigger opens detached\n             from the real tab. -->\n        <fs-menu #pageMenu>\n          <ng-template\n            fs-menu-item\n            (click)=\"renamePage(page)\">\n            Edit name\n          </ng-template>\n          <ng-template\n            fs-menu-item\n            (click)=\"deletePage(page)\">\n            Delete\n          </ng-template>\n        </fs-menu>\n      }\n      <button\n        type=\"button\"\n        class=\"page-tab add-page\"\n        matTooltip=\"Add page\"\n        (click)=\"addPage()\">\n        <mat-icon>add</mat-icon>\n        Page\n      </button>\n    </div>\n\n    <div class=\"zoom-controls\">\n      <button\n        type=\"button\"\n        class=\"zoom-button\"\n        matTooltip=\"Zoom out\"\n        (click)=\"zoomOut()\">\n        <mat-icon>remove</mat-icon>\n      </button>\n      <button\n        type=\"button\"\n        class=\"zoom-label\"\n        matTooltip=\"Zoom to 100%\"\n        (click)=\"zoomActual()\">\n        {{ (zoom * 100).toFixed(0) }}%\n      </button>\n      <button\n        type=\"button\"\n        class=\"zoom-button\"\n        matTooltip=\"Zoom in\"\n        (click)=\"zoomIn()\">\n        <mat-icon>add</mat-icon>\n      </button>\n      <button\n        type=\"button\"\n        class=\"zoom-button\"\n        matTooltip=\"Fit page\"\n        (click)=\"zoomFit()\">\n        <mat-icon>fit_screen</mat-icon>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-width:0;min-height:0;flex:1;margin-top:10px}.canvas{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0}.canvas-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px}.canvas-toolbar .page-tabs{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.canvas-toolbar .page-tabs fs-menu{display:none}.canvas-toolbar .page-tabs .page-tab{display:inline-flex;align-items:center;box-sizing:border-box;border:1px solid #e4e7eb;border-radius:16px;background:#fff;padding:4px 6px 4px 14px;font-size:12px;line-height:16px;color:#52606d;cursor:pointer}.canvas-toolbar .page-tabs .page-tab.active{background:var(--brand-primary-color, #3b82f6);border-color:var(--brand-primary-color, #3b82f6);color:#fff}.canvas-toolbar .page-tabs .page-tab .page-tab-label{white-space:nowrap}.canvas-toolbar .page-tabs .page-tab .page-tab-menu{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:16px;height:16px;margin-left:2px;border-radius:50%;opacity:.75}.canvas-toolbar .page-tabs .page-tab .page-tab-menu mat-icon{font-size:14px;width:14px;height:14px;line-height:14px}.canvas-toolbar .page-tabs .page-tab .page-tab-menu:hover{background:#0f172a14;opacity:1}.canvas-toolbar .page-tabs .page-tab.active .page-tab-menu:hover{background:#ffffff38}.canvas-toolbar .page-tabs .page-tab.add-page{gap:2px;padding:4px 14px 4px 8px;border-style:dashed;color:#52606d}.canvas-toolbar .page-tabs .page-tab.add-page mat-icon{font-size:16px;width:16px;height:16px}.canvas-toolbar .page-tabs .page-tab.cdk-drag-placeholder{background:transparent;border-style:dashed;border-color:#cbd2d9}.canvas-toolbar .page-tabs .page-tab.cdk-drag-placeholder .page-tab-label,.canvas-toolbar .page-tabs .page-tab.cdk-drag-placeholder .page-tab-menu{visibility:hidden}.canvas-toolbar .page-tabs .cdk-drag-animating,.canvas-toolbar .page-tabs.cdk-drop-list-dragging .page-tab:not(.cdk-drag-placeholder){transition:transform .18s cubic-bezier(0,0,.2,1)}.canvas-toolbar .zoom-controls{display:flex;align-items:center;gap:2px;margin-left:auto;border:1px solid #e4e7eb;border-radius:18px;background:#fff;padding:2px 6px}.canvas-toolbar .zoom-controls .zoom-button{display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:transparent;color:#52606d;cursor:pointer}.canvas-toolbar .zoom-controls .zoom-button:hover{background:#f0f4f8}.canvas-toolbar .zoom-controls .zoom-button mat-icon{font-size:18px;width:18px;height:18px}.canvas-toolbar .zoom-controls .zoom-label{border:none;background:transparent;font-size:12px;color:#52606d;min-width:44px;cursor:pointer}.canvas-toolbar .zoom-controls .zoom-label:hover{color:#1f2933}.page-tab.cdk-drag-preview{display:inline-flex;align-items:center;box-sizing:border-box;border:1px solid #e4e7eb;border-radius:16px;background:#fff;padding:4px 6px 4px 14px;font-size:12px;line-height:16px;color:#52606d;box-shadow:0 3px 10px #0f172a3d}.page-tab.cdk-drag-preview.active{background:var(--brand-primary-color, #3b82f6);border-color:var(--brand-primary-color, #3b82f6);color:#fff}.page-tab.cdk-drag-preview .page-tab-label{white-space:nowrap}.page-tab.cdk-drag-preview .page-tab-menu{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:16px;height:16px;margin-left:2px;border-radius:50%;opacity:.75}.page-tab.cdk-drag-preview .page-tab-menu mat-icon{font-size:14px;width:14px;height:14px;line-height:14px}.page-viewport{position:relative;flex:1;min-height:420px;border:1px solid #e4e7eb;border-radius:8px;background:#eef1f5;overflow:hidden}.page-viewport fs-zoom-pan{width:100%;height:100%}.edit-done{position:absolute;top:12px;right:12px;z-index:40;border-radius:999px;box-shadow:0 2px 10px #0f172a2e}.page{position:relative;background:#fff;border-radius:2px;box-shadow:0 2px 12px #0f172a1f,0 0 0 1px #0f172a0a;box-sizing:border-box}.page.flow{display:flex;flex-wrap:wrap;align-content:flex-start;align-items:flex-start}.page.editing{background-image:radial-gradient(circle,#d8dee6 1px,transparent 1px);background-size:24px 24px}.guides{position:absolute;inset:0;pointer-events:none;z-index:30}.guides ::ng-deep .guide{position:absolute;background:#2196f3}.guides ::ng-deep .guide.guide-v{top:0;bottom:0;width:calc(1.25px / var(--canvas-zoom, 1))}.guides ::ng-deep .guide.guide-h{left:0;right:0;height:calc(1.25px / var(--canvas-zoom, 1))}.page-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#9aa5b1;font-size:14px;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FsMenuModule }, { kind: "component", type: i2$1.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i2$1.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "directive", type: i2$1.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { kind: "ngmodule", type: FsZoomPanModule }, { kind: "component", type: i3.FsZoomPanComponent, selector: "fs-zoom-pan", inputs: ["zoomMax", "zoomMin", "zoomScale", "zoomDefault", "zoomFactor", "top", "left"], outputs: ["moved", "zoomed"] }, { kind: "component", type: ReportComponentComponent, selector: "app-report-component", inputs: ["reportId", "component", "groups", "editMode", "layout", "zoom", "snapper", "selected"], outputs: ["selectComponent", "positionChanged", "flowReorder", "openSettings"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportCanvasComponent, decorators: [{
             type: Component,
@@ -2407,7 +2516,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         FsMenuModule,
                         FsZoomPanModule,
                         ReportComponentComponent,
-                    ], template: "<div class=\"canvas\">\n  <div\n    #viewport\n    class=\"page-viewport\"\n    (pointerdown)=\"onCanvasPointerDown()\">\n    <fs-zoom-pan\n      [zoomMin]=\"0.1\"\n      [zoomMax]=\"3\"\n      (zoomed)=\"onZoomed($event)\">\n      @if (activePage; as page) {\n        <div\n          class=\"page\"\n          [class.flow]=\"isFlow\"\n          [class.editing]=\"editMode\"\n          [style.width.px]=\"report.pageWidth * PX\"\n          [style.height.px]=\"report.pageHeight * PX\"\n          [style.padding.px]=\"isFlow ? flowPadding * PX : 0\"\n          [style.--canvas-zoom]=\"zoom\"\n          [style.--report-heading-size.px]=\"headingSizePx\">\n          @if (isFlow) {\n            @for (component of flowComponents; track component.id) {\n              <app-report-component\n                class=\"flow-item\"\n                [reportId]=\"report.id\"\n                [component]=\"component\"\n                [groups]=\"groups\"\n                [editMode]=\"editMode\"\n                [layout]=\"'flow'\"\n                [zoom]=\"zoom\"\n                [snapper]=\"snapper\"\n                [selected]=\"component.id === selectedComponentId\"\n                [style.width.%]=\"component.flowWidth\"\n                [style.height.px]=\"component.autoHeight ? null : component.h * PX\"\n                (selectComponent)=\"selectComponent($event)\"\n                (positionChanged)=\"onPositionChanged($event)\"\n                (flowReorder)=\"onFlowReorder($event)\"\n                (openSettings)=\"componentSettings.emit($event)\">\n              </app-report-component>\n            }\n          } @else {\n            @for (component of page.components; track component.id) {\n              <app-report-component\n                [reportId]=\"report.id\"\n                [component]=\"component\"\n                [groups]=\"groups\"\n                [editMode]=\"editMode\"\n                [layout]=\"'freeform'\"\n                [zoom]=\"zoom\"\n                [snapper]=\"snapper\"\n                [selected]=\"component.id === selectedComponentId\"\n                [style.left.px]=\"component.x * PX\"\n                [style.top.px]=\"component.y * PX\"\n                [style.width.px]=\"component.w * PX\"\n                [style.height.px]=\"component.autoHeight ? null : component.h * PX\"\n                (selectComponent)=\"selectComponent($event)\"\n                (positionChanged)=\"onPositionChanged($event)\"\n                (openSettings)=\"componentSettings.emit($event)\">\n              </app-report-component>\n            }\n          }\n\n          <div\n            #guides\n            class=\"guides\">\n          </div>\n\n          @if (!page.components.length) {\n            <div class=\"page-empty\">\n              Ask the assistant to add a chart, list or KPI to this page.\n            </div>\n          }\n        </div>\n      }\n    </fs-zoom-pan>\n\n    @if (editMode) {\n      <button\n        mat-flat-button\n        type=\"button\"\n        color=\"primary\"\n        class=\"edit-done\"\n        matTooltip=\"Exit layout editing\"\n        (click)=\"editDone.emit()\">\n        <mat-icon>check</mat-icon>\n        Done editing\n      </button>\n    }\n  </div>\n\n  <div class=\"canvas-toolbar\">\n    <!-- Tabs are one horizontal drop list: dragging a chip reorders the pages.\n         The drop INDEX is computed along X (orientation), but the preview is\n         deliberately left unbounded on both axes \u2014 pinning it to the row with\n         cdkDragBoundary means the chip you are dragging covers the chips you\n         are dragging it past, and you cannot see where it is going to land. -->\n    <div\n      class=\"page-tabs\"\n      cdkDropList\n      cdkDropListOrientation=\"horizontal\"\n      (cdkDropListDropped)=\"onPageDropped($event)\">\n      @if ((report?.pages?.length ?? 0) > 1) {\n        @for (page of report.pages; track page.id; let index = $index) {\n          <!-- The chip is the drag handle AND the tab: clicking selects,\n               dragging reorders. The kebab lives inside it, so the whole\n               control stays one chip instead of growing a second button. -->\n          <div\n            cdkDrag\n            class=\"page-tab\"\n            [class.active]=\"index === activePageIndex\"\n            (click)=\"selectPage(index)\">\n            <span class=\"page-tab-label\">{{ pageLabel(page, index) }}</span>\n            <!-- The kebab opens the menu rather than starting a drag or\n                 switching pages, so it swallows its own click. -->\n            <span\n              class=\"page-tab-menu\"\n              [fsMenuTriggerFor]=\"pageMenu\"\n              (click)=\"$event.stopPropagation()\"\n              (mousedown)=\"$event.stopPropagation()\">\n              <mat-icon>more_vert</mat-icon>\n            </span>\n          </div>\n          <!-- Outside the chip: cdkDrag clones its host into the drag preview,\n               and a menu overlay anchored to a cloned trigger opens detached\n               from the real tab. -->\n          <fs-menu #pageMenu>\n            <ng-template\n              fs-menu-item\n              (click)=\"renamePage(page)\">\n              Edit name\n            </ng-template>\n            <ng-template\n              fs-menu-item\n              (click)=\"deletePage(page)\">\n              Delete\n            </ng-template>\n          </fs-menu>\n        }\n      }\n      <button\n        type=\"button\"\n        class=\"page-tab add-page\"\n        matTooltip=\"Add page\"\n        (click)=\"addPage()\">\n        <mat-icon>add</mat-icon>\n        Page\n      </button>\n    </div>\n\n    <div class=\"zoom-controls\">\n      <button\n        type=\"button\"\n        class=\"zoom-button\"\n        matTooltip=\"Zoom out\"\n        (click)=\"zoomOut()\">\n        <mat-icon>remove</mat-icon>\n      </button>\n      <button\n        type=\"button\"\n        class=\"zoom-label\"\n        matTooltip=\"Zoom to 100%\"\n        (click)=\"zoomActual()\">\n        {{ (zoom * 100).toFixed(0) }}%\n      </button>\n      <button\n        type=\"button\"\n        class=\"zoom-button\"\n        matTooltip=\"Zoom in\"\n        (click)=\"zoomIn()\">\n        <mat-icon>add</mat-icon>\n      </button>\n      <button\n        type=\"button\"\n        class=\"zoom-button\"\n        matTooltip=\"Fit page\"\n        (click)=\"zoomFit()\">\n        <mat-icon>fit_screen</mat-icon>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-width:0;min-height:0;flex:1;margin-top:10px}.canvas{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0}.canvas-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px}.canvas-toolbar .page-tabs{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.canvas-toolbar .page-tabs fs-menu{display:none}.canvas-toolbar .page-tabs .page-tab{display:inline-flex;align-items:center;box-sizing:border-box;border:1px solid #e4e7eb;border-radius:16px;background:#fff;padding:4px 6px 4px 14px;font-size:12px;line-height:16px;color:#52606d;cursor:pointer}.canvas-toolbar .page-tabs .page-tab.active{background:var(--brand-primary-color, #3b82f6);border-color:var(--brand-primary-color, #3b82f6);color:#fff}.canvas-toolbar .page-tabs .page-tab .page-tab-label{white-space:nowrap}.canvas-toolbar .page-tabs .page-tab .page-tab-menu{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:16px;height:16px;margin-left:2px;border-radius:50%;opacity:.75}.canvas-toolbar .page-tabs .page-tab .page-tab-menu mat-icon{font-size:14px;width:14px;height:14px;line-height:14px}.canvas-toolbar .page-tabs .page-tab .page-tab-menu:hover{background:#0f172a14;opacity:1}.canvas-toolbar .page-tabs .page-tab.active .page-tab-menu:hover{background:#ffffff38}.canvas-toolbar .page-tabs .page-tab.add-page{gap:2px;padding:4px 14px 4px 8px;border-style:dashed;color:#52606d}.canvas-toolbar .page-tabs .page-tab.add-page mat-icon{font-size:16px;width:16px;height:16px}.canvas-toolbar .page-tabs .page-tab.cdk-drag-placeholder{background:transparent;border-style:dashed;border-color:#cbd2d9}.canvas-toolbar .page-tabs .page-tab.cdk-drag-placeholder .page-tab-label,.canvas-toolbar .page-tabs .page-tab.cdk-drag-placeholder .page-tab-menu{visibility:hidden}.canvas-toolbar .page-tabs .cdk-drag-animating,.canvas-toolbar .page-tabs.cdk-drop-list-dragging .page-tab:not(.cdk-drag-placeholder){transition:transform .18s cubic-bezier(0,0,.2,1)}.canvas-toolbar .zoom-controls{display:flex;align-items:center;gap:2px;margin-left:auto;border:1px solid #e4e7eb;border-radius:18px;background:#fff;padding:2px 6px}.canvas-toolbar .zoom-controls .zoom-button{display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:transparent;color:#52606d;cursor:pointer}.canvas-toolbar .zoom-controls .zoom-button:hover{background:#f0f4f8}.canvas-toolbar .zoom-controls .zoom-button mat-icon{font-size:18px;width:18px;height:18px}.canvas-toolbar .zoom-controls .zoom-label{border:none;background:transparent;font-size:12px;color:#52606d;min-width:44px;cursor:pointer}.canvas-toolbar .zoom-controls .zoom-label:hover{color:#1f2933}.page-tab.cdk-drag-preview{display:inline-flex;align-items:center;box-sizing:border-box;border:1px solid #e4e7eb;border-radius:16px;background:#fff;padding:4px 6px 4px 14px;font-size:12px;line-height:16px;color:#52606d;box-shadow:0 3px 10px #0f172a3d}.page-tab.cdk-drag-preview.active{background:var(--brand-primary-color, #3b82f6);border-color:var(--brand-primary-color, #3b82f6);color:#fff}.page-tab.cdk-drag-preview .page-tab-label{white-space:nowrap}.page-tab.cdk-drag-preview .page-tab-menu{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:16px;height:16px;margin-left:2px;border-radius:50%;opacity:.75}.page-tab.cdk-drag-preview .page-tab-menu mat-icon{font-size:14px;width:14px;height:14px;line-height:14px}.page-viewport{position:relative;flex:1;min-height:420px;border:1px solid #e4e7eb;border-radius:8px;background:#eef1f5;overflow:hidden}.page-viewport fs-zoom-pan{width:100%;height:100%}.edit-done{position:absolute;top:12px;right:12px;z-index:40;border-radius:999px;box-shadow:0 2px 10px #0f172a2e}.page{position:relative;background:#fff;border-radius:2px;box-shadow:0 2px 12px #0f172a1f,0 0 0 1px #0f172a0a;box-sizing:border-box}.page.flow{display:flex;flex-wrap:wrap;align-content:flex-start;align-items:flex-start}.page.editing{background-image:radial-gradient(circle,#d8dee6 1px,transparent 1px);background-size:24px 24px}.guides{position:absolute;inset:0;pointer-events:none;z-index:30}.guides ::ng-deep .guide{position:absolute;background:#2196f3}.guides ::ng-deep .guide.guide-v{top:0;bottom:0;width:calc(1.25px / var(--canvas-zoom, 1))}.guides ::ng-deep .guide.guide-h{left:0;right:0;height:calc(1.25px / var(--canvas-zoom, 1))}.page-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#9aa5b1;font-size:14px;pointer-events:none}\n"] }]
+                    ], template: "<div class=\"canvas\">\n  <div\n    #viewport\n    class=\"page-viewport\"\n    (pointerdown)=\"onCanvasPointerDown()\">\n    <fs-zoom-pan\n      [zoomMin]=\"0.1\"\n      [zoomMax]=\"3\"\n      (zoomed)=\"onZoomed($event)\">\n      @if (activePage; as page) {\n        <div\n          class=\"page\"\n          [class.flow]=\"isFlow\"\n          [class.editing]=\"editMode\"\n          [style.width.px]=\"report.pageWidth * PX\"\n          [style.height.px]=\"report.pageHeight * PX\"\n          [style.padding.px]=\"isFlow ? flowPadding * PX : 0\"\n          [style.--canvas-zoom]=\"zoom\"\n          [style.--report-heading-size.px]=\"headingSizePx\">\n          @if (isFlow) {\n            @for (component of flowComponents; track component.id) {\n              <app-report-component\n                class=\"flow-item\"\n                [reportId]=\"report.id\"\n                [component]=\"component\"\n                [groups]=\"groups\"\n                [editMode]=\"editMode\"\n                [layout]=\"'flow'\"\n                [zoom]=\"zoom\"\n                [snapper]=\"snapper\"\n                [selected]=\"component.id === selectedComponentId\"\n                [style.width.%]=\"component.flowWidth\"\n                [style.height.px]=\"component.autoHeight ? null : component.h * PX\"\n                (selectComponent)=\"selectComponent($event)\"\n                (positionChanged)=\"onPositionChanged($event)\"\n                (flowReorder)=\"onFlowReorder($event)\"\n                (openSettings)=\"componentSettings.emit($event)\">\n              </app-report-component>\n            }\n          } @else {\n            @for (component of page.components; track component.id) {\n              <app-report-component\n                [reportId]=\"report.id\"\n                [component]=\"component\"\n                [groups]=\"groups\"\n                [editMode]=\"editMode\"\n                [layout]=\"'freeform'\"\n                [zoom]=\"zoom\"\n                [snapper]=\"snapper\"\n                [selected]=\"component.id === selectedComponentId\"\n                [style.left.px]=\"component.x * PX\"\n                [style.top.px]=\"component.y * PX\"\n                [style.width.px]=\"component.w * PX\"\n                [style.height.px]=\"component.autoHeight ? null : component.h * PX\"\n                (selectComponent)=\"selectComponent($event)\"\n                (positionChanged)=\"onPositionChanged($event)\"\n                (openSettings)=\"componentSettings.emit($event)\">\n              </app-report-component>\n            }\n          }\n\n          <div\n            #guides\n            class=\"guides\">\n          </div>\n\n          @if (!page.components.length) {\n            <div class=\"page-empty\">\n              Ask the assistant to add a chart, list or KPI to this page.\n            </div>\n          }\n        </div>\n      }\n    </fs-zoom-pan>\n\n    @if (editMode) {\n      <button\n        mat-flat-button\n        type=\"button\"\n        color=\"primary\"\n        class=\"edit-done\"\n        matTooltip=\"Exit layout editing\"\n        (click)=\"editDone.emit()\">\n        <mat-icon>check</mat-icon>\n        Done editing\n      </button>\n    }\n  </div>\n\n  <div class=\"canvas-toolbar\">\n    <!-- Tabs are one horizontal drop list: dragging a chip reorders the pages.\n         The drop INDEX is computed along X (orientation), but the preview is\n         deliberately left unbounded on both axes \u2014 pinning it to the row with\n         cdkDragBoundary means the chip you are dragging covers the chips you\n         are dragging it past, and you cannot see where it is going to land.\n         Every page gets a chip, including a lone one: the chip is what tells\n         you which page you are on, and a report that hid it left you unable to\n         tell page 1 of 1 from a page that failed to load. Deleting the last\n         page is refused server-side, so the kebab is safe to expose here. -->\n    <div\n      class=\"page-tabs\"\n      cdkDropList\n      cdkDropListOrientation=\"horizontal\"\n      (cdkDropListDropped)=\"onPageDropped($event)\">\n      @for (page of report?.pages ?? []; track page.id; let index = $index) {\n        <!-- The chip is the drag handle AND the tab: clicking selects,\n             dragging reorders. The kebab lives inside it, so the whole\n             control stays one chip instead of growing a second button. -->\n        <div\n          cdkDrag\n          class=\"page-tab\"\n          [class.active]=\"index === activePageIndex\"\n          (click)=\"selectPage(index)\">\n          <span class=\"page-tab-label\">{{ pageLabel(page, index) }}</span>\n          <!-- The kebab opens the menu rather than starting a drag or\n               switching pages, so it swallows its own click. -->\n          <span\n            class=\"page-tab-menu\"\n            [fsMenuTriggerFor]=\"pageMenu\"\n            (click)=\"$event.stopPropagation()\"\n            (mousedown)=\"$event.stopPropagation()\">\n            <mat-icon>more_vert</mat-icon>\n          </span>\n        </div>\n        <!-- Outside the chip: cdkDrag clones its host into the drag preview,\n             and a menu overlay anchored to a cloned trigger opens detached\n             from the real tab. -->\n        <fs-menu #pageMenu>\n          <ng-template\n            fs-menu-item\n            (click)=\"renamePage(page)\">\n            Edit name\n          </ng-template>\n          <ng-template\n            fs-menu-item\n            (click)=\"deletePage(page)\">\n            Delete\n          </ng-template>\n        </fs-menu>\n      }\n      <button\n        type=\"button\"\n        class=\"page-tab add-page\"\n        matTooltip=\"Add page\"\n        (click)=\"addPage()\">\n        <mat-icon>add</mat-icon>\n        Page\n      </button>\n    </div>\n\n    <div class=\"zoom-controls\">\n      <button\n        type=\"button\"\n        class=\"zoom-button\"\n        matTooltip=\"Zoom out\"\n        (click)=\"zoomOut()\">\n        <mat-icon>remove</mat-icon>\n      </button>\n      <button\n        type=\"button\"\n        class=\"zoom-label\"\n        matTooltip=\"Zoom to 100%\"\n        (click)=\"zoomActual()\">\n        {{ (zoom * 100).toFixed(0) }}%\n      </button>\n      <button\n        type=\"button\"\n        class=\"zoom-button\"\n        matTooltip=\"Zoom in\"\n        (click)=\"zoomIn()\">\n        <mat-icon>add</mat-icon>\n      </button>\n      <button\n        type=\"button\"\n        class=\"zoom-button\"\n        matTooltip=\"Fit page\"\n        (click)=\"zoomFit()\">\n        <mat-icon>fit_screen</mat-icon>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-width:0;min-height:0;flex:1;margin-top:10px}.canvas{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0}.canvas-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px}.canvas-toolbar .page-tabs{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.canvas-toolbar .page-tabs fs-menu{display:none}.canvas-toolbar .page-tabs .page-tab{display:inline-flex;align-items:center;box-sizing:border-box;border:1px solid #e4e7eb;border-radius:16px;background:#fff;padding:4px 6px 4px 14px;font-size:12px;line-height:16px;color:#52606d;cursor:pointer}.canvas-toolbar .page-tabs .page-tab.active{background:var(--brand-primary-color, #3b82f6);border-color:var(--brand-primary-color, #3b82f6);color:#fff}.canvas-toolbar .page-tabs .page-tab .page-tab-label{white-space:nowrap}.canvas-toolbar .page-tabs .page-tab .page-tab-menu{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:16px;height:16px;margin-left:2px;border-radius:50%;opacity:.75}.canvas-toolbar .page-tabs .page-tab .page-tab-menu mat-icon{font-size:14px;width:14px;height:14px;line-height:14px}.canvas-toolbar .page-tabs .page-tab .page-tab-menu:hover{background:#0f172a14;opacity:1}.canvas-toolbar .page-tabs .page-tab.active .page-tab-menu:hover{background:#ffffff38}.canvas-toolbar .page-tabs .page-tab.add-page{gap:2px;padding:4px 14px 4px 8px;border-style:dashed;color:#52606d}.canvas-toolbar .page-tabs .page-tab.add-page mat-icon{font-size:16px;width:16px;height:16px}.canvas-toolbar .page-tabs .page-tab.cdk-drag-placeholder{background:transparent;border-style:dashed;border-color:#cbd2d9}.canvas-toolbar .page-tabs .page-tab.cdk-drag-placeholder .page-tab-label,.canvas-toolbar .page-tabs .page-tab.cdk-drag-placeholder .page-tab-menu{visibility:hidden}.canvas-toolbar .page-tabs .cdk-drag-animating,.canvas-toolbar .page-tabs.cdk-drop-list-dragging .page-tab:not(.cdk-drag-placeholder){transition:transform .18s cubic-bezier(0,0,.2,1)}.canvas-toolbar .zoom-controls{display:flex;align-items:center;gap:2px;margin-left:auto;border:1px solid #e4e7eb;border-radius:18px;background:#fff;padding:2px 6px}.canvas-toolbar .zoom-controls .zoom-button{display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:transparent;color:#52606d;cursor:pointer}.canvas-toolbar .zoom-controls .zoom-button:hover{background:#f0f4f8}.canvas-toolbar .zoom-controls .zoom-button mat-icon{font-size:18px;width:18px;height:18px}.canvas-toolbar .zoom-controls .zoom-label{border:none;background:transparent;font-size:12px;color:#52606d;min-width:44px;cursor:pointer}.canvas-toolbar .zoom-controls .zoom-label:hover{color:#1f2933}.page-tab.cdk-drag-preview{display:inline-flex;align-items:center;box-sizing:border-box;border:1px solid #e4e7eb;border-radius:16px;background:#fff;padding:4px 6px 4px 14px;font-size:12px;line-height:16px;color:#52606d;box-shadow:0 3px 10px #0f172a3d}.page-tab.cdk-drag-preview.active{background:var(--brand-primary-color, #3b82f6);border-color:var(--brand-primary-color, #3b82f6);color:#fff}.page-tab.cdk-drag-preview .page-tab-label{white-space:nowrap}.page-tab.cdk-drag-preview .page-tab-menu{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:16px;height:16px;margin-left:2px;border-radius:50%;opacity:.75}.page-tab.cdk-drag-preview .page-tab-menu mat-icon{font-size:14px;width:14px;height:14px;line-height:14px}.page-viewport{position:relative;flex:1;min-height:420px;border:1px solid #e4e7eb;border-radius:8px;background:#eef1f5;overflow:hidden}.page-viewport fs-zoom-pan{width:100%;height:100%}.edit-done{position:absolute;top:12px;right:12px;z-index:40;border-radius:999px;box-shadow:0 2px 10px #0f172a2e}.page{position:relative;background:#fff;border-radius:2px;box-shadow:0 2px 12px #0f172a1f,0 0 0 1px #0f172a0a;box-sizing:border-box}.page.flow{display:flex;flex-wrap:wrap;align-content:flex-start;align-items:flex-start}.page.editing{background-image:radial-gradient(circle,#d8dee6 1px,transparent 1px);background-size:24px 24px}.guides{position:absolute;inset:0;pointer-events:none;z-index:30}.guides ::ng-deep .guide{position:absolute;background:#2196f3}.guides ::ng-deep .guide.guide-v{top:0;bottom:0;width:calc(1.25px / var(--canvas-zoom, 1))}.guides ::ng-deep .guide.guide-h{left:0;right:0;height:calc(1.25px / var(--canvas-zoom, 1))}.page-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#9aa5b1;font-size:14px;pointer-events:none}\n"] }]
         }], propDecorators: { report: [{
                 type: Input
             }], editMode: [{
@@ -2491,6 +2600,8 @@ class ComponentSettingsComponent {
     _dialogRef = inject(MatDialogRef);
     _reportData = inject(ReportData);
     _message = inject(FsMessage);
+    _prompt = inject(FsPrompt);
+    _destroyRef = inject(DestroyRef);
     _cdRef = inject(ChangeDetectorRef);
     ngOnInit() {
         this.report = this._data.report;
@@ -2510,6 +2621,23 @@ class ComponentSettingsComponent {
     typeLabel(type) {
         return this._typeLabels[type] ?? type;
     }
+    // Confirm and delete here, while the dialog is still open, then close with a
+    // `deleted` result for the page to act on — the same shape the report
+    // settings dialog uses for deleting a report.
+    //
+    // The confirm says it cannot be undone because, from the UI, it cannot: the
+    // row is soft-deleted server-side but nothing here restores a component.
+    delete() {
+        this._prompt.confirm({
+            title: 'Delete Component',
+            template: `Are you sure you would like to delete "${this.component.title || 'this component'}"? This cannot be undone.`,
+        })
+            .pipe(switchMap$1(() => this._reportData.deleteComponent(this.report.id, this.component.id)), takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => {
+            this._message.success('Component deleted');
+            this._dialogRef.close({ deleted: true });
+        });
+    }
     save = () => {
         const settings = {
             title: this.title,
@@ -2657,7 +2785,7 @@ class ComponentSettingsComponent {
             .replace(/\b\w/g, (character) => character.toUpperCase());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ComponentSettingsComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<form\n    fsForm\n    [submit]=\"save\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      {{ component.title || 'Component' }}\n    </h1>\n    <mat-dialog-content>\n      <mat-tab-group [(selected)]=\"selectedTab\">\n        <mat-tab\n            label=\"Settings\"\n            name=\"settings\">\n          <div class=\"fs-column tab-body\">\n            <mat-form-field>\n              <mat-label>\n                Title\n              </mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"title\"\n                name=\"title\">\n            </mat-form-field>\n            <div class=\"subheading-2\">\n              Padding\n            </div>\n            <div class=\"geometry-row\">\n              <mat-form-field>\n                <mat-label>\n                  Top\n                </mat-label>\n                <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"3\"\n                  [(ngModel)]=\"paddingTop\"\n                  name=\"paddingTop\"\n                  [fsFormMin]=\"0\">\n                <div matTextSuffix>\n                  in\n                </div>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Right\n                </mat-label>\n                <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"3\"\n                  [(ngModel)]=\"paddingRight\"\n                  name=\"paddingRight\"\n                  [fsFormMin]=\"0\">\n                <div matTextSuffix>\n                  in\n                </div>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Bottom\n                </mat-label>\n                <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"3\"\n                  [(ngModel)]=\"paddingBottom\"\n                  name=\"paddingBottom\"\n                  [fsFormMin]=\"0\">\n                <div matTextSuffix>\n                  in\n                </div>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Left\n                </mat-label>\n                <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"3\"\n                  [(ngModel)]=\"paddingLeft\"\n                  name=\"paddingLeft\"\n                  [fsFormMin]=\"0\">\n                <div matTextSuffix>\n                  in\n                </div>\n              </mat-form-field>\n            </div>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Filters\"\n            name=\"filters\">\n          <div class=\"tab-body\">\n            @if (columnsError) {\n              <div class=\"filters-empty error\">\n                {{ columnsError }}\n              </div>\n            } @else if (rows.length) {\n              <!-- Every filterable column. Toggle where its control shows: in\n                   the report bar, on this component, both, or neither. The\n                   interface (date range vs value picker) follows the data. -->\n              <table class=\"filter-table\">\n                <thead>\n                  <tr>\n                    <th class=\"filter-col-name\">\n                      Filter\n                    </th>\n                    <th class=\"filter-col-type\">\n                      Type\n                    </th>\n                    <th class=\"filter-col-toggle\">\n                      Report bar\n                    </th>\n                    <th class=\"filter-col-toggle\">\n                      This component\n                    </th>\n                  </tr>\n                </thead>\n                <tbody>\n                  @for (row of rows; track row.column) {\n                    <tr>\n                      <td class=\"filter-col-name\">\n                        {{ row.label }}\n                      </td>\n                      <td class=\"filter-col-type\">\n                        {{ typeLabel(row.type) }}\n                      </td>\n                      <td class=\"filter-col-toggle\">\n                        <mat-slide-toggle\n                          [ngModel]=\"row.report\"\n                          (ngModelChange)=\"setExposure(row, 'report', $event)\"\n                          [ngModelOptions]=\"{ standalone: true }\"\n                          matTooltip=\"Show in the report bar\">\n                        </mat-slide-toggle>\n                      </td>\n                      <td class=\"filter-col-toggle\">\n                        <mat-slide-toggle\n                          [ngModel]=\"row.component\"\n                          (ngModelChange)=\"setExposure(row, 'component', $event)\"\n                          [ngModelOptions]=\"{ standalone: true }\"\n                          matTooltip=\"Show on this component\">\n                        </mat-slide-toggle>\n                      </td>\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            } @else {\n              <div class=\"filters-empty\">\n                This component has no filterable columns yet \u2014 give it some SQL first.\n              </div>\n            }\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"SQL\"\n            name=\"sql\">\n          <div class=\"tab-body\">\n            @if (sqlError) {\n              <div class=\"filters-empty error\">\n                {{ sqlError }}\n              </div>\n            } @else if (sql) {\n              @if (sqlBaseline) {\n                <!-- A derived component's statement is compiled from its\n                     document with no viewer state, so it is not byte-for-byte\n                     what produced the numbers on screen. Said here rather than\n                     left for the reader to discover. -->\n                <div class=\"filters-empty\">\n                  Compiled from this component's query \u2014 no filters applied, times in UTC.\n                </div>\n              }\n              <pre class=\"code-block\">{{ sql }}</pre>\n            } @else {\n              <div class=\"filters-empty\">\n                This component has no SQL yet.\n              </div>\n            }\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Config\"\n            name=\"config\">\n          <div class=\"tab-body\">\n            <pre class=\"code-block\">\n              {{ configJson }}\n            </pre>\n          </div>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <fs-form-dialog-actions\n        [save]=\"selectedTab === 'settings'\"\n        [done]=\"selectedTab !== 'settings'\">\n      </fs-form-dialog-actions>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>", styles: ["mat-form-field{width:100%}.tab-body{padding-top:16px}.geometry-row{display:flex;gap:8px}.geometry-row mat-form-field{flex:1}.filter-table{border-spacing:0;width:100%;border-collapse:collapse}.filter-table thead th{color:#8f8f8f;font-weight:400;font-size:85%;text-align:left;padding:8px 16px}.filter-table tbody tr{clip-path:xywh(0 3px 100% calc(100% - 6px) round 10px)}.filter-table tbody td{border:none;background-color:#fafafa;padding:8px 16px;vertical-align:middle;text-align:left}.filter-table .filter-col-name{font-weight:600;color:#1f2933}.filter-table .filter-col-type{color:#7b8794;width:120px}.filter-table .filter-col-toggle,.filter-table th.filter-col-toggle{width:130px;text-align:center}.filters-empty{font-size:13px;color:#7b8794;padding:8px 0 4px}.filters-empty.error{color:#e15759}.code-block{margin:0;padding:10px 12px;background:#1f2933;color:#e4e7eb;border-radius:6px;font-family:JetBrains Mono,Consolas,monospace;font-size:12px;line-height:1.5;white-space:pre-wrap;word-break:break-word;max-height:240px;overflow:auto}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2$2.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { kind: "directive", type: i2$2.FsFormMinDirective, selector: "[fsFormMin]", inputs: ["fsFormMin", "fsFormMinMessage"] }, { kind: "component", type: i2$2.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }, { kind: "directive", type: i2$2.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "ngmodule", type: FsMaskModule }, { kind: "directive", type: i3$1.FsMaskNumberDirective, selector: "[fsMaskNumber]" }, { kind: "ngmodule", type: FsDialogModule }, { kind: "component", type: i3$2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "ngmodule", type: FsLabelModule }, { kind: "ngmodule", type: FsTabsModule }, { kind: "directive", type: i5.FsTabsHeaderTabGroupDirective, selector: "mat-tab-group, matTabGroup, [matTabGroup]", inputs: ["orientation", "selected", "selectedData"], outputs: ["selectedChange", "selectedDataChange"], exportAs: ["fsTabsHeaderTabGroup"] }, { kind: "directive", type: i5.FsTabsTabDirective, selector: "mat-tab,matTab", inputs: ["name", "data"], exportAs: ["fsTabsTab"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i6.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i6.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: 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: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ComponentSettingsComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<form\n    fsForm\n    [submit]=\"save\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      {{ component.title || 'Component' }}\n    </h1>\n    <mat-dialog-content>\n      <mat-tab-group [(selected)]=\"selectedTab\">\n        <mat-tab\n            label=\"Settings\"\n            name=\"settings\">\n          <div class=\"fs-column tab-body\">\n            <mat-form-field>\n              <mat-label>\n                Title\n              </mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"title\"\n                name=\"title\">\n            </mat-form-field>\n            <div class=\"subheading-2\">\n              Padding\n            </div>\n            <div class=\"geometry-row\">\n              <mat-form-field>\n                <mat-label>\n                  Top\n                </mat-label>\n                <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"3\"\n                  [(ngModel)]=\"paddingTop\"\n                  name=\"paddingTop\"\n                  [fsFormMin]=\"0\">\n                <div matTextSuffix>\n                  in\n                </div>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Right\n                </mat-label>\n                <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"3\"\n                  [(ngModel)]=\"paddingRight\"\n                  name=\"paddingRight\"\n                  [fsFormMin]=\"0\">\n                <div matTextSuffix>\n                  in\n                </div>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Bottom\n                </mat-label>\n                <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"3\"\n                  [(ngModel)]=\"paddingBottom\"\n                  name=\"paddingBottom\"\n                  [fsFormMin]=\"0\">\n                <div matTextSuffix>\n                  in\n                </div>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Left\n                </mat-label>\n                <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"3\"\n                  [(ngModel)]=\"paddingLeft\"\n                  name=\"paddingLeft\"\n                  [fsFormMin]=\"0\">\n                <div matTextSuffix>\n                  in\n                </div>\n              </mat-form-field>\n            </div>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Filters\"\n            name=\"filters\">\n          <div class=\"tab-body\">\n            @if (columnsError) {\n              <div class=\"filters-empty error\">\n                {{ columnsError }}\n              </div>\n            } @else if (rows.length) {\n              <!-- Every filterable column. Toggle where its control shows: in\n                   the report bar, on this component, both, or neither. The\n                   interface (date range vs value picker) follows the data. -->\n              <table class=\"filter-table\">\n                <thead>\n                  <tr>\n                    <th class=\"filter-col-name\">\n                      Filter\n                    </th>\n                    <th class=\"filter-col-type\">\n                      Type\n                    </th>\n                    <th class=\"filter-col-toggle\">\n                      Report bar\n                    </th>\n                    <th class=\"filter-col-toggle\">\n                      This component\n                    </th>\n                  </tr>\n                </thead>\n                <tbody>\n                  @for (row of rows; track row.column) {\n                    <tr>\n                      <td class=\"filter-col-name\">\n                        {{ row.label }}\n                      </td>\n                      <td class=\"filter-col-type\">\n                        {{ typeLabel(row.type) }}\n                      </td>\n                      <td class=\"filter-col-toggle\">\n                        <mat-slide-toggle\n                          [ngModel]=\"row.report\"\n                          (ngModelChange)=\"setExposure(row, 'report', $event)\"\n                          [ngModelOptions]=\"{ standalone: true }\"\n                          matTooltip=\"Show in the report bar\">\n                        </mat-slide-toggle>\n                      </td>\n                      <td class=\"filter-col-toggle\">\n                        <mat-slide-toggle\n                          [ngModel]=\"row.component\"\n                          (ngModelChange)=\"setExposure(row, 'component', $event)\"\n                          [ngModelOptions]=\"{ standalone: true }\"\n                          matTooltip=\"Show on this component\">\n                        </mat-slide-toggle>\n                      </td>\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            } @else {\n              <div class=\"filters-empty\">\n                This component has no filterable columns yet \u2014 give it some SQL first.\n              </div>\n            }\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"SQL\"\n            name=\"sql\">\n          <div class=\"tab-body\">\n            @if (sqlError) {\n              <div class=\"filters-empty error\">\n                {{ sqlError }}\n              </div>\n            } @else if (sql) {\n              @if (sqlBaseline) {\n                <!-- A derived component's statement is compiled from its\n                     document with no viewer state, so it is not byte-for-byte\n                     what produced the numbers on screen. Said here rather than\n                     left for the reader to discover. -->\n                <div class=\"filters-empty\">\n                  Compiled from this component's query \u2014 no filters applied, times in UTC.\n                </div>\n              }\n              <pre class=\"code-block\">{{ sql }}</pre>\n            } @else {\n              <div class=\"filters-empty\">\n                This component has no SQL yet.\n              </div>\n            }\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Config\"\n            name=\"config\">\n          <div class=\"tab-body\">\n            <pre class=\"code-block\">\n              {{ configJson }}\n            </pre>\n          </div>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <!-- Save | Delete | Cancel, the standard order. fs-form-dialog-actions\n           renders its own Save/Done BEFORE the projected content, which would\n           put Delete after Cancel, so `[save]=\"false\"` foots the row here and\n           all three buttons are projected in order. Save submits the Settings\n           tab; the other tabs persist as you touch them, so they get Done. -->\n      <fs-form-dialog-actions [save]=\"false\">\n        @if (selectedTab === 'settings') {\n          <button\n              mat-button\n              type=\"submit\"\n              color=\"primary\">\n            Save\n          </button>\n        } @else {\n          <button\n              mat-button\n              type=\"button\"\n              color=\"primary\"\n              [mat-dialog-close]=\"null\">\n            Done\n          </button>\n        }\n        <button\n            mat-button\n            type=\"button\"\n            color=\"warn\"\n            (click)=\"delete()\">\n          Delete\n        </button>\n        <button\n            mat-button\n            type=\"button\"\n            class=\"cancel-button\"\n            [mat-dialog-close]=\"null\">\n          Cancel\n        </button>\n      </fs-form-dialog-actions>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>", styles: ["mat-form-field{width:100%}.tab-body{padding-top:16px}.geometry-row{display:flex;gap:8px}.geometry-row mat-form-field{flex:1}.filter-table{border-spacing:0;width:100%;border-collapse:collapse}.filter-table thead th{color:#8f8f8f;font-weight:400;font-size:85%;text-align:left;padding:8px 16px}.filter-table tbody tr{clip-path:xywh(0 3px 100% calc(100% - 6px) round 10px)}.filter-table tbody td{border:none;background-color:#fafafa;padding:8px 16px;vertical-align:middle;text-align:left}.filter-table .filter-col-name{font-weight:600;color:#1f2933}.filter-table .filter-col-type{color:#7b8794;width:120px}.filter-table .filter-col-toggle,.filter-table th.filter-col-toggle{width:130px;text-align:center}.filters-empty{font-size:13px;color:#7b8794;padding:8px 0 4px}.filters-empty.error{color:#e15759}.code-block{margin:0;padding:10px 12px;background:#1f2933;color:#e4e7eb;border-radius:6px;font-family:JetBrains Mono,Consolas,monospace;font-size:12px;line-height:1.5;white-space:pre-wrap;word-break:break-word;max-height:240px;overflow:auto}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2$2.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { kind: "directive", type: i2$2.FsFormMinDirective, selector: "[fsFormMin]", inputs: ["fsFormMin", "fsFormMinMessage"] }, { kind: "component", type: i2$2.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }, { kind: "directive", type: i2$2.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "directive", type: i2$2.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit"] }, { kind: "ngmodule", type: FsMaskModule }, { kind: "directive", type: i3$1.FsMaskNumberDirective, selector: "[fsMaskNumber]" }, { kind: "ngmodule", type: FsDialogModule }, { kind: "component", type: i3$2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "ngmodule", type: FsLabelModule }, { kind: "ngmodule", type: FsTabsModule }, { kind: "directive", type: i5.FsTabsHeaderTabGroupDirective, selector: "mat-tab-group, matTabGroup, [matTabGroup]", inputs: ["orientation", "selected", "selectedData"], outputs: ["selectedChange", "selectedDataChange"], exportAs: ["fsTabsHeaderTabGroup"] }, { kind: "directive", type: i5.FsTabsTabDirective, selector: "mat-tab,matTab", inputs: ["name", "data"], exportAs: ["fsTabsTab"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i6.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i6.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: 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: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentSettingsComponent, decorators: [{
             type: Component,
@@ -2672,13 +2800,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         MatDialogTitle,
                         MatDialogContent,
                         MatDialogActions,
+                        MatDialogClose,
                         MatFormField,
                         MatLabel,
                         MatSuffix,
+                        MatButton,
                         MatInput,
                         MatSlideToggle,
                         MatTooltip,
-                    ], template: "<form\n    fsForm\n    [submit]=\"save\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      {{ component.title || 'Component' }}\n    </h1>\n    <mat-dialog-content>\n      <mat-tab-group [(selected)]=\"selectedTab\">\n        <mat-tab\n            label=\"Settings\"\n            name=\"settings\">\n          <div class=\"fs-column tab-body\">\n            <mat-form-field>\n              <mat-label>\n                Title\n              </mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"title\"\n                name=\"title\">\n            </mat-form-field>\n            <div class=\"subheading-2\">\n              Padding\n            </div>\n            <div class=\"geometry-row\">\n              <mat-form-field>\n                <mat-label>\n                  Top\n                </mat-label>\n                <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"3\"\n                  [(ngModel)]=\"paddingTop\"\n                  name=\"paddingTop\"\n                  [fsFormMin]=\"0\">\n                <div matTextSuffix>\n                  in\n                </div>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Right\n                </mat-label>\n                <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"3\"\n                  [(ngModel)]=\"paddingRight\"\n                  name=\"paddingRight\"\n                  [fsFormMin]=\"0\">\n                <div matTextSuffix>\n                  in\n                </div>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Bottom\n                </mat-label>\n                <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"3\"\n                  [(ngModel)]=\"paddingBottom\"\n                  name=\"paddingBottom\"\n                  [fsFormMin]=\"0\">\n                <div matTextSuffix>\n                  in\n                </div>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Left\n                </mat-label>\n                <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"3\"\n                  [(ngModel)]=\"paddingLeft\"\n                  name=\"paddingLeft\"\n                  [fsFormMin]=\"0\">\n                <div matTextSuffix>\n                  in\n                </div>\n              </mat-form-field>\n            </div>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Filters\"\n            name=\"filters\">\n          <div class=\"tab-body\">\n            @if (columnsError) {\n              <div class=\"filters-empty error\">\n                {{ columnsError }}\n              </div>\n            } @else if (rows.length) {\n              <!-- Every filterable column. Toggle where its control shows: in\n                   the report bar, on this component, both, or neither. The\n                   interface (date range vs value picker) follows the data. -->\n              <table class=\"filter-table\">\n                <thead>\n                  <tr>\n                    <th class=\"filter-col-name\">\n                      Filter\n                    </th>\n                    <th class=\"filter-col-type\">\n                      Type\n                    </th>\n                    <th class=\"filter-col-toggle\">\n                      Report bar\n                    </th>\n                    <th class=\"filter-col-toggle\">\n                      This component\n                    </th>\n                  </tr>\n                </thead>\n                <tbody>\n                  @for (row of rows; track row.column) {\n                    <tr>\n                      <td class=\"filter-col-name\">\n                        {{ row.label }}\n                      </td>\n                      <td class=\"filter-col-type\">\n                        {{ typeLabel(row.type) }}\n                      </td>\n                      <td class=\"filter-col-toggle\">\n                        <mat-slide-toggle\n                          [ngModel]=\"row.report\"\n                          (ngModelChange)=\"setExposure(row, 'report', $event)\"\n                          [ngModelOptions]=\"{ standalone: true }\"\n                          matTooltip=\"Show in the report bar\">\n                        </mat-slide-toggle>\n                      </td>\n                      <td class=\"filter-col-toggle\">\n                        <mat-slide-toggle\n                          [ngModel]=\"row.component\"\n                          (ngModelChange)=\"setExposure(row, 'component', $event)\"\n                          [ngModelOptions]=\"{ standalone: true }\"\n                          matTooltip=\"Show on this component\">\n                        </mat-slide-toggle>\n                      </td>\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            } @else {\n              <div class=\"filters-empty\">\n                This component has no filterable columns yet \u2014 give it some SQL first.\n              </div>\n            }\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"SQL\"\n            name=\"sql\">\n          <div class=\"tab-body\">\n            @if (sqlError) {\n              <div class=\"filters-empty error\">\n                {{ sqlError }}\n              </div>\n            } @else if (sql) {\n              @if (sqlBaseline) {\n                <!-- A derived component's statement is compiled from its\n                     document with no viewer state, so it is not byte-for-byte\n                     what produced the numbers on screen. Said here rather than\n                     left for the reader to discover. -->\n                <div class=\"filters-empty\">\n                  Compiled from this component's query \u2014 no filters applied, times in UTC.\n                </div>\n              }\n              <pre class=\"code-block\">{{ sql }}</pre>\n            } @else {\n              <div class=\"filters-empty\">\n                This component has no SQL yet.\n              </div>\n            }\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Config\"\n            name=\"config\">\n          <div class=\"tab-body\">\n            <pre class=\"code-block\">\n              {{ configJson }}\n            </pre>\n          </div>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <fs-form-dialog-actions\n        [save]=\"selectedTab === 'settings'\"\n        [done]=\"selectedTab !== 'settings'\">\n      </fs-form-dialog-actions>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>", styles: ["mat-form-field{width:100%}.tab-body{padding-top:16px}.geometry-row{display:flex;gap:8px}.geometry-row mat-form-field{flex:1}.filter-table{border-spacing:0;width:100%;border-collapse:collapse}.filter-table thead th{color:#8f8f8f;font-weight:400;font-size:85%;text-align:left;padding:8px 16px}.filter-table tbody tr{clip-path:xywh(0 3px 100% calc(100% - 6px) round 10px)}.filter-table tbody td{border:none;background-color:#fafafa;padding:8px 16px;vertical-align:middle;text-align:left}.filter-table .filter-col-name{font-weight:600;color:#1f2933}.filter-table .filter-col-type{color:#7b8794;width:120px}.filter-table .filter-col-toggle,.filter-table th.filter-col-toggle{width:130px;text-align:center}.filters-empty{font-size:13px;color:#7b8794;padding:8px 0 4px}.filters-empty.error{color:#e15759}.code-block{margin:0;padding:10px 12px;background:#1f2933;color:#e4e7eb;border-radius:6px;font-family:JetBrains Mono,Consolas,monospace;font-size:12px;line-height:1.5;white-space:pre-wrap;word-break:break-word;max-height:240px;overflow:auto}\n"] }]
+                    ], template: "<form\n    fsForm\n    [submit]=\"save\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      {{ component.title || 'Component' }}\n    </h1>\n    <mat-dialog-content>\n      <mat-tab-group [(selected)]=\"selectedTab\">\n        <mat-tab\n            label=\"Settings\"\n            name=\"settings\">\n          <div class=\"fs-column tab-body\">\n            <mat-form-field>\n              <mat-label>\n                Title\n              </mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"title\"\n                name=\"title\">\n            </mat-form-field>\n            <div class=\"subheading-2\">\n              Padding\n            </div>\n            <div class=\"geometry-row\">\n              <mat-form-field>\n                <mat-label>\n                  Top\n                </mat-label>\n                <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"3\"\n                  [(ngModel)]=\"paddingTop\"\n                  name=\"paddingTop\"\n                  [fsFormMin]=\"0\">\n                <div matTextSuffix>\n                  in\n                </div>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Right\n                </mat-label>\n                <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"3\"\n                  [(ngModel)]=\"paddingRight\"\n                  name=\"paddingRight\"\n                  [fsFormMin]=\"0\">\n                <div matTextSuffix>\n                  in\n                </div>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Bottom\n                </mat-label>\n                <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"3\"\n                  [(ngModel)]=\"paddingBottom\"\n                  name=\"paddingBottom\"\n                  [fsFormMin]=\"0\">\n                <div matTextSuffix>\n                  in\n                </div>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Left\n                </mat-label>\n                <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"3\"\n                  [(ngModel)]=\"paddingLeft\"\n                  name=\"paddingLeft\"\n                  [fsFormMin]=\"0\">\n                <div matTextSuffix>\n                  in\n                </div>\n              </mat-form-field>\n            </div>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Filters\"\n            name=\"filters\">\n          <div class=\"tab-body\">\n            @if (columnsError) {\n              <div class=\"filters-empty error\">\n                {{ columnsError }}\n              </div>\n            } @else if (rows.length) {\n              <!-- Every filterable column. Toggle where its control shows: in\n                   the report bar, on this component, both, or neither. The\n                   interface (date range vs value picker) follows the data. -->\n              <table class=\"filter-table\">\n                <thead>\n                  <tr>\n                    <th class=\"filter-col-name\">\n                      Filter\n                    </th>\n                    <th class=\"filter-col-type\">\n                      Type\n                    </th>\n                    <th class=\"filter-col-toggle\">\n                      Report bar\n                    </th>\n                    <th class=\"filter-col-toggle\">\n                      This component\n                    </th>\n                  </tr>\n                </thead>\n                <tbody>\n                  @for (row of rows; track row.column) {\n                    <tr>\n                      <td class=\"filter-col-name\">\n                        {{ row.label }}\n                      </td>\n                      <td class=\"filter-col-type\">\n                        {{ typeLabel(row.type) }}\n                      </td>\n                      <td class=\"filter-col-toggle\">\n                        <mat-slide-toggle\n                          [ngModel]=\"row.report\"\n                          (ngModelChange)=\"setExposure(row, 'report', $event)\"\n                          [ngModelOptions]=\"{ standalone: true }\"\n                          matTooltip=\"Show in the report bar\">\n                        </mat-slide-toggle>\n                      </td>\n                      <td class=\"filter-col-toggle\">\n                        <mat-slide-toggle\n                          [ngModel]=\"row.component\"\n                          (ngModelChange)=\"setExposure(row, 'component', $event)\"\n                          [ngModelOptions]=\"{ standalone: true }\"\n                          matTooltip=\"Show on this component\">\n                        </mat-slide-toggle>\n                      </td>\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            } @else {\n              <div class=\"filters-empty\">\n                This component has no filterable columns yet \u2014 give it some SQL first.\n              </div>\n            }\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"SQL\"\n            name=\"sql\">\n          <div class=\"tab-body\">\n            @if (sqlError) {\n              <div class=\"filters-empty error\">\n                {{ sqlError }}\n              </div>\n            } @else if (sql) {\n              @if (sqlBaseline) {\n                <!-- A derived component's statement is compiled from its\n                     document with no viewer state, so it is not byte-for-byte\n                     what produced the numbers on screen. Said here rather than\n                     left for the reader to discover. -->\n                <div class=\"filters-empty\">\n                  Compiled from this component's query \u2014 no filters applied, times in UTC.\n                </div>\n              }\n              <pre class=\"code-block\">{{ sql }}</pre>\n            } @else {\n              <div class=\"filters-empty\">\n                This component has no SQL yet.\n              </div>\n            }\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Config\"\n            name=\"config\">\n          <div class=\"tab-body\">\n            <pre class=\"code-block\">\n              {{ configJson }}\n            </pre>\n          </div>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <!-- Save | Delete | Cancel, the standard order. fs-form-dialog-actions\n           renders its own Save/Done BEFORE the projected content, which would\n           put Delete after Cancel, so `[save]=\"false\"` foots the row here and\n           all three buttons are projected in order. Save submits the Settings\n           tab; the other tabs persist as you touch them, so they get Done. -->\n      <fs-form-dialog-actions [save]=\"false\">\n        @if (selectedTab === 'settings') {\n          <button\n              mat-button\n              type=\"submit\"\n              color=\"primary\">\n            Save\n          </button>\n        } @else {\n          <button\n              mat-button\n              type=\"button\"\n              color=\"primary\"\n              [mat-dialog-close]=\"null\">\n            Done\n          </button>\n        }\n        <button\n            mat-button\n            type=\"button\"\n            color=\"warn\"\n            (click)=\"delete()\">\n          Delete\n        </button>\n        <button\n            mat-button\n            type=\"button\"\n            class=\"cancel-button\"\n            [mat-dialog-close]=\"null\">\n          Cancel\n        </button>\n      </fs-form-dialog-actions>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>", styles: ["mat-form-field{width:100%}.tab-body{padding-top:16px}.geometry-row{display:flex;gap:8px}.geometry-row mat-form-field{flex:1}.filter-table{border-spacing:0;width:100%;border-collapse:collapse}.filter-table thead th{color:#8f8f8f;font-weight:400;font-size:85%;text-align:left;padding:8px 16px}.filter-table tbody tr{clip-path:xywh(0 3px 100% calc(100% - 6px) round 10px)}.filter-table tbody td{border:none;background-color:#fafafa;padding:8px 16px;vertical-align:middle;text-align:left}.filter-table .filter-col-name{font-weight:600;color:#1f2933}.filter-table .filter-col-type{color:#7b8794;width:120px}.filter-table .filter-col-toggle,.filter-table th.filter-col-toggle{width:130px;text-align:center}.filters-empty{font-size:13px;color:#7b8794;padding:8px 0 4px}.filters-empty.error{color:#e15759}.code-block{margin:0;padding:10px 12px;background:#1f2933;color:#e4e7eb;border-radius:6px;font-family:JetBrains Mono,Consolas,monospace;font-size:12px;line-height:1.5;white-space:pre-wrap;word-break:break-word;max-height:240px;overflow:auto}\n"] }]
         }] });
 
 // Self-contained timezone picker for the report settings dialog. The IANA zone
@@ -3140,7 +3270,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 // complete synchronously after setOption.
 async function renderChartImage(component, data, width, height, pixelRatio = 3) {
     // The same tree-shaken echarts build + 'report' theme the live canvas uses.
-    const echarts = (await import('./firestitch-report-echarts-DPeQc3Lq.mjs')).default;
+    const echarts = (await import('./firestitch-report-echarts-BLtDCank.mjs')).default;
     const host = document.createElement('div');
     host.style.width = `${width}px`;
     host.style.height = `${height}px`;
@@ -3783,6 +3913,15 @@ class ReportComponent {
         dialogRef.afterClosed()
             .pipe(takeUntilDestroyed(this._destroyRef))
             .subscribe((result) => {
+            // The dialog confirms + performs the delete itself. The component is
+            // gone from the report, so reload rather than patching it out locally —
+            // its filters went with it, which the report bar has to be rebuilt for.
+            if (result?.deleted) {
+                if (this.selected) {
+                    this._loadReport(this.selected.id);
+                }
+                return;
+            }
             // The report's filter groups changed, so the report bar and the
             // on-component strips have to be rebuilt from a fresh report.
             if (filtersChanged) {
@@ -3987,8 +4126,8 @@ class ReportComponent {
             ReportExportService,
             // Tree-shaken ECharts core + the 'report' house theme, loaded lazily with
             // this route's chunk.
-            provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-DPeQc3Lq.mjs').then((module) => module.default) }),
-        ], viewQueries: [{ propertyName: "_split", first: true, predicate: ["split"], descendants: true, static: true }, { propertyName: "_chatPanel", first: true, predicate: ["chatPanel"], descendants: true, read: ElementRef, static: true }, { propertyName: "_canvas", first: true, predicate: ReportCanvasComponent, descendants: true }], ngImport: i0, template: "<div\n    #split\n    class=\"report fs-row.align-start\">\n  <fs-ai-chat\n    #chatPanel\n    class=\"chat\"\n    style=\"min-height: 500px;\"\n    basePath=\"reports\"\n    [requestData]=\"{ reportId: selected?.id ?? null }\"\n    [introMessage]=\"introMessage\"\n    (response)=\"onChatResponse($event)\">\n  </fs-ai-chat>\n  <div\n    class=\"resizer\"\n    (pointerdown)=\"onResizeStart($event)\">\n  </div>\n  <div class=\"viewer fs-flex fs-column\">\n    <div class=\"fs-row.align-center.gap-sm\">\n      <fs-autocomplete-chips\n          class=\"fs-flex\"\n          [fetch]=\"fetchReports\"\n          [(ngModel)]=\"selected\"\n          [disabled]=\"loadingReports\"\n          [padless]=\"true\"\n          [multiple]=\"false\"\n          [fetchOnFocus]=\"true\"\n          (ngModelChange)=\"reportChange($event)\"\n          placeholder=\"Report\"\n          name=\"report\">\n        <ng-template\n            fsAutocompleteChipsTemplate\n            let-object=\"object\">\n          {{ object.name }}\n        </ng-template>\n        <ng-template\n            fsAutocompleteChipsStatic\n            (click)=\"createReport()\">\n          Create Report\n        </ng-template>\n      </fs-autocomplete-chips>\n      @if (report) {\n        <fs-menu>\n          <ng-template\n              fs-menu-item\n              (click)=\"reportSettings()\">\n            <mat-icon>\n              tune\n            </mat-icon>\n            Report settings\n          </ng-template>\n          <ng-template\n              fs-menu-item\n              (click)=\"toggleEditMode()\"\n              [disabled]=\"editMode\">\n            <mat-icon>\n              dashboard_2_edit\n            </mat-icon>\n            {{ editMode ? 'Done editing layout' : 'Edit layout' }}\n          </ng-template>\n          <ng-template\n              fs-menu-item\n              (click)=\"exportPowerpoint()\">\n            <mat-icon>\n              slideshow\n            </mat-icon>\n            Export PowerPoint\n          </ng-template>\n          <ng-template\n              fs-menu-item\n              (click)=\"exportPdf()\">\n            <mat-icon>\n              picture_as_pdf\n            </mat-icon>\n            Export PDF\n          </ng-template>\n          <ng-template\n              fs-menu-item\n              (click)=\"exportData()\">\n            <mat-icon>\n              table_view\n            </mat-icon>\n            Export Raw Data\n          </ng-template>\n          @if ((report?.pages?.length ?? 0) > 1) {\n            <ng-template\n                fs-menu-item\n                (click)=\"exportData(true)\">\n              <mat-icon>\n                table_view\n              </mat-icon>\n              Export Raw Data (This Page)\n            </ng-template>\n          }\n        </fs-menu>\n      }\n    </div>\n    @if (report) {\n      <!-- Report-level filters only (the report's actions live in the menu\n           above). fs-filter reads its config once at init, so it's keyed on the\n           filter signature: when the report-level filter set changes the block\n           is recreated and re-reads the rebuilt config. -->\n      @if (reportHasFilters) {\n        @for (key of [reportFilterKey]; track key) {\n          <fs-filter [config]=\"reportFilterConfig\"></fs-filter>\n        }\n      }\n      <app-report-canvas\n        [report]=\"report\"\n        [editMode]=\"editMode\"\n        (componentSettings)=\"componentSettings($event)\"\n        (reportChanged)=\"onCanvasReportChanged()\"\n        (editDone)=\"toggleEditMode()\">\n      </app-report-canvas>\n    }\n  </div>\n</div>", styles: [".report{height:100%;min-height:500px}.report .chat{display:block;flex:0 0 25%;width:100%;height:100%;min-height:500px;min-width:0;border:none}.report .viewer{display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden}.report .viewer fs-filter{flex:0 0 auto;margin-top:10px;margin-bottom:0}.report .viewer ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.report .resizer{flex:0 0 11px;align-self:stretch;display:flex;justify-content:center;cursor:col-resize;touch-action:none;-webkit-user-select:none;user-select:none}.report .resizer:before{content:\"\";width:0px;background:#0000001f;transition:width .12s ease,background-color .12s ease}.report .resizer:hover:before{width:3px;background:var(--brand-primary-color)}.report.resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.report.resizing .resizer:before{width:3px;background:var(--brand-primary-color)}.report.resizing .chat,.report.resizing .viewer{pointer-events:none}::ng-deep body.body-report-reports .mat-mdc-card-content{display:flex;flex-direction:column;box-sizing:border-box}::ng-deep body.body-report-reports .mat-mdc-card-content mat-tab-nav-panel{flex:1;min-height:0}::ng-deep body.body-report-reports .mat-mdc-card-content mat-tab-nav-panel router-outlet+ng-component{height:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: FsAutocompleteChipsModule }, { kind: "component", type: i2$3.FsAutocompleteChipsComponent, selector: "fs-autocomplete-chips", inputs: ["fetch", "appearance", "floatLabel", "readonly", "size", "label", "placeholder", "chipImage", "chipBackground", "chipColor", "chipIcon", "chipIconColor", "chipClass", "chipPadding", "shape", "hint", "allowText", "allowObject", "delay", "minPanelWidth", "maxPanelHeight", "validateText", "removable", "allowClear", "color", "background", "orderable", "padless", "initOnClick", "fetchOnFocus", "multiple", "multipleAdd", "confirm", "disabled", "groupBy", "panelWidth", "panelClass", "compareWith"], outputs: ["selected", "removed", "reordered", "clear", "panelOpened", "panelClosed"] }, { kind: "directive", type: i2$3.FsAutocompleteObjectDirective, selector: "[fsAutocompleteObject],[fsAutocompleteChipsTemplate]" }, { kind: "directive", type: i2$3.FsAutocompleteChipsStaticDirective, selector: "[fsAutocompleteChipsStatic]", inputs: ["show", "disable"], outputs: ["click", "selected"] }, { kind: "ngmodule", type: FsFilterModule }, { kind: "component", type: i2.FilterComponent, selector: "fs-filter", inputs: ["config"], outputs: ["closed", "opened", "ready"] }, { kind: "ngmodule", type: FsMenuModule }, { kind: "component", type: i2$1.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i2$1.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "component", type: FsAiChatComponent, selector: "fs-ai-chat", inputs: ["basePath", "requestData", "introMessage", "showThinking"], outputs: ["response", "showThinkingChange"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ReportCanvasComponent, selector: "app-report-canvas", inputs: ["report", "editMode", "pageId"], outputs: ["componentSettings", "reportChanged", "editDone", "pageChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+            provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-BLtDCank.mjs').then((module) => module.default) }),
+        ], viewQueries: [{ propertyName: "_split", first: true, predicate: ["split"], descendants: true, static: true }, { propertyName: "_chatPanel", first: true, predicate: ["chatPanel"], descendants: true, read: ElementRef, static: true }, { propertyName: "_canvas", first: true, predicate: ReportCanvasComponent, descendants: true }], ngImport: i0, template: "<div\n    #split\n    class=\"report fs-row.align-start\">\n  <fs-ai-chat\n    #chatPanel\n    class=\"chat\"\n    style=\"min-height: 500px;\"\n    basePath=\"reports\"\n    [requestData]=\"{ reportId: selected?.id ?? null }\"\n    [introMessage]=\"introMessage\"\n    (response)=\"onChatResponse($event)\">\n  </fs-ai-chat>\n  <div\n    class=\"resizer\"\n    (pointerdown)=\"onResizeStart($event)\">\n  </div>\n  <div class=\"viewer fs-flex fs-column\">\n    <div class=\"fs-row.align-center.gap-sm\">\n      <fs-autocomplete-chips\n          class=\"fs-flex\"\n          [fetch]=\"fetchReports\"\n          [(ngModel)]=\"selected\"\n          [disabled]=\"loadingReports\"\n          [padless]=\"true\"\n          [multiple]=\"false\"\n          [fetchOnFocus]=\"true\"\n          (ngModelChange)=\"reportChange($event)\"\n          placeholder=\"Report\"\n          name=\"report\">\n        <ng-template\n            fsAutocompleteChipsTemplate\n            let-object=\"object\">\n          {{ object.name }}\n        </ng-template>\n        <ng-template\n            fsAutocompleteChipsStatic\n            (click)=\"createReport()\">\n          Create Report\n        </ng-template>\n      </fs-autocomplete-chips>\n      @if (report) {\n        <fs-menu>\n          <ng-template\n              fs-menu-item\n              (click)=\"reportSettings()\">\n            <mat-icon>\n              tune\n            </mat-icon>\n            Report settings\n          </ng-template>\n          <ng-template\n              fs-menu-item\n              (click)=\"toggleEditMode()\"\n              [disabled]=\"editMode\">\n            <mat-icon>\n              dashboard_2_edit\n            </mat-icon>\n            {{ editMode ? 'Done editing layout' : 'Edit layout' }}\n          </ng-template>\n          <ng-template\n              fs-menu-item\n              (click)=\"exportPowerpoint()\">\n            <mat-icon>\n              slideshow\n            </mat-icon>\n            Export PowerPoint\n          </ng-template>\n          <ng-template\n              fs-menu-item\n              (click)=\"exportPdf()\">\n            <mat-icon>\n              picture_as_pdf\n            </mat-icon>\n            Export PDF\n          </ng-template>\n          <ng-template\n              fs-menu-item\n              (click)=\"exportData()\">\n            <mat-icon>\n              table_view\n            </mat-icon>\n            Export Raw Data\n          </ng-template>\n          @if ((report?.pages?.length ?? 0) > 1) {\n            <ng-template\n                fs-menu-item\n                (click)=\"exportData(true)\">\n              <mat-icon>\n                table_view\n              </mat-icon>\n              Export Raw Data (This Page)\n            </ng-template>\n          }\n        </fs-menu>\n      }\n    </div>\n    @if (report) {\n      <!-- Report-level filters only (the report's actions live in the menu\n           above). fs-filter reads its config once at init, so it's keyed on the\n           filter signature: when the report-level filter set changes the block\n           is recreated and re-reads the rebuilt config. -->\n      @if (reportHasFilters) {\n        @for (key of [reportFilterKey]; track key) {\n          <fs-filter [config]=\"reportFilterConfig\"></fs-filter>\n        }\n      }\n      <app-report-canvas\n        [report]=\"report\"\n        [editMode]=\"editMode\"\n        (componentSettings)=\"componentSettings($event)\"\n        (reportChanged)=\"onCanvasReportChanged()\"\n        (editDone)=\"toggleEditMode()\">\n      </app-report-canvas>\n    }\n  </div>\n</div>", styles: [".report{height:100%;min-height:500px}.report .chat{display:block;flex:0 0 25%;width:100%;height:100%;min-height:500px;min-width:0;border:none}.report .viewer{display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden}.report .viewer fs-filter{flex:0 0 auto;margin-top:10px;margin-bottom:0}.report .viewer ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.report .resizer{flex:0 0 11px;align-self:stretch;display:flex;justify-content:center;cursor:col-resize;touch-action:none;-webkit-user-select:none;user-select:none}.report .resizer:before{content:\"\";width:0px;background:#0000001f;transition:width .12s ease,background-color .12s ease}.report .resizer:hover:before{width:3px;background:var(--brand-primary-color)}.report.resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.report.resizing .resizer:before{width:3px;background:var(--brand-primary-color)}.report.resizing .chat,.report.resizing .viewer{pointer-events:none}::ng-deep body.body-report-reports .mat-mdc-card-content{display:flex;flex-direction:column;box-sizing:border-box}::ng-deep body.body-report-reports .mat-mdc-card-content mat-tab-nav-panel{flex:1;min-height:0}::ng-deep body.body-report-reports .mat-mdc-card-content mat-tab-nav-panel router-outlet+ng-component{height:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: FsAutocompleteChipsModule }, { kind: "component", type: i2$3.FsAutocompleteChipsComponent, selector: "fs-autocomplete-chips", inputs: ["fetch", "appearance", "floatLabel", "readonly", "size", "label", "placeholder", "chipImage", "chipBackground", "chipColor", "chipIcon", "chipIconColor", "chipClass", "chipPadding", "shape", "hint", "allowText", "allowObject", "delay", "minPanelWidth", "maxPanelHeight", "validateText", "removable", "allowClear", "color", "background", "orderable", "padless", "initOnClick", "fetchOnFocus", "multiple", "multipleAdd", "confirm", "disabled", "groupBy", "panelWidth", "panelClass", "compareWith"], outputs: ["selected", "removed", "reordered", "clear", "panelOpened", "panelClosed"] }, { kind: "directive", type: i2$3.FsAutocompleteObjectDirective, selector: "[fsAutocompleteObject],[fsAutocompleteChipsTemplate]" }, { kind: "directive", type: i2$3.FsAutocompleteChipsStaticDirective, selector: "[fsAutocompleteChipsStatic]", inputs: ["show", "disable"], outputs: ["click", "selected"] }, { kind: "ngmodule", type: FsFilterModule }, { kind: "component", type: i2.FilterComponent, selector: "fs-filter", inputs: ["config"], outputs: ["closed", "opened", "ready"] }, { kind: "ngmodule", type: FsMenuModule }, { kind: "component", type: i2$1.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i2$1.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "component", type: FsAiChatComponent, selector: "fs-ai-chat", inputs: ["basePath", "requestData", "ready", "introMessage", "showThinking"], outputs: ["response", "showThinkingChange"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ReportCanvasComponent, selector: "app-report-canvas", inputs: ["report", "editMode", "pageId"], outputs: ["componentSettings", "reportChanged", "editDone", "pageChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportComponent, decorators: [{
             type: Component,
@@ -4002,7 +4141,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         ReportExportService,
                         // Tree-shaken ECharts core + the 'report' house theme, loaded lazily with
                         // this route's chunk.
-                        provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-DPeQc3Lq.mjs').then((module) => module.default) }),
+                        provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-BLtDCank.mjs').then((module) => module.default) }),
                     ], imports: [
                         FormsModule,
                         FsAutocompleteChipsModule,
@@ -5095,6 +5234,33 @@ class FsAiReportComponent {
     // Cleared as soon as the canvas reports back, so a later in-app page change
     // is never fought by a stale value.
     pageId = null;
+    // The page the chat is bound to: the one on screen. A report conversation
+    // belongs to exactly one page, so this both scopes the conversation list and
+    // becomes the new conversation's page. A signal because it feeds
+    // [requestData] — changing it is what reloads the panel onto the new page's
+    // conversations. Null until the canvas reports which page it opened on, which
+    // keeps the chat from listing against a page guess.
+    chatPageId = signal(null);
+    // What the chat sends with every conversation call: the report, and the page
+    // it is bound to.
+    //
+    // reportPageId is OMITTED, not sent as null, while the open page is unknown.
+    // The backend reads a PRESENT reportPageId of 0/null as "the report's earlier,
+    // page-less conversations", so sending null before the canvas has reported in
+    // would ask for the wrong list — and, worse, would bind a conversation started
+    // in that window to no page at all.
+    //
+    // The chat is also held closed ([ready] in the template) until the page is
+    // known, so this partial context is never actually sent: on a fresh load the
+    // report has to arrive and the canvas has to render before any page exists,
+    // and a list fetched in that window would be the whole report's conversations
+    // — the unscoped list, shown and auto-selected before the real one lands.
+    chatRequestData = computed(() => {
+        const reportPageId = this.chatPageId();
+        return reportPageId === null
+            ? { reportId: this.reportId() }
+            : { reportId: this.reportId(), reportPageId };
+    });
     // The report-level filter toolbar (fs-filter). Rebuilt whenever the loaded
     // report (and thus its groups) changes.
     reportFilterConfig;
@@ -5123,6 +5289,9 @@ class FsAiReportComponent {
         effect(() => {
             const reportId = this.reportId();
             this.editMode = false;
+            // A new report's pages are not this report's pages — drop the binding
+            // until its canvas says which page it landed on.
+            this.chatPageId.set(null);
             // Seed the open page from the URL for this report. Read per load rather
             // than once at construction: the host may swap reports on the same route,
             // and each arrival carries its own ?page=.
@@ -5186,6 +5355,13 @@ class FsAiReportComponent {
         dialogRef.afterClosed()
             .pipe(takeUntilDestroyed(this._destroyRef))
             .subscribe((result) => {
+            // The dialog confirms + performs the delete itself. The component is
+            // gone from the report, so reload rather than patching it out locally —
+            // its filters went with it, which the report bar has to be rebuilt for.
+            if (result?.deleted) {
+                this._loadReport(reportId);
+                return;
+            }
             // The report's filter groups changed, so the report bar and the
             // on-component strips have to be rebuilt from a fresh report.
             if (filtersChanged) {
@@ -5206,6 +5382,7 @@ class FsAiReportComponent {
     onCanvasPageChanged(pageId) {
         // The deep link has been consumed; from here the canvas owns the page.
         this.pageId = null;
+        this.chatPageId.set(pageId);
         this.pageChanged.emit(pageId);
         const param = this.pageQueryParam();
         if (!param) {
@@ -5398,8 +5575,8 @@ class FsAiReportComponent {
             ReportPdfService,
             ReportExportService,
             // Tree-shaken ECharts core + the 'report' house theme, loaded lazily.
-            provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-DPeQc3Lq.mjs').then((module) => module.default) }),
-        ], viewQueries: [{ propertyName: "_split", first: true, predicate: ["split"], descendants: true, static: true }, { propertyName: "_chatPanel", first: true, predicate: ["chatPanel"], descendants: true, read: ElementRef, static: true }, { propertyName: "_canvas", first: true, predicate: ReportCanvasComponent, descendants: true }], ngImport: i0, template: "<div class=\"fs-ai-report fs-column\">\n\n  <div class=\"fs-ai-report__header fs-row.align-center\">\n    <h2 class=\"fs-ai-report__title fs-flex\">{{ report?.name }}</h2>\n\n    @if (report) {\n      <!-- Report-level filters, inline with the toolbar actions. fs-filter\n           reads its config once at init, so it's keyed on the filter\n           signature: when the report-level filter set changes the block is\n           recreated and re-reads the rebuilt config. -->\n      @if (reportHasFilters) {\n        @for (key of [reportFilterKey]; track key) {\n          <fs-filter\n              class=\"fs-ai-report__filters\"\n              [config]=\"reportFilterConfig\">\n          </fs-filter>\n        }\n      }\n\n      <button\n          mat-icon-button\n          type=\"button\"\n          [matTooltip]=\"editMode ? 'Done' : 'Edit layout'\"\n          (click)=\"toggleEditMode()\">\n        <mat-icon>{{ editMode ? 'lock' : 'open_with' }}</mat-icon>\n      </button>\n\n      <button\n          mat-icon-button\n          type=\"button\"\n          matTooltip=\"Export\"\n          [fsMenuTriggerFor]=\"exportMenu\">\n        <mat-icon>download</mat-icon>\n      </button>\n      <fs-menu #exportMenu>\n        <ng-template\n            fs-menu-item\n            (click)=\"exportPowerpoint()\">\n          Export PowerPoint\n        </ng-template>\n        <ng-template\n            fs-menu-item\n            (click)=\"exportPdf()\">\n          Export PDF\n        </ng-template>\n        <ng-template\n            fs-menu-item\n            (click)=\"exportData()\">\n          Export Raw Data\n        </ng-template>\n        @if ((report?.pages?.length ?? 0) > 1) {\n          <ng-template\n              fs-menu-item\n              (click)=\"exportData(true)\">\n            Export Raw Data (This Page)\n          </ng-template>\n        }\n      </fs-menu>\n\n      <button\n          mat-icon-button\n          type=\"button\"\n          matTooltip=\"Report settings\"\n          (click)=\"reportSettings()\">\n        <mat-icon>settings</mat-icon>\n      </button>\n    }\n  </div>\n\n  <div\n      #split\n      class=\"fs-ai-report__split fs-row.align-start\">\n    <fs-ai-chat\n        #chatPanel\n        class=\"chat\"\n        [basePath]=\"basePath()\"\n        [requestData]=\"{ reportId: reportId() }\"\n        (response)=\"onChatResponse($event)\">\n    </fs-ai-chat>\n\n    <div\n        class=\"resizer\"\n        (pointerdown)=\"onResizeStart($event)\">\n    </div>\n\n    <div class=\"viewer fs-flex fs-column\">\n      @if (report) {\n        <app-report-canvas\n            [report]=\"report\"\n            [editMode]=\"editMode\"\n            [pageId]=\"pageId\"\n            (componentSettings)=\"componentSettings($event)\"\n            (reportChanged)=\"onCanvasReportChanged()\"\n            (pageChanged)=\"onCanvasPageChanged($event)\"\n            (editDone)=\"toggleEditMode()\">\n        </app-report-canvas>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".fs-ai-report{height:100%;min-height:500px;display:flex;flex-direction:column}.fs-ai-report__header{flex:0 0 auto;margin-bottom:10px}.fs-ai-report__title{margin:0;min-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fs-ai-report__filters{flex:0 1 auto;min-width:0;display:block;margin:0 5px 0 0}.fs-ai-report__filters ::ng-deep .filter-bar-container{align-items:center!important}.fs-ai-report__filters ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.fs-ai-report__split{flex:1 1 auto;min-height:0}.fs-ai-report .chat{display:block;flex:0 0 25%;width:100%;height:100%;min-height:400px;min-width:0;border:none}.fs-ai-report .viewer{display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden}.fs-ai-report .resizer{flex:0 0 11px;align-self:stretch;display:flex;justify-content:center;cursor:col-resize;touch-action:none;-webkit-user-select:none;user-select:none}.fs-ai-report .resizer:before{content:\"\";width:3px;border-radius:3px;background:transparent;transition:background-color .12s ease}.fs-ai-report .resizer:hover:before{background:var(--brand-primary-color)}.fs-ai-report__split.resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.fs-ai-report__split.resizing .resizer:before{background:var(--brand-primary-color)}.fs-ai-report__split.resizing .chat,.fs-ai-report__split.resizing .viewer{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: FsFilterModule }, { kind: "component", type: i2.FilterComponent, selector: "fs-filter", inputs: ["config"], outputs: ["closed", "opened", "ready"] }, { kind: "ngmodule", type: FsMenuModule }, { kind: "component", type: i2$1.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i2$1.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "directive", type: i2$1.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { kind: "component", type: FsAiChatComponent, selector: "fs-ai-chat", inputs: ["basePath", "requestData", "introMessage", "showThinking"], outputs: ["response", "showThinkingChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ReportCanvasComponent, selector: "app-report-canvas", inputs: ["report", "editMode", "pageId"], outputs: ["componentSettings", "reportChanged", "editDone", "pageChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+            provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-BLtDCank.mjs').then((module) => module.default) }),
+        ], viewQueries: [{ propertyName: "_split", first: true, predicate: ["split"], descendants: true, static: true }, { propertyName: "_chatPanel", first: true, predicate: ["chatPanel"], descendants: true, read: ElementRef, static: true }, { propertyName: "_canvas", first: true, predicate: ReportCanvasComponent, descendants: true }], ngImport: i0, template: "<div class=\"fs-ai-report fs-column\">\r\n\r\n  <div class=\"fs-ai-report__header fs-row.align-center\">\r\n    <h2 class=\"fs-ai-report__title fs-flex\">{{ report?.name }}</h2>\r\n\r\n    @if (report) {\r\n      <!-- Report-level filters, inline with the toolbar actions. fs-filter\r\n           reads its config once at init, so it's keyed on the filter\r\n           signature: when the report-level filter set changes the block is\r\n           recreated and re-reads the rebuilt config. -->\r\n      @if (reportHasFilters) {\r\n        @for (key of [reportFilterKey]; track key) {\r\n          <fs-filter\r\n              class=\"fs-ai-report__filters\"\r\n              [config]=\"reportFilterConfig\">\r\n          </fs-filter>\r\n        }\r\n      }\r\n\r\n      <button\r\n          mat-icon-button\r\n          type=\"button\"\r\n          [matTooltip]=\"editMode ? 'Done' : 'Edit layout'\"\r\n          (click)=\"toggleEditMode()\">\r\n        <mat-icon>{{ editMode ? 'lock' : 'open_with' }}</mat-icon>\r\n      </button>\r\n\r\n      <button\r\n          mat-icon-button\r\n          type=\"button\"\r\n          matTooltip=\"Export\"\r\n          [fsMenuTriggerFor]=\"exportMenu\">\r\n        <mat-icon>download</mat-icon>\r\n      </button>\r\n      <fs-menu #exportMenu>\r\n        <ng-template\r\n            fs-menu-item\r\n            (click)=\"exportPowerpoint()\">\r\n          Export PowerPoint\r\n        </ng-template>\r\n        <ng-template\r\n            fs-menu-item\r\n            (click)=\"exportPdf()\">\r\n          Export PDF\r\n        </ng-template>\r\n        <ng-template\r\n            fs-menu-item\r\n            (click)=\"exportData()\">\r\n          Export Raw Data\r\n        </ng-template>\r\n        @if ((report?.pages?.length ?? 0) > 1) {\r\n          <ng-template\r\n              fs-menu-item\r\n              (click)=\"exportData(true)\">\r\n            Export Raw Data (This Page)\r\n          </ng-template>\r\n        }\r\n      </fs-menu>\r\n\r\n      <button\r\n          mat-icon-button\r\n          type=\"button\"\r\n          matTooltip=\"Report settings\"\r\n          (click)=\"reportSettings()\">\r\n        <mat-icon>settings</mat-icon>\r\n      </button>\r\n    }\r\n  </div>\r\n\r\n  <div\r\n      #split\r\n      class=\"fs-ai-report__split fs-row.align-start\">\r\n    <fs-ai-chat\r\n        #chatPanel\r\n        class=\"chat\"\r\n        [basePath]=\"basePath()\"\r\n        [requestData]=\"chatRequestData()\"\r\n        [ready]=\"chatPageId() !== null\"\r\n        (response)=\"onChatResponse($event)\">\r\n    </fs-ai-chat>\r\n\r\n    <div\r\n        class=\"resizer\"\r\n        (pointerdown)=\"onResizeStart($event)\">\r\n    </div>\r\n\r\n    <div class=\"viewer fs-flex fs-column\">\r\n      @if (report) {\r\n        <app-report-canvas\r\n            [report]=\"report\"\r\n            [editMode]=\"editMode\"\r\n            [pageId]=\"pageId\"\r\n            (componentSettings)=\"componentSettings($event)\"\r\n            (reportChanged)=\"onCanvasReportChanged()\"\r\n            (pageChanged)=\"onCanvasPageChanged($event)\"\r\n            (editDone)=\"toggleEditMode()\">\r\n        </app-report-canvas>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".fs-ai-report{height:100%;min-height:500px;display:flex;flex-direction:column}.fs-ai-report__header{flex:0 0 auto;margin-bottom:10px}.fs-ai-report__title{margin:0;min-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fs-ai-report__filters{flex:0 1 auto;min-width:0;display:block;margin:0 5px 0 0}.fs-ai-report__filters ::ng-deep .filter-bar-container{align-items:center!important}.fs-ai-report__filters ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.fs-ai-report__split{flex:1 1 auto;min-height:0}.fs-ai-report .chat{display:block;flex:0 0 25%;width:100%;height:100%;min-height:400px;min-width:0;border:none}.fs-ai-report .viewer{display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden}.fs-ai-report .resizer{flex:0 0 11px;align-self:stretch;display:flex;justify-content:center;cursor:col-resize;touch-action:none;-webkit-user-select:none;user-select:none}.fs-ai-report .resizer:before{content:\"\";width:3px;border-radius:3px;background:transparent;transition:background-color .12s ease}.fs-ai-report .resizer:hover:before{background:var(--brand-primary-color)}.fs-ai-report__split.resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.fs-ai-report__split.resizing .resizer:before{background:var(--brand-primary-color)}.fs-ai-report__split.resizing .chat,.fs-ai-report__split.resizing .viewer{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: FsFilterModule }, { kind: "component", type: i2.FilterComponent, selector: "fs-filter", inputs: ["config"], outputs: ["closed", "opened", "ready"] }, { kind: "ngmodule", type: FsMenuModule }, { kind: "component", type: i2$1.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i2$1.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "directive", type: i2$1.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { kind: "component", type: FsAiChatComponent, selector: "fs-ai-chat", inputs: ["basePath", "requestData", "ready", "introMessage", "showThinking"], outputs: ["response", "showThinkingChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ReportCanvasComponent, selector: "app-report-canvas", inputs: ["report", "editMode", "pageId"], outputs: ["componentSettings", "reportChanged", "editDone", "pageChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FsAiReportComponent, decorators: [{
             type: Component,
@@ -5412,7 +5589,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         ReportPdfService,
                         ReportExportService,
                         // Tree-shaken ECharts core + the 'report' house theme, loaded lazily.
-                        provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-DPeQc3Lq.mjs').then((module) => module.default) }),
+                        provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-BLtDCank.mjs').then((module) => module.default) }),
                     ], imports: [
                         FsFilterModule,
                         FsMenuModule,
@@ -5421,7 +5598,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         MatIconModule,
                         MatTooltipModule,
                         ReportCanvasComponent,
-                    ], template: "<div class=\"fs-ai-report fs-column\">\n\n  <div class=\"fs-ai-report__header fs-row.align-center\">\n    <h2 class=\"fs-ai-report__title fs-flex\">{{ report?.name }}</h2>\n\n    @if (report) {\n      <!-- Report-level filters, inline with the toolbar actions. fs-filter\n           reads its config once at init, so it's keyed on the filter\n           signature: when the report-level filter set changes the block is\n           recreated and re-reads the rebuilt config. -->\n      @if (reportHasFilters) {\n        @for (key of [reportFilterKey]; track key) {\n          <fs-filter\n              class=\"fs-ai-report__filters\"\n              [config]=\"reportFilterConfig\">\n          </fs-filter>\n        }\n      }\n\n      <button\n          mat-icon-button\n          type=\"button\"\n          [matTooltip]=\"editMode ? 'Done' : 'Edit layout'\"\n          (click)=\"toggleEditMode()\">\n        <mat-icon>{{ editMode ? 'lock' : 'open_with' }}</mat-icon>\n      </button>\n\n      <button\n          mat-icon-button\n          type=\"button\"\n          matTooltip=\"Export\"\n          [fsMenuTriggerFor]=\"exportMenu\">\n        <mat-icon>download</mat-icon>\n      </button>\n      <fs-menu #exportMenu>\n        <ng-template\n            fs-menu-item\n            (click)=\"exportPowerpoint()\">\n          Export PowerPoint\n        </ng-template>\n        <ng-template\n            fs-menu-item\n            (click)=\"exportPdf()\">\n          Export PDF\n        </ng-template>\n        <ng-template\n            fs-menu-item\n            (click)=\"exportData()\">\n          Export Raw Data\n        </ng-template>\n        @if ((report?.pages?.length ?? 0) > 1) {\n          <ng-template\n              fs-menu-item\n              (click)=\"exportData(true)\">\n            Export Raw Data (This Page)\n          </ng-template>\n        }\n      </fs-menu>\n\n      <button\n          mat-icon-button\n          type=\"button\"\n          matTooltip=\"Report settings\"\n          (click)=\"reportSettings()\">\n        <mat-icon>settings</mat-icon>\n      </button>\n    }\n  </div>\n\n  <div\n      #split\n      class=\"fs-ai-report__split fs-row.align-start\">\n    <fs-ai-chat\n        #chatPanel\n        class=\"chat\"\n        [basePath]=\"basePath()\"\n        [requestData]=\"{ reportId: reportId() }\"\n        (response)=\"onChatResponse($event)\">\n    </fs-ai-chat>\n\n    <div\n        class=\"resizer\"\n        (pointerdown)=\"onResizeStart($event)\">\n    </div>\n\n    <div class=\"viewer fs-flex fs-column\">\n      @if (report) {\n        <app-report-canvas\n            [report]=\"report\"\n            [editMode]=\"editMode\"\n            [pageId]=\"pageId\"\n            (componentSettings)=\"componentSettings($event)\"\n            (reportChanged)=\"onCanvasReportChanged()\"\n            (pageChanged)=\"onCanvasPageChanged($event)\"\n            (editDone)=\"toggleEditMode()\">\n        </app-report-canvas>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".fs-ai-report{height:100%;min-height:500px;display:flex;flex-direction:column}.fs-ai-report__header{flex:0 0 auto;margin-bottom:10px}.fs-ai-report__title{margin:0;min-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fs-ai-report__filters{flex:0 1 auto;min-width:0;display:block;margin:0 5px 0 0}.fs-ai-report__filters ::ng-deep .filter-bar-container{align-items:center!important}.fs-ai-report__filters ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.fs-ai-report__split{flex:1 1 auto;min-height:0}.fs-ai-report .chat{display:block;flex:0 0 25%;width:100%;height:100%;min-height:400px;min-width:0;border:none}.fs-ai-report .viewer{display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden}.fs-ai-report .resizer{flex:0 0 11px;align-self:stretch;display:flex;justify-content:center;cursor:col-resize;touch-action:none;-webkit-user-select:none;user-select:none}.fs-ai-report .resizer:before{content:\"\";width:3px;border-radius:3px;background:transparent;transition:background-color .12s ease}.fs-ai-report .resizer:hover:before{background:var(--brand-primary-color)}.fs-ai-report__split.resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.fs-ai-report__split.resizing .resizer:before{background:var(--brand-primary-color)}.fs-ai-report__split.resizing .chat,.fs-ai-report__split.resizing .viewer{pointer-events:none}\n"] }]
+                    ], template: "<div class=\"fs-ai-report fs-column\">\r\n\r\n  <div class=\"fs-ai-report__header fs-row.align-center\">\r\n    <h2 class=\"fs-ai-report__title fs-flex\">{{ report?.name }}</h2>\r\n\r\n    @if (report) {\r\n      <!-- Report-level filters, inline with the toolbar actions. fs-filter\r\n           reads its config once at init, so it's keyed on the filter\r\n           signature: when the report-level filter set changes the block is\r\n           recreated and re-reads the rebuilt config. -->\r\n      @if (reportHasFilters) {\r\n        @for (key of [reportFilterKey]; track key) {\r\n          <fs-filter\r\n              class=\"fs-ai-report__filters\"\r\n              [config]=\"reportFilterConfig\">\r\n          </fs-filter>\r\n        }\r\n      }\r\n\r\n      <button\r\n          mat-icon-button\r\n          type=\"button\"\r\n          [matTooltip]=\"editMode ? 'Done' : 'Edit layout'\"\r\n          (click)=\"toggleEditMode()\">\r\n        <mat-icon>{{ editMode ? 'lock' : 'open_with' }}</mat-icon>\r\n      </button>\r\n\r\n      <button\r\n          mat-icon-button\r\n          type=\"button\"\r\n          matTooltip=\"Export\"\r\n          [fsMenuTriggerFor]=\"exportMenu\">\r\n        <mat-icon>download</mat-icon>\r\n      </button>\r\n      <fs-menu #exportMenu>\r\n        <ng-template\r\n            fs-menu-item\r\n            (click)=\"exportPowerpoint()\">\r\n          Export PowerPoint\r\n        </ng-template>\r\n        <ng-template\r\n            fs-menu-item\r\n            (click)=\"exportPdf()\">\r\n          Export PDF\r\n        </ng-template>\r\n        <ng-template\r\n            fs-menu-item\r\n            (click)=\"exportData()\">\r\n          Export Raw Data\r\n        </ng-template>\r\n        @if ((report?.pages?.length ?? 0) > 1) {\r\n          <ng-template\r\n              fs-menu-item\r\n              (click)=\"exportData(true)\">\r\n            Export Raw Data (This Page)\r\n          </ng-template>\r\n        }\r\n      </fs-menu>\r\n\r\n      <button\r\n          mat-icon-button\r\n          type=\"button\"\r\n          matTooltip=\"Report settings\"\r\n          (click)=\"reportSettings()\">\r\n        <mat-icon>settings</mat-icon>\r\n      </button>\r\n    }\r\n  </div>\r\n\r\n  <div\r\n      #split\r\n      class=\"fs-ai-report__split fs-row.align-start\">\r\n    <fs-ai-chat\r\n        #chatPanel\r\n        class=\"chat\"\r\n        [basePath]=\"basePath()\"\r\n        [requestData]=\"chatRequestData()\"\r\n        [ready]=\"chatPageId() !== null\"\r\n        (response)=\"onChatResponse($event)\">\r\n    </fs-ai-chat>\r\n\r\n    <div\r\n        class=\"resizer\"\r\n        (pointerdown)=\"onResizeStart($event)\">\r\n    </div>\r\n\r\n    <div class=\"viewer fs-flex fs-column\">\r\n      @if (report) {\r\n        <app-report-canvas\r\n            [report]=\"report\"\r\n            [editMode]=\"editMode\"\r\n            [pageId]=\"pageId\"\r\n            (componentSettings)=\"componentSettings($event)\"\r\n            (reportChanged)=\"onCanvasReportChanged()\"\r\n            (pageChanged)=\"onCanvasPageChanged($event)\"\r\n            (editDone)=\"toggleEditMode()\">\r\n        </app-report-canvas>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".fs-ai-report{height:100%;min-height:500px;display:flex;flex-direction:column}.fs-ai-report__header{flex:0 0 auto;margin-bottom:10px}.fs-ai-report__title{margin:0;min-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fs-ai-report__filters{flex:0 1 auto;min-width:0;display:block;margin:0 5px 0 0}.fs-ai-report__filters ::ng-deep .filter-bar-container{align-items:center!important}.fs-ai-report__filters ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.fs-ai-report__split{flex:1 1 auto;min-height:0}.fs-ai-report .chat{display:block;flex:0 0 25%;width:100%;height:100%;min-height:400px;min-width:0;border:none}.fs-ai-report .viewer{display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden}.fs-ai-report .resizer{flex:0 0 11px;align-self:stretch;display:flex;justify-content:center;cursor:col-resize;touch-action:none;-webkit-user-select:none;user-select:none}.fs-ai-report .resizer:before{content:\"\";width:3px;border-radius:3px;background:transparent;transition:background-color .12s ease}.fs-ai-report .resizer:hover:before{background:var(--brand-primary-color)}.fs-ai-report__split.resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.fs-ai-report__split.resizing .resizer:before{background:var(--brand-primary-color)}.fs-ai-report__split.resizing .chat,.fs-ai-report__split.resizing .viewer{pointer-events:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { _split: [{
                 type: ViewChild,
                 args: ['split', { static: true }]
@@ -5446,4 +5623,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  */
 
 export { FsAiReportsComponent as F, GRANULARITY_OPTIONS as G, REPORT_CHART_COLORS_CSS as R, ReportComponent as a, FsAiReportComponent as b, ReportData as c, ReportService as d, ReportFilterStateService as e, ReportNodeType as f, ReportState as g, ReportStates as h };
-//# sourceMappingURL=firestitch-report-firestitch-report-BSGrWdzK.mjs.map
+//# sourceMappingURL=firestitch-report-firestitch-report-eTeJyMPo.mjs.map