@dynamic-field-kit/angular 1.2.10 → 1.4.0

package/CHANGELOG.md

@@ -0,0 +1,19 @@
+# @dynamic-field-kit/angular
+
+## 1.4.0
+
+### Minor Changes
+
+- 132f74b: Framework adapters: validation support, scoped field registries via dependency
+  injection, and unified cross-framework layout types.
+
+  - Validation wired through `DynamicInput` / `FieldInput` / `MultiFieldInput`.
+  - Scoped `FieldRegistry` injection (React context, Vue provide/inject, Angular
+    `FIELD_REGISTRY` token) so consumers can supply their own registry.
+  - Shared layout type definitions aligned across React, Vue, and Angular.
+
+  Requires `@dynamic-field-kit/core@^1.3.0` (peer dependency) for the new
+  validation and layout APIs.
+
+  Note: `@dynamic-field-kit/core` is a peer dependency (not bundled). Consumers
+  must install it alongside the adapter.

package/README.md

@@ -12,9 +12,7 @@ Demo app: https://github.com/vannt-dev/dynamic-field-kit-demo
 npm install @dynamic-field-kit/core @dynamic-field-kit/angular
 ```
 
-Note: Core is shared runtime. Install core separately and ensure a single version is used across adapters to avoid duplicate registries.
-
-- Install with core: `npm install @dynamic-field-kit/core @dynamic-field-kit/angular`
+Note: `@dynamic-field-kit/core`, `@angular/core`, and `@angular/common` are **peer dependencies** — this adapter does not bundle or auto-install them, so add them to your app explicitly (as shown above). Keep a single `@dynamic-field-kit/core` version across all adapters so they share one registry.
 
 If you need to pin versions explicitly:
 
@@ -29,6 +27,9 @@ npm install @dynamic-field-kit/core@^1.0.12 @dynamic-field-kit/angular@^1.2.3
 - `MultiFieldInput`
 - `DynamicFieldKitModule`
 - `fieldRegistry`
+- `FieldRegistry` (class, for scoped registries)
+- `FIELD_REGISTRY` (injection token)
+- `validateField` / `validateFields` / `resolveDisabled` / `resolveReadOnly` / `ValidationResult`
 
 ## Basic setup (Angular 19+)
 
@@ -88,6 +89,113 @@ export class AppComponent {
 ></dfk-multi-field-input>
 ```
 
