@firestitch/report 18.2.2 → 18.3.0

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

@@ -1,10 +1,14 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, Component, ChangeDetectionStrategy, Input, signal, DestroyRef, ViewChild, EventEmitter, ChangeDetectorRef, NgZone, ElementRef, Output, HostBinding, ViewChildren, CUSTOM_ELEMENTS_SCHEMA, model, input, computed, viewChild, effect, output } from '@angular/core';
-import * as i1$3 from '@angular/forms';
+import { inject, Injectable, Component, ChangeDetectionStrategy, Input, signal, DestroyRef, ViewChild, input, output, computed, viewChild, ElementRef, effect, untracked, EventEmitter, ChangeDetectorRef, NgZone, Output, HostBinding, ViewChildren, CUSTOM_ELEMENTS_SCHEMA, model } from '@angular/core';
+import * as i1$1 from '@angular/forms';
 import { FormsModule, ControlContainer, NgForm } from '@angular/forms';
+import * as i3$4 from '@angular/material/button';
+import { MatIconButton, MatButton, MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DATA, MatDialogRef, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose, MatDialog } from '@angular/material/dialog';
 import * as i4$1 from '@angular/material/icon';
 import { MatIcon, MatIconModule } from '@angular/material/icon';
+import * as i2$5 from '@angular/material/tooltip';
+import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
 import * as i2$3 from '@firestitch/autocomplete-chips';
 import { FsAutocompleteChipsModule } from '@firestitch/autocomplete-chips';
 import * as i2 from '@firestitch/filter';
@@ -17,24 +21,22 @@ import { map, shareReplay, filter, switchMap as switchMap$1, tap, mergeMap, toAr
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NgxEchartsDirective, provideEchartsCore } from 'ngx-echarts';
 import { FsAiChatComponent } from '@firestitch/ai';
-import * as i1$2 from '@angular/cdk/drag-drop';
+import * as i1$3 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
-import * as i3$4 from '@angular/material/button';
-import { MatIconButton, MatButton, MatButtonModule } from '@angular/material/button';
-import * as i2$5 from '@angular/material/tooltip';
-import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
 import * as i5$1 from '@firestitch/message';
 import { FsMessage, FsMessageModule } from '@firestitch/message';
 import * as i3 from '@firestitch/zoom-pan';
 import { FsZoomPanComponent, FsZoomPanModule } from '@firestitch/zoom-pan';
 import { of, Subject, map as map$1, debounceTime, switchMap, forkJoin, from, EMPTY, BehaviorSubject } from 'rxjs';
 import { FsApi, StreamEventType } from '@firestitch/api';
-import * as i1$1 from '@angular/material/menu';
+import * as i1$2 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import { format, parseISO, startOfYear, startOfQuarter, startOfMonth, subMonths, subDays, subWeeks, startOfWeek, endOfWeek, isValid } from 'date-fns';
 import { DatePipe } from '@angular/common';
 import * as i1 from '@firestitch/list';
 import { PaginationStrategy, FsListComponent, FsListModule } from '@firestitch/list';
+import { DomSanitizer } from '@angular/platform-browser';
+import { FsHtmlEditorComponent } from '@firestitch/html-editor';
 import { MatFormField, MatLabel, MatSuffix, MatHint } from '@angular/material/form-field';
 import { MatInput } from '@angular/material/input';
 import { MatSlideToggle } from '@angular/material/slide-toggle';
@@ -136,8 +138,9 @@ class ReportData {
         });
     }
     // Report settings: any subset of { name, pageWidth, pageHeight, layout,
-    // styles } — styles carry the report's typographic config (e.g. heading size).
-    // The page size is in inches and width/height go together.
+    // styles, headerFooter } — styles carry the report's typographic config (e.g.
+    // heading size), headerFooter the header/footer band depths in inches. The
+    // page size is in inches and width/height go together.
     update(reportId, settings, config = {}) {
         return this._api.put(this._path(`${reportId}`), settings, {
             key: 'report',
@@ -151,10 +154,11 @@ class ReportData {
             ...config,
         });
     }
-    // Rename one page. An empty name is stored as null server-side, which puts
-    // the tab back on its positional "Page N" label.
-    updatePage(reportId, pageId, name, config = {}) {
-        return this._api.put(this._path(`${reportId}/pages/${pageId}`), { name }, {
+    // Any subset of { name, masterHidden }. An empty name is stored as null
+    // server-side, which puts the tab back on its positional "Page N" label;
+    // masterHidden hides the report's header and footer on this page.
+    updatePage(reportId, pageId, page, config = {}) {
+        return this._api.put(this._path(`${reportId}/pages/${pageId}`), page, {
             key: 'page',
             ...config,
         });
@@ -177,14 +181,23 @@ class ReportData {
         });
     }
     // Component settings: any subset of { title, padding } — the human-facing
-    // dialog edits; geometry (x/y/w/h/flowWidth) is persisted via savePositions
-    // from the canvas instead.
+    // dialog edits — or a text block's { html } from its inline editor; geometry
+    // (x/y/w/h/flowWidth) is persisted via savePositions from the canvas instead.
     updateComponent(reportId, componentId, settings, config = {}) {
         return this._api.put(this._path(`${reportId}/components/${componentId}/settings`), settings, {
             key: 'component',
             ...config,
         });
     }
+    // Place a text block — on a page, or in the header/footer when pageId is
+    // omitted. The only component the UI creates itself: charts, lists and KPIs
+    // need a query and come from the chat. Resolves to { id }.
+    addText(reportId, text, config = {}) {
+        return this._api.post(this._path(`${reportId}/components`), text, {
+            key: 'component',
+            ...config,
+        });
+    }
     // Delete one component from the canvas, together with its filters and any
     // filter group they leave empty. Soft server-side, but there is no restore
     // anywhere in the UI, so the dialog's confirm presents it as permanent.
@@ -456,6 +469,9 @@ function pageGeometry(report, page) {
 // can be exported as.
 const PAGE_DIMENSION_MIN = 1;
 const PAGE_DIMENSION_MAX = 50;
+// The deepest a header or footer band may be, in inches. Mirrors
+// ReportHeaderFooter::MAX_HEIGHT on the server, which clamps.
+const HEADER_FOOTER_MAX = 3;
 
 // The assembled report structure returned by GET /api/reports/:id — composed
 // server-side from the normalized tables (reports → report_pages →
@@ -1636,12 +1652,417 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: [FsListComponent]
             }] } });
 
+// Text blocks — shared by the canvas and both exports, so a block reads the
+// same on screen, in the deck and in the PDF.
+//
+// A block's html arrives already rebuilt server-side from a small allowlist
+// (ReportTextHtml): p, h1-h3, strong, em, u, s, ul/ol/li, br, a, and span with
+// color / background-color / font-size / font-weight / font-family, plus
+// text-align on a block. Everything here only has to understand that set.
+// Body text size, points, and the heading sizes — the same numbers the canvas
+// stylesheet uses, so an unstyled paragraph is one size everywhere.
+const DEFAULT_TEXT_SIZE = 12;
+const HEADING_TEXT_SIZES = { 1: 24, 2: 18, 3: 14 };
+const DEFAULT_TEXT_COLOR = '#1f2933';
+// The tokens a block may carry, with what fills each. {{page.number}} is the
+// page's position among the report's pages (1-based), which is what makes a
+// shared footer number every page correctly.
+const TOKENS$1 = {
+    'page.number': (context) => String(context.pageNumber),
+    'page.name': (context) => context.pageName,
+    'report.name': (context) => context.reportName,
+};
+// Replace every {{token}} in the html. Values are html-escaped: a page named
+// "R&D <draft>" must read as that, not as markup.
+function fillTextTokens(html, context) {
+    return html.replace(/\{\{\s*([a-z.]+)\s*\}\}/gi, (match, token) => {
+        const fill = TOKENS$1[token.toLowerCase()];
+        return fill ? escapeHtml(fill(context)) : match;
+    });
+}
+// Walk a block's html into paragraphs of styled runs — the shape both exports
+// draw from. Tokens are filled first so a page number is just text by then.
+function textParagraphs(html, context) {
+    const document = new DOMParser().parseFromString(`<body>${fillTextTokens(html, context)}</body>`, 'text/html');
+    const paragraphs = [];
+    walkBlocks(document.body, paragraphs, null);
+    return paragraphs.filter((paragraph, index) => 
+    // Keep an empty paragraph between two others (a deliberate blank line), but
+    // not one left dangling at either end.
+    paragraph.runs.length || (index > 0 && index < paragraphs.length - 1));
+}
+// The html as plain text — what a block says, for anything that cannot style it.
+function textPlain(html, context) {
+    return textParagraphs(html, context)
+        .map((paragraph) => paragraph.runs.map((run) => run.text).join(''))
+        .join('\n');
+}
+function walkBlocks(parent, paragraphs, list) {
+    // Loose inline content between blocks (text straight under <body> or <li>)
+    // is gathered into a paragraph of its own.
+    let loose = null;
+    const flush = () => {
+        if (loose) {
+            paragraphs.push(loose);
+            loose = null;
+        }
+    };
+    parent.childNodes.forEach((node) => {
+        const name = node.nodeName.toLowerCase();
+        if (name === 'ul' || name === 'ol') {
+            flush();
+            walkBlocks(node, paragraphs, name === 'ul' ? 'bullet' : 'number');
+            return;
+        }
+        if (name === 'li') {
+            flush();
+            const item = { runs: [], bullet: list ?? 'bullet' };
+            const nested = [];
+            // A list item's first paragraph IS the item; anything after it is its own
+            // line under the same bullet.
+            walkBlocks(node, nested, list);
+            const [first, ...rest] = nested.length ? nested : [item];
+            paragraphs.push({ ...first, bullet: list ?? 'bullet' }, ...rest);
+            return;
+        }
+        if (name === 'p' || /^h[1-3]$/.test(name)) {
+            flush();
+            const element = node;
+            const heading = name.startsWith('h') ? Number(name[1]) : undefined;
+            const paragraph = {
+                runs: [],
+                align: blockAlign(element),
+                bullet: undefined,
+                heading,
+            };
+            const base = heading
+                ? { bold: true, fontSize: HEADING_TEXT_SIZES[heading] }
+                : {};
+            walkInline(node, base, paragraph, paragraphs);
+            paragraphs.push(paragraph);
+            return;
+        }
+        loose = loose ?? { runs: [] };
+        walkInline(node, {}, loose, paragraphs, true);
+    });
+    flush();
+}
+// Accumulate inline styles down the tree. A <br> ends the current line: the
+// runs after it start a new paragraph with the same alignment and bullet.
+function walkInline(node, style, paragraph, paragraphs, isSelf = false) {
+    const visit = (child) => {
+        if (child.nodeType === Node.TEXT_NODE) {
+            const text = child.textContent ?? '';
+            if (text) {
+                paragraph.runs.push({ ...style, text });
+            }
+            return;
+        }
+        if (child.nodeType !== Node.ELEMENT_NODE) {
+            return;
+        }
+        const element = child;
+        const name = element.nodeName.toLowerCase();
+        if (name === 'br') {
+            paragraphs.push({ ...paragraph, runs: [...paragraph.runs] });
+            paragraph.runs.length = 0;
+            return;
+        }
+        walkInline(element, { ...style, ...inlineStyle(element) }, paragraph, paragraphs);
+    };
+    if (isSelf) {
+        visit(node);
+    }
+    else {
+        node.childNodes.forEach(visit);
+    }
+}
+function inlineStyle(element) {
+    const name = element.nodeName.toLowerCase();
+    const style = {};
+    if (name === 'strong') {
+        style.bold = true;
+    }
+    if (name === 'em') {
+        style.italic = true;
+    }
+    if (name === 'u') {
+        style.underline = true;
+    }
+    if (name === 's') {
+        style.strike = true;
+    }
+    if (name === 'a') {
+        style.link = element.getAttribute('href') ?? undefined;
+        style.underline = true;
+    }
+    const css = element.style;
+    if (css.color) {
+        style.color = hexColor(css.color);
+    }
+    if (css.backgroundColor) {
+        style.highlight = hexColor(css.backgroundColor);
+    }
+    if (css.fontSize) {
+        style.fontSize = points(css.fontSize);
+    }
+    if (css.fontWeight) {
+        style.bold = css.fontWeight === 'bold' || Number(css.fontWeight) >= 600;
+    }
+    if (css.fontStyle) {
+        style.italic = css.fontStyle === 'italic';
+    }
+    if (css.textDecoration) {
+        style.underline = css.textDecoration.includes('underline');
+        style.strike = css.textDecoration.includes('line-through');
+    }
+    if (css.fontFamily) {
+        style.fontFace = css.fontFamily.split(',')[0].replace(/["']/g, '').trim();
+    }
+    return style;
+}
+function blockAlign(element) {
+    const align = element.style.textAlign;
+    return align === 'center' || align === 'right' || align === 'justify' ? align : undefined;
+}
+// A CSS font-size in points. The canvas renders at 96px per inch, so 1px is
+// exactly 0.75pt; em/rem/% are relative to the body size.
+function points(value) {
+    const match = /^([\d.]+)(pt|px|em|rem|%)$/.exec(value.trim());
+    if (!match) {
+        return undefined;
+    }
+    const size = Number(match[1]);
+    switch (match[2]) {
+        case 'pt':
+            return size;
+        case 'px':
+            return size * 0.75;
+        case '%':
+            return (size / 100) * DEFAULT_TEXT_SIZE;
+        default:
+            return size * DEFAULT_TEXT_SIZE;
+    }
+}
+// Any CSS color the allowlist lets through (hex, rgb(), a name) as #rrggbb —
+// the one form both exports accept. The browser resolves it, so a named color
+// comes out exactly as the canvas painted it.
+let colorContext = null;
+function hexColor(value) {
+    colorContext = colorContext ?? document.createElement('canvas').getContext('2d');
+    if (!colorContext) {
+        return undefined;
+    }
+    colorContext.fillStyle = '#000000';
+    colorContext.fillStyle = value;
+    const resolved = String(colorContext.fillStyle);
+    if (resolved.startsWith('#')) {
+        return resolved;
+    }
+    // rgba(...) for a translucent color — drop the alpha, keep the hue.
+    const channels = resolved.match(/[\d.]+/g)?.slice(0, 3).map(Number) ?? [];
+    return channels.length === 3
+        ? `#${channels.map((channel) => Math.round(channel).toString(16).padStart(2, '0')).join('')}`
+        : undefined;
+}
+function escapeHtml(value) {
+    return value
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+}
+
+// Point sizes — the report's type unit (1:1 with PowerPoint and PDF).
+const FONT_SIZES = ['8', '9', '10', '11', '12', '14', '16', '18', '20', '24', '28', '32', '36', '40', '48', '60', '72'];
+// The fields a block can carry, filled per page on the canvas and in exports.
+const TOKENS = {
+    '{{page.number}}': 'Page number',
+    '{{page.name}}': 'Page name',
+    '{{report.name}}': 'Report name',
+};
+// What the editor may produce — exactly what the server keeps
+// (ReportTextHtml) and the exports draw. Anything else would edit fine and
+// then vanish on save.
+const ALLOWED_TAGS = ['p', 'h1', 'h2', 'h3', 'br', 'strong', 'em', 'u', 's', 'span', 'a', 'ul', 'ol', 'li'];
+const ALLOWED_STYLES = ['color', 'background-color', 'font-size', 'font-weight', 'font-style', 'text-decoration', 'font-family', 'text-align'];
+// Froala's own toolbars and popups live on the body, not in the block; a press
+// on any of them is still part of editing the block.
+const EDITOR_CHROME = '.fr-toolbar, .fr-popup, .fr-dropdown-menu, .fr-modal, .fr-tooltip';
+// A text block: authored rich text on the page.
+//
+// Read mode renders the stored html with its tokens ({{page.number}}, …) filled
+// for the page it is drawn on. The html has already been rebuilt server-side
+// from an allowlist (ReportTextHtml), which is what makes binding it as trusted
+// markup safe — Angular's own sanitizer would strip the inline styles that ARE
+// the formatting.
+//
+// Edit mode mounts <fs-html-editor> in its floating mode in place — the words
+// stay where they sit on the slide — with Froala's inline toolbar popping up
+// over them. The editor exists only while editing; the raw html is edited, so a
+// token reads as {{page.number}} while editing and as the number otherwise.
+//
+// The block never saves on its own: it emits the new html when editing ends
+// and the host persists it.
+class ComponentTextComponent {
+    // The block's stored html (config.html). Its own input rather than read off
+    // the component, so a saved edit — a new string on the same component — is
+    // seen as a change and repaints.
+    html = input('');
+    tokens = input.required();
+    editing = input(false);
+    // The html after an edit, only when it changed.
+    saved = output();
+    // A press landed outside the block (or Escape): the host ends edit mode,
+    // which saves.
+    editEnded = output();
+    typeScale = {
+        body: `${DEFAULT_TEXT_SIZE}pt`,
+        h1: `${HEADING_TEXT_SIZES[1]}pt`,
+        h2: `${HEADING_TEXT_SIZES[2]}pt`,
+        h3: `${HEADING_TEXT_SIZES[3]}pt`,
+        color: DEFAULT_TEXT_COLOR,
+    };
+    editorConfig = {
+        floating: true,
+        autofocus: true,
+        placeholder: 'Type here',
+        buttons: [
+            {
+                name: 'insertField',
+                title: 'Insert field',
+                svgKey: 'tags',
+                options: TOKENS,
+                click: (editor, value) => editor.html.insert(value),
+            },
+        ],
+        froalaConfig: {
+            toolbarButtons: [
+                'paragraphFormat', 'fontSize', '|',
+                'bold', 'italic', 'underline', 'strikeThrough', 'textColor', '|',
+                'align', 'formatUL', 'formatOL', '|',
+                'insertLink', 'insertField', 'clearFormatting',
+            ],
+            paragraphFormat: { N: 'Normal', H1: 'Heading 1', H2: 'Heading 2', H3: 'Heading 3' },
+            paragraphFormatSelection: true,
+            fontSize: FONT_SIZES,
+            fontSizeUnit: 'pt',
+            fontSizeSelection: true,
+            htmlAllowedTags: ALLOWED_TAGS,
+            htmlAllowedAttrs: ['style', 'href', 'target', 'rel'],
+            htmlAllowedStyleProps: ALLOWED_STYLES,
+            htmlRemoveTags: ['script', 'style'],
+            // Inline styles rather than Froala's fr-* classes, which neither the
+            // server nor the exports know.
+            useClasses: false,
+            pastePlain: true,
+            // Every keystroke reaches the model straight away, so ending the edit an
+            // instant after typing never loses the last word.
+            typingTimer: 0,
+        },
+    };
+    displayHtml = computed(() => this._sanitizer.bypassSecurityTrustHtml(fillTextTokens(this.html(), this.tokens())));
+    // What the editor holds right now.
+    draft = '';
+    _editor = viewChild(FsHtmlEditorComponent);
+    _sanitizer = inject(DomSanitizer);
+    _host = inject(ElementRef);
+    _destroyRef = inject(DestroyRef);
+    _isOpen = false;
+    constructor() {
+        // Opening seeds the draft; closing — whoever closed it: a press outside,
+        // Escape, the block being deselected or edit mode ending — saves it.
+        effect(() => {
+            const editing = this.editing();
+            untracked(() => {
+                if (editing && !this._isOpen) {
+                    this._isOpen = true;
+                    this.draft = this.html();
+                }
+                else if (!editing && this._isOpen) {
+                    this._finish();
+                }
+            });
+        });
+        // A press anywhere that is not the block or the editor's own chrome ends
+        // the edit. Captured, so it is seen before the canvas or a sibling
+        // component acts on the same press.
+        const onPress = (event) => this._onDocumentPress(event);
+        document.addEventListener('pointerdown', onPress, true);
+        this._destroyRef.onDestroy(() => document.removeEventListener('pointerdown', onPress, true));
+    }
+    onKeydown(event) {
+        if (this.editing() && event.key === 'Escape') {
+            event.preventDefault();
+            this._close();
+        }
+    }
+    _onDocumentPress(event) {
+        if (!this.editing()) {
+            return;
+        }
+        const target = event.target;
+        if (target && (this._host.nativeElement.contains(target) || target.closest(EDITOR_CHROME))) {
+            return;
+        }
+        this._close();
+    }
+    // Save NOW, then ask the host to close. Saving here rather than waiting for
+    // the editing input to flip matters: the same press may be on a page tab,
+    // and by the time the input changed this block could already be destroyed,
+    // with its edit gone.
+    _close() {
+        this._syncDraft();
+        this._finish();
+        this.editEnded.emit();
+    }
+    // Read the editor directly rather than trusting the last model update.
+    _syncDraft() {
+        const html = this._editor()?.editor?.html?.get();
+        if (typeof html === 'string') {
+            this.draft = html;
+        }
+    }
+    _finish() {
+        if (!this._isOpen) {
+            return;
+        }
+        this._isOpen = false;
+        if (this.draft !== this.html()) {
+            this.saved.emit(this.draft);
+        }
+    }
+    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 } }, outputs: { saved: "saved", editEnded: "editEnded" }, 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" } }, viewQueries: [{ propertyName: "_editor", first: true, predicate: FsHtmlEditorComponent, descendants: true, 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} @else {\n  <div\n      class=\"text-content\"\n      [innerHTML]=\"displayHtml()\">\n  </div>\n}\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}.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.editing{overflow:auto;cursor:text}\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: FsHtmlEditorComponent, selector: "fs-html-editor", inputs: ["config", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentTextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-report-component-text', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        FormsModule,
+                        FsHtmlEditorComponent,
+                    ], host: {
+                        '(keydown)': 'onKeydown($event)',
+                        // The document type scale comes from the same constants the PowerPoint and
+                        // PDF exports draw with, so a paragraph is one size in all three.
+                        '[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',
+                    }, 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} @else {\n  <div\n      class=\"text-content\"\n      [innerHTML]=\"displayHtml()\">\n  </div>\n}\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}.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.editing{overflow:auto;cursor:text}\n"] }]
+        }], ctorParameters: () => [] });
+
 // Freeform resize handles, named by compass direction.
 const HANDLES = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'];
 // Flow width snaps to the useful fractions of a page row.
 const FLOW_WIDTH_STOPS = [25, 33.33, 50, 66.67, 75, 100];
 const MIN_W = 0.6; // inches
 const MIN_H = 0.4; // inches
+// 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
+// through a captured, default-prevented pointer.
+const DOUBLE_PRESS_MS = 400;
 // One component on the page: title bar, the type-specific body (chart | list
 // | kpi), a menu (settings, filter toggles, export) — and the editing
 // interactions:
