@dynamic-field-kit/angular 1.0.2 → 1.2.0

package/README.md

@@ -1,65 +1,123 @@
-# @dynamic-field-kit/angular
-
-Lightweight Angular adapters for `@dynamic-field-kit/core`.
-
-This package mirrors the React package structure and exposes Angular components that integrate with the shared `fieldRegistry` from `@dynamic-field-kit/core`.
-
-Quick overview
-- Exports a minimal Angular integration: `DynamicInput`, `FieldInput`, `MultiFieldInput`, layout components and `DynamicFieldKitModule` (see `src/public-api.ts`).
-- Designed for local development (source import) and can be packaged with `ng-packagr` for distribution.
-
-Usage (consumer Angular app)
-
-1. Install the package (recommended: use packaged artifact or local `file:` during development):
-
-```bash
-# from your Angular app
-npm install @dynamic-field-kit/core @dynamic-field-kit/angular
-```
-
-2. Import the module in your `AppModule`:
-
-```ts
-import { DynamicFieldKitModule } from '@dynamic-field-kit/angular'
+# @dynamic-field-kit/angular
+
+Lightweight Angular adapters for `@dynamic-field-kit/core`.
+
+This package exposes Angular components and a convenience NgModule that integrate with the shared `fieldRegistry` from `@dynamic-field-kit/core`.
+
+Quick overview
+- Exports `DynamicInput`, `FieldInput`, `MultiFieldInput`, layout components, and `DynamicFieldKitModule`.
+- Uses the shared `fieldRegistry` from `@dynamic-field-kit/core` to resolve Angular field renderers at runtime.
+- Can be consumed as a packaged library, or linked locally from `packages/angular/dist` during development.
+- `MultiFieldInput` currently supports `column`, `row`, and `grid` layout values.
+
+Usage (consumer Angular app)
+
+1. Install the packages:
+
+```bash
+npm install @dynamic-field-kit/core @dynamic-field-kit/angular
+```
+
+2. Import `DynamicFieldKitModule` in your Angular module:
+
+```ts
+import { DynamicFieldKitModule } from '@dynamic-field-kit/angular'
 
 @NgModule({
 	imports: [BrowserModule, DynamicFieldKitModule],
 })
