@firestitch/report 18.1.0 → 18.2.0

package/fesm2022/{firestitch-report-firestitch-report-BSGrWdzK.mjs → firestitch-report-firestitch-report-CfSwIwzw.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 = {}) {
@@ -1365,13 +1374,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 +1506,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 +1588,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 +2112,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 +2139,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 +2175,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.
@@ -2491,6 +2571,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 +2592,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 +2756,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 +2771,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 +3241,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-Id_HJuQO.mjs')).default;
     const host = document.createElement('div');
     host.style.width = `${width}px`;
     host.style.height = `${height}px`;
@@ -3783,6 +3884,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 +4097,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-Id_HJuQO.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 +4112,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-Id_HJuQO.mjs').then((module) => module.default) }),
                     ], imports: [
                         FormsModule,
                         FsAutocompleteChipsModule,
@@ -5095,6 +5205,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 +5260,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 +5326,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 +5353,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 +5546,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-Id_HJuQO.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 +5560,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-Id_HJuQO.mjs').then((module) => module.default) }),
                     ], imports: [
                         FsFilterModule,
                         FsMenuModule,
@@ -5421,7 +5569,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 +5594,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-CfSwIwzw.mjs.map