@dynamic-field-kit/angular 1.3.3 → 1.5.0

package/src/components/FieldInput.ts

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

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

@@ -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,24 +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 } from '@dynamic-field-kit/core';

package/src/types/layout.ts

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

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

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

@@ -1,102 +0,0 @@
-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);
-    });
-  });
-});