+## Layouts
+
+`MultiFieldInput` supports `column`, `row`, `grid`, and `responsive` (mobile/desktop with a custom breakpoint), matching the React and Vue adapters:
+
+```html
+<dfk-multi-field-input
+  [fieldDescriptions]="fields"
+  [layout]="{ type: 'grid', columns: 3, gap: 16 }"
+></dfk-multi-field-input>
+
+<dfk-multi-field-input
+  [fieldDescriptions]="fields"
+  [layout]="{
+    type: 'responsive',
+    mobile: 'column',
+    desktop: { type: 'grid', columns: 2, gap: 12 }
+  }"
+></dfk-multi-field-input>
+```
+
+## Derived fields with `computeValue`
+
+Give a field a `computeValue` to derive its value from the rest of the form data whenever any field changes:
+
+```ts
+fields: FieldDescription[] = [
+  { name: 'firstName', type: 'text' },
+  { name: 'lastName', type: 'text' },
+  {
+    name: 'fullName',
+    type: 'text',
+    computeValue: (data) => `${data.firstName ?? ''} ${data.lastName ?? ''}`.trim(),
+  },
+];
+```
+
+## Validation & conditions
+
+Declare a `validate` hook and dynamic `disabledCondition`/`readOnlyCondition`;
+your renderer component receives `error`, `disabled`, and `readOnly` inputs, and
+`dfk-multi-field-input` emits `(validityChange)`:
+
+```html
+<dfk-multi-field-input
+  [fieldDescriptions]="fields"
+  [properties]="data"
+  (onChange)="onChange($event)"
+  (validityChange)="canSubmit = $event.valid"
+></dfk-multi-field-input>
+```
+
+For submit-time whole-form validation, call `validateFields(fields, data)`.
+
+## Repeatable field groups
+
+A field with `fields` renders as a repeatable group: `data[name]` becomes an array of items, each shaped by the nested `fields`, with "Add"/"Remove" controls rendered automatically.
+
+```ts
+fields: FieldDescription[] = [
+  {
+    name: 'contacts',
+    type: 'group',
+    label: 'Contacts',
+    fields: [
+      { name: 'email', type: 'text', label: 'Email' },
+      { name: 'phone', type: 'text', label: 'Phone' },
+    ],
+    defaultItem: { email: '', phone: '' },
+    keyField: 'id', // optional: stable trackBy key instead of the array index
+    minItems: 1,
+    maxItems: 5,
+  },
+];
+```
+
+```html
+<dfk-multi-field-input [fieldDescriptions]="fields"></dfk-multi-field-input>
+```
+
+## Scoped registries
+
+`fieldRegistry` is a process-wide singleton. To give a component or route its own renderers, provide the `FIELD_REGISTRY` token with an isolated `FieldRegistry`. Components without an override keep using the global singleton.
+
+```ts
+import { FieldRegistry, FIELD_REGISTRY } from '@dynamic-field-kit/angular';
+
+const registry = new FieldRegistry();
+registry.register('text', TextFieldComponent as any);
+
+@Component({
+  selector: 'app-scoped-form',
+  standalone: true,
+  imports: [MultiFieldInput],
+  providers: [{ provide: FIELD_REGISTRY, useValue: registry }],
+  template: `<dfk-multi-field-input [fieldDescriptions]="fields" />`,
+})
+export class ScopedFormComponent {}
+```
+
+## Passing renderer-specific props
+
+The generic adapter forwards only the shared `FieldRendererProps`. For inputs specific to one renderer (e.g. `acceptFile`, `maxLength`), pass them per field via `FieldDescription.props`; they are set on the renderer instance verbatim.
+
+```ts
+{ name: 'avatar', type: 'file', props: { acceptFile: 'image/*' } }
+```
+
 ## Legacy setup (Angular 14 and earlier with NgModule)
 
 ```ts
@@ -118,7 +226,8 @@ declare module '@dynamic-field-kit/core' {
 
 - Register Angular component classes in `fieldRegistry`.
 - Do not register React or Vue renderers in the Angular adapter.
-- `MultiFieldInput` supports `column`, `row`, and `grid` layouts.
+- `MultiFieldInput` supports `column`, `row`, `grid`, and `responsive` layouts, and derives fields using `computeValue`.
+- Fields with `fields` render as repeatable groups instead of going through `fieldRegistry`.
 - The shared schema and field types still come from `@dynamic-field-kit/core`.
 
 ## License

package/dist/README.md

@@ -12,9 +12,7 @@ Demo app: https://github.com/vannt-dev/dynamic-field-kit-demo
 npm install @dynamic-field-kit/core @dynamic-field-kit/angular
 ```
 
-Note: Core is shared runtime. Install core separately and ensure a single version is used across adapters to avoid duplicate registries.
-
-- Install with core: `npm install @dynamic-field-kit/core @dynamic-field-kit/angular`
+Note: `@dynamic-field-kit/core`, `@angular/core`, and `@angular/common` are **peer dependencies** — this adapter does not bundle or auto-install them, so add them to your app explicitly (as shown above). Keep a single `@dynamic-field-kit/core` version across all adapters so they share one registry.
 
 If you need to pin versions explicitly:
 
@@ -29,6 +27,9 @@ npm install @dynamic-field-kit/core@^1.0.12 @dynamic-field-kit/angular@^1.2.3
 - `MultiFieldInput`
 - `DynamicFieldKitModule`
 - `fieldRegistry`
+- `FieldRegistry` (class, for scoped registries)
+- `FIELD_REGISTRY` (injection token)
+- `validateField` / `validateFields` / `resolveDisabled` / `resolveReadOnly` / `ValidationResult`
 
 ## Basic setup (Angular 19+)
 
