@dynamic-field-kit/angular 1.2.10 → 1.4.0

package/src/components/MultiFieldInput.ts

@@ -1,35 +1,116 @@
-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,
+  resolveDisabled,
+  resolveOptions,
+  resolveReadOnly,
+  validateField,
+  validateFields,
+  FieldDescription,
+  Properties,
+} from '@dynamic-field-kit/core';
+import type { ValidationResult } 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]"
+          [options]="getResolvedOptions(field)"
+          [disabled]="getDisabled(field)"
+          [readOnly]="getReadOnly(field)"
+          [error]="getError(field)"
+          (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: groupTrackBy(field)
+            "
+            style="display: flex; align-items: flex-start; gap: 8px;"
+          >
+            <div style="flex: 1">
+              <dfk-multi-field-input
+                [fieldDescriptions]="field.fields"
+                [properties]="item"
+                [rootData]="rootData ?? data"
+                (onChange)="onGroupItemChange(field, i, $event)"
+              ></dfk-multi-field-input>
+            </div>
+            <button
+              type="button"
+              [attr.aria-label]="
+                (field.removeLabel || 'Remove') +
+                ' ' +
+                (field.label || field.name) +
+                ' ' +
+                (i + 1)
+              "
+              (click)="onGroupItemRemove(field, i)"
+              [disabled]="!canRemoveItem(field)"
+            >
+              {{ field.removeLabel || 'Remove' }}
+            </button>
+          </div>
+          <button
+            type="button"
+            [attr.aria-label]="
+              (field.addLabel || 'Add') + ' ' + (field.label || field.name)
+            "
+            (click)="onGroupItemAdd(field)"
+            [disabled]="!canAddItem(field)"
+          >
+            {{ field.addLabel || 'Add' }}
+          </button>
+        </div>
+      </ng-container>
     </div>
   `,
 })
@@ -37,16 +118,86 @@ export class MultiFieldInput implements OnInit, OnChanges {
   @Input() fieldDescriptions: FieldDescription[] = [];
   @Input() properties?: Properties;
   @Output() onChange = new EventEmitter<Properties>();
+  @Output() validityChange = new EventEmitter<ValidationResult>();
   @Input() layout: LayoutConfig = 'column';
+  // Top-level form data, threaded down through repeatable groups so a nested
+  // field's appearCondition/computeValue can read the root form. Omitted at
+  // the top level, where the form's own data is the root.
+  @Input() rootData?: Properties;
 
   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;
+  }
+
+  private groupTrackByCache = new WeakMap<
+    FieldDescription,
+    (index: number, item: Properties) => unknown
+  >();
+
+  // Returns a stable trackBy per group field: item[keyField] when configured,
+  // else the index. Cached by field reference so the template hands Angular the
+  // same function each change-detection pass.
+  groupTrackBy(
+    field: FieldDescription
+  ): (index: number, item: Properties) => unknown {
+    let fn = this.groupTrackByCache.get(field);
+    if (!fn) {
+      fn = (index: number, item: Properties) =>
+        field.keyField ? item[field.keyField] ?? index : index;
+      this.groupTrackByCache.set(field, fn);
+    }
+    return fn;
+  }
+
   ngOnInit() {
+    this.updateIsMobile();
     this.init();
   }
 
@@ -54,22 +205,127 @@ 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;
+    if (
+      typeof window !== 'undefined' &&
+      typeof window.matchMedia === 'function'
+    ) {
+      this.isMobile = window.matchMedia(
+        `(max-width: ${breakpoint - 1}px)`
+      ).matches;
+    } else {
+      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.rootData
+      );
     }
     this.updateVisibleFields();
+    this.validityChange.emit(
+      validateFields(this.fieldDescriptions, this.data, this.rootData)
+    );
   }
 
   private updateVisibleFields() {
+    const root = this.rootData ?? this.data;
     this.visibleFields = this.fieldDescriptions.filter(
-      (f) => !f.appearCondition || f.appearCondition(this.data)
+      (f) => !f.appearCondition || f.appearCondition(this.data, root)
+    );
+  }
+
+  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[]) : [];
+  }
+
+  getResolvedOptions(field: FieldDescription): Properties[] | undefined {
+    return resolveOptions(field, this.data, this.rootData);
+  }
+
+  getDisabled(field: FieldDescription): boolean {
+    return resolveDisabled(field, this.data, this.rootData);
+  }
+
+  getReadOnly(field: FieldDescription): boolean {
+    return resolveReadOnly(field, this.data, this.rootData);
+  }
+
+  getError(field: FieldDescription): string[] | undefined {
+    if (this.getDisabled(field)) {
+      return undefined;
+    }
+    const errors = validateField(
+      field,
+      this.data[field.name],
+      this.data,
+      this.rootData
     );
+    return errors.length > 0 ? errors : undefined;
+  }
+
+  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)],
+    });
   }
 
-  onFieldChange(event: { value: any; key: string }) {
-    this.data = { ...this.data, [event.key]: event.value };
+  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.rootData
+    );
     this.updateVisibleFields();
     this.onChange.emit(this.data);
+    this.validityChange.emit(
+      validateFields(this.fieldDescriptions, this.data, this.rootData)
+    );
+    this.cdr.markForCheck();
   }
 }

package/src/fieldRegistryToken.ts

@@ -0,0 +1,15 @@
+import { InjectionToken } from '@angular/core';
+import { FieldRegistry, fieldRegistry } from '@dynamic-field-kit/core';
+
+// Injecting this token yields the process-wide singleton by default, so code
+// that never provides it keeps working. Provide it on a component/route to give
+// that subtree an isolated set of renderers:
+//
+//   providers: [{ provide: FIELD_REGISTRY, useValue: myScopedRegistry }]
+export const FIELD_REGISTRY = new InjectionToken<FieldRegistry>(
+  'dfk.FieldRegistry',
+  {
+    providedIn: 'root',
+    factory: () => fieldRegistry,
+  }
+);

package/src/layout/defaultLayouts.ts

@@ -1,38 +1,70 @@
 import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, Input, TemplateRef } from '@angular/core';
+import { layoutRegistry } from './layoutRegistry';
 
 @Component({
   selector: 'dfk-column-layout',
   standalone: true,
   imports: [CommonModule],
   template: `<div
-    style="display:flex;flex-direction:column;gap:var(--dfk-gap,12px)"
+    [style.display]="'flex'"
+    [style.flexDirection]="'column'"
+    [style.gap]="gap + 'px'"
   >
-    <ng-content></ng-content>
+    <ng-container *ngTemplateOutlet="template"></ng-container>
   </div>`,
 })
-export class ColumnLayout {}
+export class ColumnLayout {
+  @Input() config?: { gap?: number };
+  @Input() template!: TemplateRef<unknown>;
+  get gap() {
+    return this.config?.gap ?? 12;
+  }
+}
 
 @Component({
   selector: 'dfk-row-layout',
   standalone: true,
   imports: [CommonModule],
   template: `<div
-    style="display:flex;flex-direction:row;gap:var(--dfk-gap,12px)"
+    [style.display]="'flex'"
+    [style.flexDirection]="'row'"
+    [style.gap]="gap + 'px'"
   >
-    <ng-content></ng-content>
+    <ng-container *ngTemplateOutlet="template"></ng-container>
   </div>`,
 })
-export class RowLayout {}
+export class RowLayout {
+  @Input() config?: { gap?: number };
+  @Input() template!: TemplateRef<unknown>;
+  get gap() {
+    return this.config?.gap ?? 12;
+  }
+}
 
 @Component({
   selector: 'dfk-grid-layout',
   standalone: true,
   imports: [CommonModule],
   template: `<div
-    style="display:grid;grid-template-columns:repeat(var(--dfk-columns,2),1fr);gap:var(--dfk-gap,12px)"
+    [style.display]="'grid'"
+    [style.gridTemplateColumns]="'repeat(' + columns + ', 1fr)'"
+    [style.gap]="gap + 'px'"
   >
-    <ng-content></ng-content>
+    <ng-container *ngTemplateOutlet="template"></ng-container>
   </div>`,
 })
-export class GridLayout {}
+export class GridLayout {
+  @Input() config?: { columns?: number; gap?: number };
+  @Input() template!: TemplateRef<unknown>;
+  get columns() {
+    return this.config?.columns ?? 2;
+  }
+  get gap() {
+    return this.config?.gap ?? 12;
+  }
+}
+
+layoutRegistry.register('column', ColumnLayout);
+layoutRegistry.register('row', RowLayout);
+layoutRegistry.register('grid', GridLayout);

package/src/layout/index.ts

@@ -1 +1,2 @@
 export * from './defaultLayouts';
+export { layoutRegistry, LayoutRegistry } from './layoutRegistry';

package/src/layout/layoutRegistry.ts

@@ -0,0 +1,25 @@
+import { Type } from '@angular/core';
+
+export type LayoutRenderer<C = unknown> = (props: {
+  children: unknown[];
+  config?: C;
+}) => unknown;
+
+export type AngularLayoutComponent = Type<unknown>;
+
+export class LayoutRegistry {
+  private layouts = new Map<string, AngularLayoutComponent>();
+
+  register(type: string, component: AngularLayoutComponent): void {
+    if (this.layouts.has(type)) {
+      console.warn(`[dynamic-field-kit] Layout "${type}" already exists`);
+    }
+    this.layouts.set(type, component);
+  }
+
+  get(type: string): AngularLayoutComponent | undefined {
+    return this.layouts.get(type);
+  }
+}
+
+export const layoutRegistry = new LayoutRegistry();

package/src/public-api.ts

@@ -1,24 +1,40 @@
-// public-api.ts
-
-// Components
-export * from './components/BaseInput';
-export * from './components/DynamicInput';
-export * from './components/FieldInput';
-export * from './components/MultiFieldInput';
-
-// Layout
-export * from './layout';
-export * from './types/layout';
-
-// Module
-export * from './lib/dynamic-field-kit.module';
-
-// Re-export types from core (only type, not export * )
-export type {
-  FieldTypeKey,
-  FieldDescription,
-  FieldRendererProps,
-} from '@dynamic-field-kit/core';
-
-// Optional: expose registry for advanced use cases, but not required for basic usage
-export { fieldRegistry } from '@dynamic-field-kit/core';
+// public-api.ts
+
+// Components
+export * from './components/BaseInput';
+export * from './components/DynamicInput';
+export * from './components/FieldInput';
+export * from './components/MultiFieldInput';
+
+// Layout
+export * from './layout';
+export * from './types/layout';
+
+// Module
+export * from './lib/dynamic-field-kit.module';
+
+// Re-export types from core (only type, not export * )
+export type {
+  FieldDescription,
+  FieldRendererProps,
+  FieldTypeKey,
+} from '@dynamic-field-kit/core';
+
+// Optional: expose registry for advanced use cases, but not required for basic usage
+export { fieldRegistry, FieldRegistry } from '@dynamic-field-kit/core';
+
+export {
+  validateField,
+  validateFieldAsync,
+  validateFields,
+  validateFieldsAsync,
+  resolveDisabled,
+  resolveReadOnly,
+  resolveOptions,
+  validators,
+} from '@dynamic-field-kit/core';
+export type { ValidationResult } from '@dynamic-field-kit/core';
+
+// Scoped registry: provide FIELD_REGISTRY on a component/route to give that
+// subtree an isolated set of renderers.
+export { FIELD_REGISTRY } from './fieldRegistryToken';

package/src/types/layout.ts

@@ -1 +1,14 @@
-export type LayoutConfig = 'column' | 'row' | 'grid';
+// Layout config types live in @dynamic-field-kit/core so the contract stays
+// identical across every framework adapter. Re-exported here (with the
+// historical Angular ...Config aliases) to preserve existing import paths.
+import type { BaseLayout, ResponsiveLayout } from '@dynamic-field-kit/core';
+
+export type {
+  ColumnLayoutConfig,
+  RowLayoutConfig,
+  GridLayoutConfig,
+  LayoutConfig,
+} from '@dynamic-field-kit/core';
+
+export type BaseLayoutConfig = BaseLayout;
+export type ResponsiveLayoutConfig = ResponsiveLayout;