@myrmidon/gve-core 7.0.10 → 7.0.12

package/fesm2022/myrmidon-gve-core.mjs

@@ -35,7 +35,6 @@ import { filter, debounceTime as debounceTime$1 } from 'rxjs/operators';
 import { MatBadgeModule, MatBadge } from '@angular/material/badge';
 import * as i12 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
-import { NgeMonacoModule } from '@cisstech/nge/monaco';
 import { customAlphabet } from 'nanoid';
 import { CommonModule } from '@angular/common';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
@@ -43,7 +42,7 @@ import * as i11 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatSliderModule } from '@angular/material/slider';
 import { MatSlideToggle } from '@angular/material/slide-toggle';
-import { DEFAULT_SETTINGS, GveSnapshotRendition } from '@myrmidon/gve-snapshot-rendition';
+import { DEFAULT_SETTINGS } from '@myrmidon/gve-snapshot-rendition';
 
 /**
  * Operation feature set policy.
@@ -80,7 +79,8 @@ class BaseTextCharComponent {
         /**
          * The character to display.
          */
-        this.char = input(...(ngDevMode ? [undefined, { debugName: "char" }] : /* istanbul ignore next */ []));
+        this.char = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "char" }] : /* istanbul ignore next */ []));
         /**
          * Emitted when the character is clicked.
          */
@@ -99,10 +99,10 @@ class BaseTextCharComponent {
     onCharDblClick(event) {
         this.charDblPick.emit({ char: this.char(), event });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: BaseTextCharComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: BaseTextCharComponent, isStandalone: true, selector: "gve-base-text-char", inputs: { char: { classPropertyName: "char", publicName: "char", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { charPick: "charPick", charDblPick: "charDblPick" }, ngImport: i0, template: "@if (char()) {\r\n<div matRipple id=\"container\" (click)=\"onCharClick($event)\" (dblclick)=\"onCharDblClick($event)\">\r\n  <div\r\n    id=\"c-label\"\r\n    [style.fontSize]=\"char()!.emSize + 'em'\"\r\n    [style.borderColor]=\"char()!.borderColor\"\r\n  >\r\n    {{ char()!.label }}\r\n  </div>\r\n  <div\r\n    id=\"c-id\"\r\n    [style.fontSize]=\"char()!.emSize / 2 + 'em'\"\r\n    [style.color]=\"char()!.color | colorToContrast\"\r\n    [style.borderColor]=\"char()!.borderColor\"\r\n    [style.backgroundColor]=\"char()!.color\"\r\n  >\r\n    {{ char()!.id }}\r\n  </div>\r\n</div>\r\n}\r\n", styles: ["div#container{cursor:pointer;flex-direction:column;align-items:center}div#c-label{border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;padding:6px;height:1.5em;align-items:center;justify-content:center;text-align:center}div#c-id{margin-top:4px;margin-bottom:16px;border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;padding:6px;align-items:center;justify-content:center;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "pipe", type: ColorToContrastPipe, name: "colorToContrast" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: BaseTextCharComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: BaseTextCharComponent, isStandalone: true, selector: "gve-base-text-char", inputs: { char: { classPropertyName: "char", publicName: "char", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { charPick: "charPick", charDblPick: "charDblPick" }, ngImport: i0, template: "@if (char()) {\r\n<div matRipple id=\"container\" (click)=\"onCharClick($event)\" (dblclick)=\"onCharDblClick($event)\">\r\n  <div\r\n    id=\"c-label\"\r\n    [style.fontSize]=\"char()!.emSize + 'em'\"\r\n    [style.borderColor]=\"char()!.borderColor\"\r\n  >\r\n    {{ char()!.label }}\r\n  </div>\r\n  <div\r\n    id=\"c-id\"\r\n    [style.fontSize]=\"char()!.emSize / 2 + 'em'\"\r\n    [style.color]=\"char()!.color | colorToContrast\"\r\n    [style.borderColor]=\"char()!.borderColor\"\r\n    [style.backgroundColor]=\"char()!.color\"\r\n  >\r\n    {{ char()!.id }}\r\n  </div>\r\n</div>\r\n}\r\n", styles: ["div#container{cursor:pointer;flex-direction:column;align-items:center}div#c-label{border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;padding:6px;height:1.5em;align-items:center;justify-content:center;text-align:center}div#c-id{margin-top:4px;margin-bottom:16px;border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;padding:6px;align-items:center;justify-content:center;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "pipe", type: ColorToContrastPipe, name: "colorToContrast" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: BaseTextCharComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: BaseTextCharComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gve-base-text-char', imports: [MatRippleModule, ColorToContrastPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (char()) {\r\n<div matRipple id=\"container\" (click)=\"onCharClick($event)\" (dblclick)=\"onCharDblClick($event)\">\r\n  <div\r\n    id=\"c-label\"\r\n    [style.fontSize]=\"char()!.emSize + 'em'\"\r\n    [style.borderColor]=\"char()!.borderColor\"\r\n  >\r\n    {{ char()!.label }}\r\n  </div>\r\n  <div\r\n    id=\"c-id\"\r\n    [style.fontSize]=\"char()!.emSize / 2 + 'em'\"\r\n    [style.color]=\"char()!.color | colorToContrast\"\r\n    [style.borderColor]=\"char()!.borderColor\"\r\n    [style.backgroundColor]=\"char()!.color\"\r\n  >\r\n    {{ char()!.id }}\r\n  </div>\r\n</div>\r\n}\r\n", styles: ["div#container{cursor:pointer;flex-direction:column;align-items:center}div#c-label{border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;padding:6px;height:1.5em;align-items:center;justify-content:center;text-align:center}div#c-id{margin-top:4px;margin-bottom:16px;border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;padding:6px;align-items:center;justify-content:center;text-align:center}\n"] }]
         }], propDecorators: { char: [{ type: i0.Input, args: [{ isSignal: true, alias: "char", required: false }] }], charPick: [{ type: i0.Output, args: ["charPick"] }], charDblPick: [{ type: i0.Output, args: ["charDblPick"] }] } });
@@ -138,45 +138,55 @@ class BaseTextViewComponent {
         /**
          * The default color for the text.
          */
-        this.defaultColor = input('#DBDBDB', ...(ngDevMode ? [{ debugName: "defaultColor" }] : /* istanbul ignore next */ []));
+        this.defaultColor = input('#DBDBDB', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "defaultColor" }] : /* istanbul ignore next */ []));
         /**
          * The default border color for the text.
          */
-        this.defaultBorderColor = input('#DBDBDB', ...(ngDevMode ? [{ debugName: "defaultBorderColor" }] : /* istanbul ignore next */ []));
+        this.defaultBorderColor = input('#DBDBDB', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "defaultBorderColor" }] : /* istanbul ignore next */ []));
         /**
          * The color for the selected text.
          */
-        this.selectionColor = input('#3E92CC', ...(ngDevMode ? [{ debugName: "selectionColor" }] : /* istanbul ignore next */ []));
+        this.selectionColor = input('#3E92CC', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectionColor" }] : /* istanbul ignore next */ []));
         /**
          * The color for search match highlights.
          */
-        this.searchHighlightColor = input('#FFD54F', ...(ngDevMode ? [{ debugName: "searchHighlightColor" }] : /* istanbul ignore next */ []));
+        this.searchHighlightColor = input('#FFD54F', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchHighlightColor" }] : /* istanbul ignore next */ []));
         /**
          * True if line numbers should be displayed next to each line.
          */
-        this.hasLineNumber = input(false, ...(ngDevMode ? [{ debugName: "hasLineNumber" }] : /* istanbul ignore next */ []));
+        this.hasLineNumber = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasLineNumber" }] : /* istanbul ignore next */ []));
         /**
          * The search query entered in the toolbar.
          */
-        this.searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : /* istanbul ignore next */ []));
+        this.searchQuery = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchQuery" }] : /* istanbul ignore next */ []));
         /**
          * The positions of search matches (start and length pairs).
          */
-        this.searchMatches = signal([], ...(ngDevMode ? [{ debugName: "searchMatches" }] : /* istanbul ignore next */ []));
+        this.searchMatches = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchMatches" }] : /* istanbul ignore next */ []));
         /**
          * The text to display.
          */
-        this.text = input([], ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+        this.text = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
         /**
          * An optional callback to get the color of a character node.
          * Return null to use the default color.
          */
-        this.colorCallback = input(...(ngDevMode ? [undefined, { debugName: "colorCallback" }] : /* istanbul ignore next */ []));
+        this.colorCallback = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "colorCallback" }] : /* istanbul ignore next */ []));
         /**
          * An optional callback to get the color of a character node.
          * Return null to use the default color.
          */
-        this.borderColorCallback = input(...(ngDevMode ? [undefined, { debugName: "borderColorCallback" }] : /* istanbul ignore next */ []));
+        this.borderColorCallback = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "borderColorCallback" }] : /* istanbul ignore next */ []));
         /**
          * Emitted when a character is picked.
          */
@@ -192,11 +202,13 @@ class BaseTextViewComponent {
          */
         this.baseLines = computed(() => {
             return this.buildLines(this.text(), this.colorCallback(), this.borderColorCallback());
-        }, ...(ngDevMode ? [{ debugName: "baseLines" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseLines" }] : /* istanbul ignore next */ []));
         /**
          * Signal for tracking selected range state.
          */
-        this.selectedRange = signal(null, ...(ngDevMode ? [{ debugName: "selectedRange" }] : /* istanbul ignore next */ []));
+        this.selectedRange = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedRange" }] : /* istanbul ignore next */ []));
         /**
          * The lines with selection or search highlight state applied.
          * Search highlights take priority over selection when present.
@@ -242,30 +254,35 @@ class BaseTextViewComponent {
                 }
                 return char;
             }));
-        }, ...(ngDevMode ? [{ debugName: "lines" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "lines" }] : /* istanbul ignore next */ []));
         /**
          * Check if there is an active selection.
          */
         this.hasSelection = computed(() => {
             return this.selectedRange() !== null;
-        }, ...(ngDevMode ? [{ debugName: "hasSelection" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasSelection" }] : /* istanbul ignore next */ []));
         /**
          * Get the total count of matched characters.
          */
         this.matchCount = computed(() => {
             const matches = this.searchMatches();
             return matches.reduce((sum, m) => sum + m.length, 0);
-        }, ...(ngDevMode ? [{ debugName: "matchCount" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "matchCount" }] : /* istanbul ignore next */ []));
         /**
          * Check if a search is active (query is not empty).
          */
         this.isSearchActive = computed(() => {
             return this.searchQuery().length > 0;
-        }, ...(ngDevMode ? [{ debugName: "isSearchActive" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isSearchActive" }] : /* istanbul ignore next */ []));
         /**
          * Space-separated list of character IDs collected via double-click.
          */
-        this.pickedIds = signal('', ...(ngDevMode ? [{ debugName: "pickedIds" }] : /* istanbul ignore next */ []));
+        this.pickedIds = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pickedIds" }] : /* istanbul ignore next */ []));
         // reset selection when text changes
         effect(() => {
             this.text();
@@ -632,10 +649,10 @@ class BaseTextViewComponent {
         this._clipboard.copy(ids);
         this._snackBar.open('IDs copied', 'OK', { duration: 2000 });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: BaseTextViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: BaseTextViewComponent, isStandalone: true, selector: "gve-base-text-view", inputs: { defaultColor: { classPropertyName: "defaultColor", publicName: "defaultColor", isSignal: true, isRequired: false, transformFunction: null }, defaultBorderColor: { classPropertyName: "defaultBorderColor", publicName: "defaultBorderColor", isSignal: true, isRequired: false, transformFunction: null }, selectionColor: { classPropertyName: "selectionColor", publicName: "selectionColor", isSignal: true, isRequired: false, transformFunction: null }, searchHighlightColor: { classPropertyName: "searchHighlightColor", publicName: "searchHighlightColor", isSignal: true, isRequired: false, transformFunction: null }, hasLineNumber: { classPropertyName: "hasLineNumber", publicName: "hasLineNumber", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, colorCallback: { classPropertyName: "colorCallback", publicName: "colorCallback", isSignal: true, isRequired: false, transformFunction: null }, borderColorCallback: { classPropertyName: "borderColorCallback", publicName: "borderColorCallback", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { charPick: "charPick", rangePick: "rangePick" }, ngImport: i0, template: "<!-- Toolbar -->\r\n<div class=\"toolbar\">\r\n  <mat-form-field appearance=\"outline\" class=\"search-field\">\r\n    <input\r\n      matInput\r\n      [ngModel]=\"searchQuery()\"\r\n      (ngModelChange)=\"onSearchInput($event)\"\r\n      placeholder=\"search\"\r\n    />\r\n    @if (searchQuery()) {\r\n      <button\r\n        type=\"button\"\r\n        matSuffix\r\n        mat-icon-button\r\n        matTooltip=\"Clear search\"\r\n        (click)=\"clearSearch()\"\r\n      >\r\n        <mat-icon class=\"mat-warn\">close</mat-icon>\r\n      </button>\r\n    }\r\n  </mat-form-field>\r\n\r\n  @if (isSearchActive()) {\r\n    <span class=\"match-count\" [class.no-matches]=\"matchCount() === 0\">\r\n      {{ matchCount() }}\r\n    </span>\r\n  }\r\n\r\n  <button\r\n    type=\"button\"\r\n    mat-stroked-button\r\n    matTooltip=\"Copy selection text to clipboard\"\r\n    [disabled]=\"!hasSelection()\"\r\n    (click)=\"copySelection()\"\r\n  >\r\n    <mat-icon>content_copy</mat-icon>\r\n    copy\r\n  </button>\r\n\r\n  <button\r\n    type=\"button\"\r\n    mat-stroked-button\r\n    matTooltip=\"Copy selection coordinates to clipboard\"\r\n    [disabled]=\"!hasSelection()\"\r\n    (click)=\"copyCoordinates()\"\r\n  >\r\n    <mat-icon>pin_drop</mat-icon>\r\n    copy coords\r\n  </button>\r\n\r\n  @if (pickedIds()) {\r\n    <span class=\"picked-ids\" matTooltip=\"Double-clicked character IDs\">{{ pickedIds() }}</span>\r\n    <button\r\n      type=\"button\"\r\n      mat-icon-button\r\n      matTooltip=\"Clear collected IDs\"\r\n      (click)=\"clearPickedIds()\"\r\n    >\r\n      <mat-icon>clear</mat-icon>\r\n    </button>\r\n    <button\r\n      type=\"button\"\r\n      mat-icon-button\r\n      matTooltip=\"Copy collected IDs to clipboard\"\r\n      (click)=\"copyPickedIds()\"\r\n    >\r\n      <mat-icon>content_copy</mat-icon>\r\n    </button>\r\n  }\r\n</div>\r\n\r\n<!-- Text display -->\r\n<div id=\"text\" tabindex=\"0\" (keydown)=\"onKeyDown($event)\">\r\n  @for (line of lines(); track $index) {\r\n    <div class=\"line\">\r\n      @if (hasLineNumber()) {\r\n        <div class=\"nr\">\r\n          {{ lines().indexOf(line) + 1 }}\r\n        </div>\r\n      }\r\n      @for (c of line; track c.id) {\r\n        <gve-base-text-char [char]=\"c\" (charPick)=\"onCharPick($event)\" (charDblPick)=\"onCharDblPick($event)\" />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".toolbar{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}.search-field{flex:0 0 auto;min-width:200px;max-width:300px}.match-count{font-weight:700;padding:4px 8px;border-radius:4px;color:var(--mat-sys-success)}.match-count.no-matches{background-color:var(--mat-sys-error-container);color:var(--mat-sys-on-error-container)}.line{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.line *{flex:0 0 auto}.nr{font-size:.8em;font-weight:700;color:var(--mat-sys-on-surface-variant);margin:0 4px}.picked-ids{font-family:monospace;font-size:.85em;padding:4px 8px;border-radius:4px;background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container);border:1px solid var(--mat-sys-primary);max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$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: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: BaseTextCharComponent, selector: "gve-base-text-char", inputs: ["char"], outputs: ["charPick", "charDblPick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: BaseTextViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: BaseTextViewComponent, isStandalone: true, selector: "gve-base-text-view", inputs: { defaultColor: { classPropertyName: "defaultColor", publicName: "defaultColor", isSignal: true, isRequired: false, transformFunction: null }, defaultBorderColor: { classPropertyName: "defaultBorderColor", publicName: "defaultBorderColor", isSignal: true, isRequired: false, transformFunction: null }, selectionColor: { classPropertyName: "selectionColor", publicName: "selectionColor", isSignal: true, isRequired: false, transformFunction: null }, searchHighlightColor: { classPropertyName: "searchHighlightColor", publicName: "searchHighlightColor", isSignal: true, isRequired: false, transformFunction: null }, hasLineNumber: { classPropertyName: "hasLineNumber", publicName: "hasLineNumber", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, colorCallback: { classPropertyName: "colorCallback", publicName: "colorCallback", isSignal: true, isRequired: false, transformFunction: null }, borderColorCallback: { classPropertyName: "borderColorCallback", publicName: "borderColorCallback", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { charPick: "charPick", rangePick: "rangePick" }, ngImport: i0, template: "<!-- Toolbar -->\r\n<div class=\"toolbar\">\r\n  <mat-form-field appearance=\"outline\" class=\"search-field\">\r\n    <input\r\n      matInput\r\n      [ngModel]=\"searchQuery()\"\r\n      (ngModelChange)=\"onSearchInput($event)\"\r\n      placeholder=\"search\"\r\n    />\r\n    @if (searchQuery()) {\r\n      <button\r\n        type=\"button\"\r\n        matSuffix\r\n        mat-icon-button\r\n        matTooltip=\"Clear search\"\r\n        (click)=\"clearSearch()\"\r\n      >\r\n        <mat-icon class=\"mat-warn\">close</mat-icon>\r\n      </button>\r\n    }\r\n  </mat-form-field>\r\n\r\n  @if (isSearchActive()) {\r\n    <span class=\"match-count\" [class.no-matches]=\"matchCount() === 0\">\r\n      {{ matchCount() }}\r\n    </span>\r\n  }\r\n\r\n  <button\r\n    type=\"button\"\r\n    mat-stroked-button\r\n    matTooltip=\"Copy selection text to clipboard\"\r\n    [disabled]=\"!hasSelection()\"\r\n    (click)=\"copySelection()\"\r\n  >\r\n    <mat-icon>content_copy</mat-icon>\r\n    copy\r\n  </button>\r\n\r\n  <button\r\n    type=\"button\"\r\n    mat-stroked-button\r\n    matTooltip=\"Copy selection coordinates to clipboard\"\r\n    [disabled]=\"!hasSelection()\"\r\n    (click)=\"copyCoordinates()\"\r\n  >\r\n    <mat-icon>pin_drop</mat-icon>\r\n    copy coords\r\n  </button>\r\n\r\n  @if (pickedIds()) {\r\n    <span class=\"picked-ids\" matTooltip=\"Double-clicked character IDs\">{{ pickedIds() }}</span>\r\n    <button\r\n      type=\"button\"\r\n      mat-icon-button\r\n      matTooltip=\"Clear collected IDs\"\r\n      (click)=\"clearPickedIds()\"\r\n    >\r\n      <mat-icon>clear</mat-icon>\r\n    </button>\r\n    <button\r\n      type=\"button\"\r\n      mat-icon-button\r\n      matTooltip=\"Copy collected IDs to clipboard\"\r\n      (click)=\"copyPickedIds()\"\r\n    >\r\n      <mat-icon>content_copy</mat-icon>\r\n    </button>\r\n  }\r\n</div>\r\n\r\n<!-- Text display -->\r\n<div id=\"text\" tabindex=\"0\" (keydown)=\"onKeyDown($event)\">\r\n  @for (line of lines(); track $index) {\r\n    <div class=\"line\">\r\n      @if (hasLineNumber()) {\r\n        <div class=\"nr\">\r\n          {{ lines().indexOf(line) + 1 }}\r\n        </div>\r\n      }\r\n      @for (c of line; track c.id) {\r\n        <gve-base-text-char [char]=\"c\" (charPick)=\"onCharPick($event)\" (charDblPick)=\"onCharDblPick($event)\" />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".toolbar{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}.search-field{flex:0 0 auto;min-width:200px;max-width:300px}.match-count{font-weight:700;padding:4px 8px;border-radius:4px;color:var(--mat-sys-success)}.match-count.no-matches{background-color:var(--mat-sys-error-container);color:var(--mat-sys-on-error-container)}.line{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.line *{flex:0 0 auto}.nr{font-size:.8em;font-weight:700;color:var(--mat-sys-on-surface-variant);margin:0 4px}.picked-ids{font-family:monospace;font-size:.85em;padding:4px 8px;border-radius:4px;background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container);border:1px solid var(--mat-sys-primary);max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { 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: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: BaseTextCharComponent, selector: "gve-base-text-char", inputs: ["char"], outputs: ["charPick", "charDblPick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: BaseTextViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: BaseTextViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gve-base-text-view', imports: [
                         FormsModule,
@@ -674,18 +691,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
  */
 class FeatureEditorComponent {
     constructor(formBuilder) {
-        this.nameControl = viewChild('nameCtl', ...(ngDevMode ? [{ debugName: "nameControl" }] : /* istanbul ignore next */ []));
+        this.nameControl = viewChild('nameCtl', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nameControl" }] : /* istanbul ignore next */ []));
         /**
          * The list of feature names to display in the name selection.
          * This is used when you have a closed list of features.
          */
-        this.featNames = input(...(ngDevMode ? [undefined, { debugName: "featNames" }] : /* istanbul ignore next */ []));
+        this.featNames = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "featNames" }] : /* istanbul ignore next */ []));
         /**
          * The feature values map. When specified and the user selects a feature
          * name present in the map keys, the corresponding values will be used
          * to populate the value selection.
          */
-        this.featValues = input(...(ngDevMode ? [undefined, { debugName: "featValues" }] : /* istanbul ignore next */ []));
+        this.featValues = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "featValues" }] : /* istanbul ignore next */ []));
         /**
          * The feature properties map. When specified and the user selects a
          * feature name present in the map keys, the corresponding properties
@@ -693,23 +713,27 @@ class FeatureEditorComponent {
          * global, and short-lived. This allows presetting these properties
          * for specific features without hardcoding that logic in the component.
          */
-        this.featProps = input(...(ngDevMode ? [undefined, { debugName: "featProps" }] : /* istanbul ignore next */ []));
+        this.featProps = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "featProps" }] : /* istanbul ignore next */ []));
         /**
          * The feature to edit.
          */
-        this.feature = model(...(ngDevMode ? [undefined, { debugName: "feature" }] : /* istanbul ignore next */ []));
+        this.feature = model(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "feature" }] : /* istanbul ignore next */ []));
         /**
          * True if the feature is a variant operation feature, which has
          * additional properties like negation, global, and short-lived.
          */
-        this.isVar = input(false, ...(ngDevMode ? [{ debugName: "isVar" }] : /* istanbul ignore next */ []));
+        this.isVar = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isVar" }] : /* istanbul ignore next */ []));
         /**
          * The IDs of the features that are multi-valued. Used to determine
          * if the current feature being edited should display multi-value controls.
          */
         this.multiValuedFeatureIds = input([
             'r_hints',
-        ], ...(ngDevMode ? [{ debugName: "multiValuedFeatureIds" }] : /* istanbul ignore next */ []));
+        ], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "multiValuedFeatureIds" }] : /* istanbul ignore next */ []));
         /**
          * Event emitted when the user cancels the feature editing.
          */
@@ -719,13 +743,15 @@ class FeatureEditorComponent {
          * Set synchronously in updateForm (on feature load) and in the
          * name.valueChanges subscription (on user interaction).
          */
-        this.nameIds = signal(undefined, ...(ngDevMode ? [{ debugName: "nameIds" }] : /* istanbul ignore next */ []));
+        this.nameIds = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nameIds" }] : /* istanbul ignore next */ []));
         /**
          * Tracks the current feature name. Updated synchronously in updateForm
          * and in the name.valueChanges subscription so that isMultiValued stays
          * in sync regardless of whether the change was programmatic or user-driven.
          */
-        this._currentName = signal('', ...(ngDevMode ? [{ debugName: "_currentName" }] : /* istanbul ignore next */ []));
+        this._currentName = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_currentName" }] : /* istanbul ignore next */ []));
         /**
          * Computed signal that determines if the current feature is multi-valued.
          * Automatically updates when either _currentName or multiValuedFeatureIds
@@ -735,7 +761,8 @@ class FeatureEditorComponent {
             const ids = this.multiValuedFeatureIds();
             const name = this._currentName();
             return !!ids && !!name && ids.includes(name);
-        }, ...(ngDevMode ? [{ debugName: "isMultiValued" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isMultiValued" }] : /* istanbul ignore next */ []));
         this.name = formBuilder.control('', {
             validators: [Validators.required, Validators.maxLength(50)],
             nonNullable: true,
@@ -899,10 +926,10 @@ class FeatureEditorComponent {
                 setPolicy: this.setPolicy.value,
             });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: FeatureEditorComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: FeatureEditorComponent, isStandalone: true, selector: "gve-feature-editor", inputs: { featNames: { classPropertyName: "featNames", publicName: "featNames", isSignal: true, isRequired: false, transformFunction: null }, featValues: { classPropertyName: "featValues", publicName: "featValues", isSignal: true, isRequired: false, transformFunction: null }, featProps: { classPropertyName: "featProps", publicName: "featProps", isSignal: true, isRequired: false, transformFunction: null }, feature: { classPropertyName: "feature", publicName: "feature", isSignal: true, isRequired: false, transformFunction: null }, isVar: { classPropertyName: "isVar", publicName: "isVar", isSignal: true, isRequired: false, transformFunction: null }, multiValuedFeatureIds: { classPropertyName: "multiValuedFeatureIds", publicName: "multiValuedFeatureIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { feature: "featureChange", featureCancel: "featureCancel" }, viewQueries: [{ propertyName: "nameControl", first: true, predicate: ["nameCtl"], descendants: true, isSignal: true }], ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <div class=\"form-row\">\r\n    @if (featNames()?.length) {\r\n      <!-- name (bound) -->\r\n      <mat-form-field>\r\n        <mat-label>name</mat-label>\r\n        <mat-select #nameCtl [formControl]=\"name\">\r\n          @for (i of featNames(); track i) {\r\n            <mat-option [value]=\"i.id\">{{ i.label }}</mat-option>\r\n          }\r\n        </mat-select>\r\n        @if ($any(name).errors?.required && (name.dirty || name.touched)) {\r\n          <mat-error>name required</mat-error>\r\n        }\r\n      </mat-form-field>\r\n    } @else {\r\n      <!-- name (free) -->\r\n      <mat-form-field>\r\n        <mat-label>name</mat-label>\r\n        <input #nameCtl matInput [formControl]=\"name\" />\r\n        @if ($any(name).errors?.required && (name.dirty || name.touched)) {\r\n          <mat-error>name required</mat-error>\r\n        }\r\n        @if ($any(name).errors?.maxLength && (name.dirty || name.touched)) {\r\n          <mat-error>name too long</mat-error>\r\n        }\r\n      </mat-form-field>\r\n    }\r\n\r\n    <!-- value (bound) -->\r\n    @if (nameIds()?.length) {\r\n      <!-- prefix for closed value sets -->\r\n      <mat-form-field class=\"small-input\">\r\n        <mat-label>prefix</mat-label>\r\n        <input matInput [formControl]=\"valuePrefix\" placeholder=\"e.g. @2:\" />\r\n        @if ($any(valuePrefix).errors?.noColon && (valuePrefix.dirty || valuePrefix.touched)) {\r\n          <mat-error>prefix must end with :</mat-error>\r\n        }\r\n      </mat-form-field>\r\n\r\n      @if (isMultiValued()) {\r\n        <!-- multi-valued: select for picking + text for composite -->\r\n        <mat-form-field>\r\n          <mat-label>select value</mat-label>\r\n          <mat-select [formControl]=\"selectedValue\">\r\n            @for (e of nameIds(); track e) {\r\n              <mat-option [value]=\"e.id\">{{ e.label }}</mat-option>\r\n            }\r\n          </mat-select>\r\n        </mat-form-field>\r\n        <button\r\n          type=\"button\"\r\n          color=\"primary\"\r\n          mat-icon-button\r\n          matTooltip=\"Add selected value\"\r\n          (click)=\"addValueToComposite()\"\r\n          [disabled]=\"!selectedValue.value\"\r\n        >\r\n          <mat-icon class=\"mat-primary\">add</mat-icon>\r\n        </button>\r\n        <mat-form-field>\r\n          <mat-label>composite value</mat-label>\r\n          <input matInput [formControl]=\"value\" />\r\n          @if (\r\n            $any(value).errors?.maxLength && (value.dirty || value.touched)\r\n          ) {\r\n            <mat-error>value too long</mat-error>\r\n          }\r\n        </mat-form-field>\r\n      } @else {\r\n        <!-- single-valued: just select -->\r\n        <mat-form-field>\r\n          <mat-label>value</mat-label>\r\n          <mat-select [formControl]=\"value\">\r\n            @for (e of nameIds(); track e) {\r\n              <mat-option [value]=\"e.id\">{{ e.label }}</mat-option>\r\n            }\r\n          </mat-select>\r\n          @if ($any(value).errors?.required && (value.dirty || value.touched)) {\r\n            <mat-error>value required</mat-error>\r\n          }\r\n        </mat-form-field>\r\n      }\r\n    } @else {\r\n      <!-- value (free) -->\r\n      <mat-form-field>\r\n        <mat-label>value</mat-label>\r\n        <input matInput [formControl]=\"value\" />\r\n        @if ($any(value).errors?.required && (value.dirty || value.touched)) {\r\n          <mat-error>value required</mat-error>\r\n        }\r\n        @if ($any(value).errors?.maxLength && (value.dirty || value.touched)) {\r\n          <mat-error>value too long</mat-error>\r\n        }\r\n      </mat-form-field>\r\n    }\r\n\r\n    <!-- setPolicy -->\r\n    <mat-form-field>\r\n      <mat-label>set policy</mat-label>\r\n      <mat-select [formControl]=\"setPolicy\">\r\n        <mat-option [value]=\"0\">multiple</mat-option>\r\n        <mat-option [value]=\"1\">single</mat-option>\r\n        <mat-option [value]=\"2\">single first</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n\r\n    @if (isVar()) {\r\n      <!-- isNegated -->\r\n      <mat-checkbox [formControl]=\"isNegated\"\r\n        ><mat-icon class=\"mat-warn\">remove_circle</mat-icon>\r\n        negated</mat-checkbox\r\n      >\r\n\r\n      <!-- isShortLived -->\r\n      <mat-checkbox [formControl]=\"isShortLived\"\r\n        ><mat-icon class=\"mat-warn\">timer</mat-icon> short-lived</mat-checkbox\r\n      >\r\n\r\n      <!-- isGlobal -->\r\n      <mat-checkbox [formControl]=\"isGlobal\"\r\n        ><mat-icon class=\"mat-primary\">public</mat-icon> global</mat-checkbox\r\n      >\r\n    }\r\n  </div>\r\n\r\n  <!-- buttons -->\r\n  <div class=\"form-row\">\r\n    <button\r\n      type=\"button\"\r\n      color=\"warn\"\r\n      mat-icon-button\r\n      matTooltip=\"Discard changes\"\r\n      (click)=\"cancel()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n    </button>\r\n    <button\r\n      type=\"submit\"\r\n      color=\"primary\"\r\n      mat-icon-button\r\n      matTooltip=\"Accept changes\"\r\n      [disabled]=\"form.invalid || form.pristine\"\r\n    >\r\n      <mat-icon class=\"mat-primary\">check_circle</mat-icon>\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.small-input{width:9em}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FeatureEditorComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FeatureEditorComponent, isStandalone: true, selector: "gve-feature-editor", inputs: { featNames: { classPropertyName: "featNames", publicName: "featNames", isSignal: true, isRequired: false, transformFunction: null }, featValues: { classPropertyName: "featValues", publicName: "featValues", isSignal: true, isRequired: false, transformFunction: null }, featProps: { classPropertyName: "featProps", publicName: "featProps", isSignal: true, isRequired: false, transformFunction: null }, feature: { classPropertyName: "feature", publicName: "feature", isSignal: true, isRequired: false, transformFunction: null }, isVar: { classPropertyName: "isVar", publicName: "isVar", isSignal: true, isRequired: false, transformFunction: null }, multiValuedFeatureIds: { classPropertyName: "multiValuedFeatureIds", publicName: "multiValuedFeatureIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { feature: "featureChange", featureCancel: "featureCancel" }, viewQueries: [{ propertyName: "nameControl", first: true, predicate: ["nameCtl"], descendants: true, isSignal: true }], ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <div class=\"form-row\">\r\n    @if (featNames()?.length) {\r\n      <!-- name (bound) -->\r\n      <mat-form-field>\r\n        <mat-label>name</mat-label>\r\n        <mat-select #nameCtl [formControl]=\"name\">\r\n          @for (i of featNames(); track i) {\r\n            <mat-option [value]=\"i.id\">{{ i.label }}</mat-option>\r\n          }\r\n        </mat-select>\r\n        @if ($any(name).errors?.required && (name.dirty || name.touched)) {\r\n          <mat-error>name required</mat-error>\r\n        }\r\n      </mat-form-field>\r\n    } @else {\r\n      <!-- name (free) -->\r\n      <mat-form-field>\r\n        <mat-label>name</mat-label>\r\n        <input #nameCtl matInput [formControl]=\"name\" />\r\n        @if ($any(name).errors?.required && (name.dirty || name.touched)) {\r\n          <mat-error>name required</mat-error>\r\n        }\r\n        @if ($any(name).errors?.maxLength && (name.dirty || name.touched)) {\r\n          <mat-error>name too long</mat-error>\r\n        }\r\n      </mat-form-field>\r\n    }\r\n\r\n    <!-- value (bound) -->\r\n    @if (nameIds()?.length) {\r\n      <!-- prefix for closed value sets -->\r\n      <mat-form-field class=\"small-input\">\r\n        <mat-label>prefix</mat-label>\r\n        <input matInput [formControl]=\"valuePrefix\" placeholder=\"e.g. @2:\" />\r\n        @if ($any(valuePrefix).errors?.noColon && (valuePrefix.dirty || valuePrefix.touched)) {\r\n          <mat-error>prefix must end with :</mat-error>\r\n        }\r\n      </mat-form-field>\r\n\r\n      @if (isMultiValued()) {\r\n        <!-- multi-valued: select for picking + text for composite -->\r\n        <mat-form-field>\r\n          <mat-label>select value</mat-label>\r\n          <mat-select [formControl]=\"selectedValue\">\r\n            @for (e of nameIds(); track e) {\r\n              <mat-option [value]=\"e.id\">{{ e.label }}</mat-option>\r\n            }\r\n          </mat-select>\r\n        </mat-form-field>\r\n        <button\r\n          type=\"button\"\r\n          color=\"primary\"\r\n          mat-icon-button\r\n          matTooltip=\"Add selected value\"\r\n          (click)=\"addValueToComposite()\"\r\n          [disabled]=\"!selectedValue.value\"\r\n        >\r\n          <mat-icon class=\"mat-primary\">add</mat-icon>\r\n        </button>\r\n        <mat-form-field>\r\n          <mat-label>composite value</mat-label>\r\n          <input matInput [formControl]=\"value\" />\r\n          @if (\r\n            $any(value).errors?.maxLength && (value.dirty || value.touched)\r\n          ) {\r\n            <mat-error>value too long</mat-error>\r\n          }\r\n        </mat-form-field>\r\n      } @else {\r\n        <!-- single-valued: just select -->\r\n        <mat-form-field>\r\n          <mat-label>value</mat-label>\r\n          <mat-select [formControl]=\"value\">\r\n            @for (e of nameIds(); track e) {\r\n              <mat-option [value]=\"e.id\">{{ e.label }}</mat-option>\r\n            }\r\n          </mat-select>\r\n          @if ($any(value).errors?.required && (value.dirty || value.touched)) {\r\n            <mat-error>value required</mat-error>\r\n          }\r\n        </mat-form-field>\r\n      }\r\n    } @else {\r\n      <!-- value (free) -->\r\n      <mat-form-field>\r\n        <mat-label>value</mat-label>\r\n        <input matInput [formControl]=\"value\" />\r\n        @if ($any(value).errors?.required && (value.dirty || value.touched)) {\r\n          <mat-error>value required</mat-error>\r\n        }\r\n        @if ($any(value).errors?.maxLength && (value.dirty || value.touched)) {\r\n          <mat-error>value too long</mat-error>\r\n        }\r\n      </mat-form-field>\r\n    }\r\n\r\n    <!-- setPolicy -->\r\n    <mat-form-field>\r\n      <mat-label>set policy</mat-label>\r\n      <mat-select [formControl]=\"setPolicy\">\r\n        <mat-option [value]=\"0\">multiple</mat-option>\r\n        <mat-option [value]=\"1\">single</mat-option>\r\n        <mat-option [value]=\"2\">single first</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n\r\n    @if (isVar()) {\r\n      <!-- isNegated -->\r\n      <mat-checkbox [formControl]=\"isNegated\"\r\n        ><mat-icon class=\"mat-warn\">remove_circle</mat-icon>\r\n        negated</mat-checkbox\r\n      >\r\n\r\n      <!-- isShortLived -->\r\n      <mat-checkbox [formControl]=\"isShortLived\"\r\n        ><mat-icon class=\"mat-warn\">timer</mat-icon> short-lived</mat-checkbox\r\n      >\r\n\r\n      <!-- isGlobal -->\r\n      <mat-checkbox [formControl]=\"isGlobal\"\r\n        ><mat-icon class=\"mat-primary\">public</mat-icon> global</mat-checkbox\r\n      >\r\n    }\r\n  </div>\r\n\r\n  <!-- buttons -->\r\n  <div class=\"form-row\">\r\n    <button\r\n      type=\"button\"\r\n      color=\"warn\"\r\n      mat-icon-button\r\n      matTooltip=\"Discard changes\"\r\n      (click)=\"cancel()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n    </button>\r\n    <button\r\n      type=\"submit\"\r\n      color=\"primary\"\r\n      mat-icon-button\r\n      matTooltip=\"Accept changes\"\r\n      [disabled]=\"form.invalid || form.pristine\"\r\n    >\r\n      <mat-icon class=\"mat-primary\">check_circle</mat-icon>\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.small-input{width:9em}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: FeatureEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FeatureEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gve-feature-editor', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         ReactiveFormsModule,
@@ -952,18 +979,21 @@ class FeatureSetEditorComponent {
          * True if the feature is a variant operation feature, which has
          * additional properties like negation, global, and short-lived.
          */
-        this.isVar = input(true, ...(ngDevMode ? [{ debugName: "isVar" }] : /* istanbul ignore next */ []));
+        this.isVar = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isVar" }] : /* istanbul ignore next */ []));
         /**
          * The list of feature names to display in the name selection.
          * This is used when you have a closed list of features.
          */
-        this.featNames = input(...(ngDevMode ? [undefined, { debugName: "featNames" }] : /* istanbul ignore next */ []));
+        this.featNames = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "featNames" }] : /* istanbul ignore next */ []));
         /**
          * The feature values map. When specified and the user selects a feature
          * name present in the map keys, the corresponding values will be used
          * to populate the value selection.
          */
-        this.featValues = input(...(ngDevMode ? [undefined, { debugName: "featValues" }] : /* istanbul ignore next */ []));
+        this.featValues = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "featValues" }] : /* istanbul ignore next */ []));
         /**
          * The feature properties map. When specified and the user selects a
          * feature name present in the map keys, the corresponding properties
@@ -971,14 +1001,16 @@ class FeatureSetEditorComponent {
          * global, and short-lived. This allows presetting these properties
          * for specific features without hardcoding that logic in the component.
          */
