ng-form-foundry 0.5.5 → 0.6.1

package/fesm2022/ng-form-foundry.mjs

@@ -51,7 +51,12 @@ function isMap(node) {
 }
 /** Whether the node is an optional (presence) node: its key is data, absent until enabled. */
 function hasPresence(node) {
-    return ((node.kind === 'leaf' || node.kind === 'nodeGroup' || node.kind === 'map' || node.kind === 'choice') &&
+    return ((node.kind === 'leaf' ||
+        node.kind === 'nodeGroup' ||
+        node.kind === 'map' ||
+        node.kind === 'choice' ||
+        node.kind === 'leafList' ||
+        node.kind === 'nodeGroupList') &&
         node.presence === true);
 }
 /**
@@ -1073,6 +1078,12 @@ class NodeGroupListRendererComponent {
     /** Field-layout appearance from the enclosing group, forwarded to every item form. */
     inheritedAppearance = null;
     message = new EventEmitter();
+    /**
+     * Emitted when the last entry of a presence (optional / advisoryRequired) list
+     * is removed — the host de-materializes the whole list (→ absent). An optional
+     * list has no present-empty state; a required list never routes here.
+     */
+    removeList = new EventEmitter();
     // forwardRef: DynamicRecursiveFormComponent and this component import each
     // other, so the class reference is undefined when this query is evaluated at
     // decoration time. forwardRef defers the lookup and keeps the selector valid.
@@ -1102,6 +1113,13 @@ class NodeGroupListRendererComponent {
         });
     }
     removeItem($index) {
+        // A presence (optional / advisoryRequired) list has no present-empty state:
+        // removing its last entry de-materializes the whole list (→ absent). A
+        // required (non-presence) list instead stops at its minimum, staying `[]`.
+        if (this.nodeGroupList?.presence && this.formArray.length === 1) {
+            this.removeList.emit();
+            return;
+        }
         if (this.formArray.length <= this.effectiveMin) {
             this.message.emit({
                 message: `You cannot remove the last ${this.nodeGroupList.type.name} configuration!`,
@@ -1136,7 +1154,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", showAbsentOptionals: "showAbsentOptionals", 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          [showAbsentOptionals]=\"showAbsentOptionals\"\n          [schema]=\"nodeGroupList.type\"\n          [formGroup]=\"asFormGroup(group)\"\n          [title]=\"getTitle($index)\"\n          [index]=\"0\"\n          [removable]=\"formArray.length > effectiveMin\"\n          (remove)=\"removeItem($index)\"\n          [editable]=\"editable\"\n          [addButtonCallback]=\"canAdd ? addItem : null\"\n          [addButtonLabel]=\"'Add ' + (nodeGroupList.type.label ?? nodeGroupList.type.name) + ' #' + (formArray.length + 1)\"\n        />\n        </div>\n      }\n      @if (editable && formArray.length === 0 && canAdd) {\n        <!-- An empty list has no per-item header to host the add button, so it\n             would otherwise be an unrecoverable dead end. This footer add\n             creates the first item (mirrors the config editor's \"Add \u2026 #1\"). -->\n        <button\n          matButton=\"outlined\"\n          class=\"empty-add-button\"\n          [matTooltip]=\"'Add ' + (nodeGroupList.type.label ?? nodeGroupList.type.name)\"\n          (click)=\"addItem()\"\n        >\n          <mat-icon>add</mat-icon> Add {{ nodeGroupList.type.label ?? nodeGroupList.type.name }} #1\n        </button>\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", "showAbsentOptionals", "addButtonCallback", "addButtonLabel", "focusLeaf", "inheritedAppearance"], outputs: ["remove", "editableChange"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatButtonModule) }, { kind: "component", type: i0.forwardRef(() => i2$2.MatButton), selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatIconModule) }, { kind: "component", type: i0.forwardRef(() => i2$1.MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatTooltipModule) }, { kind: "directive", type: i0.forwardRef(() => i3$1.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: NodeGroupListRendererComponent, isStandalone: true, selector: "nff-node-group-list-renderer", inputs: { nodeGroupList: "nodeGroupList", initialValue: "initialValue", formArray: "formArray", editable: "editable", showAbsentOptionals: "showAbsentOptionals", minItems: "minItems", maxItems: "maxItems", inheritedAppearance: "inheritedAppearance" }, outputs: { message: "message", removeList: "removeList" }, 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          [showAbsentOptionals]=\"showAbsentOptionals\"\n          [schema]=\"nodeGroupList.type\"\n          [formGroup]=\"asFormGroup(group)\"\n          [title]=\"getTitle($index)\"\n          [index]=\"0\"\n          [removable]=\"formArray.length > effectiveMin\"\n          (remove)=\"removeItem($index)\"\n          [editable]=\"editable\"\n          [addButtonCallback]=\"canAdd ? addItem : null\"\n          [addButtonLabel]=\"'Add ' + (nodeGroupList.type.label ?? nodeGroupList.type.name) + ' #' + (formArray.length + 1)\"\n        />\n        </div>\n      }\n      @if (editable && formArray.length === 0 && canAdd) {\n        <!-- An empty list has no per-item header to host the add button, so it\n             would otherwise be an unrecoverable dead end. This footer add\n             creates the first item (mirrors the config editor's \"Add \u2026 #1\"). -->\n        <button\n          matButton=\"outlined\"\n          class=\"empty-add-button\"\n          [matTooltip]=\"'Add ' + (nodeGroupList.type.label ?? nodeGroupList.type.name)\"\n          (click)=\"addItem()\"\n        >\n          <mat-icon>add</mat-icon> Add {{ nodeGroupList.type.label ?? nodeGroupList.type.name }} #1\n        </button>\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)}.empty-add-button{width:100%}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => DynamicRecursiveFormComponent), selector: "nff-dynamic-recursive-form", inputs: ["schema", "initialValue", "formGroup", "index", "removable", "title", "editable", "showAbsentOptionals", "addButtonCallback", "addButtonLabel", "focusLeaf", "inheritedAppearance"], outputs: ["remove", "editableChange"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatButtonModule) }, { kind: "component", type: i0.forwardRef(() => i2$2.MatButton), selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatIconModule) }, { kind: "component", type: i0.forwardRef(() => i2$1.MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatTooltipModule) }, { kind: "directive", type: i0.forwardRef(() => i3$1.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: NodeGroupListRendererComponent, decorators: [{
             type: Component,
@@ -1145,7 +1163,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          [inheritedAppearance]=\"inheritedAppearance\"\n          [showAbsentOptionals]=\"showAbsentOptionals\"\n          [schema]=\"nodeGroupList.type\"\n          [formGroup]=\"asFormGroup(group)\"\n          [title]=\"getTitle($index)\"\n          [index]=\"0\"\n          [removable]=\"formArray.length > effectiveMin\"\n          (remove)=\"removeItem($index)\"\n          [editable]=\"editable\"\n          [addButtonCallback]=\"canAdd ? addItem : null\"\n          [addButtonLabel]=\"'Add ' + (nodeGroupList.type.label ?? nodeGroupList.type.name) + ' #' + (formArray.length + 1)\"\n        />\n        </div>\n      }\n      @if (editable && formArray.length === 0 && canAdd) {\n        <!-- An empty list has no per-item header to host the add button, so it\n             would otherwise be an unrecoverable dead end. This footer add\n             creates the first item (mirrors the config editor's \"Add \u2026 #1\"). -->\n        <button\n          matButton=\"outlined\"\n          class=\"empty-add-button\"\n          [matTooltip]=\"'Add ' + (nodeGroupList.type.label ?? nodeGroupList.type.name)\"\n          (click)=\"addItem()\"\n        >\n          <mat-icon>add</mat-icon> Add {{ nodeGroupList.type.label ?? nodeGroupList.type.name }} #1\n        </button>\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          [showAbsentOptionals]=\"showAbsentOptionals\"\n          [schema]=\"nodeGroupList.type\"\n          [formGroup]=\"asFormGroup(group)\"\n          [title]=\"getTitle($index)\"\n          [index]=\"0\"\n          [removable]=\"formArray.length > effectiveMin\"\n          (remove)=\"removeItem($index)\"\n          [editable]=\"editable\"\n          [addButtonCallback]=\"canAdd ? addItem : null\"\n          [addButtonLabel]=\"'Add ' + (nodeGroupList.type.label ?? nodeGroupList.type.name) + ' #' + (formArray.length + 1)\"\n        />\n        </div>\n      }\n      @if (editable && formArray.length === 0 && canAdd) {\n        <!-- An empty list has no per-item header to host the add button, so it\n             would otherwise be an unrecoverable dead end. This footer add\n             creates the first item (mirrors the config editor's \"Add \u2026 #1\"). -->\n        <button\n          matButton=\"outlined\"\n          class=\"empty-add-button\"\n          [matTooltip]=\"'Add ' + (nodeGroupList.type.label ?? nodeGroupList.type.name)\"\n          (click)=\"addItem()\"\n        >\n          <mat-icon>add</mat-icon> Add {{ nodeGroupList.type.label ?? nodeGroupList.type.name }} #1\n        </button>\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)}.empty-add-button{width:100%}\n"] }]
         }], propDecorators: { nodeGroupList: [{
                 type: Input
             }], initialValue: [{
@@ -1164,6 +1182,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 type: Input
             }], message: [{
                 type: Output
+            }], removeList: [{
+                type: Output
             }], items: [{
                 type: ViewChildren,
                 args: [forwardRef(() => DynamicRecursiveFormComponent)]
@@ -1237,6 +1257,12 @@ class LeafListRendererComponent {
      */
     layout = null;
     message = new EventEmitter();
+    /**
+     * Emitted from the empty-list remove button when the list is a presence list —
+     * the host removes the whole list (de-materializes it, → absent). Only wired
+     * for a `presence` `leafList`; the parent maps it to `setNodePresence`.
+     */
+    removeList = new EventEmitter();
     matDialog = inject(MatDialog);
     /**
      * Take a full-width row of its own once the array holds more than one entry.
@@ -1274,6 +1300,13 @@ class LeafListRendererComponent {
         return (this.formArray?.length ?? 0) < this.effectiveMax;
     }
     removeItem($index) {
+        // A presence (optional / advisoryRequired) list has no present-empty state:
+        // removing its last entry de-materializes the whole list (→ absent). A
+        // required (non-presence) list instead stops at its minimum, staying `[]`.
+        if (this.leaf_?.presence && this.formArray.length === 1) {
+            this.removeList.emit();
+            return;
+        }
         if (this.formArray.length <= this.effectiveMin) {
             this.message.emit({
                 message: 'You cannot remove the last item!',
@@ -1289,7 +1322,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", maxItems: "maxItems", 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]=\"formArray.length > effectiveMin\"\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 > effectiveMin) {\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 && canAdd) {\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    @if (editable && formArray.length === 0 && canAdd) {\n      <!-- An empty leaf-list has no item to host the trailing add button; this\n           creates the first entry so the list is not a dead end. -->\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}\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{display:flex;flex:1 1 auto;min-width:0}.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}.actions{flex-shrink:0;transition:opacity .15s ease,max-width .15s ease,margin-left .15s ease,transform .15s ease}@media (prefers-reduced-motion: reduce){.actions{transition:none}}@media (hover: hover){.field-item .actions{max-width:0;margin-left:-4px;opacity:0;transform:translate(8px);overflow:hidden;pointer-events:none}.field-item:hover .actions,.field-item:focus-within .actions{max-width:48px;margin-left:0;opacity:1;transform:none;overflow:visible;pointer-events:auto}}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: AnonLeafRendererComponent, selector: "nff-anon-leaf-renderer", inputs: ["AnonLeaf", "initialValue", "control", "removable", "editable", "index", "label"], outputs: ["remove"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.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"] }] });
+    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", maxItems: "maxItems", layout: "layout" }, outputs: { message: "message", removeList: "removeList" }, 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]=\"formArray.length > effectiveMin\"\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 > effectiveMin) {\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 && canAdd) {\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    @if (editable && formArray.length === 0 && canAdd) {\n      <!-- A required (non-presence) list can be present-but-empty; this labeled\n           affordance adds the first entry so an empty list is not a dead end\n           (mirrors the node-group list's \"Add \u2026 #1\"). A presence list never\n           renders empty here \u2014 its first entry appears on materialize, and\n           removing the last entry de-materializes it. -->\n      <button\n        matButton=\"outlined\"\n        class=\"empty-add-button\"\n        [attr.aria-label]=\"'Add ' + (leaf_.label ?? leaf_.name) + ' item'\"\n        (click)=\"addItem()\"\n      >\n        <mat-icon>add</mat-icon> Add {{ leaf_.label ?? leaf_.name }} item\n      </button>\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 auto}:host(.list-type-string) .field-item,:host(.list-type-enum) .field-item{min-width:var(--nff-min-text-field-width, 220px)}:host(.list-type-number) .field-item{min-width:var(--nff-min-number-field-width, 140px);max-width:var(--nff-max-number-field-width, none)}.empty-add-button{width:100%}.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{display:flex;flex:1 1 auto;min-width:0}.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}.actions{flex-shrink:0;transition:opacity .15s ease,max-width .15s ease,margin-left .15s ease,transform .15s ease}@media (prefers-reduced-motion: reduce){.actions{transition:none}}@media (hover: hover){.field-item .actions{max-width:0;margin-left:-4px;opacity:0;transform:translate(8px);overflow:hidden;pointer-events:none}.field-item:hover .actions,.field-item:focus-within .actions{max-width:48px;margin-left:0;opacity:1;transform:none;overflow:visible;pointer-events:auto}}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: AnonLeafRendererComponent, selector: "nff-anon-leaf-renderer", inputs: ["AnonLeaf", "initialValue", "control", "removable", "editable", "index", "label"], outputs: ["remove"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.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$2.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,
@@ -1299,7 +1332,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         MatButtonModule,
                         MatPrefix,
                         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]=\"formArray.length > effectiveMin\"\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 > effectiveMin) {\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 && canAdd) {\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    @if (editable && formArray.length === 0 && canAdd) {\n      <!-- An empty leaf-list has no item to host the trailing add button; this\n           creates the first entry so the list is not a dead end. -->\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}\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{display:flex;flex:1 1 auto;min-width:0}.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}.actions{flex-shrink:0;transition:opacity .15s ease,max-width .15s ease,margin-left .15s ease,transform .15s ease}@media (prefers-reduced-motion: reduce){.actions{transition:none}}@media (hover: hover){.field-item .actions{max-width:0;margin-left:-4px;opacity:0;transform:translate(8px);overflow:hidden;pointer-events:none}.field-item:hover .actions,.field-item:focus-within .actions{max-width:48px;margin-left:0;opacity:1;transform:none;overflow:visible;pointer-events:auto}}\n"] }]
+                    ], template: "@if (formArray && leaf_) {\n    @for (control of formArray.controls; track $index) {\n      <div class=\"field-item\">\n        <nff-anon-leaf-renderer\n          [AnonLeaf]=\"leaf_\" [control]=\"control\"\n          [removable]=\"formArray.length > effectiveMin\"\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 > effectiveMin) {\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 && canAdd) {\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    @if (editable && formArray.length === 0 && canAdd) {\n      <!-- A required (non-presence) list can be present-but-empty; this labeled\n           affordance adds the first entry so an empty list is not a dead end\n           (mirrors the node-group list's \"Add \u2026 #1\"). A presence list never\n           renders empty here \u2014 its first entry appears on materialize, and\n           removing the last entry de-materializes it. -->\n      <button\n        matButton=\"outlined\"\n        class=\"empty-add-button\"\n        [attr.aria-label]=\"'Add ' + (leaf_.label ?? leaf_.name) + ' item'\"\n        (click)=\"addItem()\"\n      >\n        <mat-icon>add</mat-icon> Add {{ leaf_.label ?? leaf_.name }} item\n      </button>\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 auto}:host(.list-type-string) .field-item,:host(.list-type-enum) .field-item{min-width:var(--nff-min-text-field-width, 220px)}:host(.list-type-number) .field-item{min-width:var(--nff-min-number-field-width, 140px);max-width:var(--nff-max-number-field-width, none)}.empty-add-button{width:100%}.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{display:flex;flex:1 1 auto;min-width:0}.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}.actions{flex-shrink:0;transition:opacity .15s ease,max-width .15s ease,margin-left .15s ease,transform .15s ease}@media (prefers-reduced-motion: reduce){.actions{transition:none}}@media (hover: hover){.field-item .actions{max-width:0;margin-left:-4px;opacity:0;transform:translate(8px);overflow:hidden;pointer-events:none}.field-item:hover .actions,.field-item:focus-within .actions{max-width:48px;margin-left:0;opacity:1;transform:none;overflow:visible;pointer-events:auto}}\n"] }]
         }], propDecorators: { leaf_: [{
                 type: Input
             }], initialValue: [{
@@ -1316,6 +1349,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 type: Input
             }], message: [{
                 type: Output
+            }], removeList: [{
+                type: Output
             }], stacked: [{
                 type: HostBinding,
                 args: ['class.stacked']
@@ -1420,7 +1455,7 @@ class NodeMapRendererComponent {
     asFormGroup = asFormGroup;
     asFormArray = asFormArray;
     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", showAbsentOptionals: "showAbsentOptionals", 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              [showAbsentOptionals]=\"showAbsentOptionals\"\n              [schema]=\"valueGroup\"\n              [formGroup]=\"asFormGroup(formGroup.controls[key])\"\n              [editable]=\"editable\"\n            />\n          } @else if (nodeMap.value.kind === 'leafList') {\n            <nff-leaf-list-renderer\n              [leaf_]=\"asLeafList(nodeMap.value)\"\n              [formArray]=\"formGroup.controls[key]\"\n              [editable]=\"editable\"\n            />\n          } @else if (nodeMap.value.kind === 'nodeGroupList') {\n            <nff-node-group-list-renderer\n              [inheritedAppearance]=\"entryAppearance\"\n              [showAbsentOptionals]=\"showAbsentOptionals\"\n              [nodeGroupList]=\"asNodeGroupList(nodeMap.value)\"\n              [formArray]=\"asFormArray(formGroup.controls[key])\"\n              [editable]=\"editable\"\n            />\n          } @else if (nodeMap.value.kind === 'map') {\n            <nff-node-map-renderer\n              [inheritedAppearance]=\"entryAppearance\"\n              [showAbsentOptionals]=\"showAbsentOptionals\"\n              [nodeMap]=\"asNodeMap(nodeMap.value)\"\n              [formGroup]=\"asFormGroup(formGroup.controls[key])\"\n              [editable]=\"editable\"\n            />\n          }\n          <!-- A choice-valued map (additionalProperties: anyOf/oneOf) has no\n               standalone bare-choice renderer; use the config editor for it. -->\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;opacity:.6;transition:opacity .12s ease}.add-button:hover,.add-button:focus-visible{opacity:1}.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}.remove-button{flex-shrink:0;transition:opacity .15s ease,max-width .15s ease,margin-left .15s ease,transform .15s ease}@media (prefers-reduced-motion: reduce){.remove-button{transition:none}}@media (hover: hover){.map-entry .remove-button{max-width:0;margin-left:-8px;opacity:0;transform:translate(8px);overflow:hidden;pointer-events:none}.map-entry:hover .remove-button,.map-entry:focus-within .remove-button{max-width:48px;margin-left:0;opacity:1;transform:none;overflow:visible;pointer-events:auto}}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => NodeMapRendererComponent), selector: "nff-node-map-renderer", inputs: ["nodeMap", "formGroup", "editable", "showAbsentOptionals", "inheritedAppearance"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatButtonModule) }, { kind: "component", type: i0.forwardRef(() => i2$2.MatIconButton), selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatIconModule) }, { kind: "component", type: i0.forwardRef(() => i2$1.MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i2.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i2.MatLabel), selector: "mat-label" }, { kind: "ngmodule", type: i0.forwardRef(() => MatInputModule) }, { kind: "directive", type: i0.forwardRef(() => 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", "placeholder"], outputs: ["remove"] }, { kind: "component", type: i0.forwardRef(() => LeafListRendererComponent), selector: "nff-leaf-list-renderer", inputs: ["leaf_", "initialValue", "formArray", "editable", "minItems", "maxItems", "layout"], outputs: ["message"] }, { kind: "component", type: i0.forwardRef(() => NodeGroupListRendererComponent), selector: "nff-node-group-list-renderer", inputs: ["nodeGroupList", "initialValue", "formArray", "editable", "showAbsentOptionals", "minItems", "maxItems", "inheritedAppearance"], outputs: ["message"] }, { kind: "component", type: i0.forwardRef(() => DynamicRecursiveFormComponent), selector: "nff-dynamic-recursive-form", inputs: ["schema", "initialValue", "formGroup", "index", "removable", "title", "editable", "showAbsentOptionals", "addButtonCallback", "addButtonLabel", "focusLeaf", "inheritedAppearance"], 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", showAbsentOptionals: "showAbsentOptionals", 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              [showAbsentOptionals]=\"showAbsentOptionals\"\n              [schema]=\"valueGroup\"\n              [formGroup]=\"asFormGroup(formGroup.controls[key])\"\n              [editable]=\"editable\"\n            />\n          } @else if (nodeMap.value.kind === 'leafList') {\n            <nff-leaf-list-renderer\n              [leaf_]=\"asLeafList(nodeMap.value)\"\n              [formArray]=\"formGroup.controls[key]\"\n              [editable]=\"editable\"\n            />\n          } @else if (nodeMap.value.kind === 'nodeGroupList') {\n            <nff-node-group-list-renderer\n              [inheritedAppearance]=\"entryAppearance\"\n              [showAbsentOptionals]=\"showAbsentOptionals\"\n              [nodeGroupList]=\"asNodeGroupList(nodeMap.value)\"\n              [formArray]=\"asFormArray(formGroup.controls[key])\"\n              [editable]=\"editable\"\n            />\n          } @else if (nodeMap.value.kind === 'map') {\n            <nff-node-map-renderer\n              [inheritedAppearance]=\"entryAppearance\"\n              [showAbsentOptionals]=\"showAbsentOptionals\"\n              [nodeMap]=\"asNodeMap(nodeMap.value)\"\n              [formGroup]=\"asFormGroup(formGroup.controls[key])\"\n              [editable]=\"editable\"\n            />\n          }\n          <!-- A choice-valued map (additionalProperties: anyOf/oneOf) has no\n               standalone bare-choice renderer; use the config editor for it. -->\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;opacity:.6;transition:opacity .12s ease}.add-button:hover,.add-button:focus-visible{opacity:1}.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}.remove-button{flex-shrink:0;transition:opacity .15s ease,max-width .15s ease,margin-left .15s ease,transform .15s ease}@media (prefers-reduced-motion: reduce){.remove-button{transition:none}}@media (hover: hover){.map-entry .remove-button{max-width:0;margin-left:-8px;opacity:0;transform:translate(8px);overflow:hidden;pointer-events:none}.map-entry:hover .remove-button,.map-entry:focus-within .remove-button{max-width:48px;margin-left:0;opacity:1;transform:none;overflow:visible;pointer-events:auto}}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => NodeMapRendererComponent), selector: "nff-node-map-renderer", inputs: ["nodeMap", "formGroup", "editable", "showAbsentOptionals", "inheritedAppearance"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatButtonModule) }, { kind: "component", type: i0.forwardRef(() => i2$2.MatIconButton), selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatIconModule) }, { kind: "component", type: i0.forwardRef(() => i2$1.MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i2.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i2.MatLabel), selector: "mat-label" }, { kind: "ngmodule", type: i0.forwardRef(() => MatInputModule) }, { kind: "directive", type: i0.forwardRef(() => 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", "placeholder"], outputs: ["remove"] }, { kind: "component", type: i0.forwardRef(() => LeafListRendererComponent), selector: "nff-leaf-list-renderer", inputs: ["leaf_", "initialValue", "formArray", "editable", "minItems", "maxItems", "layout"], outputs: ["message", "removeList"] }, { kind: "component", type: i0.forwardRef(() => NodeGroupListRendererComponent), selector: "nff-node-group-list-renderer", inputs: ["nodeGroupList", "initialValue", "formArray", "editable", "showAbsentOptionals", "minItems", "maxItems", "inheritedAppearance"], outputs: ["message", "removeList"] }, { kind: "component", type: i0.forwardRef(() => DynamicRecursiveFormComponent), selector: "nff-dynamic-recursive-form", inputs: ["schema", "initialValue", "formGroup", "index", "removable", "title", "editable", "showAbsentOptionals", "addButtonCallback", "addButtonLabel", "focusLeaf", "inheritedAppearance"], outputs: ["remove", "editableChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NodeMapRendererComponent, decorators: [{
             type: Component,
@@ -1693,6 +1728,17 @@ class DynamicRecursiveFormComponent {
         if (!present && this.presenceFocusKey === key)
             this.presenceFocusKey = null;
     }
+    /**
+     * Materialize an absent presence (optional / `advisoryRequired`) list *with
+     * its first entry* — clicking "Add <list>" makes the first entry appear at
+     * once. An optional list has no present-empty state: removing the last entry
+     * de-materializes it (→ absent). A required list is always present instead and
+     * uses the renderer's own "Add item" affordance, so it never routes here.
+     */
+    addPresenceList(key, schema) {
+        setNodePresence(this.formGroup(), schema, key, true, [null]);
+        this.ghostControls.delete(key);
+    }
     objectKeys(obj) {
         return Object.keys(obj);
     }
@@ -1737,7 +1783,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 }, showAbsentOptionals: { classPropertyName: "showAbsentOptionals", publicName: "showAbsentOptionals", isSignal: true, isRequired: false, transformFunction: null }, addButtonCallback: { classPropertyName: "addButtonCallback", publicName: "addButtonCallback", isSignal: true, isRequired: false, transformFunction: null }, addButtonLabel: { classPropertyName: "addButtonLabel", publicName: "addButtonLabel", 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          @if (showAbsentOptionals()) {\n            <!-- Ghost preview of an absent boolean: unchecked, display-only,\n                 no control in the form; (+) incorporates it. -->\n            <div class=\"ghost-field\">\n              <nff-leaf-renderer\n                [leaf_]=child\n                [control]=\"ghostControl(childItem.key)\"\n                [removable]=false\n                [editable]=false\n              />\n              <button\n                matIconButton\n                class=\"ghost-add small-icon-button\"\n                [matTooltip]=\"'Add ' + (child.label ?? child.name)\"\n                [attr.aria-label]=\"'Add ' + (child.label ?? child.name)\"\n                (click)=\"toggleLeafPresence(childItem.key, child, true)\"\n              >\n                <mat-icon>add</mat-icon>\n              </button>\n            </div>\n          } @else {\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    }\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          @if (showAbsentOptionals()) {\n            <!-- Ghost preview: the field itself, read-only against a detached\n                 null control (never part of the form value), default as\n                 placeholder; (+) incorporates it. -->\n            <div class=\"ghost-field\">\n              <nff-leaf-renderer\n                [leaf_]=child\n                [control]=\"ghostControl(childItem.key)\"\n                [removable]=false\n                [editable]=false\n                [placeholder]=\"ghostPlaceholder(child)\"\n              />\n              <button\n                matIconButton\n                class=\"ghost-add small-icon-button\"\n                [matTooltip]=\"'Add ' + (child.label ?? child.name)\"\n                [attr.aria-label]=\"'Add ' + (child.label ?? child.name)\"\n                (click)=\"toggleLeafPresence(childItem.key, child, true)\"\n              >\n                <mat-icon>add</mat-icon>\n              </button>\n            </div>\n          } @else {\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    }\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()\" [showAbsentOptionals]=\"showAbsentOptionals()\"\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()\" [showAbsentOptionals]=\"showAbsentOptionals()\"\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()\" [showAbsentOptionals]=\"showAbsentOptionals()\"\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()\" [showAbsentOptionals]=\"showAbsentOptionals()\"\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()\" [showAbsentOptionals]=\"showAbsentOptionals()\"\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]=\"addButtonLabel() ?? 'Add new ' + (schema().label ?? schema().name)\" [attr.aria-label]=\"addButtonLabel() ?? '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]=\"addButtonLabel() ?? 'Add new ' + (schema().label ?? schema().name)\" [attr.aria-label]=\"addButtonLabel() ?? '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()\" [showAbsentOptionals]=\"showAbsentOptionals()\"\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()\" [showAbsentOptionals]=\"showAbsentOptionals()\"\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()\" [showAbsentOptionals]=\"showAbsentOptionals()\"\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()\" [showAbsentOptionals]=\"showAbsentOptionals()\"\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()\" [showAbsentOptionals]=\"showAbsentOptionals()\"\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%}.presence-leaf-add{flex:1 1 0;min-width:10%;align-self:flex-start;margin-top:8px;margin-bottom:20px;opacity:.6;transition:opacity .12s ease}.presence-leaf-add:hover,.presence-leaf-add:focus-visible{opacity:1}.ghost-field{display:flex;flex:1 1 0;min-width:10%;gap:8px}.ghost-field nff-leaf-renderer{opacity:.55}.ghost-field .ghost-add{flex:0 0 auto;align-self:flex-start;margin-top:4px;background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.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{flex:0 0 auto;min-width:0;margin-top:0;margin-bottom:0;align-self:center}.boolean-fields .ghost-field{flex:0 0 auto;min-width:0;align-items:center}.boolean-fields .ghost-field .ghost-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%;gap:8px}.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}.ghost-add{flex-shrink:0;transition:opacity .15s ease,max-width .15s ease,margin-left .15s ease,transform .15s ease}@media (prefers-reduced-motion: reduce){.ghost-add{transition:none}}@media (hover: hover){.ghost-field .ghost-add{max-width:0;margin-left:-8px;opacity:0;transform:translate(8px);overflow:hidden;pointer-events:none}.ghost-field:hover .ghost-add,.ghost-field:focus-within .ghost-add{max-width:48px;margin-left:0;opacity:1;transform:none;overflow:visible;pointer-events:auto}}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => DynamicRecursiveFormComponent), selector: "nff-dynamic-recursive-form", inputs: ["schema", "initialValue", "formGroup", "index", "removable", "title", "editable", "showAbsentOptionals", "addButtonCallback", "addButtonLabel", "focusLeaf", "inheritedAppearance"], outputs: ["remove", "editableChange"] }, { kind: "component", type: i0.forwardRef(() => LeafRendererComponent), selector: "nff-leaf-renderer", inputs: ["leaf_", "control", "removable", "editable", "autofocus", "placeholder"], outputs: ["remove"] }, { kind: "component", type: i0.forwardRef(() => LeafListRendererComponent), selector: "nff-leaf-list-renderer", inputs: ["leaf_", "initialValue", "formArray", "editable", "minItems", "maxItems", "layout"], outputs: ["message"] }, { kind: "component", type: i0.forwardRef(() => NodeGroupListRendererComponent), selector: "nff-node-group-list-renderer", inputs: ["nodeGroupList", "initialValue", "formArray", "editable", "showAbsentOptionals", "minItems", "maxItems", "inheritedAppearance"], outputs: ["message"] }, { kind: "component", type: i0.forwardRef(() => NodeMapRendererComponent), selector: "nff-node-map-renderer", inputs: ["nodeMap", "formGroup", "editable", "showAbsentOptionals", "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$3.MatExpansionPanel), selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i0.forwardRef(() => i2$3.MatExpansionPanelHeader), selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i0.forwardRef(() => i2$3.MatExpansionPanelTitle), selector: "mat-panel-title" }, { kind: "directive", type: i0.forwardRef(() => i2$3.MatExpansionPanelDescription), selector: "mat-panel-description" }, { kind: "ngmodule", type: i0.forwardRef(() => MatIconModule) }, { kind: "component", type: i0.forwardRef(() => i2$1.MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatButtonModule) }, { kind: "component", type: i0.forwardRef(() => i2$2.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$2.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 }, showAbsentOptionals: { classPropertyName: "showAbsentOptionals", publicName: "showAbsentOptionals", isSignal: true, isRequired: false, transformFunction: null }, addButtonCallback: { classPropertyName: "addButtonCallback", publicName: "addButtonCallback", isSignal: true, isRequired: false, transformFunction: null }, addButtonLabel: { classPropertyName: "addButtonLabel", publicName: "addButtonLabel", 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          @if (showAbsentOptionals()) {\n            <!-- Ghost preview of an absent boolean: unchecked, display-only,\n                 no control in the form; (+) incorporates it. -->\n            <div class=\"ghost-field\">\n              <nff-leaf-renderer\n                [leaf_]=child\n                [control]=\"ghostControl(childItem.key)\"\n                [removable]=false\n                [editable]=false\n              />\n              <button\n                matIconButton\n                class=\"ghost-add small-icon-button\"\n                [matTooltip]=\"'Add ' + (child.label ?? child.name)\"\n                [attr.aria-label]=\"'Add ' + (child.label ?? child.name)\"\n                (click)=\"toggleLeafPresence(childItem.key, child, true)\"\n              >\n                <mat-icon>add</mat-icon>\n              </button>\n            </div>\n          } @else {\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    }\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' && !child.presence) {\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      @else if (child.kind == 'leafList' && child.presence) {\n        <!-- Optional (advisoryRequired) list: an \"Add <list>\" button while\n             absent; clicking it materializes the list with its first entry (no\n             empty state). Removing the last entry de-materializes it (the\n             renderer's `removeList` \u2192 absent). -->\n        @let leafListArray = asFormArray(formGroup().get(childItem.key));\n        @if (leafListArray) {\n          <div class=\"presence-list\">\n            <nff-leaf-list-renderer\n              [layout]=\"gridHasCols() ? fieldsLayout() : null\"\n              [leaf_]=\"child\"\n              [editable]=\"editable()\"\n              [formArray]=\"leafListArray\"\n              (removeList)=\"toggleNodePresence(childItem.key, child, false)\"\n            />\n          </div>\n        } @else if (editable()) {\n          <button\n            matButton=\"outlined\"\n            class=\"presence-list-add\"\n            (click)=\"addPresenceList(childItem.key, child)\"\n          >\n            <mat-icon>add</mat-icon> Add {{ child.label ?? child.name }}\n          </button>\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          @if (showAbsentOptionals()) {\n            <!-- Ghost preview: the field itself, read-only against a detached\n                 null control (never part of the form value), default as\n                 placeholder; (+) incorporates it. -->\n            <div class=\"ghost-field\">\n              <nff-leaf-renderer\n                [leaf_]=child\n                [control]=\"ghostControl(childItem.key)\"\n                [removable]=false\n                [editable]=false\n                [placeholder]=\"ghostPlaceholder(child)\"\n              />\n              <button\n                matIconButton\n                class=\"ghost-add small-icon-button\"\n                [matTooltip]=\"'Add ' + (child.label ?? child.name)\"\n                [attr.aria-label]=\"'Add ' + (child.label ?? child.name)\"\n                (click)=\"toggleLeafPresence(childItem.key, child, true)\"\n              >\n                <mat-icon>add</mat-icon>\n              </button>\n            </div>\n          } @else {\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    }\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()\" [showAbsentOptionals]=\"showAbsentOptionals()\"\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()\" [showAbsentOptionals]=\"showAbsentOptionals()\"\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()\" [showAbsentOptionals]=\"showAbsentOptionals()\"\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' && !child.presence) {\n          <nff-node-group-list-renderer\n            [inheritedAppearance]=\"childAppearance()\" [showAbsentOptionals]=\"showAbsentOptionals()\"\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 == 'nodeGroupList' && child.presence) {\n          <!-- Optional (advisoryRequired) list: an \"Add <list>\" button while\n               absent; clicking it materializes the list with its first entry.\n               Removing the last entry de-materializes it (`removeList` \u2192 absent). -->\n          @let presenceListArray = asFormArray(formGroup().get(childItem.key));\n          @if (presenceListArray) {\n            <div class=\"presence-list\">\n              <nff-node-group-list-renderer\n                [inheritedAppearance]=\"childAppearance()\" [showAbsentOptionals]=\"showAbsentOptionals()\"\n                [nodeGroupList]=\"child\"\n                [formArray]=\"presenceListArray\"\n                [editable]=\"editable()\"\n                (removeList)=\"toggleNodePresence(childItem.key, child, false)\"\n              />\n            </div>\n          } @else if (editable()) {\n            <button\n              matButton=\"outlined\"\n              class=\"presence-list-add\"\n              (click)=\"addPresenceList(childItem.key, child)\"\n            >\n              <mat-icon>add</mat-icon> Add {{ child.label ?? child.name }}\n            </button>\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()\" [showAbsentOptionals]=\"showAbsentOptionals()\"\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]=\"addButtonLabel() ?? 'Add new ' + (schema().label ?? schema().name)\" [attr.aria-label]=\"addButtonLabel() ?? '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]=\"addButtonLabel() ?? 'Add new ' + (schema().label ?? schema().name)\" [attr.aria-label]=\"addButtonLabel() ?? '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()\" [showAbsentOptionals]=\"showAbsentOptionals()\"\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()\" [showAbsentOptionals]=\"showAbsentOptionals()\"\n              [nodeMap]=\"child\"\n              [formGroup]=\"mapGroup\"\n              [editable]=\"editable()\"\n            />\n          }\n        </mat-expansion-panel>\n      }\n      @else if (child.kind == 'nodeGroupList' && !child.presence) {\n        <!-- A nodeGroupList has no `appearance` of its own, so its section is\n             always shown; only an ancestor's collapse hides it. -->\n        <mat-expansion-panel class=\"node-section\" [expanded]=\"true\" togglePosition=\"before\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>{{ child.label ?? child.name }}</mat-panel-title>\n          </mat-expansion-panel-header>\n          <nff-node-group-list-renderer\n            [inheritedAppearance]=\"childAppearance()\" [showAbsentOptionals]=\"showAbsentOptionals()\"\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 == 'nodeGroupList' && child.presence) {\n        <!-- Optional (advisoryRequired) list: an \"Add <list>\" button while\n             absent; clicking it materializes the list with its first entry.\n             Removing the last entry de-materializes it (`removeList` \u2192 absent). -->\n        @let rootListArray = asFormArray(formGroup().get(childItem.key));\n        @if (rootListArray) {\n          <div class=\"presence-list\">\n            <nff-node-group-list-renderer\n              [inheritedAppearance]=\"childAppearance()\" [showAbsentOptionals]=\"showAbsentOptionals()\"\n              [nodeGroupList]=\"child\"\n              [formArray]=\"rootListArray\"\n              [editable]=\"editable()\"\n              (removeList)=\"toggleNodePresence(childItem.key, child, false)\"\n            />\n          </div>\n        } @else if (editable()) {\n          <button\n            matButton=\"outlined\"\n            class=\"presence-list-add\"\n            (click)=\"addPresenceList(childItem.key, child)\"\n          >\n            <mat-icon>add</mat-icon> Add {{ child.label ?? child.name }}\n          </button>\n        }\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()\" [showAbsentOptionals]=\"showAbsentOptionals()\"\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()\" [showAbsentOptionals]=\"showAbsentOptionals()\"\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%}.presence-leaf-add{flex:1 1 0;min-width:10%;align-self:flex-start;margin-top:8px;margin-bottom:20px;opacity:.6;transition:opacity .12s ease}.presence-leaf-add:hover,.presence-leaf-add:focus-visible{opacity:1}.presence-list-add{width:100%;flex-shrink:0;margin:8px 0;opacity:.6;transition:opacity .12s ease}.presence-list-add:hover,.presence-list-add:focus-visible{opacity:1}.presence-list{flex:1 1 100%;width:100%}.ghost-field{display:flex;flex:1 1 0;min-width:10%;gap:8px}.ghost-field nff-leaf-renderer{opacity:.55}.ghost-field .ghost-add{flex:0 0 auto;align-self:flex-start;margin-top:4px;background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.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-cols nff-leaf-list-renderer.stacked,.fields.grid-cols .presence-list,.fields.grid-cols .presence-list-add{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{flex:0 0 auto;min-width:0;margin-top:0;margin-bottom:0;align-self:center}.boolean-fields .ghost-field{flex:0 0 auto;min-width:0;align-items:center}.boolean-fields .ghost-field .ghost-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%;gap:8px}.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;opacity:.45;transition:opacity .12s ease}.add-button:hover,.add-button:focus-visible{opacity:1}.remove-button{background-color:var(--mat-sys-error-container);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f;opacity:.45;transition:opacity .12s ease}.remove-button:hover,.remove-button:focus-visible{opacity:1}.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}.ghost-add{flex-shrink:0;transition:opacity .15s ease,max-width .15s ease,margin-left .15s ease,transform .15s ease}@media (prefers-reduced-motion: reduce){.ghost-add{transition:none}}@media (hover: hover){.ghost-field .ghost-add{max-width:0;margin-left:-8px;opacity:0;transform:translate(8px);overflow:hidden;pointer-events:none}.ghost-field:hover .ghost-add,.ghost-field:focus-within .ghost-add{max-width:48px;margin-left:0;opacity:1;transform:none;overflow:visible;pointer-events:auto}}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => DynamicRecursiveFormComponent), selector: "nff-dynamic-recursive-form", inputs: ["schema", "initialValue", "formGroup", "index", "removable", "title", "editable", "showAbsentOptionals", "addButtonCallback", "addButtonLabel", "focusLeaf", "inheritedAppearance"], outputs: ["remove", "editableChange"] }, { kind: "component", type: i0.forwardRef(() => LeafRendererComponent), selector: "nff-leaf-renderer", inputs: ["leaf_", "control", "removable", "editable", "autofocus", "placeholder"], outputs: ["remove"] }, { kind: "component", type: i0.forwardRef(() => LeafListRendererComponent), selector: "nff-leaf-list-renderer", inputs: ["leaf_", "initialValue", "formArray", "editable", "minItems", "maxItems", "layout"], outputs: ["message", "removeList"] }, { kind: "component", type: i0.forwardRef(() => NodeGroupListRendererComponent), selector: "nff-node-group-list-renderer", inputs: ["nodeGroupList", "initialValue", "formArray", "editable", "showAbsentOptionals", "minItems", "maxItems", "inheritedAppearance"], outputs: ["message", "removeList"] }, { kind: "component", type: i0.forwardRef(() => NodeMapRendererComponent), selector: "nff-node-map-renderer", inputs: ["nodeMap", "formGroup", "editable", "showAbsentOptionals", "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$3.MatExpansionPanel), selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i0.forwardRef(() => i2$3.MatExpansionPanelHeader), selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i0.forwardRef(() => i2$3.MatExpansionPanelTitle), selector: "mat-panel-title" }, { kind: "directive", type: i0.forwardRef(() => i2$3.MatExpansionPanelDescription), selector: "mat-panel-description" }, { kind: "ngmodule", type: i0.forwardRef(() => MatIconModule) }, { kind: "component", type: i0.forwardRef(() => i2$1.MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatButtonModule) }, { kind: "component", type: i0.forwardRef(() => i2$2.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$2.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,
@@ -1758,7 +1804,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         MatFormFieldModule,
                         MatSelectModule,
                         MatTooltip,
-                    ], 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          @if (showAbsentOptionals()) {\n            <!-- Ghost preview of an absent boolean: unchecked, display-only,\n                 no control in the form; (+) incorporates it. -->\n            <div class=\"ghost-field\">\n              <nff-leaf-renderer\n                [leaf_]=child\n                [control]=\"ghostControl(childItem.key)\"\n                [removable]=false\n                [editable]=false\n              />\n              <button\n                matIconButton\n                class=\"ghost-add small-icon-button\"\n                [matTooltip]=\"'Add ' + (child.label ?? child.name)\"\n                [attr.aria-label]=\"'Add ' + (child.label ?? child.name)\"\n                (click)=\"toggleLeafPresence(childItem.key, child, true)\"\n              >\n                <mat-icon>add</mat-icon>\n              </button>\n            </div>\n          } @else {\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    }\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          @if (showAbsentOptionals()) {\n            <!-- Ghost preview: the field itself, read-only against a detached\n                 null control (never part of the form value), default as\n                 placeholder; (+) incorporates it. -->\n            <div class=\"ghost-field\">\n              <nff-leaf-renderer\n                [leaf_]=child\n                [control]=\"ghostControl(childItem.key)\"\n                [removable]=false\n                [editable]=false\n                [placeholder]=\"ghostPlaceholder(child)\"\n              />\n              <button\n                matIconButton\n                class=\"ghost-add small-icon-button\"\n                [matTooltip]=\"'Add ' + (child.label ?? child.name)\"\n                [attr.aria-label]=\"'Add ' + (child.label ?? child.name)\"\n                (click)=\"toggleLeafPresence(childItem.key, child, true)\"\n              >\n                <mat-icon>add</mat-icon>\n              </button>\n            </div>\n          } @else {\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    }\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()\" [showAbsentOptionals]=\"showAbsentOptionals()\"\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()\" [showAbsentOptionals]=\"showAbsentOptionals()\"\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()\" [showAbsentOptionals]=\"showAbsentOptionals()\"\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()\" [showAbsentOptionals]=\"showAbsentOptionals()\"\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()\" [showAbsentOptionals]=\"showAbsentOptionals()\"\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]=\"addButtonLabel() ?? 'Add new ' + (schema().label ?? schema().name)\" [attr.aria-label]=\"addButtonLabel() ?? '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]=\"addButtonLabel() ?? 'Add new ' + (schema().label ?? schema().name)\" [attr.aria-label]=\"addButtonLabel() ?? '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()\" [showAbsentOptionals]=\"showAbsentOptionals()\"\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()\" [showAbsentOptionals]=\"showAbsentOptionals()\"\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()\" [showAbsentOptionals]=\"showAbsentOptionals()\"\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()\" [showAbsentOptionals]=\"showAbsentOptionals()\"\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()\" [showAbsentOptionals]=\"showAbsentOptionals()\"\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%}.presence-leaf-add{flex:1 1 0;min-width:10%;align-self:flex-start;margin-top:8px;margin-bottom:20px;opacity:.6;transition:opacity .12s ease}.presence-leaf-add:hover,.presence-leaf-add:focus-visible{opacity:1}.ghost-field{display:flex;flex:1 1 0;min-width:10%;gap:8px}.ghost-field nff-leaf-renderer{opacity:.55}.ghost-field .ghost-add{flex:0 0 auto;align-self:flex-start;margin-top:4px;background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.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{flex:0 0 auto;min-width:0;margin-top:0;margin-bottom:0;align-self:center}.boolean-fields .ghost-field{flex:0 0 auto;min-width:0;align-items:center}.boolean-fields .ghost-field .ghost-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%;gap:8px}.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}.ghost-add{flex-shrink:0;transition:opacity .15s ease,max-width .15s ease,margin-left .15s ease,transform .15s ease}@media (prefers-reduced-motion: reduce){.ghost-add{transition:none}}@media (hover: hover){.ghost-field .ghost-add{max-width:0;margin-left:-8px;opacity:0;transform:translate(8px);overflow:hidden;pointer-events:none}.ghost-field:hover .ghost-add,.ghost-field:focus-within .ghost-add{max-width:48px;margin-left:0;opacity:1;transform:none;overflow:visible;pointer-events:auto}}\n"] }]
+                    ], 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          @if (showAbsentOptionals()) {\n            <!-- Ghost preview of an absent boolean: unchecked, display-only,\n                 no control in the form; (+) incorporates it. -->\n            <div class=\"ghost-field\">\n              <nff-leaf-renderer\n                [leaf_]=child\n                [control]=\"ghostControl(childItem.key)\"\n                [removable]=false\n                [editable]=false\n              />\n              <button\n                matIconButton\n                class=\"ghost-add small-icon-button\"\n                [matTooltip]=\"'Add ' + (child.label ?? child.name)\"\n                [attr.aria-label]=\"'Add ' + (child.label ?? child.name)\"\n                (click)=\"toggleLeafPresence(childItem.key, child, true)\"\n              >\n                <mat-icon>add</mat-icon>\n              </button>\n            </div>\n          } @else {\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    }\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' && !child.presence) {\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      @else if (child.kind == 'leafList' && child.presence) {\n        <!-- Optional (advisoryRequired) list: an \"Add <list>\" button while\n             absent; clicking it materializes the list with its first entry (no\n             empty state). Removing the last entry de-materializes it (the\n             renderer's `removeList` \u2192 absent). -->\n        @let leafListArray = asFormArray(formGroup().get(childItem.key));\n        @if (leafListArray) {\n          <div class=\"presence-list\">\n            <nff-leaf-list-renderer\n              [layout]=\"gridHasCols() ? fieldsLayout() : null\"\n              [leaf_]=\"child\"\n              [editable]=\"editable()\"\n              [formArray]=\"leafListArray\"\n              (removeList)=\"toggleNodePresence(childItem.key, child, false)\"\n            />\n          </div>\n        } @else if (editable()) {\n          <button\n            matButton=\"outlined\"\n            class=\"presence-list-add\"\n            (click)=\"addPresenceList(childItem.key, child)\"\n          >\n            <mat-icon>add</mat-icon> Add {{ child.label ?? child.name }}\n          </button>\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          @if (showAbsentOptionals()) {\n            <!-- Ghost preview: the field itself, read-only against a detached\n                 null control (never part of the form value), default as\n                 placeholder; (+) incorporates it. -->\n            <div class=\"ghost-field\">\n              <nff-leaf-renderer\n                [leaf_]=child\n                [control]=\"ghostControl(childItem.key)\"\n                [removable]=false\n                [editable]=false\n                [placeholder]=\"ghostPlaceholder(child)\"\n              />\n              <button\n                matIconButton\n                class=\"ghost-add small-icon-button\"\n                [matTooltip]=\"'Add ' + (child.label ?? child.name)\"\n                [attr.aria-label]=\"'Add ' + (child.label ?? child.name)\"\n                (click)=\"toggleLeafPresence(childItem.key, child, true)\"\n              >\n                <mat-icon>add</mat-icon>\n              </button>\n            </div>\n          } @else {\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    }\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()\" [showAbsentOptionals]=\"showAbsentOptionals()\"\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()\" [showAbsentOptionals]=\"showAbsentOptionals()\"\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()\" [showAbsentOptionals]=\"showAbsentOptionals()\"\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' && !child.presence) {\n          <nff-node-group-list-renderer\n            [inheritedAppearance]=\"childAppearance()\" [showAbsentOptionals]=\"showAbsentOptionals()\"\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 == 'nodeGroupList' && child.presence) {\n          <!-- Optional (advisoryRequired) list: an \"Add <list>\" button while\n               absent; clicking it materializes the list with its first entry.\n               Removing the last entry de-materializes it (`removeList` \u2192 absent). -->\n          @let presenceListArray = asFormArray(formGroup().get(childItem.key));\n          @if (presenceListArray) {\n            <div class=\"presence-list\">\n              <nff-node-group-list-renderer\n                [inheritedAppearance]=\"childAppearance()\" [showAbsentOptionals]=\"showAbsentOptionals()\"\n                [nodeGroupList]=\"child\"\n                [formArray]=\"presenceListArray\"\n                [editable]=\"editable()\"\n                (removeList)=\"toggleNodePresence(childItem.key, child, false)\"\n              />\n            </div>\n          } @else if (editable()) {\n            <button\n              matButton=\"outlined\"\n              class=\"presence-list-add\"\n              (click)=\"addPresenceList(childItem.key, child)\"\n            >\n              <mat-icon>add</mat-icon> Add {{ child.label ?? child.name }}\n            </button>\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()\" [showAbsentOptionals]=\"showAbsentOptionals()\"\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]=\"addButtonLabel() ?? 'Add new ' + (schema().label ?? schema().name)\" [attr.aria-label]=\"addButtonLabel() ?? '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]=\"addButtonLabel() ?? 'Add new ' + (schema().label ?? schema().name)\" [attr.aria-label]=\"addButtonLabel() ?? '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()\" [showAbsentOptionals]=\"showAbsentOptionals()\"\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()\" [showAbsentOptionals]=\"showAbsentOptionals()\"\n              [nodeMap]=\"child\"\n              [formGroup]=\"mapGroup\"\n              [editable]=\"editable()\"\n            />\n          }\n        </mat-expansion-panel>\n      }\n      @else if (child.kind == 'nodeGroupList' && !child.presence) {\n        <!-- A nodeGroupList has no `appearance` of its own, so its section is\n             always shown; only an ancestor's collapse hides it. -->\n        <mat-expansion-panel class=\"node-section\" [expanded]=\"true\" togglePosition=\"before\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>{{ child.label ?? child.name }}</mat-panel-title>\n          </mat-expansion-panel-header>\n          <nff-node-group-list-renderer\n            [inheritedAppearance]=\"childAppearance()\" [showAbsentOptionals]=\"showAbsentOptionals()\"\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 == 'nodeGroupList' && child.presence) {\n        <!-- Optional (advisoryRequired) list: an \"Add <list>\" button while\n             absent; clicking it materializes the list with its first entry.\n             Removing the last entry de-materializes it (`removeList` \u2192 absent). -->\n        @let rootListArray = asFormArray(formGroup().get(childItem.key));\n        @if (rootListArray) {\n          <div class=\"presence-list\">\n            <nff-node-group-list-renderer\n              [inheritedAppearance]=\"childAppearance()\" [showAbsentOptionals]=\"showAbsentOptionals()\"\n              [nodeGroupList]=\"child\"\n              [formArray]=\"rootListArray\"\n              [editable]=\"editable()\"\n              (removeList)=\"toggleNodePresence(childItem.key, child, false)\"\n            />\n          </div>\n        } @else if (editable()) {\n          <button\n            matButton=\"outlined\"\n            class=\"presence-list-add\"\n            (click)=\"addPresenceList(childItem.key, child)\"\n          >\n            <mat-icon>add</mat-icon> Add {{ child.label ?? child.name }}\n          </button>\n        }\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()\" [showAbsentOptionals]=\"showAbsentOptionals()\"\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()\" [showAbsentOptionals]=\"showAbsentOptionals()\"\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%}.presence-leaf-add{flex:1 1 0;min-width:10%;align-self:flex-start;margin-top:8px;margin-bottom:20px;opacity:.6;transition:opacity .12s ease}.presence-leaf-add:hover,.presence-leaf-add:focus-visible{opacity:1}.presence-list-add{width:100%;flex-shrink:0;margin:8px 0;opacity:.6;transition:opacity .12s ease}.presence-list-add:hover,.presence-list-add:focus-visible{opacity:1}.presence-list{flex:1 1 100%;width:100%}.ghost-field{display:flex;flex:1 1 0;min-width:10%;gap:8px}.ghost-field nff-leaf-renderer{opacity:.55}.ghost-field .ghost-add{flex:0 0 auto;align-self:flex-start;margin-top:4px;background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.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-cols nff-leaf-list-renderer.stacked,.fields.grid-cols .presence-list,.fields.grid-cols .presence-list-add{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{flex:0 0 auto;min-width:0;margin-top:0;margin-bottom:0;align-self:center}.boolean-fields .ghost-field{flex:0 0 auto;min-width:0;align-items:center}.boolean-fields .ghost-field .ghost-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%;gap:8px}.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;opacity:.45;transition:opacity .12s ease}.add-button:hover,.add-button:focus-visible{opacity:1}.remove-button{background-color:var(--mat-sys-error-container);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f;opacity:.45;transition:opacity .12s ease}.remove-button:hover,.remove-button:focus-visible{opacity:1}.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}.ghost-add{flex-shrink:0;transition:opacity .15s ease,max-width .15s ease,margin-left .15s ease,transform .15s ease}@media (prefers-reduced-motion: reduce){.ghost-add{transition:none}}@media (hover: hover){.ghost-field .ghost-add{max-width:0;margin-left:-8px;opacity:0;transform:translate(8px);overflow:hidden;pointer-events:none}.ghost-field:hover .ghost-add,.ghost-field:focus-within .ghost-add{max-width:48px;margin-left:0;opacity:1;transform:none;overflow:visible;pointer-events:auto}}\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"] }], showAbsentOptionals: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAbsentOptionals", required: false }] }], addButtonCallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "addButtonCallback", required: false }] }], addButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "addButtonLabel", required: false }] }], focusLeaf: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusLeaf", required: false }] }], inheritedAppearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "inheritedAppearance", required: false }] }] } });
 
 /**
@@ -1872,17 +1918,26 @@ class ConfigEditorComponent {
         });
     }
     /**
-     * Force the editor to re-read the bound form. Call this when the form was
-     * mutated in a way the editor's own `valueChanges` subscription could not
-     * observe — a structural change made with `{ emitEvent: false }`, or a
-     * mutation while a detached change detector left the view unchecked. It
-     * re-syncs the tree structure, rebuilds the current selection's sections
-     * from the live controls, and renders them.
+     * Force the editor to re-read the bound form. A leaf field normally reflects
+     * an external `setValue` on its own — the reactive value accessor writes the
+     * value synchronously, no change detection needed — so this is only for the
+     * corners that bypass that: a structural change made with
+     * `{ emitEvent: false }` (the tree wouldn't otherwise rebuild), a non-reactive
+     * display (the case selector, a map key) that needs re-reading, or a host
+     * whose change detector was detached during the mutation.
+     *
+     * It re-syncs the tree structure and **tears down and recreates** the detail
+     * sections, so every rendered control rebinds to the live form and re-pulls
+     * its current value — even a field whose bound input somehow missed the
+     * external write.
      */
     refresh() {
         this.syncShape(); // structural changes (added/removed/renamed controls)
-        if (this.selected)
-            this.select(this.selected, false); // value re-read
+        const selected = this.selected;
+        this.sections = []; // tear the embedded detail forms down…
+        this.cdr.detectChanges();
+        if (selected)
+            this.select(selected, false); // …and rebuild them, fresh-bound
         this.cdr.detectChanges();
     }
     select(node, reveal = true) {
@@ -2380,10 +2435,10 @@ class ConfigEditorComponent {
         if (node.choice) {
             const active = this.activeCase(node);
             const body = active && node.choice.schema.cases[active] ? this.caseAsGroup(node.choice.schema, active) : null;
-            return { schema: body ? this.leafOnly(body) : null, group: node.choice.group };
+            return { schema: body ? this.leafOnly(body, node.choice.group) : null, group: node.choice.group };
         }
         if (node.schema && node.group) {
-            return { schema: this.leafOnly(node.schema), group: node.group };
+            return { schema: this.leafOnly(node.schema, node.group), group: node.group };
         }
         return { schema: null, group: null };
     }
@@ -2394,12 +2449,17 @@ class ConfigEditorComponent {
      * (grid / field-width layout) carries into the slice. Null when there are
      * no own fields.
      */
-    leafOnly(schema) {
+    leafOnly(schema, group) {
         const children = {};
         for (const key of Object.keys(schema.children)) {
             const child = schema.children[key];
-            if (child.kind === 'leaf' || child.kind === 'leafList')
-                children[key] = child;
+            if (child.kind !== 'leaf' && child.kind !== 'leafList')
+                continue;
+            // An absent presence leafList has no inline affordance and no control to
+            // render — it is offered by the "+ Optional field" menu instead.
+            if (child.kind === 'leafList' && child.presence && !group?.get(key))
+                continue;
+            children[key] = child;
         }
         if (!Object.keys(children).length)
             return null;
@@ -2414,14 +2474,15 @@ class ConfigEditorComponent {
             const child = schema.children[key];
             if (child.kind === 'leaf' || child.kind === 'leafList') {
                 // Leaves render in the detail pane; an absent presence leaf is also
-                // offered by the "+ Optional field" menu, so it can be added from the
-                // tree row as well as inline.
-                if (child.kind === 'leaf' && child.presence && !group.get(key)) {
+                // offered by the "+ Optional field" menu (addable inline or from the
+                // tree row). An absent presence *leafList* has no inline affordance, so
+                // it is offered only by the menu (and excluded from the leafOnly slice).
+                if (child.presence && !group.get(key)) {
                     optionals.push({ key, schema: child, label: this.labelOf(child, key) });
                 }
                 continue;
             }
-            const presence = child.kind !== 'nodeGroupList' && child.presence;
+            const presence = !!child.presence;
             if (presence && !group.get(key)) {
                 optionals.push({ key, schema: child, label: this.labelOf(child, key) });
                 continue;