@dynamic-field-kit/angular 1.3.3 → 1.4.0

package/src/components/MultiFieldInput.ts

@@ -16,9 +16,15 @@ import {
   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';
 
@@ -53,6 +59,10 @@ const DEFAULT_BREAKPOINT = 768;
           *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>
 
@@ -62,7 +72,7 @@ const DEFAULT_BREAKPOINT = 768;
             *ngFor="
               let item of getItems(field);
               let i = index;
-              trackBy: trackByIndex
+              trackBy: groupTrackBy(field)
             "
             style="display: flex; align-items: flex-start; gap: 8px;"
           >
@@ -70,11 +80,19 @@ const DEFAULT_BREAKPOINT = 768;
               <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)"
             >
@@ -83,6 +101,9 @@ const DEFAULT_BREAKPOINT = 768;
           </div>
           <button
             type="button"
+            [attr.aria-label]="
+              (field.addLabel || 'Add') + ' ' + (field.label || field.name)
+            "
             (click)="onGroupItemAdd(field)"
             [disabled]="!canAddItem(field)"
           >
@@ -97,7 +118,12 @@ 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[] = [];
@@ -150,6 +176,26 @@ export class MultiFieldInput implements OnInit, OnChanges {
     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();
@@ -164,22 +210,37 @@ export class MultiFieldInput implements OnInit, OnChanges {
       typeof this.layout === 'object' && this.layout.type === 'responsive'
         ? this.layout.breakpoint ?? DEFAULT_BREAKPOINT
         : DEFAULT_BREAKPOINT;
-    this.isMobile =
-      typeof window !== 'undefined' && window.innerWidth < 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 = applyComputedValues(this.fieldDescriptions, {
-        ...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)
     );
   }
 
@@ -192,6 +253,31 @@ export class MultiFieldInput implements OnInit, OnChanges {
     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));
   }