-        this.featProps = input(...(ngDevMode ? [undefined, { debugName: "featProps" }] : /* istanbul ignore next */ []));
+        this.featProps = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "featProps" }] : /* istanbul ignore next */ []));
         /**
          * The threshold at which the features filter should become visible.
          * If set to 0, the filter is always visible; if set to -1, it is always
          * invisible; otherwise, it gets visible when the number of features
          * is greater than or equal to the threshold. Default is 5.
          */
-        this.filterThreshold = input(5, ...(ngDevMode ? [{ debugName: "filterThreshold" }] : /* istanbul ignore next */ []));
+        this.filterThreshold = input(5, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterThreshold" }] : /* istanbul ignore next */ []));
         /**
          * The IDs of the features that are multi-valued. If a feature being
          * edited is in this list, the feature editor will allow adding multiple
@@ -986,13 +1018,15 @@ class FeatureSetEditorComponent {
          */
         this.multiValuedFeatureIds = input([
             'r_hints',
-        ], ...(ngDevMode ? [{ debugName: "multiValuedFeatureIds" }] : /* istanbul ignore next */ []));
+        ], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "multiValuedFeatureIds" }] : /* istanbul ignore next */ []));
         /**
          * True to enable batch mode, where users edit features
          * without the component firing change events until they click the "Save" button,
          * and close the editor without saving by clicking the "Close" button.
          */
-        this.batchMode = input(false, ...(ngDevMode ? [{ debugName: "batchMode" }] : /* istanbul ignore next */ []));
+        this.batchMode = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "batchMode" }] : /* istanbul ignore next */ []));
         /**
          * Emitted when the user clicks the close button.
          */
@@ -1000,16 +1034,23 @@ class FeatureSetEditorComponent {
         /**
          * The features to edit.
          */
-        this.features = model([], ...(ngDevMode ? [{ debugName: "features" }] : /* istanbul ignore next */ []));
-        this.editedFeature = signal(undefined, ...(ngDevMode ? [{ debugName: "editedFeature" }] : /* istanbul ignore next */ []));
-        this.editedFeatureIndex = signal(-1, ...(ngDevMode ? [{ debugName: "editedFeatureIndex" }] : /* istanbul ignore next */ []));
-        this.filteredFeatures = signal([], ...(ngDevMode ? [{ debugName: "filteredFeatures" }] : /* istanbul ignore next */ []));
+        this.features = model([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "features" }] : /* istanbul ignore next */ []));
+        this.editedFeature = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editedFeature" }] : /* istanbul ignore next */ []));
+        this.editedFeatureIndex = signal(-1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editedFeatureIndex" }] : /* istanbul ignore next */ []));
+        this.filteredFeatures = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filteredFeatures" }] : /* istanbul ignore next */ []));
         // In batch mode, mutations accumulate here until the user clicks OK.
-        this.draftFeatures = signal([], ...(ngDevMode ? [{ debugName: "draftFeatures" }] : /* istanbul ignore next */ []));
+        this.draftFeatures = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "draftFeatures" }] : /* istanbul ignore next */ []));
         // Active source: draft in batch mode, model signal otherwise.
-        this.workingFeatures = computed(() => (this.batchMode() ? this.draftFeatures() : this.features()), ...(ngDevMode ? [{ debugName: "workingFeatures" }] : /* istanbul ignore next */ []));
+        this.workingFeatures = computed(() => (this.batchMode() ? this.draftFeatures() : this.features()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "workingFeatures" }] : /* istanbul ignore next */ []));
         // Show Close/OK buttons only in batch mode.
-        this.hasCloseButton = computed(() => this.batchMode(), ...(ngDevMode ? [{ debugName: "hasCloseButton" }] : /* istanbul ignore next */ []));
+        this.hasCloseButton = computed(() => this.batchMode(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasCloseButton" }] : /* istanbul ignore next */ []));
         this.filter = formBuilder.control(null);
         // Sync draft from the model input whenever features or batchMode changes.
         effect(() => {
@@ -1105,10 +1146,10 @@ class FeatureSetEditorComponent {
     onOk() {
         this.features.set(this.draftFeatures());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: FeatureSetEditorComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: FeatureSetEditorComponent, isStandalone: true, selector: "gve-feature-set-editor", inputs: { isVar: { classPropertyName: "isVar", publicName: "isVar", isSignal: true, isRequired: false, transformFunction: null }, featNames: { classPropertyName: "featNames", publicName: "featNames", isSignal: true, isRequired: false, transformFunction: null }, featValues: { classPropertyName: "featValues", publicName: "featValues", isSignal: true, isRequired: false, transformFunction: null }, featProps: { classPropertyName: "featProps", publicName: "featProps", isSignal: true, isRequired: false, transformFunction: null }, filterThreshold: { classPropertyName: "filterThreshold", publicName: "filterThreshold", isSignal: true, isRequired: false, transformFunction: null }, multiValuedFeatureIds: { classPropertyName: "multiValuedFeatureIds", publicName: "multiValuedFeatureIds", isSignal: true, isRequired: false, transformFunction: null }, batchMode: { classPropertyName: "batchMode", publicName: "batchMode", isSignal: true, isRequired: false, transformFunction: null }, features: { classPropertyName: "features", publicName: "features", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", features: "featuresChange" }, ngImport: i0, template: "<div>\r\n  <div class=\"form-row\">\r\n    <!-- filter -->\r\n    @if (filterThreshold() === 0 || workingFeatures().length >= filterThreshold()) {\r\n      <mat-form-field>\r\n        <label>filter</label>\r\n        <input matInput [formControl]=\"filter\" />\r\n        <button\r\n          type=\"button\"\r\n          mat-icon-button\r\n          matSuffix\r\n          (click)=\"filter.reset()\"\r\n          [disabled]=\"!filter.value\"\r\n          [attr.aria-label]=\"'Reset filter'\"\r\n        >\r\n          <mat-icon color=\"warn\" class=\"mat-warn\">cancel</mat-icon>\r\n        </button>\r\n      </mat-form-field>\r\n    }\r\n\r\n    <div class=\"form-row\">\r\n      @if (hasCloseButton()) {\r\n        <!-- close editor button -->\r\n        <button\r\n          type=\"button\"\r\n          color=\"warn\"\r\n          class=\"mat-warn\"\r\n          mat-flat-button\r\n          matTooltip=\"Close features editor\"\r\n          (click)=\"close.emit()\"\r\n        >\r\n          <mat-icon>close</mat-icon>\r\n          close\r\n        </button>\r\n        <!-- ok button: commits draft in batch mode -->\r\n        <button\r\n          type=\"button\"\r\n          color=\"primary\"\r\n          class=\"mat-primary\"\r\n          mat-flat-button\r\n          matTooltip=\"Save features\"\r\n          (click)=\"onOk()\"\r\n        >\r\n          <mat-icon>check</mat-icon>\r\n          OK\r\n        </button>\r\n      }\r\n      <!-- add feature button -->\r\n      <button\r\n        type=\"button\"\r\n        color=\"primary\"\r\n        class=\"mat-primary\"\r\n        mat-flat-button\r\n        matTooltip=\"Add a new feature\"\r\n        (click)=\"addFeature()\"\r\n        [class.in-row-button]=\"\r\n          filterThreshold() === 0 || workingFeatures()!.length >= filterThreshold()\r\n        \"\r\n      >\r\n        <mat-icon>add</mat-icon>\r\n        feature\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- list -->\r\n  @if (workingFeatures().length) {\r\n    <table>\r\n      <thead>\r\n        <tr>\r\n          <th></th>\r\n          <th>feature</th>\r\n          <th>value</th>\r\n          <th>policy</th>\r\n          @if (isVar()) {\r\n            <th>flags</th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (feature of filteredFeatures(); track $index) {\r\n          <tr [class.selected]=\"$index === editedFeatureIndex()\">\r\n            <td class=\"fit-width\">\r\n              <!-- edit -->\r\n              <button\r\n                type=\"button\"\r\n                color=\"primary\"\r\n                mat-icon-button\r\n                matTooltip=\"Edit this feature\"\r\n                (click)=\"editFeature(feature)\"\r\n              >\r\n                <mat-icon class=\"mat-primary\">edit</mat-icon>\r\n              </button>\r\n              <!-- delete -->\r\n              <button\r\n                type=\"button\"\r\n                color=\"warn\"\r\n                mat-icon-button\r\n                matTooltip=\"Delete this feature\"\r\n                (click)=\"deleteFeature(feature)\"\r\n              >\r\n                <mat-icon class=\"mat-warn\">delete</mat-icon>\r\n              </button>\r\n            </td>\r\n            <td>\r\n              @if (featNames()?.length) {\r\n                <span>{{\r\n                  feature.name | flatLookup: featNames() : \"id\" : \"label\"\r\n                }}</span>\r\n              } @else {\r\n                <span>{{ feature.name }}</span>\r\n              }\r\n            </td>\r\n            <td>\r\n              @if (featValues()) {\r\n                <span>{{\r\n                  feature.value | flatLookup: featValues()![feature.name]\r\n                }}</span>\r\n              } @else {\r\n                <span>{{ feature.value }}</span>\r\n              }\r\n            </td>\r\n            <td>\r\n              <span>{{ POLICIES[feature.setPolicy] }}</span>\r\n            </td>\r\n            @if (isVar()) {\r\n              <td>\r\n                @if ($any(feature).isNegated) {\r\n                  <span class=\"icon\" matTooltip=\"Negated: remove if present\">\r\n                    <mat-icon class=\"mat-warn\">remove_circle</mat-icon>\r\n                  </span>\r\n                }\r\n                @if ($any(feature).isGlobal) {\r\n                  <span class=\"icon\" matTooltip=\"Global: apply to whole output\">\r\n                    <mat-icon class=\"mat-primary\">public</mat-icon>\r\n                  </span>\r\n                }\r\n                @if ($any(feature).isShortLived) {\r\n                  <span\r\n                    class=\"icon\"\r\n                    matTooltip=\"Short-lived: removed on next operation\"\r\n                  >\r\n                    <mat-icon class=\"mat-accent\">timer</mat-icon>\r\n                  </span>\r\n                }\r\n              </td>\r\n            }\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </table>\r\n  }\r\n\r\n  <!-- editor -->\r\n  @if (editedFeature()) {\r\n    <mat-expansion-panel\r\n      [disabled]=\"!editedFeature()\"\r\n      [expanded]=\"editedFeature()\"\r\n    >\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          <span>{{ editedFeature()?.name || \"feature\" }}</span>\r\n        </mat-panel-title>\r\n      </mat-expansion-panel-header>\r\n      <gve-feature-editor\r\n        [isVar]=\"isVar()\"\r\n        [multiValuedFeatureIds]=\"multiValuedFeatureIds()\"\r\n        [featNames]=\"featNames()\"\r\n        [featValues]=\"featValues()\"\r\n        [featProps]=\"featProps()\"\r\n        [feature]=\"editedFeature()\"\r\n        (featureChange)=\"onFeatureChange($event)\"\r\n        (featureCancel)=\"onFeatureCancel()\"\r\n      />\r\n    </mat-expansion-panel>\r\n  }\r\n</div>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.in-row-button{margin-top:-16px}table{margin-top:8px;width:100%;border-collapse:collapse;color:var(--mat-sys-on-surface-variant)}tbody tr:nth-child(odd){background-color:var(--mat-sys-surface-container)}th{text-align:left;font-weight:400;color:var(--mat-sys-on-surface-variant)}tbody tr:hover{background-color:var(--mat-sys-surface-container-high)}td.fit-width{width:1px;white-space:nowrap}tbody tr.selected{background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i3$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i3$2.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FeatureEditorComponent, selector: "gve-feature-editor", inputs: ["featNames", "featValues", "featProps", "feature", "isVar", "multiValuedFeatureIds"], outputs: ["featureChange", "featureCancel"] }, { kind: "pipe", type: FlatLookupPipe, name: "flatLookup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FeatureSetEditorComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FeatureSetEditorComponent, isStandalone: true, selector: "gve-feature-set-editor", inputs: { isVar: { classPropertyName: "isVar", publicName: "isVar", isSignal: true, isRequired: false, transformFunction: null }, featNames: { classPropertyName: "featNames", publicName: "featNames", isSignal: true, isRequired: false, transformFunction: null }, featValues: { classPropertyName: "featValues", publicName: "featValues", isSignal: true, isRequired: false, transformFunction: null }, featProps: { classPropertyName: "featProps", publicName: "featProps", isSignal: true, isRequired: false, transformFunction: null }, filterThreshold: { classPropertyName: "filterThreshold", publicName: "filterThreshold", isSignal: true, isRequired: false, transformFunction: null }, multiValuedFeatureIds: { classPropertyName: "multiValuedFeatureIds", publicName: "multiValuedFeatureIds", isSignal: true, isRequired: false, transformFunction: null }, batchMode: { classPropertyName: "batchMode", publicName: "batchMode", isSignal: true, isRequired: false, transformFunction: null }, features: { classPropertyName: "features", publicName: "features", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", features: "featuresChange" }, ngImport: i0, template: "<div>\r\n  <div class=\"form-row\">\r\n    <!-- filter -->\r\n    @if (filterThreshold() === 0 || workingFeatures().length >= filterThreshold()) {\r\n      <mat-form-field>\r\n        <label>filter</label>\r\n        <input matInput [formControl]=\"filter\" />\r\n        <button\r\n          type=\"button\"\r\n          mat-icon-button\r\n          matSuffix\r\n          (click)=\"filter.reset()\"\r\n          [disabled]=\"!filter.value\"\r\n          [attr.aria-label]=\"'Reset filter'\"\r\n        >\r\n          <mat-icon color=\"warn\" class=\"mat-warn\">cancel</mat-icon>\r\n        </button>\r\n      </mat-form-field>\r\n    }\r\n\r\n    <div class=\"form-row\">\r\n      @if (hasCloseButton()) {\r\n        <!-- close editor button -->\r\n        <button\r\n          type=\"button\"\r\n          color=\"warn\"\r\n          class=\"mat-warn\"\r\n          mat-flat-button\r\n          matTooltip=\"Close features editor\"\r\n          (click)=\"close.emit()\"\r\n        >\r\n          <mat-icon>close</mat-icon>\r\n          close\r\n        </button>\r\n        <!-- ok button: commits draft in batch mode -->\r\n        <button\r\n          type=\"button\"\r\n          color=\"primary\"\r\n          class=\"mat-primary\"\r\n          mat-flat-button\r\n          matTooltip=\"Save features\"\r\n          (click)=\"onOk()\"\r\n        >\r\n          <mat-icon>check</mat-icon>\r\n          OK\r\n        </button>\r\n      }\r\n      <!-- add feature button -->\r\n      <button\r\n        type=\"button\"\r\n        color=\"primary\"\r\n        class=\"mat-primary\"\r\n        mat-flat-button\r\n        matTooltip=\"Add a new feature\"\r\n        (click)=\"addFeature()\"\r\n        [class.in-row-button]=\"\r\n          filterThreshold() === 0 || workingFeatures()!.length >= filterThreshold()\r\n        \"\r\n      >\r\n        <mat-icon>add</mat-icon>\r\n        feature\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- list -->\r\n  @if (workingFeatures().length) {\r\n    <table>\r\n      <thead>\r\n        <tr>\r\n          <th></th>\r\n          <th>feature</th>\r\n          <th>value</th>\r\n          <th>policy</th>\r\n          @if (isVar()) {\r\n            <th>flags</th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (feature of filteredFeatures(); track $index) {\r\n          <tr [class.selected]=\"$index === editedFeatureIndex()\">\r\n            <td class=\"fit-width\">\r\n              <!-- edit -->\r\n              <button\r\n                type=\"button\"\r\n                color=\"primary\"\r\n                mat-icon-button\r\n                matTooltip=\"Edit this feature\"\r\n                (click)=\"editFeature(feature)\"\r\n              >\r\n                <mat-icon class=\"mat-primary\">edit</mat-icon>\r\n              </button>\r\n              <!-- delete -->\r\n              <button\r\n                type=\"button\"\r\n                color=\"warn\"\r\n                mat-icon-button\r\n                matTooltip=\"Delete this feature\"\r\n                (click)=\"deleteFeature(feature)\"\r\n              >\r\n                <mat-icon class=\"mat-warn\">delete</mat-icon>\r\n              </button>\r\n            </td>\r\n            <td>\r\n              @if (featNames()?.length) {\r\n                <span>{{\r\n                  feature.name | flatLookup: featNames() : \"id\" : \"label\"\r\n                }}</span>\r\n              } @else {\r\n                <span>{{ feature.name }}</span>\r\n              }\r\n            </td>\r\n            <td>\r\n              @if (featValues()) {\r\n                <span>{{\r\n                  feature.value | flatLookup: featValues()![feature.name]\r\n                }}</span>\r\n              } @else {\r\n                <span>{{ feature.value }}</span>\r\n              }\r\n            </td>\r\n            <td>\r\n              <span>{{ POLICIES[feature.setPolicy] }}</span>\r\n            </td>\r\n            @if (isVar()) {\r\n              <td>\r\n                @if ($any(feature).isNegated) {\r\n                  <span class=\"icon\" matTooltip=\"Negated: remove if present\">\r\n                    <mat-icon class=\"mat-warn\">remove_circle</mat-icon>\r\n                  </span>\r\n                }\r\n                @if ($any(feature).isGlobal) {\r\n                  <span class=\"icon\" matTooltip=\"Global: apply to whole output\">\r\n                    <mat-icon class=\"mat-primary\">public</mat-icon>\r\n                  </span>\r\n                }\r\n                @if ($any(feature).isShortLived) {\r\n                  <span\r\n                    class=\"icon\"\r\n                    matTooltip=\"Short-lived: removed on next operation\"\r\n                  >\r\n                    <mat-icon class=\"mat-accent\">timer</mat-icon>\r\n                  </span>\r\n                }\r\n              </td>\r\n            }\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </table>\r\n  }\r\n\r\n  <!-- editor -->\r\n  @if (editedFeature()) {\r\n    <mat-expansion-panel\r\n      [disabled]=\"!editedFeature()\"\r\n      [expanded]=\"editedFeature()\"\r\n    >\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          <span>{{ editedFeature()?.name || \"feature\" }}</span>\r\n        </mat-panel-title>\r\n      </mat-expansion-panel-header>\r\n      <gve-feature-editor\r\n        [isVar]=\"isVar()\"\r\n        [multiValuedFeatureIds]=\"multiValuedFeatureIds()\"\r\n        [featNames]=\"featNames()\"\r\n        [featValues]=\"featValues()\"\r\n        [featProps]=\"featProps()\"\r\n        [feature]=\"editedFeature()\"\r\n        (featureChange)=\"onFeatureChange($event)\"\r\n        (featureCancel)=\"onFeatureCancel()\"\r\n      />\r\n    </mat-expansion-panel>\r\n  }\r\n</div>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.in-row-button{margin-top:-16px}table{margin-top:8px;width:100%;border-collapse:collapse;color:var(--mat-sys-on-surface-variant)}tbody tr:nth-child(odd){background-color:var(--mat-sys-surface-container)}th{text-align:left;font-weight:400;color:var(--mat-sys-on-surface-variant)}tbody tr:hover{background-color:var(--mat-sys-surface-container-high)}td.fit-width{width:1px;white-space:nowrap}tbody tr.selected{background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i3$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i3$2.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FeatureEditorComponent, selector: "gve-feature-editor", inputs: ["featNames", "featValues", "featProps", "feature", "isVar", "multiValuedFeatureIds"], outputs: ["featureChange", "featureCancel"] }, { kind: "pipe", type: FlatLookupPipe, name: "flatLookup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: FeatureSetEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FeatureSetEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gve-feature-set-editor', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         ReactiveFormsModule,
@@ -1205,14 +1246,18 @@ class BaseTextEditorComponent {
          */
         this.multiValuedFeatureIds = input([
             'r_hints',
-        ], ...(ngDevMode ? [{ debugName: "multiValuedFeatureIds" }] : /* istanbul ignore next */ []));
+        ], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "multiValuedFeatureIds" }] : /* istanbul ignore next */ []));
         /**
          * Emitted for the edited text as an array of `CharNode`'s whenever it changes.
          */
         this.textChange = output();
-        this.selectedChar = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedChar" }] : /* istanbul ignore next */ []));
-        this.selectedCharLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedCharLabel" }] : /* istanbul ignore next */ []));
-        this.textRange = signal(undefined, ...(ngDevMode ? [{ debugName: "textRange" }] : /* istanbul ignore next */ []));
+        this.selectedChar = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedChar" }] : /* istanbul ignore next */ []));
+        this.selectedCharLabel = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedCharLabel" }] : /* istanbul ignore next */ []));
+        this.textRange = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "textRange" }] : /* istanbul ignore next */ []));
         this.userText = formBuilder.control('', {
             nonNullable: true,
             validators: [Validators.required, Validators.maxLength(10000)],
@@ -1271,10 +1316,10 @@ class BaseTextEditorComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: BaseTextEditorComponent, deps: [{ token: i1$1.FormBuilder }, { token: i2$1.DialogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: BaseTextEditorComponent, isStandalone: true, selector: "gve-base-text-editor", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, multiValuedFeatureIds: { classPropertyName: "multiValuedFeatureIds", publicName: "multiValuedFeatureIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { textChange: "textChange" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"setTextFromUser()\">\r\n  <!-- text -->\r\n  <div>\r\n    <mat-form-field class=\"full-width\">\r\n      <mat-label>text</mat-label>\r\n      <textarea matInput [formControl]=\"userText\" rows=\"5\"></textarea>\r\n      @if ( $any(userText).errors?.required && (userText.dirty ||\r\n      userText.touched) ) {\r\n      <mat-error>text required</mat-error>\r\n      } @if ( $any(userText).errors?.maxLength && (userText.dirty ||\r\n      userText.touched) ) {\r\n      <mat-error>text too long</mat-error>\r\n      }\r\n    </mat-form-field>\r\n  </div>\r\n  <!-- buttons -->\r\n  <div class=\"form-row\">\r\n    <!-- set -->\r\n    <button\r\n      type=\"button\"\r\n      mat-flat-button\r\n      class=\"mat-warn\"\r\n      matTooltip=\"Reset characters to newly entered text\"\r\n      [disabled]=\"!userText.value\"\r\n      (click)=\"setTextFromUser()\"\r\n    >\r\n      set\r\n    </button>\r\n  </div>\r\n\r\n  <!-- base text -->\r\n  <div id=\"text-view\">\r\n    <gve-base-text-view\r\n      [text]=\"text() || []\"\r\n      (charPick)=\"onSelectedChar($event)\"\r\n      (rangePick)=\"textRange.set($event)\"\r\n    />\r\n\r\n    <!-- text range -->\r\n    @if (textRange()) {\r\n    <div id=\"text-range\">{{ textRange()!.at }} \u00D7 {{ textRange()!.run }}</div>\r\n    }\r\n  </div>\r\n\r\n  <!-- char features -->\r\n  @if (selectedChar()) {\r\n  <fieldset>\r\n    <legend>features</legend>\r\n    <gve-feature-set-editor\r\n      [features]=\"selectedChar()!.features?.['v0'] ?? []\"\r\n      [multiValuedFeatureIds]=\"multiValuedFeatureIds()\"\r\n      (featuresChange)=\"onFeaturesChange($event)\"\r\n    />\r\n  </fieldset>\r\n  }\r\n</form>\r\n", styles: [".full-width{width:100%}#text-view{margin:8px 0}fieldset{padding:10px;margin:10px 0;border-radius:5px;border:1px solid var(--mat-sys-on-surface-variant)}legend{color:var(--mat-sys-on-surface-variant)}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: BaseTextViewComponent, selector: "gve-base-text-view", inputs: ["defaultColor", "defaultBorderColor", "selectionColor", "searchHighlightColor", "hasLineNumber", "text", "colorCallback", "borderColorCallback"], outputs: ["charPick", "rangePick"] }, { kind: "component", type: FeatureSetEditorComponent, selector: "gve-feature-set-editor", inputs: ["isVar", "featNames", "featValues", "featProps", "filterThreshold", "multiValuedFeatureIds", "batchMode", "features"], outputs: ["close", "featuresChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: BaseTextEditorComponent, deps: [{ token: i1$1.FormBuilder }, { token: i2$1.DialogService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: BaseTextEditorComponent, isStandalone: true, selector: "gve-base-text-editor", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, multiValuedFeatureIds: { classPropertyName: "multiValuedFeatureIds", publicName: "multiValuedFeatureIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { textChange: "textChange" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"setTextFromUser()\">\r\n  <!-- text -->\r\n  <div>\r\n    <mat-form-field class=\"full-width\">\r\n      <mat-label>text</mat-label>\r\n      <textarea matInput [formControl]=\"userText\" rows=\"5\"></textarea>\r\n      @if ( $any(userText).errors?.required && (userText.dirty ||\r\n      userText.touched) ) {\r\n      <mat-error>text required</mat-error>\r\n      } @if ( $any(userText).errors?.maxLength && (userText.dirty ||\r\n      userText.touched) ) {\r\n      <mat-error>text too long</mat-error>\r\n      }\r\n    </mat-form-field>\r\n  </div>\r\n  <!-- buttons -->\r\n  <div class=\"form-row\">\r\n    <!-- set -->\r\n    <button\r\n      type=\"button\"\r\n      mat-flat-button\r\n      class=\"mat-warn\"\r\n      matTooltip=\"Reset characters to newly entered text\"\r\n      [disabled]=\"!userText.value\"\r\n      (click)=\"setTextFromUser()\"\r\n    >\r\n      set\r\n    </button>\r\n  </div>\r\n\r\n  <!-- base text -->\r\n  <div id=\"text-view\">\r\n    <gve-base-text-view\r\n      [text]=\"text() || []\"\r\n      (charPick)=\"onSelectedChar($event)\"\r\n      (rangePick)=\"textRange.set($event)\"\r\n    />\r\n\r\n    <!-- text range -->\r\n    @if (textRange()) {\r\n    <div id=\"text-range\">{{ textRange()!.at }} \u00D7 {{ textRange()!.run }}</div>\r\n    }\r\n  </div>\r\n\r\n  <!-- char features -->\r\n  @if (selectedChar()) {\r\n  <fieldset>\r\n    <legend>features</legend>\r\n    <gve-feature-set-editor\r\n      [features]=\"selectedChar()!.features?.['v0'] ?? []\"\r\n      [multiValuedFeatureIds]=\"multiValuedFeatureIds()\"\r\n      (featuresChange)=\"onFeaturesChange($event)\"\r\n    />\r\n  </fieldset>\r\n  }\r\n</form>\r\n", styles: [".full-width{width:100%}#text-view{margin:8px 0}fieldset{padding:10px;margin:10px 0;border-radius:5px;border:1px solid var(--mat-sys-on-surface-variant)}legend{color:var(--mat-sys-on-surface-variant)}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: BaseTextViewComponent, selector: "gve-base-text-view", inputs: ["defaultColor", "defaultBorderColor", "selectionColor", "searchHighlightColor", "hasLineNumber", "text", "colorCallback", "borderColorCallback"], outputs: ["charPick", "rangePick"] }, { kind: "component", type: FeatureSetEditorComponent, selector: "gve-feature-set-editor", inputs: ["isVar", "featNames", "featValues", "featProps", "filterThreshold", "multiValuedFeatureIds", "batchMode", "features"], outputs: ["close", "featuresChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: BaseTextEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: BaseTextEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gve-base-text-editor', imports: [
                         ReactiveFormsModule,
@@ -1367,10 +1412,10 @@ class GveApiService {
         })
             .pipe(catchError(this._error.handleError));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: GveApiService, deps: [{ token: i1$2.HttpClient }, { token: i2$2.ErrorService }, { token: i2$2.EnvService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: GveApiService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: GveApiService, deps: [{ token: i1$2.HttpClient }, { token: i2$2.ErrorService }, { token: i2$2.EnvService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: GveApiService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: GveApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: GveApiService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1393,13 +1438,16 @@ class BatchOperationEditorComponent {
         this._api = _api;
         this.dialogRef = dialogRef;
         this.data = data;
-        this.busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
-        this.parseError = signal(undefined, ...(ngDevMode ? [{ debugName: "parseError" }] : /* istanbul ignore next */ []));
+        this.busy = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
+        this.parseError = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "parseError" }] : /* istanbul ignore next */ []));
         /**
          * The preset text to parse if any. Usually you start with a blank
          * text, but sometimes you might want to pre-set it.
          */
-        this.preset = input(...(ngDevMode ? [undefined, { debugName: "preset" }] : /* istanbul ignore next */ []));
+        this.preset = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "preset" }] : /* istanbul ignore next */ []));
         /**
          * Emitted when operations change.
          */
@@ -1453,10 +1501,10 @@ class BatchOperationEditorComponent {
     close() {
         this.dialogRef?.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: BatchOperationEditorComponent, deps: [{ token: i1$1.FormBuilder }, { token: GveApiService }, { token: i3$3.MatDialogRef, optional: true }, { token: MAT_DIALOG_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: BatchOperationEditorComponent, isStandalone: true, selector: "gve-batch-operation-editor", inputs: { preset: { classPropertyName: "preset", publicName: "preset", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { operationsChange: "operationsChange" }, ngImport: i0, template: "<div [style.padding]=\"dialogRef ? '8px' : '0'\">\r\n  @if (dialogRef) {\r\n    <div id=\"heading\">Add Operations</div>\r\n  }\r\n  <div id=\"batch-input\">\r\n    <div>\r\n      <mat-form-field class=\"full-width\">\r\n        <mat-label>operations</mat-label>\r\n        <textarea\r\n          class=\"code\"\r\n          matInput\r\n          [formControl]=\"text\"\r\n          rows=\"8\"\r\n          spellcheck=\"false\"\r\n        ></textarea>\r\n      </mat-form-field>\r\n      @if (parseError()) {\r\n        <div class=\"error\">{{ parseError() }}</div>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"form-row-center\">\r\n    @if (dialogRef) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"mat-warn\"\r\n        mat-flat-button\r\n        matTooltip=\"Close dialog\"\r\n        (click)=\"close()\"\r\n      >\r\n        close\r\n      </button>\r\n    }\r\n    <button\r\n      type=\"button\"\r\n      class=\"mat-primary\"\r\n      mat-flat-button\r\n      matTooltip=\"Parse text into operations\"\r\n      [disabled]=\"!text.value || busy()\"\r\n      (click)=\"parseOperations(text.value!)\"\r\n    >\r\n      batch add\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [".full-width{width:100%}.error{color:var(--mat-sys-error)}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row-center{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}.form-row,.form-row-center *{flex:0 0 auto}div#heading{margin:8px;text-align:center;font-weight:700}div#batch-help{font-size:.9em}div#batch-help strong{color:var(--mat-sys-primary)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: BatchOperationEditorComponent, deps: [{ token: i1$1.FormBuilder }, { token: GveApiService }, { token: i3$3.MatDialogRef, optional: true }, { token: MAT_DIALOG_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: BatchOperationEditorComponent, isStandalone: true, selector: "gve-batch-operation-editor", inputs: { preset: { classPropertyName: "preset", publicName: "preset", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { operationsChange: "operationsChange" }, ngImport: i0, template: "<div [style.padding]=\"dialogRef ? '8px' : '0'\">\r\n  @if (dialogRef) {\r\n    <div id=\"heading\">Add Operations</div>\r\n  }\r\n  <div id=\"batch-input\">\r\n    <div>\r\n      <mat-form-field class=\"full-width\">\r\n        <mat-label>operations</mat-label>\r\n        <textarea\r\n          class=\"code\"\r\n          matInput\r\n          [formControl]=\"text\"\r\n          rows=\"8\"\r\n          spellcheck=\"false\"\r\n        ></textarea>\r\n      </mat-form-field>\r\n      @if (parseError()) {\r\n        <div class=\"error\">{{ parseError() }}</div>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"form-row-center\">\r\n    @if (dialogRef) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"mat-warn\"\r\n        mat-flat-button\r\n        matTooltip=\"Close dialog\"\r\n        (click)=\"close()\"\r\n      >\r\n        close\r\n      </button>\r\n    }\r\n    <button\r\n      type=\"button\"\r\n      class=\"mat-primary\"\r\n      mat-flat-button\r\n      matTooltip=\"Parse text into operations\"\r\n      [disabled]=\"!text.value || busy()\"\r\n      (click)=\"parseOperations(text.value!)\"\r\n    >\r\n      batch add\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [".full-width{width:100%}.error{color:var(--mat-sys-error)}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row-center{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}.form-row,.form-row-center *{flex:0 0 auto}div#heading{margin:8px;text-align:center;font-weight:700}div#batch-help{font-size:.9em}div#batch-help strong{color:var(--mat-sys-primary)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: BatchOperationEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: BatchOperationEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gve-batch-operation-editor', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         ReactiveFormsModule,
@@ -1495,15 +1543,18 @@ class OperationSourceEditorComponent {
         /**
          * The source to edit.
          */
-        this.source = model(...(ngDevMode ? [undefined, { debugName: "source" }] : /* istanbul ignore next */ []));
+        this.source = model(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "source" }] : /* istanbul ignore next */ []));
         /**
          * The list of source IDs when it's a closed set.
          */
-        this.ids = input(...(ngDevMode ? [undefined, { debugName: "ids" }] : /* istanbul ignore next */ []));
+        this.ids = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "ids" }] : /* istanbul ignore next */ []));
         /**
          * The list of source types when it's a closed set.
          */
-        this.types = input(...(ngDevMode ? [undefined, { debugName: "types" }] : /* istanbul ignore next */ []));
+        this.types = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "types" }] : /* istanbul ignore next */ []));
         /**
          * The event emitted when the edit is canceled.
          */
@@ -1558,10 +1609,10 @@ class OperationSourceEditorComponent {
             note: this.note.value || undefined,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: OperationSourceEditorComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: OperationSourceEditorComponent, isStandalone: true, selector: "gve-operation-source-editor", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null }, ids: { classPropertyName: "ids", publicName: "ids", isSignal: true, isRequired: false, transformFunction: null }, types: { classPropertyName: "types", publicName: "types", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { source: "sourceChange", sourceCancel: "sourceCancel" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <div class=\"form-row\">\r\n    <!-- id -->\r\n    <!-- id (bound) -->\r\n    @if (ids()?.length) {\r\n    <mat-form-field>\r\n      <mat-label>id</mat-label>\r\n      <mat-select [formControl]=\"id\">\r\n        @for (i of ids(); track i.id) {\r\n        <mat-option [value]=\"i.id\">{{ i.label }}</mat-option>\r\n        }\r\n      </mat-select>\r\n      @if ($any(id.errors)?.required && (id.dirty || id.touched)) {\r\n      <mat-error>ID required</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    } @else {\r\n    <!-- id (free) -->\r\n    <mat-form-field>\r\n      <mat-label>id</mat-label>\r\n      <input matInput [formControl]=\"id\" />\r\n      @if ($any(id.errors)?.required && (id.dirty || id.touched)) {\r\n      <mat-error>ID required</mat-error>\r\n      } @if ($any(id.errors)?.maxLength && (id.dirty || id.touched)) {\r\n      <mat-error>id too long</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    }\r\n\r\n    <!-- type (bound) -->\r\n    @if (types()?.length) {\r\n    <mat-form-field>\r\n      <mat-label>type</mat-label>\r\n      <mat-select [formControl]=\"type\">\r\n        @for (i of types(); track i.id) {\r\n        <mat-option [value]=\"i.id\">{{ i.label }}</mat-option>\r\n        }\r\n      </mat-select>\r\n      @if ($any(type.errors)?.required && (type.dirty || type.touched)) {\r\n      <mat-error>type required</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    } @else {\r\n    <!-- type (free) -->\r\n    <mat-form-field>\r\n      <mat-label>type</mat-label>\r\n      <input matInput [formControl]=\"type\" />\r\n      @if ($any(type.errors)?.required && (type.dirty || type.touched)) {\r\n      <mat-error>type required</mat-error>\r\n      } @if ($any(type.errors)?.maxLength && (type.dirty || type.touched)) {\r\n      <mat-error>type too long</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    }\r\n\r\n    <!-- rank -->\r\n    <mat-form-field class=\"nr\">\r\n      <mat-label>rank</mat-label>\r\n      <input matInput [formControl]=\"rank\" type=\"number\" min=\"0\" />\r\n    </mat-form-field>\r\n  </div>\r\n  <!-- note -->\r\n  <div>\r\n    <mat-form-field class=\"long-text\">\r\n      <mat-label>note</mat-label>\r\n      <textarea matInput [formControl]=\"note\" class=\"long-text\"></textarea>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <!-- buttons -->\r\n  <div class=\"form-row\">\r\n    <button\r\n      type=\"button\"\r\n      color=\"warn\"\r\n      mat-icon-button\r\n      matTooltip=\"Discard changes\"\r\n      (click)=\"cancel()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n    </button>\r\n    <button\r\n      type=\"submit\"\r\n      color=\"primary\"\r\n      mat-icon-button\r\n      matTooltip=\"Accept changes\"\r\n      [disabled]=\"form.invalid\"\r\n    >\r\n      <mat-icon class=\"mat-primary\">check_circle</mat-icon>\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".long-text{width:100%;max-width:800px}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.nr{width:5em}table{width:100%;border-collapse:collapse;color:var(--mat-sys-on-surface-variant)}tbody tr:nth-child(odd){background-color:var(--mat-sys-surface-container)}th{text-align:left;font-weight:400;color:var(--mat-sys-on-surface-variant)}tbody tr:hover{background-color:var(--mat-sys-surface-container-high)}td.fit-width{width:1px;white-space:nowrap}tbody tr.selected{background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: OperationSourceEditorComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: OperationSourceEditorComponent, isStandalone: true, selector: "gve-operation-source-editor", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null }, ids: { classPropertyName: "ids", publicName: "ids", isSignal: true, isRequired: false, transformFunction: null }, types: { classPropertyName: "types", publicName: "types", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { source: "sourceChange", sourceCancel: "sourceCancel" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <div class=\"form-row\">\r\n    <!-- id -->\r\n    <!-- id (bound) -->\r\n    @if (ids()?.length) {\r\n    <mat-form-field>\r\n      <mat-label>id</mat-label>\r\n      <mat-select [formControl]=\"id\">\r\n        @for (i of ids(); track i.id) {\r\n        <mat-option [value]=\"i.id\">{{ i.label }}</mat-option>\r\n        }\r\n      </mat-select>\r\n      @if ($any(id.errors)?.required && (id.dirty || id.touched)) {\r\n      <mat-error>ID required</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    } @else {\r\n    <!-- id (free) -->\r\n    <mat-form-field>\r\n      <mat-label>id</mat-label>\r\n      <input matInput [formControl]=\"id\" />\r\n      @if ($any(id.errors)?.required && (id.dirty || id.touched)) {\r\n      <mat-error>ID required</mat-error>\r\n      } @if ($any(id.errors)?.maxLength && (id.dirty || id.touched)) {\r\n      <mat-error>id too long</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    }\r\n\r\n    <!-- type (bound) -->\r\n    @if (types()?.length) {\r\n    <mat-form-field>\r\n      <mat-label>type</mat-label>\r\n      <mat-select [formControl]=\"type\">\r\n        @for (i of types(); track i.id) {\r\n        <mat-option [value]=\"i.id\">{{ i.label }}</mat-option>\r\n        }\r\n      </mat-select>\r\n      @if ($any(type.errors)?.required && (type.dirty || type.touched)) {\r\n      <mat-error>type required</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    } @else {\r\n    <!-- type (free) -->\r\n    <mat-form-field>\r\n      <mat-label>type</mat-label>\r\n      <input matInput [formControl]=\"type\" />\r\n      @if ($any(type.errors)?.required && (type.dirty || type.touched)) {\r\n      <mat-error>type required</mat-error>\r\n      } @if ($any(type.errors)?.maxLength && (type.dirty || type.touched)) {\r\n      <mat-error>type too long</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    }\r\n\r\n    <!-- rank -->\r\n    <mat-form-field class=\"nr\">\r\n      <mat-label>rank</mat-label>\r\n      <input matInput [formControl]=\"rank\" type=\"number\" min=\"0\" />\r\n    </mat-form-field>\r\n  </div>\r\n  <!-- note -->\r\n  <div>\r\n    <mat-form-field class=\"long-text\">\r\n      <mat-label>note</mat-label>\r\n      <textarea matInput [formControl]=\"note\" class=\"long-text\"></textarea>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <!-- buttons -->\r\n  <div class=\"form-row\">\r\n    <button\r\n      type=\"button\"\r\n      color=\"warn\"\r\n      mat-icon-button\r\n      matTooltip=\"Discard changes\"\r\n      (click)=\"cancel()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n    </button>\r\n    <button\r\n      type=\"submit\"\r\n      color=\"primary\"\r\n      mat-icon-button\r\n      matTooltip=\"Accept changes\"\r\n      [disabled]=\"form.invalid\"\r\n    >\r\n      <mat-icon class=\"mat-primary\">check_circle</mat-icon>\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".long-text{width:100%;max-width:800px}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.nr{width:5em}table{width:100%;border-collapse:collapse;color:var(--mat-sys-on-surface-variant)}tbody tr:nth-child(odd){background-color:var(--mat-sys-surface-container)}th{text-align:left;font-weight:400;color:var(--mat-sys-on-surface-variant)}tbody tr:hover{background-color:var(--mat-sys-surface-container-high)}td.fit-width{width:1px;white-space:nowrap}tbody tr.selected{background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: OperationSourceEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: OperationSourceEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gve-operation-source-editor', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         ReactiveFormsModule,
@@ -1670,23 +1721,28 @@ class ChainOperationEditorComponent {
         /**
          * The operation to edit.
          */
-        this.operation = model(...(ngDevMode ? [undefined, { debugName: "operation" }] : /* istanbul ignore next */ []));
+        this.operation = model(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "operation" }] : /* istanbul ignore next */ []));
         /**
          * The snapshot the operation refers to.
          */
-        this.snapshot = input(...(ngDevMode ? [undefined, { debugName: "snapshot" }] : /* istanbul ignore next */ []));
+        this.snapshot = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "snapshot" }] : /* istanbul ignore next */ []));
         /**
          * Whether to hide the preview request button.
          */
-        this.hidePreview = input(...(ngDevMode ? [undefined, { debugName: "hidePreview" }] : /* istanbul ignore next */ []));
+        this.hidePreview = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "hidePreview" }] : /* istanbul ignore next */ []));
         /**
          * Definitions for features, including names, values, and properties.
          */