-export class AppModule {}
-```
-
-3. Register Angular component classes into the shared registry at app startup (example):
-
-```ts
-// src/main.ts
-import '@dynamic-field-kit/angular/src/examples' // registers example component into fieldRegistry
-```
-
-Then use the Angular adapter components (`dfk-multi-field-input`, etc.) in templates.
-
-Local development
-- You can import the package source directly in your Angular app using `file:` references in `package.json` (see `example/angular-instructions.md` and `example/angular-app/` for a scaffold).
-
-Build & publish
-- This package supports `ng-packagr`. To build locally:
-
-```bash
-cd packages/angular
-npm install --no-audit --no-fund --save-dev ng-packagr rimraf
-npm run build
+export class AppModule {}
+```
+
+3. Register your Angular field components in the shared registry before bootstrap:
+
+```ts
+// src/main.ts
+import 'zone.js'
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
+import { fieldRegistry } from '@dynamic-field-kit/angular'
+import { AppModule } from './app/app.module'
+import { TextFieldComponent } from './app/components/text-field.component'
+import { NumberFieldComponent } from './app/components/number-field.component'
+
+fieldRegistry.register('text', TextFieldComponent as any)
+fieldRegistry.register('number', NumberFieldComponent as any)
+
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .catch((err) => console.error(err))
+```
+
+4. Render fields in a template:
+
+```html
+<dfk-multi-field-input
+  [fieldDescriptions]="fields"
+  [properties]="data"
+  (onChange)="onChange($event)"
+></dfk-multi-field-input>
+```
+
+5. Example component state:
+
+```ts
+import { Component } from '@angular/core'
+import { FieldDescription } from '@dynamic-field-kit/core'
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+})
+export class AppComponent {
+  fields: FieldDescription[] = [
+    { name: 'name', type: 'text', label: 'Name' },
+    { name: 'age', type: 'number', label: 'Age' },
+  ]
+
+  data: any = {}
+
+  onChange(data: any) {
+    this.data = data
+  }
+}
+```
+
+Local development
+- During local development, point your Angular app at the built package output instead of importing from `src/`:
+
+```json
+{
+  "dependencies": {
+    "@dynamic-field-kit/core": "file:../../packages/core",
+    "@dynamic-field-kit/angular": "file:../../packages/angular/dist"
+  }
+}
+```
+
+- When using a local `file:` dependency on Windows or via symlinked installs, set `preserveSymlinks: true` in the Angular builder options to avoid runtime issues with linked packages.
+
+Build & publish
+- Build locally with `ng-packagr`:
+
+```bash
+cd packages/angular
+npm run build
+```
+
+- Publish to npm:
+
+```bash
+cd packages/angular
+npm publish --access public
 ```
-
-- To publish to npm (scoped package), ensure `publishConfig.access` is `public` and run:
-
-```bash
-cd packages/angular
-npm publish --access public
-```
-
-Notes & caveats
-- The Angular adapter expects consumers to register Angular component classes (not React components) in `fieldRegistry` when using the Angular runtime.
-- The package exports a `DynamicFieldKitModule` to simplify consumer imports, and also provides standalone components for more advanced composition.
-
-Examples & docs
-- See `example/angular-instructions.md` for detailed wiring steps.
-- Try the local scaffold at `example/angular-app/` for a hands-on demo.
+
+Notes & caveats
+- Register Angular component classes in `fieldRegistry`. Do not register React or Vue renderers when using the Angular adapter.
+- `DynamicFieldKitModule` is the recommended integration path for consumer apps.
+- Standalone exports are still available for advanced composition, but most apps should start with the module.
+- Text fields default to an empty string when no value is present, so empty controls render as blank instead of `undefined`.
+- Supported `layout` values are `column`, `row`, and `grid`.
+
+Examples & docs
+- See `example/angular-instructions.md` for detailed wiring steps.
+- Try the local scaffold at `example/angular-app/` for a hands-on demo.

package/dist/README.md

@@ -1,65 +1,123 @@
-# @dynamic-field-kit/angular
-
-Lightweight Angular adapters for `@dynamic-field-kit/core`.
-
-This package mirrors the React package structure and exposes Angular components that integrate with the shared `fieldRegistry` from `@dynamic-field-kit/core`.
-
-Quick overview
-- Exports a minimal Angular integration: `DynamicInput`, `FieldInput`, `MultiFieldInput`, layout components and `DynamicFieldKitModule` (see `src/public-api.ts`).
-- Designed for local development (source import) and can be packaged with `ng-packagr` for distribution.
-
-Usage (consumer Angular app)
-
-1. Install the package (recommended: use packaged artifact or local `file:` during development):
-
-```bash
-# from your Angular app
-npm install @dynamic-field-kit/core @dynamic-field-kit/angular
-```
-
-2. Import the module in your `AppModule`:
-
-```ts
-import { DynamicFieldKitModule } from '@dynamic-field-kit/angular'
+# @dynamic-field-kit/angular
+
+Lightweight Angular adapters for `@dynamic-field-kit/core`.
+
+This package exposes Angular components and a convenience NgModule that integrate with the shared `fieldRegistry` from `@dynamic-field-kit/core`.
+
+Quick overview
+- Exports `DynamicInput`, `FieldInput`, `MultiFieldInput`, layout components, and `DynamicFieldKitModule`.
+- Uses the shared `fieldRegistry` from `@dynamic-field-kit/core` to resolve Angular field renderers at runtime.
+- Can be consumed as a packaged library, or linked locally from `packages/angular/dist` during development.
+- `MultiFieldInput` currently supports `column`, `row`, and `grid` layout values.
+
+Usage (consumer Angular app)
+
+1. Install the packages:
+
+```bash
+npm install @dynamic-field-kit/core @dynamic-field-kit/angular
+```
+
+2. Import `DynamicFieldKitModule` in your Angular module:
+
+```ts
+import { DynamicFieldKitModule } from '@dynamic-field-kit/angular'
 
 @NgModule({
 	imports: [BrowserModule, DynamicFieldKitModule],
 })
-export class AppModule {}
-```
-
-3. Register Angular component classes into the shared registry at app startup (example):
-
-```ts
-// src/main.ts
-import '@dynamic-field-kit/angular/src/examples' // registers example component into fieldRegistry
-```
-
-Then use the Angular adapter components (`dfk-multi-field-input`, etc.) in templates.
-
-Local development
-- You can import the package source directly in your Angular app using `file:` references in `package.json` (see `example/angular-instructions.md` and `example/angular-app/` for a scaffold).
-
-Build & publish
-- This package supports `ng-packagr`. To build locally:
-
-```bash
-cd packages/angular
-npm install --no-audit --no-fund --save-dev ng-packagr rimraf
-npm run build
+export class AppModule {}
+```
+
+3. Register your Angular field components in the shared registry before bootstrap:
+
+```ts
+// src/main.ts
+import 'zone.js'
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
+import { fieldRegistry } from '@dynamic-field-kit/angular'
+import { AppModule } from './app/app.module'
+import { TextFieldComponent } from './app/components/text-field.component'
+import { NumberFieldComponent } from './app/components/number-field.component'
+
+fieldRegistry.register('text', TextFieldComponent as any)
+fieldRegistry.register('number', NumberFieldComponent as any)
+
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .catch((err) => console.error(err))
+```
+
+4. Render fields in a template:
+
+```html
+<dfk-multi-field-input
+  [fieldDescriptions]="fields"
+  [properties]="data"
+  (onChange)="onChange($event)"
+></dfk-multi-field-input>
+```
+
+5. Example component state:
+
+```ts
+import { Component } from '@angular/core'
+import { FieldDescription } from '@dynamic-field-kit/core'
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+})
+export class AppComponent {
+  fields: FieldDescription[] = [
+    { name: 'name', type: 'text', label: 'Name' },
+    { name: 'age', type: 'number', label: 'Age' },
+  ]
+
+  data: any = {}
+
+  onChange(data: any) {
+    this.data = data
+  }
+}
+```
+
+Local development
+- During local development, point your Angular app at the built package output instead of importing from `src/`:
+
+```json
+{
+  "dependencies": {
+    "@dynamic-field-kit/core": "file:../../packages/core",
+    "@dynamic-field-kit/angular": "file:../../packages/angular/dist"
+  }
+}
+```
+
+- When using a local `file:` dependency on Windows or via symlinked installs, set `preserveSymlinks: true` in the Angular builder options to avoid runtime issues with linked packages.
+
+Build & publish
+- Build locally with `ng-packagr`:
+
+```bash
+cd packages/angular
+npm run build
+```
+
+- Publish to npm:
+
+```bash
+cd packages/angular
+npm publish --access public
 ```
