@myrmidon/gve-core 7.0.14 → 7.0.15

package/fesm2022/myrmidon-gve-core.mjs

@@ -3,7 +3,7 @@ import { input, output, ChangeDetectionStrategy, Component, inject, DestroyRef,
 import * as i1 from '@angular/material/core';
 import { MatRippleModule } from '@angular/material/core';
 import * as i2$2 from '@myrmidon/ngx-tools';
-import { ColorToContrastPipe, FlatLookupPipe, NgxToolsValidators } from '@myrmidon/ngx-tools';
+import { ColorToContrastPipe, FlatLookupPipe, NgxToolsValidators, EnvService } from '@myrmidon/ngx-tools';
 import * as i1$1 from '@angular/forms';
 import { FormsModule, Validators, ReactiveFormsModule, FormControl, FormGroup } from '@angular/forms';
 import * as i2 from '@angular/material/button';
@@ -2016,6 +2016,8 @@ class ChainOperationEditorComponent {
         ...(ngDevMode ? [{ debugName: "editedSource" }] : /* istanbul ignore next */ []));
         this.editedSourceIndex = signal(-1, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "editedSourceIndex" }] : /* istanbul ignore next */ []));
+        this.peepholeWindowWidth = input(15, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "peepholeWindowWidth" }] : /* istanbul ignore next */ []));
         // peephole preview of the operation's input text, tracking the
         // at/run/atAsIndex form values
         this.peepholeRange = signal({
@@ -2303,7 +2305,7 @@ class ChainOperationEditorComponent {
         this.operation.set(this.getOperation());
     }
     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 }, precedingText: { classPropertyName: "precedingText", publicName: "precedingText", 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        <!-- peephole: preview of the text targeted by at/run -->\r\n        <gve-base-text-peephole\r\n          class=\"op-peephole\"\r\n          [text]=\"peepholeText()\"\r\n          [selectedRange]=\"peepholeRange()\"\r\n          [windowWidth]=\"12\"\r\n          [emSize]=\"0.9\"\r\n        />\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}.op-peephole{width:420px}.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: "component", type: BaseTextPeepholeComponent, selector: "gve-base-text-peephole", inputs: ["windowWidth", "emSize", "text", "selectedRange"] }, { kind: "pipe", type: FlatLookupPipe, name: "flatLookup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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 }, precedingText: { classPropertyName: "precedingText", publicName: "precedingText", 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 }, peepholeWindowWidth: { classPropertyName: "peepholeWindowWidth", publicName: "peepholeWindowWidth", 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        <!-- peephole: preview of the text targeted by at/run -->\r\n        <gve-base-text-peephole\r\n          class=\"op-peephole\"\r\n          [text]=\"peepholeText()\"\r\n          [selectedRange]=\"peepholeRange()\"\r\n          [windowWidth]=\"peepholeWindowWidth()\"\r\n          [emSize]=\"0.9\"\r\n        />\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}.op-peephole{width:420px}.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: "component", type: BaseTextPeepholeComponent, selector: "gve-base-text-peephole", inputs: ["windowWidth", "emSize", "text", "selectedRange"] }, { kind: "pipe", type: FlatLookupPipe, name: "flatLookup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ChainOperationEditorComponent, decorators: [{
             type: Component,
@@ -2324,8 +2326,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         OperationSourceEditorComponent,
                         BaseTextPeepholeComponent,
                         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        <!-- peephole: preview of the text targeted by at/run -->\r\n        <gve-base-text-peephole\r\n          class=\"op-peephole\"\r\n          [text]=\"peepholeText()\"\r\n          [selectedRange]=\"peepholeRange()\"\r\n          [windowWidth]=\"12\"\r\n          [emSize]=\"0.9\"\r\n        />\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}.op-peephole{width:420px}.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 }] }], precedingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "precedingText", 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"] }] } });
