@firestitch/report 18.17.2 → 18.17.4

package/fesm2022/{firestitch-report-firestitch-report-MBuBuGiA.mjs → firestitch-report-firestitch-report-BtC-wiNZ.mjs}

@@ -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-CBoGhanh.mjs')).default;
+    const echarts = (await import('./firestitch-report-echarts-BxAcubsP.mjs')).default;
     const host = document.createElement('div');
     host.style.width = `${width}px`;
     host.style.height = `${height}px`;
@@ -18440,10 +18448,10 @@ function isPlainObject(value) {
     return value !== null && typeof value === 'object' && !Array.isArray(value) && !(value instanceof Date);
 }
 
-// A single report: the AI chat on the left, the report canvas on the right,
-// under an H2 title + settings gear. The host supplies [reportId] (from its
-// route) and switches reports through its own routes — this component never
-// picks one.
+// A single report: the AI chat on the left (unless the server turns it off),
+// the report canvas on the right, under an H2 title + settings gear. The host
+// supplies [reportId] (from its route) and switches reports through its own
+// routes — this component never picks one.
 class FsAiReportComponent {
     // The report this view is focused on — supplied by the host from the route.
     reportId = input(null);
@@ -18489,6 +18497,13 @@ class FsAiReportComponent {
     chatBasePath = computed(() => {
         return `${this.basePath()}/${this.reportId()}/pages/${this.chatPageId()}`;
     });
+    // The chat and its resizer show once the report says the server keeps the
+    // chat on, so a report whose chat is off never flashes one. A server too
+    // old to send chatEnabled keeps it.
+    chatEnabled = computed(() => {
+        const report = this.report();
+        return !!report && report.chatEnabled !== false;
+    });
     // The report-level filter toolbar (fs-filter). Rebuilt whenever the loaded
     // report (and thus its groups) changes.
     reportFilterConfig = signal(null);
@@ -18519,6 +18534,7 @@ class FsAiReportComponent {
         ].join('|');
     });
     _split;
+    // Only while the chat is on (chatEnabled).
     _chatPanel;
     // Only the canvas knows which page is on screen, and a page-scoped export
     // has to ask it.
