ng-form-foundry 0.3.4 → 0.4.0

package/fesm2022/ng-form-foundry.mjs

@@ -247,6 +247,54 @@ function caseFields(body) {
     }
     return fields;
 }
+/**
+ * Display labels for a choice's cases, keyed by case name, with colliding
+ * labels made unique. Schema-supplied `caseLabels` can repeat (e.g. two
+ * O-RAN A1 scope branches labeled from the same discriminating field), which
+ * makes the case selector ambiguous. Unique labels pass through untouched;
+ * each colliding case first gains the fields that set it apart from its
+ * same-labeled peers — "UE ID (Group ID)" vs "UE ID (Slice ID)" — and any
+ * cases the field suffix cannot separate (no distinguishing fields, peers
+ * with identical field sets among a larger clash group, or distinguishing
+ * fields that share one display label) fall back to their case name, which
+ * is unique by construction.
+ */
+function caseDisplayLabels(choice) {
+    const names = Object.keys(choice.cases);
+    const base = {};
+    const out = {};
+    const byLabel = new Map();
+    for (const name of names) {
+        base[name] = choice.caseLabels?.[name] ?? name;
+        out[name] = base[name];
+        byLabel.set(base[name], [...(byLabel.get(base[name]) ?? []), name]);
+    }
+    for (const clashing of byLabel.values()) {
+        if (clashing.length < 2)
+            continue;
+        for (const name of clashing) {
+            const fields = caseFields(choice.cases[name]);
+            const others = clashing.filter((o) => o !== name).map((o) => caseFields(choice.cases[o]));
+            const distinct = Object.keys(fields).filter((key) => !others.every((o) => key in o));
+            const suffix = distinct.length
+                ? distinct.map((key) => fields[key].label ?? key).join(', ')
+                : name;
+            out[name] = `${out[name]} (${suffix})`;
+        }
+    }
+    // Uniqueness guarantee: whatever the collision topology, labels still equal
+    // after field-suffixing take the case name instead.
+    const byFinal = new Map();
+    for (const name of names)
+        byFinal.set(out[name], [...(byFinal.get(out[name]) ?? []), name]);
+    for (const clashing of byFinal.values()) {
+        if (clashing.length < 2)
+            continue;
+        for (const name of clashing)
+            out[name] = `${base[name]} (${name})`;
+    }
+    return out;
+}
 /**
  * The active case of a choice: an explicit `__case` in the initial value, else
  * the case {@link inferChoiceCase} ranks best against the initial data (inline
@@ -691,7 +739,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", 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}.small-icon-button{--mdc-icon-button-state-layer-size: 24px;--mdc-icon-button-icon-size: 16px;--mat-icon-button-touch-target-display: none;width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center}.small-icon-button>[role=img]{width:16px;height:16px;font-size:16px}.small-icon-button>[role=img] svg{width:16px;height:16px}\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"] }] });
+    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" }, host: { properties: { "class": "\"leaf-type-\" + (leaf_?.type ?? \"unknown\")" } }, 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 ' + ('label' in leaf_ && leaf_.label ? leaf_.label : 'name' in leaf_ ? leaf_.name : 'field')\" [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}:host(.leaf-type-string),:host(.leaf-type-enum){min-width:var(--nff-min-text-field-width, 10%)}:host(.leaf-type-number){min-width:var(--nff-min-number-field-width, 10%);max-width:var(--nff-max-number-field-width, none)}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}.small-icon-button{--mdc-icon-button-state-layer-size: 24px;--mdc-icon-button-icon-size: 16px;--mat-icon-button-touch-target-display: none;width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center}.small-icon-button>[role=img]{width:16px;height:16px;font-size:16px}.small-icon-button>[role=img] svg{width:16px;height:16px}\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,
@@ -705,7 +753,7 @@ 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    @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}.small-icon-button{--mdc-icon-button-state-layer-size: 24px;--mdc-icon-button-icon-size: 16px;--mat-icon-button-touch-target-display: none;width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center}.small-icon-button>[role=img]{width:16px;height:16px;font-size:16px}.small-icon-button>[role=img] svg{width:16px;height:16px}\n"] }]
+                    ], host: { '[class]': '"leaf-type-" + (leaf_?.type ?? "unknown")' }, 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 ' + ('label' in leaf_ && leaf_.label ? leaf_.label : 'name' in leaf_ ? leaf_.name : 'field')\" [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}:host(.leaf-type-string),:host(.leaf-type-enum){min-width:var(--nff-min-text-field-width, 10%)}:host(.leaf-type-number){min-width:var(--nff-min-number-field-width, 10%);max-width:var(--nff-max-number-field-width, none)}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}.small-icon-button{--mdc-icon-button-state-layer-size: 24px;--mdc-icon-button-icon-size: 16px;--mat-icon-button-touch-target-display: none;width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center}.small-icon-button>[role=img]{width:16px;height:16px;font-size:16px}.small-icon-button>[role=img] svg{width:16px;height:16px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { leaf_: [{
                 type: Input
             }], control: [{
@@ -718,6 +766,73 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 type: Input
             }], remove: [{ type: i0.Output, args: ["remove"] }] } });
 
+/**
+ * The field-layout subset of an {@link Appearance} — the properties
+ * descendants inherit, in output order. Chrome flags — `flatten`, `noBorder`,
+ * `collapsed` — describe the node's own frame and never cascade.
+ */
+const INHERITED_LAYOUT_KEYS = [
+    'grid',
+    'minFieldWidth',
+    'booleanFields',
+    'minTextFieldWidth',
+    'minNumberFieldWidth',
+    'maxNumberFieldWidth',
+];
+/**
+ * `grid` and `minFieldWidth` form one field-sizing decision: a node that sets
+ * either has chosen its sizing, so neither is inherited (otherwise an
+ * inherited `grid` would override the node's own `minFieldWidth` by the
+ * grid-wins precedence). See {@link mergeAppearance}.
+ */
+const FIELD_SIZING_KEYS = new Set(['grid', 'minFieldWidth']);
+/** `to[key] = value` keyed generically — the key–value correlation TypeScript cannot track for a union-typed key. */
+function assign(to, key, value) {
+    to[key] = value;
+}
+/**
+ * The subset of an `Appearance` that descendants inherit
+ * ({@link INHERITED_LAYOUT_KEYS}). Null when nothing is inheritable.
+ * Counterpart of {@link mergeAppearance}.
+ */
+function inheritableAppearance(appearance) {
+    if (!appearance)
+        return null;
+    const out = {};
+    for (const key of INHERITED_LAYOUT_KEYS) {
+        if (appearance[key] != null)
+            assign(out, key, appearance[key]);
+    }
+    return Object.keys(out).length ? out : null;
+}
+/**
+ * A node's effective appearance: its own settings win, layout gaps fall back
+ * to `inherited` per property — except the {@link FIELD_SIZING_KEYS} pair,
+ * which is only inherited as a whole when the node sets neither.
+ */
+function mergeAppearance(inherited, own) {
+    if (!inherited)
+        return own;
+    const merged = { ...own };
+    const ownFieldSizing = own?.grid != null || own?.minFieldWidth != null;
+    for (const key of INHERITED_LAYOUT_KEYS) {
+        if (ownFieldSizing && FIELD_SIZING_KEYS.has(key))
+            continue;
+        if (merged[key] == null && inherited[key] != null)
+            assign(merged, key, inherited[key]);
+    }
+    return merged;
+}
+/**
+ * The layout a node's descendants inherit: the layout cascading down from its
+ * ancestors with the node's own `appearance` merged over it
+ * ({@link mergeAppearance}), reduced to the inheritable subset
+ * ({@link inheritableAppearance}).
+ */
+function descendantLayout(inherited, own) {
+    return inheritableAppearance(mergeAppearance(inherited, own));
+}
+
 class NodeGroupListRendererComponent {
     nodeGroupList;
     initialValue;
@@ -725,6 +840,8 @@ class NodeGroupListRendererComponent {
     editable = true;
     minItems = 1;
     maxItems = 1;
+    /** Field-layout appearance from the enclosing group, forwarded to every item form. */
+    inheritedAppearance = null;
     message = new EventEmitter();
     // forwardRef: DynamicRecursiveFormComponent and this component import each
     // other, so the class reference is undefined when this query is evaluated at
@@ -780,7 +897,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", "focusLeaf"], 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", inheritedAppearance: "inheritedAppearance" }, 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          [inheritedAppearance]=\"inheritedAppearance\"\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", "inheritedAppearance"], 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,
@@ -789,7 +906,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         MatButtonModule,
                         MatIconModule,
                         MatTooltipModule,