-        this.featureDefs = input(...(ngDevMode ? [undefined, { debugName: "featureDefs" }] : /* istanbul ignore next */ []));
+        this.featureDefs = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "featureDefs" }] : /* istanbul ignore next */ []));
         /**
          * Set when the edited operation's text range is to be patched.
          */
-        this.rangePatch = input(...(ngDevMode ? [undefined, { debugName: "rangePatch" }] : /* istanbul ignore next */ []));
+        this.rangePatch = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "rangePatch" }] : /* istanbul ignore next */ []));
         /**
          * The IDs of the features that are multi-valued. If a feature being
          * edited is in this list, the feature editor will allow adding multiple
@@ -1694,15 +1750,18 @@ class ChainOperationEditorComponent {
          */
         this.multiValuedFeatureIds = input([
             'r_hints',
-        ], ...(ngDevMode ? [{ debugName: "multiValuedFeatureIds" }] : /* istanbul ignore next */ []));
+        ], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "multiValuedFeatureIds" }] : /* istanbul ignore next */ []));
         /**
          * The list of source IDs when it's a closed set.
          */
-        this.sourceIds = input(...(ngDevMode ? [undefined, { debugName: "sourceIds" }] : /* istanbul ignore next */ []));
+        this.sourceIds = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "sourceIds" }] : /* istanbul ignore next */ []));
         /**
          * The list of source types when it's a closed set.
          */
-        this.sourceTypes = input(...(ngDevMode ? [undefined, { debugName: "sourceTypes" }] : /* istanbul ignore next */ []));
+        this.sourceTypes = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "sourceTypes" }] : /* istanbul ignore next */ []));
         /**
          * Emitted when the operation preview is requested.
          */
@@ -1711,18 +1770,27 @@ class ChainOperationEditorComponent {
          * Emitted when operation editing is cancelled.
          */
         this.operationCancel = output();
-        this.tabIndex = signal(0, ...(ngDevMode ? [{ debugName: "tabIndex" }] : /* istanbul ignore next */ []));
-        this.id = signal(undefined, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
-        this.hasTo = signal(false, ...(ngDevMode ? [{ debugName: "hasTo" }] : /* istanbul ignore next */ []));
-        this.hasToRun = signal(false, ...(ngDevMode ? [{ debugName: "hasToRun" }] : /* istanbul ignore next */ []));
-        this.hasValue = signal(false, ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+        this.tabIndex = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tabIndex" }] : /* istanbul ignore next */ []));
+        this.id = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        this.hasTo = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasTo" }] : /* istanbul ignore next */ []));
+        this.hasToRun = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasToRun" }] : /* istanbul ignore next */ []));
+        this.hasValue = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
         // elements parsed from SVG and having an id attribute;
         // we can attach features to each of these elements
-        this.elements = signal([], ...(ngDevMode ? [{ debugName: "elements" }] : /* istanbul ignore next */ []));
-        this.editedElementId = signal(undefined, ...(ngDevMode ? [{ debugName: "editedElementId" }] : /* istanbul ignore next */ []));
+        this.elements = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "elements" }] : /* istanbul ignore next */ []));
+        this.editedElementId = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editedElementId" }] : /* istanbul ignore next */ []));
         // source