@@ -88,6 +89,113 @@ export class AppComponent {
 ></dfk-multi-field-input>
 ```
 
+## Layouts
+
+`MultiFieldInput` supports `column`, `row`, `grid`, and `responsive` (mobile/desktop with a custom breakpoint), matching the React and Vue adapters:
+
+```html
+<dfk-multi-field-input
+  [fieldDescriptions]="fields"
+  [layout]="{ type: 'grid', columns: 3, gap: 16 }"
+></dfk-multi-field-input>
+
+<dfk-multi-field-input
+  [fieldDescriptions]="fields"
+  [layout]="{
+    type: 'responsive',
+    mobile: 'column',
+    desktop: { type: 'grid', columns: 2, gap: 12 }
+  }"
+></dfk-multi-field-input>
+```
+
+## Derived fields with `computeValue`
+
+Give a field a `computeValue` to derive its value from the rest of the form data whenever any field changes:
+
+```ts
+fields: FieldDescription[] = [
+  { name: 'firstName', type: 'text' },
+  { name: 'lastName', type: 'text' },
+  {
+    name: 'fullName',
+    type: 'text',
+    computeValue: (data) => `${data.firstName ?? ''} ${data.lastName ?? ''}`.trim(),
+  },
+];
+```
+
+## Validation & conditions
+
+Declare a `validate` hook and dynamic `disabledCondition`/`readOnlyCondition`;
+your renderer component receives `error`, `disabled`, and `readOnly` inputs, and
+`dfk-multi-field-input` emits `(validityChange)`:
+
+```html
+<dfk-multi-field-input
+  [fieldDescriptions]="fields"
+  [properties]="data"
+  (onChange)="onChange($event)"
+  (validityChange)="canSubmit = $event.valid"
+></dfk-multi-field-input>
+```
+
+For submit-time whole-form validation, call `validateFields(fields, data)`.
+
+## Repeatable field groups
+
+A field with `fields` renders as a repeatable group: `data[name]` becomes an array of items, each shaped by the nested `fields`, with "Add"/"Remove" controls rendered automatically.
+
+```ts
+fields: FieldDescription[] = [
+  {
+    name: 'contacts',
+    type: 'group',
+    label: 'Contacts',
+    fields: [
+      { name: 'email', type: 'text', label: 'Email' },
+      { name: 'phone', type: 'text', label: 'Phone' },
+    ],
+    defaultItem: { email: '', phone: '' },
+    keyField: 'id', // optional: stable trackBy key instead of the array index
+    minItems: 1,
+    maxItems: 5,
+  },
+];
+```
+
+```html
+<dfk-multi-field-input [fieldDescriptions]="fields"></dfk-multi-field-input>
+```
+
+## Scoped registries
+
+`fieldRegistry` is a process-wide singleton. To give a component or route its own renderers, provide the `FIELD_REGISTRY` token with an isolated `FieldRegistry`. Components without an override keep using the global singleton.
+
+```ts
+import { FieldRegistry, FIELD_REGISTRY } from '@dynamic-field-kit/angular';
+
+const registry = new FieldRegistry();
+registry.register('text', TextFieldComponent as any);
+
+@Component({
+  selector: 'app-scoped-form',
+  standalone: true,
+  imports: [MultiFieldInput],
+  providers: [{ provide: FIELD_REGISTRY, useValue: registry }],
+  template: `<dfk-multi-field-input [fieldDescriptions]="fields" />`,
+})
+export class ScopedFormComponent {}
+```
+
+## Passing renderer-specific props
+
+The generic adapter forwards only the shared `FieldRendererProps`. For inputs specific to one renderer (e.g. `acceptFile`, `maxLength`), pass them per field via `FieldDescription.props`; they are set on the renderer instance verbatim.
+
+```ts
+{ name: 'avatar', type: 'file', props: { acceptFile: 'image/*' } }
+```
+
 ## Legacy setup (Angular 14 and earlier with NgModule)
 
 ```ts
