ng-form-foundry 0.0.1 → 0.2.1

package/fesm2022/ng-form-foundry.mjs

@@ -0,0 +1,822 @@
+import * as i1 from '@angular/forms';
+import { Validators, FormControl, FormArray, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import * as i0 from '@angular/core';
+import { Input, Component, EventEmitter, Output, inject, ChangeDetectorRef, forwardRef, ViewChildren, HostBinding } from '@angular/core';
+import * as i2 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i3$1 from '@angular/material/input';
+import { MatInputModule, MatPrefix } from '@angular/material/input';
+import * as i4 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i3 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i1$1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i3$2 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import { MatTooltipModule, MatTooltip } from '@angular/material/tooltip';
+import { MatDialog } from '@angular/material/dialog';
+import * as i2$1 from '@angular/material/expansion';
+import { MatExpansionModule } from '@angular/material/expansion';
+import * as i5 from '@angular/material/card';
+import { MatCardModule } from '@angular/material/card';
+import { NgTemplateOutlet } from '@angular/common';
+
+/** The control name that records which case of a {@link NodeChoice} is active. */
+const CASE_KEY = '__case';
+
+// --- type guards
+function isLeaf(node) {
+    return node.kind === 'leaf';
+}
+function isLeafList(node) {
+    return node.kind === 'leafList';
+}
+function isNodeGroup(node) {
+    return node.kind === 'nodeGroup';
+}
+function isNodeGroupList(node) {
+    return node.kind === 'nodeGroupList';
+}
+function isChoice(node) {
+    return node.kind === 'choice';
+}
+function enumValidator(choices) {
+    const set = new Set(choices);
+    return (ctrl) => ctrl.value == null || set.has(ctrl.value) ? null : { enum: true };
+}
+function buildLeafControl(leaf, initial) {
+    const validators = [];
+    if ('required' in leaf && leaf.required)
+        validators.push(Validators.required);
+    if ('type' in leaf && leaf.type === 'enum') {
+        const choices = leaf.enum;
+        validators.push(enumValidator(choices));
+    }
+    const defaultValue = initial ?? ('default' in leaf ? leaf.default : undefined) ?? null;
+    return new FormControl(defaultValue, {
+        nonNullable: true,
+        validators,
+    });
+}
+function buildLeafListControl(list, initial) {
+    const values = (Array.isArray(initial) ? initial : undefined) ??
+        list.default ?? [null];
+    return new FormArray(values.map((v) => new FormControl(v)));
+}
+function buildNodeGroupControl(group, initial) {
+    const controls = {};
+    for (const key in group.children) {
+        const child = group.children[key];
+        // Forward only this child's slice of the initial data, keyed by the child's
+        // record key. Passing the whole `initial` object seeds every leaf with the
+        // parent record and prevents list builders from sizing to the real data.
+        controls[key] = buildControl(child, initial?.[key]);
+    }
+    return new FormGroup(controls);
+}
+function buildNodeGroupListControl(list, initial = null) {
+    // `initial` is the runtime data array — one group per element. Fall back to a
+    // single empty group only when no initial data is supplied.
+    const values = Array.isArray(initial) ? initial : [null];
+    return new FormArray(values.map((v) => buildNodeGroupControl(list.type, v)));
+}
+/**
+ * Build the `AbstractControl` for a single schema node.
+ *
+ * Dispatches on `node.kind`: a `leaf` becomes a `FormControl`, a `leafList` a
+ * `FormArray` of controls, a `nodeGroup` a nested `FormGroup`, and a
+ * `nodeGroupList` a `FormArray` of groups. `initial` is the runtime value for
+ * this node — a scalar for a leaf, an array for a list, an object for a group —
+ * and seeds the control's value (falling back to the node's `default`).
+ *
+ * Most callers use {@link buildFormFromSchema}; this is exposed for building a
+ * control from a single non-root node.
+ */
+/**
+ * Build the FormGroup for a choice: a `__case` control holding the active case
+ * name plus that case's field controls. Only the active case's fields are built,
+ * matching the inline YANG encoding; switching the case swaps them.
+ */
+function buildChoiceControl(choice, initial) {
+    const active = initial?.[CASE_KEY] ?? choice.default;
+    const controls = { [CASE_KEY]: new FormControl(active ?? null) };
+    if (active && choice.cases[active]) {
+        const caseChildren = choice.cases[active];
+        for (const key in caseChildren) {
+            controls[key] = buildControl(caseChildren[key], initial?.[key]);
+        }
+    }
+    return new FormGroup(controls);
+}
+function buildControl(node, initial) {
+    if (isLeaf(node)) {
+        return buildLeafControl(node, initial);
+    }
+    if (isChoice(node)) {
+        return buildChoiceControl(node, initial ? initial : null);
+    }
+    if (isLeafList(node)) {
+        return buildLeafListControl(node, initial !== null
+            ? initial
+            : initial);
+    }
+    if (isNodeGroup(node)) {
+        return buildNodeGroupControl(node, initial ? initial : null);
+    }
+    if (isNodeGroupList(node)) {
+        return buildNodeGroupListControl(node, initial ? initial : null);
+    }
+    return new FormControl(initial ?? '');
+}
+/**
+ * Build a typed `FormGroup` from a root `NodeGroup` schema.
+ *
+ * The returned group's control structure, keys, and value types are inferred
+ * from the schema literal — a `leaf` of `type: 'number'` yields a
+ * `FormControl<number>`, a `nodeGroup` a nested `FormGroup`, and so on. `initial`
+ * is an optional value object keyed by the schema's `children` keys; each child
+ * control is seeded from its matching slice (falling back to the node `default`).
+ *
+ * Inference only holds when `schema`'s literal type is preserved. Author schemas
+ * with {@link defineSchema} or a `satisfies NodeGroup` annotation — never
+ * `const schema: NodeGroup = ...`, which widens `children` and erases the field
+ * names and value types.
+ */
+/**
+ * Remove presence groups that have no initial value so they are absent from the
+ * built form (and from `form.value`) until the user toggles them on. Runs on the
+ * fully-built, attached tree. `removeControl` is used rather than `disable`
+ * because a disabled group is still included in `FormGroup.value`.
+ */
+function applyPresence(group, schema, initial) {
+    for (const key in schema.children) {
+        const child = schema.children[key];
+        if (child.kind !== 'nodeGroup')
+            continue;
+        const childInitial = initial?.[key];
+        if (child.presence && childInitial == null) {
+            group.removeControl(key);
+        }
+        else if (group.get(key) instanceof FormGroup) {
+            applyPresence(group.get(key), child, childInitial);
+        }
+    }
+}
+function buildFormFromSchema(schema, initial = null) {
+    const group = buildNodeGroupControl(schema, initial);
+    applyPresence(group, schema, initial);
+    return group;
+}
+/**
+ * Capture a schema literal with its exact type while checking it against
+ * `NodeGroup`.
+ *
+ * This is an identity function whose only job is the `const` type parameter,
+ * which keeps the narrow literal type of `schema` (field names, each node's
+ * `type`) instead of widening it to `NodeGroup`. Assigning a schema to a
+ * `: NodeGroup`-annotated constant widens `children` to
+ * `Record<string, NodeType>` and erases that information, so
+ * {@link buildFormFromSchema} can no longer infer a typed `FormGroup`. Passing
+ * the schema through `defineSchema` (or annotating it `satisfies NodeGroup`)
+ * preserves the schema-to-`FormGroup` inference.
+ */
+function defineSchema(schema) {
+    return schema;
+}
+
+class LeafEnumRendererComponent {
+    leafEnum;
+    initialValue;
+    control = new FormControl();
+    removable = false;
+    remove;
+    editable = true;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: LeafEnumRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: LeafEnumRendererComponent, isStandalone: true, selector: "nff-leaf-enum-renderer", inputs: { leafEnum: "leafEnum", initialValue: "initialValue", control: "control", removable: "removable", remove: "remove", editable: "editable" }, ngImport: i0, template: "<mat-form-field [appearance]=\"editable ? 'fill' : 'outline'\">\n  <mat-label>{{ leafEnum.label ?? leafEnum.name }}</mat-label>\n  <mat-select [formControl]=\"control\" value=\"{{ control.value }}\">\n    @for (option of leafEnum.enum; track $index) {\n      <mat-option [value]=\"option\">{{ leafEnum.enumLabel?.[$index] ?? option }}</mat-option>\n    }\n  </mat-select>\n</mat-form-field>\n", styles: [":host{flex:1;min-width:0;width:100%}mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: LeafEnumRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nff-leaf-enum-renderer', standalone: true, imports: [ReactiveFormsModule, MatFormFieldModule, MatSelectModule], template: "<mat-form-field [appearance]=\"editable ? 'fill' : 'outline'\">\n  <mat-label>{{ leafEnum.label ?? leafEnum.name }}</mat-label>\n  <mat-select [formControl]=\"control\" value=\"{{ control.value }}\">\n    @for (option of leafEnum.enum; track $index) {\n      <mat-option [value]=\"option\">{{ leafEnum.enumLabel?.[$index] ?? option }}</mat-option>\n    }\n  </mat-select>\n</mat-form-field>\n", styles: [":host{flex:1;min-width:0;width:100%}mat-form-field{width:100%}\n"] }]
+        }], propDecorators: { leafEnum: [{
+                type: Input
+            }], initialValue: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], removable: [{
+                type: Input
+            }], remove: [{
+                type: Input
+            }], editable: [{
+                type: Input
+            }] } });
+
+class LeafRendererComponent {
+    leaf_;
+    control = new FormControl();
+    initialValue;
+    removable = false;
+    editable = true;
+    remove = new EventEmitter();
+    ngOnInit() {
+        if (this.initialValue) {
+            this.control.patchValue(this.initialValue);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: LeafRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: LeafRendererComponent, isStandalone: true, selector: "nff-leaf-renderer", inputs: { leaf_: "leaf_", control: "control", initialValue: "initialValue", removable: "removable", editable: "editable" }, outputs: { remove: "remove" }, ngImport: i0, template: "@if ('name' in leaf_) {\n  @if (leaf_.type === 'string') {\n    <mat-form-field [appearance]=\"editable ? 'fill' : 'outline'\">\n      <mat-label>{{ leaf_.label ?? leaf_.name }}</mat-label>\n      <input [readonly]=\"!editable\" matInput type=\"text\" [formControl]=\"control\">\n    </mat-form-field>\n  } @else if (leaf_.type === 'number') {\n    <mat-form-field [appearance]=\"editable ? 'fill' : 'outline'\">\n      <mat-label>{{ leaf_.label ?? leaf_.name  }}</mat-label>\n      <input [readonly]=\"!editable\"  matInput type=\"number\" [formControl]=\"control\">\n    </mat-form-field>\n  } @else if (leaf_.type === 'boolean') {\n    <mat-checkbox [formControl]=\"control\">{{ leaf_.label ?? leaf_.name }}</mat-checkbox>\n  } @else if (leaf_.type === 'enum') {\n    <nff-leaf-enum-renderer [editable]=\"editable\" [leafEnum]=\"leaf_\" [control]=\"control\"></nff-leaf-enum-renderer>\n  }\n}\n", styles: [":host{display:flex;flex:1 1 0;min-width:10%}mat-form-field{flex:1;min-width:0}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: LeafEnumRendererComponent, selector: "nff-leaf-enum-renderer", inputs: ["leafEnum", "initialValue", "control", "removable", "remove", "editable"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: LeafRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nff-leaf-renderer', standalone: true, imports: [
+                        MatFormFieldModule,
+                        ReactiveFormsModule,
+                        MatInputModule,
+                        MatCheckboxModule,
+                        MatSelectModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        LeafEnumRendererComponent,
+                    ], template: "@if ('name' in leaf_) {\n  @if (leaf_.type === 'string') {\n    <mat-form-field [appearance]=\"editable ? 'fill' : 'outline'\">\n      <mat-label>{{ leaf_.label ?? leaf_.name }}</mat-label>\n      <input [readonly]=\"!editable\" matInput type=\"text\" [formControl]=\"control\">\n    </mat-form-field>\n  } @else if (leaf_.type === 'number') {\n    <mat-form-field [appearance]=\"editable ? 'fill' : 'outline'\">\n      <mat-label>{{ leaf_.label ?? leaf_.name  }}</mat-label>\n      <input [readonly]=\"!editable\"  matInput type=\"number\" [formControl]=\"control\">\n    </mat-form-field>\n  } @else if (leaf_.type === 'boolean') {\n    <mat-checkbox [formControl]=\"control\">{{ leaf_.label ?? leaf_.name }}</mat-checkbox>\n  } @else if (leaf_.type === 'enum') {\n    <nff-leaf-enum-renderer [editable]=\"editable\" [leafEnum]=\"leaf_\" [control]=\"control\"></nff-leaf-enum-renderer>\n  }\n}\n", styles: [":host{display:flex;flex:1 1 0;min-width:10%}mat-form-field{flex:1;min-width:0}\n"] }]
+        }], propDecorators: { leaf_: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], initialValue: [{
+                type: Input
+            }], removable: [{
+                type: Input
+            }], editable: [{
+                type: Input
+            }], remove: [{
+                type: Output
+            }] } });
+
+class NodeGroupListRendererComponent {
+    nodeGroupList;
+    initialValue;
+    formArray = new FormArray([]);
+    editable = true;
+    minItems = 1;
+    maxItems = 1;
+    message = 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.
+    items;
+    cdr = inject(ChangeDetectorRef);
+    ngOnInit() {
+        if (this.initialValue) {
+            this.formArray.patchValue(this.initialValue);
+        }
+        if (this.nodeGroupList.maxItems) {
+            this.maxItems = this.nodeGroupList.maxItems;
+        }
+        if (this.nodeGroupList.minItems) {
+            this.minItems = this.nodeGroupList.minItems;
+        }
+    }
+    ngAfterViewInit() {
+        this.items.changes.subscribe(() => {
+            this.setLastEditable();
+        });
+    }
+    removeItem($index) {
+        if (this.formArray.length <= this.minItems) {
+            this.message.emit({
+                message: `You cannot remove the last ${this.nodeGroupList.type.name} configuration!`,
+                type: 'error',
+            });
+            return;
+        }
+        this.formArray.removeAt($index);
+    }
+    addItem = (index) => {
+        this.formArray.push(buildFormFromSchema(this.nodeGroupList.type, null));
+    };
+    setLastEditable() {
+        const lastItem = this.items.last;
+        if (lastItem) {
+            lastItem.editable = true;
+        }
+        this.cdr.detectChanges();
+    }
+    asFormGroup(group) {
+        return group;
+    }
+    getTitle($index) {
+        let title = `${this.nodeGroupList.type.label ?? this.nodeGroupList.type.name}`;
+        if (this.formArray.length > 1) {
+            return `${title} #${$index + 1}`;
+        }
+        else {
+            return title;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NodeGroupListRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: NodeGroupListRendererComponent, isStandalone: true, selector: "nff-node-group-list-renderer", inputs: { nodeGroupList: "nodeGroupList", initialValue: "initialValue", formArray: "formArray", editable: "editable", minItems: "minItems", maxItems: "maxItems" }, outputs: { message: "message" }, viewQueries: [{ propertyName: "items", predicate: i0.forwardRef(() => DynamicRecursiveFormComponent), descendants: true }], ngImport: i0, template: "@if (formArray && nodeGroupList) {\n  <div class=\"fields-container\">\n      @for (group of formArray.controls; track $index) {\n        <div class=\"field-item\">\n        <nff-dynamic-recursive-form\n          [schema]=\"nodeGroupList.type\"\n          [formGroup]=\"asFormGroup(group)\"\n          [title]=\"getTitle($index)\"\n          [index]=\"0\"\n          [removable]=\"formArray.length > minItems\"\n          (remove)=\"removeItem($index)\"\n          [editable]=\"editable\"\n          [addButtonCallback]=\"addItem\"\n        />\n        </div>\n      }\n  </div>\n}\n", styles: [":host{position:relative;width:100%;flex:1 1 0}.fields{display:flex;flex-direction:column;flex-wrap:wrap;width:100%}.fields-container{display:flex;flex-direction:column}.field-item{display:flex;flex-direction:row;gap:8px}.actions{display:flex;flex-direction:row;gap:8px;align-items:center;margin-top:0;padding:0;min-width:24px}.title{display:flex;flex-direction:column;gap:8px;align-items:center}nff-dynamic-recursive-form{flex:1}.add-button{background-color:var(--mat-sys-primary-container)}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => DynamicRecursiveFormComponent), selector: "nff-dynamic-recursive-form", inputs: ["schema", "initialValue", "formGroup", "index", "removable", "title", "editable", "addButtonCallback"], outputs: ["remove"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatButtonModule) }, { kind: "ngmodule", type: i0.forwardRef(() => MatIconModule) }, { kind: "ngmodule", type: i0.forwardRef(() => MatTooltipModule) }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NodeGroupListRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nff-node-group-list-renderer', standalone: true, imports: [
+                        forwardRef(() => DynamicRecursiveFormComponent),
+                        MatButtonModule,
+                        MatIconModule,
+                        MatTooltipModule,
+                    ], template: "@if (formArray && nodeGroupList) {\n  <div class=\"fields-container\">\n      @for (group of formArray.controls; track $index) {\n        <div class=\"field-item\">\n        <nff-dynamic-recursive-form\n          [schema]=\"nodeGroupList.type\"\n          [formGroup]=\"asFormGroup(group)\"\n          [title]=\"getTitle($index)\"\n          [index]=\"0\"\n          [removable]=\"formArray.length > minItems\"\n          (remove)=\"removeItem($index)\"\n          [editable]=\"editable\"\n          [addButtonCallback]=\"addItem\"\n        />\n        </div>\n      }\n  </div>\n}\n", styles: [":host{position:relative;width:100%;flex:1 1 0}.fields{display:flex;flex-direction:column;flex-wrap:wrap;width:100%}.fields-container{display:flex;flex-direction:column}.field-item{display:flex;flex-direction:row;gap:8px}.actions{display:flex;flex-direction:row;gap:8px;align-items:center;margin-top:0;padding:0;min-width:24px}.title{display:flex;flex-direction:column;gap:8px;align-items:center}nff-dynamic-recursive-form{flex:1}.add-button{background-color:var(--mat-sys-primary-container)}\n"] }]
+        }], propDecorators: { nodeGroupList: [{
+                type: Input
+            }], initialValue: [{
+                type: Input
+            }], formArray: [{
+                type: Input
+            }], editable: [{
+                type: Input
+            }], minItems: [{
+                type: Input
+            }], maxItems: [{
+                type: Input
+            }], message: [{
+                type: Output
+            }], items: [{
+                type: ViewChildren,
+                args: [forwardRef(() => DynamicRecursiveFormComponent)]
+            }] } });
+
+class AnonLeafRendererComponent {
+    AnonLeaf;
+    initialValue;
+    control = new FormControl();
+    removable = false;
+    editable = true;
+    index;
+    remove = new EventEmitter();
+    label;
+    emitRemoveEvent() {
+        this.remove.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AnonLeafRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: AnonLeafRendererComponent, isStandalone: true, selector: "nff-anon-leaf-renderer", inputs: { AnonLeaf: "AnonLeaf", initialValue: "initialValue", control: "control", removable: "removable", editable: "editable", index: "index", label: "label" }, outputs: { remove: "remove" }, ngImport: i0, template: "<div class=\"anon-leaf-container\">\n@if (AnonLeaf.type === 'string') {\n  <mat-form-field [appearance]=\"editable ? 'fill' : 'outline'\">\n    <mat-label>{{ label }} #{{ index + 1}}</mat-label>\n    <input [readonly]=\"!editable\"\n           [formControl]=\"control\"\n           matInput type=\"text\" >\n    @if (removable) {\n    }\n  </mat-form-field>\n} @else if (AnonLeaf.type === 'number') {\n  <mat-form-field [appearance]=\"editable ? 'fill' : 'outline'\">\n    <mat-label>{{ label }} #{{ index + 1}}</mat-label>\n    <input [readonly]=\"!editable\"\n           [formControl]=\"control\"\n           matInput type=\"number\">\n  </mat-form-field>\n} @else if (AnonLeaf.type === 'boolean') {\n  <mat-checkbox [disabled]=\"!editable\" [formControl]=\"control\">value</mat-checkbox>\n}\n @else if (AnonLeaf.type === 'enum' && 'enum' in AnonLeaf) {\n  <mat-form-field>\n    <mat-label>{{ label }} #{{ index + 1}}</mat-label>\n    <mat-select [formControl]=\"control\">\n      @for (option of (AnonLeaf.type === 'enum' ? AnonLeaf.enum : []); track $index) {\n        <mat-option [value]=\"option\">{{ option }}</mat-option>\n      }\n    </mat-select>\n  </mat-form-field>\n}\n</div>\n", styles: [".anon-leaf-container{display:flex;flex-direction:row;gap:8px;align-items:center;flex:1 1 0}mat-form-field{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AnonLeafRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nff-anon-leaf-renderer', standalone: true, imports: [
+                        ReactiveFormsModule,
+                        MatFormFieldModule,
+                        MatSelectModule,
+                        MatIconModule,
+                        MatCheckboxModule,
+                        MatInputModule,
+                        MatButtonModule,
+                    ], template: "<div class=\"anon-leaf-container\">\n@if (AnonLeaf.type === 'string') {\n  <mat-form-field [appearance]=\"editable ? 'fill' : 'outline'\">\n    <mat-label>{{ label }} #{{ index + 1}}</mat-label>\n    <input [readonly]=\"!editable\"\n           [formControl]=\"control\"\n           matInput type=\"text\" >\n    @if (removable) {\n    }\n  </mat-form-field>\n} @else if (AnonLeaf.type === 'number') {\n  <mat-form-field [appearance]=\"editable ? 'fill' : 'outline'\">\n    <mat-label>{{ label }} #{{ index + 1}}</mat-label>\n    <input [readonly]=\"!editable\"\n           [formControl]=\"control\"\n           matInput type=\"number\">\n  </mat-form-field>\n} @else if (AnonLeaf.type === 'boolean') {\n  <mat-checkbox [disabled]=\"!editable\" [formControl]=\"control\">value</mat-checkbox>\n}\n @else if (AnonLeaf.type === 'enum' && 'enum' in AnonLeaf) {\n  <mat-form-field>\n    <mat-label>{{ label }} #{{ index + 1}}</mat-label>\n    <mat-select [formControl]=\"control\">\n      @for (option of (AnonLeaf.type === 'enum' ? AnonLeaf.enum : []); track $index) {\n        <mat-option [value]=\"option\">{{ option }}</mat-option>\n      }\n    </mat-select>\n  </mat-form-field>\n}\n</div>\n", styles: [".anon-leaf-container{display:flex;flex-direction:row;gap:8px;align-items:center;flex:1 1 0}mat-form-field{flex:1}\n"] }]
+        }], propDecorators: { AnonLeaf: [{
+                type: Input
+            }], initialValue: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], removable: [{
+                type: Input
+            }], editable: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], remove: [{
+                type: Output
+            }], label: [{
+                type: Input
+            }] } });
+
+class LeafListRendererComponent {
+    leaf_;
+    initialValue;
+    formArray;
+    editable = true;
+    minItems = 1;
+    message = new EventEmitter();
+    matDialog = inject(MatDialog);
+    /**
+     * Take a full-width row of its own once the array holds more than one entry.
+     * A multi-entry array grows vertically as its items wrap; sitting inline next
+     * to a regular leaf that would stretch the leaf to match. On its own line it
+     * cannot. Consumed by the `:host(.stacked)` rule.
+     */
+    get stacked() {
+        return (this.formArray?.length ?? 0) > 1;
+    }
+    ngOnInit() {
+        if (this.initialValue) {
+            this.formArray.patchValue(this.initialValue);
+        }
+    }
+    removeItem($index) {
+        if (this.formArray.length <= this.minItems) {
+            this.message.emit({
+                message: 'You cannot remove the last item!',
+                type: 'error',
+            });
+            return;
+        }
+        this.formArray.removeAt($index);
+    }
+    addItem() {
+        this.formArray.push(new FormControl());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: LeafListRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: LeafListRendererComponent, isStandalone: true, selector: "nff-leaf-list-renderer", inputs: { leaf_: "leaf_", initialValue: "initialValue", formArray: "formArray", editable: "editable", minItems: "minItems" }, outputs: { message: "message" }, host: { properties: { "class.stacked": "this.stacked" } }, ngImport: i0, template: "@if (formArray && leaf_) {\n    @for (control of formArray.controls; track $index) {\n      <div class=\"field-item\">\n        <nff-anon-leaf-renderer\n          [AnonLeaf]=\"leaf_\" [control]=\"control\"\n          [removable]=\"minItems == null || formArray.length > minItems\"\n          [index]=\"$index\"\n          [editable]=\"editable\"\n          [label]=\"leaf_.label ?? leaf_.name\"\n          (remove)=\"removeItem($index)\"\n        />\n        @if (editable) {\n          <div class=\"actions\">\n            @if (formArray.length > minItems) {\n              <button class=\"remove-button small-icon-button\" matIconButton (click)=\"removeItem($index)\">\n                <mat-icon matPrefix>delete</mat-icon>\n              </button>\n            }\n            @if ($last) {\n              <button class=\"add-button small-icon-button\" matIconButton (click)=\"addItem()\">\n                <mat-icon matPrefix>add</mat-icon>\n              </button>\n            }\n            <div class=\"actions-spacer\"></div>\n          </div>\n        }\n      </div>\n    }\n}\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap;gap:16px}:host(.stacked){flex-basis:100%}.fields{position:relative;display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}.field-item{display:flex;flex-direction:row;gap:4px;align-items:center;flex:1 1 0}.actions{z-index:100;display:flex;flex-direction:column;align-items:flex-end;gap:4px;height:100%}.actions-spacer{height:20px}nff-anon-leaf-renderer{width:100%}.add-button{background-color:var(--mat-sys-primary-container);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.remove-button{background-color:var(--mat-sys-error-container);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.title{display:flex;flex-direction:row;gap:8px;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: AnonLeafRendererComponent, selector: "nff-anon-leaf-renderer", inputs: ["AnonLeaf", "initialValue", "control", "removable", "editable", "index", "label"], outputs: ["remove"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: LeafListRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nff-leaf-list-renderer', standalone: true, imports: [
+                        MatIconModule,
+                        AnonLeafRendererComponent,
+                        MatButtonModule,
+                        MatPrefix,
+                    ], template: "@if (formArray && leaf_) {\n    @for (control of formArray.controls; track $index) {\n      <div class=\"field-item\">\n        <nff-anon-leaf-renderer\n          [AnonLeaf]=\"leaf_\" [control]=\"control\"\n          [removable]=\"minItems == null || formArray.length > minItems\"\n          [index]=\"$index\"\n          [editable]=\"editable\"\n          [label]=\"leaf_.label ?? leaf_.name\"\n          (remove)=\"removeItem($index)\"\n        />\n        @if (editable) {\n          <div class=\"actions\">\n            @if (formArray.length > minItems) {\n              <button class=\"remove-button small-icon-button\" matIconButton (click)=\"removeItem($index)\">\n                <mat-icon matPrefix>delete</mat-icon>\n              </button>\n            }\n            @if ($last) {\n              <button class=\"add-button small-icon-button\" matIconButton (click)=\"addItem()\">\n                <mat-icon matPrefix>add</mat-icon>\n              </button>\n            }\n            <div class=\"actions-spacer\"></div>\n          </div>\n        }\n      </div>\n    }\n}\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap;gap:16px}:host(.stacked){flex-basis:100%}.fields{position:relative;display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}.field-item{display:flex;flex-direction:row;gap:4px;align-items:center;flex:1 1 0}.actions{z-index:100;display:flex;flex-direction:column;align-items:flex-end;gap:4px;height:100%}.actions-spacer{height:20px}nff-anon-leaf-renderer{width:100%}.add-button{background-color:var(--mat-sys-primary-container);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.remove-button{background-color:var(--mat-sys-error-container);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.title{display:flex;flex-direction:row;gap:8px;align-items:center}\n"] }]
+        }], propDecorators: { leaf_: [{
+                type: Input
+            }], initialValue: [{
+                type: Input
+            }], formArray: [{
+                type: Input
+            }], editable: [{
+                type: Input
+            }], minItems: [{
+                type: Input
+            }], message: [{
+                type: Output
+            }], stacked: [{
+                type: HostBinding,
+                args: ['class.stacked']
+            }] } });
+
+function nodeGroupChildrenList(schema) {
+    const children = schema.children ?? {};
+    return Object.entries(children).map(([key, value]) => ({
+        key,
+        value: value,
+    }));
+}
+function nodeGroupChildrenLeafs(schema) {
+    const children = schema.children ?? {};
+    return Object.entries(children).reduce((acc, [key, value]) => {
+        if (value.kind === 'leaf') {
+            acc.push({ key, value: value });
+        }
+        return acc;
+    }, []);
+}
+function removeNullAndEmptyArrays(value) {
+    if (Array.isArray(value)) {
+        const cleanedArray = value
+            .map(removeNullAndEmptyArrays)
+            .filter(v => v != null && (typeof v !== 'object' || Object.keys(v).length > 0));
+        return cleanedArray.length > 0 ? cleanedArray : undefined;
+    }
+    if (value && typeof value === 'object') {
+        const cleanedObject = Object.fromEntries(Object.entries(value)
+            .map(([k, v]) => [k, removeNullAndEmptyArrays(v)])
+            .filter(([_, v]) => v != null && (typeof v !== 'object' || Object.keys(v).length > 0)));
+        return Object.keys(cleanedObject).length > 0 ? cleanedObject : undefined;
+    }
+    return value != null ? value : undefined;
+}
+function asFormControl(control) {
+    return control;
+}
+function asFormArray(control) {
+    return control;
+}
+function asFormGroup(control) {
+    return control;
+}
+
+class DynamicRecursiveFormComponent {
+    schema;
+    initialValue;
+    formGroup = new FormGroup({});
+    index = null;
+    removable = false;
+    remove = new EventEmitter();
+    title;
+    editable = false;
+    addButtonCallback = null;
+    root = false;
+    ngOnInit() {
+        this.root = this.schema.root ?? false;
+        if (this.initialValue) {
+            this.formGroup.patchValue(this.initialValue);
+        }
+    }
+    get nodeGroupChildrenList() {
+        const children = this.schema.children ?? {};
+        return Object.entries(children).map(([key, value]) => ({
+            key,
+            value: value,
+        }));
+    }
+    emitRemoveEvent() {
+        this.remove.emit();
+    }
+    /**
+     * Add or remove a presence group's control on this form. Removing it drops the
+     * group from `form.value`; adding it rebuilds the sub-group from its schema.
+     */
+    togglePresence(key, schema, present) {
+        if (present) {
+            if (!this.formGroup.get(key)) {
+                this.formGroup.addControl(key, buildFormFromSchema(schema));
+            }
+        }
+        else if (this.formGroup.get(key)) {
+            this.formGroup.removeControl(key);
+        }
+    }
+    CASE_KEY = CASE_KEY;
+    objectKeys(obj) {
+        return Object.keys(obj);
+    }
+    /** The active case name of a choice control, or null if none is selected. */
+    activeCase(key) {
+        return this.formGroup.get(key)?.get(CASE_KEY)?.value ?? null;
+    }
+    /** A synthetic flattened NodeGroup used to render the active case's fields against the choice's FormGroup. */
+    caseAsGroup(choice, caseName) {
+        return {
+            kind: 'nodeGroup',
+            name: choice.name,
+            children: choice.cases[caseName] ?? {},
+            appearance: { flatten: true },
+        };
+    }
+    /** Swap a choice's field controls when the selected case changes. */
+    switchCase(key, choice, caseName) {
+        const group = this.formGroup.get(key);
+        for (const name of Object.keys(group.controls)) {
+            if (name !== CASE_KEY)
+                group.removeControl(name);
+        }
+        const caseChildren = choice.cases[caseName] ?? {};
+        for (const name in caseChildren) {
+            group.addControl(name, buildControl(caseChildren[name]));
+        }
+    }
+    asFormGroup = asFormGroup;
+    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: "schema", initialValue: "initialValue", formGroup: "formGroup", index: "index", removable: "removable", title: "title", editable: "editable", addButtonCallback: "addButtonCallback" }, outputs: { remove: "remove" }, ngImport: i0, template: "@if (!root) {\n  <ng-template #formRender>\n    <div class=\"form-content\" [formGroup]=\"formGroup\">\n      <div class=\"leafs-container\">\n        <div class=\"fields\">\n          @for (childItem of nodeGroupChildrenList; track $index) {\n            @let child = childItem.value;\n            @if (child.kind == 'leaf') {\n              <nff-leaf-renderer\n                [leaf_]=child\n                [control]=asFormControl(formGroup.get(child.name))\n                [removable]=false\n                [editable]=editable\n                [initialValue]=\"formGroup.get(child.name)?.value\"\n              />\n            }\n          }\n          @for (childItem of nodeGroupChildrenList; track $index) {\n            @let child = childItem.value;\n            @if (child.kind == 'leafList') {\n              <nff-leaf-list-renderer\n                [leaf_]=\"child\"\n                [editable]=editable\n                [formArray]=\"asFormArray(formGroup.get(child.name))\"\n                [initialValue]=\"formGroup.get(child.name)?.value\"\n              />\n            }\n          }\n        </div>\n      </div>\n      @for (childItem of nodeGroupChildrenList; track $index) {\n        @let child = childItem.value;\n        @if (child.kind == 'nodeGroup' && child.presence) {\n          <div class=\"presence-group\">\n            <mat-checkbox\n              [checked]=\"!!formGroup.get(childItem.key)\"\n              [disabled]=\"!editable\"\n              (change)=\"togglePresence(childItem.key, child, $event.checked)\"\n            >{{ child.label ?? child.name }}</mat-checkbox>\n            @if (formGroup.get(childItem.key)) {\n              <nff-dynamic-recursive-form\n                [schema]=\"child\"\n                [formGroup]=\"asFormGroup(formGroup.get(childItem.key))\"\n                [editable]=\"editable\"\n              />\n            }\n          </div>\n        }\n        @else if (child.kind == 'nodeGroup') {\n          <nff-dynamic-recursive-form\n            [schema]=\"child\"\n            [formGroup]=\"asFormGroup(formGroup.get(child.name))\"\n            [initialValue]=\"formGroup.get(child.name)?.value\"\n            [editable]=\"editable\"\n          />\n        }\n        @else if (child.kind == 'choice') {\n          @let choiceGroup = asFormGroup(formGroup.get(childItem.key));\n          @let selectedCase = activeCase(childItem.key);\n          <div class=\"choice-group\" [formGroup]=\"choiceGroup\">\n            <mat-form-field [appearance]=\"editable ? 'fill' : 'outline'\">\n              <mat-label>{{ child.label ?? child.name }}</mat-label>\n              <mat-select\n                [formControlName]=\"CASE_KEY\"\n                (selectionChange)=\"switchCase(childItem.key, child, $event.value)\"\n              >\n                @for (caseName of objectKeys(child.cases); track caseName) {\n                  <mat-option [value]=\"caseName\">{{ caseName }}</mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n            @if (selectedCase) {\n              <nff-dynamic-recursive-form\n                [schema]=\"caseAsGroup(child, selectedCase)\"\n                [formGroup]=\"choiceGroup\"\n                [editable]=\"editable\"\n              />\n            }\n          </div>\n        }\n      }\n\n      @for (childItem of nodeGroupChildrenList; track $index) {\n        @let child = childItem.value;\n        @if (child.kind == 'nodeGroupList') {\n          <nff-node-group-list-renderer\n            [nodeGroupList]=\"child\"\n            [formArray]=\"asFormArray(formGroup.get(child.name))\"\n            [initialValue]=\"formGroup.get(child.name)?.value\"\n            [editable]=\"editable\"\n          />\n        }\n      }\n    </div>\n  </ng-template>\n  @if (schema.appearance?.flatten) {\n    <div class=\"flattened-form\">\n    <ng-container *ngTemplateOutlet=\"formRender\"></ng-container>\n      <div class=\"flattened-actions\">\n        @if (editable && index != null && addButtonCallback != null) {\n          <button matIconButton  matTooltip=\"+ Add new {{ schema.label ?? schema.name }}\" class=\"add-button small-icon-button\" (click)=\"addButtonCallback(index)\">\n            <mat-icon>add</mat-icon>\n          </button>\n        }\n        @if (editable && removable) {\n          <button matIconButton  class=\"remove-button small-icon-button\" (click)=\"emitRemoveEvent(); $event.stopPropagation()\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        }\n      </div>\n    </div>\n  }\n  @else {\n  <mat-card appearance=\"outlined\" [class]=\"{ 'mat-card-no-broder': schema.appearance?.noBorder }\">\n    <mat-card-header>\n      <div class=\"card-actions\">\n        <button matIconButton class=\"small-icon-button\"  [class]=\"{ 'edit-icon': !editable}\"  (click)=\"editable = !editable\">\n          <mat-icon>edit</mat-icon>\n        </button>\n        @if (editable && index != null && addButtonCallback != null) {\n          <button matIconButton  matTooltip=\"+ Add new {{ schema.label ?? schema.name }}\" class=\"add-button small-icon-button\" (click)=\"addButtonCallback(index)\">\n            <mat-icon>add</mat-icon>\n          </button>\n        }\n        @if (editable && removable) {\n          <button matIconButton  class=\"remove-button small-icon-button\" (click)=\"emitRemoveEvent(); $event.stopPropagation()\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        }\n      </div>\n      <mat-card-title class=\"config-form-subsection-card\">\n        {{ title ?? schema.label ?? schema.name }}\n      </mat-card-title>\n    </mat-card-header>\n    <mat-card-content>\n      <ng-container *ngTemplateOutlet=\"formRender\"></ng-container>\n    </mat-card-content>\n  </mat-card>\n  }\n} @else {\n  <div class=\"form-content\" [formGroup]=\"formGroup\">\n    <div class=\"leafs-container\">\n      <div class=\"fields\">\n        <button matIconButton class=\"small-icon-button\"  [class]=\"{ 'edit-icon': !editable }\"  (click)=\"editable = !editable\">\n          <mat-icon>edit</mat-icon>\n        </button>\n        @for (childItem of nodeGroupChildrenList; track $index) {\n          @let child = childItem.value;\n          @if (child.kind == 'leaf') {\n            <nff-leaf-renderer\n              [leaf_]=child\n              [control]=asFormControl(formGroup.get(child.name))\n              [removable]=false\n              [editable]=editable\n              [initialValue]=\"formGroup.get(child.name)?.value\"\n            />\n          }\n        }\n        @for (childItem of nodeGroupChildrenList; track $index) {\n          @let child = childItem.value;\n          @if (child.kind == 'leafList') {\n            <nff-leaf-list-renderer\n              [leaf_]=\"child\"\n              [editable]=editable\n              [formArray]=\"asFormArray(formGroup.get(child.name))\"\n              [initialValue]=\"formGroup.get(child.name)?.value\"\n            />\n          }\n        }\n        @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            <div class=\"choice-group\" [formGroup]=\"choiceGroup\">\n              <mat-form-field [appearance]=\"editable ? 'fill' : 'outline'\">\n                <mat-label>{{ child.label ?? child.name }}</mat-label>\n                <mat-select\n                  [formControlName]=\"CASE_KEY\"\n                  (selectionChange)=\"switchCase(childItem.key, child, $event.value)\"\n                >\n                  @for (caseName of objectKeys(child.cases); track caseName) {\n                    <mat-option [value]=\"caseName\">{{ caseName }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n              @if (selectedCase) {\n                <nff-dynamic-recursive-form\n                  [schema]=\"caseAsGroup(child, selectedCase)\"\n                  [formGroup]=\"choiceGroup\"\n                  [editable]=\"editable\"\n                />\n              }\n            </div>\n          }\n        }\n      </div>\n    </div>\n    <mat-accordion multi>\n      @for (childItem of nodeGroupChildrenList; track $index) {\n        @let child = childItem.value;\n        @if (child.kind == 'nodeGroupList') {\n          <mat-expansion-panel togglePosition=\"before\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                {{ title ?? child.label ?? child.name }}\n              </mat-panel-title>\n            </mat-expansion-panel-header>\n            <nff-node-group-list-renderer\n              [nodeGroupList]=\"child\"\n              [formArray]=\"asFormArray(formGroup.get(child.name))\"\n              [initialValue]=\"formGroup.get(child.name)?.value\"\n              [editable]=\"editable\"\n            />\n          </mat-expansion-panel>\n        }\n      }\n      @for (childItem of nodeGroupChildrenList; track $index) {\n        @let child = childItem.value;\n        @if (child.kind == 'nodeGroup' && child.presence) {\n          <mat-expansion-panel togglePosition=\"before\" [expanded]=\"!!formGroup.get(childItem.key)\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <mat-checkbox\n                  [checked]=\"!!formGroup.get(childItem.key)\"\n                  [disabled]=\"!editable\"\n                  (click)=\"$event.stopPropagation()\"\n                  (change)=\"togglePresence(childItem.key, child, $event.checked)\"\n                >{{ child.label ?? child.name }}</mat-checkbox>\n              </mat-panel-title>\n            </mat-expansion-panel-header>\n            @if (formGroup.get(childItem.key)) {\n              <nff-dynamic-recursive-form\n                [schema]=\"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          <mat-expansion-panel togglePosition=\"before\" expanded=\"true\">\n            <mat-expansion-panel-header >\n              <mat-panel-title>\n                {{ title ?? child.label ?? child.name }}\n              </mat-panel-title>\n            </mat-expansion-panel-header>\n            <nff-dynamic-recursive-form\n              [schema]=\"child\"\n              [formGroup]=\"asFormGroup(formGroup.get(child.name))\"\n              [initialValue]=\"formGroup.get(child.name)?.value\"\n              [title]=\"child.name ?? 'General Settings'\"\n              [editable]=\"editable\"\n            />\n          </mat-expansion-panel>\n        }\n      }\n    </mat-accordion>\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;flex-wrap:wrap;width:100%;margin:4px 0}.presence-group,.choice-group{display:flex;flex-direction:column;gap:8px}.fields{display:flex;flex-direction:row;gap:8px;flex-wrap:wrap;align-items:flex-start;flex:1 1 0}nff-leaf-list-renderer{flex:1}.mat-expansion-panel-content,.mat-expansion-panel-content:hover{display:flex;flex-direction:row;gap:16px}.form-content{display:flex;flex-direction:column;flex-wrap:wrap;width:100%}.leafs-container{display:flex;flex-direction:column;gap:8px;flex:1 1 0}mat-panel-description{display:flex;flex-direction:row}.node-groups-container{display:flex;flex-direction:column;flex-basis:100%}.section-actions{display:flex;flex-direction:row;gap:8px;justify-content:flex-end;width:100%}mat-card{padding:0;width:100%}.mat-card-no-broder{border:0}mat-card-content{box-sizing:border-box;padding:16px}mat-card-header{display:flex;flex-direction:row;align-items:flex-start;padding:16px;gap:16px}.edit-icon{opacity:.2;animation:icon-released .5s}.edit-icon:hover{opacity:1;animation:icon-transition .5s}.card-actions{display:flex;flex-direction:row;align-items:center;gap:4px}.flattened-actions{display:flex;flex-direction:column;align-items:flex-start;align-self:flex-start;gap:4px}.add-button{background-color:var(--mat-sys-primary-container);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.remove-button{background-color:var(--mat-sys-error-container);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.flattened-form{display:flex;flex-direction:row;width:100%;gap:4px}.flattened-style-actions{display:flex;flex-direction:row;gap:8px;justify-content:flex-end;align-items:flex-start}@keyframes icon-hovered{0%{opacity:.4}}@keyframes icon-released{0%{opacity:1}to{opacity:.4}}\n"], dependencies: [{ kind: "component", type: DynamicRecursiveFormComponent, selector: "nff-dynamic-recursive-form", inputs: ["schema", "initialValue", "formGroup", "index", "removable", "title", "editable", "addButtonCallback"], outputs: ["remove"] }, { kind: "component", type: LeafRendererComponent, selector: "nff-leaf-renderer", inputs: ["leaf_", "control", "initialValue", "removable", "editable"], outputs: ["remove"] }, { kind: "component", type: NodeGroupListRendererComponent, selector: "nff-node-group-list-renderer", inputs: ["nodeGroupList", "initialValue", "formArray", "editable", "minItems", "maxItems"], outputs: ["message"] }, { kind: "component", type: LeafListRendererComponent, selector: "nff-leaf-list-renderer", inputs: ["leaf_", "initialValue", "formArray", "editable", "minItems"], outputs: ["message"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i2$1.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i2$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i5.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i5.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i5.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i5.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "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: DynamicRecursiveFormComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [
+                        LeafRendererComponent,
+                        NodeGroupListRendererComponent,
+                        LeafListRendererComponent,
+                        ReactiveFormsModule,
+                        MatExpansionModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        NgTemplateOutlet,
+                        MatCardModule,
+                        MatCheckboxModule,
+                        MatFormFieldModule,
+                        MatSelectModule,
+                        MatTooltip,
+                    ], selector: 'nff-dynamic-recursive-form', standalone: true, template: "@if (!root) {\n  <ng-template #formRender>\n    <div class=\"form-content\" [formGroup]=\"formGroup\">\n      <div class=\"leafs-container\">\n        <div class=\"fields\">\n          @for (childItem of nodeGroupChildrenList; track $index) {\n            @let child = childItem.value;\n            @if (child.kind == 'leaf') {\n              <nff-leaf-renderer\n                [leaf_]=child\n                [control]=asFormControl(formGroup.get(child.name))\n                [removable]=false\n                [editable]=editable\n                [initialValue]=\"formGroup.get(child.name)?.value\"\n              />\n            }\n          }\n          @for (childItem of nodeGroupChildrenList; track $index) {\n            @let child = childItem.value;\n            @if (child.kind == 'leafList') {\n              <nff-leaf-list-renderer\n                [leaf_]=\"child\"\n                [editable]=editable\n                [formArray]=\"asFormArray(formGroup.get(child.name))\"\n                [initialValue]=\"formGroup.get(child.name)?.value\"\n              />\n            }\n          }\n        </div>\n      </div>\n      @for (childItem of nodeGroupChildrenList; track $index) {\n        @let child = childItem.value;\n        @if (child.kind == 'nodeGroup' && child.presence) {\n          <div class=\"presence-group\">\n            <mat-checkbox\n              [checked]=\"!!formGroup.get(childItem.key)\"\n              [disabled]=\"!editable\"\n              (change)=\"togglePresence(childItem.key, child, $event.checked)\"\n            >{{ child.label ?? child.name }}</mat-checkbox>\n            @if (formGroup.get(childItem.key)) {\n              <nff-dynamic-recursive-form\n                [schema]=\"child\"\n                [formGroup]=\"asFormGroup(formGroup.get(childItem.key))\"\n                [editable]=\"editable\"\n              />\n            }\n          </div>\n        }\n        @else if (child.kind == 'nodeGroup') {\n          <nff-dynamic-recursive-form\n            [schema]=\"child\"\n            [formGroup]=\"asFormGroup(formGroup.get(child.name))\"\n            [initialValue]=\"formGroup.get(child.name)?.value\"\n            [editable]=\"editable\"\n          />\n        }\n        @else if (child.kind == 'choice') {\n          @let choiceGroup = asFormGroup(formGroup.get(childItem.key));\n          @let selectedCase = activeCase(childItem.key);\n          <div class=\"choice-group\" [formGroup]=\"choiceGroup\">\n            <mat-form-field [appearance]=\"editable ? 'fill' : 'outline'\">\n              <mat-label>{{ child.label ?? child.name }}</mat-label>\n              <mat-select\n                [formControlName]=\"CASE_KEY\"\n                (selectionChange)=\"switchCase(childItem.key, child, $event.value)\"\n              >\n                @for (caseName of objectKeys(child.cases); track caseName) {\n                  <mat-option [value]=\"caseName\">{{ caseName }}</mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n            @if (selectedCase) {\n              <nff-dynamic-recursive-form\n                [schema]=\"caseAsGroup(child, selectedCase)\"\n                [formGroup]=\"choiceGroup\"\n                [editable]=\"editable\"\n              />\n            }\n          </div>\n        }\n      }\n\n      @for (childItem of nodeGroupChildrenList; track $index) {\n        @let child = childItem.value;\n        @if (child.kind == 'nodeGroupList') {\n          <nff-node-group-list-renderer\n            [nodeGroupList]=\"child\"\n            [formArray]=\"asFormArray(formGroup.get(child.name))\"\n            [initialValue]=\"formGroup.get(child.name)?.value\"\n            [editable]=\"editable\"\n          />\n        }\n      }\n    </div>\n  </ng-template>\n  @if (schema.appearance?.flatten) {\n    <div class=\"flattened-form\">\n    <ng-container *ngTemplateOutlet=\"formRender\"></ng-container>\n      <div class=\"flattened-actions\">\n        @if (editable && index != null && addButtonCallback != null) {\n          <button matIconButton  matTooltip=\"+ Add new {{ schema.label ?? schema.name }}\" class=\"add-button small-icon-button\" (click)=\"addButtonCallback(index)\">\n            <mat-icon>add</mat-icon>\n          </button>\n        }\n        @if (editable && removable) {\n          <button matIconButton  class=\"remove-button small-icon-button\" (click)=\"emitRemoveEvent(); $event.stopPropagation()\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        }\n      </div>\n    </div>\n  }\n  @else {\n  <mat-card appearance=\"outlined\" [class]=\"{ 'mat-card-no-broder': schema.appearance?.noBorder }\">\n    <mat-card-header>\n      <div class=\"card-actions\">\n        <button matIconButton class=\"small-icon-button\"  [class]=\"{ 'edit-icon': !editable}\"  (click)=\"editable = !editable\">\n          <mat-icon>edit</mat-icon>\n        </button>\n        @if (editable && index != null && addButtonCallback != null) {\n          <button matIconButton  matTooltip=\"+ Add new {{ schema.label ?? schema.name }}\" class=\"add-button small-icon-button\" (click)=\"addButtonCallback(index)\">\n            <mat-icon>add</mat-icon>\n          </button>\n        }\n        @if (editable && removable) {\n          <button matIconButton  class=\"remove-button small-icon-button\" (click)=\"emitRemoveEvent(); $event.stopPropagation()\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        }\n      </div>\n      <mat-card-title class=\"config-form-subsection-card\">\n        {{ title ?? schema.label ?? schema.name }}\n      </mat-card-title>\n    </mat-card-header>\n    <mat-card-content>\n      <ng-container *ngTemplateOutlet=\"formRender\"></ng-container>\n    </mat-card-content>\n  </mat-card>\n  }\n} @else {\n  <div class=\"form-content\" [formGroup]=\"formGroup\">\n    <div class=\"leafs-container\">\n      <div class=\"fields\">\n        <button matIconButton class=\"small-icon-button\"  [class]=\"{ 'edit-icon': !editable }\"  (click)=\"editable = !editable\">\n          <mat-icon>edit</mat-icon>\n        </button>\n        @for (childItem of nodeGroupChildrenList; track $index) {\n          @let child = childItem.value;\n          @if (child.kind == 'leaf') {\n            <nff-leaf-renderer\n              [leaf_]=child\n              [control]=asFormControl(formGroup.get(child.name))\n              [removable]=false\n              [editable]=editable\n              [initialValue]=\"formGroup.get(child.name)?.value\"\n            />\n          }\n        }\n        @for (childItem of nodeGroupChildrenList; track $index) {\n          @let child = childItem.value;\n          @if (child.kind == 'leafList') {\n            <nff-leaf-list-renderer\n              [leaf_]=\"child\"\n              [editable]=editable\n              [formArray]=\"asFormArray(formGroup.get(child.name))\"\n              [initialValue]=\"formGroup.get(child.name)?.value\"\n            />\n          }\n        }\n        @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            <div class=\"choice-group\" [formGroup]=\"choiceGroup\">\n              <mat-form-field [appearance]=\"editable ? 'fill' : 'outline'\">\n                <mat-label>{{ child.label ?? child.name }}</mat-label>\n                <mat-select\n                  [formControlName]=\"CASE_KEY\"\n                  (selectionChange)=\"switchCase(childItem.key, child, $event.value)\"\n                >\n                  @for (caseName of objectKeys(child.cases); track caseName) {\n                    <mat-option [value]=\"caseName\">{{ caseName }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n              @if (selectedCase) {\n                <nff-dynamic-recursive-form\n                  [schema]=\"caseAsGroup(child, selectedCase)\"\n                  [formGroup]=\"choiceGroup\"\n                  [editable]=\"editable\"\n                />\n              }\n            </div>\n          }\n        }\n      </div>\n    </div>\n    <mat-accordion multi>\n      @for (childItem of nodeGroupChildrenList; track $index) {\n        @let child = childItem.value;\n        @if (child.kind == 'nodeGroupList') {\n          <mat-expansion-panel togglePosition=\"before\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                {{ title ?? child.label ?? child.name }}\n              </mat-panel-title>\n            </mat-expansion-panel-header>\n            <nff-node-group-list-renderer\n              [nodeGroupList]=\"child\"\n              [formArray]=\"asFormArray(formGroup.get(child.name))\"\n              [initialValue]=\"formGroup.get(child.name)?.value\"\n              [editable]=\"editable\"\n            />\n          </mat-expansion-panel>\n        }\n      }\n      @for (childItem of nodeGroupChildrenList; track $index) {\n        @let child = childItem.value;\n        @if (child.kind == 'nodeGroup' && child.presence) {\n          <mat-expansion-panel togglePosition=\"before\" [expanded]=\"!!formGroup.get(childItem.key)\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <mat-checkbox\n                  [checked]=\"!!formGroup.get(childItem.key)\"\n                  [disabled]=\"!editable\"\n                  (click)=\"$event.stopPropagation()\"\n                  (change)=\"togglePresence(childItem.key, child, $event.checked)\"\n                >{{ child.label ?? child.name }}</mat-checkbox>\n              </mat-panel-title>\n            </mat-expansion-panel-header>\n            @if (formGroup.get(childItem.key)) {\n              <nff-dynamic-recursive-form\n                [schema]=\"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          <mat-expansion-panel togglePosition=\"before\" expanded=\"true\">\n            <mat-expansion-panel-header >\n              <mat-panel-title>\n                {{ title ?? child.label ?? child.name }}\n              </mat-panel-title>\n            </mat-expansion-panel-header>\n            <nff-dynamic-recursive-form\n              [schema]=\"child\"\n              [formGroup]=\"asFormGroup(formGroup.get(child.name))\"\n              [initialValue]=\"formGroup.get(child.name)?.value\"\n              [title]=\"child.name ?? 'General Settings'\"\n              [editable]=\"editable\"\n            />\n          </mat-expansion-panel>\n        }\n      }\n    </mat-accordion>\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;flex-wrap:wrap;width:100%;margin:4px 0}.presence-group,.choice-group{display:flex;flex-direction:column;gap:8px}.fields{display:flex;flex-direction:row;gap:8px;flex-wrap:wrap;align-items:flex-start;flex:1 1 0}nff-leaf-list-renderer{flex:1}.mat-expansion-panel-content,.mat-expansion-panel-content:hover{display:flex;flex-direction:row;gap:16px}.form-content{display:flex;flex-direction:column;flex-wrap:wrap;width:100%}.leafs-container{display:flex;flex-direction:column;gap:8px;flex:1 1 0}mat-panel-description{display:flex;flex-direction:row}.node-groups-container{display:flex;flex-direction:column;flex-basis:100%}.section-actions{display:flex;flex-direction:row;gap:8px;justify-content:flex-end;width:100%}mat-card{padding:0;width:100%}.mat-card-no-broder{border:0}mat-card-content{box-sizing:border-box;padding:16px}mat-card-header{display:flex;flex-direction:row;align-items:flex-start;padding:16px;gap:16px}.edit-icon{opacity:.2;animation:icon-released .5s}.edit-icon:hover{opacity:1;animation:icon-transition .5s}.card-actions{display:flex;flex-direction:row;align-items:center;gap:4px}.flattened-actions{display:flex;flex-direction:column;align-items:flex-start;align-self:flex-start;gap:4px}.add-button{background-color:var(--mat-sys-primary-container);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.remove-button{background-color:var(--mat-sys-error-container);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.flattened-form{display:flex;flex-direction:row;width:100%;gap:4px}.flattened-style-actions{display:flex;flex-direction:row;gap:8px;justify-content:flex-end;align-items:flex-start}@keyframes icon-hovered{0%{opacity:.4}}@keyframes icon-released{0%{opacity:1}to{opacity:.4}}\n"] }]
+        }], propDecorators: { schema: [{
+                type: Input,
+                args: [{ required: true }]
+            }], initialValue: [{
+                type: Input
+            }], formGroup: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], removable: [{
+                type: Input
+            }], remove: [{
+                type: Output
+            }], title: [{
+                type: Input
+            }], editable: [{
+                type: Input
+            }], addButtonCallback: [{
+                type: Input
+            }] } });
+
+/**
+ * A tree/detail editor for a schema-built form: the structure (containers, lists,
+ * groups) is a tree on the left, and selecting a node shows that node's leaf
+ * fields for editing on the right. A `+` on a list node adds an entry; a delete
+ * button on each item removes it. An alternative to the all-in-one
+ * {@link DynamicRecursiveFormComponent} for large configs.
+ */
+class ConfigEditorComponent {
+    schema;
+    formGroup;
+    editable = true;
+    root;
+    selected = null;
+    expanded = new Set();
+    nextId = 0;
+    ngOnInit() {
+        this.root = this.buildTree(this.schema, this.formGroup, this.schema.label ?? this.schema.name);
+        this.expanded.add(this.root.id);
+        this.select(this.root);
+    }
+    select(node) {
+        this.selected = node;
+        // Reveal the node's direct children in the tree as it opens on the right.
+        if (node.children.length)
+            this.expanded.add(node.id);
+    }
+    /** Select a child (list item or sub-group) from the detail pane, keeping its parent expanded in the tree. */
+    open(parent, child) {
+        this.expanded.add(parent.id);
+        this.select(child);
+    }
+    /**
+     * Root-to-`target` path for the detail-pane breadcrumb (inclusive of both ends),
+     * or an empty array if `target` is not in the current tree. Searched fresh each
+     * call so it stays correct after add/remove/presence mutations rebuild subtrees.
+     */
+    pathTo(target) {
+        const walk = (node, trail) => {
+            const here = [...trail, node];
+            if (node === target)
+                return here;
+            for (const child of node.children) {
+                const found = walk(child, here);
+                if (found)
+                    return found;
+            }
+            return null;
+        };
+        return this.root ? (walk(this.root, []) ?? []) : [];
+    }
+    toggle(node) {
+        if (this.expanded.has(node.id))
+            this.expanded.delete(node.id);
+        else
+            this.expanded.add(node.id);
+    }
+    /** Append a new item to a list node's FormArray and to the tree, then select it. */
+    addItem(listNode) {
+        const list = listNode.list;
+        if (!list)
+            return;
+        const group = buildFormFromSchema(list.itemSchema);
+        list.array.push(group);
+        const item = this.buildTree(list.itemSchema, group, list.itemLabel);
+        item.removable = { array: list.array, index: list.array.length - 1 };
+        listNode.children.push(item);
+        this.renumber(listNode);
+        this.expanded.add(listNode.id);
+        this.select(item);
+    }
+    /** Remove a list item from its FormArray and the tree (down to `minItems`). */
+    removeItem(listNode, item) {
+        if (!listNode.list || !item.removable)
+            return;
+        if (listNode.list.array.length <= listNode.list.minItems)
+            return;
+        listNode.list.array.removeAt(item.removable.index);
+        listNode.children.splice(listNode.children.indexOf(item), 1);
+        this.renumber(listNode);
+        if (this.selected === item)
+            this.select(listNode);
+    }
+    /** Enable or disable an optional (presence) group by adding/removing its control. */
+    setPresence(node, present) {
+        const p = node.presence;
+        if (!p)
+            return;
+        if (present) {
+            if (!(p.parentGroup.get(p.key) instanceof FormGroup)) {
+                const group = buildFormFromSchema(p.schema);
+                p.parentGroup.addControl(p.key, group);
+                const built = this.buildTree(p.schema, group, node.label);
+                node.children = built.children;
+                node.leaves = built.leaves;
+                node.leafLists = built.leafLists;
+                node.group = group;
+            }
+            node.present = true;
+            this.select(node);
+        }
+        else {
+            p.parentGroup.removeControl(p.key);
+            node.children = [];
+            node.leaves = [];
+            node.leafLists = [];
+            node.group = null;
+            node.present = false;
+        }
+    }
+    asFormControl = asFormControl;
+    asFormArray = asFormArray;
+    placeholder(label) {
+        return { id: String(this.nextId++), label, children: [], leaves: [], leafLists: [], group: null };
+    }
+    /** Re-index and re-label a list node's item children (just "#n") after add/remove. */
+    renumber(listNode) {
+        listNode.children.forEach((child, i) => {
+            if (child.removable)
+                child.removable.index = i;
+            child.label = `#${i + 1}`;
+        });
+    }
+    buildTree(schema, group, label) {
+        const leaves = [];
+        const leafLists = [];
+        const children = [];
+        for (const key of Object.keys(schema.children)) {
+            const child = schema.children[key];
+            if (child.kind === 'leaf') {
+                leaves.push({ key, node: child });
+            }
+            else if (child.kind === 'leafList') {
+                leafLists.push({ key, node: child });
+            }
+            else if (child.kind === 'nodeGroup') {
+                const childGroup = group.get(key);
+                if (child.presence) {
+                    // Optional group: always a tree node — a placeholder when absent.
+                    const node = childGroup instanceof FormGroup
+                        ? this.buildTree(child, childGroup, child.label ?? key)
+                        : this.placeholder(child.label ?? key);
+                    node.presence = { parentGroup: group, key, schema: child };
+                    node.present = childGroup instanceof FormGroup;
+                    children.push(node);
+                }
+                else if (childGroup instanceof FormGroup) {
+                    children.push(this.buildTree(child, childGroup, child.label ?? key));
+                }
+            }
+            else if (child.kind === 'nodeGroupList') {
+                const array = group.get(key);
+                const itemLabel = child.type.label ?? child.type.name;
+                const items = array instanceof FormArray
+                    ? array.controls
+                        .filter((c) => c instanceof FormGroup)
+                        .map((item, i) => {
+                        // Just "#n": the item sits under its list node, so repeating the
+                        // item name (e.g. "Interface #1") only echoes the parent.
+                        const node = this.buildTree(child.type, item, `#${i + 1}`);
+                        node.removable = { array, index: i };
+                        return node;
+                    })
+                    : [];
+                children.push({
+                    id: String(this.nextId++),
+                    label: child.label ?? key,
+                    children: items,
+                    leaves: [],
+                    leafLists: [],
+                    group: null,
+                    list: array instanceof FormArray
+                        ? { array, itemSchema: child.type, itemLabel, minItems: child.minItems ?? 0 }
+                        : undefined,
+                });
+            }
+            // choice nodes are not shown in the tree yet.
+        }
+        return { id: String(this.nextId++), label, children, leaves, leafLists, group };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ConfigEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: ConfigEditorComponent, isStandalone: true, selector: "nff-config-editor", inputs: { schema: "schema", formGroup: "formGroup", editable: "editable" }, ngImport: i0, template: "<div class=\"editor\">\n  <nav class=\"tree\">\n    <ng-template #treeNode let-node let-depth=\"depth\" let-parent=\"parent\">\n      <div\n        class=\"tree-row\"\n        [class.selected]=\"node === selected\"\n        [style.padding-left.px]=\"8 + depth * 16\"\n        (click)=\"select(node)\"\n      >\n        @if (node.children.length) {\n          <button\n            matIconButton\n            class=\"twisty\"\n            (click)=\"toggle(node); $event.stopPropagation()\"\n            [attr.aria-label]=\"expanded.has(node.id) ? 'Collapse' : 'Expand'\"\n          >\n            <mat-icon>{{ expanded.has(node.id) ? 'expand_more' : 'chevron_right' }}</mat-icon>\n          </button>\n        } @else {\n          <span class=\"twisty-spacer\"></span>\n        }\n\n        @if (node.presence) {\n          <mat-checkbox\n            class=\"presence-check\"\n            [checked]=\"!!node.present\"\n            [disabled]=\"!editable\"\n            (change)=\"setPresence(node, $event.checked)\"\n            (click)=\"$event.stopPropagation()\"\n          ></mat-checkbox>\n        }\n        <span class=\"tree-label\" [class.absent]=\"node.presence && !node.present\">{{ node.label }}</span>\n\n        @if (editable && node.list) {\n          <button\n            matIconButton\n            class=\"row-btn add\"\n            [matTooltip]=\"'Add ' + node.list.itemLabel\"\n            (click)=\"addItem(node); $event.stopPropagation()\"\n          >\n            <mat-icon>add</mat-icon>\n          </button>\n        }\n        @if (editable && node.removable) {\n          <button\n            matIconButton\n            class=\"row-btn remove\"\n            matTooltip=\"Remove\"\n            (click)=\"removeItem(parent, node); $event.stopPropagation()\"\n          >\n            <mat-icon>delete</mat-icon>\n          </button>\n        }\n      </div>\n\n      @if (expanded.has(node.id)) {\n        @for (child of node.children; track child.id) {\n          <ng-container\n            *ngTemplateOutlet=\"treeNode; context: { $implicit: child, depth: depth + 1, parent: node }\"\n          />\n        }\n      }\n    </ng-template>\n\n    <ng-container *ngTemplateOutlet=\"treeNode; context: { $implicit: root, depth: 0 }\" />\n  </nav>\n\n  <section class=\"detail\">\n    @if (selected) {\n      <nav class=\"breadcrumb\" aria-label=\"Breadcrumb\">\n        @for (crumb of pathTo(selected); track crumb.id; let last = $last) {\n          @if (last) {\n            <span class=\"crumb-current\" aria-current=\"page\">{{ crumb.label }}</span>\n          } @else {\n            <button type=\"button\" class=\"item-link crumb-link\" (click)=\"select(crumb)\">{{ crumb.label }}</button>\n            <span class=\"crumb-sep\" aria-hidden=\"true\">/</span>\n          }\n        }\n      </nav>\n    }\n    @if (selected && selected.group) {\n      <div class=\"group-body\">\n        <div class=\"fields\" [formGroup]=\"selected.group\">\n          @for (leaf of selected.leaves; track leaf.key) {\n            <nff-leaf-renderer\n              [leaf_]=\"leaf.node\"\n              [control]=\"asFormControl(selected.group.get(leaf.key))\"\n              [editable]=\"editable\"\n            />\n          }\n          @for (list of selected.leafLists; track list.key) {\n            <nff-leaf-list-renderer\n              [leaf_]=\"list.node\"\n              [formArray]=\"asFormArray(selected.group.get(list.key))\"\n              [editable]=\"editable\"\n            />\n          }\n          @if (!selected.leaves.length && !selected.leafLists.length && !selected.children.length) {\n            <p class=\"empty\">This node has no fields.</p>\n          }\n        </div>\n        @if (selected.children.length) {\n          <nav class=\"child-links\">\n            <h4 class=\"child-links-title\">Sections</h4>\n            @for (child of selected.children; track child.id) {\n              <button type=\"button\" class=\"item-link child-link\" (click)=\"open(selected, child)\">\n                <mat-icon>chevron_right</mat-icon>{{ child.label }}\n              </button>\n            }\n          </nav>\n        }\n      </div>\n    } @else if (selected && selected.presence && !selected.present) {\n      <p class=\"empty\">This optional group is off. Tick its box in the tree to add it.</p>\n    } @else if (selected && selected.list) {\n      @if (selected.children.length) {\n        <ul class=\"item-list\">\n          @for (item of selected.children; track item.id) {\n            <li class=\"item-row\">\n              <button type=\"button\" class=\"item-link\" (click)=\"open(selected, item)\">{{ item.label }}</button>\n              @if (editable && item.removable) {\n                <button\n                  matIconButton\n                  class=\"row-btn remove-item\"\n                  matTooltip=\"Remove\"\n                  (click)=\"removeItem(selected, item)\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              }\n            </li>\n          }\n        </ul>\n      } @else {\n        <p class=\"empty\">No {{ selected.list.itemLabel }} items yet.</p>\n      }\n      @if (editable) {\n        <div class=\"list-actions\">\n          <button matButton (click)=\"addItem(selected)\">\n            <mat-icon>add</mat-icon> Add {{ selected.list.itemLabel }}\n          </button>\n        </div>\n      }\n    } @else {\n      <p class=\"empty\">Select a node on the left to edit its fields.</p>\n    }\n  </section>\n</div>\n", styles: [":host{display:block;width:100%}.editor{display:flex;align-items:stretch;gap:16px;min-height:320px}.tree{flex:0 0 260px;overflow:auto;border:1px solid var(--mat-sys-outline-variant, rgba(0, 0, 0, .12));border-radius:8px;padding:4px 0}.tree-row{display:flex;align-items:center;gap:4px;height:32px;cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.tree-row:hover{background:var(--mat-sys-surface-container-high, rgba(0, 0, 0, .04))}.tree-row.selected{background:var(--mat-sys-secondary-container, rgba(103, 80, 164, .12));font-weight:600}.twisty{flex:0 0 auto;--mat-icon-button-state-layer-size: 28px;--mat-icon-button-icon-size: 18px}.twisty mat-icon{font-size:18px;width:18px;height:18px}.twisty-spacer{flex:0 0 auto;width:28px}.presence-check{flex:0 0 auto;margin-right:2px}.tree-label{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis}.tree-label.absent{color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .55));font-style:italic}.row-btn{flex:0 0 auto;--mat-icon-button-state-layer-size: 28px;--mat-icon-button-icon-size: 18px}.row-btn mat-icon{font-size:18px;width:18px;height:18px}.row-btn.remove{visibility:hidden}.tree-row:hover .row-btn.remove,.tree-row.selected .row-btn.remove{visibility:visible}.detail{flex:1 1 auto;min-width:0;overflow:auto}.breadcrumb{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;margin:4px 0 12px;font-size:1.15rem}.crumb-current{font-weight:600}.crumb-link{font-size:inherit;padding:0}.crumb-sep{color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .5))}.fields{display:flex;flex-direction:column;gap:4px}.empty{color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));font-style:italic}.item-list{list-style:none;margin:0 0 8px;padding:0}.item-row{display:flex;align-items:center;gap:4px}.item-link{min-width:0;padding:4px 0;border:0;background:none;text-align:left;cursor:pointer;color:var(--mat-sys-primary, #6750a4);font:inherit;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.item-link:hover{text-decoration:underline}.remove-item{flex:0 0 auto}.list-actions{display:flex;justify-content:flex-end}.group-body{display:flex;align-items:flex-start;gap:24px}.group-body .fields{flex:1 1 auto;min-width:0}.child-links{flex:0 0 200px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding-left:16px;border-left:1px solid var(--mat-sys-outline-variant, rgba(0, 0, 0, .12))}.child-links-title{margin:0 0 4px;font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6))}.child-link{display:inline-flex;align-items:center;gap:2px}.child-link mat-icon{font-size:18px;width:18px;height:18px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$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: i3$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: LeafRendererComponent, selector: "nff-leaf-renderer", inputs: ["leaf_", "control", "initialValue", "removable", "editable"], outputs: ["remove"] }, { kind: "component", type: LeafListRendererComponent, selector: "nff-leaf-list-renderer", inputs: ["leaf_", "initialValue", "formArray", "editable", "minItems"], outputs: ["message"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ConfigEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nff-config-editor', standalone: true, imports: [
+                        ReactiveFormsModule,
+                        NgTemplateOutlet,
+                        MatIconModule,
+                        MatButtonModule,
+                        MatCheckboxModule,
+                        MatTooltip,
+                        LeafRendererComponent,
+                        LeafListRendererComponent,
+                    ], template: "<div class=\"editor\">\n  <nav class=\"tree\">\n    <ng-template #treeNode let-node let-depth=\"depth\" let-parent=\"parent\">\n      <div\n        class=\"tree-row\"\n        [class.selected]=\"node === selected\"\n        [style.padding-left.px]=\"8 + depth * 16\"\n        (click)=\"select(node)\"\n      >\n        @if (node.children.length) {\n          <button\n            matIconButton\n            class=\"twisty\"\n            (click)=\"toggle(node); $event.stopPropagation()\"\n            [attr.aria-label]=\"expanded.has(node.id) ? 'Collapse' : 'Expand'\"\n          >\n            <mat-icon>{{ expanded.has(node.id) ? 'expand_more' : 'chevron_right' }}</mat-icon>\n          </button>\n        } @else {\n          <span class=\"twisty-spacer\"></span>\n        }\n\n        @if (node.presence) {\n          <mat-checkbox\n            class=\"presence-check\"\n            [checked]=\"!!node.present\"\n            [disabled]=\"!editable\"\n            (change)=\"setPresence(node, $event.checked)\"\n            (click)=\"$event.stopPropagation()\"\n          ></mat-checkbox>\n        }\n        <span class=\"tree-label\" [class.absent]=\"node.presence && !node.present\">{{ node.label }}</span>\n\n        @if (editable && node.list) {\n          <button\n            matIconButton\n            class=\"row-btn add\"\n            [matTooltip]=\"'Add ' + node.list.itemLabel\"\n            (click)=\"addItem(node); $event.stopPropagation()\"\n          >\n            <mat-icon>add</mat-icon>\n          </button>\n        }\n        @if (editable && node.removable) {\n          <button\n            matIconButton\n            class=\"row-btn remove\"\n            matTooltip=\"Remove\"\n            (click)=\"removeItem(parent, node); $event.stopPropagation()\"\n          >\n            <mat-icon>delete</mat-icon>\n          </button>\n        }\n      </div>\n\n      @if (expanded.has(node.id)) {\n        @for (child of node.children; track child.id) {\n          <ng-container\n            *ngTemplateOutlet=\"treeNode; context: { $implicit: child, depth: depth + 1, parent: node }\"\n          />\n        }\n      }\n    </ng-template>\n\n    <ng-container *ngTemplateOutlet=\"treeNode; context: { $implicit: root, depth: 0 }\" />\n  </nav>\n\n  <section class=\"detail\">\n    @if (selected) {\n      <nav class=\"breadcrumb\" aria-label=\"Breadcrumb\">\n        @for (crumb of pathTo(selected); track crumb.id; let last = $last) {\n          @if (last) {\n            <span class=\"crumb-current\" aria-current=\"page\">{{ crumb.label }}</span>\n          } @else {\n            <button type=\"button\" class=\"item-link crumb-link\" (click)=\"select(crumb)\">{{ crumb.label }}</button>\n            <span class=\"crumb-sep\" aria-hidden=\"true\">/</span>\n          }\n        }\n      </nav>\n    }\n    @if (selected && selected.group) {\n      <div class=\"group-body\">\n        <div class=\"fields\" [formGroup]=\"selected.group\">\n          @for (leaf of selected.leaves; track leaf.key) {\n            <nff-leaf-renderer\n              [leaf_]=\"leaf.node\"\n              [control]=\"asFormControl(selected.group.get(leaf.key))\"\n              [editable]=\"editable\"\n            />\n          }\n          @for (list of selected.leafLists; track list.key) {\n            <nff-leaf-list-renderer\n              [leaf_]=\"list.node\"\n              [formArray]=\"asFormArray(selected.group.get(list.key))\"\n              [editable]=\"editable\"\n            />\n          }\n          @if (!selected.leaves.length && !selected.leafLists.length && !selected.children.length) {\n            <p class=\"empty\">This node has no fields.</p>\n          }\n        </div>\n        @if (selected.children.length) {\n          <nav class=\"child-links\">\n            <h4 class=\"child-links-title\">Sections</h4>\n            @for (child of selected.children; track child.id) {\n              <button type=\"button\" class=\"item-link child-link\" (click)=\"open(selected, child)\">\n                <mat-icon>chevron_right</mat-icon>{{ child.label }}\n              </button>\n            }\n          </nav>\n        }\n      </div>\n    } @else if (selected && selected.presence && !selected.present) {\n      <p class=\"empty\">This optional group is off. Tick its box in the tree to add it.</p>\n    } @else if (selected && selected.list) {\n      @if (selected.children.length) {\n        <ul class=\"item-list\">\n          @for (item of selected.children; track item.id) {\n            <li class=\"item-row\">\n              <button type=\"button\" class=\"item-link\" (click)=\"open(selected, item)\">{{ item.label }}</button>\n              @if (editable && item.removable) {\n                <button\n                  matIconButton\n                  class=\"row-btn remove-item\"\n                  matTooltip=\"Remove\"\n                  (click)=\"removeItem(selected, item)\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              }\n            </li>\n          }\n        </ul>\n      } @else {\n        <p class=\"empty\">No {{ selected.list.itemLabel }} items yet.</p>\n      }\n      @if (editable) {\n        <div class=\"list-actions\">\n          <button matButton (click)=\"addItem(selected)\">\n            <mat-icon>add</mat-icon> Add {{ selected.list.itemLabel }}\n          </button>\n        </div>\n      }\n    } @else {\n      <p class=\"empty\">Select a node on the left to edit its fields.</p>\n    }\n  </section>\n</div>\n", styles: [":host{display:block;width:100%}.editor{display:flex;align-items:stretch;gap:16px;min-height:320px}.tree{flex:0 0 260px;overflow:auto;border:1px solid var(--mat-sys-outline-variant, rgba(0, 0, 0, .12));border-radius:8px;padding:4px 0}.tree-row{display:flex;align-items:center;gap:4px;height:32px;cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.tree-row:hover{background:var(--mat-sys-surface-container-high, rgba(0, 0, 0, .04))}.tree-row.selected{background:var(--mat-sys-secondary-container, rgba(103, 80, 164, .12));font-weight:600}.twisty{flex:0 0 auto;--mat-icon-button-state-layer-size: 28px;--mat-icon-button-icon-size: 18px}.twisty mat-icon{font-size:18px;width:18px;height:18px}.twisty-spacer{flex:0 0 auto;width:28px}.presence-check{flex:0 0 auto;margin-right:2px}.tree-label{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis}.tree-label.absent{color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .55));font-style:italic}.row-btn{flex:0 0 auto;--mat-icon-button-state-layer-size: 28px;--mat-icon-button-icon-size: 18px}.row-btn mat-icon{font-size:18px;width:18px;height:18px}.row-btn.remove{visibility:hidden}.tree-row:hover .row-btn.remove,.tree-row.selected .row-btn.remove{visibility:visible}.detail{flex:1 1 auto;min-width:0;overflow:auto}.breadcrumb{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;margin:4px 0 12px;font-size:1.15rem}.crumb-current{font-weight:600}.crumb-link{font-size:inherit;padding:0}.crumb-sep{color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .5))}.fields{display:flex;flex-direction:column;gap:4px}.empty{color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));font-style:italic}.item-list{list-style:none;margin:0 0 8px;padding:0}.item-row{display:flex;align-items:center;gap:4px}.item-link{min-width:0;padding:4px 0;border:0;background:none;text-align:left;cursor:pointer;color:var(--mat-sys-primary, #6750a4);font:inherit;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.item-link:hover{text-decoration:underline}.remove-item{flex:0 0 auto}.list-actions{display:flex;justify-content:flex-end}.group-body{display:flex;align-items:flex-start;gap:24px}.group-body .fields{flex:1 1 auto;min-width:0}.child-links{flex:0 0 200px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding-left:16px;border-left:1px solid var(--mat-sys-outline-variant, rgba(0, 0, 0, .12))}.child-links-title{margin:0 0 4px;font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6))}.child-link{display:inline-flex;align-items:center;gap:2px}.child-link mat-icon{font-size:18px;width:18px;height:18px}\n"] }]
+        }], propDecorators: { schema: [{
+                type: Input,
+                args: [{ required: true }]
+            }], formGroup: [{
+                type: Input,
+                args: [{ required: true }]
+            }], editable: [{
+                type: Input
+            }] } });
+
+/*
+ * Public API Surface of ng-form-foundry
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CASE_KEY, ConfigEditorComponent, DynamicRecursiveFormComponent, LeafEnumRendererComponent, LeafListRendererComponent, LeafRendererComponent, NodeGroupListRendererComponent, buildControl, buildFormFromSchema, defineSchema };
+//# sourceMappingURL=ng-form-foundry.mjs.map