@firestitch/report 18.15.0 → 18.16.0

package/fesm2022/{firestitch-report-echarts-DY_CfeEH.mjs → firestitch-report-echarts-DSSjvu3O.mjs}

@@ -4,7 +4,7 @@ import * as echarts from 'echarts/core';
 export { echarts as default };
 import { LabelLayout } from 'echarts/features';
 import { CanvasRenderer } from 'echarts/renderers';
-import { R as REPORT_CHART_COLORS_CSS, a as REPORT_CHART_FONT_FAMILY, b as REPORT_AXIS_LABEL_FONT_SIZE } from './firestitch-report-firestitch-report-YDtFbTwA.mjs';
+import { R as REPORT_CHART_COLORS_CSS, a as REPORT_CHART_FONT_FAMILY, b as REPORT_AXIS_LABEL_FONT_SIZE } from './firestitch-report-firestitch-report-C-jf2brZ.mjs';
 
 // Tree-shaken ECharts build for the reports renderer: only the chart types and
 // components the option-builder emits are registered, keeping the lazy chunk
@@ -63,4 +63,4 @@ echarts.registerTheme('report', {
         axisLabel: { color: '#52606d', fontSize: REPORT_AXIS_LABEL_FONT_SIZE },
     },
 });
-//# sourceMappingURL=firestitch-report-echarts-DY_CfeEH.mjs.map
+//# sourceMappingURL=firestitch-report-echarts-DSSjvu3O.mjs.map

