@dynamic-field-kit/angular 1.2.10 → 1.3.3

package/src/components/DynamicInput.ts

@@ -1,27 +1,44 @@
 import { CommonModule } from '@angular/common';
 import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
   Component,
   ComponentRef,
-  Input,
-  Output,
   EventEmitter,
-  ViewChild,
-  ViewContainerRef,
+  Input,
   OnChanges,
-  AfterViewInit,
   OnDestroy,
+  Output,
   SimpleChanges,
   Type,
-  SimpleChange,
+  ViewChild,
+  ViewContainerRef,
 } from '@angular/core';
 import { fieldRegistry, FieldTypeKey } from '@dynamic-field-kit/core';
 import { Subscription } from 'rxjs';
 import { BaseInputComponent } from './BaseInput';
 
+const KNOWN_PROPS = [
+  'value',
+  'label',
+  'placeholder',
+  'required',
+  'disabled',
+  'options',
+  'className',
+  'description',
+  'errorMessage',
+  'acceptFile',
+  'maxLength',
+  'minNumber',
+  'maxNumber',
+] as const;
+
 @Component({
   selector: 'dfk-dynamic-input',
   standalone: true,
   imports: [CommonModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
   template: `<div #host style="display: contents;"></div>`,
 })
 export class DynamicInput
@@ -29,160 +46,179 @@ export class DynamicInput
   implements OnChanges, AfterViewInit, OnDestroy
 {
   @Input() type!: FieldTypeKey;
-  @Output() override valueChange = new EventEmitter<any>();
-  @Output() onChange = new EventEmitter<any>(); // backward compat
+  @Output() override valueChange = new EventEmitter<unknown>();
+  @Output() onChange = new EventEmitter<unknown>();
 
   @ViewChild('host', { read: ViewContainerRef, static: false })
   host!: ViewContainerRef;
-  private compRef?: ComponentRef<any>;
-  private inputInstance?: any;
+  private compRef?: ComponentRef<unknown>;
+  private inputInstance?: unknown;
   private subscriptions: Subscription[] = [];
 
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes['type'] && !changes['type'].firstChange && this.host) {
-      this.render();
-      return;
-    }
+  ngOnChanges(changes: SimpleChanges): void {
+    super.ngOnChanges(changes);
 
     if (this.inputInstance) {
-      this.applyKnownProps(this.inputInstance);
-
-      const childChanges: SimpleChanges = {};
-      for (const prop in changes) {
-        childChanges[prop] = new SimpleChange(
-          changes[prop].previousValue,
-          changes[prop].currentValue,
-          changes[prop].firstChange
-        );
-      }
+      this.syncPropsToInstance(changes);
+    }
 
-      this.inputInstance.ngOnChanges?.(childChanges);
-      this.compRef?.changeDetectorRef.detectChanges();
-    } else if (this.host) {
+    if (changes['type'] && !changes['type'].firstChange && this.host) {
+      this.render();
+    } else if (!this.inputInstance && this.host) {
       this.render();
     }
   }
 
-  ngAfterViewInit() {
+  ngAfterViewInit(): void {
     this.render();
   }
 
-  ngOnDestroy() {
+  ngOnDestroy(): void {
+    this.cleanup();
+  }
+
+  private syncPropsToInstance(changes: SimpleChanges): void {
+    if (!this.inputInstance) {
+      return;
+    }
+
+    for (const prop of KNOWN_PROPS) {
+      if (changes[prop] && this.inputInstance) {
+        (this.inputInstance as Record<string, unknown>)[prop] = (
+          this as Record<string, unknown>
+        )[prop];
+      }
+    }
+    this.compRef?.changeDetectorRef?.detectChanges();
+  }
+
+  private cleanup(): void {
     this.cleanupSubscriptions();
     this.cleanupRenderedComponent();
   }
 
-  private cleanupSubscriptions() {
+  private cleanupSubscriptions(): void {
     this.subscriptions.forEach((s) => s.unsubscribe());
     this.subscriptions = [];
   }
 
-  private render() {
-    const Renderer = fieldRegistry.get(this.type as FieldTypeKey);
-    this.cleanupRenderedComponent();
-    this.cleanupSubscriptions();
+  private cleanupRenderedComponent(): void {
+    this.compRef?.destroy();
+    this.compRef = undefined;
+    this.inputInstance = undefined;
+  }
+
+  private render(): void {
+    const Renderer = fieldRegistry.get(this.type);
+    this.cleanup();
     this.host.clear();
+
     if (!Renderer) {
-      const el = document.createElement('div');
-      el.textContent = `Unknown field type: ${this.type}`;
-      this.host.element.nativeElement.appendChild(el);
+      this.renderError(`Unknown field type: ${this.type}`);
       return;
     }
 
+    if (this.isComponentType(Renderer)) {
+      this.renderComponent(Renderer as unknown as Type<unknown>);
+    } else if (typeof Renderer === 'function') {
+      this.renderFallback(Renderer);
+    } else {
+      this.renderError(`Invalid renderer for type: ${this.type}`);
+    }
+  }
+
+  private isComponentType(renderer: unknown): boolean {
+    return (
+      typeof renderer === 'object' && renderer !== null && 'cmp' in renderer
+    );
+  }
+
+  private renderComponent(compType: Type<unknown>): void {
     try {
-      const compType = Renderer as unknown as Type<any>;
       const compRef = this.host.createComponent(compType);
       const instance = compRef.instance;
+
       if (!instance) {
-        throw new Error(`Failed to create instance for ${this.type}`);
+        this.renderError(`Failed to create instance for ${this.type}`);
+        return;
       }
 
-      this.applyKnownProps(instance);
+      this.applyProps(instance);
+      this.bindOutputs(instance);
 
-      const subA = this.bindOutput(instance, 'valueChange');
-      if (subA) {
-        this.subscriptions.push(subA);
-      }
-      const subB = this.bindOutput(instance, 'onValueChange');
-      if (subB) {
-        this.subscriptions.push(subB);
-      }
-
-      instance.changeDetectorRef?.detectChanges();
       this.compRef = compRef;
       this.inputInstance = instance;
       compRef.changeDetectorRef.detectChanges();
-    } catch (err) {
-      // Fallback to function renderer
-      try {
-        const props: any = {
-          value: this.value,
-          onValueChange: (v: any) => this.emitValue(v),
-          label: this.label,
-          placeholder: this.placeholder,
-          required: this.required,
-          options: this.options,
-          className: this.className,
-          description: this.description,
-          disabled: this.disabled,
-          errorMessage: this.errorMessage,
-        };
-        const out = (Renderer as (props: unknown) => unknown)(props);
-        if (typeof out === 'string') {
-          const el = document.createElement('div');
-          el.innerHTML = out;
-          this.host.element.nativeElement.appendChild(el);
-        }
-      } catch (e) {
+    } catch {
+      this.renderError(`Failed to render field: ${this.type}`);
+    }
+  }
+
+  private renderFallback(renderer: unknown): void {
+    try {
+      const props = this.getFallbackProps();
+      const result = (renderer as (props: unknown) => string)(props);
+
+      if (typeof result === 'string') {
         const el = document.createElement('div');
-        el.textContent = `Failed to render field: ${this.type}`;
+        el.innerHTML = result;
         this.host.element.nativeElement.appendChild(el);
       }
+    } catch {
+      this.renderError(`Failed to render field: ${this.type}`);
     }
   }
 
-  private applyKnownProps(instance: any) {
-    const knownProps = [
-      'value',
-      'label',
-      'placeholder',
-      'required',
-      'disabled',
-      'options',
-      'className',
-      'description',
-      'errorMessage',
-    ];
-    for (const prop of knownProps) {
-      if (prop in this && prop in instance) {
-        instance[prop] = (this as any)[prop];
+  private getFallbackProps(): Record<string, unknown> {
+    return {
+      value: this.value,
+      onValueChange: (v: unknown) => this.emitValue(v),
+      label: this.label ?? '',
+      placeholder: this.placeholder ?? '',
+      required: this.required ?? false,
+      options: this.options ?? [],
+      className: this.className ?? '',
+      description: this.description ?? '',
+      disabled: this.disabled ?? false,
+      errorMessage: this.errorMessage ?? '',
+    };
+  }
+
+  private applyProps(instance: unknown): void {
+    const instanceObj = instance as Record<string, unknown>;
+    for (const prop of KNOWN_PROPS) {
+      if (prop in this && prop in instanceObj) {
+        instanceObj[prop] = (this as Record<string, unknown>)[prop];
       }
     }
   }
 
-  private bindOutput(
-    instance: any,
-    outputName: 'valueChange' | 'onValueChange'
-  ): Subscription | undefined {
-    const output = instance?.[outputName];
-    if (!output || typeof output.subscribe !== 'function') {
-      return;
-    }
+  private bindOutputs(instance: unknown): void {
+    const outputNames: Array<'valueChange' | 'onValueChange'> = [
+      'valueChange',
+      'onValueChange',
+    ];
 
-    const sub = (output as EventEmitter<any>).subscribe((value) => {
-      this.emitValue(value);
-    });
-    return sub;
+    for (const outputName of outputNames) {
+      const output = (instance as Record<string, unknown>)[outputName];
+      if (output && typeof output === 'object' && 'subscribe' in output) {
+        const sub = (
+          output as { subscribe: (cb: (v: unknown) => void) => Subscription }
+        ).subscribe((value: unknown) => this.emitValue(value));
+        this.subscriptions.push(sub);
+      }
+    }
   }
 
-  private emitValue(value: any) {
+  private emitValue(value: unknown): void {
     this.valueChange.emit(value);
     this.onChange.emit(value);
   }
 
-  private cleanupRenderedComponent() {
-    this.compRef?.destroy();
-    this.compRef = undefined;
-    this.inputInstance = undefined;
+  private renderError(message: string): void {
+    const el = document.createElement('div');
+    el.textContent = message;
+    el.style.color = 'red';
+    this.host.element.nativeElement.appendChild(el);
   }
 }

package/src/components/FieldInput.ts

@@ -1,21 +1,31 @@
 import { NgIf } from '@angular/common';
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { FieldDescription, Properties } from '@dynamic-field-kit/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  Output,
+  SimpleChanges,
+} from '@angular/core';
+import { FieldDescription } from '@dynamic-field-kit/core';
 import { DynamicInput } from './DynamicInput';
 
 @Component({
   selector: 'dfk-field-input',
   standalone: true,
   imports: [NgIf, DynamicInput],
+  changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <dfk-dynamic-input
-      *ngIf="fieldDescription && renderInfos"
+      *ngIf="shouldRender"
       [type]="fieldDescription!.type"
       [value]="getFieldValue()"
       [label]="fieldDescription!.label"
       [placeholder]="fieldDescription!.placeholder"
       [required]="fieldDescription!.required"
-      [description]="fieldDescription!.description"
+      [description]="$any(fieldDescription!.description)"
       [options]="fieldDescription!.options"
       [className]="fieldDescription!.className"
       (valueChange)="
@@ -26,24 +36,32 @@ import { DynamicInput } from './DynamicInput';
     ></dfk-dynamic-input>
   `,
 })
-export class FieldInput {
+export class FieldInput implements OnChanges {
   @Input() fieldDescription?: FieldDescription;
-  @Input() renderInfos?: Properties;
+  @Input() value?: unknown;
   @Output() onValueChangeField = new EventEmitter<{
-    value: any;
+    value: unknown;
     key: string;
   }>();
 
-  getFieldValue() {
-    if (!this.fieldDescription || !this.renderInfos) {
+  shouldRender = false;
+
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  ngOnChanges(_changes: SimpleChanges): void {
+    this.shouldRender = !!this.fieldDescription;
+    this.cdr.markForCheck();
+  }
+
+  getFieldValue(): unknown {
+    if (!this.fieldDescription) {
       return undefined;
     }
 
-    const value = this.renderInfos[this.fieldDescription.name];
-    if (value === undefined && this.fieldDescription.type === 'text') {
+    if (this.value === undefined && this.fieldDescription.type === 'text') {
       return '';
     }
 
-    return value;
+    return this.value;
   }
 }

package/src/components/MultiFieldInput.ts

@@ -1,35 +1,95 @@
-import { NgClass, NgFor } from '@angular/common';
+import { NgClass, NgFor, NgIf } from '@angular/common';
 import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
-  Input,
-  Output,
   EventEmitter,
+  HostListener,
+  Input,
   OnChanges,
   OnInit,
+  Output,
   SimpleChanges,
 } from '@angular/core';
-import { FieldDescription, Properties } from '@dynamic-field-kit/core';
-import { LayoutConfig } from '../types/layout';
+import {
+  applyComputedValues,
+  canAddGroupItem,
+  canRemoveGroupItem,
+  createGroupItem,
+  FieldDescription,
+  Properties,
+} from '@dynamic-field-kit/core';
+import { BaseLayoutConfig, LayoutConfig } from '../types/layout';
 import { FieldInput } from './FieldInput';
 
+const DEFAULT_BREAKPOINT = 768;
+
 @Component({
   selector: 'dfk-multi-field-input',
   standalone: true,
-  imports: [NgClass, NgFor, FieldInput],
+  // Repeatable field groups render a nested <dfk-multi-field-input> per item
+  // (see the #groupTpl below), so this component imports itself. That's the
+  // supported way to give a standalone component recursive template usage
+  // without a cross-file circular import between FieldInput and a separate
+  // group component (whose `imports` arrays are evaluated eagerly at module
+  // load time and would deadlock on an actual circular module reference).
+  imports: [NgClass, NgFor, NgIf, FieldInput, MultiFieldInput],
+  changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <div
-      class="flex flex-col gap-3 p-4 border rounded-lg bg-gray-50"
+      class="p-4 border rounded-lg bg-gray-50"
       [ngClass]="{
-        'flex-row gap-3': layout === 'row',
-        'grid grid-cols-2 gap-3': layout === 'grid'
+        'flex flex-col': resolvedLayoutType === 'column',
+        'flex flex-row': resolvedLayoutType === 'row',
+        grid: resolvedLayoutType === 'grid'
       }"
+      [style.gap.px]="gap"
+      [style.gridTemplateColumns]="
+        resolvedLayoutType === 'grid' ? 'repeat(' + columns + ', 1fr)' : null
+      "
     >
-      <dfk-field-input
-        *ngFor="let field of visibleFields; trackBy: trackByFn"
-        [fieldDescription]="field"
-        [renderInfos]="data"
-        (onValueChangeField)="onFieldChange($event)"
-      ></dfk-field-input>
+      <ng-container *ngFor="let field of visibleFields; trackBy: trackByFn">
+        <dfk-field-input
+          *ngIf="!field.fields"
+          [fieldDescription]="field"
+          [value]="data[field.name]"
+          (onValueChangeField)="onFieldChange($event)"
+        ></dfk-field-input>
+
+        <div *ngIf="field.fields" [class]="field.className">
+          <div *ngIf="field.label">{{ field.label }}</div>
+          <div
+            *ngFor="
+              let item of getItems(field);
+              let i = index;
+              trackBy: trackByIndex
+            "
+            style="display: flex; align-items: flex-start; gap: 8px;"
+          >
+            <div style="flex: 1">
+              <dfk-multi-field-input
+                [fieldDescriptions]="field.fields"
+                [properties]="item"
+                (onChange)="onGroupItemChange(field, i, $event)"
+              ></dfk-multi-field-input>
+            </div>
+            <button
+              type="button"
+              (click)="onGroupItemRemove(field, i)"
+              [disabled]="!canRemoveItem(field)"
+            >
+              {{ field.removeLabel || 'Remove' }}
+            </button>
+          </div>
+          <button
+            type="button"
+            (click)="onGroupItemAdd(field)"
+            [disabled]="!canAddItem(field)"
+          >
+            {{ field.addLabel || 'Add' }}
+          </button>
+        </div>
+      </ng-container>
     </div>
   `,
 })
@@ -41,12 +101,57 @@ export class MultiFieldInput implements OnInit, OnChanges {
 
   data: Properties = {};
   visibleFields: FieldDescription[] = [];
+  private isMobile = false;
+
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  @HostListener('window:resize')
+  onWindowResize(): void {
+    const wasMobile = this.isMobile;
+    this.updateIsMobile();
+    if (wasMobile !== this.isMobile) {
+      this.cdr.markForCheck();
+    }
+  }
+
+  get resolvedLayout(): BaseLayoutConfig {
+    if (typeof this.layout === 'object' && this.layout.type === 'responsive') {
+      return this.isMobile ? this.layout.mobile : this.layout.desktop;
+    }
+    return this.layout as BaseLayoutConfig;
+  }
+
+  get resolvedLayoutType(): string {
+    const resolved = this.resolvedLayout;
+    return typeof resolved === 'string' ? resolved : resolved.type;
+  }
+
+  get gap(): number {
+    const resolved = this.resolvedLayout;
+    if (typeof resolved === 'object' && resolved.gap !== undefined) {
+      return resolved.gap;
+    }
+    return 12;
+  }
+
+  get columns(): number {
+    const resolved = this.resolvedLayout;
+    if (typeof resolved === 'object' && resolved.type === 'grid') {
+      return resolved.columns ?? 2;
+    }
+    return 2;
+  }
 
   trackByFn(index: number, field: FieldDescription): string | number {
     return field.name || index;
   }
 
+  trackByIndex(index: number): number {
+    return index;
+  }
+
   ngOnInit() {
+    this.updateIsMobile();
     this.init();
   }
 
@@ -54,9 +159,20 @@ export class MultiFieldInput implements OnInit, OnChanges {
     this.init();
   }
 
+  private updateIsMobile(): void {
+    const breakpoint =
+      typeof this.layout === 'object' && this.layout.type === 'responsive'
+        ? this.layout.breakpoint ?? DEFAULT_BREAKPOINT
+        : DEFAULT_BREAKPOINT;
+    this.isMobile =
+      typeof window !== 'undefined' && window.innerWidth < breakpoint;
+  }
+
   private init() {
     if (this.properties) {
-      this.data = { ...this.properties };
+      this.data = applyComputedValues(this.fieldDescriptions, {
+        ...this.properties,
+      });
     }
     this.updateVisibleFields();
   }
@@ -67,9 +183,56 @@ export class MultiFieldInput implements OnInit, OnChanges {
     );
   }
 
-  onFieldChange(event: { value: any; key: string }) {
-    this.data = { ...this.data, [event.key]: event.value };
+  onFieldChange(event: { value: unknown; key: string }): void {
+    this.commitData({ ...this.data, [event.key]: event.value });
+  }
+
+  getItems(field: FieldDescription): Properties[] {
+    const value = this.data[field.name];
+    return Array.isArray(value) ? (value as Properties[]) : [];
+  }
+
+  canAddItem(field: FieldDescription): boolean {
+    return canAddGroupItem(field, this.getItems(field));
+  }
+
+  canRemoveItem(field: FieldDescription): boolean {
+    return canRemoveGroupItem(field, this.getItems(field));
+  }
+
+  onGroupItemAdd(field: FieldDescription): void {
+    if (!this.canAddItem(field)) {
+      return;
+    }
+    const items = this.getItems(field);
+    this.commitData({
+      ...this.data,
+      [field.name]: [...items, createGroupItem(field)],
+    });
+  }
+
+  onGroupItemRemove(field: FieldDescription, index: number): void {
+    if (!this.canRemoveItem(field)) {
+      return;
+    }
+    const items = this.getItems(field).filter((_, i) => i !== index);
+    this.commitData({ ...this.data, [field.name]: items });
+  }
+
+  onGroupItemChange(
+    field: FieldDescription,
+    index: number,
+    next: Properties
+  ): void {
+    const items = this.getItems(field).slice();
+    items[index] = next;
+    this.commitData({ ...this.data, [field.name]: items });
+  }
+
+  private commitData(nextData: Properties): void {
+    this.data = applyComputedValues(this.fieldDescriptions, nextData);
     this.updateVisibleFields();
     this.onChange.emit(this.data);
+    this.cdr.markForCheck();
   }
 }