@@ -1670,6 +2091,14 @@ class ReportComponentComponent {
     positionChanged = new EventEmitter();
     flowReorder = new EventEmitter();
     openSettings = new EventEmitter();
+    // What a text block's {{tokens}} fill with on the page it is drawn on.
+    tokens = input({ pageNumber: 1, pageName: '', reportName: '' });
+    // A text block was deleted from its menu — the canvas drops it.
+    removed = output();
+    // The text block's editor is open (double-press in edit mode). Closed by focus
+    // leaving the block, by deselecting it, or by leaving edit mode — each of
+    // which saves.
+    textEditing = signal(false);
     chartComponent;
     // Freeform resize handles by type: a fixed-height component (chart/list)
     // gets all eight (resize width AND height); an auto-height one (kpi) gets
@@ -1689,13 +2118,16 @@ class ReportComponentComponent {
     _reportData = inject(ReportData);
     _filterState = inject(ReportFilterStateService);
     _process = inject(FsProcess);
+    _prompt = inject(FsPrompt);
+    _lastPress = 0;
     _destroyRef = inject(DestroyRef);
     _cdRef = inject(ChangeDetectorRef);
     _zone = inject(NgZone);
     _host = inject(ElementRef);
     ngOnInit() {
         this._buildFilterConfig();
-        if (this.component.type !== 'list') {
+        // Lists fetch through FsList; text has nothing to fetch.
+        if (this.component.type !== 'list' && !this.isText) {
             // Debounced so a rapid filter sweep fires one query, not one per change.
             this._refresh$
                 .pipe(debounceTime(300), takeUntilDestroyed(this._destroyRef))
@@ -1719,6 +2151,11 @@ class ReportComponentComponent {
     // reflects the new filters; the template recreates the fs-filter via
     // `filterKey` so it actually re-reads this config.
     ngOnChanges(changes) {
+        // Clicking away (deselect) or leaving edit mode closes an open text editor,
+        // which is what saves it.
+        if ((changes.selected && !this.selected) || (changes.editMode && !this.editMode)) {
+            this.textEditing.set(false);
+        }
         const filtersChanged = (changes.component && !changes.component.firstChange)
             || (changes.groups && !changes.groups.firstChange);
         if (filtersChanged) {
@@ -1736,6 +2173,34 @@ class ReportComponentComponent {
             ...this.componentFilterGroups.map((group) => `${group.id}:${group.level}`),
         ].join('|');
     }
+    get isText() {
+        return this.component.type === 'text';
+    }
+    // Open the text editor in place.
+    editText() {
+        if (!this.editMode || !this.isText) {
+            return;
+        }
+        this.selectComponent.emit(this.component.id);
+        this.textEditing.set(true);
+    }
+    // The editor closed with changed html. Kept locally at once so the block
+    // re-renders what was typed; the server rebuilds it from its allowlist, which
+    // for anything the editor can produce is the same html.
+    onTextSaved(html) {
+        this.component.config = { ...this.component.config, html };
+        this._reportData.updateComponent(this.reportId, this.component.id, { html })
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe();
+    }
+    deleteText() {
+        this._prompt.confirm({
+            title: 'Confirm',
+            template: 'Are you sure you would like to delete this text?',
+        })
+            .pipe(switchMap(() => this._reportData.deleteComponent(this.reportId, this.component.id)), takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => this.removed.emit(this.component.id));
+    }
     get truncated() {
         return !!this.data?.truncated;
     }
@@ -1798,9 +2263,21 @@ class ReportComponentComponent {
     }
     // ----- edit-mode gestures ---------------------------------------------------
     onDragStart(event) {
-        if (!this.editMode) {
+        if (!this.editMode || this.textEditing()) {
             return;
         }
+        // A second press on a text block opens its editor instead of dragging.
+        if (this.isText) {
+            const now = Date.now();
+            const isDoublePress = now - this._lastPress < DOUBLE_PRESS_MS;
+            this._lastPress = now;
+            if (isDoublePress) {
+                event.preventDefault();
+                event.stopPropagation();
+                this.editText();
+                return;
+            }
+        }
         this.selectComponent.emit(this.component.id);
         if (this.layout === 'flow') {
             this._flowDrag(event);
@@ -2039,7 +2516,7 @@ class ReportComponentComponent {
         });
     }
     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: "reportId", component: "component", groups: "groups", editMode: "editMode", layout: "layout", zoom: "zoom", snapper: "snapper", selected: "selected" }, outputs: { selectComponent: "selectComponent", positionChanged: "positionChanged", flowReorder: "flowReorder", openSettings: "openSettings" }, host: { properties: { "class.height-auto": "this.heightAuto" } }, viewQueries: [{ propertyName: "chartComponent", first: true, predicate: ComponentChartComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"component-box\"\n    [class.editing]=\"editMode\"\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 filters.\n       Lists carry no items here \u2014 they filter through FsList. fs-filter reads\n       its config once, so the block is keyed on the component-filter set to be\n       recreated when it changes. -->\n  @for (key of [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          {{ component.title }}\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  <button\n      mat-icon-button\n      class=\"component-menu\"\n      [matMenuTriggerFor]=\"menu\"\n      (pointerdown)=\"$event.stopPropagation()\"\n      (mousedown)=\"stopCanvasPan($event)\">\n    <mat-icon>more_vert</mat-icon>\n  </button>\n  <mat-menu #menu=\"matMenu\">\n    <button mat-menu-item (click)=\"settings()\">\n      <mat-icon>tune</mat-icon>\n      <span>Settings</span>\n    </button>\n    <button mat-menu-item (click)=\"exportCsv()\">\n      <mat-icon>download</mat-icon>\n      <span>Export CSV</span>\n    </button>\n  </mat-menu>\n  <div class=\"component-body\">\n    @if (component.type === 'list') {\n      <app-report-component-list\n        [reportId]=\"reportId\"\n        [component]=\"component\"\n        [groups]=\"groups\">\n      </app-report-component-list>\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        No data\n      </div>\n    } @else if (component.type === 'kpi') {\n      <app-report-component-kpi\n        [component]=\"component\"\n        [data]=\"data\">\n      </app-report-component-kpi>\n    } @else {\n      <app-report-component-chart\n        [component]=\"component\"\n        [data]=\"data\">\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) {\n      <div\n        class=\"drag-veil\"\n        (pointerdown)=\"onDragStart($event)\">\n      </div>\n    }\n  </div>\n</div>\n<!-- Handles live OUTSIDE the clipped box so they straddle its edges. -->\n@if (editMode && selected) {\n  @if (layout === 'freeform') {\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  } @else {\n    <!-- Flow height is always auto (the box fits its content), so only the\n         east handle (width %) is offered here. -->\n    <div\n      class=\"handle handle-e\"\n      matTooltip=\"Width (% of page)\"\n      (mousedown)=\"stopCanvasPan($event)\"\n      (pointerdown)=\"onResizeStart($event, 'e')\">\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}:host.flow-item{position:relative;left:auto;top:auto}:host.flow-dragging{z-index:40;opacity:.7;pointer-events:none}.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: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}: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-menu{position:absolute;top:2px;right:2px;z-index:30}.component-body{flex:1 1 auto;min-height:0;position:relative}: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: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FsFilterModule }, { kind: "component", type: i2.FilterComponent, selector: "fs-filter", inputs: ["config"], outputs: ["closed", "opened", "ready"] }, { kind: "directive", type: i2.FilterHeadingDirective, selector: "[fsFilterHeading]" }, { kind: "component", type: ComponentChartComponent, selector: "app-report-component-chart", inputs: ["component", "data"] }, { kind: "component", type: ComponentKpiComponent, selector: "app-report-component-kpi", inputs: ["component", "data"] }, { kind: "component", type: ComponentListComponent, selector: "app-report-component-list", inputs: ["reportId", "component", "groups"] }], 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 }, layout: { classPropertyName: "layout", publicName: "layout", 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 } }, outputs: { selectComponent: "selectComponent", positionChanged: "positionChanged", flowReorder: "flowReorder", openSettings: "openSettings", removed: "removed" }, host: { properties: { "class.height-auto": "this.heightAuto" } }, viewQueries: [{ propertyName: "chartComponent", first: true, predicate: ComponentChartComponent, 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 filters.\n       Lists carry no items here \u2014 they filter through FsList. fs-filter reads\n       its config once, so the block is keyed on the component-filter set to be\n       recreated when it changes. -->\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          {{ component.title }}\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        [matMenuTriggerFor]=\"menu\"\n        (pointerdown)=\"$event.stopPropagation()\"\n        (mousedown)=\"stopCanvasPan($event)\">\n      <mat-icon>more_vert</mat-icon>\n    </button>\n  }\n  <mat-menu #menu=\"matMenu\">\n    @if (isText) {\n      <button mat-menu-item (click)=\"editText()\">\n        <mat-icon>edit</mat-icon>\n        <span>Edit text</span>\n      </button>\n      <button mat-menu-item (click)=\"deleteText()\">\n        <mat-icon>delete</mat-icon>\n        <span>Delete</span>\n      </button>\n    } @else {\n      <button mat-menu-item (click)=\"settings()\">\n        <mat-icon>tune</mat-icon>\n        <span>Settings</span>\n      </button>\n      <button mat-menu-item (click)=\"exportCsv()\">\n        <mat-icon>download</mat-icon>\n        <span>Export CSV</span>\n      </button>\n    }\n  </mat-menu>\n  <div class=\"component-body\">\n    @if (isText) {\n      <app-report-component-text\n        [html]=\"component.config?.html ?? ''\"\n        [tokens]=\"tokens()\"\n        [editing]=\"textEditing()\"\n        (saved)=\"onTextSaved($event)\"\n        (editEnded)=\"textEditing.set(false)\">\n      </app-report-component-text>\n    } @else if (component.type === 'list') {\n      <app-report-component-list\n        [reportId]=\"reportId\"\n        [component]=\"component\"\n        [groups]=\"groups\">\n      </app-report-component-list>\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        No data\n      </div>\n    } @else if (component.type === 'kpi') {\n      <app-report-component-kpi\n        [component]=\"component\"\n        [data]=\"data\">\n      </app-report-component-kpi>\n    } @else {\n      <app-report-component-chart\n        [component]=\"component\"\n        [data]=\"data\">\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<!-- Handles live OUTSIDE the clipped box so they straddle its edges. -->\n@if (editMode && selected) {\n  @if (layout === 'freeform') {\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  } @else {\n    <!-- Flow height is always auto (the box fits its content), so only the\n         east handle (width %) is offered here. -->\n    <div\n      class=\"handle handle-e\"\n      matTooltip=\"Width (% of page)\"\n      (mousedown)=\"stopCanvasPan($event)\"\n      (pointerdown)=\"onResizeStart($event, 'e')\">\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}:host.flow-item{position:relative;left:auto;top:auto}:host.flow-dragging{z-index:40;opacity:.7;pointer-events:none}.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: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-menu{position:absolute;top:2px;right:2px;z-index:30}.component-body{flex:1 1 auto;min-height:0;position:relative}: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: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FsFilterModule }, { kind: "component", type: i2.FilterComponent, selector: "fs-filter", inputs: ["config"], outputs: ["closed", "opened", "ready"] }, { kind: "directive", type: i2.FilterHeadingDirective, selector: "[fsFilterHeading]" }, { kind: "component", type: ComponentChartComponent, selector: "app-report-component-chart", inputs: ["component", "data"] }, { kind: "component", type: ComponentKpiComponent, selector: "app-report-component-kpi", inputs: ["component", "data"] }, { kind: "component", type: ComponentListComponent, selector: "app-report-component-list", inputs: ["reportId", "component", "groups"] }, { kind: "component", type: ComponentTextComponent, selector: "app-report-component-text", inputs: ["html", "tokens", "editing"], outputs: ["saved", "editEnded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportComponentComponent, decorators: [{
             type: Component,
@@ -2052,7 +2529,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         ComponentChartComponent,
                         ComponentKpiComponent,
                         ComponentListComponent,
-                    ], template: "<div\n    class=\"component-box\"\n    [class.editing]=\"editMode\"\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 filters.\n       Lists carry no items here \u2014 they filter through FsList. fs-filter reads\n       its config once, so the block is keyed on the component-filter set to be\n       recreated when it changes. -->\n  @for (key of [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          {{ component.title }}\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  <button\n      mat-icon-button\n      class=\"component-menu\"\n      [matMenuTriggerFor]=\"menu\"\n      (pointerdown)=\"$event.stopPropagation()\"\n      (mousedown)=\"stopCanvasPan($event)\">\n    <mat-icon>more_vert</mat-icon>\n  </button>\n  <mat-menu #menu=\"matMenu\">\n    <button mat-menu-item (click)=\"settings()\">\n      <mat-icon>tune</mat-icon>\n      <span>Settings</span>\n    </button>\n    <button mat-menu-item (click)=\"exportCsv()\">\n      <mat-icon>download</mat-icon>\n      <span>Export CSV</span>\n    </button>\n  </mat-menu>\n  <div class=\"component-body\">\n    @if (component.type === 'list') {\n      <app-report-component-list\n        [reportId]=\"reportId\"\n        [component]=\"component\"\n        [groups]=\"groups\">\n      </app-report-component-list>\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        No data\n      </div>\n    } @else if (component.type === 'kpi') {\n      <app-report-component-kpi\n        [component]=\"component\"\n        [data]=\"data\">\n      </app-report-component-kpi>\n    } @else {\n      <app-report-component-chart\n        [component]=\"component\"\n        [data]=\"data\">\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) {\n      <div\n        class=\"drag-veil\"\n        (pointerdown)=\"onDragStart($event)\">\n      </div>\n    }\n  </div>\n</div>\n<!-- Handles live OUTSIDE the clipped box so they straddle its edges. -->\n@if (editMode && selected) {\n  @if (layout === 'freeform') {\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  } @else {\n    <!-- Flow height is always auto (the box fits its content), so only the\n         east handle (width %) is offered here. -->\n    <div\n      class=\"handle handle-e\"\n      matTooltip=\"Width (% of page)\"\n      (mousedown)=\"stopCanvasPan($event)\"\n      (pointerdown)=\"onResizeStart($event, 'e')\">\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}:host.flow-item{position:relative;left:auto;top:auto}:host.flow-dragging{z-index:40;opacity:.7;pointer-events:none}.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: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}: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-menu{position:absolute;top:2px;right:2px;z-index:30}.component-body{flex:1 1 auto;min-height:0;position:relative}: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"] }]
+                        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 filters.\n       Lists carry no items here \u2014 they filter through FsList. fs-filter reads\n       its config once, so the block is keyed on the component-filter set to be\n       recreated when it changes. -->\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          {{ component.title }}\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        [matMenuTriggerFor]=\"menu\"\n        (pointerdown)=\"$event.stopPropagation()\"\n        (mousedown)=\"stopCanvasPan($event)\">\n      <mat-icon>more_vert</mat-icon>\n    </button>\n  }\n  <mat-menu #menu=\"matMenu\">\n    @if (isText) {\n      <button mat-menu-item (click)=\"editText()\">\n        <mat-icon>edit</mat-icon>\n        <span>Edit text</span>\n      </button>\n      <button mat-menu-item (click)=\"deleteText()\">\n        <mat-icon>delete</mat-icon>\n        <span>Delete</span>\n      </button>\n    } @else {\n      <button mat-menu-item (click)=\"settings()\">\n        <mat-icon>tune</mat-icon>\n        <span>Settings</span>\n      </button>\n      <button mat-menu-item (click)=\"exportCsv()\">\n        <mat-icon>download</mat-icon>\n        <span>Export CSV</span>\n      </button>\n    }\n  </mat-menu>\n  <div class=\"component-body\">\n    @if (isText) {\n      <app-report-component-text\n        [html]=\"component.config?.html ?? ''\"\n        [tokens]=\"tokens()\"\n        [editing]=\"textEditing()\"\n        (saved)=\"onTextSaved($event)\"\n        (editEnded)=\"textEditing.set(false)\">\n      </app-report-component-text>\n    } @else if (component.type === 'list') {\n      <app-report-component-list\n        [reportId]=\"reportId\"\n        [component]=\"component\"\n        [groups]=\"groups\">\n      </app-report-component-list>\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        No data\n      </div>\n    } @else if (component.type === 'kpi') {\n      <app-report-component-kpi\n        [component]=\"component\"\n        [data]=\"data\">\n      </app-report-component-kpi>\n    } @else {\n      <app-report-component-chart\n        [component]=\"component\"\n        [data]=\"data\">\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<!-- Handles live OUTSIDE the clipped box so they straddle its edges. -->\n@if (editMode && selected) {\n  @if (layout === 'freeform') {\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  } @else {\n    <!-- Flow height is always auto (the box fits its content), so only the\n         east handle (width %) is offered here. -->\n    <div\n      class=\"handle handle-e\"\n      matTooltip=\"Width (% of page)\"\n      (mousedown)=\"stopCanvasPan($event)\"\n      (pointerdown)=\"onResizeStart($event, 'e')\">\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}:host.flow-item{position:relative;left:auto;top:auto}:host.flow-dragging{z-index:40;opacity:.7;pointer-events:none}.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: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-menu{position:absolute;top:2px;right:2px;z-index:30}.component-body{flex:1 1 auto;min-height:0;position:relative}: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"] }]
         }], propDecorators: { reportId: [{
                 type: Input
             }], component: [{
@@ -2097,6 +2575,13 @@ const PX_PER_INCH = 96;
 // alignment guides (edges + centers of siblings and the page) with snapping.
 // Flow layout: components flow into rows (flowWidth % of the content width),
 // drag reorders, east/south handles resize width%/height.
+//
+// Header and footer: the report's master components (report.master) are drawn
+// on a layer UNDER every page's own components, like a PowerPoint slide master,
+// unless the page hides them. In edit mode the host toolbar's "Header & footer"
+// (toggleMasterMode) switches which layer is live: the page's components dim
+// and the master's become the ones that drag, resize and snap. The header/footer bands (config.headerFooter)
+// are drawn as guides while editing and are snap lines for both layers.
 class ReportCanvasComponent {
     report;
     editMode = false;
@@ -2110,9 +2595,6 @@ class ReportCanvasComponent {
     // The report's structure changed here (a page was added) — the host re-fetches
     // it (it owns the assembled report + filter state).
     reportChanged = new EventEmitter();
-    // The viewer dismissed edit mode from the on-canvas badge — the host owns the
-    // editMode flag, so it flips it off (mirrors the menu's "Done editing layout").
-    editDone = new EventEmitter();
     // The page on screen changed — the host reflects it in the URL so a refresh
     // comes back to the same page. Carries the page id, never the index.
     pageChanged = new EventEmitter();
@@ -2126,6 +2608,8 @@ class ReportCanvasComponent {
     flowPadding = FLOW_PADDING;
     activePageIndex = 0;
     zoom = 1;
+    // Editing the header and footer (the master layer) rather than the page.
+    masterMode = signal(false);
     groups = new Map();
     selectedComponentId = null;
     // The snapper handed to every component (stable identity for OnPush).
@@ -2140,12 +2624,18 @@ class ReportCanvasComponent {
     _cdRef = inject(ChangeDetectorRef);
     _destroyRef = inject(DestroyRef);
     _fitted = false;
+    _tokens = null;
     _previousPageCount = 0;
     // The page id last announced through pageChanged, so a re-render that lands on
     // the same page stays quiet — hosts reload on this and an unchanged page is
     // not news.
     _emittedPageId = null;
-    ngOnChanges() {
+    ngOnChanges(changes) {
+        // Leaving edit mode always returns to the page layer, so the next edit
+        // session starts where people expect.
+        if (changes.editMode && !this.editMode) {
+            this.masterMode.set(false);
+        }
         this.groups = new Map((this.report?.filterGroups ?? []).map((group) => [group.id, group]));
         const pageCount = this.report?.pages?.length ?? 0;
         // A page was just added (the host re-fetched the report) — land on it.
@@ -2196,6 +2686,96 @@ class ReportCanvasComponent {
     get activePage() {
         return this.report?.pages?.[this.activePageIndex] ?? null;
     }
+    // The header/footer bands, in inches (0 = no band).
+    get bands() {
+        return this.report?.config?.headerFooter ?? { headerHeight: 0, footerHeight: 0 };
+    }
+    get masterComponents() {
+        return this.report?.master?.components ?? [];
+    }
+    // The master draws unless the page hides it — and always while it is the
+    // layer being edited, so a page that hides it can still be used to edit it.
+    get isMasterShown() {
+        return this.masterMode() || !this.activePage?.masterHidden;
+    }
+    // Which layer the edit gestures reach.
+    get isPageEditing() {
+        return this.editMode && !this.masterMode();
+    }
+    get isMasterEditing() {
+        return this.editMode && this.masterMode();
+    }
+    // What {{page.number}} / {{page.name}} / {{report.name}} fill with on the
+    // page on screen — the master's footer numbers each page by its position.
+    // The same object is handed back until one of the three changes: every text
+    // block takes it as an input, and a fresh object per check would make each
+    // of them repaint its html on every change-detection pass.
+    get tokens() {
+        const page = this.activePage;
+        const pageNumber = this.activePageIndex + 1;
+        const pageName = page ? this.pageLabel(page, this.activePageIndex) : '';
+        const reportName = this.report?.name ?? '';
+        const tokens = this._tokens;
+        if (tokens?.pageNumber !== pageNumber || tokens.pageName !== pageName || tokens.reportName !== reportName) {
+            this._tokens = { pageNumber, pageName, reportName };
+        }
+        return this._tokens;
+    }
+    toggleMasterMode() {
+        this.masterMode.update((value) => !value);
+        this.selectedComponentId = null;
+    }
+    // Drop a text block where it will be found: into the footer (or header) band
+    // while editing the header and footer, below the header band on a page. The
+    // host re-fetches the report and it appears; double-press opens its editor.
+    addText() {
+        if (!this.report) {
+            return;
+        }
+        const { headerHeight, footerHeight } = this.bands;
+        const pageWidth = this.report.pageWidth;
+        const pageHeight = this.report.pageHeight;
+        const isMaster = this.masterMode();
+        let geometry = { x: 0.5, y: headerHeight + 0.5, w: Math.min(5, pageWidth - 1), h: 0.8 };
+        if (isMaster) {
+            const bandHeight = footerHeight || headerHeight || 0.5;
+            const y = footerHeight
+                ? pageHeight - footerHeight
+                : (headerHeight ? 0 : pageHeight - bandHeight);
+            geometry = { x: 0.5, y: y + 0.05, w: Math.min(4, pageWidth - 1), h: Math.max(0.3, bandHeight - 0.1) };
+        }
+        this._reportData.addText(this.report.id, {
+            ...geometry,
+            pageId: isMaster ? undefined : this.activePage?.id,
+        })
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => this.reportChanged.emit());
+    }
+    // A text block deleted itself from its menu: drop it from whichever layer it
+    // was on without re-fetching the report (nothing else depends on it).
+    onComponentRemoved(componentId) {
+        const layers = [this.activePage?.components, this.report?.master?.components];
+        for (const components of layers) {
+            const index = components?.findIndex((component) => component.id === componentId) ?? -1;
+            if (index > -1) {
+                components.splice(index, 1);
+            }
+        }
+        this.selectedComponentId = null;
+        this._message.success('Deleted text');
+        this._cdRef.markForCheck();
+    }
+    // Show or hide the header and footer on one page, from its tab's kebab.
+    toggleMasterHidden(page) {
+        const masterHidden = !page.masterHidden;
+        this._reportData.updatePage(this.report.id, page.id, { masterHidden })
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => {
+            page.masterHidden = masterHidden;
+            this._message.success(masterHidden ? 'Header & footer hidden on this page' : 'Header & footer shown on this page');
+            this._cdRef.markForCheck();
+        });
+    }
     // Flow render order (the assembler already sorts, but a local reorder
     // mid-session must hold without a re-fetch).
     get flowComponents() {
@@ -2235,7 +2815,7 @@ class ReportCanvasComponent {
             required: true,
         })
             .pipe(switchMap((name) => this._reportData
-            .updatePage(this.report.id, page.id, name)
+            .updatePage(this.report.id, page.id, { name })
             .pipe(map$1(() => name))), takeUntilDestroyed(this._destroyRef))
             .subscribe((name) => {
             page.name = name;
@@ -2363,7 +2943,9 @@ class ReportCanvasComponent {
     // Where the pointer landed among the flowed components: before the first
     // component whose center the pointer is above/left of.
     _flowDropIndex(ordered, clientX, clientY) {
-        const hosts = Array.from(this._viewport.nativeElement.querySelectorAll('app-report-component')).filter((host) => !host.classList.contains('flow-dragging'));
+        // Flow items only — the header/footer blocks on the master layer are
+        // components too, but they are not in the flow.
+        const hosts = Array.from(this._viewport.nativeElement.querySelectorAll('app-report-component.flow-item')).filter((host) => !host.classList.contains('flow-dragging'));
         for (let index = 0; index < hosts.length && index < ordered.length; index++) {
             const rect = hosts[index].getBoundingClientRect();
             if (clientY < rect.top + rect.height / 2
@@ -2440,12 +3022,23 @@ class ReportCanvasComponent {
         this._renderGuides(guides);
         return result;
     }
-    // Alignment candidates: the page's edges + center, and every sibling's
-    // edges + centers.
+    // Alignment candidates: the page's edges + center, the header/footer band
+    // lines, and every sibling's edges + centers — siblings on the SAME layer,
+    // since a page component aligns with the page and a header block with the
+    // header.
     _candidates(moving) {
         const vertical = [0, this.report.pageWidth / 2, this.report.pageWidth];
         const horizontal = [0, this.report.pageHeight / 2, this.report.pageHeight];
-        for (const component of this.activePage?.components ?? []) {
+        const { headerHeight, footerHeight } = this.bands;
+        if (headerHeight) {
+            horizontal.push(headerHeight);
+        }
+        if (footerHeight) {
+            horizontal.push(this.report.pageHeight - footerHeight);
+        }
+        const isMaster = this.masterComponents.some((component) => component.id === moving.id);
+        const siblings = isMaster ? this.masterComponents : (this.activePage?.components ?? []);
+        for (const component of siblings) {
             if (component.id === moving.id) {
                 continue;
             }
@@ -2504,19 +3097,18 @@ class ReportCanvasComponent {
         this._guides?.nativeElement?.replaceChildren();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportCanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ReportCanvasComponent, isStandalone: true, selector: "app-report-canvas", inputs: { report: "report", editMode: "editMode", pageId: "pageId" }, outputs: { componentSettings: "componentSettings", reportChanged: "reportChanged", editDone: "editDone", pageChanged: "pageChanged" }, viewQueries: [{ propertyName: "zoomPan", first: true, predicate: FsZoomPanComponent, descendants: true }, { propertyName: "_viewport", first: true, predicate: ["viewport"], descendants: true, static: true }, { propertyName: "_guides", first: true, predicate: ["guides"], descendants: true }, { propertyName: "_renderedComponents", predicate: ReportComponentComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"canvas\">\n  <div\n    #viewport\n    class=\"page-viewport\"\n    (pointerdown)=\"onCanvasPointerDown()\">\n    <fs-zoom-pan\n      [zoomMin]=\"0.1\"\n      [zoomMax]=\"3\"\n      (zoomed)=\"onZoomed($event)\">\n      @if (activePage; as page) {\n        <div\n          class=\"page\"\n          [class.flow]=\"isFlow\"\n          [class.editing]=\"editMode\"\n          [style.width.px]=\"report.pageWidth * PX\"\n          [style.height.px]=\"report.pageHeight * PX\"\n          [style.padding.px]=\"isFlow ? flowPadding * PX : 0\"\n          [style.--canvas-zoom]=\"zoom\"\n          [style.--report-heading-size.px]=\"headingSizePx\">\n          @if (isFlow) {\n            @for (component of flowComponents; track component.id) {\n              <app-report-component\n                class=\"flow-item\"\n                [reportId]=\"report.id\"\n                [component]=\"component\"\n                [groups]=\"groups\"\n                [editMode]=\"editMode\"\n                [layout]=\"'flow'\"\n                [zoom]=\"zoom\"\n                [snapper]=\"snapper\"\n                [selected]=\"component.id === selectedComponentId\"\n                [style.width.%]=\"component.flowWidth\"\n                [style.height.px]=\"component.autoHeight ? null : component.h * PX\"\n                (selectComponent)=\"selectComponent($event)\"\n                (positionChanged)=\"onPositionChanged($event)\"\n                (flowReorder)=\"onFlowReorder($event)\"\n                (openSettings)=\"componentSettings.emit($event)\">\n              </app-report-component>\n            }\n          } @else {\n            @for (component of page.components; track component.id) {\n              <app-report-component\n                [reportId]=\"report.id\"\n                [component]=\"component\"\n                [groups]=\"groups\"\n                [editMode]=\"editMode\"\n                [layout]=\"'freeform'\"\n                [zoom]=\"zoom\"\n                [snapper]=\"snapper\"\n                [selected]=\"component.id === selectedComponentId\"\n                [style.left.px]=\"component.x * PX\"\n                [style.top.px]=\"component.y * PX\"\n                [style.width.px]=\"component.w * PX\"\n                [style.height.px]=\"component.autoHeight ? null : component.h * PX\"\n                (selectComponent)=\"selectComponent($event)\"\n                (positionChanged)=\"onPositionChanged($event)\"\n                (openSettings)=\"componentSettings.emit($event)\">\n              </app-report-component>\n            }\n          }\n\n          <div\n            #guides\n            class=\"guides\">\n          </div>\n\n          @if (!page.components.length) {\n            <div class=\"page-empty\">\n              Ask the assistant to add a chart, list or KPI to this page.\n            </div>\n          }\n        </div>\n      }\n    </fs-zoom-pan>\n\n    @if (editMode) {\n      <button\n        mat-flat-button\n        type=\"button\"\n        color=\"primary\"\n        class=\"edit-done\"\n        matTooltip=\"Exit layout editing\"\n        (click)=\"editDone.emit()\">\n        <mat-icon>check</mat-icon>\n        Done editing\n      </button>\n    }\n  </div>\n\n  <div class=\"canvas-toolbar\">\n    <!-- Tabs are one horizontal drop list: dragging a chip reorders the pages.\n         The drop INDEX is computed along X (orientation), but the preview is\n         deliberately left unbounded on both axes \u2014 pinning it to the row with\n         cdkDragBoundary means the chip you are dragging covers the chips you\n         are dragging it past, and you cannot see where it is going to land.\n         Every page gets a chip, including a lone one: the chip is what tells\n         you which page you are on, and a report that hid it left you unable to\n         tell page 1 of 1 from a page that failed to load. Deleting the last\n         page is refused server-side, so the kebab is safe to expose here. -->\n    <div\n      class=\"page-tabs\"\n      cdkDropList\n      cdkDropListOrientation=\"horizontal\"\n      (cdkDropListDropped)=\"onPageDropped($event)\">\n      @for (page of report?.pages ?? []; track page.id; let index = $index) {\n        <!-- The chip is the drag handle AND the tab: clicking selects,\n             dragging reorders. The kebab lives inside it, so the whole\n             control stays one chip instead of growing a second button. -->\n        <div\n          cdkDrag\n          class=\"page-tab\"\n          [class.active]=\"index === activePageIndex\"\n          (click)=\"selectPage(index)\">\n          <span class=\"page-tab-label\">{{ pageLabel(page, index) }}</span>\n          <!-- The kebab opens the menu rather than starting a drag or\n               switching pages, so it swallows its own click. -->\n          <span\n            class=\"page-tab-menu\"\n            [fsMenuTriggerFor]=\"pageMenu\"\n            (click)=\"$event.stopPropagation()\"\n            (mousedown)=\"$event.stopPropagation()\">\n            <mat-icon>more_vert</mat-icon>\n          </span>\n        </div>\n        <!-- Outside the chip: cdkDrag clones its host into the drag preview,\n             and a menu overlay anchored to a cloned trigger opens detached\n             from the real tab. -->\n        <fs-menu #pageMenu>\n          <ng-template\n            fs-menu-item\n            (click)=\"renamePage(page)\">\n            Edit name\n          </ng-template>\n          <ng-template\n            fs-menu-item\n            (click)=\"deletePage(page)\">\n            Delete\n          </ng-template>\n        </fs-menu>\n      }\n      <button\n        type=\"button\"\n        class=\"page-tab add-page\"\n        matTooltip=\"Add page\"\n        (click)=\"addPage()\">\n        <mat-icon>add</mat-icon>\n        Page\n      </button>\n    </div>\n\n    <div class=\"zoom-controls\">\n      <button\n        type=\"button\"\n        class=\"zoom-button\"\n        matTooltip=\"Zoom out\"\n        (click)=\"zoomOut()\">\n        <mat-icon>remove</mat-icon>\n      </button>\n      <button\n        type=\"button\"\n        class=\"zoom-label\"\n        matTooltip=\"Zoom to 100%\"\n        (click)=\"zoomActual()\">\n        {{ (zoom * 100).toFixed(0) }}%\n      </button>\n      <button\n        type=\"button\"\n        class=\"zoom-button\"\n        matTooltip=\"Zoom in\"\n        (click)=\"zoomIn()\">\n        <mat-icon>add</mat-icon>\n      </button>\n      <button\n        type=\"button\"\n        class=\"zoom-button\"\n        matTooltip=\"Fit page\"\n        (click)=\"zoomFit()\">\n        <mat-icon>fit_screen</mat-icon>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-width:0;min-height:0;flex:1;margin-top:10px}.canvas{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0}.canvas-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px}.canvas-toolbar .page-tabs{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.canvas-toolbar .page-tabs fs-menu{display:none}.canvas-toolbar .page-tabs .page-tab{display:inline-flex;align-items:center;box-sizing:border-box;border:1px solid #e4e7eb;border-radius:16px;background:#fff;padding:4px 6px 4px 14px;font-size:12px;line-height:16px;color:#52606d;cursor:pointer}.canvas-toolbar .page-tabs .page-tab.active{background:var(--brand-primary-color, #3b82f6);border-color:var(--brand-primary-color, #3b82f6);color:#fff}.canvas-toolbar .page-tabs .page-tab .page-tab-label{white-space:nowrap}.canvas-toolbar .page-tabs .page-tab .page-tab-menu{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:16px;height:16px;margin-left:2px;border-radius:50%;opacity:.75}.canvas-toolbar .page-tabs .page-tab .page-tab-menu mat-icon{font-size:14px;width:14px;height:14px;line-height:14px}.canvas-toolbar .page-tabs .page-tab .page-tab-menu:hover{background:#0f172a14;opacity:1}.canvas-toolbar .page-tabs .page-tab.active .page-tab-menu:hover{background:#ffffff38}.canvas-toolbar .page-tabs .page-tab.add-page{gap:2px;padding:4px 14px 4px 8px;border-style:dashed;color:#52606d}.canvas-toolbar .page-tabs .page-tab.add-page mat-icon{font-size:16px;width:16px;height:16px}.canvas-toolbar .page-tabs .page-tab.cdk-drag-placeholder{background:transparent;border-style:dashed;border-color:#cbd2d9}.canvas-toolbar .page-tabs .page-tab.cdk-drag-placeholder .page-tab-label,.canvas-toolbar .page-tabs .page-tab.cdk-drag-placeholder .page-tab-menu{visibility:hidden}.canvas-toolbar .page-tabs .cdk-drag-animating,.canvas-toolbar .page-tabs.cdk-drop-list-dragging .page-tab:not(.cdk-drag-placeholder){transition:transform .18s cubic-bezier(0,0,.2,1)}.canvas-toolbar .zoom-controls{display:flex;align-items:center;gap:2px;margin-left:auto;border:1px solid #e4e7eb;border-radius:18px;background:#fff;padding:2px 6px}.canvas-toolbar .zoom-controls .zoom-button{display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:transparent;color:#52606d;cursor:pointer}.canvas-toolbar .zoom-controls .zoom-button:hover{background:#f0f4f8}.canvas-toolbar .zoom-controls .zoom-button mat-icon{font-size:18px;width:18px;height:18px}.canvas-toolbar .zoom-controls .zoom-label{border:none;background:transparent;font-size:12px;color:#52606d;min-width:44px;cursor:pointer}.canvas-toolbar .zoom-controls .zoom-label:hover{color:#1f2933}.page-tab.cdk-drag-preview{display:inline-flex;align-items:center;box-sizing:border-box;border:1px solid #e4e7eb;border-radius:16px;background:#fff;padding:4px 6px 4px 14px;font-size:12px;line-height:16px;color:#52606d;box-shadow:0 3px 10px #0f172a3d}.page-tab.cdk-drag-preview.active{background:var(--brand-primary-color, #3b82f6);border-color:var(--brand-primary-color, #3b82f6);color:#fff}.page-tab.cdk-drag-preview .page-tab-label{white-space:nowrap}.page-tab.cdk-drag-preview .page-tab-menu{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:16px;height:16px;margin-left:2px;border-radius:50%;opacity:.75}.page-tab.cdk-drag-preview .page-tab-menu mat-icon{font-size:14px;width:14px;height:14px;line-height:14px}.page-viewport{position:relative;flex:1;min-height:420px;border:1px solid #e4e7eb;border-radius:8px;background:#eef1f5;overflow:hidden}.page-viewport fs-zoom-pan{width:100%;height:100%}.edit-done{position:absolute;top:12px;right:12px;z-index:40;border-radius:999px;box-shadow:0 2px 10px #0f172a2e}.page{position:relative;background:#fff;border-radius:2px;box-shadow:0 2px 12px #0f172a1f,0 0 0 1px #0f172a0a;box-sizing:border-box}.page.flow{display:flex;flex-wrap:wrap;align-content:flex-start;align-items:flex-start}.page.editing{background-image:radial-gradient(circle,#d8dee6 1px,transparent 1px);background-size:24px 24px}.guides{position:absolute;inset:0;pointer-events:none;z-index:30}.guides ::ng-deep .guide{position:absolute;background:#2196f3}.guides ::ng-deep .guide.guide-v{top:0;bottom:0;width:calc(1.25px / var(--canvas-zoom, 1))}.guides ::ng-deep .guide.guide-h{left:0;right:0;height:calc(1.25px / var(--canvas-zoom, 1))}.page-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#9aa5b1;font-size:14px;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FsMenuModule }, { kind: "component", type: i2$1.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i2$1.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "directive", type: i2$1.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { kind: "ngmodule", type: FsZoomPanModule }, { kind: "component", type: i3.FsZoomPanComponent, selector: "fs-zoom-pan", inputs: ["zoomMax", "zoomMin", "zoomScale", "zoomDefault", "zoomFactor", "top", "left"], outputs: ["moved", "zoomed"] }, { kind: "component", type: ReportComponentComponent, selector: "app-report-component", inputs: ["reportId", "component", "groups", "editMode", "layout", "zoom", "snapper", "selected"], outputs: ["selectComponent", "positionChanged", "flowReorder", "openSettings"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ReportCanvasComponent, isStandalone: true, selector: "app-report-canvas", inputs: { report: "report", editMode: "editMode", pageId: "pageId" }, outputs: { componentSettings: "componentSettings", reportChanged: "reportChanged", pageChanged: "pageChanged" }, viewQueries: [{ propertyName: "zoomPan", first: true, predicate: FsZoomPanComponent, descendants: true }, { propertyName: "_viewport", first: true, predicate: ["viewport"], descendants: true, static: true }, { propertyName: "_guides", first: true, predicate: ["guides"], descendants: true }, { propertyName: "_renderedComponents", predicate: ReportComponentComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"canvas\">\n  <div\n    #viewport\n    class=\"page-viewport\"\n    (pointerdown)=\"onCanvasPointerDown()\">\n    <fs-zoom-pan\n      [zoomMin]=\"0.1\"\n      [zoomMax]=\"3\"\n      (zoomed)=\"onZoomed($event)\">\n      @if (activePage; as page) {\n        <div\n          class=\"page\"\n          [class.flow]=\"isFlow\"\n          [class.editing]=\"editMode\"\n          [class.master-editing]=\"isMasterEditing\"\n          [style.width.px]=\"report.pageWidth * PX\"\n          [style.height.px]=\"report.pageHeight * PX\"\n          [style.padding.px]=\"isFlow ? flowPadding * PX : 0\"\n          [style.--canvas-zoom]=\"zoom\"\n          [style.--report-heading-size.px]=\"headingSizePx\">\n          <!-- The header and footer: the master's components, always freeform,\n               drawn under the page's own. Out of the flow (absolute), so a flow\n               page's rows are laid out as if it were not there. -->\n          @if (isMasterShown && masterComponents.length) {\n            <div\n              class=\"master-layer\"\n              [class.editable]=\"isMasterEditing\">\n              @for (component of masterComponents; track component.id) {\n                <app-report-component\n                  [reportId]=\"report.id\"\n                  [component]=\"component\"\n                  [groups]=\"groups\"\n                  [editMode]=\"isMasterEditing\"\n                  [layout]=\"'freeform'\"\n                  [zoom]=\"zoom\"\n                  [snapper]=\"snapper\"\n                  [tokens]=\"tokens\"\n                  [selected]=\"component.id === selectedComponentId\"\n                  [style.left.px]=\"component.x * PX\"\n                  [style.top.px]=\"component.y * PX\"\n                  [style.width.px]=\"component.w * PX\"\n                  [style.height.px]=\"component.autoHeight ? null : component.h * PX\"\n                  (selectComponent)=\"selectComponent($event)\"\n                  (positionChanged)=\"onPositionChanged($event)\"\n                  (removed)=\"onComponentRemoved($event)\"\n                  (openSettings)=\"componentSettings.emit($event)\">\n                </app-report-component>\n              }\n            </div>\n          }\n\n          <!-- The header and footer bands, as guides while editing. -->\n          @if (editMode) {\n            @if (bands.headerHeight) {\n              <div\n                class=\"band band-header\"\n                [style.height.px]=\"bands.headerHeight * PX\">\n                @if (isMasterEditing) {\n                  <span class=\"band-label small\">Header</span>\n                }\n              </div>\n            }\n            @if (bands.footerHeight) {\n              <div\n                class=\"band band-footer\"\n                [style.height.px]=\"bands.footerHeight * PX\">\n                @if (isMasterEditing) {\n                  <span class=\"band-label small\">Footer</span>\n                }\n              </div>\n            }\n          }\n\n          @if (isFlow) {\n            @for (component of flowComponents; track component.id) {\n              <app-report-component\n                class=\"flow-item\"\n                [reportId]=\"report.id\"\n                [component]=\"component\"\n                [groups]=\"groups\"\n                [editMode]=\"isPageEditing\"\n                [layout]=\"'flow'\"\n                [zoom]=\"zoom\"\n                [snapper]=\"snapper\"\n                [tokens]=\"tokens\"\n                [selected]=\"component.id === selectedComponentId\"\n                [style.width.%]=\"component.flowWidth\"\n                [style.height.px]=\"component.autoHeight ? null : component.h * PX\"\n                (selectComponent)=\"selectComponent($event)\"\n                (positionChanged)=\"onPositionChanged($event)\"\n                (flowReorder)=\"onFlowReorder($event)\"\n                (removed)=\"onComponentRemoved($event)\"\n                (openSettings)=\"componentSettings.emit($event)\">\n              </app-report-component>\n            }\n          } @else {\n            @for (component of page.components; track component.id) {\n              <app-report-component\n                [reportId]=\"report.id\"\n                [component]=\"component\"\n                [groups]=\"groups\"\n                [editMode]=\"isPageEditing\"\n                [layout]=\"'freeform'\"\n                [zoom]=\"zoom\"\n                [snapper]=\"snapper\"\n                [tokens]=\"tokens\"\n                [selected]=\"component.id === selectedComponentId\"\n                [style.left.px]=\"component.x * PX\"\n                [style.top.px]=\"component.y * PX\"\n                [style.width.px]=\"component.w * PX\"\n                [style.height.px]=\"component.autoHeight ? null : component.h * PX\"\n                (selectComponent)=\"selectComponent($event)\"\n                (positionChanged)=\"onPositionChanged($event)\"\n                (removed)=\"onComponentRemoved($event)\"\n                (openSettings)=\"componentSettings.emit($event)\">\n              </app-report-component>\n            }\n          }\n\n          <div\n            #guides\n            class=\"guides\">\n          </div>\n\n          @if (!page.components.length && !masterMode()) {\n            <div class=\"page-empty\">\n              Ask the assistant to add a chart, list or KPI to this page.\n            </div>\n          }\n        </div>\n      }\n    </fs-zoom-pan>\n  </div>\n\n  <div class=\"canvas-toolbar\">\n    <!-- Tabs are one horizontal drop list: dragging a chip reorders the pages.\n         The drop INDEX is computed along X (orientation), but the preview is\n         deliberately left unbounded on both axes \u2014 pinning it to the row with\n         cdkDragBoundary means the chip you are dragging covers the chips you\n         are dragging it past, and you cannot see where it is going to land.\n         Every page gets a chip, including a lone one: the chip is what tells\n         you which page you are on, and a report that hid it left you unable to\n         tell page 1 of 1 from a page that failed to load. Deleting the last\n         page is refused server-side, so the kebab is safe to expose here. -->\n    <div\n      class=\"page-tabs\"\n      cdkDropList\n      cdkDropListOrientation=\"horizontal\"\n      (cdkDropListDropped)=\"onPageDropped($event)\">\n      @for (page of report?.pages ?? []; track page.id; let index = $index) {\n        <!-- The chip is the drag handle AND the tab: clicking selects,\n             dragging reorders. The kebab lives inside it, so the whole\n             control stays one chip instead of growing a second button. -->\n        <div\n          cdkDrag\n          class=\"page-tab\"\n          [class.active]=\"index === activePageIndex\"\n          (click)=\"selectPage(index)\">\n          <span class=\"page-tab-label\">{{ pageLabel(page, index) }}</span>\n          <!-- The kebab opens the menu rather than starting a drag or\n               switching pages, so it swallows its own click. -->\n          <span\n            class=\"page-tab-menu\"\n            [fsMenuTriggerFor]=\"pageMenu\"\n            (click)=\"$event.stopPropagation()\"\n            (mousedown)=\"$event.stopPropagation()\">\n            <mat-icon>more_vert</mat-icon>\n          </span>\n        </div>\n        <!-- Outside the chip: cdkDrag clones its host into the drag preview,\n             and a menu overlay anchored to a cloned trigger opens detached\n             from the real tab. -->\n        <fs-menu #pageMenu>\n          <ng-template\n            fs-menu-item\n            (click)=\"renamePage(page)\">\n            Edit name\n          </ng-template>\n          <ng-template\n            fs-menu-item\n            (click)=\"toggleMasterHidden(page)\">\n            {{ page.masterHidden ? 'Show header & footer' : 'Hide header & footer' }}\n          </ng-template>\n          <ng-template\n            fs-menu-item\n            (click)=\"deletePage(page)\">\n            Delete\n          </ng-template>\n        </fs-menu>\n      }\n      <button\n        type=\"button\"\n        class=\"page-tab add-page\"\n        matTooltip=\"Add page\"\n        (click)=\"addPage()\">\n        <mat-icon>add</mat-icon>\n        Page\n      </button>\n    </div>\n\n    <div class=\"zoom-controls\">\n      <button\n        type=\"button\"\n        class=\"zoom-button\"\n        matTooltip=\"Zoom out\"\n        (click)=\"zoomOut()\">\n        <mat-icon>remove</mat-icon>\n      </button>\n      <button\n        type=\"button\"\n        class=\"zoom-label\"\n        matTooltip=\"Zoom to 100%\"\n        (click)=\"zoomActual()\">\n        {{ (zoom * 100).toFixed(0) }}%\n      </button>\n      <button\n        type=\"button\"\n        class=\"zoom-button\"\n        matTooltip=\"Zoom in\"\n        (click)=\"zoomIn()\">\n        <mat-icon>add</mat-icon>\n      </button>\n      <button\n        type=\"button\"\n        class=\"zoom-button\"\n        matTooltip=\"Fit page\"\n        (click)=\"zoomFit()\">\n        <mat-icon>fit_screen</mat-icon>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-width:0;min-height:0;flex:1;margin-top:10px}.canvas{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0}.canvas-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px}.canvas-toolbar .page-tabs{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.canvas-toolbar .page-tabs fs-menu{display:none}.canvas-toolbar .page-tabs .page-tab{display:inline-flex;align-items:center;box-sizing:border-box;border:1px solid #e4e7eb;border-radius:16px;background:#fff;padding:4px 6px 4px 14px;font-size:12px;line-height:16px;color:#52606d;cursor:pointer}.canvas-toolbar .page-tabs .page-tab.active{background:var(--brand-primary-color, #3b82f6);border-color:var(--brand-primary-color, #3b82f6);color:#fff}.canvas-toolbar .page-tabs .page-tab .page-tab-label{white-space:nowrap}.canvas-toolbar .page-tabs .page-tab .page-tab-menu{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:16px;height:16px;margin-left:2px;border-radius:50%;opacity:.75}.canvas-toolbar .page-tabs .page-tab .page-tab-menu mat-icon{font-size:14px;width:14px;height:14px;line-height:14px}.canvas-toolbar .page-tabs .page-tab .page-tab-menu:hover{background:#0f172a14;opacity:1}.canvas-toolbar .page-tabs .page-tab.active .page-tab-menu:hover{background:#ffffff38}.canvas-toolbar .page-tabs .page-tab.add-page{gap:2px;padding:4px 14px 4px 8px;border-style:dashed;color:#52606d}.canvas-toolbar .page-tabs .page-tab.add-page mat-icon{font-size:16px;width:16px;height:16px}.canvas-toolbar .page-tabs .page-tab.cdk-drag-placeholder{background:transparent;border-style:dashed;border-color:#cbd2d9}.canvas-toolbar .page-tabs .page-tab.cdk-drag-placeholder .page-tab-label,.canvas-toolbar .page-tabs .page-tab.cdk-drag-placeholder .page-tab-menu{visibility:hidden}.canvas-toolbar .page-tabs .cdk-drag-animating,.canvas-toolbar .page-tabs.cdk-drop-list-dragging .page-tab:not(.cdk-drag-placeholder){transition:transform .18s cubic-bezier(0,0,.2,1)}.canvas-toolbar .zoom-controls{display:flex;align-items:center;gap:2px;margin-left:auto;border:1px solid #e4e7eb;border-radius:18px;background:#fff;padding:2px 6px}.canvas-toolbar .zoom-controls .zoom-button{display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:transparent;color:#52606d;cursor:pointer}.canvas-toolbar .zoom-controls .zoom-button:hover{background:#f0f4f8}.canvas-toolbar .zoom-controls .zoom-button mat-icon{font-size:18px;width:18px;height:18px}.canvas-toolbar .zoom-controls .zoom-label{border:none;background:transparent;font-size:12px;color:#52606d;min-width:44px;cursor:pointer}.canvas-toolbar .zoom-controls .zoom-label:hover{color:#1f2933}.page-tab.cdk-drag-preview{display:inline-flex;align-items:center;box-sizing:border-box;border:1px solid #e4e7eb;border-radius:16px;background:#fff;padding:4px 6px 4px 14px;font-size:12px;line-height:16px;color:#52606d;box-shadow:0 3px 10px #0f172a3d}.page-tab.cdk-drag-preview.active{background:var(--brand-primary-color, #3b82f6);border-color:var(--brand-primary-color, #3b82f6);color:#fff}.page-tab.cdk-drag-preview .page-tab-label{white-space:nowrap}.page-tab.cdk-drag-preview .page-tab-menu{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:16px;height:16px;margin-left:2px;border-radius:50%;opacity:.75}.page-tab.cdk-drag-preview .page-tab-menu mat-icon{font-size:14px;width:14px;height:14px;line-height:14px}.page-viewport{position:relative;flex:1;min-height:420px;border:1px solid #e4e7eb;border-radius:8px;background:#eef1f5;overflow:hidden}.page-viewport fs-zoom-pan{width:100%;height:100%}.page{position:relative;background:#fff;border-radius:2px;box-shadow:0 2px 12px #0f172a1f,0 0 0 1px #0f172a0a;box-sizing:border-box}.page.flow{display:flex;flex-wrap:wrap;align-content:flex-start;align-items:flex-start}.page.editing{background-image:radial-gradient(circle,#d8dee6 1px,transparent 1px);background-size:24px 24px}.page.master-editing>app-report-component{opacity:.35;pointer-events:none}.master-layer{position:absolute;inset:0;pointer-events:none}.master-layer.editable{z-index:10}.master-layer.editable app-report-component{pointer-events:auto}.band{position:absolute;left:0;right:0;z-index:5;pointer-events:none;background:#2196f30a;border-color:#2196f373;border-style:dashed;border-width:0}.band.band-header{top:0;border-bottom-width:calc(1px / var(--canvas-zoom, 1))}.band.band-footer{bottom:0;border-top-width:calc(1px / var(--canvas-zoom, 1))}.band .band-label{position:absolute;top:calc(10px / var(--canvas-zoom, 1));left:calc(10px / var(--canvas-zoom, 1));transform:scale(calc(1 / var(--canvas-zoom, 1)));transform-origin:top left;color:#2196f3cc;font-weight:600;text-transform:uppercase;letter-spacing:.06em}.guides{position:absolute;inset:0;pointer-events:none;z-index:30}.guides ::ng-deep .guide{position:absolute;background:#2196f3}.guides ::ng-deep .guide.guide-v{top:0;bottom:0;width:calc(1.25px / var(--canvas-zoom, 1))}.guides ::ng-deep .guide.guide-h{left:0;right:0;height:calc(1.25px / var(--canvas-zoom, 1))}.page-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#9aa5b1;font-size:14px;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FsMenuModule }, { kind: "component", type: i2$1.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i2$1.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "directive", type: i2$1.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { kind: "ngmodule", type: FsZoomPanModule }, { kind: "component", type: i3.FsZoomPanComponent, selector: "fs-zoom-pan", inputs: ["zoomMax", "zoomMin", "zoomScale", "zoomDefault", "zoomFactor", "top", "left"], outputs: ["moved", "zoomed"] }, { kind: "component", type: ReportComponentComponent, selector: "app-report-component", inputs: ["reportId", "component", "groups", "editMode", "layout", "zoom", "snapper", "selected", "tokens"], outputs: ["selectComponent", "positionChanged", "flowReorder", "openSettings", "removed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportCanvasComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-report-canvas', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         DragDropModule,
-                        MatButton,
                         MatIcon,
                         MatTooltip,
                         FsMenuModule,
                         FsZoomPanModule,
                         ReportComponentComponent,
-                    ], template: "<div class=\"canvas\">\n  <div\n    #viewport\n    class=\"page-viewport\"\n    (pointerdown)=\"onCanvasPointerDown()\">\n    <fs-zoom-pan\n      [zoomMin]=\"0.1\"\n      [zoomMax]=\"3\"\n      (zoomed)=\"onZoomed($event)\">\n      @if (activePage; as page) {\n        <div\n          class=\"page\"\n          [class.flow]=\"isFlow\"\n          [class.editing]=\"editMode\"\n          [style.width.px]=\"report.pageWidth * PX\"\n          [style.height.px]=\"report.pageHeight * PX\"\n          [style.padding.px]=\"isFlow ? flowPadding * PX : 0\"\n          [style.--canvas-zoom]=\"zoom\"\n          [style.--report-heading-size.px]=\"headingSizePx\">\n          @if (isFlow) {\n            @for (component of flowComponents; track component.id) {\n              <app-report-component\n                class=\"flow-item\"\n                [reportId]=\"report.id\"\n                [component]=\"component\"\n                [groups]=\"groups\"\n                [editMode]=\"editMode\"\n                [layout]=\"'flow'\"\n                [zoom]=\"zoom\"\n                [snapper]=\"snapper\"\n                [selected]=\"component.id === selectedComponentId\"\n                [style.width.%]=\"component.flowWidth\"\n                [style.height.px]=\"component.autoHeight ? null : component.h * PX\"\n                (selectComponent)=\"selectComponent($event)\"\n                (positionChanged)=\"onPositionChanged($event)\"\n                (flowReorder)=\"onFlowReorder($event)\"\n                (openSettings)=\"componentSettings.emit($event)\">\n              </app-report-component>\n            }\n          } @else {\n            @for (component of page.components; track component.id) {\n              <app-report-component\n                [reportId]=\"report.id\"\n                [component]=\"component\"\n                [groups]=\"groups\"\n                [editMode]=\"editMode\"\n                [layout]=\"'freeform'\"\n                [zoom]=\"zoom\"\n                [snapper]=\"snapper\"\n                [selected]=\"component.id === selectedComponentId\"\n                [style.left.px]=\"component.x * PX\"\n                [style.top.px]=\"component.y * PX\"\n                [style.width.px]=\"component.w * PX\"\n                [style.height.px]=\"component.autoHeight ? null : component.h * PX\"\n                (selectComponent)=\"selectComponent($event)\"\n                (positionChanged)=\"onPositionChanged($event)\"\n                (openSettings)=\"componentSettings.emit($event)\">\n              </app-report-component>\n            }\n          }\n\n          <div\n            #guides\n            class=\"guides\">\n          </div>\n\n          @if (!page.components.length) {\n            <div class=\"page-empty\">\n              Ask the assistant to add a chart, list or KPI to this page.\n            </div>\n          }\n        </div>\n      }\n    </fs-zoom-pan>\n\n    @if (editMode) {\n      <button\n        mat-flat-button\n        type=\"button\"\n        color=\"primary\"\n        class=\"edit-done\"\n        matTooltip=\"Exit layout editing\"\n        (click)=\"editDone.emit()\">\n        <mat-icon>check</mat-icon>\n        Done editing\n      </button>\n    }\n  </div>\n\n  <div class=\"canvas-toolbar\">\n    <!-- Tabs are one horizontal drop list: dragging a chip reorders the pages.\n         The drop INDEX is computed along X (orientation), but the preview is\n         deliberately left unbounded on both axes \u2014 pinning it to the row with\n         cdkDragBoundary means the chip you are dragging covers the chips you\n         are dragging it past, and you cannot see where it is going to land.\n         Every page gets a chip, including a lone one: the chip is what tells\n         you which page you are on, and a report that hid it left you unable to\n         tell page 1 of 1 from a page that failed to load. Deleting the last\n         page is refused server-side, so the kebab is safe to expose here. -->\n    <div\n      class=\"page-tabs\"\n      cdkDropList\n      cdkDropListOrientation=\"horizontal\"\n      (cdkDropListDropped)=\"onPageDropped($event)\">\n      @for (page of report?.pages ?? []; track page.id; let index = $index) {\n        <!-- The chip is the drag handle AND the tab: clicking selects,\n             dragging reorders. The kebab lives inside it, so the whole\n             control stays one chip instead of growing a second button. -->\n        <div\n          cdkDrag\n          class=\"page-tab\"\n          [class.active]=\"index === activePageIndex\"\n          (click)=\"selectPage(index)\">\n          <span class=\"page-tab-label\">{{ pageLabel(page, index) }}</span>\n          <!-- The kebab opens the menu rather than starting a drag or\n               switching pages, so it swallows its own click. -->\n          <span\n            class=\"page-tab-menu\"\n            [fsMenuTriggerFor]=\"pageMenu\"\n            (click)=\"$event.stopPropagation()\"\n            (mousedown)=\"$event.stopPropagation()\">\n            <mat-icon>more_vert</mat-icon>\n          </span>\n        </div>\n        <!-- Outside the chip: cdkDrag clones its host into the drag preview,\n             and a menu overlay anchored to a cloned trigger opens detached\n             from the real tab. -->\n        <fs-menu #pageMenu>\n          <ng-template\n            fs-menu-item\n            (click)=\"renamePage(page)\">\n            Edit name\n          </ng-template>\n          <ng-template\n            fs-menu-item\n            (click)=\"deletePage(page)\">\n            Delete\n          </ng-template>\n        </fs-menu>\n      }\n      <button\n        type=\"button\"\n        class=\"page-tab add-page\"\n        matTooltip=\"Add page\"\n        (click)=\"addPage()\">\n        <mat-icon>add</mat-icon>\n        Page\n      </button>\n    </div>\n\n    <div class=\"zoom-controls\">\n      <button\n        type=\"button\"\n        class=\"zoom-button\"\n        matTooltip=\"Zoom out\"\n        (click)=\"zoomOut()\">\n        <mat-icon>remove</mat-icon>\n      </button>\n      <button\n        type=\"button\"\n        class=\"zoom-label\"\n        matTooltip=\"Zoom to 100%\"\n        (click)=\"zoomActual()\">\n        {{ (zoom * 100).toFixed(0) }}%\n      </button>\n      <button\n        type=\"button\"\n        class=\"zoom-button\"\n        matTooltip=\"Zoom in\"\n        (click)=\"zoomIn()\">\n        <mat-icon>add</mat-icon>\n      </button>\n      <button\n        type=\"button\"\n        class=\"zoom-button\"\n        matTooltip=\"Fit page\"\n        (click)=\"zoomFit()\">\n        <mat-icon>fit_screen</mat-icon>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-width:0;min-height:0;flex:1;margin-top:10px}.canvas{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0}.canvas-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px}.canvas-toolbar .page-tabs{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.canvas-toolbar .page-tabs fs-menu{display:none}.canvas-toolbar .page-tabs .page-tab{display:inline-flex;align-items:center;box-sizing:border-box;border:1px solid #e4e7eb;border-radius:16px;background:#fff;padding:4px 6px 4px 14px;font-size:12px;line-height:16px;color:#52606d;cursor:pointer}.canvas-toolbar .page-tabs .page-tab.active{background:var(--brand-primary-color, #3b82f6);border-color:var(--brand-primary-color, #3b82f6);color:#fff}.canvas-toolbar .page-tabs .page-tab .page-tab-label{white-space:nowrap}.canvas-toolbar .page-tabs .page-tab .page-tab-menu{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:16px;height:16px;margin-left:2px;border-radius:50%;opacity:.75}.canvas-toolbar .page-tabs .page-tab .page-tab-menu mat-icon{font-size:14px;width:14px;height:14px;line-height:14px}.canvas-toolbar .page-tabs .page-tab .page-tab-menu:hover{background:#0f172a14;opacity:1}.canvas-toolbar .page-tabs .page-tab.active .page-tab-menu:hover{background:#ffffff38}.canvas-toolbar .page-tabs .page-tab.add-page{gap:2px;padding:4px 14px 4px 8px;border-style:dashed;color:#52606d}.canvas-toolbar .page-tabs .page-tab.add-page mat-icon{font-size:16px;width:16px;height:16px}.canvas-toolbar .page-tabs .page-tab.cdk-drag-placeholder{background:transparent;border-style:dashed;border-color:#cbd2d9}.canvas-toolbar .page-tabs .page-tab.cdk-drag-placeholder .page-tab-label,.canvas-toolbar .page-tabs .page-tab.cdk-drag-placeholder .page-tab-menu{visibility:hidden}.canvas-toolbar .page-tabs .cdk-drag-animating,.canvas-toolbar .page-tabs.cdk-drop-list-dragging .page-tab:not(.cdk-drag-placeholder){transition:transform .18s cubic-bezier(0,0,.2,1)}.canvas-toolbar .zoom-controls{display:flex;align-items:center;gap:2px;margin-left:auto;border:1px solid #e4e7eb;border-radius:18px;background:#fff;padding:2px 6px}.canvas-toolbar .zoom-controls .zoom-button{display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:transparent;color:#52606d;cursor:pointer}.canvas-toolbar .zoom-controls .zoom-button:hover{background:#f0f4f8}.canvas-toolbar .zoom-controls .zoom-button mat-icon{font-size:18px;width:18px;height:18px}.canvas-toolbar .zoom-controls .zoom-label{border:none;background:transparent;font-size:12px;color:#52606d;min-width:44px;cursor:pointer}.canvas-toolbar .zoom-controls .zoom-label:hover{color:#1f2933}.page-tab.cdk-drag-preview{display:inline-flex;align-items:center;box-sizing:border-box;border:1px solid #e4e7eb;border-radius:16px;background:#fff;padding:4px 6px 4px 14px;font-size:12px;line-height:16px;color:#52606d;box-shadow:0 3px 10px #0f172a3d}.page-tab.cdk-drag-preview.active{background:var(--brand-primary-color, #3b82f6);border-color:var(--brand-primary-color, #3b82f6);color:#fff}.page-tab.cdk-drag-preview .page-tab-label{white-space:nowrap}.page-tab.cdk-drag-preview .page-tab-menu{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:16px;height:16px;margin-left:2px;border-radius:50%;opacity:.75}.page-tab.cdk-drag-preview .page-tab-menu mat-icon{font-size:14px;width:14px;height:14px;line-height:14px}.page-viewport{position:relative;flex:1;min-height:420px;border:1px solid #e4e7eb;border-radius:8px;background:#eef1f5;overflow:hidden}.page-viewport fs-zoom-pan{width:100%;height:100%}.edit-done{position:absolute;top:12px;right:12px;z-index:40;border-radius:999px;box-shadow:0 2px 10px #0f172a2e}.page{position:relative;background:#fff;border-radius:2px;box-shadow:0 2px 12px #0f172a1f,0 0 0 1px #0f172a0a;box-sizing:border-box}.page.flow{display:flex;flex-wrap:wrap;align-content:flex-start;align-items:flex-start}.page.editing{background-image:radial-gradient(circle,#d8dee6 1px,transparent 1px);background-size:24px 24px}.guides{position:absolute;inset:0;pointer-events:none;z-index:30}.guides ::ng-deep .guide{position:absolute;background:#2196f3}.guides ::ng-deep .guide.guide-v{top:0;bottom:0;width:calc(1.25px / var(--canvas-zoom, 1))}.guides ::ng-deep .guide.guide-h{left:0;right:0;height:calc(1.25px / var(--canvas-zoom, 1))}.page-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#9aa5b1;font-size:14px;pointer-events:none}\n"] }]
+                    ], template: "<div class=\"canvas\">\n  <div\n    #viewport\n    class=\"page-viewport\"\n    (pointerdown)=\"onCanvasPointerDown()\">\n    <fs-zoom-pan\n      [zoomMin]=\"0.1\"\n      [zoomMax]=\"3\"\n      (zoomed)=\"onZoomed($event)\">\n      @if (activePage; as page) {\n        <div\n          class=\"page\"\n          [class.flow]=\"isFlow\"\n          [class.editing]=\"editMode\"\n          [class.master-editing]=\"isMasterEditing\"\n          [style.width.px]=\"report.pageWidth * PX\"\n          [style.height.px]=\"report.pageHeight * PX\"\n          [style.padding.px]=\"isFlow ? flowPadding * PX : 0\"\n          [style.--canvas-zoom]=\"zoom\"\n          [style.--report-heading-size.px]=\"headingSizePx\">\n          <!-- The header and footer: the master's components, always freeform,\n               drawn under the page's own. Out of the flow (absolute), so a flow\n               page's rows are laid out as if it were not there. -->\n          @if (isMasterShown && masterComponents.length) {\n            <div\n              class=\"master-layer\"\n              [class.editable]=\"isMasterEditing\">\n              @for (component of masterComponents; track component.id) {\n                <app-report-component\n                  [reportId]=\"report.id\"\n                  [component]=\"component\"\n                  [groups]=\"groups\"\n                  [editMode]=\"isMasterEditing\"\n                  [layout]=\"'freeform'\"\n                  [zoom]=\"zoom\"\n                  [snapper]=\"snapper\"\n                  [tokens]=\"tokens\"\n                  [selected]=\"component.id === selectedComponentId\"\n                  [style.left.px]=\"component.x * PX\"\n                  [style.top.px]=\"component.y * PX\"\n                  [style.width.px]=\"component.w * PX\"\n                  [style.height.px]=\"component.autoHeight ? null : component.h * PX\"\n                  (selectComponent)=\"selectComponent($event)\"\n                  (positionChanged)=\"onPositionChanged($event)\"\n                  (removed)=\"onComponentRemoved($event)\"\n                  (openSettings)=\"componentSettings.emit($event)\">\n                </app-report-component>\n              }\n            </div>\n          }\n\n          <!-- The header and footer bands, as guides while editing. -->\n          @if (editMode) {\n            @if (bands.headerHeight) {\n              <div\n                class=\"band band-header\"\n                [style.height.px]=\"bands.headerHeight * PX\">\n                @if (isMasterEditing) {\n                  <span class=\"band-label small\">Header</span>\n                }\n              </div>\n            }\n            @if (bands.footerHeight) {\n              <div\n                class=\"band band-footer\"\n                [style.height.px]=\"bands.footerHeight * PX\">\n                @if (isMasterEditing) {\n                  <span class=\"band-label small\">Footer</span>\n                }\n              </div>\n            }\n          }\n\n          @if (isFlow) {\n            @for (component of flowComponents; track component.id) {\n              <app-report-component\n                class=\"flow-item\"\n                [reportId]=\"report.id\"\n                [component]=\"component\"\n                [groups]=\"groups\"\n                [editMode]=\"isPageEditing\"\n                [layout]=\"'flow'\"\n                [zoom]=\"zoom\"\n                [snapper]=\"snapper\"\n                [tokens]=\"tokens\"\n                [selected]=\"component.id === selectedComponentId\"\n                [style.width.%]=\"component.flowWidth\"\n                [style.height.px]=\"component.autoHeight ? null : component.h * PX\"\n                (selectComponent)=\"selectComponent($event)\"\n                (positionChanged)=\"onPositionChanged($event)\"\n                (flowReorder)=\"onFlowReorder($event)\"\n                (removed)=\"onComponentRemoved($event)\"\n                (openSettings)=\"componentSettings.emit($event)\">\n              </app-report-component>\n            }\n          } @else {\n            @for (component of page.components; track component.id) {\n              <app-report-component\n                [reportId]=\"report.id\"\n                [component]=\"component\"\n                [groups]=\"groups\"\n                [editMode]=\"isPageEditing\"\n                [layout]=\"'freeform'\"\n                [zoom]=\"zoom\"\n                [snapper]=\"snapper\"\n                [tokens]=\"tokens\"\n                [selected]=\"component.id === selectedComponentId\"\n                [style.left.px]=\"component.x * PX\"\n                [style.top.px]=\"component.y * PX\"\n                [style.width.px]=\"component.w * PX\"\n                [style.height.px]=\"component.autoHeight ? null : component.h * PX\"\n                (selectComponent)=\"selectComponent($event)\"\n                (positionChanged)=\"onPositionChanged($event)\"\n                (removed)=\"onComponentRemoved($event)\"\n                (openSettings)=\"componentSettings.emit($event)\">\n              </app-report-component>\n            }\n          }\n\n          <div\n            #guides\n            class=\"guides\">\n          </div>\n\n          @if (!page.components.length && !masterMode()) {\n            <div class=\"page-empty\">\n              Ask the assistant to add a chart, list or KPI to this page.\n            </div>\n          }\n        </div>\n      }\n    </fs-zoom-pan>\n  </div>\n\n  <div class=\"canvas-toolbar\">\n    <!-- Tabs are one horizontal drop list: dragging a chip reorders the pages.\n         The drop INDEX is computed along X (orientation), but the preview is\n         deliberately left unbounded on both axes \u2014 pinning it to the row with\n         cdkDragBoundary means the chip you are dragging covers the chips you\n         are dragging it past, and you cannot see where it is going to land.\n         Every page gets a chip, including a lone one: the chip is what tells\n         you which page you are on, and a report that hid it left you unable to\n         tell page 1 of 1 from a page that failed to load. Deleting the last\n         page is refused server-side, so the kebab is safe to expose here. -->\n    <div\n      class=\"page-tabs\"\n      cdkDropList\n      cdkDropListOrientation=\"horizontal\"\n      (cdkDropListDropped)=\"onPageDropped($event)\">\n      @for (page of report?.pages ?? []; track page.id; let index = $index) {\n        <!-- The chip is the drag handle AND the tab: clicking selects,\n             dragging reorders. The kebab lives inside it, so the whole\n             control stays one chip instead of growing a second button. -->\n        <div\n          cdkDrag\n          class=\"page-tab\"\n          [class.active]=\"index === activePageIndex\"\n          (click)=\"selectPage(index)\">\n          <span class=\"page-tab-label\">{{ pageLabel(page, index) }}</span>\n          <!-- The kebab opens the menu rather than starting a drag or\n               switching pages, so it swallows its own click. -->\n          <span\n            class=\"page-tab-menu\"\n            [fsMenuTriggerFor]=\"pageMenu\"\n            (click)=\"$event.stopPropagation()\"\n            (mousedown)=\"$event.stopPropagation()\">\n            <mat-icon>more_vert</mat-icon>\n          </span>\n        </div>\n        <!-- Outside the chip: cdkDrag clones its host into the drag preview,\n             and a menu overlay anchored to a cloned trigger opens detached\n             from the real tab. -->\n        <fs-menu #pageMenu>\n          <ng-template\n            fs-menu-item\n            (click)=\"renamePage(page)\">\n            Edit name\n          </ng-template>\n          <ng-template\n            fs-menu-item\n            (click)=\"toggleMasterHidden(page)\">\n            {{ page.masterHidden ? 'Show header & footer' : 'Hide header & footer' }}\n          </ng-template>\n          <ng-template\n            fs-menu-item\n            (click)=\"deletePage(page)\">\n            Delete\n          </ng-template>\n        </fs-menu>\n      }\n      <button\n        type=\"button\"\n        class=\"page-tab add-page\"\n        matTooltip=\"Add page\"\n        (click)=\"addPage()\">\n        <mat-icon>add</mat-icon>\n        Page\n      </button>\n    </div>\n\n    <div class=\"zoom-controls\">\n      <button\n        type=\"button\"\n        class=\"zoom-button\"\n        matTooltip=\"Zoom out\"\n        (click)=\"zoomOut()\">\n        <mat-icon>remove</mat-icon>\n      </button>\n      <button\n        type=\"button\"\n        class=\"zoom-label\"\n        matTooltip=\"Zoom to 100%\"\n        (click)=\"zoomActual()\">\n        {{ (zoom * 100).toFixed(0) }}%\n      </button>\n      <button\n        type=\"button\"\n        class=\"zoom-button\"\n        matTooltip=\"Zoom in\"\n        (click)=\"zoomIn()\">\n        <mat-icon>add</mat-icon>\n      </button>\n      <button\n        type=\"button\"\n        class=\"zoom-button\"\n        matTooltip=\"Fit page\"\n        (click)=\"zoomFit()\">\n        <mat-icon>fit_screen</mat-icon>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-width:0;min-height:0;flex:1;margin-top:10px}.canvas{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0}.canvas-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px}.canvas-toolbar .page-tabs{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.canvas-toolbar .page-tabs fs-menu{display:none}.canvas-toolbar .page-tabs .page-tab{display:inline-flex;align-items:center;box-sizing:border-box;border:1px solid #e4e7eb;border-radius:16px;background:#fff;padding:4px 6px 4px 14px;font-size:12px;line-height:16px;color:#52606d;cursor:pointer}.canvas-toolbar .page-tabs .page-tab.active{background:var(--brand-primary-color, #3b82f6);border-color:var(--brand-primary-color, #3b82f6);color:#fff}.canvas-toolbar .page-tabs .page-tab .page-tab-label{white-space:nowrap}.canvas-toolbar .page-tabs .page-tab .page-tab-menu{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:16px;height:16px;margin-left:2px;border-radius:50%;opacity:.75}.canvas-toolbar .page-tabs .page-tab .page-tab-menu mat-icon{font-size:14px;width:14px;height:14px;line-height:14px}.canvas-toolbar .page-tabs .page-tab .page-tab-menu:hover{background:#0f172a14;opacity:1}.canvas-toolbar .page-tabs .page-tab.active .page-tab-menu:hover{background:#ffffff38}.canvas-toolbar .page-tabs .page-tab.add-page{gap:2px;padding:4px 14px 4px 8px;border-style:dashed;color:#52606d}.canvas-toolbar .page-tabs .page-tab.add-page mat-icon{font-size:16px;width:16px;height:16px}.canvas-toolbar .page-tabs .page-tab.cdk-drag-placeholder{background:transparent;border-style:dashed;border-color:#cbd2d9}.canvas-toolbar .page-tabs .page-tab.cdk-drag-placeholder .page-tab-label,.canvas-toolbar .page-tabs .page-tab.cdk-drag-placeholder .page-tab-menu{visibility:hidden}.canvas-toolbar .page-tabs .cdk-drag-animating,.canvas-toolbar .page-tabs.cdk-drop-list-dragging .page-tab:not(.cdk-drag-placeholder){transition:transform .18s cubic-bezier(0,0,.2,1)}.canvas-toolbar .zoom-controls{display:flex;align-items:center;gap:2px;margin-left:auto;border:1px solid #e4e7eb;border-radius:18px;background:#fff;padding:2px 6px}.canvas-toolbar .zoom-controls .zoom-button{display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:transparent;color:#52606d;cursor:pointer}.canvas-toolbar .zoom-controls .zoom-button:hover{background:#f0f4f8}.canvas-toolbar .zoom-controls .zoom-button mat-icon{font-size:18px;width:18px;height:18px}.canvas-toolbar .zoom-controls .zoom-label{border:none;background:transparent;font-size:12px;color:#52606d;min-width:44px;cursor:pointer}.canvas-toolbar .zoom-controls .zoom-label:hover{color:#1f2933}.page-tab.cdk-drag-preview{display:inline-flex;align-items:center;box-sizing:border-box;border:1px solid #e4e7eb;border-radius:16px;background:#fff;padding:4px 6px 4px 14px;font-size:12px;line-height:16px;color:#52606d;box-shadow:0 3px 10px #0f172a3d}.page-tab.cdk-drag-preview.active{background:var(--brand-primary-color, #3b82f6);border-color:var(--brand-primary-color, #3b82f6);color:#fff}.page-tab.cdk-drag-preview .page-tab-label{white-space:nowrap}.page-tab.cdk-drag-preview .page-tab-menu{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:16px;height:16px;margin-left:2px;border-radius:50%;opacity:.75}.page-tab.cdk-drag-preview .page-tab-menu mat-icon{font-size:14px;width:14px;height:14px;line-height:14px}.page-viewport{position:relative;flex:1;min-height:420px;border:1px solid #e4e7eb;border-radius:8px;background:#eef1f5;overflow:hidden}.page-viewport fs-zoom-pan{width:100%;height:100%}.page{position:relative;background:#fff;border-radius:2px;box-shadow:0 2px 12px #0f172a1f,0 0 0 1px #0f172a0a;box-sizing:border-box}.page.flow{display:flex;flex-wrap:wrap;align-content:flex-start;align-items:flex-start}.page.editing{background-image:radial-gradient(circle,#d8dee6 1px,transparent 1px);background-size:24px 24px}.page.master-editing>app-report-component{opacity:.35;pointer-events:none}.master-layer{position:absolute;inset:0;pointer-events:none}.master-layer.editable{z-index:10}.master-layer.editable app-report-component{pointer-events:auto}.band{position:absolute;left:0;right:0;z-index:5;pointer-events:none;background:#2196f30a;border-color:#2196f373;border-style:dashed;border-width:0}.band.band-header{top:0;border-bottom-width:calc(1px / var(--canvas-zoom, 1))}.band.band-footer{bottom:0;border-top-width:calc(1px / var(--canvas-zoom, 1))}.band .band-label{position:absolute;top:calc(10px / var(--canvas-zoom, 1));left:calc(10px / var(--canvas-zoom, 1));transform:scale(calc(1 / var(--canvas-zoom, 1)));transform-origin:top left;color:#2196f3cc;font-weight:600;text-transform:uppercase;letter-spacing:.06em}.guides{position:absolute;inset:0;pointer-events:none;z-index:30}.guides ::ng-deep .guide{position:absolute;background:#2196f3}.guides ::ng-deep .guide.guide-v{top:0;bottom:0;width:calc(1.25px / var(--canvas-zoom, 1))}.guides ::ng-deep .guide.guide-h{left:0;right:0;height:calc(1.25px / var(--canvas-zoom, 1))}.page-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#9aa5b1;font-size:14px;pointer-events:none}\n"] }]
         }], propDecorators: { report: [{
                 type: Input
             }], editMode: [{
@@ -2527,8 +3119,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Output
             }], reportChanged: [{
                 type: Output
-            }], editDone: [{
-                type: Output
             }], pageChanged: [{
                 type: Output
             }], zoomPan: [{
@@ -2785,7 +3375,7 @@ class ComponentSettingsComponent {
             .replace(/\b\w/g, (character) => character.toUpperCase());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ComponentSettingsComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<form\n    fsForm\n    [submit]=\"save\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      {{ component.title || 'Component' }}\n    </h1>\n    <mat-dialog-content>\n      <mat-tab-group [(selected)]=\"selectedTab\">\n        <mat-tab\n            label=\"Settings\"\n            name=\"settings\">\n          <div class=\"fs-column tab-body\">\n            <mat-form-field>\n              <mat-label>\n                Title\n              </mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"title\"\n                name=\"title\">\n            </mat-form-field>\n            <div class=\"subheading-2\">\n              Padding\n            </div>\n            <div class=\"geometry-row\">\n              <mat-form-field>\n                <mat-label>\n                  Top\n                </mat-label>\n                <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"3\"\n                  [(ngModel)]=\"paddingTop\"\n                  name=\"paddingTop\"\n                  [fsFormMin]=\"0\">\n                <div matTextSuffix>\n                  in\n                </div>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Right\n                </mat-label>\n                <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"3\"\n                  [(ngModel)]=\"paddingRight\"\n                  name=\"paddingRight\"\n                  [fsFormMin]=\"0\">\n                <div matTextSuffix>\n                  in\n                </div>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Bottom\n                </mat-label>\n                <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"3\"\n                  [(ngModel)]=\"paddingBottom\"\n                  name=\"paddingBottom\"\n                  [fsFormMin]=\"0\">\n                <div matTextSuffix>\n                  in\n                </div>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Left\n                </mat-label>\n                <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"3\"\n                  [(ngModel)]=\"paddingLeft\"\n                  name=\"paddingLeft\"\n                  [fsFormMin]=\"0\">\n                <div matTextSuffix>\n                  in\n                </div>\n              </mat-form-field>\n            </div>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Filters\"\n            name=\"filters\">\n          <div class=\"tab-body\">\n            @if (columnsError) {\n              <div class=\"filters-empty error\">\n                {{ columnsError }}\n              </div>\n            } @else if (rows.length) {\n              <!-- Every filterable column. Toggle where its control shows: in\n                   the report bar, on this component, both, or neither. The\n                   interface (date range vs value picker) follows the data. -->\n              <table class=\"filter-table\">\n                <thead>\n                  <tr>\n                    <th class=\"filter-col-name\">\n                      Filter\n                    </th>\n                    <th class=\"filter-col-type\">\n                      Type\n                    </th>\n                    <th class=\"filter-col-toggle\">\n                      Report bar\n                    </th>\n                    <th class=\"filter-col-toggle\">\n                      This component\n                    </th>\n                  </tr>\n                </thead>\n                <tbody>\n                  @for (row of rows; track row.column) {\n                    <tr>\n                      <td class=\"filter-col-name\">\n                        {{ row.label }}\n                      </td>\n                      <td class=\"filter-col-type\">\n                        {{ typeLabel(row.type) }}\n                      </td>\n                      <td class=\"filter-col-toggle\">\n                        <mat-slide-toggle\n                          [ngModel]=\"row.report\"\n                          (ngModelChange)=\"setExposure(row, 'report', $event)\"\n                          [ngModelOptions]=\"{ standalone: true }\"\n                          matTooltip=\"Show in the report bar\">\n                        </mat-slide-toggle>\n                      </td>\n                      <td class=\"filter-col-toggle\">\n                        <mat-slide-toggle\n                          [ngModel]=\"row.component\"\n                          (ngModelChange)=\"setExposure(row, 'component', $event)\"\n                          [ngModelOptions]=\"{ standalone: true }\"\n                          matTooltip=\"Show on this component\">\n                        </mat-slide-toggle>\n                      </td>\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            } @else {\n              <div class=\"filters-empty\">\n                This component has no filterable columns yet \u2014 give it some SQL first.\n              </div>\n            }\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"SQL\"\n            name=\"sql\">\n          <div class=\"tab-body\">\n            @if (sqlError) {\n              <div class=\"filters-empty error\">\n                {{ sqlError }}\n              </div>\n            } @else if (sql) {\n              @if (sqlBaseline) {\n                <!-- A derived component's statement is compiled from its\n                     document with no viewer state, so it is not byte-for-byte\n                     what produced the numbers on screen. Said here rather than\n                     left for the reader to discover. -->\n                <div class=\"filters-empty\">\n                  Compiled from this component's query \u2014 no filters applied, times in UTC.\n                </div>\n              }\n              <pre class=\"code-block\">{{ sql }}</pre>\n            } @else {\n              <div class=\"filters-empty\">\n                This component has no SQL yet.\n              </div>\n            }\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Config\"\n            name=\"config\">\n          <div class=\"tab-body\">\n            <pre class=\"code-block\">\n              {{ configJson }}\n            </pre>\n          </div>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <!-- Save | Delete | Cancel, the standard order. fs-form-dialog-actions\n           renders its own Save/Done BEFORE the projected content, which would\n           put Delete after Cancel, so `[save]=\"false\"` foots the row here and\n           all three buttons are projected in order. Save submits the Settings\n           tab; the other tabs persist as you touch them, so they get Done. -->\n      <fs-form-dialog-actions [save]=\"false\">\n        @if (selectedTab === 'settings') {\n          <button\n              mat-button\n              type=\"submit\"\n              color=\"primary\">\n            Save\n          </button>\n        } @else {\n          <button\n              mat-button\n              type=\"button\"\n              color=\"primary\"\n              [mat-dialog-close]=\"null\">\n            Done\n          </button>\n        }\n        <button\n            mat-button\n            type=\"button\"\n            color=\"warn\"\n            (click)=\"delete()\">\n          Delete\n        </button>\n        <button\n            mat-button\n            type=\"button\"\n            class=\"cancel-button\"\n            [mat-dialog-close]=\"null\">\n          Cancel\n        </button>\n      </fs-form-dialog-actions>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>", styles: ["mat-form-field{width:100%}.tab-body{padding-top:16px}.geometry-row{display:flex;gap:8px}.geometry-row mat-form-field{flex:1}.filter-table{border-spacing:0;width:100%;border-collapse:collapse}.filter-table thead th{color:#8f8f8f;font-weight:400;font-size:85%;text-align:left;padding:8px 16px}.filter-table tbody tr{clip-path:xywh(0 3px 100% calc(100% - 6px) round 10px)}.filter-table tbody td{border:none;background-color:#fafafa;padding:8px 16px;vertical-align:middle;text-align:left}.filter-table .filter-col-name{font-weight:600;color:#1f2933}.filter-table .filter-col-type{color:#7b8794;width:120px}.filter-table .filter-col-toggle,.filter-table th.filter-col-toggle{width:130px;text-align:center}.filters-empty{font-size:13px;color:#7b8794;padding:8px 0 4px}.filters-empty.error{color:#e15759}.code-block{margin:0;padding:10px 12px;background:#1f2933;color:#e4e7eb;border-radius:6px;font-family:JetBrains Mono,Consolas,monospace;font-size:12px;line-height:1.5;white-space:pre-wrap;word-break:break-word;max-height:240px;overflow:auto}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2$2.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { kind: "directive", type: i2$2.FsFormMinDirective, selector: "[fsFormMin]", inputs: ["fsFormMin", "fsFormMinMessage"] }, { kind: "component", type: i2$2.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }, { kind: "directive", type: i2$2.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "directive", type: i2$2.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit"] }, { kind: "ngmodule", type: FsMaskModule }, { kind: "directive", type: i3$1.FsMaskNumberDirective, selector: "[fsMaskNumber]" }, { kind: "ngmodule", type: FsDialogModule }, { kind: "component", type: i3$2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "ngmodule", type: FsLabelModule }, { kind: "ngmodule", type: FsTabsModule }, { kind: "directive", type: i5.FsTabsHeaderTabGroupDirective, selector: "mat-tab-group, matTabGroup, [matTabGroup]", inputs: ["orientation", "selected", "selectedData"], outputs: ["selectedChange", "selectedDataChange"], exportAs: ["fsTabsHeaderTabGroup"] }, { kind: "directive", type: i5.FsTabsTabDirective, selector: "mat-tab,matTab", inputs: ["name", "data"], exportAs: ["fsTabsTab"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i6.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i6.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ComponentSettingsComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<form\n    fsForm\n    [submit]=\"save\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      {{ component.title || 'Component' }}\n    </h1>\n    <mat-dialog-content>\n      <mat-tab-group [(selected)]=\"selectedTab\">\n        <mat-tab\n            label=\"Settings\"\n            name=\"settings\">\n          <div class=\"fs-column tab-body\">\n            <mat-form-field>\n              <mat-label>\n                Title\n              </mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"title\"\n                name=\"title\">\n            </mat-form-field>\n            <div class=\"subheading-2\">\n              Padding\n            </div>\n            <div class=\"geometry-row\">\n              <mat-form-field>\n                <mat-label>\n                  Top\n                </mat-label>\n                <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"3\"\n                  [(ngModel)]=\"paddingTop\"\n                  name=\"paddingTop\"\n                  [fsFormMin]=\"0\">\n                <div matTextSuffix>\n                  in\n                </div>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Right\n                </mat-label>\n                <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"3\"\n                  [(ngModel)]=\"paddingRight\"\n                  name=\"paddingRight\"\n                  [fsFormMin]=\"0\">\n                <div matTextSuffix>\n                  in\n                </div>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Bottom\n                </mat-label>\n                <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"3\"\n                  [(ngModel)]=\"paddingBottom\"\n                  name=\"paddingBottom\"\n                  [fsFormMin]=\"0\">\n                <div matTextSuffix>\n                  in\n                </div>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Left\n                </mat-label>\n                <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"3\"\n                  [(ngModel)]=\"paddingLeft\"\n                  name=\"paddingLeft\"\n                  [fsFormMin]=\"0\">\n                <div matTextSuffix>\n                  in\n                </div>\n              </mat-form-field>\n            </div>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Filters\"\n            name=\"filters\">\n          <div class=\"tab-body\">\n            @if (columnsError) {\n              <div class=\"filters-empty error\">\n                {{ columnsError }}\n              </div>\n            } @else if (rows.length) {\n              <!-- Every filterable column. Toggle where its control shows: in\n                   the report bar, on this component, both, or neither. The\n                   interface (date range vs value picker) follows the data. -->\n              <table class=\"filter-table\">\n                <thead>\n                  <tr>\n                    <th class=\"filter-col-name\">\n                      Filter\n                    </th>\n                    <th class=\"filter-col-type\">\n                      Type\n                    </th>\n                    <th class=\"filter-col-toggle\">\n                      Report bar\n                    </th>\n                    <th class=\"filter-col-toggle\">\n                      This component\n                    </th>\n                  </tr>\n                </thead>\n                <tbody>\n                  @for (row of rows; track row.column) {\n                    <tr>\n                      <td class=\"filter-col-name\">\n                        {{ row.label }}\n                      </td>\n                      <td class=\"filter-col-type\">\n                        {{ typeLabel(row.type) }}\n                      </td>\n                      <td class=\"filter-col-toggle\">\n                        <mat-slide-toggle\n                          [ngModel]=\"row.report\"\n                          (ngModelChange)=\"setExposure(row, 'report', $event)\"\n                          [ngModelOptions]=\"{ standalone: true }\"\n                          matTooltip=\"Show in the report bar\">\n                        </mat-slide-toggle>\n                      </td>\n                      <td class=\"filter-col-toggle\">\n                        <mat-slide-toggle\n                          [ngModel]=\"row.component\"\n                          (ngModelChange)=\"setExposure(row, 'component', $event)\"\n                          [ngModelOptions]=\"{ standalone: true }\"\n                          matTooltip=\"Show on this component\">\n                        </mat-slide-toggle>\n                      </td>\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            } @else {\n              <div class=\"filters-empty\">\n                This component has no filterable columns yet \u2014 give it some SQL first.\n              </div>\n            }\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"SQL\"\n            name=\"sql\">\n          <div class=\"tab-body\">\n            @if (sqlError) {\n              <div class=\"filters-empty error\">\n                {{ sqlError }}\n              </div>\n            } @else if (sql) {\n              @if (sqlBaseline) {\n                <!-- A derived component's statement is compiled from its\n                     document with no viewer state, so it is not byte-for-byte\n                     what produced the numbers on screen. Said here rather than\n                     left for the reader to discover. -->\n                <div class=\"filters-empty\">\n                  Compiled from this component's query \u2014 no filters applied, times in UTC.\n                </div>\n              }\n              <pre class=\"code-block\">{{ sql }}</pre>\n            } @else {\n              <div class=\"filters-empty\">\n                This component has no SQL yet.\n              </div>\n            }\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Config\"\n            name=\"config\">\n          <div class=\"tab-body\">\n            <pre class=\"code-block\">\n              {{ configJson }}\n            </pre>\n          </div>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <!-- Save | Delete | Cancel, the standard order. fs-form-dialog-actions\n           renders its own Save/Done BEFORE the projected content, which would\n           put Delete after Cancel, so `[save]=\"false\"` foots the row here and\n           all three buttons are projected in order. Save submits the Settings\n           tab; the other tabs persist as you touch them, so they get Done. -->\n      <fs-form-dialog-actions [save]=\"false\">\n        @if (selectedTab === 'settings') {\n          <button\n              mat-button\n              type=\"submit\"\n              color=\"primary\">\n            Save\n          </button>\n        } @else {\n          <button\n              mat-button\n              type=\"button\"\n              color=\"primary\"\n              [mat-dialog-close]=\"null\">\n            Done\n          </button>\n        }\n        <button\n            mat-button\n            type=\"button\"\n            color=\"warn\"\n            (click)=\"delete()\">\n          Delete\n        </button>\n        <button\n            mat-button\n            type=\"button\"\n            class=\"cancel-button\"\n            [mat-dialog-close]=\"null\">\n          Cancel\n        </button>\n      </fs-form-dialog-actions>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>", styles: ["mat-form-field{width:100%}.tab-body{padding-top:16px}.geometry-row{display:flex;gap:8px}.geometry-row mat-form-field{flex:1}.filter-table{border-spacing:0;width:100%;border-collapse:collapse}.filter-table thead th{color:#8f8f8f;font-weight:400;font-size:85%;text-align:left;padding:8px 16px}.filter-table tbody tr{clip-path:xywh(0 3px 100% calc(100% - 6px) round 10px)}.filter-table tbody td{border:none;background-color:#fafafa;padding:8px 16px;vertical-align:middle;text-align:left}.filter-table .filter-col-name{font-weight:600;color:#1f2933}.filter-table .filter-col-type{color:#7b8794;width:120px}.filter-table .filter-col-toggle,.filter-table th.filter-col-toggle{width:130px;text-align:center}.filters-empty{font-size:13px;color:#7b8794;padding:8px 0 4px}.filters-empty.error{color:#e15759}.code-block{margin:0;padding:10px 12px;background:#1f2933;color:#e4e7eb;border-radius:6px;font-family:JetBrains Mono,Consolas,monospace;font-size:12px;line-height:1.5;white-space:pre-wrap;word-break:break-word;max-height:240px;overflow:auto}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2$2.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { kind: "directive", type: i2$2.FsFormMinDirective, selector: "[fsFormMin]", inputs: ["fsFormMin", "fsFormMinMessage"] }, { kind: "component", type: i2$2.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }, { kind: "directive", type: i2$2.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "directive", type: i2$2.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit"] }, { kind: "ngmodule", type: FsMaskModule }, { kind: "directive", type: i3$1.FsMaskNumberDirective, selector: "[fsMaskNumber]" }, { kind: "ngmodule", type: FsDialogModule }, { kind: "component", type: i3$2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "ngmodule", type: FsLabelModule }, { kind: "ngmodule", type: FsTabsModule }, { kind: "directive", type: i5.FsTabsHeaderTabGroupDirective, selector: "mat-tab-group, matTabGroup, [matTabGroup]", inputs: ["orientation", "selected", "selectedData"], outputs: ["selectedChange", "selectedDataChange"], exportAs: ["fsTabsHeaderTabGroup"] }, { kind: "directive", type: i5.FsTabsTabDirective, selector: "mat-tab,matTab", inputs: ["name", "data"], exportAs: ["fsTabsTab"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i6.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i6.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentSettingsComponent, decorators: [{
             type: Component,
@@ -2847,7 +3437,7 @@ class TimezoneSelectComponent {
             : [this._browserTimezone];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimezoneSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TimezoneSelectComponent, isStandalone: true, selector: "fs-ai-report-timezone-select", inputs: { placeholder: "placeholder", required: "required", disabled: "disabled", timezone: "timezone" }, outputs: { timezoneChange: "timezoneChange" }, ngImport: i0, template: "<mat-form-field class=\"full-width\">\n  <mat-label>{{placeholder}}</mat-label>\n  <mat-select\n    [(ngModel)]=\"timezone\"\n    [fsFormRequired]=\"required\"\n    [disabled]=\"disabled\"\n    name=\"timezone_select_{{ guid }}\">\n    @for (item of timezones; track item) {\n      <mat-option [value]=\"item\">{{ item }}</mat-option>\n    }\n  </mat-select>\n</mat-form-field>\n", styles: [".full-width{width:100%}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2$2.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TimezoneSelectComponent, isStandalone: true, selector: "fs-ai-report-timezone-select", inputs: { placeholder: "placeholder", required: "required", disabled: "disabled", timezone: "timezone" }, outputs: { timezoneChange: "timezoneChange" }, ngImport: i0, template: "<mat-form-field class=\"full-width\">\n  <mat-label>{{placeholder}}</mat-label>\n  <mat-select\n    [(ngModel)]=\"timezone\"\n    [fsFormRequired]=\"required\"\n    [disabled]=\"disabled\"\n    name=\"timezone_select_{{ guid }}\">\n    @for (item of timezones; track item) {\n      <mat-option [value]=\"item\">{{ item }}</mat-option>\n    }\n  </mat-select>\n</mat-form-field>\n", styles: [".full-width{width:100%}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2$2.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimezoneSelectComponent, decorators: [{
             type: Component,
@@ -2893,7 +3483,8 @@ function dateToBound(value) {
 }
 
 // Report settings, in three tabs:
-//   Settings — name + page setup (size in inches, layout mode).
+//   Settings — name + page setup (size in inches, header/footer band depths,
+//   layout mode).
 //   Styles   — the report's typographic styles (sizes in POINTS, 1:1 with
 //   PDF/PowerPoint); the Heading size to start.
 //   Filters  — the report-level filters and their DEFAULT values. A default
@@ -2915,6 +3506,11 @@ class ReportSettingsComponent {
     pageHeight;
     pageDimensionMin = PAGE_DIMENSION_MIN;
     pageDimensionMax = PAGE_DIMENSION_MAX;
+    // The header and footer band depths, inches — typed like the page size
+    // because fsMaskNumber hands back a string.
+    headerHeight = 0;
+    footerHeight = 0;
+    headerFooterMax = HEADER_FOOTER_MAX;
     layout = 'freeform';
     // Empty until the report has one; app-timezone-select then defaults it to the
     // viewer's browser zone (which Save persists, making the report's zone explicit).
@@ -2933,6 +3529,8 @@ class ReportSettingsComponent {
         this.name = report.name;
         this.pageWidth = report.pageWidth;
         this.pageHeight = report.pageHeight;
+        this.headerHeight = report.config?.headerFooter?.headerHeight ?? 0;
+        this.footerHeight = report.config?.headerFooter?.footerHeight ?? 0;
         this.layout = report.layout ?? 'freeform';
         this.timezone = report.timezone ?? '';
         this.headingSize = report.config?.styles?.heading?.size ?? DEFAULT_HEADING_SIZE;
@@ -2964,6 +3562,10 @@ class ReportSettingsComponent {
             layout: this.layout,
             timezone: this.timezone,
             styles: { heading: { size: this.headingSize } },
+            headerFooter: {
+                headerHeight: this._pageDimension(this.headerHeight) || 0,
+                footerHeight: this._pageDimension(this.footerHeight) || 0,
+            },
         });
         const defaults$ = this.filterRows()
             .filter((row) => this._defaultChanged(row))
@@ -3079,7 +3681,7 @@ class ReportSettingsComponent {
         return Object.keys(normalized).length ? normalized : null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ReportSettingsComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<form\n    fsForm\n    [submit]=\"save\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      Report Settings\n    </h1>\n    <mat-dialog-content>\n      <mat-tab-group [(selected)]=\"selectedTab\">\n        <mat-tab\n            label=\"Settings\"\n            name=\"settings\">\n          <div class=\"fs-column tab-body\">\n            <mat-form-field>\n              <mat-label>\n                Name\n              </mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"name\"\n                name=\"name\"\n                [fsFormRequired]=\"true\">\n            </mat-form-field>\n            <!--\n              The page, typed in inches. Orientation is not asked for because it\n              is not an independent choice - a page wider than it is tall IS\n              landscape - so the two numbers say everything there is to say.\n            -->\n            <div class=\"fs-row.gap-sm.align-start\">\n              <mat-form-field class=\"fs-flex\">\n                <mat-label>\n                  Width\n                </mat-label>\n                <input\n                    matInput\n                    fsMaskNumber\n                    [scale]=\"1\"\n                    [(ngModel)]=\"pageWidth\"\n                    name=\"pageWidth\"\n                    [fsFormRequired]=\"true\"\n                    [fsFormMin]=\"pageDimensionMin\"\n                    [fsFormMax]=\"pageDimensionMax\">\n                <div matTextSuffix>\n                  inches\n                </div>\n              </mat-form-field>\n              <mat-form-field class=\"fs-flex\">\n                <mat-label>\n                  Height\n                </mat-label>\n                <input\n                    matInput\n                    fsMaskNumber\n                    [scale]=\"1\"\n                    [(ngModel)]=\"pageHeight\"\n                    name=\"pageHeight\"\n                    [fsFormRequired]=\"true\"\n                    [fsFormMin]=\"pageDimensionMin\"\n                    [fsFormMax]=\"pageDimensionMax\">\n                <div matTextSuffix>\n                  inches\n                </div>\n              </mat-form-field>\n            </div>\n            <mat-form-field>\n              <mat-label>\n                Layout\n              </mat-label>\n              <mat-select\n                  [(ngModel)]=\"layout\"\n                  name=\"layout\">\n                <mat-option value=\"freeform\">\n                  Freeform \u2014 position components anywhere on the page\n                </mat-option>\n                <mat-option value=\"flow\">\n                  Flow \u2014 components flow into rows by width %\n                </mat-option>\n              </mat-select>\n              <mat-hint>\n                Freeform is like PowerPoint; Flow is like a responsive dashboard.\n              </mat-hint>\n            </mat-form-field>\n            <fs-ai-report-timezone-select [(timezone)]=\"timezone\"></fs-ai-report-timezone-select>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Styles\"\n            name=\"styles\">\n          <div class=\"fs-column tab-body\">\n            <mat-form-field>\n              <mat-label>\n                Heading Size\n              </mat-label>\n              <input\n                matInput\n                type=\"number\"\n                step=\"1\"\n                min=\"6\"\n                max=\"96\"\n                [(ngModel)]=\"headingSize\"\n                name=\"headingSize\"\n                [fsFormMin]=\"6\"\n                [fsFormMax]=\"96\">\n              <span matTextSuffix>\n                pt\n              </span>\n              <mat-hint>\n                Applies to component titles. Points map 1:1 to PDF and PowerPoint.\n              </mat-hint>\n            </mat-form-field>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Filters\"\n            name=\"filters\">\n          <div class=\"fs-column tab-body\">\n            @if (filterRows().length) {\n              @for (row of filterRows(); track row.group.id) {\n                @switch (row.group.type) {\n                  @case ('dateRange') {\n                    <div class=\"fs-row.gap-sm.align-center fs-flex\">\n                      <mat-form-field class=\"fs-flex\">\n                        <mat-label>\n                          Default From {{ row.label }}\n                        </mat-label>\n                        <input\n                          matInput\n                          fsDatePicker\n                          [(ngModel)]=\"row.start\"\n                          [name]=\"'start' + row.group.id\">\n                      </mat-form-field>\n                      <mat-form-field class=\"fs-flex\">\n                        <mat-label>\n                          Default To {{ row.label }}\n                        </mat-label>\n                        <input\n                          matInput\n                          fsDatePicker\n                          [(ngModel)]=\"row.end\"\n                          [name]=\"'end' + row.group.id\">\n                      </mat-form-field>\n                    </div>\n                  }\n                  @case ('select') {\n                    <fs-autocomplete-chips\n                        class=\"fs-flex\"\n                        [label]=\"'Default ' + row.label\"\n                        [fetch]=\"row.fetch\"\n                        [(ngModel)]=\"row.values\"\n                        [name]=\"'values' + row.group.id\"\n                        [multiple]=\"true\"\n                        [fetchOnFocus]=\"true\">\n                      <ng-template\n                          fsAutocompleteChipsTemplate\n                          let-object=\"object\">\n                        {{ object.name }}\n                      </ng-template>\n                    </fs-autocomplete-chips>\n                  }\n                  @default {\n                    <mat-form-field class=\"fs-flex\">\n                      <mat-label>\n                        Default {{ row.label }}\n                      </mat-label>\n                      <input\n                        matInput\n                        [(ngModel)]=\"row.value\"\n                        [name]=\"'value' + row.group.id\">\n                    </mat-form-field>\n                  }\n                }\n              }\n            } @else {\n              <fs-message-info>\n                This report has no report-level filters yet. Add a filter to a\n                component (its settings \u2192 Filters) and show it in the report bar,\n                then set its default here.\n              </fs-message-info>\n            }\n          </div>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <fs-form-dialog-actions>\n        <button\n            type=\"button\"\n            mat-button\n            color=\"warn\"\n            (click)=\"delete()\">\n          Delete\n        </button>\n      </fs-form-dialog-actions>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>", styles: ["mat-form-field{width:100%}.tab-body{padding-top:16px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2$2.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { kind: "directive", type: i2$2.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { kind: "directive", type: i2$2.FsFormMinDirective, selector: "[fsFormMin]", inputs: ["fsFormMin", "fsFormMinMessage"] }, { kind: "directive", type: i2$2.FsFormMaxDirective, selector: "[fsFormMax]", inputs: ["fsFormMax", "fsFormMaxMessage"] }, { kind: "component", type: i2$2.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }, { kind: "directive", type: i2$2.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "directive", type: i2$2.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit"] }, { kind: "ngmodule", type: FsMaskModule }, { kind: "directive", type: i3$1.FsMaskNumberDirective, selector: "[fsMaskNumber]" }, { kind: "ngmodule", type: FsDialogModule }, { kind: "component", type: i3$2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "ngmodule", type: FsMessageModule }, { kind: "component", type: i5$1.FsMessageInfoComponent, selector: "fs-message-info" }, { kind: "ngmodule", type: FsTabsModule }, { kind: "directive", type: i5.FsTabsHeaderTabGroupDirective, selector: "mat-tab-group, matTabGroup, [matTabGroup]", inputs: ["orientation", "selected", "selectedData"], outputs: ["selectedChange", "selectedDataChange"], exportAs: ["fsTabsHeaderTabGroup"] }, { kind: "directive", type: i5.FsTabsTabDirective, selector: "mat-tab,matTab", inputs: ["name", "data"], exportAs: ["fsTabsTab"] }, { kind: "ngmodule", type: FsDatePickerModule }, { kind: "component", type: i7.FsDatePickerComponent, selector: "[fsDatePicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "startOfDay", "view", "format", "minutes", "width"], outputs: ["change"] }, { kind: "ngmodule", type: FsAutocompleteChipsModule }, { kind: "component", type: i2$3.FsAutocompleteChipsComponent, selector: "fs-autocomplete-chips", inputs: ["fetch", "appearance", "floatLabel", "readonly", "size", "label", "placeholder", "chipImage", "chipBackground", "chipColor", "chipIcon", "chipIconColor", "chipClass", "chipPadding", "shape", "hint", "allowText", "allowObject", "delay", "minPanelWidth", "maxPanelHeight", "validateText", "removable", "allowClear", "color", "background", "orderable", "padless", "initOnClick", "fetchOnFocus", "multiple", "multipleAdd", "confirm", "disabled", "groupBy", "panelWidth", "panelClass", "compareWith"], outputs: ["selected", "removed", "reordered", "clear", "panelOpened", "panelClosed"] }, { kind: "directive", type: i2$3.FsAutocompleteObjectDirective, selector: "[fsAutocompleteObject],[fsAutocompleteChipsTemplate]" }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i6.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i6.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: TimezoneSelectComponent, selector: "fs-ai-report-timezone-select", inputs: ["placeholder", "required", "disabled", "timezone"], outputs: ["timezoneChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ReportSettingsComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<form\n    fsForm\n    [submit]=\"save\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      Report Settings\n    </h1>\n    <mat-dialog-content>\n      <mat-tab-group [(selected)]=\"selectedTab\">\n        <mat-tab\n            label=\"Settings\"\n            name=\"settings\">\n          <div class=\"fs-column tab-body\">\n            <mat-form-field>\n              <mat-label>\n                Name\n              </mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"name\"\n                name=\"name\"\n                [fsFormRequired]=\"true\">\n            </mat-form-field>\n            <!--\n              The page, typed in inches. Orientation is not asked for because it\n              is not an independent choice - a page wider than it is tall IS\n              landscape - so the two numbers say everything there is to say.\n            -->\n            <div class=\"fs-row.gap-sm.align-start\">\n              <mat-form-field class=\"fs-flex\">\n                <mat-label>\n                  Width\n                </mat-label>\n                <input\n                    matInput\n                    fsMaskNumber\n                    [scale]=\"1\"\n                    [(ngModel)]=\"pageWidth\"\n                    name=\"pageWidth\"\n                    [fsFormRequired]=\"true\"\n                    [fsFormMin]=\"pageDimensionMin\"\n                    [fsFormMax]=\"pageDimensionMax\">\n                <div matTextSuffix>\n                  inches\n                </div>\n              </mat-form-field>\n              <mat-form-field class=\"fs-flex\">\n                <mat-label>\n                  Height\n                </mat-label>\n                <input\n                    matInput\n                    fsMaskNumber\n                    [scale]=\"1\"\n                    [(ngModel)]=\"pageHeight\"\n                    name=\"pageHeight\"\n                    [fsFormRequired]=\"true\"\n                    [fsFormMin]=\"pageDimensionMin\"\n                    [fsFormMax]=\"pageDimensionMax\">\n                <div matTextSuffix>\n                  inches\n                </div>\n              </mat-form-field>\n            </div>\n            <!--\n              How deep the header and footer bands are. Their content is edited\n              on the canvas (Edit layout \u2192 Header & footer); these reserve the\n              space for it, and 0 means no band.\n            -->\n            <mat-form-field class=\"full-width\">\n              <mat-label>\n                Header height\n              </mat-label>\n              <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"2\"\n                  [(ngModel)]=\"headerHeight\"\n                  name=\"headerHeight\"\n                  [fsFormMin]=\"0\"\n                  [fsFormMax]=\"headerFooterMax\">\n              <div matTextSuffix>\n                inches\n              </div>\n            </mat-form-field>\n            <mat-form-field class=\"full-width\">\n              <mat-label>\n                Footer height\n              </mat-label>\n              <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"2\"\n                  [(ngModel)]=\"footerHeight\"\n                  name=\"footerHeight\"\n                  [fsFormMin]=\"0\"\n                  [fsFormMax]=\"headerFooterMax\">\n              <div matTextSuffix>\n                inches\n              </div>\n            </mat-form-field>\n            <mat-form-field>\n              <mat-label>\n                Layout\n              </mat-label>\n              <mat-select\n                  [(ngModel)]=\"layout\"\n                  name=\"layout\">\n                <mat-option value=\"freeform\">\n                  Freeform \u2014 position components anywhere on the page\n                </mat-option>\n                <mat-option value=\"flow\">\n                  Flow \u2014 components flow into rows by width %\n                </mat-option>\n              </mat-select>\n              <mat-hint>\n                Freeform is like PowerPoint; Flow is like a responsive dashboard.\n              </mat-hint>\n            </mat-form-field>\n            <fs-ai-report-timezone-select [(timezone)]=\"timezone\"></fs-ai-report-timezone-select>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Styles\"\n            name=\"styles\">\n          <div class=\"fs-column tab-body\">\n            <mat-form-field>\n              <mat-label>\n                Heading Size\n              </mat-label>\n              <input\n                matInput\n                type=\"number\"\n                step=\"1\"\n                min=\"6\"\n                max=\"96\"\n                [(ngModel)]=\"headingSize\"\n                name=\"headingSize\"\n                [fsFormMin]=\"6\"\n                [fsFormMax]=\"96\">\n              <span matTextSuffix>\n                pt\n              </span>\n              <mat-hint>\n                Applies to component titles. Points map 1:1 to PDF and PowerPoint.\n              </mat-hint>\n            </mat-form-field>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Filters\"\n            name=\"filters\">\n          <div class=\"fs-column tab-body\">\n            @if (filterRows().length) {\n              @for (row of filterRows(); track row.group.id) {\n                @switch (row.group.type) {\n                  @case ('dateRange') {\n                    <div class=\"fs-row.gap-sm.align-center fs-flex\">\n                      <mat-form-field class=\"fs-flex\">\n                        <mat-label>\n                          Default From {{ row.label }}\n                        </mat-label>\n                        <input\n                          matInput\n                          fsDatePicker\n                          [(ngModel)]=\"row.start\"\n                          [name]=\"'start' + row.group.id\">\n                      </mat-form-field>\n                      <mat-form-field class=\"fs-flex\">\n                        <mat-label>\n                          Default To {{ row.label }}\n                        </mat-label>\n                        <input\n                          matInput\n                          fsDatePicker\n                          [(ngModel)]=\"row.end\"\n                          [name]=\"'end' + row.group.id\">\n                      </mat-form-field>\n                    </div>\n                  }\n                  @case ('select') {\n                    <fs-autocomplete-chips\n                        class=\"fs-flex\"\n                        [label]=\"'Default ' + row.label\"\n                        [fetch]=\"row.fetch\"\n                        [(ngModel)]=\"row.values\"\n                        [name]=\"'values' + row.group.id\"\n                        [multiple]=\"true\"\n                        [fetchOnFocus]=\"true\">\n                      <ng-template\n                          fsAutocompleteChipsTemplate\n                          let-object=\"object\">\n                        {{ object.name }}\n                      </ng-template>\n                    </fs-autocomplete-chips>\n                  }\n                  @default {\n                    <mat-form-field class=\"fs-flex\">\n                      <mat-label>\n                        Default {{ row.label }}\n                      </mat-label>\n                      <input\n                        matInput\n                        [(ngModel)]=\"row.value\"\n                        [name]=\"'value' + row.group.id\">\n                    </mat-form-field>\n                  }\n                }\n              }\n            } @else {\n              <fs-message-info>\n                This report has no report-level filters yet. Add a filter to a\n                component (its settings \u2192 Filters) and show it in the report bar,\n                then set its default here.\n              </fs-message-info>\n            }\n          </div>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <fs-form-dialog-actions>\n        <button\n            type=\"button\"\n            mat-button\n            color=\"warn\"\n            (click)=\"delete()\">\n          Delete\n        </button>\n      </fs-form-dialog-actions>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>", styles: ["mat-form-field{width:100%}.tab-body{padding-top:16px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2$2.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { kind: "directive", type: i2$2.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { kind: "directive", type: i2$2.FsFormMinDirective, selector: "[fsFormMin]", inputs: ["fsFormMin", "fsFormMinMessage"] }, { kind: "directive", type: i2$2.FsFormMaxDirective, selector: "[fsFormMax]", inputs: ["fsFormMax", "fsFormMaxMessage"] }, { kind: "component", type: i2$2.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }, { kind: "directive", type: i2$2.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "directive", type: i2$2.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit"] }, { kind: "ngmodule", type: FsMaskModule }, { kind: "directive", type: i3$1.FsMaskNumberDirective, selector: "[fsMaskNumber]" }, { kind: "ngmodule", type: FsDialogModule }, { kind: "component", type: i3$2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "ngmodule", type: FsMessageModule }, { kind: "component", type: i5$1.FsMessageInfoComponent, selector: "fs-message-info" }, { kind: "ngmodule", type: FsTabsModule }, { kind: "directive", type: i5.FsTabsHeaderTabGroupDirective, selector: "mat-tab-group, matTabGroup, [matTabGroup]", inputs: ["orientation", "selected", "selectedData"], outputs: ["selectedChange", "selectedDataChange"], exportAs: ["fsTabsHeaderTabGroup"] }, { kind: "directive", type: i5.FsTabsTabDirective, selector: "mat-tab,matTab", inputs: ["name", "data"], exportAs: ["fsTabsTab"] }, { kind: "ngmodule", type: FsDatePickerModule }, { kind: "component", type: i7.FsDatePickerComponent, selector: "[fsDatePicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "startOfDay", "view", "format", "minutes", "width"], outputs: ["change"] }, { kind: "ngmodule", type: FsAutocompleteChipsModule }, { kind: "component", type: i2$3.FsAutocompleteChipsComponent, selector: "fs-autocomplete-chips", inputs: ["fetch", "appearance", "floatLabel", "readonly", "size", "label", "placeholder", "chipImage", "chipBackground", "chipColor", "chipIcon", "chipIconColor", "chipClass", "chipPadding", "shape", "hint", "allowText", "allowObject", "delay", "minPanelWidth", "maxPanelHeight", "validateText", "removable", "allowClear", "color", "background", "orderable", "padless", "initOnClick", "fetchOnFocus", "multiple", "multipleAdd", "confirm", "disabled", "groupBy", "panelWidth", "panelClass", "compareWith"], outputs: ["selected", "removed", "reordered", "clear", "panelOpened", "panelClosed"] }, { kind: "directive", type: i2$3.FsAutocompleteObjectDirective, selector: "[fsAutocompleteObject],[fsAutocompleteChipsTemplate]" }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i6.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i6.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: TimezoneSelectComponent, selector: "fs-ai-report-timezone-select", inputs: ["placeholder", "required", "disabled", "timezone"], outputs: ["timezoneChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportSettingsComponent, decorators: [{
             type: Component,
@@ -3105,7 +3707,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         MatSelect,
                         MatOption$1,
                         TimezoneSelectComponent,
-                    ], template: "<form\n    fsForm\n    [submit]=\"save\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      Report Settings\n    </h1>\n    <mat-dialog-content>\n      <mat-tab-group [(selected)]=\"selectedTab\">\n        <mat-tab\n            label=\"Settings\"\n            name=\"settings\">\n          <div class=\"fs-column tab-body\">\n            <mat-form-field>\n              <mat-label>\n                Name\n              </mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"name\"\n                name=\"name\"\n                [fsFormRequired]=\"true\">\n            </mat-form-field>\n            <!--\n              The page, typed in inches. Orientation is not asked for because it\n              is not an independent choice - a page wider than it is tall IS\n              landscape - so the two numbers say everything there is to say.\n            -->\n            <div class=\"fs-row.gap-sm.align-start\">\n              <mat-form-field class=\"fs-flex\">\n                <mat-label>\n                  Width\n                </mat-label>\n                <input\n                    matInput\n                    fsMaskNumber\n                    [scale]=\"1\"\n                    [(ngModel)]=\"pageWidth\"\n                    name=\"pageWidth\"\n                    [fsFormRequired]=\"true\"\n                    [fsFormMin]=\"pageDimensionMin\"\n                    [fsFormMax]=\"pageDimensionMax\">\n                <div matTextSuffix>\n                  inches\n                </div>\n              </mat-form-field>\n              <mat-form-field class=\"fs-flex\">\n                <mat-label>\n                  Height\n                </mat-label>\n                <input\n                    matInput\n                    fsMaskNumber\n                    [scale]=\"1\"\n                    [(ngModel)]=\"pageHeight\"\n                    name=\"pageHeight\"\n                    [fsFormRequired]=\"true\"\n                    [fsFormMin]=\"pageDimensionMin\"\n                    [fsFormMax]=\"pageDimensionMax\">\n                <div matTextSuffix>\n                  inches\n                </div>\n              </mat-form-field>\n            </div>\n            <mat-form-field>\n              <mat-label>\n                Layout\n              </mat-label>\n              <mat-select\n                  [(ngModel)]=\"layout\"\n                  name=\"layout\">\n                <mat-option value=\"freeform\">\n                  Freeform \u2014 position components anywhere on the page\n                </mat-option>\n                <mat-option value=\"flow\">\n                  Flow \u2014 components flow into rows by width %\n                </mat-option>\n              </mat-select>\n              <mat-hint>\n                Freeform is like PowerPoint; Flow is like a responsive dashboard.\n              </mat-hint>\n            </mat-form-field>\n            <fs-ai-report-timezone-select [(timezone)]=\"timezone\"></fs-ai-report-timezone-select>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Styles\"\n            name=\"styles\">\n          <div class=\"fs-column tab-body\">\n            <mat-form-field>\n              <mat-label>\n                Heading Size\n              </mat-label>\n              <input\n                matInput\n                type=\"number\"\n                step=\"1\"\n                min=\"6\"\n                max=\"96\"\n                [(ngModel)]=\"headingSize\"\n                name=\"headingSize\"\n                [fsFormMin]=\"6\"\n                [fsFormMax]=\"96\">\n              <span matTextSuffix>\n                pt\n              </span>\n              <mat-hint>\n                Applies to component titles. Points map 1:1 to PDF and PowerPoint.\n              </mat-hint>\n            </mat-form-field>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Filters\"\n            name=\"filters\">\n          <div class=\"fs-column tab-body\">\n            @if (filterRows().length) {\n              @for (row of filterRows(); track row.group.id) {\n                @switch (row.group.type) {\n                  @case ('dateRange') {\n                    <div class=\"fs-row.gap-sm.align-center fs-flex\">\n                      <mat-form-field class=\"fs-flex\">\n                        <mat-label>\n                          Default From {{ row.label }}\n                        </mat-label>\n                        <input\n                          matInput\n                          fsDatePicker\n                          [(ngModel)]=\"row.start\"\n                          [name]=\"'start' + row.group.id\">\n                      </mat-form-field>\n                      <mat-form-field class=\"fs-flex\">\n                        <mat-label>\n                          Default To {{ row.label }}\n                        </mat-label>\n                        <input\n                          matInput\n                          fsDatePicker\n                          [(ngModel)]=\"row.end\"\n                          [name]=\"'end' + row.group.id\">\n                      </mat-form-field>\n                    </div>\n                  }\n                  @case ('select') {\n                    <fs-autocomplete-chips\n                        class=\"fs-flex\"\n                        [label]=\"'Default ' + row.label\"\n                        [fetch]=\"row.fetch\"\n                        [(ngModel)]=\"row.values\"\n                        [name]=\"'values' + row.group.id\"\n                        [multiple]=\"true\"\n                        [fetchOnFocus]=\"true\">\n                      <ng-template\n                          fsAutocompleteChipsTemplate\n                          let-object=\"object\">\n                        {{ object.name }}\n                      </ng-template>\n                    </fs-autocomplete-chips>\n                  }\n                  @default {\n                    <mat-form-field class=\"fs-flex\">\n                      <mat-label>\n                        Default {{ row.label }}\n                      </mat-label>\n                      <input\n                        matInput\n                        [(ngModel)]=\"row.value\"\n                        [name]=\"'value' + row.group.id\">\n                    </mat-form-field>\n                  }\n                }\n              }\n            } @else {\n              <fs-message-info>\n                This report has no report-level filters yet. Add a filter to a\n                component (its settings \u2192 Filters) and show it in the report bar,\n                then set its default here.\n              </fs-message-info>\n            }\n          </div>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <fs-form-dialog-actions>\n        <button\n            type=\"button\"\n            mat-button\n            color=\"warn\"\n            (click)=\"delete()\">\n          Delete\n        </button>\n      </fs-form-dialog-actions>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>", styles: ["mat-form-field{width:100%}.tab-body{padding-top:16px}\n"] }]
+                    ], template: "<form\n    fsForm\n    [submit]=\"save\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      Report Settings\n    </h1>\n    <mat-dialog-content>\n      <mat-tab-group [(selected)]=\"selectedTab\">\n        <mat-tab\n            label=\"Settings\"\n            name=\"settings\">\n          <div class=\"fs-column tab-body\">\n            <mat-form-field>\n              <mat-label>\n                Name\n              </mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"name\"\n                name=\"name\"\n                [fsFormRequired]=\"true\">\n            </mat-form-field>\n            <!--\n              The page, typed in inches. Orientation is not asked for because it\n              is not an independent choice - a page wider than it is tall IS\n              landscape - so the two numbers say everything there is to say.\n            -->\n            <div class=\"fs-row.gap-sm.align-start\">\n              <mat-form-field class=\"fs-flex\">\n                <mat-label>\n                  Width\n                </mat-label>\n                <input\n                    matInput\n                    fsMaskNumber\n                    [scale]=\"1\"\n                    [(ngModel)]=\"pageWidth\"\n                    name=\"pageWidth\"\n                    [fsFormRequired]=\"true\"\n                    [fsFormMin]=\"pageDimensionMin\"\n                    [fsFormMax]=\"pageDimensionMax\">\n                <div matTextSuffix>\n                  inches\n                </div>\n              </mat-form-field>\n              <mat-form-field class=\"fs-flex\">\n                <mat-label>\n                  Height\n                </mat-label>\n                <input\n                    matInput\n                    fsMaskNumber\n                    [scale]=\"1\"\n                    [(ngModel)]=\"pageHeight\"\n                    name=\"pageHeight\"\n                    [fsFormRequired]=\"true\"\n                    [fsFormMin]=\"pageDimensionMin\"\n                    [fsFormMax]=\"pageDimensionMax\">\n                <div matTextSuffix>\n                  inches\n                </div>\n              </mat-form-field>\n            </div>\n            <!--\n              How deep the header and footer bands are. Their content is edited\n              on the canvas (Edit layout \u2192 Header & footer); these reserve the\n              space for it, and 0 means no band.\n            -->\n            <mat-form-field class=\"full-width\">\n              <mat-label>\n                Header height\n              </mat-label>\n              <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"2\"\n                  [(ngModel)]=\"headerHeight\"\n                  name=\"headerHeight\"\n                  [fsFormMin]=\"0\"\n                  [fsFormMax]=\"headerFooterMax\">\n              <div matTextSuffix>\n                inches\n              </div>\n            </mat-form-field>\n            <mat-form-field class=\"full-width\">\n              <mat-label>\n                Footer height\n              </mat-label>\n              <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"2\"\n                  [(ngModel)]=\"footerHeight\"\n                  name=\"footerHeight\"\n                  [fsFormMin]=\"0\"\n                  [fsFormMax]=\"headerFooterMax\">\n              <div matTextSuffix>\n                inches\n              </div>\n            </mat-form-field>\n            <mat-form-field>\n              <mat-label>\n                Layout\n              </mat-label>\n              <mat-select\n                  [(ngModel)]=\"layout\"\n                  name=\"layout\">\n                <mat-option value=\"freeform\">\n                  Freeform \u2014 position components anywhere on the page\n                </mat-option>\n                <mat-option value=\"flow\">\n                  Flow \u2014 components flow into rows by width %\n                </mat-option>\n              </mat-select>\n              <mat-hint>\n                Freeform is like PowerPoint; Flow is like a responsive dashboard.\n              </mat-hint>\n            </mat-form-field>\n            <fs-ai-report-timezone-select [(timezone)]=\"timezone\"></fs-ai-report-timezone-select>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Styles\"\n            name=\"styles\">\n          <div class=\"fs-column tab-body\">\n            <mat-form-field>\n              <mat-label>\n                Heading Size\n              </mat-label>\n              <input\n                matInput\n                type=\"number\"\n                step=\"1\"\n                min=\"6\"\n                max=\"96\"\n                [(ngModel)]=\"headingSize\"\n                name=\"headingSize\"\n                [fsFormMin]=\"6\"\n                [fsFormMax]=\"96\">\n              <span matTextSuffix>\n                pt\n              </span>\n              <mat-hint>\n                Applies to component titles. Points map 1:1 to PDF and PowerPoint.\n              </mat-hint>\n            </mat-form-field>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Filters\"\n            name=\"filters\">\n          <div class=\"fs-column tab-body\">\n            @if (filterRows().length) {\n              @for (row of filterRows(); track row.group.id) {\n                @switch (row.group.type) {\n                  @case ('dateRange') {\n                    <div class=\"fs-row.gap-sm.align-center fs-flex\">\n                      <mat-form-field class=\"fs-flex\">\n                        <mat-label>\n                          Default From {{ row.label }}\n                        </mat-label>\n                        <input\n                          matInput\n                          fsDatePicker\n                          [(ngModel)]=\"row.start\"\n                          [name]=\"'start' + row.group.id\">\n                      </mat-form-field>\n                      <mat-form-field class=\"fs-flex\">\n                        <mat-label>\n                          Default To {{ row.label }}\n                        </mat-label>\n                        <input\n                          matInput\n                          fsDatePicker\n                          [(ngModel)]=\"row.end\"\n                          [name]=\"'end' + row.group.id\">\n                      </mat-form-field>\n                    </div>\n                  }\n                  @case ('select') {\n                    <fs-autocomplete-chips\n                        class=\"fs-flex\"\n                        [label]=\"'Default ' + row.label\"\n                        [fetch]=\"row.fetch\"\n                        [(ngModel)]=\"row.values\"\n                        [name]=\"'values' + row.group.id\"\n                        [multiple]=\"true\"\n                        [fetchOnFocus]=\"true\">\n                      <ng-template\n                          fsAutocompleteChipsTemplate\n                          let-object=\"object\">\n                        {{ object.name }}\n                      </ng-template>\n                    </fs-autocomplete-chips>\n                  }\n                  @default {\n                    <mat-form-field class=\"fs-flex\">\n                      <mat-label>\n                        Default {{ row.label }}\n                      </mat-label>\n                      <input\n                        matInput\n                        [(ngModel)]=\"row.value\"\n                        [name]=\"'value' + row.group.id\">\n                    </mat-form-field>\n                  }\n                }\n              }\n            } @else {\n              <fs-message-info>\n                This report has no report-level filters yet. Add a filter to a\n                component (its settings \u2192 Filters) and show it in the report bar,\n                then set its default here.\n              </fs-message-info>\n            }\n          </div>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <fs-form-dialog-actions>\n        <button\n            type=\"button\"\n            mat-button\n            color=\"warn\"\n            (click)=\"delete()\">\n          Delete\n        </button>\n      </fs-form-dialog-actions>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>", styles: ["mat-form-field{width:100%}.tab-body{padding-top:16px}\n"] }]
         }] });
 
 // Rows fetched for a list component's export table — enough to fill a
@@ -3133,6 +3735,10 @@ const EXPORT_CONCURRENCY = 3;
 function emptyLabel(item) {
     return item.data ? 'No data' : 'Could not be generated';
 }
+// Whether a tile's query failed. A text block has no query, so it never did.
+function isFailed(item) {
+    return !item.data && item.component.type !== 'text';
+}
 // The pages of a collected report that have at least one tile whose query
 // failed — what the export gate names to the user, and what makes "some of this
 // file is missing" a fact the caller can act on rather than a thing they notice
@@ -3142,7 +3748,7 @@ function failedPageNames(collected) {
     // "Page 4", not "Page 1" because it happened to be the first failure.
     return collected.pages
         .map((page, index) => ({ page, number: index + 1 }))
-        .filter(({ page }) => page.components.some((item) => !item.data))
+        .filter(({ page }) => page.components.some(isFailed))
         .map(({ page, number }) => page.page.name || `Page ${number}`);
 }
 // Gathers everything an export needs: every component's data across ALL pages
@@ -3162,6 +3768,9 @@ class ReportExportCollectorService {
                 slots.push({ pageIndex, component });
             }
         });
+        // Text blocks have nothing to fetch — they ride through with no data. The
+        // header/footer (report.master) is read by the renderers straight off the
+        // report for the same reason.
         // Released a few at a time rather than all at once. mergeMap completes out
         // of order, so each result carries the slot it came from and the rows are
         // filed by index — the deck's page order can't depend on which query
@@ -3189,6 +3798,9 @@ class ReportExportCollectorService {
         }));
     }
     _componentData(report, component) {
+        if (component.type === 'text') {
+            return of({ component, data: null });
+        }
         const filters = this._filterState.resolveForComponent(component);
         // A time-series chart carries the viewer's group-by grain so the export
         // re-buckets exactly as the screen does; lists carry their export paging.
@@ -3270,7 +3882,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 // complete synchronously after setOption.
 async function renderChartImage(component, data, width, height, pixelRatio = 3) {
     // The same tree-shaken echarts build + 'report' theme the live canvas uses.
-    const echarts = (await import('./firestitch-report-echarts-BLtDCank.mjs')).default;
+    const echarts = (await import('./firestitch-report-echarts-dBElcPnl.mjs')).default;
     const host = document.createElement('div');
     host.style.width = `${width}px`;
     host.style.height = `${height}px`;
@@ -3301,6 +3913,12 @@ const PT = 72;
 const TITLE_H$1 = 18;
 // Approximate table row height, points — drives the rows-that-fit cap.
 const TABLE_ROW_H$1 = 16;
+// A text line's height as a multiple of its largest font size — the canvas
+// stylesheet's line-height, so a block wraps and stacks the same way.
+const TEXT_LINE_HEIGHT = 1.25;
+// How far a list item's text sits from the block's edge, points; the marker
+// hangs in that space.
+const LIST_INDENT = 16;
 // Builds the PDF client-side with jspdf. The report's unit is inches and PDFs
 // are points at exactly 72/inch, so each report page becomes one PDF page of
 // the exact physical size and components land at their precise positions.
@@ -3320,11 +3938,24 @@ class ReportPdfService {
             format: [pageW, pageH],
         });
         this._titlePage(doc, collected, pageW, pageH);
-        for (const collectedPage of collected.pages) {
+        for (const [index, collectedPage] of collected.pages.entries()) {
             doc.addPage([pageW, pageH], pageW >= pageH ? 'landscape' : 'portrait');
             const geometry = pageGeometry(report, collectedPage.page);
+            const tokens = this._tokens(report, collectedPage.page, index);
+            // The header and footer first, under the page's own components.
+            if (!collectedPage.page.masterHidden) {
+                for (const component of report.master?.components ?? []) {
+                    this._renderText(doc, component, component, tokens);
+                }
+            }
             for (const item of collectedPage.components) {
-                await this._renderComponent(doc, autoTable, item, geometry.get(item.component.id));
+                const box = geometry.get(item.component.id);
+                if (item.component.type === 'text') {
+                    this._renderText(doc, item.component, box ?? item.component, tokens);
+                }
+                else {
+                    await this._renderComponent(doc, autoTable, item, box);
+                }
             }
         }
         doc.save(`${this._slug(report.name)}.pdf`);
@@ -3343,6 +3974,138 @@ class ReportPdfService {
         ];
         doc.text(lines, 40, pageH * 0.35 + 26);
     }
+    // A text block, laid out by hand: jsPDF draws strings, not rich text, so each
+    // paragraph's runs are broken into words, wrapped to the block's width and
+    // drawn word by word in their own font, size and color. Lines past the
+    // block's height are dropped — the canvas clips the block there too.
+    _renderText(doc, component, box, tokens) {
+        const padding = component.config?.padding;
+        const inset = (value) => (value ?? DEFAULT_COMPONENT_PADDING) * PT;
+        const left = box.x * PT + inset(padding?.left);
+        const top = box.y * PT + inset(padding?.top);
+        const width = box.w * PT - inset(padding?.left) - inset(padding?.right);
+        const bottom = (box.y + box.h) * PT - inset(padding?.bottom);
+        let cursorY = top;
+        let listNumber = 0;
+        for (const paragraph of textParagraphs(component.config?.html ?? '', tokens)) {
+            listNumber = paragraph.bullet === 'number' ? listNumber + 1 : 0;
+            const indent = paragraph.bullet ? LIST_INDENT : 0;
+            const lines = this._wrap(doc, paragraph, width - indent);
+            lines.forEach((line, lineIndex) => {
+                const size = Math.max(...line.map((word) => word.size), paragraph.runs[0]?.fontSize ?? DEFAULT_TEXT_SIZE);
+                const lineHeight = size * TEXT_LINE_HEIGHT;
+                if (cursorY + lineHeight > bottom + 0.5) {
+                    cursorY = Infinity;
+                    return;
+                }
+                const baseline = cursorY + size;
+                const lineWidth = line.reduce((sum, word) => sum + word.width, 0);
+                let x = left + indent + this._alignOffset(paragraph.align, width - indent, lineWidth);
+                if (lineIndex === 0 && paragraph.bullet) {
+                    this._font(doc, line[0]?.run ?? { text: '' }, size);
+                    doc.text(paragraph.bullet === 'number' ? `${listNumber}.` : '•', left, baseline);
+                }
+                for (const word of line) {
+                    this._drawWord(doc, word, x, baseline);
+                    x += word.width;
+                }
+                cursorY += lineHeight;
+            });
+            if (cursorY === Infinity) {
+                break;
+            }
+            // An empty paragraph is still a line.
+            if (!lines.length) {
+                cursorY += DEFAULT_TEXT_SIZE * TEXT_LINE_HEIGHT;
+            }
+        }
+    }
+    // Break a paragraph's runs into lines of measured words that fit the width.
+    // A word keeps its trailing space so spacing survives run boundaries.
+    _wrap(doc, paragraph, width) {
+        const lines = [];
+        let line = [];
+        let lineWidth = 0;
+        for (const run of paragraph.runs) {
+            const size = run.fontSize ?? DEFAULT_TEXT_SIZE;
+            this._font(doc, run, size);
+            for (const text of run.text.match(/\S+\s*|\s+/g) ?? []) {
+                const wordWidth = doc.getTextWidth(text);
+                if (line.length && lineWidth + wordWidth - this._trailingSpace(doc, text) > width) {
+                    lines.push(line);
+                    line = [];
+                    lineWidth = 0;
+                }
+                line.push({ run, text, size, width: wordWidth });
+                lineWidth += wordWidth;
+            }
+        }
+        if (line.length) {
+            lines.push(line);
+        }
+        return lines;
+    }
+    _drawWord(doc, word, x, baseline) {
+        const run = word.run;
+        if (run.highlight) {
+            doc.setFillColor(run.highlight);
+            doc.rect(x, baseline - word.size * 0.9, word.width, word.size * 1.15, 'F');
+        }
+        this._font(doc, run, word.size);
+        doc.text(word.text, x, baseline);
+        const color = run.color ?? DEFAULT_TEXT_COLOR;
+        const inkWidth = word.width - this._trailingSpace(doc, word.text);
+        if (run.underline) {
+            doc.setDrawColor(color);
+            doc.setLineWidth(word.size / 16);
+            doc.line(x, baseline + word.size * 0.12, x + inkWidth, baseline + word.size * 0.12);
+        }
+        if (run.strike) {
+            doc.setDrawColor(color);
+            doc.setLineWidth(word.size / 16);
+            doc.line(x, baseline - word.size * 0.3, x + inkWidth, baseline - word.size * 0.3);
+        }
+        if (run.link) {
+            doc.link(x, baseline - word.size, inkWidth, word.size * 1.2, { url: run.link });
+        }
+    }
+    // jsPDF's standard fonts are Helvetica, Times and Courier; a block's face is
+    // mapped onto whichever of the three it resembles.
+    _font(doc, run, size) {
+        const face = (run.fontFace ?? '').toLowerCase();
+        const family = /courier|mono/.test(face)
+            ? 'courier'
+            : (/times|georgia|serif/.test(face) && !face.includes('sans') ? 'times' : 'helvetica');
+        const style = run.bold && run.italic
+            ? 'bolditalic'
+            : (run.bold ? 'bold' : (run.italic ? 'italic' : 'normal'));
+        doc.setFont(family, style);
+        doc.setFontSize(size);
+        doc.setTextColor(run.color ?? DEFAULT_TEXT_COLOR);
+    }
+    _trailingSpace(doc, text) {
+        const trailing = text.length - text.trimEnd().length;
+        return trailing ? doc.getTextWidth(' ') * trailing : 0;
+    }
+    _alignOffset(align, width, lineWidth) {
+        switch (align) {
+            case 'center':
+                return Math.max(0, (width - lineWidth) / 2);
+            case 'right':
+                return Math.max(0, width - lineWidth);
+            default:
+                return 0;
+        }
+    }
+    // What a text block's tokens fill with on this page: the page's position
+    // among the report's pages — the title page is not a report page.
+    _tokens(report, page, index) {
+        return {
+            pageNumber: index + 1,
+            pageName: page.name || `Page ${index + 1}`,
+            reportName: report.name,
+        };
+    }
     async _renderComponent(doc, autoTable, item, geometry) {
         const component = item.component;
         // Geometry arrives in inches (flow layout pre-resolved); the PDF draws in
@@ -3486,13 +4249,27 @@ class ReportPptxService {
         pptx.layout = 'REPORT';
         pptx.title = report.name;
         this._titleSlide(pptx, collected, pageW, pageH);
-        for (const collectedPage of collected.pages) {
+        collected.pages.forEach((collectedPage, index) => {
             const slide = pptx.addSlide();
             const geometry = pageGeometry(report, collectedPage.page);
+            const tokens = this._tokens(report, collectedPage.page, index);
+            // The header and footer first, so the page's own components sit on top
+            // of them exactly as on the canvas.
+            if (!collectedPage.page.masterHidden) {
+                for (const component of report.master?.components ?? []) {
+                    this._renderText(slide, component, component, tokens);
+                }
+            }
             for (const item of collectedPage.components) {
-                this._renderComponent(pptx, slide, item, geometry.get(item.component.id));
+                const box = geometry.get(item.component.id);
+                if (item.component.type === 'text') {
+                    this._renderText(slide, item.component, box ?? item.component, tokens);
+                }
+                else {
+                    this._renderComponent(pptx, slide, item, box);
+                }
             }
-        }
+        });
         await pptx.writeFile({ fileName: `${this._slug(report.name)}.pptx` });
     }
     _titleSlide(pptx, collected, pageW, pageH) {
@@ -3510,6 +4287,62 @@ class ReportPptxService {
             fontSize: 12, color: '52606D',
         });
     }
+    // A text block as ONE native PowerPoint text box — editable in the deck, with
+    // each paragraph's runs carrying their own bold/italic/color/size. The box's
+    // inset is the block's padding, so the words land where they sat on screen.
+    _renderText(slide, component, box, tokens) {
+        const runs = [];
+        const paragraphs = textParagraphs(component.config?.html ?? '', tokens);
+        paragraphs.forEach((paragraph, index) => {
+            const isLast = index === paragraphs.length - 1;
+            const paragraphOptions = {
+                align: paragraph.align,
+                bullet: paragraph.bullet === 'number'
+                    ? { type: 'number' }
+                    : (paragraph.bullet === 'bullet' ? true : undefined),
+            };
+            const paragraphRuns = paragraph.runs.length ? paragraph.runs : [{ text: '' }];
+            paragraphRuns.forEach((run, runIndex) => {
+                runs.push({
+                    text: run.text,
+                    options: {
+                        ...paragraphOptions,
+                        bold: run.bold,
+                        italic: run.italic,
+                        underline: run.underline ? { style: 'sng' } : undefined,
+                        strike: run.strike ? 'sngStrike' : undefined,
+                        color: (run.color ?? DEFAULT_TEXT_COLOR).replace('#', ''),
+                        highlight: run.highlight?.replace('#', ''),
+                        fontSize: run.fontSize ?? DEFAULT_TEXT_SIZE,
+                        fontFace: run.fontFace,
+                        hyperlink: run.link ? { url: run.link } : undefined,
+                        breakLine: runIndex === paragraphRuns.length - 1 && !isLast,
+                    },
+                });
+            });
+        });
+        if (!runs.length) {
+            return;
+        }
+        const padding = component.config?.padding;
+        const inset = (value) => (value ?? DEFAULT_COMPONENT_PADDING) * 72;
+        slide.addText(runs, {
+            x: box.x, y: box.y, w: box.w, h: box.h,
+            valign: 'top',
+            fontFace: 'Arial',
+            margin: [inset(padding?.left), inset(padding?.right), inset(padding?.bottom), inset(padding?.top)],
+            fit: 'none',
+        });
+    }
+    // What a text block's tokens fill with on this slide: the page's position
+    // among the report's pages — the title slide is not a report page.
+    _tokens(report, page, index) {
+        return {
+            pageNumber: index + 1,
+            pageName: page.name || `Page ${index + 1}`,
+            reportName: report.name,
+        };
+    }
     _renderComponent(pptx, slide, item, geometry) {
         const component = item.component;
         // Geometry is in inches — PowerPoint's native unit (flow layout arrives
@@ -3863,6 +4696,17 @@ class ReportComponent {
     toggleEditMode() {
         this.editMode = !this.editMode;
     }
+    // The edit tools live in this toolbar, but the canvas owns what they act on
+    // (the active page, the header/footer bands, which layer is live).
+    get isMasterMode() {
+        return this._canvas?.masterMode() ?? false;
+    }
+    addText() {
+        this._canvas?.addText();
+    }
+    toggleMasterMode() {
+        this._canvas?.toggleMasterMode();
+    }
     // Report settings — name, page size, orientation, layout mode. The picker
     // list and structure both reload on save (a layout switch re-renders the
     // whole canvas).
@@ -4126,8 +4970,8 @@ class ReportComponent {
             ReportExportService,
             // Tree-shaken ECharts core + the 'report' house theme, loaded lazily with
             // this route's chunk.
-            provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-BLtDCank.mjs').then((module) => module.default) }),
-        ], viewQueries: [{ propertyName: "_split", first: true, predicate: ["split"], descendants: true, static: true }, { propertyName: "_chatPanel", first: true, predicate: ["chatPanel"], descendants: true, read: ElementRef, static: true }, { propertyName: "_canvas", first: true, predicate: ReportCanvasComponent, descendants: true }], ngImport: i0, template: "<div\n    #split\n    class=\"report fs-row.align-start\">\n  <fs-ai-chat\n    #chatPanel\n    class=\"chat\"\n    style=\"min-height: 500px;\"\n    basePath=\"reports\"\n    [requestData]=\"{ reportId: selected?.id ?? null }\"\n    [introMessage]=\"introMessage\"\n    (response)=\"onChatResponse($event)\">\n  </fs-ai-chat>\n  <div\n    class=\"resizer\"\n    (pointerdown)=\"onResizeStart($event)\">\n  </div>\n  <div class=\"viewer fs-flex fs-column\">\n    <div class=\"fs-row.align-center.gap-sm\">\n      <fs-autocomplete-chips\n          class=\"fs-flex\"\n          [fetch]=\"fetchReports\"\n          [(ngModel)]=\"selected\"\n          [disabled]=\"loadingReports\"\n          [padless]=\"true\"\n          [multiple]=\"false\"\n          [fetchOnFocus]=\"true\"\n          (ngModelChange)=\"reportChange($event)\"\n          placeholder=\"Report\"\n          name=\"report\">\n        <ng-template\n            fsAutocompleteChipsTemplate\n            let-object=\"object\">\n          {{ object.name }}\n        </ng-template>\n        <ng-template\n            fsAutocompleteChipsStatic\n            (click)=\"createReport()\">\n          Create Report\n        </ng-template>\n      </fs-autocomplete-chips>\n      @if (report) {\n        <fs-menu>\n          <ng-template\n              fs-menu-item\n              (click)=\"reportSettings()\">\n            <mat-icon>\n              tune\n            </mat-icon>\n            Report settings\n          </ng-template>\n          <ng-template\n              fs-menu-item\n              (click)=\"toggleEditMode()\"\n              [disabled]=\"editMode\">\n            <mat-icon>\n              dashboard_2_edit\n            </mat-icon>\n            {{ editMode ? 'Done editing layout' : 'Edit layout' }}\n          </ng-template>\n          <ng-template\n              fs-menu-item\n              (click)=\"exportPowerpoint()\">\n            <mat-icon>\n              slideshow\n            </mat-icon>\n            Export PowerPoint\n          </ng-template>\n          <ng-template\n              fs-menu-item\n              (click)=\"exportPdf()\">\n            <mat-icon>\n              picture_as_pdf\n            </mat-icon>\n            Export PDF\n          </ng-template>\n          <ng-template\n              fs-menu-item\n              (click)=\"exportData()\">\n            <mat-icon>\n              table_view\n            </mat-icon>\n            Export Raw Data\n          </ng-template>\n          @if ((report?.pages?.length ?? 0) > 1) {\n            <ng-template\n                fs-menu-item\n                (click)=\"exportData(true)\">\n              <mat-icon>\n                table_view\n              </mat-icon>\n              Export Raw Data (This Page)\n            </ng-template>\n          }\n        </fs-menu>\n      }\n    </div>\n    @if (report) {\n      <!-- Report-level filters only (the report's actions live in the menu\n           above). fs-filter reads its config once at init, so it's keyed on the\n           filter signature: when the report-level filter set changes the block\n           is recreated and re-reads the rebuilt config. -->\n      @if (reportHasFilters) {\n        @for (key of [reportFilterKey]; track key) {\n          <fs-filter [config]=\"reportFilterConfig\"></fs-filter>\n        }\n      }\n      <app-report-canvas\n        [report]=\"report\"\n        [editMode]=\"editMode\"\n        (componentSettings)=\"componentSettings($event)\"\n        (reportChanged)=\"onCanvasReportChanged()\"\n        (editDone)=\"toggleEditMode()\">\n      </app-report-canvas>\n    }\n  </div>\n</div>", styles: [".report{height:100%;min-height:500px}.report .chat{display:block;flex:0 0 25%;width:100%;height:100%;min-height:500px;min-width:0;border:none}.report .viewer{display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden}.report .viewer fs-filter{flex:0 0 auto;margin-top:10px;margin-bottom:0}.report .viewer ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.report .resizer{flex:0 0 11px;align-self:stretch;display:flex;justify-content:center;cursor:col-resize;touch-action:none;-webkit-user-select:none;user-select:none}.report .resizer:before{content:\"\";width:0px;background:#0000001f;transition:width .12s ease,background-color .12s ease}.report .resizer:hover:before{width:3px;background:var(--brand-primary-color)}.report.resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.report.resizing .resizer:before{width:3px;background:var(--brand-primary-color)}.report.resizing .chat,.report.resizing .viewer{pointer-events:none}::ng-deep body.body-report-reports .mat-mdc-card-content{display:flex;flex-direction:column;box-sizing:border-box}::ng-deep body.body-report-reports .mat-mdc-card-content mat-tab-nav-panel{flex:1;min-height:0}::ng-deep body.body-report-reports .mat-mdc-card-content mat-tab-nav-panel router-outlet+ng-component{height:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsAutocompleteChipsModule }, { kind: "component", type: i2$3.FsAutocompleteChipsComponent, selector: "fs-autocomplete-chips", inputs: ["fetch", "appearance", "floatLabel", "readonly", "size", "label", "placeholder", "chipImage", "chipBackground", "chipColor", "chipIcon", "chipIconColor", "chipClass", "chipPadding", "shape", "hint", "allowText", "allowObject", "delay", "minPanelWidth", "maxPanelHeight", "validateText", "removable", "allowClear", "color", "background", "orderable", "padless", "initOnClick", "fetchOnFocus", "multiple", "multipleAdd", "confirm", "disabled", "groupBy", "panelWidth", "panelClass", "compareWith"], outputs: ["selected", "removed", "reordered", "clear", "panelOpened", "panelClosed"] }, { kind: "directive", type: i2$3.FsAutocompleteObjectDirective, selector: "[fsAutocompleteObject],[fsAutocompleteChipsTemplate]" }, { kind: "directive", type: i2$3.FsAutocompleteChipsStaticDirective, selector: "[fsAutocompleteChipsStatic]", inputs: ["show", "disable"], outputs: ["click", "selected"] }, { kind: "ngmodule", type: FsFilterModule }, { kind: "component", type: i2.FilterComponent, selector: "fs-filter", inputs: ["config"], outputs: ["closed", "opened", "ready"] }, { kind: "ngmodule", type: FsMenuModule }, { kind: "component", type: i2$1.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i2$1.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "component", type: FsAiChatComponent, selector: "fs-ai-chat", inputs: ["basePath", "requestData", "ready", "introMessage", "showThinking"], outputs: ["response", "showThinkingChange"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ReportCanvasComponent, selector: "app-report-canvas", inputs: ["report", "editMode", "pageId"], outputs: ["componentSettings", "reportChanged", "editDone", "pageChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+            provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-dBElcPnl.mjs').then((module) => module.default) }),
+        ], viewQueries: [{ propertyName: "_split", first: true, predicate: ["split"], descendants: true, static: true }, { propertyName: "_chatPanel", first: true, predicate: ["chatPanel"], descendants: true, read: ElementRef, static: true }, { propertyName: "_canvas", first: true, predicate: ReportCanvasComponent, descendants: true }], ngImport: i0, template: "<div\n    #split\n    class=\"report fs-row.align-start\">\n  <fs-ai-chat\n    #chatPanel\n    class=\"chat\"\n    style=\"min-height: 500px;\"\n    basePath=\"reports\"\n    [requestData]=\"{ reportId: selected?.id ?? null }\"\n    [introMessage]=\"introMessage\"\n    (response)=\"onChatResponse($event)\">\n  </fs-ai-chat>\n  <div\n    class=\"resizer\"\n    (pointerdown)=\"onResizeStart($event)\">\n  </div>\n  <div class=\"viewer fs-flex fs-column\">\n    <div class=\"fs-row.align-center.gap-sm\">\n      <fs-autocomplete-chips\n          class=\"fs-flex\"\n          [fetch]=\"fetchReports\"\n          [(ngModel)]=\"selected\"\n          [disabled]=\"loadingReports\"\n          [padless]=\"true\"\n          [multiple]=\"false\"\n          [fetchOnFocus]=\"true\"\n          (ngModelChange)=\"reportChange($event)\"\n          placeholder=\"Report\"\n          name=\"report\">\n        <ng-template\n            fsAutocompleteChipsTemplate\n            let-object=\"object\">\n          {{ object.name }}\n        </ng-template>\n        <ng-template\n            fsAutocompleteChipsStatic\n            (click)=\"createReport()\">\n          Create Report\n        </ng-template>\n      </fs-autocomplete-chips>\n      @if (report && editMode) {\n        <!-- What layout editing can add or switch to, and the way out of it \u2014\n             the same outlined buttons as the fs-ai-report toolbar. -->\n        <button\n            mat-stroked-button\n            type=\"button\"\n            matTooltip=\"Add a block of text\"\n            (click)=\"addText()\">\n          <mat-icon>title</mat-icon>\n          Add text\n        </button>\n        <button\n            mat-stroked-button\n            type=\"button\"\n            class=\"master-toggle\"\n            [class.active]=\"isMasterMode\"\n            [matTooltip]=\"isMasterMode ? 'Back to editing this page' : 'Edit the header and footer shown on every page'\"\n            (click)=\"toggleMasterMode()\">\n          <mat-icon>web_asset</mat-icon>\n          Header & footer\n        </button>\n        <button\n            mat-stroked-button\n            type=\"button\"\n            (click)=\"toggleEditMode()\">\n          <mat-icon>check</mat-icon>\n          Done editing\n        </button>\n      }\n      @if (report) {\n        <fs-menu>\n          <ng-template\n              fs-menu-item\n              (click)=\"reportSettings()\">\n            <mat-icon>\n              tune\n            </mat-icon>\n            Report settings\n          </ng-template>\n          <ng-template\n              fs-menu-item\n              (click)=\"toggleEditMode()\"\n              [disabled]=\"editMode\">\n            <mat-icon>\n              dashboard_customize\n            </mat-icon>\n            {{ editMode ? 'Done editing layout' : 'Edit layout' }}\n          </ng-template>\n          <ng-template\n              fs-menu-item\n              (click)=\"exportPowerpoint()\">\n            <mat-icon>\n              slideshow\n            </mat-icon>\n            Export PowerPoint\n          </ng-template>\n          <ng-template\n              fs-menu-item\n              (click)=\"exportPdf()\">\n            <mat-icon>\n              picture_as_pdf\n            </mat-icon>\n            Export PDF\n          </ng-template>\n          <ng-template\n              fs-menu-item\n              (click)=\"exportData()\">\n            <mat-icon>\n              table_view\n            </mat-icon>\n            Export Raw Data\n          </ng-template>\n          @if ((report?.pages?.length ?? 0) > 1) {\n            <ng-template\n                fs-menu-item\n                (click)=\"exportData(true)\">\n              <mat-icon>\n                table_view\n              </mat-icon>\n              Export Raw Data (This Page)\n            </ng-template>\n          }\n        </fs-menu>\n      }\n    </div>\n    @if (report) {\n      <!-- Report-level filters only (the report's actions live in the menu\n           above). fs-filter reads its config once at init, so it's keyed on the\n           filter signature: when the report-level filter set changes the block\n           is recreated and re-reads the rebuilt config. -->\n      @if (reportHasFilters) {\n        @for (key of [reportFilterKey]; track key) {\n          <fs-filter [config]=\"reportFilterConfig\"></fs-filter>\n        }\n      }\n      <app-report-canvas\n        [report]=\"report\"\n        [editMode]=\"editMode\"\n        (componentSettings)=\"componentSettings($event)\"\n        (reportChanged)=\"onCanvasReportChanged()\">\n      </app-report-canvas>\n    }\n  </div>\n</div>", styles: [".report{height:100%;min-height:500px}.report .chat{display:block;flex:0 0 25%;width:100%;height:100%;min-height:500px;min-width:0;border:none}.report .viewer{display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden}.report .viewer fs-filter{flex:0 0 auto;margin-top:10px;margin-bottom:0}.report .viewer ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.report .resizer{flex:0 0 11px;align-self:stretch;display:flex;justify-content:center;cursor:col-resize;touch-action:none;-webkit-user-select:none;user-select:none}.report .resizer:before{content:\"\";width:0px;background:#0000001f;transition:width .12s ease,background-color .12s ease}.report .resizer:hover:before{width:3px;background:var(--brand-primary-color)}.report.resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.report.resizing .resizer:before{width:3px;background:var(--brand-primary-color)}.report.resizing .chat,.report.resizing .viewer{pointer-events:none}::ng-deep body.body-report-reports .mat-mdc-card-content{display:flex;flex-direction:column;box-sizing:border-box}::ng-deep body.body-report-reports .mat-mdc-card-content mat-tab-nav-panel{flex:1;min-height:0}::ng-deep body.body-report-reports .mat-mdc-card-content mat-tab-nav-panel router-outlet+ng-component{height:100%}.master-toggle.active{background:#eceff3}\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: "ngmodule", type: FsAutocompleteChipsModule }, { kind: "component", type: i2$3.FsAutocompleteChipsComponent, selector: "fs-autocomplete-chips", inputs: ["fetch", "appearance", "floatLabel", "readonly", "size", "label", "placeholder", "chipImage", "chipBackground", "chipColor", "chipIcon", "chipIconColor", "chipClass", "chipPadding", "shape", "hint", "allowText", "allowObject", "delay", "minPanelWidth", "maxPanelHeight", "validateText", "removable", "allowClear", "color", "background", "orderable", "padless", "initOnClick", "fetchOnFocus", "multiple", "multipleAdd", "confirm", "disabled", "groupBy", "panelWidth", "panelClass", "compareWith"], outputs: ["selected", "removed", "reordered", "clear", "panelOpened", "panelClosed"] }, { kind: "directive", type: i2$3.FsAutocompleteObjectDirective, selector: "[fsAutocompleteObject],[fsAutocompleteChipsTemplate]" }, { kind: "directive", type: i2$3.FsAutocompleteChipsStaticDirective, selector: "[fsAutocompleteChipsStatic]", inputs: ["show", "disable"], outputs: ["click", "selected"] }, { kind: "ngmodule", type: FsFilterModule }, { kind: "component", type: i2.FilterComponent, selector: "fs-filter", inputs: ["config"], outputs: ["closed", "opened", "ready"] }, { kind: "ngmodule", type: FsMenuModule }, { kind: "component", type: i2$1.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i2$1.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "component", type: FsAiChatComponent, selector: "fs-ai-chat", inputs: ["basePath", "requestData", "ready", "introMessage", "showThinking"], outputs: ["response", "showThinkingChange"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ReportCanvasComponent, selector: "app-report-canvas", inputs: ["report", "editMode", "pageId"], outputs: ["componentSettings", "reportChanged", "pageChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportComponent, decorators: [{
             type: Component,
@@ -4141,16 +4985,18 @@ 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-BLtDCank.mjs').then((module) => module.default) }),
+                        provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-dBElcPnl.mjs').then((module) => module.default) }),
                     ], imports: [
                         FormsModule,
                         FsAutocompleteChipsModule,
                         FsFilterModule,
                         FsMenuModule,
                         FsAiChatComponent,
+                        MatButton,
                         MatIcon,
+                        MatTooltip,
                         ReportCanvasComponent,
-                    ], template: "<div\n    #split\n    class=\"report fs-row.align-start\">\n  <fs-ai-chat\n    #chatPanel\n    class=\"chat\"\n    style=\"min-height: 500px;\"\n    basePath=\"reports\"\n    [requestData]=\"{ reportId: selected?.id ?? null }\"\n    [introMessage]=\"introMessage\"\n    (response)=\"onChatResponse($event)\">\n  </fs-ai-chat>\n  <div\n    class=\"resizer\"\n    (pointerdown)=\"onResizeStart($event)\">\n  </div>\n  <div class=\"viewer fs-flex fs-column\">\n    <div class=\"fs-row.align-center.gap-sm\">\n      <fs-autocomplete-chips\n          class=\"fs-flex\"\n          [fetch]=\"fetchReports\"\n          [(ngModel)]=\"selected\"\n          [disabled]=\"loadingReports\"\n          [padless]=\"true\"\n          [multiple]=\"false\"\n          [fetchOnFocus]=\"true\"\n          (ngModelChange)=\"reportChange($event)\"\n          placeholder=\"Report\"\n          name=\"report\">\n        <ng-template\n            fsAutocompleteChipsTemplate\n            let-object=\"object\">\n          {{ object.name }}\n        </ng-template>\n        <ng-template\n            fsAutocompleteChipsStatic\n            (click)=\"createReport()\">\n          Create Report\n        </ng-template>\n      </fs-autocomplete-chips>\n      @if (report) {\n        <fs-menu>\n          <ng-template\n              fs-menu-item\n              (click)=\"reportSettings()\">\n            <mat-icon>\n              tune\n            </mat-icon>\n            Report settings\n          </ng-template>\n          <ng-template\n              fs-menu-item\n              (click)=\"toggleEditMode()\"\n              [disabled]=\"editMode\">\n            <mat-icon>\n              dashboard_2_edit\n            </mat-icon>\n            {{ editMode ? 'Done editing layout' : 'Edit layout' }}\n          </ng-template>\n          <ng-template\n              fs-menu-item\n              (click)=\"exportPowerpoint()\">\n            <mat-icon>\n              slideshow\n            </mat-icon>\n            Export PowerPoint\n          </ng-template>\n          <ng-template\n              fs-menu-item\n              (click)=\"exportPdf()\">\n            <mat-icon>\n              picture_as_pdf\n            </mat-icon>\n            Export PDF\n          </ng-template>\n          <ng-template\n              fs-menu-item\n              (click)=\"exportData()\">\n            <mat-icon>\n              table_view\n            </mat-icon>\n            Export Raw Data\n          </ng-template>\n          @if ((report?.pages?.length ?? 0) > 1) {\n            <ng-template\n                fs-menu-item\n                (click)=\"exportData(true)\">\n              <mat-icon>\n                table_view\n              </mat-icon>\n              Export Raw Data (This Page)\n            </ng-template>\n          }\n        </fs-menu>\n      }\n    </div>\n    @if (report) {\n      <!-- Report-level filters only (the report's actions live in the menu\n           above). fs-filter reads its config once at init, so it's keyed on the\n           filter signature: when the report-level filter set changes the block\n           is recreated and re-reads the rebuilt config. -->\n      @if (reportHasFilters) {\n        @for (key of [reportFilterKey]; track key) {\n          <fs-filter [config]=\"reportFilterConfig\"></fs-filter>\n        }\n      }\n      <app-report-canvas\n        [report]=\"report\"\n        [editMode]=\"editMode\"\n        (componentSettings)=\"componentSettings($event)\"\n        (reportChanged)=\"onCanvasReportChanged()\"\n        (editDone)=\"toggleEditMode()\">\n      </app-report-canvas>\n    }\n  </div>\n</div>", styles: [".report{height:100%;min-height:500px}.report .chat{display:block;flex:0 0 25%;width:100%;height:100%;min-height:500px;min-width:0;border:none}.report .viewer{display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden}.report .viewer fs-filter{flex:0 0 auto;margin-top:10px;margin-bottom:0}.report .viewer ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.report .resizer{flex:0 0 11px;align-self:stretch;display:flex;justify-content:center;cursor:col-resize;touch-action:none;-webkit-user-select:none;user-select:none}.report .resizer:before{content:\"\";width:0px;background:#0000001f;transition:width .12s ease,background-color .12s ease}.report .resizer:hover:before{width:3px;background:var(--brand-primary-color)}.report.resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.report.resizing .resizer:before{width:3px;background:var(--brand-primary-color)}.report.resizing .chat,.report.resizing .viewer{pointer-events:none}::ng-deep body.body-report-reports .mat-mdc-card-content{display:flex;flex-direction:column;box-sizing:border-box}::ng-deep body.body-report-reports .mat-mdc-card-content mat-tab-nav-panel{flex:1;min-height:0}::ng-deep body.body-report-reports .mat-mdc-card-content mat-tab-nav-panel router-outlet+ng-component{height:100%}\n"] }]
+                    ], template: "<div\n    #split\n    class=\"report fs-row.align-start\">\n  <fs-ai-chat\n    #chatPanel\n    class=\"chat\"\n    style=\"min-height: 500px;\"\n    basePath=\"reports\"\n    [requestData]=\"{ reportId: selected?.id ?? null }\"\n    [introMessage]=\"introMessage\"\n    (response)=\"onChatResponse($event)\">\n  </fs-ai-chat>\n  <div\n    class=\"resizer\"\n    (pointerdown)=\"onResizeStart($event)\">\n  </div>\n  <div class=\"viewer fs-flex fs-column\">\n    <div class=\"fs-row.align-center.gap-sm\">\n      <fs-autocomplete-chips\n          class=\"fs-flex\"\n          [fetch]=\"fetchReports\"\n          [(ngModel)]=\"selected\"\n          [disabled]=\"loadingReports\"\n          [padless]=\"true\"\n          [multiple]=\"false\"\n          [fetchOnFocus]=\"true\"\n          (ngModelChange)=\"reportChange($event)\"\n          placeholder=\"Report\"\n          name=\"report\">\n        <ng-template\n            fsAutocompleteChipsTemplate\n            let-object=\"object\">\n          {{ object.name }}\n        </ng-template>\n        <ng-template\n            fsAutocompleteChipsStatic\n            (click)=\"createReport()\">\n          Create Report\n        </ng-template>\n      </fs-autocomplete-chips>\n      @if (report && editMode) {\n        <!-- What layout editing can add or switch to, and the way out of it \u2014\n             the same outlined buttons as the fs-ai-report toolbar. -->\n        <button\n            mat-stroked-button\n            type=\"button\"\n            matTooltip=\"Add a block of text\"\n            (click)=\"addText()\">\n          <mat-icon>title</mat-icon>\n          Add text\n        </button>\n        <button\n            mat-stroked-button\n            type=\"button\"\n            class=\"master-toggle\"\n            [class.active]=\"isMasterMode\"\n            [matTooltip]=\"isMasterMode ? 'Back to editing this page' : 'Edit the header and footer shown on every page'\"\n            (click)=\"toggleMasterMode()\">\n          <mat-icon>web_asset</mat-icon>\n          Header & footer\n        </button>\n        <button\n            mat-stroked-button\n            type=\"button\"\n            (click)=\"toggleEditMode()\">\n          <mat-icon>check</mat-icon>\n          Done editing\n        </button>\n      }\n      @if (report) {\n        <fs-menu>\n          <ng-template\n              fs-menu-item\n              (click)=\"reportSettings()\">\n            <mat-icon>\n              tune\n            </mat-icon>\n            Report settings\n          </ng-template>\n          <ng-template\n              fs-menu-item\n              (click)=\"toggleEditMode()\"\n              [disabled]=\"editMode\">\n            <mat-icon>\n              dashboard_customize\n            </mat-icon>\n            {{ editMode ? 'Done editing layout' : 'Edit layout' }}\n          </ng-template>\n          <ng-template\n              fs-menu-item\n              (click)=\"exportPowerpoint()\">\n            <mat-icon>\n              slideshow\n            </mat-icon>\n            Export PowerPoint\n          </ng-template>\n          <ng-template\n              fs-menu-item\n              (click)=\"exportPdf()\">\n            <mat-icon>\n              picture_as_pdf\n            </mat-icon>\n            Export PDF\n          </ng-template>\n          <ng-template\n              fs-menu-item\n              (click)=\"exportData()\">\n            <mat-icon>\n              table_view\n            </mat-icon>\n            Export Raw Data\n          </ng-template>\n          @if ((report?.pages?.length ?? 0) > 1) {\n            <ng-template\n                fs-menu-item\n                (click)=\"exportData(true)\">\n              <mat-icon>\n                table_view\n              </mat-icon>\n              Export Raw Data (This Page)\n            </ng-template>\n          }\n        </fs-menu>\n      }\n    </div>\n    @if (report) {\n      <!-- Report-level filters only (the report's actions live in the menu\n           above). fs-filter reads its config once at init, so it's keyed on the\n           filter signature: when the report-level filter set changes the block\n           is recreated and re-reads the rebuilt config. -->\n      @if (reportHasFilters) {\n        @for (key of [reportFilterKey]; track key) {\n          <fs-filter [config]=\"reportFilterConfig\"></fs-filter>\n        }\n      }\n      <app-report-canvas\n        [report]=\"report\"\n        [editMode]=\"editMode\"\n        (componentSettings)=\"componentSettings($event)\"\n        (reportChanged)=\"onCanvasReportChanged()\">\n      </app-report-canvas>\n    }\n  </div>\n</div>", styles: [".report{height:100%;min-height:500px}.report .chat{display:block;flex:0 0 25%;width:100%;height:100%;min-height:500px;min-width:0;border:none}.report .viewer{display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden}.report .viewer fs-filter{flex:0 0 auto;margin-top:10px;margin-bottom:0}.report .viewer ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.report .resizer{flex:0 0 11px;align-self:stretch;display:flex;justify-content:center;cursor:col-resize;touch-action:none;-webkit-user-select:none;user-select:none}.report .resizer:before{content:\"\";width:0px;background:#0000001f;transition:width .12s ease,background-color .12s ease}.report .resizer:hover:before{width:3px;background:var(--brand-primary-color)}.report.resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.report.resizing .resizer:before{width:3px;background:var(--brand-primary-color)}.report.resizing .chat,.report.resizing .viewer{pointer-events:none}::ng-deep body.body-report-reports .mat-mdc-card-content{display:flex;flex-direction:column;box-sizing:border-box}::ng-deep body.body-report-reports .mat-mdc-card-content mat-tab-nav-panel{flex:1;min-height:0}::ng-deep body.body-report-reports .mat-mdc-card-content mat-tab-nav-panel router-outlet+ng-component{height:100%}.master-toggle.active{background:#eceff3}\n"] }]
         }], ctorParameters: () => [], propDecorators: { _split: [{
                 type: ViewChild,
                 args: ['split', { static: true }]
@@ -4218,7 +5064,7 @@ class AiKnowledgeComponent {
     content = model('');
     config = input.required();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AiKnowledgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: AiKnowledgeComponent, isStandalone: true, selector: "fs-ai-report-global-settings-ai-knowledge", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { content: "contentChange" }, ngImport: i0, template: "<div class=\"fs-column tab-body\">\n  <p class=\"hint\">\n    This document is given to the report AI on every chat message. Use it for\n    terminology, business rules and special cases the AI can't work out from the\n    data on its own \u2014 it takes effect immediately, no deploy needed.\n  </p>\n  <fs-markdown-editor\n      [ngModel]=\"content()\"\n      (ngModelChange)=\"content.set($event)\"\n      [config]=\"config()\"\n      name=\"content\">\n  </fs-markdown-editor>\n</div>\n", styles: [".tab-body{padding-top:16px}.hint{margin:0 0 12px;color:#0009;font-size:13px;line-height:1.5}fs-markdown-editor{display:block;min-height:320px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2$2.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "component", type: FsMarkdownEditorComponent, selector: "fs-markdown-editor", inputs: ["config", "disabled"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: AiKnowledgeComponent, isStandalone: true, selector: "fs-ai-report-global-settings-ai-knowledge", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { content: "contentChange" }, ngImport: i0, template: "<div class=\"fs-column tab-body\">\n  <p class=\"hint\">\n    This document is given to the report AI on every chat message. Use it for\n    terminology, business rules and special cases the AI can't work out from the\n    data on its own \u2014 it takes effect immediately, no deploy needed.\n  </p>\n  <fs-markdown-editor\n      [ngModel]=\"content()\"\n      (ngModelChange)=\"content.set($event)\"\n      [config]=\"config()\"\n      name=\"content\">\n  </fs-markdown-editor>\n</div>\n", styles: [".tab-body{padding-top:16px}.hint{margin:0 0 12px;color:#0009;font-size:13px;line-height:1.5}fs-markdown-editor{display:block;min-height:320px}\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: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2$2.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "component", type: FsMarkdownEditorComponent, selector: "fs-markdown-editor", inputs: ["config", "disabled"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AiKnowledgeComponent, decorators: [{
             type: Component,
@@ -4241,7 +5087,7 @@ class GeneralComponent {
     min = input.required();
     max = input.required();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GeneralComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: GeneralComponent, isStandalone: true, selector: "fs-ai-report-global-settings-general", inputs: { concurrency: { classPropertyName: "concurrency", publicName: "concurrency", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { concurrency: "concurrencyChange" }, ngImport: i0, template: "<div class=\"fs-column tab-body\">\n  <mat-form-field>\n    <mat-label>Semantic build concurrency</mat-label>\n    <input\n        matInput\n        type=\"number\"\n        [ngModel]=\"concurrency()\"\n        (ngModelChange)=\"concurrency.set($event)\"\n        name=\"semanticBuildConcurrency\"\n        [fsFormRequired]=\"true\"\n        [fsFormInteger]=\"true\"\n        [fsFormMin]=\"min()\"\n        [fsFormMax]=\"max()\">\n    <mat-hint>\n      How many AI calls the semantic-database build runs at once ({{ min() }}\u2013{{ max() }}).\n      Higher is faster but more likely to hit the AI provider's rate limit. Default is 8.\n    </mat-hint>\n  </mat-form-field>\n</div>\n", styles: [".tab-body{padding-top:16px}mat-form-field{display:block;max-width:340px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2$2.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { kind: "directive", type: i2$2.FsFormMinDirective, selector: "[fsFormMin]", inputs: ["fsFormMin", "fsFormMinMessage"] }, { kind: "directive", type: i2$2.FsFormMaxDirective, selector: "[fsFormMax]", inputs: ["fsFormMax", "fsFormMaxMessage"] }, { kind: "directive", type: i2$2.FsFormIntegerDirective, selector: "[fsFormInteger]", inputs: ["fsFormInteger", "fsFormIntegerMessage"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: GeneralComponent, isStandalone: true, selector: "fs-ai-report-global-settings-general", inputs: { concurrency: { classPropertyName: "concurrency", publicName: "concurrency", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { concurrency: "concurrencyChange" }, ngImport: i0, template: "<div class=\"fs-column tab-body\">\n  <mat-form-field>\n    <mat-label>Semantic build concurrency</mat-label>\n    <input\n        matInput\n        type=\"number\"\n        [ngModel]=\"concurrency()\"\n        (ngModelChange)=\"concurrency.set($event)\"\n        name=\"semanticBuildConcurrency\"\n        [fsFormRequired]=\"true\"\n        [fsFormInteger]=\"true\"\n        [fsFormMin]=\"min()\"\n        [fsFormMax]=\"max()\">\n    <mat-hint>\n      How many AI calls the semantic-database build runs at once ({{ min() }}\u2013{{ max() }}).\n      Higher is faster but more likely to hit the AI provider's rate limit. Default is 8.\n    </mat-hint>\n  </mat-form-field>\n</div>\n", styles: [".tab-body{padding-top:16px}mat-form-field{display:block;max-width:340px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2$2.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { kind: "directive", type: i2$2.FsFormMinDirective, selector: "[fsFormMin]", inputs: ["fsFormMin", "fsFormMinMessage"] }, { kind: "directive", type: i2$2.FsFormMaxDirective, selector: "[fsFormMax]", inputs: ["fsFormMax", "fsFormMaxMessage"] }, { kind: "directive", type: i2$2.FsFormIntegerDirective, selector: "[fsFormInteger]", inputs: ["fsFormInteger", "fsFormIntegerMessage"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GeneralComponent, decorators: [{
             type: Component,
@@ -4782,7 +5628,7 @@ class GlobalSettingsComponent {
         this.concurrency.set(settings.semanticBuildConcurrency);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GlobalSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: GlobalSettingsComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "semanticDatabase", first: true, predicate: SemanticDatabaseComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<form\n    *fsSkeletonForm=\"loaded()\"\n    fsForm\n    [submit]=\"save\">\n  <fs-dialog>\n    <fs-dialog-title>\n      Report Settings\n    </fs-dialog-title>\n    <mat-dialog-content>\n      <mat-tab-group [(selected)]=\"selectedTab\">\n        <mat-tab\n            label=\"AI Knowledge\"\n            name=\"knowledge\">\n          <fs-ai-report-global-settings-ai-knowledge\n              [content]=\"content()\"\n              (contentChange)=\"content.set($event)\"\n              [config]=\"editorConfig\">\n          </fs-ai-report-global-settings-ai-knowledge>\n        </mat-tab>\n        <mat-tab\n            label=\"Semantic Database\"\n            name=\"build\">\n          <fs-ai-report-global-settings-semantic-database>\n          </fs-ai-report-global-settings-semantic-database>\n        </mat-tab>\n        <mat-tab\n            label=\"General\"\n            name=\"general\">\n          <fs-ai-report-global-settings-general\n              [concurrency]=\"concurrency()\"\n              (concurrencyChange)=\"concurrency.set($event)\"\n              [min]=\"settings()!.semanticBuildConcurrencyMin\"\n              [max]=\"settings()!.semanticBuildConcurrencyMax\">\n          </fs-ai-report-global-settings-general>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <!-- The footer follows the selected tab. AI Knowledge projects its own\n           Save | View History | Cancel row (fs-form-dialog-actions renders\n           projected content after Save/Cancel, so the default pair can't keep\n           View History beside Save); General uses the default Save/Cancel; the\n           Semantic Database tab is a read/run surface, so it gets a primary\n           Close plus its Build/Rebuild/Stop action. -->\n      <fs-form-dialog-actions [save]=\"selectedTab === 'general'\">\n        @if (selectedTab === 'knowledge') {\n          <button\n              type=\"submit\"\n              mat-button\n              color=\"primary\">\n            Save\n          </button>\n          <button\n              type=\"button\"\n              mat-button\n              (click)=\"openHistory()\">\n            View History\n          </button>\n          <button\n              type=\"button\"\n              mat-button\n              [mat-dialog-close]=\"null\">\n            Cancel\n          </button>\n        }\n        @if (selectedTab === 'build') {\n          <button\n              type=\"button\"\n              mat-button\n              color=\"primary\"\n              [mat-dialog-close]=\"undefined\">\n            Close\n          </button>\n        }\n        @if (selectedTab === 'build' && semanticDatabase(); as db) {\n          @if (db.buildActive()) {\n            <button\n                type=\"button\"\n                mat-button\n                color=\"warn\"\n                (click)=\"db.stopBuild()\">\n              Stop Build\n            </button>\n          } @else {\n            @if (db.status(); as buildStatus) {\n              <button\n                  type=\"button\"\n                  mat-button\n                  (click)=\"db.build()\">\n                {{ buildStatus.detail.generatedAt ? 'Rebuild' : 'Build' }}\n              </button>\n            }\n          }\n        }\n      </fs-form-dialog-actions>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FsDialogModule }, { kind: "component", type: i3$2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "component", type: i3$2.FsDialogTitleComponent, selector: "fs-dialog-title", inputs: ["close", "dockToggle", "back"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2$2.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { kind: "component", type: i2$2.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }, { kind: "directive", type: i2$2.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit"] }, { kind: "ngmodule", type: FsSkeletonModule }, { kind: "directive", type: i4.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { kind: "ngmodule", type: FsTabsModule }, { kind: "directive", type: i5.FsTabsHeaderTabGroupDirective, selector: "mat-tab-group, matTabGroup, [matTabGroup]", inputs: ["orientation", "selected", "selectedData"], outputs: ["selectedChange", "selectedDataChange"], exportAs: ["fsTabsHeaderTabGroup"] }, { kind: "directive", type: i5.FsTabsTabDirective, selector: "mat-tab,matTab", inputs: ["name", "data"], exportAs: ["fsTabsTab"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i6.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i6.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: AiKnowledgeComponent, selector: "fs-ai-report-global-settings-ai-knowledge", inputs: ["content", "config"], outputs: ["contentChange"] }, { kind: "component", type: GeneralComponent, selector: "fs-ai-report-global-settings-general", inputs: ["concurrency", "min", "max"], outputs: ["concurrencyChange"] }, { kind: "component", type: SemanticDatabaseComponent, selector: "fs-ai-report-global-settings-semantic-database" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: GlobalSettingsComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "semanticDatabase", first: true, predicate: SemanticDatabaseComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<form\n    *fsSkeletonForm=\"loaded()\"\n    fsForm\n    [submit]=\"save\">\n  <fs-dialog>\n    <fs-dialog-title>\n      Report Settings\n    </fs-dialog-title>\n    <mat-dialog-content>\n      <mat-tab-group [(selected)]=\"selectedTab\">\n        <mat-tab\n            label=\"AI Knowledge\"\n            name=\"knowledge\">\n          <fs-ai-report-global-settings-ai-knowledge\n              [content]=\"content()\"\n              (contentChange)=\"content.set($event)\"\n              [config]=\"editorConfig\">\n          </fs-ai-report-global-settings-ai-knowledge>\n        </mat-tab>\n        <mat-tab\n            label=\"Semantic Database\"\n            name=\"build\">\n          <fs-ai-report-global-settings-semantic-database>\n          </fs-ai-report-global-settings-semantic-database>\n        </mat-tab>\n        <mat-tab\n            label=\"General\"\n            name=\"general\">\n          <fs-ai-report-global-settings-general\n              [concurrency]=\"concurrency()\"\n              (concurrencyChange)=\"concurrency.set($event)\"\n              [min]=\"settings()!.semanticBuildConcurrencyMin\"\n              [max]=\"settings()!.semanticBuildConcurrencyMax\">\n          </fs-ai-report-global-settings-general>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <!-- The footer follows the selected tab. AI Knowledge projects its own\n           Save | View History | Cancel row (fs-form-dialog-actions renders\n           projected content after Save/Cancel, so the default pair can't keep\n           View History beside Save); General uses the default Save/Cancel; the\n           Semantic Database tab is a read/run surface, so it gets a primary\n           Close plus its Build/Rebuild/Stop action. -->\n      <fs-form-dialog-actions [save]=\"selectedTab === 'general'\">\n        @if (selectedTab === 'knowledge') {\n          <button\n              type=\"submit\"\n              mat-button\n              color=\"primary\">\n            Save\n          </button>\n          <button\n              type=\"button\"\n              mat-button\n              (click)=\"openHistory()\">\n            View History\n          </button>\n          <button\n              type=\"button\"\n              mat-button\n              [mat-dialog-close]=\"null\">\n            Cancel\n          </button>\n        }\n        @if (selectedTab === 'build') {\n          <button\n              type=\"button\"\n              mat-button\n              color=\"primary\"\n              [mat-dialog-close]=\"undefined\">\n            Close\n          </button>\n        }\n        @if (selectedTab === 'build' && semanticDatabase(); as db) {\n          @if (db.buildActive()) {\n            <button\n                type=\"button\"\n                mat-button\n                color=\"warn\"\n                (click)=\"db.stopBuild()\">\n              Stop Build\n            </button>\n          } @else {\n            @if (db.status(); as buildStatus) {\n              <button\n                  type=\"button\"\n                  mat-button\n                  (click)=\"db.build()\">\n                {{ buildStatus.detail.generatedAt ? 'Rebuild' : 'Build' }}\n              </button>\n            }\n          }\n        }\n      </fs-form-dialog-actions>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FsDialogModule }, { kind: "component", type: i3$2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "component", type: i3$2.FsDialogTitleComponent, selector: "fs-dialog-title", inputs: ["close", "dockToggle", "back"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2$2.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { kind: "component", type: i2$2.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }, { kind: "directive", type: i2$2.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit"] }, { kind: "ngmodule", type: FsSkeletonModule }, { kind: "directive", type: i4.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { kind: "ngmodule", type: FsTabsModule }, { kind: "directive", type: i5.FsTabsHeaderTabGroupDirective, selector: "mat-tab-group, matTabGroup, [matTabGroup]", inputs: ["orientation", "selected", "selectedData"], outputs: ["selectedChange", "selectedDataChange"], exportAs: ["fsTabsHeaderTabGroup"] }, { kind: "directive", type: i5.FsTabsTabDirective, selector: "mat-tab,matTab", inputs: ["name", "data"], exportAs: ["fsTabsTab"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i6.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i6.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: AiKnowledgeComponent, selector: "fs-ai-report-global-settings-ai-knowledge", inputs: ["content", "config"], outputs: ["contentChange"] }, { kind: "component", type: GeneralComponent, selector: "fs-ai-report-global-settings-general", inputs: ["concurrency", "min", "max"], outputs: ["concurrencyChange"] }, { kind: "component", type: SemanticDatabaseComponent, selector: "fs-ai-report-global-settings-semantic-database" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GlobalSettingsComponent, decorators: [{
             type: Component,
@@ -5310,6 +6156,17 @@ class FsAiReportComponent {
     toggleEditMode() {
         this.editMode = !this.editMode;
     }
+    // The edit tools live in this toolbar, but the canvas owns what they act on
+    // (the active page, the header/footer bands, which layer is live).
+    get isMasterMode() {
+        return this._canvas?.masterMode() ?? false;
+    }
+    addText() {
+        this._canvas?.addText();
+    }
+    toggleMasterMode() {
+        this._canvas?.toggleMasterMode();
+    }
     // Report settings — name, page size, orientation, layout mode, delete. The
     // dialog performs the delete itself; we react to what it reports back.
     reportSettings() {
@@ -5575,8 +6432,8 @@ class FsAiReportComponent {
             ReportPdfService,
             ReportExportService,
             // Tree-shaken ECharts core + the 'report' house theme, loaded lazily.
-            provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-BLtDCank.mjs').then((module) => module.default) }),
-        ], viewQueries: [{ propertyName: "_split", first: true, predicate: ["split"], descendants: true, static: true }, { propertyName: "_chatPanel", first: true, predicate: ["chatPanel"], descendants: true, read: ElementRef, static: true }, { propertyName: "_canvas", first: true, predicate: ReportCanvasComponent, descendants: true }], ngImport: i0, template: "<div class=\"fs-ai-report fs-column\">\r\n\r\n  <div class=\"fs-ai-report__header fs-row.align-center\">\r\n    <h2 class=\"fs-ai-report__title fs-flex\">{{ report?.name }}</h2>\r\n\r\n    @if (report) {\r\n      <!-- Report-level filters, inline with the toolbar actions. fs-filter\r\n           reads its config once at init, so it's keyed on the filter\r\n           signature: when the report-level filter set changes the block is\r\n           recreated and re-reads the rebuilt config. -->\r\n      @if (reportHasFilters) {\r\n        @for (key of [reportFilterKey]; track key) {\r\n          <fs-filter\r\n              class=\"fs-ai-report__filters\"\r\n              [config]=\"reportFilterConfig\">\r\n          </fs-filter>\r\n        }\r\n      }\r\n\r\n      <button\r\n          mat-icon-button\r\n          type=\"button\"\r\n          [matTooltip]=\"editMode ? 'Done' : 'Edit layout'\"\r\n          (click)=\"toggleEditMode()\">\r\n        <mat-icon>{{ editMode ? 'lock' : 'open_with' }}</mat-icon>\r\n      </button>\r\n\r\n      <button\r\n          mat-icon-button\r\n          type=\"button\"\r\n          matTooltip=\"Export\"\r\n          [fsMenuTriggerFor]=\"exportMenu\">\r\n        <mat-icon>download</mat-icon>\r\n      </button>\r\n      <fs-menu #exportMenu>\r\n        <ng-template\r\n            fs-menu-item\r\n            (click)=\"exportPowerpoint()\">\r\n          Export PowerPoint\r\n        </ng-template>\r\n        <ng-template\r\n            fs-menu-item\r\n            (click)=\"exportPdf()\">\r\n          Export PDF\r\n        </ng-template>\r\n        <ng-template\r\n            fs-menu-item\r\n            (click)=\"exportData()\">\r\n          Export Raw Data\r\n        </ng-template>\r\n        @if ((report?.pages?.length ?? 0) > 1) {\r\n          <ng-template\r\n              fs-menu-item\r\n              (click)=\"exportData(true)\">\r\n            Export Raw Data (This Page)\r\n          </ng-template>\r\n        }\r\n      </fs-menu>\r\n\r\n      <button\r\n          mat-icon-button\r\n          type=\"button\"\r\n          matTooltip=\"Report settings\"\r\n          (click)=\"reportSettings()\">\r\n        <mat-icon>settings</mat-icon>\r\n      </button>\r\n    }\r\n  </div>\r\n\r\n  <div\r\n      #split\r\n      class=\"fs-ai-report__split fs-row.align-start\">\r\n    <fs-ai-chat\r\n        #chatPanel\r\n        class=\"chat\"\r\n        [basePath]=\"basePath()\"\r\n        [requestData]=\"chatRequestData()\"\r\n        [ready]=\"chatPageId() !== null\"\r\n        (response)=\"onChatResponse($event)\">\r\n    </fs-ai-chat>\r\n\r\n    <div\r\n        class=\"resizer\"\r\n        (pointerdown)=\"onResizeStart($event)\">\r\n    </div>\r\n\r\n    <div class=\"viewer fs-flex fs-column\">\r\n      @if (report) {\r\n        <app-report-canvas\r\n            [report]=\"report\"\r\n            [editMode]=\"editMode\"\r\n            [pageId]=\"pageId\"\r\n            (componentSettings)=\"componentSettings($event)\"\r\n            (reportChanged)=\"onCanvasReportChanged()\"\r\n            (pageChanged)=\"onCanvasPageChanged($event)\"\r\n            (editDone)=\"toggleEditMode()\">\r\n        </app-report-canvas>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".fs-ai-report{height:100%;min-height:500px;display:flex;flex-direction:column}.fs-ai-report__header{flex:0 0 auto;margin-bottom:10px}.fs-ai-report__title{margin:0;min-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fs-ai-report__filters{flex:0 1 auto;min-width:0;display:block;margin:0 5px 0 0}.fs-ai-report__filters ::ng-deep .filter-bar-container{align-items:center!important}.fs-ai-report__filters ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.fs-ai-report__split{flex:1 1 auto;min-height:0}.fs-ai-report .chat{display:block;flex:0 0 25%;width:100%;height:100%;min-height:400px;min-width:0;border:none}.fs-ai-report .viewer{display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden}.fs-ai-report .resizer{flex:0 0 11px;align-self:stretch;display:flex;justify-content:center;cursor:col-resize;touch-action:none;-webkit-user-select:none;user-select:none}.fs-ai-report .resizer:before{content:\"\";width:3px;border-radius:3px;background:transparent;transition:background-color .12s ease}.fs-ai-report .resizer:hover:before{background:var(--brand-primary-color)}.fs-ai-report__split.resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.fs-ai-report__split.resizing .resizer:before{background:var(--brand-primary-color)}.fs-ai-report__split.resizing .chat,.fs-ai-report__split.resizing .viewer{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: FsFilterModule }, { kind: "component", type: i2.FilterComponent, selector: "fs-filter", inputs: ["config"], outputs: ["closed", "opened", "ready"] }, { kind: "ngmodule", type: FsMenuModule }, { kind: "component", type: i2$1.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i2$1.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "directive", type: i2$1.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { kind: "component", type: FsAiChatComponent, selector: "fs-ai-chat", inputs: ["basePath", "requestData", "ready", "introMessage", "showThinking"], outputs: ["response", "showThinkingChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ReportCanvasComponent, selector: "app-report-canvas", inputs: ["report", "editMode", "pageId"], outputs: ["componentSettings", "reportChanged", "editDone", "pageChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+            provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-dBElcPnl.mjs').then((module) => module.default) }),
+        ], viewQueries: [{ propertyName: "_split", first: true, predicate: ["split"], descendants: true, static: true }, { propertyName: "_chatPanel", first: true, predicate: ["chatPanel"], descendants: true, read: ElementRef, static: true }, { propertyName: "_canvas", first: true, predicate: ReportCanvasComponent, descendants: true }], ngImport: i0, template: "<div class=\"fs-ai-report fs-column\">\n\n  <div class=\"fs-ai-report__header fs-row.align-center\">\n    <h2 class=\"fs-ai-report__title fs-flex\">{{ report?.name }}</h2>\n\n    @if (report) {\n      <!-- Report-level filters, inline with the toolbar actions. fs-filter\n           reads its config once at init, so it's keyed on the filter\n           signature: when the report-level filter set changes the block is\n           recreated and re-reads the rebuilt config. -->\n      @if (reportHasFilters) {\n        @for (key of [reportFilterKey]; track key) {\n          <fs-filter\n              class=\"fs-ai-report__filters\"\n              [config]=\"reportFilterConfig\">\n          </fs-filter>\n        }\n      }\n\n      <!-- What layout editing can add or switch to, and the way out of it.\n           One style for all three \u2014 outlined, icon and text. \"Header & footer\"\n           is a toggle: it keeps its label and turns gray while it is on. -->\n      @if (editMode) {\n        <div class=\"fs-ai-report__edit-tools fs-row.align-center.gap-xs\">\n          <button\n              mat-stroked-button\n              type=\"button\"\n              matTooltip=\"Add a block of text\"\n              (click)=\"addText()\">\n            <mat-icon>title</mat-icon>\n            Add text\n          </button>\n          <button\n              mat-stroked-button\n              type=\"button\"\n              class=\"fs-ai-report__master\"\n              [class.active]=\"isMasterMode\"\n              [matTooltip]=\"isMasterMode ? 'Back to editing this page' : 'Edit the header and footer shown on every page'\"\n              (click)=\"toggleMasterMode()\">\n            <mat-icon>web_asset</mat-icon>\n            Header & footer\n          </button>\n          <button\n              mat-stroked-button\n              type=\"button\"\n              (click)=\"toggleEditMode()\">\n            <mat-icon>check</mat-icon>\n            Done editing\n          </button>\n        </div>\n      }\n\n      <!-- One icon for both states: it reads as pressed while editing rather\n           than swapping to something else. -->\n      <button\n          mat-icon-button\n          type=\"button\"\n          class=\"fs-ai-report__toggle\"\n          [class.active]=\"editMode\"\n          [matTooltip]=\"editMode ? 'Done editing' : 'Edit layout'\"\n          (click)=\"toggleEditMode()\">\n        <mat-icon>dashboard_customize</mat-icon>\n      </button>\n\n      <button\n          mat-icon-button\n          type=\"button\"\n          matTooltip=\"Export\"\n          [fsMenuTriggerFor]=\"exportMenu\">\n        <mat-icon>download</mat-icon>\n      </button>\n      <fs-menu #exportMenu>\n        <ng-template\n            fs-menu-item\n            (click)=\"exportPowerpoint()\">\n          Export PowerPoint\n        </ng-template>\n        <ng-template\n            fs-menu-item\n            (click)=\"exportPdf()\">\n          Export PDF\n        </ng-template>\n        <ng-template\n            fs-menu-item\n            (click)=\"exportData()\">\n          Export Raw Data\n        </ng-template>\n        @if ((report?.pages?.length ?? 0) > 1) {\n          <ng-template\n              fs-menu-item\n              (click)=\"exportData(true)\">\n            Export Raw Data (This Page)\n          </ng-template>\n        }\n      </fs-menu>\n\n      <button\n          mat-icon-button\n          type=\"button\"\n          matTooltip=\"Report settings\"\n          (click)=\"reportSettings()\">\n        <mat-icon>settings</mat-icon>\n      </button>\n    }\n  </div>\n\n  <div\n      #split\n      class=\"fs-ai-report__split fs-row.align-start\">\n    <fs-ai-chat\n        #chatPanel\n        class=\"chat\"\n        [basePath]=\"basePath()\"\n        [requestData]=\"chatRequestData()\"\n        [ready]=\"chatPageId() !== null\"\n        (response)=\"onChatResponse($event)\">\n    </fs-ai-chat>\n\n    <div\n        class=\"resizer\"\n        (pointerdown)=\"onResizeStart($event)\">\n    </div>\n\n    <div class=\"viewer fs-flex fs-column\">\n      @if (report) {\n        <app-report-canvas\n            [report]=\"report\"\n            [editMode]=\"editMode\"\n            [pageId]=\"pageId\"\n            (componentSettings)=\"componentSettings($event)\"\n            (reportChanged)=\"onCanvasReportChanged()\"\n            (pageChanged)=\"onCanvasPageChanged($event)\">\n        </app-report-canvas>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".fs-ai-report{height:100%;min-height:500px;display:flex;flex-direction:column}.fs-ai-report__header{flex:0 0 auto;margin-bottom:10px}.fs-ai-report__title{margin:0;min-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fs-ai-report__filters{flex:0 1 auto;min-width:0;display:block;margin:0 5px 0 0}.fs-ai-report__filters ::ng-deep .filter-bar-container{align-items:center!important}.fs-ai-report__filters ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.fs-ai-report__toggle.active{background:#e3ecf7;color:var(--brand-primary-color, #2196f3)}.fs-ai-report__master.active{background:#eceff3}.fs-ai-report__edit-tools{margin:0 5px}.fs-ai-report__split{flex:1 1 auto;min-height:0}.fs-ai-report .chat{display:block;flex:0 0 25%;width:100%;height:100%;min-height:400px;min-width:0;border:none}.fs-ai-report .viewer{display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden}.fs-ai-report .resizer{flex:0 0 11px;align-self:stretch;display:flex;justify-content:center;cursor:col-resize;touch-action:none;-webkit-user-select:none;user-select:none}.fs-ai-report .resizer:before{content:\"\";width:3px;border-radius:3px;background:transparent;transition:background-color .12s ease}.fs-ai-report .resizer:hover:before{background:var(--brand-primary-color)}.fs-ai-report__split.resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.fs-ai-report__split.resizing .resizer:before{background:var(--brand-primary-color)}.fs-ai-report__split.resizing .chat,.fs-ai-report__split.resizing .viewer{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: FsFilterModule }, { kind: "component", type: i2.FilterComponent, selector: "fs-filter", inputs: ["config"], outputs: ["closed", "opened", "ready"] }, { kind: "ngmodule", type: FsMenuModule }, { kind: "component", type: i2$1.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i2$1.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "directive", type: i2$1.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { kind: "component", type: FsAiChatComponent, selector: "fs-ai-chat", inputs: ["basePath", "requestData", "ready", "introMessage", "showThinking"], outputs: ["response", "showThinkingChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ReportCanvasComponent, selector: "app-report-canvas", inputs: ["report", "editMode", "pageId"], outputs: ["componentSettings", "reportChanged", "pageChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FsAiReportComponent, decorators: [{
             type: Component,
@@ -5589,7 +6446,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         ReportPdfService,
                         ReportExportService,
                         // Tree-shaken ECharts core + the 'report' house theme, loaded lazily.
-                        provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-BLtDCank.mjs').then((module) => module.default) }),
+                        provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-dBElcPnl.mjs').then((module) => module.default) }),
                     ], imports: [
                         FsFilterModule,
                         FsMenuModule,
@@ -5598,7 +6455,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         MatIconModule,
                         MatTooltipModule,
                         ReportCanvasComponent,
-                    ], template: "<div class=\"fs-ai-report fs-column\">\r\n\r\n  <div class=\"fs-ai-report__header fs-row.align-center\">\r\n    <h2 class=\"fs-ai-report__title fs-flex\">{{ report?.name }}</h2>\r\n\r\n    @if (report) {\r\n      <!-- Report-level filters, inline with the toolbar actions. fs-filter\r\n           reads its config once at init, so it's keyed on the filter\r\n           signature: when the report-level filter set changes the block is\r\n           recreated and re-reads the rebuilt config. -->\r\n      @if (reportHasFilters) {\r\n        @for (key of [reportFilterKey]; track key) {\r\n          <fs-filter\r\n              class=\"fs-ai-report__filters\"\r\n              [config]=\"reportFilterConfig\">\r\n          </fs-filter>\r\n        }\r\n      }\r\n\r\n      <button\r\n          mat-icon-button\r\n          type=\"button\"\r\n          [matTooltip]=\"editMode ? 'Done' : 'Edit layout'\"\r\n          (click)=\"toggleEditMode()\">\r\n        <mat-icon>{{ editMode ? 'lock' : 'open_with' }}</mat-icon>\r\n      </button>\r\n\r\n      <button\r\n          mat-icon-button\r\n          type=\"button\"\r\n          matTooltip=\"Export\"\r\n          [fsMenuTriggerFor]=\"exportMenu\">\r\n        <mat-icon>download</mat-icon>\r\n      </button>\r\n      <fs-menu #exportMenu>\r\n        <ng-template\r\n            fs-menu-item\r\n            (click)=\"exportPowerpoint()\">\r\n          Export PowerPoint\r\n        </ng-template>\r\n        <ng-template\r\n            fs-menu-item\r\n            (click)=\"exportPdf()\">\r\n          Export PDF\r\n        </ng-template>\r\n        <ng-template\r\n            fs-menu-item\r\n            (click)=\"exportData()\">\r\n          Export Raw Data\r\n        </ng-template>\r\n        @if ((report?.pages?.length ?? 0) > 1) {\r\n          <ng-template\r\n              fs-menu-item\r\n              (click)=\"exportData(true)\">\r\n            Export Raw Data (This Page)\r\n          </ng-template>\r\n        }\r\n      </fs-menu>\r\n\r\n      <button\r\n          mat-icon-button\r\n          type=\"button\"\r\n          matTooltip=\"Report settings\"\r\n          (click)=\"reportSettings()\">\r\n        <mat-icon>settings</mat-icon>\r\n      </button>\r\n    }\r\n  </div>\r\n\r\n  <div\r\n      #split\r\n      class=\"fs-ai-report__split fs-row.align-start\">\r\n    <fs-ai-chat\r\n        #chatPanel\r\n        class=\"chat\"\r\n        [basePath]=\"basePath()\"\r\n        [requestData]=\"chatRequestData()\"\r\n        [ready]=\"chatPageId() !== null\"\r\n        (response)=\"onChatResponse($event)\">\r\n    </fs-ai-chat>\r\n\r\n    <div\r\n        class=\"resizer\"\r\n        (pointerdown)=\"onResizeStart($event)\">\r\n    </div>\r\n\r\n    <div class=\"viewer fs-flex fs-column\">\r\n      @if (report) {\r\n        <app-report-canvas\r\n            [report]=\"report\"\r\n            [editMode]=\"editMode\"\r\n            [pageId]=\"pageId\"\r\n            (componentSettings)=\"componentSettings($event)\"\r\n            (reportChanged)=\"onCanvasReportChanged()\"\r\n            (pageChanged)=\"onCanvasPageChanged($event)\"\r\n            (editDone)=\"toggleEditMode()\">\r\n        </app-report-canvas>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".fs-ai-report{height:100%;min-height:500px;display:flex;flex-direction:column}.fs-ai-report__header{flex:0 0 auto;margin-bottom:10px}.fs-ai-report__title{margin:0;min-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fs-ai-report__filters{flex:0 1 auto;min-width:0;display:block;margin:0 5px 0 0}.fs-ai-report__filters ::ng-deep .filter-bar-container{align-items:center!important}.fs-ai-report__filters ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.fs-ai-report__split{flex:1 1 auto;min-height:0}.fs-ai-report .chat{display:block;flex:0 0 25%;width:100%;height:100%;min-height:400px;min-width:0;border:none}.fs-ai-report .viewer{display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden}.fs-ai-report .resizer{flex:0 0 11px;align-self:stretch;display:flex;justify-content:center;cursor:col-resize;touch-action:none;-webkit-user-select:none;user-select:none}.fs-ai-report .resizer:before{content:\"\";width:3px;border-radius:3px;background:transparent;transition:background-color .12s ease}.fs-ai-report .resizer:hover:before{background:var(--brand-primary-color)}.fs-ai-report__split.resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.fs-ai-report__split.resizing .resizer:before{background:var(--brand-primary-color)}.fs-ai-report__split.resizing .chat,.fs-ai-report__split.resizing .viewer{pointer-events:none}\n"] }]
+                    ], template: "<div class=\"fs-ai-report fs-column\">\n\n  <div class=\"fs-ai-report__header fs-row.align-center\">\n    <h2 class=\"fs-ai-report__title fs-flex\">{{ report?.name }}</h2>\n\n    @if (report) {\n      <!-- Report-level filters, inline with the toolbar actions. fs-filter\n           reads its config once at init, so it's keyed on the filter\n           signature: when the report-level filter set changes the block is\n           recreated and re-reads the rebuilt config. -->\n      @if (reportHasFilters) {\n        @for (key of [reportFilterKey]; track key) {\n          <fs-filter\n              class=\"fs-ai-report__filters\"\n              [config]=\"reportFilterConfig\">\n          </fs-filter>\n        }\n      }\n\n      <!-- What layout editing can add or switch to, and the way out of it.\n           One style for all three \u2014 outlined, icon and text. \"Header & footer\"\n           is a toggle: it keeps its label and turns gray while it is on. -->\n      @if (editMode) {\n        <div class=\"fs-ai-report__edit-tools fs-row.align-center.gap-xs\">\n          <button\n              mat-stroked-button\n              type=\"button\"\n              matTooltip=\"Add a block of text\"\n              (click)=\"addText()\">\n            <mat-icon>title</mat-icon>\n            Add text\n          </button>\n          <button\n              mat-stroked-button\n              type=\"button\"\n              class=\"fs-ai-report__master\"\n              [class.active]=\"isMasterMode\"\n              [matTooltip]=\"isMasterMode ? 'Back to editing this page' : 'Edit the header and footer shown on every page'\"\n              (click)=\"toggleMasterMode()\">\n            <mat-icon>web_asset</mat-icon>\n            Header & footer\n          </button>\n          <button\n              mat-stroked-button\n              type=\"button\"\n              (click)=\"toggleEditMode()\">\n            <mat-icon>check</mat-icon>\n            Done editing\n          </button>\n        </div>\n      }\n\n      <!-- One icon for both states: it reads as pressed while editing rather\n           than swapping to something else. -->\n      <button\n          mat-icon-button\n          type=\"button\"\n          class=\"fs-ai-report__toggle\"\n          [class.active]=\"editMode\"\n          [matTooltip]=\"editMode ? 'Done editing' : 'Edit layout'\"\n          (click)=\"toggleEditMode()\">\n        <mat-icon>dashboard_customize</mat-icon>\n      </button>\n\n      <button\n          mat-icon-button\n          type=\"button\"\n          matTooltip=\"Export\"\n          [fsMenuTriggerFor]=\"exportMenu\">\n        <mat-icon>download</mat-icon>\n      </button>\n      <fs-menu #exportMenu>\n        <ng-template\n            fs-menu-item\n            (click)=\"exportPowerpoint()\">\n          Export PowerPoint\n        </ng-template>\n        <ng-template\n            fs-menu-item\n            (click)=\"exportPdf()\">\n          Export PDF\n        </ng-template>\n        <ng-template\n            fs-menu-item\n            (click)=\"exportData()\">\n          Export Raw Data\n        </ng-template>\n        @if ((report?.pages?.length ?? 0) > 1) {\n          <ng-template\n              fs-menu-item\n              (click)=\"exportData(true)\">\n            Export Raw Data (This Page)\n          </ng-template>\n        }\n      </fs-menu>\n\n      <button\n          mat-icon-button\n          type=\"button\"\n          matTooltip=\"Report settings\"\n          (click)=\"reportSettings()\">\n        <mat-icon>settings</mat-icon>\n      </button>\n    }\n  </div>\n\n  <div\n      #split\n      class=\"fs-ai-report__split fs-row.align-start\">\n    <fs-ai-chat\n        #chatPanel\n        class=\"chat\"\n        [basePath]=\"basePath()\"\n        [requestData]=\"chatRequestData()\"\n        [ready]=\"chatPageId() !== null\"\n        (response)=\"onChatResponse($event)\">\n    </fs-ai-chat>\n\n    <div\n        class=\"resizer\"\n        (pointerdown)=\"onResizeStart($event)\">\n    </div>\n\n    <div class=\"viewer fs-flex fs-column\">\n      @if (report) {\n        <app-report-canvas\n            [report]=\"report\"\n            [editMode]=\"editMode\"\n            [pageId]=\"pageId\"\n            (componentSettings)=\"componentSettings($event)\"\n            (reportChanged)=\"onCanvasReportChanged()\"\n            (pageChanged)=\"onCanvasPageChanged($event)\">\n        </app-report-canvas>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".fs-ai-report{height:100%;min-height:500px;display:flex;flex-direction:column}.fs-ai-report__header{flex:0 0 auto;margin-bottom:10px}.fs-ai-report__title{margin:0;min-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fs-ai-report__filters{flex:0 1 auto;min-width:0;display:block;margin:0 5px 0 0}.fs-ai-report__filters ::ng-deep .filter-bar-container{align-items:center!important}.fs-ai-report__filters ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.fs-ai-report__toggle.active{background:#e3ecf7;color:var(--brand-primary-color, #2196f3)}.fs-ai-report__master.active{background:#eceff3}.fs-ai-report__edit-tools{margin:0 5px}.fs-ai-report__split{flex:1 1 auto;min-height:0}.fs-ai-report .chat{display:block;flex:0 0 25%;width:100%;height:100%;min-height:400px;min-width:0;border:none}.fs-ai-report .viewer{display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden}.fs-ai-report .resizer{flex:0 0 11px;align-self:stretch;display:flex;justify-content:center;cursor:col-resize;touch-action:none;-webkit-user-select:none;user-select:none}.fs-ai-report .resizer:before{content:\"\";width:3px;border-radius:3px;background:transparent;transition:background-color .12s ease}.fs-ai-report .resizer:hover:before{background:var(--brand-primary-color)}.fs-ai-report__split.resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.fs-ai-report__split.resizing .resizer:before{background:var(--brand-primary-color)}.fs-ai-report__split.resizing .chat,.fs-ai-report__split.resizing .viewer{pointer-events:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { _split: [{
                 type: ViewChild,
                 args: ['split', { static: true }]
@@ -5623,4 +6480,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  */
 
 export { FsAiReportsComponent as F, GRANULARITY_OPTIONS as G, REPORT_CHART_COLORS_CSS as R, ReportComponent as a, FsAiReportComponent as b, ReportData as c, ReportService as d, ReportFilterStateService as e, ReportNodeType as f, ReportState as g, ReportStates as h };
-//# sourceMappingURL=firestitch-report-firestitch-report-eTeJyMPo.mjs.map
+//# sourceMappingURL=firestitch-report-firestitch-report-DhxGcHlU.mjs.map