@praxisui/dynamic-fields 1.0.0-beta.8 → 2.0.0-beta.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 +233 -28
- package/fesm2022/praxisui-dynamic-fields-index--0VHT-UN.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index--0VHT-UN.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-2ktcWEBV.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-2ktcWEBV.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-3l6zC1W3.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-3l6zC1W3.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-4L3XCTFW.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-4L3XCTFW.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-4etObelC.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-4etObelC.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-7NLgtZV4.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-7NLgtZV4.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-9cUw-uin.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-9cUw-uin.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-B25sTGJm.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-B25sTGJm.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-B7sFfV2V.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-B7sFfV2V.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-BETqsE-d.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-BETqsE-d.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-BMHfcV1t.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-BMHfcV1t.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-BQKbAWZs.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-BQKbAWZs.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-BYwGW1Kw.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-BYwGW1Kw.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-Bi_FDPXT.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-Bi_FDPXT.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-BrVzdIwk.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-BrVzdIwk.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-BrxXd7br.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-BrxXd7br.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-BtUE7oWU.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-BtUE7oWU.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-Btg-za3F.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-Btg-za3F.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-BuZrkGb9.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-BuZrkGb9.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-BvUQ5PzZ.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-BvUQ5PzZ.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-BwgHaxLq.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-BwgHaxLq.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-ByxZ2zjO.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-ByxZ2zjO.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-C3M48QVv.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-C3M48QVv.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-CCUUrqX1.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-CCUUrqX1.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-CChS2_yU.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-CChS2_yU.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-CDqEHCQ2.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-CDqEHCQ2.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-CHHhPHtm.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-CHHhPHtm.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-CM1DKZdM.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-CM1DKZdM.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-CR5-JQ4D.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-CR5-JQ4D.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-CTSix-em.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-CTSix-em.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-CWLmblmT.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-CWLmblmT.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-Cd1FgMMO.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-Cd1FgMMO.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-CdYJmogw.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-CdYJmogw.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-CepfRn_M.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-CepfRn_M.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-CfZxkljy.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-CfZxkljy.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-ChmtcdoA.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-ChmtcdoA.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-DAitwyhi.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-DAitwyhi.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-DCWqoK2f.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-DCWqoK2f.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-DD5h8DRG.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-DD5h8DRG.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-DHpOyyG2.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-DHpOyyG2.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-DSLlCAkR.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-DSLlCAkR.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-DWPsQz9I.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-DWPsQz9I.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-DWYQVXB2.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-DWYQVXB2.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-DYV54GUZ.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-DYV54GUZ.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-D_JTu38N.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-D_JTu38N.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-Df-aLjU9.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-Df-aLjU9.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-DhNsttmn.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-DhNsttmn.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-DjpEmVf9.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-DjpEmVf9.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-DltIfZVi.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-DltIfZVi.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-KgXOJaK0.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-KgXOJaK0.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-RfosTXa6.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-RfosTXa6.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-XvVS6lAQ.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-XvVS6lAQ.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-ZbanoeCA.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-ZbanoeCA.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-bKhO6aXi.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-bKhO6aXi.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-iIeaA6ko.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-iIeaA6ko.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-kHj5rriz.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-kHj5rriz.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-nLkSGWVd.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-nLkSGWVd.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-tOts6fkY.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-tOts6fkY.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-ut-CbA6Y.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-ut-CbA6Y.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-w82XbpLT.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-w82XbpLT.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-wivemk7m.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-wivemk7m.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-wwy7vHkJ.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-wwy7vHkJ.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields-index-xgZb8rwx.mjs +2 -0
- package/fesm2022/praxisui-dynamic-fields-index-xgZb8rwx.mjs.map +1 -0
- package/fesm2022/praxisui-dynamic-fields.mjs +42827 -13289
- package/fesm2022/praxisui-dynamic-fields.mjs.map +1 -1
- package/index.d.ts +3215 -263
- package/package.json +11 -10
package/README.md
CHANGED
|
@@ -1,10 +1,68 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: "Dynamic Fields"
|
|
3
|
+
slug: "dynamic-fields-overview"
|
|
4
|
+
description: "Visao geral do @praxisui/dynamic-fields com renderizacao metadata-driven, registro lazy de componentes, tokens M3 e campos enterprise."
|
|
5
|
+
doc_type: "reference"
|
|
6
|
+
document_kind: "component-overview"
|
|
7
|
+
component: "dynamic-fields"
|
|
8
|
+
category: "components"
|
|
9
|
+
audience:
|
|
10
|
+
- "frontend"
|
|
11
|
+
- "host"
|
|
12
|
+
- "architect"
|
|
13
|
+
level: "intermediate"
|
|
14
|
+
status: "active"
|
|
15
|
+
owner: "praxis-ui"
|
|
16
|
+
tags:
|
|
17
|
+
- "dynamic-fields"
|
|
18
|
+
- "metadata"
|
|
19
|
+
- "forms"
|
|
20
|
+
- "runtime"
|
|
21
|
+
- "material"
|
|
22
|
+
order: 32
|
|
23
|
+
icon: "toc"
|
|
24
|
+
toc: true
|
|
25
|
+
sidebar: true
|
|
26
|
+
search_boost: 1.0
|
|
27
|
+
reading_time: 16
|
|
28
|
+
estimated_setup_time: 25
|
|
29
|
+
version: "1.0"
|
|
30
|
+
related_docs:
|
|
31
|
+
- "dynamic-fields-field-catalog"
|
|
32
|
+
- "dynamic-fields-field-selection-guide"
|
|
33
|
+
- "dynamic-fields-host-custom-field-guide"
|
|
34
|
+
- "dynamic-fields-host-custom-field-troubleshooting"
|
|
35
|
+
- "dynamic-fields-inline-filter-catalog"
|
|
36
|
+
- "dynamic-fields-inline-components-guide"
|
|
37
|
+
- "host-integration-guide"
|
|
38
|
+
- "consumer-integration-quickstart"
|
|
39
|
+
keywords:
|
|
40
|
+
- "dynamic field loader"
|
|
41
|
+
- "metadata-driven fields"
|
|
42
|
+
- "material controls"
|
|
43
|
+
- "runtime registry"
|
|
44
|
+
last_updated: "2026-03-07"
|
|
45
|
+
---
|
|
46
|
+
|
|
1
47
|
# @praxisui/dynamic-fields — Dynamic Form Fields
|
|
2
48
|
|
|
3
|
-
|
|
49
|
+
## Documentation
|
|
50
|
+
|
|
51
|
+
- Official documentation: https://praxisui.dev
|
|
52
|
+
- Quickstart reference app: https://github.com/codexrodrigues/praxis-ui-quickstart
|
|
53
|
+
- Recommended for: metadata-driven forms that need lazy field registration, Angular Material integration and enterprise field catalogs
|
|
4
54
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
-
|
|
55
|
+
## When to use
|
|
56
|
+
|
|
57
|
+
- Render field components from metadata at runtime
|
|
58
|
+
- Standardize field behavior and theming across multiple forms
|
|
59
|
+
- Extend the field catalog without hardwiring every component into the host app
|
|
60
|
+
|
|
61
|
+
## Concept Usage
|
|
62
|
+
|
|
63
|
+
- Dynamic component rendering
|
|
64
|
+
- Headless UI and design systems
|
|
65
|
+
- Data-driven forms
|
|
8
66
|
|
|
9
67
|
Biblioteca de campos dinâmicos para aplicações Angular (v20+) com Material Design. Renderiza campos a partir de metadados, com carregamento lazy e integração com Reactive Forms.
|
|
10
68
|
|
|
@@ -14,6 +72,37 @@ Biblioteca de campos dinâmicos para aplicações Angular (v20+) com Material De
|
|
|
14
72
|
npm install @praxisui/dynamic-fields
|
|
15
73
|
```
|
|
16
74
|
|
|
75
|
+
### Estilos e tokens (opcional)
|
|
76
|
+
|
|
77
|
+
- Largura dos campos: quando o host usa `providePraxisDynamicFields()`, a lib injeta um estilo escopado que garante `mat-form-field { width: 100% }` dentro dos componentes. Não é necessário repetir no app.
|
|
78
|
+
- Gradiente de marca (se desejar): o host pode definir um gradiente para detalhes visuais da lib (ex.: toolbar de edição):
|
|
79
|
+
|
|
80
|
+
```scss
|
|
81
|
+
:root {
|
|
82
|
+
--p-primary-gradient: linear-gradient(90deg, #1f8a8a, #6c63ff);
|
|
83
|
+
}
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
Sem essa variável, o toolbar usa fallback sólido em `--md-sys-color-primary`.
|
|
87
|
+
|
|
88
|
+
Tema e escopo (host)
|
|
89
|
+
- A classe de tema é decisão do host (`.dark-theme` ou `.theme-dark`/`.theme-light`); mantenha tokens e componentes no mesmo escopo.
|
|
90
|
+
|
|
91
|
+
### Tokens M3 obrigatórios (host)
|
|
92
|
+
|
|
93
|
+
Para que os componentes reflitam corretamente o tema do app host, garanta no mínimo:
|
|
94
|
+
|
|
95
|
+
- Superfícies: `--md-sys-color-surface`, `--md-sys-color-surface-variant`, `--md-sys-color-surface-container-*`
|
|
96
|
+
- Texto/contorno: `--md-sys-color-on-surface`, `--md-sys-color-on-surface-variant`, `--md-sys-color-outline`, `--md-sys-color-outline-variant`
|
|
97
|
+
- Semânticos: `--md-sys-color-primary`, `--md-sys-color-on-primary`, `--md-sys-color-secondary`, `--md-sys-color-on-secondary`, `--md-sys-color-tertiary`, `--md-sys-color-on-tertiary`, `--md-sys-color-error`, `--md-sys-color-on-error`
|
|
98
|
+
- Containers: `--md-sys-color-primary-container`, `--md-sys-color-on-primary-container`, `--md-sys-color-secondary-container`, `--md-sys-color-on-secondary-container`, `--md-sys-color-tertiary-container`, `--md-sys-color-on-tertiary-container`, `--md-sys-color-error-container`, `--md-sys-color-on-error-container`
|
|
99
|
+
- Elevação: `--md-sys-elevation-level1`–`--md-sys-elevation-level3`
|
|
100
|
+
|
|
101
|
+
Notas:
|
|
102
|
+
- Color pickers agora derivam paletas por padrão de tokens M3. Se quiser cores específicas, use `paletteColors`/`paletteSettings`.
|
|
103
|
+
- A classe de tema é decisão do host (`.dark-theme` ou `.theme-dark`/`.theme-light`); mantenha tokens e componentes no mesmo escopo.
|
|
104
|
+
- Datepicker usa `panelClass="pdx-datepicker-panel"`; personalize o overlay via essa classe no tema do host.
|
|
105
|
+
|
|
17
106
|
Peers (instale no app host):
|
|
18
107
|
- `@angular/core` `^20.1.0`, `@angular/common` `^20.1.0`, `@angular/forms` `^20.1.0`
|
|
19
108
|
- `@angular/material` `^20.1.0`, `@angular/cdk` `^20.1.0`, `@angular/router` `^20.1.0`
|
|
@@ -47,32 +136,34 @@ const component = await registry.getComponent(FieldControlType.INPUT);
|
|
|
47
136
|
const isRegistered = registry.isRegistered(FieldControlType.INPUT);
|
|
48
137
|
```
|
|
49
138
|
|
|
139
|
+
## 📄 Documentacao Tecnica da Lib
|
|
140
|
+
|
|
141
|
+
- `projects/praxis-dynamic-fields/docs/dynamic-fields-inventory.md`
|
|
142
|
+
- `projects/praxis-dynamic-fields/docs/dynamic-fields-field-catalog.md`
|
|
143
|
+
- `projects/praxis-dynamic-fields/docs/dynamic-fields-field-selection-guide.md`
|
|
144
|
+
- `projects/praxis-dynamic-fields/docs/dynamic-fields-host-custom-field-guide.md`
|
|
145
|
+
- `projects/praxis-dynamic-fields/docs/dynamic-fields-host-custom-field-troubleshooting.md`
|
|
146
|
+
- `projects/praxis-dynamic-fields/docs/dynamic-fields-inline-filter-inventory.md`
|
|
147
|
+
- `projects/praxis-dynamic-fields/docs/dynamic-fields-inline-filter-catalog.md`
|
|
148
|
+
- `projects/praxis-dynamic-fields/docs/dynamic-fields-inline-filter-selection-guide.md`
|
|
149
|
+
- `projects/praxis-dynamic-fields/docs/dynamic-fields-inline-filter-runtime-contract.md`
|
|
150
|
+
- `projects/praxis-dynamic-fields/docs/dynamic-fields-inline-filter-custom-component-guide.md`
|
|
151
|
+
- `projects/praxis-dynamic-fields/docs/dynamic-fields-inline-filter-troubleshooting.md`
|
|
152
|
+
- `projects/praxis-dynamic-fields/docs/dynamic-fields-inline-components-guide.md` (slug: `dynamic-fields-inline-components-guide`)
|
|
153
|
+
- `projects/praxis-dynamic-fields/docs/generic-crud-service.md`
|
|
154
|
+
|
|
50
155
|
### Componentes Suportados
|
|
51
156
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
-
|
|
57
|
-
-
|
|
58
|
-
-
|
|
59
|
-
- `
|
|
60
|
-
- `
|
|
61
|
-
-
|
|
62
|
-
- `FieldControlType.CURRENCY_INPUT` - Campo monetário
|
|
63
|
-
- `FieldControlType.NUMERIC_TEXT_BOX` - Campo numérico
|
|
64
|
-
- `FieldControlType.MULTI_SELECT` - Seleção múltipla
|
|
65
|
-
- `FieldControlType.AUTO_COMPLETE` - Auto completar (busca habilitada por padrão)
|
|
66
|
-
- `FieldControlType.DATE_TIME_PICKER` - Data e hora
|
|
67
|
-
- `FieldControlType.DATE_RANGE` - Intervalo de datas
|
|
68
|
-
- `FieldControlType.FILE_UPLOAD` - Upload de arquivos
|
|
69
|
-
- `FieldControlType.TOGGLE` - Interruptor Material Design
|
|
70
|
-
- `FieldControlType.SLIDER` - Slider Material Design
|
|
71
|
-
- `FieldControlType.TIME_PICKER` - Seletor de horário
|
|
72
|
-
- `FieldControlType.RATING` - Classificação por estrelas
|
|
73
|
-
- `FieldControlType.COLOR_PICKER` - Seletor de cores
|
|
74
|
-
|
|
75
|
-
Campos com `FieldControlType.AUTO_COMPLETE` utilizam internamente o `MaterialSearchableSelectComponent`, habilitando busca automaticamente.
|
|
157
|
+
A fonte de verdade do suporte default e o `ComponentRegistryService`.
|
|
158
|
+
|
|
159
|
+
Use os documentos governados abaixo em vez de manter listas textuais soltas:
|
|
160
|
+
|
|
161
|
+
- inventario auditavel do runtime: `dynamic-fields-inventory.md`
|
|
162
|
+
- catalogo principal de fields de formulario: `dynamic-fields-field-catalog.md`
|
|
163
|
+
- guia de escolha do field correto: `dynamic-fields-field-selection-guide.md`
|
|
164
|
+
- extensao do host: `dynamic-fields-host-custom-field-guide.md`
|
|
165
|
+
- troubleshooting de extensao: `dynamic-fields-host-custom-field-troubleshooting.md`
|
|
166
|
+
- trilha especializada de filtros compactos: `dynamic-fields-inline-filter-catalog.md`
|
|
76
167
|
|
|
77
168
|
## 🧩 MaterialSelectComponent
|
|
78
169
|
|
|
@@ -101,6 +192,44 @@ Grupo de botões de rádio que consome metadados ou dados remotos para criar sel
|
|
|
101
192
|
- **Carregamento Dinâmico**: mesmas chaves de configuração de `MaterialSelectComponent` para buscar opções.
|
|
102
193
|
- **Layout Flexível**: configuração de orientação, `labelPosition` e `color` segundo a [documentação oficial](https://material.angular.dev/components/radio/overview).
|
|
103
194
|
|
|
195
|
+
## 🧩 Avatar Field
|
|
196
|
+
|
|
197
|
+
Componente visual para exibir representação de usuário/entidade/estado, com prioridade de conteúdo:
|
|
198
|
+
|
|
199
|
+
- imageSrc > icon > initials > ng-content
|
|
200
|
+
|
|
201
|
+
Propriedades principais: `themeColor`, `rounded`, `size`, `fillMode`, `border`, `tooltip`, `ariaLabel`.
|
|
202
|
+
|
|
203
|
+
Exemplos:
|
|
204
|
+
|
|
205
|
+
```html
|
|
206
|
+
<pdx-material-avatar [imageSrc]="user.img" size="large" themeColor="tertiary"></pdx-material-avatar>
|
|
207
|
+
<pdx-material-avatar initials="MB" themeColor="secondary"></pdx-material-avatar>
|
|
208
|
+
<pdx-material-avatar icon="person" fillMode="outline"></pdx-material-avatar>
|
|
209
|
+
<pdx-material-avatar><app-status-badge></app-status-badge></pdx-material-avatar>
|
|
210
|
+
```
|
|
211
|
+
|
|
212
|
+
Uso em formulários dinâmicos (via metadata):
|
|
213
|
+
|
|
214
|
+
```ts
|
|
215
|
+
import { FieldControlType, type FieldMetadata } from '@praxisui/core';
|
|
216
|
+
|
|
217
|
+
const fields: FieldMetadata[] = [
|
|
218
|
+
{
|
|
219
|
+
name: 'avatar',
|
|
220
|
+
label: 'Avatar',
|
|
221
|
+
controlType: FieldControlType.AVATAR,
|
|
222
|
+
// opções específicas via `extra` (quando aplicável)
|
|
223
|
+
extra: { imageSrc: 'https://example.com/u/42.png', size: 'large' }
|
|
224
|
+
}
|
|
225
|
+
];
|
|
226
|
+
```
|
|
227
|
+
|
|
228
|
+
Tokens M3 aplicados:
|
|
229
|
+
|
|
230
|
+
- `--pfx-avatar-bg`, `--pfx-avatar-fg`, `--pfx-avatar-border-color`, `--pfx-avatar-border-w`
|
|
231
|
+
- `--pfx-avatar-size`, `--pfx-avatar-radius-[full|lg|md|sm]`
|
|
232
|
+
|
|
104
233
|
## 📦 Instalação
|
|
105
234
|
|
|
106
235
|
```bash
|
|
@@ -309,6 +438,18 @@ _Sistema desenvolvido seguindo diretrizes de simplicidade e foco no essencial._
|
|
|
309
438
|
|
|
310
439
|
## 🔌 Extensão pelo App Host (registrando seu próprio componente)
|
|
311
440
|
|
|
441
|
+
Resumo executivo:
|
|
442
|
+
|
|
443
|
+
- `ComponentRegistryService.register(...)`: registra o componente que o runtime carrega.
|
|
444
|
+
- `ComponentMetadataRegistry.register(...)`: registra nome/ícone/superfície editorial.
|
|
445
|
+
- `controlType` do contrato deve bater com `ComponentDocMeta.id`.
|
|
446
|
+
- Hot metadata funciona melhor quando o componente expõe `setInputMetadata(...)` e/ou signal de metadata.
|
|
447
|
+
|
|
448
|
+
Para o guia governado completo, consulte:
|
|
449
|
+
|
|
450
|
+
- `projects/praxis-dynamic-fields/docs/dynamic-fields-host-custom-field-guide.md`
|
|
451
|
+
- `projects/praxis-dynamic-fields/docs/dynamic-fields-host-custom-field-troubleshooting.md`
|
|
452
|
+
|
|
312
453
|
Aplicações host podem registrar componentes próprios para uso no DynamicFieldLoader e expor metadados para título/ícone amigáveis no editor.
|
|
313
454
|
|
|
314
455
|
### 1) Registrar o componente no runtime (DynamicFieldLoader)
|
|
@@ -395,3 +536,67 @@ const field: FieldMetadata = {
|
|
|
395
536
|
- Suporta `setInputMetadata` ou signal `metadata` com `.set(...)` para hot updates.
|
|
396
537
|
- Opcional: aceita `[readonlyMode]`, `[disabledMode]`, `[visible]`, `[presentationMode]`.
|
|
397
538
|
- O `controlType` do campo coincide com o `id` do `ComponentDocMeta` (para resolver título/ícone no editor).
|
|
539
|
+
|
|
540
|
+
### 🧼 Botão de limpar (clearButton)
|
|
541
|
+
|
|
542
|
+
Muitos campos suportam um botão de limpar configurável via metadata. Ele aparece como um `mat-icon-button` no suffix do `mat-form-field` e respeita `readonly`, `disabled` e `presentationMode`.
|
|
543
|
+
|
|
544
|
+
Exemplo de uso:
|
|
545
|
+
|
|
546
|
+
```ts
|
|
547
|
+
const field: FieldMetadata = {
|
|
548
|
+
name: 'search',
|
|
549
|
+
label: 'Buscar',
|
|
550
|
+
controlType: FieldControlType.INPUT,
|
|
551
|
+
clearButton: {
|
|
552
|
+
enabled: true,
|
|
553
|
+
icon: 'mi:clear',
|
|
554
|
+
iconColor: 'primary', // ou cor CSS (#496ddb, rgb(73,109,219), red)
|
|
555
|
+
tooltip: 'Limpar',
|
|
556
|
+
ariaLabel: 'Limpar busca',
|
|
557
|
+
showOnlyWhenFilled: true,
|
|
558
|
+
},
|
|
559
|
+
};
|
|
560
|
+
```
|
|
561
|
+
|
|
562
|
+
Observações:
|
|
563
|
+
- `iconColor` aceita tokens de tema (`primary`, `accent`, `warn`) ou cores CSS.
|
|
564
|
+
- Em campos com comportamentos especializados (ex.: currency), o clear também limpa o valor visual.
|
|
565
|
+
- `clearButton` também aceita boolean (`true/false`) por compatibilidade retroativa.
|
|
566
|
+
- No `pdx-color-picker`, o clear é exibido no menu interno, mas aceita `clearButton` como boolean ou objeto (ícone/cor/tooltip).
|
|
567
|
+
|
|
568
|
+
### ⭐ Filter Inline Rating (faixa)
|
|
569
|
+
|
|
570
|
+
Use `controlType: 'inlineRating'` quando o filtro de avaliação precisar trabalhar com intervalo no toolbar.
|
|
571
|
+
|
|
572
|
+
Contrato de valor (payload):
|
|
573
|
+
- `null` => sem filtro aplicado
|
|
574
|
+
- `{ start: number | null, end: number | null }` => faixa de avaliação
|
|
575
|
+
|
|
576
|
+
Exemplo:
|
|
577
|
+
|
|
578
|
+
```ts
|
|
579
|
+
const ratingRangeField: FieldMetadata = {
|
|
580
|
+
name: 'ratingRange',
|
|
581
|
+
label: 'Avaliação',
|
|
582
|
+
controlType: 'inlineRating',
|
|
583
|
+
min: 1,
|
|
584
|
+
max: 5,
|
|
585
|
+
allowHalf: true,
|
|
586
|
+
ratingToneLowColor: '#ef4444',
|
|
587
|
+
ratingToneMidColor: '#f59e0b',
|
|
588
|
+
ratingToneHighColor: '#22a45d',
|
|
589
|
+
ratingBadgeColor: '#f59e0b',
|
|
590
|
+
clearButton: { enabled: true, showOnlyWhenFilled: true },
|
|
591
|
+
};
|
|
592
|
+
```
|
|
593
|
+
|
|
594
|
+
Compatibilidade corporativa:
|
|
595
|
+
- `FieldControlType.RATING` continua sendo valor único (ex.: `4`).
|
|
596
|
+
- A conversão para faixa ocorre apenas com `controlType` explícito de inline rating (`inlineRating`).
|
|
597
|
+
- Para permitir meia estrela, use `allowHalf: true` (ou `step: 0.5` quando precisar de controle manual).
|
|
598
|
+
- Cores das estrelas no popover podem ser definidas por:
|
|
599
|
+
- `ratingToneLowColor`
|
|
600
|
+
- `ratingToneMidColor`
|
|
601
|
+
- `ratingToneHighColor`
|
|
602
|
+
- `ratingBadgeColor`
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"praxisui-dynamic-fields-index--0VHT-UN.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"praxisui-dynamic-fields-index-2ktcWEBV.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"praxisui-dynamic-fields-index-3l6zC1W3.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"praxisui-dynamic-fields-index-4L3XCTFW.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"praxisui-dynamic-fields-index-4etObelC.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"praxisui-dynamic-fields-index-7NLgtZV4.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"praxisui-dynamic-fields-index-9cUw-uin.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"praxisui-dynamic-fields-index-B25sTGJm.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"praxisui-dynamic-fields-index-B7sFfV2V.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"praxisui-dynamic-fields-index-BETqsE-d.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"praxisui-dynamic-fields-index-BMHfcV1t.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"praxisui-dynamic-fields-index-BQKbAWZs.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"praxisui-dynamic-fields-index-BYwGW1Kw.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"praxisui-dynamic-fields-index-Bi_FDPXT.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"praxisui-dynamic-fields-index-BrVzdIwk.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"praxisui-dynamic-fields-index-BrxXd7br.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"praxisui-dynamic-fields-index-BtUE7oWU.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"praxisui-dynamic-fields-index-Btg-za3F.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"praxisui-dynamic-fields-index-BuZrkGb9.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"praxisui-dynamic-fields-index-BvUQ5PzZ.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"praxisui-dynamic-fields-index-BwgHaxLq.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"praxisui-dynamic-fields-index-ByxZ2zjO.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"praxisui-dynamic-fields-index-C3M48QVv.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"praxisui-dynamic-fields-index-CCUUrqX1.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"praxisui-dynamic-fields-index-CChS2_yU.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"praxisui-dynamic-fields-index-CDqEHCQ2.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"praxisui-dynamic-fields-index-CHHhPHtm.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"praxisui-dynamic-fields-index-CM1DKZdM.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"praxisui-dynamic-fields-index-CR5-JQ4D.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"praxisui-dynamic-fields-index-CTSix-em.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"praxisui-dynamic-fields-index-CWLmblmT.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"praxisui-dynamic-fields-index-Cd1FgMMO.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"praxisui-dynamic-fields-index-CdYJmogw.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"praxisui-dynamic-fields-index-CepfRn_M.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"praxisui-dynamic-fields-index-CfZxkljy.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"praxisui-dynamic-fields-index-ChmtcdoA.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"praxisui-dynamic-fields-index-DAitwyhi.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"praxisui-dynamic-fields-index-DCWqoK2f.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"praxisui-dynamic-fields-index-DD5h8DRG.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|