@firestitch/report 18.0.2 → 18.0.4

package/fesm2022/{firestitch-report-firestitch-report-DJ3o7KId.mjs → firestitch-report-firestitch-report-BclPOljK.mjs}

@@ -1,14 +1,15 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, Component, ChangeDetectionStrategy, Input, DestroyRef, ViewChild, EventEmitter, ChangeDetectorRef, NgZone, ElementRef, Output, HostBinding, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { inject, Injectable, Component, ChangeDetectionStrategy, Input, DestroyRef, ViewChild, EventEmitter, ChangeDetectorRef, NgZone, ElementRef, Output, HostBinding, signal, CUSTOM_ELEMENTS_SCHEMA, input, output, effect } from '@angular/core';
 import * as i1$3 from '@angular/forms';
 import { FormsModule, ControlContainer, NgForm } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialog } from '@angular/material/dialog';
-import { MatIcon } from '@angular/material/icon';
+import * as i4$2 from '@angular/material/icon';
+import { MatIcon, MatIconModule } from '@angular/material/icon';
 import * as i2$2 from '@firestitch/autocomplete-chips';
 import { FsAutocompleteChipsModule } from '@firestitch/autocomplete-chips';
 import * as i2 from '@firestitch/filter';
 import { ItemType, FsFilterModule } from '@firestitch/filter';
-import * as i4$1 from '@firestitch/menu';
+import * as i2$3 from '@firestitch/menu';
 import { FsMenuModule } from '@firestitch/menu';
 import { FsProcess } from '@firestitch/process';
 import { FsPrompt } from '@firestitch/prompt';
@@ -17,8 +18,10 @@ import { map, shareReplay, filter, tap, switchMap, catchError, finalize } from '
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NgxEchartsDirective, provideEchartsCore } from 'ngx-echarts';
 import { FsAiChatComponent } from '@firestitch/ai';
-import { MatIconButton, MatButton } from '@angular/material/button';
-import { MatTooltip } from '@angular/material/tooltip';
+import * as i3$1 from '@angular/material/button';
+import { MatIconButton, MatButton, MatButtonModule } from '@angular/material/button';
+import * as i5$1 from '@angular/material/tooltip';
+import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
 import * as i1$2 from '@firestitch/zoom-pan';
 import { FsZoomPanComponent, FsZoomPanModule } from '@firestitch/zoom-pan';
 import { FsApi } from '@firestitch/api';
@@ -38,12 +41,18 @@ import { FsDialogModule } from '@firestitch/dialog';
 import * as i2$1 from '@firestitch/form';
 import { FsFormModule } from '@firestitch/form';
 import { FsLabelModule } from '@firestitch/label';
-import { FsMessage } from '@firestitch/message';
+import * as i4$1 from '@firestitch/message';
+import { FsMessage, FsMessageModule } from '@firestitch/message';
 import * as i4 from '@firestitch/tabs';
 import { FsTabsModule } from '@firestitch/tabs';
 import { MatSelect, MatOption as MatOption$1 } from '@angular/material/select';
+import * as i6 from '@firestitch/datepicker';
+import { FsDatePickerModule } from '@firestitch/datepicker';
 import { MatOption } from '@angular/material/core';
 import { guid } from '@firestitch/common';
+import { Router, ActivatedRoute, RouterLink } from '@angular/router';
+import * as i1$4 from '@firestitch/date';
+import { FsDateModule } from '@firestitch/date';
 
 // API gateway for the Reports module. Every endpoint hangs off [basePath],
 // which defaults to "reports" (the framework reports backend at /api/reports)
@@ -177,9 +186,12 @@ class ReportData {
             ...config,
         });
     }