-        this.editedSource = signal(undefined, ...(ngDevMode ? [{ debugName: "editedSource" }] : /* istanbul ignore next */ []));
-        this.editedSourceIndex = signal(-1, ...(ngDevMode ? [{ debugName: "editedSourceIndex" }] : /* istanbul ignore next */ []));
+        this.editedSource = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editedSource" }] : /* istanbul ignore next */ []));
+        this.editedSourceIndex = signal(-1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editedSourceIndex" }] : /* istanbul ignore next */ []));
         this._subs = [];
         // general
         this.rank = formBuilder.control(0, { nonNullable: true });
@@ -1974,10 +2042,10 @@ class ChainOperationEditorComponent {
         }
         this.operation.set(this.getOperation());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ChainOperationEditorComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: ChainOperationEditorComponent, isStandalone: true, selector: "gve-chain-operation-editor", inputs: { operation: { classPropertyName: "operation", publicName: "operation", isSignal: true, isRequired: false, transformFunction: null }, snapshot: { classPropertyName: "snapshot", publicName: "snapshot", isSignal: true, isRequired: false, transformFunction: null }, hidePreview: { classPropertyName: "hidePreview", publicName: "hidePreview", isSignal: true, isRequired: false, transformFunction: null }, featureDefs: { classPropertyName: "featureDefs", publicName: "featureDefs", isSignal: true, isRequired: false, transformFunction: null }, rangePatch: { classPropertyName: "rangePatch", publicName: "rangePatch", isSignal: true, isRequired: false, transformFunction: null }, multiValuedFeatureIds: { classPropertyName: "multiValuedFeatureIds", publicName: "multiValuedFeatureIds", isSignal: true, isRequired: false, transformFunction: null }, sourceIds: { classPropertyName: "sourceIds", publicName: "sourceIds", isSignal: true, isRequired: false, transformFunction: null }, sourceTypes: { classPropertyName: "sourceTypes", publicName: "sourceTypes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { operation: "operationChange", operationPreview: "operationPreview", operationCancel: "operationCancel" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <!-- tabs -->\r\n  <mat-tab-group [selectedIndex]=\"tabIndex()\">\r\n    <!-- GENERAL -->\r\n    <mat-tab label=\"general\">\r\n      <div class=\"form-row\">\r\n        <!-- id -->\r\n        <div id=\"id\" class=\"muted\">{{ id() }}</div>\r\n\r\n        <!-- type -->\r\n        <mat-form-field>\r\n          <mat-label>type</mat-label>\r\n          <mat-select [formControl]=\"type\">\r\n            <mat-option [value]=\"7\"\r\n              ><mat-icon>edit_note</mat-icon>annotate</mat-option\r\n            >\r\n            <mat-option [value]=\"0\"\r\n              ><mat-icon>layers</mat-icon> replace</mat-option\r\n            >\r\n            <mat-option [value]=\"1\"\r\n              ><mat-icon>close</mat-icon>delete</mat-option\r\n            >\r\n            <mat-option [value]=\"2\"\r\n              ><mat-icon>last_page</mat-icon>add-before</mat-option\r\n            >\r\n            <mat-option [value]=\"3\"\r\n              ><mat-icon>first_page</mat-icon>add-after</mat-option\r\n            >\r\n            <mat-option [value]=\"4\"\r\n              ><mat-icon>login</mat-icon>move-before</mat-option\r\n            >\r\n            <mat-option [value]=\"5\"\r\n              ><mat-icon>logout</mat-icon>move-after</mat-option\r\n            >\r\n            <mat-option [value]=\"6\"\r\n              ><mat-icon>compare_arrows</mat-icon>swap</mat-option\r\n            >\r\n          </mat-select>\r\n          @if ($any(type).errors?.required && (type.dirty || type.touched)) {\r\n            <mat-error>type required</mat-error>\r\n          }\r\n        </mat-form-field>\r\n\r\n        <!-- at -->\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>at</mat-label>\r\n          <input matInput [formControl]=\"at\" type=\"number\" min=\"0\" />\r\n          @if ($any(at).errors?.required && (at.dirty || at.touched)) {\r\n            <mat-error>at required</mat-error>\r\n          }\r\n          @if ($any(at).errors?.min && (at.dirty || at.touched)) {\r\n            <mat-error>at must be at least 0</mat-error>\r\n          }\r\n        </mat-form-field>\r\n\r\n        <!-- atAsIndex -->\r\n        <mat-checkbox [formControl]=\"atAsIndex\">idx</mat-checkbox>\r\n\r\n        <!-- run -->\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>run</mat-label>\r\n          <input matInput [formControl]=\"run\" type=\"number\" min=\"0\" />\r\n          @if ($any(run).errors?.required && (run.dirty || run.touched)) {\r\n            <mat-error>run required</mat-error>\r\n          }\r\n        </mat-form-field>\r\n\r\n        <!-- to -->\r\n        @if (hasTo()) {\r\n          <mat-form-field class=\"nr\">\r\n            <mat-label>to</mat-label>\r\n            <input matInput [formControl]=\"to\" type=\"number\" min=\"0\" />\r\n            @if ($any(to).errors?.required && (to.dirty || to.touched)) {\r\n              <mat-error>to required</mat-error>\r\n            }\r\n          </mat-form-field>\r\n\r\n          <!-- toAsIndex -->\r\n          <mat-checkbox [formControl]=\"toAsIndex\">idx</mat-checkbox>\r\n\r\n          <!-- toRun -->\r\n          @if (hasToRun()) {\r\n            <mat-form-field class=\"nr\">\r\n              <mat-label>to run</mat-label>\r\n              <input matInput [formControl]=\"toRun\" type=\"number\" min=\"0\" />\r\n              @if (\r\n                $any(toRun).errors?.required && (toRun.dirty || toRun.touched)\r\n              ) {\r\n                <mat-error>to run required</mat-error>\r\n              }\r\n            </mat-form-field>\r\n          }\r\n        }\r\n\r\n        <!-- value -->\r\n        @if (hasValue()) {\r\n          <mat-form-field>\r\n            <mat-label>value</mat-label>\r\n            <input matInput [formControl]=\"value\" />\r\n            @if (\r\n              $any(value).errors?.required && (value.dirty || value.touched)\r\n            ) {\r\n              <mat-error>value required</mat-error>\r\n            }\r\n          </mat-form-field>\r\n        }\r\n      </div>\r\n      <div class=\"form-row\">\r\n        <!-- rank -->\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>rank</mat-label>\r\n          <input matInput [formControl]=\"rank\" type=\"number\" min=\"0\" />\r\n          @if ($any(rank).errors?.required && (rank.dirty || rank.touched)) {\r\n            <mat-error>rank required</mat-error>\r\n          }\r\n        </mat-form-field>\r\n\r\n        <!-- groupId -->\r\n        <mat-form-field>\r\n          <mat-label>group ID</mat-label>\r\n          <input matInput [formControl]=\"groupId\" />\r\n          @if (\r\n            $any(groupId).errors?.required && (groupId.dirty || groupId.touched)\r\n          ) {\r\n            <mat-error>group ID required</mat-error>\r\n          }\r\n        </mat-form-field>\r\n\r\n        <!-- inputTag -->\r\n        <mat-form-field>\r\n          <mat-label>input tag</mat-label>\r\n          <input matInput [formControl]=\"inputTag\" />\r\n          <mat-hint>blank=latest</mat-hint>\r\n        </mat-form-field>\r\n\r\n        <!-- outputTag -->\r\n        <mat-form-field>\r\n          <mat-label>output tag</mat-label>\r\n          <input matInput [formControl]=\"outputTag\" />\r\n          <mat-hint>blank=auto (vN)</mat-hint>\r\n        </mat-form-field>\r\n      </div>\r\n      <div>\r\n        <!-- features -->\r\n        <fieldset>\r\n          <legend>operation features</legend>\r\n          <gve-feature-set-editor\r\n            [isVar]=\"true\"\r\n            [featNames]=\"featureDefs()?.names\"\r\n            [featValues]=\"featureDefs()?.values\"\r\n            [featProps]=\"featureDefs()?.props\"\r\n            [features]=\"features.value\"\r\n            [multiValuedFeatureIds]=\"multiValuedFeatureIds()\"\r\n            (featuresChange)=\"onFeaturesChange($event)\"\r\n          />\r\n        </fieldset>\r\n      </div>\r\n    </mat-tab>\r\n\r\n    <!-- SOURCES -->\r\n    <mat-tab label=\"sources\">\r\n      <div>\r\n        <button\r\n          type=\"button\"\r\n          mat-flat-button\r\n          color=\"primary\"\r\n          class=\"mat-primary\"\r\n          (click)=\"addSource()\"\r\n        >\r\n          <mat-icon>add_circle</mat-icon>\r\n          source\r\n        </button>\r\n      </div>\r\n      <table>\r\n        <thead>\r\n          <tr>\r\n            <th></th>\r\n            <th>type</th>\r\n            <th>id</th>\r\n            <th>rank</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (s of sources.value; track s) {\r\n            <tr [class.selected]=\"s === editedSource()\">\r\n              <td class=\"fit-width\">\r\n                <button\r\n                  type=\"button\"\r\n                  mat-icon-button\r\n                  color=\"primary\"\r\n                  (click)=\"editSource($index)\"\r\n                >\r\n                  <mat-icon class=\"mat-primary\">edit</mat-icon>\r\n                </button>\r\n                <button\r\n                  type=\"button\"\r\n                  mat-icon-button\r\n                  color=\"warn\"\r\n                  (click)=\"deleteSource($index)\"\r\n                >\r\n                  <mat-icon class=\"mat-warn\">delete</mat-icon>\r\n                </button>\r\n              </td>\r\n              <td>{{ s.type | flatLookup: sourceTypes() : \"id\" : \"label\" }}</td>\r\n              <td>{{ s.id | flatLookup: sourceIds() : \"id\" : \"label\" }}</td>\r\n              <td>{{ s.rank }}</td>\r\n            </tr>\r\n          }\r\n        </tbody>\r\n      </table>\r\n      @if (editedSource()) {\r\n        <!-- source editor -->\r\n        <mat-expansion-panel\r\n          [disabled]=\"!editedSource()\"\r\n          [expanded]=\"editedSource()\"\r\n        >\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>source</mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <gve-operation-source-editor\r\n            [source]=\"editedSource()\"\r\n            [ids]=\"sourceIds()\"\r\n            [types]=\"sourceTypes()\"\r\n            (sourceChange)=\"onSourceChange($event!)\"\r\n            (sourceCancel)=\"closeSource()\"\r\n          />\r\n        </mat-expansion-panel>\r\n      }\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n\r\n  <!-- buttons -->\r\n  <div id=\"submit-row\">\r\n    <button\r\n      type=\"button\"\r\n      color=\"warn\"\r\n      mat-icon-button\r\n      matTooltip=\"Discard operation\"\r\n      (click)=\"cancel()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n    </button>\r\n    @if (!hidePreview()) {\r\n      <button\r\n        type=\"button\"\r\n        color=\"primary\"\r\n        mat-icon-button\r\n        matTooltip=\"Preview operation\"\r\n        (click)=\"requestPreview()\"\r\n      >\r\n        <mat-icon class=\"mat-primary\">preview</mat-icon>\r\n      </button>\r\n    }\r\n    <button\r\n      type=\"submit\"\r\n      color=\"primary\"\r\n      class=\"mat-primary\"\r\n      mat-flat-button\r\n      matTooltip=\"Save operation\"\r\n      [disabled]=\"form.invalid || form.pristine\"\r\n    >\r\n      <mat-icon>check_circle</mat-icon>\r\n      save\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}#submit-row{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:8px;border-top:1px solid var(--mat-sys-on-surface-variant)}.toolbar-row{display:flex;align-items:center;flex-wrap:wrap}.nr{width:6em}.long-text{width:100%;max-width:800px}#id{border-radius:6px;padding:4px;background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container);margin-top:-16px}fieldset{border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;padding:8px;margin:8px 0}legend{color:var(--mat-sys-on-surface-variant)}table{width:100%;border-collapse:collapse;color:var(--mat-sys-on-surface-variant)}tbody tr:nth-child(odd){background-color:var(--mat-sys-surface-container)}th{text-align:left;font-weight:400;color:var(--mat-sys-on-surface-variant)}tbody tr:hover{background-color:var(--mat-sys-surface-container-high)}td.fit-width{width:1px;white-space:nowrap}tbody tr.selected{background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container)}#code{height:500px;border:1px solid var(--mat-sys-on-surface-variant)}#monaco{height:100%}#preview{box-sizing:border-box;width:100%;border:1px solid var(--mat-sys-on-surface-variant);border-radius:4px;padding:8px}.tree-invisible{display:none}.tree ul,.tree li{margin-top:0;margin-bottom:0;list-style-type:none}.selected-node{background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container)}.child-title{font-weight:700;margin:0;background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container);padding:8px}#tree-container{display:grid;grid-template-rows:auto;grid-template-columns:auto 1fr;grid-template-areas:\"nav ed\";gap:0 16px;align-items:stretch}#tree-nav{grid-area:nav;border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;margin:8px 0;padding-right:8px}#tree-ed{grid-area:ed;border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;margin:8px 0}@media only screen and (max-width:959px){div#container{grid-template-columns:1fr;grid-template-areas:\"nav\" \"ed\";gap:16px 0;align-items:start}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ClipboardModule }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i3$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i3$2.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i12.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i12.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: NgeMonacoModule }, { kind: "component", type: FeatureSetEditorComponent, selector: "gve-feature-set-editor", inputs: ["isVar", "featNames", "featValues", "featProps", "filterThreshold", "multiValuedFeatureIds", "batchMode", "features"], outputs: ["close", "featuresChange"] }, { kind: "component", type: OperationSourceEditorComponent, selector: "gve-operation-source-editor", inputs: ["source", "ids", "types"], outputs: ["sourceChange", "sourceCancel"] }, { kind: "pipe", type: FlatLookupPipe, name: "flatLookup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ChainOperationEditorComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: ChainOperationEditorComponent, isStandalone: true, selector: "gve-chain-operation-editor", inputs: { operation: { classPropertyName: "operation", publicName: "operation", isSignal: true, isRequired: false, transformFunction: null }, snapshot: { classPropertyName: "snapshot", publicName: "snapshot", isSignal: true, isRequired: false, transformFunction: null }, hidePreview: { classPropertyName: "hidePreview", publicName: "hidePreview", isSignal: true, isRequired: false, transformFunction: null }, featureDefs: { classPropertyName: "featureDefs", publicName: "featureDefs", isSignal: true, isRequired: false, transformFunction: null }, rangePatch: { classPropertyName: "rangePatch", publicName: "rangePatch", isSignal: true, isRequired: false, transformFunction: null }, multiValuedFeatureIds: { classPropertyName: "multiValuedFeatureIds", publicName: "multiValuedFeatureIds", isSignal: true, isRequired: false, transformFunction: null }, sourceIds: { classPropertyName: "sourceIds", publicName: "sourceIds", isSignal: true, isRequired: false, transformFunction: null }, sourceTypes: { classPropertyName: "sourceTypes", publicName: "sourceTypes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { operation: "operationChange", operationPreview: "operationPreview", operationCancel: "operationCancel" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <!-- tabs -->\r\n  <mat-tab-group [selectedIndex]=\"tabIndex()\">\r\n    <!-- GENERAL -->\r\n    <mat-tab label=\"general\">\r\n      <div class=\"form-row\">\r\n        <!-- id -->\r\n        <div id=\"id\" class=\"muted\">{{ id() }}</div>\r\n\r\n        <!-- type -->\r\n        <mat-form-field>\r\n          <mat-label>type</mat-label>\r\n          <mat-select [formControl]=\"type\">\r\n            <mat-option [value]=\"7\"\r\n              ><mat-icon>edit_note</mat-icon>annotate</mat-option\r\n            >\r\n            <mat-option [value]=\"0\"\r\n              ><mat-icon>layers</mat-icon> replace</mat-option\r\n            >\r\n            <mat-option [value]=\"1\"\r\n              ><mat-icon>close</mat-icon>delete</mat-option\r\n            >\r\n            <mat-option [value]=\"2\"\r\n              ><mat-icon>last_page</mat-icon>add-before</mat-option\r\n            >\r\n            <mat-option [value]=\"3\"\r\n              ><mat-icon>first_page</mat-icon>add-after</mat-option\r\n            >\r\n            <mat-option [value]=\"4\"\r\n              ><mat-icon>login</mat-icon>move-before</mat-option\r\n            >\r\n            <mat-option [value]=\"5\"\r\n              ><mat-icon>logout</mat-icon>move-after</mat-option\r\n            >\r\n            <mat-option [value]=\"6\"\r\n              ><mat-icon>compare_arrows</mat-icon>swap</mat-option\r\n            >\r\n          </mat-select>\r\n          @if ($any(type).errors?.required && (type.dirty || type.touched)) {\r\n            <mat-error>type required</mat-error>\r\n          }\r\n        </mat-form-field>\r\n\r\n        <!-- at -->\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>at</mat-label>\r\n          <input matInput [formControl]=\"at\" type=\"number\" min=\"0\" />\r\n          @if ($any(at).errors?.required && (at.dirty || at.touched)) {\r\n            <mat-error>at required</mat-error>\r\n          }\r\n          @if ($any(at).errors?.min && (at.dirty || at.touched)) {\r\n            <mat-error>at must be at least 0</mat-error>\r\n          }\r\n        </mat-form-field>\r\n\r\n        <!-- atAsIndex -->\r\n        <mat-checkbox [formControl]=\"atAsIndex\">idx</mat-checkbox>\r\n\r\n        <!-- run -->\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>run</mat-label>\r\n          <input matInput [formControl]=\"run\" type=\"number\" min=\"0\" />\r\n          @if ($any(run).errors?.required && (run.dirty || run.touched)) {\r\n            <mat-error>run required</mat-error>\r\n          }\r\n        </mat-form-field>\r\n\r\n        <!-- to -->\r\n        @if (hasTo()) {\r\n          <mat-form-field class=\"nr\">\r\n            <mat-label>to</mat-label>\r\n            <input matInput [formControl]=\"to\" type=\"number\" min=\"0\" />\r\n            @if ($any(to).errors?.required && (to.dirty || to.touched)) {\r\n              <mat-error>to required</mat-error>\r\n            }\r\n          </mat-form-field>\r\n\r\n          <!-- toAsIndex -->\r\n          <mat-checkbox [formControl]=\"toAsIndex\">idx</mat-checkbox>\r\n\r\n          <!-- toRun -->\r\n          @if (hasToRun()) {\r\n            <mat-form-field class=\"nr\">\r\n              <mat-label>to run</mat-label>\r\n              <input matInput [formControl]=\"toRun\" type=\"number\" min=\"0\" />\r\n              @if (\r\n                $any(toRun).errors?.required && (toRun.dirty || toRun.touched)\r\n              ) {\r\n                <mat-error>to run required</mat-error>\r\n              }\r\n            </mat-form-field>\r\n          }\r\n        }\r\n\r\n        <!-- value -->\r\n        @if (hasValue()) {\r\n          <mat-form-field>\r\n            <mat-label>value</mat-label>\r\n            <input matInput [formControl]=\"value\" />\r\n            @if (\r\n              $any(value).errors?.required && (value.dirty || value.touched)\r\n            ) {\r\n              <mat-error>value required</mat-error>\r\n            }\r\n          </mat-form-field>\r\n        }\r\n      </div>\r\n      <div class=\"form-row\">\r\n        <!-- rank -->\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>rank</mat-label>\r\n          <input matInput [formControl]=\"rank\" type=\"number\" min=\"0\" />\r\n          @if ($any(rank).errors?.required && (rank.dirty || rank.touched)) {\r\n            <mat-error>rank required</mat-error>\r\n          }\r\n        </mat-form-field>\r\n\r\n        <!-- groupId -->\r\n        <mat-form-field>\r\n          <mat-label>group ID</mat-label>\r\n          <input matInput [formControl]=\"groupId\" />\r\n          @if (\r\n            $any(groupId).errors?.required && (groupId.dirty || groupId.touched)\r\n          ) {\r\n            <mat-error>group ID required</mat-error>\r\n          }\r\n        </mat-form-field>\r\n\r\n        <!-- inputTag -->\r\n        <mat-form-field>\r\n          <mat-label>input tag</mat-label>\r\n          <input matInput [formControl]=\"inputTag\" />\r\n          <mat-hint>blank=latest</mat-hint>\r\n        </mat-form-field>\r\n\r\n        <!-- outputTag -->\r\n        <mat-form-field>\r\n          <mat-label>output tag</mat-label>\r\n          <input matInput [formControl]=\"outputTag\" />\r\n          <mat-hint>blank=auto (vN)</mat-hint>\r\n        </mat-form-field>\r\n      </div>\r\n      <div>\r\n        <!-- features -->\r\n        <fieldset>\r\n          <legend>operation features</legend>\r\n          <gve-feature-set-editor\r\n            [isVar]=\"true\"\r\n            [featNames]=\"$safeNavigationMigration(featureDefs()?.names)\"\r\n            [featValues]=\"$safeNavigationMigration(featureDefs()?.values)\"\r\n            [featProps]=\"$safeNavigationMigration(featureDefs()?.props)\"\r\n            [features]=\"features.value\"\r\n            [multiValuedFeatureIds]=\"multiValuedFeatureIds()\"\r\n            (featuresChange)=\"onFeaturesChange($event)\"\r\n          />\r\n        </fieldset>\r\n      </div>\r\n    </mat-tab>\r\n\r\n    <!-- SOURCES -->\r\n    <mat-tab label=\"sources\">\r\n      <div>\r\n        <button\r\n          type=\"button\"\r\n          mat-flat-button\r\n          color=\"primary\"\r\n          class=\"mat-primary\"\r\n          (click)=\"addSource()\"\r\n        >\r\n          <mat-icon>add_circle</mat-icon>\r\n          source\r\n        </button>\r\n      </div>\r\n      <table>\r\n        <thead>\r\n          <tr>\r\n            <th></th>\r\n            <th>type</th>\r\n            <th>id</th>\r\n            <th>rank</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (s of sources.value; track s) {\r\n            <tr [class.selected]=\"s === editedSource()\">\r\n              <td class=\"fit-width\">\r\n                <button\r\n                  type=\"button\"\r\n                  mat-icon-button\r\n                  color=\"primary\"\r\n                  (click)=\"editSource($index)\"\r\n                >\r\n                  <mat-icon class=\"mat-primary\">edit</mat-icon>\r\n                </button>\r\n                <button\r\n                  type=\"button\"\r\n                  mat-icon-button\r\n                  color=\"warn\"\r\n                  (click)=\"deleteSource($index)\"\r\n                >\r\n                  <mat-icon class=\"mat-warn\">delete</mat-icon>\r\n                </button>\r\n              </td>\r\n              <td>{{ s.type | flatLookup: sourceTypes() : \"id\" : \"label\" }}</td>\r\n              <td>{{ s.id | flatLookup: sourceIds() : \"id\" : \"label\" }}</td>\r\n              <td>{{ s.rank }}</td>\r\n            </tr>\r\n          }\r\n        </tbody>\r\n      </table>\r\n      @if (editedSource()) {\r\n        <!-- source editor -->\r\n        <mat-expansion-panel\r\n          [disabled]=\"!editedSource()\"\r\n          [expanded]=\"editedSource()\"\r\n        >\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>source</mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <gve-operation-source-editor\r\n            [source]=\"editedSource()\"\r\n            [ids]=\"sourceIds()\"\r\n            [types]=\"sourceTypes()\"\r\n            (sourceChange)=\"onSourceChange($event!)\"\r\n            (sourceCancel)=\"closeSource()\"\r\n          />\r\n        </mat-expansion-panel>\r\n      }\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n\r\n  <!-- buttons -->\r\n  <div id=\"submit-row\">\r\n    <button\r\n      type=\"button\"\r\n      color=\"warn\"\r\n      mat-icon-button\r\n      matTooltip=\"Discard operation\"\r\n      (click)=\"cancel()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n    </button>\r\n    @if (!hidePreview()) {\r\n      <button\r\n        type=\"button\"\r\n        color=\"primary\"\r\n        mat-icon-button\r\n        matTooltip=\"Preview operation\"\r\n        (click)=\"requestPreview()\"\r\n      >\r\n        <mat-icon class=\"mat-primary\">preview</mat-icon>\r\n      </button>\r\n    }\r\n    <button\r\n      type=\"submit\"\r\n      color=\"primary\"\r\n      class=\"mat-primary\"\r\n      mat-flat-button\r\n      matTooltip=\"Save operation\"\r\n      [disabled]=\"form.invalid || form.pristine\"\r\n    >\r\n      <mat-icon>check_circle</mat-icon>\r\n      save\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}#submit-row{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:8px;border-top:1px solid var(--mat-sys-on-surface-variant)}.toolbar-row{display:flex;align-items:center;flex-wrap:wrap}.nr{width:6em}.long-text{width:100%;max-width:800px}#id{border-radius:6px;padding:4px;background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container);margin-top:-16px}fieldset{border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;padding:8px;margin:8px 0}legend{color:var(--mat-sys-on-surface-variant)}table{width:100%;border-collapse:collapse;color:var(--mat-sys-on-surface-variant)}tbody tr:nth-child(odd){background-color:var(--mat-sys-surface-container)}th{text-align:left;font-weight:400;color:var(--mat-sys-on-surface-variant)}tbody tr:hover{background-color:var(--mat-sys-surface-container-high)}td.fit-width{width:1px;white-space:nowrap}tbody tr.selected{background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container)}#code{height:500px;border:1px solid var(--mat-sys-on-surface-variant)}#monaco{height:100%}#preview{box-sizing:border-box;width:100%;border:1px solid var(--mat-sys-on-surface-variant);border-radius:4px;padding:8px}.tree-invisible{display:none}.tree ul,.tree li{margin-top:0;margin-bottom:0;list-style-type:none}.selected-node{background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container)}.child-title{font-weight:700;margin:0;background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container);padding:8px}#tree-container{display:grid;grid-template-rows:auto;grid-template-columns:auto 1fr;grid-template-areas:\"nav ed\";gap:0 16px;align-items:stretch}#tree-nav{grid-area:nav;border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;margin:8px 0;padding-right:8px}#tree-ed{grid-area:ed;border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;margin:8px 0}@media only screen and (max-width:959px){div#container{grid-template-columns:1fr;grid-template-areas:\"nav\" \"ed\";gap:16px 0;align-items:start}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ClipboardModule }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i3$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i3$2.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i12.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i12.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FeatureSetEditorComponent, selector: "gve-feature-set-editor", inputs: ["isVar", "featNames", "featValues", "featProps", "filterThreshold", "multiValuedFeatureIds", "batchMode", "features"], outputs: ["close", "featuresChange"] }, { kind: "component", type: OperationSourceEditorComponent, selector: "gve-operation-source-editor", inputs: ["source", "ids", "types"], outputs: ["sourceChange", "sourceCancel"] }, { kind: "pipe", type: FlatLookupPipe, name: "flatLookup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ChainOperationEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ChainOperationEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gve-chain-operation-editor', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         ReactiveFormsModule,
@@ -1992,11 +2060,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         MatSelectModule,
                         MatTabsModule,
                         MatTooltipModule,
-                        NgeMonacoModule,
                         FeatureSetEditorComponent,
                         OperationSourceEditorComponent,
                         FlatLookupPipe,
-                    ], template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <!-- tabs -->\r\n  <mat-tab-group [selectedIndex]=\"tabIndex()\">\r\n    <!-- GENERAL -->\r\n    <mat-tab label=\"general\">\r\n      <div class=\"form-row\">\r\n        <!-- id -->\r\n        <div id=\"id\" class=\"muted\">{{ id() }}</div>\r\n\r\n        <!-- type -->\r\n        <mat-form-field>\r\n          <mat-label>type</mat-label>\r\n          <mat-select [formControl]=\"type\">\r\n            <mat-option [value]=\"7\"\r\n              ><mat-icon>edit_note</mat-icon>annotate</mat-option\r\n            >\r\n            <mat-option [value]=\"0\"\r\n              ><mat-icon>layers</mat-icon> replace</mat-option\r\n            >\r\n            <mat-option [value]=\"1\"\r\n              ><mat-icon>close</mat-icon>delete</mat-option\r\n            >\r\n            <mat-option [value]=\"2\"\r\n              ><mat-icon>last_page</mat-icon>add-before</mat-option\r\n            >\r\n            <mat-option [value]=\"3\"\r\n              ><mat-icon>first_page</mat-icon>add-after</mat-option\r\n            >\r\n            <mat-option [value]=\"4\"\r\n              ><mat-icon>login</mat-icon>move-before</mat-option\r\n            >\r\n            <mat-option [value]=\"5\"\r\n              ><mat-icon>logout</mat-icon>move-after</mat-option\r\n            >\r\n            <mat-option [value]=\"6\"\r\n              ><mat-icon>compare_arrows</mat-icon>swap</mat-option\r\n            >\r\n          </mat-select>\r\n          @if ($any(type).errors?.required && (type.dirty || type.touched)) {\r\n            <mat-error>type required</mat-error>\r\n          }\r\n        </mat-form-field>\r\n\r\n        <!-- at -->\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>at</mat-label>\r\n          <input matInput [formControl]=\"at\" type=\"number\" min=\"0\" />\r\n          @if ($any(at).errors?.required && (at.dirty || at.touched)) {\r\n            <mat-error>at required</mat-error>\r\n          }\r\n          @if ($any(at).errors?.min && (at.dirty || at.touched)) {\r\n            <mat-error>at must be at least 0</mat-error>\r\n          }\r\n        </mat-form-field>\r\n\r\n        <!-- atAsIndex -->\r\n        <mat-checkbox [formControl]=\"atAsIndex\">idx</mat-checkbox>\r\n\r\n        <!-- run -->\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>run</mat-label>\r\n          <input matInput [formControl]=\"run\" type=\"number\" min=\"0\" />\r\n          @if ($any(run).errors?.required && (run.dirty || run.touched)) {\r\n            <mat-error>run required</mat-error>\r\n          }\r\n        </mat-form-field>\r\n\r\n        <!-- to -->\r\n        @if (hasTo()) {\r\n          <mat-form-field class=\"nr\">\r\n            <mat-label>to</mat-label>\r\n            <input matInput [formControl]=\"to\" type=\"number\" min=\"0\" />\r\n            @if ($any(to).errors?.required && (to.dirty || to.touched)) {\r\n              <mat-error>to required</mat-error>\r\n            }\r\n          </mat-form-field>\r\n\r\n          <!-- toAsIndex -->\r\n          <mat-checkbox [formControl]=\"toAsIndex\">idx</mat-checkbox>\r\n\r\n          <!-- toRun -->\r\n          @if (hasToRun()) {\r\n            <mat-form-field class=\"nr\">\r\n              <mat-label>to run</mat-label>\r\n              <input matInput [formControl]=\"toRun\" type=\"number\" min=\"0\" />\r\n              @if (\r\n                $any(toRun).errors?.required && (toRun.dirty || toRun.touched)\r\n              ) {\r\n                <mat-error>to run required</mat-error>\r\n              }\r\n            </mat-form-field>\r\n          }\r\n        }\r\n\r\n        <!-- value -->\r\n        @if (hasValue()) {\r\n          <mat-form-field>\r\n            <mat-label>value</mat-label>\r\n            <input matInput [formControl]=\"value\" />\r\n            @if (\r\n              $any(value).errors?.required && (value.dirty || value.touched)\r\n            ) {\r\n              <mat-error>value required</mat-error>\r\n            }\r\n          </mat-form-field>\r\n        }\r\n      </div>\r\n      <div class=\"form-row\">\r\n        <!-- rank -->\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>rank</mat-label>\r\n          <input matInput [formControl]=\"rank\" type=\"number\" min=\"0\" />\r\n          @if ($any(rank).errors?.required && (rank.dirty || rank.touched)) {\r\n            <mat-error>rank required</mat-error>\r\n          }\r\n        </mat-form-field>\r\n\r\n        <!-- groupId -->\r\n        <mat-form-field>\r\n          <mat-label>group ID</mat-label>\r\n          <input matInput [formControl]=\"groupId\" />\r\n          @if (\r\n            $any(groupId).errors?.required && (groupId.dirty || groupId.touched)\r\n          ) {\r\n            <mat-error>group ID required</mat-error>\r\n          }\r\n        </mat-form-field>\r\n\r\n        <!-- inputTag -->\r\n        <mat-form-field>\r\n          <mat-label>input tag</mat-label>\r\n          <input matInput [formControl]=\"inputTag\" />\r\n          <mat-hint>blank=latest</mat-hint>\r\n        </mat-form-field>\r\n\r\n        <!-- outputTag -->\r\n        <mat-form-field>\r\n          <mat-label>output tag</mat-label>\r\n          <input matInput [formControl]=\"outputTag\" />\r\n          <mat-hint>blank=auto (vN)</mat-hint>\r\n        </mat-form-field>\r\n      </div>\r\n      <div>\r\n        <!-- features -->\r\n        <fieldset>\r\n          <legend>operation features</legend>\r\n          <gve-feature-set-editor\r\n            [isVar]=\"true\"\r\n            [featNames]=\"featureDefs()?.names\"\r\n            [featValues]=\"featureDefs()?.values\"\r\n            [featProps]=\"featureDefs()?.props\"\r\n            [features]=\"features.value\"\r\n            [multiValuedFeatureIds]=\"multiValuedFeatureIds()\"\r\n            (featuresChange)=\"onFeaturesChange($event)\"\r\n          />\r\n        </fieldset>\r\n      </div>\r\n    </mat-tab>\r\n\r\n    <!-- SOURCES -->\r\n    <mat-tab label=\"sources\">\r\n      <div>\r\n        <button\r\n          type=\"button\"\r\n          mat-flat-button\r\n          color=\"primary\"\r\n          class=\"mat-primary\"\r\n          (click)=\"addSource()\"\r\n        >\r\n          <mat-icon>add_circle</mat-icon>\r\n          source\r\n        </button>\r\n      </div>\r\n      <table>\r\n        <thead>\r\n          <tr>\r\n            <th></th>\r\n            <th>type</th>\r\n            <th>id</th>\r\n            <th>rank</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (s of sources.value; track s) {\r\n            <tr [class.selected]=\"s === editedSource()\">\r\n              <td class=\"fit-width\">\r\n                <button\r\n                  type=\"button\"\r\n                  mat-icon-button\r\n                  color=\"primary\"\r\n                  (click)=\"editSource($index)\"\r\n                >\r\n                  <mat-icon class=\"mat-primary\">edit</mat-icon>\r\n                </button>\r\n                <button\r\n                  type=\"button\"\r\n                  mat-icon-button\r\n                  color=\"warn\"\r\n                  (click)=\"deleteSource($index)\"\r\n                >\r\n                  <mat-icon class=\"mat-warn\">delete</mat-icon>\r\n                </button>\r\n              </td>\r\n              <td>{{ s.type | flatLookup: sourceTypes() : \"id\" : \"label\" }}</td>\r\n              <td>{{ s.id | flatLookup: sourceIds() : \"id\" : \"label\" }}</td>\r\n              <td>{{ s.rank }}</td>\r\n            </tr>\r\n          }\r\n        </tbody>\r\n      </table>\r\n      @if (editedSource()) {\r\n        <!-- source editor -->\r\n        <mat-expansion-panel\r\n          [disabled]=\"!editedSource()\"\r\n          [expanded]=\"editedSource()\"\r\n        >\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>source</mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <gve-operation-source-editor\r\n            [source]=\"editedSource()\"\r\n            [ids]=\"sourceIds()\"\r\n            [types]=\"sourceTypes()\"\r\n            (sourceChange)=\"onSourceChange($event!)\"\r\n            (sourceCancel)=\"closeSource()\"\r\n          />\r\n        </mat-expansion-panel>\r\n      }\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n\r\n  <!-- buttons -->\r\n  <div id=\"submit-row\">\r\n    <button\r\n      type=\"button\"\r\n      color=\"warn\"\r\n      mat-icon-button\r\n      matTooltip=\"Discard operation\"\r\n      (click)=\"cancel()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n    </button>\r\n    @if (!hidePreview()) {\r\n      <button\r\n        type=\"button\"\r\n        color=\"primary\"\r\n        mat-icon-button\r\n        matTooltip=\"Preview operation\"\r\n        (click)=\"requestPreview()\"\r\n      >\r\n        <mat-icon class=\"mat-primary\">preview</mat-icon>\r\n      </button>\r\n    }\r\n    <button\r\n      type=\"submit\"\r\n      color=\"primary\"\r\n      class=\"mat-primary\"\r\n      mat-flat-button\r\n      matTooltip=\"Save operation\"\r\n      [disabled]=\"form.invalid || form.pristine\"\r\n    >\r\n      <mat-icon>check_circle</mat-icon>\r\n      save\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}#submit-row{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:8px;border-top:1px solid var(--mat-sys-on-surface-variant)}.toolbar-row{display:flex;align-items:center;flex-wrap:wrap}.nr{width:6em}.long-text{width:100%;max-width:800px}#id{border-radius:6px;padding:4px;background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container);margin-top:-16px}fieldset{border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;padding:8px;margin:8px 0}legend{color:var(--mat-sys-on-surface-variant)}table{width:100%;border-collapse:collapse;color:var(--mat-sys-on-surface-variant)}tbody tr:nth-child(odd){background-color:var(--mat-sys-surface-container)}th{text-align:left;font-weight:400;color:var(--mat-sys-on-surface-variant)}tbody tr:hover{background-color:var(--mat-sys-surface-container-high)}td.fit-width{width:1px;white-space:nowrap}tbody tr.selected{background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container)}#code{height:500px;border:1px solid var(--mat-sys-on-surface-variant)}#monaco{height:100%}#preview{box-sizing:border-box;width:100%;border:1px solid var(--mat-sys-on-surface-variant);border-radius:4px;padding:8px}.tree-invisible{display:none}.tree ul,.tree li{margin-top:0;margin-bottom:0;list-style-type:none}.selected-node{background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container)}.child-title{font-weight:700;margin:0;background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container);padding:8px}#tree-container{display:grid;grid-template-rows:auto;grid-template-columns:auto 1fr;grid-template-areas:\"nav ed\";gap:0 16px;align-items:stretch}#tree-nav{grid-area:nav;border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;margin:8px 0;padding-right:8px}#tree-ed{grid-area:ed;border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;margin:8px 0}@media only screen and (max-width:959px){div#container{grid-template-columns:1fr;grid-template-areas:\"nav\" \"ed\";gap:16px 0;align-items:start}}\n"] }]
+                    ], template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <!-- tabs -->\r\n  <mat-tab-group [selectedIndex]=\"tabIndex()\">\r\n    <!-- GENERAL -->\r\n    <mat-tab label=\"general\">\r\n      <div class=\"form-row\">\r\n        <!-- id -->\r\n        <div id=\"id\" class=\"muted\">{{ id() }}</div>\r\n\r\n        <!-- type -->\r\n        <mat-form-field>\r\n          <mat-label>type</mat-label>\r\n          <mat-select [formControl]=\"type\">\r\n            <mat-option [value]=\"7\"\r\n              ><mat-icon>edit_note</mat-icon>annotate</mat-option\r\n            >\r\n            <mat-option [value]=\"0\"\r\n              ><mat-icon>layers</mat-icon> replace</mat-option\r\n            >\r\n            <mat-option [value]=\"1\"\r\n              ><mat-icon>close</mat-icon>delete</mat-option\r\n            >\r\n            <mat-option [value]=\"2\"\r\n              ><mat-icon>last_page</mat-icon>add-before</mat-option\r\n            >\r\n            <mat-option [value]=\"3\"\r\n              ><mat-icon>first_page</mat-icon>add-after</mat-option\r\n            >\r\n            <mat-option [value]=\"4\"\r\n              ><mat-icon>login</mat-icon>move-before</mat-option\r\n            >\r\n            <mat-option [value]=\"5\"\r\n              ><mat-icon>logout</mat-icon>move-after</mat-option\r\n            >\r\n            <mat-option [value]=\"6\"\r\n              ><mat-icon>compare_arrows</mat-icon>swap</mat-option\r\n            >\r\n          </mat-select>\r\n          @if ($any(type).errors?.required && (type.dirty || type.touched)) {\r\n            <mat-error>type required</mat-error>\r\n          }\r\n        </mat-form-field>\r\n\r\n        <!-- at -->\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>at</mat-label>\r\n          <input matInput [formControl]=\"at\" type=\"number\" min=\"0\" />\r\n          @if ($any(at).errors?.required && (at.dirty || at.touched)) {\r\n            <mat-error>at required</mat-error>\r\n          }\r\n          @if ($any(at).errors?.min && (at.dirty || at.touched)) {\r\n            <mat-error>at must be at least 0</mat-error>\r\n          }\r\n        </mat-form-field>\r\n\r\n        <!-- atAsIndex -->\r\n        <mat-checkbox [formControl]=\"atAsIndex\">idx</mat-checkbox>\r\n\r\n        <!-- run -->\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>run</mat-label>\r\n          <input matInput [formControl]=\"run\" type=\"number\" min=\"0\" />\r\n          @if ($any(run).errors?.required && (run.dirty || run.touched)) {\r\n            <mat-error>run required</mat-error>\r\n          }\r\n        </mat-form-field>\r\n\r\n        <!-- to -->\r\n        @if (hasTo()) {\r\n          <mat-form-field class=\"nr\">\r\n            <mat-label>to</mat-label>\r\n            <input matInput [formControl]=\"to\" type=\"number\" min=\"0\" />\r\n            @if ($any(to).errors?.required && (to.dirty || to.touched)) {\r\n              <mat-error>to required</mat-error>\r\n            }\r\n          </mat-form-field>\r\n\r\n          <!-- toAsIndex -->\r\n          <mat-checkbox [formControl]=\"toAsIndex\">idx</mat-checkbox>\r\n\r\n          <!-- toRun -->\r\n          @if (hasToRun()) {\r\n            <mat-form-field class=\"nr\">\r\n              <mat-label>to run</mat-label>\r\n              <input matInput [formControl]=\"toRun\" type=\"number\" min=\"0\" />\r\n              @if (\r\n                $any(toRun).errors?.required && (toRun.dirty || toRun.touched)\r\n              ) {\r\n                <mat-error>to run required</mat-error>\r\n              }\r\n            </mat-form-field>\r\n          }\r\n        }\r\n\r\n        <!-- value -->\r\n        @if (hasValue()) {\r\n          <mat-form-field>\r\n            <mat-label>value</mat-label>\r\n            <input matInput [formControl]=\"value\" />\r\n            @if (\r\n              $any(value).errors?.required && (value.dirty || value.touched)\r\n            ) {\r\n              <mat-error>value required</mat-error>\r\n            }\r\n          </mat-form-field>\r\n        }\r\n      </div>\r\n      <div class=\"form-row\">\r\n        <!-- rank -->\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>rank</mat-label>\r\n          <input matInput [formControl]=\"rank\" type=\"number\" min=\"0\" />\r\n          @if ($any(rank).errors?.required && (rank.dirty || rank.touched)) {\r\n            <mat-error>rank required</mat-error>\r\n          }\r\n        </mat-form-field>\r\n\r\n        <!-- groupId -->\r\n        <mat-form-field>\r\n          <mat-label>group ID</mat-label>\r\n          <input matInput [formControl]=\"groupId\" />\r\n          @if (\r\n            $any(groupId).errors?.required && (groupId.dirty || groupId.touched)\r\n          ) {\r\n            <mat-error>group ID required</mat-error>\r\n          }\r\n        </mat-form-field>\r\n\r\n        <!-- inputTag -->\r\n        <mat-form-field>\r\n          <mat-label>input tag</mat-label>\r\n          <input matInput [formControl]=\"inputTag\" />\r\n          <mat-hint>blank=latest</mat-hint>\r\n        </mat-form-field>\r\n\r\n        <!-- outputTag -->\r\n        <mat-form-field>\r\n          <mat-label>output tag</mat-label>\r\n          <input matInput [formControl]=\"outputTag\" />\r\n          <mat-hint>blank=auto (vN)</mat-hint>\r\n        </mat-form-field>\r\n      </div>\r\n      <div>\r\n        <!-- features -->\r\n        <fieldset>\r\n          <legend>operation features</legend>\r\n          <gve-feature-set-editor\r\n            [isVar]=\"true\"\r\n            [featNames]=\"$safeNavigationMigration(featureDefs()?.names)\"\r\n            [featValues]=\"$safeNavigationMigration(featureDefs()?.values)\"\r\n            [featProps]=\"$safeNavigationMigration(featureDefs()?.props)\"\r\n            [features]=\"features.value\"\r\n            [multiValuedFeatureIds]=\"multiValuedFeatureIds()\"\r\n            (featuresChange)=\"onFeaturesChange($event)\"\r\n          />\r\n        </fieldset>\r\n      </div>\r\n    </mat-tab>\r\n\r\n    <!-- SOURCES -->\r\n    <mat-tab label=\"sources\">\r\n      <div>\r\n        <button\r\n          type=\"button\"\r\n          mat-flat-button\r\n          color=\"primary\"\r\n          class=\"mat-primary\"\r\n          (click)=\"addSource()\"\r\n        >\r\n          <mat-icon>add_circle</mat-icon>\r\n          source\r\n        </button>\r\n      </div>\r\n      <table>\r\n        <thead>\r\n          <tr>\r\n            <th></th>\r\n            <th>type</th>\r\n            <th>id</th>\r\n            <th>rank</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (s of sources.value; track s) {\r\n            <tr [class.selected]=\"s === editedSource()\">\r\n              <td class=\"fit-width\">\r\n                <button\r\n                  type=\"button\"\r\n                  mat-icon-button\r\n                  color=\"primary\"\r\n                  (click)=\"editSource($index)\"\r\n                >\r\n                  <mat-icon class=\"mat-primary\">edit</mat-icon>\r\n                </button>\r\n                <button\r\n                  type=\"button\"\r\n                  mat-icon-button\r\n                  color=\"warn\"\r\n                  (click)=\"deleteSource($index)\"\r\n                >\r\n                  <mat-icon class=\"mat-warn\">delete</mat-icon>\r\n                </button>\r\n              </td>\r\n              <td>{{ s.type | flatLookup: sourceTypes() : \"id\" : \"label\" }}</td>\r\n              <td>{{ s.id | flatLookup: sourceIds() : \"id\" : \"label\" }}</td>\r\n              <td>{{ s.rank }}</td>\r\n            </tr>\r\n          }\r\n        </tbody>\r\n      </table>\r\n      @if (editedSource()) {\r\n        <!-- source editor -->\r\n        <mat-expansion-panel\r\n          [disabled]=\"!editedSource()\"\r\n          [expanded]=\"editedSource()\"\r\n        >\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>source</mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <gve-operation-source-editor\r\n            [source]=\"editedSource()\"\r\n            [ids]=\"sourceIds()\"\r\n            [types]=\"sourceTypes()\"\r\n            (sourceChange)=\"onSourceChange($event!)\"\r\n            (sourceCancel)=\"closeSource()\"\r\n          />\r\n        </mat-expansion-panel>\r\n      }\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n\r\n  <!-- buttons -->\r\n  <div id=\"submit-row\">\r\n    <button\r\n      type=\"button\"\r\n      color=\"warn\"\r\n      mat-icon-button\r\n      matTooltip=\"Discard operation\"\r\n      (click)=\"cancel()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n    </button>\r\n    @if (!hidePreview()) {\r\n      <button\r\n        type=\"button\"\r\n        color=\"primary\"\r\n        mat-icon-button\r\n        matTooltip=\"Preview operation\"\r\n        (click)=\"requestPreview()\"\r\n      >\r\n        <mat-icon class=\"mat-primary\">preview</mat-icon>\r\n      </button>\r\n    }\r\n    <button\r\n      type=\"submit\"\r\n      color=\"primary\"\r\n      class=\"mat-primary\"\r\n      mat-flat-button\r\n      matTooltip=\"Save operation\"\r\n      [disabled]=\"form.invalid || form.pristine\"\r\n    >\r\n      <mat-icon>check_circle</mat-icon>\r\n      save\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}#submit-row{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:8px;border-top:1px solid var(--mat-sys-on-surface-variant)}.toolbar-row{display:flex;align-items:center;flex-wrap:wrap}.nr{width:6em}.long-text{width:100%;max-width:800px}#id{border-radius:6px;padding:4px;background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container);margin-top:-16px}fieldset{border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;padding:8px;margin:8px 0}legend{color:var(--mat-sys-on-surface-variant)}table{width:100%;border-collapse:collapse;color:var(--mat-sys-on-surface-variant)}tbody tr:nth-child(odd){background-color:var(--mat-sys-surface-container)}th{text-align:left;font-weight:400;color:var(--mat-sys-on-surface-variant)}tbody tr:hover{background-color:var(--mat-sys-surface-container-high)}td.fit-width{width:1px;white-space:nowrap}tbody tr.selected{background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container)}#code{height:500px;border:1px solid var(--mat-sys-on-surface-variant)}#monaco{height:100%}#preview{box-sizing:border-box;width:100%;border:1px solid var(--mat-sys-on-surface-variant);border-radius:4px;padding:8px}.tree-invisible{display:none}.tree ul,.tree li{margin-top:0;margin-bottom:0;list-style-type:none}.selected-node{background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container)}.child-title{font-weight:700;margin:0;background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container);padding:8px}#tree-container{display:grid;grid-template-rows:auto;grid-template-columns:auto 1fr;grid-template-areas:\"nav ed\";gap:0 16px;align-items:stretch}#tree-nav{grid-area:nav;border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;margin:8px 0;padding-right:8px}#tree-ed{grid-area:ed;border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;margin:8px 0}@media only screen and (max-width:959px){div#container{grid-template-columns:1fr;grid-template-areas:\"nav\" \"ed\";gap:16px 0;align-items:start}}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.FormBuilder }], propDecorators: { operation: [{ type: i0.Input, args: [{ isSignal: true, alias: "operation", required: false }] }, { type: i0.Output, args: ["operationChange"] }], snapshot: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapshot", required: false }] }], hidePreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePreview", required: false }] }], featureDefs: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureDefs", required: false }] }], rangePatch: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangePatch", required: false }] }], multiValuedFeatureIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiValuedFeatureIds", required: false }] }], sourceIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceIds", required: false }] }], sourceTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceTypes", required: false }] }], operationPreview: [{ type: i0.Output, args: ["operationPreview"] }], operationCancel: [{ type: i0.Output, args: ["operationCancel"] }] } });
 
 /**
@@ -2021,26 +2088,31 @@ class FeatureSetViewComponent {
         /**
          * The features.
          */
