angular-my-report 0.1.0 → 0.1.1

package/src/lib/ui/properties/graphics-props.component.ts

@@ -1,260 +0,0 @@
-import { ChangeDetectionStrategy, Component, Directive, computed, inject, input } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import type { AggregateKind, ChartType, FormatKind, ReportElement } from '../../model/types';
-import { MAX_SERIES } from '../../engine/chart';
-import { DesignerStore, findElement } from '../designer.store';
-
-const AGGREGATES: AggregateKind[] = ['sum', 'count', 'avg', 'min', 'max'];
-const VALUE_FORMATS: FormatKind[] = ['none', 'number', 'currency', 'percent'];
-
-/** Base: edits one element in place by id (one undo step per change). */
-@Directive()
-abstract class SpecEditor {
-  protected readonly store = inject(DesignerStore);
-  readonly el = input.required<ReportElement>();
-  protected readonly aggregates = AGGREGATES;
-  protected readonly valueFormats = VALUE_FORMATS;
-
-  protected edit(fn: (e: ReportElement) => void): void {
-    const id = this.el().id;
-    this.store.update((r) => {
-      const f = findElement(r, id);
-      if (f) fn(f.el);
-    });
-  }
-
-  protected positive(v: number | null, fn: (n: number) => void): void {
-    if (v != null && Number.isFinite(v)) fn(Math.max(0, v));
-  }
-}
-
-@Component({
-  selector: 'rpt-chart-props',
-  standalone: true,
-  imports: [FormsModule],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    @let c = el().chart!;
-    <section>
-      <h4>Chart</h4>
-      <div class="btn-group">
-        @for (t of types; track t.value) {
-          <button [class.on]="c.type === t.value" [title]="t.label" (click)="edit(set('type', t.value))">{{ t.icon }} {{ t.label }}</button>
-        }
-      </div>
-      <label class="prop-row"><span>Title</span>
-        <div class="prop-value"><input [ngModel]="c.title" placeholder="e.g. Sales in {Country}" (ngModelChange)="edit(set('title', $event))" /></div>
-      </label>
-      <label class="prop-row"><span>Category</span>
-        <div class="prop-value"><input list="field-names" [ngModel]="c.categoryField" placeholder="Field" (ngModelChange)="edit(set('categoryField', $event))" /></div>
-      </label>
-      <label class="prop-row"><span>{{ pie() ? 'Value' : 'Values' }}</span>
-        <div class="prop-value">
-          <input list="field-names" [ngModel]="c.valueFields.join(', ')" [placeholder]="pie() ? 'Field' : 'Field, Field…'" (ngModelChange)="setValues($event)" />
-        </div>
-      </label>
-      <label class="prop-row"><span>Aggregate</span>
-        <div class="prop-value">
-          <select [ngModel]="c.aggregate" (ngModelChange)="edit(set('aggregate', $event))">
-            @for (a of aggregates; track a) { <option [value]="a">{{ a }}</option> }
-          </select>
-        </div>
-      </label>
-      <label class="prop-row"><span>Sort</span>
-        <div class="prop-value">
-          <select [ngModel]="c.sort" (ngModelChange)="edit(set('sort', $event))">
-            <option value="none">Data order</option>
-            <option value="category">By category</option>
-            <option value="valueDesc">Value, high → low</option>
-            <option value="valueAsc">Value, low → high</option>
-          </select>
-        </div>
-      </label>
-      <label class="prop-row"><span>Max items</span>
-        <div class="prop-value"><input type="number" min="1" [ngModel]="c.maxCategories" (ngModelChange)="positive($event, setMax)" /></div>
-      </label>
-      <label class="prop-row"><span>Value format</span>
-        <div class="prop-value">
-          <select [ngModel]="c.valueFormat.kind" (ngModelChange)="edit(setFormat($event))">
-            @for (k of valueFormats; track k) { <option [value]="k">{{ k }}</option> }
-          </select>
-        </div>
-      </label>
-      <label class="check"><input type="checkbox" [ngModel]="c.showLegend" (ngModelChange)="edit(set('showLegend', $event))" /> Legend</label>
-      <label class="check"><input type="checkbox" [ngModel]="c.showValues" (ngModelChange)="edit(set('showValues', $event))" /> Value labels</label>
-      @if (!pie()) {
-        <label class="check"><input type="checkbox" [ngModel]="c.showGrid" (ngModelChange)="edit(set('showGrid', $event))" /> Grid lines</label>
-      }
-      <p class="hint">
-        Charts the rows of its band: all rows in Report Header/Footer, the group's rows in a Group band.
-        @if (pie()) { Pie slices beyond {{ maxSeries }} fold into "Other". } @else { Up to {{ maxSeries }} value fields (one colour each). }
-      </p>
-    </section>
-  `,
-})
-export class ChartPropsComponent extends SpecEditor {
-  protected readonly maxSeries = MAX_SERIES;
-  protected readonly types: { value: ChartType; label: string; icon: string }[] = [
-    { value: 'bar', label: 'Bar', icon: '▮' },
-    { value: 'hbar', label: 'H-bar', icon: '▬' },
-    { value: 'line', label: 'Line', icon: '⟋' },
-    { value: 'area', label: 'Area', icon: '◭' },
-    { value: 'pie', label: 'Pie', icon: '◔' },
-    { value: 'doughnut', label: 'Doughnut', icon: '◯' },
-  ];
-  protected readonly pie = computed(() => this.el().chart?.type === 'pie' || this.el().chart?.type === 'doughnut');
-  protected set = <K extends keyof NonNullable<ReportElement['chart']>>(k: K, v: NonNullable<ReportElement['chart']>[K]) => (e: ReportElement) =>
-    (e.chart![k] = v);
-  protected setMax = (n: number) => this.edit((e) => (e.chart!.maxCategories = Math.max(1, Math.round(n))));
-  protected setFormat = (k: FormatKind) => (e: ReportElement) => (e.chart!.valueFormat.kind = k);
-  protected setValues(v: string): void {
-    const fields = v.split(',').map((s) => s.trim()).filter(Boolean).slice(0, MAX_SERIES);
-    this.edit((e) => (e.chart!.valueFields = fields));
-  }
-}
-
-@Component({
-  selector: 'rpt-barcode-props',
-  standalone: true,
-  imports: [FormsModule],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    @let b = el().barcode!;
-    <section>
-      <h4>Barcode</h4>
-      <label class="prop-row"><span>Type</span>
-        <div class="prop-value">
-          <select [ngModel]="b.symbology" (ngModelChange)="edit(setType($event))">
-            <option value="code128">Code 128 (any text)</option>
-            <option value="ean13">EAN-13 (12–13 digits)</option>
-          </select>
-        </div>
-      </label>
-      <label class="check"><input type="checkbox" [ngModel]="b.showText" (ngModelChange)="edit(setShowText($event))" /> Show text under bars</label>
-      <label class="prop-row"><span>Bar color</span>
-        <div class="prop-value"><input type="color" [ngModel]="b.color" (ngModelChange)="edit(setColor($event))" /></div>
-      </label>
-      <p class="hint">Keep bars dark on a light background for reliable scanning. EAN-13 adds the check digit when you give 12 digits.</p>
-    </section>
-  `,
-})
-export class BarcodePropsComponent extends SpecEditor {
-  protected setType = (v: 'code128' | 'ean13') => (e: ReportElement) => (e.barcode!.symbology = v);
-  protected setShowText = (v: boolean) => (e: ReportElement) => (e.barcode!.showText = v);
-  protected setColor = (v: string) => (e: ReportElement) => (e.barcode!.color = v);
-}
-
-@Component({
-  selector: 'rpt-qr-props',
-  standalone: true,
-  imports: [FormsModule],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    @let q = el().qr!;
-    <section>
-      <h4>QR code</h4>
-      <label class="prop-row"><span>Error level</span>
-        <div class="prop-value">
-          <select [ngModel]="q.errorCorrection" (ngModelChange)="edit(setLevel($event))">
-            <option value="L">L — 7% (smallest)</option>
-            <option value="M">M — 15%</option>
-            <option value="Q">Q — 25%</option>
-            <option value="H">H — 30% (most robust)</option>
-          </select>
-        </div>
-      </label>
-      <label class="prop-row"><span>Color</span>
-        <div class="prop-value"><input type="color" [ngModel]="q.color" (ngModelChange)="edit(setColor($event))" /></div>
-      </label>
-    </section>
-  `,
-})
-export class QrPropsComponent extends SpecEditor {
-  protected setLevel = (v: 'L' | 'M' | 'Q' | 'H') => (e: ReportElement) => (e.qr!.errorCorrection = v);
-  protected setColor = (v: string) => (e: ReportElement) => (e.qr!.color = v);
-}
-
-@Component({
-  selector: 'rpt-crosstab-props',
-  standalone: true,
-  imports: [FormsModule],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    @let x = el().crosstab!;
-    <section>
-      <h4>Cross table</h4>
-      <label class="prop-row"><span>Rows</span>
-        <div class="prop-value"><input list="field-names" [ngModel]="x.rowField" placeholder="Field" (ngModelChange)="edit(set('rowField', $event))" /></div>
-      </label>
-      <label class="prop-row"><span>Columns</span>
-        <div class="prop-value"><input list="field-names" [ngModel]="x.columnField" placeholder="Field" (ngModelChange)="edit(set('columnField', $event))" /></div>
-      </label>
-      <label class="prop-row"><span>Value</span>
-        <div class="prop-value"><input list="field-names" [ngModel]="x.valueField" placeholder="Field (empty = count)" (ngModelChange)="edit(set('valueField', $event))" /></div>
-      </label>
-      <label class="prop-row"><span>Aggregate</span>
-        <div class="prop-value">
-          <select [ngModel]="x.aggregate" (ngModelChange)="edit(set('aggregate', $event))">
-            @for (a of aggregates; track a) { <option [value]="a">{{ a }}</option> }
-          </select>
-        </div>
-      </label>
-      <div class="grid2">
-        <label class="prop-row"><span>Format</span>
-          <div class="prop-value">
-            <select [ngModel]="x.valueFormat.kind" (ngModelChange)="edit(setFormat($event))">
-              @for (k of valueFormats; track k) { <option [value]="k">{{ k }}</option> }
-            </select>
-          </div>
-        </label>
-        <label class="prop-row"><span>Decimals</span>
-          <div class="prop-value"><input type="number" min="0" [ngModel]="x.valueFormat.decimals" (ngModelChange)="positive($event, setDecimals)" /></div>
-        </label>
-      </div>
-      <label class="prop-row"><span>Corner text</span>
-        <div class="prop-value"><input [ngModel]="x.cornerText" placeholder="Rows / Columns" (ngModelChange)="edit(set('cornerText', $event))" /></div>
-      </label>
-      <label class="check"><input type="checkbox" [ngModel]="x.showRowTotals" (ngModelChange)="edit(set('showRowTotals', $event))" /> Row totals (right column)</label>
-      <label class="check"><input type="checkbox" [ngModel]="x.showColumnTotals" (ngModelChange)="edit(set('showColumnTotals', $event))" /> Column totals (bottom row)</label>
-      <label class="check"><input type="checkbox" [ngModel]="x.repeatHeader" (ngModelChange)="edit(set('repeatHeader', $event))" /> Repeat header on each page</label>
-    </section>
-    <section>
-      <h4>Look</h4>
-      <div class="grid2">
-        <label class="prop-row"><span>Header h</span>
-          <div class="prop-value"><input type="number" min="8" [ngModel]="x.headerHeight" (ngModelChange)="positive($event, setHeaderH)" /></div>
-        </label>
-        <label class="prop-row"><span>Row h</span>
-          <div class="prop-value"><input type="number" min="8" [ngModel]="x.rowHeight" (ngModelChange)="positive($event, setRowH)" /></div>
-        </label>
-      </div>
-      <div class="prop-row"><span>Header fill</span>
-        <div class="prop-value"><input type="color" [ngModel]="x.headerBackground" (ngModelChange)="edit(set('headerBackground', $event))" /></div>
-      </div>
-      <div class="prop-row"><span>Header text</span>
-        <div class="prop-value"><input type="color" [ngModel]="x.headerColor" (ngModelChange)="edit(set('headerColor', $event))" /></div>
-      </div>
-      <div class="prop-row"><span>Alt. row</span>
-        <div class="prop-value">
-          <input type="color" [ngModel]="x.stripeBackground === 'transparent' ? '#ffffff' : x.stripeBackground" (ngModelChange)="edit(set('stripeBackground', $event))" />
-          <button class="small" [class.on]="x.stripeBackground === 'transparent'" (click)="edit(set('stripeBackground', 'transparent'))">None</button>
-        </div>
-      </div>
-      <div class="prop-row"><span>Grid lines</span>
-        <div class="prop-value">
-          <input type="color" [ngModel]="x.gridColor === 'transparent' ? '#ffffff' : x.gridColor" (ngModelChange)="edit(set('gridColor', $event))" />
-          <button class="small" [class.on]="x.gridColor === 'transparent'" (click)="edit(set('gridColor', 'transparent'))">None</button>
-        </div>
-      </div>
-      <p class="hint">Pivots the rows of its band. It grows to fit and continues onto new pages in the preview.</p>
-    </section>
-  `,
-})
-export class CrosstabPropsComponent extends SpecEditor {
-  protected set = <K extends keyof NonNullable<ReportElement['crosstab']>>(k: K, v: NonNullable<ReportElement['crosstab']>[K]) => (e: ReportElement) =>
-    (e.crosstab![k] = v);
-  protected setFormat = (k: FormatKind) => (e: ReportElement) => (e.crosstab!.valueFormat.kind = k);
-  protected setDecimals = (n: number) => this.edit((e) => (e.crosstab!.valueFormat.decimals = Math.min(10, Math.round(n))));
-  protected setHeaderH = (n: number) => this.edit((e) => (e.crosstab!.headerHeight = Math.max(8, n)));
-  protected setRowH = (n: number) => this.edit((e) => (e.crosstab!.rowHeight = Math.max(8, n)));
-}