-    // Set where a filter group renders: 'component', 'report' or 'both'.
-    setFilterGroupLevel(reportId, groupId, level, config = {}) {
-        return this._api.put(this._path(`${reportId}/filtergroups/${groupId}`), { level }, {
+    // Update a filter group — its exposure level ('component' | 'report' | 'both')
+    // and/or its default value (the value seeding the report bar on open). Send
+    // `default: null` (or an empty default) to clear it. Only the keys provided
+    // are changed.
+    updateFilterGroup(reportId, groupId, changes, config = {}) {
+        return this._api.put(this._path(`${reportId}/filtergroups/${groupId}`), changes, {
             key: 'filterGroup',
             ...config,
         });
@@ -265,6 +277,30 @@ function dateBoundString(value) {
 // the group-keyed path for charts/KPIs and the report bar.)
 // The query key fs-filter uses for a group's item(s).
 const itemName = (group) => `g${group.id}`;
+// A select group's distinct options, as { name, value } pairs. Options come from
+// the first member filter that declares them — members are the same data point,
+// so any member's list serves the group. The list is fetched once (the server
+// caps it) and replayed (shareReplay), so repeated reads never refetch. Shared
+// by the report-bar select control and the report-settings default picker so the
+// two never drift. Returns an empty list when no member provides options.
+function loadGroupOptions(group, reportData, reportId) {
+    const optionFilter = (group.filters ?? []).find((member) => member.hasOptions);
+    if (!optionFilter) {
+        return of([]);
+    }
+    return reportData.filterOptions(reportId, optionFilter.id)
+        .pipe(map((options) => (options ?? [])
+        .map((option) => ({ name: String(option), value: option }))), shareReplay({ bufferSize: 1, refCount: false }));
+}
+// Case-insensitive name filter applied to a loaded option list — the typed
+// keyword has to be matched here because fs-autocomplete renders what we return
+// verbatim.
+function matchOptions(options$, keyword) {
+    const term = (keyword ?? '').trim().toLowerCase();
+    return options$.pipe(map((options) => term
+        ? options.filter((option) => option.name.toLowerCase().includes(term))
+        : options));
+}
 // Build the fs-filter config item for a group, seeding its default from the
 // current session value so authored/relative defaults show selected on open.
 function filterItemForGroup(group, reportData, reportId, initial) {
@@ -281,38 +317,14 @@ function filterItemForGroup(group, reportData, reportId, initial) {
                     : undefined,
             };
         case 'select': {
-            // Options come from the first member filter that declares them — members
-            // are the same data point, so any member's list serves the group.
-            const optionFilter = (group.filters ?? []).find((member) => member.hasOptions);
-            // The distinct option list is fetched once (server caps it) and replayed
-            // to every keystroke, so typing never refetches.
-            let options$ = null;
-            const loadOptions = () => {
-                if (!optionFilter) {
-                    return of([]);
-                }
-                if (!options$) {
-                    options$ = reportData.filterOptions(reportId, optionFilter.id)
-                        .pipe(map((options) => (options ?? [])
-                        .map((option) => ({ name: String(option), value: option }))), shareReplay({ bufferSize: 1, refCount: false }));
-                }
-                return options$;
-            };
+            // One shared, replayed option stream so typing never refetches.
+            const options$ = loadGroupOptions(group, reportData, reportId);
             return {
                 name,
                 type: ItemType.AutoCompleteChips,
                 label,
                 fetchOnFocus: true,
-                // fs-autocomplete renders whatever we return verbatim, so the typed
-                // keyword has to be matched here. Match case-insensitively against the
-                // displayed name — works for any select filter regardless of its column.
-                values: (keyword) => loadOptions()
-                    .pipe(map((options) => {
-                    const term = (keyword ?? '').trim().toLowerCase();
-                    return term
-                        ? options.filter((option) => option.name.toLowerCase().includes(term))
-                        : options;
-                })),
+                values: (keyword) => matchOptions(options$, keyword),
                 default: initial?.values?.length
                     ? initial.values.map((value) => ({ name: String(value), value }))
                     : undefined,
@@ -486,8 +498,10 @@ class ReportFilterStateService {
         }
         return resolved;
     }
-    // A group's authored default — relative presets resolve against "now" each
-    // time the report opens, so a saved "last 12 months" stays relative.
+    // A group's authored default, mapped to a session value by type. Relative
+    // date presets resolve against "now" each time the report opens, so a saved
+    // "last 12 months" stays relative; a fixed range, select values and keyword
+    // text seed verbatim.
     _defaultValue(group) {
         const groupDefault = group.config?.default;
         if (!groupDefault) {
@@ -503,6 +517,12 @@ class ReportFilterStateService {
                 end: groupDefault.end ?? null,
             };
         }
+        if (groupDefault.values?.length) {
+            return { values: groupDefault.values };
+        }
+        if (groupDefault.value) {
+            return { value: groupDefault.value };
+        }
         return null;
     }
     _relativeRange(relative) {
@@ -1979,7 +1999,7 @@ class ComponentSettingsComponent {
             ? 'both'
             : (row.report ? 'report' : 'component');
         if (existing) {
-            this._run(this._reportData.setFilterGroupLevel(this.report.id, existing.filterGroupId, level));
+            this._run(this._reportData.updateFilterGroup(this.report.id, existing.filterGroupId, { level }));
         }
         else {
             this._run(this._reportData.addFilter(this.report.id, this.component.id, {
@@ -2059,7 +2079,7 @@ class ComponentSettingsComponent {
             .replace(/\b\w/g, (character) => character.toUpperCase());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ComponentSettingsComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<form\n    fsForm\n    [submit]=\"save\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      {{ component.title || 'Component' }}\n    </h1>\n    <mat-dialog-content>\n      <mat-tab-group [(selected)]=\"selectedTab\">\n        <mat-tab\n            label=\"Settings\"\n            name=\"settings\">\n          <div class=\"fs-column tab-body\">\n            <mat-form-field>\n              <mat-label>\n                Title\n              </mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"title\"\n                name=\"title\">\n            </mat-form-field>\n            <div class=\"subheading-2\">\n              Padding\n            </div>\n            <div class=\"geometry-row\">\n              <mat-form-field>\n                <mat-label>\n                  Top\n                </mat-label>\n                <input\n                  matInput\n                  type=\"number\"\n                  step=\"0.05\"\n                  min=\"0\"\n                  [(ngModel)]=\"paddingTop\"\n                  name=\"paddingTop\">\n                <span matTextSuffix>\n                  in\n                </span>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Right\n                </mat-label>\n                <input\n                  matInput\n                  type=\"number\"\n                  step=\"0.05\"\n                  min=\"0\"\n                  [(ngModel)]=\"paddingRight\"\n                  name=\"paddingRight\">\n                <span matTextSuffix>\n                  in\n                </span>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Bottom\n                </mat-label>\n                <input\n                  matInput\n                  type=\"number\"\n                  step=\"0.05\"\n                  min=\"0\"\n                  [(ngModel)]=\"paddingBottom\"\n                  name=\"paddingBottom\">\n                <span matTextSuffix>\n                  in\n                </span>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Left\n                </mat-label>\n                <input\n                  matInput\n                  type=\"number\"\n                  step=\"0.05\"\n                  min=\"0\"\n                  [(ngModel)]=\"paddingLeft\"\n                  name=\"paddingLeft\">\n                <span matTextSuffix>\n                  in\n                </span>\n              </mat-form-field>\n            </div>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Filters\"\n            name=\"filters\">\n          <div class=\"tab-body\">\n            @if (columnsError) {\n              <div class=\"filters-empty error\">\n                {{ columnsError }}\n              </div>\n            } @else if (rows.length) {\n              <!-- Every filterable column. Toggle where its control shows: in\n                   the report bar, on this component, both, or neither. The\n                   interface (date range vs value picker) follows the data. -->\n              <div class=\"filter-list\">\n                <div class=\"filter-head\">\n                  <span class=\"filter-head-spacer\"></span>\n                  <span class=\"small\">\n                    Report bar\n                  </span>\n                  <span class=\"small\">\n                    This component\n                  </span>\n                </div>\n                @for (row of rows; track row.column) {\n                  <div class=\"filter-card\">\n                    <div class=\"filter-card-main\">\n                      <div class=\"filter-card-title\">\n                        {{ row.label }}\n                      </div>\n                      <div class=\"filter-card-meta\">\n                        {{ typeLabel(row.type) }}\n                      </div>\n                    </div>\n                    <mat-slide-toggle\n                      class=\"filter-toggle\"\n                      [ngModel]=\"row.report\"\n                      (ngModelChange)=\"setExposure(row, 'report', $event)\"\n                      [ngModelOptions]=\"{ standalone: true }\"\n                      matTooltip=\"Show in the report bar\">\n                    </mat-slide-toggle>\n                    <mat-slide-toggle\n                      class=\"filter-toggle\"\n                      [ngModel]=\"row.component\"\n                      (ngModelChange)=\"setExposure(row, 'component', $event)\"\n                      [ngModelOptions]=\"{ standalone: true }\"\n                      matTooltip=\"Show on this component\">\n                    </mat-slide-toggle>\n                  </div>\n                }\n              </div>\n            } @else {\n              <div class=\"filters-empty\">\n                This component has no filterable columns yet \u2014 give it some SQL first.\n              </div>\n            }\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"SQL\"\n            name=\"sql\">\n          <div class=\"tab-body\">\n            <pre class=\"code-block\">\n              {{ component.sql }}\n            </pre>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Config\"\n            name=\"config\">\n          <div class=\"tab-body\">\n            <pre class=\"code-block\">\n              {{ configJson }}\n            </pre>\n          </div>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <fs-form-dialog-actions\n        [save]=\"selectedTab === 'settings'\"\n        [done]=\"selectedTab !== 'settings'\">\n      </fs-form-dialog-actions>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>", styles: ["mat-form-field{width:100%}.tab-body{padding-top:16px}.geometry-row{display:flex;gap:8px}.geometry-row mat-form-field{flex:1}.filter-list{display:flex;flex-direction:column;gap:8px}.filter-head{display:flex;align-items:center;gap:8px;padding:0 10px 2px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:#9aa5b1}.filter-head .filter-head-spacer{flex:1}.filter-head .filter-head-toggle{width:110px;flex:0 0 auto;text-align:center}.filter-card{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid #e4e7eb;border-radius:8px;background:#fff}.filter-card .filter-card-main{flex:1;min-width:0}.filter-card .filter-card-main .filter-card-title{font-weight:600;font-size:13px;color:#1f2933;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.filter-card .filter-card-main .filter-card-meta{font-size:12px;color:#7b8794}.filter-card .filter-card-main .filter-card-meta code{background:#f0f4f8;border-radius:3px;padding:0 4px}.filter-card .filter-toggle{width:110px;flex:0 0 auto;display:flex;justify-content:center}.filters-empty{font-size:13px;color:#7b8794;padding:8px 0 4px}.filters-empty.error{color:#e15759}.code-block{margin:0;padding:10px 12px;background:#1f2933;color:#e4e7eb;border-radius:6px;font-family:JetBrains Mono,Consolas,monospace;font-size:12px;line-height:1.5;white-space:pre-wrap;word-break:break-word;max-height:240px;overflow:auto}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2$1.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { kind: "component", type: i2$1.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }, { kind: "directive", type: i2$1.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "ngmodule", type: FsDialogModule }, { kind: "component", type: i3.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "ngmodule", type: FsLabelModule }, { kind: "ngmodule", type: FsTabsModule }, { kind: "directive", type: i4.FsTabsHeaderTabGroupDirective, selector: "mat-tab-group, matTabGroup, [matTabGroup]", inputs: ["orientation", "selected", "selectedData"], outputs: ["selectedChange", "selectedDataChange"], exportAs: ["fsTabsHeaderTabGroup"] }, { kind: "directive", type: i4.FsTabsTabDirective, selector: "mat-tab,matTab", inputs: ["name", "data"], exportAs: ["fsTabsTab"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i5.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i5.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ComponentSettingsComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<form\n    fsForm\n    [submit]=\"save\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      {{ component.title || 'Component' }}\n    </h1>\n    <mat-dialog-content>\n      <mat-tab-group [(selected)]=\"selectedTab\">\n        <mat-tab\n            label=\"Settings\"\n            name=\"settings\">\n          <div class=\"fs-column tab-body\">\n            <mat-form-field>\n              <mat-label>\n                Title\n              </mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"title\"\n                name=\"title\">\n            </mat-form-field>\n            <div class=\"subheading-2\">\n              Padding\n            </div>\n            <div class=\"geometry-row\">\n              <mat-form-field>\n                <mat-label>\n                  Top\n                </mat-label>\n                <input\n                  matInput\n                  type=\"number\"\n                  step=\"0.05\"\n                  min=\"0\"\n                  [(ngModel)]=\"paddingTop\"\n                  name=\"paddingTop\">\n                <span matTextSuffix>\n                  in\n                </span>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Right\n                </mat-label>\n                <input\n                  matInput\n                  type=\"number\"\n                  step=\"0.05\"\n                  min=\"0\"\n                  [(ngModel)]=\"paddingRight\"\n                  name=\"paddingRight\">\n                <span matTextSuffix>\n                  in\n                </span>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Bottom\n                </mat-label>\n                <input\n                  matInput\n                  type=\"number\"\n                  step=\"0.05\"\n                  min=\"0\"\n                  [(ngModel)]=\"paddingBottom\"\n                  name=\"paddingBottom\">\n                <span matTextSuffix>\n                  in\n                </span>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Left\n                </mat-label>\n                <input\n                  matInput\n                  type=\"number\"\n                  step=\"0.05\"\n                  min=\"0\"\n                  [(ngModel)]=\"paddingLeft\"\n                  name=\"paddingLeft\">\n                <span matTextSuffix>\n                  in\n                </span>\n              </mat-form-field>\n            </div>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Filters\"\n            name=\"filters\">\n          <div class=\"tab-body\">\n            @if (columnsError) {\n              <div class=\"filters-empty error\">\n                {{ columnsError }}\n              </div>\n            } @else if (rows.length) {\n              <!-- Every filterable column. Toggle where its control shows: in\n                   the report bar, on this component, both, or neither. The\n                   interface (date range vs value picker) follows the data. -->\n              <table class=\"filter-table\">\n                <thead>\n                  <tr>\n                    <th class=\"filter-col-name\">\n                      Filter\n                    </th>\n                    <th class=\"filter-col-type\">\n                      Type\n                    </th>\n                    <th class=\"filter-col-toggle\">\n                      Report bar\n                    </th>\n                    <th class=\"filter-col-toggle\">\n                      This component\n                    </th>\n                  </tr>\n                </thead>\n                <tbody>\n                  @for (row of rows; track row.column) {\n                    <tr>\n                      <td class=\"filter-col-name\">\n                        {{ row.label }}\n                      </td>\n                      <td class=\"filter-col-type\">\n                        {{ typeLabel(row.type) }}\n                      </td>\n                      <td class=\"filter-col-toggle\">\n                        <mat-slide-toggle\n                          [ngModel]=\"row.report\"\n                          (ngModelChange)=\"setExposure(row, 'report', $event)\"\n                          [ngModelOptions]=\"{ standalone: true }\"\n                          matTooltip=\"Show in the report bar\">\n                        </mat-slide-toggle>\n                      </td>\n                      <td class=\"filter-col-toggle\">\n                        <mat-slide-toggle\n                          [ngModel]=\"row.component\"\n                          (ngModelChange)=\"setExposure(row, 'component', $event)\"\n                          [ngModelOptions]=\"{ standalone: true }\"\n                          matTooltip=\"Show on this component\">\n                        </mat-slide-toggle>\n                      </td>\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            } @else {\n              <div class=\"filters-empty\">\n                This component has no filterable columns yet \u2014 give it some SQL first.\n              </div>\n            }\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"SQL\"\n            name=\"sql\">\n          <div class=\"tab-body\">\n            <pre class=\"code-block\">\n              {{ component.sql }}\n            </pre>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Config\"\n            name=\"config\">\n          <div class=\"tab-body\">\n            <pre class=\"code-block\">\n              {{ configJson }}\n            </pre>\n          </div>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <fs-form-dialog-actions\n        [save]=\"selectedTab === 'settings'\"\n        [done]=\"selectedTab !== 'settings'\">\n      </fs-form-dialog-actions>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>", styles: ["mat-form-field{width:100%}.tab-body{padding-top:16px}.geometry-row{display:flex;gap:8px}.geometry-row mat-form-field{flex:1}.filter-table{border-spacing:0;width:100%;border-collapse:collapse}.filter-table thead th{color:#8f8f8f;font-weight:400;font-size:85%;text-align:left;padding:8px 16px}.filter-table tbody tr{clip-path:xywh(0 3px 100% calc(100% - 6px) round 10px)}.filter-table tbody td{border:none;background-color:#fafafa;padding:8px 16px;vertical-align:middle;text-align:left}.filter-table .filter-col-name{font-weight:600;color:#1f2933}.filter-table .filter-col-type{color:#7b8794;width:120px}.filter-table .filter-col-toggle,.filter-table th.filter-col-toggle{width:130px;text-align:center}.filters-empty{font-size:13px;color:#7b8794;padding:8px 0 4px}.filters-empty.error{color:#e15759}.code-block{margin:0;padding:10px 12px;background:#1f2933;color:#e4e7eb;border-radius:6px;font-family:JetBrains Mono,Consolas,monospace;font-size:12px;line-height:1.5;white-space:pre-wrap;word-break:break-word;max-height:240px;overflow:auto}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2$1.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { kind: "component", type: i2$1.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }, { kind: "directive", type: i2$1.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "ngmodule", type: FsDialogModule }, { kind: "component", type: i3.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "ngmodule", type: FsLabelModule }, { kind: "ngmodule", type: FsTabsModule }, { kind: "directive", type: i4.FsTabsHeaderTabGroupDirective, selector: "mat-tab-group, matTabGroup, [matTabGroup]", inputs: ["orientation", "selected", "selectedData"], outputs: ["selectedChange", "selectedDataChange"], exportAs: ["fsTabsHeaderTabGroup"] }, { kind: "directive", type: i4.FsTabsTabDirective, selector: "mat-tab,matTab", inputs: ["name", "data"], exportAs: ["fsTabsTab"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i5.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i5.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentSettingsComponent, decorators: [{
             type: Component,
@@ -2079,7 +2099,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         MatInput,
                         MatSlideToggle,
                         MatTooltip,
-                    ], template: "<form\n    fsForm\n    [submit]=\"save\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      {{ component.title || 'Component' }}\n    </h1>\n    <mat-dialog-content>\n      <mat-tab-group [(selected)]=\"selectedTab\">\n        <mat-tab\n            label=\"Settings\"\n            name=\"settings\">\n          <div class=\"fs-column tab-body\">\n            <mat-form-field>\n              <mat-label>\n                Title\n              </mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"title\"\n                name=\"title\">\n            </mat-form-field>\n            <div class=\"subheading-2\">\n              Padding\n            </div>\n            <div class=\"geometry-row\">\n              <mat-form-field>\n                <mat-label>\n                  Top\n                </mat-label>\n                <input\n                  matInput\n                  type=\"number\"\n                  step=\"0.05\"\n                  min=\"0\"\n                  [(ngModel)]=\"paddingTop\"\n                  name=\"paddingTop\">\n                <span matTextSuffix>\n                  in\n                </span>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Right\n                </mat-label>\n                <input\n                  matInput\n                  type=\"number\"\n                  step=\"0.05\"\n                  min=\"0\"\n                  [(ngModel)]=\"paddingRight\"\n                  name=\"paddingRight\">\n                <span matTextSuffix>\n                  in\n                </span>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Bottom\n                </mat-label>\n                <input\n                  matInput\n                  type=\"number\"\n                  step=\"0.05\"\n                  min=\"0\"\n                  [(ngModel)]=\"paddingBottom\"\n                  name=\"paddingBottom\">\n                <span matTextSuffix>\n                  in\n                </span>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Left\n                </mat-label>\n                <input\n                  matInput\n                  type=\"number\"\n                  step=\"0.05\"\n                  min=\"0\"\n                  [(ngModel)]=\"paddingLeft\"\n                  name=\"paddingLeft\">\n                <span matTextSuffix>\n                  in\n                </span>\n              </mat-form-field>\n            </div>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Filters\"\n            name=\"filters\">\n          <div class=\"tab-body\">\n            @if (columnsError) {\n              <div class=\"filters-empty error\">\n                {{ columnsError }}\n              </div>\n            } @else if (rows.length) {\n              <!-- Every filterable column. Toggle where its control shows: in\n                   the report bar, on this component, both, or neither. The\n                   interface (date range vs value picker) follows the data. -->\n              <div class=\"filter-list\">\n                <div class=\"filter-head\">\n                  <span class=\"filter-head-spacer\"></span>\n                  <span class=\"small\">\n                    Report bar\n                  </span>\n                  <span class=\"small\">\n                    This component\n                  </span>\n                </div>\n                @for (row of rows; track row.column) {\n                  <div class=\"filter-card\">\n                    <div class=\"filter-card-main\">\n                      <div class=\"filter-card-title\">\n                        {{ row.label }}\n                      </div>\n                      <div class=\"filter-card-meta\">\n                        {{ typeLabel(row.type) }}\n                      </div>\n                    </div>\n                    <mat-slide-toggle\n                      class=\"filter-toggle\"\n                      [ngModel]=\"row.report\"\n                      (ngModelChange)=\"setExposure(row, 'report', $event)\"\n                      [ngModelOptions]=\"{ standalone: true }\"\n                      matTooltip=\"Show in the report bar\">\n                    </mat-slide-toggle>\n                    <mat-slide-toggle\n                      class=\"filter-toggle\"\n                      [ngModel]=\"row.component\"\n                      (ngModelChange)=\"setExposure(row, 'component', $event)\"\n                      [ngModelOptions]=\"{ standalone: true }\"\n                      matTooltip=\"Show on this component\">\n                    </mat-slide-toggle>\n                  </div>\n                }\n              </div>\n            } @else {\n              <div class=\"filters-empty\">\n                This component has no filterable columns yet \u2014 give it some SQL first.\n              </div>\n            }\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"SQL\"\n            name=\"sql\">\n          <div class=\"tab-body\">\n            <pre class=\"code-block\">\n              {{ component.sql }}\n            </pre>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Config\"\n            name=\"config\">\n          <div class=\"tab-body\">\n            <pre class=\"code-block\">\n              {{ configJson }}\n            </pre>\n          </div>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <fs-form-dialog-actions\n        [save]=\"selectedTab === 'settings'\"\n        [done]=\"selectedTab !== 'settings'\">\n      </fs-form-dialog-actions>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>", styles: ["mat-form-field{width:100%}.tab-body{padding-top:16px}.geometry-row{display:flex;gap:8px}.geometry-row mat-form-field{flex:1}.filter-list{display:flex;flex-direction:column;gap:8px}.filter-head{display:flex;align-items:center;gap:8px;padding:0 10px 2px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:#9aa5b1}.filter-head .filter-head-spacer{flex:1}.filter-head .filter-head-toggle{width:110px;flex:0 0 auto;text-align:center}.filter-card{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid #e4e7eb;border-radius:8px;background:#fff}.filter-card .filter-card-main{flex:1;min-width:0}.filter-card .filter-card-main .filter-card-title{font-weight:600;font-size:13px;color:#1f2933;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.filter-card .filter-card-main .filter-card-meta{font-size:12px;color:#7b8794}.filter-card .filter-card-main .filter-card-meta code{background:#f0f4f8;border-radius:3px;padding:0 4px}.filter-card .filter-toggle{width:110px;flex:0 0 auto;display:flex;justify-content:center}.filters-empty{font-size:13px;color:#7b8794;padding:8px 0 4px}.filters-empty.error{color:#e15759}.code-block{margin:0;padding:10px 12px;background:#1f2933;color:#e4e7eb;border-radius:6px;font-family:JetBrains Mono,Consolas,monospace;font-size:12px;line-height:1.5;white-space:pre-wrap;word-break:break-word;max-height:240px;overflow:auto}\n"] }]
+                    ], template: "<form\n    fsForm\n    [submit]=\"save\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      {{ component.title || 'Component' }}\n    </h1>\n    <mat-dialog-content>\n      <mat-tab-group [(selected)]=\"selectedTab\">\n        <mat-tab\n            label=\"Settings\"\n            name=\"settings\">\n          <div class=\"fs-column tab-body\">\n            <mat-form-field>\n              <mat-label>\n                Title\n              </mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"title\"\n                name=\"title\">\n            </mat-form-field>\n            <div class=\"subheading-2\">\n              Padding\n            </div>\n            <div class=\"geometry-row\">\n              <mat-form-field>\n                <mat-label>\n                  Top\n                </mat-label>\n                <input\n                  matInput\n                  type=\"number\"\n                  step=\"0.05\"\n                  min=\"0\"\n                  [(ngModel)]=\"paddingTop\"\n                  name=\"paddingTop\">\n                <span matTextSuffix>\n                  in\n                </span>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Right\n                </mat-label>\n                <input\n                  matInput\n                  type=\"number\"\n                  step=\"0.05\"\n                  min=\"0\"\n                  [(ngModel)]=\"paddingRight\"\n                  name=\"paddingRight\">\n                <span matTextSuffix>\n                  in\n                </span>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Bottom\n                </mat-label>\n                <input\n                  matInput\n                  type=\"number\"\n                  step=\"0.05\"\n                  min=\"0\"\n                  [(ngModel)]=\"paddingBottom\"\n                  name=\"paddingBottom\">\n                <span matTextSuffix>\n                  in\n                </span>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Left\n                </mat-label>\n                <input\n                  matInput\n                  type=\"number\"\n                  step=\"0.05\"\n                  min=\"0\"\n                  [(ngModel)]=\"paddingLeft\"\n                  name=\"paddingLeft\">\n                <span matTextSuffix>\n                  in\n                </span>\n              </mat-form-field>\n            </div>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Filters\"\n            name=\"filters\">\n          <div class=\"tab-body\">\n            @if (columnsError) {\n              <div class=\"filters-empty error\">\n                {{ columnsError }}\n              </div>\n            } @else if (rows.length) {\n              <!-- Every filterable column. Toggle where its control shows: in\n                   the report bar, on this component, both, or neither. The\n                   interface (date range vs value picker) follows the data. -->\n              <table class=\"filter-table\">\n                <thead>\n                  <tr>\n                    <th class=\"filter-col-name\">\n                      Filter\n                    </th>\n                    <th class=\"filter-col-type\">\n                      Type\n                    </th>\n                    <th class=\"filter-col-toggle\">\n                      Report bar\n                    </th>\n                    <th class=\"filter-col-toggle\">\n                      This component\n                    </th>\n                  </tr>\n                </thead>\n                <tbody>\n                  @for (row of rows; track row.column) {\n                    <tr>\n                      <td class=\"filter-col-name\">\n                        {{ row.label }}\n                      </td>\n                      <td class=\"filter-col-type\">\n                        {{ typeLabel(row.type) }}\n                      </td>\n                      <td class=\"filter-col-toggle\">\n                        <mat-slide-toggle\n                          [ngModel]=\"row.report\"\n                          (ngModelChange)=\"setExposure(row, 'report', $event)\"\n                          [ngModelOptions]=\"{ standalone: true }\"\n                          matTooltip=\"Show in the report bar\">\n                        </mat-slide-toggle>\n                      </td>\n                      <td class=\"filter-col-toggle\">\n                        <mat-slide-toggle\n                          [ngModel]=\"row.component\"\n                          (ngModelChange)=\"setExposure(row, 'component', $event)\"\n                          [ngModelOptions]=\"{ standalone: true }\"\n                          matTooltip=\"Show on this component\">\n                        </mat-slide-toggle>\n                      </td>\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            } @else {\n              <div class=\"filters-empty\">\n                This component has no filterable columns yet \u2014 give it some SQL first.\n              </div>\n            }\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"SQL\"\n            name=\"sql\">\n          <div class=\"tab-body\">\n            <pre class=\"code-block\">\n              {{ component.sql }}\n            </pre>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Config\"\n            name=\"config\">\n          <div class=\"tab-body\">\n            <pre class=\"code-block\">\n              {{ configJson }}\n            </pre>\n          </div>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <fs-form-dialog-actions\n        [save]=\"selectedTab === 'settings'\"\n        [done]=\"selectedTab !== 'settings'\">\n      </fs-form-dialog-actions>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>", styles: ["mat-form-field{width:100%}.tab-body{padding-top:16px}.geometry-row{display:flex;gap:8px}.geometry-row mat-form-field{flex:1}.filter-table{border-spacing:0;width:100%;border-collapse:collapse}.filter-table thead th{color:#8f8f8f;font-weight:400;font-size:85%;text-align:left;padding:8px 16px}.filter-table tbody tr{clip-path:xywh(0 3px 100% calc(100% - 6px) round 10px)}.filter-table tbody td{border:none;background-color:#fafafa;padding:8px 16px;vertical-align:middle;text-align:left}.filter-table .filter-col-name{font-weight:600;color:#1f2933}.filter-table .filter-col-type{color:#7b8794;width:120px}.filter-table .filter-col-toggle,.filter-table th.filter-col-toggle{width:130px;text-align:center}.filters-empty{font-size:13px;color:#7b8794;padding:8px 0 4px}.filters-empty.error{color:#e15759}.code-block{margin:0;padding:10px 12px;background:#1f2933;color:#e4e7eb;border-radius:6px;font-family:JetBrains Mono,Consolas,monospace;font-size:12px;line-height:1.5;white-space:pre-wrap;word-break:break-word;max-height:240px;overflow:auto}\n"] }]
         }] });
 
 // Self-contained timezone picker for the report settings dialog. The IANA zone
@@ -2142,12 +2162,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }] } });
 
-// Report settings, in two tabs:
-//   Settings — name + page setup (size, orientation, layout mode). The layout
-//   mode is the big one: Freeform (position anything anywhere) vs Flow
-//   (components flow into rows by width %).
-//   Styles   — the report's typographic styles. Sizes are in POINTS so they
-//   map 1:1 to PDF/PowerPoint; we start with the Heading size.
+// Date-range defaults are stored as calendar-day strings (yyyy-MM-dd, no time,
+// no timezone) so the backend never shifts them; the date picker works in Date
+// objects. These two convert between the two forms — the only translation the
+// Filters tab needs for a fixed date range.
+// A stored yyyy-MM-dd boundary as a local Date for the picker, or null.
+function dateFromBound(value) {
+    if (!value) {
+        return null;
+    }
+    const date = parseISO(value.slice(0, 10));
+    return isNaN(date.getTime()) ? null : date;
+}
+// A picked Date as a yyyy-MM-dd boundary for storage, or null. Uses the local
+// calendar day (format, not toISOString) so the boundary is the day the admin
+// picked, regardless of timezone.
+function dateToBound(value) {
+    return value instanceof Date && !isNaN(value.getTime())
+        ? format(value, 'yyyy-MM-dd')
+        : null;
+}
+
+// Report settings, in three tabs:
+//   Settings — name + page setup (size, orientation, layout mode).
+//   Styles   — the report's typographic styles (sizes in POINTS, 1:1 with
+//   PDF/PowerPoint); the Heading size to start.
+//   Filters  — the report-level filters and their DEFAULT values. A default
+//   seeds the report bar on every open (for every viewer) but stays
+//   user-changeable — it pre-fills the control, it doesn't lock it. This is the
+//   fix for heavy reports opening blank and timing out: a default month +
+//   organization scopes the landing page from the first load.
 class ReportSettingsComponent {
     selectedTab = 'settings';
     name = '';
@@ -2158,6 +2202,8 @@ class ReportSettingsComponent {
     // viewer's browser zone (which Save persists, making the report's zone explicit).
     timezone = '';
     headingSize = DEFAULT_HEADING_SIZE;
+    // The report-level filters and their editable default values (Filters tab).
+    filterRows = signal([]);
     _data = inject(MAT_DIALOG_DATA);
     _dialogRef = inject(MatDialogRef);
     _reportData = inject(ReportData);
@@ -2172,6 +2218,7 @@ class ReportSettingsComponent {
         this.layout = report.layout ?? 'freeform';
         this.timezone = report.timezone ?? '';
         this.headingSize = report.config?.styles?.heading?.size ?? DEFAULT_HEADING_SIZE;
+        this._buildFilterRows(report);
     }
     // Confirm and delete here, while the dialog is still open, then close with
     // a `deleted` result. The page reacts to the result; it no longer owns the
@@ -2188,21 +2235,103 @@ class ReportSettingsComponent {
         });
     }
     save = () => {
-        return this._reportData.update(this._data.report.id, {
+        const reportId = this._data.report.id;
+        // Persist the report settings and each changed filter default together, so
+        // the single Save covers all three tabs. The report reloads on the `saved`
+        // result, re-seeding the bar from the new defaults.
+        const settings$ = this._reportData.update(reportId, {
             name: this.name,
             pageSize: this.pageSize,
             pageOrientation: this.pageOrientation,
             layout: this.layout,
             timezone: this.timezone,
             styles: { heading: { size: this.headingSize } },
-        })
+        });
+        const defaults$ = this.filterRows()
+            .filter((row) => this._defaultChanged(row))
+            .map((row) => this._reportData.updateFilterGroup(reportId, row.group.id, {
+            default: this._rowDefault(row),
+        }));
+        return forkJoin([settings$, ...defaults$])
             .pipe(tap(() => {
             this._message.success('Report settings saved');
             this._dialogRef.close({ action: 'saved' });
         }));
     };
+    // Build one editable row per report-level filter group (level report or both),
+    // in bar order, seeding each draft from the group's stored default.
+    _buildFilterRows(report) {
+        const reportId = report.id;
+        const rows = (report.filterGroups ?? [])
+            .filter((group) => group.level === 'report' || group.level === 'both')
+            .sort((a, b) => a.order - b.order)
+            .map((group) => {
+            const groupDefault = group.config?.default;
+            return {
+                group,
+                label: group.label || group.filters?.[0]?.filterColumn || 'Filter',
+                start: dateFromBound(groupDefault?.start),
+                end: dateFromBound(groupDefault?.end),
+                values: (groupDefault?.values ?? []).map((value) => ({ name: String(value), value })),
+                value: groupDefault?.value ?? '',
+                // fs-autocomplete-chips fetch: the group's distinct options, name-filtered.
+                // Same loader the report bar uses, so the two never drift.
+                fetch: (keyword) => matchOptions(loadGroupOptions(group, this._reportData, reportId), keyword),
+            };
+        });
+        this.filterRows.set(rows);
+    }
+    // The draft default normalized to the wire shape for this row's type, or null
+    // when empty (which clears the stored default).
+    _rowDefault(row) {
+        switch (row.group.type) {
+            case 'dateRange': {
+                const start = dateToBound(row.start);
+                const end = dateToBound(row.end);
+                return (start || end) ? { start: start ?? undefined, end: end ?? undefined } : null;
+            }
+            case 'select':
+                return row.values.length ? { values: row.values.map((option) => option.value) } : null;
+            case 'keyword':
+            default: {
+                const value = row.value.trim();
+                return value ? { value } : null;
+            }
+        }
+    }
+    // Whether the row's draft differs from the group's stored default — only
+    // changed rows are persisted on Save.
+    _defaultChanged(row) {
+        const before = JSON.stringify(this._normalize(row.group.config?.default ?? null));
+        const after = JSON.stringify(this._normalize(this._rowDefault(row)));
+        return before !== after;
+    }
+    // A stable comparison form: drop relative (not authored here) and undefined
+    // keys so a no-op edit doesn't read as a change.
+    _normalize(value) {
+        if (!value) {
+            return null;
+        }
+        const normalized = {};
+        if (value.start) {
+            normalized.start = value.start;
+        }
+        if (value.end) {
+            normalized.end = value.end;
+        }
+        if (value.values?.length) {
+            normalized.values = value.values;
+        }
+        if (value.value) {
+            normalized.value = value.value;
+        }
+        if (value.relative) {
+            normalized.relative = value.relative;
+        }
+        return Object.keys(normalized).length ? normalized : null;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ReportSettingsComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<form\n    fsForm\n    [submit]=\"save\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      Report Settings\n    </h1>\n    <mat-dialog-content>\n      <mat-tab-group [(selected)]=\"selectedTab\">\n        <mat-tab\n            label=\"Settings\"\n            name=\"settings\">\n          <div class=\"fs-column tab-body\">\n            <mat-form-field>\n              <mat-label>\n                Name\n              </mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"name\"\n                name=\"name\"\n                [fsFormRequired]=\"true\">\n            </mat-form-field>\n            <mat-form-field>\n              <mat-label>\n                Page Size\n              </mat-label>\n              <mat-select\n                  [(ngModel)]=\"pageSize\"\n                  name=\"pageSize\">\n                <mat-option value=\"widescreen\">\n                  Widescreen (13.33\" \u00D7 7.5\")\n                </mat-option>\n                <mat-option value=\"letter\">\n                  Letter (11\" \u00D7 8.5\")\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n            <mat-form-field>\n              <mat-label>\n                Orientation\n              </mat-label>\n              <mat-select\n                  [(ngModel)]=\"pageOrientation\"\n                  name=\"pageOrientation\">\n                <mat-option value=\"landscape\">\n                  Landscape\n                </mat-option>\n                <mat-option value=\"portrait\">\n                  Portrait\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n            <mat-form-field>\n              <mat-label>\n                Layout\n              </mat-label>\n              <mat-select\n                  [(ngModel)]=\"layout\"\n                  name=\"layout\">\n                <mat-option value=\"freeform\">\n                  Freeform \u2014 position components anywhere on the page\n                </mat-option>\n                <mat-option value=\"flow\">\n                  Flow \u2014 components flow into rows by width %\n                </mat-option>\n              </mat-select>\n              <mat-hint>\n                Freeform is like PowerPoint; Flow is like a responsive dashboard.\n              </mat-hint>\n            </mat-form-field>\n            <fs-ai-report-timezone-select [(timezone)]=\"timezone\"></fs-ai-report-timezone-select>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Styles\"\n            name=\"styles\">\n          <div class=\"fs-column tab-body\">\n            <mat-form-field>\n              <mat-label>\n                Heading Size\n              </mat-label>\n              <input\n                matInput\n                type=\"number\"\n                step=\"1\"\n                min=\"6\"\n                max=\"96\"\n                [(ngModel)]=\"headingSize\"\n                name=\"headingSize\"\n                [fsFormMin]=\"6\"\n                [fsFormMax]=\"96\">\n              <span matTextSuffix>\n                pt\n              </span>\n              <mat-hint>\n                Applies to component titles. Points map 1:1 to PDF and PowerPoint.\n              </mat-hint>\n            </mat-form-field>\n          </div>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <fs-form-dialog-actions>\n        <button\n            type=\"button\"\n            mat-button\n            color=\"warn\"\n            (click)=\"delete()\">\n          Delete\n        </button>\n      </fs-form-dialog-actions>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>", styles: ["mat-form-field{width:100%}.tab-body{padding-top:16px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2$1.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { kind: "directive", type: i2$1.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { kind: "directive", type: i2$1.FsFormMinDirective, selector: "[fsFormMin]", inputs: ["fsFormMin", "fsFormMinMessage"] }, { kind: "directive", type: i2$1.FsFormMaxDirective, selector: "[fsFormMax]", inputs: ["fsFormMax", "fsFormMaxMessage"] }, { kind: "component", type: i2$1.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }, { kind: "directive", type: i2$1.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "directive", type: i2$1.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit"] }, { kind: "ngmodule", type: FsDialogModule }, { kind: "component", type: i3.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "ngmodule", type: FsTabsModule }, { kind: "directive", type: i4.FsTabsHeaderTabGroupDirective, selector: "mat-tab-group, matTabGroup, [matTabGroup]", inputs: ["orientation", "selected", "selectedData"], outputs: ["selectedChange", "selectedDataChange"], exportAs: ["fsTabsHeaderTabGroup"] }, { kind: "directive", type: i4.FsTabsTabDirective, selector: "mat-tab,matTab", inputs: ["name", "data"], exportAs: ["fsTabsTab"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i5.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i5.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: TimezoneSelectComponent, selector: "fs-ai-report-timezone-select", inputs: ["placeholder", "required", "disabled", "timezone"], outputs: ["timezoneChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ReportSettingsComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<form\n    fsForm\n    [submit]=\"save\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      Report Settings\n    </h1>\n    <mat-dialog-content>\n      <mat-tab-group [(selected)]=\"selectedTab\">\n        <mat-tab\n            label=\"Settings\"\n            name=\"settings\">\n          <div class=\"fs-column tab-body\">\n            <mat-form-field>\n              <mat-label>\n                Name\n              </mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"name\"\n                name=\"name\"\n                [fsFormRequired]=\"true\">\n            </mat-form-field>\n            <mat-form-field>\n              <mat-label>\n                Page Size\n              </mat-label>\n              <mat-select\n                  [(ngModel)]=\"pageSize\"\n                  name=\"pageSize\">\n                <mat-option value=\"widescreen\">\n                  Widescreen (13.33\" \u00D7 7.5\")\n                </mat-option>\n                <mat-option value=\"letter\">\n                  Letter (11\" \u00D7 8.5\")\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n            <mat-form-field>\n              <mat-label>\n                Orientation\n              </mat-label>\n              <mat-select\n                  [(ngModel)]=\"pageOrientation\"\n                  name=\"pageOrientation\">\n                <mat-option value=\"landscape\">\n                  Landscape\n                </mat-option>\n                <mat-option value=\"portrait\">\n                  Portrait\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n            <mat-form-field>\n              <mat-label>\n                Layout\n              </mat-label>\n              <mat-select\n                  [(ngModel)]=\"layout\"\n                  name=\"layout\">\n                <mat-option value=\"freeform\">\n                  Freeform \u2014 position components anywhere on the page\n                </mat-option>\n                <mat-option value=\"flow\">\n                  Flow \u2014 components flow into rows by width %\n                </mat-option>\n              </mat-select>\n              <mat-hint>\n                Freeform is like PowerPoint; Flow is like a responsive dashboard.\n              </mat-hint>\n            </mat-form-field>\n            <fs-ai-report-timezone-select [(timezone)]=\"timezone\"></fs-ai-report-timezone-select>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Styles\"\n            name=\"styles\">\n          <div class=\"fs-column tab-body\">\n            <mat-form-field>\n              <mat-label>\n                Heading Size\n              </mat-label>\n              <input\n                matInput\n                type=\"number\"\n                step=\"1\"\n                min=\"6\"\n                max=\"96\"\n                [(ngModel)]=\"headingSize\"\n                name=\"headingSize\"\n                [fsFormMin]=\"6\"\n                [fsFormMax]=\"96\">\n              <span matTextSuffix>\n                pt\n              </span>\n              <mat-hint>\n                Applies to component titles. Points map 1:1 to PDF and PowerPoint.\n              </mat-hint>\n            </mat-form-field>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Filters\"\n            name=\"filters\">\n          <div class=\"fs-column tab-body\">\n            @if (filterRows().length) {\n              @for (row of filterRows(); track row.group.id) {\n                @switch (row.group.type) {\n                  @case ('dateRange') {\n                    <div class=\"fs-row.gap-sm.align-center fs-flex\">\n                      <mat-form-field class=\"fs-flex\">\n                        <mat-label>\n                          Default From {{ row.label }}\n                        </mat-label>\n                        <input\n                          matInput\n                          fsDatePicker\n                          [(ngModel)]=\"row.start\"\n                          [name]=\"'start' + row.group.id\">\n                      </mat-form-field>\n                      <mat-form-field class=\"fs-flex\">\n                        <mat-label>\n                          Default To {{ row.label }}\n                        </mat-label>\n                        <input\n                          matInput\n                          fsDatePicker\n                          [(ngModel)]=\"row.end\"\n                          [name]=\"'end' + row.group.id\">\n                      </mat-form-field>\n                    </div>\n                  }\n                  @case ('select') {\n                    <fs-autocomplete-chips\n                        class=\"fs-flex\"\n                        [label]=\"'Default ' + row.label\"\n                        [fetch]=\"row.fetch\"\n                        [(ngModel)]=\"row.values\"\n                        [name]=\"'values' + row.group.id\"\n                        [multiple]=\"true\"\n                        [fetchOnFocus]=\"true\">\n                      <ng-template\n                          fsAutocompleteChipsTemplate\n                          let-object=\"object\">\n                        {{ object.name }}\n                      </ng-template>\n                    </fs-autocomplete-chips>\n                  }\n                  @default {\n                    <mat-form-field class=\"fs-flex\">\n                      <mat-label>\n                        Default {{ row.label }}\n                      </mat-label>\n                      <input\n                        matInput\n                        [(ngModel)]=\"row.value\"\n                        [name]=\"'value' + row.group.id\">\n                    </mat-form-field>\n                  }\n                }\n              }\n            } @else {\n              <fs-message-info>\n                This report has no report-level filters yet. Add a filter to a\n                component (its settings \u2192 Filters) and show it in the report bar,\n                then set its default here.\n              </fs-message-info>\n            }\n          </div>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <fs-form-dialog-actions>\n        <button\n            type=\"button\"\n            mat-button\n            color=\"warn\"\n            (click)=\"delete()\">\n          Delete\n        </button>\n      </fs-form-dialog-actions>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>", styles: ["mat-form-field{width:100%}.tab-body{padding-top:16px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2$1.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { kind: "directive", type: i2$1.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { kind: "directive", type: i2$1.FsFormMinDirective, selector: "[fsFormMin]", inputs: ["fsFormMin", "fsFormMinMessage"] }, { kind: "directive", type: i2$1.FsFormMaxDirective, selector: "[fsFormMax]", inputs: ["fsFormMax", "fsFormMaxMessage"] }, { kind: "component", type: i2$1.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }, { kind: "directive", type: i2$1.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "directive", type: i2$1.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit"] }, { kind: "ngmodule", type: FsDialogModule }, { kind: "component", type: i3.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "ngmodule", type: FsMessageModule }, { kind: "component", type: i4$1.FsMessageInfoComponent, selector: "fs-message-info" }, { kind: "ngmodule", type: FsTabsModule }, { kind: "directive", type: i4.FsTabsHeaderTabGroupDirective, selector: "mat-tab-group, matTabGroup, [matTabGroup]", inputs: ["orientation", "selected", "selectedData"], outputs: ["selectedChange", "selectedDataChange"], exportAs: ["fsTabsHeaderTabGroup"] }, { kind: "directive", type: i4.FsTabsTabDirective, selector: "mat-tab,matTab", inputs: ["name", "data"], exportAs: ["fsTabsTab"] }, { kind: "ngmodule", type: FsDatePickerModule }, { kind: "component", type: i6.FsDatePickerComponent, selector: "[fsDatePicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "startOfDay", "view", "format", "minutes", "width"], outputs: ["change"] }, { kind: "ngmodule", type: FsAutocompleteChipsModule }, { kind: "component", type: i2$2.FsAutocompleteChipsComponent, selector: "fs-autocomplete-chips", inputs: ["fetch", "appearance", "floatLabel", "readonly", "size", "label", "placeholder", "chipImage", "chipBackground", "chipColor", "chipIcon", "chipIconColor", "chipClass", "chipPadding", "shape", "hint", "allowText", "allowObject", "delay", "minPanelWidth", "maxPanelHeight", "validateText", "removable", "allowClear", "color", "background", "orderable", "padless", "initOnClick", "fetchOnFocus", "multiple", "multipleAdd", "confirm", "disabled", "groupBy", "panelWidth", "panelClass", "compareWith"], outputs: ["selected", "removed", "reordered", "clear", "panelOpened", "panelClosed"] }, { kind: "directive", type: i2$2.FsAutocompleteObjectDirective, selector: "[fsAutocompleteObject],[fsAutocompleteChipsTemplate]" }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i5.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i5.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: TimezoneSelectComponent, selector: "fs-ai-report-timezone-select", inputs: ["placeholder", "required", "disabled", "timezone"], outputs: ["timezoneChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportSettingsComponent, decorators: [{
             type: Component,
@@ -2210,7 +2339,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         FormsModule,
                         FsFormModule,
                         FsDialogModule,
+                        FsMessageModule,
                         FsTabsModule,
+                        FsDatePickerModule,
+                        FsAutocompleteChipsModule,
                         MatTabsModule,
                         MatButton,
                         MatDialogTitle,
@@ -2224,7 +2356,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         MatSelect,
                         MatOption$1,
                         TimezoneSelectComponent,
-                    ], template: "<form\n    fsForm\n    [submit]=\"save\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      Report Settings\n    </h1>\n    <mat-dialog-content>\n      <mat-tab-group [(selected)]=\"selectedTab\">\n        <mat-tab\n            label=\"Settings\"\n            name=\"settings\">\n          <div class=\"fs-column tab-body\">\n            <mat-form-field>\n              <mat-label>\n                Name\n              </mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"name\"\n                name=\"name\"\n                [fsFormRequired]=\"true\">\n            </mat-form-field>\n            <mat-form-field>\n              <mat-label>\n                Page Size\n              </mat-label>\n              <mat-select\n                  [(ngModel)]=\"pageSize\"\n                  name=\"pageSize\">\n                <mat-option value=\"widescreen\">\n                  Widescreen (13.33\" \u00D7 7.5\")\n                </mat-option>\n                <mat-option value=\"letter\">\n                  Letter (11\" \u00D7 8.5\")\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n            <mat-form-field>\n              <mat-label>\n                Orientation\n              </mat-label>\n              <mat-select\n                  [(ngModel)]=\"pageOrientation\"\n                  name=\"pageOrientation\">\n                <mat-option value=\"landscape\">\n                  Landscape\n                </mat-option>\n                <mat-option value=\"portrait\">\n                  Portrait\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n            <mat-form-field>\n              <mat-label>\n                Layout\n              </mat-label>\n              <mat-select\n                  [(ngModel)]=\"layout\"\n                  name=\"layout\">\n                <mat-option value=\"freeform\">\n                  Freeform \u2014 position components anywhere on the page\n                </mat-option>\n                <mat-option value=\"flow\">\n                  Flow \u2014 components flow into rows by width %\n                </mat-option>\n              </mat-select>\n              <mat-hint>\n                Freeform is like PowerPoint; Flow is like a responsive dashboard.\n              </mat-hint>\n            </mat-form-field>\n            <fs-ai-report-timezone-select [(timezone)]=\"timezone\"></fs-ai-report-timezone-select>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Styles\"\n            name=\"styles\">\n          <div class=\"fs-column tab-body\">\n            <mat-form-field>\n              <mat-label>\n                Heading Size\n              </mat-label>\n              <input\n                matInput\n                type=\"number\"\n                step=\"1\"\n                min=\"6\"\n                max=\"96\"\n                [(ngModel)]=\"headingSize\"\n                name=\"headingSize\"\n                [fsFormMin]=\"6\"\n                [fsFormMax]=\"96\">\n              <span matTextSuffix>\n                pt\n              </span>\n              <mat-hint>\n                Applies to component titles. Points map 1:1 to PDF and PowerPoint.\n              </mat-hint>\n            </mat-form-field>\n          </div>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <fs-form-dialog-actions>\n        <button\n            type=\"button\"\n            mat-button\n            color=\"warn\"\n            (click)=\"delete()\">\n          Delete\n        </button>\n      </fs-form-dialog-actions>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>", styles: ["mat-form-field{width:100%}.tab-body{padding-top:16px}\n"] }]
+                    ], template: "<form\n    fsForm\n    [submit]=\"save\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      Report Settings\n    </h1>\n    <mat-dialog-content>\n      <mat-tab-group [(selected)]=\"selectedTab\">\n        <mat-tab\n            label=\"Settings\"\n            name=\"settings\">\n          <div class=\"fs-column tab-body\">\n            <mat-form-field>\n              <mat-label>\n                Name\n              </mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"name\"\n                name=\"name\"\n                [fsFormRequired]=\"true\">\n            </mat-form-field>\n            <mat-form-field>\n              <mat-label>\n                Page Size\n              </mat-label>\n              <mat-select\n                  [(ngModel)]=\"pageSize\"\n                  name=\"pageSize\">\n                <mat-option value=\"widescreen\">\n                  Widescreen (13.33\" \u00D7 7.5\")\n                </mat-option>\n                <mat-option value=\"letter\">\n                  Letter (11\" \u00D7 8.5\")\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n            <mat-form-field>\n              <mat-label>\n                Orientation\n              </mat-label>\n              <mat-select\n                  [(ngModel)]=\"pageOrientation\"\n                  name=\"pageOrientation\">\n                <mat-option value=\"landscape\">\n                  Landscape\n                </mat-option>\n                <mat-option value=\"portrait\">\n                  Portrait\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n            <mat-form-field>\n              <mat-label>\n                Layout\n              </mat-label>\n              <mat-select\n                  [(ngModel)]=\"layout\"\n                  name=\"layout\">\n                <mat-option value=\"freeform\">\n                  Freeform \u2014 position components anywhere on the page\n                </mat-option>\n                <mat-option value=\"flow\">\n                  Flow \u2014 components flow into rows by width %\n                </mat-option>\n              </mat-select>\n              <mat-hint>\n                Freeform is like PowerPoint; Flow is like a responsive dashboard.\n              </mat-hint>\n            </mat-form-field>\n            <fs-ai-report-timezone-select [(timezone)]=\"timezone\"></fs-ai-report-timezone-select>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Styles\"\n            name=\"styles\">\n          <div class=\"fs-column tab-body\">\n            <mat-form-field>\n              <mat-label>\n                Heading Size\n              </mat-label>\n              <input\n                matInput\n                type=\"number\"\n                step=\"1\"\n                min=\"6\"\n                max=\"96\"\n                [(ngModel)]=\"headingSize\"\n                name=\"headingSize\"\n                [fsFormMin]=\"6\"\n                [fsFormMax]=\"96\">\n              <span matTextSuffix>\n                pt\n              </span>\n              <mat-hint>\n                Applies to component titles. Points map 1:1 to PDF and PowerPoint.\n              </mat-hint>\n            </mat-form-field>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Filters\"\n            name=\"filters\">\n          <div class=\"fs-column tab-body\">\n            @if (filterRows().length) {\n              @for (row of filterRows(); track row.group.id) {\n                @switch (row.group.type) {\n                  @case ('dateRange') {\n                    <div class=\"fs-row.gap-sm.align-center fs-flex\">\n                      <mat-form-field class=\"fs-flex\">\n                        <mat-label>\n                          Default From {{ row.label }}\n                        </mat-label>\n                        <input\n                          matInput\n                          fsDatePicker\n                          [(ngModel)]=\"row.start\"\n                          [name]=\"'start' + row.group.id\">\n                      </mat-form-field>\n                      <mat-form-field class=\"fs-flex\">\n                        <mat-label>\n                          Default To {{ row.label }}\n                        </mat-label>\n                        <input\n                          matInput\n                          fsDatePicker\n                          [(ngModel)]=\"row.end\"\n                          [name]=\"'end' + row.group.id\">\n                      </mat-form-field>\n                    </div>\n                  }\n                  @case ('select') {\n                    <fs-autocomplete-chips\n                        class=\"fs-flex\"\n                        [label]=\"'Default ' + row.label\"\n                        [fetch]=\"row.fetch\"\n                        [(ngModel)]=\"row.values\"\n                        [name]=\"'values' + row.group.id\"\n                        [multiple]=\"true\"\n                        [fetchOnFocus]=\"true\">\n                      <ng-template\n                          fsAutocompleteChipsTemplate\n                          let-object=\"object\">\n                        {{ object.name }}\n                      </ng-template>\n                    </fs-autocomplete-chips>\n                  }\n                  @default {\n                    <mat-form-field class=\"fs-flex\">\n                      <mat-label>\n                        Default {{ row.label }}\n                      </mat-label>\n                      <input\n                        matInput\n                        [(ngModel)]=\"row.value\"\n                        [name]=\"'value' + row.group.id\">\n                    </mat-form-field>\n                  }\n                }\n              }\n            } @else {\n              <fs-message-info>\n                This report has no report-level filters yet. Add a filter to a\n                component (its settings \u2192 Filters) and show it in the report bar,\n                then set its default here.\n              </fs-message-info>\n            }\n          </div>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <fs-form-dialog-actions>\n        <button\n            type=\"button\"\n            mat-button\n            color=\"warn\"\n            (click)=\"delete()\">\n          Delete\n        </button>\n      </fs-form-dialog-actions>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>", styles: ["mat-form-field{width:100%}.tab-body{padding-top:16px}\n"] }]
         }] });
 
 // The assembled report structure returned by GET /api/reports/:id — composed