@@ -18806,7 +18822,7 @@ class FsAiReportComponent {
     }
     _resizeTo(clientX) {
         const rect = this._split.nativeElement.getBoundingClientRect();
-        if (rect.width === 0) {
+        if (rect.width === 0 || !this._chatPanel) {
             return;
         }
         const ratio = (clientX - rect.left) / rect.width;
@@ -19059,11 +19075,11 @@ class FsAiReportComponent {
             ReportAiChatData,
             { provide: FsAiChatData, useExisting: ReportAiChatData },
             // Tree-shaken ECharts core + the 'report' house theme, loaded lazily.
-            provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-CBoGhanh.mjs').then((module) => module.default) }),
+            provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-BxAcubsP.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(),
-        ], viewQueries: [{ propertyName: "_split", first: true, predicate: ["split"], descendants: true, static: true }, { propertyName: "_chatPanel", first: true, predicate: ["chatPanel"], descendants: true, read: ElementRef, static: true }, { propertyName: "_canvas", first: true, predicate: ReportCanvasComponent, descendants: true }, { propertyName: "_reportBar", first: true, predicate: FilterComponent, descendants: true }], ngImport: i0, template: "<div class=\"fs-ai-report fs-column\">\n\n  <div class=\"fs-ai-report__header fs-row.align-center\">\n    <h2 class=\"fs-ai-report__title fs-flex\">{{ report()?.name }}</h2>\n\n    @if (report()) {\n      <!-- Report-level filters, inline with the toolbar actions, with the\n           report's saved filters in fs-filter's own Saved filters menu.\n           fs-filter reads its config once at init, so it's keyed on the\n           filter signature: when the report-level filter set changes the\n           block is recreated and re-reads the rebuilt config. -->\n      @if (reportHasFilters()) {\n        @for (key of [reportFilterKey()]; track key) {\n          <fs-filter\n              class=\"fs-ai-report__filters\"\n              [config]=\"reportFilterConfig()\">\n          </fs-filter>\n        }\n      }\n\n      <!-- What layout editing can add or switch to, and the way out of it.\n           One style for all three \u2014 outlined, icon and text. \"Header & footer\"\n           is a toggle: it keeps its label and turns gray while it is on. -->\n      @if (editMode()) {\n        <div class=\"fs-ai-report__edit-tools fs-row.align-center.gap-xs\">\n          <button\n              mat-stroked-button\n              type=\"button\"\n              matTooltip=\"Add a block of text\"\n              (click)=\"addText()\">\n            <mat-icon>title</mat-icon>\n            Add text\n          </button>\n          <button\n              mat-stroked-button\n              type=\"button\"\n              class=\"fs-ai-report__master\"\n              [class.active]=\"isMasterMode\"\n              [matTooltip]=\"isMasterMode ? 'Back to editing this page' : 'Edit the header and footer shown on every page'\"\n              (click)=\"toggleMasterMode()\">\n            <mat-icon>web_asset</mat-icon>\n            Header & footer\n          </button>\n          <button\n              mat-stroked-button\n              type=\"button\"\n              (click)=\"toggleEditMode()\">\n            <mat-icon>check</mat-icon>\n            Done editing\n          </button>\n        </div>\n      }\n\n      <!-- One icon for both states: it reads as pressed while editing rather\n           than swapping to something else. -->\n      <button\n          mat-icon-button\n          type=\"button\"\n          class=\"fs-ai-report__toggle\"\n          [class.active]=\"editMode()\"\n          [matTooltip]=\"editMode() ? 'Done editing' : 'Edit layout'\"\n          (click)=\"toggleEditMode()\">\n        <mat-icon>dashboard_customize</mat-icon>\n      </button>\n\n      <button\n          mat-icon-button\n          type=\"button\"\n          matTooltip=\"Export\"\n          [fsMenuTriggerFor]=\"exportMenu\">\n        <mat-icon>download</mat-icon>\n      </button>\n      <fs-menu #exportMenu>\n        <ng-template\n            fs-menu-item\n            (click)=\"exportPowerpoint()\">\n          Export PowerPoint\n        </ng-template>\n        <ng-template\n            fs-menu-item\n            (click)=\"exportPdf()\">\n          Export PDF\n        </ng-template>\n        <ng-template\n            fs-menu-item\n            (click)=\"exportData()\">\n          Export Raw Data\n        </ng-template>\n        @if ((report()?.pages?.length ?? 0) > 1) {\n          <ng-template\n              fs-menu-item\n              (click)=\"exportData(true)\">\n            Export Raw Data (This Page)\n          </ng-template>\n        }\n        <ng-template\n            fs-menu-item\n            (click)=\"exportData(false, 'xlsx')\">\n          Export Excel\n        </ng-template>\n        @if ((report()?.pages?.length ?? 0) > 1) {\n          <ng-template\n              fs-menu-item\n              (click)=\"exportData(true, 'xlsx')\">\n            Export Excel (This Page)\n          </ng-template>\n        }\n      </fs-menu>\n\n      <button\n          mat-icon-button\n          type=\"button\"\n          matTooltip=\"Report settings\"\n          (click)=\"reportSettings()\">\n        <mat-icon>settings</mat-icon>\n      </button>\n    }\n  </div>\n\n  <div\n      #split\n      class=\"fs-ai-report__split fs-row.align-start\">\n    <fs-ai-chat\n        #chatPanel\n        class=\"chat\"\n        [basePath]=\"chatBasePath()\"\n        [ready]=\"chatPageId() !== null\"\n        (response)=\"onChatResponse($event)\">\n    </fs-ai-chat>\n\n    <div\n        class=\"resizer\"\n        (pointerdown)=\"onResizeStart($event)\">\n    </div>\n\n    <div class=\"viewer fs-flex fs-column\">\n      @if (report()) {\n        <app-report-canvas\n            [report]=\"report()\"\n            [editMode]=\"editMode()\"\n            [pageId]=\"pageId()\"\n            (componentSettings)=\"componentSettings($event)\"\n            (reportChanged)=\"onCanvasReportChanged()\"\n            (pageChanged)=\"onCanvasPageChanged($event)\">\n        </app-report-canvas>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".fs-ai-report{height:100%;min-height:500px;display:flex;flex-direction:column}.fs-ai-report__header{flex:0 0 auto;margin-bottom:10px}.fs-ai-report__title{margin:0;min-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fs-ai-report__filters{flex:0 1 auto;min-width:0;display:block;margin:0 5px 0 0}.fs-ai-report__filters ::ng-deep .filter-bar-container{align-items:center!important}.fs-ai-report__filters ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.fs-ai-report__toggle.active{background:#e3ecf7;color:var(--brand-primary-color, #2196f3)}.fs-ai-report__master.active{background:#eceff3}.fs-ai-report__edit-tools{margin:0 5px}.fs-ai-report__split{flex:1 1 auto;min-height:0}.fs-ai-report .chat{display:block;flex:0 0 25%;width:100%;height:100%;min-height:400px;min-width:0;border:none}.fs-ai-report .viewer{display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden}.fs-ai-report .resizer{flex:0 0 11px;align-self:stretch;display:flex;justify-content:center;cursor:col-resize;touch-action:none;-webkit-user-select:none;user-select:none}.fs-ai-report .resizer:before{content:\"\";width:3px;border-radius:3px;background:transparent;transition:background-color .12s ease}.fs-ai-report .resizer:hover:before{background:var(--brand-primary-color)}.fs-ai-report__split.resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.fs-ai-report__split.resizing .resizer:before{background:var(--brand-primary-color)}.fs-ai-report__split.resizing .chat,.fs-ai-report__split.resizing .viewer{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: FsFilterModule }, { kind: "component", type: i1$3.FilterComponent, selector: "fs-filter", inputs: ["config"], outputs: ["closed", "opened", "ready"] }, { 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: FsAiChatComponent, selector: "fs-ai-chat", inputs: ["basePath", "requestData", "ready", "introMessage", "showThinking"], outputs: ["response", "showThinkingChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ReportCanvasComponent, selector: "app-report-canvas", inputs: ["report", "editMode", "pageId"], outputs: ["componentSettings", "reportChanged", "pageChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "_split", first: true, predicate: ["split"], descendants: true, static: true }, { propertyName: "_chatPanel", first: true, predicate: ["chatPanel"], descendants: true, read: ElementRef }, { propertyName: "_canvas", first: true, predicate: ReportCanvasComponent, descendants: true }, { propertyName: "_reportBar", first: true, predicate: FilterComponent, descendants: true }], ngImport: i0, template: "<div class=\"fs-ai-report fs-column\">\n\n  <div class=\"fs-ai-report__header fs-row.align-center\">\n    <h2 class=\"fs-ai-report__title fs-flex\">{{ report()?.name }}</h2>\n\n    @if (report()) {\n      <!-- Report-level filters, inline with the toolbar actions, with the\n           report's saved filters in fs-filter's own Saved filters menu.\n           fs-filter reads its config once at init, so it's keyed on the\n           filter signature: when the report-level filter set changes the\n           block is recreated and re-reads the rebuilt config. -->\n      @if (reportHasFilters()) {\n        @for (key of [reportFilterKey()]; track key) {\n          <fs-filter\n              class=\"fs-ai-report__filters\"\n              [config]=\"reportFilterConfig()\">\n          </fs-filter>\n        }\n      }\n\n      <!-- What layout editing can add or switch to, and the way out of it.\n           One style for all three \u2014 outlined, icon and text. \"Header & footer\"\n           is a toggle: it keeps its label and turns gray while it is on. -->\n      @if (editMode()) {\n        <div class=\"fs-ai-report__edit-tools fs-row.align-center.gap-xs\">\n          <button\n              mat-stroked-button\n              type=\"button\"\n              matTooltip=\"Add a block of text\"\n              (click)=\"addText()\">\n            <mat-icon>title</mat-icon>\n            Add text\n          </button>\n          <button\n              mat-stroked-button\n              type=\"button\"\n              class=\"fs-ai-report__master\"\n              [class.active]=\"isMasterMode\"\n              [matTooltip]=\"isMasterMode ? 'Back to editing this page' : 'Edit the header and footer shown on every page'\"\n              (click)=\"toggleMasterMode()\">\n            <mat-icon>web_asset</mat-icon>\n            Header & footer\n          </button>\n          <button\n              mat-stroked-button\n              type=\"button\"\n              (click)=\"toggleEditMode()\">\n            <mat-icon>check</mat-icon>\n            Done editing\n          </button>\n        </div>\n      }\n\n      <!-- One icon for both states: it reads as pressed while editing rather\n           than swapping to something else. -->\n      <button\n          mat-icon-button\n          type=\"button\"\n          class=\"fs-ai-report__toggle\"\n          [class.active]=\"editMode()\"\n          [matTooltip]=\"editMode() ? 'Done editing' : 'Edit layout'\"\n          (click)=\"toggleEditMode()\">\n        <mat-icon>dashboard_customize</mat-icon>\n      </button>\n\n      <button\n          mat-icon-button\n          type=\"button\"\n          matTooltip=\"Export\"\n          [fsMenuTriggerFor]=\"exportMenu\">\n        <mat-icon>download</mat-icon>\n      </button>\n      <fs-menu #exportMenu>\n        <ng-template\n            fs-menu-item\n            (click)=\"exportPowerpoint()\">\n          Export PowerPoint\n        </ng-template>\n        <ng-template\n            fs-menu-item\n            (click)=\"exportPdf()\">\n          Export PDF\n        </ng-template>\n        <ng-template\n            fs-menu-item\n            (click)=\"exportData()\">\n          Export Raw Data\n        </ng-template>\n        @if ((report()?.pages?.length ?? 0) > 1) {\n          <ng-template\n              fs-menu-item\n              (click)=\"exportData(true)\">\n            Export Raw Data (This Page)\n          </ng-template>\n        }\n        <ng-template\n            fs-menu-item\n            (click)=\"exportData(false, 'xlsx')\">\n          Export Excel\n        </ng-template>\n        @if ((report()?.pages?.length ?? 0) > 1) {\n          <ng-template\n              fs-menu-item\n              (click)=\"exportData(true, 'xlsx')\">\n            Export Excel (This Page)\n          </ng-template>\n        }\n      </fs-menu>\n\n      <button\n          mat-icon-button\n          type=\"button\"\n          matTooltip=\"Report settings\"\n          (click)=\"reportSettings()\">\n        <mat-icon>settings</mat-icon>\n      </button>\n    }\n  </div>\n\n  <div\n      #split\n      class=\"fs-ai-report__split fs-row.align-start\">\n    @if (chatEnabled()) {\n      <fs-ai-chat\n          #chatPanel\n          class=\"chat\"\n          [basePath]=\"chatBasePath()\"\n          [ready]=\"chatPageId() !== null\"\n          (response)=\"onChatResponse($event)\">\n      </fs-ai-chat>\n\n      <div\n          class=\"resizer\"\n          (pointerdown)=\"onResizeStart($event)\">\n      </div>\n    }\n\n    <div class=\"viewer fs-flex fs-column\">\n      @if (report()) {\n        <app-report-canvas\n            [report]=\"report()\"\n            [editMode]=\"editMode()\"\n            [pageId]=\"pageId()\"\n            (componentSettings)=\"componentSettings($event)\"\n            (reportChanged)=\"onCanvasReportChanged()\"\n            (pageChanged)=\"onCanvasPageChanged($event)\">\n        </app-report-canvas>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".fs-ai-report{height:100%;min-height:500px;display:flex;flex-direction:column}.fs-ai-report__header{flex:0 0 auto;margin-bottom:10px}.fs-ai-report__title{margin:0;min-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fs-ai-report__filters{flex:0 1 auto;min-width:0;display:block;margin:0 5px 0 0}.fs-ai-report__filters ::ng-deep .filter-bar-container{align-items:center!important}.fs-ai-report__filters ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.fs-ai-report__toggle.active{background:#e3ecf7;color:var(--brand-primary-color, #2196f3)}.fs-ai-report__master.active{background:#eceff3}.fs-ai-report__edit-tools{margin:0 5px}.fs-ai-report__split{flex:1 1 auto;min-height:0}.fs-ai-report .chat{display:block;flex:0 0 25%;width:100%;height:100%;min-height:400px;min-width:0;border:none}.fs-ai-report .viewer{display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden}.fs-ai-report .resizer{flex:0 0 11px;align-self:stretch;display:flex;justify-content:center;cursor:col-resize;touch-action:none;-webkit-user-select:none;user-select:none}.fs-ai-report .resizer:before{content:\"\";width:3px;border-radius:3px;background:transparent;transition:background-color .12s ease}.fs-ai-report .resizer:hover:before{background:var(--brand-primary-color)}.fs-ai-report__split.resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.fs-ai-report__split.resizing .resizer:before{background:var(--brand-primary-color)}.fs-ai-report__split.resizing .chat,.fs-ai-report__split.resizing .viewer{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: FsFilterModule }, { kind: "component", type: i1$3.FilterComponent, selector: "fs-filter", inputs: ["config"], outputs: ["closed", "opened", "ready"] }, { 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: FsAiChatComponent, selector: "fs-ai-chat", inputs: ["basePath", "requestData", "ready", "introMessage", "showThinking"], outputs: ["response", "showThinkingChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ReportCanvasComponent, selector: "app-report-canvas", inputs: ["report", "editMode", "pageId"], outputs: ["componentSettings", "reportChanged", "pageChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FsAiReportComponent, decorators: [{
             type: Component,
@@ -19083,7 +19099,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-CBoGhanh.mjs').then((module) => module.default) }),
+                        provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-BxAcubsP.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(),
@@ -19095,13 +19111,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         MatIconModule,
                         MatTooltipModule,
                         ReportCanvasComponent,
-                    ], template: "<div class=\"fs-ai-report fs-column\">\n\n  <div class=\"fs-ai-report__header fs-row.align-center\">\n    <h2 class=\"fs-ai-report__title fs-flex\">{{ report()?.name }}</h2>\n\n    @if (report()) {\n      <!-- Report-level filters, inline with the toolbar actions, with the\n           report's saved filters in fs-filter's own Saved filters menu.\n           fs-filter reads its config once at init, so it's keyed on the\n           filter signature: when the report-level filter set changes the\n           block is recreated and re-reads the rebuilt config. -->\n      @if (reportHasFilters()) {\n        @for (key of [reportFilterKey()]; track key) {\n          <fs-filter\n              class=\"fs-ai-report__filters\"\n              [config]=\"reportFilterConfig()\">\n          </fs-filter>\n        }\n      }\n\n      <!-- What layout editing can add or switch to, and the way out of it.\n           One style for all three \u2014 outlined, icon and text. \"Header & footer\"\n           is a toggle: it keeps its label and turns gray while it is on. -->\n      @if (editMode()) {\n        <div class=\"fs-ai-report__edit-tools fs-row.align-center.gap-xs\">\n          <button\n              mat-stroked-button\n              type=\"button\"\n              matTooltip=\"Add a block of text\"\n              (click)=\"addText()\">\n            <mat-icon>title</mat-icon>\n            Add text\n          </button>\n          <button\n              mat-stroked-button\n              type=\"button\"\n              class=\"fs-ai-report__master\"\n              [class.active]=\"isMasterMode\"\n              [matTooltip]=\"isMasterMode ? 'Back to editing this page' : 'Edit the header and footer shown on every page'\"\n              (click)=\"toggleMasterMode()\">\n            <mat-icon>web_asset</mat-icon>\n            Header & footer\n          </button>\n          <button\n              mat-stroked-button\n              type=\"button\"\n              (click)=\"toggleEditMode()\">\n            <mat-icon>check</mat-icon>\n            Done editing\n          </button>\n        </div>\n      }\n\n      <!-- One icon for both states: it reads as pressed while editing rather\n           than swapping to something else. -->\n      <button\n          mat-icon-button\n          type=\"button\"\n          class=\"fs-ai-report__toggle\"\n          [class.active]=\"editMode()\"\n          [matTooltip]=\"editMode() ? 'Done editing' : 'Edit layout'\"\n          (click)=\"toggleEditMode()\">\n        <mat-icon>dashboard_customize</mat-icon>\n      </button>\n\n      <button\n          mat-icon-button\n          type=\"button\"\n          matTooltip=\"Export\"\n          [fsMenuTriggerFor]=\"exportMenu\">\n        <mat-icon>download</mat-icon>\n      </button>\n      <fs-menu #exportMenu>\n        <ng-template\n            fs-menu-item\n            (click)=\"exportPowerpoint()\">\n          Export PowerPoint\n        </ng-template>\n        <ng-template\n            fs-menu-item\n            (click)=\"exportPdf()\">\n          Export PDF\n        </ng-template>\n        <ng-template\n            fs-menu-item\n            (click)=\"exportData()\">\n          Export Raw Data\n        </ng-template>\n        @if ((report()?.pages?.length ?? 0) > 1) {\n          <ng-template\n              fs-menu-item\n              (click)=\"exportData(true)\">\n            Export Raw Data (This Page)\n          </ng-template>\n        }\n        <ng-template\n            fs-menu-item\n            (click)=\"exportData(false, 'xlsx')\">\n          Export Excel\n        </ng-template>\n        @if ((report()?.pages?.length ?? 0) > 1) {\n          <ng-template\n              fs-menu-item\n              (click)=\"exportData(true, 'xlsx')\">\n            Export Excel (This Page)\n          </ng-template>\n        }\n      </fs-menu>\n\n      <button\n          mat-icon-button\n          type=\"button\"\n          matTooltip=\"Report settings\"\n          (click)=\"reportSettings()\">\n        <mat-icon>settings</mat-icon>\n      </button>\n    }\n  </div>\n\n  <div\n      #split\n      class=\"fs-ai-report__split fs-row.align-start\">\n    <fs-ai-chat\n        #chatPanel\n        class=\"chat\"\n        [basePath]=\"chatBasePath()\"\n        [ready]=\"chatPageId() !== null\"\n        (response)=\"onChatResponse($event)\">\n    </fs-ai-chat>\n\n    <div\n        class=\"resizer\"\n        (pointerdown)=\"onResizeStart($event)\">\n    </div>\n\n    <div class=\"viewer fs-flex fs-column\">\n      @if (report()) {\n        <app-report-canvas\n            [report]=\"report()\"\n            [editMode]=\"editMode()\"\n            [pageId]=\"pageId()\"\n            (componentSettings)=\"componentSettings($event)\"\n            (reportChanged)=\"onCanvasReportChanged()\"\n            (pageChanged)=\"onCanvasPageChanged($event)\">\n        </app-report-canvas>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".fs-ai-report{height:100%;min-height:500px;display:flex;flex-direction:column}.fs-ai-report__header{flex:0 0 auto;margin-bottom:10px}.fs-ai-report__title{margin:0;min-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fs-ai-report__filters{flex:0 1 auto;min-width:0;display:block;margin:0 5px 0 0}.fs-ai-report__filters ::ng-deep .filter-bar-container{align-items:center!important}.fs-ai-report__filters ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.fs-ai-report__toggle.active{background:#e3ecf7;color:var(--brand-primary-color, #2196f3)}.fs-ai-report__master.active{background:#eceff3}.fs-ai-report__edit-tools{margin:0 5px}.fs-ai-report__split{flex:1 1 auto;min-height:0}.fs-ai-report .chat{display:block;flex:0 0 25%;width:100%;height:100%;min-height:400px;min-width:0;border:none}.fs-ai-report .viewer{display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden}.fs-ai-report .resizer{flex:0 0 11px;align-self:stretch;display:flex;justify-content:center;cursor:col-resize;touch-action:none;-webkit-user-select:none;user-select:none}.fs-ai-report .resizer:before{content:\"\";width:3px;border-radius:3px;background:transparent;transition:background-color .12s ease}.fs-ai-report .resizer:hover:before{background:var(--brand-primary-color)}.fs-ai-report__split.resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.fs-ai-report__split.resizing .resizer:before{background:var(--brand-primary-color)}.fs-ai-report__split.resizing .chat,.fs-ai-report__split.resizing .viewer{pointer-events:none}\n"] }]
+                    ], template: "<div class=\"fs-ai-report fs-column\">\n\n  <div class=\"fs-ai-report__header fs-row.align-center\">\n    <h2 class=\"fs-ai-report__title fs-flex\">{{ report()?.name }}</h2>\n\n    @if (report()) {\n      <!-- Report-level filters, inline with the toolbar actions, with the\n           report's saved filters in fs-filter's own Saved filters menu.\n           fs-filter reads its config once at init, so it's keyed on the\n           filter signature: when the report-level filter set changes the\n           block is recreated and re-reads the rebuilt config. -->\n      @if (reportHasFilters()) {\n        @for (key of [reportFilterKey()]; track key) {\n          <fs-filter\n              class=\"fs-ai-report__filters\"\n              [config]=\"reportFilterConfig()\">\n          </fs-filter>\n        }\n      }\n\n      <!-- What layout editing can add or switch to, and the way out of it.\n           One style for all three \u2014 outlined, icon and text. \"Header & footer\"\n           is a toggle: it keeps its label and turns gray while it is on. -->\n      @if (editMode()) {\n        <div class=\"fs-ai-report__edit-tools fs-row.align-center.gap-xs\">\n          <button\n              mat-stroked-button\n              type=\"button\"\n              matTooltip=\"Add a block of text\"\n              (click)=\"addText()\">\n            <mat-icon>title</mat-icon>\n            Add text\n          </button>\n          <button\n              mat-stroked-button\n              type=\"button\"\n              class=\"fs-ai-report__master\"\n              [class.active]=\"isMasterMode\"\n              [matTooltip]=\"isMasterMode ? 'Back to editing this page' : 'Edit the header and footer shown on every page'\"\n              (click)=\"toggleMasterMode()\">\n            <mat-icon>web_asset</mat-icon>\n            Header & footer\n          </button>\n          <button\n              mat-stroked-button\n              type=\"button\"\n              (click)=\"toggleEditMode()\">\n            <mat-icon>check</mat-icon>\n            Done editing\n          </button>\n        </div>\n      }\n\n      <!-- One icon for both states: it reads as pressed while editing rather\n           than swapping to something else. -->\n      <button\n          mat-icon-button\n          type=\"button\"\n          class=\"fs-ai-report__toggle\"\n          [class.active]=\"editMode()\"\n          [matTooltip]=\"editMode() ? 'Done editing' : 'Edit layout'\"\n          (click)=\"toggleEditMode()\">\n        <mat-icon>dashboard_customize</mat-icon>\n      </button>\n\n      <button\n          mat-icon-button\n          type=\"button\"\n          matTooltip=\"Export\"\n          [fsMenuTriggerFor]=\"exportMenu\">\n        <mat-icon>download</mat-icon>\n      </button>\n      <fs-menu #exportMenu>\n        <ng-template\n            fs-menu-item\n            (click)=\"exportPowerpoint()\">\n          Export PowerPoint\n        </ng-template>\n        <ng-template\n            fs-menu-item\n            (click)=\"exportPdf()\">\n          Export PDF\n        </ng-template>\n        <ng-template\n            fs-menu-item\n            (click)=\"exportData()\">\n          Export Raw Data\n        </ng-template>\n        @if ((report()?.pages?.length ?? 0) > 1) {\n          <ng-template\n              fs-menu-item\n              (click)=\"exportData(true)\">\n            Export Raw Data (This Page)\n          </ng-template>\n        }\n        <ng-template\n            fs-menu-item\n            (click)=\"exportData(false, 'xlsx')\">\n          Export Excel\n        </ng-template>\n        @if ((report()?.pages?.length ?? 0) > 1) {\n          <ng-template\n              fs-menu-item\n              (click)=\"exportData(true, 'xlsx')\">\n            Export Excel (This Page)\n          </ng-template>\n        }\n      </fs-menu>\n\n      <button\n          mat-icon-button\n          type=\"button\"\n          matTooltip=\"Report settings\"\n          (click)=\"reportSettings()\">\n        <mat-icon>settings</mat-icon>\n      </button>\n    }\n  </div>\n\n  <div\n      #split\n      class=\"fs-ai-report__split fs-row.align-start\">\n    @if (chatEnabled()) {\n      <fs-ai-chat\n          #chatPanel\n          class=\"chat\"\n          [basePath]=\"chatBasePath()\"\n          [ready]=\"chatPageId() !== null\"\n          (response)=\"onChatResponse($event)\">\n      </fs-ai-chat>\n\n      <div\n          class=\"resizer\"\n          (pointerdown)=\"onResizeStart($event)\">\n      </div>\n    }\n\n    <div class=\"viewer fs-flex fs-column\">\n      @if (report()) {\n        <app-report-canvas\n            [report]=\"report()\"\n            [editMode]=\"editMode()\"\n            [pageId]=\"pageId()\"\n            (componentSettings)=\"componentSettings($event)\"\n            (reportChanged)=\"onCanvasReportChanged()\"\n            (pageChanged)=\"onCanvasPageChanged($event)\">\n        </app-report-canvas>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".fs-ai-report{height:100%;min-height:500px;display:flex;flex-direction:column}.fs-ai-report__header{flex:0 0 auto;margin-bottom:10px}.fs-ai-report__title{margin:0;min-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fs-ai-report__filters{flex:0 1 auto;min-width:0;display:block;margin:0 5px 0 0}.fs-ai-report__filters ::ng-deep .filter-bar-container{align-items:center!important}.fs-ai-report__filters ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.fs-ai-report__toggle.active{background:#e3ecf7;color:var(--brand-primary-color, #2196f3)}.fs-ai-report__master.active{background:#eceff3}.fs-ai-report__edit-tools{margin:0 5px}.fs-ai-report__split{flex:1 1 auto;min-height:0}.fs-ai-report .chat{display:block;flex:0 0 25%;width:100%;height:100%;min-height:400px;min-width:0;border:none}.fs-ai-report .viewer{display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden}.fs-ai-report .resizer{flex:0 0 11px;align-self:stretch;display:flex;justify-content:center;cursor:col-resize;touch-action:none;-webkit-user-select:none;user-select:none}.fs-ai-report .resizer:before{content:\"\";width:3px;border-radius:3px;background:transparent;transition:background-color .12s ease}.fs-ai-report .resizer:hover:before{background:var(--brand-primary-color)}.fs-ai-report__split.resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.fs-ai-report__split.resizing .resizer:before{background:var(--brand-primary-color)}.fs-ai-report__split.resizing .chat,.fs-ai-report__split.resizing .viewer{pointer-events:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { _split: [{
                 type: ViewChild,
                 args: ['split', { static: true }]
             }], _chatPanel: [{
                 type: ViewChild,
-                args: ['chatPanel', { static: true, read: ElementRef }]
+                args: ['chatPanel', { read: ElementRef }]
             }], _canvas: [{
                 type: ViewChild,
                 args: [ReportCanvasComponent]
@@ -19176,4 +19192,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-MBuBuGiA.mjs.map
+//# sourceMappingURL=firestitch-report-firestitch-report-BtC-wiNZ.mjs.map