+                    ], 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        <!-- peephole: preview of the text targeted by at/run -->\r\n        <gve-base-text-peephole\r\n          class=\"op-peephole\"\r\n          [text]=\"peepholeText()\"\r\n          [selectedRange]=\"peepholeRange()\"\r\n          [windowWidth]=\"peepholeWindowWidth()\"\r\n          [emSize]=\"0.9\"\r\n        />\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}.op-peephole{width:420px}.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 }] }], precedingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "precedingText", 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"] }], peepholeWindowWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "peepholeWindowWidth", required: false }] }] } });
 
 /**
  * 🔑 `gve-feature-set-view`
@@ -3094,6 +3096,8 @@ class SnapshotEditorComponent {
         // true when the batch editing targets sources instead of features
         this.batchForSource = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "batchForSource" }] : /* istanbul ignore next */ []));
+        this.peepholeWindowWidth = signal(15, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "peepholeWindowWidth" }] : /* istanbul ignore next */ []));
         // base text
         this.baseText = new FormControl([], {
             nonNullable: true,
@@ -3103,6 +3107,10 @@ class SnapshotEditorComponent {
         this.operations = new FormControl([], {
             nonNullable: true,
         });
+        // set the peephole window width from the environment variable,
+        // defaulting to 15 if not set
+        const env = inject(EnvService);
+        this.peepholeWindowWidth.set(parseInt(env.get('gvePeeperWidth', '15'), 10));
         // form
         this.form = formBuilder.group({
             baseText: this.baseText,
@@ -3869,7 +3877,7 @@ class SnapshotEditorComponent {
         this.snapshot.set(this.getSnapshot());
     }
     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\r\n                >operation {{ editedOpIndex() + 1 }}:\r\n                {{ editedOp()?.id }}</mat-panel-title\r\n              >\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                [snapshot]=\"{ text: baseText.value, operations: operations.value }\"\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>feats</th>\r\n                  @if (!featDetails.value) {\r\n                    <th>itag</th>\r\n                    <th>otag</th>\r\n                  }\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                    @if (!featDetails.value) {\r\n                      <td>{{ operation.inputTag }}</td>\r\n                      <td>{{ operation.outputTag }}</td>\r\n                    }\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(\r\n                                          featureDefs()?.names\r\n                                        )\r\n                                      : \"id\"\r\n                                      : \"label\"\r\n                                }}</span\r\n                                >=<span class=\"fvalue\">{{\r\n                                  feat.value\r\n                                    | flatLookup\r\n                                      : $safeNavigationMigration(\r\n                                          featureDefs()?.values?.[feat.name]\r\n                                        )\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      [disabled]=\"busy()\"\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 || busy()\"\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}#list th,td{border-right:1px solid var(--mat-sys-outline-variant)}#list th:last-child,#list td:last-child{border-right:none}#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", "precedingText", "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.ɵ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\r\n                >operation {{ editedOpIndex() + 1 }}:\r\n                {{ editedOp()?.id }}</mat-panel-title\r\n              >\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                [snapshot]=\"{ text: baseText.value, operations: operations.value }\"\r\n                [sourceIds]=\"sourceIds()\"\r\n                [sourceTypes]=\"sourceTypes()\"\r\n                [peepholeWindowWidth]=\"peepholeWindowWidth()\"\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                  @if (!featDetails.value) {\r\n                    <th>itag</th>\r\n                    <th>otag</th>\r\n                  }\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 class=\"fit-width\">{{ operation.id }}</td>\r\n                    <td class=\"fit-width\">{{ operation.type | flatLookup: opTypeMap }}</td>\r\n                    <td class=\"fit-width\">{{ operation.at }}</td>\r\n                    <td class=\"fit-width\">{{ operation.run }}</td>\r\n                    <td class=\"fit-width\">{{ operation.value }}</td>\r\n                    @if (!featDetails.value) {\r\n                      <td class=\"fit-width\">{{ operation.inputTag }}</td>\r\n                      <td class=\"fit-width\">{{ operation.outputTag }}</td>\r\n                    }\r\n                    <td class=\"fit-width\">{{ 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(\r\n                                          featureDefs()?.names\r\n                                        )\r\n                                      : \"id\"\r\n                                      : \"label\"\r\n                                }}</span\r\n                                >=<span class=\"fvalue\">{{\r\n                                  feat.value\r\n                                    | flatLookup\r\n                                      : $safeNavigationMigration(\r\n                                          featureDefs()?.values?.[feat.name]\r\n                                        )\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 class=\"fit-width\">{{ 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      [disabled]=\"busy()\"\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 || busy()\"\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}#list th,td{border-right:1px solid var(--mat-sys-outline-variant);padding:0 4px}#list th:last-child,#list td:last-child{border-right:none}#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", "precedingText", "multiValuedFeatureIds", "sourceIds", "sourceTypes", "peepholeWindowWidth"], 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: "22.0.1", ngImport: i0, type: SnapshotEditorComponent, decorators: [{
             type: Component,
@@ -3897,7 +3905,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         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]=\"$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\r\n                >operation {{ editedOpIndex() + 1 }}:\r\n                {{ editedOp()?.id }}</mat-panel-title\r\n              >\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                [snapshot]=\"{ text: baseText.value, operations: operations.value }\"\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>feats</th>\r\n                  @if (!featDetails.value) {\r\n                    <th>itag</th>\r\n                    <th>otag</th>\r\n                  }\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                    @if (!featDetails.value) {\r\n                      <td>{{ operation.inputTag }}</td>\r\n                      <td>{{ operation.outputTag }}</td>\r\n                    }\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(\r\n                                          featureDefs()?.names\r\n                                        )\r\n                                      : \"id\"\r\n                                      : \"label\"\r\n                                }}</span\r\n                                >=<span class=\"fvalue\">{{\r\n                                  feat.value\r\n                                    | flatLookup\r\n                                      : $safeNavigationMigration(\r\n                                          featureDefs()?.values?.[feat.name]\r\n                                        )\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      [disabled]=\"busy()\"\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 || busy()\"\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}#list th,td{border-right:1px solid var(--mat-sys-outline-variant)}#list th:last-child,#list td:last-child{border-right:none}#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\r\n                >operation {{ editedOpIndex() + 1 }}:\r\n                {{ editedOp()?.id }}</mat-panel-title\r\n              >\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                [snapshot]=\"{ text: baseText.value, operations: operations.value }\"\r\n                [sourceIds]=\"sourceIds()\"\r\n                [sourceTypes]=\"sourceTypes()\"\r\n                [peepholeWindowWidth]=\"peepholeWindowWidth()\"\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                  @if (!featDetails.value) {\r\n                    <th>itag</th>\r\n                    <th>otag</th>\r\n                  }\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 class=\"fit-width\">{{ operation.id }}</td>\r\n                    <td class=\"fit-width\">{{ operation.type | flatLookup: opTypeMap }}</td>\r\n                    <td class=\"fit-width\">{{ operation.at }}</td>\r\n                    <td class=\"fit-width\">{{ operation.run }}</td>\r\n                    <td class=\"fit-width\">{{ operation.value }}</td>\r\n                    @if (!featDetails.value) {\r\n                      <td class=\"fit-width\">{{ operation.inputTag }}</td>\r\n                      <td class=\"fit-width\">{{ operation.outputTag }}</td>\r\n                    }\r\n                    <td class=\"fit-width\">{{ 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(\r\n                                          featureDefs()?.names\r\n                                        )\r\n                                      : \"id\"\r\n                                      : \"label\"\r\n                                }}</span\r\n                                >=<span class=\"fvalue\">{{\r\n                                  feat.value\r\n                                    | flatLookup\r\n                                      : $safeNavigationMigration(\r\n                                          featureDefs()?.values?.[feat.name]\r\n                                        )\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 class=\"fit-width\">{{ 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      [disabled]=\"busy()\"\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 || busy()\"\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}#list th,td{border-right:1px solid var(--mat-sys-outline-variant);padding:0 4px}#list th:last-child,#list td:last-child{border-right:none}#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 {