ngx-dynamic-entity 1.8.0 → 1.9.0
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 -1
- package/fesm2022/ngx-dynamic-entity.mjs +1733 -398
- package/fesm2022/ngx-dynamic-entity.mjs.map +1 -1
- package/package.json +2 -2
- package/types/ngx-dynamic-entity.d.ts +538 -6
package/README.md
CHANGED
|
@@ -25,7 +25,8 @@ No Angular Material required. This package has no dependency on Material or the
|
|
|
25
25
|
- **`DynamicRecordFormComponent`** — record editor with summary drawer (`showOnMinimize`), profile header, and per-section saving.
|
|
26
26
|
- **Reactive rules** — real-time condition evaluation driving field/tab visibility, validation errors and warnings, and info banners.
|
|
27
27
|
- **Entity references & cascades** — consumer-registered loaders, parent→child dropdown filtering, and `autoPatch` record copying.
|
|
28
|
-
- **
|
|
28
|
+
- **21 field types** — each a standalone component, registered explicitly so unused types are never bundled.
|
|
29
|
+
- **Fully translatable** — config text is `LocalizedText`; the library's own buttons and empty states resolve through `uiText`.
|
|
29
30
|
|
|
30
31
|
---
|
|
31
32
|
|
|
@@ -61,6 +62,36 @@ provideFieldTypes({ text: TextFieldComponent, dropdown: DropdownFieldComponent }
|
|
|
61
62
|
|
|
62
63
|
Multiple `provideFieldTypes` calls merge; on a key collision the later registration wins. Pass your own component for a key to override a built-in, or add a key of your own for a custom type.
|
|
63
64
|
|
|
65
|
+
Some field types take an optional collaborator. A `markdown` field renders its source as
|
|
66
|
+
text until you register a renderer — see
|
|
67
|
+
[Markdown](../../EXTENDING.md#markdown) for `MARKDOWN_RENDERER`, which is any function from
|
|
68
|
+
source to HTML.
|
|
69
|
+
|
|
70
|
+
---
|
|
71
|
+
|
|
72
|
+
## 🌍 Translating the library's own text
|
|
73
|
+
|
|
74
|
+
Labels, placeholders and options come from your config as `LocalizedText` and already follow
|
|
75
|
+
the `language` input. The chrome around them — Save, Reset, "No rows yet." — is the
|
|
76
|
+
library's, and resolves through `uiText`:
|
|
77
|
+
|
|
78
|
+
```typescript
|
|
79
|
+
import { provideNgxDynamicEntity } from 'ngx-dynamic-entity';
|
|
80
|
+
|
|
81
|
+
export const providers = provideNgxDynamicEntity({
|
|
82
|
+
uiText: {
|
|
83
|
+
save: { en: 'Save', de: 'Speichern' },
|
|
84
|
+
reset: { en: 'Reset', de: 'Zurücksetzen' },
|
|
85
|
+
},
|
|
86
|
+
});
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
Values may be `LocalizedText`, a flat string, or — for an app that already has ngx-translate,
|
|
90
|
+
Transloco or `$localize` — a resolver `(key, defaultText, language) => string` provided
|
|
91
|
+
through `UI_TEXT`. Resolution is per key: anything you leave out keeps its English default.
|
|
92
|
+
`DEFAULT_UI_TEXT` exports every key with its English source string, so a translation file can
|
|
93
|
+
be generated from it. See [i18n](../../EXTENDING.md#validation-messages-and-i18n).
|
|
94
|
+
|
|
64
95
|
---
|
|
65
96
|
|
|
66
97
|
## 💡 Usage
|
|
@@ -100,6 +131,51 @@ Multiple `provideFieldTypes` calls merge; on a key collision the later registrat
|
|
|
100
131
|
|
|
101
132
|
---
|
|
102
133
|
|
|
134
|
+
## 📄 Three ways to present a record
|
|
135
|
+
|
|
136
|
+
`DynamicFormComponent` is the editable form. `DynamicRecordFormComponent` renders the same
|
|
137
|
+
config as a record, and two of its inputs decide how much a reader may do:
|
|
138
|
+
|
|
139
|
+
| Presentation | Component | Inputs |
|
|
140
|
+
|---|---|---|
|
|
141
|
+
| **Form** | `ngx-dynamic-form` | editable controls plus the actions block |
|
|
142
|
+
| **Record view** | `ngx-dynamic-record-form` | `viewMode` (default `true`) — values, with a per-tab "Edit section" flow |
|
|
143
|
+
| **Data only** | `ngx-dynamic-record-form` | `isReadOnly="true"` — values, and no way to edit them |
|
|
144
|
+
|
|
145
|
+
```html
|
|
146
|
+
<!-- Read-only for everyone, whatever their roles allow. -->
|
|
147
|
+
<ngx-dynamic-record-form
|
|
148
|
+
[config]="config"
|
|
149
|
+
[initialData]="record"
|
|
150
|
+
[userRoles]="roles"
|
|
151
|
+
[isReadOnly]="true"
|
|
152
|
+
></ngx-dynamic-record-form>
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
`viewMode="false"` gives a directly editable record with no view/edit distinction, for hosts
|
|
156
|
+
that do not want the section flow.
|
|
157
|
+
|
|
158
|
+
### Record-form inputs
|
|
159
|
+
|
|
160
|
+
| Input | Type | Notes |
|
|
161
|
+
|---|---|---|
|
|
162
|
+
| `config` / `initialData` / `userRoles` / `language` | — | As the form component. |
|
|
163
|
+
| `viewMode` | `boolean` | Default `true`. Read-only with a per-tab edit flow. |
|
|
164
|
+
| `isReadOnly` | `boolean` | Whole record read-only, with no edit affordance at all. |
|
|
165
|
+
| `readOnlyFields` | `string[]` | Specific ids read-only while the rest stays editable. |
|
|
166
|
+
| `rules` | `FormRule[]` | Optional reactive rules. |
|
|
167
|
+
|
|
168
|
+
| Output | Payload |
|
|
169
|
+
|---|---|
|
|
170
|
+
| `formSubmit` / `formChange` / `formReset` | As the form component. |
|
|
171
|
+
| `sectionSave` | `{ tabId, record }` — one tab was saved. |
|
|
172
|
+
|
|
173
|
+
**RBAC applies on top of all three.** Roles outside `permissions.edit` get a read-only
|
|
174
|
+
record whichever presentation you choose — see [Security](#-security), because that is a
|
|
175
|
+
rendering decision, not an access-control boundary.
|
|
176
|
+
|
|
177
|
+
---
|
|
178
|
+
|
|
103
179
|
## 🗂 Record shape
|
|
104
180
|
|
|
105
181
|
A record is **nested by tab id** by default:
|