@firestitch/report 18.11.0 → 18.12.0

package/fesm2022/{firestitch-report-firestitch-report-Bnv62suw.mjs → firestitch-report-firestitch-report-CHPA7sla.mjs}

@@ -27,14 +27,16 @@ import * as i6$1 from '@firestitch/message';
 import { FsMessage, FsMessageModule } from '@firestitch/message';
 import * as i3$1 from '@firestitch/zoom-pan';
 import { FsZoomPanComponent, FsZoomPanModule } from '@firestitch/zoom-pan';
-import { of, forkJoin, Subject, defer, merge, map as map$1, switchMap as switchMap$1, timer, catchError as catchError$1, filter as filter$1, tap as tap$1, distinctUntilChanged, mergeMap, from, debounceTime, throwError, EMPTY, BehaviorSubject } from 'rxjs';
-import { FsApi, DisplayApiError, StreamEventType } from '@firestitch/api';
+import { of, forkJoin, Subject, defer, merge, map as map$1, switchMap as switchMap$1, timer, catchError as catchError$1, filter as filter$1, mergeMap, EMPTY, concatWith, throwError, tap as tap$1, distinctUntilChanged, from, debounceTime, BehaviorSubject } from 'rxjs';
+import { FsApi, RequestMethod, StreamEventType, DisplayApiError } from '@firestitch/api';
 import { parseISO, isValid, addDays, min, max, startOfDay, isLastDayOfMonth, endOfMonth, addMonths, addYears, addQuarters, addWeeks, formatISO, format, startOfYear, startOfQuarter, startOfMonth, subMonths, subDays, subWeeks, startOfWeek, endOfWeek } from 'date-fns';
 import { toZonedTime } from 'date-fns-tz';
-import { MatProgressBar } from '@angular/material/progress-bar';
+import { canonicalGridLayout, GridFormat, GridUnits, GridFieldType, FsGridComponent } from '@firestitch/grid';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
 import { MatCheckbox } from '@angular/material/checkbox';
 import * as i3 from '@firestitch/dialog';
 import { FsDialogModule } from '@firestitch/dialog';
+import { HttpErrorResponse, HttpContext } from '@angular/common/http';
 import { NgTemplateOutlet, DOCUMENT } from '@angular/common';
 import * as i1 from '@firestitch/list';
 import { FsListComponent, PaginationStrategy, FsListModule } from '@firestitch/list';
@@ -55,7 +57,6 @@ import * as i3$2 from '@firestitch/mask';
 import { FsMaskModule } from '@firestitch/mask';
 import * as i6 from '@firestitch/tabs';
 import { FsTabsModule } from '@firestitch/tabs';
-import { HttpContext } from '@angular/common/http';
 import * as i9 from '@firestitch/datepicker';
 import { FsDatePickerModule, FS_DATEPICKER_CONFIG_DEFAULT, FS_DATEPICKER_CONFIG } from '@firestitch/datepicker';
 import * as i4 from '@firestitch/skeleton';
@@ -337,6 +338,17 @@ class ReportData {
             ...config,
         });
     }
+    // One grid tile's read (ReportGridSource): the same route as componentData,
+    // its body's `grid` the grid's request. The answer streams as
+    // newline-delimited JSON, one event per line: {report} first, then
+    // {grid: part} for each part of the read, a heartbeat {at} between
+    // statements, and the envelope with the read's summary last. The body's
+    // filters and state narrow the rows as they narrow any tile's; the grid's
+    // own column filters travel inside grid.layout. `isExport` is
+    // componentData's.
+    componentGrid(reportId, componentId, filters, state, grid, isExport = false, config = {}) {
+        return this._api.stream(RequestMethod.Post, this._path(`${reportId}/components/${componentId}/data`), { filters, state, export: isExport, grid }, config);
+    }
     // The numbers of a page's values — or the master's, for the header and
     // footer — in one request: a row per value that page reads, shown by some
     // text or read by a formula it shows (ReportPageValue). `filters` carries
@@ -4939,10 +4951,10 @@ function selectQueryValues(raw) {
 // read of the data. The list is positive, so a type added later (or one this
 // viewer does not know) is never taken for a tile. The server's twin is
 // ReportComponentModel::isTile().
-const TILE_TYPES = ['chart', 'list', 'kpi'];
-// Whether a component is a tile: a chart, a list or a KPI. Only a tile is
-// drawn as one, fetched, exported as a file or counted among a filter group's
-// tiles; every loop over a report's tiles reads this.
+const TILE_TYPES = ['chart', 'list', 'grid', 'kpi'];
+// Whether a component is a tile: a chart, a list, a grid or a KPI. Only a
+// tile is drawn as one, fetched, exported as a file or counted among a filter
+// group's tiles; every loop over a report's tiles reads this.
 function isTile(component) {
     return !!component && TILE_TYPES.includes(component.type);
 }
@@ -5954,6 +5966,19 @@ function listPriorAlias(outputs, alias, output) {
         : null;
 }
 
+// A table tile's layouts: the one its config authors, and the canonical key
+// two layouts are compared by.
+const NO_LAYOUT = {};
+// The layout a table tile's config authors, or none.
+function authoredGridLayout(component) {
+    return component.config?.layout ?? NO_LAYOUT;
+}
+// A layout's canonical key: two layouts that draw the same table have the
+// same key, whatever order or defaults they were written with.
+function gridLayoutKey(layout) {
+    return JSON.stringify(canonicalGridLayout(layout));
+}
+
 // Whether two stored filter-group defaults are the same. Compared on the fields a
 // default can actually carry, so key order in the payload can't read as a change.
 function sameDefault(a, b) {
@@ -6054,11 +6079,11 @@ function emptyTemporaryState() {
 //
 // It is the one place the viewer's state lives while the report is open: the
 // group values, the group-by grain, the match, list sorts, searches and hidden
-// columns, the page and each chart's drill path. None of it is ever written to
-// the browser URL. It outlives a page switch (the canvas changes the page, not
-// this service) and goes with the report view: a reload starts a new service,
-// which opens on the report's authored defaults. changes() fires on every
-// change of it.
+// columns, the page, each chart's drill path and each table's layout. None of
+// it is ever written to the browser URL. It outlives a page switch (the canvas
+// changes the page, not this service) and goes with the report view: a reload
+// starts a new service, which opens on the report's authored defaults.
+// changes() fires on every change of it.
 //
 // The durable part reads as one document: snapshot() writes it, and
 // differsFromDefaults says whether the screen still shows the report's
@@ -6068,7 +6093,8 @@ function emptyTemporaryState() {
 //
 // Session-only, never in the snapshot: per-filter enable/disable toggles from
 // a component's filter menu (the `enabled` column is the authored default; a
-// viewer's toggle shouldn't write to the report).
+// viewer's toggle shouldn't write to the report), and each table's layout,
+// which fs-grid sends with the table's own reads.
 class ReportFilterStateService {
     // The open report's effective zone (resolveReportTimezone). Relative presets
     // resolve against today in it, and date cells render in it.
@@ -6181,6 +6207,11 @@ class ReportFilterStateService {
     _drills = signal(new Map());
     // Emits the id of the chart whose drill path changed.
     _drillChanged$ = new Subject();
+    // The layout a viewer put each table tile in, by component id, while it
+    // differs from the tile's authored layout, with the authored layout it was
+    // changed from (ReportGridSessionLayout.base). A table showing its authored
+    // layout has no entry, and only a table has one.
+    _gridLayouts = signal(new Map());
     // The temporary layer: kept apart from everything above, so snapshot()
     // and differsFromDefaults never read it.
     _temporary = signal(emptyTemporaryState());
@@ -6487,6 +6518,45 @@ class ReportFilterStateService {
         this._stateChanged$.next();
         return true;
     }
+    // The layout a table tile is on screen in: the viewer's own while they
+    // changed it from the layout authored now, else the authored one. It reads
+    // a signal, so a tile that shows it redraws when either moves.
+    gridLayout(component) {
+        return this.gridSessionLayout(component) ?? authoredGridLayout(component);
+    }
+    // The viewer's own layout of a table tile while it differs from the layout
+    // authored now, else null: the tile shows its stored layout. The chat
+    // sends it as the tile's layout.
+    gridSessionLayout(component) {
+        const session = this._gridLayouts().get(component.id);
+        return session?.base === gridLayoutKey(authoredGridLayout(component))
+            ? session.layout
+            : null;
+    }
+    // Records the layout a viewer put a table tile in (a re-pivot, a sort, a
+    // column filter). One that draws the authored layout clears the entry, so
+    // the tile reads as stored again. fs-grid reads the change itself, so only
+    // changes() hears about it, and only on a real change.
+    setGridLayout(component, layout) {
+        const base = gridLayoutKey(authoredGridLayout(component));
+        const key = gridLayoutKey(layout);
+        const current = this._gridLayouts().get(component.id);
+        const unchanged = key === base
+            ? !current
+            : current?.base === base && gridLayoutKey(current.layout) === key;
+        if (component.type !== 'grid' || unchanged) {
+            return;
+        }
+        const next = new Map(this._gridLayouts());
+        if (key === base) {
+            next.delete(component.id);
+        }
+        else {
+            next.set(component.id, { layout, base });
+        }
+        this._gridLayouts.set(next);
+        this._stateChanged$.next();
+    }
     // The durable state on screen as one document: the page, every group the
     // report has (null when it holds nothing, a cleared default included), the
     // match, the grain, and each tile's sort, search, hidden columns and drill
@@ -6850,6 +6920,7 @@ class ReportFilterStateService {
         this._listSearches.clear();
         this.listHidden.set(new Map());
         this._drills.set(new Map());
+        this._gridLayouts.set(new Map());
     }
     // One chart's drill path; an empty path is the chart's top.
     _setDrillPath(componentId, path) {
@@ -6883,20 +6954,39 @@ class ReportFilterStateService {
         return this._tiles()
             .some((component) => component.id === componentId && component.type === 'chart');
     }
-    // Keeps the page and drill state to what the report (re)loaded by init()
-    // still has: drill paths on charts it still has, the page while it has it.
-    // On another report it starts again: match 'all', no drill and nothing
-    // temporary.
+    // Drops each table layout whose tile is gone, is no table any more, or is
+    // authored otherwise than when the viewer changed it.
+    _pruneGridLayouts() {
+        const grids = new Map(this._tiles()
+            .filter((component) => component.type === 'grid')
+            .map((component) => [component.id, component]));
+        const kept = new Map([...this._gridLayouts()]
+            .filter(([componentId, session]) => {
+            const component = grids.get(componentId);
+            return !!component && session.base === gridLayoutKey(authoredGridLayout(component));
+        }));
+        if (kept.size !== this._gridLayouts().size) {
+            this._gridLayouts.set(kept);
+        }
+    }
+    // Keeps the page, drill and table state to what the report (re)loaded by
+    // init() still has: drill paths on charts it still has, the page while it
+    // has it, and each table's layout while it is still a table authored as it
+    // was when the viewer changed it (a new authored layout, an edit or the
+    // agent's, is shown as authored). On another report it starts again: match
+    // 'all', no drill, every table as authored and nothing temporary.
     _prunePageState(report) {
         if (this._report()?.id !== report.id) {
             this._match.set('all');
             this._pageId.set(null);
             this._drills.set(new Map());
+            this._gridLayouts.set(new Map());
             this._temporary.set(emptyTemporaryState());
         }
         this._report.set(report);
         this._drills.set(new Map([...this._drills()]
             .filter(([componentId]) => this._isChart(componentId))));
+        this._pruneGridLayouts();
         if (this._pageId() && !(report.pages ?? []).some((page) => page.id === this._pageId())) {
             this._pageId.set(null);
         }
@@ -8066,6 +8156,277 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     ], template: "<div\n  class=\"chart-host\"\n  echarts\n  [options]=\"options() ?? {}\"\n  [theme]=\"'report'\"\n  [autoResize]=\"true\"\n  (chartInit)=\"onChartInit($event)\"\n  (chartClick)=\"onChartClick($event)\"\n  (chartLegendSelectChanged)=\"onLegendSelectChanged($event)\">\n</div>\n<app-report-component-note [data]=\"data()\"></app-report-component-note>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%}.chart-host{flex:1 1 0;width:100%;min-height:0}\n"] }]
         }] });
 