package/src/lib/ui/properties/image-picker.component.ts

@@ -1,62 +0,0 @@
-import { ChangeDetectionStrategy, Component, computed, input, output, signal } from '@angular/core';
-import { SafeImagePipe } from '../designer/safe-image.pipe';
-
-const MAX_BYTES = 5 * 1024 * 1024;
-
-/** Image source: a URL (may contain {Field}) or an uploaded file embedded as a base64 data URL. */
-@Component({
-  selector: 'rpt-image-picker',
-  standalone: true,
-  imports: [SafeImagePipe],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <div class="image-picker">
-      @if (embedded()) {
-        <div class="muted">Embedded image · {{ size() }}</div>
-      } @else {
-        <input [value]="value()" [placeholder]="placeholder()" (input)="valueChange.emit($any($event.target).value)" />
-      }
-      <div class="inline">
-        <button class="small" (click)="file.click()">Upload…</button>
-        @if (value()) {
-          <button class="small" (click)="valueChange.emit('')">Remove</button>
-        }
-        <input #file type="file" accept="image/*" hidden (change)="upload($event)" />
-      </div>
-      @if (value() && !value().includes('{')) {
-        <img class="thumb" alt="" [src]="value() | safeImage" />
-      }
-      @if (message()) {
-        <div class="error">{{ message() }}</div>
-      }
-    </div>
-  `,
-})
-export class ImagePickerComponent {
-  readonly value = input('');
-  readonly placeholder = input('https://… or {Field}');
-  readonly valueChange = output<string>();
-
-  protected readonly message = signal('');
-  protected readonly embedded = computed(() => this.value().startsWith('data:'));
-  /** Approximate decoded size of the embedded image. */
-  protected readonly size = computed(() => {
-    const bytes = Math.round(((this.value().length - this.value().indexOf(',') - 1) * 3) / 4);
-    return bytes < 1024 ? `${bytes} bytes` : `${(bytes / 1024).toFixed(bytes < 10240 ? 1 : 0)} KB`;
-  });
-
-  /** Reads the file as base64 (data URL) so the image travels inside the report file. */
-  protected upload(e: Event): void {
-    const inputEl = e.target as HTMLInputElement;
-    const f = inputEl.files?.[0];
-    inputEl.value = '';
-    if (!f) return;
-    if (!f.type.startsWith('image/')) return this.message.set('Please choose an image file.');
-    if (f.size > MAX_BYTES) return this.message.set(`Image is ${(f.size / 1048576).toFixed(1)} MB; the limit is 5 MB.`);
-    this.message.set('');
-    const reader = new FileReader();
-    reader.onload = () => this.valueChange.emit(String(reader.result));
-    reader.onerror = () => this.message.set('Could not read the file.');
-    reader.readAsDataURL(f);
-  }
-}

package/src/lib/ui/properties/properties-panel.component.ts

@@ -1,37 +0,0 @@
-import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
-import { DesignerStore, findElement } from '../designer.store';
-import { ElementPropsComponent } from './element-props.component';
-import { BandPropsComponent } from './band-props.component';
-import { ReportPropsComponent } from './report-props.component';
-
-/** Right-hand panel: properties of the selected element(s), else the selected band, else the report. */
-@Component({
-  selector: 'rpt-properties-panel',
-  standalone: true,
-  imports: [ElementPropsComponent, BandPropsComponent, ReportPropsComponent],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <aside class="panel right-panel">
-      <datalist id="field-names">
-        @for (f of store.data().fields; track f.name) {
-          <option [value]="f.name"></option>
-        }
-      </datalist>
-      @if (first(); as f) {
-        <rpt-element-props [el]="f.el" [count]="store.selection().elementIds.length" />
-      } @else if (bandId()) {
-        <rpt-band-props [bandId]="bandId()!" />
-      } @else {
-        <rpt-report-props />
-      }
-    </aside>
-  `,
-})
-export class PropertiesPanelComponent {
-  protected readonly store = inject(DesignerStore);
-  protected readonly first = computed(() => {
-    const ids = this.store.selection().elementIds;
-    return ids.length ? findElement(this.store.report(), ids[0]) : null;
-  });
-  protected readonly bandId = computed(() => this.store.selection().bandId);
-}