-        this.features = input([], ...(ngDevMode ? [{ debugName: "features" }] : /* istanbul ignore next */ []));
+        this.features = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "features" }] : /* istanbul ignore next */ []));
         /**
          * The list of feature names to display in the name selection.
          * This is used when you have a closed list of features.
          */
-        this.featNames = input(...(ngDevMode ? [undefined, { debugName: "featNames" }] : /* istanbul ignore next */ []));
+        this.featNames = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "featNames" }] : /* istanbul ignore next */ []));
         /**
          * The feature values map. When specified and the user selects a feature
          * name present in the map keys, the corresponding values will be used
          * to populate the value selection.
          */
-        this.featValues = input(...(ngDevMode ? [undefined, { debugName: "featValues" }] : /* istanbul ignore next */ []));
+        this.featValues = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "featValues" }] : /* istanbul ignore next */ []));
         /**
          * The threshold at which the features filter should become visible.
          * If set to 0, the filter is always visible; if set to -1, it is always
          * invisible; otherwise, it gets visible when the number of features
          * is greater than the threshold. Default is 5.
          */
-        this.filterThreshold = input(5, ...(ngDevMode ? [{ debugName: "filterThreshold" }] : /* istanbul ignore next */ []));
-        this.filteredFeatures = signal([], ...(ngDevMode ? [{ debugName: "filteredFeatures" }] : /* istanbul ignore next */ []));
+        this.filterThreshold = input(5, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterThreshold" }] : /* istanbul ignore next */ []));
+        this.filteredFeatures = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filteredFeatures" }] : /* istanbul ignore next */ []));
         this.filter = formBuilder.control(null);
         // when features change, reset the filter and apply it
         effect(() => {
@@ -2065,10 +2137,10 @@ class FeatureSetViewComponent {
     ngOnDestroy() {
         this._sub?.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: FeatureSetViewComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: FeatureSetViewComponent, isStandalone: true, selector: "gve-feature-set-view", inputs: { features: { classPropertyName: "features", publicName: "features", isSignal: true, isRequired: false, transformFunction: null }, featNames: { classPropertyName: "featNames", publicName: "featNames", isSignal: true, isRequired: false, transformFunction: null }, featValues: { classPropertyName: "featValues", publicName: "featValues", isSignal: true, isRequired: false, transformFunction: null }, filterThreshold: { classPropertyName: "filterThreshold", publicName: "filterThreshold", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div>\r\n  <!-- filter -->\r\n  <div>\r\n    @if (filterThreshold() === 0 || features()!.length > filterThreshold()) {\r\n      <div class=\"form-row\">\r\n        <mat-form-field id=\"filter\">\r\n          <mat-label>filter</mat-label>\r\n          <input matInput [formControl]=\"filter\" />\r\n          <button\r\n            type=\"button\"\r\n            mat-icon-button\r\n            matSuffix\r\n            (click)=\"filter.reset()\"\r\n            [disabled]=\"!filter.value\"\r\n            [attr.aria-label]=\"'Reset filter'\"\r\n          >\r\n            <mat-icon color=\"warn\" class=\"mat-warn\">cancel</mat-icon>\r\n          </button>\r\n        </mat-form-field>\r\n        <span id=\"badge\">{{ filteredFeatures().length }}</span>\r\n      </div>\r\n    }\r\n\r\n    <!-- list -->\r\n    @if (filteredFeatures().length) {\r\n      <table>\r\n        <tbody>\r\n          @for (feature of filteredFeatures(); track $index) {\r\n            <tr>\r\n              <th>\r\n                @if (featNames()?.length) {\r\n                  <span>{{\r\n                    feature.name | flatLookup: featNames() : \"id\" : \"label\"\r\n                  }}</span>\r\n                } @else {\r\n                  <span>{{ feature.name }}</span>\r\n                }\r\n              </th>\r\n              <td>\r\n                @if (featValues()) {\r\n                  <span>{{\r\n                    feature.value | flatLookup: featValues()![feature.name]\r\n                  }}</span>\r\n                } @else {\r\n                  <span>{{ feature.value }}</span>\r\n                }\r\n              </td>\r\n            </tr>\r\n          }\r\n        </tbody>\r\n      </table>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;min-width:0}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.in-row-button{margin-top:-16px}table{width:100%;border-collapse:collapse;color:var(--mat-sys-on-surface-variant)}tbody tr:nth-child(odd){background-color:var(--mat-sys-surface-container)}th{text-align:left;font-weight:400;color:var(--mat-sys-on-surface-variant)}tbody tr:hover{background-color:var(--mat-sys-surface-container-high)}td.fit-width{width:1px;white-space:nowrap}tbody tr.selected{background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container)}#filter{width:7em}#badge{border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;padding:4px;margin-top:-18px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "pipe", type: FlatLookupPipe, name: "flatLookup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FeatureSetViewComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FeatureSetViewComponent, isStandalone: true, selector: "gve-feature-set-view", inputs: { features: { classPropertyName: "features", publicName: "features", isSignal: true, isRequired: false, transformFunction: null }, featNames: { classPropertyName: "featNames", publicName: "featNames", isSignal: true, isRequired: false, transformFunction: null }, featValues: { classPropertyName: "featValues", publicName: "featValues", isSignal: true, isRequired: false, transformFunction: null }, filterThreshold: { classPropertyName: "filterThreshold", publicName: "filterThreshold", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div>\r\n  <!-- filter -->\r\n  <div>\r\n    @if (filterThreshold() === 0 || features()!.length > filterThreshold()) {\r\n      <div class=\"form-row\">\r\n        <mat-form-field id=\"filter\">\r\n          <mat-label>filter</mat-label>\r\n          <input matInput [formControl]=\"filter\" />\r\n          <button\r\n            type=\"button\"\r\n            mat-icon-button\r\n            matSuffix\r\n            (click)=\"filter.reset()\"\r\n            [disabled]=\"!filter.value\"\r\n            [attr.aria-label]=\"'Reset filter'\"\r\n          >\r\n            <mat-icon color=\"warn\" class=\"mat-warn\">cancel</mat-icon>\r\n          </button>\r\n        </mat-form-field>\r\n        <span id=\"badge\">{{ filteredFeatures().length }}</span>\r\n      </div>\r\n    }\r\n\r\n    <!-- list -->\r\n    @if (filteredFeatures().length) {\r\n      <table>\r\n        <tbody>\r\n          @for (feature of filteredFeatures(); track $index) {\r\n            <tr>\r\n              <th>\r\n                @if (featNames()?.length) {\r\n                  <span>{{\r\n                    feature.name | flatLookup: featNames() : \"id\" : \"label\"\r\n                  }}</span>\r\n                } @else {\r\n                  <span>{{ feature.name }}</span>\r\n                }\r\n              </th>\r\n              <td>\r\n                @if (featValues()) {\r\n                  <span>{{\r\n                    feature.value | flatLookup: featValues()![feature.name]\r\n                  }}</span>\r\n                } @else {\r\n                  <span>{{ feature.value }}</span>\r\n                }\r\n              </td>\r\n            </tr>\r\n          }\r\n        </tbody>\r\n      </table>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;min-width:0}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.in-row-button{margin-top:-16px}table{width:100%;border-collapse:collapse;color:var(--mat-sys-on-surface-variant)}tbody tr:nth-child(odd){background-color:var(--mat-sys-surface-container)}th{text-align:left;font-weight:400;color:var(--mat-sys-on-surface-variant)}tbody tr:hover{background-color:var(--mat-sys-surface-container-high)}td.fit-width{width:1px;white-space:nowrap}tbody tr.selected{background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container)}#filter{width:7em}#badge{border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;padding:4px;margin-top:-18px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "pipe", type: FlatLookupPipe, name: "flatLookup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: FeatureSetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FeatureSetViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gve-feature-set-view', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         ReactiveFormsModule,
@@ -2103,23 +2175,29 @@ class StepsMapComponent {
     constructor() {
         this._snackBar = inject(MatSnackBar);
         // track view initialization
-        this._viewInitialized = signal(false, ...(ngDevMode ? [{ debugName: "_viewInitialized" }] : /* istanbul ignore next */ []));
+        this._viewInitialized = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_viewInitialized" }] : /* istanbul ignore next */ []));
         // track whether we've processed the steps/selection
-        this._selectionProcessed = signal(false, ...(ngDevMode ? [{ debugName: "_selectionProcessed" }] : /* istanbul ignore next */ []));
+        this._selectionProcessed = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_selectionProcessed" }] : /* istanbul ignore next */ []));
         // the lines of each version text, keyed under the output tag
-        this.lines = signal({}, ...(ngDevMode ? [{ debugName: "lines" }] : /* istanbul ignore next */ []));
+        this.lines = signal({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "lines" }] : /* istanbul ignore next */ []));
         /**
          * The steps to display.
          */
-        this.steps = input([], ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
+        this.steps = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
         /**
          * The step that is currently selected.
          */
-        this.selectedStep = model(...(ngDevMode ? [undefined, { debugName: "selectedStep" }] : /* istanbul ignore next */ []));
+        this.selectedStep = model(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "selectedStep" }] : /* istanbul ignore next */ []));
         /**
          * The font size of the steps text.
          */
-        this.textFontSize = input('0.8em', ...(ngDevMode ? [{ debugName: "textFontSize" }] : /* istanbul ignore next */ []));
+        this.textFontSize = input('0.8em', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "textFontSize" }] : /* istanbul ignore next */ []));
         // handle steps updates
         effect(() => {
             const currentSteps = this.steps();
@@ -2198,10 +2276,10 @@ class StepsMapComponent {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: StepsMapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: StepsMapComponent, isStandalone: true, selector: "gve-steps-map", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, selectedStep: { classPropertyName: "selectedStep", publicName: "selectedStep", isSignal: true, isRequired: false, transformFunction: null }, textFontSize: { classPropertyName: "textFontSize", publicName: "textFontSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedStep: "selectedStepChange" }, ngImport: i0, template: "<div>\r\n  @if (steps().length) {\r\n    @for (step of steps(); track step.outputTag) {\r\n      <div\r\n        matRipple\r\n        class=\"step form-row\"\r\n        [class.selected]=\"step === selectedStep()\"\r\n        (click)=\"onStepClick(step)\"\r\n      >\r\n        <!-- tag -->\r\n        <div class=\"tag\">\r\n          <span class=\"muted-tag\">{{ step.inputTag }} &#x25b6; </span>\r\n          {{ step.outputTag }}\r\n          <button\r\n            type=\"button\"\r\n            mat-icon-button\r\n            class=\"copy-btn\"\r\n            matTooltip=\"Copy text\"\r\n            (click)=\"copyText(step, $event)\"\r\n          >\r\n            <mat-icon>content_copy</mat-icon>\r\n          </button>\r\n        </div>\r\n        <!-- text lines -->\r\n        <div class=\"text\" [style.fontSize]=\"textFontSize()\">\r\n          @for (line of lines()[step.outputTag]; track $index) {\r\n            <p class=\"line\">{{ line }}</p>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:start;flex-wrap:wrap}.form-row *{flex:0 0 auto}.form-row .text{flex:1 1 auto;max-width:100%}.selected{background-color:var(--mat-sys-surface-bright)}.step{border:1px solid var(--mat-sys-outline);border-radius:6px;margin:8px 0}.tag{display:flex;align-items:center;gap:2px;background-color:var(--mat-sys-surface-container);color:var(--mat-sys-on-surface-variant);border:1px solid var(--mat-sys-outline);border-radius:6px;padding:4px;cursor:pointer}.copy-btn{width:24px;height:24px;line-height:24px;font-size:14px;margin-left:auto}.copy-btn mat-icon{font-size:14px;width:14px;height:14px;line-height:14px}.muted-tag{color:var(--mat-sys-on-surface-variant)}.text{padding:0 4px;font-size:.5em;white-space:normal;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;min-width:0;max-height:200px;overflow-y:auto}.text p{margin:0;white-space:normal}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StepsMapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StepsMapComponent, isStandalone: true, selector: "gve-steps-map", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, selectedStep: { classPropertyName: "selectedStep", publicName: "selectedStep", isSignal: true, isRequired: false, transformFunction: null }, textFontSize: { classPropertyName: "textFontSize", publicName: "textFontSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedStep: "selectedStepChange" }, ngImport: i0, template: "<div>\r\n  @if (steps().length) {\r\n    @for (step of steps(); track step.outputTag) {\r\n      <div\r\n        matRipple\r\n        class=\"step form-row\"\r\n        [class.selected]=\"step === selectedStep()\"\r\n        (click)=\"onStepClick(step)\"\r\n      >\r\n        <!-- tag -->\r\n        <div class=\"tag\">\r\n          <span class=\"muted-tag\">{{ step.inputTag }} &#x25b6; </span>\r\n          {{ step.outputTag }}\r\n          <button\r\n            type=\"button\"\r\n            mat-icon-button\r\n            class=\"copy-btn\"\r\n            matTooltip=\"Copy text\"\r\n            (click)=\"copyText(step, $event)\"\r\n          >\r\n            <mat-icon>content_copy</mat-icon>\r\n          </button>\r\n        </div>\r\n        <!-- text lines -->\r\n        <div class=\"text\" [style.fontSize]=\"textFontSize()\">\r\n          @for (line of lines()[step.outputTag]; track $index) {\r\n            <p class=\"line\">{{ line }}</p>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:start;flex-wrap:wrap}.form-row *{flex:0 0 auto}.form-row .text{flex:1 1 auto;max-width:100%}.selected{background-color:var(--mat-sys-surface-bright)}.step{border:1px solid var(--mat-sys-outline);border-radius:6px;margin:8px 0}.tag{display:flex;align-items:center;gap:2px;background-color:var(--mat-sys-surface-container);color:var(--mat-sys-on-surface-variant);border:1px solid var(--mat-sys-outline);border-radius:6px;padding:4px;cursor:pointer}.copy-btn{width:24px;height:24px;line-height:24px;font-size:14px;margin-left:auto}.copy-btn mat-icon{font-size:14px;width:14px;height:14px;line-height:14px}.muted-tag{color:var(--mat-sys-on-surface-variant)}.text{padding:0 4px;font-size:.5em;white-space:normal;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;min-width:0;max-height:200px;overflow-y:auto}.text p{margin:0;white-space:normal}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: StepsMapComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StepsMapComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gve-steps-map', imports: [MatButtonModule, MatIconModule, MatRippleModule, MatTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\r\n  @if (steps().length) {\r\n    @for (step of steps(); track step.outputTag) {\r\n      <div\r\n        matRipple\r\n        class=\"step form-row\"\r\n        [class.selected]=\"step === selectedStep()\"\r\n        (click)=\"onStepClick(step)\"\r\n      >\r\n        <!-- tag -->\r\n        <div class=\"tag\">\r\n          <span class=\"muted-tag\">{{ step.inputTag }} &#x25b6; </span>\r\n          {{ step.outputTag }}\r\n          <button\r\n            type=\"button\"\r\n            mat-icon-button\r\n            class=\"copy-btn\"\r\n            matTooltip=\"Copy text\"\r\n            (click)=\"copyText(step, $event)\"\r\n          >\r\n            <mat-icon>content_copy</mat-icon>\r\n          </button>\r\n        </div>\r\n        <!-- text lines -->\r\n        <div class=\"text\" [style.fontSize]=\"textFontSize()\">\r\n          @for (line of lines()[step.outputTag]; track $index) {\r\n            <p class=\"line\">{{ line }}</p>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:start;flex-wrap:wrap}.form-row *{flex:0 0 auto}.form-row .text{flex:1 1 auto;max-width:100%}.selected{background-color:var(--mat-sys-surface-bright)}.step{border:1px solid var(--mat-sys-outline);border-radius:6px;margin:8px 0}.tag{display:flex;align-items:center;gap:2px;background-color:var(--mat-sys-surface-container);color:var(--mat-sys-on-surface-variant);border:1px solid var(--mat-sys-outline);border-radius:6px;padding:4px;cursor:pointer}.copy-btn{width:24px;height:24px;line-height:24px;font-size:14px;margin-left:auto}.copy-btn mat-icon{font-size:14px;width:14px;height:14px;line-height:14px}.muted-tag{color:var(--mat-sys-on-surface-variant)}.text{padding:0 4px;font-size:.5em;white-space:normal;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;min-width:0;max-height:200px;overflow-y:auto}.text p{margin:0;white-space:normal}\n"] }]
         }], ctorParameters: () => [], propDecorators: { steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: false }] }], selectedStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedStep", required: false }] }, { type: i0.Output, args: ["selectedStepChange"] }], textFontSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "textFontSize", required: false }] }] } });
@@ -2222,28 +2300,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
 class ChainResultViewComponent {
     constructor(formBuilder) {
         // track if we've already performed step selection
-        this._stepSelectionDone = signal(false, ...(ngDevMode ? [{ debugName: "_stepSelectionDone" }] : /* istanbul ignore next */ []));
+        this._stepSelectionDone = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_stepSelectionDone" }] : /* istanbul ignore next */ []));
         // track if component view is initialized
-        this._viewInitialized = signal(false, ...(ngDevMode ? [{ debugName: "_viewInitialized" }] : /* istanbul ignore next */ []));
+        this._viewInitialized = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_viewInitialized" }] : /* istanbul ignore next */ []));
         /**
          * The result to display.
          */
-        this.result = input(...(ngDevMode ? [undefined, { debugName: "result" }] : /* istanbul ignore next */ []));
+        this.result = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "result" }] : /* istanbul ignore next */ []));
         /**
          * The index of the initial step to display after the result is set.
          * If the index is negative, it is counted from the end of the steps.
          */
-        this.initialStepIndex = input(...(ngDevMode ? [undefined, { debugName: "initialStepIndex" }] : /* istanbul ignore next */ []));
+        this.initialStepIndex = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "initialStepIndex" }] : /* istanbul ignore next */ []));
         /**
          * Emitted when a result's step is picked by the user.
          */
         this.stepPick = output();
-        this.versionTags = signal([], ...(ngDevMode ? [{ debugName: "versionTags" }] : /* istanbul ignore next */ []));
-        this.tags = signal([], ...(ngDevMode ? [{ debugName: "tags" }] : /* istanbul ignore next */ []));
-        this.step = signal(undefined, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
-        this.selection = signal(undefined, ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
-        this.selectionFeatures = signal([], ...(ngDevMode ? [{ debugName: "selectionFeatures" }] : /* istanbul ignore next */ []));
-        this.selectionRange = signal(undefined, ...(ngDevMode ? [{ debugName: "selectionRange" }] : /* istanbul ignore next */ []));
+        this.versionTags = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "versionTags" }] : /* istanbul ignore next */ []));
+        this.tags = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tags" }] : /* istanbul ignore next */ []));
+        this.step = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+        this.selection = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
+        this.selectionFeatures = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectionFeatures" }] : /* istanbul ignore next */ []));
+        this.selectionRange = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectionRange" }] : /* istanbul ignore next */ []));
         /**
          * Ordered nodes for the current step's version, resolved from
          * `result.versionNodeIds` and `result.nodes`.
@@ -2257,7 +2345,8 @@ class ChainResultViewComponent {
             const ids = result.versionNodeIds[step.outputTag] ?? [];
             const nodeMap = new Map(result.nodes.map((n) => [n.id, n]));
             return ids.map((id) => nodeMap.get(id)).filter(Boolean);
-        }, ...(ngDevMode ? [{ debugName: "stepNodes" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "stepNodes" }] : /* istanbul ignore next */ []));
         /**
          * Global features for the current step's output version.
          */
@@ -2268,13 +2357,15 @@ class ChainResultViewComponent {
                 return [];
             }
             return result.globalFeatures[step.outputTag] ?? [];
-        }, ...(ngDevMode ? [{ debugName: "stepGlobalFeatures" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "stepGlobalFeatures" }] : /* istanbul ignore next */ []));
         /**
          * True to disable range picking. For instance the snapshot editor,
          * which uses rangePick to set the edited operation's range, disables
          * this when no operation is being edited.
          */
-        this.disabledRangePick = input(true, ...(ngDevMode ? [{ debugName: "disabledRangePick" }] : /* istanbul ignore next */ []));
+        this.disabledRangePick = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabledRangePick" }] : /* istanbul ignore next */ []));
         /**
          * Emitted when a range is picked.
          */
@@ -2469,10 +2560,10 @@ class ChainResultViewComponent {
             this.rangePick.emit(this.selectionRange());
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ChainResultViewComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: ChainResultViewComponent, isStandalone: true, selector: "gve-chain-result-view", inputs: { result: { classPropertyName: "result", publicName: "result", isSignal: true, isRequired: false, transformFunction: null }, initialStepIndex: { classPropertyName: "initialStepIndex", publicName: "initialStepIndex", isSignal: true, isRequired: false, transformFunction: null }, disabledRangePick: { classPropertyName: "disabledRangePick", publicName: "disabledRangePick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stepPick: "stepPick", rangePick: "rangePick" }, ngImport: i0, template: "@if (result()) {\r\n<div id=\"container\">\r\n  <div id=\"bar\" class=\"form-row\">\r\n    <!-- version -->\r\n    @if (versionTags().length) {\r\n    <mat-form-field>\r\n      <mat-label>stage</mat-label>\r\n      <mat-select [formControl]=\"versionTag\">\r\n        <mat-option [value]=\"null\">-</mat-option>\r\n        @for (t of versionTags(); track t) {\r\n        <mat-option [value]=\"t\">{{ t }}</mat-option>\r\n        }\r\n      </mat-select>\r\n    </mat-form-field>\r\n    }\r\n    <!-- tag -->\r\n    @if (tags().length) {\r\n    <mat-form-field>\r\n      <mat-label>tag</mat-label>\r\n      <mat-select [formControl]=\"tag\">\r\n        @for (t of tags(); track t) {\r\n        <mat-option [value]=\"t\">{{ t }}</mat-option>\r\n        }\r\n      </mat-select>\r\n    </mat-form-field>\r\n    }\r\n    <!-- range picker -->\r\n    @if (selectionRange()) {\r\n    <div class=\"range\">\r\n      {{ selectionRange()!.at }}\u00D7{{ selectionRange()!.run }}\r\n    </div>\r\n    @if (!disabledRangePick()) {\r\n    <button\r\n      type=\"button\"\r\n      mat-icon-button\r\n      matTooltip=\"Pick this range for the edited operation\"\r\n      (click)=\"pickRange()\"\r\n      [disabled]=\"disabledRangePick()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">file_open</mat-icon>\r\n    </button>\r\n    } }\r\n  </div>\r\n\r\n  <!-- step -->\r\n  @if (step()) {\r\n  <div id=\"step\">\r\n    <!-- text -->\r\n    <div id=\"text\">\r\n      <gve-base-text-view\r\n        [text]=\"stepNodes()\"\r\n        [colorCallback]=\"getCharColor\"\r\n        [hasLineNumber]=\"true\"\r\n        (charPick)=\"onTextCharPick($event)\"\r\n        (rangePick)=\"onTextRangePick($event)\"\r\n      />\r\n    </div>\r\n    <!-- features -->\r\n    <div id=\"feats\" class=\"form-row-top\">\r\n      <div id=\"g-feats\">\r\n        <div class=\"feat-header\">{{ step()!.outputTag }}</div>\r\n        <gve-feature-set-view [features]=\"stepGlobalFeatures()\" />\r\n      </div>\r\n      <div id=\"n-feats\">\r\n        @if (selectionFeatures().length) {\r\n        <div class=\"feat-header\">{{ selection() }}</div>\r\n        <gve-feature-set-view [features]=\"selectionFeatures()\" />\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n  }\r\n\r\n  <!-- steps map -->\r\n  <div id=\"map\">\r\n    <gve-steps-map\r\n      [steps]=\"result()!.steps\"\r\n      [selectedStep]=\"step()\"\r\n      (selectedStepChange)=\"onStepChange($event)\"\r\n    />\r\n  </div>\r\n</div>\r\n}\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.form-row-top{display:flex;gap:8px;align-items:start;flex-wrap:wrap;width:100%;box-sizing:border-box}.form-row-top>div{flex:1 1 0%;min-width:0}.range{color:var(--mat-sys-on-surface-variant);border:1px solid var(--mat-sys-on-surface-variant);border-radius:4px;padding:4px}div#container{display:grid;grid-template-rows:auto 1fr;grid-template-columns:3fr 1fr;grid-template-areas:\"bar map\" \"step map\";gap:8px;height:100%}div#bar{grid-area:bar}div#map{grid-area:map;min-height:0;overflow-y:auto}div#step{grid-area:step;min-height:0;display:grid;grid-template-rows:1fr auto;gap:8px}div#text{min-height:0;overflow-y:auto}div#feats{width:100%}.feat-header{background-color:var(--mat-sys-primary);color:var(--mat-sys-on-primary);text-align:center;border:1px solid var(--mat-sys-primary);border-top-left-radius:4px;border-top-right-radius:4px}@media only screen and (max-width:959px){div#container{grid-template-columns:1fr;grid-template-areas:\"bar\" \"step\"}#map{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: FeatureSetViewComponent, selector: "gve-feature-set-view", inputs: ["features", "featNames", "featValues", "filterThreshold"] }, { kind: "component", type: StepsMapComponent, selector: "gve-steps-map", inputs: ["steps", "selectedStep", "textFontSize"], outputs: ["selectedStepChange"] }, { kind: "component", type: BaseTextViewComponent, selector: "gve-base-text-view", inputs: ["defaultColor", "defaultBorderColor", "selectionColor", "searchHighlightColor", "hasLineNumber", "text", "colorCallback", "borderColorCallback"], outputs: ["charPick", "rangePick"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ChainResultViewComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: ChainResultViewComponent, isStandalone: true, selector: "gve-chain-result-view", inputs: { result: { classPropertyName: "result", publicName: "result", isSignal: true, isRequired: false, transformFunction: null }, initialStepIndex: { classPropertyName: "initialStepIndex", publicName: "initialStepIndex", isSignal: true, isRequired: false, transformFunction: null }, disabledRangePick: { classPropertyName: "disabledRangePick", publicName: "disabledRangePick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stepPick: "stepPick", rangePick: "rangePick" }, ngImport: i0, template: "@if (result()) {\r\n<div id=\"container\">\r\n  <div id=\"bar\" class=\"form-row\">\r\n    <!-- version -->\r\n    @if (versionTags().length) {\r\n    <mat-form-field>\r\n      <mat-label>stage</mat-label>\r\n      <mat-select [formControl]=\"versionTag\">\r\n        <mat-option [value]=\"null\">-</mat-option>\r\n        @for (t of versionTags(); track t) {\r\n        <mat-option [value]=\"t\">{{ t }}</mat-option>\r\n        }\r\n      </mat-select>\r\n    </mat-form-field>\r\n    }\r\n    <!-- tag -->\r\n    @if (tags().length) {\r\n    <mat-form-field>\r\n      <mat-label>tag</mat-label>\r\n      <mat-select [formControl]=\"tag\">\r\n        @for (t of tags(); track t) {\r\n        <mat-option [value]=\"t\">{{ t }}</mat-option>\r\n        }\r\n      </mat-select>\r\n    </mat-form-field>\r\n    }\r\n    <!-- range picker -->\r\n    @if (selectionRange()) {\r\n    <div class=\"range\">\r\n      {{ selectionRange()!.at }}\u00D7{{ selectionRange()!.run }}\r\n    </div>\r\n    @if (!disabledRangePick()) {\r\n    <button\r\n      type=\"button\"\r\n      mat-icon-button\r\n      matTooltip=\"Pick this range for the edited operation\"\r\n      (click)=\"pickRange()\"\r\n      [disabled]=\"disabledRangePick()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">file_open</mat-icon>\r\n    </button>\r\n    } }\r\n  </div>\r\n\r\n  <!-- step -->\r\n  @if (step()) {\r\n  <div id=\"step\">\r\n    <!-- text -->\r\n    <div id=\"text\">\r\n      <gve-base-text-view\r\n        [text]=\"stepNodes()\"\r\n        [colorCallback]=\"getCharColor\"\r\n        [hasLineNumber]=\"true\"\r\n        (charPick)=\"onTextCharPick($event)\"\r\n        (rangePick)=\"onTextRangePick($event)\"\r\n      />\r\n    </div>\r\n    <!-- features -->\r\n    <div id=\"feats\" class=\"form-row-top\">\r\n      <div id=\"g-feats\">\r\n        <div class=\"feat-header\">{{ step()!.outputTag }}</div>\r\n        <gve-feature-set-view [features]=\"stepGlobalFeatures()\" />\r\n      </div>\r\n      <div id=\"n-feats\">\r\n        @if (selectionFeatures().length) {\r\n        <div class=\"feat-header\">{{ selection() }}</div>\r\n        <gve-feature-set-view [features]=\"selectionFeatures()\" />\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n  }\r\n\r\n  <!-- steps map -->\r\n  <div id=\"map\">\r\n    <gve-steps-map\r\n      [steps]=\"result()!.steps\"\r\n      [selectedStep]=\"step()\"\r\n      (selectedStepChange)=\"onStepChange($event)\"\r\n    />\r\n  </div>\r\n</div>\r\n}\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.form-row-top{display:flex;gap:8px;align-items:start;flex-wrap:wrap;width:100%;box-sizing:border-box}.form-row-top>div{flex:1 1 0%;min-width:0}.range{color:var(--mat-sys-on-surface-variant);border:1px solid var(--mat-sys-on-surface-variant);border-radius:4px;padding:4px}div#container{display:grid;grid-template-rows:auto 1fr;grid-template-columns:3fr 1fr;grid-template-areas:\"bar map\" \"step map\";gap:8px;height:100%}div#bar{grid-area:bar}div#map{grid-area:map;min-height:0;overflow-y:auto}div#step{grid-area:step;min-height:0;display:grid;grid-template-rows:1fr auto;gap:8px}div#text{min-height:0;overflow-y:auto}div#feats{width:100%}.feat-header{background-color:var(--mat-sys-primary);color:var(--mat-sys-on-primary);text-align:center;border:1px solid var(--mat-sys-primary);border-top-left-radius:4px;border-top-right-radius:4px}@media only screen and (max-width:959px){div#container{grid-template-columns:1fr;grid-template-areas:\"bar\" \"step\"}#map{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: FeatureSetViewComponent, selector: "gve-feature-set-view", inputs: ["features", "featNames", "featValues", "filterThreshold"] }, { kind: "component", type: StepsMapComponent, selector: "gve-steps-map", inputs: ["steps", "selectedStep", "textFontSize"], outputs: ["selectedStepChange"] }, { kind: "component", type: BaseTextViewComponent, selector: "gve-base-text-view", inputs: ["defaultColor", "defaultBorderColor", "selectionColor", "searchHighlightColor", "hasLineNumber", "text", "colorCallback", "borderColorCallback"], outputs: ["charPick", "rangePick"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ChainResultViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ChainResultViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gve-chain-result-view', imports: [
                         ReactiveFormsModule,
@@ -2503,7 +2594,8 @@ class SnapshotTextEditorComponent {
         this._snackbar = _snackbar;
         this.dialogRef = dialogRef;
         this.data = data;
-        this.text = model([], ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+        this.text = model([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
         this.userText = formBuilder.control('', {
             nonNullable: true,
             validators: [Validators.required, Validators.maxLength(5000)],
@@ -2553,10 +2645,10 @@ class SnapshotTextEditorComponent {
         this.text.set(GveBaseTextService.stringToBaseChars(this.userText.value));
         this.dialogRef?.close(this.text());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SnapshotTextEditorComponent, deps: [{ token: i1$1.FormBuilder }, { token: i2$3.MatSnackBar }, { token: i3$3.MatDialogRef, optional: true }, { token: MAT_DIALOG_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: SnapshotTextEditorComponent, isStandalone: true, selector: "gve-snapshot-text-editor", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { text: "textChange" }, ngImport: i0, template: "<div [style.padding]=\"dialogRef ? '8px' : '0'\">\r\n  @if (dialogRef) {\r\n    <div id=\"heading\">Set Base Text</div>\r\n  }\r\n  <form [formGroup]=\"form\" (submit)=\"save()\">\r\n    <fieldset>\r\n      <div id=\"batch-input\">\r\n        <div>\r\n          <mat-form-field class=\"full-width\">\r\n            <label>base text</label>\r\n            <textarea matInput [formControl]=\"userText\" rows=\"8\"></textarea>\r\n            @if (\r\n              $any(userText).errors?.required &&\r\n              (userText.dirty || userText.touched)\r\n            ) {\r\n              <mat-error>text required</mat-error>\r\n            }\r\n            @if (\r\n              $any(userText).errors?.maxLength &&\r\n              (userText.dirty || userText.touched)\r\n            ) {\r\n              <mat-error>text too long</mat-error>\r\n            }\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n      <div class=\"form-row-center\">\r\n        @if (dialogRef) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"mat-warn\"\r\n            mat-flat-button\r\n            matTooltip=\"Close dialog\"\r\n            (click)=\"close()\"\r\n          >\r\n            close\r\n          </button>\r\n        }\r\n        <button\r\n          type=\"button\"\r\n          class=\"mat-primary\"\r\n          mat-flat-button\r\n          matTooltip=\"Copy JSON to clipboard\"\r\n          [disabled]=\"form.invalid\"\r\n          (click)=\"copyToClipboard()\"\r\n        >\r\n          JSON\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"mat-primary\"\r\n          mat-flat-button\r\n          matTooltip=\"Set base text\"\r\n          [disabled]=\"form.invalid\"\r\n          (click)=\"save()\"\r\n        >\r\n          set\r\n        </button>\r\n      </div>\r\n    </fieldset>\r\n  </form>\r\n</div>\r\n", styles: [".full-width{width:100%}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row-center{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}.form-row,.form-row-center *{flex:0 0 auto}div#heading{margin:8px;text-align:center;font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SnapshotTextEditorComponent, deps: [{ token: i1$1.FormBuilder }, { token: i2$3.MatSnackBar }, { token: i3$3.MatDialogRef, optional: true }, { token: MAT_DIALOG_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SnapshotTextEditorComponent, isStandalone: true, selector: "gve-snapshot-text-editor", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { text: "textChange" }, ngImport: i0, template: "<div [style.padding]=\"dialogRef ? '8px' : '0'\">\r\n  @if (dialogRef) {\r\n    <div id=\"heading\">Set Base Text</div>\r\n  }\r\n  <form [formGroup]=\"form\" (submit)=\"save()\">\r\n    <fieldset>\r\n      <div id=\"batch-input\">\r\n        <div>\r\n          <mat-form-field class=\"full-width\">\r\n            <label>base text</label>\r\n            <textarea matInput [formControl]=\"userText\" rows=\"8\"></textarea>\r\n            @if (\r\n              $any(userText).errors?.required &&\r\n              (userText.dirty || userText.touched)\r\n            ) {\r\n              <mat-error>text required</mat-error>\r\n            }\r\n            @if (\r\n              $any(userText).errors?.maxLength &&\r\n              (userText.dirty || userText.touched)\r\n            ) {\r\n              <mat-error>text too long</mat-error>\r\n            }\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n      <div class=\"form-row-center\">\r\n        @if (dialogRef) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"mat-warn\"\r\n            mat-flat-button\r\n            matTooltip=\"Close dialog\"\r\n            (click)=\"close()\"\r\n          >\r\n            close\r\n          </button>\r\n        }\r\n        <button\r\n          type=\"button\"\r\n          class=\"mat-primary\"\r\n          mat-flat-button\r\n          matTooltip=\"Copy JSON to clipboard\"\r\n          [disabled]=\"form.invalid\"\r\n          (click)=\"copyToClipboard()\"\r\n        >\r\n          JSON\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"mat-primary\"\r\n          mat-flat-button\r\n          matTooltip=\"Set base text\"\r\n          [disabled]=\"form.invalid\"\r\n          (click)=\"save()\"\r\n        >\r\n          set\r\n        </button>\r\n      </div>\r\n    </fieldset>\r\n  </form>\r\n</div>\r\n", styles: [".full-width{width:100%}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row-center{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}.form-row,.form-row-center *{flex:0 0 auto}div#heading{margin:8px;text-align:center;font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SnapshotTextEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SnapshotTextEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gve-snapshot-text-editor', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         ReactiveFormsModule,
@@ -2610,38 +2702,46 @@ class SnapshotEditorComponent {
          * Using viewChild signal to handle conditionally rendered element -
          * the element only exists when result() is truthy.
          */
-        this.renditionRef = viewChild('rendition', ...(ngDevMode ? [{ debugName: "renditionRef" }] : /* istanbul ignore next */ []));
+        this.renditionRef = viewChild('rendition', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "renditionRef" }] : /* istanbul ignore next */ []));
         /**
          * Reference to the operation editor expansion panel.
          * Using viewChild signal to handle conditionally rendered element -
          * the element only exists when editedOp() is truthy.
          */
-        this.operationEditorPanelRef = viewChild('operationEditorPanel', ...(ngDevMode ? [{ debugName: "operationEditorPanelRef" }] : /* istanbul ignore next */ []));
+        this.operationEditorPanelRef = viewChild('operationEditorPanel', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "operationEditorPanelRef" }] : /* istanbul ignore next */ []));
         /**
          * The snapshot to edit.
          */
-        this.snapshot = model(...(ngDevMode ? [undefined, { debugName: "snapshot" }] : /* istanbul ignore next */ []));
+        this.snapshot = model(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "snapshot" }] : /* istanbul ignore next */ []));
         /**
          * The batch operations text to set for the editor.
          */
-        this.batchOps = input(...(ngDevMode ? [undefined, { debugName: "batchOps" }] : /* istanbul ignore next */ []));
+        this.batchOps = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "batchOps" }] : /* istanbul ignore next */ []));
         /**
          * True to disable saving.
          */