+// What a failed read says when the server gave no message of its own.
+const READ_FAILED = 'Failed to load data';
+// A stream that ended before its summary was cut off on the way: the parts
+// it brought may be short, so the read counts as failed.
+const STREAM_CUT = 'The table\'s answer was cut off. Try again.';
+// One grid tile's rows, read through the report: fs-grid asks, and each ask
+// is one componentGrid request. The params (ReportGridParams) are mapped onto
+// the request body's own names: the report filters go to `filters`, the 'any'
+// groups and the grain to `state`.
+//
+// The answer streams. Its report line is held in `report`, so output cells
+// format and the note strip fills from the first paint; each grid line is
+// passed on as one part, its output fields described as today's header
+// tooltip describes them (outputColumnNote); the envelope's summary is the
+// last part. A stream that ends without its summary is a failure.
+//
+// Every failure reaches the grid as an Error carrying the server's message:
+// a streamed request shows no error dialog of its own, so the grid's error
+// state is where it is read.
+class ReportGridSource {
+    _reportData;
+    _reportId;
+    _componentId;
+    // The report line of the latest read, null until one arrives.
+    report = signal(null);
+    _isExport;
+    _locale;
+    constructor(_reportData, _reportId, _componentId, options = {}) {
+        this._reportData = _reportData;
+        this._reportId = _reportId;
+        this._componentId = _componentId;
+        this._isExport = options.isExport ?? false;
+        this._locale = options.locale ?? (() => REPORT_FALLBACK_LOCALE);
+    }
+    read(request, params) {
+        return defer(() => {
+            let summary = null;
+            return this._stream$(request, params)
+                .pipe(mergeMap((event) => {
+                if (event.type === StreamEventType.Complete) {
+                    summary = envelopeSummary(event) ?? summary;
+                    return EMPTY;
+                }
+                return this._part$(event.data);
+            }), concatWith(defer(() => (summary ? of(summary) : throwError(() => new Error(STREAM_CUT))))), catchError$1((error) => throwError(() => readError(error))));
+        });
+    }
+    _stream$(request, params) {
+        return this._reportData.componentGrid(this._reportId, this._componentId, params.filters ?? [], requestState(params), request, this._isExport);
+    }
+    // One data line: the report line is held, a grid line is passed on as a
+    // part, and every other line is skipped.
+    _part$(data) {
+        const line = data;
+        if (line?.report) {
+            this.report.set(line.report);
+            return EMPTY;
+        }
+        return line?.grid ? of(this._described(line.grid)) : EMPTY;
+    }
+    // A part whose fields say what each output holds, as today's header
+    // tooltip says it. A field the report says nothing of keeps its own.
+    _described(part) {
+        if (!part.fields?.length) {
+            return part;
+        }
+        const report = this.report();
+        const locale = this._locale();
+        return {
+            ...part,
+            fields: part.fields.map((field) => {
+                const note = outputColumnNote(field.name, report, locale);
+                return note ? { ...field, description: note } : field;
+            }),
+        };
+    }
+}
+// The tile state the data request carries for a grid: the 'any' groups and
+// the grain, each only when set.
+function requestState(params) {
+    return {
+        ...(params.matchAnyGroupIds?.length ? { matchAnyGroupIds: [...params.matchAnyGroupIds] } : {}),
+        ...(params.frequency ? { frequency: params.frequency } : {}),
+    };
+}
+// The read's summary from the envelope that closes the stream
+// ({data: {data: {grid}}, code}), or null for the bare end-of-response event.
+function envelopeSummary(event) {
+    return event.data?.data?.data?.grid ?? null;
+}
+// Any failure as an Error: the server's message when it sent one.
+function readError(error) {
+    if (error instanceof HttpErrorResponse) {
+        const message = error.error?.message;
+        return new Error(typeof message === 'string' && message ? message : READ_FAILED);
+    }
+    return error instanceof Error ? error : new Error(READ_FAILED);
+}
+
+const VALUE_FORMATS = {
+    [GridFormat.Number]: ReportValueFormat.Number,
+    [GridFormat.Percent]: ReportValueFormat.Percent,
+    [GridFormat.Currency]: ReportValueFormat.Currency,
+};
+const NUMBER_UNITS = {
+    [GridUnits.None]: ReportNumberUnits.None,
+    [GridUnits.Thousands]: ReportNumberUnits.Thousands,
+    [GridUnits.Millions]: ReportNumberUnits.Millions,
+    [GridUnits.Auto]: ReportNumberUnits.Auto,
+};
+// What an abbreviated number's suffix multiplies it by, when a viewer types one.
+const UNIT_SUFFIXES = { k: 1e3, m: 1e6 };
+const YES = 'Yes';
+const NO = 'No';
+// A grid tile's formatter: every value written as the report writes it on
+// a list today. An output number reads through formatOutputValue with what
+// the report line says the output holds (a change is signed, a missing prior
+// reads as the list's dash); a plain number through formatNumber; a date in
+// the report's locale, an instant in its zone. The placement's format,
+// precision and units win over the field's.
+function reportGridFormatter(context) {
+    return {
+        format: (value, field, placement) => formatGridValue(context, value, field, placement),
+        toNumber: (text, field, placement) => readGridNumber(context, text, field, placement),
+    };
+}
+function formatGridValue(context, value, field, placement) {
+    if (value === null || value === undefined || value === '') {
+        return '';
+    }
+    switch (field.type) {
+        case GridFieldType.Number:
+            return formatGridNumber(context, value, field, placement);
+        case GridFieldType.Date:
+        case GridFieldType.Datetime:
+            return formatReportDate(value, context.timezone, context.format.locale);
+        case GridFieldType.Boolean:
+            return value ? YES : NO;
+        default:
+            return optionLabel(value, field) ?? String(value);
+    }
+}
+function formatGridNumber(context, value, field, placement) {
+    const spec = numberSpec(field, placement);
+    const output = isAggregate(placement) ? null : context.report?.outputs?.[field.name];
+    return output
+        ? formatOutputValue(value, output, spec, context.format).text
+        : formatNumber(value, spec, context.format);
+}
+// The format, precision and units a number is written with: the placement's,
+// else the field's.
+function numberSpec(field, placement) {
+    const placed = placement;
+    const format = placed?.format ?? field.format;
+    const precision = placed?.precision ?? field.precision;
+    const units = placed?.units ?? field.units;
+    return {
+        ...(format ? { format: VALUE_FORMATS[format] } : {}),
+        ...(typeof precision === 'number' ? { precision } : {}),
+        ...(units ? { units: NUMBER_UNITS[units] } : {}),
+    };
+}
+// A value placement is an aggregate of the field, not the output itself.
+function isAggregate(placement) {
+    return !!placement?.aggregation;
+}
+function optionLabel(value, field) {
+    return field.options?.find((option) => option.key === value)?.label ?? null;
+}
+// A number a viewer typed, read in the report's locale: its grouping dropped,
+// its decimal mark read, a K or M suffix multiplied out, and a percent of a
+// ratio-percent report read back to its ratio. null when it is no number.
+function readGridNumber(context, text, field, placement) {
+    const decimal = decimalMark(context.format.locale);
+    const trimmed = text.trim().toLowerCase();
+    const multiplier = UNIT_SUFFIXES[trimmed.slice(-1)] ?? 1;
+    const digits = trimmed
+        .split(decimal).map((part) => part.replace(/[^0-9-]/g, '')).join('.');
+    const number = digits && digits !== '-' && digits !== '.' ? Number(digits) * multiplier : NaN;
+    if (!Number.isFinite(number)) {
+        return null;
+    }
+    const isPercent = (placement?.format ?? field.format) === GridFormat.Percent;
+    return isPercent && context.format.ratioPercent ? number / 100 : number;
+}
+function decimalMark(locale) {
+    return numberFormat(locale, {}).formatToParts(1.5).find((part) => part.type === 'decimal')?.value ?? '.';
+}
+
+// A grid tile: fs-grid over the tile's rows, read through ReportGridSource.
+//
+// - The params (the report filters the tile resolves to and the 'any'
+//   groups) are seeded before the first render, so no read goes out without
+//   them. After that a change to one of the tile's filter groups settles for
+//   TILE_REFRESH_DEBOUNCE_MS, so a sweep of changes costs one read; one sent
+//   under an older state version is dropped.
+// - The layout on screen is the state service's (gridLayout): the viewer's
+//   own while they changed it from the layout authored now, else the
+//   authored one. It outlives a page switch, and the chat reads it.
+// - A state version move (Clear filters, a saved filter) skips the wait; the
+//   reset has put the authored layout back in the same tick, so it costs one
+//   read.
+// - fs-grid compares the layout and params by value: a cloned value never
+//   reads again.
+class ComponentGridComponent {
+    reportId = input.required();
+    component = input.required();
+    params = signal(null);
+    controls = computed(() => this.component().config?.controls ?? {});
+    source = computed(() => new ReportGridSource(this._reportData, this.reportId(), this._componentId(), {
+        locale: () => this._filterState.formatContext().locale,
+    }));
+    layout = computed(() => this._filterState.gridLayout(this.component()));
+    noteData = computed(() => this.source().report());
+    formatter = computed(() => reportGridFormatter({
+        format: this._filterState.formatContext(),
+        timezone: this._filterState.timezone(),
+        report: this.source().report(),
+    }));
+    _componentId = computed(() => this.component().id);
+    _reportData = inject(ReportData);
+    _filterState = inject(ReportFilterStateService);
+    _destroyRef = inject(DestroyRef);
+    // The state version the params on screen were read under.
+    _paramsVersion = 0;
+    ngOnInit() {
+        this._init();
+    }
+    setLayout(layout) {
+        this._filterState.setGridLayout(this.component(), layout);
+    }
+    _init() {
+        this._paramsVersion = this._filterState.stateVersion();
+        this.params.set(this._readParams());
+        this._filterState.changesFor(this.component())
+            .pipe(switchMap$1(() => this._settled$()), tap$1(() => this._applyParams()), takeUntilDestroyed(this._destroyRef))
+            .subscribe();
+    }
+    // A change, once it has settled: at once when the state version moved,
+    // else after the debounce; dropped when the version moves while it waits,
+    // since that move brings its own change.
+    _settled$() {
+        const version = this._filterState.stateVersion();
+        const moved = version !== this._paramsVersion;
+        return (moved ? of(0) : timer(TILE_REFRESH_DEBOUNCE_MS))
+            .pipe(filter$1(() => this._filterState.stateVersion() === version), map$1(() => undefined));
+    }
+    _applyParams() {
+        this._paramsVersion = this._filterState.stateVersion();
+        this.params.set(this._readParams());
+    }
+    // The tile's report filters and 'any' groups as they stand.
+    _readParams() {
+        const component = this.component();
+        const matchAnyGroupIds = this._filterState.tileState(component).matchAnyGroupIds;
+        return {
+            filters: this._filterState.resolveForComponent(component),
+            ...(matchAnyGroupIds?.length ? { matchAnyGroupIds } : {}),
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ComponentGridComponent, isStandalone: true, selector: "app-report-component-grid", inputs: { reportId: { classPropertyName: "reportId", publicName: "reportId", isSignal: true, isRequired: true, transformFunction: null }, component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<!-- The comparison and window note strip above the table, from the report\n     line of the latest read; the windows' descriptions and notes go in each\n     column's \"About this column\" instead. -->\n<div class=\"fs-column grid-pane\">\n  <app-report-component-note\n    [data]=\"noteData()\"\n    [windowNotes]=\"false\">\n  </app-report-component-note>\n  <!-- The params are seeded before the first render, so the grid's first read\n       carries the tile's report filters. -->\n  @if (params(); as params) {\n    <fs-grid\n      class=\"fs-flex\"\n      [source]=\"source()\"\n      [layout]=\"layout()\"\n      [params]=\"params\"\n      [controls]=\"controls()\"\n      [formatter]=\"formatter()\"\n      (layoutChange)=\"setLayout($event)\">\n    </fs-grid>\n  }\n</div>\n", styles: [":host{display:block;height:100%}.grid-pane{height:100%;min-height:0}fs-grid{min-height:0}\n"], dependencies: [{ kind: "component", type: FsGridComponent, selector: "fs-grid", inputs: ["source", "layout", "controls", "params", "expansion", "panel", "editorOpen", "formatter", "clearedFilter"], outputs: ["layoutChange", "expansionChange", "panelChange", "editorOpenChange"] }, { kind: "component", type: ComponentNoteComponent, selector: "app-report-component-note", inputs: ["data", "windows", "windowDescriptions", "windowNotes"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-report-component-grid', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        FsGridComponent,
+                        ComponentNoteComponent,
+                    ], template: "<!-- The comparison and window note strip above the table, from the report\n     line of the latest read; the windows' descriptions and notes go in each\n     column's \"About this column\" instead. -->\n<div class=\"fs-column grid-pane\">\n  <app-report-component-note\n    [data]=\"noteData()\"\n    [windowNotes]=\"false\">\n  </app-report-component-note>\n  <!-- The params are seeded before the first render, so the grid's first read\n       carries the tile's report filters. -->\n  @if (params(); as params) {\n    <fs-grid\n      class=\"fs-flex\"\n      [source]=\"source()\"\n      [layout]=\"layout()\"\n      [params]=\"params\"\n      [controls]=\"controls()\"\n      [formatter]=\"formatter()\"\n      (layoutChange)=\"setLayout($event)\">\n    </fs-grid>\n  }\n</div>\n", styles: [":host{display:block;height:100%}.grid-pane{height:100%;min-height:0}fs-grid{min-height:0}\n"] }]
+        }] });
+
 // A KPI's trend over its last periods: a line that stretches to the card's
 // width, broken where a period has no value, with the last point marked
 // (hollow while its period is still running). The markers are drawn over the