@@ -118,7 +226,8 @@ declare module '@dynamic-field-kit/core' {
 
 - Register Angular component classes in `fieldRegistry`.
 - Do not register React or Vue renderers in the Angular adapter.
-- `MultiFieldInput` supports `column`, `row`, and `grid` layouts.
+- `MultiFieldInput` supports `column`, `row`, `grid`, and `responsive` layouts, and derives fields using `computeValue`.
+- Fields with `fields` render as repeatable groups instead of going through `fieldRegistry`.
 - The shared schema and field types still come from `@dynamic-field-kit/core`.
 
 ## License

package/dist/components/BaseInput.d.ts

@@ -1,22 +1,34 @@
-import { ChangeDetectorRef, EventEmitter } from '@angular/core';
+import { ChangeDetectorRef, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
 import * as i0 from "@angular/core";
-export declare abstract class BaseInputComponent {
+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?: any;
+    value?: unknown;
     label?: string;
     placeholder?: string;
     required?: boolean;
     disabled?: boolean;
-    options?: any[];
+    readOnly?: boolean;
+    error?: string | string[];
+    options?: unknown[];
     className?: string;
     description?: string;
-    errorMessage?: string;
-    acceptFile?: string;
-    maxLength?: number;
-    minNumber?: number;
-    maxNumber?: number;
-    valueChange: EventEmitter<any>;
+    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; }; "options": { "alias": "options"; "required": false; }; "className": { "alias": "className"; "required": false; }; "description": { "alias": "description"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "acceptFile": { "alias": "acceptFile"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "minNumber": { "alias": "minNumber"; "required": false; }; "maxNumber": { "alias": "maxNumber"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, 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/DynamicInput.d.ts

@@ -1,24 +1,35 @@
-import { EventEmitter, ViewContainerRef, OnChanges, AfterViewInit, OnDestroy, SimpleChanges } from '@angular/core';
-import { FieldTypeKey } from '@dynamic-field-kit/core';
+import { AfterViewInit, EventEmitter, OnChanges, OnDestroy, SimpleChanges, ViewContainerRef } from '@angular/core';
+import { FieldTypeKey, Properties } from '@dynamic-field-kit/core';
 import { BaseInputComponent } from './BaseInput';
 import * as i0 from "@angular/core";
 export declare class DynamicInput extends BaseInputComponent implements OnChanges, AfterViewInit, OnDestroy {
     type: FieldTypeKey;
-    valueChange: EventEmitter<any>;
-    onChange: EventEmitter<any>;
+    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 applyKnownProps;
-    private bindOutput;
+    private isComponentType;
+    private renderComponent;
+    private renderFallback;
+    private getFallbackProps;
+    private applyProps;
+    private applyExtraProps;
+    private bindOutputs;
     private emitValue;
-    private cleanupRenderedComponent;
+    private renderError;
     static ɵfac: i0.ɵɵFactoryDeclaration<DynamicInput, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DynamicInput, "dfk-dynamic-input", never, { "type": { "alias": "type"; "required": false; }; }, { "valueChange": "valueChange"; "onChange": "onChange"; }, never, never, true, 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,14 +1,22 @@
-import { EventEmitter } from '@angular/core';
-import { FieldDescription, Properties } from '@dynamic-field-kit/core';
+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 {
+export declare class FieldInput implements OnChanges {
+    private cdr;
     fieldDescription?: FieldDescription;
-    renderInfos?: Properties;
+    value?: unknown;
+    options?: Record<string, unknown>[];
+    disabled?: boolean;
+    readOnly?: boolean;
+    error?: string | string[];
     onValueChangeField: EventEmitter<{
-        value: any;
+        value: unknown;
         key: string;
     }>;
-    getFieldValue(): unknown;
+    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; }; "renderInfos": { "alias": "renderInfos"; "required": false; }; }, { "onValueChangeField": "onValueChangeField"; }, never, never, true, 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"; }, never, never, true, never>;
 }

package/dist/components/MultiFieldInput.d.ts

@@ -1,23 +1,49 @@
-import { EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { ChangeDetectorRef, EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { FieldDescription, Properties } from '@dynamic-field-kit/core';
-import { LayoutConfig } from '../types/layout';
+import type { ValidationResult } from '@dynamic-field-kit/core';
+import { BaseLayoutConfig, LayoutConfig } from '../types/layout';
 import * as i0 from "@angular/core";
 export declare class MultiFieldInput implements OnInit, OnChanges {
+    private cdr;
     fieldDescriptions: FieldDescription[];
     properties?: Properties;
     onChange: EventEmitter<Properties>;
+    validityChange: EventEmitter<ValidationResult>;
     layout: LayoutConfig;
+    rootData?: Properties;
     data: Properties;
     visibleFields: FieldDescription[];
+    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: any;
+        value: unknown;
         key: string;
     }): void;
+    getItems(field: FieldDescription): Properties[];
+    getResolvedOptions(field: FieldDescription): Properties[] | undefined;
+    getDisabled(field: FieldDescription): boolean;
+    getReadOnly(field: FieldDescription): boolean;
+    getError(field: FieldDescription): string[] | undefined;
+    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; }; "layout": { "alias": "layout"; "required": false; }; }, { "onChange": "onChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MultiFieldInput, "dfk-multi-field-input", never, { "fieldDescriptions": { "alias": "fieldDescriptions"; "required": false; }; "properties": { "alias": "properties"; "required": false; }; "layout": { "alias": "layout"; "required": false; }; "rootData": { "alias": "rootData"; "required": false; }; }, { "onChange": "onChange"; "validityChange": "validityChange"; }, never, never, true, never>;
 }

package/dist/esm2022/components/BaseInput.mjs

@@ -7,21 +7,26 @@ export class BaseInputComponent {
     placeholder;
     required;
     disabled;
+    readOnly;
+    error;
     options;
     className;
     description;
-    errorMessage;
-    acceptFile;
-    maxLength;
-    minNumber;
-    maxNumber;
-    // Add more from mplis as needed
     valueChange = new EventEmitter();
     constructor(cdr) {
         this.cdr = cdr;
     }
+    ngOnChanges(_changes) {
+        this.detectChanges();
+    }
+    detectChanges() {
+        this.cdr.markForCheck();
+    }
+    hasChanges(changes, prop) {
+        return changes[prop] !== undefined;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: BaseInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: BaseInputComponent, isStandalone: true, 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: BaseInputComponent, isStandalone: true, selector: "ng-component", inputs: { value: "value", label: "label", placeholder: "placeholder", required: "required", disabled: "disabled", readOnly: "readOnly", error: "error", options: "options", className: "className", description: "description" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: BaseInputComponent, decorators: [{
             type: Component,
@@ -38,23 +43,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Input
             }], disabled: [{
                 type: Input
+            }], readOnly: [{
+                type: Input
+            }], error: [{
+                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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQmFzZUlucHV0LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvQmFzZUlucHV0LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFFTCxTQUFTLEVBQ1QsWUFBWSxFQUNaLEtBQUssRUFDTCxNQUFNLEdBQ1AsTUFBTSxlQUFlLENBQUM7O0FBS3ZCLE1BQU0sT0FBZ0Isa0JBQWtCO0lBa0JoQjtJQWpCYixLQUFLLENBQU87SUFDWixLQUFLLENBQVU7SUFDZixXQUFXLENBQVU7SUFDckIsUUFBUSxDQUFXO0lBQ25CLFFBQVEsQ0FBVztJQUNuQixPQUFPLENBQVM7SUFDaEIsU0FBUyxDQUFVO0lBQ25CLFdBQVcsQ0FBVTtJQUNyQixZQUFZLENBQVU7SUFDdEIsVUFBVSxDQUFVO0lBQ3BCLFNBQVMsQ0FBVTtJQUNuQixTQUFTLENBQVU7SUFDbkIsU0FBUyxDQUFVO0lBQzVCLGdDQUFnQztJQUV0QixXQUFXLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQztJQUVoRCxZQUFzQixHQUFzQjtRQUF0QixRQUFHLEdBQUgsR0FBRyxDQUFtQjtJQUFHLENBQUM7d0dBbEI1QixrQkFBa0I7NEZBQWxCLGtCQUFrQiw2YUFGNUIsRUFBRTs7NEZBRVEsa0JBQWtCO2tCQUh2QyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxFQUFFO2lCQUNiO3NGQUVVLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBR0ksV0FBVztzQkFBcEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENoYW5nZURldGVjdG9yUmVmLFxuICBDb21wb25lbnQsXG4gIEV2ZW50RW1pdHRlcixcbiAgSW5wdXQsXG4gIE91dHB1dCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICB0ZW1wbGF0ZTogJycsXG59KVxuZXhwb3J0IGFic3RyYWN0IGNsYXNzIEJhc2VJbnB1dENvbXBvbmVudCB7XG4gIEBJbnB1dCgpIHZhbHVlPzogYW55O1xuICBASW5wdXQoKSBsYWJlbD86IHN0cmluZztcbiAgQElucHV0KCkgcGxhY2Vob2xkZXI/OiBzdHJpbmc7XG4gIEBJbnB1dCgpIHJlcXVpcmVkPzogYm9vbGVhbjtcbiAgQElucHV0KCkgZGlzYWJsZWQ/OiBib29sZWFuO1xuICBASW5wdXQoKSBvcHRpb25zPzogYW55W107XG4gIEBJbnB1dCgpIGNsYXNzTmFtZT86IHN0cmluZztcbiAgQElucHV0KCkgZGVzY3JpcHRpb24/OiBzdHJpbmc7XG4gIEBJbnB1dCgpIGVycm9yTWVzc2FnZT86IHN0cmluZztcbiAgQElucHV0KCkgYWNjZXB0RmlsZT86IHN0cmluZztcbiAgQElucHV0KCkgbWF4TGVuZ3RoPzogbnVtYmVyO1xuICBASW5wdXQoKSBtaW5OdW1iZXI/OiBudW1iZXI7XG4gIEBJbnB1dCgpIG1heE51bWJlcj86IG51bWJlcjtcbiAgLy8gQWRkIG1vcmUgZnJvbSBtcGxpcyBhcyBuZWVkZWRcblxuICBAT3V0cHV0KCkgdmFsdWVDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcblxuICBjb25zdHJ1Y3Rvcihwcm90ZWN0ZWQgY2RyOiBDaGFuZ2VEZXRlY3RvclJlZikge31cbn1cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQmFzZUlucHV0LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvQmFzZUlucHV0LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFFTCxTQUFTLEVBQ1QsWUFBWSxFQUNaLEtBQUssRUFFTCxNQUFNLEdBRVAsTUFBTSxlQUFlLENBQUM7O0FBcUJ2QixNQUFNLE9BQWdCLGtCQUFrQjtJQWNoQjtJQWJiLEtBQUssQ0FBVztJQUNoQixLQUFLLENBQVU7SUFDZixXQUFXLENBQVU7SUFDckIsUUFBUSxDQUFXO0lBQ25CLFFBQVEsQ0FBVztJQUNuQixRQUFRLENBQVc7SUFDbkIsS0FBSyxDQUFxQjtJQUMxQixPQUFPLENBQWE7SUFDcEIsU0FBUyxDQUFVO0lBQ25CLFdBQVcsQ0FBVTtJQUVwQixXQUFXLEdBQUcsSUFBSSxZQUFZLEVBQVcsQ0FBQztJQUVwRCxZQUFzQixHQUFzQjtRQUF0QixRQUFHLEdBQUgsR0FBRyxDQUFtQjtJQUFHLENBQUM7SUFFaEQsV0FBVyxDQUFDLFFBQXVCO1FBQ2pDLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQztJQUN2QixDQUFDO0lBRVMsYUFBYTtRQUNyQixJQUFJLENBQUMsR0FBRyxDQUFDLFlBQVksRUFBRSxDQUFDO0lBQzFCLENBQUM7SUFFUyxVQUFVLENBQUMsT0FBc0IsRUFBRSxJQUFZO1FBQ3ZELE9BQU8sT0FBTyxDQUFDLElBQUksQ0FBQyxLQUFLLFNBQVMsQ0FBQztJQUNyQyxDQUFDO3dHQTFCbUIsa0JBQWtCOzRGQUFsQixrQkFBa0Isd1dBRjVCLEVBQUU7OzRGQUVRLGtCQUFrQjtrQkFIdkMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsRUFBRTtpQkFDYjtzRkFFVSxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBRUksV0FBVztzQkFBcEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENoYW5nZURldGVjdG9yUmVmLFxuICBDb21wb25lbnQsXG4gIEV2ZW50RW1pdHRlcixcbiAgSW5wdXQsXG4gIE9uQ2hhbmdlcyxcbiAgT3V0cHV0LFxuICBTaW1wbGVDaGFuZ2VzLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuLy8gTWlycm9ycyB0aGUgZnJhbWV3b3JrLWFnbm9zdGljIEZpZWxkUmVuZGVyZXJQcm9wcy4gRG9tYWluLXNwZWNpZmljIGlucHV0c1xuLy8gKGFjY2VwdEZpbGUsIG1heExlbmd0aCwgLi4uKSBpbnRlbnRpb25hbGx5IGxpdmUgb24gdGhlIGluZGl2aWR1YWwgcmVuZGVyZXIsXG4vLyBub3QgaGVyZSAtIHBhc3MgdGhlbSBwZXIgZmllbGQgdmlhIEZpZWxkRGVzY3JpcHRpb24ucHJvcHMgaW5zdGVhZC5cbmV4cG9ydCBpbnRlcmZhY2UgRmllbGRJbnB1dFByb3BzIHtcbiAgdmFsdWU/OiB1bmtub3duO1xuICBsYWJlbD86IHN0cmluZztcbiAgcGxhY2Vob2xkZXI/OiBzdHJpbmc7XG4gIHJlcXVpcmVkPzogYm9vbGVhbjtcbiAgZGlzYWJsZWQ/OiBib29sZWFuO1xuICByZWFkT25seT86IGJvb2xlYW47XG4gIGVycm9yPzogc3RyaW5nIHwgc3RyaW5nW107XG4gIG9wdGlvbnM/OiB1bmtub3duW107XG4gIGNsYXNzTmFtZT86IHN0cmluZztcbiAgZGVzY3JpcHRpb24/OiBzdHJpbmc7XG59XG5cbkBDb21wb25lbnQoe1xuICB0ZW1wbGF0ZTogJycsXG59KVxuZXhwb3J0IGFic3RyYWN0IGNsYXNzIEJhc2VJbnB1dENvbXBvbmVudCBpbXBsZW1lbnRzIE9uQ2hhbmdlcyB7XG4gIEBJbnB1dCgpIHZhbHVlPzogdW5rbm93bjtcbiAgQElucHV0KCkgbGFiZWw/OiBzdHJpbmc7XG4gIEBJbnB1dCgpIHBsYWNlaG9sZGVyPzogc3RyaW5nO1xuICBASW5wdXQoKSByZXF1aXJlZD86IGJvb2xlYW47XG4gIEBJbnB1dCgpIGRpc2FibGVkPzogYm9vbGVhbjtcbiAgQElucHV0KCkgcmVhZE9ubHk/OiBib29sZWFuO1xuICBASW5wdXQoKSBlcnJvcj86IHN0cmluZyB8IHN0cmluZ1tdO1xuICBASW5wdXQoKSBvcHRpb25zPzogdW5rbm93bltdO1xuICBASW5wdXQoKSBjbGFzc05hbWU/OiBzdHJpbmc7XG4gIEBJbnB1dCgpIGRlc2NyaXB0aW9uPzogc3RyaW5nO1xuXG4gIEBPdXRwdXQoKSB2YWx1ZUNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8dW5rbm93bj4oKTtcblxuICBjb25zdHJ1Y3Rvcihwcm90ZWN0ZWQgY2RyOiBDaGFuZ2VEZXRlY3RvclJlZikge31cblxuICBuZ09uQ2hhbmdlcyhfY2hhbmdlczogU2ltcGxlQ2hhbmdlcyk6IHZvaWQge1xuICAgIHRoaXMuZGV0ZWN0Q2hhbmdlcygpO1xuICB9XG5cbiAgcHJvdGVjdGVkIGRldGVjdENoYW5nZXMoKTogdm9pZCB7XG4gICAgdGhpcy5jZHIubWFya0ZvckNoZWNrKCk7XG4gIH1cblxuICBwcm90ZWN0ZWQgaGFzQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzLCBwcm9wOiBzdHJpbmcpOiBib29sZWFuIHtcbiAgICByZXR1cm4gY2hhbmdlc1twcm9wXSAhPT0gdW5kZWZpbmVkO1xuICB9XG59XG4iXX0=