angular-my-report 0.1.0 → 0.1.1

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

@@ -1,326 +0,0 @@
-import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import type { ElementStyle, FormatKind, ReportElement, StyleRule } from '../../model/types';
-import { contentWidth, defaultFieldOptions } from '../../model/defaults';
-import { AGGREGATES } from '../../engine/expressions';
-import { DesignerStore } from '../designer.store';
-import { TablePropsComponent } from './table-props.component';
-import { ExprInputComponent } from './expr-input.component';
-import { ImagePickerComponent } from './image-picker.component';
-import { BarcodePropsComponent, ChartPropsComponent, CrosstabPropsComponent, QrPropsComponent } from './graphics-props.component';
-
-export const FORMAT_KINDS: FormatKind[] = ['none', 'number', 'currency', 'percent', 'date', 'datetime', 'time'];
-const NUMERIC_FORMATS = ['number', 'currency', 'percent'];
-
-@Component({
-  selector: 'rpt-element-props',
-  standalone: true,
-  imports: [FormsModule, ExprInputComponent, ImagePickerComponent, TablePropsComponent, ChartPropsComponent, BarcodePropsComponent, QrPropsComponent, CrosstabPropsComponent],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    @let e = el();
-    @let s = e.style;
-    <h3>
-      {{ title() }}
-      @if (count() > 1) {
-        <span class="muted">({{ count() }} selected)</span>
-      }
-    </h3>
-
-    @if (e.kind === 'image') {
-      <section>
-        <h4>Image</h4>
-        <rpt-image-picker [value]="e.text" (valueChange)="set(setText($event))" />
-        <label class="prop-row"><span>Fit</span>
-          <div class="prop-value">
-            <select [ngModel]="e.imageFit ?? 'contain'" (ngModelChange)="set(setFit($event))">
-              <option value="contain">Contain (whole image)</option>
-              <option value="cover">Cover (fill, crop)</option>
-              <option value="fill">Stretch</option>
-            </select>
-          </div>
-        </label>
-      </section>
-    }
-    @if (isText() || isCode()) {
-      <section>
-        <div class="prop-label">{{ isCode() ? 'Value' : 'Text' }} <span class="muted">— type {{ '{' }} for fields &amp; formulas, Ctrl+Space for suggestions</span></div>
-        <rpt-expr-input [value]="e.text" [rows]="3" (valueChange)="set(setText($event))" />
-        @if (isCode()) {
-          <p class="hint">Use fields, e.g. <code>{{ '{' }}OrderID{{ '}' }}</code>. The designer shows the first data row.</p>
-        }
-        @if (isText()) {
-          <p class="hint">
-            e.g. <code>{{ '{' }}Quantity * UnitPrice{{ '}' }}</code>, <code>{{ '{' }}sum(Amount, report){{ '}' }}</code>,
-            <code>{{ '{' }}iif(Amount &gt; 100, "High", "Low"){{ '}' }}</code>, <code>{{ '{' }}upper(Customer){{ '}' }}</code>,
-            <code>{{ '{' }}&#64;Country{{ '}' }}</code> (parameter). Outside Detail, a field shows the first record of its band.
-          </p>
-        }
-      </section>
-    }
-
-    <section>
-      <h4>Layout</h4>
-      <div class="grid2">
-        <label class="prop-row"><span>X</span>
-          <div class="prop-value"><input type="number" min="0" [ngModel]="e.x" (ngModelChange)="num($event, setX)" /></div>
-        </label>
-        <label class="prop-row"><span>Y</span>
-          <div class="prop-value"><input type="number" min="0" [ngModel]="e.y" (ngModelChange)="num($event, setY)" /></div>
-        </label>
-        <label class="prop-row"><span>Width</span>
-          <div class="prop-value"><input type="number" min="1" [ngModel]="e.w" (ngModelChange)="num($event, setW)" /></div>
-        </label>
-        <label class="prop-row"><span>Height</span>
-          <div class="prop-value">
-            @if (isTable()) {
-              <span class="muted">{{ e.h }} (auto)</span>
-            } @else {
-              <input type="number" min="1" [ngModel]="e.h" (ngModelChange)="num($event, setH)" />
-            }
-          </div>
-        </label>
-      </div>
-      @if (isText() || isTable()) {
-        <label class="check" title="Grow taller to fit long text; elements below are pushed down">
-          <input type="checkbox" [ngModel]="e.canGrow !== false" (ngModelChange)="set(setGrow($event))" />
-          Can grow (fit long text)
-        </label>
-      }
-    </section>
-
-    @if (isTable()) {
-      <rpt-table-props [el]="e" />
-    }
-    @switch (e.kind) {
-      @case ('chart') { @if (e.chart) { <rpt-chart-props [el]="e" /> } }
-      @case ('barcode') { @if (e.barcode) { <rpt-barcode-props [el]="e" /> } }
-      @case ('qrcode') { @if (e.qr) { <rpt-qr-props [el]="e" /> } }
-      @case ('crosstab') { @if (e.crosstab) { <rpt-crosstab-props [el]="e" /> } }
-    }
-
-    @if (isText()) {
-      <section>
-        <h4>Format</h4>
-        <label class="prop-row"><span>Type</span>
-          <div class="prop-value">
-            <select [ngModel]="e.format.kind" (ngModelChange)="set(setFormatKind($event))">
-              @for (k of formatKinds; track k) {
-                <option [value]="k">{{ k }}</option>
-              }
-            </select>
-          </div>
-        </label>
-        @if (numericFormats.includes(e.format.kind)) {
-          <label class="prop-row"><span>Decimals</span>
-            <div class="prop-value"><input type="number" min="0" [ngModel]="e.format.decimals" (ngModelChange)="num($event, setDecimals)" /></div>
-          </label>
-        }
-        @if (e.format.kind === 'currency') {
-          <label class="prop-row"><span>Currency</span>
-            <div class="prop-value"><input maxlength="3" [ngModel]="e.format.currency" (ngModelChange)="set(setCurrency($event))" /></div>
-          </label>
-        }
-      </section>
-    }
-
-    @if (isText()) {
-      @let o = options();
-      <section>
-        <h4>Field options</h4>
-        <div class="prop-label">Text when empty</div>
-        <rpt-expr-input [value]="o.nullText" placeholder="e.g. —  or  n/a" (valueChange)="setNullText($event)" />
-        <label class="check" title="Leave the box empty when the value is the same as in the row above (restarts on each page)">
-          <input type="checkbox" [ngModel]="o.hideDuplicates" (ngModelChange)="setHideDuplicates($event)" /> Hide repeated values
-        </label>
-        <div class="prop-label">Conditional formatting <span class="muted">— first matching rule wins</span></div>
-        @for (r of o.rules; track $index; let i = $index) {
-          <div class="col-card">
-            <div class="col-head">
-              <strong>When</strong><span class="spacer"></span>
-              <button class="small danger" title="Remove rule" (click)="removeRule(i)">✕</button>
-            </div>
-            <rpt-expr-input mode="expression" [value]="r.when" placeholder="e.g. Amount > 1000" (valueChange)="setRule(i, 'when', $event)" />
-            <div class="prop-row"><span>Text color</span>
-              <div class="prop-value">
-                <input type="color" [ngModel]="r.color" (ngModelChange)="setRule(i, 'color', $event)" />
-                <label class="check"><input type="checkbox" [ngModel]="r.bold" (ngModelChange)="setRule(i, 'bold', $event)" /> Bold</label>
-              </div>
-            </div>
-            <div class="prop-row"><span>Fill</span>
-              <div class="prop-value">
-                <input type="color" [ngModel]="r.background || '#ffffff'" (ngModelChange)="setRule(i, 'background', $event)" />
-                <button class="small" [class.on]="!r.background" (click)="setRule(i, 'background', '')">None</button>
-              </div>
-            </div>
-          </div>
-        }
-        <button (click)="addRule()">+ Add rule</button>
-      </section>
-    }
-
-    <section>
-      <h4>Visibility</h4>
-      <div class="prop-label">Visible when <span class="muted">— empty = always</span></div>
-      <rpt-expr-input mode="expression" [value]="e.visibleWhen ?? ''" placeholder="e.g. Amount > 0  or  @ShowDetails" (valueChange)="set(setVisible($event))" />
-    </section>
-
-    @if (isText() || isTable() || hasFont()) {
-      <section>
-        <h4>Font</h4>
-        <label class="prop-row"><span>Family</span>
-          <div class="prop-value">
-            <select [ngModel]="s.fontFamily" (ngModelChange)="style('fontFamily', $event)">
-              <option value="Segoe UI, Arial, sans-serif">Sans-serif</option>
-              <option value="Georgia, 'Times New Roman', serif">Serif</option>
-              <option value="Consolas, 'Courier New', monospace">Monospace</option>
-              <option value="Tahoma, Arial, sans-serif">Tahoma (Arabic)</option>
-            </select>
-          </div>
-        </label>
-        <label class="prop-row"><span>Size</span>
-          <div class="prop-value"><input type="number" min="4" [ngModel]="s.fontSize" (ngModelChange)="numStyle('fontSize', $event)" /></div>
-        </label>
-        <div class="btn-group">
-          <button [class.on]="s.bold" (click)="style('bold', !s.bold)"><b>B</b></button>
-          <button [class.on]="s.italic" (click)="style('italic', !s.italic)"><i>I</i></button>
-          <button [class.on]="s.underline" (click)="style('underline', !s.underline)"><u>U</u></button>
-          @if (isText()) {
-            <span class="sep"></span>
-            <button [class.on]="s.align === 'left'" (click)="style('align', 'left')" title="Align left">⇤</button>
-            <button [class.on]="s.align === 'center'" (click)="style('align', 'center')" title="Align center">↔</button>
-            <button [class.on]="s.align === 'right'" (click)="style('align', 'right')" title="Align right">⇥</button>
-          }
-          <span class="sep"></span>
-          <button [class.on]="s.vAlign === 'top'" (click)="style('vAlign', 'top')" title="Vertical top">⤒</button>
-          <button [class.on]="s.vAlign === 'middle'" (click)="style('vAlign', 'middle')" title="Vertical middle">↕</button>
-          <button [class.on]="s.vAlign === 'bottom'" (click)="style('vAlign', 'bottom')" title="Vertical bottom">⤓</button>
-        </div>
-        <label class="prop-row"><span>Color</span>
-          <div class="prop-value"><input type="color" [ngModel]="s.color" (ngModelChange)="style('color', $event)" /></div>
-        </label>
-        <label class="prop-row"><span>Padding</span>
-          <div class="prop-value"><input type="number" min="0" [ngModel]="s.padding" (ngModelChange)="numStyle('padding', $event)" /></div>
-        </label>
-      </section>
-    }
-
-    @if (!isTable() && e.kind !== 'crosstab') {
-      <section>
-        <h4>{{ e.kind === 'line' ? 'Line' : 'Border & fill' }}</h4>
-        @if (e.kind !== 'line' && e.kind !== 'image') {
-          <div class="prop-row"><span>Background</span>
-            <div class="prop-value">
-              <input type="color" [ngModel]="s.background === 'transparent' ? '#ffffff' : s.background" (ngModelChange)="style('background', $event)" />
-              <button class="small" [class.on]="s.background === 'transparent'" (click)="style('background', 'transparent')">None</button>
-            </div>
-          </div>
-        }
-        @if (e.kind === 'line' || e.kind === 'rect') {
-          <label class="prop-row"><span>Style</span>
-            <div class="prop-value">
-              <select [ngModel]="e.dash ?? 'solid'" (ngModelChange)="set(setDash($event))">
-                <option value="solid">Solid ───</option>
-                <option value="dashed">Dashed - - -</option>
-                <option value="dotted">Dotted ·····</option>
-              </select>
-            </div>
-          </label>
-        }
-        <label class="prop-row"><span>{{ e.kind === 'line' ? 'Thickness' : 'Border width' }}</span>
-          <div class="prop-value"><input type="number" min="0" [ngModel]="s.borderWidth" (ngModelChange)="numStyle('borderWidth', $event)" /></div>
-        </label>
-        <label class="prop-row"><span>{{ e.kind === 'line' ? 'Color' : 'Border color' }}</span>
-          <div class="prop-value"><input type="color" [ngModel]="s.borderColor" (ngModelChange)="style('borderColor', $event)" /></div>
-        </label>
-      </section>
-    }
-  `,
-})
-export class ElementPropsComponent {
-  private readonly store = inject(DesignerStore);
-  readonly el = input.required<ReportElement>();
-  readonly count = input(1);
-
-  protected readonly formatKinds = FORMAT_KINDS;
-  protected readonly numericFormats = NUMERIC_FORMATS;
-  protected readonly aggregates = AGGREGATES.join(', ');
-  protected readonly isText = computed(() => this.el().kind === 'text' || this.el().kind === 'field');
-  protected readonly isTable = computed(() => this.el().kind === 'table' && !!this.el().table);
-  protected readonly isCode = computed(() => this.el().kind === 'barcode' || this.el().kind === 'qrcode');
-  /** Elements that draw text with the element font (beyond labels/fields/tables). */
-  protected readonly hasFont = computed(() => ['chart', 'crosstab', 'barcode'].includes(this.el().kind));
-  protected readonly title = computed(() => {
-    const k = this.el().kind;
-    return k === 'field' ? 'Field' : k[0].toUpperCase() + k.slice(1);
-  });
-
-  private readonly width = computed(() => contentWidth(this.store.report().page));
-
-  // Setters (applied to every selected element).
-  protected readonly setX = (v: number) => (e: ReportElement) => (e.x = Math.max(0, Math.min(v, this.width() - e.w)));
-  protected readonly setY = (v: number) => (e: ReportElement) => (e.y = Math.max(0, v));
-  protected readonly setW = (v: number) => (e: ReportElement) => (e.w = Math.max(1, v));
-  protected readonly setH = (v: number) => (e: ReportElement) => (e.h = Math.max(1, v));
-  protected readonly setDecimals = (v: number) => (e: ReportElement) => (e.format.decimals = Math.max(0, Math.min(10, v)));
-  protected setText = (v: string) => (e: ReportElement) => (e.text = v);
-  protected setDash = (v: 'solid' | 'dashed' | 'dotted') => (e: ReportElement) => (e.dash = v === 'solid' ? undefined : v);
-  protected setFit = (v: 'contain' | 'cover' | 'fill') => (e: ReportElement) => (e.imageFit = v);
-  protected setVisible = (v: string) => (e: ReportElement) => (e.visibleWhen = v || undefined);
-  protected setGrow = (v: boolean) => (e: ReportElement) => (e.canGrow = v);
-  protected setFormatKind = (v: FormatKind) => (e: ReportElement) => (e.format.kind = v);
-  protected setCurrency = (v: string) => (e: ReportElement) => (e.format.currency = v.toUpperCase());
-
-  protected readonly options = computed(() => ({ ...defaultFieldOptions(), ...this.el().fieldOptions }));
-
-  protected setNullText(v: string): void {
-    this.set((e) => (e.fieldOptions = { ...defaultFieldOptions(), ...e.fieldOptions, nullText: v }));
-  }
-
-  protected setHideDuplicates(v: boolean): void {
-    this.set((e) => (e.fieldOptions = { ...defaultFieldOptions(), ...e.fieldOptions, hideDuplicates: v }));
-  }
-
-  protected addRule(): void {
-    this.set((e) => {
-      const o = { ...defaultFieldOptions(), ...e.fieldOptions };
-      e.fieldOptions = { ...o, rules: [...o.rules, { when: '', color: '#c4372f', background: '', bold: true }] };
-    });
-  }
-
-  protected setRule<K extends keyof StyleRule>(i: number, k: K, v: StyleRule[K]): void {
-    this.set((e) => {
-      const r = e.fieldOptions?.rules[i];
-      if (r) r[k] = v;
-    });
-  }
-
-  protected removeRule(i: number): void {
-    this.set((e) => e.fieldOptions?.rules.splice(i, 1));
-  }
-
-  protected set(fn: (e: ReportElement) => void): void {
-    const ids = this.store.selection().elementIds;
-    this.store.update((r) => {
-      for (const b of r.bands)
-        for (const e of b.elements)
-          if (ids.includes(e.id)) {
-            fn(e);
-            // Keep the element inside its band: grow the band to fit a new Y/height.
-            b.height = Math.max(b.height, e.y + e.h);
-          }
-    });
-  }
-
-  protected num(v: number | null, setter: (v: number) => (e: ReportElement) => void): void {
-    if (v != null && Number.isFinite(v)) this.set(setter(v));
-  }
-
-  protected style<K extends keyof ElementStyle>(k: K, v: ElementStyle[K]): void {
-    this.set((e) => (e.style[k] = v));
-  }
-
-  protected numStyle(k: 'fontSize' | 'padding' | 'borderWidth', v: number | null): void {
-    if (v != null && Number.isFinite(v)) this.style(k, Math.max(0, v));
-  }
-}

package/src/lib/ui/properties/expr-input.component.ts

@@ -1,191 +0,0 @@
-import { ChangeDetectionStrategy, Component, ElementRef, computed, inject, input, output, signal, viewChild } from '@angular/core';
-import { FUNCTIONS, SPECIAL_FIELDS, checkExpression, checkTemplate } from '../../engine/expressions';
-import { DesignerStore } from '../designer.store';
-
-interface Suggestion {
-  label: string;
-  insert: string;
-  kind: 'field' | 'param' | 'fn' | 'special';
-  detail: string;
-}
-
-const KIND_ICON = { field: 'Ab', param: '@', fn: 'ƒ', special: '★' } as const;
-const SIMPLE_NAME = /^[A-Za-z_À-￿][\w.À-￿]*$/;
-
-/**
- * Text box for templates ("Total: {sum(Amount)}") or bare expressions ("Amount > 100") with
- * autocomplete of fields, @parameters, functions and special fields, plus live validation.
- * Template mode suggests inside {…}; expression mode suggests anywhere. Ctrl+Space opens the list.
- */
-@Component({
-  selector: 'rpt-expr-input',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <div class="expr-input">
-      @if (rows() > 1) {
-        <textarea
-          #box
-          [rows]="rows()"
-          [value]="value()"
-          [placeholder]="placeholder()"
-          spellcheck="false"
-          (input)="onInput()"
-          (keydown)="onKey($event)"
-          (click)="refresh()"
-          (blur)="open.set(false)"
-        ></textarea>
-      } @else {
-        <input
-          #box
-          [value]="value()"
-          [placeholder]="placeholder()"
-          spellcheck="false"
-          (input)="onInput()"
-          (keydown)="onKey($event)"
-          (click)="refresh()"
-          (blur)="open.set(false)"
-        />
-      }
-      @if (open() && items().length) {
-        <ul class="ac-list" role="listbox">
-          @for (it of items(); track it.kind + it.label; let i = $index) {
-            <li [class.active]="i === active()" role="option" (mousedown)="$event.preventDefault(); accept(it)">
-              <span class="ac-kind ac-{{ it.kind }}">{{ icons[it.kind] }}</span>
-              <b>{{ it.label }}</b>
-              <span class="muted">{{ it.detail }}</span>
-            </li>
-          }
-        </ul>
-      }
-      @if (error()) {
-        <div class="expr-error">⚠ {{ error() }}</div>
-      }
-    </div>
-  `,
-})
-export class ExprInputComponent {
-  private readonly store = inject(DesignerStore);
-  readonly value = input('');
-  readonly mode = input<'template' | 'expression'>('template');
-  readonly rows = input(1);
-  readonly placeholder = input('');
-  readonly valueChange = output<string>();
-
-  private readonly box = viewChild<ElementRef<HTMLInputElement | HTMLTextAreaElement>>('box');
-  protected readonly icons = KIND_ICON;
-  protected readonly open = signal(false);
-  protected readonly active = signal(0);
-  protected readonly items = signal<Suggestion[]>([]);
-  /** The partial word being completed: [start, end) in the box. */
-  private word = { start: 0, end: 0 };
-
-  protected readonly error = computed(() => (this.mode() === 'template' ? checkTemplate(this.value()) : checkExpression(this.value())));
-
-  private readonly all = computed<Suggestion[]>(() => [
-    ...this.store.data().fields.map((f) => ({
-      label: f.name,
-      insert: SIMPLE_NAME.test(f.name) ? f.name : `[${f.name}]`,
-      kind: 'field' as const,
-      detail: f.type,
-    })),
-    ...(this.store.data().docFields ?? []).map((f) => ({ label: f.name, insert: f.name, kind: 'field' as const, detail: `document · ${f.type}` })),
-    ...(this.store.report().parameters ?? [])
-      .filter((p) => p.name)
-      .map((p) => ({ label: '@' + p.name, insert: '@' + p.name, kind: 'param' as const, detail: `parameter · ${p.type}` })),
-    ...FUNCTIONS.map((f) => ({ label: f.name + '()', insert: f.name, kind: 'fn' as const, detail: f.signature })),
-    ...SPECIAL_FIELDS.map((s) => ({ label: s, insert: s, kind: 'special' as const, detail: 'special field' })),
-  ]);
-
-  protected onInput(): void {
-    const el = this.box()?.nativeElement;
-    if (!el) return;
-    this.valueChange.emit(el.value);
-    this.refresh();
-  }
-
-  /** Works out whether the caret is inside an expression and which word is being typed. */
-  protected refresh(force = false): void {
-    const el = this.box()?.nativeElement;
-    if (!el) return;
-    const pos = el.selectionStart ?? el.value.length;
-    const before = el.value.slice(0, pos);
-    let start = 0;
-    if (this.mode() === 'template') {
-      const openAt = before.lastIndexOf('{');
-      if (openAt < 0 || before.lastIndexOf('}') > openAt) return this.open.set(false);
-      start = openAt + 1;
-    }
-    const seg = before.slice(start);
-    if ((seg.match(/"/g) ?? []).length % 2 === 1 || (seg.match(/'/g) ?? []).length % 2 === 1) return this.open.set(false); // inside a string
-    const word = /@?\[?[\w.À-￿]*$/.exec(seg)?.[0] ?? '';
-    this.word = { start: pos - word.length, end: pos };
-
-    const q = word.replace(/^[@[]/, '').toLowerCase();
-    let pool = this.all();
-    if (word.startsWith('@')) pool = pool.filter((s) => s.kind === 'param');
-    const matches = q
-      ? [...pool.filter((s) => s.label.replace(/^@/, '').toLowerCase().startsWith(q)), ...pool.filter((s) => !s.label.replace(/^@/, '').toLowerCase().startsWith(q) && s.label.toLowerCase().includes(q))]
-      : pool;
-    // Don't pop up for a finished word that exactly matches, unless asked.
-    const exact = matches.length === 1 && matches[0].insert.toLowerCase() === word.toLowerCase();
-    this.items.set(matches.slice(0, 40));
-    this.active.set(0);
-    this.open.set((force || word.length > 0 || /[{(,\s+\-*/<>=!?:&|]$/.test(before) || seg === '') && matches.length > 0 && !exact);
-  }
-
-  protected onKey(e: KeyboardEvent): void {
-    // Typing "}" right before an auto-inserted "}" steps over it instead of doubling it.
-    const el = this.box()?.nativeElement;
-    if (e.key === '}' && el && el.selectionStart === el.selectionEnd && el.value[el.selectionStart ?? -1] === '}') {
-      e.preventDefault();
-      const p = (el.selectionStart ?? 0) + 1;
-      el.setSelectionRange(p, p);
-      this.open.set(false);
-      return;
-    }
-    if (e.key === ' ' && e.ctrlKey) {
-      e.preventDefault();
-      this.refresh(true);
-      return;
-    }
-    if (!this.open() || !this.items().length) return;
-    const n = this.items().length;
-    if (e.key === 'ArrowDown') {
-      e.preventDefault();
-      this.active.set((this.active() + 1) % n);
-    } else if (e.key === 'ArrowUp') {
-      e.preventDefault();
-      this.active.set((this.active() - 1 + n) % n);
-    } else if (e.key === 'Enter' || e.key === 'Tab') {
-      e.preventDefault();
-      this.accept(this.items()[this.active()]);
-    } else if (e.key === 'Escape') {
-      e.preventDefault();
-      e.stopPropagation();
-      this.open.set(false);
-    }
-  }
-
-  /** Inserts the suggestion; functions get "()" with the caret inside, templates get a closing "}". */
-  protected accept(s: Suggestion): void {
-    const el = this.box()?.nativeElement;
-    if (!el) return;
-    const v = el.value;
-    const after = v.slice(this.word.end);
-    let insert = s.kind === 'fn' ? s.insert + '()' : s.insert;
-    let caret = this.word.start + (s.kind === 'fn' ? s.insert.length + 1 : insert.length);
-    if (this.mode() === 'template' && s.kind !== 'fn') {
-      const nextClose = after.indexOf('}');
-      const nextOpen = after.indexOf('{');
-      // Close the expression, but keep the caret inside so the formula can continue ("{Qty * …").
-      if (nextClose < 0 || (nextOpen >= 0 && nextOpen < nextClose)) insert += '}';
-    }
-    el.value = v.slice(0, this.word.start) + insert + after;
-    el.setSelectionRange(caret, caret);
-    el.focus();
-    this.valueChange.emit(el.value);
-    this.open.set(false);
-    if (s.kind === 'fn') this.refresh(true); // suggest the argument
-  }
-}