-
-- To publish to npm (scoped package), ensure `publishConfig.access` is `public` and run:
-
-```bash
-cd packages/angular
-npm publish --access public
-```
-
-Notes & caveats
-- The Angular adapter expects consumers to register Angular component classes (not React components) in `fieldRegistry` when using the Angular runtime.
-- The package exports a `DynamicFieldKitModule` to simplify consumer imports, and also provides standalone components for more advanced composition.
-
-Examples & docs
-- See `example/angular-instructions.md` for detailed wiring steps.
-- Try the local scaffold at `example/angular-app/` for a hands-on demo.
+
+Notes & caveats
+- Register Angular component classes in `fieldRegistry`. Do not register React or Vue renderers when using the Angular adapter.
+- `DynamicFieldKitModule` is the recommended integration path for consumer apps.
+- Standalone exports are still available for advanced composition, but most apps should start with the module.
+- Text fields default to an empty string when no value is present, so empty controls render as blank instead of `undefined`.
+- Supported `layout` values are `column`, `row`, and `grid`.
+
+Examples & docs
+- See `example/angular-instructions.md` for detailed wiring steps.
+- Try the local scaffold at `example/angular-app/` for a hands-on demo.

package/dist/components/BaseInput.d.ts

@@ -0,0 +1,22 @@
+import { EventEmitter, ChangeDetectorRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare abstract class BaseInputComponent {
+    protected cdr: ChangeDetectorRef;
+    value?: any;
+    label?: string;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    options?: any[];
+    className?: string;
+    description?: string;
+    errorMessage?: string;
+    acceptFile?: string;
+    maxLength?: number;
+    minNumber?: number;
+    maxNumber?: number;
+    valueChange: EventEmitter<any>;
+    constructor(cdr: ChangeDetectorRef);
+    static ɵfac: i0.ɵɵFactoryDeclaration<BaseInputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BaseInputComponent, "ng-component", never, { "value": "value"; "label": "label"; "placeholder": "placeholder"; "required": "required"; "disabled": "disabled"; "options": "options"; "className": "className"; "description": "description"; "errorMessage": "errorMessage"; "acceptFile": "acceptFile"; "maxLength": "maxLength"; "minNumber": "minNumber"; "maxNumber": "maxNumber"; }, { "valueChange": "valueChange"; }, never, never, false, never>;
+}

package/dist/components/DynamicInput.d.ts

@@ -0,0 +1,28 @@
+import { EventEmitter, ViewContainerRef, OnChanges, AfterViewInit, SimpleChanges } from "@angular/core";
+import { FieldTypeKey } from "@dynamic-field-kit/core";
+import { BaseInputComponent } from "./BaseInput";
+import * as i0 from "@angular/core";
+export declare class DynamicInput extends BaseInputComponent implements OnChanges, AfterViewInit {
+    type: FieldTypeKey;
+    value?: any;
+    label?: string;
+    placeholder?: string;
+    required?: boolean;
+    options?: any[];
+    className?: string;
+    description?: any;
+    valueChange: EventEmitter<any>;
+    onChange: EventEmitter<any>;
+    host: ViewContainerRef;
+    private compRef?;
+    private inputInstance?;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngAfterViewInit(): void;
+    private render;
+    private applyKnownProps;
+    private bindOutput;
+    private emitValue;
+    private cleanupRenderedComponent;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DynamicInput, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DynamicInput, "dfk-dynamic-input", never, { "type": "type"; "value": "value"; "label": "label"; "placeholder": "placeholder"; "required": "required"; "options": "options"; "className": "className"; "description": "description"; }, { "valueChange": "valueChange"; "onChange": "onChange"; }, never, never, true, never>;
+}

package/dist/components/FieldInput.d.ts

@@ -0,0 +1,14 @@
+import { EventEmitter } from "@angular/core";
+import { FieldDescription, Properties } from "@dynamic-field-kit/core";
+import * as i0 from "@angular/core";
+export declare class FieldInput {
+    fieldDescription?: FieldDescription;
+    renderInfos?: Properties;
+    onValueChangeField: EventEmitter<{
+        value: any;
+        key: string;
+    }>;
+    getFieldValue(): any;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FieldInput, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FieldInput, "dfk-field-input", never, { "fieldDescription": "fieldDescription"; "renderInfos": "renderInfos"; }, { "onValueChangeField": "onValueChangeField"; }, never, never, true, never>;
+}

package/dist/components/MultiFieldInput.d.ts

@@ -0,0 +1,23 @@
+import { EventEmitter, OnChanges, OnInit, SimpleChanges } from "@angular/core";
+import { FieldDescription, Properties } from "@dynamic-field-kit/core";
+import { LayoutConfig } from "../types/layout";
+import * as i0 from "@angular/core";
+export declare class MultiFieldInput implements OnInit, OnChanges {
+    fieldDescriptions: FieldDescription[];
+    properties?: Properties;
+    onChange: EventEmitter<Properties>;
+    layout: LayoutConfig;
+    data: Properties;
+    visibleFields: FieldDescription[];
+    trackByFn(index: number, field: FieldDescription): string | number;
+    ngOnInit(): void;
+    ngOnChanges(_changes: SimpleChanges): void;
+    private init;
+    private updateVisibleFields;
+    onFieldChange(event: {
+        value: any;
+        key: string;
+    }): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MultiFieldInput, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MultiFieldInput, "dfk-multi-field-input", never, { "fieldDescriptions": "fieldDescriptions"; "properties": "properties"; "layout": "layout"; }, { "onChange": "onChange"; }, never, never, true, never>;
+}

package/dist/esm2020/components/BaseInput.mjs

@@ -0,0 +1,46 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+export class BaseInputComponent {
+    constructor(cdr) {
+        this.cdr = cdr;
+        // Add more from mplis as needed
+        this.valueChange = new EventEmitter();
+    }
+}
+BaseInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BaseInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+BaseInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BaseInputComponent, selector: "ng-component", inputs: { value: "value", label: "label", placeholder: "placeholder", required: "required", disabled: "disabled", options: "options", className: "className", description: "description", errorMessage: "errorMessage", acceptFile: "acceptFile", maxLength: "maxLength", minNumber: "minNumber", maxNumber: "maxNumber" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BaseInputComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: ''
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { value: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], errorMessage: [{
+                type: Input
+            }], acceptFile: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
+            }], minNumber: [{
+                type: Input
+            }], maxNumber: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQmFzZUlucHV0LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvQmFzZUlucHV0LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxZQUFZLEVBQXFCLE1BQU0sZUFBZSxDQUFDOztBQU0xRixNQUFNLE9BQWdCLGtCQUFrQjtJQWtCdEMsWUFBc0IsR0FBc0I7UUFBdEIsUUFBRyxHQUFILEdBQUcsQ0FBbUI7UUFKNUMsZ0NBQWdDO1FBRXRCLGdCQUFXLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQztJQUVELENBQUM7O2dIQWxCNUIsa0JBQWtCO29HQUFsQixrQkFBa0IseVpBRjVCLEVBQUU7NEZBRVEsa0JBQWtCO2tCQUh2QyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxFQUFFO2lCQUNiO3dHQUVVLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBR0ksV0FBVztzQkFBcEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE91dHB1dCwgRXZlbnRFbWl0dGVyLCBDaGFuZ2VEZXRlY3RvclJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBGaWVsZFJlbmRlcmVyUHJvcHMgfSBmcm9tICdAZHluYW1pYy1maWVsZC1raXQvY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICB0ZW1wbGF0ZTogJydcclxufSlcclxuZXhwb3J0IGFic3RyYWN0IGNsYXNzIEJhc2VJbnB1dENvbXBvbmVudCB7XHJcbiAgQElucHV0KCkgdmFsdWU/OiBhbnk7XHJcbiAgQElucHV0KCkgbGFiZWw/OiBzdHJpbmc7XHJcbiAgQElucHV0KCkgcGxhY2Vob2xkZXI/OiBzdHJpbmc7XHJcbiAgQElucHV0KCkgcmVxdWlyZWQ/OiBib29sZWFuO1xyXG4gIEBJbnB1dCgpIGRpc2FibGVkPzogYm9vbGVhbjtcclxuICBASW5wdXQoKSBvcHRpb25zPzogYW55W107XHJcbiAgQElucHV0KCkgY2xhc3NOYW1lPzogc3RyaW5nO1xyXG4gIEBJbnB1dCgpIGRlc2NyaXB0aW9uPzogc3RyaW5nO1xyXG4gIEBJbnB1dCgpIGVycm9yTWVzc2FnZT86IHN0cmluZztcclxuICBASW5wdXQoKSBhY2NlcHRGaWxlPzogc3RyaW5nO1xyXG4gIEBJbnB1dCgpIG1heExlbmd0aD86IG51bWJlcjtcclxuICBASW5wdXQoKSBtaW5OdW1iZXI/OiBudW1iZXI7XHJcbiAgQElucHV0KCkgbWF4TnVtYmVyPzogbnVtYmVyO1xyXG4gIC8vIEFkZCBtb3JlIGZyb20gbXBsaXMgYXMgbmVlZGVkXHJcblxyXG4gIEBPdXRwdXQoKSB2YWx1ZUNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xyXG5cclxuICBjb25zdHJ1Y3Rvcihwcm90ZWN0ZWQgY2RyOiBDaGFuZ2VEZXRlY3RvclJlZikge31cclxufVxyXG5cclxuIl19