@myrmidon/gve-core 7.0.9 → 7.0.10

package/fesm2022/myrmidon-gve-core.mjs

@@ -1703,10 +1703,6 @@ class ChainOperationEditorComponent {
          * The list of source types when it's a closed set.
          */
         this.sourceTypes = input(...(ngDevMode ? [undefined, { debugName: "sourceTypes" }] : /* istanbul ignore next */ []));
-        /**
-         * Emitted when the operation is changed.
-         */
-        this.operationChange = output();
         /**
          * Emitted when the operation preview is requested.
          */
@@ -1962,6 +1958,13 @@ class ChainOperationEditorComponent {
             value: this.toggleLfEscape(this.value.value, false) || undefined,
         };
     }
+    deleteSource(index) {
+        const sources = [...this.sources.value];
+        sources.splice(index, 1);
+        this.sources.setValue(sources);
+        this.sources.updateValueAndValidity();
+        this.sources.markAsDirty();
+    }
     requestPreview() {
         this.operationPreview.emit(this.getOperation());
     }
@@ -1970,10 +1973,9 @@ class ChainOperationEditorComponent {
             return;
         }
         this.operation.set(this.getOperation());
-        this.operationChange.emit(this.operation());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ChainOperationEditorComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: ChainOperationEditorComponent, isStandalone: true, selector: "gve-chain-operation-editor", inputs: { operation: { classPropertyName: "operation", publicName: "operation", isSignal: true, isRequired: false, transformFunction: null }, snapshot: { classPropertyName: "snapshot", publicName: "snapshot", isSignal: true, isRequired: false, transformFunction: null }, hidePreview: { classPropertyName: "hidePreview", publicName: "hidePreview", isSignal: true, isRequired: false, transformFunction: null }, featureDefs: { classPropertyName: "featureDefs", publicName: "featureDefs", isSignal: true, isRequired: false, transformFunction: null }, rangePatch: { classPropertyName: "rangePatch", publicName: "rangePatch", isSignal: true, isRequired: false, transformFunction: null }, multiValuedFeatureIds: { classPropertyName: "multiValuedFeatureIds", publicName: "multiValuedFeatureIds", isSignal: true, isRequired: false, transformFunction: null }, sourceIds: { classPropertyName: "sourceIds", publicName: "sourceIds", isSignal: true, isRequired: false, transformFunction: null }, sourceTypes: { classPropertyName: "sourceTypes", publicName: "sourceTypes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { operation: "operationChange", operationChange: "operationChange", operationPreview: "operationPreview", operationCancel: "operationCancel" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <!-- tabs -->\r\n  <mat-tab-group [selectedIndex]=\"tabIndex()\">\r\n    <!-- GENERAL -->\r\n    <mat-tab label=\"general\">\r\n      <div class=\"form-row\">\r\n        <!-- id -->\r\n        <div id=\"id\" class=\"muted\">{{ id() }}</div>\r\n\r\n        <!-- type -->\r\n        <mat-form-field>\r\n          <mat-label>type</mat-label>\r\n          <mat-select [formControl]=\"type\">\r\n            <mat-option [value]=\"7\"\r\n              ><mat-icon>edit_note</mat-icon>annotate</mat-option\r\n            >\r\n            <mat-option [value]=\"0\"\r\n              ><mat-icon>layers</mat-icon> replace</mat-option\r\n            >\r\n            <mat-option [value]=\"1\"\r\n              ><mat-icon>close</mat-icon>delete</mat-option\r\n            >\r\n            <mat-option [value]=\"2\"\r\n              ><mat-icon>last_page</mat-icon>add-before</mat-option\r\n            >\r\n            <mat-option [value]=\"3\"\r\n              ><mat-icon>first_page</mat-icon>add-after</mat-option\r\n            >\r\n            <mat-option [value]=\"4\"\r\n              ><mat-icon>login</mat-icon>move-before</mat-option\r\n            >\r\n            <mat-option [value]=\"5\"\r\n              ><mat-icon>logout</mat-icon>move-after</mat-option\r\n            >\r\n            <mat-option [value]=\"6\"\r\n              ><mat-icon>compare_arrows</mat-icon>swap</mat-option\r\n            >\r\n          </mat-select>\r\n          @if ($any(type).errors?.required && (type.dirty || type.touched)) {\r\n            <mat-error>type required</mat-error>\r\n          }\r\n        </mat-form-field>\r\n\r\n        <!-- at -->\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>at</mat-label>\r\n          <input matInput [formControl]=\"at\" type=\"number\" min=\"0\" />\r\n          @if ($any(at).errors?.required && (at.dirty || at.touched)) {\r\n            <mat-error>at required</mat-error>\r\n          }\r\n          @if ($any(at).errors?.min && (at.dirty || at.touched)) {\r\n            <mat-error>at must be at least 0</mat-error>\r\n          }\r\n        </mat-form-field>\r\n\r\n        <!-- atAsIndex -->\r\n        <mat-checkbox [formControl]=\"atAsIndex\">idx</mat-checkbox>\r\n\r\n        <!-- run -->\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>run</mat-label>\r\n          <input matInput [formControl]=\"run\" type=\"number\" min=\"0\" />\r\n          @if ($any(run).errors?.required && (run.dirty || run.touched)) {\r\n            <mat-error>run required</mat-error>\r\n          }\r\n        </mat-form-field>\r\n\r\n        <!-- to -->\r\n        @if (hasTo()) {\r\n          <mat-form-field class=\"nr\">\r\n            <mat-label>to</mat-label>\r\n            <input matInput [formControl]=\"to\" type=\"number\" min=\"0\" />\r\n            @if ($any(to).errors?.required && (to.dirty || to.touched)) {\r\n              <mat-error>to required</mat-error>\r\n            }\r\n          </mat-form-field>\r\n\r\n          <!-- toAsIndex -->\r\n          <mat-checkbox [formControl]=\"toAsIndex\">idx</mat-checkbox>\r\n\r\n          <!-- toRun -->\r\n          @if (hasToRun()) {\r\n            <mat-form-field class=\"nr\">\r\n              <mat-label>to run</mat-label>\r\n              <input matInput [formControl]=\"toRun\" type=\"number\" min=\"0\" />\r\n              @if (\r\n                $any(toRun).errors?.required && (toRun.dirty || toRun.touched)\r\n              ) {\r\n                <mat-error>to run required</mat-error>\r\n              }\r\n            </mat-form-field>\r\n          }\r\n        }\r\n\r\n        <!-- value -->\r\n        @if (hasValue()) {\r\n          <mat-form-field>\r\n            <mat-label>value</mat-label>\r\n            <input matInput [formControl]=\"value\" />\r\n            @if (\r\n              $any(value).errors?.required && (value.dirty || value.touched)\r\n            ) {\r\n              <mat-error>value required</mat-error>\r\n            }\r\n          </mat-form-field>\r\n        }\r\n      </div>\r\n      <div class=\"form-row\">\r\n        <!-- rank -->\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>rank</mat-label>\r\n          <input matInput [formControl]=\"rank\" type=\"number\" min=\"0\" />\r\n          @if ($any(rank).errors?.required && (rank.dirty || rank.touched)) {\r\n            <mat-error>rank required</mat-error>\r\n          }\r\n        </mat-form-field>\r\n\r\n        <!-- groupId -->\r\n        <mat-form-field>\r\n          <mat-label>group ID</mat-label>\r\n          <input matInput [formControl]=\"groupId\" />\r\n          @if (\r\n            $any(groupId).errors?.required && (groupId.dirty || groupId.touched)\r\n          ) {\r\n            <mat-error>group ID required</mat-error>\r\n          }\r\n        </mat-form-field>\r\n\r\n        <!-- inputTag -->\r\n        <mat-form-field>\r\n          <mat-label>input tag</mat-label>\r\n          <input matInput [formControl]=\"inputTag\" />\r\n          <mat-hint>blank=latest</mat-hint>\r\n        </mat-form-field>\r\n\r\n        <!-- outputTag -->\r\n        <mat-form-field>\r\n          <mat-label>output tag</mat-label>\r\n          <input matInput [formControl]=\"outputTag\" />\r\n          <mat-hint>blank=auto (vN)</mat-hint>\r\n        </mat-form-field>\r\n      </div>\r\n      <div>\r\n        <!-- features -->\r\n        <fieldset>\r\n          <legend>operation features</legend>\r\n          <gve-feature-set-editor\r\n            [isVar]=\"true\"\r\n            [featNames]=\"featureDefs()?.names\"\r\n            [featValues]=\"featureDefs()?.values\"\r\n            [featProps]=\"featureDefs()?.props\"\r\n            [features]=\"features.value\"\r\n            [multiValuedFeatureIds]=\"multiValuedFeatureIds()\"\r\n            (featuresChange)=\"onFeaturesChange($event)\"\r\n          />\r\n        </fieldset>\r\n      </div>\r\n    </mat-tab>\r\n\r\n    <!-- SOURCES -->\r\n    <mat-tab label=\"sources\">\r\n      <div>\r\n        <button\r\n          type=\"button\"\r\n          mat-flat-button\r\n          color=\"primary\"\r\n          class=\"mat-primary\"\r\n          (click)=\"addSource()\"\r\n        >\r\n          <mat-icon>add_circle</mat-icon>\r\n          source\r\n        </button>\r\n      </div>\r\n      <table>\r\n        <thead>\r\n          <tr>\r\n            <th></th>\r\n            <th>type</th>\r\n            <th>id</th>\r\n            <th>rank</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (s of sources.value; track s) {\r\n            <tr [class.selected]=\"s === editedSource()\">\r\n              <td class=\"fit-width\">\r\n                <button\r\n                  type=\"button\"\r\n                  mat-icon-button\r\n                  color=\"primary\"\r\n                  (click)=\"editSource($index)\"\r\n                >\r\n                  <mat-icon class=\"mat-primary\">edit</mat-icon>\r\n                </button>\r\n                <button type=\"button\" mat-icon-button color=\"warn\">\r\n                  <mat-icon class=\"mat-warn\">delete</mat-icon>\r\n                </button>\r\n              </td>\r\n              <td>{{ s.type | flatLookup: sourceTypes() : \"id\" : \"label\" }}</td>\r\n              <td>{{ s.id | flatLookup: sourceIds() : \"id\" : \"label\" }}</td>\r\n              <td>{{ s.rank }}</td>\r\n            </tr>\r\n          }\r\n        </tbody>\r\n      </table>\r\n      @if (editedSource()) {\r\n        <!-- source editor -->\r\n        <mat-expansion-panel\r\n          [disabled]=\"!editedSource()\"\r\n          [expanded]=\"editedSource()\"\r\n        >\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>source</mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <gve-operation-source-editor\r\n            [source]=\"editedSource()\"\r\n            [ids]=\"sourceIds()\"\r\n            [types]=\"sourceTypes()\"\r\n            (sourceChange)=\"onSourceChange($event!)\"\r\n            (sourceCancel)=\"closeSource()\"\r\n          />\r\n        </mat-expansion-panel>\r\n      }\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n\r\n  <!-- buttons -->\r\n  <div id=\"submit-row\">\r\n    <button\r\n      type=\"button\"\r\n      color=\"warn\"\r\n      mat-icon-button\r\n      matTooltip=\"Discard operation\"\r\n      (click)=\"cancel()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n    </button>\r\n    @if (!hidePreview()) {\r\n      <button\r\n        type=\"button\"\r\n        color=\"primary\"\r\n        mat-icon-button\r\n        matTooltip=\"Preview operation\"\r\n        (click)=\"requestPreview()\"\r\n      >\r\n        <mat-icon class=\"mat-primary\">preview</mat-icon>\r\n      </button>\r\n    }\r\n    <button\r\n      type=\"submit\"\r\n      color=\"primary\"\r\n      class=\"mat-primary\"\r\n      mat-flat-button\r\n      matTooltip=\"Save operation\"\r\n      [disabled]=\"form.invalid || form.pristine\"\r\n    >\r\n      <mat-icon>check_circle</mat-icon>\r\n      save\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}#submit-row{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:8px;border-top:1px solid var(--mat-sys-on-surface-variant)}.toolbar-row{display:flex;align-items:center;flex-wrap:wrap}.nr{width:6em}.long-text{width:100%;max-width:800px}#id{border-radius:6px;padding:4px;background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container);margin-top:-16px}fieldset{border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;padding:8px;margin:8px 0}legend{color:var(--mat-sys-on-surface-variant)}table{width:100%;border-collapse:collapse;color:var(--mat-sys-on-surface-variant)}tbody tr:nth-child(odd){background-color:var(--mat-sys-surface-container)}th{text-align:left;font-weight:400;color:var(--mat-sys-on-surface-variant)}tbody tr:hover{background-color:var(--mat-sys-surface-container-high)}td.fit-width{width:1px;white-space:nowrap}tbody tr.selected{background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container)}#code{height:500px;border:1px solid var(--mat-sys-on-surface-variant)}#monaco{height:100%}#preview{box-sizing:border-box;width:100%;border:1px solid var(--mat-sys-on-surface-variant);border-radius:4px;padding:8px}.tree-invisible{display:none}.tree ul,.tree li{margin-top:0;margin-bottom:0;list-style-type:none}.selected-node{background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container)}.child-title{font-weight:700;margin:0;background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container);padding:8px}#tree-container{display:grid;grid-template-rows:auto;grid-template-columns:auto 1fr;grid-template-areas:\"nav ed\";gap:0 16px;align-items:stretch}#tree-nav{grid-area:nav;border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;margin:8px 0;padding-right:8px}#tree-ed{grid-area:ed;border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;margin:8px 0}@media only screen and (max-width:959px){div#container{grid-template-columns:1fr;grid-template-areas:\"nav\" \"ed\";gap:16px 0;align-items:start}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ClipboardModule }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i3$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i3$2.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i12.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i12.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: NgeMonacoModule }, { kind: "component", type: FeatureSetEditorComponent, selector: "gve-feature-set-editor", inputs: ["isVar", "featNames", "featValues", "featProps", "filterThreshold", "multiValuedFeatureIds", "batchMode", "features"], outputs: ["close", "featuresChange"] }, { kind: "component", type: OperationSourceEditorComponent, selector: "gve-operation-source-editor", inputs: ["source", "ids", "types"], outputs: ["sourceChange", "sourceCancel"] }, { kind: "pipe", type: FlatLookupPipe, name: "flatLookup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: ChainOperationEditorComponent, isStandalone: true, selector: "gve-chain-operation-editor", inputs: { operation: { classPropertyName: "operation", publicName: "operation", isSignal: true, isRequired: false, transformFunction: null }, snapshot: { classPropertyName: "snapshot", publicName: "snapshot", isSignal: true, isRequired: false, transformFunction: null }, hidePreview: { classPropertyName: "hidePreview", publicName: "hidePreview", isSignal: true, isRequired: false, transformFunction: null }, featureDefs: { classPropertyName: "featureDefs", publicName: "featureDefs", isSignal: true, isRequired: false, transformFunction: null }, rangePatch: { classPropertyName: "rangePatch", publicName: "rangePatch", isSignal: true, isRequired: false, transformFunction: null }, multiValuedFeatureIds: { classPropertyName: "multiValuedFeatureIds", publicName: "multiValuedFeatureIds", isSignal: true, isRequired: false, transformFunction: null }, sourceIds: { classPropertyName: "sourceIds", publicName: "sourceIds", isSignal: true, isRequired: false, transformFunction: null }, sourceTypes: { classPropertyName: "sourceTypes", publicName: "sourceTypes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { operation: "operationChange", operationPreview: "operationPreview", operationCancel: "operationCancel" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <!-- tabs -->\r\n  <mat-tab-group [selectedIndex]=\"tabIndex()\">\r\n    <!-- GENERAL -->\r\n    <mat-tab label=\"general\">\r\n      <div class=\"form-row\">\r\n        <!-- id -->\r\n        <div id=\"id\" class=\"muted\">{{ id() }}</div>\r\n\r\n        <!-- type -->\r\n        <mat-form-field>\r\n          <mat-label>type</mat-label>\r\n          <mat-select [formControl]=\"type\">\r\n            <mat-option [value]=\"7\"\r\n              ><mat-icon>edit_note</mat-icon>annotate</mat-option\r\n            >\r\n            <mat-option [value]=\"0\"\r\n              ><mat-icon>layers</mat-icon> replace</mat-option\r\n            >\r\n            <mat-option [value]=\"1\"\r\n              ><mat-icon>close</mat-icon>delete</mat-option\r\n            >\r\n            <mat-option [value]=\"2\"\r\n              ><mat-icon>last_page</mat-icon>add-before</mat-option\r\n            >\r\n            <mat-option [value]=\"3\"\r\n              ><mat-icon>first_page</mat-icon>add-after</mat-option\r\n            >\r\n            <mat-option [value]=\"4\"\r\n              ><mat-icon>login</mat-icon>move-before</mat-option\r\n            >\r\n            <mat-option [value]=\"5\"\r\n              ><mat-icon>logout</mat-icon>move-after</mat-option\r\n            >\r\n            <mat-option [value]=\"6\"\r\n              ><mat-icon>compare_arrows</mat-icon>swap</mat-option\r\n            >\r\n          </mat-select>\r\n          @if ($any(type).errors?.required && (type.dirty || type.touched)) {\r\n            <mat-error>type required</mat-error>\r\n          }\r\n        </mat-form-field>\r\n\r\n        <!-- at -->\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>at</mat-label>\r\n          <input matInput [formControl]=\"at\" type=\"number\" min=\"0\" />\r\n          @if ($any(at).errors?.required && (at.dirty || at.touched)) {\r\n            <mat-error>at required</mat-error>\r\n          }\r\n          @if ($any(at).errors?.min && (at.dirty || at.touched)) {\r\n            <mat-error>at must be at least 0</mat-error>\r\n          }\r\n        </mat-form-field>\r\n\r\n        <!-- atAsIndex -->\r\n        <mat-checkbox [formControl]=\"atAsIndex\">idx</mat-checkbox>\r\n\r\n        <!-- run -->\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>run</mat-label>\r\n          <input matInput [formControl]=\"run\" type=\"number\" min=\"0\" />\r\n          @if ($any(run).errors?.required && (run.dirty || run.touched)) {\r\n            <mat-error>run required</mat-error>\r\n          }\r\n        </mat-form-field>\r\n\r\n        <!-- to -->\r\n        @if (hasTo()) {\r\n          <mat-form-field class=\"nr\">\r\n            <mat-label>to</mat-label>\r\n            <input matInput [formControl]=\"to\" type=\"number\" min=\"0\" />\r\n            @if ($any(to).errors?.required && (to.dirty || to.touched)) {\r\n              <mat-error>to required</mat-error>\r\n            }\r\n          </mat-form-field>\r\n\r\n          <!-- toAsIndex -->\r\n          <mat-checkbox [formControl]=\"toAsIndex\">idx</mat-checkbox>\r\n\r\n          <!-- toRun -->\r\n          @if (hasToRun()) {\r\n            <mat-form-field class=\"nr\">\r\n              <mat-label>to run</mat-label>\r\n              <input matInput [formControl]=\"toRun\" type=\"number\" min=\"0\" />\r\n              @if (\r\n                $any(toRun).errors?.required && (toRun.dirty || toRun.touched)\r\n              ) {\r\n                <mat-error>to run required</mat-error>\r\n              }\r\n            </mat-form-field>\r\n          }\r\n        }\r\n\r\n        <!-- value -->\r\n        @if (hasValue()) {\r\n          <mat-form-field>\r\n            <mat-label>value</mat-label>\r\n            <input matInput [formControl]=\"value\" />\r\n            @if (\r\n              $any(value).errors?.required && (value.dirty || value.touched)\r\n            ) {\r\n              <mat-error>value required</mat-error>\r\n            }\r\n          </mat-form-field>\r\n        }\r\n      </div>\r\n      <div class=\"form-row\">\r\n        <!-- rank -->\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>rank</mat-label>\r\n          <input matInput [formControl]=\"rank\" type=\"number\" min=\"0\" />\r\n          @if ($any(rank).errors?.required && (rank.dirty || rank.touched)) {\r\n            <mat-error>rank required</mat-error>\r\n          }\r\n        </mat-form-field>\r\n\r\n        <!-- groupId -->\r\n        <mat-form-field>\r\n          <mat-label>group ID</mat-label>\r\n          <input matInput [formControl]=\"groupId\" />\r\n          @if (\r\n            $any(groupId).errors?.required && (groupId.dirty || groupId.touched)\r\n          ) {\r\n            <mat-error>group ID required</mat-error>\r\n          }\r\n        </mat-form-field>\r\n\r\n        <!-- inputTag -->\r\n        <mat-form-field>\r\n          <mat-label>input tag</mat-label>\r\n          <input matInput [formControl]=\"inputTag\" />\r\n          <mat-hint>blank=latest</mat-hint>\r\n        </mat-form-field>\r\n\r\n        <!-- outputTag -->\r\n        <mat-form-field>\r\n          <mat-label>output tag</mat-label>\r\n          <input matInput [formControl]=\"outputTag\" />\r\n          <mat-hint>blank=auto (vN)</mat-hint>\r\n        </mat-form-field>\r\n      </div>\r\n      <div>\r\n        <!-- features -->\r\n        <fieldset>\r\n          <legend>operation features</legend>\r\n          <gve-feature-set-editor\r\n            [isVar]=\"true\"\r\n            [featNames]=\"featureDefs()?.names\"\r\n            [featValues]=\"featureDefs()?.values\"\r\n            [featProps]=\"featureDefs()?.props\"\r\n            [features]=\"features.value\"\r\n            [multiValuedFeatureIds]=\"multiValuedFeatureIds()\"\r\n            (featuresChange)=\"onFeaturesChange($event)\"\r\n          />\r\n        </fieldset>\r\n      </div>\r\n    </mat-tab>\r\n\r\n    <!-- SOURCES -->\r\n    <mat-tab label=\"sources\">\r\n      <div>\r\n        <button\r\n          type=\"button\"\r\n          mat-flat-button\r\n          color=\"primary\"\r\n          class=\"mat-primary\"\r\n          (click)=\"addSource()\"\r\n        >\r\n          <mat-icon>add_circle</mat-icon>\r\n          source\r\n        </button>\r\n      </div>\r\n      <table>\r\n        <thead>\r\n          <tr>\r\n            <th></th>\r\n            <th>type</th>\r\n            <th>id</th>\r\n            <th>rank</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (s of sources.value; track s) {\r\n            <tr [class.selected]=\"s === editedSource()\">\r\n              <td class=\"fit-width\">\r\n                <button\r\n                  type=\"button\"\r\n                  mat-icon-button\r\n                  color=\"primary\"\r\n                  (click)=\"editSource($index)\"\r\n                >\r\n                  <mat-icon class=\"mat-primary\">edit</mat-icon>\r\n                </button>\r\n                <button\r\n                  type=\"button\"\r\n                  mat-icon-button\r\n                  color=\"warn\"\r\n                  (click)=\"deleteSource($index)\"\r\n                >\r\n                  <mat-icon class=\"mat-warn\">delete</mat-icon>\r\n                </button>\r\n              </td>\r\n              <td>{{ s.type | flatLookup: sourceTypes() : \"id\" : \"label\" }}</td>\r\n              <td>{{ s.id | flatLookup: sourceIds() : \"id\" : \"label\" }}</td>\r\n              <td>{{ s.rank }}</td>\r\n            </tr>\r\n          }\r\n        </tbody>\r\n      </table>\r\n      @if (editedSource()) {\r\n        <!-- source editor -->\r\n        <mat-expansion-panel\r\n          [disabled]=\"!editedSource()\"\r\n          [expanded]=\"editedSource()\"\r\n        >\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>source</mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <gve-operation-source-editor\r\n            [source]=\"editedSource()\"\r\n            [ids]=\"sourceIds()\"\r\n            [types]=\"sourceTypes()\"\r\n            (sourceChange)=\"onSourceChange($event!)\"\r\n            (sourceCancel)=\"closeSource()\"\r\n          />\r\n        </mat-expansion-panel>\r\n      }\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n\r\n  <!-- buttons -->\r\n  <div id=\"submit-row\">\r\n    <button\r\n      type=\"button\"\r\n      color=\"warn\"\r\n      mat-icon-button\r\n      matTooltip=\"Discard operation\"\r\n      (click)=\"cancel()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n    </button>\r\n    @if (!hidePreview()) {\r\n      <button\r\n        type=\"button\"\r\n        color=\"primary\"\r\n        mat-icon-button\r\n        matTooltip=\"Preview operation\"\r\n        (click)=\"requestPreview()\"\r\n      >\r\n        <mat-icon class=\"mat-primary\">preview</mat-icon>\r\n      </button>\r\n    }\r\n    <button\r\n      type=\"submit\"\r\n      color=\"primary\"\r\n      class=\"mat-primary\"\r\n      mat-flat-button\r\n      matTooltip=\"Save operation\"\r\n      [disabled]=\"form.invalid || form.pristine\"\r\n    >\r\n      <mat-icon>check_circle</mat-icon>\r\n      save\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}#submit-row{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:8px;border-top:1px solid var(--mat-sys-on-surface-variant)}.toolbar-row{display:flex;align-items:center;flex-wrap:wrap}.nr{width:6em}.long-text{width:100%;max-width:800px}#id{border-radius:6px;padding:4px;background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container);margin-top:-16px}fieldset{border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;padding:8px;margin:8px 0}legend{color:var(--mat-sys-on-surface-variant)}table{width:100%;border-collapse:collapse;color:var(--mat-sys-on-surface-variant)}tbody tr:nth-child(odd){background-color:var(--mat-sys-surface-container)}th{text-align:left;font-weight:400;color:var(--mat-sys-on-surface-variant)}tbody tr:hover{background-color:var(--mat-sys-surface-container-high)}td.fit-width{width:1px;white-space:nowrap}tbody tr.selected{background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container)}#code{height:500px;border:1px solid var(--mat-sys-on-surface-variant)}#monaco{height:100%}#preview{box-sizing:border-box;width:100%;border:1px solid var(--mat-sys-on-surface-variant);border-radius:4px;padding:8px}.tree-invisible{display:none}.tree ul,.tree li{margin-top:0;margin-bottom:0;list-style-type:none}.selected-node{background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container)}.child-title{font-weight:700;margin:0;background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container);padding:8px}#tree-container{display:grid;grid-template-rows:auto;grid-template-columns:auto 1fr;grid-template-areas:\"nav ed\";gap:0 16px;align-items:stretch}#tree-nav{grid-area:nav;border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;margin:8px 0;padding-right:8px}#tree-ed{grid-area:ed;border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;margin:8px 0}@media only screen and (max-width:959px){div#container{grid-template-columns:1fr;grid-template-areas:\"nav\" \"ed\";gap:16px 0;align-items:start}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ClipboardModule }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i3$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i3$2.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i12.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i12.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: NgeMonacoModule }, { kind: "component", type: FeatureSetEditorComponent, selector: "gve-feature-set-editor", inputs: ["isVar", "featNames", "featValues", "featProps", "filterThreshold", "multiValuedFeatureIds", "batchMode", "features"], outputs: ["close", "featuresChange"] }, { kind: "component", type: OperationSourceEditorComponent, selector: "gve-operation-source-editor", inputs: ["source", "ids", "types"], outputs: ["sourceChange", "sourceCancel"] }, { kind: "pipe", type: FlatLookupPipe, name: "flatLookup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ChainOperationEditorComponent, decorators: [{
             type: Component,
@@ -1994,8 +1996,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         FeatureSetEditorComponent,
                         OperationSourceEditorComponent,
                         FlatLookupPipe,
-                    ], template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <!-- tabs -->\r\n  <mat-tab-group [selectedIndex]=\"tabIndex()\">\r\n    <!-- GENERAL -->\r\n    <mat-tab label=\"general\">\r\n      <div class=\"form-row\">\r\n        <!-- id -->\r\n        <div id=\"id\" class=\"muted\">{{ id() }}</div>\r\n\r\n        <!-- type -->\r\n        <mat-form-field>\r\n          <mat-label>type</mat-label>\r\n          <mat-select [formControl]=\"type\">\r\n            <mat-option [value]=\"7\"\r\n              ><mat-icon>edit_note</mat-icon>annotate</mat-option\r\n            >\r\n            <mat-option [value]=\"0\"\r\n              ><mat-icon>layers</mat-icon> replace</mat-option\r\n            >\r\n            <mat-option [value]=\"1\"\r\n              ><mat-icon>close</mat-icon>delete</mat-option\r\n            >\r\n            <mat-option [value]=\"2\"\r\n              ><mat-icon>last_page</mat-icon>add-before</mat-option\r\n            >\r\n            <mat-option [value]=\"3\"\r\n              ><mat-icon>first_page</mat-icon>add-after</mat-option\r\n            >\r\n            <mat-option [value]=\"4\"\r\n              ><mat-icon>login</mat-icon>move-before</mat-option\r\n            >\r\n            <mat-option [value]=\"5\"\r\n              ><mat-icon>logout</mat-icon>move-after</mat-option\r\n            >\r\n            <mat-option [value]=\"6\"\r\n              ><mat-icon>compare_arrows</mat-icon>swap</mat-option\r\n            >\r\n          </mat-select>\r\n          @if ($any(type).errors?.required && (type.dirty || type.touched)) {\r\n            <mat-error>type required</mat-error>\r\n          }\r\n        </mat-form-field>\r\n\r\n        <!-- at -->\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>at</mat-label>\r\n          <input matInput [formControl]=\"at\" type=\"number\" min=\"0\" />\r\n          @if ($any(at).errors?.required && (at.dirty || at.touched)) {\r\n            <mat-error>at required</mat-error>\r\n          }\r\n          @if ($any(at).errors?.min && (at.dirty || at.touched)) {\r\n            <mat-error>at must be at least 0</mat-error>\r\n          }\r\n        </mat-form-field>\r\n\r\n        <!-- atAsIndex -->\r\n        <mat-checkbox [formControl]=\"atAsIndex\">idx</mat-checkbox>\r\n\r\n        <!-- run -->\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>run</mat-label>\r\n          <input matInput [formControl]=\"run\" type=\"number\" min=\"0\" />\r\n          @if ($any(run).errors?.required && (run.dirty || run.touched)) {\r\n            <mat-error>run required</mat-error>\r\n          }\r\n        </mat-form-field>\r\n\r\n        <!-- to -->\r\n        @if (hasTo()) {\r\n          <mat-form-field class=\"nr\">\r\n            <mat-label>to</mat-label>\r\n            <input matInput [formControl]=\"to\" type=\"number\" min=\"0\" />\r\n            @if ($any(to).errors?.required && (to.dirty || to.touched)) {\r\n              <mat-error>to required</mat-error>\r\n            }\r\n          </mat-form-field>\r\n\r\n          <!-- toAsIndex -->\r\n          <mat-checkbox [formControl]=\"toAsIndex\">idx</mat-checkbox>\r\n\r\n          <!-- toRun -->\r\n          @if (hasToRun()) {\r\n            <mat-form-field class=\"nr\">\r\n              <mat-label>to run</mat-label>\r\n              <input matInput [formControl]=\"toRun\" type=\"number\" min=\"0\" />\r\n              @if (\r\n                $any(toRun).errors?.required && (toRun.dirty || toRun.touched)\r\n              ) {\r\n                <mat-error>to run required</mat-error>\r\n              }\r\n            </mat-form-field>\r\n          }\r\n        }\r\n\r\n        <!-- value -->\r\n        @if (hasValue()) {\r\n          <mat-form-field>\r\n            <mat-label>value</mat-label>\r\n            <input matInput [formControl]=\"value\" />\r\n            @if (\r\n              $any(value).errors?.required && (value.dirty || value.touched)\r\n            ) {\r\n              <mat-error>value required</mat-error>\r\n            }\r\n          </mat-form-field>\r\n        }\r\n      </div>\r\n      <div class=\"form-row\">\r\n        <!-- rank -->\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>rank</mat-label>\r\n          <input matInput [formControl]=\"rank\" type=\"number\" min=\"0\" />\r\n          @if ($any(rank).errors?.required && (rank.dirty || rank.touched)) {\r\n            <mat-error>rank required</mat-error>\r\n          }\r\n        </mat-form-field>\r\n\r\n        <!-- groupId -->\r\n        <mat-form-field>\r\n          <mat-label>group ID</mat-label>\r\n          <input matInput [formControl]=\"groupId\" />\r\n          @if (\r\n            $any(groupId).errors?.required && (groupId.dirty || groupId.touched)\r\n          ) {\r\n            <mat-error>group ID required</mat-error>\r\n          }\r\n        </mat-form-field>\r\n\r\n        <!-- inputTag -->\r\n        <mat-form-field>\r\n          <mat-label>input tag</mat-label>\r\n          <input matInput [formControl]=\"inputTag\" />\r\n          <mat-hint>blank=latest</mat-hint>\r\n        </mat-form-field>\r\n\r\n        <!-- outputTag -->\r\n        <mat-form-field>\r\n          <mat-label>output tag</mat-label>\r\n          <input matInput [formControl]=\"outputTag\" />\r\n          <mat-hint>blank=auto (vN)</mat-hint>\r\n        </mat-form-field>\r\n      </div>\r\n      <div>\r\n        <!-- features -->\r\n        <fieldset>\r\n          <legend>operation features</legend>\r\n          <gve-feature-set-editor\r\n            [isVar]=\"true\"\r\n            [featNames]=\"featureDefs()?.names\"\r\n            [featValues]=\"featureDefs()?.values\"\r\n            [featProps]=\"featureDefs()?.props\"\r\n            [features]=\"features.value\"\r\n            [multiValuedFeatureIds]=\"multiValuedFeatureIds()\"\r\n            (featuresChange)=\"onFeaturesChange($event)\"\r\n          />\r\n        </fieldset>\r\n      </div>\r\n    </mat-tab>\r\n\r\n    <!-- SOURCES -->\r\n    <mat-tab label=\"sources\">\r\n      <div>\r\n        <button\r\n          type=\"button\"\r\n          mat-flat-button\r\n          color=\"primary\"\r\n          class=\"mat-primary\"\r\n          (click)=\"addSource()\"\r\n        >\r\n          <mat-icon>add_circle</mat-icon>\r\n          source\r\n        </button>\r\n      </div>\r\n      <table>\r\n        <thead>\r\n          <tr>\r\n            <th></th>\r\n            <th>type</th>\r\n            <th>id</th>\r\n            <th>rank</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (s of sources.value; track s) {\r\n            <tr [class.selected]=\"s === editedSource()\">\r\n              <td class=\"fit-width\">\r\n                <button\r\n                  type=\"button\"\r\n                  mat-icon-button\r\n                  color=\"primary\"\r\n                  (click)=\"editSource($index)\"\r\n                >\r\n                  <mat-icon class=\"mat-primary\">edit</mat-icon>\r\n                </button>\r\n                <button type=\"button\" mat-icon-button color=\"warn\">\r\n                  <mat-icon class=\"mat-warn\">delete</mat-icon>\r\n                </button>\r\n              </td>\r\n              <td>{{ s.type | flatLookup: sourceTypes() : \"id\" : \"label\" }}</td>\r\n              <td>{{ s.id | flatLookup: sourceIds() : \"id\" : \"label\" }}</td>\r\n              <td>{{ s.rank }}</td>\r\n            </tr>\r\n          }\r\n        </tbody>\r\n      </table>\r\n      @if (editedSource()) {\r\n        <!-- source editor -->\r\n        <mat-expansion-panel\r\n          [disabled]=\"!editedSource()\"\r\n          [expanded]=\"editedSource()\"\r\n        >\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>source</mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <gve-operation-source-editor\r\n            [source]=\"editedSource()\"\r\n            [ids]=\"sourceIds()\"\r\n            [types]=\"sourceTypes()\"\r\n            (sourceChange)=\"onSourceChange($event!)\"\r\n            (sourceCancel)=\"closeSource()\"\r\n          />\r\n        </mat-expansion-panel>\r\n      }\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n\r\n  <!-- buttons -->\r\n  <div id=\"submit-row\">\r\n    <button\r\n      type=\"button\"\r\n      color=\"warn\"\r\n      mat-icon-button\r\n      matTooltip=\"Discard operation\"\r\n      (click)=\"cancel()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n    </button>\r\n    @if (!hidePreview()) {\r\n      <button\r\n        type=\"button\"\r\n        color=\"primary\"\r\n        mat-icon-button\r\n        matTooltip=\"Preview operation\"\r\n        (click)=\"requestPreview()\"\r\n      >\r\n        <mat-icon class=\"mat-primary\">preview</mat-icon>\r\n      </button>\r\n    }\r\n    <button\r\n      type=\"submit\"\r\n      color=\"primary\"\r\n      class=\"mat-primary\"\r\n      mat-flat-button\r\n      matTooltip=\"Save operation\"\r\n      [disabled]=\"form.invalid || form.pristine\"\r\n    >\r\n      <mat-icon>check_circle</mat-icon>\r\n      save\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}#submit-row{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:8px;border-top:1px solid var(--mat-sys-on-surface-variant)}.toolbar-row{display:flex;align-items:center;flex-wrap:wrap}.nr{width:6em}.long-text{width:100%;max-width:800px}#id{border-radius:6px;padding:4px;background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container);margin-top:-16px}fieldset{border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;padding:8px;margin:8px 0}legend{color:var(--mat-sys-on-surface-variant)}table{width:100%;border-collapse:collapse;color:var(--mat-sys-on-surface-variant)}tbody tr:nth-child(odd){background-color:var(--mat-sys-surface-container)}th{text-align:left;font-weight:400;color:var(--mat-sys-on-surface-variant)}tbody tr:hover{background-color:var(--mat-sys-surface-container-high)}td.fit-width{width:1px;white-space:nowrap}tbody tr.selected{background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container)}#code{height:500px;border:1px solid var(--mat-sys-on-surface-variant)}#monaco{height:100%}#preview{box-sizing:border-box;width:100%;border:1px solid var(--mat-sys-on-surface-variant);border-radius:4px;padding:8px}.tree-invisible{display:none}.tree ul,.tree li{margin-top:0;margin-bottom:0;list-style-type:none}.selected-node{background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container)}.child-title{font-weight:700;margin:0;background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container);padding:8px}#tree-container{display:grid;grid-template-rows:auto;grid-template-columns:auto 1fr;grid-template-areas:\"nav ed\";gap:0 16px;align-items:stretch}#tree-nav{grid-area:nav;border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;margin:8px 0;padding-right:8px}#tree-ed{grid-area:ed;border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;margin:8px 0}@media only screen and (max-width:959px){div#container{grid-template-columns:1fr;grid-template-areas:\"nav\" \"ed\";gap:16px 0;align-items:start}}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.FormBuilder }], propDecorators: { operation: [{ type: i0.Input, args: [{ isSignal: true, alias: "operation", required: false }] }, { type: i0.Output, args: ["operationChange"] }], snapshot: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapshot", required: false }] }], hidePreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePreview", required: false }] }], featureDefs: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureDefs", required: false }] }], rangePatch: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangePatch", required: false }] }], multiValuedFeatureIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiValuedFeatureIds", required: false }] }], sourceIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceIds", required: false }] }], sourceTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceTypes", required: false }] }], operationChange: [{ type: i0.Output, args: ["operationChange"] }], 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        <!-- to -->\r\n        @if (hasTo()) {\r\n          <mat-form-field class=\"nr\">\r\n            <mat-label>to</mat-label>\r\n            <input matInput [formControl]=\"to\" type=\"number\" min=\"0\" />\r\n            @if ($any(to).errors?.required && (to.dirty || to.touched)) {\r\n              <mat-error>to required</mat-error>\r\n            }\r\n          </mat-form-field>\r\n\r\n          <!-- toAsIndex -->\r\n          <mat-checkbox [formControl]=\"toAsIndex\">idx</mat-checkbox>\r\n\r\n          <!-- toRun -->\r\n          @if (hasToRun()) {\r\n            <mat-form-field class=\"nr\">\r\n              <mat-label>to run</mat-label>\r\n              <input matInput [formControl]=\"toRun\" type=\"number\" min=\"0\" />\r\n              @if (\r\n                $any(toRun).errors?.required && (toRun.dirty || toRun.touched)\r\n              ) {\r\n                <mat-error>to run required</mat-error>\r\n              }\r\n            </mat-form-field>\r\n          }\r\n        }\r\n\r\n        <!-- value -->\r\n        @if (hasValue()) {\r\n          <mat-form-field>\r\n            <mat-label>value</mat-label>\r\n            <input matInput [formControl]=\"value\" />\r\n            @if (\r\n              $any(value).errors?.required && (value.dirty || value.touched)\r\n            ) {\r\n              <mat-error>value required</mat-error>\r\n            }\r\n          </mat-form-field>\r\n        }\r\n      </div>\r\n      <div class=\"form-row\">\r\n        <!-- rank -->\r\n        <mat-form-field class=\"nr\">\r\n          <mat-label>rank</mat-label>\r\n          <input matInput [formControl]=\"rank\" type=\"number\" min=\"0\" />\r\n          @if ($any(rank).errors?.required && (rank.dirty || rank.touched)) {\r\n            <mat-error>rank required</mat-error>\r\n          }\r\n        </mat-form-field>\r\n\r\n        <!-- groupId -->\r\n        <mat-form-field>\r\n          <mat-label>group ID</mat-label>\r\n          <input matInput [formControl]=\"groupId\" />\r\n          @if (\r\n            $any(groupId).errors?.required && (groupId.dirty || groupId.touched)\r\n          ) {\r\n            <mat-error>group ID required</mat-error>\r\n          }\r\n        </mat-form-field>\r\n\r\n        <!-- inputTag -->\r\n        <mat-form-field>\r\n          <mat-label>input tag</mat-label>\r\n          <input matInput [formControl]=\"inputTag\" />\r\n          <mat-hint>blank=latest</mat-hint>\r\n        </mat-form-field>\r\n\r\n        <!-- outputTag -->\r\n        <mat-form-field>\r\n          <mat-label>output tag</mat-label>\r\n          <input matInput [formControl]=\"outputTag\" />\r\n          <mat-hint>blank=auto (vN)</mat-hint>\r\n        </mat-form-field>\r\n      </div>\r\n      <div>\r\n        <!-- features -->\r\n        <fieldset>\r\n          <legend>operation features</legend>\r\n          <gve-feature-set-editor\r\n            [isVar]=\"true\"\r\n            [featNames]=\"featureDefs()?.names\"\r\n            [featValues]=\"featureDefs()?.values\"\r\n            [featProps]=\"featureDefs()?.props\"\r\n            [features]=\"features.value\"\r\n            [multiValuedFeatureIds]=\"multiValuedFeatureIds()\"\r\n            (featuresChange)=\"onFeaturesChange($event)\"\r\n          />\r\n        </fieldset>\r\n      </div>\r\n    </mat-tab>\r\n\r\n    <!-- SOURCES -->\r\n    <mat-tab label=\"sources\">\r\n      <div>\r\n        <button\r\n          type=\"button\"\r\n          mat-flat-button\r\n          color=\"primary\"\r\n          class=\"mat-primary\"\r\n          (click)=\"addSource()\"\r\n        >\r\n          <mat-icon>add_circle</mat-icon>\r\n          source\r\n        </button>\r\n      </div>\r\n      <table>\r\n        <thead>\r\n          <tr>\r\n            <th></th>\r\n            <th>type</th>\r\n            <th>id</th>\r\n            <th>rank</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (s of sources.value; track s) {\r\n            <tr [class.selected]=\"s === editedSource()\">\r\n              <td class=\"fit-width\">\r\n                <button\r\n                  type=\"button\"\r\n                  mat-icon-button\r\n                  color=\"primary\"\r\n                  (click)=\"editSource($index)\"\r\n                >\r\n                  <mat-icon class=\"mat-primary\">edit</mat-icon>\r\n                </button>\r\n                <button\r\n                  type=\"button\"\r\n                  mat-icon-button\r\n                  color=\"warn\"\r\n                  (click)=\"deleteSource($index)\"\r\n                >\r\n                  <mat-icon class=\"mat-warn\">delete</mat-icon>\r\n                </button>\r\n              </td>\r\n              <td>{{ s.type | flatLookup: sourceTypes() : \"id\" : \"label\" }}</td>\r\n              <td>{{ s.id | flatLookup: sourceIds() : \"id\" : \"label\" }}</td>\r\n              <td>{{ s.rank }}</td>\r\n            </tr>\r\n          }\r\n        </tbody>\r\n      </table>\r\n      @if (editedSource()) {\r\n        <!-- source editor -->\r\n        <mat-expansion-panel\r\n          [disabled]=\"!editedSource()\"\r\n          [expanded]=\"editedSource()\"\r\n        >\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>source</mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <gve-operation-source-editor\r\n            [source]=\"editedSource()\"\r\n            [ids]=\"sourceIds()\"\r\n            [types]=\"sourceTypes()\"\r\n            (sourceChange)=\"onSourceChange($event!)\"\r\n            (sourceCancel)=\"closeSource()\"\r\n          />\r\n        </mat-expansion-panel>\r\n      }\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n\r\n  <!-- buttons -->\r\n  <div id=\"submit-row\">\r\n    <button\r\n      type=\"button\"\r\n      color=\"warn\"\r\n      mat-icon-button\r\n      matTooltip=\"Discard operation\"\r\n      (click)=\"cancel()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n    </button>\r\n    @if (!hidePreview()) {\r\n      <button\r\n        type=\"button\"\r\n        color=\"primary\"\r\n        mat-icon-button\r\n        matTooltip=\"Preview operation\"\r\n        (click)=\"requestPreview()\"\r\n      >\r\n        <mat-icon class=\"mat-primary\">preview</mat-icon>\r\n      </button>\r\n    }\r\n    <button\r\n      type=\"submit\"\r\n      color=\"primary\"\r\n      class=\"mat-primary\"\r\n      mat-flat-button\r\n      matTooltip=\"Save operation\"\r\n      [disabled]=\"form.invalid || form.pristine\"\r\n    >\r\n      <mat-icon>check_circle</mat-icon>\r\n      save\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}#submit-row{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:8px;border-top:1px solid var(--mat-sys-on-surface-variant)}.toolbar-row{display:flex;align-items:center;flex-wrap:wrap}.nr{width:6em}.long-text{width:100%;max-width:800px}#id{border-radius:6px;padding:4px;background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container);margin-top:-16px}fieldset{border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;padding:8px;margin:8px 0}legend{color:var(--mat-sys-on-surface-variant)}table{width:100%;border-collapse:collapse;color:var(--mat-sys-on-surface-variant)}tbody tr:nth-child(odd){background-color:var(--mat-sys-surface-container)}th{text-align:left;font-weight:400;color:var(--mat-sys-on-surface-variant)}tbody tr:hover{background-color:var(--mat-sys-surface-container-high)}td.fit-width{width:1px;white-space:nowrap}tbody tr.selected{background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container)}#code{height:500px;border:1px solid var(--mat-sys-on-surface-variant)}#monaco{height:100%}#preview{box-sizing:border-box;width:100%;border:1px solid var(--mat-sys-on-surface-variant);border-radius:4px;padding:8px}.tree-invisible{display:none}.tree ul,.tree li{margin-top:0;margin-bottom:0;list-style-type:none}.selected-node{background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container)}.child-title{font-weight:700;margin:0;background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container);padding:8px}#tree-container{display:grid;grid-template-rows:auto;grid-template-columns:auto 1fr;grid-template-areas:\"nav ed\";gap:0 16px;align-items:stretch}#tree-nav{grid-area:nav;border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;margin:8px 0;padding-right:8px}#tree-ed{grid-area:ed;border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;margin:8px 0}@media only screen and (max-width:959px){div#container{grid-template-columns:1fr;grid-template-areas:\"nav\" \"ed\";gap:16px 0;align-items:start}}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.FormBuilder }], propDecorators: { operation: [{ type: i0.Input, args: [{ isSignal: true, alias: "operation", required: false }] }, { type: i0.Output, args: ["operationChange"] }], snapshot: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapshot", required: false }] }], hidePreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePreview", required: false }] }], featureDefs: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureDefs", required: false }] }], rangePatch: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangePatch", required: false }] }], multiValuedFeatureIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiValuedFeatureIds", required: false }] }], sourceIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceIds", required: false }] }], sourceTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceTypes", required: false }] }], operationPreview: [{ type: i0.Output, args: ["operationPreview"] }], operationCancel: [{ type: i0.Output, args: ["operationCancel"] }] } });
 
 /**
  * 🔑 `gve-feature-set-view`