package/src/lib/ui/properties/report-extras.component.ts

@@ -1,198 +0,0 @@
-import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import type { PageBackground, ParameterType, ReportParameter, Watermark } from '../../model/types';
-import { defaultBackground, defaultWatermark } from '../../model/defaults';
-import { DesignerStore } from '../designer.store';
-import { ExprInputComponent } from './expr-input.component';
-import { ImagePickerComponent } from './image-picker.component';
-
-/** Report-level settings: parameters, row filter, watermark and page background. */
-@Component({
-  selector: 'rpt-report-extras',
-  standalone: true,
-  imports: [FormsModule, ExprInputComponent, ImagePickerComponent],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <section>
-      <h4>Parameters</h4>
-      @for (p of parameters(); track $index; let i = $index) {
-        <div class="col-card">
-          <div class="col-head">
-            <strong>&#64;{{ p.name || '?' }}</strong><span class="spacer"></span>
-            <button class="small danger" title="Remove parameter" (click)="removeParam(i)">✕</button>
-          </div>
-          <div class="grid2">
-            <label class="prop-row"><span>Name</span>
-              <div class="prop-value"><input [ngModel]="p.name" placeholder="Country" (ngModelChange)="setParam(i, 'name', clean($event))" /></div>
-            </label>
-            <label class="prop-row"><span>Type</span>
-              <div class="prop-value">
-                <select [ngModel]="p.type" (ngModelChange)="setParam(i, 'type', $event)">
-                  @for (t of types; track t) { <option [value]="t">{{ t }}</option> }
-                </select>
-              </div>
-            </label>
-          </div>
-          <label class="prop-row"><span>Label</span>
-            <div class="prop-value"><input [ngModel]="p.label" placeholder="Shown in the preview" (ngModelChange)="setParam(i, 'label', $event)" /></div>
-          </label>
-          <label class="prop-row"><span>Default</span>
-            <div class="prop-value"><input [ngModel]="p.defaultValue" (ngModelChange)="setParam(i, 'defaultValue', $event)" /></div>
-          </label>
-          <label class="prop-row"><span>Choices</span>
-            <div class="prop-value"><input [ngModel]="p.options" placeholder="Egypt, USA, France (optional)" (ngModelChange)="setParam(i, 'options', $event)" /></div>
-          </label>
-        </div>
-      }
-      <button (click)="addParam()">+ Add parameter</button>
-      <p class="hint">
-        Use as <code>&#64;Name</code> in formulas, <code>{{ '{' }}&#64;Name{{ '}' }}</code> in the data source URL or OData filter
-        (e.g. <code>Country eq '{{ '{' }}&#64;Country{{ '}' }}'</code>), or pass in the page address: <code>?Country=Egypt</code>.
-      </p>
-    </section>
-
-    <section>
-      <h4>Filter rows</h4>
-      <rpt-expr-input mode="expression" [value]="filter()" placeholder="e.g. Country == @Country" (valueChange)="setFilter($event)" />
-      <p class="hint">Only rows where this is true are printed. Empty = all rows.</p>
-    </section>
-
-    <section>
-      @let w = watermark();
-      <h4>Watermark</h4>
-      <label class="check"><input type="checkbox" [ngModel]="w.enabled" (ngModelChange)="setWm('enabled', $event)" /> Show watermark</label>
-      @if (w.enabled) {
-        <div class="tabs">
-          <button [class.on]="w.kind === 'text'" (click)="setWm('kind', 'text')">Text</button>
-          <button [class.on]="w.kind === 'image'" (click)="setWm('kind', 'image')">Image</button>
-        </div>
-        @if (w.kind === 'text') {
-          <rpt-expr-input [value]="w.text" placeholder="CONFIDENTIAL" (valueChange)="setWm('text', $event)" />
-          <div class="grid2">
-            <label class="prop-row"><span>Size</span>
-              <div class="prop-value"><input type="number" min="8" [ngModel]="w.fontSize" (ngModelChange)="num($event, 'fontSize', 8)" /></div>
-            </label>
-            <div class="prop-row"><span>Color</span>
-              <div class="prop-value">
-                <input type="color" [ngModel]="w.color" (ngModelChange)="setWm('color', $event)" />
-                <label class="check"><input type="checkbox" [ngModel]="w.bold" (ngModelChange)="setWm('bold', $event)" /> Bold</label>
-              </div>
-            </div>
-          </div>
-        } @else {
-          <rpt-image-picker [value]="w.image" placeholder="https://…/logo.png" (valueChange)="setWm('image', $event)" />
-          <label class="prop-row"><span>Width %</span>
-            <div class="prop-value"><input type="number" min="5" max="200" [ngModel]="w.imageScale" (ngModelChange)="num($event, 'imageScale', 5)" /></div>
-          </label>
-        }
-        <label class="prop-row"><span>Opacity</span>
-          <div class="prop-value">
-            <input type="range" min="0.02" max="1" step="0.01" [ngModel]="w.opacity" (ngModelChange)="setWm('opacity', +$event)" />
-            <span class="muted">{{ (w.opacity * 100).toFixed(0) }}%</span>
-          </div>
-        </label>
-        <label class="prop-row"><span>Angle</span>
-          <div class="prop-value">
-            <input type="range" min="-90" max="90" step="1" [ngModel]="w.angle" (ngModelChange)="setWm('angle', +$event)" />
-            <span class="muted">{{ w.angle }}°</span>
-          </div>
-        </label>
-        <div class="grid2">
-          <label class="prop-row"><span>Layer</span>
-            <div class="prop-value">
-              <select [ngModel]="w.layer" (ngModelChange)="setWm('layer', $event)">
-                <option value="front">In front</option>
-                <option value="behind">Behind</option>
-              </select>
-            </div>
-          </label>
-          <label class="prop-row"><span>Pages</span>
-            <div class="prop-value">
-              <select [ngModel]="w.pages" (ngModelChange)="setWm('pages', $event)">
-                <option value="all">All</option>
-                <option value="first">First only</option>
-              </select>
-            </div>
-          </label>
-        </div>
-      }
-    </section>
-
-    <section>
-      @let b = background();
-      <h4>Background image</h4>
-      <label class="check"><input type="checkbox" [ngModel]="b.enabled" (ngModelChange)="setBg('enabled', $event)" /> Page background</label>
-      @if (b.enabled) {
-        <rpt-image-picker [value]="b.image" placeholder="https://…/letterhead.png" (valueChange)="setBg('image', $event)" />
-        <div class="grid2">
-          <label class="prop-row"><span>Fit</span>
-            <div class="prop-value">
-              <select [ngModel]="b.fit" (ngModelChange)="setBg('fit', $event)">
-                <option value="cover">Cover page</option>
-                <option value="contain">Contain</option>
-                <option value="stretch">Stretch</option>
-                <option value="center">Center (actual size)</option>
-              </select>
-            </div>
-          </label>
-          <label class="prop-row"><span>Pages</span>
-            <div class="prop-value">
-              <select [ngModel]="b.pages" (ngModelChange)="setBg('pages', $event)">
-                <option value="all">All</option>
-                <option value="first">First only</option>
-              </select>
-            </div>
-          </label>
-        </div>
-        <p class="hint">Fills the whole sheet behind everything (e.g. a letterhead). For a see-through mark, use Watermark.</p>
-      }
-    </section>
-  `,
-})
-export class ReportExtrasComponent {
-  private readonly store = inject(DesignerStore);
-  protected readonly types: ParameterType[] = ['string', 'number', 'date', 'boolean'];
-  protected readonly parameters = computed(() => this.store.report().parameters ?? []);
-  protected readonly filter = computed(() => this.store.report().filter ?? '');
-  protected readonly watermark = computed(() => ({ ...defaultWatermark(), ...this.store.report().watermark }));
-  protected readonly background = computed(() => ({ ...defaultBackground(), ...this.store.report().background }));
-
-  /** Parameter names: letters, digits and _ only (they are used as @Name). */
-  protected clean(v: string): string {
-    return v.replace(/[^\wÀ-￿]/g, '');
-  }
-
-  protected addParam(): void {
-    this.store.update((r) => {
-      const n = (r.parameters?.length ?? 0) + 1;
-      r.parameters = [...(r.parameters ?? []), { name: `Param${n}`, label: '', type: 'string', defaultValue: '', options: '' }];
-    });
-  }
-
-  protected setParam<K extends keyof ReportParameter>(i: number, k: K, v: ReportParameter[K]): void {
-    this.store.update((r) => {
-      const p = r.parameters?.[i];
-      if (p) p[k] = v;
-    });
-  }
-
-  protected removeParam(i: number): void {
-    this.store.update((r) => r.parameters?.splice(i, 1));
-  }
-
-  protected setFilter(v: string): void {
-    this.store.update((r) => (r.filter = v || undefined));
-  }
-
-  protected setWm<K extends keyof Watermark>(k: K, v: Watermark[K]): void {
-    this.store.update((r) => (r.watermark = { ...defaultWatermark(), ...r.watermark, [k]: v }));
-  }
-
-  protected num(v: number | null, k: 'fontSize' | 'imageScale', min: number): void {
-    if (v != null && Number.isFinite(v)) this.setWm(k, Math.max(min, v));
-  }
-
-  protected setBg<K extends keyof PageBackground>(k: K, v: PageBackground[K]): void {
-    this.store.update((r) => (r.background = { ...defaultBackground(), ...r.background, [k]: v }));
-  }
-}