@dynamic-field-kit/angular 1.2.4 → 1.3.3

package/src/components/FieldInput.ts

@@ -0,0 +1,67 @@
+import { NgIf } from '@angular/common';
+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="shouldRender"
+      [type]="fieldDescription!.type"
+      [value]="getFieldValue()"
+      [label]="fieldDescription!.label"
+      [placeholder]="fieldDescription!.placeholder"
+      [required]="fieldDescription!.required"
+      [description]="$any(fieldDescription!.description)"
+      [options]="fieldDescription!.options"
+      [className]="fieldDescription!.className"
+      (valueChange)="
+        onValueChangeField.emit({ value: $event, key: fieldDescription!.name })
+      "
+      [disabled]="false"
+      [errorMessage]="''"
+    ></dfk-dynamic-input>
+  `,
+})
+export class FieldInput implements OnChanges {
+  @Input() fieldDescription?: FieldDescription;
+  @Input() value?: unknown;
+  @Output() onValueChangeField = new EventEmitter<{
+    value: unknown;
+    key: string;
+  }>();
+
+  shouldRender = false;
+
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  ngOnChanges(_changes: SimpleChanges): void {
+    this.shouldRender = !!this.fieldDescription;
+    this.cdr.markForCheck();
+  }
+
+  getFieldValue(): unknown {
+    if (!this.fieldDescription) {
+      return undefined;
+    }
+
+    if (this.value === undefined && this.fieldDescription.type === 'text') {
+      return '';
+    }
+
+    return this.value;
+  }
+}

package/src/components/MultiFieldInput.ts

@@ -0,0 +1,238 @@
+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,
+  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,
+  // 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]"
+          (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>
+  `,
+})
+export class MultiFieldInput implements OnInit, OnChanges {
+  @Input() fieldDescriptions: FieldDescription[] = [];
+  @Input() properties?: Properties;
+  @Output() onChange = new EventEmitter<Properties>();
+  @Input() layout: LayoutConfig = 'column';
+
+  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();
+  }
+
+  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;
+    this.isMobile =
+      typeof window !== 'undefined' && window.innerWidth < breakpoint;
+  }
+
+  private init() {
+    if (this.properties) {
+      this.data = applyComputedValues(this.fieldDescriptions, {
+        ...this.properties,
+      });
+    }
+    this.updateVisibleFields();
+  }
+
+  private updateVisibleFields() {
+    this.visibleFields = this.fieldDescriptions.filter(
+      (f) => !f.appearCondition || f.appearCondition(this.data)
+    );
+  }
+
+  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();
+  }
+}

package/src/layout/defaultLayouts.ts

@@ -0,0 +1,70 @@
+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

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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,24 @@
+// 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';

package/src/types/layout.ts

@@ -0,0 +1,36 @@
+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;

package/test/DynamicInput.spec.ts

@@ -0,0 +1,30 @@
+describe('DynamicInput', () => {
+  it('should create DynamicInput', () => {
+    expect(true).toBe(true);
+  });
+
+  it('should accept type input', () => {
+    const type = 'text';
+    expect(type).toBe('text');
+  });
+
+  it('should have valueChange output', () => {
+    const hasOutput = true;
+    expect(hasOutput).toBe(true);
+  });
+
+  it('should have onChange output for backward compatibility', () => {
+    const hasOutput = true;
+    expect(hasOutput).toBe(true);
+  });
+
+  it('should handle unknown field type', () => {
+    const unknownType = 'unknownType';
+    expect(typeof unknownType).toBe('string');
+  });
+
+  it('should emit value on change', () => {
+    const value = 'test-value';
+    expect(value).toBe('test-value');
+  });
+});

package/test/FieldInput.spec.ts

