real rough conversion of old webui working add module and a little bit of routes no processor stuff yet

src/app/array-form/array-form.component.css

@@ -0,0 +1,3 @@
+.cdk-drag-placeholder {
+  opacity: 0;
+}

src/app/array-form/array-form.component.html

@@ -0,0 +1,48 @@
+@if (paramFormControl && paramInfo?.schema) {
+  @if (arrayValue) {
+    <div cdkDropList (cdkDropListDropped)="dropItem($event)" [cdkDropListData]="arrayValue">
+      <!-- <div *ngIf="arrayValue.length === 0" class="w-full h-6"></div> -->
+      @for (item of arrayValue; track trackByIndex(i, item); let i = $index) {
+        <div cdkDrag class="flex my-2 mr-2 items-center">
+          <label for="item-{{ i }}" class="text-gray-300 mr-1 hover:cursor-move" cdkDragHandle
+            >{{ i }}:</label
+          >
+          @if (paramInfo?.schema.items.type === 'object') {
+            <app-params-form
+              [paramsSchema]="paramInfo?.schema.items"
+              [data]="item"
+              (updated)="updateItem(i, $event)"
+            ></app-params-form>
+          } @else {
+            <!-- TODO(jwetzell): add input validation using info from schema -->
+            <input
+              id="item-{{ i }}"
+              class="pl-1 border-2 border-gray-200 border-solid rounded-sm text-gray-200"
+              [(ngModel)]="arrayValue[i]"
+              [placeholder]="paramInfo?.placeholder"
+              [ngModelOptions]="{ standalone: true }"
+              (input)="valueUpdated()"
+            />
+          }
+          @if (i >= minItems) {
+            <div
+              class="flex items-center justify-center hover:cursor-pointer bg-red-400 rounded-sm ml-1"
+              matTooltip="Remove"
+            >
+              <mat-icon (click)="deleteItem(i)">remove</mat-icon>
+            </div>
+          }
+        </div>
+      }
+    </div>
+  }
+  @if (!arrayIsMaxed()) {
+    <div
+      class="w-full bg-gray-400 flex items-center justify-center rounded-sm hover:cursor-pointer hover:bg-gray-300"
+      (click)="addItem()"
+      matTooltip="Add Item"
+    >
+      <mat-icon class="scale-100">add</mat-icon>
+    </div>
+  }
+}

src/app/array-form/array-form.component.ts

@@ -0,0 +1,116 @@
+import { CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';
+import { Component, inject, Input, OnInit } from '@angular/core';
+import { ParamInfo } from '../../models/form.model';
+import { ListsService } from '../../services/lists.service';
+import { SchemaService } from '../../services/schema.service';
+import { MatIconModule } from '@angular/material/icon';
+import { FormsModule } from '@angular/forms';
+import { ParamsFormComponent } from '../params-form/params-form.component';
+
+@Component({
+  selector: 'app-array-form',
+  templateUrl: './array-form.component.html',
+  styleUrl: './array-form.component.css',
+  imports: [MatIconModule, FormsModule, ParamsFormComponent, CdkDrag, CdkDropList],
+  standalone: true,
+})
+export class ArrayFormComponent implements OnInit {
+  @Input() paramFormControl?: any;
+  @Input() paramInfo?: ParamInfo;
+
+  minItems: number = 0;
+  maxItems: number = Number.MAX_SAFE_INTEGER;
+
+  arrayValue: any[] | undefined;
+
+  private schemaService = inject(SchemaService);
+  public listsService = inject(ListsService);
+
+  constructor() {}
+
+  ngOnInit(): void {
+    if (this.paramFormControl && this.paramInfo?.schema) {
+      if (!Array.isArray(this.paramFormControl.value)) {
+        this.arrayValue = this.schemaService.parseStringToArray(
+          this.paramFormControl.value,
+          this.paramInfo.schema,
+        );
+      } else {
+        this.arrayValue = this.paramFormControl.value;
+      }
+
+      if (this.paramInfo.schema.minItems) {
+        this.minItems = parseInt(this.paramInfo?.schema.minItems);
+      }
+
+      if (this.paramInfo.schema.maxItems) {
+        this.maxItems = parseInt(this.paramInfo?.schema.maxItems);
+      }
+    }
+    this.ensureArrayMin();
+  }
+
+  dropItem(event: CdkDragDrop<any | undefined>) {
+    if (this.arrayValue !== undefined) {
+      moveItemInArray(this.arrayValue, event.previousIndex, event.currentIndex);
+      this.valueUpdated();
+    }
+  }
+
+  deleteItem(index: number) {
+    this.arrayValue?.splice(index, 1);
+    this.valueUpdated();
+  }
+
+  ensureArrayMin() {
+    if (this.arrayValue === undefined) {
+      this.arrayValue = [];
+    }
+    if (this.arrayValue.length < this.minItems) {
+      for (let i = 0; i <= this.minItems - this.arrayValue.length; i += 1) {
+        this.arrayValue.push(null);
+      }
+      this.valueUpdated();
+    }
+  }
+
+  arrayIsMaxed() {
+    if (this.arrayValue) {
+      return this.arrayValue?.length >= this.maxItems;
+    }
+    return false;
+  }
+
+  addItem() {
+    if (this.arrayValue === undefined) {
+      this.arrayValue = [];
+    }
+
+    if (!this.arrayIsMaxed()) {
+      this.arrayValue.push(null);
+    }
+
+    this.valueUpdated();
+    // this.updated.emit(true);
+  }
+
+  valueUpdated() {
+    if (this.arrayValue) {
+      this.paramFormControl.setValue(
+        this.schemaService.cleanArray(this.arrayValue, this.paramInfo?.schema?.items),
+      );
+    }
+  }
+
+  trackByIndex(index: number, obj: any): any {
+    return index;
+  }
+
+  // NOTE(jwetzel): this is only needed for object item types
+  updateItem(index: number, value: any) {
+    if (this.arrayValue) {
+      this.arrayValue[index] = value;
+      this.valueUpdated();
+    }
+  }
+}