@@ -9585,7 +9946,7 @@ class ComponentTextComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ComponentTextComponent, isStandalone: true, selector: "app-report-component-text", inputs: { html: { classPropertyName: "html", publicName: "html", isSignal: true, isRequired: false, transformFunction: null }, tokens: { classPropertyName: "tokens", publicName: "tokens", isSignal: true, isRequired: true, transformFunction: null }, editing: { classPropertyName: "editing", publicName: "editing", isSignal: true, isRequired: false, transformFunction: null }, shownElsewhere: { classPropertyName: "shownElsewhere", publicName: "shownElsewhere", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { saved: "saved", editEnded: "editEnded", valueSettings: "valueSettings" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "style.--text-size": "typeScale.body", "style.--text-h1-size": "typeScale.h1", "style.--text-h2-size": "typeScale.h2", "style.--text-h3-size": "typeScale.h3", "style.--text-color": "typeScale.color", "style.--text-table-border": "tableLook.border", "style.--text-table-padding": "tableLook.padding", "style.--text-table-margin": "tableLook.margin" } }, viewQueries: [{ propertyName: "_editor", first: true, predicate: FsHtmlEditorComponent, descendants: true, isSignal: true }, { propertyName: "_valuePopoverAnchor", first: true, predicate: ["valuePopoverAnchor"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (editing()) {\n  <!-- Floating fs-html-editor: no frame, Froala's inline toolbar pops up over\n       the text. pointerdown stays here so a press in the text never starts a\n       drag of the block or a pan of the canvas. -->\n  <fs-html-editor\n      class=\"text-content editing\"\n      [config]=\"editorConfig\"\n      [(ngModel)]=\"draft\"\n      (pointerdown)=\"$event.stopPropagation()\"\n      (mousedown)=\"$event.stopPropagation()\">\n  </fs-html-editor>\n\n  <!-- One notice at a time: an edit stopped because it would have removed\n       values, an edit that left values no text reads, or a refused command.\n       mousedown keeps the editor's focus and selection, so Undo reaches it. -->\n  @if (notice(); as current) {\n    <div\n        class=\"value-notice fs-row.gap-sm\"\n        (pointerdown)=\"$event.stopPropagation()\"\n        (mousedown)=\"$event.preventDefault()\">\n      @switch (current.kind) {\n        @case ('blocked') {\n          @if (current.block.removeSelection) {\n            <span>\n              This selection includes {{ current.block.count }} {{ current.block.count === 1 ? 'value' : 'values' }}.\n            </span>\n            <button\n                mat-button\n                color=\"primary\"\n                type=\"button\"\n                (click)=\"removeBlockedSelection()\">\n              Remove text and {{ current.block.count === 1 ? 'value' : current.block.count + ' values' }}\n            </button>\n          } @else {\n            <span>To take a value out, select it, then press Delete.</span>\n          }\n        }\n        @case ('unused') {\n          <span>{{ current.count }} {{ current.count === 1 ? 'value' : 'values' }} moved to Not used</span>\n          <button\n              mat-button\n              color=\"primary\"\n              type=\"button\"\n              (click)=\"undoValuesUnused()\">\n            Undo\n          </button>\n        }\n        @case ('message') {\n          <span>{{ current.text }}</span>\n        }\n      }\n      <button\n          mat-button\n          type=\"button\"\n          (click)=\"dismissNotice()\">\n        Dismiss\n      </button>\n    </div>\n  }\n} @else {\n  <div\n      class=\"text-content\"\n      [innerHTML]=\"displayHtml()\">\n  </div>\n}\n\n<!-- A clicked value chip's popover: an fs-popover on an invisible anchor laid\n     over the chip (the chip itself belongs to the editor). Outside the editing\n     block, so a popover still open when editing ends closes the usual way. -->\n<span\n    #valuePopoverAnchor\n    class=\"value-popover-anchor\"\n    aria-hidden=\"true\"\n    fsPopover\n    trigger=\"click\"\n    wrapperClass=\"value-popover-wrapper\"\n    [template]=\"valuePopoverTemplate\"\n    [indication]=\"false\"\n    [maxWidth]=\"320\"\n    [style.left.px]=\"valuePopover()?.left\"\n    [style.top.px]=\"valuePopover()?.top\"\n    [style.width.px]=\"valuePopover()?.width\"\n    [style.height.px]=\"valuePopover()?.height\">\n</span>\n<ng-template\n    #valuePopoverTemplate\n    let-popover=\"popover\">\n  <!-- What the value is, and its settings (where it can also be deleted); a\n       chip naming no value on the page has no settings. -->\n  <div class=\"value-popover fs-row\">\n    <div class=\"fs-flex\">\n      <div class=\"value-popover-name\">{{ valuePopoverValue()?.name ?? valuePopover()?.key }}</div>\n      @if (!valuePopoverValue()) {\n        <div class=\"small\">Not a value on this page</div>\n      }\n    </div>\n    @if (valuePopoverValue()) {\n      <button\n          mat-icon-button\n          type=\"button\"\n          class=\"value-popover-settings\"\n          matTooltip=\"Settings\"\n          (click)=\"openValueSettings(popover)\">\n        <mat-icon>settings</mat-icon>\n      </button>\n    }\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;height:100%}.text-content{display:block;width:100%;height:100%;overflow:hidden;font-family:Arial,Helvetica,sans-serif;font-size:var(--text-size);line-height:1.25;color:var(--text-color);word-wrap:break-word;letter-spacing:normal;word-spacing:normal;font-weight:400;font-style:normal;text-transform:none;white-space:normal}.text-content ::ng-deep p,.text-content ::ng-deep h1,.text-content ::ng-deep h2,.text-content ::ng-deep h3,.text-content ::ng-deep ul,.text-content ::ng-deep ol{margin:0}.text-content ::ng-deep h1{font-size:var(--text-h1-size)}.text-content ::ng-deep h2{font-size:var(--text-h2-size)}.text-content ::ng-deep h3{font-size:var(--text-h3-size)}.text-content ::ng-deep h1,.text-content ::ng-deep h2,.text-content ::ng-deep h3{font-weight:700;line-height:1.2}.text-content ::ng-deep ul,.text-content ::ng-deep ol{padding-left:1.4em}.text-content ::ng-deep p:empty:before{content:\"\\200b\"}.text-content ::ng-deep a{color:inherit}.text-content ::ng-deep table{border-collapse:collapse;margin:var(--text-table-margin) 0}.text-content ::ng-deep th,.text-content ::ng-deep td{border:var(--text-table-border);padding:var(--text-table-padding);vertical-align:middle;text-align:left}.text-content ::ng-deep th{text-align:center;font-weight:700}.text-content.editing{overflow:auto;cursor:text}.text-content.editing ::ng-deep [data-embed-key],.text-content.editing ::ng-deep [data-embed-field]{padding:0 2px;border-radius:3px;background-color:#4e79a729;-webkit-user-select:all;user-select:all}.text-content.editing ::ng-deep [data-embed-key]{cursor:pointer}.text-content.editing ::ng-deep [data-embed-key]:hover{background-color:#4e79a747}.text-content.editing ::ng-deep [data-embed-missing]{background-color:#e1575924;outline:1px dashed rgba(225,87,89,.7)}.text-content.editing ::ng-deep th,.text-content.editing ::ng-deep tfoot td{background-color:transparent}.text-content.editing ::ng-deep .fr-table-selector{display:none}.text-content.editing ::ng-deep .fr-table-selection-hover{outline:none}.value-popover-anchor{position:absolute;pointer-events:none}::ng-deep .value-popover-wrapper .popover-content{padding:15px!important}.value-popover{gap:15px}.value-popover-name{font-weight:600}.value-popover-settings{--mdc-icon-button-state-layer-size: 24px;width:24px;height:24px;padding:0}.value-notice{position:absolute;top:100%;left:0;z-index:2;margin-top:4px;padding:2px 4px 2px 10px;border:1px solid #d9dee3;border-radius:4px;background:#fff;white-space:nowrap;font-family:Arial,Helvetica,sans-serif}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FsHtmlEditorComponent, selector: "fs-html-editor", inputs: ["config", "disabled"] }, { kind: "directive", type: FsPopoverDirective, selector: "[fsPopover]", inputs: ["text", "template", "data", "leaveDelay", "showDelay", "maxWidth", "maxHeight", "wrapperClass", "autoShow", "autoClose", "loadingDiameter", "loading", "indication", "position", "theme", "size", "trigger", "enabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ComponentTextComponent, isStandalone: true, selector: "app-report-component-text", inputs: { html: { classPropertyName: "html", publicName: "html", isSignal: true, isRequired: false, transformFunction: null }, tokens: { classPropertyName: "tokens", publicName: "tokens", isSignal: true, isRequired: true, transformFunction: null }, editing: { classPropertyName: "editing", publicName: "editing", isSignal: true, isRequired: false, transformFunction: null }, shownElsewhere: { classPropertyName: "shownElsewhere", publicName: "shownElsewhere", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { saved: "saved", editEnded: "editEnded", valueSettings: "valueSettings" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "style.--text-size": "typeScale.body", "style.--text-h1-size": "typeScale.h1", "style.--text-h2-size": "typeScale.h2", "style.--text-h3-size": "typeScale.h3", "style.--text-color": "typeScale.color", "style.--text-table-border": "tableLook.border", "style.--text-table-padding": "tableLook.padding", "style.--text-table-margin": "tableLook.margin" } }, viewQueries: [{ propertyName: "_editor", first: true, predicate: FsHtmlEditorComponent, descendants: true, isSignal: true }, { propertyName: "_valuePopoverAnchor", first: true, predicate: ["valuePopoverAnchor"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (editing()) {\n  <!-- Floating fs-html-editor: no frame, Froala's inline toolbar pops up over\n       the text. pointerdown stays here so a press in the text never starts a\n       drag of the block or a pan of the canvas. -->\n  <fs-html-editor\n      class=\"text-content editing\"\n      [config]=\"editorConfig\"\n      [(ngModel)]=\"draft\"\n      (pointerdown)=\"$event.stopPropagation()\"\n      (mousedown)=\"$event.stopPropagation()\">\n  </fs-html-editor>\n\n  <!-- One notice at a time: an edit stopped because it would have removed\n       values, an edit that left values no text reads, or a refused command.\n       mousedown keeps the editor's focus and selection, so Undo reaches it. -->\n  @if (notice(); as current) {\n    <div\n        class=\"value-notice fs-row.gap-sm\"\n        (pointerdown)=\"$event.stopPropagation()\"\n        (mousedown)=\"$event.preventDefault()\">\n      @switch (current.kind) {\n        @case ('blocked') {\n          @if (current.block.removeSelection) {\n            <span>\n              This selection includes {{ current.block.count }} {{ current.block.count === 1 ? 'value' : 'values' }}.\n            </span>\n            <button\n                mat-button\n                color=\"primary\"\n                type=\"button\"\n                (click)=\"removeBlockedSelection()\">\n              Remove text and {{ current.block.count === 1 ? 'value' : current.block.count + ' values' }}\n            </button>\n          } @else {\n            <span>To take a value out, select it, then press Delete.</span>\n          }\n        }\n        @case ('unused') {\n          <span>{{ current.count }} {{ current.count === 1 ? 'value' : 'values' }} moved to Not used</span>\n          <button\n              mat-button\n              color=\"primary\"\n              type=\"button\"\n              (click)=\"undoValuesUnused()\">\n            Undo\n          </button>\n        }\n        @case ('message') {\n          <span>{{ current.text }}</span>\n        }\n      }\n      <button\n          mat-button\n          type=\"button\"\n          (click)=\"dismissNotice()\">\n        Dismiss\n      </button>\n    </div>\n  }\n} @else {\n  <div\n      class=\"text-content\"\n      [innerHTML]=\"displayHtml()\">\n  </div>\n}\n\n<!-- A clicked value chip's popover: an fs-popover on an invisible anchor laid\n     over the chip (the chip itself belongs to the editor). Outside the editing\n     block, so a popover still open when editing ends closes the usual way. -->\n<span\n    #valuePopoverAnchor\n    class=\"value-popover-anchor\"\n    aria-hidden=\"true\"\n    fsPopover\n    trigger=\"click\"\n    wrapperClass=\"value-popover-wrapper\"\n    [template]=\"valuePopoverTemplate\"\n    [indication]=\"false\"\n    [maxWidth]=\"320\"\n    [style.left.px]=\"valuePopover()?.left\"\n    [style.top.px]=\"valuePopover()?.top\"\n    [style.width.px]=\"valuePopover()?.width\"\n    [style.height.px]=\"valuePopover()?.height\">\n</span>\n<ng-template\n    #valuePopoverTemplate\n    let-popover=\"popover\">\n  <!-- What the value is, and its settings (where it can also be deleted); a\n       chip naming no value on the page has no settings. -->\n  <div class=\"value-popover fs-row\">\n    <div class=\"fs-flex\">\n      <div class=\"value-popover-name\">{{ valuePopoverValue()?.name ?? valuePopover()?.key }}</div>\n      @if (!valuePopoverValue()) {\n        <div class=\"small\">Not a value on this page</div>\n      }\n    </div>\n    @if (valuePopoverValue()) {\n      <button\n          mat-icon-button\n          type=\"button\"\n          class=\"value-popover-settings\"\n          matTooltip=\"Settings\"\n          (click)=\"openValueSettings(popover)\">\n        <mat-icon>settings</mat-icon>\n      </button>\n    }\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;height:100%}.text-content{display:block;width:100%;height:100%;overflow:hidden;font-family:Arial,Helvetica,sans-serif;font-size:var(--text-size);line-height:1.25;color:var(--text-color);word-wrap:break-word;letter-spacing:normal;word-spacing:normal;font-weight:400;font-style:normal;text-transform:none;white-space:normal}.text-content ::ng-deep p,.text-content ::ng-deep h1,.text-content ::ng-deep h2,.text-content ::ng-deep h3,.text-content ::ng-deep ul,.text-content ::ng-deep ol{margin:0}.text-content ::ng-deep h1{font-size:var(--text-h1-size)}.text-content ::ng-deep h2{font-size:var(--text-h2-size)}.text-content ::ng-deep h3{font-size:var(--text-h3-size)}.text-content ::ng-deep h1,.text-content ::ng-deep h2,.text-content ::ng-deep h3{font-weight:700;line-height:1.2}.text-content ::ng-deep ul,.text-content ::ng-deep ol{padding-left:1.4em}.text-content ::ng-deep p:empty:before{content:\"\\200b\"}.text-content ::ng-deep a{color:inherit}.text-content ::ng-deep table{border-collapse:collapse;margin:var(--text-table-margin) 0}.text-content ::ng-deep th,.text-content ::ng-deep td{border:var(--text-table-border);padding:var(--text-table-padding);vertical-align:middle;text-align:left}.text-content ::ng-deep th{text-align:center;font-weight:700}.text-content.editing{overflow:auto;cursor:text}.text-content.editing ::ng-deep [data-embed-key],.text-content.editing ::ng-deep [data-embed-field]{padding:0 2px;border-radius:3px;background-color:#4e79a729;-webkit-user-select:all;user-select:all}.text-content.editing ::ng-deep [data-embed-key]{cursor:pointer}.text-content.editing ::ng-deep [data-embed-key]:hover{background-color:#4e79a747}.text-content.editing ::ng-deep [data-embed-missing]{background-color:#e1575924;outline:1px dashed rgba(225,87,89,.7)}.text-content.editing ::ng-deep th,.text-content.editing ::ng-deep tfoot td{background-color:transparent}.text-content.editing ::ng-deep .fr-table-selector{display:none}.text-content.editing ::ng-deep .fr-table-selection-hover{outline:none}.value-popover-anchor{position:absolute;pointer-events:none}::ng-deep .value-popover-wrapper .popover-content{padding:15px!important}.value-popover{gap:15px}.value-popover-name{font-weight:600}.value-popover-settings{--mdc-icon-button-state-layer-size: 24px;width:24px;height:24px;padding:0}.value-notice{position:absolute;top:100%;left:0;z-index:2;margin-top:4px;padding:2px 4px 2px 10px;border:1px solid #d9dee3;border-radius:4px;background:#fff;white-space:nowrap;font-family:Arial,Helvetica,sans-serif}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FsHtmlEditorComponent, selector: "fs-html-editor", inputs: ["config", "disabled"] }, { kind: "directive", type: FsPopoverDirective, selector: "[fsPopover]", inputs: ["text", "template", "data", "leaveDelay", "showDelay", "maxWidth", "maxHeight", "wrapperClass", "autoShow", "autoClose", "loadingDiameter", "loading", "indication", "position", "theme", "size", "trigger", "enabled", "panel"], outputs: ["closed"], exportAs: ["fsPopover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentTextComponent, decorators: [{
             type: Component,
@@ -9617,6 +9978,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 const HANDLES = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'];
 const MIN_W = 0.6; // inches
 const MIN_H = 0.4; // inches
+// The tiles that read their own rows: a list through FsList paging, a grid
+// through fs-grid's source. This component loads every other tile's data.
+const SELF_READING_TYPES = ['list', 'grid'];
 // Two presses on a text block this close together open its editor. Detected
 // here rather than with a dblclick listener because the drag loop claims the
 // pointer on every press, and a browser is not obliged to deliver dblclick
@@ -9629,7 +9993,8 @@ const DOUBLE_PRESS_MS = 400;
 // snapper); everything works at any zoom (pixel deltas ÷ zoom·96 → inches).
 //
 // Charts and KPIs fetch their own data here; lists fetch inside
-// ComponentListComponent through FsList paging.
+// ComponentListComponent through FsList paging, and grids inside
+// ComponentGridComponent through fs-grid's source.
 class ReportComponentComponent {
     reportId;
     component;
@@ -9686,8 +10051,9 @@ class ReportComponentComponent {
     // repaints the header and body.
     filterConfig = signal(null);
     data = signal(null);
-    // The shimmer: only while the tile has no data to show yet. A refetch keeps
-    // the data on screen and sets `refreshing`, a thin bar over the body.
+    // A load shows a spinner centred on the tile. `loading` is the first load,
+    // with nothing to show yet; a refetch keeps the data on screen, dimmed
+    // under the spinner (`refreshing`). The title is never dimmed.
     loading = signal(false);
     refreshing = signal(false);
     error = signal(null);
@@ -9756,9 +10122,10 @@ class ReportComponentComponent {
         if (!this.isText) {
             this._rebuildHeaderOnNewState();
         }
-        // Lists fetch through FsList; text has nothing to fetch, and a value is
-        // never drawn (it reads inside text).
-        if (this.component.type !== 'list' && !this.isText && isDrawn(this.component)) {
+        // Lists fetch through FsList and grids through fs-grid's source (each
+        // reads its own rows); text has nothing to fetch, and a value is never
+        // drawn (it reads inside text).
+        if (!SELF_READING_TYPES.includes(this.component.type) && !this.isText && isDrawn(this.component)) {
             // One load stream (tileLoads): the first load at once, then one per
             // settled sweep of changes, each cancelling the one in flight, and an
             // answer sent before a reset is dropped.
@@ -10266,8 +10633,7 @@ class ReportComponentComponent {
     }
     // ----- data ----------------------------------------------------------------
     // One request of the load stream (tileLoads), built from the state now. The
-    // shimmer shows only while the tile has nothing on screen; otherwise the
-    // data stays and the thin bar shows.
+    // spinner shows either way; a tile with data on screen keeps it, dimmed.
     _load() {
         const first = !this.data();
         this.loading.set(first);
@@ -10282,7 +10648,7 @@ class ReportComponentComponent {
         return this._reportData.componentData(this.reportId, this.component.id, filters, state);
     }
     // A failed load clears the data with its message, so the next load starts
-    // from the shimmer and never shows the data the failure replaced. A
+    // from an empty tile and never shows the data the failure replaced. A
     // chart's answer gives its drill path.
     _loaded(result) {
         this.data.set(result.data);
@@ -10335,22 +10701,23 @@ class ReportComponentComponent {
         openAtPoint(anchor, click.pointer, this.zoom, () => this.markMenu?.openMenu(null));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportComponentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ReportComponentComponent, isStandalone: true, selector: "app-report-component", inputs: { reportId: { classPropertyName: "reportId", publicName: "reportId", isSignal: false, isRequired: false, transformFunction: null }, component: { classPropertyName: "component", publicName: "component", isSignal: false, isRequired: false, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: false, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: false, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: false, isRequired: false, transformFunction: null }, snapper: { classPropertyName: "snapper", publicName: "snapper", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, tokens: { classPropertyName: "tokens", publicName: "tokens", isSignal: true, isRequired: false, transformFunction: null }, valueKeysElsewhere: { classPropertyName: "valueKeysElsewhere", publicName: "valueKeysElsewhere", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectComponent: "selectComponent", positionChanged: "positionChanged", openSettings: "openSettings", removed: "removed", valueSettings: "valueSettings", textSaved: "textSaved", valuesRemoved: "valuesRemoved" }, host: { properties: { "class.height-auto": "this.heightAuto" } }, viewQueries: [{ propertyName: "_text", first: true, predicate: ComponentTextComponent, descendants: true, isSignal: true }, { propertyName: "chartComponent", first: true, predicate: ComponentChartComponent, descendants: true }, { propertyName: "markMenu", first: true, predicate: ["markMenu"], descendants: true }, { propertyName: "markAnchor", first: true, predicate: ["markAnchor"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"component-box\"\n    [class.editing]=\"editMode\"\n    [class.text]=\"isText\"\n    [class.selected]=\"selected\"\n    [style.padding]=\"bodyPadding\"\n    (pointerdown)=\"onComponentPointerDown($event)\"\n    (mousedown)=\"stopCanvasPan($event)\"\n    (touchstart)=\"stopCanvasPan($event)\">\n  <!-- The header is an fs-filter: heading template = title (and the edit-mode\n       drag handle), actions = the menu, items = component-level filter groups,\n       the same strip for every type (lists included). fs-filter reads its\n       config once, so the block is keyed on the component-filter set to be\n       recreated when it changes. The title shows its tokens filled, and a\n       filter change repaints it in place (shownTitle). -->\n  <!-- A text block has no title bar \u2014 it IS its words, like a text box on a\n       slide \u2014 so it gets neither the header nor the data actions. -->\n  @for (key of isText ? [] : [filterKey]; track key) {\n    <fs-filter\n        class=\"component-filter\"\n        [config]=\"filterConfig()\">\n      <ng-template fsFilterHeading>\n        <div\n            class=\"component-title\"\n            (pointerdown)=\"onDragStart($event)\">\n          <!-- While the chart is drilled the title leads its breadcrumb:\n               'Title \u203A 2026 \u203A Q3', the title as the viewer reads it\n               (shownTitle). The title goes back to the top and each\n               crumb to the period it names; the last is where the chart is.\n               A long path is cut at its left end, so the crumbs nearest the\n               chart stay in view. While the layout is edited the crumbs are\n               plain text (the stylesheet; drillTo does nothing then). -->\n          @if (drillCrumbs().length) {\n            <span class=\"drill-path\">\n              <span dir=\"ltr\">\n                <a\n                    class=\"drill-crumb\"\n                    tabindex=\"0\"\n                    (click)=\"drillTo(0)\"\n                    (keydown.enter)=\"drillTo(0)\">\n                  {{ shownTitle }}\n                </a>\n                @for (label of drillCrumbs(); track $index; let last = $last) {\n                  <span class=\"drill-separator\">{{ drillSeparator }}</span>\n                  @if (last) {\n                    <span>{{ label }}</span>\n                  } @else {\n                    <a\n                        class=\"drill-crumb\"\n                        tabindex=\"0\"\n                        (click)=\"drillTo($index + 1)\"\n                        (keydown.enter)=\"drillTo($index + 1)\">\n                      {{ label }}\n                    </a>\n                  }\n                }\n              </span>\n            </span>\n          } @else {\n            {{ shownTitle }}\n          }\n          @if (truncated) {\n            <mat-icon\n                class=\"truncated-icon\"\n                matTooltip=\"Showing a truncated result \u2014 refine the filters to see everything.\">\n              warning_amber\n            </mat-icon>\n          }\n        </div>\n      </ng-template>\n    </fs-filter>\n  }\n  <!-- The actions menu is floated top-right (absolute) rather than living in\n       fs-filter's actions slot, so its ~40px button height no longer drives the\n       header row's height. It overlays the box corner; the heading reserves\n       right padding so a long title ellipsises before it. -->\n  @if (!isText || (editMode && !textEditing())) {\n    <button\n        mat-icon-button\n        class=\"component-menu\"\n        [fsMenuTriggerFor]=\"menu\"\n        (pointerdown)=\"$event.stopPropagation()\"\n        (mousedown)=\"stopCanvasPan($event)\">\n      <mat-icon>more_vert</mat-icon>\n    </button>\n    <!-- Beside its trigger, inside the same block: an fs-menu that finds no\n         trigger of its own draws one. -->\n    <fs-menu #menu>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!isText\"\n          (click)=\"editText()\">\n        <mat-icon>edit</mat-icon>\n        <span>Edit text</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!isText\"\n          (click)=\"deleteText()\">\n        <mat-icon>delete</mat-icon>\n        <span>Delete</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!drillCrumbs().length || editMode\"\n          (click)=\"drillUp()\">\n        <mat-icon>arrow_upward</mat-icon>\n        <span>Drill up</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!drillCrumbs().length || editMode\"\n          (click)=\"drillTo(0)\">\n        <mat-icon>vertical_align_top</mat-icon>\n        <span>Back to top</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"isText\"\n          (click)=\"settings()\">\n        <mat-icon>tune</mat-icon>\n        <span>Settings</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"isText\"\n          (click)=\"exportCsv()\">\n        <mat-icon>download</mat-icon>\n        <span>Export CSV</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!hidesColumns\"\n          (click)=\"chooseColumns()\">\n        <mat-icon>view_column</mat-icon>\n        <span>Columns</span>\n      </ng-template>\n    </fs-menu>\n  }\n  <div class=\"component-body\">\n    <!-- A refetch keeps the data on screen under a thin bar; the shimmer\n         below is for the first load only. -->\n    @if (refreshing()) {\n      <mat-progress-bar\n        class=\"refresh-bar\"\n        aria-label=\"Refreshing data\"\n        [mode]=\"'indeterminate'\">\n      </mat-progress-bar>\n    }\n    @if (isText) {\n      <app-report-component-text\n        [html]=\"textHtml() ?? component.config?.html ?? ''\"\n        [tokens]=\"tokens()\"\n        [editing]=\"textEditing()\"\n        [shownElsewhere]=\"shownElsewhere\"\n        (saved)=\"onTextSaved($event)\"\n        (editEnded)=\"textEditing.set(false)\"\n        (valueSettings)=\"valueSettings.emit($event)\">\n      </app-report-component-text>\n    } @else if (component.type === 'list') {\n      @for (key of [listResetKey()]; track key) {\n        <app-report-component-list\n          [reportId]=\"reportId\"\n          [component]=\"component\">\n        </app-report-component-list>\n      }\n    } @else if (loading()) {\n      <div class=\"component-state\">\n        <div class=\"loading-shimmer\"></div>\n      </div>\n    } @else if (error()) {\n      <div class=\"component-state error\">\n        {{ error() }}\n      </div>\n    } @else if (!data()?.rows?.length) {\n      <div class=\"component-state\">\n        {{ emptyMessage() }}\n      </div>\n    } @else if (component.type === 'kpi') {\n      <app-report-component-kpi\n        [component]=\"component\"\n        [data]=\"data()\"\n        (markClick)=\"onMarkClick($event)\">\n      </app-report-component-kpi>\n    } @else {\n      <app-report-component-chart\n        [component]=\"component\"\n        [data]=\"data()\"\n        [actions]=\"tileActions()\"\n        [(legendSelected)]=\"legendSelected\"\n        (markClick)=\"onMarkClick($event)\"\n        (markMiss)=\"onMarkMiss()\">\n      </app-report-component-chart>\n    }\n    <!-- In edit mode a transparent veil over the body makes the WHOLE\n         component draggable (industry standard: you grab the object, not just\n         its title bar) and keeps inner widgets from swallowing the gesture. -->\n    @if (editMode && !textEditing()) {\n      <div\n        class=\"drag-veil\"\n        (pointerdown)=\"onDragStart($event)\">\n      </div>\n    }\n  </div>\n</div>\n<!-- The mark menu, for a click whose mark offers two or more actions. It\n     opens at the click: its trigger is a zero-size anchor that\n     anchor-at-point.ts moves there first. -->\n@if (!isText && !editMode) {\n  <span\n    #markAnchor\n    [style.position]=\"'absolute'\"\n    [fsMenuTriggerFor]=\"markMenu\">\n  </span>\n  <fs-menu #markMenu>\n    @for (action of markMenuActions(); track action) {\n      <ng-template\n          fs-menu-item\n          (click)=\"runMarkAction(action)\">\n        {{ markActionLabels[action] }}\n      </ng-template>\n    }\n  </fs-menu>\n}\n<!-- Handles live OUTSIDE the clipped box so they straddle its edges. -->\n@if (editMode && selected) {\n  @for (handle of resizeHandles; track handle) {\n    <div\n      class=\"handle handle-{{ handle }}\"\n      (mousedown)=\"stopCanvasPan($event)\"\n      (pointerdown)=\"onResizeStart($event, handle)\">\n    </div>\n  }\n}", styles: [":host{position:absolute;display:flex;flex-direction:column;font-size:10px;--mdc-outlined-button-container-height: 30px;--mdc-outlined-button-label-text-size: 10px;--mat-outlined-button-horizontal-padding: 15px;--mdc-text-button-container-height: 30px;--mdc-text-button-label-text-size: 10px;--mat-text-button-horizontal-padding: 15px;--mat-button-outlined-container-height: 30px;--mat-button-outlined-label-text-size: 10px;--mat-button-outlined-horizontal-padding: 15px;--mat-button-text-container-height: 30px;--mat-button-text-label-text-size: 10px;--mat-button-text-horizontal-padding: 15px}.component-box{position:relative;width:100%;flex:1 1 auto;min-height:0;box-sizing:border-box;display:flex;flex-direction:column;background:#fff;border:1px solid #e4e7eb;border-radius:6px;overflow:hidden;transition:box-shadow .12s ease,border-color .12s ease;cursor:default}.component-box.editing .component-title{cursor:grab}.component-box.editing .component-title:active{cursor:grabbing}.component-box.editing .drill-crumb{pointer-events:none}.component-box.editing:hover{border-color:#9db3c8;box-shadow:0 2px 8px #0f172a14}.component-box.selected{border-color:var(--brand-primary-color);box-shadow:0 0 0 1px var(--brand-primary-color),0 4px 14px #2196f32e}.component-box.text{background:transparent;border-color:transparent;border-radius:0;overflow:visible}.component-box.text.editing{border-style:dashed;border-color:#cbd2d9}.component-box.text.editing:hover{box-shadow:none}.component-box.text.selected{border-style:solid;border-color:var(--brand-primary-color);box-shadow:0 0 0 1px var(--brand-primary-color)}:host ::ng-deep .component-filter .filter-bar-container{align-items:center!important}.component-filter{flex:0 0 auto;display:block;padding:0 0 4px}.component-filter .component-title{display:flex;align-items:center;gap:4px;-webkit-user-select:none;user-select:none;padding-right:40px;font-size:var(--report-heading-size);font-weight:600;color:#1f2933;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.component-filter .component-title .truncated-icon{font-size:16px;width:16px;height:16px;color:#f59e0b}.component-filter .component-title .drill-path{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:rtl;text-align:left}.component-filter .component-title .drill-crumb{color:inherit;cursor:pointer;text-decoration:none}.component-filter .component-title .drill-crumb:hover,.component-filter .component-title .drill-crumb:focus-visible{text-decoration:underline}.component-filter .component-title .drill-separator{opacity:.6}.component-menu{position:absolute;top:2px;right:2px;z-index:30}.component-body{flex:1 1 auto;min-height:0;position:relative}.refresh-bar{position:absolute;top:0;left:0;right:0;z-index:1;pointer-events:none;--mdc-linear-progress-track-height: 2px;--mdc-linear-progress-active-indicator-height: 2px;--mat-progress-bar-track-height: 2px;--mat-progress-bar-active-indicator-height: 2px}:host(.height-auto) .component-state{min-height:120px}.drag-veil{position:absolute;inset:0;cursor:grab;touch-action:none}.drag-veil:active{cursor:grabbing}.component-state{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:12px;color:#7b8794;padding:8px;text-align:center}.component-state.error{color:#e15759}.loading-shimmer{width:70%;height:60%;border-radius:6px;background:linear-gradient(100deg,#f0f4f8 40%,#e4ebf2,#f0f4f8 60%);background-size:200% 100%;animation:shimmer 1.2s infinite linear}@keyframes shimmer{to{background-position-x:-200%}}.handle{position:absolute;width:14px;height:14px;display:flex;align-items:center;justify-content:center;touch-action:none;z-index:20;transform:scale(calc(1 / var(--canvas-zoom, 1)))}.handle:before{content:\"\";width:8px;height:8px;background:#fff;border:1.5px solid var(--brand-primary-color);border-radius:2px;box-shadow:0 1px 2px #0f172a33}.handle-nw{left:-7px;top:-7px;cursor:nwse-resize}.handle-n{left:calc(50% - 7px);top:-7px;cursor:ns-resize}.handle-ne{right:-7px;top:-7px;cursor:nesw-resize}.handle-e{right:-7px;top:calc(50% - 7px);cursor:ew-resize}.handle-se{right:-7px;bottom:-7px;cursor:nwse-resize}.handle-s{left:calc(50% - 7px);bottom:-7px;cursor:ns-resize}.handle-sw{left:-7px;bottom:-7px;cursor:nesw-resize}.handle-w{left:-7px;top:calc(50% - 7px);cursor:ew-resize}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FsFilterModule }, { kind: "component", type: i1$2.FilterComponent, selector: "fs-filter", inputs: ["config"], outputs: ["closed", "opened", "ready"] }, { kind: "directive", type: i1$2.FilterHeadingDirective, selector: "[fsFilterHeading]" }, { kind: "ngmodule", type: FsMenuModule }, { kind: "component", type: i2.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i2.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "directive", type: i2.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { kind: "component", type: ComponentChartComponent, selector: "app-report-component-chart", inputs: ["component", "data", "legendSelected", "actions"], outputs: ["legendSelectedChange", "markClick", "markMiss"] }, { kind: "component", type: ComponentKpiComponent, selector: "app-report-component-kpi", inputs: ["component", "data"], outputs: ["markClick"] }, { kind: "component", type: ComponentListComponent, selector: "app-report-component-list", inputs: ["reportId", "component"] }, { kind: "component", type: ComponentTextComponent, selector: "app-report-component-text", inputs: ["html", "tokens", "editing", "shownElsewhere"], outputs: ["saved", "editEnded", "valueSettings"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ReportComponentComponent, isStandalone: true, selector: "app-report-component", inputs: { reportId: { classPropertyName: "reportId", publicName: "reportId", isSignal: false, isRequired: false, transformFunction: null }, component: { classPropertyName: "component", publicName: "component", isSignal: false, isRequired: false, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: false, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: false, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: false, isRequired: false, transformFunction: null }, snapper: { classPropertyName: "snapper", publicName: "snapper", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, tokens: { classPropertyName: "tokens", publicName: "tokens", isSignal: true, isRequired: false, transformFunction: null }, valueKeysElsewhere: { classPropertyName: "valueKeysElsewhere", publicName: "valueKeysElsewhere", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectComponent: "selectComponent", positionChanged: "positionChanged", openSettings: "openSettings", removed: "removed", valueSettings: "valueSettings", textSaved: "textSaved", valuesRemoved: "valuesRemoved" }, host: { properties: { "class.height-auto": "this.heightAuto" } }, viewQueries: [{ propertyName: "_text", first: true, predicate: ComponentTextComponent, descendants: true, isSignal: true }, { propertyName: "chartComponent", first: true, predicate: ComponentChartComponent, descendants: true }, { propertyName: "markMenu", first: true, predicate: ["markMenu"], descendants: true }, { propertyName: "markAnchor", first: true, predicate: ["markAnchor"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"component-box\"\n    [class.editing]=\"editMode\"\n    [class.text]=\"isText\"\n    [class.selected]=\"selected\"\n    [class.refreshing]=\"refreshing()\"\n    [style.padding]=\"bodyPadding\"\n    (pointerdown)=\"onComponentPointerDown($event)\"\n    (mousedown)=\"stopCanvasPan($event)\"\n    (touchstart)=\"stopCanvasPan($event)\">\n  <!-- The header is an fs-filter: heading template = title (and the edit-mode\n       drag handle), actions = the menu, items = component-level filter groups,\n       the same strip for every type (lists included). fs-filter reads its\n       config once, so the block is keyed on the component-filter set to be\n       recreated when it changes. The title shows its tokens filled, and a\n       filter change repaints it in place (shownTitle). -->\n  <!-- A text block has no title bar \u2014 it IS its words, like a text box on a\n       slide \u2014 so it gets neither the header nor the data actions. -->\n  @for (key of isText ? [] : [filterKey]; track key) {\n    <fs-filter\n        class=\"component-filter\"\n        [config]=\"filterConfig()\">\n      <ng-template fsFilterHeading>\n        <div\n            class=\"component-title\"\n            (pointerdown)=\"onDragStart($event)\">\n          <!-- While the chart is drilled the title leads its breadcrumb:\n               'Title \u203A 2026 \u203A Q3', the title as the viewer reads it\n               (shownTitle). The title goes back to the top and each\n               crumb to the period it names; the last is where the chart is.\n               A long path is cut at its left end, so the crumbs nearest the\n               chart stay in view. While the layout is edited the crumbs are\n               plain text (the stylesheet; drillTo does nothing then). -->\n          @if (drillCrumbs().length) {\n            <span class=\"drill-path\">\n              <span dir=\"ltr\">\n                <a\n                    class=\"drill-crumb\"\n                    tabindex=\"0\"\n                    (click)=\"drillTo(0)\"\n                    (keydown.enter)=\"drillTo(0)\">\n                  {{ shownTitle }}\n                </a>\n                @for (label of drillCrumbs(); track $index; let last = $last) {\n                  <span class=\"drill-separator\">{{ drillSeparator }}</span>\n                  @if (last) {\n                    <span>{{ label }}</span>\n                  } @else {\n                    <a\n                        class=\"drill-crumb\"\n                        tabindex=\"0\"\n                        (click)=\"drillTo($index + 1)\"\n                        (keydown.enter)=\"drillTo($index + 1)\">\n                      {{ label }}\n                    </a>\n                  }\n                }\n              </span>\n            </span>\n          } @else {\n            {{ shownTitle }}\n          }\n          @if (truncated) {\n            <mat-icon\n                class=\"truncated-icon\"\n                matTooltip=\"Showing a truncated result \u2014 refine the filters to see everything.\">\n              warning_amber\n            </mat-icon>\n          }\n        </div>\n      </ng-template>\n    </fs-filter>\n  }\n  <!-- The actions menu is floated top-right (absolute) rather than living in\n       fs-filter's actions slot, so its ~40px button height no longer drives the\n       header row's height. It overlays the box corner; the heading reserves\n       right padding so a long title ellipsises before it. -->\n  @if (!isText || (editMode && !textEditing())) {\n    <button\n        mat-icon-button\n        class=\"component-menu\"\n        [fsMenuTriggerFor]=\"menu\"\n        (pointerdown)=\"$event.stopPropagation()\"\n        (mousedown)=\"stopCanvasPan($event)\">\n      <mat-icon>more_vert</mat-icon>\n    </button>\n    <!-- Beside its trigger, inside the same block: an fs-menu that finds no\n         trigger of its own draws one. -->\n    <fs-menu #menu>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!isText\"\n          (click)=\"editText()\">\n        <mat-icon>edit</mat-icon>\n        <span>Edit text</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!isText\"\n          (click)=\"deleteText()\">\n        <mat-icon>delete</mat-icon>\n        <span>Delete</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!drillCrumbs().length || editMode\"\n          (click)=\"drillUp()\">\n        <mat-icon>arrow_upward</mat-icon>\n        <span>Drill up</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!drillCrumbs().length || editMode\"\n          (click)=\"drillTo(0)\">\n        <mat-icon>vertical_align_top</mat-icon>\n        <span>Back to top</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"isText\"\n          (click)=\"settings()\">\n        <mat-icon>tune</mat-icon>\n        <span>Settings</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"isText\"\n          (click)=\"exportCsv()\">\n        <mat-icon>download</mat-icon>\n        <span>Export CSV</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!hidesColumns\"\n          (click)=\"chooseColumns()\">\n        <mat-icon>view_column</mat-icon>\n        <span>Columns</span>\n      </ng-template>\n    </fs-menu>\n  }\n  <div class=\"component-body\">\n    @if (isText) {\n      <app-report-component-text\n        [html]=\"textHtml() ?? component.config?.html ?? ''\"\n        [tokens]=\"tokens()\"\n        [editing]=\"textEditing()\"\n        [shownElsewhere]=\"shownElsewhere\"\n        (saved)=\"onTextSaved($event)\"\n        (editEnded)=\"textEditing.set(false)\"\n        (valueSettings)=\"valueSettings.emit($event)\">\n      </app-report-component-text>\n    } @else if (component.type === 'list') {\n      @for (key of [listResetKey()]; track key) {\n        <app-report-component-list\n          [reportId]=\"reportId\"\n          [component]=\"component\">\n        </app-report-component-list>\n      }\n    } @else if (component.type === 'grid') {\n      <app-report-component-grid\n        [reportId]=\"reportId\"\n        [component]=\"component\">\n      </app-report-component-grid>\n    } @else if (loading()) {\n      <!-- Holds the tile's height for the spinner on the first load. -->\n      <div class=\"component-state\"></div>\n    } @else if (error()) {\n      <div class=\"component-state error\">\n        {{ error() }}\n      </div>\n    } @else if (!data()?.rows?.length) {\n      <div class=\"component-state\">\n        {{ emptyMessage() }}\n      </div>\n    } @else if (component.type === 'kpi') {\n      <app-report-component-kpi\n        [component]=\"component\"\n        [data]=\"data()\"\n        (markClick)=\"onMarkClick($event)\">\n      </app-report-component-kpi>\n    } @else {\n      <app-report-component-chart\n        [component]=\"component\"\n        [data]=\"data()\"\n        [actions]=\"tileActions()\"\n        [(legendSelected)]=\"legendSelected\"\n        (markClick)=\"onMarkClick($event)\"\n        (markMiss)=\"onMarkMiss()\">\n      </app-report-component-chart>\n    }\n    <!-- In edit mode a transparent veil over the body makes the WHOLE\n         component draggable (industry standard: you grab the object, not just\n         its title bar) and keeps inner widgets from swallowing the gesture. -->\n    @if (editMode && !textEditing()) {\n      <div\n        class=\"drag-veil\"\n        (pointerdown)=\"onDragStart($event)\">\n      </div>\n    }\n  </div>\n  <!-- A load: a spinner centred on the whole tile. On a refetch the body and\n       the menu are dimmed under it (.refreshing); the title is not. -->\n  @if (loading() || refreshing()) {\n    <mat-progress-spinner\n      class=\"load-spinner\"\n      aria-label=\"Loading data\"\n      mode=\"indeterminate\"\n      [diameter]=\"15\">\n    </mat-progress-spinner>\n  }\n</div>\n<!-- The mark menu, for a click whose mark offers two or more actions. It\n     opens at the click: its trigger is a zero-size anchor that\n     anchor-at-point.ts moves there first. -->\n@if (!isText && !editMode) {\n  <span\n    #markAnchor\n    [style.position]=\"'absolute'\"\n    [fsMenuTriggerFor]=\"markMenu\">\n  </span>\n  <fs-menu #markMenu>\n    @for (action of markMenuActions(); track action) {\n      <ng-template\n          fs-menu-item\n          (click)=\"runMarkAction(action)\">\n        {{ markActionLabels[action] }}\n      </ng-template>\n    }\n  </fs-menu>\n}\n<!-- Handles live OUTSIDE the clipped box so they straddle its edges. -->\n@if (editMode && selected) {\n  @for (handle of resizeHandles; track handle) {\n    <div\n      class=\"handle handle-{{ handle }}\"\n      (mousedown)=\"stopCanvasPan($event)\"\n      (pointerdown)=\"onResizeStart($event, handle)\">\n    </div>\n  }\n}", styles: [":host{position:absolute;display:flex;flex-direction:column;font-size:10px;--mdc-outlined-button-container-height: 30px;--mdc-outlined-button-label-text-size: 10px;--mat-outlined-button-horizontal-padding: 15px;--mdc-text-button-container-height: 30px;--mdc-text-button-label-text-size: 10px;--mat-text-button-horizontal-padding: 15px;--mat-button-outlined-container-height: 30px;--mat-button-outlined-label-text-size: 10px;--mat-button-outlined-horizontal-padding: 15px;--mat-button-text-container-height: 30px;--mat-button-text-label-text-size: 10px;--mat-button-text-horizontal-padding: 15px}.component-box{position:relative;width:100%;flex:1 1 auto;min-height:0;box-sizing:border-box;display:flex;flex-direction:column;background:#fff;border:1px solid #e4e7eb;border-radius:6px;overflow:hidden;transition:box-shadow .12s ease,border-color .12s ease;cursor:default}.component-box.editing .component-title{cursor:grab}.component-box.editing .component-title:active{cursor:grabbing}.component-box.editing .drill-crumb{pointer-events:none}.component-box.editing:hover{border-color:#9db3c8;box-shadow:0 2px 8px #0f172a14}.component-box.selected{border-color:var(--brand-primary-color);box-shadow:0 0 0 1px var(--brand-primary-color),0 4px 14px #2196f32e}.component-box.text{background:transparent;border-color:transparent;border-radius:0;overflow:visible}.component-box.text.editing{border-style:dashed;border-color:#cbd2d9}.component-box.text.editing:hover{box-shadow:none}.component-box.text.selected{border-style:solid;border-color:var(--brand-primary-color);box-shadow:0 0 0 1px var(--brand-primary-color)}:host ::ng-deep .component-filter .filter-bar-container{align-items:center!important}.component-filter{flex:0 0 auto;display:block;padding:0 0 4px}.component-filter .component-title{display:flex;align-items:center;gap:4px;-webkit-user-select:none;user-select:none;padding-right:40px;font-size:var(--report-heading-size);font-weight:600;color:#1f2933;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.component-filter .component-title .truncated-icon{font-size:16px;width:16px;height:16px;color:#f59e0b}.component-filter .component-title .drill-path{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:rtl;text-align:left}.component-filter .component-title .drill-crumb{color:inherit;cursor:pointer;text-decoration:none}.component-filter .component-title .drill-crumb:hover,.component-filter .component-title .drill-crumb:focus-visible{text-decoration:underline}.component-filter .component-title .drill-separator{opacity:.6}.component-menu{position:absolute;top:2px;right:2px;z-index:30}.component-body{flex:1 1 auto;min-height:0;position:relative}.component-box.refreshing .component-body,.component-box.refreshing .component-menu{opacity:.35;transition:opacity .15s ease}.load-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(calc(1 / var(--canvas-zoom, 1)));z-index:25;pointer-events:none}:host(.height-auto) .component-state{min-height:120px}.drag-veil{position:absolute;inset:0;cursor:grab;touch-action:none}.drag-veil:active{cursor:grabbing}.component-state{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:12px;color:#7b8794;padding:8px;text-align:center}.component-state.error{color:#e15759}.handle{position:absolute;width:14px;height:14px;display:flex;align-items:center;justify-content:center;touch-action:none;z-index:20;transform:scale(calc(1 / var(--canvas-zoom, 1)))}.handle:before{content:\"\";width:8px;height:8px;background:#fff;border:1.5px solid var(--brand-primary-color);border-radius:2px;box-shadow:0 1px 2px #0f172a33}.handle-nw{left:-7px;top:-7px;cursor:nwse-resize}.handle-n{left:calc(50% - 7px);top:-7px;cursor:ns-resize}.handle-ne{right:-7px;top:-7px;cursor:nesw-resize}.handle-e{right:-7px;top:calc(50% - 7px);cursor:ew-resize}.handle-se{right:-7px;bottom:-7px;cursor:nwse-resize}.handle-s{left:calc(50% - 7px);bottom:-7px;cursor:ns-resize}.handle-sw{left:-7px;bottom:-7px;cursor:nesw-resize}.handle-w{left:-7px;top:calc(50% - 7px);cursor:ew-resize}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FsFilterModule }, { kind: "component", type: i1$2.FilterComponent, selector: "fs-filter", inputs: ["config"], outputs: ["closed", "opened", "ready"] }, { kind: "directive", type: i1$2.FilterHeadingDirective, selector: "[fsFilterHeading]" }, { kind: "ngmodule", type: FsMenuModule }, { kind: "component", type: i2.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i2.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "directive", type: i2.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { kind: "component", type: ComponentChartComponent, selector: "app-report-component-chart", inputs: ["component", "data", "legendSelected", "actions"], outputs: ["legendSelectedChange", "markClick", "markMiss"] }, { kind: "component", type: ComponentGridComponent, selector: "app-report-component-grid", inputs: ["reportId", "component"] }, { kind: "component", type: ComponentKpiComponent, selector: "app-report-component-kpi", inputs: ["component", "data"], outputs: ["markClick"] }, { kind: "component", type: ComponentListComponent, selector: "app-report-component-list", inputs: ["reportId", "component"] }, { kind: "component", type: ComponentTextComponent, selector: "app-report-component-text", inputs: ["html", "tokens", "editing", "shownElsewhere"], outputs: ["saved", "editEnded", "valueSettings"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportComponentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-report-component', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         MatIcon,
                         MatIconButton,
-                        MatProgressBar,
+                        MatProgressSpinner,
                         MatTooltip,
                         FsFilterModule,
                         FsMenuModule,
                         ComponentChartComponent,
+                        ComponentGridComponent,
                         ComponentKpiComponent,
                         ComponentListComponent,
                         ComponentTextComponent,
-                    ], template: "<div\n    class=\"component-box\"\n    [class.editing]=\"editMode\"\n    [class.text]=\"isText\"\n    [class.selected]=\"selected\"\n    [style.padding]=\"bodyPadding\"\n    (pointerdown)=\"onComponentPointerDown($event)\"\n    (mousedown)=\"stopCanvasPan($event)\"\n    (touchstart)=\"stopCanvasPan($event)\">\n  <!-- The header is an fs-filter: heading template = title (and the edit-mode\n       drag handle), actions = the menu, items = component-level filter groups,\n       the same strip for every type (lists included). fs-filter reads its\n       config once, so the block is keyed on the component-filter set to be\n       recreated when it changes. The title shows its tokens filled, and a\n       filter change repaints it in place (shownTitle). -->\n  <!-- A text block has no title bar \u2014 it IS its words, like a text box on a\n       slide \u2014 so it gets neither the header nor the data actions. -->\n  @for (key of isText ? [] : [filterKey]; track key) {\n    <fs-filter\n        class=\"component-filter\"\n        [config]=\"filterConfig()\">\n      <ng-template fsFilterHeading>\n        <div\n            class=\"component-title\"\n            (pointerdown)=\"onDragStart($event)\">\n          <!-- While the chart is drilled the title leads its breadcrumb:\n               'Title \u203A 2026 \u203A Q3', the title as the viewer reads it\n               (shownTitle). The title goes back to the top and each\n               crumb to the period it names; the last is where the chart is.\n               A long path is cut at its left end, so the crumbs nearest the\n               chart stay in view. While the layout is edited the crumbs are\n               plain text (the stylesheet; drillTo does nothing then). -->\n          @if (drillCrumbs().length) {\n            <span class=\"drill-path\">\n              <span dir=\"ltr\">\n                <a\n                    class=\"drill-crumb\"\n                    tabindex=\"0\"\n                    (click)=\"drillTo(0)\"\n                    (keydown.enter)=\"drillTo(0)\">\n                  {{ shownTitle }}\n                </a>\n                @for (label of drillCrumbs(); track $index; let last = $last) {\n                  <span class=\"drill-separator\">{{ drillSeparator }}</span>\n                  @if (last) {\n                    <span>{{ label }}</span>\n                  } @else {\n                    <a\n                        class=\"drill-crumb\"\n                        tabindex=\"0\"\n                        (click)=\"drillTo($index + 1)\"\n                        (keydown.enter)=\"drillTo($index + 1)\">\n                      {{ label }}\n                    </a>\n                  }\n                }\n              </span>\n            </span>\n          } @else {\n            {{ shownTitle }}\n          }\n          @if (truncated) {\n            <mat-icon\n                class=\"truncated-icon\"\n                matTooltip=\"Showing a truncated result \u2014 refine the filters to see everything.\">\n              warning_amber\n            </mat-icon>\n          }\n        </div>\n      </ng-template>\n    </fs-filter>\n  }\n  <!-- The actions menu is floated top-right (absolute) rather than living in\n       fs-filter's actions slot, so its ~40px button height no longer drives the\n       header row's height. It overlays the box corner; the heading reserves\n       right padding so a long title ellipsises before it. -->\n  @if (!isText || (editMode && !textEditing())) {\n    <button\n        mat-icon-button\n        class=\"component-menu\"\n        [fsMenuTriggerFor]=\"menu\"\n        (pointerdown)=\"$event.stopPropagation()\"\n        (mousedown)=\"stopCanvasPan($event)\">\n      <mat-icon>more_vert</mat-icon>\n    </button>\n    <!-- Beside its trigger, inside the same block: an fs-menu that finds no\n         trigger of its own draws one. -->\n    <fs-menu #menu>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!isText\"\n          (click)=\"editText()\">\n        <mat-icon>edit</mat-icon>\n        <span>Edit text</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!isText\"\n          (click)=\"deleteText()\">\n        <mat-icon>delete</mat-icon>\n        <span>Delete</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!drillCrumbs().length || editMode\"\n          (click)=\"drillUp()\">\n        <mat-icon>arrow_upward</mat-icon>\n        <span>Drill up</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!drillCrumbs().length || editMode\"\n          (click)=\"drillTo(0)\">\n        <mat-icon>vertical_align_top</mat-icon>\n        <span>Back to top</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"isText\"\n          (click)=\"settings()\">\n        <mat-icon>tune</mat-icon>\n        <span>Settings</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"isText\"\n          (click)=\"exportCsv()\">\n        <mat-icon>download</mat-icon>\n        <span>Export CSV</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!hidesColumns\"\n          (click)=\"chooseColumns()\">\n        <mat-icon>view_column</mat-icon>\n        <span>Columns</span>\n      </ng-template>\n    </fs-menu>\n  }\n  <div class=\"component-body\">\n    <!-- A refetch keeps the data on screen under a thin bar; the shimmer\n         below is for the first load only. -->\n    @if (refreshing()) {\n      <mat-progress-bar\n        class=\"refresh-bar\"\n        aria-label=\"Refreshing data\"\n        [mode]=\"'indeterminate'\">\n      </mat-progress-bar>\n    }\n    @if (isText) {\n      <app-report-component-text\n        [html]=\"textHtml() ?? component.config?.html ?? ''\"\n        [tokens]=\"tokens()\"\n        [editing]=\"textEditing()\"\n        [shownElsewhere]=\"shownElsewhere\"\n        (saved)=\"onTextSaved($event)\"\n        (editEnded)=\"textEditing.set(false)\"\n        (valueSettings)=\"valueSettings.emit($event)\">\n      </app-report-component-text>\n    } @else if (component.type === 'list') {\n      @for (key of [listResetKey()]; track key) {\n        <app-report-component-list\n          [reportId]=\"reportId\"\n          [component]=\"component\">\n        </app-report-component-list>\n      }\n    } @else if (loading()) {\n      <div class=\"component-state\">\n        <div class=\"loading-shimmer\"></div>\n      </div>\n    } @else if (error()) {\n      <div class=\"component-state error\">\n        {{ error() }}\n      </div>\n    } @else if (!data()?.rows?.length) {\n      <div class=\"component-state\">\n        {{ emptyMessage() }}\n      </div>\n    } @else if (component.type === 'kpi') {\n      <app-report-component-kpi\n        [component]=\"component\"\n        [data]=\"data()\"\n        (markClick)=\"onMarkClick($event)\">\n      </app-report-component-kpi>\n    } @else {\n      <app-report-component-chart\n        [component]=\"component\"\n        [data]=\"data()\"\n        [actions]=\"tileActions()\"\n        [(legendSelected)]=\"legendSelected\"\n        (markClick)=\"onMarkClick($event)\"\n        (markMiss)=\"onMarkMiss()\">\n      </app-report-component-chart>\n    }\n    <!-- In edit mode a transparent veil over the body makes the WHOLE\n         component draggable (industry standard: you grab the object, not just\n         its title bar) and keeps inner widgets from swallowing the gesture. -->\n    @if (editMode && !textEditing()) {\n      <div\n        class=\"drag-veil\"\n        (pointerdown)=\"onDragStart($event)\">\n      </div>\n    }\n  </div>\n</div>\n<!-- The mark menu, for a click whose mark offers two or more actions. It\n     opens at the click: its trigger is a zero-size anchor that\n     anchor-at-point.ts moves there first. -->\n@if (!isText && !editMode) {\n  <span\n    #markAnchor\n    [style.position]=\"'absolute'\"\n    [fsMenuTriggerFor]=\"markMenu\">\n  </span>\n  <fs-menu #markMenu>\n    @for (action of markMenuActions(); track action) {\n      <ng-template\n          fs-menu-item\n          (click)=\"runMarkAction(action)\">\n        {{ markActionLabels[action] }}\n      </ng-template>\n    }\n  </fs-menu>\n}\n<!-- Handles live OUTSIDE the clipped box so they straddle its edges. -->\n@if (editMode && selected) {\n  @for (handle of resizeHandles; track handle) {\n    <div\n      class=\"handle handle-{{ handle }}\"\n      (mousedown)=\"stopCanvasPan($event)\"\n      (pointerdown)=\"onResizeStart($event, handle)\">\n    </div>\n  }\n}", styles: [":host{position:absolute;display:flex;flex-direction:column;font-size:10px;--mdc-outlined-button-container-height: 30px;--mdc-outlined-button-label-text-size: 10px;--mat-outlined-button-horizontal-padding: 15px;--mdc-text-button-container-height: 30px;--mdc-text-button-label-text-size: 10px;--mat-text-button-horizontal-padding: 15px;--mat-button-outlined-container-height: 30px;--mat-button-outlined-label-text-size: 10px;--mat-button-outlined-horizontal-padding: 15px;--mat-button-text-container-height: 30px;--mat-button-text-label-text-size: 10px;--mat-button-text-horizontal-padding: 15px}.component-box{position:relative;width:100%;flex:1 1 auto;min-height:0;box-sizing:border-box;display:flex;flex-direction:column;background:#fff;border:1px solid #e4e7eb;border-radius:6px;overflow:hidden;transition:box-shadow .12s ease,border-color .12s ease;cursor:default}.component-box.editing .component-title{cursor:grab}.component-box.editing .component-title:active{cursor:grabbing}.component-box.editing .drill-crumb{pointer-events:none}.component-box.editing:hover{border-color:#9db3c8;box-shadow:0 2px 8px #0f172a14}.component-box.selected{border-color:var(--brand-primary-color);box-shadow:0 0 0 1px var(--brand-primary-color),0 4px 14px #2196f32e}.component-box.text{background:transparent;border-color:transparent;border-radius:0;overflow:visible}.component-box.text.editing{border-style:dashed;border-color:#cbd2d9}.component-box.text.editing:hover{box-shadow:none}.component-box.text.selected{border-style:solid;border-color:var(--brand-primary-color);box-shadow:0 0 0 1px var(--brand-primary-color)}:host ::ng-deep .component-filter .filter-bar-container{align-items:center!important}.component-filter{flex:0 0 auto;display:block;padding:0 0 4px}.component-filter .component-title{display:flex;align-items:center;gap:4px;-webkit-user-select:none;user-select:none;padding-right:40px;font-size:var(--report-heading-size);font-weight:600;color:#1f2933;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.component-filter .component-title .truncated-icon{font-size:16px;width:16px;height:16px;color:#f59e0b}.component-filter .component-title .drill-path{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:rtl;text-align:left}.component-filter .component-title .drill-crumb{color:inherit;cursor:pointer;text-decoration:none}.component-filter .component-title .drill-crumb:hover,.component-filter .component-title .drill-crumb:focus-visible{text-decoration:underline}.component-filter .component-title .drill-separator{opacity:.6}.component-menu{position:absolute;top:2px;right:2px;z-index:30}.component-body{flex:1 1 auto;min-height:0;position:relative}.refresh-bar{position:absolute;top:0;left:0;right:0;z-index:1;pointer-events:none;--mdc-linear-progress-track-height: 2px;--mdc-linear-progress-active-indicator-height: 2px;--mat-progress-bar-track-height: 2px;--mat-progress-bar-active-indicator-height: 2px}:host(.height-auto) .component-state{min-height:120px}.drag-veil{position:absolute;inset:0;cursor:grab;touch-action:none}.drag-veil:active{cursor:grabbing}.component-state{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:12px;color:#7b8794;padding:8px;text-align:center}.component-state.error{color:#e15759}.loading-shimmer{width:70%;height:60%;border-radius:6px;background:linear-gradient(100deg,#f0f4f8 40%,#e4ebf2,#f0f4f8 60%);background-size:200% 100%;animation:shimmer 1.2s infinite linear}@keyframes shimmer{to{background-position-x:-200%}}.handle{position:absolute;width:14px;height:14px;display:flex;align-items:center;justify-content:center;touch-action:none;z-index:20;transform:scale(calc(1 / var(--canvas-zoom, 1)))}.handle:before{content:\"\";width:8px;height:8px;background:#fff;border:1.5px solid var(--brand-primary-color);border-radius:2px;box-shadow:0 1px 2px #0f172a33}.handle-nw{left:-7px;top:-7px;cursor:nwse-resize}.handle-n{left:calc(50% - 7px);top:-7px;cursor:ns-resize}.handle-ne{right:-7px;top:-7px;cursor:nesw-resize}.handle-e{right:-7px;top:calc(50% - 7px);cursor:ew-resize}.handle-se{right:-7px;bottom:-7px;cursor:nwse-resize}.handle-s{left:calc(50% - 7px);bottom:-7px;cursor:ns-resize}.handle-sw{left:-7px;bottom:-7px;cursor:nesw-resize}.handle-w{left:-7px;top:calc(50% - 7px);cursor:ew-resize}\n"] }]
+                    ], template: "<div\n    class=\"component-box\"\n    [class.editing]=\"editMode\"\n    [class.text]=\"isText\"\n    [class.selected]=\"selected\"\n    [class.refreshing]=\"refreshing()\"\n    [style.padding]=\"bodyPadding\"\n    (pointerdown)=\"onComponentPointerDown($event)\"\n    (mousedown)=\"stopCanvasPan($event)\"\n    (touchstart)=\"stopCanvasPan($event)\">\n  <!-- The header is an fs-filter: heading template = title (and the edit-mode\n       drag handle), actions = the menu, items = component-level filter groups,\n       the same strip for every type (lists included). fs-filter reads its\n       config once, so the block is keyed on the component-filter set to be\n       recreated when it changes. The title shows its tokens filled, and a\n       filter change repaints it in place (shownTitle). -->\n  <!-- A text block has no title bar \u2014 it IS its words, like a text box on a\n       slide \u2014 so it gets neither the header nor the data actions. -->\n  @for (key of isText ? [] : [filterKey]; track key) {\n    <fs-filter\n        class=\"component-filter\"\n        [config]=\"filterConfig()\">\n      <ng-template fsFilterHeading>\n        <div\n            class=\"component-title\"\n            (pointerdown)=\"onDragStart($event)\">\n          <!-- While the chart is drilled the title leads its breadcrumb:\n               'Title \u203A 2026 \u203A Q3', the title as the viewer reads it\n               (shownTitle). The title goes back to the top and each\n               crumb to the period it names; the last is where the chart is.\n               A long path is cut at its left end, so the crumbs nearest the\n               chart stay in view. While the layout is edited the crumbs are\n               plain text (the stylesheet; drillTo does nothing then). -->\n          @if (drillCrumbs().length) {\n            <span class=\"drill-path\">\n              <span dir=\"ltr\">\n                <a\n                    class=\"drill-crumb\"\n                    tabindex=\"0\"\n                    (click)=\"drillTo(0)\"\n                    (keydown.enter)=\"drillTo(0)\">\n                  {{ shownTitle }}\n                </a>\n                @for (label of drillCrumbs(); track $index; let last = $last) {\n                  <span class=\"drill-separator\">{{ drillSeparator }}</span>\n                  @if (last) {\n                    <span>{{ label }}</span>\n                  } @else {\n                    <a\n                        class=\"drill-crumb\"\n                        tabindex=\"0\"\n                        (click)=\"drillTo($index + 1)\"\n                        (keydown.enter)=\"drillTo($index + 1)\">\n                      {{ label }}\n                    </a>\n                  }\n                }\n              </span>\n            </span>\n          } @else {\n            {{ shownTitle }}\n          }\n          @if (truncated) {\n            <mat-icon\n                class=\"truncated-icon\"\n                matTooltip=\"Showing a truncated result \u2014 refine the filters to see everything.\">\n              warning_amber\n            </mat-icon>\n          }\n        </div>\n      </ng-template>\n    </fs-filter>\n  }\n  <!-- The actions menu is floated top-right (absolute) rather than living in\n       fs-filter's actions slot, so its ~40px button height no longer drives the\n       header row's height. It overlays the box corner; the heading reserves\n       right padding so a long title ellipsises before it. -->\n  @if (!isText || (editMode && !textEditing())) {\n    <button\n        mat-icon-button\n        class=\"component-menu\"\n        [fsMenuTriggerFor]=\"menu\"\n        (pointerdown)=\"$event.stopPropagation()\"\n        (mousedown)=\"stopCanvasPan($event)\">\n      <mat-icon>more_vert</mat-icon>\n    </button>\n    <!-- Beside its trigger, inside the same block: an fs-menu that finds no\n         trigger of its own draws one. -->\n    <fs-menu #menu>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!isText\"\n          (click)=\"editText()\">\n        <mat-icon>edit</mat-icon>\n        <span>Edit text</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!isText\"\n          (click)=\"deleteText()\">\n        <mat-icon>delete</mat-icon>\n        <span>Delete</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!drillCrumbs().length || editMode\"\n          (click)=\"drillUp()\">\n        <mat-icon>arrow_upward</mat-icon>\n        <span>Drill up</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!drillCrumbs().length || editMode\"\n          (click)=\"drillTo(0)\">\n        <mat-icon>vertical_align_top</mat-icon>\n        <span>Back to top</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"isText\"\n          (click)=\"settings()\">\n        <mat-icon>tune</mat-icon>\n        <span>Settings</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"isText\"\n          (click)=\"exportCsv()\">\n        <mat-icon>download</mat-icon>\n        <span>Export CSV</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!hidesColumns\"\n          (click)=\"chooseColumns()\">\n        <mat-icon>view_column</mat-icon>\n        <span>Columns</span>\n      </ng-template>\n    </fs-menu>\n  }\n  <div class=\"component-body\">\n    @if (isText) {\n      <app-report-component-text\n        [html]=\"textHtml() ?? component.config?.html ?? ''\"\n        [tokens]=\"tokens()\"\n        [editing]=\"textEditing()\"\n        [shownElsewhere]=\"shownElsewhere\"\n        (saved)=\"onTextSaved($event)\"\n        (editEnded)=\"textEditing.set(false)\"\n        (valueSettings)=\"valueSettings.emit($event)\">\n      </app-report-component-text>\n    } @else if (component.type === 'list') {\n      @for (key of [listResetKey()]; track key) {\n        <app-report-component-list\n          [reportId]=\"reportId\"\n          [component]=\"component\">\n        </app-report-component-list>\n      }\n    } @else if (component.type === 'grid') {\n      <app-report-component-grid\n        [reportId]=\"reportId\"\n        [component]=\"component\">\n      </app-report-component-grid>\n    } @else if (loading()) {\n      <!-- Holds the tile's height for the spinner on the first load. -->\n      <div class=\"component-state\"></div>\n    } @else if (error()) {\n      <div class=\"component-state error\">\n        {{ error() }}\n      </div>\n    } @else if (!data()?.rows?.length) {\n      <div class=\"component-state\">\n        {{ emptyMessage() }}\n      </div>\n    } @else if (component.type === 'kpi') {\n      <app-report-component-kpi\n        [component]=\"component\"\n        [data]=\"data()\"\n        (markClick)=\"onMarkClick($event)\">\n      </app-report-component-kpi>\n    } @else {\n      <app-report-component-chart\n        [component]=\"component\"\n        [data]=\"data()\"\n        [actions]=\"tileActions()\"\n        [(legendSelected)]=\"legendSelected\"\n        (markClick)=\"onMarkClick($event)\"\n        (markMiss)=\"onMarkMiss()\">\n      </app-report-component-chart>\n    }\n    <!-- In edit mode a transparent veil over the body makes the WHOLE\n         component draggable (industry standard: you grab the object, not just\n         its title bar) and keeps inner widgets from swallowing the gesture. -->\n    @if (editMode && !textEditing()) {\n      <div\n        class=\"drag-veil\"\n        (pointerdown)=\"onDragStart($event)\">\n      </div>\n    }\n  </div>\n  <!-- A load: a spinner centred on the whole tile. On a refetch the body and\n       the menu are dimmed under it (.refreshing); the title is not. -->\n  @if (loading() || refreshing()) {\n    <mat-progress-spinner\n      class=\"load-spinner\"\n      aria-label=\"Loading data\"\n      mode=\"indeterminate\"\n      [diameter]=\"15\">\n    </mat-progress-spinner>\n  }\n</div>\n<!-- The mark menu, for a click whose mark offers two or more actions. It\n     opens at the click: its trigger is a zero-size anchor that\n     anchor-at-point.ts moves there first. -->\n@if (!isText && !editMode) {\n  <span\n    #markAnchor\n    [style.position]=\"'absolute'\"\n    [fsMenuTriggerFor]=\"markMenu\">\n  </span>\n  <fs-menu #markMenu>\n    @for (action of markMenuActions(); track action) {\n      <ng-template\n          fs-menu-item\n          (click)=\"runMarkAction(action)\">\n        {{ markActionLabels[action] }}\n      </ng-template>\n    }\n  </fs-menu>\n}\n<!-- Handles live OUTSIDE the clipped box so they straddle its edges. -->\n@if (editMode && selected) {\n  @for (handle of resizeHandles; track handle) {\n    <div\n      class=\"handle handle-{{ handle }}\"\n      (mousedown)=\"stopCanvasPan($event)\"\n      (pointerdown)=\"onResizeStart($event, handle)\">\n    </div>\n  }\n}", styles: [":host{position:absolute;display:flex;flex-direction:column;font-size:10px;--mdc-outlined-button-container-height: 30px;--mdc-outlined-button-label-text-size: 10px;--mat-outlined-button-horizontal-padding: 15px;--mdc-text-button-container-height: 30px;--mdc-text-button-label-text-size: 10px;--mat-text-button-horizontal-padding: 15px;--mat-button-outlined-container-height: 30px;--mat-button-outlined-label-text-size: 10px;--mat-button-outlined-horizontal-padding: 15px;--mat-button-text-container-height: 30px;--mat-button-text-label-text-size: 10px;--mat-button-text-horizontal-padding: 15px}.component-box{position:relative;width:100%;flex:1 1 auto;min-height:0;box-sizing:border-box;display:flex;flex-direction:column;background:#fff;border:1px solid #e4e7eb;border-radius:6px;overflow:hidden;transition:box-shadow .12s ease,border-color .12s ease;cursor:default}.component-box.editing .component-title{cursor:grab}.component-box.editing .component-title:active{cursor:grabbing}.component-box.editing .drill-crumb{pointer-events:none}.component-box.editing:hover{border-color:#9db3c8;box-shadow:0 2px 8px #0f172a14}.component-box.selected{border-color:var(--brand-primary-color);box-shadow:0 0 0 1px var(--brand-primary-color),0 4px 14px #2196f32e}.component-box.text{background:transparent;border-color:transparent;border-radius:0;overflow:visible}.component-box.text.editing{border-style:dashed;border-color:#cbd2d9}.component-box.text.editing:hover{box-shadow:none}.component-box.text.selected{border-style:solid;border-color:var(--brand-primary-color);box-shadow:0 0 0 1px var(--brand-primary-color)}:host ::ng-deep .component-filter .filter-bar-container{align-items:center!important}.component-filter{flex:0 0 auto;display:block;padding:0 0 4px}.component-filter .component-title{display:flex;align-items:center;gap:4px;-webkit-user-select:none;user-select:none;padding-right:40px;font-size:var(--report-heading-size);font-weight:600;color:#1f2933;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.component-filter .component-title .truncated-icon{font-size:16px;width:16px;height:16px;color:#f59e0b}.component-filter .component-title .drill-path{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:rtl;text-align:left}.component-filter .component-title .drill-crumb{color:inherit;cursor:pointer;text-decoration:none}.component-filter .component-title .drill-crumb:hover,.component-filter .component-title .drill-crumb:focus-visible{text-decoration:underline}.component-filter .component-title .drill-separator{opacity:.6}.component-menu{position:absolute;top:2px;right:2px;z-index:30}.component-body{flex:1 1 auto;min-height:0;position:relative}.component-box.refreshing .component-body,.component-box.refreshing .component-menu{opacity:.35;transition:opacity .15s ease}.load-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(calc(1 / var(--canvas-zoom, 1)));z-index:25;pointer-events:none}:host(.height-auto) .component-state{min-height:120px}.drag-veil{position:absolute;inset:0;cursor:grab;touch-action:none}.drag-veil:active{cursor:grabbing}.component-state{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:12px;color:#7b8794;padding:8px;text-align:center}.component-state.error{color:#e15759}.handle{position:absolute;width:14px;height:14px;display:flex;align-items:center;justify-content:center;touch-action:none;z-index:20;transform:scale(calc(1 / var(--canvas-zoom, 1)))}.handle:before{content:\"\";width:8px;height:8px;background:#fff;border:1.5px solid var(--brand-primary-color);border-radius:2px;box-shadow:0 1px 2px #0f172a33}.handle-nw{left:-7px;top:-7px;cursor:nwse-resize}.handle-n{left:calc(50% - 7px);top:-7px;cursor:ns-resize}.handle-ne{right:-7px;top:-7px;cursor:nesw-resize}.handle-e{right:-7px;top:calc(50% - 7px);cursor:ew-resize}.handle-se{right:-7px;bottom:-7px;cursor:nwse-resize}.handle-s{left:calc(50% - 7px);bottom:-7px;cursor:ns-resize}.handle-sw{left:-7px;bottom:-7px;cursor:nesw-resize}.handle-w{left:-7px;top:calc(50% - 7px);cursor:ew-resize}\n"] }]
         }], propDecorators: { reportId: [{
                 type: Input
             }], component: [{
@@ -13308,7 +13675,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 // in the report's format context, as on screen.
 async function renderChartImage(component, data, width, height, context, pixelRatio = 3) {
     // The same tree-shaken echarts build + 'report' theme the live canvas uses.
-    const echarts = (await import('./firestitch-report-echarts-DKXlgu1D.mjs')).default;
+    const echarts = (await import('./firestitch-report-echarts-CoaGXKET.mjs')).default;
     const host = document.createElement('div');
     host.style.width = `${width}px`;
     host.style.height = `${height}px`;
@@ -16441,7 +16808,7 @@ class ReportComponent {
             ReportExportService,
             // Tree-shaken ECharts core + the 'report' house theme, loaded lazily with
             // this route's chunk.
-            provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-DKXlgu1D.mjs').then((module) => module.default) }),
+            provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-CoaGXKET.mjs').then((module) => module.default) }),
             // The bar's date pickers start their weeks on Monday and list the built-in
             // presets; a preset only sets the days.
             provideReportDatePicker(),
@@ -16462,7 +16829,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-DKXlgu1D.mjs').then((module) => module.default) }),
+                        provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-CoaGXKET.mjs').then((module) => module.default) }),
                         // The bar's date pickers start their weeks on Monday and list the built-in
                         // presets; a preset only sets the days.
                         provideReportDatePicker(),
@@ -17673,11 +18040,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             type: Injectable
         }] });
 
-// The parts of the chat's viewer state (ReportChatViewerState) read off a
-// snapshot of the screen (the state service's snapshot()). Pure, so the
-// node harness checks them. The caps are the server's: it reads at most
-// CHAT_DRILLS_MAX drilled charts, DRILL_MAX_DEPTH steps a path and
-// CHAT_LABEL_MAX characters a label, and drops the rest.
 const CHAT_DRILLS_MAX = 10;
 const CHAT_LABEL_MAX = 100;
 // The match the chat is told of: 'any' while the groups match any filter.
@@ -17704,6 +18066,26 @@ function chatViewerDrills(snapshot, locale) {
         })),
     }));
 }
+// Every table tile on screen while `pageId` is the page on screen: the
+// page's own, then the header and footer's unless the page hides them, each
+// with the layout the viewer has it in (layoutOf; null while it shows the
+// stored layout, and then left out). Empty when the page is unknown or holds
+// no table.
+function chatViewerTiles(report, pageId, layoutOf) {
+    const page = (report?.pages ?? []).find((item) => item.id === pageId);
+    if (!report || !page) {
+        return [];
+    }
+    return [
+        ...(page.components ?? []),
+        ...(page.masterHidden ? [] : report.master?.components ?? []),
+    ]
+        .filter((component) => component.type === 'grid')
+        .map((component) => {
+        const layout = layoutOf(component);
+        return layout ? { componentId: component.id, layout } : { componentId: component.id };
+    });
+}
 
 // The groups a saved filter holds: the report-wide ones.
 function savedFilterGroups(groups) {
@@ -17804,12 +18186,12 @@ class FsAiReportComponent {
     reportId = input(null);
     // API base for the reports + chat endpoints; override to mount elsewhere.
     basePath = input('reports');
-    // The query param a report reads its opening page from (a link in a ticket
-    // can name a page: ?page=7). It is read once, when a report opens, and
-    // never written: a report keeps no state in the browser URL. Its filters,
-    // the page on screen and the rest live in the report's state
-    // (ReportFilterStateService), so a reload opens the report on its
-    // defaults. A host that wants no page read sets this to null.
+    // The query param that carries the page on screen (?page=7). A report opens
+    // on the page it names, and each move to another page writes it, in place,
+    // so a refresh or a shared link comes back to the same page. It is the only
+    // state a report keeps in the URL: its filters and the rest live in the
+    // report's state (ReportFilterStateService). A host that mounts several
+    // reports on one route, or wants no URL writes, sets this to null.
     pageQueryParam = input('page');
     // The report was deleted from its settings dialog — the host routes back to
     // the listing.
@@ -17893,6 +18275,7 @@ class FsAiReportComponent {
     _reportData = inject(ReportData);
     _reportAiChatData = inject(ReportAiChatData);
     _route = inject(ActivatedRoute);
+    _router = inject(Router);
     _filterState = inject(ReportFilterStateService);
     _filterOptions = inject(ReportFilterOptionsService);
     _exportService = inject(ReportExportService);
@@ -18046,7 +18429,7 @@ class FsAiReportComponent {
         });
     }
     // The canvas moved to another page. The report-level filters stay as they
-    // are (they live in the state service), and the URL is left alone.
+    // are (they live in the state service); the page goes into the URL.
     onCanvasPageChanged(pageId) {
         // The asked-for page has been consumed; from here the canvas owns the page.
         this.pageId.set(null);
@@ -18054,6 +18437,7 @@ class FsAiReportComponent {
         // The open page is part of the state the tiles and exports read.
         this._filterState.setPage(pageId);
         this.pageChanged.emit(pageId);
+        this._writePageToUrl(pageId);
         // The bar shows the page groups of the page on screen.
         if (hasPageGroup(this.report())) {
             this._buildReportConfig();
@@ -18150,16 +18534,20 @@ class FsAiReportComponent {
     // What the viewer has on screen as a chat turn sends it. The canvas
     // selection counts only in edit mode: it is drawn only then, and it is kept
     // (not cleared) when edit mode is left. The match is sent only while it is
-    // 'any', and the drilled charts only when one is drilled.
+    // 'any', the drilled charts only when one is drilled, and the tables only
+    // when the bound page shows one, each with the layout the viewer has it in
+    // while that differs from the stored one.
     _chatViewerState() {
         const snapshot = this._filterState.snapshot();
         const drills = chatViewerDrills(snapshot, this._filterState.formatContext().locale);
+        const tiles = chatViewerTiles(this._filterState.report(), this.chatPageId(), (component) => this._filterState.gridSessionLayout(component));
         return {
             granularity: this._filterState.frequency(),
             selectedComponentId: this.editMode() ? this._canvas?.selectedComponentId() ?? null : null,
             filters: this._filterState.viewerFilters(),
             ...chatViewerMatch(snapshot),
             ...(drills.length ? { drills } : {}),
+            ...(tiles.length ? { tiles } : {}),
         };
     }
     _resizeTo(clientX) {
@@ -18171,8 +18559,25 @@ class FsAiReportComponent {
         const clamped = Math.min(0.8, Math.max(0.2, ratio));
         this._chatPanel.nativeElement.style.flexBasis = `${clamped * 100}%`;
     }
-    // The page id the URL holds right now (?page=, read only), or null when the
-    // page param is off or the value is not a usable id.
+    // The page on screen into the URL (?page=), replacing the current history
+    // entry rather than adding one, so Back leaves the report instead of
+    // stepping through its pages. Only the page param is touched; the host's
+    // own query params stay. Nothing is written when the param is off, or when
+    // the URL already names the page.
+    _writePageToUrl(pageId) {
+        const param = this.pageQueryParam();
+        if (!param || !pageId || this._pageIdFromUrl() === pageId) {
+            return;
+        }
+        this._router.navigate([], {
+            relativeTo: this._route,
+            queryParams: { [param]: pageId },
+            queryParamsHandling: 'merge',
+            replaceUrl: true,
+        });
+    }
+    // The page id the URL holds right now (?page=), or null when the page param
+    // is off or the value is not a usable id.
     _pageIdFromUrl() {
         const param = this.pageQueryParam();
         if (!param) {
@@ -18400,7 +18805,7 @@ class FsAiReportComponent {
             ReportAiChatData,
             { provide: FsAiChatData, useExisting: ReportAiChatData },
             // Tree-shaken ECharts core + the 'report' house theme, loaded lazily.
-            provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-DKXlgu1D.mjs').then((module) => module.default) }),
+            provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-CoaGXKET.mjs').then((module) => module.default) }),
             // The bar's date pickers start their weeks on Monday and list the built-in
             // presets; a preset only sets the days.
             provideReportDatePicker(),
@@ -18424,7 +18829,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         ReportAiChatData,
                         { provide: FsAiChatData, useExisting: ReportAiChatData },
                         // Tree-shaken ECharts core + the 'report' house theme, loaded lazily.
-                        provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-DKXlgu1D.mjs').then((module) => module.default) }),
+                        provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-CoaGXKET.mjs').then((module) => module.default) }),
                         // The bar's date pickers start their weeks on Monday and list the built-in
                         // presets; a preset only sets the days.
                         provideReportDatePicker(),
@@ -18464,4 +18869,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, REPORT_CHART_FONT_FAMILY as a, REPORT_AXIS_LABEL_FONT_SIZE as b, ReportComponent as c, FsAiReportComponent as d, ReportData as e, ReportService as f, ReportFilterStateService as g, ReportNodeType as h, ReportState as i, ReportValueFormat as j, ReportValueFormula as k, ReportListColumnFormat as l, ReportNumberUnits as m, ReportChartDataLabels as n, ReportChartColor as o, ReportChartLineStyle as p, ReportChartMarkStat as q, ReportChartDateLabel as r, ReportChangePolarity as s };
-//# sourceMappingURL=firestitch-report-firestitch-report-Bnv62suw.mjs.map
+//# sourceMappingURL=firestitch-report-firestitch-report-CHPA7sla.mjs.map