@dynamic-field-kit/angular 1.2.3 → 1.2.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +77 -87
- package/dist/README.md +126 -0
- package/dist/components/BaseInput.d.ts +22 -0
- package/{components → dist/components}/DynamicInput.d.ts +24 -28
- package/dist/components/FieldInput.d.ts +14 -0
- package/{components → dist/components}/MultiFieldInput.d.ts +23 -23
- package/dist/esm2022/components/BaseInput.mjs +60 -0
- package/dist/esm2022/components/DynamicInput.mjs +162 -0
- package/dist/esm2022/components/FieldInput.mjs +71 -0
- package/dist/esm2022/components/MultiFieldInput.mjs +85 -0
- package/{esm2020 → dist/esm2022}/dynamic-field-kit-angular.mjs +4 -4
- package/dist/esm2022/layout/defaultLayouts.mjs +67 -0
- package/{esm2020 → dist/esm2022}/layout/index.mjs +2 -2
- package/dist/esm2022/lib/dynamic-field-kit.module.mjs +52 -0
- package/{esm2020 → dist/esm2022}/public-api.mjs +14 -14
- package/{esm2020 → dist/esm2022}/types/layout.mjs +2 -2
- package/{fesm2020 → dist/fesm2022}/dynamic-field-kit-angular.mjs +434 -337
- package/dist/fesm2022/dynamic-field-kit-angular.mjs.map +1 -0
- package/{index.d.ts → dist/index.d.ts} +5 -5
- package/{layout → dist/layout}/defaultLayouts.d.ts +13 -13
- package/dist/layout/index.d.ts +1 -0
- package/{lib → dist/lib}/dynamic-field-kit.module.d.ts +11 -11
- package/{public-api.d.ts → dist/public-api.d.ts} +9 -9
- package/dist/types/layout.d.ts +1 -0
- package/ng-package.json +7 -0
- package/package.json +31 -28
- package/src/adapters/tailwind.ts +13 -0
- package/src/components/BaseInput.ts +31 -0
- package/src/components/DynamicInput.ts +188 -0
- package/src/components/FieldInput.ts +49 -0
- package/src/components/MultiFieldInput.ts +75 -0
- package/src/components/imports.ts +3 -0
- package/src/examples/index.ts +4 -0
- package/src/examples/registerExample.ts +7 -0
- package/src/examples/text-field.component.ts +18 -0
- package/src/layout/defaultLayouts.ts +38 -0
- package/src/layout/index.ts +1 -0
- package/src/lib/dynamic-field-kit.module.ts +29 -0
- package/src/public-api.ts +24 -0
- package/src/types/layout.ts +1 -0
- package/src/types.ts +1 -0
- package/tsconfig.json +13 -0
- package/components/BaseInput.d.ts +0 -22
- package/components/FieldInput.d.ts +0 -14
- package/esm2020/components/BaseInput.mjs +0 -46
- package/esm2020/components/DynamicInput.mjs +0 -146
- package/esm2020/components/FieldInput.mjs +0 -66
- package/esm2020/components/MultiFieldInput.mjs +0 -79
- package/esm2020/layout/defaultLayouts.mjs +0 -43
- package/esm2020/lib/dynamic-field-kit.module.mjs +0 -20
- package/fesm2015/dynamic-field-kit-angular.mjs +0 -393
- package/fesm2015/dynamic-field-kit-angular.mjs.map +0 -1
- package/fesm2020/dynamic-field-kit-angular.mjs.map +0 -1
- package/layout/index.d.ts +0 -1
- package/types/layout.d.ts +0 -1
package/README.md
CHANGED
|
@@ -1,136 +1,126 @@
|
|
|
1
1
|
# @dynamic-field-kit/angular
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Angular adapter for `@dynamic-field-kit/core`.
|
|
4
4
|
|
|
5
|
-
This package
|
|
5
|
+
This package provides Angular components and a convenience module that render field schemas defined with `@dynamic-field-kit/core`.
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
- Exports `DynamicInput`, `FieldInput`, `MultiFieldInput`, layout components, and `DynamicFieldKitModule`.
|
|
9
|
-
- Uses the shared `fieldRegistry` from `@dynamic-field-kit/core` to resolve Angular field renderers at runtime.
|
|
10
|
-
- Can be consumed in two modes: npm package mode for external apps, or local development mode from `packages/angular/dist`.
|
|
11
|
-
- `MultiFieldInput` currently supports `column`, `row`, and `grid` layout values.
|
|
7
|
+
Demo app: https://github.com/vannt-dev/dynamic-field-kit-demo
|
|
12
8
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
Use this mode for normal Angular apps outside this monorepo.
|
|
16
|
-
|
|
17
|
-
1. Install the packages:
|
|
9
|
+
## Install
|
|
18
10
|
|
|
19
11
|
```bash
|
|
20
12
|
npm install @dynamic-field-kit/core @dynamic-field-kit/angular
|
|
21
13
|
```
|
|
22
14
|
|
|
23
|
-
|
|
15
|
+
Note: Core is shared runtime. Install core separately and ensure a single version is used across adapters to avoid duplicate registries.
|
|
24
16
|
|
|
25
|
-
|
|
26
|
-
import { DynamicFieldKitModule } from '@dynamic-field-kit/angular'
|
|
27
|
-
|
|
28
|
-
@NgModule({
|
|
29
|
-
imports: [BrowserModule, DynamicFieldKitModule],
|
|
30
|
-
})
|
|
31
|
-
export class AppModule {}
|
|
32
|
-
```
|
|
17
|
+
- Install with core: `npm install @dynamic-field-kit/core @dynamic-field-kit/angular`
|
|
33
18
|
|
|
34
|
-
|
|
19
|
+
If you need to pin versions explicitly:
|
|
35
20
|
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
import 'zone.js'
|
|
39
|
-
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
|
|
40
|
-
import { fieldRegistry } from '@dynamic-field-kit/angular'
|
|
41
|
-
import { AppModule } from './app/app.module'
|
|
42
|
-
import { TextFieldComponent } from './app/components/text-field.component'
|
|
43
|
-
import { NumberFieldComponent } from './app/components/number-field.component'
|
|
44
|
-
|
|
45
|
-
fieldRegistry.register('text', TextFieldComponent as any)
|
|
46
|
-
fieldRegistry.register('number', NumberFieldComponent as any)
|
|
47
|
-
|
|
48
|
-
platformBrowserDynamic()
|
|
49
|
-
.bootstrapModule(AppModule)
|
|
50
|
-
.catch((err) => console.error(err))
|
|
21
|
+
```bash
|
|
22
|
+
npm install @dynamic-field-kit/core@^1.0.12 @dynamic-field-kit/angular@^1.2.3
|
|
51
23
|
```
|
|
52
24
|
|
|
53
|
-
|
|
25
|
+
## What it exports
|
|
54
26
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
27
|
+
- `DynamicInput`
|
|
28
|
+
- `FieldInput`
|
|
29
|
+
- `MultiFieldInput`
|
|
30
|
+
- `DynamicFieldKitModule`
|
|
31
|
+
- `fieldRegistry`
|
|
32
|
+
|
|
33
|
+
## Basic setup (Angular 19+)
|
|
34
|
+
|
|
35
|
+
1. Import the component and register fields before bootstrap.
|
|
36
|
+
|
|
37
|
+
```ts
|
|
38
|
+
import 'zone.js';
|
|
39
|
+
import { bootstrapApplication } from '@angular/platform-browser';
|
|
40
|
+
import { fieldRegistry } from '@dynamic-field-kit/angular';
|
|
41
|
+
import { AppComponent } from './app/app.component';
|
|
42
|
+
import { TextFieldComponent } from './app/components/text-field.component';
|
|
43
|
+
import { NumberFieldComponent } from './app/components/number-field.component';
|
|
44
|
+
|
|
45
|
+
fieldRegistry.register('text', TextFieldComponent as any);
|
|
46
|
+
fieldRegistry.register('number', NumberFieldComponent as any);
|
|
47
|
+
|
|
48
|
+
bootstrapApplication(AppComponent, {
|
|
49
|
+
providers: [],
|
|
50
|
+
}).catch((err) => console.error(err));
|
|
61
51
|
```
|
|
62
52
|
|
|
63
|
-
|
|
53
|
+
2. Use the component in a standalone component.
|
|
64
54
|
|
|
65
55
|
```ts
|
|
66
|
-
import { Component } from '@angular/core'
|
|
67
|
-
import {
|
|
56
|
+
import { Component } from '@angular/core';
|
|
57
|
+
import { CommonModule } from '@angular/common';
|
|
58
|
+
import { FieldDescription } from '@dynamic-field-kit/core';
|
|
59
|
+
import { MultiFieldInput } from '@dynamic-field-kit/angular';
|
|
68
60
|
|
|
69
61
|
@Component({
|
|
70
62
|
selector: 'app-root',
|
|
63
|
+
standalone: true,
|
|
64
|
+
imports: [CommonModule, MultiFieldInput],
|
|
71
65
|
templateUrl: './app.component.html',
|
|
72
66
|
})
|
|
73
67
|
export class AppComponent {
|
|
74
68
|
fields: FieldDescription[] = [
|
|
75
69
|
{ name: 'name', type: 'text', label: 'Name' },
|
|
76
70
|
{ name: 'age', type: 'number', label: 'Age' },
|
|
77
|
-
]
|
|
71
|
+
];
|
|
78
72
|
|
|
79
|
-
data: any = {}
|
|
73
|
+
data: any = {};
|
|
80
74
|
|
|
81
75
|
onChange(data: any) {
|
|
82
|
-
this.data = data
|
|
76
|
+
this.data = data;
|
|
83
77
|
}
|
|
84
78
|
}
|
|
85
79
|
```
|
|
86
80
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
Use this mode only when developing inside this monorepo or when intentionally linking a local build.
|
|
90
|
-
|
|
91
|
-
1. Point your Angular app at the built package output instead of importing from `src/`:
|
|
81
|
+
3. Render your schema in a template.
|
|
92
82
|
|
|
93
|
-
```
|
|
94
|
-
|
|
95
|
-
"
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
}
|
|
83
|
+
```html
|
|
84
|
+
<dfk-multi-field-input
|
|
85
|
+
[fieldDescriptions]="fields"
|
|
86
|
+
[properties]="data"
|
|
87
|
+
(onChange)="onChange($event)"
|
|
88
|
+
></dfk-multi-field-input>
|
|
100
89
|
```
|
|
101
90
|
|
|
102
|
-
|
|
91
|
+
## Legacy setup (Angular 14 and earlier with NgModule)
|
|
103
92
|
|
|
104
|
-
```
|
|
105
|
-
|
|
106
|
-
|
|
93
|
+
```ts
|
|
94
|
+
import { BrowserModule } from '@angular/platform-browser';
|
|
95
|
+
import { NgModule } from '@angular/core';
|
|
96
|
+
import { DynamicFieldKitModule } from '@dynamic-field-kit/angular';
|
|
97
|
+
|
|
98
|
+
@NgModule({
|
|
99
|
+
imports: [BrowserModule, DynamicFieldKitModule],
|
|
100
|
+
})
|
|
101
|
+
export class AppModule {}
|
|
107
102
|
```
|
|
108
103
|
|
|
109
|
-
|
|
104
|
+
## Type augmentation
|
|
110
105
|
|
|
111
|
-
|
|
112
|
-
|
|
106
|
+
```ts
|
|
107
|
+
import '@dynamic-field-kit/core';
|
|
113
108
|
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
109
|
+
declare module '@dynamic-field-kit/core' {
|
|
110
|
+
interface FieldTypeMap {
|
|
111
|
+
text: string;
|
|
112
|
+
number: number;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
117
115
|
```
|
|
118
116
|
|
|
119
|
-
|
|
117
|
+
## Notes
|
|
120
118
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
```
|
|
119
|
+
- Register Angular component classes in `fieldRegistry`.
|
|
120
|
+
- Do not register React or Vue renderers in the Angular adapter.
|
|
121
|
+
- `MultiFieldInput` supports `column`, `row`, and `grid` layouts.
|
|
122
|
+
- The shared schema and field types still come from `@dynamic-field-kit/core`.
|
|
126
123
|
|
|
127
|
-
|
|
128
|
-
- Register Angular component classes in `fieldRegistry`. Do not register React or Vue renderers when using the Angular adapter.
|
|
129
|
-
- `DynamicFieldKitModule` is the recommended integration path for consumer apps.
|
|
130
|
-
- Standalone exports are still available for advanced composition, but most apps should start with the module.
|
|
131
|
-
- Text fields default to an empty string when no value is present, so empty controls render as blank instead of `undefined`.
|
|
132
|
-
- Supported `layout` values are `column`, `row`, and `grid`.
|
|
124
|
+
## License
|
|
133
125
|
|
|
134
|
-
|
|
135
|
-
- See `example/angular-app/angular-instructions.md` for detailed wiring steps.
|
|
136
|
-
- Try the local scaffold at `example/angular-app/` for a hands-on demo.
|
|
126
|
+
MIT
|
package/dist/README.md
ADDED
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
# @dynamic-field-kit/angular
|
|
2
|
+
|
|
3
|
+
Angular adapter for `@dynamic-field-kit/core`.
|
|
4
|
+
|
|
5
|
+
This package provides Angular components and a convenience module that render field schemas defined with `@dynamic-field-kit/core`.
|
|
6
|
+
|
|
7
|
+
Demo app: https://github.com/vannt-dev/dynamic-field-kit-demo
|
|
8
|
+
|
|
9
|
+
## Install
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm install @dynamic-field-kit/core @dynamic-field-kit/angular
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
Note: Core is shared runtime. Install core separately and ensure a single version is used across adapters to avoid duplicate registries.
|
|
16
|
+
|
|
17
|
+
- Install with core: `npm install @dynamic-field-kit/core @dynamic-field-kit/angular`
|
|
18
|
+
|
|
19
|
+
If you need to pin versions explicitly:
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
npm install @dynamic-field-kit/core@^1.0.12 @dynamic-field-kit/angular@^1.2.3
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## What it exports
|
|
26
|
+
|
|
27
|
+
- `DynamicInput`
|
|
28
|
+
- `FieldInput`
|
|
29
|
+
- `MultiFieldInput`
|
|
30
|
+
- `DynamicFieldKitModule`
|
|
31
|
+
- `fieldRegistry`
|
|
32
|
+
|
|
33
|
+
## Basic setup (Angular 19+)
|
|
34
|
+
|
|
35
|
+
1. Import the component and register fields before bootstrap.
|
|
36
|
+
|
|
37
|
+
```ts
|
|
38
|
+
import 'zone.js';
|
|
39
|
+
import { bootstrapApplication } from '@angular/platform-browser';
|
|
40
|
+
import { fieldRegistry } from '@dynamic-field-kit/angular';
|
|
41
|
+
import { AppComponent } from './app/app.component';
|
|
42
|
+
import { TextFieldComponent } from './app/components/text-field.component';
|
|
43
|
+
import { NumberFieldComponent } from './app/components/number-field.component';
|
|
44
|
+
|
|
45
|
+
fieldRegistry.register('text', TextFieldComponent as any);
|
|
46
|
+
fieldRegistry.register('number', NumberFieldComponent as any);
|
|
47
|
+
|
|
48
|
+
bootstrapApplication(AppComponent, {
|
|
49
|
+
providers: [],
|
|
50
|
+
}).catch((err) => console.error(err));
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
2. Use the component in a standalone component.
|
|
54
|
+
|
|
55
|
+
```ts
|
|
56
|
+
import { Component } from '@angular/core';
|
|
57
|
+
import { CommonModule } from '@angular/common';
|
|
58
|
+
import { FieldDescription } from '@dynamic-field-kit/core';
|
|
59
|
+
import { MultiFieldInput } from '@dynamic-field-kit/angular';
|
|
60
|
+
|
|
61
|
+
@Component({
|
|
62
|
+
selector: 'app-root',
|
|
63
|
+
standalone: true,
|
|
64
|
+
imports: [CommonModule, MultiFieldInput],
|
|
65
|
+
templateUrl: './app.component.html',
|
|
66
|
+
})
|
|
67
|
+
export class AppComponent {
|
|
68
|
+
fields: FieldDescription[] = [
|
|
69
|
+
{ name: 'name', type: 'text', label: 'Name' },
|
|
70
|
+
{ name: 'age', type: 'number', label: 'Age' },
|
|
71
|
+
];
|
|
72
|
+
|
|
73
|
+
data: any = {};
|
|
74
|
+
|
|
75
|
+
onChange(data: any) {
|
|
76
|
+
this.data = data;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
3. Render your schema in a template.
|
|
82
|
+
|
|
83
|
+
```html
|
|
84
|
+
<dfk-multi-field-input
|
|
85
|
+
[fieldDescriptions]="fields"
|
|
86
|
+
[properties]="data"
|
|
87
|
+
(onChange)="onChange($event)"
|
|
88
|
+
></dfk-multi-field-input>
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
## Legacy setup (Angular 14 and earlier with NgModule)
|
|
92
|
+
|
|
93
|
+
```ts
|
|
94
|
+
import { BrowserModule } from '@angular/platform-browser';
|
|
95
|
+
import { NgModule } from '@angular/core';
|
|
96
|
+
import { DynamicFieldKitModule } from '@dynamic-field-kit/angular';
|
|
97
|
+
|
|
98
|
+
@NgModule({
|
|
99
|
+
imports: [BrowserModule, DynamicFieldKitModule],
|
|
100
|
+
})
|
|
101
|
+
export class AppModule {}
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
## Type augmentation
|
|
105
|
+
|
|
106
|
+
```ts
|
|
107
|
+
import '@dynamic-field-kit/core';
|
|
108
|
+
|
|
109
|
+
declare module '@dynamic-field-kit/core' {
|
|
110
|
+
interface FieldTypeMap {
|
|
111
|
+
text: string;
|
|
112
|
+
number: number;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
## Notes
|
|
118
|
+
|
|
119
|
+
- Register Angular component classes in `fieldRegistry`.
|
|
120
|
+
- Do not register React or Vue renderers in the Angular adapter.
|
|
121
|
+
- `MultiFieldInput` supports `column`, `row`, and `grid` layouts.
|
|
122
|
+
- The shared schema and field types still come from `@dynamic-field-kit/core`.
|
|
123
|
+
|
|
124
|
+
## License
|
|
125
|
+
|
|
126
|
+
MIT
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { ChangeDetectorRef, EventEmitter } from '@angular/core';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
export declare abstract class BaseInputComponent {
|
|
4
|
+
protected cdr: ChangeDetectorRef;
|
|
5
|
+
value?: any;
|
|
6
|
+
label?: string;
|
|
7
|
+
placeholder?: string;
|
|
8
|
+
required?: boolean;
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
options?: any[];
|
|
11
|
+
className?: string;
|
|
12
|
+
description?: string;
|
|
13
|
+
errorMessage?: string;
|
|
14
|
+
acceptFile?: string;
|
|
15
|
+
maxLength?: number;
|
|
16
|
+
minNumber?: number;
|
|
17
|
+
maxNumber?: number;
|
|
18
|
+
valueChange: EventEmitter<any>;
|
|
19
|
+
constructor(cdr: ChangeDetectorRef);
|
|
20
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<BaseInputComponent, never>;
|
|
21
|
+
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>;
|
|
22
|
+
}
|
|
@@ -1,28 +1,24 @@
|
|
|
1
|
-
import { EventEmitter, ViewContainerRef, OnChanges, AfterViewInit, SimpleChanges } from
|
|
2
|
-
import { FieldTypeKey } from
|
|
3
|
-
import { BaseInputComponent } from
|
|
4
|
-
import * as i0 from "@angular/core";
|
|
5
|
-
export declare class DynamicInput extends BaseInputComponent implements OnChanges, AfterViewInit {
|
|
6
|
-
type: FieldTypeKey;
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
private
|
|
18
|
-
private
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
private
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
private cleanupRenderedComponent;
|
|
26
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<DynamicInput, never>;
|
|
27
|
-
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>;
|
|
28
|
-
}
|
|
1
|
+
import { EventEmitter, ViewContainerRef, OnChanges, AfterViewInit, OnDestroy, SimpleChanges } from '@angular/core';
|
|
2
|
+
import { FieldTypeKey } from '@dynamic-field-kit/core';
|
|
3
|
+
import { BaseInputComponent } from './BaseInput';
|
|
4
|
+
import * as i0 from "@angular/core";
|
|
5
|
+
export declare class DynamicInput extends BaseInputComponent implements OnChanges, AfterViewInit, OnDestroy {
|
|
6
|
+
type: FieldTypeKey;
|
|
7
|
+
valueChange: EventEmitter<any>;
|
|
8
|
+
onChange: EventEmitter<any>;
|
|
9
|
+
host: ViewContainerRef;
|
|
10
|
+
private compRef?;
|
|
11
|
+
private inputInstance?;
|
|
12
|
+
private subscriptions;
|
|
13
|
+
ngOnChanges(changes: SimpleChanges): void;
|
|
14
|
+
ngAfterViewInit(): void;
|
|
15
|
+
ngOnDestroy(): void;
|
|
16
|
+
private cleanupSubscriptions;
|
|
17
|
+
private render;
|
|
18
|
+
private applyKnownProps;
|
|
19
|
+
private bindOutput;
|
|
20
|
+
private emitValue;
|
|
21
|
+
private cleanupRenderedComponent;
|
|
22
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<DynamicInput, never>;
|
|
23
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<DynamicInput, "dfk-dynamic-input", never, { "type": { "alias": "type"; "required": false; }; }, { "valueChange": "valueChange"; "onChange": "onChange"; }, never, never, true, never>;
|
|
24
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { EventEmitter } from '@angular/core';
|
|
2
|
+
import { FieldDescription, Properties } from '@dynamic-field-kit/core';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
export declare class FieldInput {
|
|
5
|
+
fieldDescription?: FieldDescription;
|
|
6
|
+
renderInfos?: Properties;
|
|
7
|
+
onValueChangeField: EventEmitter<{
|
|
8
|
+
value: any;
|
|
9
|
+
key: string;
|
|
10
|
+
}>;
|
|
11
|
+
getFieldValue(): unknown;
|
|
12
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<FieldInput, never>;
|
|
13
|
+
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>;
|
|
14
|
+
}
|
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
import { EventEmitter, OnChanges, OnInit, SimpleChanges } from
|
|
2
|
-
import { FieldDescription, Properties } from
|
|
3
|
-
import { LayoutConfig } from
|
|
4
|
-
import * as i0 from "@angular/core";
|
|
5
|
-
export declare class MultiFieldInput implements OnInit, OnChanges {
|
|
6
|
-
fieldDescriptions: FieldDescription[];
|
|
7
|
-
properties?: Properties;
|
|
8
|
-
onChange: EventEmitter<Properties>;
|
|
9
|
-
layout: LayoutConfig;
|
|
10
|
-
data: Properties;
|
|
11
|
-
visibleFields: FieldDescription[];
|
|
12
|
-
trackByFn(index: number, field: FieldDescription): string | number;
|
|
13
|
-
ngOnInit(): void;
|
|
14
|
-
ngOnChanges(_changes: SimpleChanges): void;
|
|
15
|
-
private init;
|
|
16
|
-
private updateVisibleFields;
|
|
17
|
-
onFieldChange(event: {
|
|
18
|
-
value: any;
|
|
19
|
-
key: string;
|
|
20
|
-
}): void;
|
|
21
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<MultiFieldInput, never>;
|
|
22
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<MultiFieldInput, "dfk-multi-field-input", never, { "fieldDescriptions": "fieldDescriptions"; "properties": "properties"; "layout": "layout"; }, { "onChange": "onChange"; }, never, never, true, never>;
|
|
23
|
-
}
|
|
1
|
+
import { EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
|
|
2
|
+
import { FieldDescription, Properties } from '@dynamic-field-kit/core';
|
|
3
|
+
import { LayoutConfig } from '../types/layout';
|
|
4
|
+
import * as i0 from "@angular/core";
|
|
5
|
+
export declare class MultiFieldInput implements OnInit, OnChanges {
|
|
6
|
+
fieldDescriptions: FieldDescription[];
|
|
7
|
+
properties?: Properties;
|
|
8
|
+
onChange: EventEmitter<Properties>;
|
|
9
|
+
layout: LayoutConfig;
|
|
10
|
+
data: Properties;
|
|
11
|
+
visibleFields: FieldDescription[];
|
|
12
|
+
trackByFn(index: number, field: FieldDescription): string | number;
|
|
13
|
+
ngOnInit(): void;
|
|
14
|
+
ngOnChanges(_changes: SimpleChanges): void;
|
|
15
|
+
private init;
|
|
16
|
+
private updateVisibleFields;
|
|
17
|
+
onFieldChange(event: {
|
|
18
|
+
value: any;
|
|
19
|
+
key: string;
|
|
20
|
+
}): void;
|
|
21
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<MultiFieldInput, never>;
|
|
22
|
+
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>;
|
|
23
|
+
}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { Component, EventEmitter, Input, Output, } from '@angular/core';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
export class BaseInputComponent {
|
|
4
|
+
cdr;
|
|
5
|
+
value;
|
|
6
|
+
label;
|
|
7
|
+
placeholder;
|
|
8
|
+
required;
|
|
9
|
+
disabled;
|
|
10
|
+
options;
|
|
11
|
+
className;
|
|
12
|
+
description;
|
|
13
|
+
errorMessage;
|
|
14
|
+
acceptFile;
|
|
15
|
+
maxLength;
|
|
16
|
+
minNumber;
|
|
17
|
+
maxNumber;
|
|
18
|
+
// Add more from mplis as needed
|
|
19
|
+
valueChange = new EventEmitter();
|
|
20
|
+
constructor(cdr) {
|
|
21
|
+
this.cdr = cdr;
|
|
22
|
+
}
|
|
23
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: BaseInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
24
|
+
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 });
|
|
25
|
+
}
|
|
26
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: BaseInputComponent, decorators: [{
|
|
27
|
+
type: Component,
|
|
28
|
+
args: [{
|
|
29
|
+
template: '',
|
|
30
|
+
}]
|
|
31
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { value: [{
|
|
32
|
+
type: Input
|
|
33
|
+
}], label: [{
|
|
34
|
+
type: Input
|
|
35
|
+
}], placeholder: [{
|
|
36
|
+
type: Input
|
|
37
|
+
}], required: [{
|
|
38
|
+
type: Input
|
|
39
|
+
}], disabled: [{
|
|
40
|
+
type: Input
|
|
41
|
+
}], options: [{
|
|
42
|
+
type: Input
|
|
43
|
+
}], className: [{
|
|
44
|
+
type: Input
|
|
45
|
+
}], description: [{
|
|
46
|
+
type: Input
|
|
47
|
+
}], errorMessage: [{
|
|
48
|
+
type: Input
|
|
49
|
+
}], acceptFile: [{
|
|
50
|
+
type: Input
|
|
51
|
+
}], maxLength: [{
|
|
52
|
+
type: Input
|
|
53
|
+
}], minNumber: [{
|
|
54
|
+
type: Input
|
|
55
|
+
}], maxNumber: [{
|
|
56
|
+
type: Input
|
|
57
|
+
}], valueChange: [{
|
|
58
|
+
type: Output
|
|
59
|
+
}] } });
|
|
60
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQmFzZUlucHV0LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvQmFzZUlucHV0LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFFTCxTQUFTLEVBQ1QsWUFBWSxFQUNaLEtBQUssRUFDTCxNQUFNLEdBQ1AsTUFBTSxlQUFlLENBQUM7O0FBS3ZCLE1BQU0sT0FBZ0Isa0JBQWtCO0lBa0JoQjtJQWpCYixLQUFLLENBQU87SUFDWixLQUFLLENBQVU7SUFDZixXQUFXLENBQVU7SUFDckIsUUFBUSxDQUFXO0lBQ25CLFFBQVEsQ0FBVztJQUNuQixPQUFPLENBQVM7SUFDaEIsU0FBUyxDQUFVO0lBQ25CLFdBQVcsQ0FBVTtJQUNyQixZQUFZLENBQVU7SUFDdEIsVUFBVSxDQUFVO0lBQ3BCLFNBQVMsQ0FBVTtJQUNuQixTQUFTLENBQVU7SUFDbkIsU0FBUyxDQUFVO0lBQzVCLGdDQUFnQztJQUV0QixXQUFXLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQztJQUVoRCxZQUFzQixHQUFzQjtRQUF0QixRQUFHLEdBQUgsR0FBRyxDQUFtQjtJQUFHLENBQUM7d0dBbEI1QixrQkFBa0I7NEZBQWxCLGtCQUFrQiw2YUFGNUIsRUFBRTs7NEZBRVEsa0JBQWtCO2tCQUh2QyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxFQUFFO2lCQUNiO3NGQUVVLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBR0ksV0FBVztzQkFBcEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENoYW5nZURldGVjdG9yUmVmLFxuICBDb21wb25lbnQsXG4gIEV2ZW50RW1pdHRlcixcbiAgSW5wdXQsXG4gIE91dHB1dCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICB0ZW1wbGF0ZTogJycsXG59KVxuZXhwb3J0IGFic3RyYWN0IGNsYXNzIEJhc2VJbnB1dENvbXBvbmVudCB7XG4gIEBJbnB1dCgpIHZhbHVlPzogYW55O1xuICBASW5wdXQoKSBsYWJlbD86IHN0cmluZztcbiAgQElucHV0KCkgcGxhY2Vob2xkZXI/OiBzdHJpbmc7XG4gIEBJbnB1dCgpIHJlcXVpcmVkPzogYm9vbGVhbjtcbiAgQElucHV0KCkgZGlzYWJsZWQ/OiBib29sZWFuO1xuICBASW5wdXQoKSBvcHRpb25zPzogYW55W107XG4gIEBJbnB1dCgpIGNsYXNzTmFtZT86IHN0cmluZztcbiAgQElucHV0KCkgZGVzY3JpcHRpb24/OiBzdHJpbmc7XG4gIEBJbnB1dCgpIGVycm9yTWVzc2FnZT86IHN0cmluZztcbiAgQElucHV0KCkgYWNjZXB0RmlsZT86IHN0cmluZztcbiAgQElucHV0KCkgbWF4TGVuZ3RoPzogbnVtYmVyO1xuICBASW5wdXQoKSBtaW5OdW1iZXI/OiBudW1iZXI7XG4gIEBJbnB1dCgpIG1heE51bWJlcj86IG51bWJlcjtcbiAgLy8gQWRkIG1vcmUgZnJvbSBtcGxpcyBhcyBuZWVkZWRcblxuICBAT3V0cHV0KCkgdmFsdWVDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcblxuICBjb25zdHJ1Y3Rvcihwcm90ZWN0ZWQgY2RyOiBDaGFuZ2VEZXRlY3RvclJlZikge31cbn1cbiJdfQ==
|