-                    ], 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"] }]
+                    ], 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          [inheritedAppearance]=\"inheritedAppearance\"\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"] }]
         }], propDecorators: { nodeGroupList: [{
                 type: Input
             }], initialValue: [{
@@ -802,6 +919,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 type: Input
             }], maxItems: [{
                 type: Input
+            }], inheritedAppearance: [{
+                type: Input
             }], message: [{
                 type: Output
             }], items: [{
@@ -859,6 +978,13 @@ class LeafListRendererComponent {
     formArray;
     editable = true;
     minItems = 1;
+    /**
+     * The parent group's grid layout (its `fieldsLayout` styles). A stacked list
+     * spans the parent's full row, so its entries repeat the same tracks and
+     * stay aligned with the columns above; an inline (single-entry) list sits in
+     * one track and ignores it.
+     */
+    layout = null;
     message = new EventEmitter();
     matDialog = inject(MatDialog);
     /**
@@ -870,6 +996,14 @@ class LeafListRendererComponent {
     get stacked() {
         return (this.formArray?.length ?? 0) > 1;
     }
+    /** The entries' value type as a host class, so type-scoped min-widths (`--nff-min-*-field-width`) can target them. */
+    get typeClass() {
+        return `list-type-${this.leaf_?.type ?? 'unknown'}`;
+    }
+    /** Applies {@link layout} to the host (the entries' container) while stacked. */
+    get hostLayout() {
+        return this.stacked ? this.layout : null;
+    }
     ngOnInit() {
         if (this.initialValue) {
             this.formArray.patchValue(this.initialValue);
@@ -889,7 +1023,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 [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}.small-icon-button{--mdc-icon-button-state-layer-size: 24px;--mdc-icon-button-icon-size: 16px;--mat-icon-button-touch-target-display: none;width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center}.small-icon-button>[role=img]{width:16px;height:16px;font-size:16px}.small-icon-button>[role=img] svg{width:16px;height:16px}\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"] }] });
+    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", layout: "layout" }, outputs: { message: "message" }, host: { properties: { "class.stacked": "this.stacked", "class": "this.typeClass", "style": "this.hostLayout" } }, 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 [matTooltip]=\"'Remove ' + (leaf_.label ?? leaf_.name) + ' item'\" [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 [matTooltip]=\"'Add ' + (leaf_.label ?? leaf_.name) + ' item'\" [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}:host(.list-type-string) .field-item,:host(.list-type-enum) .field-item{min-width:var(--nff-min-text-field-width, 0px)}:host(.list-type-number) .field-item{min-width:var(--nff-min-number-field-width, 0px);max-width:var(--nff-max-number-field-width, none)}.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}.small-icon-button{--mdc-icon-button-state-layer-size: 24px;--mdc-icon-button-icon-size: 16px;--mat-icon-button-touch-target-display: none;width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center}.small-icon-button>[role=img]{width:16px;height:16px;font-size:16px}.small-icon-button>[role=img] svg{width:16px;height:16px}\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"] }, { kind: "directive", type: 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: LeafListRendererComponent, decorators: [{
             type: Component,
@@ -898,7 +1032,8 @@ 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 [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}.small-icon-button{--mdc-icon-button-state-layer-size: 24px;--mdc-icon-button-icon-size: 16px;--mat-icon-button-touch-target-display: none;width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center}.small-icon-button>[role=img]{width:16px;height:16px;font-size:16px}.small-icon-button>[role=img] svg{width:16px;height:16px}\n"] }]
+                        MatTooltip,
+                    ], 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 [matTooltip]=\"'Remove ' + (leaf_.label ?? leaf_.name) + ' item'\" [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 [matTooltip]=\"'Add ' + (leaf_.label ?? leaf_.name) + ' item'\" [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}:host(.list-type-string) .field-item,:host(.list-type-enum) .field-item{min-width:var(--nff-min-text-field-width, 0px)}:host(.list-type-number) .field-item{min-width:var(--nff-min-number-field-width, 0px);max-width:var(--nff-max-number-field-width, none)}.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}.small-icon-button{--mdc-icon-button-state-layer-size: 24px;--mdc-icon-button-icon-size: 16px;--mat-icon-button-touch-target-display: none;width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center}.small-icon-button>[role=img]{width:16px;height:16px;font-size:16px}.small-icon-button>[role=img] svg{width:16px;height:16px}\n"] }]
         }], propDecorators: { leaf_: [{
                 type: Input
             }], initialValue: [{
@@ -909,11 +1044,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 type: Input
             }], minItems: [{
                 type: Input
+            }], layout: [{
+                type: Input
             }], message: [{
                 type: Output
             }], stacked: [{
                 type: HostBinding,
                 args: ['class.stacked']
+            }], typeClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], hostLayout: [{
+                type: HostBinding,
+                args: ['style']
             }] } });
 
 function asFormControl(control) {
@@ -937,6 +1080,8 @@ class NodeMapRendererComponent {
     nodeMap;
     formGroup = new FormGroup({});
     editable = true;
+    /** Field-layout appearance from the enclosing group, forwarded to group-valued entry forms. */
+    inheritedAppearance = null;
     /** Ordered view of entry keys, kept stable across renames (`addControl` appends). */
     entryKeys = [];
     ngOnChanges(changes) {
@@ -946,6 +1091,14 @@ class NodeMapRendererComponent {
         if (changes['formGroup'])
             this.entryKeys = Object.keys(this.formGroup.controls);
     }
+    /**
+     * What entry forms inherit: the enclosing group's layout with the map's own
+     * `appearance` merged over it. Counterpart of the config editor's map-entry
+     * threading in `buildChildNode`.
+     */
+    get entryAppearance() {
+        return descendantLayout(this.inheritedAppearance, this.nodeMap?.appearance);
+    }
     /** The value schema as a leaf (used when `value.kind === 'leaf'`). */
     get valueLeaf() {
         return this.nodeMap.value;
@@ -986,7 +1139,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" }, 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}.small-icon-button{--mdc-icon-button-state-layer-size: 24px;--mdc-icon-button-icon-size: 16px;--mat-icon-button-touch-target-display: none;width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center}.small-icon-button>[role=img]{width:16px;height:16px;font-size:16px}.small-icon-button>[role=img] svg{width:16px;height:16px}\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"] }] });
+    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", inheritedAppearance: "inheritedAppearance" }, 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              [inheritedAppearance]=\"entryAppearance\"\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 [matTooltip]=\"'Remove ' + key + ' entry'\" [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 [matTooltip]=\"'Add ' + (nodeMap.label ?? nodeMap.name) + ' entry'\" [attr.aria-label]=\"'Add ' + (nodeMap.label ?? nodeMap.name) + ' 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}.small-icon-button{--mdc-icon-button-state-layer-size: 24px;--mdc-icon-button-icon-size: 16px;--mat-icon-button-touch-target-display: none;width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center}.small-icon-button>[role=img]{width:16px;height:16px;font-size:16px}.small-icon-button>[role=img] svg{width:16px;height:16px}\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: "directive", type: i0.forwardRef(() => MatTooltip), selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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", "inheritedAppearance"], outputs: ["remove", "editableChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NodeMapRendererComponent, decorators: [{
             type: Component,
@@ -995,19 +1148,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         MatIconModule,
                         MatFormFieldModule,
                         MatInputModule,
+                        MatTooltip,
                         LeafRendererComponent,
                         // 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          <!-- 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}.small-icon-button{--mdc-icon-button-state-layer-size: 24px;--mdc-icon-button-icon-size: 16px;--mat-icon-button-touch-target-display: none;width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center}.small-icon-button>[role=img]{width:16px;height:16px;font-size:16px}.small-icon-button>[role=img] svg{width:16px;height:16px}\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              [inheritedAppearance]=\"entryAppearance\"\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 [matTooltip]=\"'Remove ' + key + ' entry'\" [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 [matTooltip]=\"'Add ' + (nodeMap.label ?? nodeMap.name) + ' entry'\" [attr.aria-label]=\"'Add ' + (nodeMap.label ?? nodeMap.name) + ' 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}.small-icon-button{--mdc-icon-button-state-layer-size: 24px;--mdc-icon-button-icon-size: 16px;--mat-icon-button-touch-target-display: none;width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center}.small-icon-button>[role=img]{width:16px;height:16px;font-size:16px}.small-icon-button>[role=img] svg{width:16px;height:16px}\n"] }]
         }], propDecorators: { nodeMap: [{
                 type: Input
             }], formGroup: [{
                 type: Input
             }], editable: [{
                 type: Input
+            }], inheritedAppearance: [{
+                type: Input
             }] } });
 
