@dynamic-field-kit/angular 1.5.1 → 1.7.0

package/dist/types/dynamic-field-kit-angular.d.ts

@@ -0,0 +1,404 @@
+import * as i0 from '@angular/core';
+import { OnChanges, ChangeDetectorRef, EventEmitter, SimpleChanges, AfterViewInit, OnDestroy, ViewContainerRef, OnInit, TemplateRef, Type, InjectionToken } from '@angular/core';
+import { OptionsStatus, FieldTypeKey, Properties, FieldDescription, ResolvedFieldRendererProps, BaseLayout, ResponsiveLayout, ValidationResult, LayoutConfig, MessageCatalog, FieldRegistry } from '@dynamic-field-kit/core';
+export { ColumnLayoutConfig, FIELD_RENDERER_PROP_KEYS, FieldDescription, FieldRegistry, FieldRendererProps, FieldTypeKey, GridLayoutConfig, LayoutConfig, RowLayoutConfig, ValidationContext, ValidationResult, buildFieldRendererProps, collectFieldPaths, fieldRegistry, indexGroupPathMap, makeErrorId, makeFieldId, resolveDisabled, resolveOptions, resolveReadOnly, validateField, validateFieldAsync, validateFields, validateFieldsAsync, validators } from '@dynamic-field-kit/core';
+import * as i1 from '@angular/common';
+
+interface FieldInputProps {
+    value?: unknown;
+    label?: string;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    touched?: boolean;
+    dirty?: boolean;
+    error?: string | string[];
+    options?: unknown[];
+    optionsStatus?: OptionsStatus;
+    optionsError?: unknown;
+    onOptionsQuery?: (query: string) => void;
+    className?: string;
+    description?: string;
+    id?: string;
+    ariaInvalid?: boolean;
+    ariaDescribedBy?: string;
+    ariaRequired?: boolean;
+    min?: number | string;
+    max?: number | string;
+    step?: number | string;
+    accept?: string;
+    multiple?: boolean;
+}
+declare abstract class BaseInputComponent implements OnChanges {
+    protected cdr: ChangeDetectorRef;
+    value?: unknown;
+    label?: string;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    /**
+     * Whether the field has been blurred (or marked touched by the form store).
+     * Renderers gate error display on this to avoid shouting at a user who has
+     * not reached the field yet.
+     */
+    touched?: boolean;
+    /** Whether the value differs from the one the form opened with. */
+    dirty?: boolean;
+    error?: string | string[];
+    options?: unknown[];
+    optionsStatus?: OptionsStatus;
+    optionsError?: unknown;
+    /** Renderer-driven refetch for a search-remote field. */
+    onOptionsQuery?: (query: string) => void;
+    className?: string;
+    description?: string;
+    id?: string;
+    ariaInvalid?: boolean;
+    ariaDescribedBy?: string;
+    ariaRequired?: boolean;
+    min?: number | string;
+    max?: number | string;
+    step?: number | string;
+    accept?: string;
+    multiple?: boolean;
+    valueChange: EventEmitter<unknown>;
+    constructor(cdr: ChangeDetectorRef);
+    ngOnChanges(_changes: SimpleChanges): void;
+    protected detectChanges(): void;
+    protected hasChanges(changes: SimpleChanges, prop: string): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BaseInputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BaseInputComponent, "ng-component", never, { "value": { "alias": "value"; "required": false; }; "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; "touched": { "alias": "touched"; "required": false; }; "dirty": { "alias": "dirty"; "required": false; }; "error": { "alias": "error"; "required": false; }; "options": { "alias": "options"; "required": false; }; "optionsStatus": { "alias": "optionsStatus"; "required": false; }; "optionsError": { "alias": "optionsError"; "required": false; }; "onOptionsQuery": { "alias": "onOptionsQuery"; "required": false; }; "className": { "alias": "className"; "required": false; }; "description": { "alias": "description"; "required": false; }; "id": { "alias": "id"; "required": false; }; "ariaInvalid": { "alias": "ariaInvalid"; "required": false; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; }; "ariaRequired": { "alias": "ariaRequired"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "step": { "alias": "step"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+}
+
+declare class DynamicInput extends BaseInputComponent implements OnChanges, AfterViewInit, OnDestroy {
+    type: FieldTypeKey;
+    extraProps?: Properties;
+    valueChange: EventEmitter<unknown>;
+    onChange: EventEmitter<unknown>;
+    private registry;
+    host: ViewContainerRef;
+    private compRef?;
+    private inputInstance?;
+    private subscriptions;
+    private supplied;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    private syncPropsToInstance;
+    private cleanup;
+    private cleanupSubscriptions;
+    private cleanupRenderedComponent;
+    /** The id `ariaDescribedBy` points at. See core's `makeErrorId`. */
+    errorNodeId(): string;
+    /** `error` may arrive as a bare string, so index 0 would be a character. */
+    firstError(): string | undefined;
+    /**
+     * Whether the adapter should render the validation message itself.
+     *
+     * Asks the registry directly rather than reading a flag set by `render()`:
+     * `render()` runs in `ngAfterViewInit`, by which point this template's
+     * bindings have already been checked for the pass, and under `OnPush`
+     * nothing would mark them dirty again. A registered renderer owns its own
+     * error presentation, so only the built-in fallback gets a message here.
+     */
+    showDefaultError(): boolean;
+    private render;
+    private isComponentType;
+    private renderComponent;
+    private renderFallback;
+    private getFallbackProps;
+    private applyProps;
+    /**
+     * Props that are callbacks rather than resolved values, so they are not in
+     * `KNOWN_PROPS` / `FIELD_RENDERER_PROP_KEYS` and the loop above never sees
+     * them. Without this a renderer declaring `onOptionsQuery` always got
+     * `undefined` and could never trigger a search-remote refetch.
+     */
+    private applyCallbackProps;
+    private applyExtraProps;
+    private bindOutputs;
+    private emitValue;
+    /**
+     * Puts the aria flags on whatever control the HTML5 fallback just built.
+     *
+     * Applied here, once, rather than in each of the fallback's branches: they
+     * hand-build an input, textarea, checkbox or select, and every one of them
+     * would otherwise need the same four lines. Without this the fallback emits
+     * the `{id}-error` node with nothing pointing at it, and
+     * `focusFirstInvalidField` - which selects `[aria-invalid="true"]` - still
+     * finds nothing on this adapter.
+     *
+     * `render()` re-runs on every ngOnChanges while the fallback is in use (there
+     * is no component instance to sync props into), so this stays current as the
+     * field's error comes and goes.
+     */
+    private applyFallbackAria;
+    private renderDefaultFallbackHTML5;
+    private renderError;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DynamicInput, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DynamicInput, "dfk-dynamic-input", never, { "type": { "alias": "type"; "required": false; }; "extraProps": { "alias": "extraProps"; "required": false; }; }, { "valueChange": "valueChange"; "onChange": "onChange"; }, never, never, true, never>;
+}
+
+declare class FieldInput implements OnChanges, OnDestroy {
+    private cdr;
+    fieldDescription?: FieldDescription;
+    /**
+     * Data at this field's own level. Preferred over `value`: the shared
+     * `buildFieldRendererProps` needs the surrounding data to resolve
+     * `appearCondition`, dynamic options and cross-field validation. When only
+     * `value` is bound (mounting this component directly), a one-key object is
+     * synthesised from it.
+     */
+    data?: Properties;
+    /** Top-level form data, for fields nested inside a repeatable group. */
+    rootData?: Properties;
+    value?: unknown;
+    options?: Record<string, unknown>[];
+    disabled?: boolean;
+    readOnly?: boolean;
+    error?: string | string[];
+    /** Distinguishes a controlled empty error from an omitted error input. */
+    validationControlled: boolean;
+    /** Whether the field has been blurred, or marked touched by a form store. */
+    touched?: boolean;
+    /** Whether the value differs from the one the form opened with. */
+    dirty?: boolean;
+    /** Per-form-instance id namespace; see core's `makeFieldId`. */
+    idPrefix: string;
+    onValueChangeField: EventEmitter<{
+        value: unknown;
+        key: string;
+    }>;
+    /**
+     * Emits this field's name when focus leaves it. Driven by `focusout`, which
+     * bubbles, so it works for any renderer without the renderer having to
+     * declare a blur output of its own.
+     */
+    onBlurField: EventEmitter<string>;
+    /**
+     * The full renderer prop bag, built once per change-detection pass rather
+     * than from one getter per binding - `buildFieldRendererProps` validates the
+     * field, and running that ~20 times per pass would be wasteful.
+     */
+    rendererProps: ResolvedFieldRendererProps | null;
+    constructor(cdr: ChangeDetectorRef);
+    private loader?;
+    private optionsState?;
+    /** Bound into the template so a renderer can drive a search-remote refetch. */
+    onOptionsQuery: (query: string) => void;
+    ngOnChanges(_changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    private syncOptionsLoader;
+    private buildProps;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FieldInput, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FieldInput, "dfk-field-input", never, { "fieldDescription": { "alias": "fieldDescription"; "required": false; }; "data": { "alias": "data"; "required": false; }; "rootData": { "alias": "rootData"; "required": false; }; "value": { "alias": "value"; "required": false; }; "options": { "alias": "options"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; "error": { "alias": "error"; "required": false; }; "validationControlled": { "alias": "validationControlled"; "required": false; }; "touched": { "alias": "touched"; "required": false; }; "dirty": { "alias": "dirty"; "required": false; }; "idPrefix": { "alias": "idPrefix"; "required": false; }; }, { "onValueChangeField": "onValueChangeField"; "onBlurField": "onBlurField"; }, never, never, true, never>;
+}
+
+type BaseLayoutConfig = BaseLayout;
+type ResponsiveLayoutConfig = ResponsiveLayout;
+
+declare class MultiFieldInput implements OnInit, OnChanges {
+    private cdr;
+    fieldDescriptions: FieldDescription[];
+    properties?: Properties;
+    /**
+     * The values per-field `dirty` is measured against. Defaults to the first
+     * non-`undefined` `properties` this component sees. This adapter has no
+     * `form` shorthand, so pass `store.baselineValues()` here to keep `dirty`
+     * correct across `store.reset(newValues)`.
+     */
+    initialProperties?: Properties;
+    onChange: EventEmitter<Properties>;
+    validityChange: EventEmitter<ValidationResult>;
+    /**
+     * Emits a field's name when it loses focus. Touched state is tracked
+     * internally either way; this is the hook for driving an external form store
+     * - pass `createDynamicFormStore`'s `handleBlur` to get its `touched` map and
+     * `validateOnBlur` behaviour.
+     */
+    onBlurField: EventEmitter<string>;
+    /**
+     * Controlled touched map. When bound it is the single source of truth and
+     * the internal tracker is bypassed, so `createDynamicFormStore`'s `touched`
+     * signal (updated by setFieldTouched/touchAll/handleSubmit, cleared by
+     * reset) is what renderers actually see. Leave it unbound to keep the
+     * internal, blur-only tracker.
+     */
+    touched?: Record<string, boolean>;
+    /** Controlled error map; bind the form store's `errors()` signal here. */
+    errors?: Record<string, string[]>;
+    /** Emits the next touched map whenever a field is blurred. */
+    touchedChange: EventEmitter<Record<string, boolean>>;
+    /**
+     * Namespace for generated field ids: a field renders with
+     * `${idPrefix}-${name}`. Defaults to a value unique to this component
+     * instance, so two forms containing the same field name do not emit
+     * duplicate DOM ids. Bind a fixed string to pin ids (`idPrefix="dfk-field"`
+     * restores the pre-1.6 ids), or set `FieldDescription.id` per field.
+     */
+    idPrefix?: string;
+    private touchedFields;
+    private readonly instanceId;
+    private firstSeenProperties;
+    private indexedErrorsSource?;
+    private indexedErrors;
+    private indexedTouchedSource?;
+    private indexedTouched;
+    get effectiveIdPrefix(): string;
+    /** The touched map in effect: the controlled input, else the internal one. */
+    private get effectiveTouched();
+    handleBlurField(fieldName: string): void;
+    /** Whether this field has been blurred at least once. */
+    isTouched(fieldName: string): boolean;
+    /** Whether this field's value differs from the one the form opened with. */
+    isFieldDirty(fieldName: string): boolean;
+    fieldErrors(fieldName: string): string[] | undefined;
+    errorsForItem(fieldName: string, index: number): Record<string, string[]> | undefined;
+    touchedForItem(fieldName: string, index: number): Record<string, boolean>;
+    handleGroupBlur(fieldName: string, index: number, key: string): void;
+    /**
+     * Clears the internally tracked touched state. Only meaningful in
+     * uncontrolled mode - when `touched` is bound, resetting the form store
+     * (e.g. `createDynamicFormStore().reset()`) already clears it.
+     */
+    resetTouched(): void;
+    setFieldTouched(fieldName: string, isTouched?: boolean): void;
+    layout: LayoutConfig;
+    rootData?: Properties;
+    data: Properties;
+    visibleFields: FieldDescription[];
+    private initialised;
+    private isMobile;
+    constructor(cdr: ChangeDetectorRef);
+    onWindowResize(): void;
+    get resolvedLayout(): BaseLayoutConfig;
+    get resolvedLayoutType(): string;
+    get gap(): number;
+    get columns(): number;
+    trackByFn(index: number, field: FieldDescription): string | number;
+    trackByIndex(index: number): number;
+    private groupTrackByCache;
+    groupTrackBy(field: FieldDescription): (index: number, item: Properties) => unknown;
+    ngOnInit(): void;
+    ngOnChanges(_changes: SimpleChanges): void;
+    private updateIsMobile;
+    private init;
+    private updateVisibleFields;
+    onFieldChange(event: {
+        value: unknown;
+        key: string;
+    }): void;
+    getItems(field: FieldDescription): Properties[];
+    canAddItem(field: FieldDescription): boolean;
+    canRemoveItem(field: FieldDescription): boolean;
+    onGroupItemAdd(field: FieldDescription): void;
+    onGroupItemRemove(field: FieldDescription, index: number): void;
+    onGroupItemChange(field: FieldDescription, index: number, next: Properties): void;
+    private commitData;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MultiFieldInput, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MultiFieldInput, "dfk-multi-field-input", never, { "fieldDescriptions": { "alias": "fieldDescriptions"; "required": false; }; "properties": { "alias": "properties"; "required": false; }; "initialProperties": { "alias": "initialProperties"; "required": false; }; "touched": { "alias": "touched"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "idPrefix": { "alias": "idPrefix"; "required": false; }; "layout": { "alias": "layout"; "required": false; }; "rootData": { "alias": "rootData"; "required": false; }; }, { "onChange": "onChange"; "validityChange": "validityChange"; "onBlurField": "onBlurField"; "touchedChange": "touchedChange"; }, never, never, true, never>;
+}
+
+declare class DynamicFormDevToolsComponent {
+    data: Properties;
+    errors: Record<string, string[]>;
+    touched: Record<string, boolean>;
+    isDirty: boolean;
+    fields: FieldDescription[];
+    /** Number of fields carrying errors, mirroring the react and vue overlays. */
+    errorCount(): number;
+    isOpen: i0.WritableSignal<boolean>;
+    activeTab: i0.WritableSignal<"data" | "meta" | "errors" | "fields">;
+    tabs: Array<'data' | 'errors' | 'meta' | 'fields'>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DynamicFormDevToolsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DynamicFormDevToolsComponent, "dfk-dev-tools", never, { "data": { "alias": "data"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "touched": { "alias": "touched"; "required": false; }; "isDirty": { "alias": "isDirty"; "required": false; }; "fields": { "alias": "fields"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+interface DynamicFormOptions {
+    fields: FieldDescription[];
+    initialValues?: Properties;
+    validateOnBlur?: boolean;
+    validateOnChange?: boolean;
+    /**
+     * Messages for the built-in validators, set once for the whole form instead
+     * of per field. A message passed directly to a validator still wins, and any
+     * key omitted here falls back to the validator's English default. See core's
+     * `MessageCatalog`.
+     */
+    messages?: MessageCatalog;
+}
+declare function createDynamicFormStore(options: DynamicFormOptions): {
+    data: i0.WritableSignal<Properties>;
+    errors: i0.WritableSignal<Record<string, string[]>>;
+    isValid: i0.Signal<boolean>;
+    isValidating: i0.WritableSignal<boolean>;
+    isValidationComplete: i0.Signal<boolean>;
+    validationStatus: i0.Signal<"invalid" | "valid" | "pending">;
+    isDirty: i0.WritableSignal<boolean>;
+    baselineValues: i0.WritableSignal<Properties>;
+    getDirtyValues: () => Properties;
+    touched: i0.WritableSignal<Record<string, boolean>>;
+    isSubmitting: i0.WritableSignal<boolean>;
+    isSubmitted: i0.WritableSignal<boolean>;
+    setFieldValue: (name: string, value: unknown) => void;
+    setFieldTouched: (name: string, isTouched?: boolean) => void;
+    touchAll: () => void;
+    resetTouched: () => void;
+    handleChange: (newData: Properties) => void;
+    handleBlur: (fieldName: string) => void;
+    reset: (newValues?: Properties) => void;
+    validate: () => boolean;
+    validateAsync: () => Promise<boolean>;
+    handleSubmit: (onValid: (data: Properties) => void | Promise<void>, onInvalid?: (errors: Record<string, string[]>) => void) => (e?: Event) => Promise<void>;
+};
+
+declare class ColumnLayout {
+    config?: {
+        gap?: number;
+    };
+    template: TemplateRef<unknown>;
+    get gap(): number;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ColumnLayout, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ColumnLayout, "dfk-column-layout", never, { "config": { "alias": "config"; "required": false; }; "template": { "alias": "template"; "required": false; }; }, {}, never, never, true, never>;
+}
+declare class RowLayout {
+    config?: {
+        gap?: number;
+    };
+    template: TemplateRef<unknown>;
+    get gap(): number;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RowLayout, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RowLayout, "dfk-row-layout", never, { "config": { "alias": "config"; "required": false; }; "template": { "alias": "template"; "required": false; }; }, {}, never, never, true, never>;
+}
+declare class GridLayout {
+    config?: {
+        columns?: number;
+        gap?: number;
+    };
+    template: TemplateRef<unknown>;
+    get columns(): number;
+    get gap(): number;
+    static ɵfac: i0.ɵɵFactoryDeclaration<GridLayout, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GridLayout, "dfk-grid-layout", never, { "config": { "alias": "config"; "required": false; }; "template": { "alias": "template"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+type AngularLayoutComponent = Type<unknown>;
+declare class LayoutRegistry {
+    private layouts;
+    register(type: string, component: AngularLayoutComponent): void;
+    get(type: string): AngularLayoutComponent | undefined;
+}
+declare const layoutRegistry: LayoutRegistry;
+
+declare class DynamicFieldKitModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DynamicFieldKitModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DynamicFieldKitModule, never, [typeof i1.CommonModule, typeof DynamicInput, typeof FieldInput, typeof MultiFieldInput, typeof ColumnLayout, typeof RowLayout, typeof GridLayout], [typeof DynamicInput, typeof FieldInput, typeof MultiFieldInput, typeof ColumnLayout, typeof RowLayout, typeof GridLayout]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DynamicFieldKitModule>;
+}
+
+declare const FIELD_REGISTRY: InjectionToken<FieldRegistry>;
+
+export { BaseInputComponent, ColumnLayout, DynamicFieldKitModule, DynamicFormDevToolsComponent, DynamicInput, FIELD_REGISTRY, FieldInput, GridLayout, LayoutRegistry, MultiFieldInput, RowLayout, createDynamicFormStore, layoutRegistry };
+export type { BaseLayoutConfig, DynamicFormOptions, FieldInputProps, ResponsiveLayoutConfig };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-field-kit/angular",
-  "version": "1.5.1",
+  "version": "1.7.0",
   "description": "Angular renderer for dynamic-field-kit",
   "license": "MIT",
   "private": false,
@@ -10,7 +10,16 @@
   ],
   "main": "dist/fesm2022/dynamic-field-kit-angular.mjs",
   "module": "dist/fesm2022/dynamic-field-kit-angular.mjs",
-  "types": "dist/index.d.ts",
+  "types": "dist/types/dynamic-field-kit-angular.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/dynamic-field-kit-angular.d.ts",
+      "default": "./dist/fesm2022/dynamic-field-kit-angular.mjs"
+    },
+    "./package.json": {
+      "default": "./package.json"
+    }
+  },
   "files": [
     "dist",
     "!dist/README.md",
@@ -18,8 +27,8 @@
     "CHANGELOG.md"
   ],
   "peerDependencies": {
-    "@angular/common": ">=14 <22",
-    "@angular/core": ">=14 <22",
+    "@angular/common": ">=16 <22",
+    "@angular/core": ">=16 <22",
     "@dynamic-field-kit/core": "^1.3.0"
   },
   "publishConfig": {
@@ -37,24 +46,23 @@
   "devDependencies": {
     "@analogjs/vite-plugin-angular": "^2.7.1",
     "@analogjs/vitest-angular": "^2.7.1",
-    "@angular-devkit/build-angular": "^19.2.27",
-    "@angular/cdk": "^19.0.0",
-    "@angular/common": "^19.0.0",
-    "@angular/compiler": "^19.0.0",
-    "@angular/compiler-cli": "^19.0.0",
-    "@angular/core": "^19.0.0",
-    "@angular/forms": "^19.0.0",
-    "@angular/platform-browser": "^19.0.0",
-    "@angular/platform-browser-dynamic": "^19.0.0",
-    "@dynamic-field-kit/core": "^1.5.1",
+    "@angular-devkit/build-angular": "^21.2.0",
+    "@angular/cdk": "^21.2.14",
+    "@angular/common": "^21.2.0",
+    "@angular/compiler": "^21.2.0",
+    "@angular/compiler-cli": "^21.2.0",
+    "@angular/core": "^21.2.0",
+    "@angular/forms": "^21.2.0",
+    "@angular/platform-browser": "^21.2.0",
+    "@dynamic-field-kit/core": "^1.7.0",
     "@vitest/coverage-istanbul": "^4.1.11",
     "jsdom": "^29.1.1",
-    "ng-packagr": "^19.2.2",
+    "ng-packagr": "^21.2.0",
     "rimraf": "^6.1.3",
     "rxjs": "^7.8.0",
-    "typescript": "~5.8.3",
+    "typescript": "~5.9.3",
     "vitest": "^4.1.11",
-    "zone.js": "^0.15.0"
+    "zone.js": "~0.16.0"
   },
   "repository": {
     "type": "git",
@@ -84,14 +92,5 @@
   "homepage": "https://vannt-dev.github.io/dynamic-field-kit/",
   "bugs": {
     "url": "https://github.com/vannt-dev/dynamic-field-kit/issues"
-  },
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/fesm2022/dynamic-field-kit-angular.mjs"
-    },
-    "./package.json": {
-      "default": "./package.json"
-    }
   }
 }

package/dist/components/BaseInput.d.ts

@@ -1,34 +0,0 @@
-import { ChangeDetectorRef, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
-import * as i0 from "@angular/core";
-export interface FieldInputProps {
-    value?: unknown;
-    label?: string;
-    placeholder?: string;
-    required?: boolean;
-    disabled?: boolean;
-    readOnly?: boolean;
-    error?: string | string[];
-    options?: unknown[];
-    className?: string;
-    description?: string;
-}
-export declare abstract class BaseInputComponent implements OnChanges {
-    protected cdr: ChangeDetectorRef;
-    value?: unknown;
-    label?: string;
-    placeholder?: string;
-    required?: boolean;
-    disabled?: boolean;
-    readOnly?: boolean;
-    error?: string | string[];
-    options?: unknown[];
-    className?: string;
-    description?: string;
-    valueChange: EventEmitter<unknown>;
-    constructor(cdr: ChangeDetectorRef);
-    ngOnChanges(_changes: SimpleChanges): void;
-    protected detectChanges(): void;
-    protected hasChanges(changes: SimpleChanges, prop: string): boolean;
-    static ɵfac: i0.ɵɵFactoryDeclaration<BaseInputComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BaseInputComponent, "ng-component", never, { "value": { "alias": "value"; "required": false; }; "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; "error": { "alias": "error"; "required": false; }; "options": { "alias": "options"; "required": false; }; "className": { "alias": "className"; "required": false; }; "description": { "alias": "description"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
-}

package/dist/components/DynamicFormDevTools.d.ts

@@ -1,16 +0,0 @@
-import { FieldDescription, Properties } from '@dynamic-field-kit/core';
-import * as i0 from "@angular/core";
-export declare class DynamicFormDevToolsComponent {
-    data: Properties;
-    errors: Record<string, string[]>;
-    touched: Record<string, boolean>;
-    isDirty: boolean;
-    fields: FieldDescription[];
-    /** Number of fields carrying errors, mirroring the react and vue overlays. */
-    errorCount(): number;
-    isOpen: import("@angular/core").WritableSignal<boolean>;
-    activeTab: import("@angular/core").WritableSignal<"data" | "meta" | "errors" | "fields">;
-    tabs: Array<'data' | 'errors' | 'meta' | 'fields'>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DynamicFormDevToolsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DynamicFormDevToolsComponent, "dfk-dev-tools", never, { "data": { "alias": "data"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "touched": { "alias": "touched"; "required": false; }; "isDirty": { "alias": "isDirty"; "required": false; }; "fields": { "alias": "fields"; "required": false; }; }, {}, never, never, true, never>;
-}

package/dist/components/DynamicInput.d.ts

@@ -1,36 +0,0 @@
-import { AfterViewInit, EventEmitter, OnChanges, OnDestroy, SimpleChanges, ViewContainerRef } from '@angular/core';
-import { FieldTypeKey, Properties } from '@dynamic-field-kit/core';
-import { BaseInputComponent } from './BaseInput.js';
-import * as i0 from "@angular/core";
-export declare class DynamicInput extends BaseInputComponent implements OnChanges, AfterViewInit, OnDestroy {
-    type: FieldTypeKey;
-    extraProps?: Properties;
-    valueChange: EventEmitter<unknown>;
-    onChange: EventEmitter<unknown>;
-    private registry;
-    host: ViewContainerRef;
-    private compRef?;
-    private inputInstance?;
-    private subscriptions;
-    private supplied;
-    ngOnChanges(changes: SimpleChanges): void;
-    ngAfterViewInit(): void;
-    ngOnDestroy(): void;
-    private syncPropsToInstance;
-    private cleanup;
-    private cleanupSubscriptions;
-    private cleanupRenderedComponent;
-    private render;
-    private isComponentType;
-    private renderComponent;
-    private renderFallback;
-    private getFallbackProps;
-    private applyProps;
-    private applyExtraProps;
-    private bindOutputs;
-    private emitValue;
-    private renderDefaultFallbackHTML5;
-    private renderError;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DynamicInput, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DynamicInput, "dfk-dynamic-input", never, { "type": { "alias": "type"; "required": false; }; "extraProps": { "alias": "extraProps"; "required": false; }; }, { "valueChange": "valueChange"; "onChange": "onChange"; }, never, never, true, never>;
-}

package/dist/components/FieldInput.d.ts

@@ -1,28 +0,0 @@
-import { ChangeDetectorRef, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
-import { FieldDescription } from '@dynamic-field-kit/core';
-import * as i0 from "@angular/core";
-export declare class FieldInput implements OnChanges {
-    private cdr;
-    fieldDescription?: FieldDescription;
-    value?: unknown;
-    options?: Record<string, unknown>[];
-    disabled?: boolean;
-    readOnly?: boolean;
-    error?: string | string[];
-    onValueChangeField: EventEmitter<{
-        value: unknown;
-        key: string;
-    }>;
-    /**
-     * Emits this field's name when focus leaves it. Driven by `focusout`, which
-     * bubbles, so it works for any renderer without the renderer having to
-     * declare a blur output of its own.
-     */
-    onBlurField: EventEmitter<string>;
-    shouldRender: boolean;
-    get resolvedOptions(): Record<string, unknown>[] | undefined;
-    constructor(cdr: ChangeDetectorRef);
-    ngOnChanges(_changes: SimpleChanges): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<FieldInput, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FieldInput, "dfk-field-input", never, { "fieldDescription": { "alias": "fieldDescription"; "required": false; }; "value": { "alias": "value"; "required": false; }; "options": { "alias": "options"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; "error": { "alias": "error"; "required": false; }; }, { "onValueChangeField": "onValueChangeField"; "onBlurField": "onBlurField"; }, never, never, true, never>;
-}