-        this.noSave = input(...(ngDevMode ? [undefined, { debugName: "noSave" }] : /* istanbul ignore next */ []));
+        this.noSave = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "noSave" }] : /* istanbul ignore next */ []));
         /**
          * True to enable debug mode for view rendition.
          */
-        this.debug = input(...(ngDevMode ? [undefined, { debugName: "debug" }] : /* istanbul ignore next */ []));
+        this.debug = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "debug" }] : /* istanbul ignore next */ []));
         /**
          * True to not show character decoration according to the trace
          * features in nodes.
          */
-        this.noDecoration = input(...(ngDevMode ? [undefined, { debugName: "noDecoration" }] : /* istanbul ignore next */ []));
+        this.noDecoration = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "noDecoration" }] : /* istanbul ignore next */ []));
         /**
          * Definitions for features, including names and values.
          */
-        this.featureDefs = input(...(ngDevMode ? [undefined, { debugName: "featureDefs" }] : /* istanbul ignore next */ []));
+        this.featureDefs = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "featureDefs" }] : /* istanbul ignore next */ []));
         /**
          * The IDs of the features that are multi-valued. If a feature being
          * edited is in this list, the feature editor will allow adding multiple
@@ -2649,47 +2749,59 @@ class SnapshotEditorComponent {
          */
         this.multiValuedFeatureIds = input([
             'r_hints',
-        ], ...(ngDevMode ? [{ debugName: "multiValuedFeatureIds" }] : /* istanbul ignore next */ []));
+        ], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "multiValuedFeatureIds" }] : /* istanbul ignore next */ []));
         /**
          * The list of source IDs when it's a closed set. Passed down to the operation
          * source editor, which will show a dropdown to select from these IDs. When not
          * specified, the source ID can be freely typed in the source editor.
          */
-        this.sourceIds = input(...(ngDevMode ? [undefined, { debugName: "sourceIds" }] : /* istanbul ignore next */ []));
+        this.sourceIds = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "sourceIds" }] : /* istanbul ignore next */ []));
         /**
          * The list of source types when it's a closed set. Passed down to the operation
          * source editor, which will show a dropdown to select from these types. When not
          * specified, the source type can be freely typed in the source editor.
          */
-        this.sourceTypes = input(...(ngDevMode ? [undefined, { debugName: "sourceTypes" }] : /* istanbul ignore next */ []));
+        this.sourceTypes = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "sourceTypes" }] : /* istanbul ignore next */ []));
         /**
          * Settings for rendering the snapshot. These are passed to the snapshot rendition
          * component.
          */
-        this.renditionSettings = input(DEFAULT_SETTINGS, ...(ngDevMode ? [{ debugName: "renditionSettings" }] : /* istanbul ignore next */ []));
+        this.renditionSettings = input(DEFAULT_SETTINGS, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "renditionSettings" }] : /* istanbul ignore next */ []));
         /**
          * Optional maximum height for the operations list. When set, the operations
          * list will have a vertical scrollbar if its content exceeds this height.
          * The value should be a valid CSS height value (e.g., '300px', '50vh').
          */
-        this.opListMaxHeight = input(undefined, ...(ngDevMode ? [{ debugName: "opListMaxHeight" }] : /* istanbul ignore next */ []));
+        this.opListMaxHeight = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "opListMaxHeight" }] : /* istanbul ignore next */ []));
         /**
          * Emitted when the user cancels the snapshot editing.
          */
         this.snapshotCancel = output();
         this.featDetails = new FormControl(false, { nonNullable: true });
         this.autoRun = new FormControl(false, { nonNullable: true });
-        this.chain = signal(undefined, ...(ngDevMode ? [{ debugName: "chain" }] : /* istanbul ignore next */ []));
+        this.chain = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "chain" }] : /* istanbul ignore next */ []));
         // the currently picked base text range
-        this.textRange = signal(undefined, ...(ngDevMode ? [{ debugName: "textRange" }] : /* istanbul ignore next */ []));
+        this.textRange = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "textRange" }] : /* istanbul ignore next */ []));
         // the lines count for the current base text
-        this.lineCount = signal(0, ...(ngDevMode ? [{ debugName: "lineCount" }] : /* istanbul ignore next */ []));
+        this.lineCount = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "lineCount" }] : /* istanbul ignore next */ []));
         // the currently edited operation
-        this.editedOp = signal(undefined, ...(ngDevMode ? [{ debugName: "editedOp" }] : /* istanbul ignore next */ []));
-        this.editedOpIndex = signal(-1, ...(ngDevMode ? [{ debugName: "editedOpIndex" }] : /* istanbul ignore next */ []));
+        this.editedOp = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editedOp" }] : /* istanbul ignore next */ []));
+        this.editedOpIndex = signal(-1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editedOpIndex" }] : /* istanbul ignore next */ []));
         // the patch to apply to the edited operation's range
-        this.editedOpRangePatch = signal(undefined, ...(ngDevMode ? [{ debugName: "editedOpRangePatch" }] : /* istanbul ignore next */ []));
-        this.busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
+        this.editedOpRangePatch = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editedOpRangePatch" }] : /* istanbul ignore next */ []));
+        this.busy = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
         this.opTypeMap = {
             0: 'replace',
             1: 'delete',
@@ -2701,19 +2813,26 @@ class SnapshotEditorComponent {
             7: 'annotate',
         };
         // operations execution result
-        this.result = signal(undefined, ...(ngDevMode ? [{ debugName: "result" }] : /* istanbul ignore next */ []));
-        this.resultOperationId = signal(undefined, ...(ngDevMode ? [{ debugName: "resultOperationId" }] : /* istanbul ignore next */ []));
-        this.initialStepIndex = signal(-1, ...(ngDevMode ? [{ debugName: "initialStepIndex" }] : /* istanbul ignore next */ []));
+        this.result = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "result" }] : /* istanbul ignore next */ []));
+        this.resultOperationId = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resultOperationId" }] : /* istanbul ignore next */ []));
+        this.initialStepIndex = signal(-1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "initialStepIndex" }] : /* istanbul ignore next */ []));
         // the edited operations features (set when editing features of multiple
         // operations at once)
-        this.operationFeats = signal(undefined, ...(ngDevMode ? [{ debugName: "operationFeats" }] : /* istanbul ignore next */ []));
+        this.operationFeats = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "operationFeats" }] : /* istanbul ignore next */ []));
         // the ordinal numbers of all the operations whose features or sources
         // are being edited at once
-        this.batchOpNumbers = signal(undefined, ...(ngDevMode ? [{ debugName: "batchOpNumbers" }] : /* istanbul ignore next */ []));
+        this.batchOpNumbers = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "batchOpNumbers" }] : /* istanbul ignore next */ []));
         // the display label for the current batch range (preserves original input)
-        this.batchRangeLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "batchRangeLabel" }] : /* istanbul ignore next */ []));
+        this.batchRangeLabel = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "batchRangeLabel" }] : /* istanbul ignore next */ []));
         // true when the batch editing targets sources instead of features
-        this.batchForSource = signal(false, ...(ngDevMode ? [{ debugName: "batchForSource" }] : /* istanbul ignore next */ []));
+        this.batchForSource = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "batchForSource" }] : /* istanbul ignore next */ []));
         // base text
         this.baseText = new FormControl([], {
             nonNullable: true,
@@ -2758,6 +2877,16 @@ class SnapshotEditorComponent {
                 this.initRendition(rendition);
             }
         });
