@firestitch/report 18.17.1 → 18.17.3

package/fesm2022/{firestitch-report-firestitch-report-DRkNBMic.mjs → firestitch-report-firestitch-report-DYs6aHtD.mjs}

@@ -429,14 +429,14 @@ class ReportData {
     }
     // Make one column filterable. `level` (component | report) places a new
     // group; `groupId` instead links into an existing group. A select filter's
-    // options are derived from the component SQL when optionsSql is omitted.
+    // options are derived from the component's own query.
     addFilter(reportId, componentId, filter, config = {}) {
         return this._api.post(this._path(`${reportId}/components/${componentId}/filters`), filter, {
             key: 'filter',
             ...config,
         });
     }
-    // Update a filter — any subset of { label, optionsSql, enabled }.
+    // Update a filter — any subset of { label, enabled }.
     updateFilter(reportId, filterId, changes, config = {}) {
         return this._api.put(this._path(`${reportId}/filters/${filterId}`), changes, {
             key: 'filter',
@@ -11211,6 +11211,8 @@ class ComponentTextComponent {
     html = input('');
     tokens = input.required();
     editing = input(false);
+    // The canvas is being laid out, so an empty block shows how to fill it.
+    editMode = input(false);
     // The value keys the other text blocks of this block's layer show. Asked
     // for when an edit takes the last chip of a value out of this block, as a
     // value another block still shows is not left unused; a function, as a
@@ -11323,6 +11325,12 @@ class ComponentTextComponent {
         },
     };
     displayHtml = computed(() => this._sanitizer.bypassSecurityTrustHtml(fillTextTokens(this.html(), this.tokens())));
+    // The block shows nothing: no words and no table. A new block is stored
+    // empty, and an emptied editor can still leave a bare <p><br></p>.
+    isBlank = computed(() => {
+        const body = new DOMParser().parseFromString(this.html(), 'text/html').body;
+        return !body.textContent?.trim() && !body.querySelector('table');
+    });
     // What the editor holds right now.
     draft = '';
     _editor = viewChild(FsHtmlEditorComponent);
@@ -11493,7 +11501,7 @@ class ComponentTextComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ComponentTextComponent, isStandalone: true, selector: "app-report-component-text", inputs: { html: { classPropertyName: "html", publicName: "html", isSignal: true, isRequired: false, transformFunction: null }, tokens: { classPropertyName: "tokens", publicName: "tokens", isSignal: true, isRequired: true, transformFunction: null }, editing: { classPropertyName: "editing", publicName: "editing", isSignal: true, isRequired: false, transformFunction: null }, shownElsewhere: { classPropertyName: "shownElsewhere", publicName: "shownElsewhere", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { saved: "saved", editEnded: "editEnded", valueSettings: "valueSettings" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "style.--text-size": "typeScale.body", "style.--text-h1-size": "typeScale.h1", "style.--text-h2-size": "typeScale.h2", "style.--text-h3-size": "typeScale.h3", "style.--text-color": "typeScale.color", "style.--text-table-border": "tableLook.border", "style.--text-table-padding": "tableLook.padding", "style.--text-table-margin": "tableLook.margin" } }, viewQueries: [{ propertyName: "_editor", first: true, predicate: FsHtmlEditorComponent, descendants: true, isSignal: true }, { propertyName: "_valuePopoverAnchor", first: true, predicate: ["valuePopoverAnchor"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (editing()) {\n  <!-- Floating fs-html-editor: no frame, Froala's inline toolbar pops up over\n       the text. pointerdown stays here so a press in the text never starts a\n       drag of the block or a pan of the canvas. -->\n  <fs-html-editor\n      class=\"text-content editing\"\n      [config]=\"editorConfig\"\n      [(ngModel)]=\"draft\"\n      (pointerdown)=\"$event.stopPropagation()\"\n      (mousedown)=\"$event.stopPropagation()\">\n  </fs-html-editor>\n\n  <!-- One notice at a time: an edit stopped because it would have removed\n       values, an edit that left values no text reads, or a refused command.\n       mousedown keeps the editor's focus and selection, so Undo reaches it. -->\n  @if (notice(); as current) {\n    <div\n        class=\"value-notice fs-row.gap-sm\"\n        (pointerdown)=\"$event.stopPropagation()\"\n        (mousedown)=\"$event.preventDefault()\">\n      @switch (current.kind) {\n        @case ('blocked') {\n          @if (current.block.removeSelection) {\n            <span>\n              This selection includes {{ current.block.count }} {{ current.block.count === 1 ? 'value' : 'values' }}.\n            </span>\n            <button\n                mat-button\n                color=\"primary\"\n                type=\"button\"\n                (click)=\"removeBlockedSelection()\">\n              Remove text and {{ current.block.count === 1 ? 'value' : current.block.count + ' values' }}\n            </button>\n          } @else {\n            <span>To take a value out, select it, then press Delete.</span>\n          }\n        }\n        @case ('unused') {\n          <span>{{ current.count }} {{ current.count === 1 ? 'value' : 'values' }} moved to Not used</span>\n          <button\n              mat-button\n              color=\"primary\"\n              type=\"button\"\n              (click)=\"undoValuesUnused()\">\n            Undo\n          </button>\n        }\n        @case ('message') {\n          <span>{{ current.text }}</span>\n        }\n      }\n      <button\n          mat-button\n          type=\"button\"\n          (click)=\"dismissNotice()\">\n        Dismiss\n      </button>\n    </div>\n  }\n} @else {\n  <div\n      class=\"text-content\"\n      [innerHTML]=\"displayHtml()\">\n  </div>\n}\n\n<!-- A clicked value chip's popover: an fs-popover on an invisible anchor laid\n     over the chip (the chip itself belongs to the editor). Outside the editing\n     block, so a popover still open when editing ends closes the usual way. -->\n<span\n    #valuePopoverAnchor\n    class=\"value-popover-anchor\"\n    aria-hidden=\"true\"\n    fsPopover\n    trigger=\"click\"\n    wrapperClass=\"value-popover-wrapper\"\n    [template]=\"valuePopoverTemplate\"\n    [indication]=\"false\"\n    [maxWidth]=\"320\"\n    [style.left.px]=\"valuePopover()?.left\"\n    [style.top.px]=\"valuePopover()?.top\"\n    [style.width.px]=\"valuePopover()?.width\"\n    [style.height.px]=\"valuePopover()?.height\">\n</span>\n<ng-template\n    #valuePopoverTemplate\n    let-popover=\"popover\">\n  <!-- What the value is, and its settings (where it can also be deleted); a\n       chip naming no value on the page has no settings. -->\n  <div class=\"value-popover fs-row\">\n    <div class=\"fs-flex\">\n      <div class=\"value-popover-name\">{{ valuePopoverValue()?.name ?? valuePopover()?.key }}</div>\n      @if (!valuePopoverValue()) {\n        <div class=\"small\">Not a value on this page</div>\n      }\n    </div>\n    @if (valuePopoverValue()) {\n      <button\n          mat-icon-button\n          type=\"button\"\n          class=\"value-popover-settings\"\n          matTooltip=\"Settings\"\n          (click)=\"openValueSettings(popover)\">\n        <mat-icon>settings</mat-icon>\n      </button>\n    }\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;height:100%}.text-content{display:block;width:100%;height:100%;overflow:hidden;font-family:Arial,Helvetica,sans-serif;font-size:var(--text-size);line-height:1.25;color:var(--text-color);word-wrap:break-word;letter-spacing:normal;word-spacing:normal;font-weight:400;font-style:normal;text-transform:none;white-space:normal}.text-content ::ng-deep p,.text-content ::ng-deep h1,.text-content ::ng-deep h2,.text-content ::ng-deep h3,.text-content ::ng-deep ul,.text-content ::ng-deep ol{margin:0}.text-content ::ng-deep h1{font-size:var(--text-h1-size)}.text-content ::ng-deep h2{font-size:var(--text-h2-size)}.text-content ::ng-deep h3{font-size:var(--text-h3-size)}.text-content ::ng-deep h1,.text-content ::ng-deep h2,.text-content ::ng-deep h3{font-weight:700;line-height:1.2}.text-content ::ng-deep ul,.text-content ::ng-deep ol{padding-left:1.4em}.text-content ::ng-deep p:empty:before{content:\"\\200b\"}.text-content ::ng-deep a{color:inherit}.text-content ::ng-deep table{border-collapse:collapse;margin:var(--text-table-margin) 0}.text-content ::ng-deep th,.text-content ::ng-deep td{border:var(--text-table-border);padding:var(--text-table-padding);vertical-align:middle;text-align:left}.text-content ::ng-deep th{text-align:center;font-weight:700}.text-content.editing{overflow:auto;cursor:text}.text-content.editing ::ng-deep [data-embed-key],.text-content.editing ::ng-deep [data-embed-field]{padding:0 2px;border-radius:3px;background-color:#4e79a729;-webkit-user-select:all;user-select:all}.text-content.editing ::ng-deep [data-embed-key]{cursor:pointer}.text-content.editing ::ng-deep [data-embed-key]:hover{background-color:#4e79a747}.text-content.editing ::ng-deep [data-embed-missing]{background-color:#e1575924;outline:1px dashed rgba(225,87,89,.7)}.text-content.editing ::ng-deep th,.text-content.editing ::ng-deep tfoot td{background-color:transparent}.text-content.editing ::ng-deep .fr-table-selector{display:none}.text-content.editing ::ng-deep .fr-table-selection-hover{outline:none}.value-popover-anchor{position:absolute;pointer-events:none}::ng-deep .value-popover-wrapper .popover-content{padding:15px!important}.value-popover{gap:15px}.value-popover-name{font-weight:600}.value-popover-settings{--mdc-icon-button-state-layer-size: 24px;width:24px;height:24px;padding:0}.value-notice{position:absolute;top:100%;left:0;z-index:2;margin-top:4px;padding:2px 4px 2px 10px;border:1px solid #d9dee3;border-radius:4px;background:#fff;white-space:nowrap;font-family:Arial,Helvetica,sans-serif}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FsHtmlEditorComponent, selector: "fs-html-editor", inputs: ["config", "disabled"] }, { kind: "directive", type: FsPopoverDirective, selector: "[fsPopover]", inputs: ["text", "template", "data", "leaveDelay", "showDelay", "maxWidth", "maxHeight", "wrapperClass", "autoShow", "autoClose", "loadingDiameter", "loading", "indication", "position", "theme", "size", "trigger", "enabled", "panel"], outputs: ["closed"], exportAs: ["fsPopover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ComponentTextComponent, isStandalone: true, selector: "app-report-component-text", inputs: { html: { classPropertyName: "html", publicName: "html", isSignal: true, isRequired: false, transformFunction: null }, tokens: { classPropertyName: "tokens", publicName: "tokens", isSignal: true, isRequired: true, transformFunction: null }, editing: { classPropertyName: "editing", publicName: "editing", isSignal: true, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null }, shownElsewhere: { classPropertyName: "shownElsewhere", publicName: "shownElsewhere", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { saved: "saved", editEnded: "editEnded", valueSettings: "valueSettings" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "style.--text-size": "typeScale.body", "style.--text-h1-size": "typeScale.h1", "style.--text-h2-size": "typeScale.h2", "style.--text-h3-size": "typeScale.h3", "style.--text-color": "typeScale.color", "style.--text-table-border": "tableLook.border", "style.--text-table-padding": "tableLook.padding", "style.--text-table-margin": "tableLook.margin" } }, viewQueries: [{ propertyName: "_editor", first: true, predicate: FsHtmlEditorComponent, descendants: true, isSignal: true }, { propertyName: "_valuePopoverAnchor", first: true, predicate: ["valuePopoverAnchor"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (editing()) {\n  <!-- Floating fs-html-editor: no frame, Froala's inline toolbar pops up over\n       the text. pointerdown stays here so a press in the text never starts a\n       drag of the block or a pan of the canvas. -->\n  <fs-html-editor\n      class=\"text-content editing\"\n      [config]=\"editorConfig\"\n      [(ngModel)]=\"draft\"\n      (pointerdown)=\"$event.stopPropagation()\"\n      (mousedown)=\"$event.stopPropagation()\">\n  </fs-html-editor>\n\n  <!-- One notice at a time: an edit stopped because it would have removed\n       values, an edit that left values no text reads, or a refused command.\n       mousedown keeps the editor's focus and selection, so Undo reaches it. -->\n  @if (notice(); as current) {\n    <div\n        class=\"value-notice fs-row.gap-sm\"\n        (pointerdown)=\"$event.stopPropagation()\"\n        (mousedown)=\"$event.preventDefault()\">\n      @switch (current.kind) {\n        @case ('blocked') {\n          @if (current.block.removeSelection) {\n            <span>\n              This selection includes {{ current.block.count }} {{ current.block.count === 1 ? 'value' : 'values' }}.\n            </span>\n            <button\n                mat-button\n                color=\"primary\"\n                type=\"button\"\n                (click)=\"removeBlockedSelection()\">\n              Remove text and {{ current.block.count === 1 ? 'value' : current.block.count + ' values' }}\n            </button>\n          } @else {\n            <span>To take a value out, select it, then press Delete.</span>\n          }\n        }\n        @case ('unused') {\n          <span>{{ current.count }} {{ current.count === 1 ? 'value' : 'values' }} moved to Not used</span>\n          <button\n              mat-button\n              color=\"primary\"\n              type=\"button\"\n              (click)=\"undoValuesUnused()\">\n            Undo\n          </button>\n        }\n        @case ('message') {\n          <span>{{ current.text }}</span>\n        }\n      }\n      <button\n          mat-button\n          type=\"button\"\n          (click)=\"dismissNotice()\">\n        Dismiss\n      </button>\n    </div>\n  }\n} @else if (editMode() && isBlank()) {\n  <!-- An empty block while the canvas is laid out: a hint in the block's own\n       type, never its html, so nothing is typed onto it or exported. -->\n  <div class=\"text-content text-hint\">Double-click to edit</div>\n} @else {\n  <div\n      class=\"text-content\"\n      [innerHTML]=\"displayHtml()\">\n  </div>\n}\n\n<!-- A clicked value chip's popover: an fs-popover on an invisible anchor laid\n     over the chip (the chip itself belongs to the editor). Outside the editing\n     block, so a popover still open when editing ends closes the usual way. -->\n<span\n    #valuePopoverAnchor\n    class=\"value-popover-anchor\"\n    aria-hidden=\"true\"\n    fsPopover\n    trigger=\"click\"\n    wrapperClass=\"value-popover-wrapper\"\n    [template]=\"valuePopoverTemplate\"\n    [indication]=\"false\"\n    [maxWidth]=\"320\"\n    [style.left.px]=\"valuePopover()?.left\"\n    [style.top.px]=\"valuePopover()?.top\"\n    [style.width.px]=\"valuePopover()?.width\"\n    [style.height.px]=\"valuePopover()?.height\">\n</span>\n<ng-template\n    #valuePopoverTemplate\n    let-popover=\"popover\">\n  <!-- What the value is, and its settings (where it can also be deleted); a\n       chip naming no value on the page has no settings. -->\n  <div class=\"value-popover fs-row\">\n    <div class=\"fs-flex\">\n      <div class=\"value-popover-name\">{{ valuePopoverValue()?.name ?? valuePopover()?.key }}</div>\n      @if (!valuePopoverValue()) {\n        <div class=\"small\">Not a value on this page</div>\n      }\n    </div>\n    @if (valuePopoverValue()) {\n      <button\n          mat-icon-button\n          type=\"button\"\n          class=\"value-popover-settings\"\n          matTooltip=\"Settings\"\n          (click)=\"openValueSettings(popover)\">\n        <mat-icon>settings</mat-icon>\n      </button>\n    }\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;height:100%}.text-content{display:block;width:100%;height:100%;overflow:hidden;font-family:Arial,Helvetica,sans-serif;font-size:var(--text-size);line-height:1.25;color:var(--text-color);word-wrap:break-word;letter-spacing:normal;word-spacing:normal;font-weight:400;font-style:normal;text-transform:none;white-space:normal}.text-content ::ng-deep p,.text-content ::ng-deep h1,.text-content ::ng-deep h2,.text-content ::ng-deep h3,.text-content ::ng-deep ul,.text-content ::ng-deep ol{margin:0}.text-content ::ng-deep h1{font-size:var(--text-h1-size)}.text-content ::ng-deep h2{font-size:var(--text-h2-size)}.text-content ::ng-deep h3{font-size:var(--text-h3-size)}.text-content ::ng-deep h1,.text-content ::ng-deep h2,.text-content ::ng-deep h3{font-weight:700;line-height:1.2}.text-content ::ng-deep ul,.text-content ::ng-deep ol{padding-left:1.4em}.text-content ::ng-deep p:empty:before{content:\"\\200b\"}.text-content ::ng-deep a{color:inherit}.text-content ::ng-deep table{border-collapse:collapse;margin:var(--text-table-margin) 0}.text-content ::ng-deep th,.text-content ::ng-deep td{border:var(--text-table-border);padding:var(--text-table-padding);vertical-align:middle;text-align:left}.text-content ::ng-deep th{text-align:center;font-weight:700}.text-content.editing{overflow:auto;cursor:text}.text-content.editing ::ng-deep [data-embed-key],.text-content.editing ::ng-deep [data-embed-field]{padding:0 2px;border-radius:3px;background-color:#4e79a729;-webkit-user-select:all;user-select:all}.text-content.editing ::ng-deep [data-embed-key]{cursor:pointer}.text-content.editing ::ng-deep [data-embed-key]:hover{background-color:#4e79a747}.text-content.editing ::ng-deep [data-embed-missing]{background-color:#e1575924;outline:1px dashed rgba(225,87,89,.7)}.text-content.editing ::ng-deep th,.text-content.editing ::ng-deep tfoot td{background-color:transparent}.text-content.editing ::ng-deep .fr-table-selector{display:none}.text-content.editing ::ng-deep .fr-table-selection-hover{outline:none}.text-hint{color:#9aa5b1;-webkit-user-select:none;user-select:none}.value-popover-anchor{position:absolute;pointer-events:none}::ng-deep .value-popover-wrapper .popover-content{padding:15px!important}.value-popover{gap:15px}.value-popover-name{font-weight:600}.value-popover-settings{--mdc-icon-button-state-layer-size: 24px;width:24px;height:24px;padding:0}.value-notice{position:absolute;top:100%;left:0;z-index:2;margin-top:4px;padding:2px 4px 2px 10px;border:1px solid #d9dee3;border-radius:4px;background:#fff;white-space:nowrap;font-family:Arial,Helvetica,sans-serif}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FsHtmlEditorComponent, selector: "fs-html-editor", inputs: ["config", "disabled"] }, { kind: "directive", type: FsPopoverDirective, selector: "[fsPopover]", inputs: ["text", "template", "data", "leaveDelay", "showDelay", "maxWidth", "maxHeight", "wrapperClass", "autoShow", "autoClose", "loadingDiameter", "loading", "indication", "position", "theme", "size", "trigger", "enabled", "panel"], outputs: ["closed"], exportAs: ["fsPopover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentTextComponent, decorators: [{
             type: Component,
@@ -11518,7 +11526,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         '[style.--text-table-border]': 'tableLook.border',
                         '[style.--text-table-padding]': 'tableLook.padding',
                         '[style.--text-table-margin]': 'tableLook.margin',
-                    }, template: "@if (editing()) {\n  <!-- Floating fs-html-editor: no frame, Froala's inline toolbar pops up over\n       the text. pointerdown stays here so a press in the text never starts a\n       drag of the block or a pan of the canvas. -->\n  <fs-html-editor\n      class=\"text-content editing\"\n      [config]=\"editorConfig\"\n      [(ngModel)]=\"draft\"\n      (pointerdown)=\"$event.stopPropagation()\"\n      (mousedown)=\"$event.stopPropagation()\">\n  </fs-html-editor>\n\n  <!-- One notice at a time: an edit stopped because it would have removed\n       values, an edit that left values no text reads, or a refused command.\n       mousedown keeps the editor's focus and selection, so Undo reaches it. -->\n  @if (notice(); as current) {\n    <div\n        class=\"value-notice fs-row.gap-sm\"\n        (pointerdown)=\"$event.stopPropagation()\"\n        (mousedown)=\"$event.preventDefault()\">\n      @switch (current.kind) {\n        @case ('blocked') {\n          @if (current.block.removeSelection) {\n            <span>\n              This selection includes {{ current.block.count }} {{ current.block.count === 1 ? 'value' : 'values' }}.\n            </span>\n            <button\n                mat-button\n                color=\"primary\"\n                type=\"button\"\n                (click)=\"removeBlockedSelection()\">\n              Remove text and {{ current.block.count === 1 ? 'value' : current.block.count + ' values' }}\n            </button>\n          } @else {\n            <span>To take a value out, select it, then press Delete.</span>\n          }\n        }\n        @case ('unused') {\n          <span>{{ current.count }} {{ current.count === 1 ? 'value' : 'values' }} moved to Not used</span>\n          <button\n              mat-button\n              color=\"primary\"\n              type=\"button\"\n              (click)=\"undoValuesUnused()\">\n            Undo\n          </button>\n        }\n        @case ('message') {\n          <span>{{ current.text }}</span>\n        }\n      }\n      <button\n          mat-button\n          type=\"button\"\n          (click)=\"dismissNotice()\">\n        Dismiss\n      </button>\n    </div>\n  }\n} @else {\n  <div\n      class=\"text-content\"\n      [innerHTML]=\"displayHtml()\">\n  </div>\n}\n\n<!-- A clicked value chip's popover: an fs-popover on an invisible anchor laid\n     over the chip (the chip itself belongs to the editor). Outside the editing\n     block, so a popover still open when editing ends closes the usual way. -->\n<span\n    #valuePopoverAnchor\n    class=\"value-popover-anchor\"\n    aria-hidden=\"true\"\n    fsPopover\n    trigger=\"click\"\n    wrapperClass=\"value-popover-wrapper\"\n    [template]=\"valuePopoverTemplate\"\n    [indication]=\"false\"\n    [maxWidth]=\"320\"\n    [style.left.px]=\"valuePopover()?.left\"\n    [style.top.px]=\"valuePopover()?.top\"\n    [style.width.px]=\"valuePopover()?.width\"\n    [style.height.px]=\"valuePopover()?.height\">\n</span>\n<ng-template\n    #valuePopoverTemplate\n    let-popover=\"popover\">\n  <!-- What the value is, and its settings (where it can also be deleted); a\n       chip naming no value on the page has no settings. -->\n  <div class=\"value-popover fs-row\">\n    <div class=\"fs-flex\">\n      <div class=\"value-popover-name\">{{ valuePopoverValue()?.name ?? valuePopover()?.key }}</div>\n      @if (!valuePopoverValue()) {\n        <div class=\"small\">Not a value on this page</div>\n      }\n    </div>\n    @if (valuePopoverValue()) {\n      <button\n          mat-icon-button\n          type=\"button\"\n          class=\"value-popover-settings\"\n          matTooltip=\"Settings\"\n          (click)=\"openValueSettings(popover)\">\n        <mat-icon>settings</mat-icon>\n      </button>\n    }\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;height:100%}.text-content{display:block;width:100%;height:100%;overflow:hidden;font-family:Arial,Helvetica,sans-serif;font-size:var(--text-size);line-height:1.25;color:var(--text-color);word-wrap:break-word;letter-spacing:normal;word-spacing:normal;font-weight:400;font-style:normal;text-transform:none;white-space:normal}.text-content ::ng-deep p,.text-content ::ng-deep h1,.text-content ::ng-deep h2,.text-content ::ng-deep h3,.text-content ::ng-deep ul,.text-content ::ng-deep ol{margin:0}.text-content ::ng-deep h1{font-size:var(--text-h1-size)}.text-content ::ng-deep h2{font-size:var(--text-h2-size)}.text-content ::ng-deep h3{font-size:var(--text-h3-size)}.text-content ::ng-deep h1,.text-content ::ng-deep h2,.text-content ::ng-deep h3{font-weight:700;line-height:1.2}.text-content ::ng-deep ul,.text-content ::ng-deep ol{padding-left:1.4em}.text-content ::ng-deep p:empty:before{content:\"\\200b\"}.text-content ::ng-deep a{color:inherit}.text-content ::ng-deep table{border-collapse:collapse;margin:var(--text-table-margin) 0}.text-content ::ng-deep th,.text-content ::ng-deep td{border:var(--text-table-border);padding:var(--text-table-padding);vertical-align:middle;text-align:left}.text-content ::ng-deep th{text-align:center;font-weight:700}.text-content.editing{overflow:auto;cursor:text}.text-content.editing ::ng-deep [data-embed-key],.text-content.editing ::ng-deep [data-embed-field]{padding:0 2px;border-radius:3px;background-color:#4e79a729;-webkit-user-select:all;user-select:all}.text-content.editing ::ng-deep [data-embed-key]{cursor:pointer}.text-content.editing ::ng-deep [data-embed-key]:hover{background-color:#4e79a747}.text-content.editing ::ng-deep [data-embed-missing]{background-color:#e1575924;outline:1px dashed rgba(225,87,89,.7)}.text-content.editing ::ng-deep th,.text-content.editing ::ng-deep tfoot td{background-color:transparent}.text-content.editing ::ng-deep .fr-table-selector{display:none}.text-content.editing ::ng-deep .fr-table-selection-hover{outline:none}.value-popover-anchor{position:absolute;pointer-events:none}::ng-deep .value-popover-wrapper .popover-content{padding:15px!important}.value-popover{gap:15px}.value-popover-name{font-weight:600}.value-popover-settings{--mdc-icon-button-state-layer-size: 24px;width:24px;height:24px;padding:0}.value-notice{position:absolute;top:100%;left:0;z-index:2;margin-top:4px;padding:2px 4px 2px 10px;border:1px solid #d9dee3;border-radius:4px;background:#fff;white-space:nowrap;font-family:Arial,Helvetica,sans-serif}\n"] }]
+                    }, template: "@if (editing()) {\n  <!-- Floating fs-html-editor: no frame, Froala's inline toolbar pops up over\n       the text. pointerdown stays here so a press in the text never starts a\n       drag of the block or a pan of the canvas. -->\n  <fs-html-editor\n      class=\"text-content editing\"\n      [config]=\"editorConfig\"\n      [(ngModel)]=\"draft\"\n      (pointerdown)=\"$event.stopPropagation()\"\n      (mousedown)=\"$event.stopPropagation()\">\n  </fs-html-editor>\n\n  <!-- One notice at a time: an edit stopped because it would have removed\n       values, an edit that left values no text reads, or a refused command.\n       mousedown keeps the editor's focus and selection, so Undo reaches it. -->\n  @if (notice(); as current) {\n    <div\n        class=\"value-notice fs-row.gap-sm\"\n        (pointerdown)=\"$event.stopPropagation()\"\n        (mousedown)=\"$event.preventDefault()\">\n      @switch (current.kind) {\n        @case ('blocked') {\n          @if (current.block.removeSelection) {\n            <span>\n              This selection includes {{ current.block.count }} {{ current.block.count === 1 ? 'value' : 'values' }}.\n            </span>\n            <button\n                mat-button\n                color=\"primary\"\n                type=\"button\"\n                (click)=\"removeBlockedSelection()\">\n              Remove text and {{ current.block.count === 1 ? 'value' : current.block.count + ' values' }}\n            </button>\n          } @else {\n            <span>To take a value out, select it, then press Delete.</span>\n          }\n        }\n        @case ('unused') {\n          <span>{{ current.count }} {{ current.count === 1 ? 'value' : 'values' }} moved to Not used</span>\n          <button\n              mat-button\n              color=\"primary\"\n              type=\"button\"\n              (click)=\"undoValuesUnused()\">\n            Undo\n          </button>\n        }\n        @case ('message') {\n          <span>{{ current.text }}</span>\n        }\n      }\n      <button\n          mat-button\n          type=\"button\"\n          (click)=\"dismissNotice()\">\n        Dismiss\n      </button>\n    </div>\n  }\n} @else if (editMode() && isBlank()) {\n  <!-- An empty block while the canvas is laid out: a hint in the block's own\n       type, never its html, so nothing is typed onto it or exported. -->\n  <div class=\"text-content text-hint\">Double-click to edit</div>\n} @else {\n  <div\n      class=\"text-content\"\n      [innerHTML]=\"displayHtml()\">\n  </div>\n}\n\n<!-- A clicked value chip's popover: an fs-popover on an invisible anchor laid\n     over the chip (the chip itself belongs to the editor). Outside the editing\n     block, so a popover still open when editing ends closes the usual way. -->\n<span\n    #valuePopoverAnchor\n    class=\"value-popover-anchor\"\n    aria-hidden=\"true\"\n    fsPopover\n    trigger=\"click\"\n    wrapperClass=\"value-popover-wrapper\"\n    [template]=\"valuePopoverTemplate\"\n    [indication]=\"false\"\n    [maxWidth]=\"320\"\n    [style.left.px]=\"valuePopover()?.left\"\n    [style.top.px]=\"valuePopover()?.top\"\n    [style.width.px]=\"valuePopover()?.width\"\n    [style.height.px]=\"valuePopover()?.height\">\n</span>\n<ng-template\n    #valuePopoverTemplate\n    let-popover=\"popover\">\n  <!-- What the value is, and its settings (where it can also be deleted); a\n       chip naming no value on the page has no settings. -->\n  <div class=\"value-popover fs-row\">\n    <div class=\"fs-flex\">\n      <div class=\"value-popover-name\">{{ valuePopoverValue()?.name ?? valuePopover()?.key }}</div>\n      @if (!valuePopoverValue()) {\n        <div class=\"small\">Not a value on this page</div>\n      }\n    </div>\n    @if (valuePopoverValue()) {\n      <button\n          mat-icon-button\n          type=\"button\"\n          class=\"value-popover-settings\"\n          matTooltip=\"Settings\"\n          (click)=\"openValueSettings(popover)\">\n        <mat-icon>settings</mat-icon>\n      </button>\n    }\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;height:100%}.text-content{display:block;width:100%;height:100%;overflow:hidden;font-family:Arial,Helvetica,sans-serif;font-size:var(--text-size);line-height:1.25;color:var(--text-color);word-wrap:break-word;letter-spacing:normal;word-spacing:normal;font-weight:400;font-style:normal;text-transform:none;white-space:normal}.text-content ::ng-deep p,.text-content ::ng-deep h1,.text-content ::ng-deep h2,.text-content ::ng-deep h3,.text-content ::ng-deep ul,.text-content ::ng-deep ol{margin:0}.text-content ::ng-deep h1{font-size:var(--text-h1-size)}.text-content ::ng-deep h2{font-size:var(--text-h2-size)}.text-content ::ng-deep h3{font-size:var(--text-h3-size)}.text-content ::ng-deep h1,.text-content ::ng-deep h2,.text-content ::ng-deep h3{font-weight:700;line-height:1.2}.text-content ::ng-deep ul,.text-content ::ng-deep ol{padding-left:1.4em}.text-content ::ng-deep p:empty:before{content:\"\\200b\"}.text-content ::ng-deep a{color:inherit}.text-content ::ng-deep table{border-collapse:collapse;margin:var(--text-table-margin) 0}.text-content ::ng-deep th,.text-content ::ng-deep td{border:var(--text-table-border);padding:var(--text-table-padding);vertical-align:middle;text-align:left}.text-content ::ng-deep th{text-align:center;font-weight:700}.text-content.editing{overflow:auto;cursor:text}.text-content.editing ::ng-deep [data-embed-key],.text-content.editing ::ng-deep [data-embed-field]{padding:0 2px;border-radius:3px;background-color:#4e79a729;-webkit-user-select:all;user-select:all}.text-content.editing ::ng-deep [data-embed-key]{cursor:pointer}.text-content.editing ::ng-deep [data-embed-key]:hover{background-color:#4e79a747}.text-content.editing ::ng-deep [data-embed-missing]{background-color:#e1575924;outline:1px dashed rgba(225,87,89,.7)}.text-content.editing ::ng-deep th,.text-content.editing ::ng-deep tfoot td{background-color:transparent}.text-content.editing ::ng-deep .fr-table-selector{display:none}.text-content.editing ::ng-deep .fr-table-selection-hover{outline:none}.text-hint{color:#9aa5b1;-webkit-user-select:none;user-select:none}.value-popover-anchor{position:absolute;pointer-events:none}::ng-deep .value-popover-wrapper .popover-content{padding:15px!important}.value-popover{gap:15px}.value-popover-name{font-weight:600}.value-popover-settings{--mdc-icon-button-state-layer-size: 24px;width:24px;height:24px;padding:0}.value-notice{position:absolute;top:100%;left:0;z-index:2;margin-top:4px;padding:2px 4px 2px 10px;border:1px solid #d9dee3;border-radius:4px;background:#fff;white-space:nowrap;font-family:Arial,Helvetica,sans-serif}\n"] }]
         }], ctorParameters: () => [] });
 
 // Resize handles, named by compass direction.
@@ -12252,7 +12260,7 @@ class ReportComponentComponent {
         openAtPoint(anchor, click.pointer, this.zoom, () => this.markMenu?.openMenu(null));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportComponentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ReportComponentComponent, isStandalone: true, selector: "app-report-component", inputs: { reportId: { classPropertyName: "reportId", publicName: "reportId", isSignal: false, isRequired: false, transformFunction: null }, component: { classPropertyName: "component", publicName: "component", isSignal: false, isRequired: false, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: false, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: false, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: false, isRequired: false, transformFunction: null }, snapper: { classPropertyName: "snapper", publicName: "snapper", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, tokens: { classPropertyName: "tokens", publicName: "tokens", isSignal: true, isRequired: false, transformFunction: null }, valueKeysElsewhere: { classPropertyName: "valueKeysElsewhere", publicName: "valueKeysElsewhere", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectComponent: "selectComponent", positionChanged: "positionChanged", openSettings: "openSettings", removed: "removed", valueSettings: "valueSettings", textSaved: "textSaved", valuesRemoved: "valuesRemoved" }, host: { properties: { "class.height-auto": "this.heightAuto" } }, viewQueries: [{ propertyName: "_text", first: true, predicate: ComponentTextComponent, descendants: true, isSignal: true }, { propertyName: "chartComponent", first: true, predicate: ComponentChartComponent, descendants: true }, { propertyName: "markMenu", first: true, predicate: ["markMenu"], descendants: true }, { propertyName: "markAnchor", first: true, predicate: ["markAnchor"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"component-box\"\n    [class.editing]=\"editMode\"\n    [class.text]=\"isText\"\n    [class.selected]=\"selected\"\n    [class.refreshing]=\"refreshing()\"\n    [style.padding]=\"bodyPadding\"\n    (pointerdown)=\"onComponentPointerDown($event)\"\n    (mousedown)=\"stopCanvasPan($event)\"\n    (touchstart)=\"stopCanvasPan($event)\">\n  <!-- The header is an fs-filter: heading template = title (and the edit-mode\n       drag handle), actions = the menu, items = component-level filter groups,\n       the same strip for every type (lists included). fs-filter reads its\n       config once, so the block is keyed on the component-filter set to be\n       recreated when it changes. The title shows its tokens filled, and a\n       filter change repaints it in place (shownTitle). -->\n  <!-- A text block has no title bar \u2014 it IS its words, like a text box on a\n       slide \u2014 so it gets neither the header nor the data actions. -->\n  @for (key of isText ? [] : [filterKey]; track key) {\n    <fs-filter\n        class=\"component-filter\"\n        [config]=\"filterConfig()\">\n      <ng-template fsFilterHeading>\n        <div\n            class=\"component-title\"\n            (pointerdown)=\"onDragStart($event)\">\n          <!-- While the chart is drilled the title leads its breadcrumb:\n               'Title \u203A 2026 \u203A Q3', the title as the viewer reads it\n               (shownTitle). The title goes back to the top and each\n               crumb to the period it names; the last is where the chart is.\n               A long path is cut at its left end, so the crumbs nearest the\n               chart stay in view. While the layout is edited the crumbs are\n               plain text (the stylesheet; drillTo does nothing then). -->\n          @if (drillCrumbs().length) {\n            <span class=\"drill-path\">\n              <span dir=\"ltr\">\n                <a\n                    class=\"drill-crumb\"\n                    tabindex=\"0\"\n                    (click)=\"drillTo(0)\"\n                    (keydown.enter)=\"drillTo(0)\">\n                  {{ shownTitle }}\n                </a>\n                @for (label of drillCrumbs(); track $index; let last = $last) {\n                  <span class=\"drill-separator\">{{ drillSeparator }}</span>\n                  @if (last) {\n                    <span>{{ label }}</span>\n                  } @else {\n                    <a\n                        class=\"drill-crumb\"\n                        tabindex=\"0\"\n                        (click)=\"drillTo($index + 1)\"\n                        (keydown.enter)=\"drillTo($index + 1)\">\n                      {{ label }}\n                    </a>\n                  }\n                }\n              </span>\n            </span>\n          } @else {\n            {{ shownTitle }}\n          }\n          @if (truncated) {\n            <mat-icon\n                class=\"truncated-icon\"\n                matTooltip=\"Showing a truncated result \u2014 refine the filters to see everything.\">\n              warning_amber\n            </mat-icon>\n          }\n        </div>\n      </ng-template>\n    </fs-filter>\n  }\n  <!-- The actions menu is floated top-right (absolute) rather than living in\n       fs-filter's actions slot, so its ~40px button height no longer drives the\n       header row's height. It overlays the box corner; the heading reserves\n       right padding so a long title ellipsises before it. -->\n  @if (!isText || (editMode && !textEditing())) {\n    <button\n        mat-icon-button\n        class=\"component-menu\"\n        [fsMenuTriggerFor]=\"menu\"\n        (pointerdown)=\"$event.stopPropagation()\"\n        (mousedown)=\"stopCanvasPan($event)\">\n      <mat-icon>more_vert</mat-icon>\n    </button>\n    <!-- Beside its trigger, inside the same block: an fs-menu that finds no\n         trigger of its own draws one. -->\n    <fs-menu #menu>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!isText\"\n          (click)=\"editText()\">\n        <mat-icon>edit</mat-icon>\n        <span>Edit text</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!isText\"\n          (click)=\"deleteText()\">\n        <mat-icon>delete</mat-icon>\n        <span>Delete</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!drillCrumbs().length || editMode\"\n          (click)=\"drillUp()\">\n        <mat-icon>arrow_upward</mat-icon>\n        <span>Drill up</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!drillCrumbs().length || editMode\"\n          (click)=\"drillTo(0)\">\n        <mat-icon>vertical_align_top</mat-icon>\n        <span>Back to top</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"isText\"\n          (click)=\"settings()\">\n        <mat-icon>tune</mat-icon>\n        <span>Settings</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"isText\"\n          (click)=\"exportCsv()\">\n        <mat-icon>download</mat-icon>\n        <span>Export CSV</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"isText\"\n          (click)=\"exportExcel()\">\n        <mat-icon>table_view</mat-icon>\n        <span>Export Excel</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!hidesColumns\"\n          (click)=\"chooseColumns()\">\n        <mat-icon>view_column</mat-icon>\n        <span>Columns</span>\n      </ng-template>\n    </fs-menu>\n  }\n  <div class=\"component-body\">\n    @if (isText) {\n      <app-report-component-text\n        [html]=\"textHtml() ?? component.config?.html ?? ''\"\n        [tokens]=\"tokens()\"\n        [editing]=\"textEditing()\"\n        [shownElsewhere]=\"shownElsewhere\"\n        (saved)=\"onTextSaved($event)\"\n        (editEnded)=\"textEditing.set(false)\"\n        (valueSettings)=\"valueSettings.emit($event)\">\n      </app-report-component-text>\n    } @else if (component.type === 'list') {\n      @for (key of [listResetKey()]; track key) {\n        <app-report-component-list\n          [reportId]=\"reportId\"\n          [component]=\"component\">\n        </app-report-component-list>\n      }\n    } @else if (component.type === 'grid') {\n      <app-report-component-grid\n        [reportId]=\"reportId\"\n        [component]=\"component\">\n      </app-report-component-grid>\n    } @else if (loading()) {\n      <!-- Holds the tile's height for the spinner on the first load. -->\n      <div class=\"component-state\"></div>\n    } @else if (error()) {\n      <div class=\"component-state error\">\n        {{ error() }}\n      </div>\n    } @else if (!data()?.rows?.length) {\n      <div class=\"component-state\">\n        {{ emptyMessage() }}\n      </div>\n    } @else if (component.type === 'kpi') {\n      <app-report-component-kpi\n        [component]=\"component\"\n        [data]=\"data()\"\n        (markClick)=\"onMarkClick($event)\">\n      </app-report-component-kpi>\n    } @else {\n      <app-report-component-chart\n        [component]=\"component\"\n        [data]=\"data()\"\n        [actions]=\"tileActions()\"\n        [(legendSelected)]=\"legendSelected\"\n        (markClick)=\"onMarkClick($event)\"\n        (markMiss)=\"onMarkMiss()\">\n      </app-report-component-chart>\n    }\n    <!-- In edit mode a transparent veil over the body makes the WHOLE\n         component draggable (industry standard: you grab the object, not just\n         its title bar) and keeps inner widgets from swallowing the gesture. -->\n    @if (editMode && !textEditing()) {\n      <div\n        class=\"drag-veil\"\n        (pointerdown)=\"onDragStart($event)\">\n      </div>\n    }\n  </div>\n  <!-- A load: a spinner centred on the whole tile. On a refetch the body and\n       the menu are dimmed under it (.refreshing); the title is not. -->\n  @if (loading() || refreshing()) {\n    <mat-progress-spinner\n      class=\"load-spinner\"\n      aria-label=\"Loading data\"\n      mode=\"indeterminate\"\n      [diameter]=\"15\">\n    </mat-progress-spinner>\n  }\n</div>\n<!-- The mark menu, for a click whose mark offers two or more actions. It\n     opens at the click: its trigger is a zero-size anchor that\n     anchor-at-point.ts moves there first. -->\n@if (!isText && !editMode) {\n  <span\n    #markAnchor\n    [style.position]=\"'absolute'\"\n    [fsMenuTriggerFor]=\"markMenu\">\n  </span>\n  <fs-menu #markMenu>\n    @for (action of markMenuActions(); track action) {\n      <ng-template\n          fs-menu-item\n          (click)=\"runMarkAction(action)\">\n        {{ markActionLabels[action] }}\n      </ng-template>\n    }\n  </fs-menu>\n}\n<!-- Handles live OUTSIDE the clipped box so they straddle its edges. -->\n@if (editMode && selected) {\n  @for (handle of resizeHandles; track handle) {\n    <div\n      class=\"handle handle-{{ handle }}\"\n      (mousedown)=\"stopCanvasPan($event)\"\n      (pointerdown)=\"onResizeStart($event, handle)\">\n    </div>\n  }\n}", styles: [":host{position:absolute;display:flex;flex-direction:column;font-size:10px;--mdc-outlined-button-container-height: 30px;--mdc-outlined-button-label-text-size: 10px;--mat-outlined-button-horizontal-padding: 15px;--mdc-text-button-container-height: 30px;--mdc-text-button-label-text-size: 10px;--mat-text-button-horizontal-padding: 15px;--mat-button-outlined-container-height: 30px;--mat-button-outlined-label-text-size: 10px;--mat-button-outlined-horizontal-padding: 15px;--mat-button-text-container-height: 30px;--mat-button-text-label-text-size: 10px;--mat-button-text-horizontal-padding: 15px}.component-box{position:relative;width:100%;flex:1 1 auto;min-height:0;box-sizing:border-box;display:flex;flex-direction:column;background:#fff;border:1px solid #e4e7eb;border-radius:6px;overflow:hidden;transition:box-shadow .12s ease,border-color .12s ease;cursor:default}.component-box.editing .component-title{cursor:grab}.component-box.editing .component-title:active{cursor:grabbing}.component-box.editing .drill-crumb{pointer-events:none}.component-box.editing:hover{border-color:#9db3c8;box-shadow:0 2px 8px #0f172a14}.component-box.selected{border-color:var(--brand-primary-color);box-shadow:0 0 0 1px var(--brand-primary-color),0 4px 14px #2196f32e}.component-box.text{background:transparent;border-color:transparent;border-radius:0;overflow:visible}.component-box.text.editing{border-style:dashed;border-color:#cbd2d9}.component-box.text.editing:hover{box-shadow:none}.component-box.text.selected{border-style:solid;border-color:var(--brand-primary-color);box-shadow:0 0 0 1px var(--brand-primary-color)}:host ::ng-deep .component-filter .filter-bar-container{align-items:center!important}.component-filter{flex:0 0 auto;display:block;padding:0 0 4px}.component-filter .component-title{display:flex;align-items:center;gap:4px;-webkit-user-select:none;user-select:none;padding-right:40px;font-size:var(--report-heading-size);font-weight:600;color:#1f2933;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.component-filter .component-title .truncated-icon{font-size:16px;width:16px;height:16px;color:#f59e0b}.component-filter .component-title .drill-path{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:rtl;text-align:left}.component-filter .component-title .drill-crumb{color:inherit;cursor:pointer;text-decoration:none}.component-filter .component-title .drill-crumb:hover,.component-filter .component-title .drill-crumb:focus-visible{text-decoration:underline}.component-filter .component-title .drill-separator{opacity:.6}.component-menu{position:absolute;top:2px;right:2px;z-index:30}.component-body{flex:1 1 auto;min-height:0;position:relative}.component-box.refreshing .component-body,.component-box.refreshing .component-menu{opacity:.35;transition:opacity .15s ease}.load-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(calc(1 / var(--canvas-zoom, 1)));z-index:25;pointer-events:none}:host(.height-auto) .component-state{min-height:120px}.drag-veil{position:absolute;inset:0;cursor:grab;touch-action:none}.drag-veil:active{cursor:grabbing}.component-state{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:12px;color:#7b8794;padding:8px;text-align:center}.component-state.error{color:#e15759}.handle{position:absolute;width:14px;height:14px;display:flex;align-items:center;justify-content:center;touch-action:none;z-index:20;transform:scale(calc(1 / var(--canvas-zoom, 1)))}.handle:before{content:\"\";width:8px;height:8px;background:#fff;border:1.5px solid var(--brand-primary-color);border-radius:2px;box-shadow:0 1px 2px #0f172a33}.handle-nw{left:-7px;top:-7px;cursor:nwse-resize}.handle-n{left:calc(50% - 7px);top:-7px;cursor:ns-resize}.handle-ne{right:-7px;top:-7px;cursor:nesw-resize}.handle-e{right:-7px;top:calc(50% - 7px);cursor:ew-resize}.handle-se{right:-7px;bottom:-7px;cursor:nwse-resize}.handle-s{left:calc(50% - 7px);bottom:-7px;cursor:ns-resize}.handle-sw{left:-7px;bottom:-7px;cursor:nesw-resize}.handle-w{left:-7px;top:calc(50% - 7px);cursor:ew-resize}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FsFilterModule }, { kind: "component", type: i1$3.FilterComponent, selector: "fs-filter", inputs: ["config"], outputs: ["closed", "opened", "ready"] }, { kind: "directive", type: i1$3.FilterHeadingDirective, selector: "[fsFilterHeading]" }, { kind: "ngmodule", type: FsMenuModule }, { kind: "component", type: i2$3.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i2$3.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "directive", type: i2$3.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { kind: "component", type: ComponentChartComponent, selector: "app-report-component-chart", inputs: ["component", "data", "legendSelected", "actions"], outputs: ["legendSelectedChange", "markClick", "markMiss"] }, { kind: "component", type: ComponentGridComponent, selector: "app-report-component-grid", inputs: ["reportId", "component"] }, { kind: "component", type: ComponentKpiComponent, selector: "app-report-component-kpi", inputs: ["component", "data"], outputs: ["markClick"] }, { kind: "component", type: ComponentListComponent, selector: "app-report-component-list", inputs: ["reportId", "component"] }, { kind: "component", type: ComponentTextComponent, selector: "app-report-component-text", inputs: ["html", "tokens", "editing", "shownElsewhere"], outputs: ["saved", "editEnded", "valueSettings"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ReportComponentComponent, isStandalone: true, selector: "app-report-component", inputs: { reportId: { classPropertyName: "reportId", publicName: "reportId", isSignal: false, isRequired: false, transformFunction: null }, component: { classPropertyName: "component", publicName: "component", isSignal: false, isRequired: false, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: false, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: false, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: false, isRequired: false, transformFunction: null }, snapper: { classPropertyName: "snapper", publicName: "snapper", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, tokens: { classPropertyName: "tokens", publicName: "tokens", isSignal: true, isRequired: false, transformFunction: null }, valueKeysElsewhere: { classPropertyName: "valueKeysElsewhere", publicName: "valueKeysElsewhere", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectComponent: "selectComponent", positionChanged: "positionChanged", openSettings: "openSettings", removed: "removed", valueSettings: "valueSettings", textSaved: "textSaved", valuesRemoved: "valuesRemoved" }, host: { properties: { "class.height-auto": "this.heightAuto" } }, viewQueries: [{ propertyName: "_text", first: true, predicate: ComponentTextComponent, descendants: true, isSignal: true }, { propertyName: "chartComponent", first: true, predicate: ComponentChartComponent, descendants: true }, { propertyName: "markMenu", first: true, predicate: ["markMenu"], descendants: true }, { propertyName: "markAnchor", first: true, predicate: ["markAnchor"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"component-box\"\n    [class.editing]=\"editMode\"\n    [class.text]=\"isText\"\n    [class.selected]=\"selected\"\n    [class.refreshing]=\"refreshing()\"\n    [style.padding]=\"bodyPadding\"\n    (pointerdown)=\"onComponentPointerDown($event)\"\n    (mousedown)=\"stopCanvasPan($event)\"\n    (touchstart)=\"stopCanvasPan($event)\">\n  <!-- The header is an fs-filter: heading template = title (and the edit-mode\n       drag handle), actions = the menu, items = component-level filter groups,\n       the same strip for every type (lists included). fs-filter reads its\n       config once, so the block is keyed on the component-filter set to be\n       recreated when it changes. The title shows its tokens filled, and a\n       filter change repaints it in place (shownTitle). -->\n  <!-- A text block has no title bar \u2014 it IS its words, like a text box on a\n       slide \u2014 so it gets neither the header nor the data actions. -->\n  @for (key of isText ? [] : [filterKey]; track key) {\n    <fs-filter\n        class=\"component-filter\"\n        [config]=\"filterConfig()\">\n      <ng-template fsFilterHeading>\n        <div\n            class=\"component-title\"\n            (pointerdown)=\"onDragStart($event)\">\n          <!-- While the chart is drilled the title leads its breadcrumb:\n               'Title \u203A 2026 \u203A Q3', the title as the viewer reads it\n               (shownTitle). The title goes back to the top and each\n               crumb to the period it names; the last is where the chart is.\n               A long path is cut at its left end, so the crumbs nearest the\n               chart stay in view. While the layout is edited the crumbs are\n               plain text (the stylesheet; drillTo does nothing then). -->\n          @if (drillCrumbs().length) {\n            <span class=\"drill-path\">\n              <span dir=\"ltr\">\n                <a\n                    class=\"drill-crumb\"\n                    tabindex=\"0\"\n                    (click)=\"drillTo(0)\"\n                    (keydown.enter)=\"drillTo(0)\">\n                  {{ shownTitle }}\n                </a>\n                @for (label of drillCrumbs(); track $index; let last = $last) {\n                  <span class=\"drill-separator\">{{ drillSeparator }}</span>\n                  @if (last) {\n                    <span>{{ label }}</span>\n                  } @else {\n                    <a\n                        class=\"drill-crumb\"\n                        tabindex=\"0\"\n                        (click)=\"drillTo($index + 1)\"\n                        (keydown.enter)=\"drillTo($index + 1)\">\n                      {{ label }}\n                    </a>\n                  }\n                }\n              </span>\n            </span>\n          } @else {\n            {{ shownTitle }}\n          }\n          @if (truncated) {\n            <mat-icon\n                class=\"truncated-icon\"\n                matTooltip=\"Showing a truncated result \u2014 refine the filters to see everything.\">\n              warning_amber\n            </mat-icon>\n          }\n        </div>\n      </ng-template>\n    </fs-filter>\n  }\n  <!-- The actions menu is floated top-right (absolute) rather than living in\n       fs-filter's actions slot, so its ~40px button height no longer drives the\n       header row's height. It overlays the box corner; the heading reserves\n       right padding so a long title ellipsises before it. -->\n  @if (!isText || (editMode && !textEditing())) {\n    <button\n        mat-icon-button\n        class=\"component-menu\"\n        [fsMenuTriggerFor]=\"menu\"\n        (pointerdown)=\"$event.stopPropagation()\"\n        (mousedown)=\"stopCanvasPan($event)\">\n      <mat-icon>more_vert</mat-icon>\n    </button>\n    <!-- Beside its trigger, inside the same block: an fs-menu that finds no\n         trigger of its own draws one. -->\n    <fs-menu #menu>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!isText\"\n          (click)=\"editText()\">\n        <mat-icon>edit</mat-icon>\n        <span>Edit text</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!isText\"\n          (click)=\"deleteText()\">\n        <mat-icon>delete</mat-icon>\n        <span>Delete</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!drillCrumbs().length || editMode\"\n          (click)=\"drillUp()\">\n        <mat-icon>arrow_upward</mat-icon>\n        <span>Drill up</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!drillCrumbs().length || editMode\"\n          (click)=\"drillTo(0)\">\n        <mat-icon>vertical_align_top</mat-icon>\n        <span>Back to top</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"isText\"\n          (click)=\"settings()\">\n        <mat-icon>tune</mat-icon>\n        <span>Settings</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"isText\"\n          (click)=\"exportCsv()\">\n        <mat-icon>download</mat-icon>\n        <span>Export CSV</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"isText\"\n          (click)=\"exportExcel()\">\n        <mat-icon>table_view</mat-icon>\n        <span>Export Excel</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!hidesColumns\"\n          (click)=\"chooseColumns()\">\n        <mat-icon>view_column</mat-icon>\n        <span>Columns</span>\n      </ng-template>\n    </fs-menu>\n  }\n  <div class=\"component-body\">\n    @if (isText) {\n      <app-report-component-text\n        [html]=\"textHtml() ?? component.config?.html ?? ''\"\n        [tokens]=\"tokens()\"\n        [editing]=\"textEditing()\"\n        [editMode]=\"editMode\"\n        [shownElsewhere]=\"shownElsewhere\"\n        (saved)=\"onTextSaved($event)\"\n        (editEnded)=\"textEditing.set(false)\"\n        (valueSettings)=\"valueSettings.emit($event)\">\n      </app-report-component-text>\n    } @else if (component.type === 'list') {\n      @for (key of [listResetKey()]; track key) {\n        <app-report-component-list\n          [reportId]=\"reportId\"\n          [component]=\"component\">\n        </app-report-component-list>\n      }\n    } @else if (component.type === 'grid') {\n      <app-report-component-grid\n        [reportId]=\"reportId\"\n        [component]=\"component\">\n      </app-report-component-grid>\n    } @else if (loading()) {\n      <!-- Holds the tile's height for the spinner on the first load. -->\n      <div class=\"component-state\"></div>\n    } @else if (error()) {\n      <div class=\"component-state error\">\n        {{ error() }}\n      </div>\n    } @else if (!data()?.rows?.length) {\n      <div class=\"component-state\">\n        {{ emptyMessage() }}\n      </div>\n    } @else if (component.type === 'kpi') {\n      <app-report-component-kpi\n        [component]=\"component\"\n        [data]=\"data()\"\n        (markClick)=\"onMarkClick($event)\">\n      </app-report-component-kpi>\n    } @else {\n      <app-report-component-chart\n        [component]=\"component\"\n        [data]=\"data()\"\n        [actions]=\"tileActions()\"\n        [(legendSelected)]=\"legendSelected\"\n        (markClick)=\"onMarkClick($event)\"\n        (markMiss)=\"onMarkMiss()\">\n      </app-report-component-chart>\n    }\n    <!-- In edit mode a transparent veil over the body makes the WHOLE\n         component draggable (industry standard: you grab the object, not just\n         its title bar) and keeps inner widgets from swallowing the gesture. -->\n    @if (editMode && !textEditing()) {\n      <div\n        class=\"drag-veil\"\n        (pointerdown)=\"onDragStart($event)\">\n      </div>\n    }\n  </div>\n  <!-- A load: a spinner centred on the whole tile. On a refetch the body and\n       the menu are dimmed under it (.refreshing); the title is not. -->\n  @if (loading() || refreshing()) {\n    <mat-progress-spinner\n      class=\"load-spinner\"\n      aria-label=\"Loading data\"\n      mode=\"indeterminate\"\n      [diameter]=\"15\">\n    </mat-progress-spinner>\n  }\n</div>\n<!-- The mark menu, for a click whose mark offers two or more actions. It\n     opens at the click: its trigger is a zero-size anchor that\n     anchor-at-point.ts moves there first. -->\n@if (!isText && !editMode) {\n  <span\n    #markAnchor\n    [style.position]=\"'absolute'\"\n    [fsMenuTriggerFor]=\"markMenu\">\n  </span>\n  <fs-menu #markMenu>\n    @for (action of markMenuActions(); track action) {\n      <ng-template\n          fs-menu-item\n          (click)=\"runMarkAction(action)\">\n        {{ markActionLabels[action] }}\n      </ng-template>\n    }\n  </fs-menu>\n}\n<!-- Handles live OUTSIDE the clipped box so they straddle its edges. -->\n@if (editMode && selected) {\n  @for (handle of resizeHandles; track handle) {\n    <div\n      class=\"handle handle-{{ handle }}\"\n      (mousedown)=\"stopCanvasPan($event)\"\n      (pointerdown)=\"onResizeStart($event, handle)\">\n    </div>\n  }\n}", styles: [":host{position:absolute;display:flex;flex-direction:column;font-size:10px;--mdc-outlined-button-container-height: 30px;--mdc-outlined-button-label-text-size: 10px;--mat-outlined-button-horizontal-padding: 15px;--mdc-text-button-container-height: 30px;--mdc-text-button-label-text-size: 10px;--mat-text-button-horizontal-padding: 15px;--mat-button-outlined-container-height: 30px;--mat-button-outlined-label-text-size: 10px;--mat-button-outlined-horizontal-padding: 15px;--mat-button-text-container-height: 30px;--mat-button-text-label-text-size: 10px;--mat-button-text-horizontal-padding: 15px}.component-box{position:relative;width:100%;flex:1 1 auto;min-height:0;box-sizing:border-box;display:flex;flex-direction:column;background:#fff;border:1px solid #e4e7eb;border-radius:6px;overflow:hidden;transition:box-shadow .12s ease,border-color .12s ease;cursor:default}.component-box.editing .component-title{cursor:grab}.component-box.editing .component-title:active{cursor:grabbing}.component-box.editing .drill-crumb{pointer-events:none}.component-box.editing:hover{border-color:#9db3c8;box-shadow:0 2px 8px #0f172a14}.component-box.selected{border-color:var(--brand-primary-color);box-shadow:0 0 0 1px var(--brand-primary-color),0 4px 14px #2196f32e}.component-box.text{background:transparent;border-color:transparent;border-radius:0;overflow:visible}.component-box.text.editing{border-style:dashed;border-color:#cbd2d9}.component-box.text.editing:hover{box-shadow:none}.component-box.text.selected{border-style:solid;border-color:var(--brand-primary-color);box-shadow:0 0 0 1px var(--brand-primary-color)}:host ::ng-deep .component-filter .filter-bar-container{align-items:center!important}.component-filter{flex:0 0 auto;display:block;padding:0 0 4px}.component-filter .component-title{display:flex;align-items:center;gap:4px;-webkit-user-select:none;user-select:none;padding-right:40px;font-size:var(--report-heading-size);font-weight:600;color:#1f2933;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.component-filter .component-title .truncated-icon{font-size:16px;width:16px;height:16px;color:#f59e0b}.component-filter .component-title .drill-path{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:rtl;text-align:left}.component-filter .component-title .drill-crumb{color:inherit;cursor:pointer;text-decoration:none}.component-filter .component-title .drill-crumb:hover,.component-filter .component-title .drill-crumb:focus-visible{text-decoration:underline}.component-filter .component-title .drill-separator{opacity:.6}.component-menu{position:absolute;top:2px;right:2px;z-index:30}.component-body{flex:1 1 auto;min-height:0;position:relative}.component-box.refreshing .component-body,.component-box.refreshing .component-menu{opacity:.35;transition:opacity .15s ease}.load-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(calc(1 / var(--canvas-zoom, 1)));z-index:25;pointer-events:none}:host(.height-auto) .component-state{min-height:120px}.drag-veil{position:absolute;inset:0;cursor:grab;touch-action:none}.drag-veil:active{cursor:grabbing}.component-state{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:12px;color:#7b8794;padding:8px;text-align:center}.component-state.error{color:#e15759}.handle{position:absolute;width:14px;height:14px;display:flex;align-items:center;justify-content:center;touch-action:none;z-index:20;transform:scale(calc(1 / var(--canvas-zoom, 1)))}.handle:before{content:\"\";width:8px;height:8px;background:#fff;border:1.5px solid var(--brand-primary-color);border-radius:2px;box-shadow:0 1px 2px #0f172a33}.handle-nw{left:-7px;top:-7px;cursor:nwse-resize}.handle-n{left:calc(50% - 7px);top:-7px;cursor:ns-resize}.handle-ne{right:-7px;top:-7px;cursor:nesw-resize}.handle-e{right:-7px;top:calc(50% - 7px);cursor:ew-resize}.handle-se{right:-7px;bottom:-7px;cursor:nwse-resize}.handle-s{left:calc(50% - 7px);bottom:-7px;cursor:ns-resize}.handle-sw{left:-7px;bottom:-7px;cursor:nesw-resize}.handle-w{left:-7px;top:calc(50% - 7px);cursor:ew-resize}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FsFilterModule }, { kind: "component", type: i1$3.FilterComponent, selector: "fs-filter", inputs: ["config"], outputs: ["closed", "opened", "ready"] }, { kind: "directive", type: i1$3.FilterHeadingDirective, selector: "[fsFilterHeading]" }, { kind: "ngmodule", type: FsMenuModule }, { kind: "component", type: i2$3.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i2$3.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "directive", type: i2$3.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { kind: "component", type: ComponentChartComponent, selector: "app-report-component-chart", inputs: ["component", "data", "legendSelected", "actions"], outputs: ["legendSelectedChange", "markClick", "markMiss"] }, { kind: "component", type: ComponentGridComponent, selector: "app-report-component-grid", inputs: ["reportId", "component"] }, { kind: "component", type: ComponentKpiComponent, selector: "app-report-component-kpi", inputs: ["component", "data"], outputs: ["markClick"] }, { kind: "component", type: ComponentListComponent, selector: "app-report-component-list", inputs: ["reportId", "component"] }, { kind: "component", type: ComponentTextComponent, selector: "app-report-component-text", inputs: ["html", "tokens", "editing", "editMode", "shownElsewhere"], outputs: ["saved", "editEnded", "valueSettings"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportComponentComponent, decorators: [{
             type: Component,
@@ -12268,7 +12276,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         ComponentKpiComponent,
                         ComponentListComponent,
                         ComponentTextComponent,
-                    ], template: "<div\n    class=\"component-box\"\n    [class.editing]=\"editMode\"\n    [class.text]=\"isText\"\n    [class.selected]=\"selected\"\n    [class.refreshing]=\"refreshing()\"\n    [style.padding]=\"bodyPadding\"\n    (pointerdown)=\"onComponentPointerDown($event)\"\n    (mousedown)=\"stopCanvasPan($event)\"\n    (touchstart)=\"stopCanvasPan($event)\">\n  <!-- The header is an fs-filter: heading template = title (and the edit-mode\n       drag handle), actions = the menu, items = component-level filter groups,\n       the same strip for every type (lists included). fs-filter reads its\n       config once, so the block is keyed on the component-filter set to be\n       recreated when it changes. The title shows its tokens filled, and a\n       filter change repaints it in place (shownTitle). -->\n  <!-- A text block has no title bar \u2014 it IS its words, like a text box on a\n       slide \u2014 so it gets neither the header nor the data actions. -->\n  @for (key of isText ? [] : [filterKey]; track key) {\n    <fs-filter\n        class=\"component-filter\"\n        [config]=\"filterConfig()\">\n      <ng-template fsFilterHeading>\n        <div\n            class=\"component-title\"\n            (pointerdown)=\"onDragStart($event)\">\n          <!-- While the chart is drilled the title leads its breadcrumb:\n               'Title \u203A 2026 \u203A Q3', the title as the viewer reads it\n               (shownTitle). The title goes back to the top and each\n               crumb to the period it names; the last is where the chart is.\n               A long path is cut at its left end, so the crumbs nearest the\n               chart stay in view. While the layout is edited the crumbs are\n               plain text (the stylesheet; drillTo does nothing then). -->\n          @if (drillCrumbs().length) {\n            <span class=\"drill-path\">\n              <span dir=\"ltr\">\n                <a\n                    class=\"drill-crumb\"\n                    tabindex=\"0\"\n                    (click)=\"drillTo(0)\"\n                    (keydown.enter)=\"drillTo(0)\">\n                  {{ shownTitle }}\n                </a>\n                @for (label of drillCrumbs(); track $index; let last = $last) {\n                  <span class=\"drill-separator\">{{ drillSeparator }}</span>\n                  @if (last) {\n                    <span>{{ label }}</span>\n                  } @else {\n                    <a\n                        class=\"drill-crumb\"\n                        tabindex=\"0\"\n                        (click)=\"drillTo($index + 1)\"\n                        (keydown.enter)=\"drillTo($index + 1)\">\n                      {{ label }}\n                    </a>\n                  }\n                }\n              </span>\n            </span>\n          } @else {\n            {{ shownTitle }}\n          }\n          @if (truncated) {\n            <mat-icon\n                class=\"truncated-icon\"\n                matTooltip=\"Showing a truncated result \u2014 refine the filters to see everything.\">\n              warning_amber\n            </mat-icon>\n          }\n        </div>\n      </ng-template>\n    </fs-filter>\n  }\n  <!-- The actions menu is floated top-right (absolute) rather than living in\n       fs-filter's actions slot, so its ~40px button height no longer drives the\n       header row's height. It overlays the box corner; the heading reserves\n       right padding so a long title ellipsises before it. -->\n  @if (!isText || (editMode && !textEditing())) {\n    <button\n        mat-icon-button\n        class=\"component-menu\"\n        [fsMenuTriggerFor]=\"menu\"\n        (pointerdown)=\"$event.stopPropagation()\"\n        (mousedown)=\"stopCanvasPan($event)\">\n      <mat-icon>more_vert</mat-icon>\n    </button>\n    <!-- Beside its trigger, inside the same block: an fs-menu that finds no\n         trigger of its own draws one. -->\n    <fs-menu #menu>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!isText\"\n          (click)=\"editText()\">\n        <mat-icon>edit</mat-icon>\n        <span>Edit text</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!isText\"\n          (click)=\"deleteText()\">\n        <mat-icon>delete</mat-icon>\n        <span>Delete</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!drillCrumbs().length || editMode\"\n          (click)=\"drillUp()\">\n        <mat-icon>arrow_upward</mat-icon>\n        <span>Drill up</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!drillCrumbs().length || editMode\"\n          (click)=\"drillTo(0)\">\n        <mat-icon>vertical_align_top</mat-icon>\n        <span>Back to top</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"isText\"\n          (click)=\"settings()\">\n        <mat-icon>tune</mat-icon>\n        <span>Settings</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"isText\"\n          (click)=\"exportCsv()\">\n        <mat-icon>download</mat-icon>\n        <span>Export CSV</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"isText\"\n          (click)=\"exportExcel()\">\n        <mat-icon>table_view</mat-icon>\n        <span>Export Excel</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!hidesColumns\"\n          (click)=\"chooseColumns()\">\n        <mat-icon>view_column</mat-icon>\n        <span>Columns</span>\n      </ng-template>\n    </fs-menu>\n  }\n  <div class=\"component-body\">\n    @if (isText) {\n      <app-report-component-text\n        [html]=\"textHtml() ?? component.config?.html ?? ''\"\n        [tokens]=\"tokens()\"\n        [editing]=\"textEditing()\"\n        [shownElsewhere]=\"shownElsewhere\"\n        (saved)=\"onTextSaved($event)\"\n        (editEnded)=\"textEditing.set(false)\"\n        (valueSettings)=\"valueSettings.emit($event)\">\n      </app-report-component-text>\n    } @else if (component.type === 'list') {\n      @for (key of [listResetKey()]; track key) {\n        <app-report-component-list\n          [reportId]=\"reportId\"\n          [component]=\"component\">\n        </app-report-component-list>\n      }\n    } @else if (component.type === 'grid') {\n      <app-report-component-grid\n        [reportId]=\"reportId\"\n        [component]=\"component\">\n      </app-report-component-grid>\n    } @else if (loading()) {\n      <!-- Holds the tile's height for the spinner on the first load. -->\n      <div class=\"component-state\"></div>\n    } @else if (error()) {\n      <div class=\"component-state error\">\n        {{ error() }}\n      </div>\n    } @else if (!data()?.rows?.length) {\n      <div class=\"component-state\">\n        {{ emptyMessage() }}\n      </div>\n    } @else if (component.type === 'kpi') {\n      <app-report-component-kpi\n        [component]=\"component\"\n        [data]=\"data()\"\n        (markClick)=\"onMarkClick($event)\">\n      </app-report-component-kpi>\n    } @else {\n      <app-report-component-chart\n        [component]=\"component\"\n        [data]=\"data()\"\n        [actions]=\"tileActions()\"\n        [(legendSelected)]=\"legendSelected\"\n        (markClick)=\"onMarkClick($event)\"\n        (markMiss)=\"onMarkMiss()\">\n      </app-report-component-chart>\n    }\n    <!-- In edit mode a transparent veil over the body makes the WHOLE\n         component draggable (industry standard: you grab the object, not just\n         its title bar) and keeps inner widgets from swallowing the gesture. -->\n    @if (editMode && !textEditing()) {\n      <div\n        class=\"drag-veil\"\n        (pointerdown)=\"onDragStart($event)\">\n      </div>\n    }\n  </div>\n  <!-- A load: a spinner centred on the whole tile. On a refetch the body and\n       the menu are dimmed under it (.refreshing); the title is not. -->\n  @if (loading() || refreshing()) {\n    <mat-progress-spinner\n      class=\"load-spinner\"\n      aria-label=\"Loading data\"\n      mode=\"indeterminate\"\n      [diameter]=\"15\">\n    </mat-progress-spinner>\n  }\n</div>\n<!-- The mark menu, for a click whose mark offers two or more actions. It\n     opens at the click: its trigger is a zero-size anchor that\n     anchor-at-point.ts moves there first. -->\n@if (!isText && !editMode) {\n  <span\n    #markAnchor\n    [style.position]=\"'absolute'\"\n    [fsMenuTriggerFor]=\"markMenu\">\n  </span>\n  <fs-menu #markMenu>\n    @for (action of markMenuActions(); track action) {\n      <ng-template\n          fs-menu-item\n          (click)=\"runMarkAction(action)\">\n        {{ markActionLabels[action] }}\n      </ng-template>\n    }\n  </fs-menu>\n}\n<!-- Handles live OUTSIDE the clipped box so they straddle its edges. -->\n@if (editMode && selected) {\n  @for (handle of resizeHandles; track handle) {\n    <div\n      class=\"handle handle-{{ handle }}\"\n      (mousedown)=\"stopCanvasPan($event)\"\n      (pointerdown)=\"onResizeStart($event, handle)\">\n    </div>\n  }\n}", styles: [":host{position:absolute;display:flex;flex-direction:column;font-size:10px;--mdc-outlined-button-container-height: 30px;--mdc-outlined-button-label-text-size: 10px;--mat-outlined-button-horizontal-padding: 15px;--mdc-text-button-container-height: 30px;--mdc-text-button-label-text-size: 10px;--mat-text-button-horizontal-padding: 15px;--mat-button-outlined-container-height: 30px;--mat-button-outlined-label-text-size: 10px;--mat-button-outlined-horizontal-padding: 15px;--mat-button-text-container-height: 30px;--mat-button-text-label-text-size: 10px;--mat-button-text-horizontal-padding: 15px}.component-box{position:relative;width:100%;flex:1 1 auto;min-height:0;box-sizing:border-box;display:flex;flex-direction:column;background:#fff;border:1px solid #e4e7eb;border-radius:6px;overflow:hidden;transition:box-shadow .12s ease,border-color .12s ease;cursor:default}.component-box.editing .component-title{cursor:grab}.component-box.editing .component-title:active{cursor:grabbing}.component-box.editing .drill-crumb{pointer-events:none}.component-box.editing:hover{border-color:#9db3c8;box-shadow:0 2px 8px #0f172a14}.component-box.selected{border-color:var(--brand-primary-color);box-shadow:0 0 0 1px var(--brand-primary-color),0 4px 14px #2196f32e}.component-box.text{background:transparent;border-color:transparent;border-radius:0;overflow:visible}.component-box.text.editing{border-style:dashed;border-color:#cbd2d9}.component-box.text.editing:hover{box-shadow:none}.component-box.text.selected{border-style:solid;border-color:var(--brand-primary-color);box-shadow:0 0 0 1px var(--brand-primary-color)}:host ::ng-deep .component-filter .filter-bar-container{align-items:center!important}.component-filter{flex:0 0 auto;display:block;padding:0 0 4px}.component-filter .component-title{display:flex;align-items:center;gap:4px;-webkit-user-select:none;user-select:none;padding-right:40px;font-size:var(--report-heading-size);font-weight:600;color:#1f2933;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.component-filter .component-title .truncated-icon{font-size:16px;width:16px;height:16px;color:#f59e0b}.component-filter .component-title .drill-path{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:rtl;text-align:left}.component-filter .component-title .drill-crumb{color:inherit;cursor:pointer;text-decoration:none}.component-filter .component-title .drill-crumb:hover,.component-filter .component-title .drill-crumb:focus-visible{text-decoration:underline}.component-filter .component-title .drill-separator{opacity:.6}.component-menu{position:absolute;top:2px;right:2px;z-index:30}.component-body{flex:1 1 auto;min-height:0;position:relative}.component-box.refreshing .component-body,.component-box.refreshing .component-menu{opacity:.35;transition:opacity .15s ease}.load-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(calc(1 / var(--canvas-zoom, 1)));z-index:25;pointer-events:none}:host(.height-auto) .component-state{min-height:120px}.drag-veil{position:absolute;inset:0;cursor:grab;touch-action:none}.drag-veil:active{cursor:grabbing}.component-state{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:12px;color:#7b8794;padding:8px;text-align:center}.component-state.error{color:#e15759}.handle{position:absolute;width:14px;height:14px;display:flex;align-items:center;justify-content:center;touch-action:none;z-index:20;transform:scale(calc(1 / var(--canvas-zoom, 1)))}.handle:before{content:\"\";width:8px;height:8px;background:#fff;border:1.5px solid var(--brand-primary-color);border-radius:2px;box-shadow:0 1px 2px #0f172a33}.handle-nw{left:-7px;top:-7px;cursor:nwse-resize}.handle-n{left:calc(50% - 7px);top:-7px;cursor:ns-resize}.handle-ne{right:-7px;top:-7px;cursor:nesw-resize}.handle-e{right:-7px;top:calc(50% - 7px);cursor:ew-resize}.handle-se{right:-7px;bottom:-7px;cursor:nwse-resize}.handle-s{left:calc(50% - 7px);bottom:-7px;cursor:ns-resize}.handle-sw{left:-7px;bottom:-7px;cursor:nesw-resize}.handle-w{left:-7px;top:calc(50% - 7px);cursor:ew-resize}\n"] }]
+                    ], template: "<div\n    class=\"component-box\"\n    [class.editing]=\"editMode\"\n    [class.text]=\"isText\"\n    [class.selected]=\"selected\"\n    [class.refreshing]=\"refreshing()\"\n    [style.padding]=\"bodyPadding\"\n    (pointerdown)=\"onComponentPointerDown($event)\"\n    (mousedown)=\"stopCanvasPan($event)\"\n    (touchstart)=\"stopCanvasPan($event)\">\n  <!-- The header is an fs-filter: heading template = title (and the edit-mode\n       drag handle), actions = the menu, items = component-level filter groups,\n       the same strip for every type (lists included). fs-filter reads its\n       config once, so the block is keyed on the component-filter set to be\n       recreated when it changes. The title shows its tokens filled, and a\n       filter change repaints it in place (shownTitle). -->\n  <!-- A text block has no title bar \u2014 it IS its words, like a text box on a\n       slide \u2014 so it gets neither the header nor the data actions. -->\n  @for (key of isText ? [] : [filterKey]; track key) {\n    <fs-filter\n        class=\"component-filter\"\n        [config]=\"filterConfig()\">\n      <ng-template fsFilterHeading>\n        <div\n            class=\"component-title\"\n            (pointerdown)=\"onDragStart($event)\">\n          <!-- While the chart is drilled the title leads its breadcrumb:\n               'Title \u203A 2026 \u203A Q3', the title as the viewer reads it\n               (shownTitle). The title goes back to the top and each\n               crumb to the period it names; the last is where the chart is.\n               A long path is cut at its left end, so the crumbs nearest the\n               chart stay in view. While the layout is edited the crumbs are\n               plain text (the stylesheet; drillTo does nothing then). -->\n          @if (drillCrumbs().length) {\n            <span class=\"drill-path\">\n              <span dir=\"ltr\">\n                <a\n                    class=\"drill-crumb\"\n                    tabindex=\"0\"\n                    (click)=\"drillTo(0)\"\n                    (keydown.enter)=\"drillTo(0)\">\n                  {{ shownTitle }}\n                </a>\n                @for (label of drillCrumbs(); track $index; let last = $last) {\n                  <span class=\"drill-separator\">{{ drillSeparator }}</span>\n                  @if (last) {\n                    <span>{{ label }}</span>\n                  } @else {\n                    <a\n                        class=\"drill-crumb\"\n                        tabindex=\"0\"\n                        (click)=\"drillTo($index + 1)\"\n                        (keydown.enter)=\"drillTo($index + 1)\">\n                      {{ label }}\n                    </a>\n                  }\n                }\n              </span>\n            </span>\n          } @else {\n            {{ shownTitle }}\n          }\n          @if (truncated) {\n            <mat-icon\n                class=\"truncated-icon\"\n                matTooltip=\"Showing a truncated result \u2014 refine the filters to see everything.\">\n              warning_amber\n            </mat-icon>\n          }\n        </div>\n      </ng-template>\n    </fs-filter>\n  }\n  <!-- The actions menu is floated top-right (absolute) rather than living in\n       fs-filter's actions slot, so its ~40px button height no longer drives the\n       header row's height. It overlays the box corner; the heading reserves\n       right padding so a long title ellipsises before it. -->\n  @if (!isText || (editMode && !textEditing())) {\n    <button\n        mat-icon-button\n        class=\"component-menu\"\n        [fsMenuTriggerFor]=\"menu\"\n        (pointerdown)=\"$event.stopPropagation()\"\n        (mousedown)=\"stopCanvasPan($event)\">\n      <mat-icon>more_vert</mat-icon>\n    </button>\n    <!-- Beside its trigger, inside the same block: an fs-menu that finds no\n         trigger of its own draws one. -->\n    <fs-menu #menu>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!isText\"\n          (click)=\"editText()\">\n        <mat-icon>edit</mat-icon>\n        <span>Edit text</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!isText\"\n          (click)=\"deleteText()\">\n        <mat-icon>delete</mat-icon>\n        <span>Delete</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!drillCrumbs().length || editMode\"\n          (click)=\"drillUp()\">\n        <mat-icon>arrow_upward</mat-icon>\n        <span>Drill up</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!drillCrumbs().length || editMode\"\n          (click)=\"drillTo(0)\">\n        <mat-icon>vertical_align_top</mat-icon>\n        <span>Back to top</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"isText\"\n          (click)=\"settings()\">\n        <mat-icon>tune</mat-icon>\n        <span>Settings</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"isText\"\n          (click)=\"exportCsv()\">\n        <mat-icon>download</mat-icon>\n        <span>Export CSV</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"isText\"\n          (click)=\"exportExcel()\">\n        <mat-icon>table_view</mat-icon>\n        <span>Export Excel</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!hidesColumns\"\n          (click)=\"chooseColumns()\">\n        <mat-icon>view_column</mat-icon>\n        <span>Columns</span>\n      </ng-template>\n    </fs-menu>\n  }\n  <div class=\"component-body\">\n    @if (isText) {\n      <app-report-component-text\n        [html]=\"textHtml() ?? component.config?.html ?? ''\"\n        [tokens]=\"tokens()\"\n        [editing]=\"textEditing()\"\n        [editMode]=\"editMode\"\n        [shownElsewhere]=\"shownElsewhere\"\n        (saved)=\"onTextSaved($event)\"\n        (editEnded)=\"textEditing.set(false)\"\n        (valueSettings)=\"valueSettings.emit($event)\">\n      </app-report-component-text>\n    } @else if (component.type === 'list') {\n      @for (key of [listResetKey()]; track key) {\n        <app-report-component-list\n          [reportId]=\"reportId\"\n          [component]=\"component\">\n        </app-report-component-list>\n      }\n    } @else if (component.type === 'grid') {\n      <app-report-component-grid\n        [reportId]=\"reportId\"\n        [component]=\"component\">\n      </app-report-component-grid>\n    } @else if (loading()) {\n      <!-- Holds the tile's height for the spinner on the first load. -->\n      <div class=\"component-state\"></div>\n    } @else if (error()) {\n      <div class=\"component-state error\">\n        {{ error() }}\n      </div>\n    } @else if (!data()?.rows?.length) {\n      <div class=\"component-state\">\n        {{ emptyMessage() }}\n      </div>\n    } @else if (component.type === 'kpi') {\n      <app-report-component-kpi\n        [component]=\"component\"\n        [data]=\"data()\"\n        (markClick)=\"onMarkClick($event)\">\n      </app-report-component-kpi>\n    } @else {\n      <app-report-component-chart\n        [component]=\"component\"\n        [data]=\"data()\"\n        [actions]=\"tileActions()\"\n        [(legendSelected)]=\"legendSelected\"\n        (markClick)=\"onMarkClick($event)\"\n        (markMiss)=\"onMarkMiss()\">\n      </app-report-component-chart>\n    }\n    <!-- In edit mode a transparent veil over the body makes the WHOLE\n         component draggable (industry standard: you grab the object, not just\n         its title bar) and keeps inner widgets from swallowing the gesture. -->\n    @if (editMode && !textEditing()) {\n      <div\n        class=\"drag-veil\"\n        (pointerdown)=\"onDragStart($event)\">\n      </div>\n    }\n  </div>\n  <!-- A load: a spinner centred on the whole tile. On a refetch the body and\n       the menu are dimmed under it (.refreshing); the title is not. -->\n  @if (loading() || refreshing()) {\n    <mat-progress-spinner\n      class=\"load-spinner\"\n      aria-label=\"Loading data\"\n      mode=\"indeterminate\"\n      [diameter]=\"15\">\n    </mat-progress-spinner>\n  }\n</div>\n<!-- The mark menu, for a click whose mark offers two or more actions. It\n     opens at the click: its trigger is a zero-size anchor that\n     anchor-at-point.ts moves there first. -->\n@if (!isText && !editMode) {\n  <span\n    #markAnchor\n    [style.position]=\"'absolute'\"\n    [fsMenuTriggerFor]=\"markMenu\">\n  </span>\n  <fs-menu #markMenu>\n    @for (action of markMenuActions(); track action) {\n      <ng-template\n          fs-menu-item\n          (click)=\"runMarkAction(action)\">\n        {{ markActionLabels[action] }}\n      </ng-template>\n    }\n  </fs-menu>\n}\n<!-- Handles live OUTSIDE the clipped box so they straddle its edges. -->\n@if (editMode && selected) {\n  @for (handle of resizeHandles; track handle) {\n    <div\n      class=\"handle handle-{{ handle }}\"\n      (mousedown)=\"stopCanvasPan($event)\"\n      (pointerdown)=\"onResizeStart($event, handle)\">\n    </div>\n  }\n}", styles: [":host{position:absolute;display:flex;flex-direction:column;font-size:10px;--mdc-outlined-button-container-height: 30px;--mdc-outlined-button-label-text-size: 10px;--mat-outlined-button-horizontal-padding: 15px;--mdc-text-button-container-height: 30px;--mdc-text-button-label-text-size: 10px;--mat-text-button-horizontal-padding: 15px;--mat-button-outlined-container-height: 30px;--mat-button-outlined-label-text-size: 10px;--mat-button-outlined-horizontal-padding: 15px;--mat-button-text-container-height: 30px;--mat-button-text-label-text-size: 10px;--mat-button-text-horizontal-padding: 15px}.component-box{position:relative;width:100%;flex:1 1 auto;min-height:0;box-sizing:border-box;display:flex;flex-direction:column;background:#fff;border:1px solid #e4e7eb;border-radius:6px;overflow:hidden;transition:box-shadow .12s ease,border-color .12s ease;cursor:default}.component-box.editing .component-title{cursor:grab}.component-box.editing .component-title:active{cursor:grabbing}.component-box.editing .drill-crumb{pointer-events:none}.component-box.editing:hover{border-color:#9db3c8;box-shadow:0 2px 8px #0f172a14}.component-box.selected{border-color:var(--brand-primary-color);box-shadow:0 0 0 1px var(--brand-primary-color),0 4px 14px #2196f32e}.component-box.text{background:transparent;border-color:transparent;border-radius:0;overflow:visible}.component-box.text.editing{border-style:dashed;border-color:#cbd2d9}.component-box.text.editing:hover{box-shadow:none}.component-box.text.selected{border-style:solid;border-color:var(--brand-primary-color);box-shadow:0 0 0 1px var(--brand-primary-color)}:host ::ng-deep .component-filter .filter-bar-container{align-items:center!important}.component-filter{flex:0 0 auto;display:block;padding:0 0 4px}.component-filter .component-title{display:flex;align-items:center;gap:4px;-webkit-user-select:none;user-select:none;padding-right:40px;font-size:var(--report-heading-size);font-weight:600;color:#1f2933;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.component-filter .component-title .truncated-icon{font-size:16px;width:16px;height:16px;color:#f59e0b}.component-filter .component-title .drill-path{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:rtl;text-align:left}.component-filter .component-title .drill-crumb{color:inherit;cursor:pointer;text-decoration:none}.component-filter .component-title .drill-crumb:hover,.component-filter .component-title .drill-crumb:focus-visible{text-decoration:underline}.component-filter .component-title .drill-separator{opacity:.6}.component-menu{position:absolute;top:2px;right:2px;z-index:30}.component-body{flex:1 1 auto;min-height:0;position:relative}.component-box.refreshing .component-body,.component-box.refreshing .component-menu{opacity:.35;transition:opacity .15s ease}.load-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(calc(1 / var(--canvas-zoom, 1)));z-index:25;pointer-events:none}:host(.height-auto) .component-state{min-height:120px}.drag-veil{position:absolute;inset:0;cursor:grab;touch-action:none}.drag-veil:active{cursor:grabbing}.component-state{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:12px;color:#7b8794;padding:8px;text-align:center}.component-state.error{color:#e15759}.handle{position:absolute;width:14px;height:14px;display:flex;align-items:center;justify-content:center;touch-action:none;z-index:20;transform:scale(calc(1 / var(--canvas-zoom, 1)))}.handle:before{content:\"\";width:8px;height:8px;background:#fff;border:1.5px solid var(--brand-primary-color);border-radius:2px;box-shadow:0 1px 2px #0f172a33}.handle-nw{left:-7px;top:-7px;cursor:nwse-resize}.handle-n{left:calc(50% - 7px);top:-7px;cursor:ns-resize}.handle-ne{right:-7px;top:-7px;cursor:nesw-resize}.handle-e{right:-7px;top:calc(50% - 7px);cursor:ew-resize}.handle-se{right:-7px;bottom:-7px;cursor:nwse-resize}.handle-s{left:calc(50% - 7px);bottom:-7px;cursor:ns-resize}.handle-sw{left:-7px;bottom:-7px;cursor:nesw-resize}.handle-w{left:-7px;top:calc(50% - 7px);cursor:ew-resize}\n"] }]
         }], propDecorators: { reportId: [{
                 type: Input
             }], component: [{
@@ -15411,7 +15419,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-rzMA7zhn.mjs')).default;
+    const echarts = (await import('./firestitch-report-echarts-z76sZHp7.mjs')).default;
     const host = document.createElement('div');
     host.style.width = `${width}px`;
     host.style.height = `${height}px`;
@@ -15722,6 +15730,18 @@ const NO_BAND_MARGIN = 0.5 * PT;
 const NO_BANDS = { headerHeight: 0, footerHeight: 0 };
 // The last row of a list box whose rows carry on past it.
 const CONTINUED_NOTICE = 'Continued on the following pages';
+// The last row of a list box whose rows have nowhere to go: its heading and
+// totals row, wrapped tall in narrow columns, leave a continuation page no
+// room for a row.
+const NO_ROOM_NOTICE = 'Not enough room for this table — enlarge the tile';
+// A list's or a table tile's table: its font size and cell padding, points.
+const TABLE_FONT_SIZE = 8;
+const TABLE_CELL_PADDING = 3;
+// What a component's box says when it could not be drawn.
+const UNDRAWN_NOTE = 'Could not be drawn';
+// Thrown from autoTable's page hook to stop an on-page table at the first page
+// it would add (_drawTable).
+const STRAY_PAGE = new Error('The table ran past its page');
 // 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;
@@ -15744,7 +15764,14 @@ const GRID_INDENT$1 = 8;
 // row-height estimate, so it cannot spill past the box. The rows that do not
 // fit continue on pages of their own after the report page, under the same
 // header/footer and with the same column widths, up to PDF_LIST_ROWS; a
-// longer result ends in a row pointing to the component's CSV export.
+// longer result ends in a row pointing to the component's CSV export. A
+// table whose heading and totals row leave a continuation page no room for a
+// row stops at its box with a notice instead: autoTable would add pages
+// without end trying to place it.
+//
+// A component that fails to draw is marked in its box and the file goes on
+// (_guarded); build() hands back the ones that did, as it does the text it
+// cut.
 //
 // A text block's tables are drawn by autoTable too, from the line its words
 // reach, in the column widths the canvas gives them (ReportTextLayoutService).
@@ -15766,12 +15793,16 @@ class ReportPdfService {
             // Each continuation appends its pages at the end of the document, so
             // two lists that overflowed on one page follow it back to back.
             for (const overflow of overflows) {
-                pageNumber = await this._renderContinuation(context, collectedPage.page, index, pageNumber, overflow);
+                const tokens = this._tokens(context, collectedPage.page, index, pageNumber + 1);
+                await this._guarded(context, overflow.component, tokens.pageName, tokens, false, async () => {
+                    pageNumber = await this._renderContinuation(context, collectedPage.page, index, pageNumber, overflow);
+                });
             }
         }
         return {
             overflows: [...context.textOverflows.values()],
             overflowNote: PDF_OVERFLOW_NOTE,
+            undrawn: [...context.undrawn.values()],
             save: () => {
                 context.doc.save(`${this._slug(collected.report.name)}.pdf`);
             },
@@ -15780,13 +15811,14 @@ class ReportPdfService {
     async _context(collected) {
         const report = collected.report;
         const { jsPDF } = await import('jspdf');
-        const autoTable = (await import('jspdf-autotable')).default;
+        const { default: autoTable, __createTable: createTable } = await import('jspdf-autotable');
         const pageW = report.pageWidth * PT;
         const pageH = report.pageHeight * PT;
         const orientation = pageW >= pageH ? 'landscape' : 'portrait';
         return {
             doc: new jsPDF({ orientation, unit: 'pt', format: [pageW, pageH] }),
             autoTable,
+            createTable,
             jsPDF,
             report,
             timezone: resolveReportTimezone(report),
@@ -15798,6 +15830,7 @@ class ReportPdfService {
             filterFields: collected.filterFields,
             masterFilters: layerFilterFields(collected.filterFields, report.filterGroups ?? [], null),
             textOverflows: new Map(),
+            undrawn: new Map(),
         };
     }
     // One report page: the header and footer first, under the page's own
@@ -15810,14 +15843,59 @@ class ReportPdfService {
         doc.addPage([context.pageW, context.pageH], context.orientation);
         await this._renderMaster(context, collectedPage.page, tokens);
         for (const item of collectedPage.components) {
-            if (item.component.type !== 'text') {
-                await this._renderComponent(context, item, tokens, overflows);
+            await this._guarded(context, item.component, tokens.pageName, pageTokens, true, async () => {
+                if (item.component.type !== 'text') {
+                    await this._renderComponent(context, collectedPage.page, item, tokens, overflows);
+                }
+                else if (await this._renderText(context, item.component, pageTokens)) {
+                    this._recordOverflow(context, item.component, tokens.pageName, pageTokens);
+                }
+            });
+        }
+    }
+    // Draws one component, or one list's continuation pages, so that whatever
+    // goes wrong stays with it: a draw that throws loses the pages it added, its
+    // box on the page (boxed) is blanked under UNDRAWN_NOTE, and the export's
+    // gate names it under page. One component can then never stop the file.
+    async _guarded(context, component, page, tokens, boxed, draw) {
+        const { doc } = context;
+        const current = doc.getCurrentPageInfo().pageNumber;
+        const pages = doc.getNumberOfPages();
+        try {
+            await draw();
+        }
+        catch (error) {
+            // The file only says the box could not be drawn; the console keeps why.
+            console.error(error);
+            while (doc.getNumberOfPages() > pages) {
+                doc.deletePage(doc.getNumberOfPages());
             }
-            else if (await this._renderText(context, item.component, pageTokens)) {
-                this._recordOverflow(context, item.component, tokens.pageName, pageTokens);
+            doc.setPage(current);
+            if (boxed) {
+                this._undrawnBox(doc, component);
+            }
+            if (!context.undrawn.has(component.id)) {
+                context.undrawn.set(component.id, {
+                    componentId: component.id,
+                    page,
+                    name: component.type === 'text'
+                        ? textOverflow(component, page, tokens).snippet
+                        : exportTitle(component, tokens),
+                });
             }
         }
     }
+    // A component's box blanked under UNDRAWN_NOTE, over whatever of it was
+    // drawn before it failed.
+    _undrawnBox(doc, component) {
+        const x = component.x * PT;
+        const y = component.y * PT;
+        const w = component.w * PT;
+        const h = component.h * PT;
+        doc.setFillColor('#ffffff');
+        doc.rect(x, y, w, h, 'F');
+        this._boxNote(doc, UNDRAWN_NOTE, x, y, w, h);
+    }
     // The header and footer, their value tokens filled with the master's values
     // whichever page they sit on: a report page or a continuation page. They
     // read no page filter: its token prints the em dash there.
@@ -15827,9 +15905,11 @@ class ReportPdfService {
         }
         const masterTokens = { ...tokens, values: context.masterValues, filters: context.masterFilters };
         for (const component of (context.report.master?.components ?? []).filter(isDrawn)) {
-            if (await this._renderText(context, component, masterTokens)) {
-                this._recordOverflow(context, component, HEADER_FOOTER_NAME, masterTokens);
-            }
+            await this._guarded(context, component, HEADER_FOOTER_NAME, masterTokens, true, async () => {
+                if (await this._renderText(context, component, masterTokens)) {
+                    this._recordOverflow(context, component, HEADER_FOOTER_NAME, masterTokens);
+                }
+            });
         }
     }
     // Lists a text block that was cut, under the page the export's overflow gate
@@ -15955,7 +16035,8 @@ class ReportPdfService {
     // wraps them, and the words are drawn into each cell once autoTable has
     // drawn its grid lines and fill (_drawTextCell), so they keep their runs'
     // fonts and colors. Only the rows the box holds are drawn, and a table that
-    // loses any is cut. The cursor it leaves is TEXT_TABLE_MARGIN under it.
+    // loses any, or runs past its page anyway, is cut. The cursor it leaves is
+    // TEXT_TABLE_MARGIN under it.
     _drawTextTable(context, table, layout, box, top) {
         if (top >= box.bottom) {
             return { cursorY: top, cut: true };
@@ -15967,13 +16048,11 @@ class ReportPdfService {
             : Array.from({ length: table.columns }, () => width / table.columns);
         const body = table.rows.map((row) => row.cells.map((cell) => this._textCellInput(context.doc, cell, columnWidths)));
         const options = this._textTableOptions(context, columnWidths, left, top, width, box.bottom);
-        const fit = this._textTableFit(context, { ...options, body });
-        if (fit) {
-            this._drawTable(context, { ...options, body: this._keptRows(body, fit) });
-        }
+        const fit = this._textTableFit(context, { ...options, body }, top, box.bottom);
+        const whole = !fit || this._drawTable(context, { ...options, body: this._keptRows(body, fit) });
         return {
-            cursorY: fit ? context.doc.lastAutoTable.finalY + TEXT_TABLE_MARGIN : top,
-            cut: fit < table.rows.length,
+            cursorY: fit && whole ? context.doc.lastAutoTable.finalY + TEXT_TABLE_MARGIN : top,
+            cut: !whole || fit < table.rows.length,
         };
     }
     // A text table's cell as autoTable takes it: its spans and fill and, when it
@@ -16027,22 +16106,10 @@ class ReportPdfService {
             didDrawCell: (hook) => this._drawTextCell(hook),
         };
     }
-    // How many of a text table's rows its box holds: the rows autoTable draws
-    // whole on the first page when it lays the table out on a scratch document
-    // of the same page size, as _measure does for a list. A row taller than a
-    // page is split across pages rather than moved, so it does not count.
-    _textTableFit(context, options) {
-        const scratch = this._scratchDocument(context);
-        let fit = 0;
-        context.autoTable(scratch, {
-            ...options,
-            didDrawCell: (hook) => {
-                if (scratch.getCurrentPageInfo().pageNumber === 1 && !hook.row.spansMultiplePages) {
-                    fit = Math.max(fit, hook.row.index + 1);
-                }
-            },
-        });
-        return fit;
+    // How many of a text table's rows its box, from top to bottom, holds whole:
+    // the table laid out as _measure lays out a list's.
+    _textTableFit(context, options, top, bottom) {
+        return this._fittingRows(context.createTable(this._scratchDocument(context), options), top, bottom, 0);
     }
     // The first `fit` rows, a cell that spans down past the last of them cut
     // there.
@@ -16166,7 +16233,7 @@ class ReportPdfService {
         };
     }
     // A tile on its report page, its title's tokens filled with that page's.
-    async _renderComponent(context, item, tokens, overflows) {
+    async _renderComponent(context, page, item, tokens, overflows) {
         const { doc } = context;
         const component = item.component;
         // Geometry is stored in inches; the PDF draws in points.
@@ -16207,7 +16274,7 @@ class ReportPdfService {
             }
             case 'list':
             case 'grid':
-                this._renderTable(context, item, x, bodyY, w, bodyH, overflows);
+                this._renderTable(context, page, item, x, bodyY, w, bodyH, overflows);
                 break;
             case 'kpi':
                 this._renderKpi(context, item, x, bodyY, w, bodyH);
@@ -16245,42 +16312,51 @@ class ReportPdfService {
         doc.text(this._pdfText(title), x, y + 10, { maxWidth: w });
     }
     // An italic grey line centered in a component's body, for a body that holds
-    // something other than its content.
+    // something other than its content. A line wider than the body wraps.
     _boxNote(doc, text, x, y, w, h) {
         doc.setFont('helvetica', 'italic');
         doc.setFontSize(9);
         doc.setTextColor(MUTED_COLOR$1);
-        doc.text(text, x + w / 2, y + h / 2, { align: 'center' });
+        doc.text(text, x + w / 2, y + h / 2, { align: 'center', maxWidth: w });
     }
     // A list's on-page table. All of its fetched rows are laid out once to learn
     // how many the box holds; when they do not all fit, the box's last row says
     // the table continues and the rest go to overflows for continuation pages.
     // A box too short for even the head carries the notice as a line instead.
-    // A totals row closes the table once: in the box when every row fits it,
-    // else after the last continuation row. Points throughout.
-    _renderTable(context, item, x, y, w, h, overflows) {
+    // A table whose heading and totals row leave a continuation page no room for
+    // a row stops at its box, its notice saying so. A totals row closes the
+    // table once: in the box when every row fits it, else after the last
+    // continuation row. Points throughout.
+    _renderTable(context, page, item, x, y, w, h, overflows) {
         const { component, search, filtered } = item;
         const { head, cells, numeric, foot, omitted } = item.table ? this._gridCells(item) : this._listCells(context, item);
         const bottom = context.pageH - (y + h);
-        const { fit, columnStyles } = this._measure(context, head, cells, numeric, foot, x, y, w, bottom);
+        const { fit, columnStyles, minHeight } = this._measure(context, head, cells, numeric, foot, x, y, w, bottom);
         if (fit === cells.length && omitted === 0) {
             this._drawTable(context, this._tableOptions(context, head, numeric, cells, x, y, w, bottom, columnStyles, foot));
             return;
         }
+        // autoTable needs room for a row under the heading on every page it adds,
+        // or it adds pages until the browser's stack runs out.
+        const continues = minHeight < this._continuationRoom(context, page);
+        const notice = continues ? CONTINUED_NOTICE : NO_ROOM_NOTICE;
         // The notice takes the place of the last row that fit, so that row moves
         // to the continuation. omitted > 0 means a full PDF_LIST_ROWS fetch, which
         // never fits one box, so the CSV notice always lands on a continuation
         // page.
         const kept = Math.max(0, fit - 1);
-        overflows.push({
-            component, search, crumbs: item.crumbs, filtered, head, numeric, rows: cells.slice(kept), omitted, foot, x, w, columnStyles,
-        });
         if (fit >= 1) {
-            const body = [...cells.slice(0, kept), this._noticeRow(CONTINUED_NOTICE, numeric.length, true)];
+            const body = [...cells.slice(0, kept), this._noticeRow(notice, numeric.length, true)];
             this._drawTable(context, this._tableOptions(context, head, numeric, body, x, y, w, bottom, columnStyles));
         }
         else {
-            this._boxNote(context.doc, CONTINUED_NOTICE, x, y, w, h);
+            this._boxNote(context.doc, notice, x, y, w, h);
+        }
+        if (continues) {
+            overflows.push({
+                component, search, crumbs: item.crumbs, filtered, head, numeric, rows: cells.slice(kept), omitted, foot, x, w,
+                columnStyles,
+            });
         }
     }
     // A list's heading, rows, totals row and the rows past its fetch.
@@ -16302,7 +16378,16 @@ class ReportPdfService {
             rowSpan: exported.rowSpan,
             styles: {
                 ...(exported.bold ? { fontStyle: 'bold' } : {}),
-                ...(exported.indent ? { cellPadding: { top: 3, right: 3, bottom: 3, left: 3 + exported.indent * GRID_INDENT$1 } } : {}),
+                ...(exported.indent
+                    ? {
+                        cellPadding: {
+                            top: TABLE_CELL_PADDING,
+                            right: TABLE_CELL_PADDING,
+                            bottom: TABLE_CELL_PADDING,
+                            left: TABLE_CELL_PADDING + exported.indent * GRID_INDENT$1,
+                        },
+                    }
+                    : {}),
             },
         });
         return {
@@ -16345,7 +16430,13 @@ class ReportPdfService {
             margin: { left: x, right: context.pageW - x - w, bottom },
             tableWidth: w,
             rowPageBreak: 'avoid',
-            styles: { font: 'helvetica', fontStyle: 'normal', fontSize: 8, cellPadding: 3, textColor: '#1f2933' },
+            styles: {
+                font: 'helvetica',
+                fontStyle: 'normal',
+                fontSize: TABLE_FONT_SIZE,
+                cellPadding: TABLE_CELL_PADDING,
+                textColor: '#1f2933',
+            },
             headStyles: { fillColor: '#4e79a7', textColor: '#ffffff', fontStyle: 'bold' },
             alternateRowStyles: { fillColor: '#f5f7fa' },
             ...(columnStyles ? { columnStyles } : {}),
@@ -16383,37 +16474,51 @@ class ReportPdfService {
     }
     // Lays every fetched row out once on a scratch document of the same page
     // size, with the options the real draw uses, and reads back how many body
-    // rows the box's page holds (fit) and the column widths autoTable chose,
-    // with each numeric column's right alignment merged in, so the on-page
-    // table and its continuation pages carry both. The totals row is laid out
-    // too, so the widths hold it, and a table whose rows fit the box but whose
-    // totals row does not moves its last row on. fit 0 means not even one
-    // body row fits under the head (or the head itself did not fit): autoTable
-    // moved to a new page before drawing. The real document is untouched.
+    // rows the box holds (fit), the column widths autoTable chose, with each
+    // numeric column's right alignment merged in, so the on-page table and its
+    // continuation pages carry both, and the least room a page must give the
+    // table (minHeight). The totals row is laid out too, so the widths hold it,
+    // and a table whose rows fit the box but whose totals row does not moves
+    // its last row on. fit 0 means not even one body row fits under the head.
+    // The table is laid out, never drawn: drawn, autoTable pages it, and a table
+    // with no room for a row on a page pages without end.
     _measure(context, head, cells, numeric, foot, x, y, w, bottom) {
         const scratch = this._scratchDocument(context);
-        let fit = 0;
-        context.autoTable(scratch, {
-            ...this._tableOptions(context, head, numeric, cells, x, y, w, bottom, undefined, foot),
-            didDrawCell: (hook) => {
-                if (hook.section === 'body' && scratch.getCurrentPageInfo().pageNumber === 1) {
-                    fit = Math.max(fit, hook.row.index + 1);
-                }
-            },
-        });
-        const columns = scratch.lastAutoTable.columns;
+        const table = context.createTable(scratch, this._tableOptions(context, head, numeric, cells, x, y, w, bottom, undefined, foot));
+        const columns = table.columns;
         const columnStyles = {};
         columns.forEach((column, index) => {
             columnStyles[index] = numeric[index]
                 ? { cellWidth: column.width, halign: 'right' }
                 : { cellWidth: column.width };
         });
-        // A row taller than a whole page is split rather than moved, so a last
-        // row that started on the first page can still have run past it.
-        if (fit === cells.length && scratch.getNumberOfPages() > 1) {
-            fit -= 1;
+        const headHeight = table.getHeadHeight(table.columns);
+        const footHeight = table.getFootHeight(table.columns);
+        return {
+            fit: this._fittingRows(table, y + headHeight, context.pageH - bottom, footHeight),
+            columnStyles,
+            // One line of a row: the line autoTable must place on a page before it
+            // moves on, at the table's font size and padding.
+            minHeight: headHeight + footHeight + TABLE_FONT_SIZE * scratch.getLineHeightFactor() + 2 * TABLE_CELL_PADDING,
+        };
+    }
+    // How many of a laid-out table's body rows fit whole between top and
+    // bottom, as autoTable decides it: a row fits when its tallest cell (one that
+    // spans rows counts all of them) ends by bottom, the last row's by the top
+    // of the totals row (footHeight) under it, and the next row starts where it
+    // ends.
+    _fittingRows(table, top, bottom, footHeight) {
+        let cursor = top;
+        let fit = 0;
+        for (const [index, row] of table.body.entries()) {
+            const limit = index === table.body.length - 1 ? bottom - footHeight : bottom;
+            if (cursor + row.getMaxCellHeight(table.columns) > limit) {
+                break;
+            }
+            cursor += row.height;
+            fit += 1;
         }
-        return { fit, columnStyles };
+        return fit;
     }
     // A blank document of the export's page size, for laying a table out to see
     // what fits before the real one is drawn on.
@@ -16424,20 +16529,42 @@ class ReportPdfService {
             orientation: context.orientation,
         });
     }
-    // Draws an on-page table (a list's, or a text block's), then removes any
-    // page the draw added. That should never happen: the measured fit, the
-    // identical column widths and a single-line notice keep the table inside its
-    // box. The check exists so a stray page can never catch the report page's
-    // remaining components.
+    // Draws an on-page table (a list's, or a text block's) on its page alone.
+    // That is all it should need: the measured fit, the identical column widths
+    // and a single-line notice keep the table inside its box. Should autoTable
+    // start another page anyway, the table stops there and the page goes, so a
+    // stray page can never catch the report page's remaining components, nor a
+    // table with no room for a row add pages without end. Returns whether the
+    // table was drawn whole.
     _drawTable(context, options) {
         const { doc } = context;
         const page = doc.getCurrentPageInfo().pageNumber;
         const pages = doc.getNumberOfPages();
-        context.autoTable(doc, options);
+        let whole = true;
+        try {
+            context.autoTable(doc, {
+                ...options,
+                // Fires as the table starts its own page, and again on each page it
+                // moves to (an existing page, such as a continuation page under a
+                // header, as well as a new one).
+                willDrawPage: () => {
+                    if (doc.getCurrentPageInfo().pageNumber !== page) {
+                        throw STRAY_PAGE;
+                    }
+                },
+            });
+        }
+        catch (error) {
+            if (error !== STRAY_PAGE) {
+                throw error;
+            }
+            whole = false;
+        }
         while (doc.getNumberOfPages() > pages) {
             doc.deletePage(doc.getNumberOfPages());
         }
         doc.setPage(page);
+        return whole;
     }
     // The rows of one list that did not fit its box, on pages appended after
     // the report page, each with the page's header and footer, the table's
@@ -16446,9 +16573,7 @@ class ReportPdfService {
     // Returns the physical page counter after these pages.
     async _renderContinuation(context, page, index, pageNumber, overflow) {
         const { doc } = context;
-        const bands = page.masterHidden ? NO_BANDS : context.report.config?.headerFooter ?? NO_BANDS;
-        const top = this._continuationMargin(bands.headerHeight);
-        const bottom = this._continuationMargin(bands.footerHeight);
+        const { top, bottom } = this._continuationMargins(context, page);
         const { x, w } = overflow;
         const body = overflow.omitted > 0
             ? [...overflow.rows, this._noticeRow(moreRowsNotice(overflow.omitted), overflow.numeric.length, false)]
@@ -16482,6 +16607,21 @@ class ReportPdfService {
         }
         doc.setPage(doc.getNumberOfPages());
     }
+    // The margins a continuation table keeps from the top and bottom of its
+    // pages, under its title's strip at the top.
+    _continuationMargins(context, page) {
+        const bands = page.masterHidden ? NO_BANDS : context.report.config?.headerFooter ?? NO_BANDS;
+        return {
+            top: this._continuationMargin(bands.headerHeight),
+            bottom: this._continuationMargin(bands.footerHeight),
+        };
+    }
+    // The height a continuation page gives its table: between its margins, under
+    // the title.
+    _continuationRoom(context, page) {
+        const { top, bottom } = this._continuationMargins(context, page);
+        return context.pageH - top - TITLE_H$1 - bottom;
+    }
     // The margin a continuation table keeps from one edge: inside the band when
     // the page has one.
     _continuationMargin(band) {
@@ -16847,6 +16987,9 @@ class ReportPptxService {
         return {
             overflows: [...overflows.values()],
             overflowNote: PPTX_OVERFLOW_NOTE,
+            // A slide's shapes are laid out by PowerPoint, so a component cannot
+            // fail to draw here as a PDF table can.
+            undrawn: [],
             save: async () => {
                 await pptx.writeFile({ fileName: `${this._slug(report.name)}.pptx` });
             },
@@ -18025,7 +18168,8 @@ const RETRY = 'retry';
 const DOWNLOAD = 'download';
 // Runs a report export end to end: collect every tile and value, refuse to
 // write a file that is missing any of them without saying so, build it, refuse
-// to save one whose text does not fit its boxes without saying so, then save.
+// to save one that could not draw a component, or whose text does not fit its
+// boxes, without saying so, then save.
 //
 // The gates are the reason this sits between the collector and the renderers
 // rather than in either of them. A deck with five blank pages is worse than no
@@ -18064,11 +18208,12 @@ class ReportExportService {
             ? this._run(report, listRows, build)
             : this._buildAndSave(collected, build)))));
     }
-    // Builds the file, then saves it once the overflow gate lets it through.
+    // Builds the file, then saves it once the undrawn and overflow gates let it
+    // through.
     _buildAndSave(collected, build) {
         return from(build(collected))
-            .pipe(switchMap((built) => this._overflowGate(built)
-            .pipe(switchMap(() => from(Promise.resolve(built.save()))))));
+            .pipe(switchMap((built) => this._undrawnGate(built)
+            .pipe(switchMap(() => this._overflowGate(built)), switchMap(() => from(Promise.resolve(built.save()))))));
     }
     // Resolves to DOWNLOAD when the export is whole (or the user accepted an
     // incomplete one) and to RETRY when they want another attempt. Cancelling
@@ -18094,6 +18239,30 @@ class ReportExportService {
         })
             .pipe(catchError(() => EMPTY));
     }
+    // Resolves to DOWNLOAD when the build drew every component, or the user
+    // accepted a file that marks the ones it could not in their place. There is
+    // no Retry: a second build draws the same data the same way. Each component
+    // is named by its page and its title (a text block by the start of its
+    // words). Cancelling ends the export quietly, as at the failure gate, and
+    // the built file is dropped unsaved.
+    _undrawnGate(built) {
+        if (!built.undrawn.length) {
+            return of(DOWNLOAD);
+        }
+        const components = built.undrawn
+            .map((undrawn) => `<strong>${escapeHtml(undrawn.page)}</strong>`
+            + (undrawn.name ? ` (“${escapeHtml(undrawn.name)}”)` : ''));
+        return this._prompt.confirm({
+            title: 'Some tiles could not be drawn',
+            template: `Some tiles could not be drawn: ${components.join(', ')}. `
+                + 'The file says "Could not be drawn" in their place.',
+            buttons: [
+                { label: 'Download Anyway', value: DOWNLOAD, color: 'primary' },
+                { label: 'Cancel', cancel: true, color: '' },
+            ],
+        })
+            .pipe(catchError(() => EMPTY));
+    }
     // Resolves to DOWNLOAD when every text block fits its box in the built file,
     // or the user accepted one that does not. There is no Retry: the words are
     // the report's own, so a second attempt would build the same file. Each block
@@ -18898,7 +19067,7 @@ class FsAiReportComponent {
             ReportAiChatData,
             { provide: FsAiChatData, useExisting: ReportAiChatData },
             // Tree-shaken ECharts core + the 'report' house theme, loaded lazily.
-            provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-rzMA7zhn.mjs').then((module) => module.default) }),
+            provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-z76sZHp7.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(),
@@ -18922,7 +19091,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-rzMA7zhn.mjs').then((module) => module.default) }),
+                        provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-z76sZHp7.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(),
@@ -19015,4 +19184,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, FsAiReportComponent as c, ReportData as d, ReportService as e, ReportFilterStateService as f, ReportNodeType as g, ReportState as h, ReportValueFormat as i, ReportValueFormula as j, ReportListColumnFormat as k, ReportNumberUnits as l, ReportChartDataLabels as m, ReportChartColor as n, ReportChartLineStyle as o, ReportChartMarkStat as p, ReportChartDateLabel as q, ReportChangePolarity as r };
-//# sourceMappingURL=firestitch-report-firestitch-report-DRkNBMic.mjs.map
+//# sourceMappingURL=firestitch-report-firestitch-report-DYs6aHtD.mjs.map