@firestitch/report 18.21.3 → 18.21.5

package/fesm2022/{firestitch-report-firestitch-report-CfvBTMrG.mjs → firestitch-report-firestitch-report-DWP3aywv.mjs}

@@ -3687,6 +3687,32 @@ const REPORT_DATA_LABEL_FONT_SIZE = 10;
 // .small text or the body size.
 const REPORT_KPI_VALUE_FONT_SIZE = 34;
 
+// The words a chart's or a list's row value is shown in, when the server
+// labels its column (ComponentData.valueLabels): an enum column's
+// "consumerGoods" reads "Consumer Goods" on the axis, the legend, the
+// tooltip, the list cell, the cross-tab heading and in both exports. Rows
+// keep the stored value, which filters, sorts and clicks still use. Pure, so
+// the screen and the exports word a value alike.
+// Each column's entries as a lookup by value text, built once per entries
+// array the data carries: a list asks once per cell, a chart once per
+// category.
+const LOOKUPS = new WeakMap();
+// What `value`, a row value of `column`, reads as: the label of the entry
+// whose value matches String(value). null when the column has no labels, the
+// value has no entry or is blank, so it shows as it always has.
+function valueLabel(labels, column, value) {
+    const entries = column ? labels?.[column] : undefined;
+    if (!entries?.length || value === null || value === undefined) {
+        return null;
+    }
+    let lookup = LOOKUPS.get(entries);
+    if (!lookup) {
+        lookup = new Map(entries.map((entry) => [String(entry.value), entry.label]));
+        LOOKUPS.set(entries, lookup);
+    }
+    return lookup.get(String(value)) ?? null;
+}
+
 // Room for an axis title. ECharts 5's containLabel keeps the TICK labels inside
 // the grid but not the axis name, so without this a vertical chart's category
 // title runs off the bottom edge or under a bottom legend, and its value title
