ng-form-foundry 0.3.0 → 0.3.2

package/fesm2022/ng-form-foundry.mjs

@@ -1,29 +1,32 @@
 import * as i1 from '@angular/forms';
 import { Validators, FormControl, FormArray, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import * as i0 from '@angular/core';
-import { Input, Component, EventEmitter, Output, inject, ChangeDetectorRef, forwardRef, ViewChildren, HostBinding, input, output, model, computed } from '@angular/core';
+import { Input, Component, output, EventEmitter, inject, ChangeDetectorRef, forwardRef, ViewChildren, Output, HostBinding, input, model, computed, ElementRef, effect, untracked } from '@angular/core';
 import * as i2 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i3$1 from '@angular/material/input';
+import * as i5 from '@angular/material/input';
 import { MatInputModule, MatPrefix } from '@angular/material/input';
 import * as i4 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i3 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i2$1 from '@angular/material/icon';
+import * as i1$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i4$1 from '@angular/material/button';
+import * as i2$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
 import { MatDialog } from '@angular/material/dialog';
 import * as i2$2 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
-import { MatCardModule } from '@angular/material/card';
 import { NgTemplateOutlet } from '@angular/common';
-import * as i4$2 from '@angular/material/menu';
+import * as i3$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 
-/** The control name that records which case of a {@link NodeChoice} is active. */
+/**
+ * The control name that records which case of a {@link NodeChoice} is active.
+ * The name is reserved: it cannot be used as a case field name (the builder
+ * throws) or as a map entry key (the entry helpers reject it).
+ */
 const CASE_KEY = '__case';
 
 // --- type guards
@@ -45,6 +48,20 @@ function isChoice(node) {
 function isMap(node) {
     return node.kind === 'map';
 }
+/** Whether the node is an optional (presence) node: its key is data, absent until enabled. */
+function hasPresence(node) {
+    return ((node.kind === 'leaf' || node.kind === 'nodeGroup' || node.kind === 'map' || node.kind === 'choice') &&
+        node.presence === true);
+}
+/**
+ * Whether a presence child should start absent: there is no initial data
+ * object, or its key is missing from it. A key that is present with an explicit
+ * `null` value keeps its control — `null` is a value (a nullable leaf's), while
+ * presence is about the *absent key*.
+ */
+function presenceAbsent(initial, key) {
+    return initial == null || !(key in initial);
+}
 function enumValidator(choices) {
     const set = new Set(choices);
     return (ctrl) => ctrl.value == null || set.has(ctrl.value) ? null : { enum: true };
@@ -162,6 +179,12 @@ function buildNodeGroupControl(group, initial) {
     const controls = {};
     for (const key in group.children) {
         const child = group.children[key];
+        // An absent presence child gets no control at all, so it is absent from the
+        // form value until enabled. Because every nested group is built through this
+        // function — plain children, list items, map values, choice case fields —
+        // presence is honored at any depth.
+        if (hasPresence(child) && presenceAbsent(initial, key))
+            continue;
         // Forward only this child's slice of the initial data, keyed by the child's
         // record key. Passing the whole `initial` object seeds every leaf with the
         // parent record and prevents list builders from sizing to the real data.
@@ -175,33 +198,24 @@ function buildNodeGroupListControl(list, initial = null) {
     const values = Array.isArray(initial) ? initial : [null];
     return new FormArray(values.map((v) => buildNodeGroupControl(list.type, v)));
 }
-/**
- * Build the `AbstractControl` for a single schema node.
- *
- * Dispatches on `node.kind`: a `leaf` becomes a `FormControl`, a `leafList` a
- * `FormArray` of controls, a `nodeGroup` a nested `FormGroup`, and a
- * `nodeGroupList` a `FormArray` of groups. `initial` is the runtime value for
- * this node — a scalar for a leaf, an array for a list, an object for a group —
- * and seeds the control's value (falling back to the node's `default`).
- *
- * Most callers use {@link buildFormFromSchema}; this is exposed for building a
- * control from a single non-root node.
- */
-/**
- * Build the FormGroup for a choice: a `__case` control holding the active case
- * name plus that case's field controls. Only the active case's fields are built,
- * matching the inline YANG encoding; switching the case swaps them.
- */
 /**
  * Normalize a {@link ChoiceCase} to a field record. A field record is returned
  * as-is; a single node (a leaf-bodied case, e.g. a scalar `anyOf` branch) becomes
  * a one-field record keyed by the node's `name`. The discriminant is a top-level
  * `kind` string, which a field record never has (its keys are field names).
+ *
+ * Throws when a case field is keyed `__case`: that name is reserved for the
+ * choice discriminator ({@link CASE_KEY}) and a field under it would silently
+ * clobber the active-case control.
  */
 function caseFields(body) {
-    return typeof body.kind === 'string'
+    const fields = typeof body.kind === 'string'
         ? { [body.name]: body }
         : body;
+    if (CASE_KEY in fields) {
+        throw new Error(`"${CASE_KEY}" is reserved for the choice discriminator and cannot name a case field`);
+    }
+    return fields;
 }
 /**
  * The active case of a choice: an explicit `__case` in the initial value, else
@@ -234,12 +248,21 @@ function inferChoiceCase(choice, initial) {
     }
     return best;
 }
+/**
+ * Build the FormGroup for a choice: a `__case` control holding the active case
+ * name plus that case's field controls. Only the active case's fields are built,
+ * matching the inline YANG encoding; switching the case swaps them.
+ */
 function buildChoiceControl(choice, initial) {
     const active = resolveChoiceCase(choice, initial);
     const controls = { [CASE_KEY]: new FormControl(active ?? null) };
     if (active && choice.cases[active]) {
         const caseChildren = caseFields(choice.cases[active]);
         for (const key in caseChildren) {
+            // Case fields honor presence like any group's children: an absent
+            // presence field gets no control.
+            if (hasPresence(caseChildren[key]) && presenceAbsent(initial, key))
+                continue;
             controls[key] = buildControl(caseChildren[key], initial?.[key]);
         }
     }
@@ -248,18 +271,24 @@ function buildChoiceControl(choice, initial) {
 /**
  * Switch a choice's FormGroup to `caseName`: sets `__case`, removes every other
  * control, and builds `caseName`'s fields (normalized via {@link caseFields})
- * with their defaults. An unknown case name leaves only `__case`.
+ * with their defaults. Presence fields of the new case start absent — the
+ * switch carries no data that could make them present. An unknown case name
+ * leaves only `__case`. The swap is atomic: one value change fires, and every
+ * observable snapshot has fields matching its discriminator.
  */
 function switchChoiceCase(group, choice, caseName) {
-    group.get(CASE_KEY)?.setValue(caseName);
+    group.get(CASE_KEY)?.setValue(caseName, { emitEvent: false });
     for (const name of Object.keys(group.controls)) {
         if (name !== CASE_KEY)
-            group.removeControl(name);
+            group.removeControl(name, { emitEvent: false });
     }
     const caseChildren = choice.cases[caseName] ? caseFields(choice.cases[caseName]) : {};
     for (const name in caseChildren) {
-        group.addControl(name, buildControl(caseChildren[name]));
+        if (hasPresence(caseChildren[name]))
+            continue;
+        group.addControl(name, buildControl(caseChildren[name]), { emitEvent: false });
     }
+    group.updateValueAndValidity();
 }
 /**
  * Append a map entry built from `map.value` and return its committed key, or
@@ -273,11 +302,14 @@ function addMapEntry(group, map, key) {
         return null;
     let committed;
     if (key != null) {
-        if (group.contains(key))
+        const trimmed = key.trim();
+        // `__case` is reserved for the choice discriminator; as an entry key it
+        // would make the map group indistinguishable from a choice group.
+        if (!trimmed || trimmed === CASE_KEY || group.contains(trimmed))
             return null;
-        if (map.keyPattern && !new RegExp(map.keyPattern).test(key))
+        if (map.keyPattern && !new RegExp(map.keyPattern).test(trimmed))
             return null;
-        committed = key;
+        committed = trimmed;
     }
     else {
         let n = Object.keys(group.controls).length + 1;
@@ -290,21 +322,35 @@ function addMapEntry(group, map, key) {
 }
 /**
  * Rename entry `oldKey` to `newKey.trim()`, preserving the control instance
- * (remove + re-add, so the value survives). Returns whether the rename was
- * committed: an empty, unchanged, duplicate, or `keyPattern`-violating key is a
- * no-op, leaving the entry under its current name.
+ * (so the value survives) and the entry's position in the group's key order —
+ * the order `getRawValue()` serializes and the tree editor renders. Returns
+ * whether the rename was committed: an empty, reserved (`__case`), unchanged,
+ * duplicate, or `keyPattern`-violating key is a no-op, leaving the entry under
+ * its current name. Entry keys are looked up verbatim — never via
+ * `AbstractControl.get`, which would split keys like `10.0.0.1` into
+ * dot-delimited paths. Emits a single value change.
  */
 function renameMapEntry(group, map, oldKey, newKey) {
     const committed = newKey.trim();
-    if (!committed || committed === oldKey || group.contains(committed))
+    if (!committed || committed === CASE_KEY || committed === oldKey || group.contains(committed))
         return false;
     if (map.keyPattern && !new RegExp(map.keyPattern).test(committed))
         return false;
-    const control = group.get(oldKey);
+    const control = group.controls[oldKey];
     if (!control)
         return false;
-    group.removeControl(oldKey);
-    group.addControl(committed, control);
+    // Re-key in place: swap the name, then re-append every key that followed so
+    // the renamed entry does not jump to the end of the key order.
+    const following = Object.keys(group.controls);
+    following.splice(0, following.indexOf(oldKey) + 1);
+    group.removeControl(oldKey, { emitEvent: false });
+    group.addControl(committed, control, { emitEvent: false });
+    for (const key of following) {
+        const sibling = group.controls[key];
+        group.removeControl(key, { emitEvent: false });
+        group.addControl(key, sibling, { emitEvent: false });
+    }
+    group.updateValueAndValidity();
     return true;
 }
 /** Remove entry `key` unless the map is at `minEntries`. Returns whether it was removed. */
@@ -316,11 +362,46 @@ function removeMapEntry(group, map, key) {
     group.removeControl(key);
     return true;
 }
+/**
+ * The map's own constraints as a group validator: entry count against
+ * `minEntries`/`maxEntries` and every entry key against `keyPattern`. The UI
+ * gates prevent most violations; the validator reports the ones that slip
+ * through (seeded wire data, generated `keyN` placeholders awaiting a rename).
+ */
+function mapValidator(map) {
+    let re = null;
+    if (map.keyPattern) {
+        try {
+            re = new RegExp(map.keyPattern);
+        }
+        catch {
+            re = null;
+        }
+    }
+    return (ctrl) => {
+        const keys = Object.keys(ctrl.controls);
+        const errors = {};
+        if (map.minEntries != null && keys.length < map.minEntries) {
+            errors['minEntries'] = { required: map.minEntries, actual: keys.length };
+        }
+        if (map.maxEntries != null && keys.length > map.maxEntries) {
+            errors['maxEntries'] = { allowed: map.maxEntries, actual: keys.length };
+        }
+        if (re) {
+            const invalidKeys = keys.filter((k) => !re.test(k));
+            if (invalidKeys.length)
+                errors['keyPattern'] = { pattern: map.keyPattern, keys: invalidKeys };
+        }
+        return Object.keys(errors).length ? errors : null;
+    };
+}
 /**
  * Build the FormGroup for a map: one control per entry, keyed by the entry key,
  * each built from the map's shared `value` schema. Because the entry keys are the
  * control names, `getRawValue()` is the map object directly. Empty when no
- * initial object is supplied; the renderer adds/removes/renames entries.
+ * initial object is supplied; the renderer adds/removes/renames entries. The
+ * group carries {@link mapValidator}, so `keyPattern`/`minEntries`/`maxEntries`
+ * violations surface as validation errors.
  */
 function buildMapControl(map, initial) {
     const controls = {};
@@ -328,8 +409,20 @@ function buildMapControl(map, initial) {
     for (const key of Object.keys(source)) {
         controls[key] = buildControl(map.value, source[key]);
     }
-    return new FormGroup(controls);
+    return new FormGroup(controls, { validators: mapValidator(map) });
 }
+/**
+ * Build the `AbstractControl` for a single schema node.
+ *
+ * Dispatches on `node.kind`: a `leaf` becomes a `FormControl`, a `leafList` a
+ * `FormArray` of controls, a `nodeGroup` a nested `FormGroup`, and a
+ * `nodeGroupList` a `FormArray` of groups. `initial` is the runtime value for
+ * this node — a scalar for a leaf, an array for a list, an object for a group —
+ * and seeds the control's value (falling back to the node's `default`).
+ *
+ * Most callers use {@link buildFormFromSchema}; this is exposed for building a
+ * control from a single non-root node.
+ */
 function buildControl(node, initial) {
     if (isLeaf(node)) {
         return buildLeafControl(node, initial);
@@ -362,41 +455,73 @@ function buildControl(node, initial) {
  * is an optional value object keyed by the schema's `children` keys; each child
  * control is seeded from its matching slice (falling back to the node `default`).
  *
+ * Presence nodes whose key is absent from `initial` get no control, at any depth
+ * — plain children, list items, map values, and choice case fields alike — so
+ * they are absent from the form value until enabled. A key present with an
+ * explicit `null` keeps its control: `null` is a value, absence is the missing
+ * key.
+ *
  * Inference only holds when `schema`'s literal type is preserved. Author schemas
  * with {@link defineSchema} or a `satisfies NodeGroup` annotation — never
  * `const schema: NodeGroup = ...`, which widens `children` and erases the field
  * names and value types.
  */
+function buildFormFromSchema(schema, initial = null) {
+    return buildNodeGroupControl(schema, initial);
+}
 /**
- * Remove presence nodes that have no initial value so they are absent from the
- * built form (and from `form.value`) until the user toggles them on. Applies to
- * presence groups, leaves, maps, and choices. Runs on the fully-built, attached
- * tree. `removeControl` is used rather than `disable` because a disabled control
- * is still included in `FormGroup.value`.
+ * The wire value at `node`: `value` rebuilt with every choice discriminator
+ * removed.
+ *
+ * A choice's form value is `{ __case, ...fields }` ({@link CASE_KEY}); its wire
+ * encoding is the active case's fields inline, with no discriminator — the case
+ * is recovered from the field shape when the data is seeded back in
+ * ({@link resolveChoiceCase}). The walk is schema-driven: only positions the
+ * schema declares as choices are stripped, so a group child or map entry that
+ * happens to be named `__case` passes through untouched. Values at positions
+ * the schema does not describe pass through unchanged.
  */
-function applyPresence(group, schema, initial) {
-    for (const key in schema.children) {
-        const child = schema.children[key];
-        const childInitial = initial?.[key];
-        if (child.kind === 'leaf' || child.kind === 'map' || child.kind === 'choice') {
-            if (child.presence && childInitial == null)
-                group.removeControl(key);
-            continue;
-        }
-        if (child.kind !== 'nodeGroup')
-            continue;
-        if (child.presence && childInitial == null) {
-            group.removeControl(key);
+function toWireValue(node, value) {
+    if (value === null || typeof value !== 'object')
+        return value;
+    if (isChoice(node)) {
+        const { [CASE_KEY]: active, ...rest } = value;
+        const fields = typeof active === 'string' && node.cases[active] ? caseFields(node.cases[active]) : {};
+        const out = {};
+        for (const key of Object.keys(rest)) {
+            out[key] = key in fields ? toWireValue(fields[key], rest[key]) : rest[key];
         }
-        else if (group.get(key) instanceof FormGroup) {
-            applyPresence(group.get(key), child, childInitial);
+        return out;
+    }
+    if (isNodeGroup(node)) {
+        const source = value;
+        const out = {};
+        for (const key of Object.keys(source)) {
+            out[key] = key in node.children ? toWireValue(node.children[key], source[key]) : source[key];
         }
+        return out;
+    }
+    if (isNodeGroupList(node)) {
+        return Array.isArray(value) ? value.map((item) => toWireValue(node.type, item)) : value;
+    }
+    if (isMap(node)) {
+        const source = value;
+        const out = {};
+        for (const key of Object.keys(source))
+            out[key] = toWireValue(node.value, source[key]);
+        return out;
     }
+    return value;
 }
-function buildFormFromSchema(schema, initial = null) {
-    const group = buildNodeGroupControl(schema, initial);
-    applyPresence(group, schema, initial);
-    return group;
+/**
+ * Serialize a form built by {@link buildFormFromSchema} to its wire value:
+ * `form.getRawValue()` with every choice's {@link CASE_KEY} discriminator
+ * stripped (see {@link toWireValue}). The result is the inline encoding that
+ * `buildFormFromSchema` accepts back as `initial`, so serialize → rebuild
+ * round-trips the value.
+ */
+function serializeForm(schema, form) {
+    return toWireValue(schema, form.getRawValue());
 }
 /**
  * Capture a schema literal with its exact type while checking it against
@@ -423,11 +548,11 @@ class LeafEnumRendererComponent {
     remove;
     editable = true;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: LeafEnumRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: LeafEnumRendererComponent, isStandalone: true, selector: "nff-leaf-enum-renderer", inputs: { leafEnum: "leafEnum", initialValue: "initialValue", control: "control", removable: "removable", remove: "remove", editable: "editable" }, ngImport: i0, template: "<mat-form-field [appearance]=\"editable ? 'fill' : 'outline'\">\n  <mat-label>{{ leafEnum.label ?? leafEnum.name }}</mat-label>\n  <mat-select [formControl]=\"control\" value=\"{{ control.value }}\">\n    @for (option of leafEnum.enum; track $index) {\n      <mat-option [value]=\"option\">{{ leafEnum.enumLabel?.[$index] ?? option }}</mat-option>\n    }\n  </mat-select>\n</mat-form-field>\n", styles: [":host{flex:1;min-width:0;width:100%}mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.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: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: LeafEnumRendererComponent, isStandalone: true, selector: "nff-leaf-enum-renderer", inputs: { leafEnum: "leafEnum", initialValue: "initialValue", control: "control", removable: "removable", remove: "remove", editable: "editable" }, ngImport: i0, template: "<mat-form-field [appearance]=\"editable ? 'fill' : 'outline'\">\n  <mat-label>{{ leafEnum.label ?? leafEnum.name }}</mat-label>\n  @if (editable) {\n    <mat-select [formControl]=\"control\">\n      @for (option of leafEnum.enum; track $index) {\n        <mat-option [value]=\"option\">{{ leafEnum.enumLabel?.[$index] ?? option }}</mat-option>\n      }\n    </mat-select>\n  } @else {\n    <!-- Display-only: no formControl binding, so the wire value cannot change. -->\n    <mat-select [value]=\"control.value\" disabled>\n      @for (option of leafEnum.enum; track $index) {\n        <mat-option [value]=\"option\">{{ leafEnum.enumLabel?.[$index] ?? option }}</mat-option>\n      }\n    </mat-select>\n  }\n</mat-form-field>\n", styles: [":host{flex:1;min-width:0;width:100%}mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.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: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: LeafEnumRendererComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nff-leaf-enum-renderer', standalone: true, imports: [ReactiveFormsModule, MatFormFieldModule, MatSelectModule], template: "<mat-form-field [appearance]=\"editable ? 'fill' : 'outline'\">\n  <mat-label>{{ leafEnum.label ?? leafEnum.name }}</mat-label>\n  <mat-select [formControl]=\"control\" value=\"{{ control.value }}\">\n    @for (option of leafEnum.enum; track $index) {\n      <mat-option [value]=\"option\">{{ leafEnum.enumLabel?.[$index] ?? option }}</mat-option>\n    }\n  </mat-select>\n</mat-form-field>\n", styles: [":host{flex:1;min-width:0;width:100%}mat-form-field{width:100%}\n"] }]
+            args: [{ selector: 'nff-leaf-enum-renderer', standalone: true, imports: [ReactiveFormsModule, MatFormFieldModule, MatSelectModule], template: "<mat-form-field [appearance]=\"editable ? 'fill' : 'outline'\">\n  <mat-label>{{ leafEnum.label ?? leafEnum.name }}</mat-label>\n  @if (editable) {\n    <mat-select [formControl]=\"control\">\n      @for (option of leafEnum.enum; track $index) {\n        <mat-option [value]=\"option\">{{ leafEnum.enumLabel?.[$index] ?? option }}</mat-option>\n      }\n    </mat-select>\n  } @else {\n    <!-- Display-only: no formControl binding, so the wire value cannot change. -->\n    <mat-select [value]=\"control.value\" disabled>\n      @for (option of leafEnum.enum; track $index) {\n        <mat-option [value]=\"option\">{{ leafEnum.enumLabel?.[$index] ?? option }}</mat-option>\n      }\n    </mat-select>\n  }\n</mat-form-field>\n", styles: [":host{flex:1;min-width:0;width:100%}mat-form-field{width:100%}\n"] }]
         }], propDecorators: { leafEnum: [{
                 type: Input
             }], initialValue: [{
@@ -446,20 +571,15 @@ class LeafRendererComponent {
     elementRef;
     leaf_;
     control = new FormControl();
-    initialValue;
     removable = false;
     editable = true;
     /** Focus the field once rendered — for fields the user just added (e.g. an enabled presence leaf). */
     autofocus = false;
-    remove = new EventEmitter();
+    /** Emitted when the user removes this field (e.g. an optional presence leaf). */
+    remove = output();
     constructor(elementRef) {
         this.elementRef = elementRef;
     }
-    ngOnInit() {
-        if (this.initialValue) {
-            this.control.patchValue(this.initialValue);
-        }
-    }
     ngAfterViewInit() {
         if (this.autofocus) {
             // Deferred out of the change-detection pass: focusing flips the form
@@ -504,7 +624,7 @@ class LeafRendererComponent {
         return 'Invalid value';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: LeafRendererComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: LeafRendererComponent, isStandalone: true, selector: "nff-leaf-renderer", inputs: { leaf_: "leaf_", control: "control", initialValue: "initialValue", removable: "removable", editable: "editable", autofocus: "autofocus" }, outputs: { remove: "remove" }, ngImport: i0, template: "@if ('name' in leaf_) {\n  @if (leaf_.type === 'string') {\n    <mat-form-field [appearance]=\"fieldEditable ? 'fill' : 'outline'\">\n      <mat-label>{{ leaf_.label ?? leaf_.name }}</mat-label>\n      <input [readonly]=\"!fieldEditable\" matInput type=\"text\" [formControl]=\"control\">\n      <mat-error>{{ errorText }}</mat-error>\n    </mat-form-field>\n  } @else if (leaf_.type === 'number') {\n    <mat-form-field [appearance]=\"fieldEditable ? 'fill' : 'outline'\">\n      <mat-label>{{ leaf_.label ?? leaf_.name  }}</mat-label>\n      <input [readonly]=\"!fieldEditable\"  matInput type=\"number\" [formControl]=\"control\">\n      <mat-error>{{ errorText }}</mat-error>\n    </mat-form-field>\n  } @else if (leaf_.type === 'boolean') {\n    <mat-checkbox [formControl]=\"control\">{{ leaf_.label ?? leaf_.name }}</mat-checkbox>\n  } @else if (leaf_.type === 'enum') {\n    <nff-leaf-enum-renderer [editable]=\"fieldEditable\" [leafEnum]=\"leaf_\" [control]=\"control\"></nff-leaf-enum-renderer>\n  }\n  @if (removable && editable) {\n    <button matIconButton class=\"remove-button small-icon-button\" matTooltip=\"Remove\" (click)=\"remove.emit(0)\">\n      <mat-icon>delete</mat-icon>\n    </button>\n  }\n}\n", styles: [":host{display:flex;flex:1 1 0;min-width:10%;gap:8px}mat-form-field{flex:1;min-width:0}.remove-button{flex:0 0 auto;align-self:flex-start;margin-top:4px;background-color:var(--mat-sys-error-container);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.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: MatCheckboxModule }, { kind: "component", type: i4.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: MatSelectModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: LeafEnumRendererComponent, selector: "nff-leaf-enum-renderer", inputs: ["leafEnum", "initialValue", "control", "removable", "remove", "editable"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: LeafRendererComponent, isStandalone: true, selector: "nff-leaf-renderer", inputs: { leaf_: "leaf_", control: "control", removable: "removable", editable: "editable", autofocus: "autofocus" }, outputs: { remove: "remove" }, ngImport: i0, template: "@if ('name' in leaf_) {\n  @if (leaf_.type === 'string') {\n    <mat-form-field [appearance]=\"fieldEditable ? 'fill' : 'outline'\">\n      <mat-label>{{ leaf_.label ?? leaf_.name }}</mat-label>\n      <input [readonly]=\"!fieldEditable\" matInput type=\"text\" [formControl]=\"control\">\n      <mat-error>{{ errorText }}</mat-error>\n    </mat-form-field>\n  } @else if (leaf_.type === 'number') {\n    <mat-form-field [appearance]=\"fieldEditable ? 'fill' : 'outline'\">\n      <mat-label>{{ leaf_.label ?? leaf_.name  }}</mat-label>\n      <input [readonly]=\"!fieldEditable\"  matInput type=\"number\" [formControl]=\"control\">\n      <mat-error>{{ errorText }}</mat-error>\n    </mat-form-field>\n  } @else if (leaf_.type === 'boolean') {\n    @if (fieldEditable) {\n      <mat-checkbox [formControl]=\"control\">{{ leaf_.label ?? leaf_.name }}</mat-checkbox>\n    } @else {\n      <!-- Display-only: no formControl binding, so the wire value cannot change.\n           The control itself is never disable()d \u2014 a disabled control would\n           still appear in the form value with different semantics. -->\n      <mat-checkbox [checked]=\"control.value === true\" disabled>{{ leaf_.label ?? leaf_.name }}</mat-checkbox>\n    }\n  } @else if (leaf_.type === 'enum') {\n    <nff-leaf-enum-renderer [editable]=\"fieldEditable\" [leafEnum]=\"leaf_\" [control]=\"control\"></nff-leaf-enum-renderer>\n  }\n  @if (removable && editable) {\n    <button matIconButton class=\"remove-button small-icon-button\" matTooltip=\"Remove\" [attr.aria-label]=\"'Remove ' + ('label' in leaf_ && leaf_.label ? leaf_.label : 'name' in leaf_ ? leaf_.name : 'field')\" (click)=\"remove.emit()\">\n      <mat-icon>delete</mat-icon>\n    </button>\n  }\n}\n", styles: [":host{display:flex;flex:1 1 0;min-width:10%;gap:8px}mat-form-field{flex:1;min-width:0}.remove-button{flex:0 0 auto;align-self:flex-start;margin-top:4px;background-color:var(--mat-sys-error-container);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: MatCheckboxModule }, { kind: "component", type: i4.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: MatSelectModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: LeafEnumRendererComponent, selector: "nff-leaf-enum-renderer", inputs: ["leafEnum", "initialValue", "control", "removable", "remove", "editable"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: LeafRendererComponent, decorators: [{
             type: Component,
@@ -518,22 +638,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         MatButtonModule,
                         MatTooltip,
                         LeafEnumRendererComponent,
-                    ], template: "@if ('name' in leaf_) {\n  @if (leaf_.type === 'string') {\n    <mat-form-field [appearance]=\"fieldEditable ? 'fill' : 'outline'\">\n      <mat-label>{{ leaf_.label ?? leaf_.name }}</mat-label>\n      <input [readonly]=\"!fieldEditable\" matInput type=\"text\" [formControl]=\"control\">\n      <mat-error>{{ errorText }}</mat-error>\n    </mat-form-field>\n  } @else if (leaf_.type === 'number') {\n    <mat-form-field [appearance]=\"fieldEditable ? 'fill' : 'outline'\">\n      <mat-label>{{ leaf_.label ?? leaf_.name  }}</mat-label>\n      <input [readonly]=\"!fieldEditable\"  matInput type=\"number\" [formControl]=\"control\">\n      <mat-error>{{ errorText }}</mat-error>\n    </mat-form-field>\n  } @else if (leaf_.type === 'boolean') {\n    <mat-checkbox [formControl]=\"control\">{{ leaf_.label ?? leaf_.name }}</mat-checkbox>\n  } @else if (leaf_.type === 'enum') {\n    <nff-leaf-enum-renderer [editable]=\"fieldEditable\" [leafEnum]=\"leaf_\" [control]=\"control\"></nff-leaf-enum-renderer>\n  }\n  @if (removable && editable) {\n    <button matIconButton class=\"remove-button small-icon-button\" matTooltip=\"Remove\" (click)=\"remove.emit(0)\">\n      <mat-icon>delete</mat-icon>\n    </button>\n  }\n}\n", styles: [":host{display:flex;flex:1 1 0;min-width:10%;gap:8px}mat-form-field{flex:1;min-width:0}.remove-button{flex:0 0 auto;align-self:flex-start;margin-top:4px;background-color:var(--mat-sys-error-container);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}\n"] }]
+                    ], template: "@if ('name' in leaf_) {\n  @if (leaf_.type === 'string') {\n    <mat-form-field [appearance]=\"fieldEditable ? 'fill' : 'outline'\">\n      <mat-label>{{ leaf_.label ?? leaf_.name }}</mat-label>\n      <input [readonly]=\"!fieldEditable\" matInput type=\"text\" [formControl]=\"control\">\n      <mat-error>{{ errorText }}</mat-error>\n    </mat-form-field>\n  } @else if (leaf_.type === 'number') {\n    <mat-form-field [appearance]=\"fieldEditable ? 'fill' : 'outline'\">\n      <mat-label>{{ leaf_.label ?? leaf_.name  }}</mat-label>\n      <input [readonly]=\"!fieldEditable\"  matInput type=\"number\" [formControl]=\"control\">\n      <mat-error>{{ errorText }}</mat-error>\n    </mat-form-field>\n  } @else if (leaf_.type === 'boolean') {\n    @if (fieldEditable) {\n      <mat-checkbox [formControl]=\"control\">{{ leaf_.label ?? leaf_.name }}</mat-checkbox>\n    } @else {\n      <!-- Display-only: no formControl binding, so the wire value cannot change.\n           The control itself is never disable()d \u2014 a disabled control would\n           still appear in the form value with different semantics. -->\n      <mat-checkbox [checked]=\"control.value === true\" disabled>{{ leaf_.label ?? leaf_.name }}</mat-checkbox>\n    }\n  } @else if (leaf_.type === 'enum') {\n    <nff-leaf-enum-renderer [editable]=\"fieldEditable\" [leafEnum]=\"leaf_\" [control]=\"control\"></nff-leaf-enum-renderer>\n  }\n  @if (removable && editable) {\n    <button matIconButton class=\"remove-button small-icon-button\" matTooltip=\"Remove\" [attr.aria-label]=\"'Remove ' + ('label' in leaf_ && leaf_.label ? leaf_.label : 'name' in leaf_ ? leaf_.name : 'field')\" (click)=\"remove.emit()\">\n      <mat-icon>delete</mat-icon>\n    </button>\n  }\n}\n", styles: [":host{display:flex;flex:1 1 0;min-width:10%;gap:8px}mat-form-field{flex:1;min-width:0}.remove-button{flex:0 0 auto;align-self:flex-start;margin-top:4px;background-color:var(--mat-sys-error-container);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { leaf_: [{
                 type: Input
             }], control: [{
                 type: Input
-            }], initialValue: [{
-                type: Input
             }], removable: [{
                 type: Input
             }], editable: [{
                 type: Input
             }], autofocus: [{
                 type: Input
-            }], remove: [{
-                type: Output
-            }] } });
+            }], remove: [{ type: i0.Output, args: ["remove"] }] } });
 
 class NodeGroupListRendererComponent {
     nodeGroupList;
@@ -597,7 +713,7 @@ class NodeGroupListRendererComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NodeGroupListRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: NodeGroupListRendererComponent, isStandalone: true, selector: "nff-node-group-list-renderer", inputs: { nodeGroupList: "nodeGroupList", initialValue: "initialValue", formArray: "formArray", editable: "editable", minItems: "minItems", maxItems: "maxItems" }, outputs: { message: "message" }, viewQueries: [{ propertyName: "items", predicate: i0.forwardRef(() => DynamicRecursiveFormComponent), descendants: true }], ngImport: i0, template: "@if (formArray && nodeGroupList) {\n  <div class=\"fields-container\">\n      @for (group of formArray.controls; track $index) {\n        <div class=\"field-item\">\n        <nff-dynamic-recursive-form\n          [schema]=\"nodeGroupList.type\"\n          [formGroup]=\"asFormGroup(group)\"\n          [title]=\"getTitle($index)\"\n          [index]=\"0\"\n          [removable]=\"formArray.length > minItems\"\n          (remove)=\"removeItem($index)\"\n          [editable]=\"editable\"\n          [addButtonCallback]=\"addItem\"\n        />\n        </div>\n      }\n  </div>\n}\n", styles: [":host{position:relative;width:100%;flex:1 1 0}.fields{display:flex;flex-direction:column;flex-wrap:wrap;width:100%}.fields-container{display:flex;flex-direction:column}.field-item{display:flex;flex-direction:row;gap:8px}.actions{display:flex;flex-direction:row;gap:8px;align-items:center;margin-top:0;padding:0;min-width:24px}.title{display:flex;flex-direction:column;gap:8px;align-items:center}nff-dynamic-recursive-form{flex:1}.add-button{background-color:var(--mat-sys-primary-container)}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => DynamicRecursiveFormComponent), selector: "nff-dynamic-recursive-form", inputs: ["schema", "initialValue", "formGroup", "index", "removable", "title", "editable", "addButtonCallback"], outputs: ["remove", "editableChange"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatButtonModule) }, { kind: "ngmodule", type: i0.forwardRef(() => MatIconModule) }, { kind: "ngmodule", type: i0.forwardRef(() => MatTooltipModule) }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: NodeGroupListRendererComponent, isStandalone: true, selector: "nff-node-group-list-renderer", inputs: { nodeGroupList: "nodeGroupList", initialValue: "initialValue", formArray: "formArray", editable: "editable", minItems: "minItems", maxItems: "maxItems" }, outputs: { message: "message" }, viewQueries: [{ propertyName: "items", predicate: i0.forwardRef(() => DynamicRecursiveFormComponent), descendants: true }], ngImport: i0, template: "@if (formArray && nodeGroupList) {\n  <div class=\"fields-container\">\n      @for (group of formArray.controls; track $index) {\n        <div class=\"field-item\">\n        <nff-dynamic-recursive-form\n          [schema]=\"nodeGroupList.type\"\n          [formGroup]=\"asFormGroup(group)\"\n          [title]=\"getTitle($index)\"\n          [index]=\"0\"\n          [removable]=\"formArray.length > minItems\"\n          (remove)=\"removeItem($index)\"\n          [editable]=\"editable\"\n          [addButtonCallback]=\"addItem\"\n        />\n        </div>\n      }\n  </div>\n}\n", styles: [":host{position:relative;width:100%;flex:1 1 0}.fields{display:flex;flex-direction:column;flex-wrap:wrap;width:100%}.fields-container{display:flex;flex-direction:column}.field-item{display:flex;flex-direction:row;gap:8px}.actions{display:flex;flex-direction:row;gap:8px;align-items:center;margin-top:0;padding:0;min-width:24px}.title{display:flex;flex-direction:column;gap:8px;align-items:center}nff-dynamic-recursive-form{flex:1}.add-button{background-color:var(--mat-sys-primary-container)}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => DynamicRecursiveFormComponent), selector: "nff-dynamic-recursive-form", inputs: ["schema", "initialValue", "formGroup", "index", "removable", "title", "editable", "addButtonCallback", "focusLeaf"], outputs: ["remove", "editableChange"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatButtonModule) }, { kind: "ngmodule", type: i0.forwardRef(() => MatIconModule) }, { kind: "ngmodule", type: i0.forwardRef(() => MatTooltipModule) }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NodeGroupListRendererComponent, decorators: [{
             type: Component,
@@ -639,7 +755,7 @@ class AnonLeafRendererComponent {
         this.remove.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AnonLeafRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: AnonLeafRendererComponent, isStandalone: true, selector: "nff-anon-leaf-renderer", inputs: { AnonLeaf: "AnonLeaf", initialValue: "initialValue", control: "control", removable: "removable", editable: "editable", index: "index", label: "label" }, outputs: { remove: "remove" }, ngImport: i0, template: "<div class=\"anon-leaf-container\">\n@if (AnonLeaf.type === 'string') {\n  <mat-form-field [appearance]=\"editable ? 'fill' : 'outline'\">\n    <mat-label>{{ label }} #{{ index + 1}}</mat-label>\n    <input [readonly]=\"!editable\"\n           [formControl]=\"control\"\n           matInput type=\"text\" >\n    @if (removable) {\n    }\n  </mat-form-field>\n} @else if (AnonLeaf.type === 'number') {\n  <mat-form-field [appearance]=\"editable ? 'fill' : 'outline'\">\n    <mat-label>{{ label }} #{{ index + 1}}</mat-label>\n    <input [readonly]=\"!editable\"\n           [formControl]=\"control\"\n           matInput type=\"number\">\n  </mat-form-field>\n} @else if (AnonLeaf.type === 'boolean') {\n  <mat-checkbox [disabled]=\"!editable\" [formControl]=\"control\">value</mat-checkbox>\n}\n @else if (AnonLeaf.type === 'enum' && 'enum' in AnonLeaf) {\n  <mat-form-field>\n    <mat-label>{{ label }} #{{ index + 1}}</mat-label>\n    <mat-select [formControl]=\"control\">\n      @for (option of (AnonLeaf.type === 'enum' ? AnonLeaf.enum : []); track $index) {\n        <mat-option [value]=\"option\">{{ option }}</mat-option>\n      }\n    </mat-select>\n  </mat-form-field>\n}\n</div>\n", styles: [".anon-leaf-container{display:flex;flex-direction:row;gap:8px;align-items:center;flex:1 1 0}mat-form-field{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.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: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4.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: MatInputModule }, { kind: "directive", type: i3$1.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: MatButtonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: AnonLeafRendererComponent, isStandalone: true, selector: "nff-anon-leaf-renderer", inputs: { AnonLeaf: "AnonLeaf", initialValue: "initialValue", control: "control", removable: "removable", editable: "editable", index: "index", label: "label" }, outputs: { remove: "remove" }, ngImport: i0, template: "<div class=\"anon-leaf-container\">\n@if (AnonLeaf.type === 'string') {\n  <mat-form-field [appearance]=\"editable ? 'fill' : 'outline'\">\n    <mat-label>{{ label }} #{{ index + 1}}</mat-label>\n    <input [readonly]=\"!editable\"\n           [formControl]=\"control\"\n           matInput type=\"text\" >\n    @if (removable) {\n    }\n  </mat-form-field>\n} @else if (AnonLeaf.type === 'number') {\n  <mat-form-field [appearance]=\"editable ? 'fill' : 'outline'\">\n    <mat-label>{{ label }} #{{ index + 1}}</mat-label>\n    <input [readonly]=\"!editable\"\n           [formControl]=\"control\"\n           matInput type=\"number\">\n  </mat-form-field>\n} @else if (AnonLeaf.type === 'boolean') {\n  @if (editable) {\n    <mat-checkbox [formControl]=\"control\">value</mat-checkbox>\n  } @else {\n    <!-- Display-only: no formControl binding, so the wire value cannot change. -->\n    <mat-checkbox [checked]=\"control.value === true\" disabled>value</mat-checkbox>\n  }\n}\n @else if (AnonLeaf.type === 'enum' && 'enum' in AnonLeaf) {\n  <mat-form-field [appearance]=\"editable ? 'fill' : 'outline'\">\n    <mat-label>{{ label }} #{{ index + 1}}</mat-label>\n    @if (editable) {\n      <mat-select [formControl]=\"control\">\n        @for (option of (AnonLeaf.type === 'enum' ? AnonLeaf.enum : []); track $index) {\n          <mat-option [value]=\"option\">{{ option }}</mat-option>\n        }\n      </mat-select>\n    } @else {\n      <mat-select [value]=\"control.value\" disabled>\n        @for (option of (AnonLeaf.type === 'enum' ? AnonLeaf.enum : []); track $index) {\n          <mat-option [value]=\"option\">{{ option }}</mat-option>\n        }\n      </mat-select>\n    }\n  </mat-form-field>\n}\n</div>\n", styles: [".anon-leaf-container{display:flex;flex-direction:row;gap:8px;align-items:center;flex:1 1 0}mat-form-field{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.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: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4.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: 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: MatButtonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AnonLeafRendererComponent, decorators: [{
             type: Component,
@@ -651,7 +767,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         MatCheckboxModule,
                         MatInputModule,
                         MatButtonModule,
-                    ], template: "<div class=\"anon-leaf-container\">\n@if (AnonLeaf.type === 'string') {\n  <mat-form-field [appearance]=\"editable ? 'fill' : 'outline'\">\n    <mat-label>{{ label }} #{{ index + 1}}</mat-label>\n    <input [readonly]=\"!editable\"\n           [formControl]=\"control\"\n           matInput type=\"text\" >\n    @if (removable) {\n    }\n  </mat-form-field>\n} @else if (AnonLeaf.type === 'number') {\n  <mat-form-field [appearance]=\"editable ? 'fill' : 'outline'\">\n    <mat-label>{{ label }} #{{ index + 1}}</mat-label>\n    <input [readonly]=\"!editable\"\n           [formControl]=\"control\"\n           matInput type=\"number\">\n  </mat-form-field>\n} @else if (AnonLeaf.type === 'boolean') {\n  <mat-checkbox [disabled]=\"!editable\" [formControl]=\"control\">value</mat-checkbox>\n}\n @else if (AnonLeaf.type === 'enum' && 'enum' in AnonLeaf) {\n  <mat-form-field>\n    <mat-label>{{ label }} #{{ index + 1}}</mat-label>\n    <mat-select [formControl]=\"control\">\n      @for (option of (AnonLeaf.type === 'enum' ? AnonLeaf.enum : []); track $index) {\n        <mat-option [value]=\"option\">{{ option }}</mat-option>\n      }\n    </mat-select>\n  </mat-form-field>\n}\n</div>\n", styles: [".anon-leaf-container{display:flex;flex-direction:row;gap:8px;align-items:center;flex:1 1 0}mat-form-field{flex:1}\n"] }]
+                    ], template: "<div class=\"anon-leaf-container\">\n@if (AnonLeaf.type === 'string') {\n  <mat-form-field [appearance]=\"editable ? 'fill' : 'outline'\">\n    <mat-label>{{ label }} #{{ index + 1}}</mat-label>\n    <input [readonly]=\"!editable\"\n           [formControl]=\"control\"\n           matInput type=\"text\" >\n    @if (removable) {\n    }\n  </mat-form-field>\n} @else if (AnonLeaf.type === 'number') {\n  <mat-form-field [appearance]=\"editable ? 'fill' : 'outline'\">\n    <mat-label>{{ label }} #{{ index + 1}}</mat-label>\n    <input [readonly]=\"!editable\"\n           [formControl]=\"control\"\n           matInput type=\"number\">\n  </mat-form-field>\n} @else if (AnonLeaf.type === 'boolean') {\n  @if (editable) {\n    <mat-checkbox [formControl]=\"control\">value</mat-checkbox>\n  } @else {\n    <!-- Display-only: no formControl binding, so the wire value cannot change. -->\n    <mat-checkbox [checked]=\"control.value === true\" disabled>value</mat-checkbox>\n  }\n}\n @else if (AnonLeaf.type === 'enum' && 'enum' in AnonLeaf) {\n  <mat-form-field [appearance]=\"editable ? 'fill' : 'outline'\">\n    <mat-label>{{ label }} #{{ index + 1}}</mat-label>\n    @if (editable) {\n      <mat-select [formControl]=\"control\">\n        @for (option of (AnonLeaf.type === 'enum' ? AnonLeaf.enum : []); track $index) {\n          <mat-option [value]=\"option\">{{ option }}</mat-option>\n        }\n      </mat-select>\n    } @else {\n      <mat-select [value]=\"control.value\" disabled>\n        @for (option of (AnonLeaf.type === 'enum' ? AnonLeaf.enum : []); track $index) {\n          <mat-option [value]=\"option\">{{ option }}</mat-option>\n        }\n      </mat-select>\n    }\n  </mat-form-field>\n}\n</div>\n", styles: [".anon-leaf-container{display:flex;flex-direction:row;gap:8px;align-items:center;flex:1 1 0}mat-form-field{flex:1}\n"] }]
         }], propDecorators: { AnonLeaf: [{
                 type: Input
             }], initialValue: [{
@@ -706,7 +822,7 @@ class LeafListRendererComponent {
         this.formArray.push(new FormControl());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: LeafListRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: LeafListRendererComponent, isStandalone: true, selector: "nff-leaf-list-renderer", inputs: { leaf_: "leaf_", initialValue: "initialValue", formArray: "formArray", editable: "editable", minItems: "minItems" }, outputs: { message: "message" }, host: { properties: { "class.stacked": "this.stacked" } }, ngImport: i0, template: "@if (formArray && leaf_) {\n    @for (control of formArray.controls; track $index) {\n      <div class=\"field-item\">\n        <nff-anon-leaf-renderer\n          [AnonLeaf]=\"leaf_\" [control]=\"control\"\n          [removable]=\"minItems == null || formArray.length > minItems\"\n          [index]=\"$index\"\n          [editable]=\"editable\"\n          [label]=\"leaf_.label ?? leaf_.name\"\n          (remove)=\"removeItem($index)\"\n        />\n        @if (editable) {\n          <div class=\"actions\">\n            @if (formArray.length > minItems) {\n              <button class=\"remove-button small-icon-button\" matIconButton (click)=\"removeItem($index)\">\n                <mat-icon matPrefix>delete</mat-icon>\n              </button>\n            }\n            @if ($last) {\n              <button class=\"add-button small-icon-button\" matIconButton (click)=\"addItem()\">\n                <mat-icon matPrefix>add</mat-icon>\n              </button>\n            }\n            <div class=\"actions-spacer\"></div>\n          </div>\n        }\n      </div>\n    }\n}\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap;gap:16px}:host(.stacked){flex-basis:100%}.fields{position:relative;display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}.field-item{display:flex;flex-direction:row;gap:4px;align-items:center;flex:1 1 0}.actions{z-index:100;display:flex;flex-direction:column;align-items:flex-end;gap:4px;height:100%}.actions-spacer{height:20px}nff-anon-leaf-renderer{width:100%}.add-button{background-color:var(--mat-sys-primary-container);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.remove-button{background-color:var(--mat-sys-error-container);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.title{display:flex;flex-direction:row;gap:8px;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: AnonLeafRendererComponent, selector: "nff-anon-leaf-renderer", inputs: ["AnonLeaf", "initialValue", "control", "removable", "editable", "index", "label"], outputs: ["remove"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: LeafListRendererComponent, isStandalone: true, selector: "nff-leaf-list-renderer", inputs: { leaf_: "leaf_", initialValue: "initialValue", formArray: "formArray", editable: "editable", minItems: "minItems" }, outputs: { message: "message" }, host: { properties: { "class.stacked": "this.stacked" } }, ngImport: i0, template: "@if (formArray && leaf_) {\n    @for (control of formArray.controls; track $index) {\n      <div class=\"field-item\">\n        <nff-anon-leaf-renderer\n          [AnonLeaf]=\"leaf_\" [control]=\"control\"\n          [removable]=\"minItems == null || formArray.length > minItems\"\n          [index]=\"$index\"\n          [editable]=\"editable\"\n          [label]=\"leaf_.label ?? leaf_.name\"\n          (remove)=\"removeItem($index)\"\n        />\n        @if (editable) {\n          <div class=\"actions\">\n            @if (formArray.length > minItems) {\n              <button class=\"remove-button small-icon-button\" matIconButton [attr.aria-label]=\"'Remove ' + (leaf_.label ?? leaf_.name) + ' item'\" (click)=\"removeItem($index)\">\n                <mat-icon matPrefix>delete</mat-icon>\n              </button>\n            }\n            @if ($last) {\n              <button class=\"add-button small-icon-button\" matIconButton [attr.aria-label]=\"'Add ' + (leaf_.label ?? leaf_.name) + ' item'\" (click)=\"addItem()\">\n                <mat-icon matPrefix>add</mat-icon>\n              </button>\n            }\n            <div class=\"actions-spacer\"></div>\n          </div>\n        }\n      </div>\n    }\n}\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap;gap:16px}:host(.stacked){flex-basis:100%}.fields{position:relative;display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}.field-item{display:flex;flex-direction:row;gap:4px;align-items:center;flex:1 1 0}.actions{z-index:100;display:flex;flex-direction:column;align-items:flex-end;gap:4px;height:100%}.actions-spacer{height:20px}nff-anon-leaf-renderer{width:100%}.add-button{background-color:var(--mat-sys-primary-container);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.remove-button{background-color:var(--mat-sys-error-container);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.title{display:flex;flex-direction:row;gap:8px;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: AnonLeafRendererComponent, selector: "nff-anon-leaf-renderer", inputs: ["AnonLeaf", "initialValue", "control", "removable", "editable", "index", "label"], outputs: ["remove"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: LeafListRendererComponent, decorators: [{
             type: Component,
@@ -715,7 +831,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         AnonLeafRendererComponent,
                         MatButtonModule,
                         MatPrefix,
-                    ], template: "@if (formArray && leaf_) {\n    @for (control of formArray.controls; track $index) {\n      <div class=\"field-item\">\n        <nff-anon-leaf-renderer\n          [AnonLeaf]=\"leaf_\" [control]=\"control\"\n          [removable]=\"minItems == null || formArray.length > minItems\"\n          [index]=\"$index\"\n          [editable]=\"editable\"\n          [label]=\"leaf_.label ?? leaf_.name\"\n          (remove)=\"removeItem($index)\"\n        />\n        @if (editable) {\n          <div class=\"actions\">\n            @if (formArray.length > minItems) {\n              <button class=\"remove-button small-icon-button\" matIconButton (click)=\"removeItem($index)\">\n                <mat-icon matPrefix>delete</mat-icon>\n              </button>\n            }\n            @if ($last) {\n              <button class=\"add-button small-icon-button\" matIconButton (click)=\"addItem()\">\n                <mat-icon matPrefix>add</mat-icon>\n              </button>\n            }\n            <div class=\"actions-spacer\"></div>\n          </div>\n        }\n      </div>\n    }\n}\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap;gap:16px}:host(.stacked){flex-basis:100%}.fields{position:relative;display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}.field-item{display:flex;flex-direction:row;gap:4px;align-items:center;flex:1 1 0}.actions{z-index:100;display:flex;flex-direction:column;align-items:flex-end;gap:4px;height:100%}.actions-spacer{height:20px}nff-anon-leaf-renderer{width:100%}.add-button{background-color:var(--mat-sys-primary-container);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.remove-button{background-color:var(--mat-sys-error-container);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.title{display:flex;flex-direction:row;gap:8px;align-items:center}\n"] }]
+                    ], template: "@if (formArray && leaf_) {\n    @for (control of formArray.controls; track $index) {\n      <div class=\"field-item\">\n        <nff-anon-leaf-renderer\n          [AnonLeaf]=\"leaf_\" [control]=\"control\"\n          [removable]=\"minItems == null || formArray.length > minItems\"\n          [index]=\"$index\"\n          [editable]=\"editable\"\n          [label]=\"leaf_.label ?? leaf_.name\"\n          (remove)=\"removeItem($index)\"\n        />\n        @if (editable) {\n          <div class=\"actions\">\n            @if (formArray.length > minItems) {\n              <button class=\"remove-button small-icon-button\" matIconButton [attr.aria-label]=\"'Remove ' + (leaf_.label ?? leaf_.name) + ' item'\" (click)=\"removeItem($index)\">\n                <mat-icon matPrefix>delete</mat-icon>\n              </button>\n            }\n            @if ($last) {\n              <button class=\"add-button small-icon-button\" matIconButton [attr.aria-label]=\"'Add ' + (leaf_.label ?? leaf_.name) + ' item'\" (click)=\"addItem()\">\n                <mat-icon matPrefix>add</mat-icon>\n              </button>\n            }\n            <div class=\"actions-spacer\"></div>\n          </div>\n        }\n      </div>\n    }\n}\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap;gap:16px}:host(.stacked){flex-basis:100%}.fields{position:relative;display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}.field-item{display:flex;flex-direction:row;gap:4px;align-items:center;flex:1 1 0}.actions{z-index:100;display:flex;flex-direction:column;align-items:flex-end;gap:4px;height:100%}.actions-spacer{height:20px}nff-anon-leaf-renderer{width:100%}.add-button{background-color:var(--mat-sys-primary-container);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.remove-button{background-color:var(--mat-sys-error-container);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.title{display:flex;flex-direction:row;gap:8px;align-items:center}\n"] }]
         }], propDecorators: { leaf_: [{
                 type: Input
             }], initialValue: [{
@@ -733,37 +849,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 args: ['class.stacked']
             }] } });
 
-function nodeGroupChildrenList(schema) {
-    const children = schema.children ?? {};
-    return Object.entries(children).map(([key, value]) => ({
-        key,
-        value: value,
-    }));
-}
-function nodeGroupChildrenLeafs(schema) {
-    const children = schema.children ?? {};
-    return Object.entries(children).reduce((acc, [key, value]) => {
-        if (value.kind === 'leaf') {
-            acc.push({ key, value: value });
-        }
-        return acc;
-    }, []);
-}
-function removeNullAndEmptyArrays(value) {
-    if (Array.isArray(value)) {
-        const cleanedArray = value
-            .map(removeNullAndEmptyArrays)
-            .filter(v => v != null && (typeof v !== 'object' || Object.keys(v).length > 0));
-        return cleanedArray.length > 0 ? cleanedArray : undefined;
-    }
-    if (value && typeof value === 'object') {
-        const cleanedObject = Object.fromEntries(Object.entries(value)
-            .map(([k, v]) => [k, removeNullAndEmptyArrays(v)])
-            .filter(([_, v]) => v != null && (typeof v !== 'object' || Object.keys(v).length > 0)));
-        return Object.keys(cleanedObject).length > 0 ? cleanedObject : undefined;
-    }
-    return value != null ? value : undefined;
-}
 function asFormControl(control) {
     return control;
 }
@@ -787,8 +872,12 @@ class NodeMapRendererComponent {
     editable = true;
     /** Ordered view of entry keys, kept stable across renames (`addControl` appends). */
     entryKeys = [];
-    ngOnInit() {
-        this.entryKeys = Object.keys(this.formGroup.controls);
+    ngOnChanges(changes) {
+        // Re-sync whenever the bound group changes: a host may rebind the renderer
+        // to another map (e.g. the tree editor swapping documents) while this
+        // component instance survives.
+        if (changes['formGroup'])
+            this.entryKeys = Object.keys(this.formGroup.controls);
     }
     /** The value schema as a leaf (used when `value.kind === 'leaf'`). */
     get valueLeaf() {
@@ -830,7 +919,7 @@ class NodeMapRendererComponent {
     asFormControl = asFormControl;
     asFormGroup = asFormGroup;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NodeMapRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: NodeMapRendererComponent, isStandalone: true, selector: "nff-node-map-renderer", inputs: { nodeMap: "nodeMap", formGroup: "formGroup", editable: "editable" }, ngImport: i0, template: "@if (formGroup && nodeMap) {\n  <div class=\"map-node\">\n    @for (key of entryKeys; track key) {\n      <div class=\"map-entry\">\n        <mat-form-field class=\"key-field\" [appearance]=\"editable ? 'fill' : 'outline'\">\n          <mat-label>{{ nodeMap.keyLabel ?? 'Key' }}</mat-label>\n          <input\n            matInput\n            #keyInput\n            [readonly]=\"!editable\"\n            [value]=\"key\"\n            (change)=\"renameEntry(key, keyInput.value)\"\n          >\n        </mat-form-field>\n\n        <div class=\"value-field\">\n          @if (nodeMap.value.kind === 'leaf') {\n            <nff-leaf-renderer\n              [leaf_]=\"valueLeaf\"\n              [control]=\"asFormControl(formGroup.get(key))\"\n              [editable]=\"editable\"\n            />\n          } @else if (nodeMap.value.kind === 'nodeGroup') {\n            <nff-dynamic-recursive-form\n              [schema]=\"valueGroup\"\n              [formGroup]=\"asFormGroup(formGroup.get(key))\"\n              [editable]=\"editable\"\n            />\n          }\n        </div>\n\n        @if (editable && !atMin) {\n          <button class=\"remove-button small-icon-button\" matIconButton (click)=\"removeEntry(key)\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        }\n      </div>\n    }\n    @if (editable && !atMax) {\n      <button class=\"add-button small-icon-button\" matIconButton (click)=\"addEntry()\">\n        <mat-icon>add</mat-icon>\n      </button>\n    }\n  </div>\n}\n", styles: [":host{display:flex;flex:1 1 100%}.map-node{display:flex;flex-direction:column;gap:8px;width:100%}.map-title{font:var(--mat-sys-title-small);color:var(--mat-sys-on-surface-variant)}.map-entry{display:flex;flex-direction:row;gap:8px;align-items:flex-start}.key-field{flex:0 0 30%;min-width:120px}.value-field{display:flex;flex:1 1 0;min-width:0}.add-button{align-self:flex-start;background-color:var(--mat-sys-primary-container);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.remove-button{background-color:var(--mat-sys-error-container);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => MatButtonModule) }, { kind: "component", type: i0.forwardRef(() => i4$1.MatIconButton), selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatIconModule) }, { kind: "component", type: i0.forwardRef(() => i2$1.MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i2.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i2.MatLabel), selector: "mat-label" }, { kind: "ngmodule", type: i0.forwardRef(() => MatInputModule) }, { kind: "directive", type: i0.forwardRef(() => i3$1.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: "component", type: i0.forwardRef(() => LeafRendererComponent), selector: "nff-leaf-renderer", inputs: ["leaf_", "control", "initialValue", "removable", "editable", "autofocus"], outputs: ["remove"] }, { kind: "component", type: i0.forwardRef(() => DynamicRecursiveFormComponent), selector: "nff-dynamic-recursive-form", inputs: ["schema", "initialValue", "formGroup", "index", "removable", "title", "editable", "addButtonCallback"], outputs: ["remove", "editableChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: NodeMapRendererComponent, isStandalone: true, selector: "nff-node-map-renderer", inputs: { nodeMap: "nodeMap", formGroup: "formGroup", editable: "editable" }, usesOnChanges: true, ngImport: i0, template: "@if (formGroup && nodeMap) {\n  <div class=\"map-node\">\n    @for (key of entryKeys; track key) {\n      <div class=\"map-entry\">\n        <mat-form-field class=\"key-field\" [appearance]=\"editable ? 'fill' : 'outline'\">\n          <mat-label>{{ nodeMap.keyLabel ?? 'Key' }}</mat-label>\n          <!-- On a rejected rename (empty, duplicate, keyPattern violation) the\n               input snaps back to the committed key, so the display never\n               disagrees with the key getRawValue() will emit. -->\n          <input\n            matInput\n            #keyInput\n            [readonly]=\"!editable\"\n            [value]=\"key\"\n            (change)=\"renameEntry(key, keyInput.value); keyInput.value = key\"\n          >\n        </mat-form-field>\n\n        <!-- Index access, not .get(): entry keys are arbitrary runtime data and\n             .get() would split a key like 'web.example.com' into a dotted path. -->\n        <div class=\"value-field\">\n          @if (nodeMap.value.kind === 'leaf') {\n            <nff-leaf-renderer\n              [leaf_]=\"valueLeaf\"\n              [control]=\"asFormControl(formGroup.controls[key])\"\n              [editable]=\"editable\"\n            />\n          } @else if (nodeMap.value.kind === 'nodeGroup') {\n            <nff-dynamic-recursive-form\n              [schema]=\"valueGroup\"\n              [formGroup]=\"asFormGroup(formGroup.controls[key])\"\n              [editable]=\"editable\"\n            />\n          }\n        </div>\n\n        @if (editable && !atMin) {\n          <button class=\"remove-button small-icon-button\" matIconButton [attr.aria-label]=\"'Remove ' + key + ' entry'\" (click)=\"removeEntry(key)\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        }\n      </div>\n    }\n    @if (editable && !atMax) {\n      <button class=\"add-button small-icon-button\" matIconButton aria-label=\"Add entry\" (click)=\"addEntry()\">\n        <mat-icon>add</mat-icon>\n      </button>\n    }\n  </div>\n}\n", styles: [":host{display:flex;flex:1 1 100%}.map-node{display:flex;flex-direction:column;gap:8px;width:100%}.map-entry{display:flex;flex-direction:row;gap:8px;align-items:flex-start}.key-field{flex:0 0 30%;min-width:120px}.value-field{display:flex;flex:1 1 0;min-width:0}.add-button{align-self:flex-start;background-color:var(--mat-sys-primary-container);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.remove-button{background-color:var(--mat-sys-error-container);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => MatButtonModule) }, { kind: "component", type: i0.forwardRef(() => i2$1.MatIconButton), selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatIconModule) }, { kind: "component", type: i0.forwardRef(() => i1$1.MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i2.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i2.MatLabel), selector: "mat-label" }, { kind: "ngmodule", type: i0.forwardRef(() => MatInputModule) }, { kind: "directive", type: i0.forwardRef(() => 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: "component", type: i0.forwardRef(() => LeafRendererComponent), selector: "nff-leaf-renderer", inputs: ["leaf_", "control", "removable", "editable", "autofocus"], outputs: ["remove"] }, { kind: "component", type: i0.forwardRef(() => DynamicRecursiveFormComponent), selector: "nff-dynamic-recursive-form", inputs: ["schema", "initialValue", "formGroup", "index", "removable", "title", "editable", "addButtonCallback", "focusLeaf"], outputs: ["remove", "editableChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NodeMapRendererComponent, decorators: [{
             type: Component,
@@ -843,7 +932,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         // node-map-renderer and dynamic-recursive-form import each other (a map value
                         // may be a group); forwardRef defers the reference to break the cycle.
                         forwardRef(() => DynamicRecursiveFormComponent),
-                    ], template: "@if (formGroup && nodeMap) {\n  <div class=\"map-node\">\n    @for (key of entryKeys; track key) {\n      <div class=\"map-entry\">\n        <mat-form-field class=\"key-field\" [appearance]=\"editable ? 'fill' : 'outline'\">\n          <mat-label>{{ nodeMap.keyLabel ?? 'Key' }}</mat-label>\n          <input\n            matInput\n            #keyInput\n            [readonly]=\"!editable\"\n            [value]=\"key\"\n            (change)=\"renameEntry(key, keyInput.value)\"\n          >\n        </mat-form-field>\n\n        <div class=\"value-field\">\n          @if (nodeMap.value.kind === 'leaf') {\n            <nff-leaf-renderer\n              [leaf_]=\"valueLeaf\"\n              [control]=\"asFormControl(formGroup.get(key))\"\n              [editable]=\"editable\"\n            />\n          } @else if (nodeMap.value.kind === 'nodeGroup') {\n            <nff-dynamic-recursive-form\n              [schema]=\"valueGroup\"\n              [formGroup]=\"asFormGroup(formGroup.get(key))\"\n              [editable]=\"editable\"\n            />\n          }\n        </div>\n\n        @if (editable && !atMin) {\n          <button class=\"remove-button small-icon-button\" matIconButton (click)=\"removeEntry(key)\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        }\n      </div>\n    }\n    @if (editable && !atMax) {\n      <button class=\"add-button small-icon-button\" matIconButton (click)=\"addEntry()\">\n        <mat-icon>add</mat-icon>\n      </button>\n    }\n  </div>\n}\n", styles: [":host{display:flex;flex:1 1 100%}.map-node{display:flex;flex-direction:column;gap:8px;width:100%}.map-title{font:var(--mat-sys-title-small);color:var(--mat-sys-on-surface-variant)}.map-entry{display:flex;flex-direction:row;gap:8px;align-items:flex-start}.key-field{flex:0 0 30%;min-width:120px}.value-field{display:flex;flex:1 1 0;min-width:0}.add-button{align-self:flex-start;background-color:var(--mat-sys-primary-container);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.remove-button{background-color:var(--mat-sys-error-container);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}\n"] }]
+                    ], template: "@if (formGroup && nodeMap) {\n  <div class=\"map-node\">\n    @for (key of entryKeys; track key) {\n      <div class=\"map-entry\">\n        <mat-form-field class=\"key-field\" [appearance]=\"editable ? 'fill' : 'outline'\">\n          <mat-label>{{ nodeMap.keyLabel ?? 'Key' }}</mat-label>\n          <!-- On a rejected rename (empty, duplicate, keyPattern violation) the\n               input snaps back to the committed key, so the display never\n               disagrees with the key getRawValue() will emit. -->\n          <input\n            matInput\n            #keyInput\n            [readonly]=\"!editable\"\n            [value]=\"key\"\n            (change)=\"renameEntry(key, keyInput.value); keyInput.value = key\"\n          >\n        </mat-form-field>\n\n        <!-- Index access, not .get(): entry keys are arbitrary runtime data and\n             .get() would split a key like 'web.example.com' into a dotted path. -->\n        <div class=\"value-field\">\n          @if (nodeMap.value.kind === 'leaf') {\n            <nff-leaf-renderer\n              [leaf_]=\"valueLeaf\"\n              [control]=\"asFormControl(formGroup.controls[key])\"\n              [editable]=\"editable\"\n            />\n          } @else if (nodeMap.value.kind === 'nodeGroup') {\n            <nff-dynamic-recursive-form\n              [schema]=\"valueGroup\"\n              [formGroup]=\"asFormGroup(formGroup.controls[key])\"\n              [editable]=\"editable\"\n            />\n          }\n        </div>\n\n        @if (editable && !atMin) {\n          <button class=\"remove-button small-icon-button\" matIconButton [attr.aria-label]=\"'Remove ' + key + ' entry'\" (click)=\"removeEntry(key)\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        }\n      </div>\n    }\n    @if (editable && !atMax) {\n      <button class=\"add-button small-icon-button\" matIconButton aria-label=\"Add entry\" (click)=\"addEntry()\">\n        <mat-icon>add</mat-icon>\n      </button>\n    }\n  </div>\n}\n", styles: [":host{display:flex;flex:1 1 100%}.map-node{display:flex;flex-direction:column;gap:8px;width:100%}.map-entry{display:flex;flex-direction:row;gap:8px;align-items:flex-start}.key-field{flex:0 0 30%;min-width:120px}.value-field{display:flex;flex:1 1 0;min-width:0}.add-button{align-self:flex-start;background-color:var(--mat-sys-primary-container);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.remove-button{background-color:var(--mat-sys-error-container);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}\n"] }]
         }], propDecorators: { nodeMap: [{
                 type: Input
             }], formGroup: [{
@@ -871,12 +960,26 @@ class DynamicRecursiveFormComponent {
     editable = model(false, ...(ngDevMode ? [{ debugName: "editable" }] : []));
     /** Invoked with {@link index} to append a new sibling form to a parent list. */
     addButtonCallback = input(null, ...(ngDevMode ? [{ debugName: "addButtonCallback" }] : []));
+    /**
+     * Key of a presence leaf whose field should grab focus when it renders — lets
+     * a host that added the control itself (e.g. the tree editor's optionals
+     * menu) hand focus to the new field, like the form's own add button does.
+     */
+    focusLeaf = input(null, ...(ngDevMode ? [{ debugName: "focusLeaf" }] : []));
     /** True when the schema is a root group (rendered flat, without a wrapping card). */
     root = computed(() => this.schema().root ?? false, ...(ngDevMode ? [{ debugName: "root" }] : []));
     ngOnInit() {
         const initial = this.initialValue();
         if (initial) {
-            this.formGroup().patchValue(initial);
+            const group = this.formGroup();
+            // Presence keys carried by the initial value need controls first:
+            // patchValue silently skips keys that have none, dropping the data.
+            for (const [key, child] of Object.entries(this.schema().children ?? {})) {
+                if ('presence' in child && child.presence && key in initial && !group.get(key)) {
+                    group.addControl(key, buildControl(child, initial[key]));
+                }
+            }
+            group.patchValue(initial);
         }
     }
     get nodeGroupChildrenList() {
@@ -889,59 +992,44 @@ class DynamicRecursiveFormComponent {
     emitRemoveEvent() {
         this.remove.emit();
     }
-    /**
-     * Add or remove a presence group's control on this form. Removing it drops the
-     * group from `form.value`; adding it rebuilds the sub-group from its schema.
-     */
-    togglePresence(key, schema, present) {
-        const group = this.formGroup();
-        if (present) {
-            if (!group.get(key)) {
-                group.addControl(key, buildFormFromSchema(schema));
-            }
-        }
-        else if (group.get(key)) {
-            group.removeControl(key);
-        }
-    }
     /** The key of the presence leaf the user just enabled; its field grabs focus when rendered. */
     presenceFocusKey = null;
     /**
-     * Add or remove a presence leaf's control on this form. Removing it drops the
-     * leaf from `form.value`; adding it rebuilds the control from its schema and
-     * focuses the rendered field.
+     * Add or remove a presence node's control on this form — any presence kind:
+     * group, leaf, map, or choice. Removing it drops the key from `form.value`;
+     * adding it builds the control fresh from its schema (nested presence
+     * children start absent).
      */
-    toggleLeafPresence(key, schema, present) {
+    toggleNodePresence(key, schema, present) {
         const group = this.formGroup();
         if (present) {
             if (!group.get(key)) {
                 group.addControl(key, buildControl(schema));
-                this.presenceFocusKey = key;
             }
         }
         else if (group.get(key)) {
             group.removeControl(key);
-            if (this.presenceFocusKey === key)
-                this.presenceFocusKey = null;
         }
     }
     /**
-     * Add or remove a presence map's or choice's control on this form. Removing it
-     * drops the node from `form.value`; adding it rebuilds the control (an empty
-     * map, or a choice group holding `__case`) from its schema.
+     * {@link toggleNodePresence} for a presence leaf, additionally focusing the
+     * rendered field when the toggle just created it.
      */
-    toggleNodePresence(key, schema, present) {
-        const group = this.formGroup();
-        if (present) {
-            if (!group.get(key)) {
-                group.addControl(key, buildControl(schema));
-            }
-        }
-        else if (group.get(key)) {
-            group.removeControl(key);
+    toggleLeafPresence(key, schema, present) {
+        const had = !!this.formGroup().get(key);
+        this.toggleNodePresence(key, schema, present);
+        if (present && !had) {
+            this.presenceFocusKey = key;
+            // Retire the request once the field has rendered and taken focus, so a
+            // later re-creation of the same renderer cannot steal focus again.
+            setTimeout(() => {
+                if (this.presenceFocusKey === key)
+                    this.presenceFocusKey = null;
+            });
         }
+        if (!present && this.presenceFocusKey === key)
+            this.presenceFocusKey = null;
     }
-    CASE_KEY = CASE_KEY;
     objectKeys(obj) {
         return Object.keys(obj);
     }
@@ -978,7 +1066,7 @@ class DynamicRecursiveFormComponent {
     asFormArray = asFormArray;
     asFormControl = asFormControl;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: DynamicRecursiveFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: DynamicRecursiveFormComponent, isStandalone: true, selector: "nff-dynamic-recursive-form", inputs: { schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: true, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, addButtonCallback: { classPropertyName: "addButtonCallback", publicName: "addButtonCallback", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { remove: "remove", editable: "editableChange" }, ngImport: i0, template: "@if (!root()) {\n  <ng-template #formRender>\n    <div class=\"form-content\" [formGroup]=\"formGroup()\">\n      <div class=\"leafs-container\">\n        <div class=\"fields\">\n          @for (childItem of nodeGroupChildrenList; track $index) {\n            @let child = childItem.value;\n            @if (child.kind == 'leaf' && child.presence) {\n              @if (formGroup().get(childItem.key)) {\n                <!-- Present: the field takes the add button's place in the row; its\n                     remove control drops the leaf back to the unchecked state. -->\n                <nff-leaf-renderer\n                  [leaf_]=child\n                  [control]=asFormControl(formGroup().get(childItem.key))\n                  [removable]=true\n                  [editable]=\"editable()\"\n                  [initialValue]=\"formGroup().get(childItem.key)?.value\"\n                  [autofocus]=\"presenceFocusKey === childItem.key\"\n                  (remove)=\"toggleLeafPresence(childItem.key, child, false)\"\n                />\n              } @else {\n                <button\n                  matButton=\"outlined\"\n                  class=\"presence-leaf-add\"\n                  [disabled]=\"!editable()\"\n                  (click)=\"toggleLeafPresence(childItem.key, child, true)\"\n                >\n                  <mat-icon>add</mat-icon> Add {{ child.label ?? child.name }}\n                </button>\n              }\n            } @else if (child.kind == 'leaf') {\n              <nff-leaf-renderer\n                [leaf_]=child\n                [control]=asFormControl(formGroup().get(child.name))\n                [removable]=false\n                [editable]=\"editable()\"\n                [initialValue]=\"formGroup().get(child.name)?.value\"\n              />\n            }\n          }\n          @for (childItem of nodeGroupChildrenList; track $index) {\n            @let child = childItem.value;\n            @if (child.kind == 'leafList') {\n              <nff-leaf-list-renderer\n                [leaf_]=\"child\"\n                [editable]=\"editable()\"\n                [formArray]=\"asFormArray(formGroup().get(child.name))\"\n                [initialValue]=\"formGroup().get(child.name)?.value\"\n              />\n            }\n          }\n        </div>\n      </div>\n      @for (childItem of nodeGroupChildrenList; track $index) {\n        @let child = childItem.value;\n        @if (child.kind == 'nodeGroup' && child.presence) {\n          <div class=\"presence-group\">\n            <mat-checkbox\n              [checked]=\"!!formGroup().get(childItem.key)\"\n              [disabled]=\"!editable()\"\n              (change)=\"togglePresence(childItem.key, child, $event.checked)\"\n            >{{ child.label ?? child.name }}</mat-checkbox>\n            @if (formGroup().get(childItem.key)) {\n              <nff-dynamic-recursive-form\n                [schema]=\"flatGroup(child)\"\n                [formGroup]=\"asFormGroup(formGroup().get(childItem.key))\"\n                [editable]=\"editable()\"\n              />\n            }\n          </div>\n        }\n        @else if (child.kind == 'nodeGroup') {\n          <nff-dynamic-recursive-form\n            [schema]=\"child\"\n            [formGroup]=\"asFormGroup(formGroup().get(child.name))\"\n            [initialValue]=\"formGroup().get(child.name)?.value\"\n            [editable]=\"editable()\"\n          />\n        }\n        @else if (child.kind == 'choice') {\n          @let choiceGroup = asFormGroup(formGroup().get(childItem.key));\n          @let selectedCase = activeCase(childItem.key);\n          <mat-expansion-panel class=\"node-section\" [expanded]=\"child.presence ? !!choiceGroup : !child.appearance?.collapsed\" togglePosition=\"before\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                @if (child.presence) {\n                  <mat-checkbox\n                    [checked]=\"!!choiceGroup\"\n                    [disabled]=\"!editable()\"\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"toggleNodePresence(childItem.key, child, $event.checked)\"\n                  >{{ child.label ?? child.name }}</mat-checkbox>\n                } @else {\n                  {{ child.label ?? child.name }}\n                }\n              </mat-panel-title>\n            </mat-expansion-panel-header>\n            @if (choiceGroup) {\n              <div class=\"choice-group\" [formGroup]=\"choiceGroup\">\n                <mat-form-field [appearance]=\"editable() ? 'fill' : 'outline'\">\n                  <mat-label>Selected option</mat-label>\n                  <mat-select\n                    [formControlName]=\"CASE_KEY\"\n                    (selectionChange)=\"switchCase(childItem.key, child, $event.value)\"\n                  >\n                    @for (caseName of objectKeys(child.cases); track caseName) {\n                      <mat-option [value]=\"caseName\">{{ caseLabel(child, caseName) }}</mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n                @if (selectedCase) {\n                  <nff-dynamic-recursive-form\n                    [schema]=\"caseAsGroup(child, selectedCase)\"\n                    [formGroup]=\"choiceGroup\"\n                    [editable]=\"editable()\"\n                  />\n                }\n              </div>\n            }\n          </mat-expansion-panel>\n        }\n      }\n\n      @for (childItem of nodeGroupChildrenList; track $index) {\n        @let child = childItem.value;\n        @if (child.kind == 'nodeGroupList') {\n          <nff-node-group-list-renderer\n            [nodeGroupList]=\"child\"\n            [formArray]=\"asFormArray(formGroup().get(child.name))\"\n            [initialValue]=\"formGroup().get(child.name)?.value\"\n            [editable]=\"editable()\"\n          />\n        }\n      }\n      @for (childItem of nodeGroupChildrenList; track $index) {\n        @let child = childItem.value;\n        @if (child.kind == 'map') {\n          @let mapGroup = asFormGroup(formGroup().get(childItem.key));\n          <mat-expansion-panel class=\"node-section\" [expanded]=\"child.presence ? !!mapGroup : !child.appearance?.collapsed\" togglePosition=\"before\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                @if (child.presence) {\n                  <mat-checkbox\n                    [checked]=\"!!mapGroup\"\n                    [disabled]=\"!editable()\"\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"toggleNodePresence(childItem.key, child, $event.checked)\"\n                  >{{ child.label ?? child.name }}</mat-checkbox>\n                } @else {\n                  {{ child.label ?? child.name }}\n                }\n              </mat-panel-title>\n            </mat-expansion-panel-header>\n            @if (mapGroup) {\n              <nff-node-map-renderer\n                [nodeMap]=\"child\"\n                [formGroup]=\"mapGroup\"\n                [editable]=\"editable()\"\n              />\n            }\n          </mat-expansion-panel>\n        }\n      }\n    </div>\n  </ng-template>\n  @if (schema().appearance?.flatten) {\n    <div class=\"flattened-form\">\n    <ng-container *ngTemplateOutlet=\"formRender\"></ng-container>\n      <div class=\"flattened-actions\">\n        @if (editable() && index() != null && addButtonCallback() != null) {\n          <button matIconButton  matTooltip=\"+ Add new {{ schema().label ?? schema().name }}\" class=\"add-button small-icon-button\" (click)=\"addButtonCallback()!(index()!)\">\n            <mat-icon>add</mat-icon>\n          </button>\n        }\n        @if (editable() && removable()) {\n          <button matIconButton  class=\"remove-button small-icon-button\" (click)=\"emitRemoveEvent(); $event.stopPropagation()\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        }\n      </div>\n    </div>\n  }\n  @else {\n  <mat-expansion-panel class=\"node-section\" [expanded]=\"!schema().appearance?.collapsed\" togglePosition=\"before\">\n    <mat-expansion-panel-header>\n      <mat-panel-title class=\"config-form-subsection-card\">\n        {{ title() ?? schema().label ?? schema().name }}\n      </mat-panel-title>\n      <mat-panel-description class=\"section-actions\">\n        <button matIconButton class=\"small-icon-button\" [class]=\"{ 'edit-icon': !editable() }\" (click)=\"editable.set(!editable()); $event.stopPropagation()\">\n          <mat-icon>edit</mat-icon>\n        </button>\n        @if (editable() && index() != null && addButtonCallback() != null) {\n          <button matIconButton matTooltip=\"+ Add new {{ schema().label ?? schema().name }}\" class=\"add-button small-icon-button\" (click)=\"addButtonCallback()!(index()!); $event.stopPropagation()\">\n            <mat-icon>add</mat-icon>\n          </button>\n        }\n        @if (editable() && removable()) {\n          <button matIconButton class=\"remove-button small-icon-button\" (click)=\"emitRemoveEvent(); $event.stopPropagation()\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        }\n      </mat-panel-description>\n    </mat-expansion-panel-header>\n    <ng-container *ngTemplateOutlet=\"formRender\"></ng-container>\n  </mat-expansion-panel>\n  }\n} @else {\n  <div class=\"form-content\" [formGroup]=\"formGroup()\">\n    <div class=\"leafs-container\">\n      <div class=\"fields\">\n        <button matIconButton class=\"small-icon-button\"  [class]=\"{ 'edit-icon': !editable() }\"  (click)=\"editable.set(!editable())\">\n          <mat-icon>edit</mat-icon>\n        </button>\n        @for (childItem of nodeGroupChildrenList; track $index) {\n          @let child = childItem.value;\n          @if (child.kind == 'leaf' && child.presence) {\n            @if (formGroup().get(childItem.key)) {\n              <!-- Present: the field takes the add button's place in the row; its\n                   remove control drops the leaf back to the unchecked state. -->\n              <nff-leaf-renderer\n                [leaf_]=child\n                [control]=asFormControl(formGroup().get(childItem.key))\n                [removable]=true\n                [editable]=\"editable()\"\n                [initialValue]=\"formGroup().get(childItem.key)?.value\"\n                [autofocus]=\"presenceFocusKey === childItem.key\"\n                (remove)=\"toggleLeafPresence(childItem.key, child, false)\"\n              />\n            } @else {\n              <button\n                matButton=\"outlined\"\n                class=\"presence-leaf-add\"\n                [disabled]=\"!editable()\"\n                (click)=\"toggleLeafPresence(childItem.key, child, true)\"\n              >\n                <mat-icon>add</mat-icon> Add {{ child.label ?? child.name }}\n              </button>\n            }\n          } @else if (child.kind == 'leaf') {\n            <nff-leaf-renderer\n              [leaf_]=child\n              [control]=asFormControl(formGroup().get(child.name))\n              [removable]=false\n              [editable]=\"editable()\"\n              [initialValue]=\"formGroup().get(child.name)?.value\"\n            />\n          }\n        }\n        @for (childItem of nodeGroupChildrenList; track $index) {\n          @let child = childItem.value;\n          @if (child.kind == 'leafList') {\n            <nff-leaf-list-renderer\n              [leaf_]=\"child\"\n              [editable]=\"editable()\"\n              [formArray]=\"asFormArray(formGroup().get(child.name))\"\n              [initialValue]=\"formGroup().get(child.name)?.value\"\n            />\n          }\n        }\n      </div>\n    </div>\n    @for (childItem of nodeGroupChildrenList; track $index) {\n      @let child = childItem.value;\n      @if (child.kind == 'choice') {\n        @let choiceGroup = asFormGroup(formGroup().get(childItem.key));\n        @let selectedCase = activeCase(childItem.key);\n        <mat-expansion-panel class=\"node-section\" [expanded]=\"child.presence ? !!choiceGroup : !child.appearance?.collapsed\" togglePosition=\"before\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>\n              @if (child.presence) {\n                <mat-checkbox\n                  [checked]=\"!!choiceGroup\"\n                  [disabled]=\"!editable()\"\n                  (click)=\"$event.stopPropagation()\"\n                  (change)=\"toggleNodePresence(childItem.key, child, $event.checked)\"\n                >{{ child.label ?? child.name }}</mat-checkbox>\n              } @else {\n                {{ child.label ?? child.name }}\n              }\n            </mat-panel-title>\n          </mat-expansion-panel-header>\n          @if (choiceGroup) {\n            <div class=\"choice-group\" [formGroup]=\"choiceGroup\">\n              <mat-form-field [appearance]=\"editable() ? 'fill' : 'outline'\">\n                <mat-label>Selected option</mat-label>\n                <mat-select\n                  [formControlName]=\"CASE_KEY\"\n                  (selectionChange)=\"switchCase(childItem.key, child, $event.value)\"\n                >\n                  @for (caseName of objectKeys(child.cases); track caseName) {\n                    <mat-option [value]=\"caseName\">{{ caseLabel(child, caseName) }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n              @if (selectedCase) {\n                <nff-dynamic-recursive-form\n                  [schema]=\"caseAsGroup(child, selectedCase)\"\n                  [formGroup]=\"choiceGroup\"\n                  [editable]=\"editable()\"\n                />\n              }\n            </div>\n          }\n        </mat-expansion-panel>\n      }\n    }\n    @for (childItem of nodeGroupChildrenList; track $index) {\n      @let child = childItem.value;\n      @if (child.kind == 'map') {\n        @let mapGroup = asFormGroup(formGroup().get(childItem.key));\n        <mat-expansion-panel class=\"node-section\" [expanded]=\"child.presence ? !!mapGroup : !child.appearance?.collapsed\" togglePosition=\"before\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>\n              @if (child.presence) {\n                <mat-checkbox\n                  [checked]=\"!!mapGroup\"\n                  [disabled]=\"!editable()\"\n                  (click)=\"$event.stopPropagation()\"\n                  (change)=\"toggleNodePresence(childItem.key, child, $event.checked)\"\n                >{{ child.label ?? child.name }}</mat-checkbox>\n              } @else {\n                {{ child.label ?? child.name }}\n              }\n            </mat-panel-title>\n          </mat-expansion-panel-header>\n          @if (mapGroup) {\n            <nff-node-map-renderer\n              [nodeMap]=\"child\"\n              [formGroup]=\"mapGroup\"\n              [editable]=\"editable()\"\n            />\n          }\n        </mat-expansion-panel>\n      }\n    }\n    <mat-accordion multi>\n      @for (childItem of nodeGroupChildrenList; track $index) {\n        @let child = childItem.value;\n        @if (child.kind == 'nodeGroupList') {\n          <mat-expansion-panel togglePosition=\"before\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                {{ title() ?? child.label ?? child.name }}\n              </mat-panel-title>\n            </mat-expansion-panel-header>\n            <nff-node-group-list-renderer\n              [nodeGroupList]=\"child\"\n              [formArray]=\"asFormArray(formGroup().get(child.name))\"\n              [initialValue]=\"formGroup().get(child.name)?.value\"\n              [editable]=\"editable()\"\n            />\n          </mat-expansion-panel>\n        }\n      }\n      @for (childItem of nodeGroupChildrenList; track $index) {\n        @let child = childItem.value;\n        @if (child.kind == 'nodeGroup' && child.presence) {\n          <mat-expansion-panel togglePosition=\"before\" [expanded]=\"!!formGroup().get(childItem.key)\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <mat-checkbox\n                  [checked]=\"!!formGroup().get(childItem.key)\"\n                  [disabled]=\"!editable()\"\n                  (click)=\"$event.stopPropagation()\"\n                  (change)=\"togglePresence(childItem.key, child, $event.checked)\"\n                >{{ child.label ?? child.name }}</mat-checkbox>\n              </mat-panel-title>\n            </mat-expansion-panel-header>\n            @if (formGroup().get(childItem.key)) {\n              <nff-dynamic-recursive-form\n                [schema]=\"flatGroup(child)\"\n                [formGroup]=\"asFormGroup(formGroup().get(childItem.key))\"\n                [editable]=\"editable()\"\n              />\n            }\n          </mat-expansion-panel>\n        }\n        @else if (child.kind == 'nodeGroup') {\n          <nff-dynamic-recursive-form\n            [schema]=\"child\"\n            [formGroup]=\"asFormGroup(formGroup().get(child.name))\"\n            [initialValue]=\"formGroup().get(child.name)?.value\"\n            [editable]=\"editable()\"\n          />\n        }\n      }\n    </mat-accordion>\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;flex-wrap:wrap;width:100%;margin:4px 0}.presence-group,.choice-group{display:flex;flex-direction:column;gap:8px}.node-section{width:100%;margin:4px 0}.section-actions{justify-content:flex-end;align-items:center;gap:4px}.presence-leaf-add{flex:0 1 auto;align-self:flex-start;margin-top:8px}.fields{display:flex;flex-direction:row;gap:8px;flex-wrap:wrap;align-items:flex-start;flex:1 1 0}nff-leaf-list-renderer{flex:1}.mat-expansion-panel-content,.mat-expansion-panel-content:hover{display:flex;flex-direction:row;gap:16px}.form-content{display:flex;flex-direction:column;flex-wrap:wrap;width:100%}.leafs-container{display:flex;flex-direction:column;gap:8px;flex:1 1 0}mat-panel-description{display:flex;flex-direction:row}.node-groups-container{display:flex;flex-direction:column;flex-basis:100%}.section-actions{display:flex;flex-direction:row;gap:8px;justify-content:flex-end;width:100%}mat-card{padding:0;width:100%}.mat-card-no-broder{border:0}mat-card-content{box-sizing:border-box;padding:16px}mat-card-header{display:flex;flex-direction:row;align-items:flex-start;padding:16px;gap:16px}.edit-icon{opacity:.2;animation:icon-released .5s}.edit-icon:hover{opacity:1;animation:icon-transition .5s}.card-actions{display:flex;flex-direction:row;align-items:center;gap:4px}.flattened-actions{display:flex;flex-direction:column;align-items:flex-start;align-self:flex-start;gap:4px}.add-button{background-color:var(--mat-sys-primary-container);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.remove-button{background-color:var(--mat-sys-error-container);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.flattened-form{display:flex;flex-direction:row;width:100%;gap:4px}.flattened-style-actions{display:flex;flex-direction:row;gap:8px;justify-content:flex-end;align-items:flex-start}@keyframes icon-hovered{0%{opacity:.4}}@keyframes icon-released{0%{opacity:1}to{opacity:.4}}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => DynamicRecursiveFormComponent), selector: "nff-dynamic-recursive-form", inputs: ["schema", "initialValue", "formGroup", "index", "removable", "title", "editable", "addButtonCallback"], outputs: ["remove", "editableChange"] }, { kind: "component", type: i0.forwardRef(() => LeafRendererComponent), selector: "nff-leaf-renderer", inputs: ["leaf_", "control", "initialValue", "removable", "editable", "autofocus"], outputs: ["remove"] }, { kind: "component", type: i0.forwardRef(() => LeafListRendererComponent), selector: "nff-leaf-list-renderer", inputs: ["leaf_", "initialValue", "formArray", "editable", "minItems"], outputs: ["message"] }, { kind: "component", type: i0.forwardRef(() => NodeGroupListRendererComponent), selector: "nff-node-group-list-renderer", inputs: ["nodeGroupList", "initialValue", "formArray", "editable", "minItems", "maxItems"], outputs: ["message"] }, { kind: "component", type: i0.forwardRef(() => NodeMapRendererComponent), selector: "nff-node-map-renderer", inputs: ["nodeMap", "formGroup", "editable"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i1.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i1.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i1.FormControlName), selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatExpansionModule) }, { kind: "directive", type: i0.forwardRef(() => i2$2.MatAccordion), selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i0.forwardRef(() => i2$2.MatExpansionPanel), selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i0.forwardRef(() => i2$2.MatExpansionPanelHeader), selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i0.forwardRef(() => i2$2.MatExpansionPanelTitle), selector: "mat-panel-title" }, { kind: "directive", type: i0.forwardRef(() => i2$2.MatExpansionPanelDescription), selector: "mat-panel-description" }, { kind: "ngmodule", type: i0.forwardRef(() => MatIconModule) }, { kind: "component", type: i0.forwardRef(() => i2$1.MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatButtonModule) }, { kind: "component", type: i0.forwardRef(() => i4$1.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: i0.forwardRef(() => i4$1.MatIconButton), selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatCardModule) }, { kind: "ngmodule", type: i0.forwardRef(() => MatCheckboxModule) }, { kind: "component", type: i0.forwardRef(() => i4.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: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i2.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i2.MatLabel), selector: "mat-label" }, { kind: "ngmodule", type: i0.forwardRef(() => MatSelectModule) }, { kind: "component", type: i0.forwardRef(() => i3.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: i0.forwardRef(() => i3.MatOption), selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i0.forwardRef(() => MatTooltip), selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: DynamicRecursiveFormComponent, isStandalone: true, selector: "nff-dynamic-recursive-form", inputs: { schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: true, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, addButtonCallback: { classPropertyName: "addButtonCallback", publicName: "addButtonCallback", isSignal: true, isRequired: false, transformFunction: null }, focusLeaf: { classPropertyName: "focusLeaf", publicName: "focusLeaf", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { remove: "remove", editable: "editableChange" }, ngImport: i0, template: "@if (!root()) {\n  <ng-template #formRender>\n    <div class=\"form-content\" [formGroup]=\"formGroup()\">\n      <div class=\"leafs-container\">\n        <div class=\"fields\">\n          @for (childItem of nodeGroupChildrenList; track $index) {\n            @let child = childItem.value;\n            @if (child.kind == 'leaf' && !child.presence) {\n              <nff-leaf-renderer\n                [leaf_]=child\n                [control]=asFormControl(formGroup().get(childItem.key))\n                [removable]=false\n                [editable]=\"editable()\"\n              />\n            }\n          }\n          @for (childItem of nodeGroupChildrenList; track $index) {\n            @let child = childItem.value;\n            @if (child.kind == 'leafList') {\n              <nff-leaf-list-renderer\n                [leaf_]=\"child\"\n                [editable]=\"editable()\"\n                [formArray]=\"asFormArray(formGroup().get(childItem.key))\"\n                [initialValue]=\"formGroup().get(childItem.key)?.value\"\n              />\n            }\n          }\n          <!-- Presence leaves trail the regular fields so their add buttons don't\n               interrupt the field flow; an enabled one keeps its trailing spot. -->\n          @for (childItem of nodeGroupChildrenList; track $index) {\n            @let child = childItem.value;\n            @if (child.kind == 'leaf' && child.presence) {\n              @if (formGroup().get(childItem.key)) {\n                <nff-leaf-renderer\n                  [leaf_]=child\n                  [control]=asFormControl(formGroup().get(childItem.key))\n                  [removable]=true\n                  [editable]=\"editable()\"\n                  [autofocus]=\"presenceFocusKey === childItem.key || focusLeaf() === childItem.key\"\n                  (remove)=\"toggleLeafPresence(childItem.key, child, false)\"\n                />\n              } @else if (editable()) {\n                <!-- Read-only mode renders nothing for an absent presence leaf:\n                     the key is simply absent, and add affordances are hidden\n                     like every other structural control. -->\n                <button\n                  matButton=\"outlined\"\n                  class=\"presence-leaf-add\"\n                  (click)=\"toggleLeafPresence(childItem.key, child, true)\"\n                >\n                  <mat-icon>add</mat-icon> Add {{ child.label ?? child.name }}\n                </button>\n              }\n            }\n          }\n        </div>\n      </div>\n      @for (childItem of nodeGroupChildrenList; track $index) {\n        @let child = childItem.value;\n        @if (child.kind == 'nodeGroup' && child.presence) {\n          <div class=\"presence-group\">\n            <mat-checkbox\n              [checked]=\"!!formGroup().get(childItem.key)\"\n              [disabled]=\"!editable()\"\n              (change)=\"toggleNodePresence(childItem.key, child, $event.checked)\"\n            >{{ child.label ?? child.name }}</mat-checkbox>\n            @if (formGroup().get(childItem.key)) {\n              <nff-dynamic-recursive-form\n                [schema]=\"flatGroup(child)\"\n                [formGroup]=\"asFormGroup(formGroup().get(childItem.key))\"\n                [editable]=\"editable()\"\n              />\n            }\n          </div>\n        }\n        @else if (child.kind == 'nodeGroup') {\n          <nff-dynamic-recursive-form\n            [schema]=\"child\"\n            [formGroup]=\"asFormGroup(formGroup().get(childItem.key))\"\n            [initialValue]=\"formGroup().get(childItem.key)?.value\"\n            [editable]=\"editable()\"\n          />\n        }\n        @else if (child.kind == 'choice') {\n          @let choiceGroup = asFormGroup(formGroup().get(childItem.key));\n          @let selectedCase = activeCase(childItem.key);\n          <mat-expansion-panel class=\"node-section\" [expanded]=\"child.presence ? !!choiceGroup : !child.appearance?.collapsed\" togglePosition=\"before\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                @if (child.presence) {\n                  <mat-checkbox\n                    [checked]=\"!!choiceGroup\"\n                    [disabled]=\"!editable()\"\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"toggleNodePresence(childItem.key, child, $event.checked)\"\n                  >{{ child.label ?? child.name }}</mat-checkbox>\n                } @else {\n                  {{ child.label ?? child.name }}\n                }\n              </mat-panel-title>\n            </mat-expansion-panel-header>\n            @if (choiceGroup) {\n              <div class=\"choice-group\">\n                <mat-form-field [appearance]=\"editable() ? 'fill' : 'outline'\">\n                  <mat-label>Selected option</mat-label>\n                  <mat-select\n                    [value]=\"activeCase(childItem.key)\"\n                    (selectionChange)=\"switchCase(childItem.key, child, $event.value)\"\n                  >\n                    @for (caseName of objectKeys(child.cases); track caseName) {\n                      <mat-option [value]=\"caseName\">{{ caseLabel(child, caseName) }}</mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n                @if (selectedCase) {\n                  <nff-dynamic-recursive-form\n                    [schema]=\"caseAsGroup(child, selectedCase)\"\n                    [formGroup]=\"choiceGroup\"\n                    [editable]=\"editable()\"\n                  />\n                }\n              </div>\n            }\n          </mat-expansion-panel>\n        }\n        @else if (child.kind == 'nodeGroupList') {\n          <nff-node-group-list-renderer\n            [nodeGroupList]=\"child\"\n            [formArray]=\"asFormArray(formGroup().get(childItem.key))\"\n            [initialValue]=\"formGroup().get(childItem.key)?.value\"\n            [editable]=\"editable()\"\n          />\n        }\n        @else if (child.kind == 'map') {\n          @let mapGroup = asFormGroup(formGroup().get(childItem.key));\n          <mat-expansion-panel class=\"node-section\" [expanded]=\"child.presence ? !!mapGroup : !child.appearance?.collapsed\" togglePosition=\"before\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                @if (child.presence) {\n                  <mat-checkbox\n                    [checked]=\"!!mapGroup\"\n                    [disabled]=\"!editable()\"\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"toggleNodePresence(childItem.key, child, $event.checked)\"\n                  >{{ child.label ?? child.name }}</mat-checkbox>\n                } @else {\n                  {{ child.label ?? child.name }}\n                }\n              </mat-panel-title>\n            </mat-expansion-panel-header>\n            @if (mapGroup) {\n              <nff-node-map-renderer\n                [nodeMap]=\"child\"\n                [formGroup]=\"mapGroup\"\n                [editable]=\"editable()\"\n              />\n            }\n          </mat-expansion-panel>\n        }\n      }\n    </div>\n  </ng-template>\n  @if (schema().appearance?.flatten) {\n    <div class=\"flattened-form\">\n    <ng-container *ngTemplateOutlet=\"formRender\"></ng-container>\n      <div class=\"flattened-actions\">\n        @if (editable() && index() != null && addButtonCallback() != null) {\n          <button matIconButton  matTooltip=\"+ Add new {{ schema().label ?? schema().name }}\" [attr.aria-label]=\"'Add new ' + (schema().label ?? schema().name)\" class=\"add-button small-icon-button\" (click)=\"addButtonCallback()!(index()!)\">\n            <mat-icon>add</mat-icon>\n          </button>\n        }\n        @if (editable() && removable()) {\n          <button matIconButton  class=\"remove-button small-icon-button\" [attr.aria-label]=\"'Remove ' + (schema().label ?? schema().name)\" (click)=\"emitRemoveEvent(); $event.stopPropagation()\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        }\n      </div>\n    </div>\n  }\n  @else {\n  <mat-expansion-panel class=\"node-section\" [expanded]=\"!schema().appearance?.collapsed\" togglePosition=\"before\">\n    <mat-expansion-panel-header>\n      <mat-panel-title class=\"config-form-subsection-card\">\n        {{ title() ?? schema().label ?? schema().name }}\n      </mat-panel-title>\n      <mat-panel-description class=\"section-actions\">\n        <button matIconButton class=\"small-icon-button\" [class]=\"{ 'edit-icon': !editable() }\" [attr.aria-label]=\"editable() ? 'Stop editing' : 'Edit'\" (click)=\"editable.set(!editable()); $event.stopPropagation()\">\n          <mat-icon>edit</mat-icon>\n        </button>\n        @if (editable() && index() != null && addButtonCallback() != null) {\n          <button matIconButton matTooltip=\"+ Add new {{ schema().label ?? schema().name }}\" [attr.aria-label]=\"'Add new ' + (schema().label ?? schema().name)\" class=\"add-button small-icon-button\" (click)=\"addButtonCallback()!(index()!); $event.stopPropagation()\">\n            <mat-icon>add</mat-icon>\n          </button>\n        }\n        @if (editable() && removable()) {\n          <button matIconButton class=\"remove-button small-icon-button\" [attr.aria-label]=\"'Remove ' + (schema().label ?? schema().name)\" (click)=\"emitRemoveEvent(); $event.stopPropagation()\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        }\n      </mat-panel-description>\n    </mat-expansion-panel-header>\n    <ng-container *ngTemplateOutlet=\"formRender\"></ng-container>\n  </mat-expansion-panel>\n  }\n} @else {\n  <div class=\"form-content\" [formGroup]=\"formGroup()\">\n    <div class=\"leafs-container\">\n      <div class=\"fields\">\n        <button matIconButton class=\"small-icon-button\"  [class]=\"{ 'edit-icon': !editable() }\"  [attr.aria-label]=\"editable() ? 'Stop editing' : 'Edit'\" (click)=\"editable.set(!editable())\">\n          <mat-icon>edit</mat-icon>\n        </button>\n        @for (childItem of nodeGroupChildrenList; track $index) {\n          @let child = childItem.value;\n          @if (child.kind == 'leaf' && !child.presence) {\n            <nff-leaf-renderer\n              [leaf_]=child\n              [control]=asFormControl(formGroup().get(childItem.key))\n              [removable]=false\n              [editable]=\"editable()\"\n            />\n          }\n        }\n        @for (childItem of nodeGroupChildrenList; track $index) {\n          @let child = childItem.value;\n          @if (child.kind == 'leafList') {\n            <nff-leaf-list-renderer\n              [leaf_]=\"child\"\n              [editable]=\"editable()\"\n              [formArray]=\"asFormArray(formGroup().get(childItem.key))\"\n              [initialValue]=\"formGroup().get(childItem.key)?.value\"\n            />\n          }\n        }\n        <!-- Presence leaves trail the regular fields so their add buttons don't\n             interrupt the field flow; an enabled one keeps its trailing spot. -->\n        @for (childItem of nodeGroupChildrenList; track $index) {\n          @let child = childItem.value;\n          @if (child.kind == 'leaf' && child.presence) {\n            @if (formGroup().get(childItem.key)) {\n              <nff-leaf-renderer\n                [leaf_]=child\n                [control]=asFormControl(formGroup().get(childItem.key))\n                [removable]=true\n                [editable]=\"editable()\"\n                [autofocus]=\"presenceFocusKey === childItem.key || focusLeaf() === childItem.key\"\n                (remove)=\"toggleLeafPresence(childItem.key, child, false)\"\n              />\n            } @else if (editable()) {\n              <button\n                matButton=\"outlined\"\n                class=\"presence-leaf-add\"\n                (click)=\"toggleLeafPresence(childItem.key, child, true)\"\n              >\n                <mat-icon>add</mat-icon> Add {{ child.label ?? child.name }}\n              </button>\n            }\n          }\n        }\n      </div>\n    </div>\n    @for (childItem of nodeGroupChildrenList; track $index) {\n      @let child = childItem.value;\n      @if (child.kind == 'choice') {\n        @let choiceGroup = asFormGroup(formGroup().get(childItem.key));\n        @let selectedCase = activeCase(childItem.key);\n        <mat-expansion-panel class=\"node-section\" [expanded]=\"child.presence ? !!choiceGroup : !child.appearance?.collapsed\" togglePosition=\"before\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>\n              @if (child.presence) {\n                <mat-checkbox\n                  [checked]=\"!!choiceGroup\"\n                  [disabled]=\"!editable()\"\n                  (click)=\"$event.stopPropagation()\"\n                  (change)=\"toggleNodePresence(childItem.key, child, $event.checked)\"\n                >{{ child.label ?? child.name }}</mat-checkbox>\n              } @else {\n                {{ child.label ?? child.name }}\n              }\n            </mat-panel-title>\n          </mat-expansion-panel-header>\n          @if (choiceGroup) {\n            <div class=\"choice-group\">\n              <mat-form-field [appearance]=\"editable() ? 'fill' : 'outline'\">\n                <mat-label>Selected option</mat-label>\n                <mat-select\n                  [value]=\"activeCase(childItem.key)\"\n                  (selectionChange)=\"switchCase(childItem.key, child, $event.value)\"\n                >\n                  @for (caseName of objectKeys(child.cases); track caseName) {\n                    <mat-option [value]=\"caseName\">{{ caseLabel(child, caseName) }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n              @if (selectedCase) {\n                <nff-dynamic-recursive-form\n                  [schema]=\"caseAsGroup(child, selectedCase)\"\n                  [formGroup]=\"choiceGroup\"\n                  [editable]=\"editable()\"\n                />\n              }\n            </div>\n          }\n        </mat-expansion-panel>\n      }\n      @else if (child.kind == 'map') {\n        @let mapGroup = asFormGroup(formGroup().get(childItem.key));\n        <mat-expansion-panel class=\"node-section\" [expanded]=\"child.presence ? !!mapGroup : !child.appearance?.collapsed\" togglePosition=\"before\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>\n              @if (child.presence) {\n                <mat-checkbox\n                  [checked]=\"!!mapGroup\"\n                  [disabled]=\"!editable()\"\n                  (click)=\"$event.stopPropagation()\"\n                  (change)=\"toggleNodePresence(childItem.key, child, $event.checked)\"\n                >{{ child.label ?? child.name }}</mat-checkbox>\n              } @else {\n                {{ child.label ?? child.name }}\n              }\n            </mat-panel-title>\n          </mat-expansion-panel-header>\n          @if (mapGroup) {\n            <nff-node-map-renderer\n              [nodeMap]=\"child\"\n              [formGroup]=\"mapGroup\"\n              [editable]=\"editable()\"\n            />\n          }\n        </mat-expansion-panel>\n      }\n      @else if (child.kind == 'nodeGroupList') {\n        <mat-expansion-panel class=\"node-section\" togglePosition=\"before\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>\n              {{ child.label ?? child.name }}\n            </mat-panel-title>\n          </mat-expansion-panel-header>\n          <nff-node-group-list-renderer\n            [nodeGroupList]=\"child\"\n            [formArray]=\"asFormArray(formGroup().get(childItem.key))\"\n            [initialValue]=\"formGroup().get(childItem.key)?.value\"\n            [editable]=\"editable()\"\n          />\n        </mat-expansion-panel>\n      }\n      @else if (child.kind == 'nodeGroup' && child.presence) {\n        <mat-expansion-panel class=\"node-section\" togglePosition=\"before\" [expanded]=\"!!formGroup().get(childItem.key)\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>\n              <mat-checkbox\n                [checked]=\"!!formGroup().get(childItem.key)\"\n                [disabled]=\"!editable()\"\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"toggleNodePresence(childItem.key, child, $event.checked)\"\n              >{{ child.label ?? child.name }}</mat-checkbox>\n            </mat-panel-title>\n          </mat-expansion-panel-header>\n          @if (formGroup().get(childItem.key)) {\n            <nff-dynamic-recursive-form\n              [schema]=\"flatGroup(child)\"\n              [formGroup]=\"asFormGroup(formGroup().get(childItem.key))\"\n              [editable]=\"editable()\"\n            />\n          }\n        </mat-expansion-panel>\n      }\n      @else if (child.kind == 'nodeGroup') {\n        <nff-dynamic-recursive-form\n          [schema]=\"child\"\n          [formGroup]=\"asFormGroup(formGroup().get(childItem.key))\"\n          [initialValue]=\"formGroup().get(childItem.key)?.value\"\n          [editable]=\"editable()\"\n        />\n      }\n    }\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;flex-wrap:wrap;width:100%;margin:4px 0}.presence-group,.choice-group{display:flex;flex-direction:column;gap:8px}.node-section{width:100%;margin:4px 0}.presence-leaf-add{flex:0 1 auto;align-self:flex-start;margin-top:8px}.fields{display:flex;flex-direction:row;gap:8px;flex-wrap:wrap;align-items:flex-start;flex:1 1 0}nff-leaf-list-renderer{flex:1}.mat-expansion-panel-content{display:flex;flex-direction:row;gap:16px}.form-content{display:flex;flex-direction:column;flex-wrap:wrap;width:100%}.leafs-container{display:flex;flex-direction:column;gap:8px;flex:1 1 0}mat-panel-description{display:flex;flex-direction:row}.section-actions{display:flex;flex-direction:row;align-items:center;gap:8px;justify-content:flex-end;width:100%}.edit-icon{opacity:.2;animation:icon-released .5s}.edit-icon:hover{opacity:1;animation:icon-hovered .5s}.flattened-actions{display:flex;flex-direction:column;align-items:flex-start;align-self:flex-start;gap:4px}.add-button{background-color:var(--mat-sys-primary-container);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.remove-button{background-color:var(--mat-sys-error-container);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.flattened-form{display:flex;flex-direction:row;width:100%;gap:4px}@keyframes icon-hovered{0%{opacity:.4}}@keyframes icon-released{0%{opacity:1}to{opacity:.4}}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => DynamicRecursiveFormComponent), selector: "nff-dynamic-recursive-form", inputs: ["schema", "initialValue", "formGroup", "index", "removable", "title", "editable", "addButtonCallback", "focusLeaf"], outputs: ["remove", "editableChange"] }, { kind: "component", type: i0.forwardRef(() => LeafRendererComponent), selector: "nff-leaf-renderer", inputs: ["leaf_", "control", "removable", "editable", "autofocus"], outputs: ["remove"] }, { kind: "component", type: i0.forwardRef(() => LeafListRendererComponent), selector: "nff-leaf-list-renderer", inputs: ["leaf_", "initialValue", "formArray", "editable", "minItems"], outputs: ["message"] }, { kind: "component", type: i0.forwardRef(() => NodeGroupListRendererComponent), selector: "nff-node-group-list-renderer", inputs: ["nodeGroupList", "initialValue", "formArray", "editable", "minItems", "maxItems"], outputs: ["message"] }, { kind: "component", type: i0.forwardRef(() => NodeMapRendererComponent), selector: "nff-node-map-renderer", inputs: ["nodeMap", "formGroup", "editable"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i1.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatExpansionModule) }, { kind: "component", type: i0.forwardRef(() => i2$2.MatExpansionPanel), selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i0.forwardRef(() => i2$2.MatExpansionPanelHeader), selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i0.forwardRef(() => i2$2.MatExpansionPanelTitle), selector: "mat-panel-title" }, { kind: "directive", type: i0.forwardRef(() => i2$2.MatExpansionPanelDescription), selector: "mat-panel-description" }, { kind: "ngmodule", type: i0.forwardRef(() => MatIconModule) }, { kind: "component", type: i0.forwardRef(() => i1$1.MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatButtonModule) }, { kind: "component", type: i0.forwardRef(() => i2$1.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: i0.forwardRef(() => i2$1.MatIconButton), selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatCheckboxModule) }, { kind: "component", type: i0.forwardRef(() => i4.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: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i2.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i2.MatLabel), selector: "mat-label" }, { kind: "ngmodule", type: i0.forwardRef(() => MatSelectModule) }, { kind: "component", type: i0.forwardRef(() => i3.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: i0.forwardRef(() => i3.MatOption), selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i0.forwardRef(() => MatTooltip), selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: DynamicRecursiveFormComponent, decorators: [{
             type: Component,
@@ -995,27 +1083,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         MatIconModule,
                         MatButtonModule,
                         NgTemplateOutlet,
-                        MatCardModule,
                         MatCheckboxModule,
                         MatFormFieldModule,
                         MatSelectModule,
                         MatTooltip,
-                    ], selector: 'nff-dynamic-recursive-form', standalone: true, template: "@if (!root()) {\n  <ng-template #formRender>\n    <div class=\"form-content\" [formGroup]=\"formGroup()\">\n      <div class=\"leafs-container\">\n        <div class=\"fields\">\n          @for (childItem of nodeGroupChildrenList; track $index) {\n            @let child = childItem.value;\n            @if (child.kind == 'leaf' && child.presence) {\n              @if (formGroup().get(childItem.key)) {\n                <!-- Present: the field takes the add button's place in the row; its\n                     remove control drops the leaf back to the unchecked state. -->\n                <nff-leaf-renderer\n                  [leaf_]=child\n                  [control]=asFormControl(formGroup().get(childItem.key))\n                  [removable]=true\n                  [editable]=\"editable()\"\n                  [initialValue]=\"formGroup().get(childItem.key)?.value\"\n                  [autofocus]=\"presenceFocusKey === childItem.key\"\n                  (remove)=\"toggleLeafPresence(childItem.key, child, false)\"\n                />\n              } @else {\n                <button\n                  matButton=\"outlined\"\n                  class=\"presence-leaf-add\"\n                  [disabled]=\"!editable()\"\n                  (click)=\"toggleLeafPresence(childItem.key, child, true)\"\n                >\n                  <mat-icon>add</mat-icon> Add {{ child.label ?? child.name }}\n                </button>\n              }\n            } @else if (child.kind == 'leaf') {\n              <nff-leaf-renderer\n                [leaf_]=child\n                [control]=asFormControl(formGroup().get(child.name))\n                [removable]=false\n                [editable]=\"editable()\"\n                [initialValue]=\"formGroup().get(child.name)?.value\"\n              />\n            }\n          }\n          @for (childItem of nodeGroupChildrenList; track $index) {\n            @let child = childItem.value;\n            @if (child.kind == 'leafList') {\n              <nff-leaf-list-renderer\n                [leaf_]=\"child\"\n                [editable]=\"editable()\"\n                [formArray]=\"asFormArray(formGroup().get(child.name))\"\n                [initialValue]=\"formGroup().get(child.name)?.value\"\n              />\n            }\n          }\n        </div>\n      </div>\n      @for (childItem of nodeGroupChildrenList; track $index) {\n        @let child = childItem.value;\n        @if (child.kind == 'nodeGroup' && child.presence) {\n          <div class=\"presence-group\">\n            <mat-checkbox\n              [checked]=\"!!formGroup().get(childItem.key)\"\n              [disabled]=\"!editable()\"\n              (change)=\"togglePresence(childItem.key, child, $event.checked)\"\n            >{{ child.label ?? child.name }}</mat-checkbox>\n            @if (formGroup().get(childItem.key)) {\n              <nff-dynamic-recursive-form\n                [schema]=\"flatGroup(child)\"\n                [formGroup]=\"asFormGroup(formGroup().get(childItem.key))\"\n                [editable]=\"editable()\"\n              />\n            }\n          </div>\n        }\n        @else if (child.kind == 'nodeGroup') {\n          <nff-dynamic-recursive-form\n            [schema]=\"child\"\n            [formGroup]=\"asFormGroup(formGroup().get(child.name))\"\n            [initialValue]=\"formGroup().get(child.name)?.value\"\n            [editable]=\"editable()\"\n          />\n        }\n        @else if (child.kind == 'choice') {\n          @let choiceGroup = asFormGroup(formGroup().get(childItem.key));\n          @let selectedCase = activeCase(childItem.key);\n          <mat-expansion-panel class=\"node-section\" [expanded]=\"child.presence ? !!choiceGroup : !child.appearance?.collapsed\" togglePosition=\"before\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                @if (child.presence) {\n                  <mat-checkbox\n                    [checked]=\"!!choiceGroup\"\n                    [disabled]=\"!editable()\"\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"toggleNodePresence(childItem.key, child, $event.checked)\"\n                  >{{ child.label ?? child.name }}</mat-checkbox>\n                } @else {\n                  {{ child.label ?? child.name }}\n                }\n              </mat-panel-title>\n            </mat-expansion-panel-header>\n            @if (choiceGroup) {\n              <div class=\"choice-group\" [formGroup]=\"choiceGroup\">\n                <mat-form-field [appearance]=\"editable() ? 'fill' : 'outline'\">\n                  <mat-label>Selected option</mat-label>\n                  <mat-select\n                    [formControlName]=\"CASE_KEY\"\n                    (selectionChange)=\"switchCase(childItem.key, child, $event.value)\"\n                  >\n                    @for (caseName of objectKeys(child.cases); track caseName) {\n                      <mat-option [value]=\"caseName\">{{ caseLabel(child, caseName) }}</mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n                @if (selectedCase) {\n                  <nff-dynamic-recursive-form\n                    [schema]=\"caseAsGroup(child, selectedCase)\"\n                    [formGroup]=\"choiceGroup\"\n                    [editable]=\"editable()\"\n                  />\n                }\n              </div>\n            }\n          </mat-expansion-panel>\n        }\n      }\n\n      @for (childItem of nodeGroupChildrenList; track $index) {\n        @let child = childItem.value;\n        @if (child.kind == 'nodeGroupList') {\n          <nff-node-group-list-renderer\n            [nodeGroupList]=\"child\"\n            [formArray]=\"asFormArray(formGroup().get(child.name))\"\n            [initialValue]=\"formGroup().get(child.name)?.value\"\n            [editable]=\"editable()\"\n          />\n        }\n      }\n      @for (childItem of nodeGroupChildrenList; track $index) {\n        @let child = childItem.value;\n        @if (child.kind == 'map') {\n          @let mapGroup = asFormGroup(formGroup().get(childItem.key));\n          <mat-expansion-panel class=\"node-section\" [expanded]=\"child.presence ? !!mapGroup : !child.appearance?.collapsed\" togglePosition=\"before\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                @if (child.presence) {\n                  <mat-checkbox\n                    [checked]=\"!!mapGroup\"\n                    [disabled]=\"!editable()\"\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"toggleNodePresence(childItem.key, child, $event.checked)\"\n                  >{{ child.label ?? child.name }}</mat-checkbox>\n                } @else {\n                  {{ child.label ?? child.name }}\n                }\n              </mat-panel-title>\n            </mat-expansion-panel-header>\n            @if (mapGroup) {\n              <nff-node-map-renderer\n                [nodeMap]=\"child\"\n                [formGroup]=\"mapGroup\"\n                [editable]=\"editable()\"\n              />\n            }\n          </mat-expansion-panel>\n        }\n      }\n    </div>\n  </ng-template>\n  @if (schema().appearance?.flatten) {\n    <div class=\"flattened-form\">\n    <ng-container *ngTemplateOutlet=\"formRender\"></ng-container>\n      <div class=\"flattened-actions\">\n        @if (editable() && index() != null && addButtonCallback() != null) {\n          <button matIconButton  matTooltip=\"+ Add new {{ schema().label ?? schema().name }}\" class=\"add-button small-icon-button\" (click)=\"addButtonCallback()!(index()!)\">\n            <mat-icon>add</mat-icon>\n          </button>\n        }\n        @if (editable() && removable()) {\n          <button matIconButton  class=\"remove-button small-icon-button\" (click)=\"emitRemoveEvent(); $event.stopPropagation()\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        }\n      </div>\n    </div>\n  }\n  @else {\n  <mat-expansion-panel class=\"node-section\" [expanded]=\"!schema().appearance?.collapsed\" togglePosition=\"before\">\n    <mat-expansion-panel-header>\n      <mat-panel-title class=\"config-form-subsection-card\">\n        {{ title() ?? schema().label ?? schema().name }}\n      </mat-panel-title>\n      <mat-panel-description class=\"section-actions\">\n        <button matIconButton class=\"small-icon-button\" [class]=\"{ 'edit-icon': !editable() }\" (click)=\"editable.set(!editable()); $event.stopPropagation()\">\n          <mat-icon>edit</mat-icon>\n        </button>\n        @if (editable() && index() != null && addButtonCallback() != null) {\n          <button matIconButton matTooltip=\"+ Add new {{ schema().label ?? schema().name }}\" class=\"add-button small-icon-button\" (click)=\"addButtonCallback()!(index()!); $event.stopPropagation()\">\n            <mat-icon>add</mat-icon>\n          </button>\n        }\n        @if (editable() && removable()) {\n          <button matIconButton class=\"remove-button small-icon-button\" (click)=\"emitRemoveEvent(); $event.stopPropagation()\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        }\n      </mat-panel-description>\n    </mat-expansion-panel-header>\n    <ng-container *ngTemplateOutlet=\"formRender\"></ng-container>\n  </mat-expansion-panel>\n  }\n} @else {\n  <div class=\"form-content\" [formGroup]=\"formGroup()\">\n    <div class=\"leafs-container\">\n      <div class=\"fields\">\n        <button matIconButton class=\"small-icon-button\"  [class]=\"{ 'edit-icon': !editable() }\"  (click)=\"editable.set(!editable())\">\n          <mat-icon>edit</mat-icon>\n        </button>\n        @for (childItem of nodeGroupChildrenList; track $index) {\n          @let child = childItem.value;\n          @if (child.kind == 'leaf' && child.presence) {\n            @if (formGroup().get(childItem.key)) {\n              <!-- Present: the field takes the add button's place in the row; its\n                   remove control drops the leaf back to the unchecked state. -->\n              <nff-leaf-renderer\n                [leaf_]=child\n                [control]=asFormControl(formGroup().get(childItem.key))\n                [removable]=true\n                [editable]=\"editable()\"\n                [initialValue]=\"formGroup().get(childItem.key)?.value\"\n                [autofocus]=\"presenceFocusKey === childItem.key\"\n                (remove)=\"toggleLeafPresence(childItem.key, child, false)\"\n              />\n            } @else {\n              <button\n                matButton=\"outlined\"\n                class=\"presence-leaf-add\"\n                [disabled]=\"!editable()\"\n                (click)=\"toggleLeafPresence(childItem.key, child, true)\"\n              >\n                <mat-icon>add</mat-icon> Add {{ child.label ?? child.name }}\n              </button>\n            }\n          } @else if (child.kind == 'leaf') {\n            <nff-leaf-renderer\n              [leaf_]=child\n              [control]=asFormControl(formGroup().get(child.name))\n              [removable]=false\n              [editable]=\"editable()\"\n              [initialValue]=\"formGroup().get(child.name)?.value\"\n            />\n          }\n        }\n        @for (childItem of nodeGroupChildrenList; track $index) {\n          @let child = childItem.value;\n          @if (child.kind == 'leafList') {\n            <nff-leaf-list-renderer\n              [leaf_]=\"child\"\n              [editable]=\"editable()\"\n              [formArray]=\"asFormArray(formGroup().get(child.name))\"\n              [initialValue]=\"formGroup().get(child.name)?.value\"\n            />\n          }\n        }\n      </div>\n    </div>\n    @for (childItem of nodeGroupChildrenList; track $index) {\n      @let child = childItem.value;\n      @if (child.kind == 'choice') {\n        @let choiceGroup = asFormGroup(formGroup().get(childItem.key));\n        @let selectedCase = activeCase(childItem.key);\n        <mat-expansion-panel class=\"node-section\" [expanded]=\"child.presence ? !!choiceGroup : !child.appearance?.collapsed\" togglePosition=\"before\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>\n              @if (child.presence) {\n                <mat-checkbox\n                  [checked]=\"!!choiceGroup\"\n                  [disabled]=\"!editable()\"\n                  (click)=\"$event.stopPropagation()\"\n                  (change)=\"toggleNodePresence(childItem.key, child, $event.checked)\"\n                >{{ child.label ?? child.name }}</mat-checkbox>\n              } @else {\n                {{ child.label ?? child.name }}\n              }\n            </mat-panel-title>\n          </mat-expansion-panel-header>\n          @if (choiceGroup) {\n            <div class=\"choice-group\" [formGroup]=\"choiceGroup\">\n              <mat-form-field [appearance]=\"editable() ? 'fill' : 'outline'\">\n                <mat-label>Selected option</mat-label>\n                <mat-select\n                  [formControlName]=\"CASE_KEY\"\n                  (selectionChange)=\"switchCase(childItem.key, child, $event.value)\"\n                >\n                  @for (caseName of objectKeys(child.cases); track caseName) {\n                    <mat-option [value]=\"caseName\">{{ caseLabel(child, caseName) }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n              @if (selectedCase) {\n                <nff-dynamic-recursive-form\n                  [schema]=\"caseAsGroup(child, selectedCase)\"\n                  [formGroup]=\"choiceGroup\"\n                  [editable]=\"editable()\"\n                />\n              }\n            </div>\n          }\n        </mat-expansion-panel>\n      }\n    }\n    @for (childItem of nodeGroupChildrenList; track $index) {\n      @let child = childItem.value;\n      @if (child.kind == 'map') {\n        @let mapGroup = asFormGroup(formGroup().get(childItem.key));\n        <mat-expansion-panel class=\"node-section\" [expanded]=\"child.presence ? !!mapGroup : !child.appearance?.collapsed\" togglePosition=\"before\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>\n              @if (child.presence) {\n                <mat-checkbox\n                  [checked]=\"!!mapGroup\"\n                  [disabled]=\"!editable()\"\n                  (click)=\"$event.stopPropagation()\"\n                  (change)=\"toggleNodePresence(childItem.key, child, $event.checked)\"\n                >{{ child.label ?? child.name }}</mat-checkbox>\n              } @else {\n                {{ child.label ?? child.name }}\n              }\n            </mat-panel-title>\n          </mat-expansion-panel-header>\n          @if (mapGroup) {\n            <nff-node-map-renderer\n              [nodeMap]=\"child\"\n              [formGroup]=\"mapGroup\"\n              [editable]=\"editable()\"\n            />\n          }\n        </mat-expansion-panel>\n      }\n    }\n    <mat-accordion multi>\n      @for (childItem of nodeGroupChildrenList; track $index) {\n        @let child = childItem.value;\n        @if (child.kind == 'nodeGroupList') {\n          <mat-expansion-panel togglePosition=\"before\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                {{ title() ?? child.label ?? child.name }}\n              </mat-panel-title>\n            </mat-expansion-panel-header>\n            <nff-node-group-list-renderer\n              [nodeGroupList]=\"child\"\n              [formArray]=\"asFormArray(formGroup().get(child.name))\"\n              [initialValue]=\"formGroup().get(child.name)?.value\"\n              [editable]=\"editable()\"\n            />\n          </mat-expansion-panel>\n        }\n      }\n      @for (childItem of nodeGroupChildrenList; track $index) {\n        @let child = childItem.value;\n        @if (child.kind == 'nodeGroup' && child.presence) {\n          <mat-expansion-panel togglePosition=\"before\" [expanded]=\"!!formGroup().get(childItem.key)\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <mat-checkbox\n                  [checked]=\"!!formGroup().get(childItem.key)\"\n                  [disabled]=\"!editable()\"\n                  (click)=\"$event.stopPropagation()\"\n                  (change)=\"togglePresence(childItem.key, child, $event.checked)\"\n                >{{ child.label ?? child.name }}</mat-checkbox>\n              </mat-panel-title>\n            </mat-expansion-panel-header>\n            @if (formGroup().get(childItem.key)) {\n              <nff-dynamic-recursive-form\n                [schema]=\"flatGroup(child)\"\n                [formGroup]=\"asFormGroup(formGroup().get(childItem.key))\"\n                [editable]=\"editable()\"\n              />\n            }\n          </mat-expansion-panel>\n        }\n        @else if (child.kind == 'nodeGroup') {\n          <nff-dynamic-recursive-form\n            [schema]=\"child\"\n            [formGroup]=\"asFormGroup(formGroup().get(child.name))\"\n            [initialValue]=\"formGroup().get(child.name)?.value\"\n            [editable]=\"editable()\"\n          />\n        }\n      }\n    </mat-accordion>\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;flex-wrap:wrap;width:100%;margin:4px 0}.presence-group,.choice-group{display:flex;flex-direction:column;gap:8px}.node-section{width:100%;margin:4px 0}.section-actions{justify-content:flex-end;align-items:center;gap:4px}.presence-leaf-add{flex:0 1 auto;align-self:flex-start;margin-top:8px}.fields{display:flex;flex-direction:row;gap:8px;flex-wrap:wrap;align-items:flex-start;flex:1 1 0}nff-leaf-list-renderer{flex:1}.mat-expansion-panel-content,.mat-expansion-panel-content:hover{display:flex;flex-direction:row;gap:16px}.form-content{display:flex;flex-direction:column;flex-wrap:wrap;width:100%}.leafs-container{display:flex;flex-direction:column;gap:8px;flex:1 1 0}mat-panel-description{display:flex;flex-direction:row}.node-groups-container{display:flex;flex-direction:column;flex-basis:100%}.section-actions{display:flex;flex-direction:row;gap:8px;justify-content:flex-end;width:100%}mat-card{padding:0;width:100%}.mat-card-no-broder{border:0}mat-card-content{box-sizing:border-box;padding:16px}mat-card-header{display:flex;flex-direction:row;align-items:flex-start;padding:16px;gap:16px}.edit-icon{opacity:.2;animation:icon-released .5s}.edit-icon:hover{opacity:1;animation:icon-transition .5s}.card-actions{display:flex;flex-direction:row;align-items:center;gap:4px}.flattened-actions{display:flex;flex-direction:column;align-items:flex-start;align-self:flex-start;gap:4px}.add-button{background-color:var(--mat-sys-primary-container);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.remove-button{background-color:var(--mat-sys-error-container);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.flattened-form{display:flex;flex-direction:row;width:100%;gap:4px}.flattened-style-actions{display:flex;flex-direction:row;gap:8px;justify-content:flex-end;align-items:flex-start}@keyframes icon-hovered{0%{opacity:.4}}@keyframes icon-released{0%{opacity:1}to{opacity:.4}}\n"] }]
-        }], propDecorators: { schema: [{ type: i0.Input, args: [{ isSignal: true, alias: "schema", required: true }] }], initialValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialValue", required: false }] }], formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: false }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], remove: [{ type: i0.Output, args: ["remove"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }, { type: i0.Output, args: ["editableChange"] }], addButtonCallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "addButtonCallback", required: false }] }] } });
+                    ], selector: 'nff-dynamic-recursive-form', standalone: true, template: "@if (!root()) {\n  <ng-template #formRender>\n    <div class=\"form-content\" [formGroup]=\"formGroup()\">\n      <div class=\"leafs-container\">\n        <div class=\"fields\">\n          @for (childItem of nodeGroupChildrenList; track $index) {\n            @let child = childItem.value;\n            @if (child.kind == 'leaf' && !child.presence) {\n              <nff-leaf-renderer\n                [leaf_]=child\n                [control]=asFormControl(formGroup().get(childItem.key))\n                [removable]=false\n                [editable]=\"editable()\"\n              />\n            }\n          }\n          @for (childItem of nodeGroupChildrenList; track $index) {\n            @let child = childItem.value;\n            @if (child.kind == 'leafList') {\n              <nff-leaf-list-renderer\n                [leaf_]=\"child\"\n                [editable]=\"editable()\"\n                [formArray]=\"asFormArray(formGroup().get(childItem.key))\"\n                [initialValue]=\"formGroup().get(childItem.key)?.value\"\n              />\n            }\n          }\n          <!-- Presence leaves trail the regular fields so their add buttons don't\n               interrupt the field flow; an enabled one keeps its trailing spot. -->\n          @for (childItem of nodeGroupChildrenList; track $index) {\n            @let child = childItem.value;\n            @if (child.kind == 'leaf' && child.presence) {\n              @if (formGroup().get(childItem.key)) {\n                <nff-leaf-renderer\n                  [leaf_]=child\n                  [control]=asFormControl(formGroup().get(childItem.key))\n                  [removable]=true\n                  [editable]=\"editable()\"\n                  [autofocus]=\"presenceFocusKey === childItem.key || focusLeaf() === childItem.key\"\n                  (remove)=\"toggleLeafPresence(childItem.key, child, false)\"\n                />\n              } @else if (editable()) {\n                <!-- Read-only mode renders nothing for an absent presence leaf:\n                     the key is simply absent, and add affordances are hidden\n                     like every other structural control. -->\n                <button\n                  matButton=\"outlined\"\n                  class=\"presence-leaf-add\"\n                  (click)=\"toggleLeafPresence(childItem.key, child, true)\"\n                >\n                  <mat-icon>add</mat-icon> Add {{ child.label ?? child.name }}\n                </button>\n              }\n            }\n          }\n        </div>\n      </div>\n      @for (childItem of nodeGroupChildrenList; track $index) {\n        @let child = childItem.value;\n        @if (child.kind == 'nodeGroup' && child.presence) {\n          <div class=\"presence-group\">\n            <mat-checkbox\n              [checked]=\"!!formGroup().get(childItem.key)\"\n              [disabled]=\"!editable()\"\n              (change)=\"toggleNodePresence(childItem.key, child, $event.checked)\"\n            >{{ child.label ?? child.name }}</mat-checkbox>\n            @if (formGroup().get(childItem.key)) {\n              <nff-dynamic-recursive-form\n                [schema]=\"flatGroup(child)\"\n                [formGroup]=\"asFormGroup(formGroup().get(childItem.key))\"\n                [editable]=\"editable()\"\n              />\n            }\n          </div>\n        }\n        @else if (child.kind == 'nodeGroup') {\n          <nff-dynamic-recursive-form\n            [schema]=\"child\"\n            [formGroup]=\"asFormGroup(formGroup().get(childItem.key))\"\n            [initialValue]=\"formGroup().get(childItem.key)?.value\"\n            [editable]=\"editable()\"\n          />\n        }\n        @else if (child.kind == 'choice') {\n          @let choiceGroup = asFormGroup(formGroup().get(childItem.key));\n          @let selectedCase = activeCase(childItem.key);\n          <mat-expansion-panel class=\"node-section\" [expanded]=\"child.presence ? !!choiceGroup : !child.appearance?.collapsed\" togglePosition=\"before\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                @if (child.presence) {\n                  <mat-checkbox\n                    [checked]=\"!!choiceGroup\"\n                    [disabled]=\"!editable()\"\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"toggleNodePresence(childItem.key, child, $event.checked)\"\n                  >{{ child.label ?? child.name }}</mat-checkbox>\n                } @else {\n                  {{ child.label ?? child.name }}\n                }\n              </mat-panel-title>\n            </mat-expansion-panel-header>\n            @if (choiceGroup) {\n              <div class=\"choice-group\">\n                <mat-form-field [appearance]=\"editable() ? 'fill' : 'outline'\">\n                  <mat-label>Selected option</mat-label>\n                  <mat-select\n                    [value]=\"activeCase(childItem.key)\"\n                    (selectionChange)=\"switchCase(childItem.key, child, $event.value)\"\n                  >\n                    @for (caseName of objectKeys(child.cases); track caseName) {\n                      <mat-option [value]=\"caseName\">{{ caseLabel(child, caseName) }}</mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n                @if (selectedCase) {\n                  <nff-dynamic-recursive-form\n                    [schema]=\"caseAsGroup(child, selectedCase)\"\n                    [formGroup]=\"choiceGroup\"\n                    [editable]=\"editable()\"\n                  />\n                }\n              </div>\n            }\n          </mat-expansion-panel>\n        }\n        @else if (child.kind == 'nodeGroupList') {\n          <nff-node-group-list-renderer\n            [nodeGroupList]=\"child\"\n            [formArray]=\"asFormArray(formGroup().get(childItem.key))\"\n            [initialValue]=\"formGroup().get(childItem.key)?.value\"\n            [editable]=\"editable()\"\n          />\n        }\n        @else if (child.kind == 'map') {\n          @let mapGroup = asFormGroup(formGroup().get(childItem.key));\n          <mat-expansion-panel class=\"node-section\" [expanded]=\"child.presence ? !!mapGroup : !child.appearance?.collapsed\" togglePosition=\"before\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                @if (child.presence) {\n                  <mat-checkbox\n                    [checked]=\"!!mapGroup\"\n                    [disabled]=\"!editable()\"\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"toggleNodePresence(childItem.key, child, $event.checked)\"\n                  >{{ child.label ?? child.name }}</mat-checkbox>\n                } @else {\n                  {{ child.label ?? child.name }}\n                }\n              </mat-panel-title>\n            </mat-expansion-panel-header>\n            @if (mapGroup) {\n              <nff-node-map-renderer\n                [nodeMap]=\"child\"\n                [formGroup]=\"mapGroup\"\n                [editable]=\"editable()\"\n              />\n            }\n          </mat-expansion-panel>\n        }\n      }\n    </div>\n  </ng-template>\n  @if (schema().appearance?.flatten) {\n    <div class=\"flattened-form\">\n    <ng-container *ngTemplateOutlet=\"formRender\"></ng-container>\n      <div class=\"flattened-actions\">\n        @if (editable() && index() != null && addButtonCallback() != null) {\n          <button matIconButton  matTooltip=\"+ Add new {{ schema().label ?? schema().name }}\" [attr.aria-label]=\"'Add new ' + (schema().label ?? schema().name)\" class=\"add-button small-icon-button\" (click)=\"addButtonCallback()!(index()!)\">\n            <mat-icon>add</mat-icon>\n          </button>\n        }\n        @if (editable() && removable()) {\n          <button matIconButton  class=\"remove-button small-icon-button\" [attr.aria-label]=\"'Remove ' + (schema().label ?? schema().name)\" (click)=\"emitRemoveEvent(); $event.stopPropagation()\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        }\n      </div>\n    </div>\n  }\n  @else {\n  <mat-expansion-panel class=\"node-section\" [expanded]=\"!schema().appearance?.collapsed\" togglePosition=\"before\">\n    <mat-expansion-panel-header>\n      <mat-panel-title class=\"config-form-subsection-card\">\n        {{ title() ?? schema().label ?? schema().name }}\n      </mat-panel-title>\n      <mat-panel-description class=\"section-actions\">\n        <button matIconButton class=\"small-icon-button\" [class]=\"{ 'edit-icon': !editable() }\" [attr.aria-label]=\"editable() ? 'Stop editing' : 'Edit'\" (click)=\"editable.set(!editable()); $event.stopPropagation()\">\n          <mat-icon>edit</mat-icon>\n        </button>\n        @if (editable() && index() != null && addButtonCallback() != null) {\n          <button matIconButton matTooltip=\"+ Add new {{ schema().label ?? schema().name }}\" [attr.aria-label]=\"'Add new ' + (schema().label ?? schema().name)\" class=\"add-button small-icon-button\" (click)=\"addButtonCallback()!(index()!); $event.stopPropagation()\">\n            <mat-icon>add</mat-icon>\n          </button>\n        }\n        @if (editable() && removable()) {\n          <button matIconButton class=\"remove-button small-icon-button\" [attr.aria-label]=\"'Remove ' + (schema().label ?? schema().name)\" (click)=\"emitRemoveEvent(); $event.stopPropagation()\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        }\n      </mat-panel-description>\n    </mat-expansion-panel-header>\n    <ng-container *ngTemplateOutlet=\"formRender\"></ng-container>\n  </mat-expansion-panel>\n  }\n} @else {\n  <div class=\"form-content\" [formGroup]=\"formGroup()\">\n    <div class=\"leafs-container\">\n      <div class=\"fields\">\n        <button matIconButton class=\"small-icon-button\"  [class]=\"{ 'edit-icon': !editable() }\"  [attr.aria-label]=\"editable() ? 'Stop editing' : 'Edit'\" (click)=\"editable.set(!editable())\">\n          <mat-icon>edit</mat-icon>\n        </button>\n        @for (childItem of nodeGroupChildrenList; track $index) {\n          @let child = childItem.value;\n          @if (child.kind == 'leaf' && !child.presence) {\n            <nff-leaf-renderer\n              [leaf_]=child\n              [control]=asFormControl(formGroup().get(childItem.key))\n              [removable]=false\n              [editable]=\"editable()\"\n            />\n          }\n        }\n        @for (childItem of nodeGroupChildrenList; track $index) {\n          @let child = childItem.value;\n          @if (child.kind == 'leafList') {\n            <nff-leaf-list-renderer\n              [leaf_]=\"child\"\n              [editable]=\"editable()\"\n              [formArray]=\"asFormArray(formGroup().get(childItem.key))\"\n              [initialValue]=\"formGroup().get(childItem.key)?.value\"\n            />\n          }\n        }\n        <!-- Presence leaves trail the regular fields so their add buttons don't\n             interrupt the field flow; an enabled one keeps its trailing spot. -->\n        @for (childItem of nodeGroupChildrenList; track $index) {\n          @let child = childItem.value;\n          @if (child.kind == 'leaf' && child.presence) {\n            @if (formGroup().get(childItem.key)) {\n              <nff-leaf-renderer\n                [leaf_]=child\n                [control]=asFormControl(formGroup().get(childItem.key))\n                [removable]=true\n                [editable]=\"editable()\"\n                [autofocus]=\"presenceFocusKey === childItem.key || focusLeaf() === childItem.key\"\n                (remove)=\"toggleLeafPresence(childItem.key, child, false)\"\n              />\n            } @else if (editable()) {\n              <button\n                matButton=\"outlined\"\n                class=\"presence-leaf-add\"\n                (click)=\"toggleLeafPresence(childItem.key, child, true)\"\n              >\n                <mat-icon>add</mat-icon> Add {{ child.label ?? child.name }}\n              </button>\n            }\n          }\n        }\n      </div>\n    </div>\n    @for (childItem of nodeGroupChildrenList; track $index) {\n      @let child = childItem.value;\n      @if (child.kind == 'choice') {\n        @let choiceGroup = asFormGroup(formGroup().get(childItem.key));\n        @let selectedCase = activeCase(childItem.key);\n        <mat-expansion-panel class=\"node-section\" [expanded]=\"child.presence ? !!choiceGroup : !child.appearance?.collapsed\" togglePosition=\"before\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>\n              @if (child.presence) {\n                <mat-checkbox\n                  [checked]=\"!!choiceGroup\"\n                  [disabled]=\"!editable()\"\n                  (click)=\"$event.stopPropagation()\"\n                  (change)=\"toggleNodePresence(childItem.key, child, $event.checked)\"\n                >{{ child.label ?? child.name }}</mat-checkbox>\n              } @else {\n                {{ child.label ?? child.name }}\n              }\n            </mat-panel-title>\n          </mat-expansion-panel-header>\n          @if (choiceGroup) {\n            <div class=\"choice-group\">\n              <mat-form-field [appearance]=\"editable() ? 'fill' : 'outline'\">\n                <mat-label>Selected option</mat-label>\n                <mat-select\n                  [value]=\"activeCase(childItem.key)\"\n                  (selectionChange)=\"switchCase(childItem.key, child, $event.value)\"\n                >\n                  @for (caseName of objectKeys(child.cases); track caseName) {\n                    <mat-option [value]=\"caseName\">{{ caseLabel(child, caseName) }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n              @if (selectedCase) {\n                <nff-dynamic-recursive-form\n                  [schema]=\"caseAsGroup(child, selectedCase)\"\n                  [formGroup]=\"choiceGroup\"\n                  [editable]=\"editable()\"\n                />\n              }\n            </div>\n          }\n        </mat-expansion-panel>\n      }\n      @else if (child.kind == 'map') {\n        @let mapGroup = asFormGroup(formGroup().get(childItem.key));\n        <mat-expansion-panel class=\"node-section\" [expanded]=\"child.presence ? !!mapGroup : !child.appearance?.collapsed\" togglePosition=\"before\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>\n              @if (child.presence) {\n                <mat-checkbox\n                  [checked]=\"!!mapGroup\"\n                  [disabled]=\"!editable()\"\n                  (click)=\"$event.stopPropagation()\"\n                  (change)=\"toggleNodePresence(childItem.key, child, $event.checked)\"\n                >{{ child.label ?? child.name }}</mat-checkbox>\n              } @else {\n                {{ child.label ?? child.name }}\n              }\n            </mat-panel-title>\n          </mat-expansion-panel-header>\n          @if (mapGroup) {\n            <nff-node-map-renderer\n              [nodeMap]=\"child\"\n              [formGroup]=\"mapGroup\"\n              [editable]=\"editable()\"\n            />\n          }\n        </mat-expansion-panel>\n      }\n      @else if (child.kind == 'nodeGroupList') {\n        <mat-expansion-panel class=\"node-section\" togglePosition=\"before\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>\n              {{ child.label ?? child.name }}\n            </mat-panel-title>\n          </mat-expansion-panel-header>\n          <nff-node-group-list-renderer\n            [nodeGroupList]=\"child\"\n            [formArray]=\"asFormArray(formGroup().get(childItem.key))\"\n            [initialValue]=\"formGroup().get(childItem.key)?.value\"\n            [editable]=\"editable()\"\n          />\n        </mat-expansion-panel>\n      }\n      @else if (child.kind == 'nodeGroup' && child.presence) {\n        <mat-expansion-panel class=\"node-section\" togglePosition=\"before\" [expanded]=\"!!formGroup().get(childItem.key)\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>\n              <mat-checkbox\n                [checked]=\"!!formGroup().get(childItem.key)\"\n                [disabled]=\"!editable()\"\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"toggleNodePresence(childItem.key, child, $event.checked)\"\n              >{{ child.label ?? child.name }}</mat-checkbox>\n            </mat-panel-title>\n          </mat-expansion-panel-header>\n          @if (formGroup().get(childItem.key)) {\n            <nff-dynamic-recursive-form\n              [schema]=\"flatGroup(child)\"\n              [formGroup]=\"asFormGroup(formGroup().get(childItem.key))\"\n              [editable]=\"editable()\"\n            />\n          }\n        </mat-expansion-panel>\n      }\n      @else if (child.kind == 'nodeGroup') {\n        <nff-dynamic-recursive-form\n          [schema]=\"child\"\n          [formGroup]=\"asFormGroup(formGroup().get(childItem.key))\"\n          [initialValue]=\"formGroup().get(childItem.key)?.value\"\n          [editable]=\"editable()\"\n        />\n      }\n    }\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;flex-wrap:wrap;width:100%;margin:4px 0}.presence-group,.choice-group{display:flex;flex-direction:column;gap:8px}.node-section{width:100%;margin:4px 0}.presence-leaf-add{flex:0 1 auto;align-self:flex-start;margin-top:8px}.fields{display:flex;flex-direction:row;gap:8px;flex-wrap:wrap;align-items:flex-start;flex:1 1 0}nff-leaf-list-renderer{flex:1}.mat-expansion-panel-content{display:flex;flex-direction:row;gap:16px}.form-content{display:flex;flex-direction:column;flex-wrap:wrap;width:100%}.leafs-container{display:flex;flex-direction:column;gap:8px;flex:1 1 0}mat-panel-description{display:flex;flex-direction:row}.section-actions{display:flex;flex-direction:row;align-items:center;gap:8px;justify-content:flex-end;width:100%}.edit-icon{opacity:.2;animation:icon-released .5s}.edit-icon:hover{opacity:1;animation:icon-hovered .5s}.flattened-actions{display:flex;flex-direction:column;align-items:flex-start;align-self:flex-start;gap:4px}.add-button{background-color:var(--mat-sys-primary-container);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.remove-button{background-color:var(--mat-sys-error-container);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.flattened-form{display:flex;flex-direction:row;width:100%;gap:4px}@keyframes icon-hovered{0%{opacity:.4}}@keyframes icon-released{0%{opacity:1}to{opacity:.4}}\n"] }]
+        }], propDecorators: { schema: [{ type: i0.Input, args: [{ isSignal: true, alias: "schema", required: true }] }], initialValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialValue", required: false }] }], formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: false }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], remove: [{ type: i0.Output, args: ["remove"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }, { type: i0.Output, args: ["editableChange"] }], addButtonCallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "addButtonCallback", required: false }] }], focusLeaf: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusLeaf", required: false }] }] } });
 
 /**
  * A tree/detail editor for a schema-built form: the structure (groups, lists,
- * maps, choices) is a tree on the left, and selecting a node shows that node's
- * fields for editing on the right. A `+` on a list or map node adds an entry; a
- * delete button on each item removes it. Absent optional (presence) children are
- * offered by a "+ Optional field" menu row at the end of their parent's
- * children; present ones carry a delete button that returns them to the menu.
+ * maps, choices) is a tree on the left, and selecting a node renders that
+ * node's **entire subtree** on the right as a **flat list of sections** — the
+ * node's own fields first, then every descendant's fields, each separated by a
+ * breadcrumb heading (`Service / Deploy scope / …`) instead of nested panels.
+ * Leaf fields render through {@link DynamicRecursiveFormComponent} with a
+ * leaf-only schema slice; choice selectors, map rows, and add controls render
+ * inline in their section. The tree adds row conveniences of its own: `+` on
+ * list and map rows, a delete control on removable rows, and a
+ * "+ Optional field" menu for absent presence children.
+ *
+ * The tree is **derived state**: any structural change to the form — made
+ * through the tree rows or through the detail sections — triggers a rebuild (a
+ * cheap shape signature over `valueChanges` detects it). Node ids are stable
+ * paths, so expansion and selection survive rebuilds. Swapping the `schema` or
+ * `formGroup` input rebinds the editor to the new pair, resetting expansion
+ * and selection.
  *
  * The component draws no outer container — only a divider between the tree and
- * detail panes — so the embedding client owns the surrounding chrome. The tree
- * is built once from the `schema`/`formGroup` provided at initialization.
- * An alternative to the all-in-one {@link DynamicRecursiveFormComponent} for
- * large configs.
+ * detail panes — so the embedding client owns the surrounding chrome.
  */
 class ConfigEditorComponent {
     /** The form-description schema whose structure the tree renders. */
@@ -1026,31 +1121,63 @@ class ConfigEditorComponent {
     editable = input(true, ...(ngDevMode ? [{ debugName: "editable" }] : []));
     root;
     selected = null;
+    /** The selected subtree as a flat, breadcrumb-separated section list. */
+    sections = [];
+    /** Root-to-selection trail for the detail-pane breadcrumb, computed once per selection. */
+    breadcrumb = [];
     expanded = new Set();
-    nextId = 0;
-    ngOnInit() {
-        const schema = this.schema();
-        this.root = this.buildTree(schema, this.formGroup(), schema.label ?? schema.name);
+    shape = '';
+    changes;
+    host = inject(ElementRef);
+    /** Stable per-instance ids for the shape signature, so replacing a control (setControl) reads as a structural change. */
+    controlIds = new WeakMap();
+    controlIdSeq = 0;
+    constructor() {
+        // Rebind whenever the schema or form inputs change (a host loading another
+        // config document): derived state resets against the new pair. Wrapped in
+        // untracked so only the two inputs re-trigger the effect.
+        effect(() => {
+            const schema = this.schema();
+            const group = this.formGroup();
+            untracked(() => this.attach(schema, group));
+        });
+    }
+    ngOnDestroy() {
+        this.changes?.unsubscribe();
+    }
+    /** Bind the editor to a schema/form pair: fresh tree, root selection, and shape-sync subscription. */
+    attach(schema, group) {
+        this.changes?.unsubscribe();
+        this.expanded.clear();
+        this.root = this.buildTree(schema, group, schema.label ?? schema.name, '');
+        this.shape = this.shapeOf(group);
         this.expanded.add(this.root.id);
         this.select(this.root);
+        // The detail sections mutate the FormGroup directly (presence toggles,
+        // list items, map entries, case switches); a shape change there must
+        // reflect in the tree.
+        this.changes = group.valueChanges.subscribe(() => this.syncShape());
     }
-    select(node) {
+    select(node, reveal = true) {
         this.selected = node;
-        // Reveal the node's rows in the tree as it opens on the right. Navigating
-        // also retires any pending just-added-leaf focus request.
+        this.sections = this.buildSections(node, []);
+        this.breadcrumb = this.pathTo(node);
+        // Navigating retires any pending just-added-leaf focus request.
+        this.focusSectionId = null;
         this.focusLeafKey = null;
-        if (this.hasExpandableContent(node))
-            this.expanded.add(node.id);
-    }
-    /** Select a child (list item or sub-group) from the detail pane, keeping its parent expanded in the tree. */
-    open(parent, child) {
-        this.expanded.add(parent.id);
-        this.select(child);
+        // Reveal the selection: expand every ancestor so the row is visible, and
+        // the node itself as it opens on the right. Structural re-syncs pass
+        // reveal=false — they must not re-expand what the user collapsed.
+        if (reveal) {
+            for (const crumb of this.breadcrumb) {
+                if (crumb !== node || this.hasExpandableContent(crumb))
+                    this.expanded.add(crumb.id);
+            }
+        }
     }
     /**
      * Root-to-`target` path for the detail-pane breadcrumb (inclusive of both ends),
-     * or an empty array if `target` is not in the current tree. Searched fresh each
-     * call so it stays correct after add/remove/presence mutations rebuild subtrees.
+     * or an empty array if `target` is not in the current tree.
      */
     pathTo(target) {
         const walk = (node, trail) => {
@@ -1072,6 +1199,31 @@ class ConfigEditorComponent {
         else
             this.expanded.add(node.id);
     }
+    /** Keyboard access for tree rows: Enter/Space selects, ArrowRight expands, ArrowLeft collapses. */
+    onRowKeydown(event, node) {
+        // Keys pressed on the row's inner buttons keep their own meaning.
+        if (event.target !== event.currentTarget)
+            return;
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                this.select(node);
+                break;
+            case 'ArrowRight':
+                if (this.hasExpandableContent(node) && !this.expanded.has(node.id)) {
+                    event.preventDefault();
+                    this.expanded.add(node.id);
+                }
+                break;
+            case 'ArrowLeft':
+                if (this.expanded.has(node.id)) {
+                    event.preventDefault();
+                    this.expanded.delete(node.id);
+                }
+                break;
+        }
+    }
     /** Whether the row shows an expand twisty: it has child rows to reveal (children or an optionals menu row). */
     hasExpandableContent(node) {
         return node.children.length > 0 || (this.editable() && !!node.optionals?.length);
@@ -1084,73 +1236,70 @@ class ConfigEditorComponent {
     hasError(node) {
         return !!(node.group?.invalid || node.list?.array.invalid || node.map?.group.invalid);
     }
-    /** Append a new item to a list node's FormArray and to the tree, then select it. */
+    /** Append a new item to a list node's FormArray (up to `maxItems`), then select it. */
     addItem(listNode) {
         const list = listNode.list;
         if (!list)
             return;
-        const group = buildFormFromSchema(list.itemSchema);
-        list.array.push(group);
-        const item = this.buildTree(list.itemSchema, group, list.itemLabel);
-        item.removable = { array: list.array, index: list.array.length - 1 };
-        listNode.children.push(item);
-        this.renumber(listNode);
-        this.expanded.add(listNode.id);
-        this.select(item);
-    }
-    /** Remove a list item from its FormArray and the tree (down to `minItems`). */
+        if (list.maxItems != null && list.array.length >= list.maxItems)
+            return;
+        list.array.push(buildFormFromSchema(list.itemSchema));
+        this.selectByPath(this.join(listNode.id, String(list.array.length - 1)));
+    }
+    /**
+     * Remove a list item from its FormArray (down to `minItems`). List-item
+     * identity is positional, so expansion state under the list is cleared —
+     * otherwise it would silently migrate to the items that shift into the
+     * removed indexes.
+     */
     removeItem(listNode, item) {
         if (!listNode.list || !item.removable)
             return;
         if (listNode.list.array.length <= listNode.list.minItems)
             return;
+        for (const id of [...this.expanded]) {
+            if (id.startsWith(`${listNode.id}/`))
+                this.expanded.delete(id);
+        }
         listNode.list.array.removeAt(item.removable.index);
-        listNode.children.splice(listNode.children.indexOf(item), 1);
-        this.renumber(listNode);
-        this.reselectIfOrphaned(listNode);
+        this.selectByPath(listNode.id);
+        this.focusSelectedRow();
     }
-    /** The key of the optional leaf the user just added; its detail-pane field grabs focus when rendered. */
+    /** The just-added optional leaf (section path + key) whose field grabs focus when rendered. */
+    focusSectionId = null;
     focusLeafKey = null;
-    /** Add an absent optional child from the menu: build its control, place it in the tree, and select it. */
+    /** Add an absent optional child from the menu: build its control and select the node it lands on. */
     addOptional(node, entry) {
         if (!node.group || node.group.get(entry.key))
             return;
-        const control = entry.schema.kind === 'nodeGroup'
-            ? buildFormFromSchema(entry.schema)
-            : buildControl(entry.schema);
-        node.group.addControl(entry.key, control);
-        node.optionals = node.optionals?.filter((o) => o !== entry);
+        node.group.addControl(entry.key, buildControl(entry.schema));
+        // A leaf renders in the parent's detail pane; complex kinds become tree nodes.
+        this.selectByPath(entry.schema.kind === 'leaf' ? node.id : this.join(node.id, entry.key));
+        // Adding the last optional removes the menu row that held focus.
+        if (entry.schema.kind !== 'leaf')
+            this.focusSelectedRow();
         if (entry.schema.kind === 'leaf') {
-            node.leaves.push({ key: entry.key, node: entry.schema, optional: entry });
-            this.select(node);
+            // Set after selection (select() retires any pending request): the new
+            // field should grab focus, like the form's own add button. Retired after
+            // a tick so later re-renders of the section cannot steal focus again.
+            this.focusSectionId = node.id;
             this.focusLeafKey = entry.key;
-            return;
+            setTimeout(() => {
+                if (this.focusLeafKey === entry.key) {
+                    this.focusSectionId = null;
+                    this.focusLeafKey = null;
+                }
+            });
         }
-        const child = this.buildChildNode(entry.schema, control, entry.label);
-        if (!child)
-            return;
-        child.presenceRemovable = { entry };
-        node.children.push(child);
-        this.expanded.add(node.id);
-        this.select(child);
     }
     /** Remove a present optional child node, returning its entry to the parent's menu. */
     removeOptional(parent, node) {
-        const entry = node.presenceRemovable?.entry;
-        if (!entry || !parent.group)
-            return;
-        parent.group.removeControl(entry.key);
-        parent.children.splice(parent.children.indexOf(node), 1);
-        this.reinsertOptional(parent, entry);
-        this.reselectIfOrphaned(parent);
-    }
-    /** Remove a present optional leaf from the detail pane, returning its entry to the menu. */
-    removeOptionalLeaf(node, leaf) {
-        if (!leaf.optional || !node.group)
+        const key = node.presenceRemovable?.key;
+        if (!key || !parent.group)
             return;
-        node.group.removeControl(leaf.key);
-        node.leaves = node.leaves.filter((l) => l !== leaf);
-        this.reinsertOptional(node, leaf.optional);
+        parent.group.removeControl(key);
+        this.selectByPath(parent.id);
+        this.focusSelectedRow();
     }
     /** The active case name of a choice node, or null when none is selected. */
     activeCase(node) {
@@ -1160,25 +1309,22 @@ class ConfigEditorComponent {
     activeCaseLabel(node) {
         const c = node.choice;
         const active = this.activeCase(node);
-        return c && active ? this.caseLabel(c.schema, active) : null;
+        return c && active ? (c.schema.caseLabels?.[active] ?? active) : null;
     }
     /** The display label for a case: the schema's `caseLabels` entry, else the case name. */
     caseLabel(choice, caseName) {
         return choice.caseLabels?.[caseName] ?? caseName;
     }
-    /** Switch a choice node's active case: swap the group's controls and rebuild the subtree in place. */
+    /** Switch a choice node's active case; the structural sync rebuilds the tree and sections. */
     switchTreeCase(node, caseName) {
         const c = node.choice;
         if (!c)
             return;
         switchChoiceCase(c.group, c.schema, caseName);
-        const rebuilt = this.buildTree(this.caseAsGroup(c.schema, caseName), c.group, node.label);
-        node.children = rebuilt.children;
-        node.leaves = rebuilt.leaves;
-        node.leafLists = rebuilt.leafLists;
-        node.optionals = rebuilt.optionals;
-        this.expanded.add(node.id);
-        this.select(node);
+        this.selectByPath(node.id);
+    }
+    objectKeys(obj) {
+        return Object.keys(obj);
     }
     /** Append a new entry to a complex map node under a generated unique key, then select it. */
     addTreeMapEntry(mapNode) {
@@ -1186,36 +1332,69 @@ class ConfigEditorComponent {
         if (!m)
             return;
         const key = addMapEntry(m.group, m.schema);
-        if (key == null)
-            return;
-        const child = this.buildChildNode(m.schema.value, m.group.get(key), key);
-        if (!child)
-            return;
-        child.mapEntry = { mapGroup: m.group, mapSchema: m.schema, key };
-        mapNode.children.push(child);
-        this.expanded.add(mapNode.id);
-        this.select(child);
+        if (key != null)
+            this.selectByPath(this.join(mapNode.id, key));
     }
-    /** Remove a complex map entry (down to `minEntries`) from the form group and the tree. */
+    /** Remove a complex map entry (down to `minEntries`). */
     removeTreeMapEntry(mapNode, entryNode) {
         const m = mapNode.map;
         const e = entryNode.mapEntry;
         if (!m || !e || !removeMapEntry(m.group, m.schema, e.key))
             return;
-        mapNode.children.splice(mapNode.children.indexOf(entryNode), 1);
-        this.reselectIfOrphaned(mapNode);
+        this.selectByPath(mapNode.id);
+        this.focusSelectedRow();
     }
-    /** Commit a rename-on-blur of a map entry's key; on success the node is relabeled. */
+    /**
+     * Commit a rename-on-blur of a map entry's key; on success the entry is
+     * selected under its new path and its fresh key field regains focus (the
+     * rename re-renders the section under a new id, destroying the input that
+     * held focus).
+     */
     renameTreeMapEntry(entryNode, rawKey) {
         const e = entryNode.mapEntry;
         if (!e)
             return;
         if (renameMapEntry(e.mapGroup, e.mapSchema, e.key, rawKey)) {
-            const committed = rawKey.trim();
-            e.key = committed;
-            entryNode.label = committed;
+            const parentPath = entryNode.id.slice(0, entryNode.id.lastIndexOf('/'));
+            const newId = this.join(parentPath, rawKey.trim());
+            // The entry's descendants keep their expansion under the new identity.
+            for (const id of [...this.expanded]) {
+                if (id === entryNode.id || id.startsWith(`${entryNode.id}/`)) {
+                    this.expanded.delete(id);
+                    this.expanded.add(newId + id.slice(entryNode.id.length));
+                }
+            }
+            this.selectByPath(newId);
+            // Deferred so the rebuilt section's key field exists before focusing.
+            setTimeout(() => this.host.nativeElement.querySelector('.detail .key-field input')?.focus());
         }
     }
+    /** Move keyboard focus to the selected tree row once the action's re-render settles. */
+    focusSelectedRow() {
+        setTimeout(() => this.host.nativeElement.querySelector('.tree-row.selected')?.focus());
+    }
+    /** A muted hint for a section whose node currently renders no content of its own. */
+    emptySectionHint(s) {
+        const n = s.node;
+        if (n.list && !n.children.length)
+            return `No ${n.list.itemLabel} items.`;
+        if (n.map?.complex && !n.children.length)
+            return 'No entries.';
+        if (n.map && !n.map.complex && !Object.keys(n.map.group.controls).length && !this.editable()) {
+            return 'No entries.';
+        }
+        return null;
+    }
+    /** Whether a list node is at `maxItems` (the add control is hidden). */
+    listAtMax(node) {
+        const l = node?.list;
+        return !!l && l.maxItems != null && l.array.length >= l.maxItems;
+    }
+    /** Whether a list node is at `minItems` (item remove controls are hidden). */
+    listAtMin(node) {
+        const l = node?.list;
+        return !!l && l.array.length <= l.minItems;
+    }
     /** Whether a map node is at `maxEntries` (the add control is hidden). */
     mapAtMax(node) {
         const m = node?.map;
@@ -1226,84 +1405,154 @@ class ConfigEditorComponent {
         const m = node?.map;
         return !!m && m.schema.minEntries != null && Object.keys(m.group.controls).length <= m.schema.minEntries;
     }
-    asFormControl = asFormControl;
-    asFormArray = asFormArray;
-    CASE_KEY = CASE_KEY;
-    objectKeys(obj) {
-        return Object.keys(obj);
-    }
-    /** Re-index and re-label a list node's item children (just "#n") after add/remove. */
-    renumber(listNode) {
-        listNode.children.forEach((child, i) => {
-            if (child.removable)
-                child.removable.index = i;
-            child.label = `#${i + 1}`;
-        });
+    // --- derived-tree maintenance ----------------------------------------------
+    /** Rebuild the tree from the current form structure if its shape changed. */
+    syncShape() {
+        const shape = this.shapeOf(this.formGroup());
+        if (shape === this.shape)
+            return;
+        this.rebuild();
+        this.reconcileSelection();
     }
-    /** Select `fallback` when the current selection is no longer reachable in the tree. */
-    reselectIfOrphaned(fallback) {
-        if (this.selected && this.pathTo(this.selected).length === 0)
-            this.select(fallback);
-    }
-    /** Re-insert a removed optional's entry into the node's menu, keeping schema order. */
-    reinsertOptional(node, entry) {
-        const list = (node.optionals ??= []);
-        const at = list.findIndex((o) => o.order > entry.order);
-        if (at === -1)
-            list.push(entry);
-        else
-            list.splice(at, 0, entry);
+    /**
+     * A cheap structural signature of a control tree: group keys (plus the active
+     * `__case`), array lengths, leaf placeholders. Value edits don't change it;
+     * added/removed/renamed controls and case switches do. Reading `__case` from
+     * any group is safe because the name is reserved (the builder rejects it as a
+     * case field name or map entry key), so only choice groups carry it.
+     */
+    shapeOf(control) {
+        if (control instanceof FormGroup) {
+            const inner = Object.keys(control.controls)
+                .sort()
+                .map((k) => `${k}:${this.shapeOf(control.controls[k])}`)
+                .join(',');
+            const active = control.get(CASE_KEY)?.value;
+            return `{#${this.uidOf(control)}${typeof active === 'string' ? `=${active};` : ''}${inner}}`;
+        }
+        if (control instanceof FormArray) {
+            return `[#${this.uidOf(control)}${control.controls.map((c) => this.shapeOf(c)).join(',')}]`;
+        }
+        return '.';
+    }
+    /** The instance id a container contributes to the shape signature. */
+    uidOf(control) {
+        let id = this.controlIds.get(control);
+        if (id == null) {
+            id = ++this.controlIdSeq;
+            this.controlIds.set(control, id);
+        }
+        return id;
     }
-    /** Synthetic group over a case's normalized fields, so a case body builds like any group. */
-    caseAsGroup(choice, caseName) {
-        return {
-            kind: 'nodeGroup',
-            name: choice.name,
-            children: choice.cases[caseName] ? caseFields(choice.cases[caseName]) : {},
+    /** Rebuild the whole tree from schema + form and refresh the shape signature. */
+    rebuild() {
+        const schema = this.schema();
+        this.root = this.buildTree(schema, this.formGroup(), schema.label ?? schema.name, '');
+        this.shape = this.shapeOf(this.formGroup());
+    }
+    /** Re-point `selected` at the rebuilt tree: same path, else the closest surviving ancestor. */
+    reconcileSelection() {
+        this.selectByPath(this.selected?.id ?? '', false);
+    }
+    /** The node at `path` in the current tree, or null. Walks by id-prefix segments. */
+    byPath(path) {
+        if (path === this.root.id)
+            return this.root;
+        const walk = (node) => {
+            for (const child of node.children) {
+                if (child.id === path)
+                    return child;
+                if (path.startsWith(child.id + '/'))
+                    return walk(child);
+            }
+            return null;
         };
+        return walk(this.root);
+    }
+    /** Select the node at `path`, falling back through its ancestors to the root. */
+    selectByPath(path, reveal = true) {
+        let target = this.byPath(path);
+        let trimmed = path;
+        while (!target && trimmed.includes('/')) {
+            trimmed = trimmed.slice(0, trimmed.lastIndexOf('/'));
+            target = this.byPath(trimmed);
+        }
+        this.select(target ?? this.root, reveal);
+    }
+    /**
+     * Flatten a subtree into detail sections, pre-order: the node's own fields
+     * first, then each child as its own breadcrumb-headed section. No nesting
+     * chrome — the headings are the boundaries between children.
+     */
+    buildSections(node, trail) {
+        const here = [...trail, node];
+        const list = [{ node, trail: here, ...this.sectionContent(node) }];
+        for (const child of node.children)
+            list.push(...this.buildSections(child, here));
+        return list;
+    }
+    /** A section's own renderable fields: a leaf-only schema slice and the group it binds to. */
+    sectionContent(node) {
+        if (node.choice) {
+            const active = this.activeCase(node);
+            const body = active && node.choice.schema.cases[active] ? this.caseAsGroup(node.choice.schema, active) : null;
+            return { schema: body ? this.leafOnly(body) : null, group: node.choice.group };
+        }
+        if (node.schema && node.group) {
+            return { schema: this.leafOnly(node.schema), group: node.group };
+        }
+        return { schema: null, group: null };
     }
-    buildTree(schema, group, label) {
-        const leaves = [];
-        const leafLists = [];
+    /**
+     * The node's own fields as a flattened schema: leaf and leafList children
+     * only. Complex children are rendered as sections of their own, so the
+     * embedded form never draws nested section chrome. Null when there are none.
+     */
+    leafOnly(schema) {
+        const children = {};
+        for (const key of Object.keys(schema.children)) {
+            const child = schema.children[key];
+            if (child.kind === 'leaf' || child.kind === 'leafList')
+                children[key] = child;
+        }
+        if (!Object.keys(children).length)
+            return null;
+        return { ...schema, root: false, children, appearance: { flatten: true } };
+    }
+    // --- tree construction -----------------------------------------------------
+    buildTree(schema, group, label, path) {
         const children = [];
         const optionals = [];
-        const keys = Object.keys(schema.children);
-        keys.forEach((key, order) => {
+        for (const key of Object.keys(schema.children)) {
             const child = schema.children[key];
-            const control = group.get(key);
-            const entry = { key, schema: child, label: this.labelOf(child, key), order };
-            if (child.kind === 'leaf') {
-                if (child.presence && !control)
-                    optionals.push(entry);
-                else if (control)
-                    leaves.push({ key, node: child, optional: child.presence ? entry : undefined });
-                return;
-            }
-            if (child.kind === 'leafList') {
-                leafLists.push({ key, node: child });
-                return;
+            if (child.kind === 'leaf' || child.kind === 'leafList') {
+                // Leaves render in the detail pane; an absent presence leaf is offered by the menu.
+                if (child.kind === 'leaf' && child.presence && !group.get(key)) {
+                    optionals.push({ key, schema: child, label: this.labelOf(child, key) });
+                }
+                continue;
             }
             const presence = child.kind !== 'nodeGroupList' && child.presence;
-            if (presence && !control) {
-                optionals.push(entry);
-                return;
+            if (presence && !group.get(key)) {
+                optionals.push({ key, schema: child, label: this.labelOf(child, key) });
+                continue;
             }
-            const node = this.buildChildNode(child, control, entry.label);
+            const node = this.buildChildNode(child, group.get(key), this.labelOf(child, key), this.join(path, key));
             if (!node)
-                return;
+                continue;
             if (presence)
-                node.presenceRemovable = { entry };
+                node.presenceRemovable = { key };
             children.push(node);
-        });
-        const node = { id: String(this.nextId++), label, children, leaves, leafLists, group };
+        }
+        const node = { id: path, label, children, group, schema };
         if (optionals.length)
             node.optionals = optionals;
         return node;
     }
     /** Build the tree node for a single non-leaf child, dispatching on its kind. Null when its control is missing. */
-    buildChildNode(schema, control, label) {
+    buildChildNode(schema, control, label, path) {
         if (schema.kind === 'nodeGroup') {
-            return control instanceof FormGroup ? this.buildTree(schema, control, label) : null;
+            return control instanceof FormGroup ? this.buildTree(schema, control, label, path) : null;
         }
         if (schema.kind === 'nodeGroupList') {
             const array = control;
@@ -1314,20 +1563,18 @@ class ConfigEditorComponent {
                     .map((item, i) => {
                     // Just "#n": the item sits under its list node, so repeating the
                     // item name (e.g. "Interface #1") only echoes the parent.
-                    const node = this.buildTree(schema.type, item, `#${i + 1}`);
-                    node.removable = { array, index: i };
+                    const node = this.buildTree(schema.type, item, `#${i + 1}`, this.join(path, String(i)));
+                    node.removable = { index: i };
                     return node;
                 })
                 : [];
             return {
-                id: String(this.nextId++),
+                id: path,
                 label,
                 children: items,
-                leaves: [],
-                leafLists: [],
                 group: null,
                 list: array instanceof FormArray
-                    ? { array, itemSchema: schema.type, itemLabel, minItems: schema.minItems ?? 0 }
+                    ? { array, itemSchema: schema.type, itemLabel, minItems: schema.minItems ?? 0, maxItems: schema.maxItems }
                     : undefined,
             };
         }
@@ -1336,8 +1583,9 @@ class ConfigEditorComponent {
                 return null;
             const active = control.get(CASE_KEY)?.value;
             const node = active && schema.cases[active]
-                ? this.buildTree(this.caseAsGroup(schema, active), control, label)
-                : { id: String(this.nextId++), label, children: [], leaves: [], leafLists: [], group: control };
+                ? this.buildTree(this.caseAsGroup(schema, active), control, label, path)
+                : { id: path, label, children: [], group: control };
+            node.schema = undefined;
             node.choice = { schema, group: control };
             return node;
         }
@@ -1351,36 +1599,57 @@ class ConfigEditorComponent {
             const entries = complex
                 ? Object.keys(control.controls)
                     .map((key) => {
-                    const entryNode = this.buildChildNode(schema.value, control.get(key), key);
-                    if (entryNode)
+                    // Index access, not .get(): entry keys are arbitrary runtime data
+                    // and .get() would split a key like '10.0.0.1' into a dotted path.
+                    const entryNode = this.buildChildNode(schema.value, control.controls[key], key, this.join(path, key));
+                    if (entryNode) {
                         entryNode.mapEntry = { mapGroup: control, mapSchema: schema, key };
+                    }
                     return entryNode;
                 })
                     .filter((n) => n !== null)
                 : [];
             return {
-                id: String(this.nextId++),
+                id: path,
                 label,
                 children: entries,
-                leaves: [],
-                leafLists: [],
                 group: null,
                 map: { schema, group: control, complex },
             };
         }
         return null;
     }
+    /** Synthetic group over a case's normalized fields, so a case body builds like any group. */
+    caseAsGroup(choice, caseName) {
+        return {
+            kind: 'nodeGroup',
+            name: choice.name,
+            children: choice.cases[caseName] ? caseFields(choice.cases[caseName]) : {},
+        };
+    }
     /** A node's display label: its schema `label`, else its record key. */
     labelOf(node, key) {
         return ('label' in node ? node.label : undefined) ?? key;
     }
+    /** Join a parent path and a segment; the root's path is the empty string. */
+    join(parent, segment) {
+        const seg = this.escapeSeg(segment);
+        return parent ? `${parent}/${seg}` : seg;
+    }
+    /**
+     * Escape a path segment: `/` is the id separator, and map entry keys are
+     * arbitrary runtime data that may contain it. Labels stay unescaped — only
+     * node identities encode.
+     */
+    escapeSeg(segment) {
+        return segment.replace(/%/g, '%25').replace(/\//g, '%2F');
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ConfigEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: ConfigEditorComponent, isStandalone: true, selector: "nff-config-editor", inputs: { schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"editor\">\n  <nav class=\"tree\">\n    <ng-template #treeNode let-node let-depth=\"depth\" let-parent=\"parent\">\n      <div\n        class=\"tree-row\"\n        [class.selected]=\"node === selected\"\n        [class.error]=\"hasError(node)\"\n        [style.padding-left.px]=\"8 + depth * 16\"\n        (click)=\"select(node)\"\n      >\n        @if (hasExpandableContent(node)) {\n          <button\n            matIconButton\n            class=\"twisty\"\n            (click)=\"toggle(node); $event.stopPropagation()\"\n            [attr.aria-label]=\"expanded.has(node.id) ? 'Collapse' : 'Expand'\"\n          >\n            <mat-icon>{{ expanded.has(node.id) ? 'expand_more' : 'chevron_right' }}</mat-icon>\n          </button>\n        } @else {\n          <span class=\"twisty-spacer\"></span>\n        }\n\n        <span class=\"tree-label\" [matTooltip]=\"node.label\">{{ node.label }}</span>\n        @if (node.choice && activeCaseLabel(node)) {\n          <span class=\"tree-sublabel\" [matTooltip]=\"activeCaseLabel(node)\">{{ activeCaseLabel(node) }}</span>\n        }\n\n        @if (editable() && node.list) {\n          <button\n            matIconButton\n            class=\"row-btn add\"\n            [matTooltip]=\"'Add ' + node.list.itemLabel\"\n            (click)=\"addItem(node); $event.stopPropagation()\"\n          >\n            <mat-icon>add</mat-icon>\n          </button>\n        }\n        @if (editable() && node.map?.complex && !mapAtMax(node)) {\n          <button\n            matIconButton\n            class=\"row-btn add\"\n            matTooltip=\"Add entry\"\n            (click)=\"addTreeMapEntry(node); $event.stopPropagation()\"\n          >\n            <mat-icon>add</mat-icon>\n          </button>\n        }\n        @if (editable() && node.removable) {\n          <button\n            matIconButton\n            class=\"row-btn remove\"\n            matTooltip=\"Remove\"\n            (click)=\"removeItem(parent, node); $event.stopPropagation()\"\n          >\n            <mat-icon>delete</mat-icon>\n          </button>\n        }\n        @if (editable() && node.presenceRemovable) {\n          <button\n            matIconButton\n            class=\"row-btn remove\"\n            matTooltip=\"Remove\"\n            (click)=\"removeOptional(parent, node); $event.stopPropagation()\"\n          >\n            <mat-icon>delete</mat-icon>\n          </button>\n        }\n        @if (editable() && node.mapEntry && !mapAtMin(parent)) {\n          <button\n            matIconButton\n            class=\"row-btn remove\"\n            matTooltip=\"Remove entry\"\n            (click)=\"removeTreeMapEntry(parent, node); $event.stopPropagation()\"\n          >\n            <mat-icon>delete</mat-icon>\n          </button>\n        }\n      </div>\n\n      @if (expanded.has(node.id)) {\n        @for (child of node.children; track child.id) {\n          <ng-container\n            *ngTemplateOutlet=\"treeNode; context: { $implicit: child, depth: depth + 1, parent: node }\"\n          />\n        }\n        @if (editable() && node.optionals?.length) {\n          <button\n            type=\"button\"\n            class=\"tree-row optional-row\"\n            [style.padding-left.px]=\"8 + (depth + 1) * 16\"\n            [matMenuTriggerFor]=\"treeOptionalsMenu\"\n            (click)=\"$event.stopPropagation()\"\n          >\n            <span class=\"twisty-spacer\"></span>\n            <mat-icon class=\"optional-icon\">add</mat-icon>\n            <span class=\"optional-label\">Optional field</span>\n          </button>\n          <mat-menu #treeOptionalsMenu=\"matMenu\">\n            @for (opt of node.optionals; track opt.key) {\n              <button mat-menu-item (click)=\"addOptional(node, opt)\">{{ opt.label }}</button>\n            }\n          </mat-menu>\n        }\n      }\n    </ng-template>\n\n    <ng-container *ngTemplateOutlet=\"treeNode; context: { $implicit: root, depth: 0 }\" />\n  </nav>\n\n  <section class=\"detail\">\n    @if (selected) {\n      <nav class=\"breadcrumb\" aria-label=\"Breadcrumb\">\n        @for (crumb of pathTo(selected); track crumb.id; let last = $last) {\n          @if (last) {\n            <span class=\"crumb-current\" aria-current=\"page\">{{ crumb.label }}</span>\n          } @else {\n            <button type=\"button\" class=\"item-link crumb-link\" (click)=\"select(crumb)\">{{ crumb.label }}</button>\n            <span class=\"crumb-sep\" aria-hidden=\"true\">/</span>\n          }\n        }\n      </nav>\n\n      @if (selected.choice; as choice) {\n        @if (editable()) {\n          <mat-form-field class=\"case-select\" appearance=\"fill\">\n            <mat-label>Selected option</mat-label>\n            <mat-select [value]=\"activeCase(selected)\" (selectionChange)=\"switchTreeCase(selected, $event.value)\">\n              @for (caseName of objectKeys(choice.schema.cases); track caseName) {\n                <mat-option [value]=\"caseName\">{{ caseLabel(choice.schema, caseName) }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        } @else {\n          <mat-form-field class=\"case-select\" appearance=\"outline\">\n            <mat-label>Selected option</mat-label>\n            <input matInput readonly [value]=\"activeCaseLabel(selected) ?? ''\" />\n          </mat-form-field>\n        }\n      }\n\n      @if (selected.mapEntry; as entry) {\n        <mat-form-field class=\"key-field\" [appearance]=\"editable() ? 'fill' : 'outline'\">\n          <mat-label>{{ entry.mapSchema.keyLabel ?? 'Key' }}</mat-label>\n          <input\n            matInput\n            #entryKey\n            [readonly]=\"!editable()\"\n            [value]=\"entry.key\"\n            (change)=\"renameTreeMapEntry(selected, entryKey.value); entryKey.value = entry.key\"\n          />\n        </mat-form-field>\n      }\n\n      @if (selected.map && !selected.map.complex) {\n        <nff-node-map-renderer\n          [nodeMap]=\"selected.map.schema\"\n          [formGroup]=\"selected.map.group\"\n          [editable]=\"editable()\"\n        />\n      }\n\n      @if (selected.group) {\n        <div class=\"group-body\">\n          <div class=\"fields\" [formGroup]=\"selected.group\">\n            @for (leaf of selected.leaves; track leaf.key) {\n              <nff-leaf-renderer\n                [leaf_]=\"leaf.node\"\n                [control]=\"asFormControl(selected.group.get(leaf.key))\"\n                [editable]=\"editable()\"\n                [removable]=\"!!leaf.optional\"\n                [autofocus]=\"leaf.key === focusLeafKey\"\n                (remove)=\"removeOptionalLeaf(selected, leaf)\"\n              />\n            }\n            @for (list of selected.leafLists; track list.key) {\n              <nff-leaf-list-renderer\n                [leaf_]=\"list.node\"\n                [formArray]=\"asFormArray(selected.group.get(list.key))\"\n                [editable]=\"editable()\"\n              />\n            }\n            @if (editable() && selected.optionals?.length) {\n              <div class=\"detail-optional\">\n                <button matButton [matMenuTriggerFor]=\"detailOptionalsMenu\">\n                  <mat-icon>add</mat-icon> Optional field\n                </button>\n                <mat-menu #detailOptionalsMenu=\"matMenu\">\n                  @for (opt of selected.optionals; track opt.key) {\n                    <button mat-menu-item (click)=\"addOptional(selected, opt)\">{{ opt.label }}</button>\n                  }\n                </mat-menu>\n              </div>\n            }\n          </div>\n          @if (selected.children.length) {\n            <nav class=\"child-links\">\n              <h4 class=\"child-links-title\">Sections</h4>\n              @for (child of selected.children; track child.id) {\n                <button type=\"button\" class=\"item-link child-link\" [matTooltip]=\"child.label\" (click)=\"open(selected, child)\">\n                  <mat-icon>chevron_right</mat-icon>{{ child.label }}\n                </button>\n              }\n            </nav>\n          }\n        </div>\n      }\n\n      @if (selected.list; as list) {\n        @if (selected.children.length) {\n          <ul class=\"item-list\">\n            @for (item of selected.children; track item.id) {\n              <li class=\"item-row\">\n                <button type=\"button\" class=\"item-link\" [matTooltip]=\"item.label\" (click)=\"open(selected, item)\">{{ item.label }}</button>\n                @if (editable() && item.removable) {\n                  <button\n                    matIconButton\n                    class=\"row-btn remove-item\"\n                    matTooltip=\"Remove\"\n                    (click)=\"removeItem(selected, item)\"\n                  >\n                    <mat-icon>delete</mat-icon>\n                  </button>\n                }\n              </li>\n            }\n          </ul>\n        } @else {\n          <p class=\"empty\">No {{ list.itemLabel }} items yet.</p>\n        }\n        @if (editable()) {\n          <div class=\"list-actions\">\n            <button matButton (click)=\"addItem(selected)\">\n              <mat-icon>add</mat-icon> Add {{ list.itemLabel }}\n            </button>\n          </div>\n        }\n      }\n\n      @if (selected.map && selected.map.complex) {\n        @if (selected.children.length) {\n          <ul class=\"item-list\">\n            @for (item of selected.children; track item.id) {\n              <li class=\"item-row\">\n                <button type=\"button\" class=\"item-link\" [matTooltip]=\"item.label\" (click)=\"open(selected, item)\">{{ item.label }}</button>\n                @if (editable() && !mapAtMin(selected)) {\n                  <button\n                    matIconButton\n                    class=\"row-btn remove-item\"\n                    matTooltip=\"Remove entry\"\n                    (click)=\"removeTreeMapEntry(selected, item)\"\n                  >\n                    <mat-icon>delete</mat-icon>\n                  </button>\n                }\n              </li>\n            }\n          </ul>\n        } @else {\n          <p class=\"empty\">No entries yet.</p>\n        }\n        @if (editable() && !mapAtMax(selected)) {\n          <div class=\"list-actions\">\n            <button matButton (click)=\"addTreeMapEntry(selected)\">\n              <mat-icon>add</mat-icon> Add entry\n            </button>\n          </div>\n        }\n      }\n\n      @if (\n        !selected.choice &&\n        !selected.mapEntry &&\n        !selected.map &&\n        !selected.list &&\n        !selected.leaves.length &&\n        !selected.leafLists.length &&\n        !selected.children.length &&\n        !(editable() && selected.optionals?.length)\n      ) {\n        <p class=\"empty\">This node has no fields.</p>\n      }\n    } @else {\n      <p class=\"empty\">Select a node on the left to edit its fields.</p>\n    }\n  </section>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.editor{display:flex;align-items:stretch;gap:16px;min-height:320px}.tree{flex:0 0 360px;min-width:360px;overflow:auto;border-right:1px solid var(--mat-sys-outline-variant, rgba(0, 0, 0, .12));padding:4px 12px 4px 0}.tree-row{display:flex;align-items:center;gap:4px;height:32px;cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.tree-row:hover{background:var(--mat-sys-surface-container-high, rgba(0, 0, 0, .04))}.tree-row.selected{background:var(--mat-sys-secondary-container, rgba(103, 80, 164, .12));font-weight:600}.tree-row.error .tree-label{color:var(--mat-sys-error, #b3261e)}.twisty{flex:0 0 auto;--mat-icon-button-state-layer-size: 28px;--mat-icon-button-icon-size: 18px}.twisty mat-icon{font-size:18px;width:18px;height:18px}.twisty-spacer{flex:0 0 auto;width:28px}.tree-label{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis}.tree-sublabel{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;font-size:.85em;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .55))}.tree-sublabel:before{content:\"\\b7  \"}.optional-row{width:100%;border:0;background:none;font:inherit;text-align:left}.optional-icon{flex:0 0 auto;font-size:18px;width:18px;height:18px;color:var(--mat-sys-primary, #6750a4)}.optional-label{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .55));font-style:italic}.row-btn{flex:0 0 auto;--mat-icon-button-state-layer-size: 28px;--mat-icon-button-icon-size: 18px}.row-btn mat-icon{font-size:18px;width:18px;height:18px}.row-btn.remove{visibility:hidden}.tree-row:hover .row-btn.remove,.tree-row.selected .row-btn.remove{visibility:visible}.detail{flex:1 1 auto;min-width:0;overflow:auto}.breadcrumb{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;margin:4px 0 12px;font-size:1.15rem}.crumb-current{font-weight:600}.crumb-link{font-size:inherit;padding:0}.crumb-sep{color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .5))}.fields{display:flex;flex-direction:column;gap:4px}.case-select,.key-field{display:block;max-width:320px;margin-bottom:8px}.detail-optional{display:flex;justify-content:flex-start}.empty{color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));font-style:italic}.item-list{list-style:none;margin:0 0 8px;padding:0}.item-row{display:flex;align-items:center;gap:4px}.item-link{min-width:0;padding:4px 0;border:0;background:none;text-align:left;cursor:pointer;color:var(--mat-sys-primary, #6750a4);font:inherit;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.item-link:hover{text-decoration:underline}.remove-item{flex:0 0 auto}.list-actions{display:flex;justify-content:flex-end}.group-body{display:flex;align-items:flex-start;gap:24px}.group-body .fields{flex:1 1 auto;min-width:0}.child-links{flex:0 0 200px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding-left:16px;border-left:1px solid var(--mat-sys-outline-variant, rgba(0, 0, 0, .12))}.child-links-title{margin:0 0 4px;font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6))}.child-link{display:inline-flex;align-items:center;gap:2px}.child-link mat-icon{font-size:18px;width:18px;height:18px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$1.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: i4$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.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: i3.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: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: LeafRendererComponent, selector: "nff-leaf-renderer", inputs: ["leaf_", "control", "initialValue", "removable", "editable", "autofocus"], outputs: ["remove"] }, { kind: "component", type: LeafListRendererComponent, selector: "nff-leaf-list-renderer", inputs: ["leaf_", "initialValue", "formArray", "editable", "minItems"], outputs: ["message"] }, { kind: "component", type: NodeMapRendererComponent, selector: "nff-node-map-renderer", inputs: ["nodeMap", "formGroup", "editable"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: ConfigEditorComponent, isStandalone: true, selector: "nff-config-editor", inputs: { schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"editor\">\n  <nav class=\"tree\" role=\"tree\" aria-label=\"Configuration structure\">\n    <ng-template #treeNode let-node let-depth=\"depth\" let-parent=\"parent\">\n      <div\n        class=\"tree-row\"\n        role=\"treeitem\"\n        tabindex=\"0\"\n        [class.selected]=\"node === selected\"\n        [class.error]=\"hasError(node)\"\n        [attr.aria-selected]=\"node === selected\"\n        [attr.aria-expanded]=\"hasExpandableContent(node) ? expanded.has(node.id) : null\"\n        [attr.aria-level]=\"depth + 1\"\n        [style.padding-left.px]=\"8 + depth * 16\"\n        (click)=\"select(node)\"\n        (keydown)=\"onRowKeydown($event, node)\"\n      >\n        @if (hasExpandableContent(node)) {\n          <button\n            matIconButton\n            class=\"twisty\"\n            tabindex=\"-1\"\n            (click)=\"toggle(node); $event.stopPropagation()\"\n            [attr.aria-label]=\"expanded.has(node.id) ? 'Collapse' : 'Expand'\"\n          >\n            <mat-icon>{{ expanded.has(node.id) ? 'expand_more' : 'chevron_right' }}</mat-icon>\n          </button>\n        } @else {\n          <span class=\"twisty-spacer\"></span>\n        }\n\n        <span class=\"tree-label\" [matTooltip]=\"node.label\">{{ node.label }}</span>\n        @if (node.choice && activeCaseLabel(node)) {\n          <span class=\"tree-sublabel\" [matTooltip]=\"activeCaseLabel(node)\">{{ activeCaseLabel(node) }}</span>\n        }\n        @if (hasError(node)) {\n          <!-- A non-color error signal beside the red row text. -->\n          <mat-icon class=\"row-error-icon\" aria-hidden=\"false\" role=\"img\" aria-label=\"Has validation errors\"\n            >error_outline</mat-icon\n          >\n        }\n\n        @if (editable() && node.list && !listAtMax(node)) {\n          <button\n            matIconButton\n            class=\"row-btn add\"\n            [matTooltip]=\"'Add ' + node.list.itemLabel\"\n            [attr.aria-label]=\"'Add ' + node.list.itemLabel\"\n            (click)=\"addItem(node); $event.stopPropagation()\"\n          >\n            <mat-icon>add</mat-icon>\n          </button>\n        }\n        @if (editable() && node.map?.complex && !mapAtMax(node)) {\n          <button\n            matIconButton\n            class=\"row-btn add\"\n            matTooltip=\"Add entry\"\n            [attr.aria-label]=\"'Add ' + node.label + ' entry'\"\n            (click)=\"addTreeMapEntry(node); $event.stopPropagation()\"\n          >\n            <mat-icon>add</mat-icon>\n          </button>\n        }\n        @if (editable() && node.removable && !listAtMin(parent)) {\n          <button\n            matIconButton\n            class=\"row-btn remove\"\n            matTooltip=\"Remove\"\n            [attr.aria-label]=\"'Remove ' + node.label\"\n            (click)=\"removeItem(parent, node); $event.stopPropagation()\"\n          >\n            <mat-icon>delete</mat-icon>\n          </button>\n        }\n        @if (editable() && node.presenceRemovable) {\n          <button\n            matIconButton\n            class=\"row-btn remove\"\n            matTooltip=\"Remove\"\n            [attr.aria-label]=\"'Remove ' + node.label\"\n            (click)=\"removeOptional(parent, node); $event.stopPropagation()\"\n          >\n            <mat-icon>delete</mat-icon>\n          </button>\n        }\n        @if (editable() && node.mapEntry && !mapAtMin(parent)) {\n          <button\n            matIconButton\n            class=\"row-btn remove\"\n            matTooltip=\"Remove entry\"\n            [attr.aria-label]=\"'Remove ' + node.label + ' entry'\"\n            (click)=\"removeTreeMapEntry(parent, node); $event.stopPropagation()\"\n          >\n            <mat-icon>delete</mat-icon>\n          </button>\n        }\n      </div>\n\n      @if (expanded.has(node.id)) {\n        @for (child of node.children; track child.id) {\n          <ng-container\n            *ngTemplateOutlet=\"treeNode; context: { $implicit: child, depth: depth + 1, parent: node }\"\n          />\n        }\n        @if (editable() && node.optionals?.length) {\n          <button\n            type=\"button\"\n            class=\"tree-row optional-row\"\n            [style.padding-left.px]=\"8 + (depth + 1) * 16\"\n            [matMenuTriggerFor]=\"treeOptionalsMenu\"\n            (click)=\"$event.stopPropagation()\"\n          >\n            <span class=\"twisty-spacer\"></span>\n            <mat-icon class=\"optional-icon\">add</mat-icon>\n            <span class=\"optional-label\">Optional field</span>\n          </button>\n          <mat-menu #treeOptionalsMenu=\"matMenu\">\n            @for (opt of node.optionals; track opt.key) {\n              <button mat-menu-item (click)=\"addOptional(node, opt)\">{{ opt.label }}</button>\n            }\n          </mat-menu>\n        }\n      }\n    </ng-template>\n\n    <ng-container *ngTemplateOutlet=\"treeNode; context: { $implicit: root, depth: 0 }\" />\n  </nav>\n\n  <section class=\"detail\">\n    @if (selected) {\n      <nav class=\"breadcrumb\" aria-label=\"Breadcrumb\">\n        @for (crumb of breadcrumb; track crumb.id; let last = $last) {\n          @if (last) {\n            <span class=\"crumb-current\" aria-current=\"page\">{{ crumb.label }}</span>\n          } @else {\n            <button type=\"button\" class=\"item-link crumb-link\" (click)=\"select(crumb)\">{{ crumb.label }}</button>\n            <span class=\"crumb-sep\" aria-hidden=\"true\">/</span>\n          }\n        }\n      </nav>\n\n      <!-- The selected subtree as a flat section list: each descendant's fields\n           under a breadcrumb heading \u2014 the headings, not nesting, mark the\n           boundary between one child and the next. -->\n      @for (s of sections; track s.node.id) {\n        @if (s.trail.length > 1) {\n          <!-- A heading, not a nav landmark: dozens of identical \"Section\"\n               landmarks would flood the assistive-tech landmark list. Its\n               accessible name is the trail itself. -->\n          <div class=\"section-heading\" role=\"heading\" aria-level=\"3\">\n            @for (crumb of s.trail; track crumb.id; let last = $last) {\n              @if (last) {\n                <span class=\"crumb-current\">{{ crumb.label }}</span>\n              } @else {\n                <button type=\"button\" class=\"item-link crumb-link\" (click)=\"select(crumb)\">{{ crumb.label }}</button>\n                <span class=\"crumb-sep\" aria-hidden=\"true\">/</span>\n              }\n            }\n          </div>\n        }\n\n        @if (s.node.mapEntry; as entry) {\n          <mat-form-field class=\"key-field\" [appearance]=\"editable() ? 'fill' : 'outline'\">\n            <mat-label>{{ entry.mapSchema.keyLabel ?? 'Key' }}</mat-label>\n            <input\n              matInput\n              #entryKey\n              [readonly]=\"!editable()\"\n              [value]=\"entry.key\"\n              (change)=\"renameTreeMapEntry(s.node, entryKey.value); entryKey.value = entry.key\"\n            />\n          </mat-form-field>\n        }\n\n        @if (s.node.choice; as choice) {\n          @if (editable()) {\n            <mat-form-field class=\"case-select\" appearance=\"fill\">\n              <mat-label>Selected option</mat-label>\n              <mat-select [value]=\"activeCase(s.node)\" (selectionChange)=\"switchTreeCase(s.node, $event.value)\">\n                @for (caseName of objectKeys(choice.schema.cases); track caseName) {\n                  <mat-option [value]=\"caseName\">{{ caseLabel(choice.schema, caseName) }}</mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n          } @else {\n            <mat-form-field class=\"case-select\" appearance=\"outline\">\n              <mat-label>Selected option</mat-label>\n              <input matInput readonly [value]=\"activeCaseLabel(s.node) ?? ''\" />\n            </mat-form-field>\n          }\n        }\n\n        @if (s.schema && s.group) {\n          <nff-dynamic-recursive-form\n            [schema]=\"s.schema\"\n            [formGroup]=\"s.group\"\n            [editable]=\"editable()\"\n            [focusLeaf]=\"s.node.id === focusSectionId ? focusLeafKey : null\"\n          />\n        }\n\n        @if (s.node.map && !s.node.map.complex) {\n          <nff-node-map-renderer\n            [nodeMap]=\"s.node.map.schema\"\n            [formGroup]=\"s.node.map.group\"\n            [editable]=\"editable()\"\n          />\n        }\n\n        @if (editable() && s.node.map?.complex && !mapAtMax(s.node)) {\n          <div class=\"section-actions\">\n            <button matButton (click)=\"addTreeMapEntry(s.node)\"><mat-icon>add</mat-icon> Add entry</button>\n          </div>\n        }\n        @if (editable() && s.node.list && !listAtMax(s.node)) {\n          <div class=\"section-actions\">\n            <button matButton (click)=\"addItem(s.node)\">\n              <mat-icon>add</mat-icon> Add {{ s.node.list.itemLabel }}\n            </button>\n          </div>\n        }\n        @if (emptySectionHint(s); as hint) {\n          <p class=\"empty\">{{ hint }}</p>\n        }\n      }\n\n      @if (\n        sections.length === 1 &&\n        !sections[0].schema &&\n        !sections[0].node.choice &&\n        !sections[0].node.map &&\n        !sections[0].node.list &&\n        !sections[0].node.mapEntry\n      ) {\n        <p class=\"empty\">This node has no fields.</p>\n      }\n    } @else {\n      <p class=\"empty\">Select a node on the left to edit its fields.</p>\n    }\n  </section>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.editor{display:flex;align-items:stretch;gap:16px;min-height:320px}.tree{flex:0 0 360px;min-width:360px;overflow:auto;border-right:1px solid var(--mat-sys-outline-variant);padding:4px 12px 4px 0}.tree-row{display:flex;align-items:center;gap:4px;height:32px;cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.tree-row:hover{background:var(--mat-sys-surface-container-high)}.tree-row.selected{background:var(--mat-sys-secondary-container);font-weight:600}.tree-row.error .tree-label{color:var(--mat-sys-error)}.row-error-icon{flex:0 0 auto;font-size:18px;width:18px;height:18px;color:var(--mat-sys-error)}.tree-row:focus-visible{outline:2px solid var(--mat-sys-primary);outline-offset:-2px}.twisty{flex:0 0 auto;--mat-icon-button-state-layer-size: 28px;--mat-icon-button-icon-size: 18px}.twisty mat-icon{font-size:18px;width:18px;height:18px}.twisty-spacer{flex:0 0 auto;width:28px}.tree-label{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis}.tree-sublabel{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;font-size:.85em;color:var(--mat-sys-on-surface-variant)}.tree-sublabel:before{content:\"\\b7  \"}.optional-row{width:100%;border:0;background:none;font:inherit;text-align:left}.optional-icon{flex:0 0 auto;font-size:18px;width:18px;height:18px;color:var(--mat-sys-primary)}.optional-label{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;color:var(--mat-sys-on-surface-variant);font-style:italic}.row-btn{flex:0 0 auto;--mat-icon-button-state-layer-size: 28px;--mat-icon-button-icon-size: 18px}.row-btn mat-icon{font-size:18px;width:18px;height:18px}.row-btn.add{visibility:visible}.row-btn.remove{visibility:hidden}.tree-row:hover .row-btn.remove,.tree-row.selected .row-btn.remove,.tree-row:focus-within .row-btn.remove{visibility:visible}.detail{flex:1 1 auto;min-width:0;overflow:auto}.breadcrumb{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;margin:4px 0 12px;font-size:1.15rem}.crumb-current{font-weight:600}.crumb-link{font-size:inherit;padding:0}.crumb-sep{color:var(--mat-sys-on-surface-variant)}.section-heading{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;margin:20px 0 8px;padding-top:12px;border-top:1px solid var(--mat-sys-outline-variant);font-size:.95rem}.section-heading .crumb-current{font-weight:600}.key-field,.case-select{display:block;max-width:320px;margin-bottom:8px}.section-actions{display:flex;justify-content:flex-start;margin-bottom:8px}.empty{color:var(--mat-sys-on-surface-variant);font-style:italic}.item-link{min-width:0;padding:4px 0;border:0;background:none;text-align:left;cursor:pointer;color:var(--mat-sys-primary);font:inherit;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.item-link:hover{text-decoration:underline}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.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$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { 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: i3.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: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: DynamicRecursiveFormComponent, selector: "nff-dynamic-recursive-form", inputs: ["schema", "initialValue", "formGroup", "index", "removable", "title", "editable", "addButtonCallback", "focusLeaf"], outputs: ["remove", "editableChange"] }, { kind: "component", type: NodeMapRendererComponent, selector: "nff-node-map-renderer", inputs: ["nodeMap", "formGroup", "editable"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ConfigEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nff-config-editor', standalone: true, imports: [
-                        ReactiveFormsModule,
                         NgTemplateOutlet,
                         MatIconModule,
                         MatButtonModule,
@@ -1389,11 +1658,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         MatInputModule,
                         MatSelectModule,
                         MatTooltip,
-                        LeafRendererComponent,
-                        LeafListRendererComponent,
+                        DynamicRecursiveFormComponent,
                         NodeMapRendererComponent,
-                    ], template: "<div class=\"editor\">\n  <nav class=\"tree\">\n    <ng-template #treeNode let-node let-depth=\"depth\" let-parent=\"parent\">\n      <div\n        class=\"tree-row\"\n        [class.selected]=\"node === selected\"\n        [class.error]=\"hasError(node)\"\n        [style.padding-left.px]=\"8 + depth * 16\"\n        (click)=\"select(node)\"\n      >\n        @if (hasExpandableContent(node)) {\n          <button\n            matIconButton\n            class=\"twisty\"\n            (click)=\"toggle(node); $event.stopPropagation()\"\n            [attr.aria-label]=\"expanded.has(node.id) ? 'Collapse' : 'Expand'\"\n          >\n            <mat-icon>{{ expanded.has(node.id) ? 'expand_more' : 'chevron_right' }}</mat-icon>\n          </button>\n        } @else {\n          <span class=\"twisty-spacer\"></span>\n        }\n\n        <span class=\"tree-label\" [matTooltip]=\"node.label\">{{ node.label }}</span>\n        @if (node.choice && activeCaseLabel(node)) {\n          <span class=\"tree-sublabel\" [matTooltip]=\"activeCaseLabel(node)\">{{ activeCaseLabel(node) }}</span>\n        }\n\n        @if (editable() && node.list) {\n          <button\n            matIconButton\n            class=\"row-btn add\"\n            [matTooltip]=\"'Add ' + node.list.itemLabel\"\n            (click)=\"addItem(node); $event.stopPropagation()\"\n          >\n            <mat-icon>add</mat-icon>\n          </button>\n        }\n        @if (editable() && node.map?.complex && !mapAtMax(node)) {\n          <button\n            matIconButton\n            class=\"row-btn add\"\n            matTooltip=\"Add entry\"\n            (click)=\"addTreeMapEntry(node); $event.stopPropagation()\"\n          >\n            <mat-icon>add</mat-icon>\n          </button>\n        }\n        @if (editable() && node.removable) {\n          <button\n            matIconButton\n            class=\"row-btn remove\"\n            matTooltip=\"Remove\"\n            (click)=\"removeItem(parent, node); $event.stopPropagation()\"\n          >\n            <mat-icon>delete</mat-icon>\n          </button>\n        }\n        @if (editable() && node.presenceRemovable) {\n          <button\n            matIconButton\n            class=\"row-btn remove\"\n            matTooltip=\"Remove\"\n            (click)=\"removeOptional(parent, node); $event.stopPropagation()\"\n          >\n            <mat-icon>delete</mat-icon>\n          </button>\n        }\n        @if (editable() && node.mapEntry && !mapAtMin(parent)) {\n          <button\n            matIconButton\n            class=\"row-btn remove\"\n            matTooltip=\"Remove entry\"\n            (click)=\"removeTreeMapEntry(parent, node); $event.stopPropagation()\"\n          >\n            <mat-icon>delete</mat-icon>\n          </button>\n        }\n      </div>\n\n      @if (expanded.has(node.id)) {\n        @for (child of node.children; track child.id) {\n          <ng-container\n            *ngTemplateOutlet=\"treeNode; context: { $implicit: child, depth: depth + 1, parent: node }\"\n          />\n        }\n        @if (editable() && node.optionals?.length) {\n          <button\n            type=\"button\"\n            class=\"tree-row optional-row\"\n            [style.padding-left.px]=\"8 + (depth + 1) * 16\"\n            [matMenuTriggerFor]=\"treeOptionalsMenu\"\n            (click)=\"$event.stopPropagation()\"\n          >\n            <span class=\"twisty-spacer\"></span>\n            <mat-icon class=\"optional-icon\">add</mat-icon>\n            <span class=\"optional-label\">Optional field</span>\n          </button>\n          <mat-menu #treeOptionalsMenu=\"matMenu\">\n            @for (opt of node.optionals; track opt.key) {\n              <button mat-menu-item (click)=\"addOptional(node, opt)\">{{ opt.label }}</button>\n            }\n          </mat-menu>\n        }\n      }\n    </ng-template>\n\n    <ng-container *ngTemplateOutlet=\"treeNode; context: { $implicit: root, depth: 0 }\" />\n  </nav>\n\n  <section class=\"detail\">\n    @if (selected) {\n      <nav class=\"breadcrumb\" aria-label=\"Breadcrumb\">\n        @for (crumb of pathTo(selected); track crumb.id; let last = $last) {\n          @if (last) {\n            <span class=\"crumb-current\" aria-current=\"page\">{{ crumb.label }}</span>\n          } @else {\n            <button type=\"button\" class=\"item-link crumb-link\" (click)=\"select(crumb)\">{{ crumb.label }}</button>\n            <span class=\"crumb-sep\" aria-hidden=\"true\">/</span>\n          }\n        }\n      </nav>\n\n      @if (selected.choice; as choice) {\n        @if (editable()) {\n          <mat-form-field class=\"case-select\" appearance=\"fill\">\n            <mat-label>Selected option</mat-label>\n            <mat-select [value]=\"activeCase(selected)\" (selectionChange)=\"switchTreeCase(selected, $event.value)\">\n              @for (caseName of objectKeys(choice.schema.cases); track caseName) {\n                <mat-option [value]=\"caseName\">{{ caseLabel(choice.schema, caseName) }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        } @else {\n          <mat-form-field class=\"case-select\" appearance=\"outline\">\n            <mat-label>Selected option</mat-label>\n            <input matInput readonly [value]=\"activeCaseLabel(selected) ?? ''\" />\n          </mat-form-field>\n        }\n      }\n\n      @if (selected.mapEntry; as entry) {\n        <mat-form-field class=\"key-field\" [appearance]=\"editable() ? 'fill' : 'outline'\">\n          <mat-label>{{ entry.mapSchema.keyLabel ?? 'Key' }}</mat-label>\n          <input\n            matInput\n            #entryKey\n            [readonly]=\"!editable()\"\n            [value]=\"entry.key\"\n            (change)=\"renameTreeMapEntry(selected, entryKey.value); entryKey.value = entry.key\"\n          />\n        </mat-form-field>\n      }\n\n      @if (selected.map && !selected.map.complex) {\n        <nff-node-map-renderer\n          [nodeMap]=\"selected.map.schema\"\n          [formGroup]=\"selected.map.group\"\n          [editable]=\"editable()\"\n        />\n      }\n\n      @if (selected.group) {\n        <div class=\"group-body\">\n          <div class=\"fields\" [formGroup]=\"selected.group\">\n            @for (leaf of selected.leaves; track leaf.key) {\n              <nff-leaf-renderer\n                [leaf_]=\"leaf.node\"\n                [control]=\"asFormControl(selected.group.get(leaf.key))\"\n                [editable]=\"editable()\"\n                [removable]=\"!!leaf.optional\"\n                [autofocus]=\"leaf.key === focusLeafKey\"\n                (remove)=\"removeOptionalLeaf(selected, leaf)\"\n              />\n            }\n            @for (list of selected.leafLists; track list.key) {\n              <nff-leaf-list-renderer\n                [leaf_]=\"list.node\"\n                [formArray]=\"asFormArray(selected.group.get(list.key))\"\n                [editable]=\"editable()\"\n              />\n            }\n            @if (editable() && selected.optionals?.length) {\n              <div class=\"detail-optional\">\n                <button matButton [matMenuTriggerFor]=\"detailOptionalsMenu\">\n                  <mat-icon>add</mat-icon> Optional field\n                </button>\n                <mat-menu #detailOptionalsMenu=\"matMenu\">\n                  @for (opt of selected.optionals; track opt.key) {\n                    <button mat-menu-item (click)=\"addOptional(selected, opt)\">{{ opt.label }}</button>\n                  }\n                </mat-menu>\n              </div>\n            }\n          </div>\n          @if (selected.children.length) {\n            <nav class=\"child-links\">\n              <h4 class=\"child-links-title\">Sections</h4>\n              @for (child of selected.children; track child.id) {\n                <button type=\"button\" class=\"item-link child-link\" [matTooltip]=\"child.label\" (click)=\"open(selected, child)\">\n                  <mat-icon>chevron_right</mat-icon>{{ child.label }}\n                </button>\n              }\n            </nav>\n          }\n        </div>\n      }\n\n      @if (selected.list; as list) {\n        @if (selected.children.length) {\n          <ul class=\"item-list\">\n            @for (item of selected.children; track item.id) {\n              <li class=\"item-row\">\n                <button type=\"button\" class=\"item-link\" [matTooltip]=\"item.label\" (click)=\"open(selected, item)\">{{ item.label }}</button>\n                @if (editable() && item.removable) {\n                  <button\n                    matIconButton\n                    class=\"row-btn remove-item\"\n                    matTooltip=\"Remove\"\n                    (click)=\"removeItem(selected, item)\"\n                  >\n                    <mat-icon>delete</mat-icon>\n                  </button>\n                }\n              </li>\n            }\n          </ul>\n        } @else {\n          <p class=\"empty\">No {{ list.itemLabel }} items yet.</p>\n        }\n        @if (editable()) {\n          <div class=\"list-actions\">\n            <button matButton (click)=\"addItem(selected)\">\n              <mat-icon>add</mat-icon> Add {{ list.itemLabel }}\n            </button>\n          </div>\n        }\n      }\n\n      @if (selected.map && selected.map.complex) {\n        @if (selected.children.length) {\n          <ul class=\"item-list\">\n            @for (item of selected.children; track item.id) {\n              <li class=\"item-row\">\n                <button type=\"button\" class=\"item-link\" [matTooltip]=\"item.label\" (click)=\"open(selected, item)\">{{ item.label }}</button>\n                @if (editable() && !mapAtMin(selected)) {\n                  <button\n                    matIconButton\n                    class=\"row-btn remove-item\"\n                    matTooltip=\"Remove entry\"\n                    (click)=\"removeTreeMapEntry(selected, item)\"\n                  >\n                    <mat-icon>delete</mat-icon>\n                  </button>\n                }\n              </li>\n            }\n          </ul>\n        } @else {\n          <p class=\"empty\">No entries yet.</p>\n        }\n        @if (editable() && !mapAtMax(selected)) {\n          <div class=\"list-actions\">\n            <button matButton (click)=\"addTreeMapEntry(selected)\">\n              <mat-icon>add</mat-icon> Add entry\n            </button>\n          </div>\n        }\n      }\n\n      @if (\n        !selected.choice &&\n        !selected.mapEntry &&\n        !selected.map &&\n        !selected.list &&\n        !selected.leaves.length &&\n        !selected.leafLists.length &&\n        !selected.children.length &&\n        !(editable() && selected.optionals?.length)\n      ) {\n        <p class=\"empty\">This node has no fields.</p>\n      }\n    } @else {\n      <p class=\"empty\">Select a node on the left to edit its fields.</p>\n    }\n  </section>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.editor{display:flex;align-items:stretch;gap:16px;min-height:320px}.tree{flex:0 0 360px;min-width:360px;overflow:auto;border-right:1px solid var(--mat-sys-outline-variant, rgba(0, 0, 0, .12));padding:4px 12px 4px 0}.tree-row{display:flex;align-items:center;gap:4px;height:32px;cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.tree-row:hover{background:var(--mat-sys-surface-container-high, rgba(0, 0, 0, .04))}.tree-row.selected{background:var(--mat-sys-secondary-container, rgba(103, 80, 164, .12));font-weight:600}.tree-row.error .tree-label{color:var(--mat-sys-error, #b3261e)}.twisty{flex:0 0 auto;--mat-icon-button-state-layer-size: 28px;--mat-icon-button-icon-size: 18px}.twisty mat-icon{font-size:18px;width:18px;height:18px}.twisty-spacer{flex:0 0 auto;width:28px}.tree-label{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis}.tree-sublabel{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;font-size:.85em;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .55))}.tree-sublabel:before{content:\"\\b7  \"}.optional-row{width:100%;border:0;background:none;font:inherit;text-align:left}.optional-icon{flex:0 0 auto;font-size:18px;width:18px;height:18px;color:var(--mat-sys-primary, #6750a4)}.optional-label{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .55));font-style:italic}.row-btn{flex:0 0 auto;--mat-icon-button-state-layer-size: 28px;--mat-icon-button-icon-size: 18px}.row-btn mat-icon{font-size:18px;width:18px;height:18px}.row-btn.remove{visibility:hidden}.tree-row:hover .row-btn.remove,.tree-row.selected .row-btn.remove{visibility:visible}.detail{flex:1 1 auto;min-width:0;overflow:auto}.breadcrumb{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;margin:4px 0 12px;font-size:1.15rem}.crumb-current{font-weight:600}.crumb-link{font-size:inherit;padding:0}.crumb-sep{color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .5))}.fields{display:flex;flex-direction:column;gap:4px}.case-select,.key-field{display:block;max-width:320px;margin-bottom:8px}.detail-optional{display:flex;justify-content:flex-start}.empty{color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));font-style:italic}.item-list{list-style:none;margin:0 0 8px;padding:0}.item-row{display:flex;align-items:center;gap:4px}.item-link{min-width:0;padding:4px 0;border:0;background:none;text-align:left;cursor:pointer;color:var(--mat-sys-primary, #6750a4);font:inherit;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.item-link:hover{text-decoration:underline}.remove-item{flex:0 0 auto}.list-actions{display:flex;justify-content:flex-end}.group-body{display:flex;align-items:flex-start;gap:24px}.group-body .fields{flex:1 1 auto;min-width:0}.child-links{flex:0 0 200px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding-left:16px;border-left:1px solid var(--mat-sys-outline-variant, rgba(0, 0, 0, .12))}.child-links-title{margin:0 0 4px;font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6))}.child-link{display:inline-flex;align-items:center;gap:2px}.child-link mat-icon{font-size:18px;width:18px;height:18px}\n"] }]
-        }], propDecorators: { schema: [{ type: i0.Input, args: [{ isSignal: true, alias: "schema", required: true }] }], formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }] } });
+                    ], template: "<div class=\"editor\">\n  <nav class=\"tree\" role=\"tree\" aria-label=\"Configuration structure\">\n    <ng-template #treeNode let-node let-depth=\"depth\" let-parent=\"parent\">\n      <div\n        class=\"tree-row\"\n        role=\"treeitem\"\n        tabindex=\"0\"\n        [class.selected]=\"node === selected\"\n        [class.error]=\"hasError(node)\"\n        [attr.aria-selected]=\"node === selected\"\n        [attr.aria-expanded]=\"hasExpandableContent(node) ? expanded.has(node.id) : null\"\n        [attr.aria-level]=\"depth + 1\"\n        [style.padding-left.px]=\"8 + depth * 16\"\n        (click)=\"select(node)\"\n        (keydown)=\"onRowKeydown($event, node)\"\n      >\n        @if (hasExpandableContent(node)) {\n          <button\n            matIconButton\n            class=\"twisty\"\n            tabindex=\"-1\"\n            (click)=\"toggle(node); $event.stopPropagation()\"\n            [attr.aria-label]=\"expanded.has(node.id) ? 'Collapse' : 'Expand'\"\n          >\n            <mat-icon>{{ expanded.has(node.id) ? 'expand_more' : 'chevron_right' }}</mat-icon>\n          </button>\n        } @else {\n          <span class=\"twisty-spacer\"></span>\n        }\n\n        <span class=\"tree-label\" [matTooltip]=\"node.label\">{{ node.label }}</span>\n        @if (node.choice && activeCaseLabel(node)) {\n          <span class=\"tree-sublabel\" [matTooltip]=\"activeCaseLabel(node)\">{{ activeCaseLabel(node) }}</span>\n        }\n        @if (hasError(node)) {\n          <!-- A non-color error signal beside the red row text. -->\n          <mat-icon class=\"row-error-icon\" aria-hidden=\"false\" role=\"img\" aria-label=\"Has validation errors\"\n            >error_outline</mat-icon\n          >\n        }\n\n        @if (editable() && node.list && !listAtMax(node)) {\n          <button\n            matIconButton\n            class=\"row-btn add\"\n            [matTooltip]=\"'Add ' + node.list.itemLabel\"\n            [attr.aria-label]=\"'Add ' + node.list.itemLabel\"\n            (click)=\"addItem(node); $event.stopPropagation()\"\n          >\n            <mat-icon>add</mat-icon>\n          </button>\n        }\n        @if (editable() && node.map?.complex && !mapAtMax(node)) {\n          <button\n            matIconButton\n            class=\"row-btn add\"\n            matTooltip=\"Add entry\"\n            [attr.aria-label]=\"'Add ' + node.label + ' entry'\"\n            (click)=\"addTreeMapEntry(node); $event.stopPropagation()\"\n          >\n            <mat-icon>add</mat-icon>\n          </button>\n        }\n        @if (editable() && node.removable && !listAtMin(parent)) {\n          <button\n            matIconButton\n            class=\"row-btn remove\"\n            matTooltip=\"Remove\"\n            [attr.aria-label]=\"'Remove ' + node.label\"\n            (click)=\"removeItem(parent, node); $event.stopPropagation()\"\n          >\n            <mat-icon>delete</mat-icon>\n          </button>\n        }\n        @if (editable() && node.presenceRemovable) {\n          <button\n            matIconButton\n            class=\"row-btn remove\"\n            matTooltip=\"Remove\"\n            [attr.aria-label]=\"'Remove ' + node.label\"\n            (click)=\"removeOptional(parent, node); $event.stopPropagation()\"\n          >\n            <mat-icon>delete</mat-icon>\n          </button>\n        }\n        @if (editable() && node.mapEntry && !mapAtMin(parent)) {\n          <button\n            matIconButton\n            class=\"row-btn remove\"\n            matTooltip=\"Remove entry\"\n            [attr.aria-label]=\"'Remove ' + node.label + ' entry'\"\n            (click)=\"removeTreeMapEntry(parent, node); $event.stopPropagation()\"\n          >\n            <mat-icon>delete</mat-icon>\n          </button>\n        }\n      </div>\n\n      @if (expanded.has(node.id)) {\n        @for (child of node.children; track child.id) {\n          <ng-container\n            *ngTemplateOutlet=\"treeNode; context: { $implicit: child, depth: depth + 1, parent: node }\"\n          />\n        }\n        @if (editable() && node.optionals?.length) {\n          <button\n            type=\"button\"\n            class=\"tree-row optional-row\"\n            [style.padding-left.px]=\"8 + (depth + 1) * 16\"\n            [matMenuTriggerFor]=\"treeOptionalsMenu\"\n            (click)=\"$event.stopPropagation()\"\n          >\n            <span class=\"twisty-spacer\"></span>\n            <mat-icon class=\"optional-icon\">add</mat-icon>\n            <span class=\"optional-label\">Optional field</span>\n          </button>\n          <mat-menu #treeOptionalsMenu=\"matMenu\">\n            @for (opt of node.optionals; track opt.key) {\n              <button mat-menu-item (click)=\"addOptional(node, opt)\">{{ opt.label }}</button>\n            }\n          </mat-menu>\n        }\n      }\n    </ng-template>\n\n    <ng-container *ngTemplateOutlet=\"treeNode; context: { $implicit: root, depth: 0 }\" />\n  </nav>\n\n  <section class=\"detail\">\n    @if (selected) {\n      <nav class=\"breadcrumb\" aria-label=\"Breadcrumb\">\n        @for (crumb of breadcrumb; track crumb.id; let last = $last) {\n          @if (last) {\n            <span class=\"crumb-current\" aria-current=\"page\">{{ crumb.label }}</span>\n          } @else {\n            <button type=\"button\" class=\"item-link crumb-link\" (click)=\"select(crumb)\">{{ crumb.label }}</button>\n            <span class=\"crumb-sep\" aria-hidden=\"true\">/</span>\n          }\n        }\n      </nav>\n\n      <!-- The selected subtree as a flat section list: each descendant's fields\n           under a breadcrumb heading \u2014 the headings, not nesting, mark the\n           boundary between one child and the next. -->\n      @for (s of sections; track s.node.id) {\n        @if (s.trail.length > 1) {\n          <!-- A heading, not a nav landmark: dozens of identical \"Section\"\n               landmarks would flood the assistive-tech landmark list. Its\n               accessible name is the trail itself. -->\n          <div class=\"section-heading\" role=\"heading\" aria-level=\"3\">\n            @for (crumb of s.trail; track crumb.id; let last = $last) {\n              @if (last) {\n                <span class=\"crumb-current\">{{ crumb.label }}</span>\n              } @else {\n                <button type=\"button\" class=\"item-link crumb-link\" (click)=\"select(crumb)\">{{ crumb.label }}</button>\n                <span class=\"crumb-sep\" aria-hidden=\"true\">/</span>\n              }\n            }\n          </div>\n        }\n\n        @if (s.node.mapEntry; as entry) {\n          <mat-form-field class=\"key-field\" [appearance]=\"editable() ? 'fill' : 'outline'\">\n            <mat-label>{{ entry.mapSchema.keyLabel ?? 'Key' }}</mat-label>\n            <input\n              matInput\n              #entryKey\n              [readonly]=\"!editable()\"\n              [value]=\"entry.key\"\n              (change)=\"renameTreeMapEntry(s.node, entryKey.value); entryKey.value = entry.key\"\n            />\n          </mat-form-field>\n        }\n\n        @if (s.node.choice; as choice) {\n          @if (editable()) {\n            <mat-form-field class=\"case-select\" appearance=\"fill\">\n              <mat-label>Selected option</mat-label>\n              <mat-select [value]=\"activeCase(s.node)\" (selectionChange)=\"switchTreeCase(s.node, $event.value)\">\n                @for (caseName of objectKeys(choice.schema.cases); track caseName) {\n                  <mat-option [value]=\"caseName\">{{ caseLabel(choice.schema, caseName) }}</mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n          } @else {\n            <mat-form-field class=\"case-select\" appearance=\"outline\">\n              <mat-label>Selected option</mat-label>\n              <input matInput readonly [value]=\"activeCaseLabel(s.node) ?? ''\" />\n            </mat-form-field>\n          }\n        }\n\n        @if (s.schema && s.group) {\n          <nff-dynamic-recursive-form\n            [schema]=\"s.schema\"\n            [formGroup]=\"s.group\"\n            [editable]=\"editable()\"\n            [focusLeaf]=\"s.node.id === focusSectionId ? focusLeafKey : null\"\n          />\n        }\n\n        @if (s.node.map && !s.node.map.complex) {\n          <nff-node-map-renderer\n            [nodeMap]=\"s.node.map.schema\"\n            [formGroup]=\"s.node.map.group\"\n            [editable]=\"editable()\"\n          />\n        }\n\n        @if (editable() && s.node.map?.complex && !mapAtMax(s.node)) {\n          <div class=\"section-actions\">\n            <button matButton (click)=\"addTreeMapEntry(s.node)\"><mat-icon>add</mat-icon> Add entry</button>\n          </div>\n        }\n        @if (editable() && s.node.list && !listAtMax(s.node)) {\n          <div class=\"section-actions\">\n            <button matButton (click)=\"addItem(s.node)\">\n              <mat-icon>add</mat-icon> Add {{ s.node.list.itemLabel }}\n            </button>\n          </div>\n        }\n        @if (emptySectionHint(s); as hint) {\n          <p class=\"empty\">{{ hint }}</p>\n        }\n      }\n\n      @if (\n        sections.length === 1 &&\n        !sections[0].schema &&\n        !sections[0].node.choice &&\n        !sections[0].node.map &&\n        !sections[0].node.list &&\n        !sections[0].node.mapEntry\n      ) {\n        <p class=\"empty\">This node has no fields.</p>\n      }\n    } @else {\n      <p class=\"empty\">Select a node on the left to edit its fields.</p>\n    }\n  </section>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.editor{display:flex;align-items:stretch;gap:16px;min-height:320px}.tree{flex:0 0 360px;min-width:360px;overflow:auto;border-right:1px solid var(--mat-sys-outline-variant);padding:4px 12px 4px 0}.tree-row{display:flex;align-items:center;gap:4px;height:32px;cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.tree-row:hover{background:var(--mat-sys-surface-container-high)}.tree-row.selected{background:var(--mat-sys-secondary-container);font-weight:600}.tree-row.error .tree-label{color:var(--mat-sys-error)}.row-error-icon{flex:0 0 auto;font-size:18px;width:18px;height:18px;color:var(--mat-sys-error)}.tree-row:focus-visible{outline:2px solid var(--mat-sys-primary);outline-offset:-2px}.twisty{flex:0 0 auto;--mat-icon-button-state-layer-size: 28px;--mat-icon-button-icon-size: 18px}.twisty mat-icon{font-size:18px;width:18px;height:18px}.twisty-spacer{flex:0 0 auto;width:28px}.tree-label{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis}.tree-sublabel{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;font-size:.85em;color:var(--mat-sys-on-surface-variant)}.tree-sublabel:before{content:\"\\b7  \"}.optional-row{width:100%;border:0;background:none;font:inherit;text-align:left}.optional-icon{flex:0 0 auto;font-size:18px;width:18px;height:18px;color:var(--mat-sys-primary)}.optional-label{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;color:var(--mat-sys-on-surface-variant);font-style:italic}.row-btn{flex:0 0 auto;--mat-icon-button-state-layer-size: 28px;--mat-icon-button-icon-size: 18px}.row-btn mat-icon{font-size:18px;width:18px;height:18px}.row-btn.add{visibility:visible}.row-btn.remove{visibility:hidden}.tree-row:hover .row-btn.remove,.tree-row.selected .row-btn.remove,.tree-row:focus-within .row-btn.remove{visibility:visible}.detail{flex:1 1 auto;min-width:0;overflow:auto}.breadcrumb{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;margin:4px 0 12px;font-size:1.15rem}.crumb-current{font-weight:600}.crumb-link{font-size:inherit;padding:0}.crumb-sep{color:var(--mat-sys-on-surface-variant)}.section-heading{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;margin:20px 0 8px;padding-top:12px;border-top:1px solid var(--mat-sys-outline-variant);font-size:.95rem}.section-heading .crumb-current{font-weight:600}.key-field,.case-select{display:block;max-width:320px;margin-bottom:8px}.section-actions{display:flex;justify-content:flex-start;margin-bottom:8px}.empty{color:var(--mat-sys-on-surface-variant);font-style:italic}.item-link{min-width:0;padding:4px 0;border:0;background:none;text-align:left;cursor:pointer;color:var(--mat-sys-primary);font:inherit;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.item-link:hover{text-decoration:underline}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { schema: [{ type: i0.Input, args: [{ isSignal: true, alias: "schema", required: true }] }], formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }] } });
 
 /*
  * Public API Surface of ng-form-foundry
@@ -1403,5 +1671,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CASE_KEY, ConfigEditorComponent, DynamicRecursiveFormComponent, LeafEnumRendererComponent, LeafListRendererComponent, LeafRendererComponent, NodeGroupListRendererComponent, NodeMapRendererComponent, addMapEntry, buildControl, buildFormFromSchema, caseFields, defineSchema, removeMapEntry, renameMapEntry, resolveChoiceCase, switchChoiceCase };
+export { CASE_KEY, ConfigEditorComponent, DynamicRecursiveFormComponent, LeafEnumRendererComponent, LeafListRendererComponent, LeafRendererComponent, NodeGroupListRendererComponent, NodeMapRendererComponent, addMapEntry, buildControl, buildFormFromSchema, caseFields, defineSchema, removeMapEntry, renameMapEntry, resolveChoiceCase, serializeForm, switchChoiceCase, toWireValue };
 //# sourceMappingURL=ng-form-foundry.mjs.map