ng-form-foundry 0.0.1 → 0.2.1

package/src/lib/dynamic-recursive-form/leaf-enum-renderer/leaf-enum-renderer.component.html

@@ -1,8 +0,0 @@
-<mat-form-field [appearance]="editable ? 'fill' : 'outline'">
-  <mat-label>{{ leafEnum.label ?? leafEnum.name }}</mat-label>
-  <mat-select [formControl]="control" value="{{ control.value }}">
-    @for (option of leafEnum.enum; track $index) {
-      <mat-option [value]="option">{{ leafEnum.enumLabel?.[$index] ?? option }}</mat-option>
-    }
-  </mat-select>
-</mat-form-field>

package/src/lib/dynamic-recursive-form/leaf-enum-renderer/leaf-enum-renderer.component.scss

@@ -1,9 +0,0 @@
-:host {
-  flex: 1;
-  min-width: 0;
-  width: 100%;
-}
-
-mat-form-field {
-  width: 100%;
-}

package/src/lib/dynamic-recursive-form/leaf-enum-renderer/leaf-enum-renderer.component.spec.ts

@@ -1,22 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { LeafEnumRendererComponent } from './leaf-enum-renderer.component';
-
-describe('DrfLeafEnumRendererComponent', () => {
-  let component: LeafEnumRendererComponent;
-  let fixture: ComponentFixture<LeafEnumRendererComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [LeafEnumRendererComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(LeafEnumRendererComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/dynamic-recursive-form/leaf-enum-renderer/leaf-enum-renderer.component.ts

@@ -1,21 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { LeafEnum } from '../../types/dynamic-recursive.types';
-import { FormControl, ReactiveFormsModule } from '@angular/forms';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatSelectModule } from '@angular/material/select';
-
-@Component({
-  selector: 'nff-leaf-enum-renderer',
-  standalone: true,
-  imports: [ReactiveFormsModule, MatFormFieldModule, MatSelectModule],
-  templateUrl: './leaf-enum-renderer.component.html',
-  styleUrl: './leaf-enum-renderer.component.scss',
-})
-export class LeafEnumRendererComponent {
-  @Input() leafEnum!: LeafEnum;
-  @Input() initialValue!: string;
-  @Input() control = new FormControl();
-  @Input() removable: boolean = false;
-  @Input() remove: any;
-  @Input() editable: boolean = true;
-}

package/src/lib/dynamic-recursive-form/leaf-list-renderer/leaf-list-renderer.component.html

@@ -1,31 +0,0 @@
-@if (formArray && leaf_) {
-  <div class="fields">
-    @for (control of formArray.controls; track $index) {
-      <div class="field-item">
-        <nff-anon-leaf-renderer
-          [AnonLeaf]="leaf_" [control]="control"
-          [removable]="minItems == null || formArray.length > minItems"
-          [index]="$index"
-          [editable]="editable"
-          [label]="leaf_.label ?? leaf_.name"
-          (remove)="removeItem($index)"
-        />
-        <div class="actions">
-          @if (formArray.length > minItems && editable) {
-            <button class="remove-button small-icon-button" matIconButton (click)="removeItem($index)">
-              <mat-icon matPrefix>delete</mat-icon>
-            </button>
-          }
-          @if ($last) {
-            @if (editable) {
-              <button class="add-button small-icon-button" matIconButton (click)="addItem()">
-                <mat-icon matPrefix>add</mat-icon>
-              </button>
-            }
-          }
-          <div class="actions-spacer"></div>
-        </div>
-      </div>
-    }
-  </div>
-}

package/src/lib/dynamic-recursive-form/leaf-list-renderer/leaf-list-renderer.component.scss

@@ -1,57 +0,0 @@
-@use '@angular/material' as mat;
-
-:host {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-}
-
-.fields-container {
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: baseline;
-}
-
-.field-item {
-  display: flex;
-  flex-direction: row;
-  gap: 8px;
-  align-items: center;
-}
-
-.actions {
-  z-index: 100;
-  display: flex;
-  flex-direction: column;    /* stack buttons vertically */
-  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);
-  @include mat.elevation(1);
-}
-
-.remove-button {
-  background-color: var(--mat-sys-error-container);
-  @include mat.elevation(1);
-}
-
-.title {
-  display: flex;
-  flex-direction: row;
-  gap: 8px;
-  align-items: center;
-}
-

package/src/lib/dynamic-recursive-form/leaf-list-renderer/leaf-list-renderer.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { LeafListRendererComponent } from './leaf-list-renderer.component';
-
-describe('DrfLeafListRendererComponent', () => {
-  let component: LeafListRendererComponent;
-  let fixture: ComponentFixture<LeafListRendererComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [LeafListRendererComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(LeafListRendererComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/dynamic-recursive-form/leaf-list-renderer/leaf-list-renderer.component.ts

@@ -1,52 +0,0 @@
-import { Component, EventEmitter, inject, Input, OnInit, Output } from '@angular/core';
-import { LeafList } from '../../types/dynamic-recursive.types';
-import { FormControl } from '@angular/forms';
-import { MatIconModule } from '@angular/material/icon';
-import { AnonLeafRendererComponent } from '../anon-leaf-renderer/anon-leaf-renderer.component';
-import { MatButtonModule } from '@angular/material/button';
-import { MatDialog } from '@angular/material/dialog';
-import { MatPrefix } from '@angular/material/input';
-
-@Component({
-  selector: 'nff-leaf-list-renderer',
-  standalone: true,
-  imports: [
-    MatIconModule,
-    AnonLeafRendererComponent,
-    MatButtonModule,
-    MatPrefix,
-  ],
-  templateUrl: './leaf-list-renderer.component.html',
-  styleUrl: './leaf-list-renderer.component.scss',
-})
-export class LeafListRendererComponent implements OnInit {
-  @Input() leaf_!: LeafList;
-  @Input() initialValue!: number[] | string[] | boolean[];
-  @Input() formArray!: any;
-  @Input() editable: boolean = true;
-  @Input() minItems: number = 1;
-  @Output() message = new EventEmitter();
-
-  matDialog = inject(MatDialog);
-
-  ngOnInit() {
-    if (this.initialValue) {
-      this.formArray.patchValue(this.initialValue);
-    }
-  }
-
-  removeItem($index: number) {
-    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());
-  }
-}

package/src/lib/dynamic-recursive-form/leaf-renderer/leaf-renderer.component.html

@@ -1,17 +0,0 @@
-@if ('name' in leaf_) {
-  @if (leaf_.type === 'string') {
-    <mat-form-field [appearance]="editable ? 'fill' : 'outline'">
-      <mat-label>{{ leaf_.label ?? leaf_.name }}</mat-label>
-      <input [readonly]="!editable" matInput type="text" [formControl]="control">
-    </mat-form-field>
-  } @else if (leaf_.type === 'number') {
-    <mat-form-field [appearance]="editable ? 'fill' : 'outline'">
-      <mat-label>{{ leaf_.label ?? leaf_.name  }}</mat-label>
-      <input [readonly]="!editable"  matInput type="number" [formControl]="control">
-    </mat-form-field>
-  } @else if (leaf_.type === 'boolean') {
-    <mat-checkbox [formControl]="control">{{ leaf_.label ?? leaf_.name }}</mat-checkbox>
-  } @else if (leaf_.type === 'enum') {
-    <nff-leaf-enum-renderer [editable]="editable" [leafEnum]="leaf_" [control]="control"></nff-leaf-enum-renderer>
-  }
-}

package/src/lib/dynamic-recursive-form/leaf-renderer/leaf-renderer.component.scss

@@ -1,11 +0,0 @@
-:host {
-  display: flex;
-  flex: 1 1 0;
-  min-width: 20%;
-}
-
-mat-form-field {
-  flex: 1;
-  min-width: 0;
-}
-

package/src/lib/dynamic-recursive-form/leaf-renderer/leaf-renderer.component.spec.ts

@@ -1,22 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { LeafRendererComponent } from './leaf-renderer.component';
-
-describe('DrfLeafRendererComponent', () => {
-  let component: LeafRendererComponent;
-  let fixture: ComponentFixture<LeafRendererComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [LeafRendererComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(LeafRendererComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/dynamic-recursive-form/leaf-renderer/leaf-renderer.component.ts

@@ -1,41 +0,0 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { AnonLeaf, Leaf } from '../../types/dynamic-recursive.types';
-import { FormControl, ReactiveFormsModule } from '@angular/forms';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatSelectModule } from '@angular/material/select';
-import { MatIconModule } from '@angular/material/icon';
-import { MatButtonModule } from '@angular/material/button';
-import { LeafEnumRendererComponent } from '../leaf-enum-renderer/leaf-enum-renderer.component';
-
-@Component({
-  selector: 'nff-leaf-renderer',
-  standalone: true,
-  imports: [
-    MatFormFieldModule,
-    ReactiveFormsModule,
-    MatInputModule,
-    MatCheckboxModule,
-    MatSelectModule,
-    MatIconModule,
-    MatButtonModule,
-    LeafEnumRendererComponent,
-  ],
-  templateUrl: './leaf-renderer.component.html',
-  styleUrl: './leaf-renderer.component.scss',
-})
-export class LeafRendererComponent implements OnInit {
-  @Input() leaf_!: Leaf | AnonLeaf;
-  @Input() control: FormControl = new FormControl();
-  @Input() initialValue?: any;
-  @Input() removable: boolean = false;
-  @Input() editable = true;
-  @Output() remove: EventEmitter<number> = new EventEmitter();
-
-  ngOnInit(): void {
-    if (this.initialValue) {
-      this.control.patchValue(this.initialValue);
-    }
-  }
-}

package/src/lib/dynamic-recursive-form/node-group-list-renderer/node-group-list-renderer.component.html

@@ -1,24 +0,0 @@
-@if (formArray && nodeGroupList) {
-  <div class="fields-container">
-      @for (group of formArray.controls; track $index) {
-        <div class="field-item">
-        <nff-dynamic-recursive-form
-          [schema]="nodeGroupList.type"
-          [formGroup]="asFormGroup(group)"
-          [title]="getTitle($index)"
-          [index]="$index"
-          [removable]="formArray.length > minItems"
-          (remove)="removeItem($index)"
-          [editable]="editable"
-        />
-          <div class="actions">
-            <button matIconButton class="small-icon-button"
-                    matTooltip=" + Add new {{ nodeGroupList.type.label ?? nodeGroupList.type.name  }}"
-                    (click)="addItem()">
-              <mat-icon>add</mat-icon>
-            </button>
-          </div>
-        </div>
-      }
-  </div>
-}

package/src/lib/dynamic-recursive-form/node-group-list-renderer/node-group-list-renderer.component.scss

@@ -1,48 +0,0 @@
-: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);
-}

package/src/lib/dynamic-recursive-form/node-group-list-renderer/node-group-list-renderer.component.spec.ts

@@ -1,22 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { NodeGroupListRendererComponent } from './node-group-list-renderer.component';
-
-describe('DrfNodeListRendererComponent', () => {
-  let component: NodeGroupListRendererComponent;
-  let fixture: ComponentFixture<NodeGroupListRendererComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [NodeGroupListRendererComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(NodeGroupListRendererComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/dynamic-recursive-form/node-group-list-renderer/node-group-list-renderer.component.ts

@@ -1,101 +0,0 @@
-import {
-  AfterViewInit,
-  ChangeDetectorRef,
-  Component,
-  EventEmitter,
-  forwardRef,
-  inject,
-  Input,
-  OnInit,
-  Output,
-  QueryList,
-  ViewChildren
-} from '@angular/core';
-import { NodeGroupList } from '../../types/dynamic-recursive.types';
-import { FormArray, FormGroup } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { DynamicRecursiveFormComponent } from '../dynamic-recursive-form.component';
-import { buildFormFromSchema } from '../../core/dynamic-recursive-forms-builder';
-import { MatTooltipModule } from '@angular/material/tooltip';
-
-@Component({
-  selector: 'nff-node-group-list-renderer',
-  standalone: true,
-  imports: [
-    forwardRef(() => DynamicRecursiveFormComponent),
-    MatButtonModule,
-    MatIconModule,
-    MatTooltipModule,
-  ],
-  templateUrl: './node-group-list-renderer.component.html',
-  styleUrl: './node-group-list-renderer.component.scss',
-})
-export class NodeGroupListRendererComponent implements OnInit, AfterViewInit {
-  @Input() nodeGroupList!: NodeGroupList;
-  @Input() initialValue!: number[] | string[] | boolean[];
-  @Input() formArray = new FormArray<any>([]);
-  @Input() editable: boolean = true;
-  @Input() minItems: number = 1;
-  @Input() maxItems: number = 1;
-  @Output() message = new EventEmitter();
-  @ViewChildren(DynamicRecursiveFormComponent) items!: QueryList<DynamicRecursiveFormComponent>;
-
-  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: number) {
-    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() {
-    this.formArray.push(buildFormFromSchema(this.nodeGroupList.type, null));
-  }
-
-  setLastEditable() {
-    const lastItem = this.items.last;
-    if (lastItem) {
-      lastItem.editable = this.editable;
-    }
-    this.cdr.detectChanges();
-  }
-
-  asFormGroup(group: any) {
-    return group as FormGroup;
-  }
-
-  getTitle($index: number) {
-    let title = `${this.nodeGroupList.type.label ?? this.nodeGroupList.type.name}`;
-    if (this.formArray.length > 1) {
-      return `${title} #${$index + 1}`;
-    }
-    else {
-      return title;
-    }
-
-  }
-}

package/src/lib/types/dynamic-recursive.types.ts

@@ -1,97 +0,0 @@
-import { FormArray, FormControl, FormGroup } from '@angular/forms';
-
-export type LeafRuntimeType<T> = T extends 'string'
-  ? string
-  : T extends 'number'
-    ? number
-    : T extends 'boolean'
-      ? boolean
-      : T extends 'enum'
-        ? string | number
-        : never;
-
-export type LeafBase = {
-  kind: 'leaf';
-  name: string;
-  required?: true | undefined;
-  label?: string;
-  description?: string;
-};
-
-export type AnonLeaf = {
-  [K in Leaf['type']]: { type: K };
-}[Leaf['type']];
-
-export type LeafString = LeafBase & {
-  type: 'string';
-  default?: LeafRuntimeType<'string'>;
-};
-export type LeafNumber = LeafBase & {
-  type: 'number';
-  default?: LeafRuntimeType<'number'>;
-};
-export type LeafBoolean = LeafBase & {
-  type: 'boolean';
-  default?: LeafRuntimeType<'boolean'>;
-};
-export type LeafEnum = LeafBase & {
-  type: 'enum';
-  default?: LeafRuntimeType<'enum'>;
-  enumLabel?: string[];
-  enum: LeafRuntimeType<'enum'>[];
-};
-
-export type Appearance = {
-  flatten?: boolean;
-  noBorder?: boolean;
-}
-
-export type Leaf = LeafString | LeafNumber | LeafBoolean | LeafEnum;
-
-export type LeafList<TKind extends Leaf['type'] = Leaf['type']> = {
-  kind: 'leafList';
-  label?: string;
-  name: string;
-  description?: string;
-  default?: Exclude<Leaf['default'], undefined>[];
-  type: TKind;
-  minItems?: number;
-  maxItems?: number;
-};
-
-export type NodeGroupList = {
-  kind: 'nodeGroupList';
-  name: string;
-  label?: string;
-  description?: string;
-  type: NodeGroup;
-  minItems?: number;
-  maxItems?: number;
-};
-
-export type NodeGroup = {
-  kind: 'nodeGroup';
-  name: string;
-  subType?: string;
-  label?: string;
-  root?: boolean;
-  description?: string;
-  children: Record<string, NodeType>;
-  appearance?: Appearance;
-};
-
-export type NodeType = Leaf | LeafList | NodeGroup | NodeGroupList;
-export type DFormControl<T extends NodeType> = T extends Leaf
-  ? FormControl<LeafRuntimeType<T['type']>>
-  : T extends LeafList
-    ? FormArray<FormControl<LeafRuntimeType<T['type']>>>
-    : T extends NodeGroup
-      ? DFormGroup<T>
-      : T extends NodeGroupList
-        ? FormArray<DFormGroup<T['type']>>
-        : never;
-
-export type FormGroupType<T extends NodeGroup> = {
-  [TChild in keyof T['children']]: DFormControl<T['children'][TChild]>;
-};
-export type DFormGroup<T extends NodeGroup> = FormGroup<FormGroupType<T>>;