@@ -3838,7 +3864,7 @@ function extractChartSeries(component, data) {
     const { xColumn, groupColumn } = chartColumns(config, data);
     const measures = chartMeasures(config, data);
     const rawCategories = uniqueValues(data.rows, xColumn);
-    const categories = rawCategories.map((category) => String(category ?? '—'));
+    const categories = rawCategories.map((category) => dimensionText(data, xColumn, category));
     const series = [];
     const rawGroups = groupColumn ? uniqueValues(data.rows, groupColumn) : [];
     if (groupColumn) {
@@ -3846,7 +3872,7 @@ function extractChartSeries(component, data) {
         const measure = measures[0];
         for (const groupValue of rawGroups) {
             series.push({
-                name: String(groupValue ?? '—'),
+                name: dimensionText(data, groupColumn, groupValue),
                 values: categoryValues(data.rows, xColumn, rawCategories, measure.column, (row) => row[groupColumn] === groupValue),
                 type: measure.type,
                 measure,
@@ -3867,6 +3893,13 @@ function extractChartSeries(component, data) {
     }
     return { categories, series, rawCategories, rawGroups };
 }
+// A category or a split value as the chart writes it: its label when the
+// server labels its column, else the value as it came, a blank one as '—'. A
+// time column is never labeled, so its period starts stay raw for the axis
+// to format.
+function dimensionText(data, column, value) {
+    return valueLabel(data.valueLabels, column, value) ?? String(value ?? '—');
+}
 // The column a chart's categories come from, and the one that splits its
 // first measure into a series per value, if any. colorBy emits one series per
 // category too (so each bar carries its own color + legend entry), but the
@@ -5535,10 +5568,14 @@ function seriesTooltip(measure, context) {
         valueFormatter: (value) => formatNumber(Array.isArray(value) ? value[0] : value, measure, context),
     };
 }
+// A pie's slices are named by categoryLineLabels(), so a monthly pie's legend
+// and tooltip read the month ("August"), never its period start
+// ("2026-08-01").
 function buildPieOption(component, data, donut, context) {
     const config = component.config;
     const extracted = extractChartSeries(component, data);
     const values = extracted.series[0]?.values ?? [];
+    const names = categoryLineLabels(extracted.categories, config, data, context.locale);
     const legendPosition = resolveLegendPosition(config, extracted.series.length);
     return {
         tooltip: { trigger: 'item' },
@@ -5550,8 +5587,8 @@ function buildPieOption(component, data, donut, context) {
                 center: pieCenter(legendPosition),
                 tooltip: seriesTooltip(extracted.series[0]?.measure, context),
                 label: { show: false },
-                data: extracted.categories.map((category, index) => ({
-                    name: category,
+                data: names.map((name, index) => ({
+                    name,
                     value: values[index] ?? 0,
                 })),
             },
@@ -5706,21 +5743,59 @@ function formatPeriodLabel(value, granularity, multiYear, locale, dateLabel = Re
     }
     return multiYear && periodYearApart(granularity, dateLabel) ? `${parts.primary} ${parts.year}` : parts.primary;
 }
+// A chart's categories as one-line labels, for what writes a category on a
+// single line: a pie's slices (legend, tooltip, click) and the PowerPoint
+// export's axis. On a bucketed time axis each period start reads as the axis
+// writes it, in the report's locale and the axis's date label style, a short
+// label taking its year inline only when the categories span years; any
+// other category as it is.
+function categoryLineLabels(categories, config, data, locale) {
+    const granularity = bucketGranularity(data);
+    if (!granularity) {
+        return categories;
+    }
+    const multiYear = spansMultipleYears(categories);
+    const dateLabel = chartDateLabel(config);
+    return categories.map((category) => formatPeriodLabel(category, granularity, multiYear, locale, dateLabel));
+}
+// Between a cross-tab cell column's pivot value and its measure when the grid
+// has several measures ('2026-01-01 — revenue'), as the server names the
+// column (ReportListPivot::getCellColumn). With one measure the column is the
+// pivot value alone.
+const PIVOT_MEASURE_SEPARATOR = ' — ';
 // A cross-tab's column headings, the one rule the grid and the PDF/PowerPoint
 // exports share. The first is the row key and keeps its authored label; the
-// rest are pivot VALUES. When the pivot axis is a time dimension the server
-// sends the grain it bucketed at, so a period-start like "2026-01-01" reads
-// "January 2026" ('janvier 2026' in fr-CA), as the chart's x-axis labels it.
+// rest are pivot VALUES, each read as the server labels the pivot column (an
+// enum's "consumerGoods" heads "Consumer Goods"). When the pivot axis is a
+// time dimension the server sends the grain it bucketed at, so a
+// period-start like "2026-01-01" reads "January 2026" ('janvier 2026' in
+// fr-CA), as the chart's x-axis labels it. A grid of several measures keeps
+// each column's measure after its value.
 function pivotHeadings(config, data, locale) {
     const columns = data.columns ?? [];
-    const multiYear = spansMultipleYears(columns);
+    const severalMeasures = new Set(Object.values(data.cellMeasures ?? {})).size > 1;
+    const cells = columns.slice(1)
+        .map((column) => pivotCellParts(column, severalMeasures ? data.cellMeasures?.[column] : undefined));
+    const multiYear = spansMultipleYears(cells.map((cell) => cell.value));
     return columns.map((column, index) => {
         if (index === 0) {
             return config.rowBy?.label || column;
         }
-        return data.granularity ? formatPeriodLabel(column, data.granularity, multiYear, locale) : column;
+        const { value, measure } = cells[index - 1];
+        const heading = valueLabel(data.valueLabels, config.pivotBy?.column, value)
+            ?? (data.granularity ? formatPeriodLabel(value, data.granularity, multiYear, locale) : value);
+        return `${heading}${measure}`;
     });
 }
+// A cross-tab cell column split into the pivot value it is named by and the
+// measure part after it ('' with one measure, or when `measure` does not end
+// the column).
+function pivotCellParts(column, measure) {
+    const suffix = measure === undefined ? '' : `${PIVOT_MEASURE_SEPARATOR}${measure}`;
+    return suffix && column.endsWith(suffix)
+        ? { value: column.slice(0, -suffix.length), measure: suffix }
+        : { value: column, measure: '' };
+}
 // A cross-tab's columns as the grid and the exports draw them: each headed by
 // pivotHeadings(), and every pivot-value column formatted by the one
 // config.cellFormat. The row key column stays as it came. `numeric` marks the
@@ -9375,9 +9450,10 @@ function chartPoints(component, data, context, extracted, dataIndex, series) {
     }
     return points;
 }
-// The category as the rows hold it and as the axis wrote it. On a time axis
-// it also gives the period's first day and the grain, and reads as the
-// tooltip names it ('January 2026'); a pie writes its slices as they come.
+// The category as the rows hold it and as the axis wrote it (a labeled
+// column's label). On a time axis it also gives the period's first day and
+// the grain, and reads as the tooltip names it ('January 2026'); a pie's as
+// its legend names the slice (categoryLineLabels).
 function categoryPoint(config, data, context, extracted, column, dataIndex) {
     const raw = extracted.rawCategories[dataIndex];
     const label = extracted.categories[dataIndex];
@@ -9390,7 +9466,9 @@ function categoryPoint(config, data, context, extracted, column, dataIndex) {
     return {
         column,
         raw,
-        label: pie ? label : formatPeriodLabel(String(raw), grain, true, context.locale, chartDateLabel(config)),
+        label: pie
+            ? categoryLineLabels(extracted.categories, config, data, context.locale)[dataIndex] ?? label
+            : formatPeriodLabel(String(raw), grain, true, context.locale, chartDateLabel(config)),
         period,
         grain,
     };
@@ -10431,6 +10509,12 @@ class ComponentListComponent {
     // the note above the list, the header tooltips and the output cells; null
     // until it arrives, and empty of every key for a list that has none.
     noteData = signal(null);
+    // What each stored value of a labeled column reads as (an enum's, a
+    // cross-tab's row key's), from the latest page 1: its cells show the label
+    // (valueLabel), while the rows keep the value that sorts and filters. null
+    // until it arrives, and for a list with none.
+    valueLabels = signal(null);
+    valueLabel = valueLabel;
     // How many rows the list shows (load more appends) out of how many its
     // filters keep. A cross-tab counts grid rows.
     rowCount = signal(null);
@@ -10600,6 +10684,7 @@ class ComponentListComponent {
                 this.totals.set(data.totals ?? null);
                 this.totalsNote.set(data.totalsNote ?? null);
                 this.noteData.set(this._noteData(data));
+                this.valueLabels.set(data.valueLabels ?? null);
                 this._alignOutputColumns(data);
             }
             // The server's page size when it sends one (it clamps the request),
@@ -10700,7 +10785,7 @@ class ComponentListComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ComponentListComponent, isStandalone: true, selector: "app-report-component-list", inputs: { reportId: { classPropertyName: "reportId", publicName: "reportId", isSignal: true, isRequired: true, transformFunction: null }, component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "listComponent", first: true, predicate: FsListComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (truncated()) {\n  <div class=\"pivot-truncated\">\n    This grid was built from a partial result, so some columns or values may be missing. Narrow it with a filter.\n  </div>\n}\n\n<!-- The windows a comparison compares, and why it reads as it does. A\n     windowed column's own notes are in its header's tooltip. -->\n<app-report-component-note\n  [data]=\"noteData()\"\n  [windowNotes]=\"false\">\n</app-report-component-note>\n\n<!-- fs-list reads a column's footer template once, as a direct child of\n     fs-list-column, so a list with totals renders its columns in a branch of\n     their own rather than wrapping the footer in an @if. Its header template too,\n     which every column carries: an output column's tooltip says what it holds.\n     Columns are tracked by alignment as well as name, since fs-list reads a\n     column's alignment only when it builds the column. -->\n<fs-list\n  [config]=\"listConfig\"\n  [class.report-totals-empty]=\"!totals()\">\n  @if (showTotals()) {\n    @for (column of columns(); track column.column + ':' + column.numeric) {\n      <fs-list-column\n        [name]=\"column.column\"\n        [title]=\"column.label || column.column\"\n        [show]=\"!hidden().has(column.column)\"\n        [sortable]=\"!pivoted() || $first\"\n        [align]=\"column.numeric ? 'right' : 'left'\"\n        [class]=\"columnClasses(column, $index, pinned())\">\n        <ng-template fs-list-header>\n          <ng-container\n            [ngTemplateOutlet]=\"headerTpl\"\n            [ngTemplateOutletContext]=\"{ column: column }\">\n          </ng-container>\n        </ng-template>\n        <ng-template\n          fs-list-cell\n          let-row=\"row\">\n          <ng-container\n            [ngTemplateOutlet]=\"cellTpl\"\n            [ngTemplateOutletContext]=\"{ $implicit: row[column.column], row: row, column: column }\">\n          </ng-container>\n        </ng-template>\n        <ng-template fs-list-footer>\n          @if (totals()?.[column.column] !== undefined) {\n            <ng-container\n              [ngTemplateOutlet]=\"cellTpl\"\n              [ngTemplateOutletContext]=\"{ $implicit: totals()?.[column.column], row: totals(), column: column }\">\n            </ng-container>\n          } @else if (column.column === totalsLabelColumn()) {\n            {{ totalLabel }}\n          }\n        </ng-template>\n      </fs-list-column>\n    }\n  } @else {\n    @for (column of columns(); track column.column + ':' + column.numeric) {\n      <fs-list-column\n        [name]=\"column.column\"\n        [title]=\"column.label || column.column\"\n        [show]=\"!hidden().has(column.column)\"\n        [sortable]=\"!pivoted() || $first\"\n        [align]=\"column.numeric ? 'right' : 'left'\"\n        [class]=\"columnClasses(column, $index, pinned())\">\n        <ng-template fs-list-header>\n          <ng-container\n            [ngTemplateOutlet]=\"headerTpl\"\n            [ngTemplateOutletContext]=\"{ column: column }\">\n          </ng-container>\n        </ng-template>\n        <ng-template\n          fs-list-cell\n          let-row=\"row\">\n          <ng-container\n            [ngTemplateOutlet]=\"cellTpl\"\n            [ngTemplateOutletContext]=\"{ $implicit: row[column.column], row: row, column: column }\">\n          </ng-container>\n        </ng-template>\n      </fs-list-column>\n    }\n  }\n</fs-list>\n\n@if (caption()) {\n  <div class=\"list-caption small\">\n    {{ caption() }}\n  </div>\n}\n\n<!-- A column's heading, with what an output column holds as its tooltip (an\n     empty one never shows). -->\n<ng-template\n  #headerTpl\n  let-column=\"column\">\n  <span [matTooltip]=\"columnNotes()[column.column] ?? ''\">{{ column.label || column.column }}</span>\n</ng-template>\n\n<!-- One cell, in the body and the totals row alike: an output column by what\n     it holds (its row gives a change its prior), a date column as a day in the\n     report's zone and locale, any other through its number format. -->\n<ng-template\n  #cellTpl\n  let-value\n  let-row=\"row\"\n  let-column=\"column\">\n  @if (outputColumns()[column.column]; as output) {\n    @if (row | fsReportOutput: column : output : formatContext(); as cell) {\n      <span [attr.title]=\"cell.title\">{{ cell.text }}</span>\n    }\n  } @else if (column.format === ReportListColumnFormat.Date) {\n    {{ value | fsReportDate: timezone() : formatContext().locale }}\n  } @else {\n    {{ value | fsReportNumber: column : formatContext() }}\n  }\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%;min-height:0}:host ::ng-deep fs-list{display:flex;flex-direction:column;flex:1 1 auto;height:auto;min-height:0}:host ::ng-deep fs-list .fs-list-container{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;height:100%}:host ::ng-deep fs-list .fs-list-header-container{flex:0 0 auto}:host ::ng-deep fs-list .fs-list-container .fs-list-table-container{flex:1 1 auto;min-height:0;overflow-y:auto!important}:host ::ng-deep fs-list .fs-list-table thead th{position:sticky;top:0;z-index:1;background-color:#fff}:host ::ng-deep fs-list .fs-list-table tfoot td{position:sticky;bottom:0;z-index:1;background-color:#fff;font-weight:500;box-shadow:inset 0 1px #0000001f}:host ::ng-deep fs-list.report-totals-empty tfoot{display:none}:host ::ng-deep fs-list .report-pinned{position:sticky;left:var(--report-pin-left, 0px);z-index:1;background-color:#fff}:host ::ng-deep fs-list .report-pin-0{--report-pin-left: var(--report-pin-left-0, 0px)}:host ::ng-deep fs-list .report-pin-1{--report-pin-left: var(--report-pin-left-1, 0px)}:host ::ng-deep fs-list .report-pin-2{--report-pin-left: var(--report-pin-left-2, 0px)}:host ::ng-deep fs-list .report-pin-last{box-shadow:inset -1px 0 #0000001f}:host ::ng-deep fs-list .fs-list-table thead th.report-pinned{z-index:3}:host ::ng-deep fs-list .fs-list-table tfoot td.report-pinned{z-index:2}:host ::ng-deep fs-list .fs-list-table tfoot td.report-pin-last{box-shadow:inset -1px 0 #0000001f,inset 0 1px #0000001f}:host ::ng-deep fs-list th.report-nowrap,:host ::ng-deep fs-list td.report-nowrap{white-space:nowrap}:host ::ng-deep fs-list fs-list-pagination{flex:0 0 auto}:host ::ng-deep fs-list .fs-list-load-more{position:sticky;bottom:0;background-color:#fff}:host ::ng-deep fs-list .fs-list-load-more button{margin-top:0}.list-caption{flex:0 0 auto;padding-top:4px}.pivot-truncated{flex:0 0 auto;padding:8px 12px;margin-bottom:8px;border-radius:4px;background-color:#fff4e5;color:#663c00}\n"], dependencies: [{ kind: "component", type: ComponentNoteComponent, selector: "app-report-component-note", inputs: ["data", "windows", "windowDescriptions", "windowNotes"] }, { kind: "ngmodule", type: FsListModule }, { kind: "component", type: i1$4.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines", "cellRowType"], outputs: ["filtersReady"] }, { kind: "directive", type: i1$4.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i1$4.FsListCellDirective, selector: "[fs-list-cell],[fsListCell]", inputs: ["colspan", "align", "class", "fsListCell", "configTyping"] }, { kind: "directive", type: i1$4.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: i1$4.FsListFooterDirective, selector: "[fs-list-footer]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: ReportDatePipe, name: "fsReportDate" }, { kind: "pipe", type: ReportNumberPipe, name: "fsReportNumber" }, { kind: "pipe", type: ReportOutputPipe, name: "fsReportOutput" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ComponentListComponent, isStandalone: true, selector: "app-report-component-list", inputs: { reportId: { classPropertyName: "reportId", publicName: "reportId", isSignal: true, isRequired: true, transformFunction: null }, component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "listComponent", first: true, predicate: FsListComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (truncated()) {\n  <div class=\"pivot-truncated\">\n    This grid was built from a partial result, so some columns or values may be missing. Narrow it with a filter.\n  </div>\n}\n\n<!-- The windows a comparison compares, and why it reads as it does. A\n     windowed column's own notes are in its header's tooltip. -->\n<app-report-component-note\n  [data]=\"noteData()\"\n  [windowNotes]=\"false\">\n</app-report-component-note>\n\n<!-- fs-list reads a column's footer template once, as a direct child of\n     fs-list-column, so a list with totals renders its columns in a branch of\n     their own rather than wrapping the footer in an @if. Its header template too,\n     which every column carries: an output column's tooltip says what it holds.\n     Columns are tracked by alignment as well as name, since fs-list reads a\n     column's alignment only when it builds the column. -->\n<fs-list\n  [config]=\"listConfig\"\n  [class.report-totals-empty]=\"!totals()\">\n  @if (showTotals()) {\n    @for (column of columns(); track column.column + ':' + column.numeric) {\n      <fs-list-column\n        [name]=\"column.column\"\n        [title]=\"column.label || column.column\"\n        [show]=\"!hidden().has(column.column)\"\n        [sortable]=\"!pivoted() || $first\"\n        [align]=\"column.numeric ? 'right' : 'left'\"\n        [class]=\"columnClasses(column, $index, pinned())\">\n        <ng-template fs-list-header>\n          <ng-container\n            [ngTemplateOutlet]=\"headerTpl\"\n            [ngTemplateOutletContext]=\"{ column: column }\">\n          </ng-container>\n        </ng-template>\n        <ng-template\n          fs-list-cell\n          let-row=\"row\">\n          <ng-container\n            [ngTemplateOutlet]=\"cellTpl\"\n            [ngTemplateOutletContext]=\"{ $implicit: row[column.column], row: row, column: column }\">\n          </ng-container>\n        </ng-template>\n        <ng-template fs-list-footer>\n          @if (totals()?.[column.column] !== undefined) {\n            <ng-container\n              [ngTemplateOutlet]=\"cellTpl\"\n              [ngTemplateOutletContext]=\"{ $implicit: totals()?.[column.column], row: totals(), column: column }\">\n            </ng-container>\n          } @else if (column.column === totalsLabelColumn()) {\n            {{ totalLabel }}\n          }\n        </ng-template>\n      </fs-list-column>\n    }\n  } @else {\n    @for (column of columns(); track column.column + ':' + column.numeric) {\n      <fs-list-column\n        [name]=\"column.column\"\n        [title]=\"column.label || column.column\"\n        [show]=\"!hidden().has(column.column)\"\n        [sortable]=\"!pivoted() || $first\"\n        [align]=\"column.numeric ? 'right' : 'left'\"\n        [class]=\"columnClasses(column, $index, pinned())\">\n        <ng-template fs-list-header>\n          <ng-container\n            [ngTemplateOutlet]=\"headerTpl\"\n            [ngTemplateOutletContext]=\"{ column: column }\">\n          </ng-container>\n        </ng-template>\n        <ng-template\n          fs-list-cell\n          let-row=\"row\">\n          <ng-container\n            [ngTemplateOutlet]=\"cellTpl\"\n            [ngTemplateOutletContext]=\"{ $implicit: row[column.column], row: row, column: column }\">\n          </ng-container>\n        </ng-template>\n      </fs-list-column>\n    }\n  }\n</fs-list>\n\n@if (caption()) {\n  <div class=\"list-caption small\">\n    {{ caption() }}\n  </div>\n}\n\n<!-- A column's heading, with what an output column holds as its tooltip (an\n     empty one never shows). -->\n<ng-template\n  #headerTpl\n  let-column=\"column\">\n  <span [matTooltip]=\"columnNotes()[column.column] ?? ''\">{{ column.label || column.column }}</span>\n</ng-template>\n\n<!-- One cell, in the body and the totals row alike: an output column by what\n     it holds (its row gives a change its prior), a date column as a day in the\n     report's zone and locale, a labeled column's value as its label, any other\n     through its number format. -->\n<ng-template\n  #cellTpl\n  let-value\n  let-row=\"row\"\n  let-column=\"column\">\n  @if (outputColumns()[column.column]; as output) {\n    @if (row | fsReportOutput: column : output : formatContext(); as cell) {\n      <span [attr.title]=\"cell.title\">{{ cell.text }}</span>\n    }\n  } @else if (column.format === ReportListColumnFormat.Date) {\n    {{ value | fsReportDate: timezone() : formatContext().locale }}\n  } @else {\n    {{ valueLabel(valueLabels(), column.column, value) ?? (value | fsReportNumber: column : formatContext()) }}\n  }\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%;min-height:0}:host ::ng-deep fs-list{display:flex;flex-direction:column;flex:1 1 auto;height:auto;min-height:0}:host ::ng-deep fs-list .fs-list-container{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;height:100%}:host ::ng-deep fs-list .fs-list-header-container{flex:0 0 auto}:host ::ng-deep fs-list .fs-list-container .fs-list-table-container{flex:1 1 auto;min-height:0;overflow-y:auto!important}:host ::ng-deep fs-list .fs-list-table thead th{position:sticky;top:0;z-index:1;background-color:#fff}:host ::ng-deep fs-list .fs-list-table tfoot td{position:sticky;bottom:0;z-index:1;background-color:#fff;font-weight:500;box-shadow:inset 0 1px #0000001f}:host ::ng-deep fs-list.report-totals-empty tfoot{display:none}:host ::ng-deep fs-list .report-pinned{position:sticky;left:var(--report-pin-left, 0px);z-index:1;background-color:#fff}:host ::ng-deep fs-list .report-pin-0{--report-pin-left: var(--report-pin-left-0, 0px)}:host ::ng-deep fs-list .report-pin-1{--report-pin-left: var(--report-pin-left-1, 0px)}:host ::ng-deep fs-list .report-pin-2{--report-pin-left: var(--report-pin-left-2, 0px)}:host ::ng-deep fs-list .report-pin-last{box-shadow:inset -1px 0 #0000001f}:host ::ng-deep fs-list .fs-list-table thead th.report-pinned{z-index:3}:host ::ng-deep fs-list .fs-list-table tfoot td.report-pinned{z-index:2}:host ::ng-deep fs-list .fs-list-table tfoot td.report-pin-last{box-shadow:inset -1px 0 #0000001f,inset 0 1px #0000001f}:host ::ng-deep fs-list th.report-nowrap,:host ::ng-deep fs-list td.report-nowrap{white-space:nowrap}:host ::ng-deep fs-list fs-list-pagination{flex:0 0 auto}:host ::ng-deep fs-list .fs-list-load-more{position:sticky;bottom:0;background-color:#fff}:host ::ng-deep fs-list .fs-list-load-more button{margin-top:0}.list-caption{flex:0 0 auto;padding-top:4px}.pivot-truncated{flex:0 0 auto;padding:8px 12px;margin-bottom:8px;border-radius:4px;background-color:#fff4e5;color:#663c00}\n"], dependencies: [{ kind: "component", type: ComponentNoteComponent, selector: "app-report-component-note", inputs: ["data", "windows", "windowDescriptions", "windowNotes"] }, { kind: "ngmodule", type: FsListModule }, { kind: "component", type: i1$4.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines", "cellRowType"], outputs: ["filtersReady"] }, { kind: "directive", type: i1$4.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i1$4.FsListCellDirective, selector: "[fs-list-cell],[fsListCell]", inputs: ["colspan", "align", "class", "fsListCell", "configTyping"] }, { kind: "directive", type: i1$4.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: i1$4.FsListFooterDirective, selector: "[fs-list-footer]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: ReportDatePipe, name: "fsReportDate" }, { kind: "pipe", type: ReportNumberPipe, name: "fsReportNumber" }, { kind: "pipe", type: ReportOutputPipe, name: "fsReportOutput" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentListComponent, decorators: [{
             type: Component,
@@ -10712,7 +10797,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         ReportDatePipe,
                         ReportNumberPipe,
                         ReportOutputPipe,
-                    ], template: "@if (truncated()) {\n  <div class=\"pivot-truncated\">\n    This grid was built from a partial result, so some columns or values may be missing. Narrow it with a filter.\n  </div>\n}\n\n<!-- The windows a comparison compares, and why it reads as it does. A\n     windowed column's own notes are in its header's tooltip. -->\n<app-report-component-note\n  [data]=\"noteData()\"\n  [windowNotes]=\"false\">\n</app-report-component-note>\n\n<!-- fs-list reads a column's footer template once, as a direct child of\n     fs-list-column, so a list with totals renders its columns in a branch of\n     their own rather than wrapping the footer in an @if. Its header template too,\n     which every column carries: an output column's tooltip says what it holds.\n     Columns are tracked by alignment as well as name, since fs-list reads a\n     column's alignment only when it builds the column. -->\n<fs-list\n  [config]=\"listConfig\"\n  [class.report-totals-empty]=\"!totals()\">\n  @if (showTotals()) {\n    @for (column of columns(); track column.column + ':' + column.numeric) {\n      <fs-list-column\n        [name]=\"column.column\"\n        [title]=\"column.label || column.column\"\n        [show]=\"!hidden().has(column.column)\"\n        [sortable]=\"!pivoted() || $first\"\n        [align]=\"column.numeric ? 'right' : 'left'\"\n        [class]=\"columnClasses(column, $index, pinned())\">\n        <ng-template fs-list-header>\n          <ng-container\n            [ngTemplateOutlet]=\"headerTpl\"\n            [ngTemplateOutletContext]=\"{ column: column }\">\n          </ng-container>\n        </ng-template>\n        <ng-template\n          fs-list-cell\n          let-row=\"row\">\n          <ng-container\n            [ngTemplateOutlet]=\"cellTpl\"\n            [ngTemplateOutletContext]=\"{ $implicit: row[column.column], row: row, column: column }\">\n          </ng-container>\n        </ng-template>\n        <ng-template fs-list-footer>\n          @if (totals()?.[column.column] !== undefined) {\n            <ng-container\n              [ngTemplateOutlet]=\"cellTpl\"\n              [ngTemplateOutletContext]=\"{ $implicit: totals()?.[column.column], row: totals(), column: column }\">\n            </ng-container>\n          } @else if (column.column === totalsLabelColumn()) {\n            {{ totalLabel }}\n          }\n        </ng-template>\n      </fs-list-column>\n    }\n  } @else {\n    @for (column of columns(); track column.column + ':' + column.numeric) {\n      <fs-list-column\n        [name]=\"column.column\"\n        [title]=\"column.label || column.column\"\n        [show]=\"!hidden().has(column.column)\"\n        [sortable]=\"!pivoted() || $first\"\n        [align]=\"column.numeric ? 'right' : 'left'\"\n        [class]=\"columnClasses(column, $index, pinned())\">\n        <ng-template fs-list-header>\n          <ng-container\n            [ngTemplateOutlet]=\"headerTpl\"\n            [ngTemplateOutletContext]=\"{ column: column }\">\n          </ng-container>\n        </ng-template>\n        <ng-template\n          fs-list-cell\n          let-row=\"row\">\n          <ng-container\n            [ngTemplateOutlet]=\"cellTpl\"\n            [ngTemplateOutletContext]=\"{ $implicit: row[column.column], row: row, column: column }\">\n          </ng-container>\n        </ng-template>\n      </fs-list-column>\n    }\n  }\n</fs-list>\n\n@if (caption()) {\n  <div class=\"list-caption small\">\n    {{ caption() }}\n  </div>\n}\n\n<!-- A column's heading, with what an output column holds as its tooltip (an\n     empty one never shows). -->\n<ng-template\n  #headerTpl\n  let-column=\"column\">\n  <span [matTooltip]=\"columnNotes()[column.column] ?? ''\">{{ column.label || column.column }}</span>\n</ng-template>\n\n<!-- One cell, in the body and the totals row alike: an output column by what\n     it holds (its row gives a change its prior), a date column as a day in the\n     report's zone and locale, any other through its number format. -->\n<ng-template\n  #cellTpl\n  let-value\n  let-row=\"row\"\n  let-column=\"column\">\n  @if (outputColumns()[column.column]; as output) {\n    @if (row | fsReportOutput: column : output : formatContext(); as cell) {\n      <span [attr.title]=\"cell.title\">{{ cell.text }}</span>\n    }\n  } @else if (column.format === ReportListColumnFormat.Date) {\n    {{ value | fsReportDate: timezone() : formatContext().locale }}\n  } @else {\n    {{ value | fsReportNumber: column : formatContext() }}\n  }\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%;min-height:0}:host ::ng-deep fs-list{display:flex;flex-direction:column;flex:1 1 auto;height:auto;min-height:0}:host ::ng-deep fs-list .fs-list-container{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;height:100%}:host ::ng-deep fs-list .fs-list-header-container{flex:0 0 auto}:host ::ng-deep fs-list .fs-list-container .fs-list-table-container{flex:1 1 auto;min-height:0;overflow-y:auto!important}:host ::ng-deep fs-list .fs-list-table thead th{position:sticky;top:0;z-index:1;background-color:#fff}:host ::ng-deep fs-list .fs-list-table tfoot td{position:sticky;bottom:0;z-index:1;background-color:#fff;font-weight:500;box-shadow:inset 0 1px #0000001f}:host ::ng-deep fs-list.report-totals-empty tfoot{display:none}:host ::ng-deep fs-list .report-pinned{position:sticky;left:var(--report-pin-left, 0px);z-index:1;background-color:#fff}:host ::ng-deep fs-list .report-pin-0{--report-pin-left: var(--report-pin-left-0, 0px)}:host ::ng-deep fs-list .report-pin-1{--report-pin-left: var(--report-pin-left-1, 0px)}:host ::ng-deep fs-list .report-pin-2{--report-pin-left: var(--report-pin-left-2, 0px)}:host ::ng-deep fs-list .report-pin-last{box-shadow:inset -1px 0 #0000001f}:host ::ng-deep fs-list .fs-list-table thead th.report-pinned{z-index:3}:host ::ng-deep fs-list .fs-list-table tfoot td.report-pinned{z-index:2}:host ::ng-deep fs-list .fs-list-table tfoot td.report-pin-last{box-shadow:inset -1px 0 #0000001f,inset 0 1px #0000001f}:host ::ng-deep fs-list th.report-nowrap,:host ::ng-deep fs-list td.report-nowrap{white-space:nowrap}:host ::ng-deep fs-list fs-list-pagination{flex:0 0 auto}:host ::ng-deep fs-list .fs-list-load-more{position:sticky;bottom:0;background-color:#fff}:host ::ng-deep fs-list .fs-list-load-more button{margin-top:0}.list-caption{flex:0 0 auto;padding-top:4px}.pivot-truncated{flex:0 0 auto;padding:8px 12px;margin-bottom:8px;border-radius:4px;background-color:#fff4e5;color:#663c00}\n"] }]
+                    ], template: "@if (truncated()) {\n  <div class=\"pivot-truncated\">\n    This grid was built from a partial result, so some columns or values may be missing. Narrow it with a filter.\n  </div>\n}\n\n<!-- The windows a comparison compares, and why it reads as it does. A\n     windowed column's own notes are in its header's tooltip. -->\n<app-report-component-note\n  [data]=\"noteData()\"\n  [windowNotes]=\"false\">\n</app-report-component-note>\n\n<!-- fs-list reads a column's footer template once, as a direct child of\n     fs-list-column, so a list with totals renders its columns in a branch of\n     their own rather than wrapping the footer in an @if. Its header template too,\n     which every column carries: an output column's tooltip says what it holds.\n     Columns are tracked by alignment as well as name, since fs-list reads a\n     column's alignment only when it builds the column. -->\n<fs-list\n  [config]=\"listConfig\"\n  [class.report-totals-empty]=\"!totals()\">\n  @if (showTotals()) {\n    @for (column of columns(); track column.column + ':' + column.numeric) {\n      <fs-list-column\n        [name]=\"column.column\"\n        [title]=\"column.label || column.column\"\n        [show]=\"!hidden().has(column.column)\"\n        [sortable]=\"!pivoted() || $first\"\n        [align]=\"column.numeric ? 'right' : 'left'\"\n        [class]=\"columnClasses(column, $index, pinned())\">\n        <ng-template fs-list-header>\n          <ng-container\n            [ngTemplateOutlet]=\"headerTpl\"\n            [ngTemplateOutletContext]=\"{ column: column }\">\n          </ng-container>\n        </ng-template>\n        <ng-template\n          fs-list-cell\n          let-row=\"row\">\n          <ng-container\n            [ngTemplateOutlet]=\"cellTpl\"\n            [ngTemplateOutletContext]=\"{ $implicit: row[column.column], row: row, column: column }\">\n          </ng-container>\n        </ng-template>\n        <ng-template fs-list-footer>\n          @if (totals()?.[column.column] !== undefined) {\n            <ng-container\n              [ngTemplateOutlet]=\"cellTpl\"\n              [ngTemplateOutletContext]=\"{ $implicit: totals()?.[column.column], row: totals(), column: column }\">\n            </ng-container>\n          } @else if (column.column === totalsLabelColumn()) {\n            {{ totalLabel }}\n          }\n        </ng-template>\n      </fs-list-column>\n    }\n  } @else {\n    @for (column of columns(); track column.column + ':' + column.numeric) {\n      <fs-list-column\n        [name]=\"column.column\"\n        [title]=\"column.label || column.column\"\n        [show]=\"!hidden().has(column.column)\"\n        [sortable]=\"!pivoted() || $first\"\n        [align]=\"column.numeric ? 'right' : 'left'\"\n        [class]=\"columnClasses(column, $index, pinned())\">\n        <ng-template fs-list-header>\n          <ng-container\n            [ngTemplateOutlet]=\"headerTpl\"\n            [ngTemplateOutletContext]=\"{ column: column }\">\n          </ng-container>\n        </ng-template>\n        <ng-template\n          fs-list-cell\n          let-row=\"row\">\n          <ng-container\n            [ngTemplateOutlet]=\"cellTpl\"\n            [ngTemplateOutletContext]=\"{ $implicit: row[column.column], row: row, column: column }\">\n          </ng-container>\n        </ng-template>\n      </fs-list-column>\n    }\n  }\n</fs-list>\n\n@if (caption()) {\n  <div class=\"list-caption small\">\n    {{ caption() }}\n  </div>\n}\n\n<!-- A column's heading, with what an output column holds as its tooltip (an\n     empty one never shows). -->\n<ng-template\n  #headerTpl\n  let-column=\"column\">\n  <span [matTooltip]=\"columnNotes()[column.column] ?? ''\">{{ column.label || column.column }}</span>\n</ng-template>\n\n<!-- One cell, in the body and the totals row alike: an output column by what\n     it holds (its row gives a change its prior), a date column as a day in the\n     report's zone and locale, a labeled column's value as its label, any other\n     through its number format. -->\n<ng-template\n  #cellTpl\n  let-value\n  let-row=\"row\"\n  let-column=\"column\">\n  @if (outputColumns()[column.column]; as output) {\n    @if (row | fsReportOutput: column : output : formatContext(); as cell) {\n      <span [attr.title]=\"cell.title\">{{ cell.text }}</span>\n    }\n  } @else if (column.format === ReportListColumnFormat.Date) {\n    {{ value | fsReportDate: timezone() : formatContext().locale }}\n  } @else {\n    {{ valueLabel(valueLabels(), column.column, value) ?? (value | fsReportNumber: column : formatContext()) }}\n  }\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%;min-height:0}:host ::ng-deep fs-list{display:flex;flex-direction:column;flex:1 1 auto;height:auto;min-height:0}:host ::ng-deep fs-list .fs-list-container{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;height:100%}:host ::ng-deep fs-list .fs-list-header-container{flex:0 0 auto}:host ::ng-deep fs-list .fs-list-container .fs-list-table-container{flex:1 1 auto;min-height:0;overflow-y:auto!important}:host ::ng-deep fs-list .fs-list-table thead th{position:sticky;top:0;z-index:1;background-color:#fff}:host ::ng-deep fs-list .fs-list-table tfoot td{position:sticky;bottom:0;z-index:1;background-color:#fff;font-weight:500;box-shadow:inset 0 1px #0000001f}:host ::ng-deep fs-list.report-totals-empty tfoot{display:none}:host ::ng-deep fs-list .report-pinned{position:sticky;left:var(--report-pin-left, 0px);z-index:1;background-color:#fff}:host ::ng-deep fs-list .report-pin-0{--report-pin-left: var(--report-pin-left-0, 0px)}:host ::ng-deep fs-list .report-pin-1{--report-pin-left: var(--report-pin-left-1, 0px)}:host ::ng-deep fs-list .report-pin-2{--report-pin-left: var(--report-pin-left-2, 0px)}:host ::ng-deep fs-list .report-pin-last{box-shadow:inset -1px 0 #0000001f}:host ::ng-deep fs-list .fs-list-table thead th.report-pinned{z-index:3}:host ::ng-deep fs-list .fs-list-table tfoot td.report-pinned{z-index:2}:host ::ng-deep fs-list .fs-list-table tfoot td.report-pin-last{box-shadow:inset -1px 0 #0000001f,inset 0 1px #0000001f}:host ::ng-deep fs-list th.report-nowrap,:host ::ng-deep fs-list td.report-nowrap{white-space:nowrap}:host ::ng-deep fs-list fs-list-pagination{flex:0 0 auto}:host ::ng-deep fs-list .fs-list-load-more{position:sticky;bottom:0;background-color:#fff}:host ::ng-deep fs-list .fs-list-load-more button{margin-top:0}.list-caption{flex:0 0 auto;padding-top:4px}.pivot-truncated{flex:0 0 auto;padding:8px 12px;margin-bottom:8px;border-radius:4px;background-color:#fff4e5;color:#663c00}\n"] }]
         }], ctorParameters: () => [] });
 
 // How a value chip is marked in the editor. The names follow the embeds of
@@ -11771,7 +11856,7 @@ class ComponentTextComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ComponentTextComponent, isStandalone: true, selector: "app-report-component-text", inputs: { html: { classPropertyName: "html", publicName: "html", isSignal: true, isRequired: false, transformFunction: null }, tokens: { classPropertyName: "tokens", publicName: "tokens", isSignal: true, isRequired: true, transformFunction: null }, editing: { classPropertyName: "editing", publicName: "editing", isSignal: true, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null }, shownElsewhere: { classPropertyName: "shownElsewhere", publicName: "shownElsewhere", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { saved: "saved", editEnded: "editEnded", valueSettings: "valueSettings" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "style.--text-size": "typeScale.body", "style.--text-h1-size": "typeScale.h1", "style.--text-h2-size": "typeScale.h2", "style.--text-h3-size": "typeScale.h3", "style.--text-color": "typeScale.color", "style.--text-table-border": "tableLook.border", "style.--text-table-padding": "tableLook.padding", "style.--text-table-margin": "tableLook.margin" } }, viewQueries: [{ propertyName: "_editor", first: true, predicate: FsHtmlEditorComponent, descendants: true, isSignal: true }, { propertyName: "_valuePopoverAnchor", first: true, predicate: ["valuePopoverAnchor"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (editing()) {\n  <!-- Floating fs-html-editor: no frame, Froala's inline toolbar pops up over\n       the text. pointerdown stays here so a press in the text never starts a\n       drag of the block or a pan of the canvas. -->\n  <fs-html-editor\n      class=\"text-content editing\"\n      [config]=\"editorConfig\"\n      [(ngModel)]=\"draft\"\n      (pointerdown)=\"$event.stopPropagation()\"\n      (mousedown)=\"$event.stopPropagation()\">\n  </fs-html-editor>\n\n  <!-- One notice at a time: an edit stopped because it would have removed\n       values, an edit that left values no text reads, or a refused command.\n       mousedown keeps the editor's focus and selection, so Undo reaches it. -->\n  @if (notice(); as current) {\n    <div\n        class=\"value-notice fs-row.gap-sm\"\n        (pointerdown)=\"$event.stopPropagation()\"\n        (mousedown)=\"$event.preventDefault()\">\n      @switch (current.kind) {\n        @case ('blocked') {\n          @if (current.block.removeSelection) {\n            <span>\n              This selection includes {{ current.block.count }} {{ current.block.count === 1 ? 'value' : 'values' }}.\n            </span>\n            <button\n                mat-button\n                color=\"primary\"\n                type=\"button\"\n                (click)=\"removeBlockedSelection()\">\n              Remove text and {{ current.block.count === 1 ? 'value' : current.block.count + ' values' }}\n            </button>\n          } @else {\n            <span>To take a value out, select it, then press Delete.</span>\n          }\n        }\n        @case ('unused') {\n          <span>{{ current.count }} {{ current.count === 1 ? 'value' : 'values' }} moved to Not used</span>\n          <button\n              mat-button\n              color=\"primary\"\n              type=\"button\"\n              (click)=\"undoValuesUnused()\">\n            Undo\n          </button>\n        }\n        @case ('message') {\n          <span>{{ current.text }}</span>\n        }\n      }\n      <button\n          mat-button\n          type=\"button\"\n          (click)=\"dismissNotice()\">\n        Dismiss\n      </button>\n    </div>\n  }\n} @else if (editMode() && isBlank()) {\n  <!-- An empty block while the canvas is laid out: a hint in the block's own\n       type, never its html, so nothing is typed onto it or exported. -->\n  <div class=\"text-content text-hint\">Double-click to edit</div>\n} @else {\n  <div\n      class=\"text-content\"\n      [innerHTML]=\"displayHtml()\">\n  </div>\n}\n\n<!-- A clicked value chip's popover: an fs-popover on an invisible anchor laid\n     over the chip (the chip itself belongs to the editor). Outside the editing\n     block, so a popover still open when editing ends closes the usual way. -->\n<span\n    #valuePopoverAnchor\n    class=\"value-popover-anchor\"\n    aria-hidden=\"true\"\n    fsPopover\n    trigger=\"click\"\n    wrapperClass=\"value-popover-wrapper\"\n    [template]=\"valuePopoverTemplate\"\n    [indication]=\"false\"\n    [maxWidth]=\"320\"\n    [style.left.px]=\"valuePopover()?.left\"\n    [style.top.px]=\"valuePopover()?.top\"\n    [style.width.px]=\"valuePopover()?.width\"\n    [style.height.px]=\"valuePopover()?.height\">\n</span>\n<ng-template\n    #valuePopoverTemplate\n    let-popover=\"popover\">\n  <!-- What the value is, and its settings (where it can also be deleted); a\n       chip naming no value on the page has no settings. -->\n  <div class=\"value-popover fs-row\">\n    <div class=\"fs-flex\">\n      <div class=\"value-popover-name\">{{ valuePopoverValue()?.name ?? valuePopover()?.key }}</div>\n      @if (!valuePopoverValue()) {\n        <div class=\"small\">Not a value on this page</div>\n      }\n    </div>\n    @if (valuePopoverValue()) {\n      <button\n          mat-icon-button\n          type=\"button\"\n          class=\"value-popover-settings\"\n          matTooltip=\"Settings\"\n          (click)=\"openValueSettings(popover)\">\n        <mat-icon>settings</mat-icon>\n      </button>\n    }\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;height:100%}.text-content{display:block;width:100%;height:100%;overflow:hidden;font-family:Arial,Helvetica,sans-serif;font-size:var(--text-size);line-height:1.25;color:var(--text-color);word-wrap:break-word;letter-spacing:normal;word-spacing:normal;font-weight:400;font-style:normal;text-transform:none;white-space:normal}.text-content ::ng-deep p,.text-content ::ng-deep h1,.text-content ::ng-deep h2,.text-content ::ng-deep h3,.text-content ::ng-deep ul,.text-content ::ng-deep ol{margin:0}.text-content ::ng-deep h1{font-size:var(--text-h1-size)}.text-content ::ng-deep h2{font-size:var(--text-h2-size)}.text-content ::ng-deep h3{font-size:var(--text-h3-size)}.text-content ::ng-deep h1,.text-content ::ng-deep h2,.text-content ::ng-deep h3{font-weight:700;line-height:1.2}.text-content ::ng-deep ul,.text-content ::ng-deep ol{padding-left:1.4em}.text-content ::ng-deep p:empty:before{content:\"\\200b\"}.text-content ::ng-deep a{color:inherit}.text-content ::ng-deep table{border-collapse:collapse;margin:var(--text-table-margin) 0}.text-content ::ng-deep th,.text-content ::ng-deep td{border:var(--text-table-border);padding:var(--text-table-padding);vertical-align:middle;text-align:left}.text-content ::ng-deep th{text-align:center;font-weight:700}.text-content.editing{overflow:auto;cursor:text}.text-content.editing ::ng-deep [data-embed-key],.text-content.editing ::ng-deep [data-embed-field]{padding:0 2px;border-radius:3px;background-color:#4e79a729;-webkit-user-select:all;user-select:all}.text-content.editing ::ng-deep [data-embed-key]{cursor:pointer}.text-content.editing ::ng-deep [data-embed-key]:hover{background-color:#4e79a747}.text-content.editing ::ng-deep [data-embed-missing]{background-color:#e1575924;outline:1px dashed rgba(225,87,89,.7)}.text-content.editing ::ng-deep th,.text-content.editing ::ng-deep tfoot td{background-color:transparent}.text-content.editing ::ng-deep .fr-table-selector{display:none}.text-content.editing ::ng-deep .fr-table-selection-hover{outline:none}.text-hint{color:#9aa5b1;-webkit-user-select:none;user-select:none}.value-popover-anchor{position:absolute;pointer-events:none}::ng-deep .value-popover-wrapper .popover-content{padding:15px!important}.value-popover{gap:15px}.value-popover-name{font-weight:600}.value-popover-settings{--mdc-icon-button-state-layer-size: 24px;width:24px;height:24px;padding:0}.value-notice{position:absolute;top:100%;left:0;z-index:2;margin-top:4px;padding:2px 4px 2px 10px;border:1px solid #d9dee3;border-radius:4px;background:#fff;white-space:nowrap;font-family:Arial,Helvetica,sans-serif}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FsHtmlEditorComponent, selector: "fs-html-editor", inputs: ["config", "disabled"] }, { kind: "directive", type: FsPopoverDirective, selector: "[fsPopover]", inputs: ["text", "template", "data", "leaveDelay", "showDelay", "maxWidth", "maxHeight", "wrapperClass", "autoShow", "autoClose", "loadingDiameter", "loading", "indication", "position", "theme", "size", "trigger", "enabled", "panel"], outputs: ["closed"], exportAs: ["fsPopover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ComponentTextComponent, isStandalone: true, selector: "app-report-component-text", inputs: { html: { classPropertyName: "html", publicName: "html", isSignal: true, isRequired: false, transformFunction: null }, tokens: { classPropertyName: "tokens", publicName: "tokens", isSignal: true, isRequired: true, transformFunction: null }, editing: { classPropertyName: "editing", publicName: "editing", isSignal: true, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null }, shownElsewhere: { classPropertyName: "shownElsewhere", publicName: "shownElsewhere", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { saved: "saved", editEnded: "editEnded", valueSettings: "valueSettings" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "style.--text-size": "typeScale.body", "style.--text-h1-size": "typeScale.h1", "style.--text-h2-size": "typeScale.h2", "style.--text-h3-size": "typeScale.h3", "style.--text-color": "typeScale.color", "style.--text-table-border": "tableLook.border", "style.--text-table-padding": "tableLook.padding", "style.--text-table-margin": "tableLook.margin" } }, viewQueries: [{ propertyName: "_editor", first: true, predicate: FsHtmlEditorComponent, descendants: true, isSignal: true }, { propertyName: "_valuePopoverAnchor", first: true, predicate: ["valuePopoverAnchor"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (editing()) {\n  <!-- Floating fs-html-editor: no frame, Froala's inline toolbar pops up over\n       the text. pointerdown stays here so a press in the text never starts a\n       drag of the block or a pan of the canvas. -->\n  <fs-html-editor\n      class=\"text-content editing\"\n      [config]=\"editorConfig\"\n      [(ngModel)]=\"draft\"\n      (pointerdown)=\"$event.stopPropagation()\"\n      (mousedown)=\"$event.stopPropagation()\">\n  </fs-html-editor>\n\n  <!-- One notice at a time: an edit stopped because it would have removed\n       values, an edit that left values no text reads, or a refused command.\n       mousedown keeps the editor's focus and selection, so Undo reaches it. -->\n  @if (notice(); as current) {\n    <div\n        class=\"value-notice fs-row.gap-sm\"\n        (pointerdown)=\"$event.stopPropagation()\"\n        (mousedown)=\"$event.preventDefault()\">\n      @switch (current.kind) {\n        @case ('blocked') {\n          @if (current.block.removeSelection) {\n            <span>\n              This selection includes {{ current.block.count }} {{ current.block.count === 1 ? 'value' : 'values' }}.\n            </span>\n            <button\n                mat-button\n                color=\"primary\"\n                type=\"button\"\n                (click)=\"removeBlockedSelection()\">\n              Remove text and {{ current.block.count === 1 ? 'value' : current.block.count + ' values' }}\n            </button>\n          } @else {\n            <span>To take a value out, select it, then press Delete.</span>\n          }\n        }\n        @case ('unused') {\n          <span>{{ current.count }} {{ current.count === 1 ? 'value' : 'values' }} moved to Not used</span>\n          <button\n              mat-button\n              color=\"primary\"\n              type=\"button\"\n              (click)=\"undoValuesUnused()\">\n            Undo\n          </button>\n        }\n        @case ('message') {\n          <span>{{ current.text }}</span>\n        }\n      }\n      <button\n          mat-button\n          type=\"button\"\n          (click)=\"dismissNotice()\">\n        Dismiss\n      </button>\n    </div>\n  }\n} @else if (editMode() && isBlank()) {\n  <!-- An empty block while the canvas is laid out: a hint in the block's own\n       type, never its html, so nothing is typed onto it or exported. -->\n  <div class=\"text-content text-hint\">Double-click to edit</div>\n} @else {\n  <div\n      class=\"text-content\"\n      [innerHTML]=\"displayHtml()\">\n  </div>\n}\n\n<!-- A clicked value chip's popover: an fs-popover on an invisible anchor laid\n     over the chip (the chip itself belongs to the editor). Outside the editing\n     block, so a popover still open when editing ends closes the usual way. -->\n<span\n    #valuePopoverAnchor\n    class=\"value-popover-anchor\"\n    aria-hidden=\"true\"\n    fsPopover\n    trigger=\"click\"\n    wrapperClass=\"value-popover-wrapper\"\n    [template]=\"valuePopoverTemplate\"\n    [indication]=\"false\"\n    [maxWidth]=\"320\"\n    [style.left.px]=\"valuePopover()?.left\"\n    [style.top.px]=\"valuePopover()?.top\"\n    [style.width.px]=\"valuePopover()?.width\"\n    [style.height.px]=\"valuePopover()?.height\">\n</span>\n<ng-template\n    #valuePopoverTemplate\n    let-popover=\"popover\">\n  <!-- What the value is, and its settings (where it can also be deleted); a\n       chip naming no value on the page has no settings. -->\n  <div class=\"value-popover fs-row\">\n    <div class=\"fs-flex\">\n      <div class=\"value-popover-name\">{{ valuePopoverValue()?.name ?? valuePopover()?.key }}</div>\n      @if (!valuePopoverValue()) {\n        <div class=\"small\">Not a value on this page</div>\n      }\n    </div>\n    @if (valuePopoverValue()) {\n      <button\n          mat-icon-button\n          type=\"button\"\n          class=\"value-popover-settings\"\n          matTooltip=\"Settings\"\n          (click)=\"openValueSettings(popover)\">\n        <mat-icon>settings</mat-icon>\n      </button>\n    }\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;height:100%}.text-content{display:block;width:100%;height:100%;overflow:visible;font-family:Arial,Helvetica,sans-serif;font-size:var(--text-size);line-height:1.25;color:var(--text-color);word-wrap:break-word;letter-spacing:normal;word-spacing:normal;font-weight:400;font-style:normal;text-transform:none;white-space:normal}.text-content ::ng-deep p,.text-content ::ng-deep h1,.text-content ::ng-deep h2,.text-content ::ng-deep h3,.text-content ::ng-deep ul,.text-content ::ng-deep ol{margin:0}.text-content ::ng-deep h1{font-size:var(--text-h1-size)}.text-content ::ng-deep h2{font-size:var(--text-h2-size)}.text-content ::ng-deep h3{font-size:var(--text-h3-size)}.text-content ::ng-deep h1,.text-content ::ng-deep h2,.text-content ::ng-deep h3{font-weight:700;line-height:1.2}.text-content ::ng-deep ul,.text-content ::ng-deep ol{padding-left:1.4em}.text-content ::ng-deep p:empty:before{content:\"\\200b\"}.text-content ::ng-deep a{color:inherit}.text-content ::ng-deep table{border-collapse:collapse;margin:var(--text-table-margin) 0}.text-content ::ng-deep th,.text-content ::ng-deep td{border:var(--text-table-border);padding:var(--text-table-padding);vertical-align:middle;text-align:left}.text-content ::ng-deep th{text-align:center;font-weight:700}.text-content.editing{cursor:text}.text-content.editing ::ng-deep [data-embed-key],.text-content.editing ::ng-deep [data-embed-field]{padding:0 2px;border-radius:3px;background-color:#4e79a729;-webkit-user-select:all;user-select:all}.text-content.editing ::ng-deep [data-embed-key]{cursor:pointer}.text-content.editing ::ng-deep [data-embed-key]:hover{background-color:#4e79a747}.text-content.editing ::ng-deep [data-embed-missing]{background-color:#e1575924;outline:1px dashed rgba(225,87,89,.7)}.text-content.editing ::ng-deep th,.text-content.editing ::ng-deep tfoot td{background-color:transparent}.text-content.editing ::ng-deep .fr-table-selector{display:none}.text-content.editing ::ng-deep .fr-table-selection-hover{outline:none}.text-hint{color:#9aa5b1;-webkit-user-select:none;user-select:none}.value-popover-anchor{position:absolute;pointer-events:none}::ng-deep .value-popover-wrapper .popover-content{padding:15px!important}.value-popover{gap:15px}.value-popover-name{font-weight:600}.value-popover-settings{--mdc-icon-button-state-layer-size: 24px;width:24px;height:24px;padding:0}.value-notice{position:absolute;top:100%;left:0;z-index:2;margin-top:4px;padding:2px 4px 2px 10px;border:1px solid #d9dee3;border-radius:4px;background:#fff;white-space:nowrap;font-family:Arial,Helvetica,sans-serif}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FsHtmlEditorComponent, selector: "fs-html-editor", inputs: ["config", "disabled"] }, { kind: "directive", type: FsPopoverDirective, selector: "[fsPopover]", inputs: ["text", "template", "data", "leaveDelay", "showDelay", "maxWidth", "maxHeight", "wrapperClass", "autoShow", "autoClose", "loadingDiameter", "loading", "indication", "position", "theme", "size", "trigger", "enabled", "panel"], outputs: ["closed"], exportAs: ["fsPopover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentTextComponent, decorators: [{
             type: Component,
@@ -11796,7 +11881,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         '[style.--text-table-border]': 'tableLook.border',
                         '[style.--text-table-padding]': 'tableLook.padding',
                         '[style.--text-table-margin]': 'tableLook.margin',
-                    }, template: "@if (editing()) {\n  <!-- Floating fs-html-editor: no frame, Froala's inline toolbar pops up over\n       the text. pointerdown stays here so a press in the text never starts a\n       drag of the block or a pan of the canvas. -->\n  <fs-html-editor\n      class=\"text-content editing\"\n      [config]=\"editorConfig\"\n      [(ngModel)]=\"draft\"\n      (pointerdown)=\"$event.stopPropagation()\"\n      (mousedown)=\"$event.stopPropagation()\">\n  </fs-html-editor>\n\n  <!-- One notice at a time: an edit stopped because it would have removed\n       values, an edit that left values no text reads, or a refused command.\n       mousedown keeps the editor's focus and selection, so Undo reaches it. -->\n  @if (notice(); as current) {\n    <div\n        class=\"value-notice fs-row.gap-sm\"\n        (pointerdown)=\"$event.stopPropagation()\"\n        (mousedown)=\"$event.preventDefault()\">\n      @switch (current.kind) {\n        @case ('blocked') {\n          @if (current.block.removeSelection) {\n            <span>\n              This selection includes {{ current.block.count }} {{ current.block.count === 1 ? 'value' : 'values' }}.\n            </span>\n            <button\n                mat-button\n                color=\"primary\"\n                type=\"button\"\n                (click)=\"removeBlockedSelection()\">\n              Remove text and {{ current.block.count === 1 ? 'value' : current.block.count + ' values' }}\n            </button>\n          } @else {\n            <span>To take a value out, select it, then press Delete.</span>\n          }\n        }\n        @case ('unused') {\n          <span>{{ current.count }} {{ current.count === 1 ? 'value' : 'values' }} moved to Not used</span>\n          <button\n              mat-button\n              color=\"primary\"\n              type=\"button\"\n              (click)=\"undoValuesUnused()\">\n            Undo\n          </button>\n        }\n        @case ('message') {\n          <span>{{ current.text }}</span>\n        }\n      }\n      <button\n          mat-button\n          type=\"button\"\n          (click)=\"dismissNotice()\">\n        Dismiss\n      </button>\n    </div>\n  }\n} @else if (editMode() && isBlank()) {\n  <!-- An empty block while the canvas is laid out: a hint in the block's own\n       type, never its html, so nothing is typed onto it or exported. -->\n  <div class=\"text-content text-hint\">Double-click to edit</div>\n} @else {\n  <div\n      class=\"text-content\"\n      [innerHTML]=\"displayHtml()\">\n  </div>\n}\n\n<!-- A clicked value chip's popover: an fs-popover on an invisible anchor laid\n     over the chip (the chip itself belongs to the editor). Outside the editing\n     block, so a popover still open when editing ends closes the usual way. -->\n<span\n    #valuePopoverAnchor\n    class=\"value-popover-anchor\"\n    aria-hidden=\"true\"\n    fsPopover\n    trigger=\"click\"\n    wrapperClass=\"value-popover-wrapper\"\n    [template]=\"valuePopoverTemplate\"\n    [indication]=\"false\"\n    [maxWidth]=\"320\"\n    [style.left.px]=\"valuePopover()?.left\"\n    [style.top.px]=\"valuePopover()?.top\"\n    [style.width.px]=\"valuePopover()?.width\"\n    [style.height.px]=\"valuePopover()?.height\">\n</span>\n<ng-template\n    #valuePopoverTemplate\n    let-popover=\"popover\">\n  <!-- What the value is, and its settings (where it can also be deleted); a\n       chip naming no value on the page has no settings. -->\n  <div class=\"value-popover fs-row\">\n    <div class=\"fs-flex\">\n      <div class=\"value-popover-name\">{{ valuePopoverValue()?.name ?? valuePopover()?.key }}</div>\n      @if (!valuePopoverValue()) {\n        <div class=\"small\">Not a value on this page</div>\n      }\n    </div>\n    @if (valuePopoverValue()) {\n      <button\n          mat-icon-button\n          type=\"button\"\n          class=\"value-popover-settings\"\n          matTooltip=\"Settings\"\n          (click)=\"openValueSettings(popover)\">\n        <mat-icon>settings</mat-icon>\n      </button>\n    }\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;height:100%}.text-content{display:block;width:100%;height:100%;overflow:hidden;font-family:Arial,Helvetica,sans-serif;font-size:var(--text-size);line-height:1.25;color:var(--text-color);word-wrap:break-word;letter-spacing:normal;word-spacing:normal;font-weight:400;font-style:normal;text-transform:none;white-space:normal}.text-content ::ng-deep p,.text-content ::ng-deep h1,.text-content ::ng-deep h2,.text-content ::ng-deep h3,.text-content ::ng-deep ul,.text-content ::ng-deep ol{margin:0}.text-content ::ng-deep h1{font-size:var(--text-h1-size)}.text-content ::ng-deep h2{font-size:var(--text-h2-size)}.text-content ::ng-deep h3{font-size:var(--text-h3-size)}.text-content ::ng-deep h1,.text-content ::ng-deep h2,.text-content ::ng-deep h3{font-weight:700;line-height:1.2}.text-content ::ng-deep ul,.text-content ::ng-deep ol{padding-left:1.4em}.text-content ::ng-deep p:empty:before{content:\"\\200b\"}.text-content ::ng-deep a{color:inherit}.text-content ::ng-deep table{border-collapse:collapse;margin:var(--text-table-margin) 0}.text-content ::ng-deep th,.text-content ::ng-deep td{border:var(--text-table-border);padding:var(--text-table-padding);vertical-align:middle;text-align:left}.text-content ::ng-deep th{text-align:center;font-weight:700}.text-content.editing{overflow:auto;cursor:text}.text-content.editing ::ng-deep [data-embed-key],.text-content.editing ::ng-deep [data-embed-field]{padding:0 2px;border-radius:3px;background-color:#4e79a729;-webkit-user-select:all;user-select:all}.text-content.editing ::ng-deep [data-embed-key]{cursor:pointer}.text-content.editing ::ng-deep [data-embed-key]:hover{background-color:#4e79a747}.text-content.editing ::ng-deep [data-embed-missing]{background-color:#e1575924;outline:1px dashed rgba(225,87,89,.7)}.text-content.editing ::ng-deep th,.text-content.editing ::ng-deep tfoot td{background-color:transparent}.text-content.editing ::ng-deep .fr-table-selector{display:none}.text-content.editing ::ng-deep .fr-table-selection-hover{outline:none}.text-hint{color:#9aa5b1;-webkit-user-select:none;user-select:none}.value-popover-anchor{position:absolute;pointer-events:none}::ng-deep .value-popover-wrapper .popover-content{padding:15px!important}.value-popover{gap:15px}.value-popover-name{font-weight:600}.value-popover-settings{--mdc-icon-button-state-layer-size: 24px;width:24px;height:24px;padding:0}.value-notice{position:absolute;top:100%;left:0;z-index:2;margin-top:4px;padding:2px 4px 2px 10px;border:1px solid #d9dee3;border-radius:4px;background:#fff;white-space:nowrap;font-family:Arial,Helvetica,sans-serif}\n"] }]
+                    }, template: "@if (editing()) {\n  <!-- Floating fs-html-editor: no frame, Froala's inline toolbar pops up over\n       the text. pointerdown stays here so a press in the text never starts a\n       drag of the block or a pan of the canvas. -->\n  <fs-html-editor\n      class=\"text-content editing\"\n      [config]=\"editorConfig\"\n      [(ngModel)]=\"draft\"\n      (pointerdown)=\"$event.stopPropagation()\"\n      (mousedown)=\"$event.stopPropagation()\">\n  </fs-html-editor>\n\n  <!-- One notice at a time: an edit stopped because it would have removed\n       values, an edit that left values no text reads, or a refused command.\n       mousedown keeps the editor's focus and selection, so Undo reaches it. -->\n  @if (notice(); as current) {\n    <div\n        class=\"value-notice fs-row.gap-sm\"\n        (pointerdown)=\"$event.stopPropagation()\"\n        (mousedown)=\"$event.preventDefault()\">\n      @switch (current.kind) {\n        @case ('blocked') {\n          @if (current.block.removeSelection) {\n            <span>\n              This selection includes {{ current.block.count }} {{ current.block.count === 1 ? 'value' : 'values' }}.\n            </span>\n            <button\n                mat-button\n                color=\"primary\"\n                type=\"button\"\n                (click)=\"removeBlockedSelection()\">\n              Remove text and {{ current.block.count === 1 ? 'value' : current.block.count + ' values' }}\n            </button>\n          } @else {\n            <span>To take a value out, select it, then press Delete.</span>\n          }\n        }\n        @case ('unused') {\n          <span>{{ current.count }} {{ current.count === 1 ? 'value' : 'values' }} moved to Not used</span>\n          <button\n              mat-button\n              color=\"primary\"\n              type=\"button\"\n              (click)=\"undoValuesUnused()\">\n            Undo\n          </button>\n        }\n        @case ('message') {\n          <span>{{ current.text }}</span>\n        }\n      }\n      <button\n          mat-button\n          type=\"button\"\n          (click)=\"dismissNotice()\">\n        Dismiss\n      </button>\n    </div>\n  }\n} @else if (editMode() && isBlank()) {\n  <!-- An empty block while the canvas is laid out: a hint in the block's own\n       type, never its html, so nothing is typed onto it or exported. -->\n  <div class=\"text-content text-hint\">Double-click to edit</div>\n} @else {\n  <div\n      class=\"text-content\"\n      [innerHTML]=\"displayHtml()\">\n  </div>\n}\n\n<!-- A clicked value chip's popover: an fs-popover on an invisible anchor laid\n     over the chip (the chip itself belongs to the editor). Outside the editing\n     block, so a popover still open when editing ends closes the usual way. -->\n<span\n    #valuePopoverAnchor\n    class=\"value-popover-anchor\"\n    aria-hidden=\"true\"\n    fsPopover\n    trigger=\"click\"\n    wrapperClass=\"value-popover-wrapper\"\n    [template]=\"valuePopoverTemplate\"\n    [indication]=\"false\"\n    [maxWidth]=\"320\"\n    [style.left.px]=\"valuePopover()?.left\"\n    [style.top.px]=\"valuePopover()?.top\"\n    [style.width.px]=\"valuePopover()?.width\"\n    [style.height.px]=\"valuePopover()?.height\">\n</span>\n<ng-template\n    #valuePopoverTemplate\n    let-popover=\"popover\">\n  <!-- What the value is, and its settings (where it can also be deleted); a\n       chip naming no value on the page has no settings. -->\n  <div class=\"value-popover fs-row\">\n    <div class=\"fs-flex\">\n      <div class=\"value-popover-name\">{{ valuePopoverValue()?.name ?? valuePopover()?.key }}</div>\n      @if (!valuePopoverValue()) {\n        <div class=\"small\">Not a value on this page</div>\n      }\n    </div>\n    @if (valuePopoverValue()) {\n      <button\n          mat-icon-button\n          type=\"button\"\n          class=\"value-popover-settings\"\n          matTooltip=\"Settings\"\n          (click)=\"openValueSettings(popover)\">\n        <mat-icon>settings</mat-icon>\n      </button>\n    }\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;height:100%}.text-content{display:block;width:100%;height:100%;overflow:visible;font-family:Arial,Helvetica,sans-serif;font-size:var(--text-size);line-height:1.25;color:var(--text-color);word-wrap:break-word;letter-spacing:normal;word-spacing:normal;font-weight:400;font-style:normal;text-transform:none;white-space:normal}.text-content ::ng-deep p,.text-content ::ng-deep h1,.text-content ::ng-deep h2,.text-content ::ng-deep h3,.text-content ::ng-deep ul,.text-content ::ng-deep ol{margin:0}.text-content ::ng-deep h1{font-size:var(--text-h1-size)}.text-content ::ng-deep h2{font-size:var(--text-h2-size)}.text-content ::ng-deep h3{font-size:var(--text-h3-size)}.text-content ::ng-deep h1,.text-content ::ng-deep h2,.text-content ::ng-deep h3{font-weight:700;line-height:1.2}.text-content ::ng-deep ul,.text-content ::ng-deep ol{padding-left:1.4em}.text-content ::ng-deep p:empty:before{content:\"\\200b\"}.text-content ::ng-deep a{color:inherit}.text-content ::ng-deep table{border-collapse:collapse;margin:var(--text-table-margin) 0}.text-content ::ng-deep th,.text-content ::ng-deep td{border:var(--text-table-border);padding:var(--text-table-padding);vertical-align:middle;text-align:left}.text-content ::ng-deep th{text-align:center;font-weight:700}.text-content.editing{cursor:text}.text-content.editing ::ng-deep [data-embed-key],.text-content.editing ::ng-deep [data-embed-field]{padding:0 2px;border-radius:3px;background-color:#4e79a729;-webkit-user-select:all;user-select:all}.text-content.editing ::ng-deep [data-embed-key]{cursor:pointer}.text-content.editing ::ng-deep [data-embed-key]:hover{background-color:#4e79a747}.text-content.editing ::ng-deep [data-embed-missing]{background-color:#e1575924;outline:1px dashed rgba(225,87,89,.7)}.text-content.editing ::ng-deep th,.text-content.editing ::ng-deep tfoot td{background-color:transparent}.text-content.editing ::ng-deep .fr-table-selector{display:none}.text-content.editing ::ng-deep .fr-table-selection-hover{outline:none}.text-hint{color:#9aa5b1;-webkit-user-select:none;user-select:none}.value-popover-anchor{position:absolute;pointer-events:none}::ng-deep .value-popover-wrapper .popover-content{padding:15px!important}.value-popover{gap:15px}.value-popover-name{font-weight:600}.value-popover-settings{--mdc-icon-button-state-layer-size: 24px;width:24px;height:24px;padding:0}.value-notice{position:absolute;top:100%;left:0;z-index:2;margin-top:4px;padding:2px 4px 2px 10px;border:1px solid #d9dee3;border-radius:4px;background:#fff;white-space:nowrap;font-family:Arial,Helvetica,sans-serif}\n"] }]
         }], ctorParameters: () => [] });
 
 // Resize handles, named by compass direction.
@@ -15199,12 +15284,11 @@ const KPI_EXPORT_MIN_SCALE = 0.5;
 // failures.
 const EXPORT_CONCURRENCY = 3;
 // What the export gates call the header and footer: when a value they show
-// came back without its number, and when one of their text blocks does not
-// fit its box.
+// came back without its number, and when one of their blocks could not be
+// drawn.
 const HEADER_FOOTER_NAME = 'Header & footer';
-// How much of a text block's words the export gates quote to name a block that
-// does not fit its box.
-const OVERFLOW_SNIPPET_LENGTH = 40;
+// How much of a text block's words the export gates quote to name the block.
+const TEXT_SNIPPET_LENGTH = 40;
 // What a component with nothing to draw prints in the exported file.
 //
 // The two cases must not read alike. A tile that returned no rows is a finding
@@ -15238,16 +15322,11 @@ function exportTitle(component, tokens, search, crumbs, filtered = false) {
 function isFailed(item) {
     return !item.data && item.component.type !== 'text';
 }
-// A text block that does not fit its box in a built file, as the overflow gate
-// names it: under its page (HEADER_FOOTER_NAME for a header or footer block)
-// and by the start of its words, on one line. Shared by the PDF and the deck.
-function textOverflow(component, page, tokens) {
+// A text block as the export gates name it: by the start of its words, on one
+// line.
+function textSnippet(component, tokens) {
     const text = textPlain(component.config?.html ?? '', tokens).replace(/\s+/g, ' ').trim();
-    return {
-        componentId: component.id,
-        page,
-        snippet: text.length > OVERFLOW_SNIPPET_LENGTH ? `${text.slice(0, OVERFLOW_SNIPPET_LENGTH).trimEnd()}…` : text,
-    };
+    return text.length > TEXT_SNIPPET_LENGTH ? `${text.slice(0, TEXT_SNIPPET_LENGTH).trimEnd()}…` : text;
 }
 // The lines under the report's name on the PDF title page and the title slide:
 // the export date, the active filters, then what the numbers are measured in.
@@ -15264,15 +15343,17 @@ function coverLines(collected) {
 // An exported list cell, reading like the on-screen cell, through the same
 // functions as the screen: a date column renders in the report's zone and
 // locale, and a column with number-format keys (a cross-tab's cells through
-// its cellFormat) in the report's locale and currency. Any other value goes
-// out verbatim, and an empty one as ''. CSV never comes through here: its
-// values stay raw.
+// its cellFormat) in the report's locale and currency. A value of a column
+// the data labels (`labels`, ComponentData.valueLabels: an enum's, a
+// cross-tab's row key's) reads as its label. Any other value goes out
+// verbatim, and an empty one as ''. CSV never comes through here: the server
+// writes it, labels included.
 //
 // An output column is written by what it holds, as the screen's cell is
 // (formatOutputValue): a signed change, a percent change, a change of a rate
 // in points, a rank, a share. Its row gives a change the prior beside it, so
 // a missing baseline ('—') reads apart from a zero one ('n/a').
-function exportCell(value, column, timezone, context, row) {
+function exportCell(value, column, timezone, context, row, labels) {
     const output = column.output;
     if (output) {
         return formatOutputValue(value, output.output, column, context, {
@@ -15288,13 +15369,15 @@ function exportCell(value, column, timezone, context, row) {
     if (column.format === ReportListColumnFormat.Date) {
         return formatReportDate(value, timezone, context.locale);
     }
-    return hasNumberFormat(column) ? formatNumber(value, column, context, { empty: '' }) : String(value);
+    return valueLabel(labels, column.column, value)
+        ?? (hasNumberFormat(column) ? formatNumber(value, column, context, { empty: '' }) : String(value));
 }
 // The columns an exported list table draws. A cross-tab's arrive with its
 // rows (the row key first, then one per pivot value), since only the result
 // knows the pivot values, and are built by pivotColumnSpecs() as on screen:
-// headed by its periods in the report's locale, each pivot value formatted by
-// cellFormat. A plain list draws its configured columns but the ones the
+// headed by its pivot values as pivotHeadings() reads them (their labels, its
+// periods in the report's locale), each pivot value formatted by cellFormat.
+// A plain list draws its configured columns but the ones the
 // viewer hid (`hidden`, kept to listHiddenColumns, so never all of them),
 // else every column the query returned, as it came. Output columns (the
 // data's outputs, a cross-tab cell through cellMeasures) carry how they are
@@ -15856,7 +15939,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 // in the report's format context, as on screen.
 async function renderChartImage(component, data, width, height, context, pixelRatio = 3) {
     // The same tree-shaken echarts build + 'report' theme the live canvas uses.
-    const echarts = (await import('./firestitch-report-echarts-CUVOSBvJ.mjs')).default;
+    const echarts = (await import('./firestitch-report-echarts-D7WNr0Z4.mjs')).default;
     const host = document.createElement('div');
     host.style.width = `${width}px`;
     host.style.height = `${height}px`;
@@ -15881,17 +15964,12 @@ async function renderChartImage(component, data, width, height, context, pixelRa
     }
 }
 
-// How far past the bottom of its box a block may reach and still fit: two
-// pixels, so the rounding of the last line's edge never counts as overflow.
-// The deck keeps a table's row on the same terms.
-const OVERFLOW_SLACK = 2 / PX_PER_INCH;
 // Where the canvas puts each part of a text block, for the exports. A
 // browser wraps the words and sizes a table's columns by its own layout, which
 // neither jsPDF nor PowerPoint reproduces. So the block is rendered offscreen
 // with the canvas's own component, at the canvas's 96px per inch and unscaled,
 // and the exports place what they draw where it sat: a table at its top, in
 // its column widths and row heights, and the words between tables at theirs.
-// It also tells whether the block runs past the bottom of its box.
 //
 // Provided beside the export services, so the block renders under the same
 // injector the canvas's blocks do.
@@ -15986,32 +16064,22 @@ function blockBox(component, text) {
 }
 // Split the rendered block at its tables, as textBlocks splits the same html,
 // so the nth segment is the nth text part and the nth table the nth table
-// part. How far the block reaches is the bottom of its last part that draws
-// anything.
+// part.
 function measureBlock(content) {
     const box = content.getBoundingClientRect();
     const parts = splitAtTables(content);
     const segments = [];
     const tables = [];
-    let usedHeight = 0;
     parts.forEach((part, index) => {
         if (Array.isArray(part)) {
-            const segment = measureSegment(drawnNodes(part, index === parts.length - 1), box);
-            segments.push(segment);
-            usedHeight = segment?.bottom ?? usedHeight;
+            segments.push(measureSegment(drawnNodes(part, index === parts.length - 1), box));
         }
         else {
-            const table = measureTable(part, box);
-            tables.push(table);
-            usedHeight = table.top + table.height;
+            tables.push(measureTable(part, box));
         }
     });
-    const contentHeight = inches(box.height);
     return {
         contentWidth: inches(box.width),
-        contentHeight,
-        usedHeight,
-        overflow: usedHeight > contentHeight + OVERFLOW_SLACK,
         segments,
         tables,
     };
@@ -16020,7 +16088,7 @@ function measureBlock(content) {
 // blocks draws nothing anywhere. A blank line at the start of a block is
 // drawn, on the canvas and by textBlocks alike, but textBlocks drops the blank
 // lines at the very end of a block, so they are not measured either: a
-// trailing empty paragraph never makes a block overflow.
+// trailing empty paragraph never adds to the last segment's height.
 function drawnNodes(nodes, blockEnd) {
     const skipsLast = blockEnd ? isBlank : isVoid;
     let start = 0;
@@ -16185,9 +16253,6 @@ const TEXT_LINE_HEIGHT = 1.25;
 // How far a list item's text sits from the block's edge, points; the marker
 // hangs in that space.
 const LIST_INDENT = 16;
-// What the export's overflow gate says the PDF does with a text block that does
-// not fit its box.
-const PDF_OVERFLOW_NOTE = 'The PDF cuts it off at the bottom of its box.';
 // How far a table's group label steps in per level, points.
 const GRID_INDENT$1 = 8;
 // Builds the PDF client-side with jspdf. The report's unit is inches and PDFs
@@ -16207,14 +16272,12 @@ const GRID_INDENT$1 = 8;
 // without end trying to place it.
 //
 // A component that fails to draw is marked in its box and the file goes on
-// (_guarded); build() hands back the ones that did, as it does the text it
-// cut.
+// (_guarded); build() hands back the ones that did.
 //
 // A text block's tables are drawn by autoTable too, from the line its words
 // reach, in the column widths the canvas gives them (ReportTextLayoutService).
-// A text block is cut at the bottom of its box, as the canvas clips it, and
-// build() hands the file back unsaved with the blocks it cut, so the export
-// can ask about them before it saves.
+// A text block is never cut at the bottom of its box: what runs past it draws
+// on below, as on the canvas, down to the page's edge.
 class ReportPdfService {
     _textLayout = inject(ReportTextLayoutService);
     async build(collected) {
@@ -16237,8 +16300,6 @@ class ReportPdfService {
             }
         }
         return {
-            overflows: [...context.textOverflows.values()],
-            overflowNote: PDF_OVERFLOW_NOTE,
             undrawn: [...context.undrawn.values()],
             save: () => {
                 context.doc.save(`${this._slug(collected.report.name)}.pdf`);
@@ -16266,7 +16327,6 @@ class ReportPdfService {
             masterValues: this._pdfValues(collected.masterValues),
             filterFields: collected.filterFields,
             masterFilters: layerFilterFields(collected.filterFields, report.filterGroups ?? [], null),
-            textOverflows: new Map(),
             undrawn: new Map(),
         };
     }
@@ -16284,8 +16344,8 @@ class ReportPdfService {
                 if (item.component.type !== 'text') {
                     await this._renderComponent(context, collectedPage.page, item, tokens, overflows);
                 }
-                else if (await this._renderText(context, item.component, pageTokens)) {
-                    this._recordOverflow(context, item.component, tokens.pageName, pageTokens);
+                else {
+                    await this._renderText(context, item.component, pageTokens);
                 }
             });
         }
@@ -16316,7 +16376,7 @@ class ReportPdfService {
                     componentId: component.id,
                     page,
                     name: component.type === 'text'
-                        ? textOverflow(component, page, tokens).snippet
+                        ? textSnippet(component, tokens)
                         : exportTitle(component, tokens),
                 });
             }
@@ -16343,20 +16403,10 @@ class ReportPdfService {
         const masterTokens = { ...tokens, values: context.masterValues, filters: context.masterFilters };
         for (const component of (context.report.master?.components ?? []).filter(isDrawn)) {
             await this._guarded(context, component, HEADER_FOOTER_NAME, masterTokens, true, async () => {
-                if (await this._renderText(context, component, masterTokens)) {
-                    this._recordOverflow(context, component, HEADER_FOOTER_NAME, masterTokens);
-                }
+                await this._renderText(context, component, masterTokens);
             });
         }
     }
-    // Lists a text block that was cut, under the page the export's overflow gate
-    // names it by. A block cut again on a later page (a header or footer) keeps
-    // the first entry.
-    _recordOverflow(context, component, page, tokens) {
-        if (!context.textOverflows.has(component.id)) {
-            context.textOverflows.set(component.id, textOverflow(component, page, tokens));
-        }
-    }
     _titlePage(doc, collected, pageW, pageH) {
         doc.setFont('helvetica', 'bold');
         doc.setFontSize(28);
@@ -16371,11 +16421,11 @@ class ReportPdfService {
     // words between its tables are drawn line by line (_drawParagraphs) and each
     // table by autoTable from the line the words above it reach
     // (_drawTextTable). Only a block with a table is measured, for the edges
-    // and column widths the canvas gives its tables. Whatever runs past
-    // the block's height is left off — the canvas clips the block there too.
-    // Returns whether anything was.
+    // and column widths the canvas gives its tables. Words and table rows that
+    // run past the block's height draw on below it, as on the canvas; only the
+    // page's edge stops them.
     async _renderText(context, component, tokens) {
-        const box = this._textBox(component);
+        const box = this._textBox(component, context.pageH);
         const blocks = textBlocks(component.config?.html ?? '', tokens);
         const layout = blocks.some((block) => block.kind === 'table')
             ? await this._textLayout.measure(component, tokens)
@@ -16391,23 +16441,22 @@ class ReportPdfService {
                 ? this._drawParagraphs(context.doc, block.paragraphs, box, cursorY)
                 : this._drawTextTable(context, block.table, layout?.tables[tableIndex++] ?? null, box, onMargin ? cursorY : cursorY + TEXT_TABLE_MARGIN);
             if (drawn.cut) {
-                return true;
+                return;
             }
             cursorY = drawn.cursorY;
             onMargin = block.kind === 'table' || (onMargin && !block.paragraphs.length);
         }
-        return false;
     }
     // Where a text block's words go: inside its padding, each edge 1/8" unless
-    // set.
-    _textBox(component) {
+    // set, down to the bottom of the page (pageH).
+    _textBox(component, pageH) {
         const padding = component.config?.padding;
         const inset = (value) => (value ?? DEFAULT_COMPONENT_PADDING) * PT;
         return {
             left: component.x * PT + inset(padding?.left),
             top: component.y * PT + inset(padding?.top),
             width: component.w * PT - inset(padding?.left) - inset(padding?.right),
-            bottom: (component.y + component.h) * PT - inset(padding?.bottom),
+            bottom: pageH,
         };
     }
     // Paragraphs drawn line by line from cursorY down: each one's runs are broken
@@ -16471,9 +16520,9 @@ class ReportPdfService {
     // evenly. A row is as tall as its cells' words wrapped as _drawParagraphs
     // wraps them, and the words are drawn into each cell once autoTable has
     // drawn its grid lines and fill (_drawTextCell), so they keep their runs'
-    // fonts and colors. Only the rows the box holds are drawn, and a table that
-    // loses any, or runs past its page anyway, is cut. The cursor it leaves is
-    // TEXT_TABLE_MARGIN under it.
+    // fonts and colors. Only the rows that fit above the box's bottom, the
+    // page's edge, are drawn, and a table that loses any, or runs past its page
+    // anyway, is cut. The cursor it leaves is TEXT_TABLE_MARGIN under it.
     _drawTextTable(context, table, layout, box, top) {
         if (top >= box.bottom) {
             return { cursorY: top, cut: true };
@@ -16841,7 +16890,7 @@ class ReportPdfService {
     // totals row (null without one). The columns the viewer hid are left out.
     _tableCells(context, component, data, hiddenColumns) {
         const columns = listColumns(component, data, context.formatContext.locale, hiddenColumns);
-        const cells = data.rows.map((row) => columns.map((column) => this._pdfText(exportCell(row[column.column], column, context.timezone, context.formatContext, row))));
+        const cells = data.rows.map((row) => columns.map((column) => this._pdfText(exportCell(row[column.column], column, context.timezone, context.formatContext, row, data.valueLabels))));
         const foot = listTotalsRow(data, columns, context.timezone, context.formatContext);
         return {
             cells,
@@ -17362,10 +17411,6 @@ const PPTX_CONSTANT_LINE_SIZE = 1;
 // What the upper edge of a reference band is called in the data sheet and the
 // legend, after the band's own label on its lower edge.
 const PPTX_BAND_UPPER_SUFFIX = ' (upper)';
-// What the export's overflow gate says the deck does with a text block that
-// does not fit its box.
-const PPTX_OVERFLOW_NOTE = 'In the PowerPoint it runs past the bottom of its box, and table rows past it are '
-    + 'left out.';
 // The shortest text box a text block's words get between its tables, inches,
 // however close the canvas sets their top and bottom.
 const TEXT_SEGMENT_MIN_H = 0.05;
@@ -17416,15 +17461,10 @@ class ReportPptxService {
         pptx.layout = 'REPORT';
         pptx.title = report.name;
         this._titleSlide(pptx, collected, pageW, pageH);
-        // The text blocks that do not fit their box, by component id, so a header
-        // or footer block is listed once, not once per slide.
-        const overflows = new Map();
         for (const index of collected.pages.keys()) {
-            await this._renderPage(pptx, collected, index, overflows);
+            await this._renderPage(pptx, collected, index);
         }
         return {
-            overflows: [...overflows.values()],
-            overflowNote: PPTX_OVERFLOW_NOTE,
             // A slide's shapes are laid out by PowerPoint, so a component cannot
             // fail to draw here as a PDF table can.
             undrawn: [],
@@ -17437,7 +17477,7 @@ class ReportPptxService {
     // components sit on top of them exactly as on the canvas. Each layer's text
     // fills its value tokens with that layer's values: the master's or the
     // page's.
-    async _renderPage(pptx, collected, index, overflows) {
+    async _renderPage(pptx, collected, index) {
         const report = collected.report;
         const collectedPage = collected.pages[index];
         const slide = pptx.addSlide();
@@ -17445,37 +17485,27 @@ class ReportPptxService {
         const pageTokens = { ...tokens, values: collectedPage.values };
         const timezone = resolveReportTimezone(report);
         if (!collectedPage.page.masterHidden) {
-            await this._renderMaster(slide, collected, tokens, overflows);
+            await this._renderMaster(slide, collected, tokens);
         }
         for (const item of collectedPage.components) {
             if (item.component.type !== 'text') {
                 this._renderComponent(pptx, slide, item, tokens, timezone, collected.formatContext);
             }
-            else if (await this._renderText(slide, item.component, pageTokens)) {
-                this._recordOverflow(overflows, item.component, tokens.pageName, pageTokens);
+            else {
+                await this._renderText(slide, item.component, pageTokens);
             }
         }
     }
     // The header and footer, their value tokens filled with the master's
     // values. They read no page filter: its token prints the em dash there.
-    async _renderMaster(slide, collected, tokens, overflows) {
+    async _renderMaster(slide, collected, tokens) {
         const masterTokens = {
             ...tokens,
             values: collected.masterValues,
             filters: layerFilterFields(collected.filterFields, collected.report.filterGroups ?? [], null),
         };
         for (const component of (collected.report.master?.components ?? []).filter(isDrawn)) {
-            if (await this._renderText(slide, component, masterTokens)) {
-                this._recordOverflow(overflows, component, HEADER_FOOTER_NAME, masterTokens);
-            }
-        }
-    }
-    // Lists a text block that does not fit its box, under the page the export's
-    // overflow gate names it by. A block listed on an earlier slide (a header or
-    // footer) keeps that entry.
-    _recordOverflow(overflows, component, page, tokens) {
-        if (!overflows.has(component.id)) {
-            overflows.set(component.id, textOverflow(component, page, tokens));
+            await this._renderText(slide, component, masterTokens);
         }
     }
     _titleSlide(pptx, collected, pageW, pageH) {
@@ -17497,28 +17527,28 @@ class ReportPptxService {
         });
     }
     // A text block as native PowerPoint text, editable in the deck, each run
-    // carrying its own bold/italic/color/size. The block is measured as the
-    // canvas lays it out (ReportTextLayoutService). A block without a table is
-    // ONE text box (_addTextBox). A block with tables is a stack inside its
-    // padding (_renderTextStack). Returns whether anything runs past the bottom
-    // of the box or was left out.
+    // carrying its own bold/italic/color/size. A block without a table is ONE
+    // text box (_addTextBox). A block with tables is measured as the canvas lays
+    // it out (ReportTextLayoutService) and drawn as a stack inside its padding
+    // (_renderTextStack). Nothing is cut: what runs past the bottom of the box
+    // draws on below it, as on the canvas.
     async _renderText(slide, component, tokens) {
-        const html = component.config?.html ?? '';
-        const blocks = textBlocks(html, tokens);
-        const layout = await this._textLayout.measure(component, tokens);
+        const blocks = textBlocks(component.config?.html ?? '', tokens);
         const textCount = blocks.filter((block) => block.kind === 'text').length;
         const tableCount = blocks.length - textCount;
+        const layout = tableCount ? await this._textLayout.measure(component, tokens) : null;
         // The measure finds a block's parts one for one with textBlocks, unless the
         // canvas rendered the html differently. A block whose parts it did not
         // find falls back to the one text box, its tables read as lines of text.
-        if (!tableCount || layout.tables.length !== tableCount || layout.segments.length !== textCount) {
+        if (!layout || layout.tables.length !== tableCount || layout.segments.length !== textCount) {
             this._addTextBox(slide, component, blockParagraphs(blocks));
-            return layout.overflow;
+            return;
         }
-        return this._renderTextStack(slide, component, blocks, layout) || layout.overflow;
+        this._renderTextStack(slide, component, blocks, layout);
     }
     // The words as ONE text box over the whole block. Its inset is the block's
-    // padding, so the words land where they sat on screen.
+    // padding, so the words land where they sat on screen, and with no autofit
+    // PowerPoint runs what does not fit on past the box's bottom.
     _addTextBox(slide, component, paragraphs) {
         const runs = this._paragraphRuns(paragraphs);
         if (!runs.length) {
@@ -17538,33 +17568,28 @@ class ReportPptxService {
     // words before, between and after its tables, and a native table for each
     // table, each at the top the canvas gives it. PowerPoint spaces lines a
     // little differently from the canvas, so placing every part afresh keeps
-    // that drift from adding up down the block. Returns whether any part was
-    // left out.
+    // that drift from adding up down the block.
     _renderTextStack(slide, component, blocks, layout) {
         const padding = component.config?.padding;
         const x = component.x + (padding?.left ?? DEFAULT_COMPONENT_PADDING);
         const y = component.y + (padding?.top ?? DEFAULT_COMPONENT_PADDING);
         let segmentIndex = 0;
         let tableIndex = 0;
-        let flagged = false;
         for (const block of blocks) {
-            const leftOut = block.kind === 'text'
-                ? this._addTextSegment(slide, block.paragraphs, layout.segments[segmentIndex++], layout, x, y)
-                : this._addTextTable(slide, block.table, layout.tables[tableIndex++], layout, x, y);
-            flagged = flagged || leftOut;
+            if (block.kind === 'text') {
+                this._addTextSegment(slide, block.paragraphs, layout.segments[segmentIndex++], layout, x, y);
+            }
+            else {
+                this._addTextTable(slide, block.table, layout.tables[tableIndex++], x, y);
+            }
         }
-        return flagged;
     }
     // The words between two tables (or before the first, or after the last) as
     // a text box from the top of their first line to the bottom of their last,
-    // as wide as the block's content. A stretch that draws nothing is skipped,
-    // and one that starts below the box is left out. Returns whether it was.
+    // as wide as the block's content. A stretch that draws nothing is skipped.
     _addTextSegment(slide, paragraphs, segment, layout, x, y) {
         if (!segment || !paragraphs.some((paragraph) => paragraph.runs.length)) {
-            return false;
-        }
-        if (segment.top >= layout.contentHeight) {
-            return true;
+            return;
         }
         slide.addText(this._paragraphRuns(paragraphs), {
             x, y: y + segment.top, w: layout.contentWidth, h: Math.max(TEXT_SEGMENT_MIN_H, segment.bottom - segment.top),
@@ -17573,54 +17598,37 @@ class ReportPptxService {
             fontFace: 'Arial',
             fit: 'none',
         });
-        return false;
     }
     // A table as a native, editable PowerPoint table where the canvas puts it,
     // in its column widths and row heights, in the one look every renderer
-    // draws (TEXT_TABLE_* in text.ts). Only the rows that end inside the box are
-    // kept. Returns whether any row was left out.
-    _addTextTable(slide, table, tableLayout, layout, x, y) {
-        const kept = this._keptRows(tableLayout, layout.contentHeight);
-        if (kept) {
-            slide.addTable(this._tableRows(table, kept), {
-                x: x + tableLayout.left,
-                y: y + tableLayout.top,
-                w: tableLayout.width,
-                colW: tableLayout.columnWidths,
-                rowH: tableLayout.rowHeights.slice(0, kept),
-                autoPage: false,
-                fontFace: 'Arial',
-                fontSize: DEFAULT_TEXT_SIZE,
-                color: DEFAULT_TEXT_COLOR.replace('#', ''),
-                border: { type: 'solid', pt: TEXT_TABLE_BORDER_WIDTH, color: TEXT_TABLE_BORDER_COLOR.replace('#', '') },
-                margin: TEXT_TABLE_CELL_MARGIN,
-            });
+    // draws (TEXT_TABLE_* in text.ts). Every row is kept.
+    _addTextTable(slide, table, tableLayout, x, y) {
+        if (!table.rows.length) {
+            return;
         }
-        return kept < table.rows.length;
+        slide.addTable(this._tableRows(table), {
+            x: x + tableLayout.left,
+            y: y + tableLayout.top,
+            w: tableLayout.width,
+            colW: tableLayout.columnWidths,
+            rowH: tableLayout.rowHeights,
+            autoPage: false,
+            fontFace: 'Arial',
+            fontSize: DEFAULT_TEXT_SIZE,
+            color: DEFAULT_TEXT_COLOR.replace('#', ''),
+            border: { type: 'solid', pt: TEXT_TABLE_BORDER_WIDTH, color: TEXT_TABLE_BORDER_COLOR.replace('#', '') },
+            margin: TEXT_TABLE_CELL_MARGIN,
+        });
     }
-    // How many of a table's rows, from the top, end inside the box.
-    _keptRows(tableLayout, contentHeight) {
-        let bottom = tableLayout.top;
-        let kept = 0;
-        for (const rowHeight of tableLayout.rowHeights) {
-            bottom += rowHeight;
-            if (bottom > contentHeight + OVERFLOW_SLACK) {
-                break;
-            }
-            kept++;
-        }
-        return kept;
-    }
-    // The kept rows as pptxgenjs cells, each row in grid order. A PowerPoint
-    // table is a full grid, and pptxgenjs counts its columns on the first row
-    // and slips a merged cell's continuation into the row below at that cell's
-    // place in its own row. So a cell is written in its top left slot only, a
-    // slot no cell holds gets an empty cell, and a cell's spans end where they
-    // would reach past the kept rows or into a slot another cell holds
-    // (claimSlots).
-    _tableRows(table, kept) {
-        const slots = Array.from({ length: kept }, () => Array(table.columns).fill(null));
-        table.rows.slice(0, kept).forEach((row) => row.cells.forEach((cell) => claimSlots(slots, cell)));
+    // The rows as pptxgenjs cells, each row in grid order. A PowerPoint table is
+    // a full grid, and pptxgenjs counts its columns on the first row and slips a
+    // merged cell's continuation into the row below at that cell's place in its
+    // own row. So a cell is written in its top left slot only, a slot no cell
+    // holds gets an empty cell, and a cell's spans end where they would reach
+    // past the last row or into a slot another cell holds (claimSlots).
+    _tableRows(table) {
+        const slots = Array.from({ length: table.rows.length }, () => Array(table.columns).fill(null));
+        table.rows.forEach((row) => row.cells.forEach((cell) => claimSlots(slots, cell)));
         return slots.map((row, rowIndex) => row.flatMap((cell, column) => {
             if (!cell) {
                 return [{ text: '' }];
@@ -17772,7 +17780,9 @@ class ReportPptxService {
         };
         const pie = chartType === 'pie' || chartType === 'donut';
         const colorBy = isColorBy(config);
-        const labels = this._categoryLabels(extracted.categories, data.granularity, context.locale, chartDateLabel(config));
+        // Compact period labels, as the screen's pie names its slices: PowerPoint
+        // can't do the axis's styled second line, so the year is inline.
+        const labels = categoryLineLabels(extracted.categories, config, data, context.locale);
         // A 100% stacked chart's primary bars and areas plot the shares the screen
         // draws, stacked: PowerPoint's own percentStacked grouping is dropped on an
         // area chart, so one rule covers both. The data sheet holds the shares;
@@ -18179,7 +18189,7 @@ class ReportPptxService {
         const config = component.config;
         const waterfall = extractWaterfall(component, data);
         const measure = config.measures?.[0];
-        const labels = this._categoryLabels(waterfall.steps.map((step) => step.category), data.granularity, context.locale, chartDateLabel(config));
+        const labels = categoryLineLabels(waterfall.steps.map((step) => step.category), config, data, context.locale);
         const series = this._waterfallSeries(waterfall.steps);
         // The references are constant lines beside the stacked bars, on the one
         // value axis. Without any the chart is the one stacked bar chart, without
@@ -18246,17 +18256,6 @@ class ReportPptxService {
         }
         return [base, ...[...above, ...below].filter((entry) => entry.values.some((value) => value !== null))];
     }
-    // Compact period labels match the on-screen axis, in the report's locale and
-    // the axis's date label style (a short label takes its year only when the
-    // data spans years); PowerPoint can't do a styled second line, so it's
-    // inline.
-    _categoryLabels(categories, granularity, locale, dateLabel) {
-        if (!granularity) {
-            return categories;
-        }
-        const multiYear = spansMultipleYears(categories);
-        return categories.map((category) => formatPeriodLabel(category, granularity, multiYear, locale, dateLabel));
-    }
     // The axis label and title settings of a chart with one value axis, and that
     // axis's range (valueAxis). A pie has no value axis to title. Without a
     // valueAxis.label the value axis is titled by the first measure's label, as
@@ -18312,13 +18311,14 @@ class ReportPptxService {
             options: { bold: true, color: 'FFFFFF', fill: { color: '4E79A7' }, ...align(index) },
         }));
         // A date or formatted-number cell is a value written in the report's
-        // locale; every other cell prints the query's text as it came.
+        // locale; every other cell prints the query's text as it came, or its
+        // label (exportCell).
         const valueLocale = (index) => {
             const column = columns[index];
             return column.numeric || column.format === ReportListColumnFormat.Date ? context.locale : undefined;
         };
         const body = rows.map((row) => columns.map((column, index) => ({
-            text: exportCell(row[column.column], column, timezone, context, row),
+            text: exportCell(row[column.column], column, timezone, context, row, data.valueLabels),
             options: pptxRunOptions(align(index), valueLocale(index)),
         })));
         if (remaining > 0) {
@@ -18581,9 +18581,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 // Gives a text table's cell the grid slots it covers from its top left: as
 // many columns as are free in its top row, and as many rows down as are free
 // across those columns, at most its own spans. A slot is free until a cell
-// placed before it holds it, and the grid holds only the kept rows. So a span
-// the box cuts ends at the last kept row, and one the html makes overlap
-// another cell (which a browser draws on top of it) ends where they meet.
+// placed before it holds it. So a span the html takes past the last row ends
+// there, and one it makes overlap another cell (which a browser draws on top
+// of it) ends where they meet.
 function claimSlots(slots, cell) {
     const free = (row, column) => row < slots.length && column < slots[row].length && !slots[row][column];
     const columns = (count) => Array.from({ length: count }, (_, offset) => cell.column + offset);
@@ -18609,8 +18609,7 @@ const RETRY = 'retry';
 const DOWNLOAD = 'download';
 // Runs a report export end to end: collect every tile and value, refuse to
 // write a file that is missing any of them without saying so, build it, refuse
-// to save one that could not draw a component, or whose text does not fit its
-// boxes, without saying so, then save.
+// to save one that could not draw a component without saying so, then save.
 //
 // The gates are the reason this sits between the collector and the renderers
 // rather than in either of them. A deck with five blank pages is worse than no
@@ -18621,9 +18620,9 @@ const DOWNLOAD = 'download';
 // this is the only place that sees it.
 //
 // Failures are decided before the build, which is the expensive part (every
-// chart drawn offscreen, every text block measured), so neither a Retry nor a
-// Cancel pays for one. Text that does not fit its box is known only after it:
-// the build is what measures it.
+// chart drawn offscreen, every text table measured), so neither a Retry nor a
+// Cancel pays for one. A component that could not be drawn is known only after
+// it: the build is what draws it.
 class ReportExportService {
     _collector = inject(ReportExportCollectorService);
     _pdfService = inject(ReportPdfService);
@@ -18649,12 +18648,11 @@ class ReportExportService {
             ? this._run(report, listRows, build)
             : this._buildAndSave(collected, build)))));
     }
-    // Builds the file, then saves it once the undrawn and overflow gates let it
-    // through.
+    // Builds the file, then saves it once the undrawn gate lets it through.
     _buildAndSave(collected, build) {
         return from(build(collected))
             .pipe(switchMap((built) => this._undrawnGate(built)
-            .pipe(switchMap(() => this._overflowGate(built)), switchMap(() => from(Promise.resolve(built.save()))))));
+            .pipe(switchMap(() => from(Promise.resolve(built.save()))))));
     }
     // Resolves to DOWNLOAD when the export is whole (or the user accepted an
     // incomplete one) and to RETRY when they want another attempt. Cancelling
@@ -18704,31 +18702,6 @@ class ReportExportService {
         })
             .pipe(catchError(() => EMPTY));
     }
-    // Resolves to DOWNLOAD when every text block fits its box in the built file,
-    // or the user accepted one that does not. There is no Retry: the words are
-    // the report's own, so a second attempt would build the same file. Each block
-    // is named by its page and the start of its words, and the note says what
-    // this format does with the rest. Cancelling ends the export quietly, as at
-    // the failure gate, and the built file is dropped unsaved.
-    _overflowGate(built) {
-        if (!built.overflows.length) {
-            return of(DOWNLOAD);
-        }
-        // A block with no words to quote (an empty table, say) is named by its
-        // page alone, not by an empty pair of quotes.
-        const blocks = built.overflows
-            .map((overflow) => `<strong>${escapeHtml(overflow.page)}</strong>`
-            + (overflow.snippet ? ` (“${escapeHtml(overflow.snippet)}”)` : ''));
-        return this._prompt.confirm({
-            title: 'Text does not fit',
-            template: `Some text does not fit its box: ${blocks.join(', ')}. ${built.overflowNote}`,
-            buttons: [
-                { label: 'Download Anyway', value: DOWNLOAD, color: 'primary' },
-                { label: 'Cancel', cancel: true, color: '' },
-            ],
-        })
-            .pipe(catchError(() => EMPTY));
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportExportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportExportService });
 }
@@ -19549,7 +19522,7 @@ class FsAiReportComponent {
             ReportAiChatData,
             { provide: FsAiChatData, useExisting: ReportAiChatData },
             // Tree-shaken ECharts core + the 'report' house theme, loaded lazily.
-            provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-CUVOSBvJ.mjs').then((module) => module.default) }),
+            provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-D7WNr0Z4.mjs').then((module) => module.default) }),
             // The bar's date pickers start their weeks on Monday and list the built-in
             // presets; a preset only sets the days.
             provideReportDatePicker(),
@@ -19573,7 +19546,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         ReportAiChatData,
                         { provide: FsAiChatData, useExisting: ReportAiChatData },
                         // Tree-shaken ECharts core + the 'report' house theme, loaded lazily.
-                        provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-CUVOSBvJ.mjs').then((module) => module.default) }),
+                        provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-D7WNr0Z4.mjs').then((module) => module.default) }),
                         // The bar's date pickers start their weeks on Monday and list the built-in
                         // presets; a preset only sets the days.
                         provideReportDatePicker(),
@@ -19666,4 +19639,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  */
 
 export { FsAiReportsComponent as F, GRANULARITY_OPTIONS as G, REPORT_CHART_COLORS_CSS as R, REPORT_CHART_FONT_FAMILY as a, REPORT_AXIS_LABEL_FONT_SIZE as b, FsAiReportComponent as c, ReportData as d, ReportService as e, ReportFilterStateService as f, ReportNodeType as g, ReportState as h, ReportValueFormat as i, ReportValueFormula as j, ReportListColumnFormat as k, ReportNumberUnits as l, ReportChartDataLabels as m, ReportChartColor as n, ReportChartLineStyle as o, ReportChartMarkStat as p, ReportChartDateLabel as q, ReportChartSpanThrough as r, ReportChangePolarity as s };
-//# sourceMappingURL=firestitch-report-firestitch-report-CfvBTMrG.mjs.map
+//# sourceMappingURL=firestitch-report-firestitch-report-DWP3aywv.mjs.map