@dynamic-field-kit/angular 1.4.0 → 1.5.1

package/src/components/MultiFieldInput.ts

@@ -1,331 +0,0 @@
-import { NgClass, NgFor, NgIf } from '@angular/common';
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  EventEmitter,
-  HostListener,
-  Input,
-  OnChanges,
-  OnInit,
-  Output,
-  SimpleChanges,
-} from '@angular/core';
-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,
-  // 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="p-4 border rounded-lg bg-gray-50"
-      [ngClass]="{
-        '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
-      "
-    >
-      <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>
-  `,
-})
-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();
-  }
-
-  ngOnChanges(_changes: SimpleChanges) {
-    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 = 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, 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)],
-    });
-  }
-
-  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

@@ -1,15 +0,0 @@
-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,70 +0,0 @@
-import { CommonModule } from '@angular/common';
-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'"
-    [style.flexDirection]="'column'"
-    [style.gap]="gap + 'px'"
-  >
-    <ng-container *ngTemplateOutlet="template"></ng-container>
-  </div>`,
-})
-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'"
-    [style.flexDirection]="'row'"
-    [style.gap]="gap + 'px'"
-  >
-    <ng-container *ngTemplateOutlet="template"></ng-container>
-  </div>`,
-})
-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'"
-    [style.gridTemplateColumns]="'repeat(' + columns + ', 1fr)'"
-    [style.gap]="gap + 'px'"
-  >
-    <ng-container *ngTemplateOutlet="template"></ng-container>
-  </div>`,
-})
-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,2 +0,0 @@
-export * from './defaultLayouts';
-export { layoutRegistry, LayoutRegistry } from './layoutRegistry';

package/src/layout/layoutRegistry.ts

@@ -1,25 +0,0 @@
-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/lib/dynamic-field-kit.module.ts

@@ -1,29 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-
-import { DynamicInput } from '../components/DynamicInput';
-import { FieldInput } from '../components/FieldInput';
-import { MultiFieldInput } from '../components/MultiFieldInput';
-
-import { ColumnLayout, RowLayout, GridLayout } from '../layout/defaultLayouts';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    DynamicInput,
-    FieldInput,
-    MultiFieldInput,
-    ColumnLayout,
-    RowLayout,
-    GridLayout,
-  ],
-  exports: [
-    DynamicInput,
-    FieldInput,
-    MultiFieldInput,
-    ColumnLayout,
-    RowLayout,
-    GridLayout,
-  ],
-})
-export class DynamicFieldKitModule {}

package/src/public-api.ts

@@ -1,40 +0,0 @@
-// 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,14 +0,0 @@
-// 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;