@dynamic-field-kit/angular 1.2.10 → 1.3.3

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

@@ -15,9 +15,9 @@ export * from './lib/dynamic-field-kit.module';
 
 // Re-export types from core (only type, not export * )
 export type {
-  FieldTypeKey,
   FieldDescription,
   FieldRendererProps,
+  FieldTypeKey,
 } from '@dynamic-field-kit/core';
 
 // Optional: expose registry for advanced use cases, but not required for basic usage

package/src/types/layout.ts

@@ -1 +1,36 @@
-export type LayoutConfig = 'column' | 'row' | 'grid';
+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);
+    });
+  });
+});

package/test/integration.spec.ts

@@ -0,0 +1,57 @@
+describe('Integration: Form with multiple fields', () => {
+  it('should create field descriptions', () => {
+    const fields = [
+      { name: 'name', type: 'text', label: 'Full Name' },
+      { name: 'email', type: 'text', label: 'Email' },
+    ];
+    expect(fields.length).toBe(2);
+    expect(fields[0].label).toBe('Full Name');
+  });
+
+  it('should handle form data', () => {
+    const formData = { name: 'John', email: 'john@example.com' };
+    expect(formData.name).toBe('John');
+    expect(formData.email).toBe('john@example.com');
+  });
+
+  it('should evaluate appearCondition', () => {
+    const condition = (data: any) => data.accountType === 'business';
+    expect(condition({ accountType: 'personal' })).toBe(false);
+    expect(condition({ accountType: 'business' })).toBe(true);
+  });
+});
+
+describe('FieldDescription', () => {
+  it('should have name and type', () => {
+    const field = { name: 'username', type: 'text' };
+    expect(field.name).toBe('username');
+    expect(field.type).toBe('text');
+  });
+
+  it('should support optional properties', () => {
+    const field = {
+      name: 'username',
+      type: 'text',
+      label: 'Username',
+      placeholder: 'Enter name',
+      required: true,
+      options: [{ label: 'Option 1' }],
+    };
+    expect(field.label).toBe('Username');
+    expect(field.required).toBe(true);
+    expect(field.options?.length).toBe(1);
+  });
+});
+
+describe('Properties', () => {
+  it('should be a record of key-value pairs', () => {
+    const props: Record<string, any> = {
+      username: 'john',
+      age: 25,
+      active: true,
+    };
+    expect(props.username).toBe('john');
+    expect(props.age).toBe(25);
+    expect(props.active).toBe(true);
+  });
+});

package/test/layouts.spec.ts

@@ -0,0 +1,26 @@
+describe('Layout: Row', () => {
+  it('should render fields in row layout', () => {
+    const layout = 'row';
+    expect(layout).toBe('row');
+  });
+});
+
+describe('Layout: Grid', () => {
+  it('should render fields in default grid layout', () => {
+    const layout = 'grid';
+    expect(layout).toBe('grid');
+  });
+
+  it('should support grid with columns option', () => {
+    const layout = { type: 'grid', columns: 3 };
+    expect(layout.type).toBe('grid');
+    expect(layout.columns).toBe(3);
+  });
+});
+
+describe('Layout: Column', () => {
+  it('should render fields in column layout', () => {
+    const layout = 'column';
+    expect(layout).toBe('column');
+  });
+});

package/test.ts

@@ -0,0 +1,12 @@
+import 'zone.js';
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting,
+} from '@angular/platform-browser-dynamic/testing';
+
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);

package/tsconfig.spec.json

@@ -0,0 +1,21 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist-spec",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "target": "ES2020",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "declaration": false,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "skipLibCheck": true,
+    "noImplicitAny": false,
+    "strict": false
+  },
+  "include": ["test/**/*.ts"],
+  "exclude": ["node_modules", "dist", "dist-spec", "examples", "src"]
+}

package/src/adapters/tailwind.ts

@@ -1,13 +0,0 @@
-// Minimal Tailwind adapter placeholder for Angular package.
-// Mirrors the React adapter shape: expose helper class names.
-
-export const tailwind = {
-  input: 'px-2 py-1 border rounded',
-  label: 'text-sm font-medium mb-1',
-};
-
-export default tailwind;
-// Minimal Tailwind adapter placeholder for Angular package
-export function cx(...parts: Array<string | false | null | undefined>) {
-  return parts.filter(Boolean).join(' ');
-}

package/src/components/imports.ts

@@ -1,3 +0,0 @@
-import { CommonModule } from '@angular/common';
-
-export const BaseImports = [CommonModule];

package/src/examples/index.ts

@@ -1,4 +0,0 @@
-export { TextFieldComponent } from './text-field.component';
-import './registerExample';
-
-export {};

package/src/examples/registerExample.ts

@@ -1,7 +0,0 @@
-import { fieldRegistry } from '@dynamic-field-kit/core';
-import { TextFieldComponent } from './text-field.component';
-
-// Example: register Angular component class into shared registry
-fieldRegistry.register('text', TextFieldComponent as any);
-
-export {};

package/src/examples/text-field.component.ts

@@ -1,18 +0,0 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-
-@Component({
-  selector: 'dfk-text-field',
-  standalone: true,
-  template: ` <input [value]="value ?? ''" (input)="onInput($event)" /> `,
-})
-export class TextFieldComponent {
-  @Input() value?: any;
-  @Output() valueChange = new EventEmitter<any>();
-  @Output() onValueChange = new EventEmitter<any>();
-
-  onInput(e: any) {
-    const value = e.target.value;
-    this.valueChange.emit(value);
-    this.onValueChange.emit(value);
-  }
-}

package/src/types.ts

@@ -1 +0,0 @@
-export * from '@dynamic-field-kit/core';