package/fesm2022/{firestitch-report-echarts-DY_CfeEH.mjs.map → firestitch-report-echarts-DSSjvu3O.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"firestitch-report-echarts-DY_CfeEH.mjs","sources":["../../src/app/reports/theme/echarts.ts"],"sourcesContent":["// Tree-shaken ECharts build for the reports renderer: only the chart types and\n// components the option-builder emits are registered, keeping the lazy chunk\n// lean. Loaded on demand by ngx-echarts via provideEchartsCore — see\n// REPORT_ECHARTS_PROVIDERS in reports-echarts.provider.ts.\n//\n// The canvas renderer (not SVG) is deliberate: chart.getDataURL() needs it for\n// the high-res images the PPT/PDF exports will use.\n\nimport { BarChart, LineChart, PieChart } from 'echarts/charts';\nimport {\n  DatasetComponent,\n  GridComponent,\n  LegendComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  TooltipComponent,\n} from 'echarts/components';\nimport * as echarts from 'echarts/core';\nimport { LabelLayout } from 'echarts/features';\nimport { CanvasRenderer } from 'echarts/renderers';\n\nimport { REPORT_CHART_COLORS_CSS } from './palette';\nimport { REPORT_AXIS_LABEL_FONT_SIZE, REPORT_CHART_FONT_FAMILY } from './typography';\n\necharts.use([\n  BarChart,\n  LineChart,\n  PieChart,\n  GridComponent,\n  TooltipComponent,\n  LegendComponent,\n  DatasetComponent,\n  // Reference lines and statistic lines (markLine), reference bands\n  // (markArea), and the overlap hiding of 'auto' data labels (LabelLayout).\n  MarkLineComponent,\n  MarkAreaComponent,\n  LabelLayout,\n  CanvasRenderer,\n]);\n\n// The house theme — the single place report chart \"standards\" live (palette,\n// typography, tooltip styling). Polished defaults now; refined in the polish\n// phase.\necharts.registerTheme('report', {\n  color: REPORT_CHART_COLORS_CSS,\n  textStyle: {\n    fontFamily: REPORT_CHART_FONT_FAMILY,\n  },\n  title: {\n    textStyle: { color: '#1f2933', fontSize: 14, fontWeight: 600 },\n  },\n  legend: {\n    textStyle: { color: '#52606d', fontSize: 11 },\n  },\n  tooltip: {\n    backgroundColor: 'rgba(31, 41, 51, 0.92)',\n    borderWidth: 0,\n    textStyle: { color: '#fff', fontSize: 12 },\n  },\n  categoryAxis: {\n    axisLine: { lineStyle: { color: '#cbd2d9' } },\n    axisTick: { show: false },\n    axisLabel: { color: '#52606d', fontSize: REPORT_AXIS_LABEL_FONT_SIZE },\n    splitLine: { show: false },\n  },\n  valueAxis: {\n    axisLine: { show: false },\n    axisLabel: { color: '#52606d', fontSize: REPORT_AXIS_LABEL_FONT_SIZE },\n    splitLine: { lineStyle: { color: '#e4e7eb' } },\n  },\n  timeAxis: {\n    axisLine: { lineStyle: { color: '#cbd2d9' } },\n    axisLabel: { color: '#52606d', fontSize: REPORT_AXIS_LABEL_FONT_SIZE },\n  },\n});\n\nexport default echarts;\n"],"names":[],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAkBA,OAAO,CAAC,GAAG,CAAC;IACV,QAAQ;IACR,SAAS;IACT,QAAQ;IACR,aAAa;IACb,gBAAgB;IAChB,eAAe;IACf,gBAAgB;;;IAGhB,iBAAiB;IACjB,iBAAiB;IACjB,WAAW;IACX,cAAc;AACf,CAAA,CAAC,CAAC;AAEH;AACA;AACA;AACA,OAAO,CAAC,aAAa,CAAC,QAAQ,EAAE;AAC9B,IAAA,KAAK,EAAE,uBAAuB;AAC9B,IAAA,SAAS,EAAE;AACT,QAAA,UAAU,EAAE,wBAAwB;AACrC,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,SAAS,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE;AAC/D,KAAA;AACD,IAAA,MAAM,EAAE;QACN,SAAS,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE;AAC9C,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,eAAe,EAAE,wBAAwB;AACzC,QAAA,WAAW,EAAE,CAAC;QACd,SAAS,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE;AAC3C,KAAA;AACD,IAAA,YAAY,EAAE;QACZ,QAAQ,EAAE,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;AAC7C,QAAA,QAAQ,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;QACzB,SAAS,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,2BAA2B,EAAE;AACtE,QAAA,SAAS,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;AAC3B,KAAA;AACD,IAAA,SAAS,EAAE;AACT,QAAA,QAAQ,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;QACzB,SAAS,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,2BAA2B,EAAE;QACtE,SAAS,EAAE,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;AAC/C,KAAA;AACD,IAAA,QAAQ,EAAE;QACR,QAAQ,EAAE,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;QAC7C,SAAS,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,2BAA2B,EAAE;AACvE,KAAA;AACF,CAAA,CAAC"}
+{"version":3,"file":"firestitch-report-echarts-DSSjvu3O.mjs","sources":["../../src/app/reports/theme/echarts.ts"],"sourcesContent":["// Tree-shaken ECharts build for the reports renderer: only the chart types and\n// components the option-builder emits are registered, keeping the lazy chunk\n// lean. Loaded on demand by ngx-echarts via provideEchartsCore — see\n// REPORT_ECHARTS_PROVIDERS in reports-echarts.provider.ts.\n//\n// The canvas renderer (not SVG) is deliberate: chart.getDataURL() needs it for\n// the high-res images the PPT/PDF exports will use.\n\nimport { BarChart, LineChart, PieChart } from 'echarts/charts';\nimport {\n  DatasetComponent,\n  GridComponent,\n  LegendComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  TooltipComponent,\n} from 'echarts/components';\nimport * as echarts from 'echarts/core';\nimport { LabelLayout } from 'echarts/features';\nimport { CanvasRenderer } from 'echarts/renderers';\n\nimport { REPORT_CHART_COLORS_CSS } from './palette';\nimport { REPORT_AXIS_LABEL_FONT_SIZE, REPORT_CHART_FONT_FAMILY } from './typography';\n\necharts.use([\n  BarChart,\n  LineChart,\n  PieChart,\n  GridComponent,\n  TooltipComponent,\n  LegendComponent,\n  DatasetComponent,\n  // Reference lines and statistic lines (markLine), reference bands\n  // (markArea), and the overlap hiding of 'auto' data labels (LabelLayout).\n  MarkLineComponent,\n  MarkAreaComponent,\n  LabelLayout,\n  CanvasRenderer,\n]);\n\n// The house theme — the single place report chart \"standards\" live (palette,\n// typography, tooltip styling). Polished defaults now; refined in the polish\n// phase.\necharts.registerTheme('report', {\n  color: REPORT_CHART_COLORS_CSS,\n  textStyle: {\n    fontFamily: REPORT_CHART_FONT_FAMILY,\n  },\n  title: {\n    textStyle: { color: '#1f2933', fontSize: 14, fontWeight: 600 },\n  },\n  legend: {\n    textStyle: { color: '#52606d', fontSize: 11 },\n  },\n  tooltip: {\n    backgroundColor: 'rgba(31, 41, 51, 0.92)',\n    borderWidth: 0,\n    textStyle: { color: '#fff', fontSize: 12 },\n  },\n  categoryAxis: {\n    axisLine: { lineStyle: { color: '#cbd2d9' } },\n    axisTick: { show: false },\n    axisLabel: { color: '#52606d', fontSize: REPORT_AXIS_LABEL_FONT_SIZE },\n    splitLine: { show: false },\n  },\n  valueAxis: {\n    axisLine: { show: false },\n    axisLabel: { color: '#52606d', fontSize: REPORT_AXIS_LABEL_FONT_SIZE },\n    splitLine: { lineStyle: { color: '#e4e7eb' } },\n  },\n  timeAxis: {\n    axisLine: { lineStyle: { color: '#cbd2d9' } },\n    axisLabel: { color: '#52606d', fontSize: REPORT_AXIS_LABEL_FONT_SIZE },\n  },\n});\n\nexport default echarts;\n"],"names":[],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAkBA,OAAO,CAAC,GAAG,CAAC;IACV,QAAQ;IACR,SAAS;IACT,QAAQ;IACR,aAAa;IACb,gBAAgB;IAChB,eAAe;IACf,gBAAgB;;;IAGhB,iBAAiB;IACjB,iBAAiB;IACjB,WAAW;IACX,cAAc;AACf,CAAA,CAAC,CAAC;AAEH;AACA;AACA;AACA,OAAO,CAAC,aAAa,CAAC,QAAQ,EAAE;AAC9B,IAAA,KAAK,EAAE,uBAAuB;AAC9B,IAAA,SAAS,EAAE;AACT,QAAA,UAAU,EAAE,wBAAwB;AACrC,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,SAAS,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE;AAC/D,KAAA;AACD,IAAA,MAAM,EAAE;QACN,SAAS,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE;AAC9C,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,eAAe,EAAE,wBAAwB;AACzC,QAAA,WAAW,EAAE,CAAC;QACd,SAAS,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE;AAC3C,KAAA;AACD,IAAA,YAAY,EAAE;QACZ,QAAQ,EAAE,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;AAC7C,QAAA,QAAQ,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;QACzB,SAAS,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,2BAA2B,EAAE;AACtE,QAAA,SAAS,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;AAC3B,KAAA;AACD,IAAA,SAAS,EAAE;AACT,QAAA,QAAQ,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;QACzB,SAAS,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,2BAA2B,EAAE;QACtE,SAAS,EAAE,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;AAC/C,KAAA;AACD,IAAA,QAAQ,EAAE;QACR,QAAQ,EAAE,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;QAC7C,SAAS,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,2BAA2B,EAAE;AACvE,KAAA;AACF,CAAA,CAAC"}

package/fesm2022/{firestitch-report-firestitch-report-YDtFbTwA.mjs → firestitch-report-firestitch-report-C-jf2brZ.mjs}

@@ -11152,7 +11152,9 @@ function optionNamesKey(groupId, values) {
 // 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.
+// are drawn as guides while editing and are snap lines for both layers. While
+// the header and footer are edited, an empty band says how to fill it, and
+// double-clicking a band adds a text block there with its editor open.
 //
 // Live values: a text block shows numbers inline ({{value.key}}). A value is
 // never drawn; it belongs to the page whose text shows it (the master for a
@@ -11243,6 +11245,9 @@ class ReportCanvasComponent {
     // the same page stays quiet — hosts reload on this and an unchanged page is
     // not news.
     _emittedPageId = null;
+    // A text block added by double-clicking a band, whose editor opens once the
+    // reloaded report draws it.
+    _editOnArrival = null;
     // The report input as a signal, for the token contexts and the master's
     // drawn components. Notifies on every set: a reload hands over a new report
     // even when nothing a token shows moved, and a deleted header or footer
@@ -11347,6 +11352,9 @@ class ReportCanvasComponent {
         // Fit the page to the viewport once on first render; after that the
         // viewer's zoom choice is respected across re-renders.
         setTimeout(() => this.zoomFit());
+        this._renderedComponents.changes
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => this._editArrivedText());
     }
     get activePage() {
         return this.pages()[this.activePageIndex()] ?? null;
@@ -11397,6 +11405,37 @@ class ReportCanvasComponent {
             .pipe(takeUntilDestroyed(this._destroyRef))
             .subscribe(() => this.reportChanged.emit());
     }
+    // Whether no header or footer block reaches into the band, so it shows how
+    // to fill it. Read on every check: a drag moves a block in place.
+    isBandEmpty(band) {
+        const { top, bottom } = this._bandSpan(band);
+        return !this.masterComponents()
+            .some((component) => component.y < bottom && component.y + component.h > top);
+    }
+    // Double-clicking a band while editing the header and footer adds a text
+    // block where it was clicked, the band's height, and opens its editor once
+    // the host's reload draws it — the way into a header in Word.
+    addTextInBand(band, event) {
+        if (!this.isMasterEditing) {
+            return;
+        }
+        const { top, bottom } = this._bandSpan(band);
+        const pageWidth = this.report.pageWidth;
+        const rect = event.currentTarget.getBoundingClientRect();
+        const clickX = ((event.clientX - rect.left) / rect.width) * pageWidth;
+        const w = Math.min(4, pageWidth - 1);
+        this._reportData.addText(this.report.id, {
+            x: Math.min(Math.max(0, clickX), pageWidth - w),
+            y: top + 0.05,
+            w,
+            h: Math.max(0.3, bottom - top - 0.1),
+        })
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe((text) => {
+            this._editOnArrival = text.id;
+            this.reportChanged.emit();
+        });
+    }
     // A text block deleted itself from its menu: drop it from whichever layer it
     // was on without re-fetching the report. That covers the block alone: the
     // delete also takes the values only it showed, which come back as
@@ -11807,6 +11846,23 @@ class ReportCanvasComponent {
     _isMasterComponent(component) {
         return (this.report?.master?.components ?? []).some((candidate) => candidate.id === component.id);
     }
+    // A band's top and bottom edges, in page inches.
+    _bandSpan(band) {
+        const { headerHeight, footerHeight } = this.bands;
+        return band === 'header'
+            ? { top: 0, bottom: headerHeight }
+            : { top: this.report.pageHeight - footerHeight, bottom: this.report.pageHeight };
+    }
+    // Opens the editor of a block added by double-clicking a band, once it is
+    // drawn.
+    _editArrivedText() {
+        const text = this._renderedComponents
+            .find((rendered) => rendered.component.id === this._editOnArrival);
+        if (text) {
+            this._editOnArrival = null;
+            text.editText();
+        }
+    }
     // ----- smart guides ---------------------------------------------------------
     // Pixel feel of the snap, converted to inches at the current zoom.
     get _snapThreshold() {
@@ -11949,7 +12005,7 @@ class ReportCanvasComponent {
         this._guides?.nativeElement?.replaceChildren();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportCanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ReportCanvasComponent, isStandalone: true, selector: "app-report-canvas", inputs: { report: "report", editMode: "editMode", pageId: "pageId" }, outputs: { componentSettings: "componentSettings", reportChanged: "reportChanged", 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      wheel=\"modifier\"\n      [zoomMin]=\"0.1\"\n      [zoomMax]=\"3\"\n      (zoomed)=\"onZoomed($event)\">\n      @if (activePage) {\n        <div\n          class=\"page\"\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.--canvas-zoom]=\"zoom()\"\n          [style.--report-heading-size.px]=\"headingSizePx\">\n          <!-- The header and footer: the master's components, drawn under the\n               page's own. -->\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                  [zoom]=\"zoom()\"\n                  [snapper]=\"snapper\"\n                  [tokens]=\"masterTokens()\"\n                  [valueKeysElsewhere]=\"valueKeysElsewhere\"\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                  (valueSettings)=\"openValueSettings(component, $event)\"\n                  (textSaved)=\"onTextSaved(component, $event)\"\n                  (valuesRemoved)=\"reportChanged.emit()\">\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          @for (component of activePageComponents(); track component.id) {\n            <app-report-component\n              [reportId]=\"report.id\"\n              [component]=\"component\"\n              [groups]=\"groups\"\n              [editMode]=\"isPageEditing\"\n              [zoom]=\"zoom()\"\n              [snapper]=\"snapper\"\n              [tokens]=\"pageTokens()\"\n              [valueKeysElsewhere]=\"valueKeysElsewhere\"\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              (valueSettings)=\"openValueSettings(component, $event)\"\n              (textSaved)=\"onTextSaved(component, $event)\"\n              (valuesRemoved)=\"reportChanged.emit()\">\n            </app-report-component>\n          }\n\n          <div\n            #guides\n            class=\"guides\">\n          </div>\n\n          @if (!activePageComponents().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 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 (Ctrl/Cmd + scroll)\"\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 (Ctrl/Cmd + scroll)\"\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.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.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i2.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "directive", type: i2.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { kind: "ngmodule", type: FsZoomPanModule }, { kind: "component", type: i3$1.FsZoomPanComponent, selector: "fs-zoom-pan", inputs: ["zoomMax", "zoomMin", "zoomScale", "zoomDefault", "zoomFactor", "zoomFit", "fitMode", "fitPosition", "fitPadding", "fitMaxScale", "wheel", "top", "left"], outputs: ["moved", "zoomed"] }, { kind: "component", type: ReportComponentComponent, selector: "app-report-component", inputs: ["reportId", "component", "groups", "editMode", "zoom", "snapper", "selected", "tokens", "valueKeysElsewhere"], outputs: ["selectComponent", "positionChanged", "openSettings", "removed", "valueSettings", "textSaved", "valuesRemoved"] }], 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      wheel=\"modifier\"\n      [zoomMin]=\"0.1\"\n      [zoomMax]=\"3\"\n      (zoomed)=\"onZoomed($event)\">\n      @if (activePage) {\n        <div\n          class=\"page\"\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.--canvas-zoom]=\"zoom()\"\n          [style.--report-heading-size.px]=\"headingSizePx\">\n          <!-- The header and footer: the master's components, drawn under the\n               page's own. -->\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                  [zoom]=\"zoom()\"\n                  [snapper]=\"snapper\"\n                  [tokens]=\"masterTokens()\"\n                  [valueKeysElsewhere]=\"valueKeysElsewhere\"\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                  (valueSettings)=\"openValueSettings(component, $event)\"\n                  (textSaved)=\"onTextSaved(component, $event)\"\n                  (valuesRemoved)=\"reportChanged.emit()\">\n                </app-report-component>\n              }\n            </div>\n          }\n\n          <!-- The header and footer bands, as guides while editing. While the\n               header and footer are edited, an empty band says how to fill it\n               and a double-click adds a text block there. -->\n          @if (editMode) {\n            @if (bands.headerHeight) {\n              <div\n                class=\"band band-header\"\n                [class.addable]=\"isMasterEditing\"\n                [style.height.px]=\"bands.headerHeight * PX\"\n                (dblclick)=\"addTextInBand('header', $event)\">\n                @if (isMasterEditing) {\n                  <span class=\"band-label small\">Header</span>\n                  @if (isBandEmpty('header')) {\n                    <span class=\"band-hint small\">Double-click to add text</span>\n                  }\n                }\n              </div>\n            }\n            @if (bands.footerHeight) {\n              <div\n                class=\"band band-footer\"\n                [class.addable]=\"isMasterEditing\"\n                [style.height.px]=\"bands.footerHeight * PX\"\n                (dblclick)=\"addTextInBand('footer', $event)\">\n                @if (isMasterEditing) {\n                  <span class=\"band-label small\">Footer</span>\n                  @if (isBandEmpty('footer')) {\n                    <span class=\"band-hint small\">Double-click to add text</span>\n                  }\n                }\n              </div>\n            }\n          }\n\n          @for (component of activePageComponents(); track component.id) {\n            <app-report-component\n              [reportId]=\"report.id\"\n              [component]=\"component\"\n              [groups]=\"groups\"\n              [editMode]=\"isPageEditing\"\n              [zoom]=\"zoom()\"\n              [snapper]=\"snapper\"\n              [tokens]=\"pageTokens()\"\n              [valueKeysElsewhere]=\"valueKeysElsewhere\"\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              (valueSettings)=\"openValueSettings(component, $event)\"\n              (textSaved)=\"onTextSaved(component, $event)\"\n              (valuesRemoved)=\"reportChanged.emit()\">\n            </app-report-component>\n          }\n\n          <div\n            #guides\n            class=\"guides\">\n          </div>\n\n          @if (!activePageComponents().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 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 (Ctrl/Cmd + scroll)\"\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 (Ctrl/Cmd + scroll)\"\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.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.addable{pointer-events:auto;cursor:text;-webkit-user-select:none;user-select:none}.band .band-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(calc(1 / var(--canvas-zoom, 1)));color:#9aa5b1;white-space:nowrap}.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.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i2.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "directive", type: i2.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { kind: "ngmodule", type: FsZoomPanModule }, { kind: "component", type: i3$1.FsZoomPanComponent, selector: "fs-zoom-pan", inputs: ["zoomMax", "zoomMin", "zoomScale", "zoomDefault", "zoomFactor", "zoomFit", "fitMode", "fitPosition", "fitPadding", "fitMaxScale", "wheel", "top", "left"], outputs: ["moved", "zoomed"] }, { kind: "component", type: ReportComponentComponent, selector: "app-report-component", inputs: ["reportId", "component", "groups", "editMode", "zoom", "snapper", "selected", "tokens", "valueKeysElsewhere"], outputs: ["selectComponent", "positionChanged", "openSettings", "removed", "valueSettings", "textSaved", "valuesRemoved"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportCanvasComponent, decorators: [{
             type: Component,
@@ -11960,7 +12016,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         FsMenuModule,
                         FsZoomPanModule,
                         ReportComponentComponent,
-                    ], template: "<div class=\"canvas\">\n  <div\n    #viewport\n    class=\"page-viewport\"\n    (pointerdown)=\"onCanvasPointerDown()\">\n    <fs-zoom-pan\n      wheel=\"modifier\"\n      [zoomMin]=\"0.1\"\n      [zoomMax]=\"3\"\n      (zoomed)=\"onZoomed($event)\">\n      @if (activePage) {\n        <div\n          class=\"page\"\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.--canvas-zoom]=\"zoom()\"\n          [style.--report-heading-size.px]=\"headingSizePx\">\n          <!-- The header and footer: the master's components, drawn under the\n               page's own. -->\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                  [zoom]=\"zoom()\"\n                  [snapper]=\"snapper\"\n                  [tokens]=\"masterTokens()\"\n                  [valueKeysElsewhere]=\"valueKeysElsewhere\"\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                  (valueSettings)=\"openValueSettings(component, $event)\"\n                  (textSaved)=\"onTextSaved(component, $event)\"\n                  (valuesRemoved)=\"reportChanged.emit()\">\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          @for (component of activePageComponents(); track component.id) {\n            <app-report-component\n              [reportId]=\"report.id\"\n              [component]=\"component\"\n              [groups]=\"groups\"\n              [editMode]=\"isPageEditing\"\n              [zoom]=\"zoom()\"\n              [snapper]=\"snapper\"\n              [tokens]=\"pageTokens()\"\n              [valueKeysElsewhere]=\"valueKeysElsewhere\"\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              (valueSettings)=\"openValueSettings(component, $event)\"\n              (textSaved)=\"onTextSaved(component, $event)\"\n              (valuesRemoved)=\"reportChanged.emit()\">\n            </app-report-component>\n          }\n\n          <div\n            #guides\n            class=\"guides\">\n          </div>\n\n          @if (!activePageComponents().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 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 (Ctrl/Cmd + scroll)\"\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 (Ctrl/Cmd + scroll)\"\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.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"] }]
+                    ], template: "<div class=\"canvas\">\n  <div\n    #viewport\n    class=\"page-viewport\"\n    (pointerdown)=\"onCanvasPointerDown()\">\n    <fs-zoom-pan\n      wheel=\"modifier\"\n      [zoomMin]=\"0.1\"\n      [zoomMax]=\"3\"\n      (zoomed)=\"onZoomed($event)\">\n      @if (activePage) {\n        <div\n          class=\"page\"\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.--canvas-zoom]=\"zoom()\"\n          [style.--report-heading-size.px]=\"headingSizePx\">\n          <!-- The header and footer: the master's components, drawn under the\n               page's own. -->\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                  [zoom]=\"zoom()\"\n                  [snapper]=\"snapper\"\n                  [tokens]=\"masterTokens()\"\n                  [valueKeysElsewhere]=\"valueKeysElsewhere\"\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                  (valueSettings)=\"openValueSettings(component, $event)\"\n                  (textSaved)=\"onTextSaved(component, $event)\"\n                  (valuesRemoved)=\"reportChanged.emit()\">\n                </app-report-component>\n              }\n            </div>\n          }\n\n          <!-- The header and footer bands, as guides while editing. While the\n               header and footer are edited, an empty band says how to fill it\n               and a double-click adds a text block there. -->\n          @if (editMode) {\n            @if (bands.headerHeight) {\n              <div\n                class=\"band band-header\"\n                [class.addable]=\"isMasterEditing\"\n                [style.height.px]=\"bands.headerHeight * PX\"\n                (dblclick)=\"addTextInBand('header', $event)\">\n                @if (isMasterEditing) {\n                  <span class=\"band-label small\">Header</span>\n                  @if (isBandEmpty('header')) {\n                    <span class=\"band-hint small\">Double-click to add text</span>\n                  }\n                }\n              </div>\n            }\n            @if (bands.footerHeight) {\n              <div\n                class=\"band band-footer\"\n                [class.addable]=\"isMasterEditing\"\n                [style.height.px]=\"bands.footerHeight * PX\"\n                (dblclick)=\"addTextInBand('footer', $event)\">\n                @if (isMasterEditing) {\n                  <span class=\"band-label small\">Footer</span>\n                  @if (isBandEmpty('footer')) {\n                    <span class=\"band-hint small\">Double-click to add text</span>\n                  }\n                }\n              </div>\n            }\n          }\n\n          @for (component of activePageComponents(); track component.id) {\n            <app-report-component\n              [reportId]=\"report.id\"\n              [component]=\"component\"\n              [groups]=\"groups\"\n              [editMode]=\"isPageEditing\"\n              [zoom]=\"zoom()\"\n              [snapper]=\"snapper\"\n              [tokens]=\"pageTokens()\"\n              [valueKeysElsewhere]=\"valueKeysElsewhere\"\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              (valueSettings)=\"openValueSettings(component, $event)\"\n              (textSaved)=\"onTextSaved(component, $event)\"\n              (valuesRemoved)=\"reportChanged.emit()\">\n            </app-report-component>\n          }\n\n          <div\n            #guides\n            class=\"guides\">\n          </div>\n\n          @if (!activePageComponents().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 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 (Ctrl/Cmd + scroll)\"\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 (Ctrl/Cmd + scroll)\"\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.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.addable{pointer-events:auto;cursor:text;-webkit-user-select:none;user-select:none}.band .band-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(calc(1 / var(--canvas-zoom, 1)));color:#9aa5b1;white-space:nowrap}.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"] }]
         }], ctorParameters: () => [], propDecorators: { report: [{
                 type: Input
             }], editMode: [{
@@ -14150,7 +14206,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 // in the report's format context, as on screen.
 async function renderChartImage(component, data, width, height, context, pixelRatio = 3) {
     // The same tree-shaken echarts build + 'report' theme the live canvas uses.
-    const echarts = (await import('./firestitch-report-echarts-DY_CfeEH.mjs')).default;
+    const echarts = (await import('./firestitch-report-echarts-DSSjvu3O.mjs')).default;
     const host = document.createElement('div');
     host.style.width = `${width}px`;
     host.style.height = `${height}px`;
@@ -17355,7 +17411,7 @@ class ReportComponent {
             ReportExportService,
             // Tree-shaken ECharts core + the 'report' house theme, loaded lazily with
             // this route's chunk.
-            provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-DY_CfeEH.mjs').then((module) => module.default) }),
+            provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-DSSjvu3O.mjs').then((module) => module.default) }),
             // The bar's date pickers start their weeks on Monday and list the built-in
             // presets; a preset only sets the days.
             provideReportDatePicker(),
@@ -17376,7 +17432,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         ReportExportService,
                         // Tree-shaken ECharts core + the 'report' house theme, loaded lazily with
                         // this route's chunk.
-                        provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-DY_CfeEH.mjs').then((module) => module.default) }),
+                        provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-DSSjvu3O.mjs').then((module) => module.default) }),
                         // The bar's date pickers start their weeks on Monday and list the built-in
                         // presets; a preset only sets the days.
                         provideReportDatePicker(),
@@ -19352,7 +19408,7 @@ class FsAiReportComponent {
             ReportAiChatData,
             { provide: FsAiChatData, useExisting: ReportAiChatData },
             // Tree-shaken ECharts core + the 'report' house theme, loaded lazily.
-            provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-DY_CfeEH.mjs').then((module) => module.default) }),
+            provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-DSSjvu3O.mjs').then((module) => module.default) }),
             // The bar's date pickers start their weeks on Monday and list the built-in
             // presets; a preset only sets the days.
             provideReportDatePicker(),
@@ -19376,7 +19432,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         ReportAiChatData,
                         { provide: FsAiChatData, useExisting: ReportAiChatData },
                         // Tree-shaken ECharts core + the 'report' house theme, loaded lazily.
-                        provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-DY_CfeEH.mjs').then((module) => module.default) }),
+                        provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-DSSjvu3O.mjs').then((module) => module.default) }),
                         // The bar's date pickers start their weeks on Monday and list the built-in
                         // presets; a preset only sets the days.
                         provideReportDatePicker(),
@@ -19416,4 +19472,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  */
 
 export { FsAiReportsComponent as F, GRANULARITY_OPTIONS as G, REPORT_CHART_COLORS_CSS as R, REPORT_CHART_FONT_FAMILY as a, REPORT_AXIS_LABEL_FONT_SIZE as b, ReportComponent as c, FsAiReportComponent as d, ReportData as e, ReportService as f, ReportFilterStateService as g, ReportNodeType as h, ReportState as i, ReportValueFormat as j, ReportValueFormula as k, ReportListColumnFormat as l, ReportNumberUnits as m, ReportChartDataLabels as n, ReportChartColor as o, ReportChartLineStyle as p, ReportChartMarkStat as q, ReportChartDateLabel as r, ReportChangePolarity as s };
-//# sourceMappingURL=firestitch-report-firestitch-report-YDtFbTwA.mjs.map
+//# sourceMappingURL=firestitch-report-firestitch-report-C-jf2brZ.mjs.map