@@ -230,9 +316,16 @@ export class MultiFieldInput implements OnInit, OnChanges {
   }
 
   private commitData(nextData: Properties): void {
-    this.data = applyComputedValues(this.fieldDescriptions, nextData);
+    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/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 {
-  FieldDescription,
-  FieldRendererProps,
-  FieldTypeKey,
-} 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,36 +1,14 @@
-export interface GridLayoutConfig {
-  type: 'grid';
-  columns?: number;
-  gap?: number;
-  width?: string;
-}
-
-export interface RowLayoutConfig {
-  type: 'row';
-  gap?: number;
-  width?: string;
-  flex?: boolean;
-}
-
-export interface ColumnLayoutConfig {
-  type: 'column';
-  gap?: number;
-  width?: string;
-}
-
-export type BaseLayoutConfig =
-  | 'column'
-  | 'row'
-  | 'grid'
-  | GridLayoutConfig
-  | RowLayoutConfig
-  | ColumnLayoutConfig;
-
-export interface ResponsiveLayoutConfig {
-  type: 'responsive';
-  mobile: BaseLayoutConfig;
-  desktop: BaseLayoutConfig;
-  breakpoint?: number;
-}
-
-export type LayoutConfig = BaseLayoutConfig | ResponsiveLayoutConfig;
+// 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;

package/test/DynamicInput.spec.ts

@@ -1,30 +1,230 @@
+import { TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DynamicInput } from '../src/components/DynamicInput';
+import { FIELD_REGISTRY } from '../src/fieldRegistryToken';
+import { beforeEach, describe, expect, it } from 'vitest';
+import {
+  DefaultsRendererComponent,
+  makeRegistry,
+  TextRendererComponent,
+  LegacyOutputRendererComponent,
+  fallbackRenderer,
+} from './helpers/renderers';
+
 describe('DynamicInput', () => {
-  it('should create DynamicInput', () => {
-    expect(true).toBe(true);
+  let registry: ReturnType<typeof makeRegistry>;
+
+  beforeEach(() => {
+    registry = makeRegistry();
+    TestBed.configureTestingModule({
+      imports: [DynamicInput],
+      providers: [{ provide: FIELD_REGISTRY, useValue: registry }],
+    });
+  });
+
+  it('renders a registered Angular component class', () => {
+    registry.register('text', TextRendererComponent as never);
+
+    const fixture = TestBed.createComponent(DynamicInput);
+    fixture.componentRef.setInput('type', 'text');
+    fixture.componentRef.setInput('value', 'hello');
+    fixture.detectChanges();
+
+    const input: HTMLInputElement =
+      fixture.nativeElement.querySelector('input.txt');
+    expect(input).not.toBeNull();
+    expect(input.value).toBe('hello');
+  });
+
+  it('does not clobber a renderer input default when DynamicInput was never given that prop', () => {
+    registry.register('defaults', DefaultsRendererComponent as never);
+
+    const fixture = TestBed.createComponent(DynamicInput);
+    fixture.componentRef.setInput('type', 'defaults');
+    // Deliberately never setInput('label', ...): DynamicInput was never
+    // given a value for `label`, so the renderer's own initializer
+    // (`label = 'None'`) must survive applyProps untouched.
+    fixture.detectChanges();
+
+    const label: HTMLElement = fixture.nativeElement.querySelector('.label');
+    expect(label.textContent).toBe('None');
+  });
+
+  it('forwards KNOWN_PROPS to the rendered instance', () => {
+    registry.register('text', TextRendererComponent as never);
+
+    const fixture = TestBed.createComponent(DynamicInput);
+    fixture.componentRef.setInput('type', 'text');
+    fixture.componentRef.setInput('placeholder', 'Your name');
+    fixture.componentRef.setInput('disabled', true);
+    fixture.detectChanges();
+
+    const input: HTMLInputElement =
+      fixture.nativeElement.querySelector('input.txt');
+    expect(input.placeholder).toBe('Your name');
+    expect(input.disabled).toBe(true);
   });
 
-  it('should accept type input', () => {
-    const type = 'text';
-    expect(type).toBe('text');
+  it('forwards extraProps verbatim', () => {
+    registry.register('text', TextRendererComponent as never);
+
+    const fixture = TestBed.createComponent(DynamicInput);
+    fixture.componentRef.setInput('type', 'text');
+    fixture.componentRef.setInput('extraProps', { hint: 'be brief' });
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('.hint').textContent).toBe(
+      'be brief'
+    );
   });
 
-  it('should have valueChange output', () => {
-    const hasOutput = true;
-    expect(hasOutput).toBe(true);
+  it('syncs prop changes to an already-rendered instance', () => {
+    registry.register('text', TextRendererComponent as never);
+
+    const fixture = TestBed.createComponent(DynamicInput);
+    fixture.componentRef.setInput('type', 'text');
+    fixture.componentRef.setInput('value', 'first');
+    fixture.detectChanges();
+
+    fixture.componentRef.setInput('value', 'second');
+    fixture.detectChanges();
+
+    const input: HTMLInputElement =
+      fixture.nativeElement.querySelector('input.txt');
+    expect(input.value).toBe('second');
   });
 
-  it('should have onChange output for backward compatibility', () => {
-    const hasOutput = true;
-    expect(hasOutput).toBe(true);
+  it('emits valueChange and onChange when the renderer emits valueChange', () => {
+    registry.register('text', TextRendererComponent as never);
+
+    const fixture = TestBed.createComponent(DynamicInput);
+    fixture.componentRef.setInput('type', 'text');
+    fixture.detectChanges();
+
+    const seen: unknown[] = [];
+    const legacy: unknown[] = [];
+    fixture.componentInstance.valueChange.subscribe((v) => seen.push(v));
+    fixture.componentInstance.onChange.subscribe((v) => legacy.push(v));
+
+    const input: HTMLInputElement =
+      fixture.nativeElement.querySelector('input.txt');
+    input.value = 'typed';
+    input.dispatchEvent(new Event('input'));
+
+    expect(seen).toEqual(['typed']);
+    expect(legacy).toEqual(['typed']);
   });
 
-  it('should handle unknown field type', () => {
-    const unknownType = 'unknownType';
-    expect(typeof unknownType).toBe('string');
+  it('binds the legacy onValueChange output name', () => {
+    registry.register('text', LegacyOutputRendererComponent as never);
+
+    const fixture = TestBed.createComponent(DynamicInput);
+    fixture.componentRef.setInput('type', 'text');
+    fixture.detectChanges();
+
+    const seen: unknown[] = [];
+    fixture.componentInstance.valueChange.subscribe((v) => seen.push(v));
+
+    fixture.nativeElement.querySelector('button.legacy-btn').click();
+
+    expect(seen).toEqual(['legacy']);
   });
 
-  it('should emit value on change', () => {
-    const value = 'test-value';
-    expect(value).toBe('test-value');
+  it('renders a plain function renderer as fallback HTML', () => {
+    registry.register('text', fallbackRenderer as never);
+
+    const fixture = TestBed.createComponent(DynamicInput);
+    fixture.componentRef.setInput('type', 'text');
+    fixture.componentRef.setInput('label', 'Name');
+    fixture.componentRef.setInput('value', 'Ada');
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('.fallback').textContent).toBe(
+      'Name:Ada'
+    );
+  });
+
+  it('rejects a subclass without its own @Component decorator instead of inheriting the parent renderer', () => {
+    // Sub has no own `ɵcmp`: it only inherits TextRendererComponent's via
+    // the prototype chain. isComponentType must use hasOwnProperty (not
+    // `in`) so Sub is not mistaken for a renderable component in its own
+    // right - the DOM must not show TextRendererComponent's template.
+    class Sub extends TextRendererComponent {}
+    registry.register('text', Sub as never);
+
+    const fixture = TestBed.createComponent(DynamicInput);
+    fixture.componentRef.setInput('type', 'text');
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('input.txt')).toBeNull();
+    expect(fixture.nativeElement.textContent).toContain(
+      'Failed to render field: text'
+    );
+  });
+
+  it('renders an error for an unknown field type', () => {
+    const fixture = TestBed.createComponent(DynamicInput);
+    fixture.componentRef.setInput('type', 'nope');
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.textContent).toContain(
+      'Unknown field type: nope'
+    );
+  });
+
+  it('re-renders when type changes', () => {
+    registry.register('text', TextRendererComponent as never);
+    registry.register('number', fallbackRenderer as never);
+
+    const fixture = TestBed.createComponent(DynamicInput);
+    fixture.componentRef.setInput('type', 'text');
+    fixture.detectChanges();
+    expect(fixture.nativeElement.querySelector('input.txt')).not.toBeNull();
+
+    fixture.componentRef.setInput('type', 'number');
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('input.txt')).toBeNull();
+    expect(fixture.nativeElement.querySelector('.fallback')).not.toBeNull();
+  });
+
+  it('unsubscribes from renderer outputs on destroy', () => {
+    registry.register('text', TextRendererComponent as never);
+
+    const fixture = TestBed.createComponent(DynamicInput);
+    fixture.componentRef.setInput('type', 'text');
+    fixture.detectChanges();
+
+    const rendererInstance = fixture.debugElement.query(
+      By.directive(TextRendererComponent)
+    ).componentInstance as TextRendererComponent;
+
+    const seen: unknown[] = [];
+    fixture.componentInstance.valueChange.subscribe((v) => seen.push(v));
+
+    fixture.destroy();
+    rendererInstance.valueChange.emit('after destroy'); // bypasses DOM entirely
+
+    expect(seen).toEqual([]);
+  });
+
+  it('unsubscribes from the legacy onValueChange output on destroy', () => {
+    registry.register('text', LegacyOutputRendererComponent as never);
+
+    const fixture = TestBed.createComponent(DynamicInput);
+    fixture.componentRef.setInput('type', 'text');
+    fixture.detectChanges();
+
+    const rendererInstance = fixture.debugElement.query(
+      By.directive(LegacyOutputRendererComponent)
+    ).componentInstance as LegacyOutputRendererComponent;
+
+    const seen: unknown[] = [];
+    fixture.componentInstance.valueChange.subscribe((v) => seen.push(v));
+
+    fixture.destroy();
+    rendererInstance.onValueChange.emit('after destroy');
+
+    expect(seen).toEqual([]);
   });
 });