+        // re-apply settings whenever the renditionSettings input changes (e.g. loaded
+        // asynchronously from the backend after the first render already completed)
+        effect(() => {
+            // reading renditionSettings() tracks it as a dependency
+            this.renditionSettings();
+            const rendition = this.renditionRef()?.nativeElement;
+            if (rendition) {
+                this.applyRenditionSettings();
+            }
+        });
         // when operation editor panel becomes available, scroll it into view
         effect(() => {
             const panel = this.operationEditorPanelRef()?.nativeElement;
@@ -2778,9 +2907,19 @@ class SnapshotEditorComponent {
      * Called via effect since the element is conditionally rendered.
      */
     initRendition(rendition) {
-        console.log('GveSnapshotRendition.version:', GveSnapshotRendition.version);
+        // console.log('GveSnapshotRendition.version:', GveSnapshotRendition.version());
         // set initial settings
         this.applyRenditionSettings();
+        // Push data immediately if already available. updateRendition() is called
+        // synchronously after result.set() in runTo(), but at that moment the @if
+        // block hasn't yet been added to the DOM (zoneless CD is asynchronous).
+        // This call recovers from that missed push once the element is actually live.
+        const result = this.result();
+        if (result) {
+            const r = { ...result, text: this.baseText.value };
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            rendition.data = r;
+        }
         // listen to version change events
         rendition.addEventListener('versionTagChange', (event) => {
             const customEvent = event;
@@ -3314,8 +3453,13 @@ class SnapshotEditorComponent {
      * @returns A promise that resolves to the execution result.
      */
     runTo(index, lastOperation) {
-        if (this.busy()) {
-            return;
+        // Cancel any in-flight run so new data always wins over stale requests.
+        // The old busy() guard silently dropped new requests while the API was
+        // still responding, causing the component to freeze on rapid edits.
+        if (this._currentRunSubscription) {
+            this._currentRunSubscription.unsubscribe();
+            this._currentRunSubscription = undefined;
+            this.busy.set(false);
         }
         console.log('run to: ' + index);
         // get the snapshot to run operations on
@@ -3338,7 +3482,7 @@ class SnapshotEditorComponent {
         // run the operations
         this.busy.set(true);
         this.initialStepIndex.set(index);
-        this._api
+        this._currentRunSubscription = this._api
             .runOperations(snapshot.text, snapshot.operations)
             .subscribe({
             next: (wrapper) => {
@@ -3350,7 +3494,10 @@ class SnapshotEditorComponent {
                 // set the result
                 console.log('result:', wrapper.result);
                 this.result.set(wrapper.result);
-                // update the rendition component
+                // update the rendition component; note that when result() transitions
+                // from undefined→truthy the @if element may not yet be in the DOM
+                // (zoneless CD is async). initRendition() will recover the missed push
+                // once Angular inserts the element.
                 this.updateRendition();
                 // supply the last operation output tag from its result step if not set
                 if (!lastOperation.outputTag) {
@@ -3365,8 +3512,11 @@ class SnapshotEditorComponent {
             error: (error) => {
                 console.error(error);
                 this._snackbar.open('Error running operations', 'OK');
+                this._currentRunSubscription = undefined;
+                this.busy.set(false);
             },
             complete: () => {
+                this._currentRunSubscription = undefined;
                 this.busy.set(false);
             },
         });
@@ -3457,10 +3607,10 @@ class SnapshotEditorComponent {
         }
         this.snapshot.set(this.getSnapshot());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SnapshotEditorComponent, deps: [{ token: i1$1.FormBuilder }, { token: GveApiService }, { token: i3$3.MatDialog }, { token: i2$1.DialogService }, { token: i2$3.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: SnapshotEditorComponent, isStandalone: true, selector: "gve-snapshot-editor", inputs: { snapshot: { classPropertyName: "snapshot", publicName: "snapshot", isSignal: true, isRequired: false, transformFunction: null }, batchOps: { classPropertyName: "batchOps", publicName: "batchOps", isSignal: true, isRequired: false, transformFunction: null }, noSave: { classPropertyName: "noSave", publicName: "noSave", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null }, noDecoration: { classPropertyName: "noDecoration", publicName: "noDecoration", isSignal: true, isRequired: false, transformFunction: null }, featureDefs: { classPropertyName: "featureDefs", publicName: "featureDefs", isSignal: true, isRequired: false, transformFunction: null }, multiValuedFeatureIds: { classPropertyName: "multiValuedFeatureIds", publicName: "multiValuedFeatureIds", isSignal: true, isRequired: false, transformFunction: null }, sourceIds: { classPropertyName: "sourceIds", publicName: "sourceIds", isSignal: true, isRequired: false, transformFunction: null }, sourceTypes: { classPropertyName: "sourceTypes", publicName: "sourceTypes", isSignal: true, isRequired: false, transformFunction: null }, renditionSettings: { classPropertyName: "renditionSettings", publicName: "renditionSettings", isSignal: true, isRequired: false, transformFunction: null }, opListMaxHeight: { classPropertyName: "opListMaxHeight", publicName: "opListMaxHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { snapshot: "snapshotChange", snapshotCancel: "snapshotCancel" }, viewQueries: [{ propertyName: "renditionRef", first: true, predicate: ["rendition"], descendants: true, isSignal: true }, { propertyName: "operationEditorPanelRef", first: true, predicate: ["operationEditorPanel"], descendants: true, isSignal: true }], ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <mat-tab-group>\r\n    <!-- text -->\r\n    <mat-tab>\r\n      <ng-template mat-tab-label>\r\n        <mat-icon>article</mat-icon> <span class=\"label\">text</span>\r\n      </ng-template>\r\n      <mat-expansion-panel>\r\n        <mat-expansion-panel-header>\r\n          <mat-panel-title> base text </mat-panel-title>\r\n        </mat-expansion-panel-header>\r\n        <!-- base text -->\r\n        <div class=\"form-row\">\r\n          <button\r\n            type=\"button\"\r\n            mat-flat-button\r\n            color=\"mat-warn\"\r\n            matTooltip=\"Enter base text\"\r\n            (click)=\"inputBaseText()\"\r\n            [disabled]=\"busy()\"\r\n          >\r\n            <mat-icon>edit</mat-icon> base text\r\n          </button>\r\n\r\n          @if (textRange()) {\r\n            <span id=\"text-range\"\r\n              >{{ textRange()!.at }}\u00D7{{ textRange()!.run }}</span\r\n            >\r\n          }\r\n        </div>\r\n\r\n        <!-- text characters -->\r\n        <gve-base-text-view\r\n          [text]=\"baseText.value\"\r\n          [hasLineNumber]=\"true\"\r\n          (rangePick)=\"onRangePick($event)\"\r\n        />\r\n      </mat-expansion-panel>\r\n    </mat-tab>\r\n\r\n    <!-- operations -->\r\n    <mat-tab>\r\n      <ng-template mat-tab-label>\r\n        <mat-icon>edit</mat-icon> <span class=\"label\">operations</span>\r\n      </ng-template>\r\n\r\n      <div id=\"snapshot-container\">\r\n        <div id=\"general\">\r\n          <div class=\"form-row\">\r\n            <!-- feat details -->\r\n            <mat-slide-toggle\r\n              [formControl]=\"featDetails\"\r\n              matTooltip=\"Toggle feature details\"\r\n              >feat. details</mat-slide-toggle\r\n            >\r\n            <!-- auto run on edit -->\r\n            <mat-slide-toggle\r\n              [formControl]=\"autoRun\"\r\n              matTooltip=\"Auto-run operations on edit\"\r\n              >auto-run</mat-slide-toggle\r\n            >\r\n\r\n            <div class=\"form-row right\">\r\n              <!-- copy ops DSL -->\r\n              <button\r\n                type=\"button\"\r\n                mat-icon-button\r\n                matTooltip=\"Copy operations as DSL to clipboard\"\r\n                [disabled]=\"!operations.value.length || busy()\"\r\n                (click)=\"copyOperationsDsl()\"\r\n              >\r\n                <mat-icon>content_copy</mat-icon>\r\n              </button>\r\n\r\n              <!-- copy base text and operations JSON -->\r\n              <button\r\n                type=\"button\"\r\n                mat-icon-button\r\n                matTooltip=\"Copy text and operations as JSON to clipboard\"\r\n                [disabled]=\"\r\n                  (!baseText.value && !operations.value.length) || busy()\r\n                \"\r\n                (click)=\"copyOperationsJson()\"\r\n              >\r\n                <mat-icon>copy_all</mat-icon>\r\n              </button>\r\n\r\n              <!-- remove ops -->\r\n              <button\r\n                type=\"button\"\r\n                class=\"mat-warn\"\r\n                mat-flat-button\r\n                matTooltip=\"Remove all the operations\"\r\n                [disabled]=\"!operations.value.length || busy()\"\r\n                (click)=\"clearOperations()\"\r\n              >\r\n                <mat-icon>delete_forever</mat-icon> clear\r\n              </button>\r\n\r\n              <!-- batch add ops -->\r\n              <button\r\n                type=\"button\"\r\n                mat-flat-button\r\n                matTooltip=\"Add a batch of operations\"\r\n                class=\"mat-primary\"\r\n                [disabled]=\"busy()\"\r\n                (click)=\"parseOperations()\"\r\n              >\r\n                <mat-icon>post_add</mat-icon> batch\r\n              </button>\r\n\r\n              <!-- edit operations feats/sources -->\r\n              <form\r\n                (submit)=\"editOperationsFeats()\"\r\n                [formGroup]=\"editFeatsForm\"\r\n              >\r\n                <mat-form-field>\r\n                  <mat-label>operations (e.g. 2, 5-7, 9)</mat-label>\r\n                  <input matInput [formControl]=\"editFeatsRange\" />\r\n                  @if (\r\n                    $any(editFeatsRange).errors?.required &&\r\n                    (editFeatsRange.dirty || editFeatsRange.touched)\r\n                  ) {\r\n                    <mat-error>range required</mat-error>\r\n                  }\r\n                  @if (\r\n                    $any(editFeatsRange).errors?.pattern &&\r\n                    (editFeatsRange.dirty || editFeatsRange.touched)\r\n                  ) {\r\n                    <mat-error>invalid range (use e.g. 2, 5-7, 9)</mat-error>\r\n                  }\r\n                  <button\r\n                    type=\"button\"\r\n                    matIconButton\r\n                    matSuffix\r\n                    matTooltip=\"Edit sources for range\"\r\n                    (click)=\"editOperationSources()\"\r\n                  >\r\n                    <mat-icon>people</mat-icon>\r\n                  </button>\r\n                  <button\r\n                    type=\"submit\"\r\n                    matIconButton\r\n                    matSuffix\r\n                    matTooltip=\"Edit features for range\"\r\n                  >\r\n                    <mat-icon>edit_note</mat-icon>\r\n                  </button>\r\n                </mat-form-field>\r\n              </form>\r\n\r\n              <!-- add op -->\r\n              <button\r\n                type=\"button\"\r\n                mat-flat-button\r\n                class=\"mat-primary\"\r\n                [disabled]=\"busy() || !baseText.value\"\r\n                (click)=\"editNewOperation()\"\r\n                matTooltip=\"Add a new operation\"\r\n              >\r\n                <mat-icon>add_circle</mat-icon> operation\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- feature set editor -->\r\n        @if (operationFeats() !== undefined) {\r\n          <mat-expansion-panel #featsEditorPanel [expanded]=\"true\">\r\n            <mat-expansion-panel-header>\r\n              <mat-panel-title>\r\n                Features of {{ batchRangeLabel() }}\r\n              </mat-panel-title>\r\n            </mat-expansion-panel-header>\r\n            <fieldset>\r\n              <gve-feature-set-editor\r\n                [batchMode]=\"true\"\r\n                [features]=\"operationFeats() || []\"\r\n                [isVar]=\"true\"\r\n                [featNames]=\"featureDefs()?.names\"\r\n                [featValues]=\"featureDefs()?.values\"\r\n                [featProps]=\"featureDefs()?.props\"\r\n                [multiValuedFeatureIds]=\"multiValuedFeatureIds()\"\r\n                (close)=\"closeOperationFeats()\"\r\n                (featuresChange)=\"saveOperationsFeats($event)\"\r\n              />\r\n            </fieldset>\r\n          </mat-expansion-panel>\r\n        }\r\n\r\n        <!-- operation source editor -->\r\n        @if (batchForSource() && batchOpNumbers()?.length) {\r\n          <mat-expansion-panel #sourcesEditorPanel [expanded]=\"true\">\r\n            <mat-expansion-panel-header>\r\n              <mat-panel-title>\r\n                Sources of {{ batchRangeLabel() }}\r\n              </mat-panel-title>\r\n            </mat-expansion-panel-header>\r\n            <fieldset>\r\n              <gve-operation-source-editor\r\n                [ids]=\"sourceIds()\"\r\n                [types]=\"sourceTypes()\"\r\n                (sourceCancel)=\"closeOperationSources()\"\r\n                (sourceChange)=\"saveOperationSources($event)\"\r\n              />\r\n            </fieldset>\r\n          </mat-expansion-panel>\r\n        }\r\n\r\n        <!-- operation editor -->\r\n        @if (editedOp()) {\r\n          <mat-expansion-panel\r\n            #operationEditorPanel\r\n            [expanded]=\"editedOp()\"\r\n            [disabled]=\"!editedOp()\"\r\n          >\r\n            <mat-expansion-panel-header>\r\n              <mat-panel-title>operation {{ editedOp()?.id }}</mat-panel-title>\r\n            </mat-expansion-panel-header>\r\n            <fieldset>\r\n              <gve-chain-operation-editor\r\n                [featureDefs]=\"featureDefs()\"\r\n                [multiValuedFeatureIds]=\"multiValuedFeatureIds()\"\r\n                [hidePreview]=\"editedOpIndex() === -1\"\r\n                [operation]=\"editedOp()\"\r\n                [rangePatch]=\"editedOpRangePatch()\"\r\n                [sourceIds]=\"sourceIds()\"\r\n                [sourceTypes]=\"sourceTypes()\"\r\n                (operationCancel)=\"onOperationCancel()\"\r\n                (operationChange)=\"onOperationChange($event)\"\r\n                (operationPreview)=\"onOperationPreview($event)\"\r\n              />\r\n            </fieldset>\r\n          </mat-expansion-panel>\r\n        }\r\n\r\n        <!-- ops -->\r\n        <div\r\n          id=\"ops\"\r\n          [style.max-height]=\"opListMaxHeight()\"\r\n          [style.overflow-y]=\"opListMaxHeight() ? 'auto' : null\"\r\n        >\r\n          <!-- operations list -->\r\n          @if (operations.value.length) {\r\n            <table id=\"list\">\r\n              <thead>\r\n                <tr>\r\n                  <th>nr.</th>\r\n                  <th></th>\r\n                  <th>ID</th>\r\n                  <th>type</th>\r\n                  <th>at</th>\r\n                  <th>run</th>\r\n                  <th>value</th>\r\n                  <th>itag</th>\r\n                  <th>otag</th>\r\n                  <th>gid</th>\r\n                  <th>feats</th>\r\n                  <th>src</th>\r\n                </tr>\r\n              </thead>\r\n              <tbody>\r\n                @for (\r\n                  operation of operations.value;\r\n                  track operation.id;\r\n                  let index = $index\r\n                ) {\r\n                  <tr\r\n                    [class.selected]=\"operation.id === editedOp()?.id\"\r\n                    [class.feat-editing]=\"batchOpNumbers()?.includes(index + 1)\"\r\n                  >\r\n                    <td class=\"fit-width\">{{ index + 1 }}.</td>\r\n                    <td class=\"fit-width\">\r\n                      <!-- edit -->\r\n                      <button\r\n                        type=\"button\"\r\n                        mat-icon-button\r\n                        class=\"mat-primary\"\r\n                        (click)=\"editOperation(index)\"\r\n                        matTooltip=\"Edit operation\"\r\n                      >\r\n                        <mat-icon>edit</mat-icon>\r\n                      </button>\r\n                      <!-- delete -->\r\n                      <button\r\n                        type=\"button\"\r\n                        mat-icon-button\r\n                        class=\"mat-warn\"\r\n                        (click)=\"deleteOperation(index)\"\r\n                        matTooltip=\"Delete operation\"\r\n                      >\r\n                        <mat-icon class=\"mat-warn\">delete</mat-icon>\r\n                      </button>\r\n                      <!-- run to -->\r\n                      <button\r\n                        type=\"button\"\r\n                        mat-icon-button\r\n                        class=\"mat-accent\"\r\n                        (click)=\"runTo(index)\"\r\n                        matTooltip=\"Run to this operation\"\r\n                      >\r\n                        <mat-icon class=\"mat-accent\">subscriptions</mat-icon>\r\n                      </button>\r\n                      <!-- duplicate -->\r\n                      <button\r\n                        type=\"button\"\r\n                        mat-icon-button\r\n                        (click)=\"duplicateOperation(index)\"\r\n                        matTooltip=\"Duplicate operation\"\r\n                      >\r\n                        <mat-icon>control_point_duplicate</mat-icon>\r\n                      </button>\r\n                      <!-- move up -->\r\n                      <button\r\n                        type=\"button\"\r\n                        mat-icon-button\r\n                        (click)=\"moveOperationUp(index)\"\r\n                        matTooltip=\"Move operation up\"\r\n                        [disabled]=\"index === 0\"\r\n                      >\r\n                        <mat-icon>arrow_circle_up</mat-icon>\r\n                      </button>\r\n                      <!-- move down -->\r\n                      <button\r\n                        type=\"button\"\r\n                        mat-icon-button\r\n                        (click)=\"moveOperationDown(index)\"\r\n                        matTooltip=\"Move operation down\"\r\n                        [disabled]=\"index === operations.value.length - 1\"\r\n                      >\r\n                        <mat-icon>arrow_circle_down</mat-icon>\r\n                      </button>\r\n                    </td>\r\n                    <td>{{ operation.id }}</td>\r\n                    <td>{{ operation.type | flatLookup: opTypeMap }}</td>\r\n                    <td>{{ operation.at }}</td>\r\n                    <td>{{ operation.run }}</td>\r\n                    <td>{{ operation.value }}</td>\r\n                    <td>{{ operation.inputTag }}</td>\r\n                    <td>{{ operation.outputTag }}</td>\r\n                    <td>{{ operation.groupId }}</td>\r\n                    <td>\r\n                      @if (operation.features?.length) {\r\n                        @if (featDetails.value) {\r\n                          <div class=\"form-row\">\r\n                            @for (\r\n                              feat of operation.features;\r\n                              track $index;\r\n                              let i = $index\r\n                            ) {\r\n                              <div class=\"feature\">\r\n                                <span class=\"fname\">{{\r\n                                  feat.name\r\n                                    | flatLookup\r\n                                      : featureDefs()?.names\r\n                                      : \"id\"\r\n                                      : \"label\"\r\n                                }}</span\r\n                                >=<span class=\"fvalue\">{{\r\n                                  feat.value\r\n                                    | flatLookup\r\n                                      : featureDefs()?.values?.[feat.name]\r\n                                      : \"id\"\r\n                                      : \"label\"\r\n                                }}</span>\r\n                              </div>\r\n                            }\r\n                          </div>\r\n                        } @else {\r\n                          <!-- version badge -->\r\n                          @if (\r\n                            operation.features?.some(f => f.name === 'version')\r\n                          ) {\r\n                            <span\r\n                              matBadge=\"{{ operation.features?.find(f => f.name === 'version')?.value }}\"\r\n                              matBadgeOverlap=\"false\"\r\n                              >{{ operation.features?.length }}</span\r\n                            >\r\n                          }\r\n                        }\r\n                      }\r\n                    </td>\r\n                    <td>{{ operation.sources?.length || \"\" }}</td>\r\n                  </tr>\r\n                }\r\n              </tbody>\r\n            </table>\r\n          }\r\n        </div>\r\n      </div>\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n\r\n  <!-- progress -->\r\n  <div class=\"margin-bottom\">\r\n    @if (busy()) {\r\n      <mat-progress-bar mode=\"indeterminate\" />\r\n    }\r\n  </div>\r\n\r\n  <!-- result -->\r\n  @if (result()) {\r\n    <fieldset id=\"result\">\r\n      <legend>result</legend>\r\n      <gve-chain-result-view\r\n        [result]=\"result()!\"\r\n        [initialStepIndex]=\"initialStepIndex()\"\r\n        [disabledRangePick]=\"editedOp() ? false : true\"\r\n        (stepPick)=\"onStepPick($event)\"\r\n        (rangePick)=\"onRangePick($event, true)\"\r\n      />\r\n    </fieldset>\r\n  }\r\n\r\n  <!-- snapshot view -->\r\n  @if (result()) {\r\n    <div id=\"preview\">\r\n      <gve-snapshot-rendition #rendition class=\"rendition\">\r\n      </gve-snapshot-rendition>\r\n    </div>\r\n  }\r\n\r\n  <!--buttons -->\r\n  <div class=\"form-row-center\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"mat-warn\"\r\n      mat-flat-button\r\n      matTooltip=\"Discard changes\"\r\n      (click)=\"close()\"\r\n    >\r\n      <mat-icon>clear</mat-icon>\r\n      close\r\n    </button>\r\n    @if (!noSave()) {\r\n      <button\r\n        type=\"submit\"\r\n        class=\"mat-primary\"\r\n        mat-flat-button\r\n        matTooltip=\"Save changes\"\r\n        [disabled]=\"form.invalid\"\r\n      >\r\n        <mat-icon>check_circle</mat-icon>\r\n        save\r\n      </button>\r\n    }\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row-center{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}.form-row,.form-row-center *{flex:0 0 auto}.form-row .right{margin-left:auto}.button-row{display:flex;align-items:center;flex-wrap:wrap}.button-row *{flex:0 0 auto}.long-text{width:100%;max-width:800px}.margin-bottom{margin-bottom:8px}#text-range{margin:8px;border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;padding:6px}mat-expansion-panel{margin:8px 0}div#visual-info{font-size:95%;color:var(--mat-sys-on-surface-variant);margin:8px}#result{max-height:800px;overflow:auto}#snapshot-container{margin-top:6px}#list{margin:8px 0}#opStyle{margin-top:8px}table{width:100%;border-collapse:collapse;color:var(--mat-sys-on-surface-variant)}tbody tr:nth-child(odd){background-color:var(--mat-sys-surface-container)}th{text-align:left;font-weight:400;color:var(--mat-sys-on-surface-variant)}tbody tr:hover{background-color:var(--mat-sys-surface-container-high)}td.fit-width{width:1px;white-space:nowrap}tbody tr.feat-editing{background-color:var(--mat-sys-tertiary-container);color:var(--mat-sys-on-tertiary-container)}tbody tr.selected{background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container)}fieldset{border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;padding:8px;margin:8px 0}legend{color:var(--mat-sys-on-surface-variant)}.error{color:var(--mat-sys-error)}.input-nr{width:6em}.full-width{width:100%}.code{font-family:Courier New,Courier,monospace}.boxed{border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;padding:8px;margin:8px 0}span.label{margin-left:8px}.feature{color:var(--mat-sys-on-surface-variant)}.fname{font-size:.9em;color:var(--mat-sys-on-surface-variant)}.fvalue{font-size:.9em;color:var(--mat-sys-on-surface-variant);background-color:var(--mat-sys-surface-container);padding:2px 4px;border-radius:4px}gve-animation-timeline-set{margin:8px 0}div#image{display:grid;gap:8px;grid-template-rows:auto;grid-template-columns:1fr auto;grid-template-areas:\"image-ctl image-view\"}div#image-ctl{grid-area:image-ctl}div#image-view{grid-area:image-view}div#chain-view{margin-bottom:8px}#preview{margin:8px 0}.rendition{display:block;width:100%;min-height:600px;max-height:80vh;border:1px solid var(--mat-sys-on-surface-variant);overflow:auto}@media only screen and (max-width:959px){div#image{grid-template-columns:1fr;grid-template-areas:\"image-ctl\" \"image-view\"}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i3$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i3$2.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i11.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i12.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i12.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i12.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ChainOperationEditorComponent, selector: "gve-chain-operation-editor", inputs: ["operation", "snapshot", "hidePreview", "featureDefs", "rangePatch", "multiValuedFeatureIds", "sourceIds", "sourceTypes"], outputs: ["operationChange", "operationPreview", "operationCancel"] }, { kind: "component", type: ChainResultViewComponent, selector: "gve-chain-result-view", inputs: ["result", "initialStepIndex", "disabledRangePick"], outputs: ["stepPick", "rangePick"] }, { kind: "component", type: BaseTextViewComponent, selector: "gve-base-text-view", inputs: ["defaultColor", "defaultBorderColor", "selectionColor", "searchHighlightColor", "hasLineNumber", "text", "colorCallback", "borderColorCallback"], outputs: ["charPick", "rangePick"] }, { kind: "component", type: FeatureSetEditorComponent, selector: "gve-feature-set-editor", inputs: ["isVar", "featNames", "featValues", "featProps", "filterThreshold", "multiValuedFeatureIds", "batchMode", "features"], outputs: ["close", "featuresChange"] }, { kind: "component", type: OperationSourceEditorComponent, selector: "gve-operation-source-editor", inputs: ["source", "ids", "types"], outputs: ["sourceChange", "sourceCancel"] }, { kind: "pipe", type: FlatLookupPipe, name: "flatLookup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SnapshotEditorComponent, deps: [{ token: i1$1.FormBuilder }, { token: GveApiService }, { token: i3$3.MatDialog }, { token: i2$1.DialogService }, { token: i2$3.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SnapshotEditorComponent, isStandalone: true, selector: "gve-snapshot-editor", inputs: { snapshot: { classPropertyName: "snapshot", publicName: "snapshot", isSignal: true, isRequired: false, transformFunction: null }, batchOps: { classPropertyName: "batchOps", publicName: "batchOps", isSignal: true, isRequired: false, transformFunction: null }, noSave: { classPropertyName: "noSave", publicName: "noSave", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null }, noDecoration: { classPropertyName: "noDecoration", publicName: "noDecoration", isSignal: true, isRequired: false, transformFunction: null }, featureDefs: { classPropertyName: "featureDefs", publicName: "featureDefs", isSignal: true, isRequired: false, transformFunction: null }, multiValuedFeatureIds: { classPropertyName: "multiValuedFeatureIds", publicName: "multiValuedFeatureIds", isSignal: true, isRequired: false, transformFunction: null }, sourceIds: { classPropertyName: "sourceIds", publicName: "sourceIds", isSignal: true, isRequired: false, transformFunction: null }, sourceTypes: { classPropertyName: "sourceTypes", publicName: "sourceTypes", isSignal: true, isRequired: false, transformFunction: null }, renditionSettings: { classPropertyName: "renditionSettings", publicName: "renditionSettings", isSignal: true, isRequired: false, transformFunction: null }, opListMaxHeight: { classPropertyName: "opListMaxHeight", publicName: "opListMaxHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { snapshot: "snapshotChange", snapshotCancel: "snapshotCancel" }, viewQueries: [{ propertyName: "renditionRef", first: true, predicate: ["rendition"], descendants: true, isSignal: true }, { propertyName: "operationEditorPanelRef", first: true, predicate: ["operationEditorPanel"], descendants: true, isSignal: true }], ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <mat-tab-group>\r\n    <!-- text -->\r\n    <mat-tab>\r\n      <ng-template mat-tab-label>\r\n        <mat-icon>article</mat-icon> <span class=\"label\">text</span>\r\n      </ng-template>\r\n      <mat-expansion-panel>\r\n        <mat-expansion-panel-header>\r\n          <mat-panel-title> base text </mat-panel-title>\r\n        </mat-expansion-panel-header>\r\n        <!-- base text -->\r\n        <div class=\"form-row\">\r\n          <button\r\n            type=\"button\"\r\n            mat-flat-button\r\n            color=\"mat-warn\"\r\n            matTooltip=\"Enter base text\"\r\n            (click)=\"inputBaseText()\"\r\n            [disabled]=\"busy()\"\r\n          >\r\n            <mat-icon>edit</mat-icon> base text\r\n          </button>\r\n\r\n          @if (textRange()) {\r\n            <span id=\"text-range\"\r\n              >{{ textRange()!.at }}\u00D7{{ textRange()!.run }}</span\r\n            >\r\n          }\r\n        </div>\r\n\r\n        <!-- text characters -->\r\n        <gve-base-text-view\r\n          [text]=\"baseText.value\"\r\n          [hasLineNumber]=\"true\"\r\n          (rangePick)=\"onRangePick($event)\"\r\n        />\r\n      </mat-expansion-panel>\r\n    </mat-tab>\r\n\r\n    <!-- operations -->\r\n    <mat-tab>\r\n      <ng-template mat-tab-label>\r\n        <mat-icon>edit</mat-icon> <span class=\"label\">operations</span>\r\n      </ng-template>\r\n\r\n      <div id=\"snapshot-container\">\r\n        <div id=\"general\">\r\n          <div class=\"form-row\">\r\n            <!-- feat details -->\r\n            <mat-slide-toggle\r\n              [formControl]=\"featDetails\"\r\n              matTooltip=\"Toggle feature details\"\r\n              >feat. details</mat-slide-toggle\r\n            >\r\n            <!-- auto run on edit -->\r\n            <mat-slide-toggle\r\n              [formControl]=\"autoRun\"\r\n              matTooltip=\"Auto-run operations on edit\"\r\n              >auto-run</mat-slide-toggle\r\n            >\r\n\r\n            <div class=\"form-row right\">\r\n              <!-- copy ops DSL -->\r\n              <button\r\n                type=\"button\"\r\n                mat-icon-button\r\n                matTooltip=\"Copy operations as DSL to clipboard\"\r\n                [disabled]=\"!operations.value.length || busy()\"\r\n                (click)=\"copyOperationsDsl()\"\r\n              >\r\n                <mat-icon>content_copy</mat-icon>\r\n              </button>\r\n\r\n              <!-- copy base text and operations JSON -->\r\n              <button\r\n                type=\"button\"\r\n                mat-icon-button\r\n                matTooltip=\"Copy text and operations as JSON to clipboard\"\r\n                [disabled]=\"\r\n                  (!baseText.value && !operations.value.length) || busy()\r\n                \"\r\n                (click)=\"copyOperationsJson()\"\r\n              >\r\n                <mat-icon>copy_all</mat-icon>\r\n              </button>\r\n\r\n              <!-- remove ops -->\r\n              <button\r\n                type=\"button\"\r\n                class=\"mat-warn\"\r\n                mat-flat-button\r\n                matTooltip=\"Remove all the operations\"\r\n                [disabled]=\"!operations.value.length || busy()\"\r\n                (click)=\"clearOperations()\"\r\n              >\r\n                <mat-icon>delete_forever</mat-icon> clear\r\n              </button>\r\n\r\n              <!-- batch add ops -->\r\n              <button\r\n                type=\"button\"\r\n                mat-flat-button\r\n                matTooltip=\"Add a batch of operations\"\r\n                class=\"mat-primary\"\r\n                [disabled]=\"busy()\"\r\n                (click)=\"parseOperations()\"\r\n              >\r\n                <mat-icon>post_add</mat-icon> batch\r\n              </button>\r\n\r\n              <!-- edit operations feats/sources -->\r\n              <form\r\n                (submit)=\"editOperationsFeats()\"\r\n                [formGroup]=\"editFeatsForm\"\r\n              >\r\n                <mat-form-field>\r\n                  <mat-label>operations (e.g. 2, 5-7, 9)</mat-label>\r\n                  <input matInput [formControl]=\"editFeatsRange\" />\r\n                  @if (\r\n                    $any(editFeatsRange).errors?.required &&\r\n                    (editFeatsRange.dirty || editFeatsRange.touched)\r\n                  ) {\r\n                    <mat-error>range required</mat-error>\r\n                  }\r\n                  @if (\r\n                    $any(editFeatsRange).errors?.pattern &&\r\n                    (editFeatsRange.dirty || editFeatsRange.touched)\r\n                  ) {\r\n                    <mat-error>invalid range (use e.g. 2, 5-7, 9)</mat-error>\r\n                  }\r\n                  <button\r\n                    type=\"button\"\r\n                    matIconButton\r\n                    matSuffix\r\n                    matTooltip=\"Edit sources for range\"\r\n                    (click)=\"editOperationSources()\"\r\n                  >\r\n                    <mat-icon>people</mat-icon>\r\n                  </button>\r\n                  <button\r\n                    type=\"submit\"\r\n                    matIconButton\r\n                    matSuffix\r\n                    matTooltip=\"Edit features for range\"\r\n                  >\r\n                    <mat-icon>edit_note</mat-icon>\r\n                  </button>\r\n                </mat-form-field>\r\n              </form>\r\n\r\n              <!-- add op -->\r\n              <button\r\n                type=\"button\"\r\n                mat-flat-button\r\n                class=\"mat-primary\"\r\n                [disabled]=\"busy() || !baseText.value\"\r\n                (click)=\"editNewOperation()\"\r\n                matTooltip=\"Add a new operation\"\r\n              >\r\n                <mat-icon>add_circle</mat-icon> operation\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- feature set editor -->\r\n        @if (operationFeats() !== undefined) {\r\n          <mat-expansion-panel #featsEditorPanel [expanded]=\"true\">\r\n            <mat-expansion-panel-header>\r\n              <mat-panel-title>\r\n                Features of {{ batchRangeLabel() }}\r\n              </mat-panel-title>\r\n            </mat-expansion-panel-header>\r\n            <fieldset>\r\n              <gve-feature-set-editor\r\n                [batchMode]=\"true\"\r\n                [features]=\"operationFeats() || []\"\r\n                [isVar]=\"true\"\r\n                [featNames]=\"$safeNavigationMigration(featureDefs()?.names)\"\r\n                [featValues]=\"$safeNavigationMigration(featureDefs()?.values)\"\r\n                [featProps]=\"$safeNavigationMigration(featureDefs()?.props)\"\r\n                [multiValuedFeatureIds]=\"multiValuedFeatureIds()\"\r\n                (close)=\"closeOperationFeats()\"\r\n                (featuresChange)=\"saveOperationsFeats($event)\"\r\n              />\r\n            </fieldset>\r\n          </mat-expansion-panel>\r\n        }\r\n\r\n        <!-- operation source editor -->\r\n        @if (batchForSource() && batchOpNumbers()?.length) {\r\n          <mat-expansion-panel #sourcesEditorPanel [expanded]=\"true\">\r\n            <mat-expansion-panel-header>\r\n              <mat-panel-title>\r\n                Sources of {{ batchRangeLabel() }}\r\n              </mat-panel-title>\r\n            </mat-expansion-panel-header>\r\n            <fieldset>\r\n              <gve-operation-source-editor\r\n                [ids]=\"sourceIds()\"\r\n                [types]=\"sourceTypes()\"\r\n                (sourceCancel)=\"closeOperationSources()\"\r\n                (sourceChange)=\"saveOperationSources($event)\"\r\n              />\r\n            </fieldset>\r\n          </mat-expansion-panel>\r\n        }\r\n\r\n        <!-- operation editor -->\r\n        @if (editedOp()) {\r\n          <mat-expansion-panel\r\n            #operationEditorPanel\r\n            [expanded]=\"editedOp()\"\r\n            [disabled]=\"!editedOp()\"\r\n          >\r\n            <mat-expansion-panel-header>\r\n              <mat-panel-title>operation {{ editedOp()?.id }}</mat-panel-title>\r\n            </mat-expansion-panel-header>\r\n            <fieldset>\r\n              <gve-chain-operation-editor\r\n                [featureDefs]=\"featureDefs()\"\r\n                [multiValuedFeatureIds]=\"multiValuedFeatureIds()\"\r\n                [hidePreview]=\"editedOpIndex() === -1\"\r\n                [operation]=\"editedOp()\"\r\n                [rangePatch]=\"editedOpRangePatch()\"\r\n                [sourceIds]=\"sourceIds()\"\r\n                [sourceTypes]=\"sourceTypes()\"\r\n                (operationCancel)=\"onOperationCancel()\"\r\n                (operationChange)=\"onOperationChange($event)\"\r\n                (operationPreview)=\"onOperationPreview($event)\"\r\n              />\r\n            </fieldset>\r\n          </mat-expansion-panel>\r\n        }\r\n\r\n        <!-- ops -->\r\n        <div\r\n          id=\"ops\"\r\n          [style.max-height]=\"opListMaxHeight()\"\r\n          [style.overflow-y]=\"opListMaxHeight() ? 'auto' : null\"\r\n        >\r\n          <!-- operations list -->\r\n          @if (operations.value.length) {\r\n            <table id=\"list\">\r\n              <thead>\r\n                <tr>\r\n                  <th>nr.</th>\r\n                  <th></th>\r\n                  <th>ID</th>\r\n                  <th>type</th>\r\n                  <th>at</th>\r\n                  <th>run</th>\r\n                  <th>value</th>\r\n                  <th>itag</th>\r\n                  <th>otag</th>\r\n                  <th>gid</th>\r\n                  <th>feats</th>\r\n                  <th>src</th>\r\n                </tr>\r\n              </thead>\r\n              <tbody>\r\n                @for (\r\n                  operation of operations.value;\r\n                  track operation.id;\r\n                  let index = $index\r\n                ) {\r\n                  <tr\r\n                    [class.selected]=\"operation.id === editedOp()?.id\"\r\n                    [class.feat-editing]=\"batchOpNumbers()?.includes(index + 1)\"\r\n                  >\r\n                    <td class=\"fit-width\">{{ index + 1 }}.</td>\r\n                    <td class=\"fit-width\">\r\n                      <!-- edit -->\r\n                      <button\r\n                        type=\"button\"\r\n                        mat-icon-button\r\n                        class=\"mat-primary\"\r\n                        (click)=\"editOperation(index)\"\r\n                        matTooltip=\"Edit operation\"\r\n                      >\r\n                        <mat-icon>edit</mat-icon>\r\n                      </button>\r\n                      <!-- delete -->\r\n                      <button\r\n                        type=\"button\"\r\n                        mat-icon-button\r\n                        class=\"mat-warn\"\r\n                        (click)=\"deleteOperation(index)\"\r\n                        matTooltip=\"Delete operation\"\r\n                      >\r\n                        <mat-icon class=\"mat-warn\">delete</mat-icon>\r\n                      </button>\r\n                      <!-- run to -->\r\n                      <button\r\n                        type=\"button\"\r\n                        mat-icon-button\r\n                        class=\"mat-accent\"\r\n                        (click)=\"runTo(index)\"\r\n                        matTooltip=\"Run to this operation\"\r\n                      >\r\n                        <mat-icon class=\"mat-accent\">subscriptions</mat-icon>\r\n                      </button>\r\n                      <!-- duplicate -->\r\n                      <button\r\n                        type=\"button\"\r\n                        mat-icon-button\r\n                        (click)=\"duplicateOperation(index)\"\r\n                        matTooltip=\"Duplicate operation\"\r\n                      >\r\n                        <mat-icon>control_point_duplicate</mat-icon>\r\n                      </button>\r\n                      <!-- move up -->\r\n                      <button\r\n                        type=\"button\"\r\n                        mat-icon-button\r\n                        (click)=\"moveOperationUp(index)\"\r\n                        matTooltip=\"Move operation up\"\r\n                        [disabled]=\"index === 0\"\r\n                      >\r\n                        <mat-icon>arrow_circle_up</mat-icon>\r\n                      </button>\r\n                      <!-- move down -->\r\n                      <button\r\n                        type=\"button\"\r\n                        mat-icon-button\r\n                        (click)=\"moveOperationDown(index)\"\r\n                        matTooltip=\"Move operation down\"\r\n                        [disabled]=\"index === operations.value.length - 1\"\r\n                      >\r\n                        <mat-icon>arrow_circle_down</mat-icon>\r\n                      </button>\r\n                    </td>\r\n                    <td>{{ operation.id }}</td>\r\n                    <td>{{ operation.type | flatLookup: opTypeMap }}</td>\r\n                    <td>{{ operation.at }}</td>\r\n                    <td>{{ operation.run }}</td>\r\n                    <td>{{ operation.value }}</td>\r\n                    <td>{{ operation.inputTag }}</td>\r\n                    <td>{{ operation.outputTag }}</td>\r\n                    <td>{{ operation.groupId }}</td>\r\n                    <td>\r\n                      @if (operation.features?.length) {\r\n                        @if (featDetails.value) {\r\n                          <div class=\"form-row\">\r\n                            @for (\r\n                              feat of operation.features;\r\n                              track $index;\r\n                              let i = $index\r\n                            ) {\r\n                              <div class=\"feature\">\r\n                                <span class=\"fname\">{{\r\n                                  feat.name\r\n                                    | flatLookup\r\n                                      : $safeNavigationMigration(featureDefs()?.names)\r\n                                      : \"id\"\r\n                                      : \"label\"\r\n                                }}</span\r\n                                >=<span class=\"fvalue\">{{\r\n                                  feat.value\r\n                                    | flatLookup\r\n                                      : $safeNavigationMigration(featureDefs()?.values?.[feat.name])\r\n                                      : \"id\"\r\n                                      : \"label\"\r\n                                }}</span>\r\n                              </div>\r\n                            }\r\n                          </div>\r\n                        } @else {\r\n                          <!-- version badge -->\r\n                          @if (\r\n                            operation.features?.some(f => f.name === 'version')\r\n                          ) {\r\n                            <span\r\n                              matBadge=\"{{ operation.features?.find(f => f.name === 'version')?.value }}\"\r\n                              matBadgeOverlap=\"false\"\r\n                              >{{ operation.features?.length }}</span\r\n                            >\r\n                          }\r\n                        }\r\n                      }\r\n                    </td>\r\n                    <td>{{ operation.sources?.length || \"\" }}</td>\r\n                  </tr>\r\n                }\r\n              </tbody>\r\n            </table>\r\n          }\r\n        </div>\r\n      </div>\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n\r\n  <!-- progress -->\r\n  <div class=\"margin-bottom\">\r\n    @if (busy()) {\r\n      <mat-progress-bar mode=\"indeterminate\" />\r\n    }\r\n  </div>\r\n\r\n  <!-- result -->\r\n  @if (result()) {\r\n    <fieldset id=\"result\">\r\n      <legend>result</legend>\r\n      <gve-chain-result-view\r\n        [result]=\"result()!\"\r\n        [initialStepIndex]=\"initialStepIndex()\"\r\n        [disabledRangePick]=\"editedOp() ? false : true\"\r\n        (stepPick)=\"onStepPick($event)\"\r\n        (rangePick)=\"onRangePick($event, true)\"\r\n      />\r\n    </fieldset>\r\n  }\r\n\r\n  <!-- snapshot view -->\r\n  @if (result()) {\r\n    <div id=\"preview\">\r\n      <gve-snapshot-rendition #rendition class=\"rendition\">\r\n      </gve-snapshot-rendition>\r\n    </div>\r\n  }\r\n\r\n  <!--buttons -->\r\n  <div class=\"form-row-center\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"mat-warn\"\r\n      mat-flat-button\r\n      matTooltip=\"Discard changes\"\r\n      (click)=\"close()\"\r\n    >\r\n      <mat-icon>clear</mat-icon>\r\n      close\r\n    </button>\r\n    @if (!noSave()) {\r\n      <button\r\n        type=\"submit\"\r\n        class=\"mat-primary\"\r\n        mat-flat-button\r\n        matTooltip=\"Save changes\"\r\n        [disabled]=\"form.invalid\"\r\n      >\r\n        <mat-icon>check_circle</mat-icon>\r\n        save\r\n      </button>\r\n    }\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row-center{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}.form-row,.form-row-center *{flex:0 0 auto}.form-row .right{margin-left:auto}.button-row{display:flex;align-items:center;flex-wrap:wrap}.button-row *{flex:0 0 auto}.long-text{width:100%;max-width:800px}.margin-bottom{margin-bottom:8px}#text-range{margin:8px;border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;padding:6px}mat-expansion-panel{margin:8px 0}div#visual-info{font-size:95%;color:var(--mat-sys-on-surface-variant);margin:8px}#result{max-height:800px;overflow:auto}#snapshot-container{margin-top:6px}#list{margin:8px 0}#opStyle{margin-top:8px}table{width:100%;border-collapse:collapse;color:var(--mat-sys-on-surface-variant)}tbody tr:nth-child(odd){background-color:var(--mat-sys-surface-container)}th{text-align:left;font-weight:400;color:var(--mat-sys-on-surface-variant)}tbody tr:hover{background-color:var(--mat-sys-surface-container-high)}td.fit-width{width:1px;white-space:nowrap}tbody tr.feat-editing{background-color:var(--mat-sys-tertiary-container);color:var(--mat-sys-on-tertiary-container)}tbody tr.selected{background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container)}fieldset{border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;padding:8px;margin:8px 0}legend{color:var(--mat-sys-on-surface-variant)}.error{color:var(--mat-sys-error)}.input-nr{width:6em}.full-width{width:100%}.code{font-family:Courier New,Courier,monospace}.boxed{border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;padding:8px;margin:8px 0}span.label{margin-left:8px}.feature{color:var(--mat-sys-on-surface-variant)}.fname{font-size:.9em;color:var(--mat-sys-on-surface-variant)}.fvalue{font-size:.9em;color:var(--mat-sys-on-surface-variant);background-color:var(--mat-sys-surface-container);padding:2px 4px;border-radius:4px}gve-animation-timeline-set{margin:8px 0}div#image{display:grid;gap:8px;grid-template-rows:auto;grid-template-columns:1fr auto;grid-template-areas:\"image-ctl image-view\"}div#image-ctl{grid-area:image-ctl}div#image-view{grid-area:image-view}div#chain-view{margin-bottom:8px}#preview{margin:8px 0}.rendition{display:block;width:100%;min-height:600px;max-height:80vh;border:1px solid var(--mat-sys-on-surface-variant);overflow:auto}@media only screen and (max-width:959px){div#image{grid-template-columns:1fr;grid-template-areas:\"image-ctl\" \"image-view\"}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i3$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i3$2.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i11.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i12.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i12.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i12.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ChainOperationEditorComponent, selector: "gve-chain-operation-editor", inputs: ["operation", "snapshot", "hidePreview", "featureDefs", "rangePatch", "multiValuedFeatureIds", "sourceIds", "sourceTypes"], outputs: ["operationChange", "operationPreview", "operationCancel"] }, { kind: "component", type: ChainResultViewComponent, selector: "gve-chain-result-view", inputs: ["result", "initialStepIndex", "disabledRangePick"], outputs: ["stepPick", "rangePick"] }, { kind: "component", type: BaseTextViewComponent, selector: "gve-base-text-view", inputs: ["defaultColor", "defaultBorderColor", "selectionColor", "searchHighlightColor", "hasLineNumber", "text", "colorCallback", "borderColorCallback"], outputs: ["charPick", "rangePick"] }, { kind: "component", type: FeatureSetEditorComponent, selector: "gve-feature-set-editor", inputs: ["isVar", "featNames", "featValues", "featProps", "filterThreshold", "multiValuedFeatureIds", "batchMode", "features"], outputs: ["close", "featuresChange"] }, { kind: "component", type: OperationSourceEditorComponent, selector: "gve-operation-source-editor", inputs: ["source", "ids", "types"], outputs: ["sourceChange", "sourceCancel"] }, { kind: "pipe", type: FlatLookupPipe, name: "flatLookup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SnapshotEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SnapshotEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gve-snapshot-editor', imports: [
                         CommonModule,
@@ -3486,7 +3636,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         FeatureSetEditorComponent,
                         OperationSourceEditorComponent,
                         FlatLookupPipe,
-                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <mat-tab-group>\r\n    <!-- text -->\r\n    <mat-tab>\r\n      <ng-template mat-tab-label>\r\n        <mat-icon>article</mat-icon> <span class=\"label\">text</span>\r\n      </ng-template>\r\n      <mat-expansion-panel>\r\n        <mat-expansion-panel-header>\r\n          <mat-panel-title> base text </mat-panel-title>\r\n        </mat-expansion-panel-header>\r\n        <!-- base text -->\r\n        <div class=\"form-row\">\r\n          <button\r\n            type=\"button\"\r\n            mat-flat-button\r\n            color=\"mat-warn\"\r\n            matTooltip=\"Enter base text\"\r\n            (click)=\"inputBaseText()\"\r\n            [disabled]=\"busy()\"\r\n          >\r\n            <mat-icon>edit</mat-icon> base text\r\n          </button>\r\n\r\n          @if (textRange()) {\r\n            <span id=\"text-range\"\r\n              >{{ textRange()!.at }}\u00D7{{ textRange()!.run }}</span\r\n            >\r\n          }\r\n        </div>\r\n\r\n        <!-- text characters -->\r\n        <gve-base-text-view\r\n          [text]=\"baseText.value\"\r\n          [hasLineNumber]=\"true\"\r\n          (rangePick)=\"onRangePick($event)\"\r\n        />\r\n      </mat-expansion-panel>\r\n    </mat-tab>\r\n\r\n    <!-- operations -->\r\n    <mat-tab>\r\n      <ng-template mat-tab-label>\r\n        <mat-icon>edit</mat-icon> <span class=\"label\">operations</span>\r\n      </ng-template>\r\n\r\n      <div id=\"snapshot-container\">\r\n        <div id=\"general\">\r\n          <div class=\"form-row\">\r\n            <!-- feat details -->\r\n            <mat-slide-toggle\r\n              [formControl]=\"featDetails\"\r\n              matTooltip=\"Toggle feature details\"\r\n              >feat. details</mat-slide-toggle\r\n            >\r\n            <!-- auto run on edit -->\r\n            <mat-slide-toggle\r\n              [formControl]=\"autoRun\"\r\n              matTooltip=\"Auto-run operations on edit\"\r\n              >auto-run</mat-slide-toggle\r\n            >\r\n\r\n            <div class=\"form-row right\">\r\n              <!-- copy ops DSL -->\r\n              <button\r\n                type=\"button\"\r\n                mat-icon-button\r\n                matTooltip=\"Copy operations as DSL to clipboard\"\r\n                [disabled]=\"!operations.value.length || busy()\"\r\n                (click)=\"copyOperationsDsl()\"\r\n              >\r\n                <mat-icon>content_copy</mat-icon>\r\n              </button>\r\n\r\n              <!-- copy base text and operations JSON -->\r\n              <button\r\n                type=\"button\"\r\n                mat-icon-button\r\n                matTooltip=\"Copy text and operations as JSON to clipboard\"\r\n                [disabled]=\"\r\n                  (!baseText.value && !operations.value.length) || busy()\r\n                \"\r\n                (click)=\"copyOperationsJson()\"\r\n              >\r\n                <mat-icon>copy_all</mat-icon>\r\n              </button>\r\n\r\n              <!-- remove ops -->\r\n              <button\r\n                type=\"button\"\r\n                class=\"mat-warn\"\r\n                mat-flat-button\r\n                matTooltip=\"Remove all the operations\"\r\n                [disabled]=\"!operations.value.length || busy()\"\r\n                (click)=\"clearOperations()\"\r\n              >\r\n                <mat-icon>delete_forever</mat-icon> clear\r\n              </button>\r\n\r\n              <!-- batch add ops -->\r\n              <button\r\n                type=\"button\"\r\n                mat-flat-button\r\n                matTooltip=\"Add a batch of operations\"\r\n                class=\"mat-primary\"\r\n                [disabled]=\"busy()\"\r\n                (click)=\"parseOperations()\"\r\n              >\r\n                <mat-icon>post_add</mat-icon> batch\r\n              </button>\r\n\r\n              <!-- edit operations feats/sources -->\r\n              <form\r\n                (submit)=\"editOperationsFeats()\"\r\n                [formGroup]=\"editFeatsForm\"\r\n              >\r\n                <mat-form-field>\r\n                  <mat-label>operations (e.g. 2, 5-7, 9)</mat-label>\r\n                  <input matInput [formControl]=\"editFeatsRange\" />\r\n                  @if (\r\n                    $any(editFeatsRange).errors?.required &&\r\n                    (editFeatsRange.dirty || editFeatsRange.touched)\r\n                  ) {\r\n                    <mat-error>range required</mat-error>\r\n                  }\r\n                  @if (\r\n                    $any(editFeatsRange).errors?.pattern &&\r\n                    (editFeatsRange.dirty || editFeatsRange.touched)\r\n                  ) {\r\n                    <mat-error>invalid range (use e.g. 2, 5-7, 9)</mat-error>\r\n                  }\r\n                  <button\r\n                    type=\"button\"\r\n                    matIconButton\r\n                    matSuffix\r\n                    matTooltip=\"Edit sources for range\"\r\n                    (click)=\"editOperationSources()\"\r\n                  >\r\n                    <mat-icon>people</mat-icon>\r\n                  </button>\r\n                  <button\r\n                    type=\"submit\"\r\n                    matIconButton\r\n                    matSuffix\r\n                    matTooltip=\"Edit features for range\"\r\n                  >\r\n                    <mat-icon>edit_note</mat-icon>\r\n                  </button>\r\n                </mat-form-field>\r\n              </form>\r\n\r\n              <!-- add op -->\r\n              <button\r\n                type=\"button\"\r\n                mat-flat-button\r\n                class=\"mat-primary\"\r\n                [disabled]=\"busy() || !baseText.value\"\r\n                (click)=\"editNewOperation()\"\r\n                matTooltip=\"Add a new operation\"\r\n              >\r\n                <mat-icon>add_circle</mat-icon> operation\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- feature set editor -->\r\n        @if (operationFeats() !== undefined) {\r\n          <mat-expansion-panel #featsEditorPanel [expanded]=\"true\">\r\n            <mat-expansion-panel-header>\r\n              <mat-panel-title>\r\n                Features of {{ batchRangeLabel() }}\r\n              </mat-panel-title>\r\n            </mat-expansion-panel-header>\r\n            <fieldset>\r\n              <gve-feature-set-editor\r\n                [batchMode]=\"true\"\r\n                [features]=\"operationFeats() || []\"\r\n                [isVar]=\"true\"\r\n                [featNames]=\"featureDefs()?.names\"\r\n                [featValues]=\"featureDefs()?.values\"\r\n                [featProps]=\"featureDefs()?.props\"\r\n                [multiValuedFeatureIds]=\"multiValuedFeatureIds()\"\r\n                (close)=\"closeOperationFeats()\"\r\n                (featuresChange)=\"saveOperationsFeats($event)\"\r\n              />\r\n            </fieldset>\r\n          </mat-expansion-panel>\r\n        }\r\n\r\n        <!-- operation source editor -->\r\n        @if (batchForSource() && batchOpNumbers()?.length) {\r\n          <mat-expansion-panel #sourcesEditorPanel [expanded]=\"true\">\r\n            <mat-expansion-panel-header>\r\n              <mat-panel-title>\r\n                Sources of {{ batchRangeLabel() }}\r\n              </mat-panel-title>\r\n            </mat-expansion-panel-header>\r\n            <fieldset>\r\n              <gve-operation-source-editor\r\n                [ids]=\"sourceIds()\"\r\n                [types]=\"sourceTypes()\"\r\n                (sourceCancel)=\"closeOperationSources()\"\r\n                (sourceChange)=\"saveOperationSources($event)\"\r\n              />\r\n            </fieldset>\r\n          </mat-expansion-panel>\r\n        }\r\n\r\n        <!-- operation editor -->\r\n        @if (editedOp()) {\r\n          <mat-expansion-panel\r\n            #operationEditorPanel\r\n            [expanded]=\"editedOp()\"\r\n            [disabled]=\"!editedOp()\"\r\n          >\r\n            <mat-expansion-panel-header>\r\n              <mat-panel-title>operation {{ editedOp()?.id }}</mat-panel-title>\r\n            </mat-expansion-panel-header>\r\n            <fieldset>\r\n              <gve-chain-operation-editor\r\n                [featureDefs]=\"featureDefs()\"\r\n                [multiValuedFeatureIds]=\"multiValuedFeatureIds()\"\r\n                [hidePreview]=\"editedOpIndex() === -1\"\r\n                [operation]=\"editedOp()\"\r\n                [rangePatch]=\"editedOpRangePatch()\"\r\n                [sourceIds]=\"sourceIds()\"\r\n                [sourceTypes]=\"sourceTypes()\"\r\n                (operationCancel)=\"onOperationCancel()\"\r\n                (operationChange)=\"onOperationChange($event)\"\r\n                (operationPreview)=\"onOperationPreview($event)\"\r\n              />\r\n            </fieldset>\r\n          </mat-expansion-panel>\r\n        }\r\n\r\n        <!-- ops -->\r\n        <div\r\n          id=\"ops\"\r\n          [style.max-height]=\"opListMaxHeight()\"\r\n          [style.overflow-y]=\"opListMaxHeight() ? 'auto' : null\"\r\n        >\r\n          <!-- operations list -->\r\n          @if (operations.value.length) {\r\n            <table id=\"list\">\r\n              <thead>\r\n                <tr>\r\n                  <th>nr.</th>\r\n                  <th></th>\r\n                  <th>ID</th>\r\n                  <th>type</th>\r\n                  <th>at</th>\r\n                  <th>run</th>\r\n                  <th>value</th>\r\n                  <th>itag</th>\r\n                  <th>otag</th>\r\n                  <th>gid</th>\r\n                  <th>feats</th>\r\n                  <th>src</th>\r\n                </tr>\r\n              </thead>\r\n              <tbody>\r\n                @for (\r\n                  operation of operations.value;\r\n                  track operation.id;\r\n                  let index = $index\r\n                ) {\r\n                  <tr\r\n                    [class.selected]=\"operation.id === editedOp()?.id\"\r\n                    [class.feat-editing]=\"batchOpNumbers()?.includes(index + 1)\"\r\n                  >\r\n                    <td class=\"fit-width\">{{ index + 1 }}.</td>\r\n                    <td class=\"fit-width\">\r\n                      <!-- edit -->\r\n                      <button\r\n                        type=\"button\"\r\n                        mat-icon-button\r\n                        class=\"mat-primary\"\r\n                        (click)=\"editOperation(index)\"\r\n                        matTooltip=\"Edit operation\"\r\n                      >\r\n                        <mat-icon>edit</mat-icon>\r\n                      </button>\r\n                      <!-- delete -->\r\n                      <button\r\n                        type=\"button\"\r\n                        mat-icon-button\r\n                        class=\"mat-warn\"\r\n                        (click)=\"deleteOperation(index)\"\r\n                        matTooltip=\"Delete operation\"\r\n                      >\r\n                        <mat-icon class=\"mat-warn\">delete</mat-icon>\r\n                      </button>\r\n                      <!-- run to -->\r\n                      <button\r\n                        type=\"button\"\r\n                        mat-icon-button\r\n                        class=\"mat-accent\"\r\n                        (click)=\"runTo(index)\"\r\n                        matTooltip=\"Run to this operation\"\r\n                      >\r\n                        <mat-icon class=\"mat-accent\">subscriptions</mat-icon>\r\n                      </button>\r\n                      <!-- duplicate -->\r\n                      <button\r\n                        type=\"button\"\r\n                        mat-icon-button\r\n                        (click)=\"duplicateOperation(index)\"\r\n                        matTooltip=\"Duplicate operation\"\r\n                      >\r\n                        <mat-icon>control_point_duplicate</mat-icon>\r\n                      </button>\r\n                      <!-- move up -->\r\n                      <button\r\n                        type=\"button\"\r\n                        mat-icon-button\r\n                        (click)=\"moveOperationUp(index)\"\r\n                        matTooltip=\"Move operation up\"\r\n                        [disabled]=\"index === 0\"\r\n                      >\r\n                        <mat-icon>arrow_circle_up</mat-icon>\r\n                      </button>\r\n                      <!-- move down -->\r\n                      <button\r\n                        type=\"button\"\r\n                        mat-icon-button\r\n                        (click)=\"moveOperationDown(index)\"\r\n                        matTooltip=\"Move operation down\"\r\n                        [disabled]=\"index === operations.value.length - 1\"\r\n                      >\r\n                        <mat-icon>arrow_circle_down</mat-icon>\r\n                      </button>\r\n                    </td>\r\n                    <td>{{ operation.id }}</td>\r\n                    <td>{{ operation.type | flatLookup: opTypeMap }}</td>\r\n                    <td>{{ operation.at }}</td>\r\n                    <td>{{ operation.run }}</td>\r\n                    <td>{{ operation.value }}</td>\r\n                    <td>{{ operation.inputTag }}</td>\r\n                    <td>{{ operation.outputTag }}</td>\r\n                    <td>{{ operation.groupId }}</td>\r\n                    <td>\r\n                      @if (operation.features?.length) {\r\n                        @if (featDetails.value) {\r\n                          <div class=\"form-row\">\r\n                            @for (\r\n                              feat of operation.features;\r\n                              track $index;\r\n                              let i = $index\r\n                            ) {\r\n                              <div class=\"feature\">\r\n                                <span class=\"fname\">{{\r\n                                  feat.name\r\n                                    | flatLookup\r\n                                      : featureDefs()?.names\r\n                                      : \"id\"\r\n                                      : \"label\"\r\n                                }}</span\r\n                                >=<span class=\"fvalue\">{{\r\n                                  feat.value\r\n                                    | flatLookup\r\n                                      : featureDefs()?.values?.[feat.name]\r\n                                      : \"id\"\r\n                                      : \"label\"\r\n                                }}</span>\r\n                              </div>\r\n                            }\r\n                          </div>\r\n                        } @else {\r\n                          <!-- version badge -->\r\n                          @if (\r\n                            operation.features?.some(f => f.name === 'version')\r\n                          ) {\r\n                            <span\r\n                              matBadge=\"{{ operation.features?.find(f => f.name === 'version')?.value }}\"\r\n                              matBadgeOverlap=\"false\"\r\n                              >{{ operation.features?.length }}</span\r\n                            >\r\n                          }\r\n                        }\r\n                      }\r\n                    </td>\r\n                    <td>{{ operation.sources?.length || \"\" }}</td>\r\n                  </tr>\r\n                }\r\n              </tbody>\r\n            </table>\r\n          }\r\n        </div>\r\n      </div>\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n\r\n  <!-- progress -->\r\n  <div class=\"margin-bottom\">\r\n    @if (busy()) {\r\n      <mat-progress-bar mode=\"indeterminate\" />\r\n    }\r\n  </div>\r\n\r\n  <!-- result -->\r\n  @if (result()) {\r\n    <fieldset id=\"result\">\r\n      <legend>result</legend>\r\n      <gve-chain-result-view\r\n        [result]=\"result()!\"\r\n        [initialStepIndex]=\"initialStepIndex()\"\r\n        [disabledRangePick]=\"editedOp() ? false : true\"\r\n        (stepPick)=\"onStepPick($event)\"\r\n        (rangePick)=\"onRangePick($event, true)\"\r\n      />\r\n    </fieldset>\r\n  }\r\n\r\n  <!-- snapshot view -->\r\n  @if (result()) {\r\n    <div id=\"preview\">\r\n      <gve-snapshot-rendition #rendition class=\"rendition\">\r\n      </gve-snapshot-rendition>\r\n    </div>\r\n  }\r\n\r\n  <!--buttons -->\r\n  <div class=\"form-row-center\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"mat-warn\"\r\n      mat-flat-button\r\n      matTooltip=\"Discard changes\"\r\n      (click)=\"close()\"\r\n    >\r\n      <mat-icon>clear</mat-icon>\r\n      close\r\n    </button>\r\n    @if (!noSave()) {\r\n      <button\r\n        type=\"submit\"\r\n        class=\"mat-primary\"\r\n        mat-flat-button\r\n        matTooltip=\"Save changes\"\r\n        [disabled]=\"form.invalid\"\r\n      >\r\n        <mat-icon>check_circle</mat-icon>\r\n        save\r\n      </button>\r\n    }\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row-center{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}.form-row,.form-row-center *{flex:0 0 auto}.form-row .right{margin-left:auto}.button-row{display:flex;align-items:center;flex-wrap:wrap}.button-row *{flex:0 0 auto}.long-text{width:100%;max-width:800px}.margin-bottom{margin-bottom:8px}#text-range{margin:8px;border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;padding:6px}mat-expansion-panel{margin:8px 0}div#visual-info{font-size:95%;color:var(--mat-sys-on-surface-variant);margin:8px}#result{max-height:800px;overflow:auto}#snapshot-container{margin-top:6px}#list{margin:8px 0}#opStyle{margin-top:8px}table{width:100%;border-collapse:collapse;color:var(--mat-sys-on-surface-variant)}tbody tr:nth-child(odd){background-color:var(--mat-sys-surface-container)}th{text-align:left;font-weight:400;color:var(--mat-sys-on-surface-variant)}tbody tr:hover{background-color:var(--mat-sys-surface-container-high)}td.fit-width{width:1px;white-space:nowrap}tbody tr.feat-editing{background-color:var(--mat-sys-tertiary-container);color:var(--mat-sys-on-tertiary-container)}tbody tr.selected{background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container)}fieldset{border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;padding:8px;margin:8px 0}legend{color:var(--mat-sys-on-surface-variant)}.error{color:var(--mat-sys-error)}.input-nr{width:6em}.full-width{width:100%}.code{font-family:Courier New,Courier,monospace}.boxed{border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;padding:8px;margin:8px 0}span.label{margin-left:8px}.feature{color:var(--mat-sys-on-surface-variant)}.fname{font-size:.9em;color:var(--mat-sys-on-surface-variant)}.fvalue{font-size:.9em;color:var(--mat-sys-on-surface-variant);background-color:var(--mat-sys-surface-container);padding:2px 4px;border-radius:4px}gve-animation-timeline-set{margin:8px 0}div#image{display:grid;gap:8px;grid-template-rows:auto;grid-template-columns:1fr auto;grid-template-areas:\"image-ctl image-view\"}div#image-ctl{grid-area:image-ctl}div#image-view{grid-area:image-view}div#chain-view{margin-bottom:8px}#preview{margin:8px 0}.rendition{display:block;width:100%;min-height:600px;max-height:80vh;border:1px solid var(--mat-sys-on-surface-variant);overflow:auto}@media only screen and (max-width:959px){div#image{grid-template-columns:1fr;grid-template-areas:\"image-ctl\" \"image-view\"}}\n"] }]
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <mat-tab-group>\r\n    <!-- text -->\r\n    <mat-tab>\r\n      <ng-template mat-tab-label>\r\n        <mat-icon>article</mat-icon> <span class=\"label\">text</span>\r\n      </ng-template>\r\n      <mat-expansion-panel>\r\n        <mat-expansion-panel-header>\r\n          <mat-panel-title> base text </mat-panel-title>\r\n        </mat-expansion-panel-header>\r\n        <!-- base text -->\r\n        <div class=\"form-row\">\r\n          <button\r\n            type=\"button\"\r\n            mat-flat-button\r\n            color=\"mat-warn\"\r\n            matTooltip=\"Enter base text\"\r\n            (click)=\"inputBaseText()\"\r\n            [disabled]=\"busy()\"\r\n          >\r\n            <mat-icon>edit</mat-icon> base text\r\n          </button>\r\n\r\n          @if (textRange()) {\r\n            <span id=\"text-range\"\r\n              >{{ textRange()!.at }}\u00D7{{ textRange()!.run }}</span\r\n            >\r\n          }\r\n        </div>\r\n\r\n        <!-- text characters -->\r\n        <gve-base-text-view\r\n          [text]=\"baseText.value\"\r\n          [hasLineNumber]=\"true\"\r\n          (rangePick)=\"onRangePick($event)\"\r\n        />\r\n      </mat-expansion-panel>\r\n    </mat-tab>\r\n\r\n    <!-- operations -->\r\n    <mat-tab>\r\n      <ng-template mat-tab-label>\r\n        <mat-icon>edit</mat-icon> <span class=\"label\">operations</span>\r\n      </ng-template>\r\n\r\n      <div id=\"snapshot-container\">\r\n        <div id=\"general\">\r\n          <div class=\"form-row\">\r\n            <!-- feat details -->\r\n            <mat-slide-toggle\r\n              [formControl]=\"featDetails\"\r\n              matTooltip=\"Toggle feature details\"\r\n              >feat. details</mat-slide-toggle\r\n            >\r\n            <!-- auto run on edit -->\r\n            <mat-slide-toggle\r\n              [formControl]=\"autoRun\"\r\n              matTooltip=\"Auto-run operations on edit\"\r\n              >auto-run</mat-slide-toggle\r\n            >\r\n\r\n            <div class=\"form-row right\">\r\n              <!-- copy ops DSL -->\r\n              <button\r\n                type=\"button\"\r\n                mat-icon-button\r\n                matTooltip=\"Copy operations as DSL to clipboard\"\r\n                [disabled]=\"!operations.value.length || busy()\"\r\n                (click)=\"copyOperationsDsl()\"\r\n              >\r\n                <mat-icon>content_copy</mat-icon>\r\n              </button>\r\n\r\n              <!-- copy base text and operations JSON -->\r\n              <button\r\n                type=\"button\"\r\n                mat-icon-button\r\n                matTooltip=\"Copy text and operations as JSON to clipboard\"\r\n                [disabled]=\"\r\n                  (!baseText.value && !operations.value.length) || busy()\r\n                \"\r\n                (click)=\"copyOperationsJson()\"\r\n              >\r\n                <mat-icon>copy_all</mat-icon>\r\n              </button>\r\n\r\n              <!-- remove ops -->\r\n              <button\r\n                type=\"button\"\r\n                class=\"mat-warn\"\r\n                mat-flat-button\r\n                matTooltip=\"Remove all the operations\"\r\n                [disabled]=\"!operations.value.length || busy()\"\r\n                (click)=\"clearOperations()\"\r\n              >\r\n                <mat-icon>delete_forever</mat-icon> clear\r\n              </button>\r\n\r\n              <!-- batch add ops -->\r\n              <button\r\n                type=\"button\"\r\n                mat-flat-button\r\n                matTooltip=\"Add a batch of operations\"\r\n                class=\"mat-primary\"\r\n                [disabled]=\"busy()\"\r\n                (click)=\"parseOperations()\"\r\n              >\r\n                <mat-icon>post_add</mat-icon> batch\r\n              </button>\r\n\r\n              <!-- edit operations feats/sources -->\r\n              <form\r\n                (submit)=\"editOperationsFeats()\"\r\n                [formGroup]=\"editFeatsForm\"\r\n              >\r\n                <mat-form-field>\r\n                  <mat-label>operations (e.g. 2, 5-7, 9)</mat-label>\r\n                  <input matInput [formControl]=\"editFeatsRange\" />\r\n                  @if (\r\n                    $any(editFeatsRange).errors?.required &&\r\n                    (editFeatsRange.dirty || editFeatsRange.touched)\r\n                  ) {\r\n                    <mat-error>range required</mat-error>\r\n                  }\r\n                  @if (\r\n                    $any(editFeatsRange).errors?.pattern &&\r\n                    (editFeatsRange.dirty || editFeatsRange.touched)\r\n                  ) {\r\n                    <mat-error>invalid range (use e.g. 2, 5-7, 9)</mat-error>\r\n                  }\r\n                  <button\r\n                    type=\"button\"\r\n                    matIconButton\r\n                    matSuffix\r\n                    matTooltip=\"Edit sources for range\"\r\n                    (click)=\"editOperationSources()\"\r\n                  >\r\n                    <mat-icon>people</mat-icon>\r\n                  </button>\r\n                  <button\r\n                    type=\"submit\"\r\n                    matIconButton\r\n                    matSuffix\r\n                    matTooltip=\"Edit features for range\"\r\n                  >\r\n                    <mat-icon>edit_note</mat-icon>\r\n                  </button>\r\n                </mat-form-field>\r\n              </form>\r\n\r\n              <!-- add op -->\r\n              <button\r\n                type=\"button\"\r\n                mat-flat-button\r\n                class=\"mat-primary\"\r\n                [disabled]=\"busy() || !baseText.value\"\r\n                (click)=\"editNewOperation()\"\r\n                matTooltip=\"Add a new operation\"\r\n              >\r\n                <mat-icon>add_circle</mat-icon> operation\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- feature set editor -->\r\n        @if (operationFeats() !== undefined) {\r\n          <mat-expansion-panel #featsEditorPanel [expanded]=\"true\">\r\n            <mat-expansion-panel-header>\r\n              <mat-panel-title>\r\n                Features of {{ batchRangeLabel() }}\r\n              </mat-panel-title>\r\n            </mat-expansion-panel-header>\r\n            <fieldset>\r\n              <gve-feature-set-editor\r\n                [batchMode]=\"true\"\r\n                [features]=\"operationFeats() || []\"\r\n                [isVar]=\"true\"\r\n                [featNames]=\"$safeNavigationMigration(featureDefs()?.names)\"\r\n                [featValues]=\"$safeNavigationMigration(featureDefs()?.values)\"\r\n                [featProps]=\"$safeNavigationMigration(featureDefs()?.props)\"\r\n                [multiValuedFeatureIds]=\"multiValuedFeatureIds()\"\r\n                (close)=\"closeOperationFeats()\"\r\n                (featuresChange)=\"saveOperationsFeats($event)\"\r\n              />\r\n            </fieldset>\r\n          </mat-expansion-panel>\r\n        }\r\n\r\n        <!-- operation source editor -->\r\n        @if (batchForSource() && batchOpNumbers()?.length) {\r\n          <mat-expansion-panel #sourcesEditorPanel [expanded]=\"true\">\r\n            <mat-expansion-panel-header>\r\n              <mat-panel-title>\r\n                Sources of {{ batchRangeLabel() }}\r\n              </mat-panel-title>\r\n            </mat-expansion-panel-header>\r\n            <fieldset>\r\n              <gve-operation-source-editor\r\n                [ids]=\"sourceIds()\"\r\n                [types]=\"sourceTypes()\"\r\n                (sourceCancel)=\"closeOperationSources()\"\r\n                (sourceChange)=\"saveOperationSources($event)\"\r\n              />\r\n            </fieldset>\r\n          </mat-expansion-panel>\r\n        }\r\n\r\n        <!-- operation editor -->\r\n        @if (editedOp()) {\r\n          <mat-expansion-panel\r\n            #operationEditorPanel\r\n            [expanded]=\"editedOp()\"\r\n            [disabled]=\"!editedOp()\"\r\n          >\r\n            <mat-expansion-panel-header>\r\n              <mat-panel-title>operation {{ editedOp()?.id }}</mat-panel-title>\r\n            </mat-expansion-panel-header>\r\n            <fieldset>\r\n              <gve-chain-operation-editor\r\n                [featureDefs]=\"featureDefs()\"\r\n                [multiValuedFeatureIds]=\"multiValuedFeatureIds()\"\r\n                [hidePreview]=\"editedOpIndex() === -1\"\r\n                [operation]=\"editedOp()\"\r\n                [rangePatch]=\"editedOpRangePatch()\"\r\n                [sourceIds]=\"sourceIds()\"\r\n                [sourceTypes]=\"sourceTypes()\"\r\n                (operationCancel)=\"onOperationCancel()\"\r\n                (operationChange)=\"onOperationChange($event)\"\r\n                (operationPreview)=\"onOperationPreview($event)\"\r\n              />\r\n            </fieldset>\r\n          </mat-expansion-panel>\r\n        }\r\n\r\n        <!-- ops -->\r\n        <div\r\n          id=\"ops\"\r\n          [style.max-height]=\"opListMaxHeight()\"\r\n          [style.overflow-y]=\"opListMaxHeight() ? 'auto' : null\"\r\n        >\r\n          <!-- operations list -->\r\n          @if (operations.value.length) {\r\n            <table id=\"list\">\r\n              <thead>\r\n                <tr>\r\n                  <th>nr.</th>\r\n                  <th></th>\r\n                  <th>ID</th>\r\n                  <th>type</th>\r\n                  <th>at</th>\r\n                  <th>run</th>\r\n                  <th>value</th>\r\n                  <th>itag</th>\r\n                  <th>otag</th>\r\n                  <th>gid</th>\r\n                  <th>feats</th>\r\n                  <th>src</th>\r\n                </tr>\r\n              </thead>\r\n              <tbody>\r\n                @for (\r\n                  operation of operations.value;\r\n                  track operation.id;\r\n                  let index = $index\r\n                ) {\r\n                  <tr\r\n                    [class.selected]=\"operation.id === editedOp()?.id\"\r\n                    [class.feat-editing]=\"batchOpNumbers()?.includes(index + 1)\"\r\n                  >\r\n                    <td class=\"fit-width\">{{ index + 1 }}.</td>\r\n                    <td class=\"fit-width\">\r\n                      <!-- edit -->\r\n                      <button\r\n                        type=\"button\"\r\n                        mat-icon-button\r\n                        class=\"mat-primary\"\r\n                        (click)=\"editOperation(index)\"\r\n                        matTooltip=\"Edit operation\"\r\n                      >\r\n                        <mat-icon>edit</mat-icon>\r\n                      </button>\r\n                      <!-- delete -->\r\n                      <button\r\n                        type=\"button\"\r\n                        mat-icon-button\r\n                        class=\"mat-warn\"\r\n                        (click)=\"deleteOperation(index)\"\r\n                        matTooltip=\"Delete operation\"\r\n                      >\r\n                        <mat-icon class=\"mat-warn\">delete</mat-icon>\r\n                      </button>\r\n                      <!-- run to -->\r\n                      <button\r\n                        type=\"button\"\r\n                        mat-icon-button\r\n                        class=\"mat-accent\"\r\n                        (click)=\"runTo(index)\"\r\n                        matTooltip=\"Run to this operation\"\r\n                      >\r\n                        <mat-icon class=\"mat-accent\">subscriptions</mat-icon>\r\n                      </button>\r\n                      <!-- duplicate -->\r\n                      <button\r\n                        type=\"button\"\r\n                        mat-icon-button\r\n                        (click)=\"duplicateOperation(index)\"\r\n                        matTooltip=\"Duplicate operation\"\r\n                      >\r\n                        <mat-icon>control_point_duplicate</mat-icon>\r\n                      </button>\r\n                      <!-- move up -->\r\n                      <button\r\n                        type=\"button\"\r\n                        mat-icon-button\r\n                        (click)=\"moveOperationUp(index)\"\r\n                        matTooltip=\"Move operation up\"\r\n                        [disabled]=\"index === 0\"\r\n                      >\r\n                        <mat-icon>arrow_circle_up</mat-icon>\r\n                      </button>\r\n                      <!-- move down -->\r\n                      <button\r\n                        type=\"button\"\r\n                        mat-icon-button\r\n                        (click)=\"moveOperationDown(index)\"\r\n                        matTooltip=\"Move operation down\"\r\n                        [disabled]=\"index === operations.value.length - 1\"\r\n                      >\r\n                        <mat-icon>arrow_circle_down</mat-icon>\r\n                      </button>\r\n                    </td>\r\n                    <td>{{ operation.id }}</td>\r\n                    <td>{{ operation.type | flatLookup: opTypeMap }}</td>\r\n                    <td>{{ operation.at }}</td>\r\n                    <td>{{ operation.run }}</td>\r\n                    <td>{{ operation.value }}</td>\r\n                    <td>{{ operation.inputTag }}</td>\r\n                    <td>{{ operation.outputTag }}</td>\r\n                    <td>{{ operation.groupId }}</td>\r\n                    <td>\r\n                      @if (operation.features?.length) {\r\n                        @if (featDetails.value) {\r\n                          <div class=\"form-row\">\r\n                            @for (\r\n                              feat of operation.features;\r\n                              track $index;\r\n                              let i = $index\r\n                            ) {\r\n                              <div class=\"feature\">\r\n                                <span class=\"fname\">{{\r\n                                  feat.name\r\n                                    | flatLookup\r\n                                      : $safeNavigationMigration(featureDefs()?.names)\r\n                                      : \"id\"\r\n                                      : \"label\"\r\n                                }}</span\r\n                                >=<span class=\"fvalue\">{{\r\n                                  feat.value\r\n                                    | flatLookup\r\n                                      : $safeNavigationMigration(featureDefs()?.values?.[feat.name])\r\n                                      : \"id\"\r\n                                      : \"label\"\r\n                                }}</span>\r\n                              </div>\r\n                            }\r\n                          </div>\r\n                        } @else {\r\n                          <!-- version badge -->\r\n                          @if (\r\n                            operation.features?.some(f => f.name === 'version')\r\n                          ) {\r\n                            <span\r\n                              matBadge=\"{{ operation.features?.find(f => f.name === 'version')?.value }}\"\r\n                              matBadgeOverlap=\"false\"\r\n                              >{{ operation.features?.length }}</span\r\n                            >\r\n                          }\r\n                        }\r\n                      }\r\n                    </td>\r\n                    <td>{{ operation.sources?.length || \"\" }}</td>\r\n                  </tr>\r\n                }\r\n              </tbody>\r\n            </table>\r\n          }\r\n        </div>\r\n      </div>\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n\r\n  <!-- progress -->\r\n  <div class=\"margin-bottom\">\r\n    @if (busy()) {\r\n      <mat-progress-bar mode=\"indeterminate\" />\r\n    }\r\n  </div>\r\n\r\n  <!-- result -->\r\n  @if (result()) {\r\n    <fieldset id=\"result\">\r\n      <legend>result</legend>\r\n      <gve-chain-result-view\r\n        [result]=\"result()!\"\r\n        [initialStepIndex]=\"initialStepIndex()\"\r\n        [disabledRangePick]=\"editedOp() ? false : true\"\r\n        (stepPick)=\"onStepPick($event)\"\r\n        (rangePick)=\"onRangePick($event, true)\"\r\n      />\r\n    </fieldset>\r\n  }\r\n\r\n  <!-- snapshot view -->\r\n  @if (result()) {\r\n    <div id=\"preview\">\r\n      <gve-snapshot-rendition #rendition class=\"rendition\">\r\n      </gve-snapshot-rendition>\r\n    </div>\r\n  }\r\n\r\n  <!--buttons -->\r\n  <div class=\"form-row-center\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"mat-warn\"\r\n      mat-flat-button\r\n      matTooltip=\"Discard changes\"\r\n      (click)=\"close()\"\r\n    >\r\n      <mat-icon>clear</mat-icon>\r\n      close\r\n    </button>\r\n    @if (!noSave()) {\r\n      <button\r\n        type=\"submit\"\r\n        class=\"mat-primary\"\r\n        mat-flat-button\r\n        matTooltip=\"Save changes\"\r\n        [disabled]=\"form.invalid\"\r\n      >\r\n        <mat-icon>check_circle</mat-icon>\r\n        save\r\n      </button>\r\n    }\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row-center{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}.form-row,.form-row-center *{flex:0 0 auto}.form-row .right{margin-left:auto}.button-row{display:flex;align-items:center;flex-wrap:wrap}.button-row *{flex:0 0 auto}.long-text{width:100%;max-width:800px}.margin-bottom{margin-bottom:8px}#text-range{margin:8px;border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;padding:6px}mat-expansion-panel{margin:8px 0}div#visual-info{font-size:95%;color:var(--mat-sys-on-surface-variant);margin:8px}#result{max-height:800px;overflow:auto}#snapshot-container{margin-top:6px}#list{margin:8px 0}#opStyle{margin-top:8px}table{width:100%;border-collapse:collapse;color:var(--mat-sys-on-surface-variant)}tbody tr:nth-child(odd){background-color:var(--mat-sys-surface-container)}th{text-align:left;font-weight:400;color:var(--mat-sys-on-surface-variant)}tbody tr:hover{background-color:var(--mat-sys-surface-container-high)}td.fit-width{width:1px;white-space:nowrap}tbody tr.feat-editing{background-color:var(--mat-sys-tertiary-container);color:var(--mat-sys-on-tertiary-container)}tbody tr.selected{background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container)}fieldset{border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;padding:8px;margin:8px 0}legend{color:var(--mat-sys-on-surface-variant)}.error{color:var(--mat-sys-error)}.input-nr{width:6em}.full-width{width:100%}.code{font-family:Courier New,Courier,monospace}.boxed{border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;padding:8px;margin:8px 0}span.label{margin-left:8px}.feature{color:var(--mat-sys-on-surface-variant)}.fname{font-size:.9em;color:var(--mat-sys-on-surface-variant)}.fvalue{font-size:.9em;color:var(--mat-sys-on-surface-variant);background-color:var(--mat-sys-surface-container);padding:2px 4px;border-radius:4px}gve-animation-timeline-set{margin:8px 0}div#image{display:grid;gap:8px;grid-template-rows:auto;grid-template-columns:1fr auto;grid-template-areas:\"image-ctl image-view\"}div#image-ctl{grid-area:image-ctl}div#image-view{grid-area:image-view}div#chain-view{margin-bottom:8px}#preview{margin:8px 0}.rendition{display:block;width:100%;min-height:600px;max-height:80vh;border:1px solid var(--mat-sys-on-surface-variant);overflow:auto}@media only screen and (max-width:959px){div#image{grid-template-columns:1fr;grid-template-areas:\"image-ctl\" \"image-view\"}}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: GveApiService }, { type: i3$3.MatDialog }, { type: i2$1.DialogService }, { type: i2$3.MatSnackBar }], propDecorators: { renditionRef: [{ type: i0.ViewChild, args: ['rendition', { isSignal: true }] }], operationEditorPanelRef: [{ type: i0.ViewChild, args: ['operationEditorPanel', { isSignal: true }] }], snapshot: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapshot", required: false }] }, { type: i0.Output, args: ["snapshotChange"] }], batchOps: [{ type: i0.Input, args: [{ isSignal: true, alias: "batchOps", required: false }] }], noSave: [{ type: i0.Input, args: [{ isSignal: true, alias: "noSave", required: false }] }], debug: [{ type: i0.Input, args: [{ isSignal: true, alias: "debug", required: false }] }], noDecoration: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDecoration", required: false }] }], featureDefs: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureDefs", required: false }] }], multiValuedFeatureIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiValuedFeatureIds", required: false }] }], sourceIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceIds", required: false }] }], sourceTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceTypes", required: false }] }], renditionSettings: [{ type: i0.Input, args: [{ isSignal: true, alias: "renditionSettings", required: false }] }], opListMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "opListMaxHeight", required: false }] }], snapshotCancel: [{ type: i0.Output, args: ["snapshotCancel"] }] } });
 
 class GveGraphvizService {
@@ -3594,10 +3744,10 @@ class GveGraphvizService {
         sb.push('}');
         return sb.join('\n');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: GveGraphvizService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: GveGraphvizService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: GveGraphvizService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: GveGraphvizService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: GveGraphvizService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: GveGraphvizService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -3786,10 +3936,10 @@ class SettingsService {
         // for when the cache was not in sync with the local storage
         removedKeys.forEach((key) => this._subject.next(key));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SettingsService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SettingsService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SettingsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SettingsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',