@@ -0,0 +1,44 @@
+describe('FieldInput', () => {
+  it('should create FieldInput', () => {
+    expect(true).toBe(true);
+  });
+
+  it('should accept fieldDescription prop', () => {
+    const fieldDesc: any = {
+      name: 'username',
+      type: 'text',
+      label: 'Username',
+      placeholder: 'Enter name',
+    };
+    expect(fieldDesc.name).toBe('username');
+    expect(fieldDesc.type).toBe('text');
+    expect(fieldDesc.label).toBe('Username');
+  });
+
+  it('should pass options from fieldDescription', () => {
+    const fieldDesc: any = {
+      name: 'country',
+      type: 'text',
+      options: [{ label: 'USA' }, { label: 'VN' }],
+    };
+    expect(fieldDesc.options?.length).toBe(2);
+  });
+
+  it('should pass className from fieldDescription', () => {
+    const fieldDesc: any = {
+      name: 'test',
+      type: 'text',
+      className: 'my-custom-class',
+    };
+    expect(fieldDesc.className).toBe('my-custom-class');
+  });
+
+  it('should pass description from fieldDescription', () => {
+    const fieldDesc: any = {
+      name: 'test',
+      type: 'text',
+      description: 'This is a help text',
+    };
+    expect(fieldDesc.description).toBe('This is a help text');
+  });
+});

package/test/angular.spec.ts

@@ -0,0 +1,102 @@
+describe('Angular Package', () => {
+  describe('Components', () => {
+    it('should have DynamicInput component', () => {
+      expect(true).toBe(true);
+    });
+
+    it('should have FieldInput component', () => {
+      expect(true).toBe(true);
+    });
+
+    it('should have MultiFieldInput component', () => {
+      expect(true).toBe(true);
+    });
+  });
+
+  describe('Field Description', () => {
+    it('should create field with name and type', () => {
+      const field = { name: 'username', type: 'text' };
+      expect(field.name).toBe('username');
+      expect(field.type).toBe('text');
+    });
+
+    it('should support optional label', () => {
+      const field = { name: 'email', type: 'text', label: 'Email' };
+      expect(field.label).toBe('Email');
+    });
+
+    it('should support placeholder', () => {
+      const field = { name: 'name', type: 'text', placeholder: 'Enter name' };
+      expect(field.placeholder).toBe('Enter name');
+    });
+
+    it('should support required flag', () => {
+      const field = { name: 'email', type: 'text', required: true };
+      expect(field.required).toBe(true);
+    });
+
+    it('should support options for select fields', () => {
+      const field = {
+        name: 'country',
+        type: 'text',
+        options: [{ label: 'Vietnam', value: 'vn' }],
+      };
+      expect(field.options?.length).toBe(1);
+    });
+
+    it('should support className', () => {
+      const field = { name: 'test', type: 'text', className: 'custom-class' };
+      expect(field.className).toBe('custom-class');
+    });
+
+    it('should support description', () => {
+      const field = { name: 'test', type: 'text', description: 'Help text' };
+      expect(field.description).toBe('Help text');
+    });
+  });
+
+  describe('Layouts', () => {
+    it('should support row layout', () => {
+      expect('row').toBe('row');
+    });
+
+    it('should support grid layout', () => {
+      expect('grid').toBe('grid');
+    });
+
+    it('should support column layout', () => {
+      expect('column').toBe('column');
+    });
+  });
+
+  describe('appearCondition', () => {
+    it('should evaluate appearCondition', () => {
+      const condition = (data: any) => data.show === true;
+      expect(condition({ show: true })).toBe(true);
+      expect(condition({ show: false })).toBe(false);
+    });
+
+    it('should filter fields based on appearCondition', () => {
+      const fields = [
+        { name: 'alwaysShow', type: 'text' },
+        {
+          name: 'conditional',
+          type: 'text',
+          appearCondition: (data: any) => data.accountType === 'business',
+        },
+      ];
+
+      const visibleForPersonal = fields.filter(
+        (f) =>
+          !f.appearCondition || f.appearCondition({ accountType: 'personal' })
+      );
+      expect(visibleForPersonal.length).toBe(1);
+
+      const visibleForBusiness = fields.filter(
+        (f) =>
+          !f.appearCondition || f.appearCondition({ accountType: 'business' })
+      );
+      expect(visibleForBusiness.length).toBe(2);
+    });
+  });
+});