@@ -2336,7 +2468,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 // complete synchronously after setOption.
 async function renderChartImage(component, data, width, height, pixelRatio = 3) {
     // The same tree-shaken echarts build + 'report' theme the live canvas uses.
-    const echarts = (await import('./firestitch-report-echarts-Bgshq3H7.mjs')).default;
+    const echarts = (await import('./firestitch-report-echarts-m2yVum4J.mjs')).default;
     const host = document.createElement('div');
     host.style.width = `${width}px`;
     host.style.height = `${height}px`;
@@ -2790,7 +2922,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
 // fs-filter query key for the runtime Frequency control (a render-layer bucket
 // override, not a filter group — so it's read straight off the query).
-const FREQUENCY_ITEM = 'frequency';
+const FREQUENCY_ITEM$1 = 'frequency';
 // The Reports page: AI chat on the left, the report canvas on the right —
 // a split-pane layout; the viewer is our own canvas (no iframe, no embed URLs).
 // The chat is always scoped to the selected report; its id rides on every
@@ -3028,7 +3160,7 @@ class ReportComponent {
             : [];
         if (reportId && this._hasTimeSeriesChart()) {
             items.push({
-                name: FREQUENCY_ITEM,
+                name: FREQUENCY_ITEM$1,
                 type: ItemType.Select,
                 label: 'Frequency',
                 multiple: false,
@@ -3047,7 +3179,7 @@ class ReportComponent {
                     this._filterState.setValue(groupId, value);
                 }
                 // Frequency isn't a filter group — it's a render-layer bucket override.
-                this._filterState.setFrequency(query?.[FREQUENCY_ITEM] || null);
+                this._filterState.setFrequency(query?.[FREQUENCY_ITEM$1] || null);
             },
         };
     }
@@ -3080,8 +3212,8 @@ class ReportComponent {
             ReportPdfService,
             // Tree-shaken ECharts core + the 'report' house theme, loaded lazily with
             // this route's chunk.
-            provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-Bgshq3H7.mjs').then((module) => module.default) }),
-        ], viewQueries: [{ propertyName: "_split", first: true, predicate: ["split"], descendants: true, static: true }, { propertyName: "_chatPanel", first: true, predicate: ["chatPanel"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div\n    #split\n    class=\"report fs-row.align-start\">\n  <fs-ai-chat\n    #chatPanel\n    class=\"chat\"\n    style=\"min-height: 500px;\"\n    basePath=\"reports\"\n    [requestData]=\"{ reportId: selected?.id ?? null }\"\n    [introMessage]=\"introMessage\"\n    (response)=\"onChatResponse($event)\">\n  </fs-ai-chat>\n  <div\n    class=\"resizer\"\n    (pointerdown)=\"onResizeStart($event)\">\n  </div>\n  <div class=\"viewer fs-flex fs-column\">\n    <div class=\"fs-row.align-center.gap-sm\">\n      <fs-autocomplete-chips\n          class=\"fs-flex\"\n          [fetch]=\"fetchReports\"\n          [(ngModel)]=\"selected\"\n          [disabled]=\"loadingReports\"\n          [padless]=\"true\"\n          [multiple]=\"false\"\n          [fetchOnFocus]=\"true\"\n          (ngModelChange)=\"reportChange($event)\"\n          placeholder=\"Report\"\n          name=\"report\">\n        <ng-template\n            fsAutocompleteChipsTemplate\n            let-object=\"object\">\n          {{ object.name }}\n        </ng-template>\n        <ng-template\n            fsAutocompleteChipsStatic\n            (click)=\"createReport()\">\n          Create Report\n        </ng-template>\n      </fs-autocomplete-chips>\n      @if (report) {\n        <fs-menu>\n          <ng-template\n              fs-menu-item\n              (click)=\"reportSettings()\">\n            <mat-icon>\n              tune\n            </mat-icon>\n            Report settings\n          </ng-template>\n          <ng-template\n              fs-menu-item\n              (click)=\"toggleEditMode()\">\n            <mat-icon>\n              {{ editMode ? 'lock' : 'open_with' }}\n            </mat-icon>\n            {{ editMode ? 'Done editing layout' : 'Edit layout' }}\n          </ng-template>\n          <ng-template\n              fs-menu-item\n              (click)=\"exportPowerpoint()\">\n            <mat-icon>\n              slideshow\n            </mat-icon>\n            Export PowerPoint\n          </ng-template>\n          <ng-template\n              fs-menu-item\n              (click)=\"exportPdf()\">\n            <mat-icon>\n              picture_as_pdf\n            </mat-icon>\n            Export PDF\n          </ng-template>\n        </fs-menu>\n      }\n    </div>\n    @if (report) {\n      <!-- Report-level filters only (the report's actions live in the menu\n           above). fs-filter reads its config once at init, so it's keyed on the\n           filter signature: when the report-level filter set changes the block\n           is recreated and re-reads the rebuilt config. -->\n      @if (reportHasFilters) {\n        @for (key of [reportFilterKey]; track key) {\n          <fs-filter [config]=\"reportFilterConfig\"></fs-filter>\n        }\n      }\n      <app-report-canvas\n        [report]=\"report\"\n        [editMode]=\"editMode\"\n        (componentSettings)=\"componentSettings($event)\"\n        (reportChanged)=\"onCanvasReportChanged()\"\n        (editDone)=\"toggleEditMode()\">\n      </app-report-canvas>\n    }\n  </div>\n</div>", styles: [".report{height:100%;min-height:500px}.report .chat{display:block;flex:0 0 25%;width:100%;height:100%;min-height:500px;min-width:0;border:none}.report .viewer{display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden}.report .viewer fs-filter{flex:0 0 auto;margin-top:10px;margin-bottom:0}.report .viewer ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.report .resizer{flex:0 0 11px;align-self:stretch;display:flex;justify-content:center;cursor:col-resize;touch-action:none;-webkit-user-select:none;user-select:none}.report .resizer:before{content:\"\";width:0px;background:#0000001f;transition:width .12s ease,background-color .12s ease}.report .resizer:hover:before{width:3px;background:var(--brand-primary-color)}.report.resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.report.resizing .resizer:before{width:3px;background:var(--brand-primary-color)}.report.resizing .chat,.report.resizing .viewer{pointer-events:none}::ng-deep body.body-report-reports .mat-mdc-card-content{display:flex;flex-direction:column;box-sizing:border-box}::ng-deep body.body-report-reports .mat-mdc-card-content mat-tab-nav-panel{flex:1;min-height:0}::ng-deep body.body-report-reports .mat-mdc-card-content mat-tab-nav-panel router-outlet+ng-component{height:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsAutocompleteChipsModule }, { kind: "component", type: i2$2.FsAutocompleteChipsComponent, selector: "fs-autocomplete-chips", inputs: ["fetch", "appearance", "floatLabel", "readonly", "size", "label", "placeholder", "chipImage", "chipBackground", "chipColor", "chipIcon", "chipIconColor", "chipClass", "chipPadding", "shape", "hint", "allowText", "allowObject", "delay", "minPanelWidth", "maxPanelHeight", "validateText", "removable", "allowClear", "color", "background", "orderable", "padless", "initOnClick", "fetchOnFocus", "multiple", "multipleAdd", "confirm", "disabled", "groupBy", "panelWidth", "panelClass", "compareWith"], outputs: ["selected", "removed", "reordered", "clear", "panelOpened", "panelClosed"] }, { kind: "directive", type: i2$2.FsAutocompleteObjectDirective, selector: "[fsAutocompleteObject],[fsAutocompleteChipsTemplate]" }, { kind: "directive", type: i2$2.FsAutocompleteChipsStaticDirective, selector: "[fsAutocompleteChipsStatic]", inputs: ["show", "disable"], outputs: ["click", "selected"] }, { kind: "ngmodule", type: FsFilterModule }, { kind: "component", type: i2.FilterComponent, selector: "fs-filter", inputs: ["config"], outputs: ["closed", "opened", "ready"] }, { kind: "ngmodule", type: FsMenuModule }, { kind: "component", type: i4$1.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i4$1.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "component", type: FsAiChatComponent, selector: "fs-ai-chat", inputs: ["basePath", "requestData", "introMessage"], outputs: ["response"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ReportCanvasComponent, selector: "app-report-canvas", inputs: ["report", "editMode"], outputs: ["componentSettings", "reportChanged", "editDone"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+            provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-m2yVum4J.mjs').then((module) => module.default) }),
+        ], viewQueries: [{ propertyName: "_split", first: true, predicate: ["split"], descendants: true, static: true }, { propertyName: "_chatPanel", first: true, predicate: ["chatPanel"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div\n    #split\n    class=\"report fs-row.align-start\">\n  <fs-ai-chat\n    #chatPanel\n    class=\"chat\"\n    style=\"min-height: 500px;\"\n    basePath=\"reports\"\n    [requestData]=\"{ reportId: selected?.id ?? null }\"\n    [introMessage]=\"introMessage\"\n    (response)=\"onChatResponse($event)\">\n  </fs-ai-chat>\n  <div\n    class=\"resizer\"\n    (pointerdown)=\"onResizeStart($event)\">\n  </div>\n  <div class=\"viewer fs-flex fs-column\">\n    <div class=\"fs-row.align-center.gap-sm\">\n      <fs-autocomplete-chips\n          class=\"fs-flex\"\n          [fetch]=\"fetchReports\"\n          [(ngModel)]=\"selected\"\n          [disabled]=\"loadingReports\"\n          [padless]=\"true\"\n          [multiple]=\"false\"\n          [fetchOnFocus]=\"true\"\n          (ngModelChange)=\"reportChange($event)\"\n          placeholder=\"Report\"\n          name=\"report\">\n        <ng-template\n            fsAutocompleteChipsTemplate\n            let-object=\"object\">\n          {{ object.name }}\n        </ng-template>\n        <ng-template\n            fsAutocompleteChipsStatic\n            (click)=\"createReport()\">\n          Create Report\n        </ng-template>\n      </fs-autocomplete-chips>\n      @if (report) {\n        <fs-menu>\n          <ng-template\n              fs-menu-item\n              (click)=\"reportSettings()\">\n            <mat-icon>\n              tune\n            </mat-icon>\n            Report settings\n          </ng-template>\n          <ng-template\n              fs-menu-item\n              (click)=\"toggleEditMode()\">\n            <mat-icon>\n              {{ editMode ? 'lock' : 'open_with' }}\n            </mat-icon>\n            {{ editMode ? 'Done editing layout' : 'Edit layout' }}\n          </ng-template>\n          <ng-template\n              fs-menu-item\n              (click)=\"exportPowerpoint()\">\n            <mat-icon>\n              slideshow\n            </mat-icon>\n            Export PowerPoint\n          </ng-template>\n          <ng-template\n              fs-menu-item\n              (click)=\"exportPdf()\">\n            <mat-icon>\n              picture_as_pdf\n            </mat-icon>\n            Export PDF\n          </ng-template>\n        </fs-menu>\n      }\n    </div>\n    @if (report) {\n      <!-- Report-level filters only (the report's actions live in the menu\n           above). fs-filter reads its config once at init, so it's keyed on the\n           filter signature: when the report-level filter set changes the block\n           is recreated and re-reads the rebuilt config. -->\n      @if (reportHasFilters) {\n        @for (key of [reportFilterKey]; track key) {\n          <fs-filter [config]=\"reportFilterConfig\"></fs-filter>\n        }\n      }\n      <app-report-canvas\n        [report]=\"report\"\n        [editMode]=\"editMode\"\n        (componentSettings)=\"componentSettings($event)\"\n        (reportChanged)=\"onCanvasReportChanged()\"\n        (editDone)=\"toggleEditMode()\">\n      </app-report-canvas>\n    }\n  </div>\n</div>", styles: [".report{height:100%;min-height:500px}.report .chat{display:block;flex:0 0 25%;width:100%;height:100%;min-height:500px;min-width:0;border:none}.report .viewer{display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden}.report .viewer fs-filter{flex:0 0 auto;margin-top:10px;margin-bottom:0}.report .viewer ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.report .resizer{flex:0 0 11px;align-self:stretch;display:flex;justify-content:center;cursor:col-resize;touch-action:none;-webkit-user-select:none;user-select:none}.report .resizer:before{content:\"\";width:0px;background:#0000001f;transition:width .12s ease,background-color .12s ease}.report .resizer:hover:before{width:3px;background:var(--brand-primary-color)}.report.resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.report.resizing .resizer:before{width:3px;background:var(--brand-primary-color)}.report.resizing .chat,.report.resizing .viewer{pointer-events:none}::ng-deep body.body-report-reports .mat-mdc-card-content{display:flex;flex-direction:column;box-sizing:border-box}::ng-deep body.body-report-reports .mat-mdc-card-content mat-tab-nav-panel{flex:1;min-height:0}::ng-deep body.body-report-reports .mat-mdc-card-content mat-tab-nav-panel router-outlet+ng-component{height:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsAutocompleteChipsModule }, { kind: "component", type: i2$2.FsAutocompleteChipsComponent, selector: "fs-autocomplete-chips", inputs: ["fetch", "appearance", "floatLabel", "readonly", "size", "label", "placeholder", "chipImage", "chipBackground", "chipColor", "chipIcon", "chipIconColor", "chipClass", "chipPadding", "shape", "hint", "allowText", "allowObject", "delay", "minPanelWidth", "maxPanelHeight", "validateText", "removable", "allowClear", "color", "background", "orderable", "padless", "initOnClick", "fetchOnFocus", "multiple", "multipleAdd", "confirm", "disabled", "groupBy", "panelWidth", "panelClass", "compareWith"], outputs: ["selected", "removed", "reordered", "clear", "panelOpened", "panelClosed"] }, { kind: "directive", type: i2$2.FsAutocompleteObjectDirective, selector: "[fsAutocompleteObject],[fsAutocompleteChipsTemplate]" }, { kind: "directive", type: i2$2.FsAutocompleteChipsStaticDirective, selector: "[fsAutocompleteChipsStatic]", inputs: ["show", "disable"], outputs: ["click", "selected"] }, { kind: "ngmodule", type: FsFilterModule }, { kind: "component", type: i2.FilterComponent, selector: "fs-filter", inputs: ["config"], outputs: ["closed", "opened", "ready"] }, { kind: "ngmodule", type: FsMenuModule }, { kind: "component", type: i2$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: "component", type: FsAiChatComponent, selector: "fs-ai-chat", inputs: ["basePath", "requestData", "introMessage"], outputs: ["response"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ReportCanvasComponent, selector: "app-report-canvas", inputs: ["report", "editMode"], outputs: ["componentSettings", "reportChanged", "editDone"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportComponent, decorators: [{
             type: Component,
@@ -3094,7 +3226,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         ReportPdfService,
                         // Tree-shaken ECharts core + the 'report' house theme, loaded lazily with
                         // this route's chunk.
-                        provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-Bgshq3H7.mjs').then((module) => module.default) }),
+                        provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-m2yVum4J.mjs').then((module) => module.default) }),
                     ], imports: [
                         FormsModule,
                         FsAutocompleteChipsModule,
@@ -3112,6 +3244,390 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: ['chatPanel', { static: true, read: ElementRef }]
             }] } });
 
+// The reports listing — an fs-list of reports. Rows are links built from a URL
+// pattern (a ':id' token → the report id; a leading '/' makes it absolute,
+// otherwise it's relative to this component's route). Create prompts for a
+// title, creates the report, then routes to it. The header gear emits so the
+// host can open its Semantic Database dialog. No routing is hard-coded here.
+class FsAiReportsComponent {
+    // API base for the reports endpoints; override to mount elsewhere.
+    basePath = input('reports');
+    // Where a row links to; ':id' is replaced with the report id. Default takes
+    // you to <current route>/:id. Absolute when it starts with '/'.
+    openPattern = input(':id');
+    // Where a freshly-created report routes to; same ':id' pattern rules.
+    createPattern = input(':id');
+    // The list-header gear — the host opens its Semantic Database dialog (the
+    // builder lives in the app, so the package only signals the intent).
+    semantic = output();
+    list = null;
+    listConfig;
+    _reportData = inject(ReportData);
+    _router = inject(Router);
+    _route = inject(ActivatedRoute);
+    _prompt = inject(FsPrompt);
+    _destroyRef = inject(DestroyRef);
+    constructor() {
+        effect(() => {
+            this._reportData.basePath = this.basePath();
+        });
+        this._initListConfig();
+    }
+    // routerLink commands for a report row (built from openPattern).
+    openLink(report) {
+        return this._patternCommands(this.openPattern(), report.id);
+    }
+    // Prompt for a title, create the report, then route to it (createPattern).
+    createReport() {
+        this._prompt.input({
+            title: 'Create Report',
+            label: 'Title',
+            commitLabel: 'Create',
+            required: true,
+        })
+            .pipe(switchMap((name) => this._reportData.create(name)), takeUntilDestroyed(this._destroyRef))
+            .subscribe((report) => {
+            const pattern = this.createPattern();
+            this._router.navigate(this._patternCommands(pattern, report.id), pattern.startsWith('/') ? {} : { relativeTo: this._route });
+        });
+    }
+    // Turn a ':id' pattern into router commands. Relative unless it starts
+    // with '/', in which case the first segment carries the leading slash.
+    _patternCommands(pattern, id) {
+        const absolute = pattern.startsWith('/');
+        const segments = pattern.split('/')
+            .filter((segment) => segment.length > 0)
+            .map((segment) => (segment === ':id' ? id : segment));
+        if (!segments.length) {
+            return [id];
+        }
+        if (absolute) {
+            segments[0] = `/${segments[0]}`;
+        }
+        return segments;
+    }
+    _initListConfig() {
+        this.listConfig = {
+            // The backend list is not paged yet; show the full set until it is.
+            paging: false,
+            actions: [
+                {
+                    // Icon-only: opens the host's Semantic Database dialog.
+                    icon: 'settings',
+                    tooltip: 'Semantic database',
+                    primary: false,
+                    click: () => this.semantic.emit(),
+                },
+                {
+                    label: 'Create',
+                    primary: true,
+                    click: () => this.createReport(),
+                },
+            ],
+            fetch: (query) => {
+                return this._reportData.reports(query)
+                    .pipe(map((reports) => ({ data: reports ?? [] })));
+            },
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FsAiReportsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: FsAiReportsComponent, isStandalone: true, selector: "fs-ai-reports", inputs: { basePath: { classPropertyName: "basePath", publicName: "basePath", isSignal: true, isRequired: false, transformFunction: null }, openPattern: { classPropertyName: "openPattern", publicName: "openPattern", isSignal: true, isRequired: false, transformFunction: null }, createPattern: { classPropertyName: "createPattern", publicName: "createPattern", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { semantic: "semantic" }, viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "<fs-list\n    [config]=\"listConfig\"\n    #list>\n\n  <fs-list-column title=\"Name\">\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      <a [routerLink]=\"openLink(row)\">{{ row.name }}</a>\n    </ng-template>\n  </fs-list-column>\n\n  <fs-list-column title=\"Modified\">\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      <fs-date [date]=\"row.modifyDate\"></fs-date>\n    </ng-template>\n  </fs-list-column>\n\n</fs-list>\n", styles: ["a{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: FsDateModule }, { kind: "component", type: i1$4.FsDateComponent, selector: "fs-date", inputs: ["date", "format", "timezone"] }, { kind: "ngmodule", type: FsListModule }, { kind: "component", type: i1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines", "cellRowType"], outputs: ["filtersReady"] }, { kind: "directive", type: i1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i1.FsListCellDirective, selector: "[fs-list-cell],[fsListCell]", inputs: ["colspan", "align", "class", "fsListCell", "configTyping"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FsAiReportsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fs-ai-reports', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        FsDateModule,
+                        FsListModule,
+                        RouterLink,
+                    ], template: "<fs-list\n    [config]=\"listConfig\"\n    #list>\n\n  <fs-list-column title=\"Name\">\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      <a [routerLink]=\"openLink(row)\">{{ row.name }}</a>\n    </ng-template>\n  </fs-list-column>\n\n  <fs-list-column title=\"Modified\">\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      <fs-date [date]=\"row.modifyDate\"></fs-date>\n    </ng-template>\n  </fs-list-column>\n\n</fs-list>\n", styles: ["a{cursor:pointer}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { list: [{
+                type: ViewChild,
+                args: [FsListComponent]
+            }] } });
+
+// fs-filter query key for the runtime Frequency control (a render-layer bucket
+// override, not a filter group — so it's read straight off the query).
+const FREQUENCY_ITEM = 'frequency';
+// 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 by navigating — this component never picks one.
+class FsAiReportComponent {
+    // The report this view is focused on — supplied by the host from the route.
+    reportId = input(null);
+    // API base for the reports + chat endpoints; override to mount elsewhere.
+    basePath = input('reports');
+    // The report was deleted from its settings dialog — the host routes back to
+    // the listing.
+    deleted = output();
+    // The report was renamed (settings, or the agent) — the host can refresh a
+    // breadcrumb / document title.
+    renamed = output();
+    report = null;
+    editMode = false;
+    // The report-level filter toolbar (fs-filter). Rebuilt whenever the loaded
+    // report (and thus its groups) changes.
+    reportFilterConfig;
+    _split;
+    _chatPanel;
+    _reportData = inject(ReportData);
+    _filterState = inject(ReportFilterStateService);
+    _exportCollector = inject(ReportExportCollectorService);
+    _pptxService = inject(ReportPptxService);
+    _pdfService = inject(ReportPdfService);
+    _process = inject(FsProcess);
+    _dialog = inject(MatDialog);
+    _destroyRef = inject(DestroyRef);
+    _cdRef = inject(ChangeDetectorRef);
+    _zone = inject(NgZone);
+    constructor() {
+        // Point the shared data gateway at the configured base first (before any
+        // load below reads it).
+        effect(() => {
+            this._reportData.basePath = this.basePath();
+        });
+        // (Re)load whenever the host switches the report id.
+        effect(() => {
+            const reportId = this.reportId();
+            this.editMode = false;
+            if (reportId != null) {
+                this._loadReport(reportId);
+            }
+            else {
+                this.report = null;
+                this._buildReportConfig();
+                this._cdRef.markForCheck();
+            }
+        });
+        this._buildReportConfig();
+    }
+    toggleEditMode() {
+        this.editMode = !this.editMode;
+    }
+    // Report settings — name, page size, orientation, layout mode, delete. The
+    // dialog performs the delete itself; we react to what it reports back.
+    reportSettings() {
+        if (!this.report) {
+            return;
+        }
+        const reportId = this.report.id;
+        this._dialog.open(ReportSettingsComponent, {
+            data: { report: this.report },
+            width: '460px',
+        })
+            .afterClosed()
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe((result) => {
+            if (result?.action === 'deleted') {
+                this.deleted.emit(reportId);
+                return;
+            }
+            if (result?.action === 'saved') {
+                this._loadReport(reportId, true);
+            }
+        });
+    }
+    // Component settings — title, exact geometry, and the diagnostic views
+    // (SQL, config, filter wiring).
+    componentSettings(component) {
+        if (!this.report) {
+            return;
+        }
+        const reportId = this.report.id;
+        this._dialog.open(ComponentSettingsComponent, {
+            data: { report: this.report, component },
+            width: '640px',
+        })
+            .afterClosed()
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => {
+            // Always reload: filter add/remove/level changes persist immediately
+            // inside the dialog (no "save"), so the canvas + report bar must
+            // refresh however the dialog was closed.
+            this._loadReport(reportId);
+        });
+    }
+    // The canvas changed the report's structure (added a page) — re-fetch so the
+    // new page renders; the canvas lands the view on it.
+    onCanvasReportChanged() {
+        if (this.report) {
+            this._loadReport(this.report.id);
+        }
+    }
+    // Export the report to PowerPoint, entirely client-side (native editable
+    // charts; page = slide). The dock shows progress until the file saves.
+    exportPowerpoint() {
+        if (!this.report) {
+            return;
+        }
+        const report = this.report;
+        this._process.run('Exporting PowerPoint', this._exportCollector.collect(report)
+            .pipe(switchMap((collected) => from(this._pptxService.export(collected)))));
+    }
+    // Export to PDF, entirely client-side (offscreen ECharts at 3×; page = PDF page).
+    exportPdf() {
+        if (!this.report) {
+            return;
+        }
+        const report = this.report;
+        this._process.run('Exporting PDF', this._exportCollector.collect(report)
+            .pipe(switchMap((collected) => from(this._pdfService.export(collected)))));
+    }
+    // React to each chat turn (fs-chat handles the request + persistence); we
+    // only care about the report side effects this context's backend flags.
+    onChatResponse(response) {
+        const reportId = this.reportId();
+        if (reportId == null) {
+            return;
+        }
+        const reportResponse = response;
+        // A structural change or a rename both re-fetch the report (session filter
+        // values survive); a rename additionally notifies the host so it can
+        // refresh a breadcrumb / title.
+        if (reportResponse.reportChanged || reportResponse.reportRenamed) {
+            this._loadReport(reportId, !!reportResponse.reportRenamed);
+        }
+    }
+    // Drag the divider between the chat and canvas panes (pointer-capture loop
+    // outside Angular).
+    onResizeStart(event) {
+        event.preventDefault();
+        const handle = event.target;
+        handle.setPointerCapture(event.pointerId);
+        this._split.nativeElement.classList.add('resizing');
+        this._zone.runOutsideAngular(() => {
+            const move = (e) => this._resizeTo(e.clientX);
+            const end = () => {
+                handle.releasePointerCapture(event.pointerId);
+                handle.removeEventListener('pointermove', move);
+                handle.removeEventListener('pointerup', end);
+                handle.removeEventListener('pointercancel', end);
+                this._split.nativeElement.classList.remove('resizing');
+            };
+            handle.addEventListener('pointermove', move);
+            handle.addEventListener('pointerup', end);
+            handle.addEventListener('pointercancel', end);
+        });
+    }
+    _resizeTo(clientX) {
+        const rect = this._split.nativeElement.getBoundingClientRect();
+        if (rect.width === 0) {
+            return;
+        }
+        const ratio = (clientX - rect.left) / rect.width;
+        const clamped = Math.min(0.8, Math.max(0.2, ratio));
+        this._chatPanel.nativeElement.style.flexBasis = `${clamped * 100}%`;
+    }
+    _loadReport(reportId, emitRenamed = false) {
+        this._reportData.get(reportId)
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe((report) => {
+            this.report = report;
+            this._filterState.init(report);
+            this._buildReportConfig();
+            if (emitRenamed) {
+                this.renamed.emit(report);
+            }
+            this._cdRef.markForCheck();
+        });
+    }
+    // Report-level filter groups in their saved order — the ones that render in
+    // the toolbar (component-level groups render on their components).
+    _reportGroups() {
+        return (this.report?.filterGroups ?? [])
+            .filter((group) => group.level === 'report' || group.level === 'both')
+            .sort((a, b) => a.order - b.order);
+    }
+    // Whether the loaded report has any report-level filters OR a time-series
+    // chart (which earns the runtime Frequency control) — gates the toolbar.
+    get reportHasFilters() {
+        return this._reportGroups().length > 0 || this._hasTimeSeriesChart();
+    }
+    // fs-filter reads its config only once (at init). The template keys the
+    // toolbar fs-filter on this signature so it's recreated (and re-reads the
+    // rebuilt config) whenever the report-level filter set changes.
+    get reportFilterKey() {
+        return [
+            ...this._reportGroups().map((group) => `${group.id}:${group.level}:${group.label}`),
+            this._hasTimeSeriesChart() ? 'frequency' : '',
+        ].join('|');
+    }
+    // (Re)build the toolbar fs-filter config — report-level filter items, plus
+    // the runtime Frequency control when the report has a time-series chart.
+    _buildReportConfig() {
+        const reportId = this.report?.id ?? null;
+        const items = reportId
+            ? this._reportGroups().map((group) => filterItemForGroup(group, this._reportData, reportId, this._filterState.value(group.id)))
+            : [];
+        if (reportId && this._hasTimeSeriesChart()) {
+            items.push({
+                name: FREQUENCY_ITEM,
+                type: ItemType.Select,
+                label: 'Frequency',
+                multiple: false,
+                values: () => FREQUENCY_OPTIONS,
+                default: this._filterState.frequency() ?? undefined,
+            });
+        }
+        this.reportFilterConfig = {
+            // Never touch the URL or persist filter state — report filters are
+            // session-only, owned by ReportFilterStateService.
+            queryParam: false,
+            persist: false,
+            items,
+            change: (query) => {
+                for (const { groupId, value } of groupValuesFromQuery(query ?? {}, this._reportGroups())) {
+                    this._filterState.setValue(groupId, value);
+                }
+                // Frequency isn't a filter group — it's a render-layer bucket override.
+                this._filterState.setFrequency(query?.[FREQUENCY_ITEM] || null);
+            },
+        };
+    }
+    // The report has at least one time-series chart (x-axis is a time axis) — the
+    // only kind the Frequency control affects.
+    _hasTimeSeriesChart() {
+        return (this.report?.pages ?? []).some((page) => page.components.some((component) => component.type === 'chart' && component.config?.xAxis?.kind === 'time'));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FsAiReportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FsAiReportComponent, isStandalone: true, selector: "fs-ai-report", inputs: { reportId: { classPropertyName: "reportId", publicName: "reportId", isSignal: true, isRequired: false, transformFunction: null }, basePath: { classPropertyName: "basePath", publicName: "basePath", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleted: "deleted", renamed: "renamed" }, providers: [
+            // Session filter state is per-open-report, not app-global; the export
+            // services resolve filters through it, so they live at the same level.
+            ReportFilterStateService,
+            ReportExportCollectorService,
+            ReportPptxService,
+            ReportPdfService,
+            // Tree-shaken ECharts core + the 'report' house theme, loaded lazily.
+            provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-m2yVum4J.mjs').then((module) => module.default) }),
+        ], viewQueries: [{ propertyName: "_split", first: true, predicate: ["split"], descendants: true, static: true }, { propertyName: "_chatPanel", first: true, predicate: ["chatPanel"], descendants: true, read: ElementRef, static: true }], 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      <button\n          mat-icon-button\n          type=\"button\"\n          [matTooltip]=\"editMode ? 'Done' : 'Edit layout'\"\n          (click)=\"toggleEditMode()\">\n        <mat-icon>{{ editMode ? 'lock' : 'open_with' }}</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      </fs-menu>\n\n      <button\n          mat-icon-button\n          type=\"button\"\n          matTooltip=\"Report settings\"\n          (click)=\"reportSettings()\">\n        <mat-icon>settings</mat-icon>\n      </button>\n    }\n  </div>\n\n  <div\n      #split\n      class=\"fs-ai-report__split fs-row.align-start\">\n    <fs-ai-chat\n        #chatPanel\n        class=\"chat\"\n        [basePath]=\"basePath()\"\n        [requestData]=\"{ reportId: reportId() }\"\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        <!-- Report-level filters only (the report's actions live in the header\n             above). fs-filter reads its config once at init, so it's keyed on\n             the 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 [config]=\"reportFilterConfig\"></fs-filter>\n          }\n        }\n        <app-report-canvas\n            [report]=\"report\"\n            [editMode]=\"editMode\"\n            (componentSettings)=\"componentSettings($event)\"\n            (reportChanged)=\"onCanvasReportChanged()\"\n            (editDone)=\"toggleEditMode()\">\n        </app-report-canvas>\n      }\n    </div>\n  </div>\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:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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 .viewer fs-filter{flex:0 0 auto;margin-top:10px;margin-bottom:0}.fs-ai-report .viewer ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.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:1px;background:#0000001f;transition:width .12s ease,background-color .12s ease}.fs-ai-report .resizer:hover:before{width:3px;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{width:3px;background:var(--brand-primary-color)}.fs-ai-report__split.resizing .chat,.fs-ai-report__split.resizing .viewer{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: FsFilterModule }, { kind: "component", type: i2.FilterComponent, selector: "fs-filter", inputs: ["config"], outputs: ["closed", "opened", "ready"] }, { kind: "ngmodule", type: FsMenuModule }, { kind: "component", type: i2$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", "introMessage"], outputs: ["response"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.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"], outputs: ["componentSettings", "reportChanged", "editDone"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FsAiReportComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fs-ai-report', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], providers: [
+                        // Session filter state is per-open-report, not app-global; the export
+                        // services resolve filters through it, so they live at the same level.
+                        ReportFilterStateService,
+                        ReportExportCollectorService,
+                        ReportPptxService,
+                        ReportPdfService,
+                        // Tree-shaken ECharts core + the 'report' house theme, loaded lazily.
+                        provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-m2yVum4J.mjs').then((module) => module.default) }),
+                    ], imports: [
+                        FsFilterModule,
+                        FsMenuModule,
+                        FsAiChatComponent,
+                        MatButtonModule,
+                        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      <button\n          mat-icon-button\n          type=\"button\"\n          [matTooltip]=\"editMode ? 'Done' : 'Edit layout'\"\n          (click)=\"toggleEditMode()\">\n        <mat-icon>{{ editMode ? 'lock' : 'open_with' }}</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      </fs-menu>\n\n      <button\n          mat-icon-button\n          type=\"button\"\n          matTooltip=\"Report settings\"\n          (click)=\"reportSettings()\">\n        <mat-icon>settings</mat-icon>\n      </button>\n    }\n  </div>\n\n  <div\n      #split\n      class=\"fs-ai-report__split fs-row.align-start\">\n    <fs-ai-chat\n        #chatPanel\n        class=\"chat\"\n        [basePath]=\"basePath()\"\n        [requestData]=\"{ reportId: reportId() }\"\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        <!-- Report-level filters only (the report's actions live in the header\n             above). fs-filter reads its config once at init, so it's keyed on\n             the 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 [config]=\"reportFilterConfig\"></fs-filter>\n          }\n        }\n        <app-report-canvas\n            [report]=\"report\"\n            [editMode]=\"editMode\"\n            (componentSettings)=\"componentSettings($event)\"\n            (reportChanged)=\"onCanvasReportChanged()\"\n            (editDone)=\"toggleEditMode()\">\n        </app-report-canvas>\n      }\n    </div>\n  </div>\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:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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 .viewer fs-filter{flex:0 0 auto;margin-top:10px;margin-bottom:0}.fs-ai-report .viewer ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.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:1px;background:#0000001f;transition:width .12s ease,background-color .12s ease}.fs-ai-report .resizer:hover:before{width:3px;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{width:3px;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 }]
+            }] } });
+
 /*
  * Public API Surface of @firestitch/reports
  *
@@ -3124,5 +3640,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { FREQUENCY_OPTIONS as F, REPORT_CHART_COLORS_CSS as R, ReportComponent as a, ReportData as b, ReportService as c, ReportFilterStateService as d };
-//# sourceMappingURL=firestitch-report-firestitch-report-DJ3o7KId.mjs.map
+export { FsAiReportsComponent as F, REPORT_CHART_COLORS_CSS as R, ReportComponent as a, FsAiReportComponent as b, ReportData as c, ReportService as d, ReportFilterStateService as e, FREQUENCY_OPTIONS as f };
+//# sourceMappingURL=firestitch-report-firestitch-report-BclPOljK.mjs.map