+/**
+ * A grid track count from `appearance.grid`: positive finite counts floored,
+ * anything else (absent, zero, negative, non-finite) is 0 — so a bogus `cols`
+ * cannot half-enter grid mode (e.g. suppress the rows-only column flow).
+ */
+function gridTrackCount(count) {
+    return Number.isFinite(count) && count > 0 ? Math.floor(count) : 0;
+}
 class DynamicRecursiveFormComponent {
     /** The form-description schema to render (a root or nested `NodeGroup`). */
     schema = input.required(...(ngDevMode ? [{ debugName: "schema" }] : []));
@@ -1033,8 +1197,107 @@ class DynamicRecursiveFormComponent {
      * menu) hand focus to the new field, like the form's own add button does.
      */
     focusLeaf = input(null, ...(ngDevMode ? [{ debugName: "focusLeaf" }] : []));
+    /**
+     * Field-layout appearance cascading down from the parent group. The node's
+     * own `appearance` wins per property — see {@link mergeAppearance}.
+     */
+    inheritedAppearance = input(null, ...(ngDevMode ? [{ debugName: "inheritedAppearance" }] : []));
     /** True when the schema is a root group (rendered flat, without a wrapping card). */
     root = computed(() => this.schema().root ?? false, ...(ngDevMode ? [{ debugName: "root" }] : []));
+    /** The node's own `appearance` with inherited layout gaps filled in. */
+    effectiveAppearance = computed(() => mergeAppearance(this.inheritedAppearance(), this.schema().appearance), ...(ngDevMode ? [{ debugName: "effectiveAppearance" }] : []));
+    /** The layout subset this node's children inherit. */
+    childAppearance = computed(() => inheritableAppearance(this.effectiveAppearance()), ...(ngDevMode ? [{ debugName: "childAppearance" }] : []));
+    /**
+     * The per-type width bounds are flex-flow-only, and their CSS custom
+     * properties inherit into leaf-list internals that the grid-mode resets
+     * cannot reach across the encapsulation boundary — so under a grid layout
+     * the variables are simply not set at all.
+     */
+    flexOnly(value) {
+        return this.fieldsLayout() ? null : (value ?? null);
+    }
+    /** `minTextFieldWidth` for the `.fields` CSS custom property, or null. */
+    textFieldMin = computed(() => this.flexOnly(this.effectiveAppearance()?.minTextFieldWidth), ...(ngDevMode ? [{ debugName: "textFieldMin" }] : []));
+    /** `minNumberFieldWidth` for the `.fields` CSS custom property, or null. */
+    numberFieldMin = computed(() => this.flexOnly(this.effectiveAppearance()?.minNumberFieldWidth), ...(ngDevMode ? [{ debugName: "numberFieldMin" }] : []));
+    /** `maxNumberFieldWidth` for the `.fields` CSS custom property, or null. */
+    numberFieldMax = computed(() => this.flexOnly(this.effectiveAppearance()?.maxNumberFieldWidth), ...(ngDevMode ? [{ debugName: "numberFieldMax" }] : []));
+    /**
+     * True when the active grid defines explicit column tracks. Only then can a
+     * stacked leaf-list meaningfully span the row (`grid-column: 1 / -1`
+     * resolves `-1` to line 1 without an explicit column template) and repeat
+     * the tracks for its entries; in a rows-only grid the list stays a normal
+     * auto-flowed item.
+     */
+    gridHasCols = computed(() => !!this.fieldsLayout()?.['grid-template-columns'], ...(ngDevMode ? [{ debugName: "gridHasCols" }] : []));
+    /**
+     * Inline grid styles for the `.fields` area, from `appearance`: `grid`
+     * becomes explicit tracks (`cols` fields per row; `rows` alone fills
+     * top-to-bottom, adding columns as needed) and `minFieldWidth` becomes
+     * as-many-as-fit equal columns of at least that width. `grid` wins over
+     * `minFieldWidth`; with neither, `null` keeps the stylesheet's wrapping
+     * flex flow. Non-positive `rows`/`cols` are ignored.
+     */
+    fieldsLayout = computed(() => {
+        const appearance = this.effectiveAppearance();
+        const cols = gridTrackCount(appearance?.grid?.cols);
+        const rows = gridTrackCount(appearance?.grid?.rows);
+        if (cols > 0 || rows > 0) {
+            const layout = { display: 'grid' };
+            if (cols > 0)
+                layout['grid-template-columns'] = `repeat(${cols}, minmax(0, 1fr))`;
+            if (rows > 0)
+                layout['grid-template-rows'] = `repeat(${rows}, auto)`;
+            if (rows > 0 && cols === 0) {
+                layout['grid-auto-flow'] = 'column';
+                // The columns this flow creates are implicit; without a bound they
+                // size to content and can overflow — match the cols-mode tracks.
+                layout['grid-auto-columns'] = 'minmax(0, 1fr)';
+            }
+            return layout;
+        }
+        if (appearance?.minFieldWidth) {
+            // min(…, 100%) keeps a narrow container to one column instead of overflowing.
+            return {
+                display: 'grid',
+                'grid-template-columns': `repeat(auto-fit, minmax(min(${appearance.minFieldWidth}, 100%), 1fr))`,
+            };
+        }
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "fieldsLayout" }] : []));
+    /**
+     * Whether the gathered boolean row would show anything: a plain boolean, an
+     * enabled presence boolean, or (while editable) an absent one's add button.
+     * Keeps a read-only form from rendering an empty `.boolean-fields` div,
+     * which would add a stray container gap.
+     */
+    booleanAreaVisible() {
+        return Object.entries(this.schema().children ?? {}).some(([key, child]) => child.kind === 'leaf' &&
+            child.type === 'boolean' &&
+            (!child.presence || !!this.formGroup().get(key) || this.editable()));
+    }
+    /**
+     * Whether a leaf renders in the regular `.fields` flow: always, unless it is
+     * a boolean that {@link booleanPlacement} gathers into the `.boolean-fields`
+     * row instead.
+     */
+    inFieldFlow(child) {
+        return this.booleanPlacement() === 'default' || child.type !== 'boolean';
+    }
+    /**
+     * Where `appearance.booleanFields` places the checkbox fields: `'beginning'`
+     * or `'end'` renders them grouped in the `.boolean-fields` row and excludes
+     * them from the regular field flow; `'default'` (also when the group has no
+     * boolean leaf to move) leaves the flow untouched.
+     */
+    booleanPlacement = computed(() => {
+        const placement = this.effectiveAppearance()?.booleanFields ?? 'default';
+        if (placement === 'default')
+            return 'default';
+        const hasBooleans = Object.values(this.schema().children ?? {}).some((child) => child.kind === 'leaf' && child.type === 'boolean');
+        return hasBooleans ? placement : 'default';
+    }, ...(ngDevMode ? [{ debugName: "booleanPlacement" }] : []));
     ngOnInit() {
         const initial = this.initialValue();
         if (initial) {
@@ -1104,18 +1367,26 @@ class DynamicRecursiveFormComponent {
     activeCase(key) {
         return this.formGroup().get(key)?.get(CASE_KEY)?.value ?? null;
     }
-    /** A synthetic flattened NodeGroup used to render the active case's fields against the choice's FormGroup. */
+    /**
+     * A synthetic flattened NodeGroup used to render the active case's fields
+     * against the choice's FormGroup. Carries the choice's own `appearance`
+     * (grid / field-width layout) onto the case fields.
+     */
     caseAsGroup(choice, caseName) {
         return {
             kind: 'nodeGroup',
             name: choice.name,
             children: choice.cases[caseName] ? caseFields(choice.cases[caseName]) : {},
-            appearance: { flatten: true },
+            appearance: { ...choice.appearance, flatten: true },
         };
     }
-    /** The display label for a case: the schema's `caseLabels` entry, else the case name. */
+    /**
+     * The display label for a case: the schema's `caseLabels` entry (colliding
+     * labels disambiguated by their distinguishing fields — see
+     * {@link caseDisplayLabels}), else the case name.
+     */
     caseLabel(choice, caseName) {
-        return choice.caseLabels?.[caseName] ?? caseName;
+        return caseDisplayLabels(choice)[caseName] ?? caseName;
     }
     /**
      * A copy of a group flagged to render its fields inline (no inner panel). Used
@@ -1133,7 +1404,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 }, 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}}.small-icon-button{--mdc-icon-button-state-layer-size: 24px;--mdc-icon-button-icon-size: 16px;--mat-icon-button-touch-target-display: none;width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center}.small-icon-button>[role=img]{width:16px;height:16px;font-size:16px}.small-icon-button>[role=img] svg{width:16px;height:16px}\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"] }] });
+    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 }, inheritedAppearance: { classPropertyName: "inheritedAppearance", publicName: "inheritedAppearance", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { remove: "remove", editable: "editableChange" }, ngImport: i0, template: "<!-- Checkbox fields grouped by appearance.booleanFields: a compact wrapping\n     row of natural-width items, rendered before or after the field flow. -->\n<ng-template #booleanArea>\n  @if (booleanAreaVisible()) {\n  <div class=\"boolean-fields\">\n    @for (childItem of nodeGroupChildrenList; track $index) {\n      @let child = childItem.value;\n      @if (child.kind == 'leaf' && child.type == 'boolean') {\n        @if (!child.presence) {\n          <nff-leaf-renderer\n            [leaf_]=child\n            [control]=asFormControl(formGroup().get(childItem.key))\n            [removable]=false\n            [editable]=\"editable()\"\n          />\n        } @else 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  }\n</ng-template>\n<!-- The node's scalar-field area \u2014 gathered booleans (beginning), the .fields\n     flow, gathered booleans (end) \u2014 shared by the root and non-root branches. -->\n<ng-template #fieldFlow>\n  @if (booleanPlacement() === 'beginning') {\n    <ng-container *ngTemplateOutlet=\"booleanArea\"></ng-container>\n  }\n  <div class=\"fields\" [class.grid-fields]=\"!!fieldsLayout()\" [class.grid-cols]=\"gridHasCols()\" [style]=\"fieldsLayout()\" [style.--nff-min-text-field-width]=\"textFieldMin()\" [style.--nff-min-number-field-width]=\"numberFieldMin()\" [style.--nff-max-number-field-width]=\"numberFieldMax()\">\n    @for (childItem of nodeGroupChildrenList; track $index) {\n      @let child = childItem.value;\n      @if (child.kind == 'leaf' && !child.presence && inFieldFlow(child)) {\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          [layout]=\"gridHasCols() ? fieldsLayout() : null\"\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 && inFieldFlow(child)) {\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  @if (booleanPlacement() === 'end') {\n    <ng-container *ngTemplateOutlet=\"booleanArea\"></ng-container>\n  }\n</ng-template>\n@if (!root()) {\n  <ng-template #formRender>\n    <div class=\"form-content\" [formGroup]=\"formGroup()\">\n      <div class=\"leafs-container\">\n        <ng-container *ngTemplateOutlet=\"fieldFlow\"></ng-container>\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                [inheritedAppearance]=\"childAppearance()\"\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            [inheritedAppearance]=\"childAppearance()\"\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                    [inheritedAppearance]=\"childAppearance()\"\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            [inheritedAppearance]=\"childAppearance()\"\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                [inheritedAppearance]=\"childAppearance()\"\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\" matTooltip=\"Remove {{ schema().label ?? schema().name }}\" [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\" matTooltip=\"Remove {{ schema().label ?? schema().name }}\" [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      <!-- The edit toggle sits on its own row: inline it would offset the\n           first field row against the rows below (flex) or claim a whole\n           track (grid). -->\n      <div class=\"form-toolbar\">\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      </div>\n      <ng-container *ngTemplateOutlet=\"fieldFlow\"></ng-container>\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                  [inheritedAppearance]=\"childAppearance()\"\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              [inheritedAppearance]=\"childAppearance()\"\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            [inheritedAppearance]=\"childAppearance()\"\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              [inheritedAppearance]=\"childAppearance()\"\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          [inheritedAppearance]=\"childAppearance()\"\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}.fields.grid-fields{flex:0 0 auto;align-content:start}.fields.grid-fields nff-leaf-renderer,.fields.grid-fields nff-leaf-list-renderer{min-width:0;max-width:none}.fields.grid-fields>button{justify-self:start}.fields.grid-cols nff-leaf-list-renderer.stacked{grid-column:1/-1}.form-toolbar{display:flex;align-items:center}nff-leaf-list-renderer{flex:1}.boolean-fields{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}.boolean-fields nff-leaf-renderer{flex:0 0 auto;min-width:0}.boolean-fields .presence-leaf-add{margin-top:0;align-self:center}.mat-expansion-panel-content{display:flex;flex-direction:row;gap:16px}.form-content{display:flex;flex-direction:column;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}}.small-icon-button{--mdc-icon-button-state-layer-size: 24px;--mdc-icon-button-icon-size: 16px;--mat-icon-button-touch-target-display: none;width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center}.small-icon-button>[role=img]{width:16px;height:16px;font-size:16px}.small-icon-button>[role=img] svg{width:16px;height:16px}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => DynamicRecursiveFormComponent), selector: "nff-dynamic-recursive-form", inputs: ["schema", "initialValue", "formGroup", "index", "removable", "title", "editable", "addButtonCallback", "focusLeaf", "inheritedAppearance"], 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", "layout"], outputs: ["message"] }, { kind: "component", type: i0.forwardRef(() => NodeGroupListRendererComponent), selector: "nff-node-group-list-renderer", inputs: ["nodeGroupList", "initialValue", "formArray", "editable", "minItems", "maxItems", "inheritedAppearance"], outputs: ["message"] }, { kind: "component", type: i0.forwardRef(() => NodeMapRendererComponent), selector: "nff-node-map-renderer", inputs: ["nodeMap", "formGroup", "editable", "inheritedAppearance"] }, { 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,
@@ -1154,9 +1425,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         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              <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}}.small-icon-button{--mdc-icon-button-state-layer-size: 24px;--mdc-icon-button-icon-size: 16px;--mat-icon-button-touch-target-display: none;width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center}.small-icon-button>[role=img]{width:16px;height:16px;font-size:16px}.small-icon-button>[role=img] svg{width:16px;height:16px}\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 }] }] } });
+                    ], selector: 'nff-dynamic-recursive-form', standalone: true, template: "<!-- Checkbox fields grouped by appearance.booleanFields: a compact wrapping\n     row of natural-width items, rendered before or after the field flow. -->\n<ng-template #booleanArea>\n  @if (booleanAreaVisible()) {\n  <div class=\"boolean-fields\">\n    @for (childItem of nodeGroupChildrenList; track $index) {\n      @let child = childItem.value;\n      @if (child.kind == 'leaf' && child.type == 'boolean') {\n        @if (!child.presence) {\n          <nff-leaf-renderer\n            [leaf_]=child\n            [control]=asFormControl(formGroup().get(childItem.key))\n            [removable]=false\n            [editable]=\"editable()\"\n          />\n        } @else 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  }\n</ng-template>\n<!-- The node's scalar-field area \u2014 gathered booleans (beginning), the .fields\n     flow, gathered booleans (end) \u2014 shared by the root and non-root branches. -->\n<ng-template #fieldFlow>\n  @if (booleanPlacement() === 'beginning') {\n    <ng-container *ngTemplateOutlet=\"booleanArea\"></ng-container>\n  }\n  <div class=\"fields\" [class.grid-fields]=\"!!fieldsLayout()\" [class.grid-cols]=\"gridHasCols()\" [style]=\"fieldsLayout()\" [style.--nff-min-text-field-width]=\"textFieldMin()\" [style.--nff-min-number-field-width]=\"numberFieldMin()\" [style.--nff-max-number-field-width]=\"numberFieldMax()\">\n    @for (childItem of nodeGroupChildrenList; track $index) {\n      @let child = childItem.value;\n      @if (child.kind == 'leaf' && !child.presence && inFieldFlow(child)) {\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          [layout]=\"gridHasCols() ? fieldsLayout() : null\"\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 && inFieldFlow(child)) {\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  @if (booleanPlacement() === 'end') {\n    <ng-container *ngTemplateOutlet=\"booleanArea\"></ng-container>\n  }\n</ng-template>\n@if (!root()) {\n  <ng-template #formRender>\n    <div class=\"form-content\" [formGroup]=\"formGroup()\">\n      <div class=\"leafs-container\">\n        <ng-container *ngTemplateOutlet=\"fieldFlow\"></ng-container>\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                [inheritedAppearance]=\"childAppearance()\"\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            [inheritedAppearance]=\"childAppearance()\"\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                    [inheritedAppearance]=\"childAppearance()\"\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            [inheritedAppearance]=\"childAppearance()\"\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                [inheritedAppearance]=\"childAppearance()\"\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\" matTooltip=\"Remove {{ schema().label ?? schema().name }}\" [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\" matTooltip=\"Remove {{ schema().label ?? schema().name }}\" [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      <!-- The edit toggle sits on its own row: inline it would offset the\n           first field row against the rows below (flex) or claim a whole\n           track (grid). -->\n      <div class=\"form-toolbar\">\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      </div>\n      <ng-container *ngTemplateOutlet=\"fieldFlow\"></ng-container>\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                  [inheritedAppearance]=\"childAppearance()\"\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              [inheritedAppearance]=\"childAppearance()\"\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            [inheritedAppearance]=\"childAppearance()\"\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              [inheritedAppearance]=\"childAppearance()\"\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          [inheritedAppearance]=\"childAppearance()\"\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}.fields.grid-fields{flex:0 0 auto;align-content:start}.fields.grid-fields nff-leaf-renderer,.fields.grid-fields nff-leaf-list-renderer{min-width:0;max-width:none}.fields.grid-fields>button{justify-self:start}.fields.grid-cols nff-leaf-list-renderer.stacked{grid-column:1/-1}.form-toolbar{display:flex;align-items:center}nff-leaf-list-renderer{flex:1}.boolean-fields{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}.boolean-fields nff-leaf-renderer{flex:0 0 auto;min-width:0}.boolean-fields .presence-leaf-add{margin-top:0;align-self:center}.mat-expansion-panel-content{display:flex;flex-direction:row;gap:16px}.form-content{display:flex;flex-direction:column;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}}.small-icon-button{--mdc-icon-button-state-layer-size: 24px;--mdc-icon-button-icon-size: 16px;--mat-icon-button-touch-target-display: none;width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center}.small-icon-button>[role=img]{width:16px;height:16px;font-size:16px}.small-icon-button>[role=img] svg{width:16px;height:16px}\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 }] }], inheritedAppearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "inheritedAppearance", required: false }] }] } });
 
+/**
+ * The transformers package names a root nobody named `__root__` — a sentinel,
+ * not display text (the packages share no code, so the string is matched here
+ * verbatim). The tree substitutes {@link ROOT_FALLBACK_TITLE} for it; any
+ * other root name is an authored one and displays as-is.
+ */
+const ROOT_SENTINEL = '__root__';
+const ROOT_FALLBACK_TITLE = 'Configuration';
 /**
  * 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 renders that
@@ -1190,6 +1469,12 @@ class ConfigEditorComponent {
      * can flip it itself and the host observes the change.
      */
     editable = model(true, ...(ngDevMode ? [{ debugName: "editable" }] : []));
+    /**
+     * Title for the root tree row and breadcrumb origin, overriding the schema's
+     * own `label`/`name`. Read when the tree is (re)built, so a later change
+     * shows on the next rebind or structural rebuild, not immediately.
+     */
+    rootTitle = input(...(ngDevMode ? [undefined, { debugName: "rootTitle" }] : []));
     root;
     selected = null;
     /** The selected subtree as a flat, breadcrumb-separated section list. */
@@ -1220,7 +1505,7 @@ class ConfigEditorComponent {
     attach(schema, group) {
         this.changes?.unsubscribe();
         this.expanded.clear();
-        this.root = this.buildTree(schema, group, schema.label ?? schema.name, '');
+        this.root = this.buildTree(schema, group, this.rootLabelOf(schema), '');
         this.shape = this.shapeOf(group);
         this.expanded.add(this.root.id);
         this.select(this.root);
@@ -1397,11 +1682,15 @@ class ConfigEditorComponent {
     activeCaseLabel(node) {
         const c = node.choice;
         const active = this.activeCase(node);
-        return c && active ? (c.schema.caseLabels?.[active] ?? active) : null;
+        return c && active ? this.caseLabel(c.schema, active) : null;
     }
-    /** The display label for a case: the schema's `caseLabels` entry, else the case name. */
+    /**
+     * The display label for a case: the schema's `caseLabels` entry (colliding
+     * labels disambiguated by their distinguishing fields — see
+     * {@link caseDisplayLabels}), else the case name.
+     */
     caseLabel(choice, caseName) {
-        return choice.caseLabels?.[caseName] ?? caseName;
+        return caseDisplayLabels(choice)[caseName] ?? caseName;
     }
     /**
      * Switch a choice node's active case from its detail selector; the
@@ -1577,10 +1866,14 @@ class ConfigEditorComponent {
         }
         return id;
     }
+    /** Root row title: host override, else schema label, else its name — with the {@link ROOT_SENTINEL} swapped for a generic title. */
+    rootLabelOf(schema) {
+        return this.rootTitle() ?? schema.label ?? (schema.name === ROOT_SENTINEL ? ROOT_FALLBACK_TITLE : schema.name);
+    }
     /** 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.root = this.buildTree(schema, this.formGroup(), this.rootLabelOf(schema), '');
         this.shape = this.shapeOf(this.formGroup());
     }
     /** Re-point `selected` at the rebuilt tree: same path, else the closest surviving ancestor. */
@@ -1724,7 +2017,9 @@ class ConfigEditorComponent {
     /**
      * 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.
+     * embedded form never draws nested section chrome. The node's `appearance`
+     * (grid / field-width layout) carries into the slice. Null when there are
+     * no own fields.
      */
     leafOnly(schema) {
         const children = {};
@@ -1735,12 +2030,13 @@ class ConfigEditorComponent {
         }
         if (!Object.keys(children).length)
             return null;
-        return { ...schema, root: false, children, appearance: { flatten: true } };
+        return { ...schema, root: false, children, appearance: { ...schema.appearance, flatten: true } };
     }
     // --- tree construction -----------------------------------------------------
-    buildTree(schema, group, label, path) {
+    buildTree(schema, group, label, path, inherited = null) {
         const children = [];
         const optionals = [];
+        const childInherited = descendantLayout(inherited, schema.appearance);
         for (const key of Object.keys(schema.children)) {
             const child = schema.children[key];
             if (child.kind === 'leaf' || child.kind === 'leafList') {
@@ -1755,22 +2051,22 @@ class ConfigEditorComponent {
                 optionals.push({ key, schema: child, label: this.labelOf(child, key) });
                 continue;
             }
-            const node = this.buildChildNode(child, group.get(key), this.labelOf(child, key), this.join(path, key));
+            const node = this.buildChildNode(child, group.get(key), this.labelOf(child, key), this.join(path, key), childInherited);
             if (!node)
                 continue;
             if (presence)
                 node.presenceRemovable = { key };
             children.push(node);
         }
-        const node = { id: path, label, children, group, schema };
+        const node = { id: path, label, children, group, schema, inherited };
         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, path) {
+    buildChildNode(schema, control, label, path, inherited = null) {
         if (schema.kind === 'nodeGroup') {
-            return control instanceof FormGroup ? this.buildTree(schema, control, label, path) : null;
+            return control instanceof FormGroup ? this.buildTree(schema, control, label, path, inherited) : null;
         }
         if (schema.kind === 'nodeGroupList') {
             const array = control;
@@ -1781,7 +2077,7 @@ 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}`, this.join(path, String(i)));
+                    const node = this.buildTree(schema.type, item, `#${i + 1}`, this.join(path, String(i)), inherited);
                     node.removable = { index: i };
                     return node;
                 })
@@ -1801,8 +2097,8 @@ 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, path)
-                : { id: path, label, children: [], group: control };
+                ? this.buildTree(this.caseAsGroup(schema, active), control, label, path, inherited)
+                : { id: path, label, children: [], group: control, inherited };
             node.schema = undefined;
             node.choice = { schema, group: control };
             return node;
@@ -1819,7 +2115,8 @@ class ConfigEditorComponent {
                     .map((key) => {
                     // 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));
+                    // Entries inherit through the map node's own appearance.
+                    const entryNode = this.buildChildNode(schema.value, control.controls[key], key, this.join(path, key), descendantLayout(inherited, schema.appearance));
                     if (entryNode) {
                         entryNode.mapEntry = { mapGroup: control, mapSchema: schema, key };
                     }
@@ -1837,12 +2134,17 @@ class ConfigEditorComponent {
         }
         return null;
     }
-    /** Synthetic group over a case's normalized fields, so a case body builds like any group. */
+    /**
+     * Synthetic group over a case's normalized fields, so a case body builds
+     * like any group. Carries the choice's own `appearance` so its layout
+     * reaches the case fields.
+     */
     caseAsGroup(choice, caseName) {
         return {
             kind: 'nodeGroup',
             name: choice.name,
             children: choice.cases[caseName] ? caseFields(choice.cases[caseName]) : {},
+            ...(choice.appearance ? { appearance: choice.appearance } : {}),
         };
     }
     /** A node's display label: its schema `label`, else its record key. */
@@ -1863,7 +2165,7 @@ class ConfigEditorComponent {
         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 } }, outputs: { editable: "editableChange" }, 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 (node === root) {\n          <button\n            matIconButton\n            class=\"row-btn root-toggle\"\n            [matTooltip]=\"editable() ? 'Stop editing' : 'Edit'\"\n            [attr.aria-label]=\"editable() ? 'Stop editing' : 'Edit'\"\n            [attr.aria-pressed]=\"editable()\"\n            (click)=\"editable.set(!editable()); $event.stopPropagation()\"\n          >\n            <mat-icon>{{ editable() ? 'edit_off' : 'edit' }}</mat-icon>\n          </button>\n          <button\n            matIconButton\n            class=\"row-btn root-toggle\"\n            [matTooltip]=\"allExpanded() ? 'Collapse all' : 'Expand all'\"\n            [attr.aria-label]=\"allExpanded() ? 'Collapse all' : 'Expand all'\"\n            (click)=\"toggleExpandAll(); $event.stopPropagation()\"\n          >\n            <mat-icon>{{ allExpanded() ? 'unfold_less' : 'unfold_more' }}</mat-icon>\n          </button>\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        <!-- A selected member (list item / map entry) is removable from its own\n             view; the selection then moves to its container, like a tree-row\n             remove \u2014 a deleted node cannot stay selected. -->\n        @if (editable() && selected.removable && selectedMemberParent(); as parent) {\n          @if (!listAtMin(parent)) {\n            <button\n              matIconButton\n              class=\"remove-button small-icon-button section-remove\"\n              matTooltip=\"Remove\"\n              [attr.aria-label]=\"'Remove ' + selected.label\"\n              (click)=\"removeItem(parent, selected)\"\n            >\n              <mat-icon>delete</mat-icon>\n            </button>\n          }\n        }\n        @if (editable() && selected.mapEntry && selectedMemberParent(); as parent) {\n          @if (!mapAtMin(parent)) {\n            <button\n              matIconButton\n              class=\"remove-button small-icon-button section-remove\"\n              matTooltip=\"Remove entry\"\n              [attr.aria-label]=\"'Remove ' + selected.label + ' entry'\"\n              (click)=\"removeTreeMapEntry(parent, selected)\"\n            >\n              <mat-icon>delete</mat-icon>\n            </button>\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 + (s.footer ? ':footer' : '')) {\n        @if (s.trail.length > 1 && !s.footer) {\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\" [class.continuation]=\"s.continuation\" 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            @if (editable() && s.node.removable && memberParent(s); as parent) {\n              @if (!listAtMin(parent)) {\n                <button\n                  matIconButton\n                  class=\"remove-button small-icon-button section-remove\"\n                  matTooltip=\"Remove\"\n                  [attr.aria-label]=\"'Remove ' + s.node.label\"\n                  (click)=\"removeItem(parent, s.node, true)\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              }\n            }\n            @if (editable() && s.node.mapEntry && memberParent(s); as parent) {\n              @if (!mapAtMin(parent)) {\n                <button\n                  matIconButton\n                  class=\"remove-button small-icon-button section-remove\"\n                  matTooltip=\"Remove entry\"\n                  [attr.aria-label]=\"'Remove ' + s.node.label + ' entry'\"\n                  (click)=\"removeTreeMapEntry(parent, s.node, true)\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\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 (s.footer && editable() && s.node.map?.complex && !mapAtMax(s.node)) {\n          <div class=\"section-actions\">\n            <button matButton (click)=\"addTreeMapEntry(s.node, true)\"><mat-icon>add</mat-icon> Add entry</button>\n          </div>\n        }\n        @if (s.footer && editable() && s.node.list && !listAtMax(s.node)) {\n          <div class=\"section-actions\">\n            <button matButton (click)=\"addItem(s.node, true)\">\n              <mat-icon>add</mat-icon> Add {{ s.node.list.itemLabel }}\n            </button>\n          </div>\n        }\n        @if (!s.footer && emptySectionHint(s); as hint) {\n          <p class=\"empty\">{{ hint }}</p>\n        }\n        @if (!s.footer && presentRangeHint(s); as hint) {\n          <p class=\"section-error\" role=\"alert\">{{ 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;min-height:320px}.tree{flex:0 0 360px;min-width:360px;position:sticky;top:var(--nff-tree-sticky-top, 0px);align-self:flex-start;max-height:calc(100vh - var(--nff-tree-sticky-top, 0px));overflow:auto;padding:4px 16px 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}.root-toggle{color:var(--mat-sys-on-surface-variant)}.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;border-left:1px solid var(--mat-sys-outline-variant);padding-left:16px}.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;font-size:.95rem}.section-heading.continuation{margin-top:12px}.section-heading .crumb-current{font-weight:600}.section-remove{flex:0 0 auto;align-self:center}.remove-button{background-color:var(--mat-sys-error-container);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.small-icon-button{--mdc-icon-button-state-layer-size: 24px;--mdc-icon-button-icon-size: 16px;--mat-icon-button-touch-target-display: none;width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center}.small-icon-button>[role=img]{width:16px;height:16px;font-size:16px}.small-icon-button>[role=img] svg{width:16px;height:16px}.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}.section-error{color:var(--mat-sys-error);font-size:.85rem}.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"] }] });
+    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 }, rootTitle: { classPropertyName: "rootTitle", publicName: "rootTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editable: "editableChange" }, 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 (node === root) {\n          <button\n            matIconButton\n            class=\"row-btn root-toggle\"\n            [matTooltip]=\"editable() ? 'Stop editing' : 'Edit'\"\n            [attr.aria-label]=\"editable() ? 'Stop editing' : 'Edit'\"\n            [attr.aria-pressed]=\"editable()\"\n            (click)=\"editable.set(!editable()); $event.stopPropagation()\"\n          >\n            <mat-icon>{{ editable() ? 'edit_off' : 'edit' }}</mat-icon>\n          </button>\n          <button\n            matIconButton\n            class=\"row-btn root-toggle\"\n            [matTooltip]=\"allExpanded() ? 'Collapse all' : 'Expand all'\"\n            [attr.aria-label]=\"allExpanded() ? 'Collapse all' : 'Expand all'\"\n            (click)=\"toggleExpandAll(); $event.stopPropagation()\"\n          >\n            <mat-icon>{{ allExpanded() ? 'unfold_less' : 'unfold_more' }}</mat-icon>\n          </button>\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 ' + node.label + ' 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 ' + node.label\"\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 ' + node.label\"\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 ' + node.label + ' 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        <!-- A selected member (list item / map entry) is removable from its own\n             view; the selection then moves to its container, like a tree-row\n             remove \u2014 a deleted node cannot stay selected. -->\n        @if (editable() && selected.removable && selectedMemberParent(); as parent) {\n          @if (!listAtMin(parent)) {\n            <button\n              matIconButton\n              class=\"remove-button small-icon-button section-remove\"\n              [matTooltip]=\"'Remove ' + selected.label\"\n              [attr.aria-label]=\"'Remove ' + selected.label\"\n              (click)=\"removeItem(parent, selected)\"\n            >\n              <mat-icon>delete</mat-icon>\n            </button>\n          }\n        }\n        @if (editable() && selected.mapEntry && selectedMemberParent(); as parent) {\n          @if (!mapAtMin(parent)) {\n            <button\n              matIconButton\n              class=\"remove-button small-icon-button section-remove\"\n              [matTooltip]=\"'Remove ' + selected.label + ' entry'\"\n              [attr.aria-label]=\"'Remove ' + selected.label + ' entry'\"\n              (click)=\"removeTreeMapEntry(parent, selected)\"\n            >\n              <mat-icon>delete</mat-icon>\n            </button>\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 + (s.footer ? ':footer' : '')) {\n        @if (s.trail.length > 1 && !s.footer) {\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\" [class.continuation]=\"s.continuation\" 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            @if (editable() && s.node.removable && memberParent(s); as parent) {\n              @if (!listAtMin(parent)) {\n                <button\n                  matIconButton\n                  class=\"remove-button small-icon-button section-remove\"\n                  [matTooltip]=\"'Remove ' + s.node.label\"\n                  [attr.aria-label]=\"'Remove ' + s.node.label\"\n                  (click)=\"removeItem(parent, s.node, true)\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              }\n            }\n            @if (editable() && s.node.mapEntry && memberParent(s); as parent) {\n              @if (!mapAtMin(parent)) {\n                <button\n                  matIconButton\n                  class=\"remove-button small-icon-button section-remove\"\n                  [matTooltip]=\"'Remove ' + s.node.label + ' entry'\"\n                  [attr.aria-label]=\"'Remove ' + s.node.label + ' entry'\"\n                  (click)=\"removeTreeMapEntry(parent, s.node, true)\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\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            [inheritedAppearance]=\"s.node.inherited ?? null\"\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 (s.footer && editable() && s.node.map?.complex && !mapAtMax(s.node)) {\n          <div class=\"section-actions\">\n            <button matButton [matTooltip]=\"'Add ' + s.node.label + ' entry'\" (click)=\"addTreeMapEntry(s.node, true)\"><mat-icon>add</mat-icon> Add entry</button>\n          </div>\n        }\n        @if (s.footer && editable() && s.node.list && !listAtMax(s.node)) {\n          <div class=\"section-actions\">\n            <button matButton (click)=\"addItem(s.node, true)\">\n              <mat-icon>add</mat-icon> Add {{ s.node.list.itemLabel }}\n            </button>\n          </div>\n        }\n        @if (!s.footer && emptySectionHint(s); as hint) {\n          <p class=\"empty\">{{ hint }}</p>\n        }\n        @if (!s.footer && presentRangeHint(s); as hint) {\n          <p class=\"section-error\" role=\"alert\">{{ 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;min-height:320px}.tree{flex:0 0 360px;min-width:360px;position:sticky;top:var(--nff-tree-sticky-top, 0px);align-self:flex-start;max-height:calc(100vh - var(--nff-tree-sticky-top, 0px));overflow:auto;padding:4px 16px 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}.root-toggle{color:var(--mat-sys-on-surface-variant)}.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;border-left:1px solid var(--mat-sys-outline-variant);padding-left:16px}.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;font-size:.95rem}.section-heading.continuation{margin-top:12px}.section-heading .crumb-current{font-weight:600}.section-remove{flex:0 0 auto;align-self:center}.remove-button{background-color:var(--mat-sys-error-container);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.small-icon-button{--mdc-icon-button-state-layer-size: 24px;--mdc-icon-button-icon-size: 16px;--mat-icon-button-touch-target-display: none;width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center}.small-icon-button>[role=img]{width:16px;height:16px;font-size:16px}.small-icon-button>[role=img] svg{width:16px;height:16px}.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}.section-error{color:var(--mat-sys-error);font-size:.85rem}.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", "inheritedAppearance"], outputs: ["remove", "editableChange"] }, { kind: "component", type: NodeMapRendererComponent, selector: "nff-node-map-renderer", inputs: ["nodeMap", "formGroup", "editable", "inheritedAppearance"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ConfigEditorComponent, decorators: [{
             type: Component,
@@ -1878,8 +2180,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         MatTooltip,
                         DynamicRecursiveFormComponent,
                         NodeMapRendererComponent,
-                    ], 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 (node === root) {\n          <button\n            matIconButton\n            class=\"row-btn root-toggle\"\n            [matTooltip]=\"editable() ? 'Stop editing' : 'Edit'\"\n            [attr.aria-label]=\"editable() ? 'Stop editing' : 'Edit'\"\n            [attr.aria-pressed]=\"editable()\"\n            (click)=\"editable.set(!editable()); $event.stopPropagation()\"\n          >\n            <mat-icon>{{ editable() ? 'edit_off' : 'edit' }}</mat-icon>\n          </button>\n          <button\n            matIconButton\n            class=\"row-btn root-toggle\"\n            [matTooltip]=\"allExpanded() ? 'Collapse all' : 'Expand all'\"\n            [attr.aria-label]=\"allExpanded() ? 'Collapse all' : 'Expand all'\"\n            (click)=\"toggleExpandAll(); $event.stopPropagation()\"\n          >\n            <mat-icon>{{ allExpanded() ? 'unfold_less' : 'unfold_more' }}</mat-icon>\n          </button>\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        <!-- A selected member (list item / map entry) is removable from its own\n             view; the selection then moves to its container, like a tree-row\n             remove \u2014 a deleted node cannot stay selected. -->\n        @if (editable() && selected.removable && selectedMemberParent(); as parent) {\n          @if (!listAtMin(parent)) {\n            <button\n              matIconButton\n              class=\"remove-button small-icon-button section-remove\"\n              matTooltip=\"Remove\"\n              [attr.aria-label]=\"'Remove ' + selected.label\"\n              (click)=\"removeItem(parent, selected)\"\n            >\n              <mat-icon>delete</mat-icon>\n            </button>\n          }\n        }\n        @if (editable() && selected.mapEntry && selectedMemberParent(); as parent) {\n          @if (!mapAtMin(parent)) {\n            <button\n              matIconButton\n              class=\"remove-button small-icon-button section-remove\"\n              matTooltip=\"Remove entry\"\n              [attr.aria-label]=\"'Remove ' + selected.label + ' entry'\"\n              (click)=\"removeTreeMapEntry(parent, selected)\"\n            >\n              <mat-icon>delete</mat-icon>\n            </button>\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 + (s.footer ? ':footer' : '')) {\n        @if (s.trail.length > 1 && !s.footer) {\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\" [class.continuation]=\"s.continuation\" 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            @if (editable() && s.node.removable && memberParent(s); as parent) {\n              @if (!listAtMin(parent)) {\n                <button\n                  matIconButton\n                  class=\"remove-button small-icon-button section-remove\"\n                  matTooltip=\"Remove\"\n                  [attr.aria-label]=\"'Remove ' + s.node.label\"\n                  (click)=\"removeItem(parent, s.node, true)\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              }\n            }\n            @if (editable() && s.node.mapEntry && memberParent(s); as parent) {\n              @if (!mapAtMin(parent)) {\n                <button\n                  matIconButton\n                  class=\"remove-button small-icon-button section-remove\"\n                  matTooltip=\"Remove entry\"\n                  [attr.aria-label]=\"'Remove ' + s.node.label + ' entry'\"\n                  (click)=\"removeTreeMapEntry(parent, s.node, true)\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\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 (s.footer && editable() && s.node.map?.complex && !mapAtMax(s.node)) {\n          <div class=\"section-actions\">\n            <button matButton (click)=\"addTreeMapEntry(s.node, true)\"><mat-icon>add</mat-icon> Add entry</button>\n          </div>\n        }\n        @if (s.footer && editable() && s.node.list && !listAtMax(s.node)) {\n          <div class=\"section-actions\">\n            <button matButton (click)=\"addItem(s.node, true)\">\n              <mat-icon>add</mat-icon> Add {{ s.node.list.itemLabel }}\n            </button>\n          </div>\n        }\n        @if (!s.footer && emptySectionHint(s); as hint) {\n          <p class=\"empty\">{{ hint }}</p>\n        }\n        @if (!s.footer && presentRangeHint(s); as hint) {\n          <p class=\"section-error\" role=\"alert\">{{ 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;min-height:320px}.tree{flex:0 0 360px;min-width:360px;position:sticky;top:var(--nff-tree-sticky-top, 0px);align-self:flex-start;max-height:calc(100vh - var(--nff-tree-sticky-top, 0px));overflow:auto;padding:4px 16px 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}.root-toggle{color:var(--mat-sys-on-surface-variant)}.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;border-left:1px solid var(--mat-sys-outline-variant);padding-left:16px}.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;font-size:.95rem}.section-heading.continuation{margin-top:12px}.section-heading .crumb-current{font-weight:600}.section-remove{flex:0 0 auto;align-self:center}.remove-button{background-color:var(--mat-sys-error-container);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.small-icon-button{--mdc-icon-button-state-layer-size: 24px;--mdc-icon-button-icon-size: 16px;--mat-icon-button-touch-target-display: none;width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center}.small-icon-button>[role=img]{width:16px;height:16px;font-size:16px}.small-icon-button>[role=img] svg{width:16px;height:16px}.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}.section-error{color:var(--mat-sys-error);font-size:.85rem}.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 }] }, { type: i0.Output, args: ["editableChange"] }] } });
+                    ], 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 (node === root) {\n          <button\n            matIconButton\n            class=\"row-btn root-toggle\"\n            [matTooltip]=\"editable() ? 'Stop editing' : 'Edit'\"\n            [attr.aria-label]=\"editable() ? 'Stop editing' : 'Edit'\"\n            [attr.aria-pressed]=\"editable()\"\n            (click)=\"editable.set(!editable()); $event.stopPropagation()\"\n          >\n            <mat-icon>{{ editable() ? 'edit_off' : 'edit' }}</mat-icon>\n          </button>\n          <button\n            matIconButton\n            class=\"row-btn root-toggle\"\n            [matTooltip]=\"allExpanded() ? 'Collapse all' : 'Expand all'\"\n            [attr.aria-label]=\"allExpanded() ? 'Collapse all' : 'Expand all'\"\n            (click)=\"toggleExpandAll(); $event.stopPropagation()\"\n          >\n            <mat-icon>{{ allExpanded() ? 'unfold_less' : 'unfold_more' }}</mat-icon>\n          </button>\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 ' + node.label + ' 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 ' + node.label\"\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 ' + node.label\"\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 ' + node.label + ' 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        <!-- A selected member (list item / map entry) is removable from its own\n             view; the selection then moves to its container, like a tree-row\n             remove \u2014 a deleted node cannot stay selected. -->\n        @if (editable() && selected.removable && selectedMemberParent(); as parent) {\n          @if (!listAtMin(parent)) {\n            <button\n              matIconButton\n              class=\"remove-button small-icon-button section-remove\"\n              [matTooltip]=\"'Remove ' + selected.label\"\n              [attr.aria-label]=\"'Remove ' + selected.label\"\n              (click)=\"removeItem(parent, selected)\"\n            >\n              <mat-icon>delete</mat-icon>\n            </button>\n          }\n        }\n        @if (editable() && selected.mapEntry && selectedMemberParent(); as parent) {\n          @if (!mapAtMin(parent)) {\n            <button\n              matIconButton\n              class=\"remove-button small-icon-button section-remove\"\n              [matTooltip]=\"'Remove ' + selected.label + ' entry'\"\n              [attr.aria-label]=\"'Remove ' + selected.label + ' entry'\"\n              (click)=\"removeTreeMapEntry(parent, selected)\"\n            >\n              <mat-icon>delete</mat-icon>\n            </button>\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 + (s.footer ? ':footer' : '')) {\n        @if (s.trail.length > 1 && !s.footer) {\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\" [class.continuation]=\"s.continuation\" 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            @if (editable() && s.node.removable && memberParent(s); as parent) {\n              @if (!listAtMin(parent)) {\n                <button\n                  matIconButton\n                  class=\"remove-button small-icon-button section-remove\"\n                  [matTooltip]=\"'Remove ' + s.node.label\"\n                  [attr.aria-label]=\"'Remove ' + s.node.label\"\n                  (click)=\"removeItem(parent, s.node, true)\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              }\n            }\n            @if (editable() && s.node.mapEntry && memberParent(s); as parent) {\n              @if (!mapAtMin(parent)) {\n                <button\n                  matIconButton\n                  class=\"remove-button small-icon-button section-remove\"\n                  [matTooltip]=\"'Remove ' + s.node.label + ' entry'\"\n                  [attr.aria-label]=\"'Remove ' + s.node.label + ' entry'\"\n                  (click)=\"removeTreeMapEntry(parent, s.node, true)\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\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            [inheritedAppearance]=\"s.node.inherited ?? null\"\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 (s.footer && editable() && s.node.map?.complex && !mapAtMax(s.node)) {\n          <div class=\"section-actions\">\n            <button matButton [matTooltip]=\"'Add ' + s.node.label + ' entry'\" (click)=\"addTreeMapEntry(s.node, true)\"><mat-icon>add</mat-icon> Add entry</button>\n          </div>\n        }\n        @if (s.footer && editable() && s.node.list && !listAtMax(s.node)) {\n          <div class=\"section-actions\">\n            <button matButton (click)=\"addItem(s.node, true)\">\n              <mat-icon>add</mat-icon> Add {{ s.node.list.itemLabel }}\n            </button>\n          </div>\n        }\n        @if (!s.footer && emptySectionHint(s); as hint) {\n          <p class=\"empty\">{{ hint }}</p>\n        }\n        @if (!s.footer && presentRangeHint(s); as hint) {\n          <p class=\"section-error\" role=\"alert\">{{ 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;min-height:320px}.tree{flex:0 0 360px;min-width:360px;position:sticky;top:var(--nff-tree-sticky-top, 0px);align-self:flex-start;max-height:calc(100vh - var(--nff-tree-sticky-top, 0px));overflow:auto;padding:4px 16px 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}.root-toggle{color:var(--mat-sys-on-surface-variant)}.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;border-left:1px solid var(--mat-sys-outline-variant);padding-left:16px}.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;font-size:.95rem}.section-heading.continuation{margin-top:12px}.section-heading .crumb-current{font-weight:600}.section-remove{flex:0 0 auto;align-self:center}.remove-button{background-color:var(--mat-sys-error-container);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.small-icon-button{--mdc-icon-button-state-layer-size: 24px;--mdc-icon-button-icon-size: 16px;--mat-icon-button-touch-target-display: none;width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center}.small-icon-button>[role=img]{width:16px;height:16px;font-size:16px}.small-icon-button>[role=img] svg{width:16px;height:16px}.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}.section-error{color:var(--mat-sys-error);font-size:.85rem}.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 }] }, { type: i0.Output, args: ["editableChange"] }], rootTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootTitle", required: false }] }] } });
 
 /*
  * Public API Surface of ng-form-foundry
@@ -1889,5 +2191,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, serializeForm, switchChoiceCase, toWireValue };
+export { CASE_KEY, ConfigEditorComponent, DynamicRecursiveFormComponent, LeafEnumRendererComponent, LeafListRendererComponent, LeafRendererComponent, NodeGroupListRendererComponent, NodeMapRendererComponent, addMapEntry, buildControl, buildFormFromSchema, caseDisplayLabels, caseFields, defineSchema, removeMapEntry, renameMapEntry, resolveChoiceCase, serializeForm, switchChoiceCase, toWireValue };
 //# sourceMappingURL=ng-form-foundry.mjs.map