@praxisui/dynamic-fields 8.0.0-beta.21 → 8.0.0-beta.23
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/docs/dynamic-fields-field-selection-guide.md +23 -0
- package/docs/dynamic-fields-inline-filter-runtime-contract.md +24 -0
- package/fesm2022/praxisui-dynamic-fields.mjs +721 -111
- package/index.d.ts +12 -1
- package/package.json +3 -3
- package/src/lib/base/pdx-base-input-runtime-contract.json-api.md +30 -1
- package/src/lib/components/material-date-range/pdx-material-date-range.json-api.md +15 -3
- package/src/lib/components/material-datepicker/pdx-material-datepicker.json-api.md +14 -2
- package/src/lib/components/material-price-range/pdx-material-price-range.json-api.md +3 -0
package/index.d.ts
CHANGED
|
@@ -974,6 +974,7 @@ declare abstract class SimpleBaseSelectComponent<T = any> extends SimpleBaseInpu
|
|
|
974
974
|
/** Holds error message when option loading fails */
|
|
975
975
|
readonly error: _angular_core.WritableSignal<string | null>;
|
|
976
976
|
private readonly matSelectInitEffect;
|
|
977
|
+
private readonly multipleControlNormalizationEffect;
|
|
977
978
|
/** CRUD service for remote option loading (optional) */
|
|
978
979
|
protected readonly crudService: GenericCrudService<any> | null;
|
|
979
980
|
/** Emits whenever the selected value(s) change */
|
|
@@ -1011,6 +1012,8 @@ declare abstract class SimpleBaseSelectComponent<T = any> extends SimpleBaseInpu
|
|
|
1011
1012
|
protected defaultPanelClass(): string | string[] | undefined;
|
|
1012
1013
|
selectPanelClass(): string[];
|
|
1013
1014
|
protected isInteractionDisabled(): boolean;
|
|
1015
|
+
protected normalizeMultipleControlValue(): void;
|
|
1016
|
+
setExternalControl(control: AbstractControl): void;
|
|
1014
1017
|
/** Whether to show the clear button (if enabled in metadata) */
|
|
1015
1018
|
showClear(): boolean;
|
|
1016
1019
|
/** Clears the selection according to single/multiple mode */
|
|
@@ -1103,6 +1106,8 @@ declare abstract class SimpleBaseSelectComponent<T = any> extends SimpleBaseInpu
|
|
|
1103
1106
|
selectOption(option: SelectOption<T>): void;
|
|
1104
1107
|
/** Checks if the provided value is currently selected */
|
|
1105
1108
|
isSelected(value: T): boolean;
|
|
1109
|
+
isOptionDisabled(option: SelectOption<T>): boolean;
|
|
1110
|
+
protected areOptionValuesEqual(left: unknown, right: unknown): boolean;
|
|
1106
1111
|
/**
|
|
1107
1112
|
* Toggles selection of all options when `selectAll` is enabled in multiple
|
|
1108
1113
|
* selection mode.
|
|
@@ -1899,17 +1904,23 @@ declare class MaterialDateRangeComponent extends SimpleBaseInputComponent implem
|
|
|
1899
1904
|
readonly maxDate: _angular_core.Signal<any>;
|
|
1900
1905
|
readonly startAt: _angular_core.Signal<any>;
|
|
1901
1906
|
overlayOpen: boolean;
|
|
1907
|
+
readonly shortcutOverlayViewportMargin = 12;
|
|
1902
1908
|
private pickerOpen;
|
|
1903
1909
|
private readonly dateAdapter;
|
|
1904
1910
|
picker: MatDateRangePicker<Date>;
|
|
1911
|
+
private endDateInput?;
|
|
1905
1912
|
readonly shouldShowShortcuts: () => boolean;
|
|
1906
1913
|
readonly overlayPositions: () => ConnectedPosition[];
|
|
1914
|
+
private shortcutOverlayBelowPositions;
|
|
1915
|
+
private shortcutOverlayLeftPositions;
|
|
1916
|
+
private shortcutOverlayRightPositions;
|
|
1907
1917
|
readonly resolvedPresets: _angular_core.Signal<Record<string, DateRangePreset>>;
|
|
1908
1918
|
readonly shortcutItems: _angular_core.Signal<DateRangeShortcutItem[]>;
|
|
1909
1919
|
readonly activePresetId: () => string | null;
|
|
1910
1920
|
writeValue(value: unknown): void;
|
|
1911
1921
|
ngOnInit(): void;
|
|
1912
1922
|
protected shouldPropagateRangeGroupChanges(): boolean;
|
|
1923
|
+
protected focusEndDateInput(event: Event): void;
|
|
1913
1924
|
private propagateRangeValue;
|
|
1914
1925
|
private isEmptyRangeValue;
|
|
1915
1926
|
private areDatesEqual;
|
|
@@ -2571,7 +2582,7 @@ declare class MaterialAsyncSelectComponent extends SimpleBaseSelectComponent {
|
|
|
2571
2582
|
protected mapRemoteOption(option: AsyncOption): AsyncRenderedOption;
|
|
2572
2583
|
protected resolveRemoteOptionValue(option: AsyncOption): unknown;
|
|
2573
2584
|
protected resolveRemoteOptionDisabled(option: AsyncOption): boolean;
|
|
2574
|
-
|
|
2585
|
+
protected areOptionValuesEqual(left: unknown, right: unknown): boolean;
|
|
2575
2586
|
private normalizeRemoteOptionValue;
|
|
2576
2587
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MaterialAsyncSelectComponent, never>;
|
|
2577
2588
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MaterialAsyncSelectComponent, "pdx-material-async-select", never, { "readonlyMode": { "alias": "readonlyMode"; "required": false; }; "disabledMode": { "alias": "disabledMode"; "required": false; }; "visible": { "alias": "visible"; "required": false; }; "presentationMode": { "alias": "presentationMode"; "required": false; }; }, {}, never, never, true, never>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@praxisui/dynamic-fields",
|
|
3
|
-
"version": "8.0.0-beta.
|
|
3
|
+
"version": "8.0.0-beta.23",
|
|
4
4
|
"description": "Angular Material-based dynamic form fields for Praxis UI with lazy loading and metadata-driven rendering.",
|
|
5
5
|
"peerDependencies": {
|
|
6
6
|
"@angular/common": "^20.1.0",
|
|
@@ -11,8 +11,8 @@
|
|
|
11
11
|
"@angular/platform-browser": "^20.1.0",
|
|
12
12
|
"@angular/router": "^20.1.0",
|
|
13
13
|
"rxjs": "^7.8.0",
|
|
14
|
-
"@praxisui/core": "^8.0.0-beta.
|
|
15
|
-
"@praxisui/cron-builder": "^8.0.0-beta.
|
|
14
|
+
"@praxisui/core": "^8.0.0-beta.23",
|
|
15
|
+
"@praxisui/cron-builder": "^8.0.0-beta.23"
|
|
16
16
|
},
|
|
17
17
|
"dependencies": {
|
|
18
18
|
"libphonenumber-js": "^1.12.41",
|
|
@@ -373,6 +373,33 @@ Limites:
|
|
|
373
373
|
| `metadata.ariaDescribedby` | `string` | Active | `aria-describedby` no elemento nativo. |
|
|
374
374
|
| `metadata.ariaLabelledby` | `string` | Active | `aria-labelledby` no elemento nativo. |
|
|
375
375
|
|
|
376
|
+
#### Politica de label com prefixos e sufixos
|
|
377
|
+
|
|
378
|
+
Quando um campo usa `metadata.prefixIcon`, `metadata.suffixIcon`, `clearButton`,
|
|
379
|
+
datepicker toggle, seletor de cor, simbolo de moeda ou qualquer outro conteudo
|
|
380
|
+
renderizado via `matPrefix`/`matSuffix`, a politica recomendada para
|
|
381
|
+
`materialDesign.appearance = 'fill'` ou `'outline'` e:
|
|
382
|
+
|
|
383
|
+
```json
|
|
384
|
+
{
|
|
385
|
+
"materialDesign": {
|
|
386
|
+
"appearance": "outline",
|
|
387
|
+
"floatLabel": "always",
|
|
388
|
+
"subscriptSizing": "dynamic"
|
|
389
|
+
}
|
|
390
|
+
}
|
|
391
|
+
```
|
|
392
|
+
|
|
393
|
+
Essa regra segue a limitacao documentada pelo Angular Material para campos
|
|
394
|
+
`fill`/`outline`: label em repouso e valor do input nao compartilham o mesmo
|
|
395
|
+
alinhamento, entao prefixos/sufixos podem conflitar visualmente com o label
|
|
396
|
+
quando `floatLabel = 'auto'`.
|
|
397
|
+
|
|
398
|
+
Para superficies geradas, como filtros avancados, preferir aplicar essa politica
|
|
399
|
+
na camada global que materializa a metadata dos campos. Evite corrigir com CSS
|
|
400
|
+
local movendo label, icone ou notch do `mat-form-field`; esses detalhes sao
|
|
401
|
+
internos do Angular Material e podem mudar entre versoes.
|
|
402
|
+
|
|
376
403
|
#### Saidas runtime compartilhadas
|
|
377
404
|
|
|
378
405
|
| Output | Tipo | Quando ocorre |
|
|
@@ -387,7 +414,8 @@ Limites:
|
|
|
387
414
|
1. Tratar `metadata.validators.*` como contrato de UX, sem substituir validacao de dominio no backend.
|
|
388
415
|
2. Manter consistencia entre `required`, `visible` e regras de negocio para evitar bloqueio de submit com campo oculto.
|
|
389
416
|
3. Padronizar `materialDesign` por design system (aparencia, cor e floatLabel) para reduzir variacao visual entre equipes.
|
|
390
|
-
4. Usar `
|
|
417
|
+
4. Usar `floatLabel: 'always'` em campos `fill`/`outline` com prefixos, sufixos ou icones Material.
|
|
418
|
+
5. Usar `clearButton` com `ariaLabel` para conformidade de acessibilidade.
|
|
391
419
|
|
|
392
420
|
#### Cross-links
|
|
393
421
|
|
|
@@ -400,6 +428,7 @@ Limites:
|
|
|
400
428
|
|
|
401
429
|
- Acessibilidade em Angular: https://angular.dev/best-practices/a11y
|
|
402
430
|
- Criacao e manutencao de libraries: https://angular.dev/tools/libraries/creating-libraries
|
|
431
|
+
- Angular Material `mat-form-field`: https://material.angular.io/components/form-field/overview
|
|
403
432
|
|
|
404
433
|
## JSON path index
|
|
405
434
|
|
|
@@ -24,8 +24,9 @@ source_of_truth:
|
|
|
24
24
|
- "projects/praxis-core/src/lib/models/component-metadata.interface.ts"
|
|
25
25
|
- "projects/praxis-core/src/lib/utils/date-range-presets.util.ts"
|
|
26
26
|
- "projects/praxis-dynamic-fields/src/lib/base/simple-base-input.component.ts"
|
|
27
|
-
|
|
28
|
-
|
|
27
|
+
- "projects/praxis-dynamic-fields/src/lib/utils/praxis-native-date-adapter.ts"
|
|
28
|
+
source_of_truth_last_verified: "2026-05-06"
|
|
29
|
+
last_updated: "2026-05-06"
|
|
29
30
|
toc: true
|
|
30
31
|
sidebar: true
|
|
31
32
|
tags:
|
|
@@ -84,6 +85,7 @@ Este documento e a referencia canonica da API JSON de pdx-material-date-range.
|
|
|
84
85
|
| projects/praxis-core/src/lib/models/component-metadata.interface.ts | schema-types | Arquivo presente no repositorio e usado como evidencia de contrato. |
|
|
85
86
|
| projects/praxis-core/src/lib/utils/date-range-presets.util.ts | runtime-code | Arquivo presente no repositorio e usado como evidencia de contrato. |
|
|
86
87
|
| projects/praxis-dynamic-fields/src/lib/base/simple-base-input.component.ts | runtime-code | Arquivo presente no repositorio e usado como evidencia de contrato. |
|
|
88
|
+
| projects/praxis-dynamic-fields/src/lib/utils/praxis-native-date-adapter.ts | runtime-code | Adapter canonico de parsing manual de datas usado pelos controles Material de data. |
|
|
87
89
|
|
|
88
90
|
## Support legend
|
|
89
91
|
|
|
@@ -163,6 +165,14 @@ Nao ha paths experimentais confirmados no contrato publico desta revisao.
|
|
|
163
165
|
| `metadata.endPlaceholder` | string | false | n/a | component-defined | Partial; verify per source_of_truth. |
|
|
164
166
|
| `metadata.startAriaLabel` | string | false | n/a | component-defined | Partial; verify per source_of_truth. |
|
|
165
167
|
|
|
168
|
+
### Manual date parsing
|
|
169
|
+
|
|
170
|
+
- Digitacao manual usa `PraxisNativeDateAdapter` e respeita o `LOCALE_ID` do host.
|
|
171
|
+
- Em locales nao ingleses, como `pt-BR`, datas numericas sao interpretadas como `dd/MM/yyyy`.
|
|
172
|
+
- Em locales ingleses, datas numericas sao interpretadas como `MM/dd/yyyy`.
|
|
173
|
+
- Strings ISO date-only (`YYYY-MM-DD`) sao tratadas como data local, sem deslocamento por timezone.
|
|
174
|
+
- Valores enviados ao backend por ranges devem preservar a semantica date-only quando o campo representa uma data civil.
|
|
175
|
+
|
|
166
176
|
### Input bindings (inbound data)
|
|
167
177
|
|
|
168
178
|
| Binding/Path | Type | Required | Source | Runtime normalization | Notes |
|
|
@@ -199,6 +209,7 @@ Nao ha paths experimentais confirmados no contrato publico desta revisao.
|
|
|
199
209
|
| `component-metadata.interface.ts` | true | browser/dev/prod/ssr | contract resolution | Refer to `projects/praxis-core/src/lib/models/component-metadata.interface.ts`. |
|
|
200
210
|
| `date-range-presets.util.ts` | true | browser/dev/prod/ssr | contract resolution | Refer to `projects/praxis-core/src/lib/utils/date-range-presets.util.ts`. |
|
|
201
211
|
| `simple-base-input.component.ts` | true | browser/dev/prod/ssr | contract resolution | Refer to `projects/praxis-dynamic-fields/src/lib/base/simple-base-input.component.ts`. |
|
|
212
|
+
| `praxis-native-date-adapter.ts` | true | browser/dev/prod/ssr | locale-aware date parsing | Refer to `projects/praxis-dynamic-fields/src/lib/utils/praxis-native-date-adapter.ts`. |
|
|
202
213
|
|
|
203
214
|
## Coverage by surface (obrigatorio)
|
|
204
215
|
|
|
@@ -319,7 +330,7 @@ Observacao:
|
|
|
319
330
|
| `metadata.endAriaLabel` | `string` | Ativo | ARIA label do input de fim. |
|
|
320
331
|
| `metadata.showShortcuts` | `boolean` | Ativo | Exibe overlay de atalhos ao abrir picker. |
|
|
321
332
|
| `metadata.shortcuts` | `Array<string \| DateRangePreset>` | Ativo | Define atalhos builtin e customizados. |
|
|
322
|
-
| `metadata.shortcutsPosition` | `'left' \| 'right'` | Ativo | Posicao do overlay de atalhos. |
|
|
333
|
+
| `metadata.shortcutsPosition` | `'auto' \| 'below' \| 'left' \| 'right'` | Ativo | Posicao preferencial do overlay de atalhos. O default `auto` prioriza posicionamento abaixo do campo, com fallback lateral e protecao contra recorte no viewport. |
|
|
323
334
|
| `metadata.applyOnShortcutClick` | `boolean` | Ativo | Aplica e fecha automaticamente ao clicar no atalho. |
|
|
324
335
|
| `metadata.i18nShortcuts` | `Partial<Record<...>>` | Ativo | Sobrescreve labels de atalhos builtin. |
|
|
325
336
|
| `metadata.timezone` | `string` | Ativo | Contexto de timezone para calculo de presets builtin. |
|
|
@@ -622,3 +633,4 @@ Correcao: verificar `applyOnShortcutClick`; com `false`, o fluxo exige acao manu
|
|
|
622
633
|
| schema-types | projects/praxis-core/src/lib/models/component-metadata.interface.ts | Primary source of truth for contract and behavior. | 2026-03-06 | verified-path |
|
|
623
634
|
| runtime-code | projects/praxis-core/src/lib/utils/date-range-presets.util.ts | Primary source of truth for contract and behavior. | 2026-03-06 | verified-path |
|
|
624
635
|
| runtime-code | projects/praxis-dynamic-fields/src/lib/base/simple-base-input.component.ts | Primary source of truth for contract and behavior. | 2026-03-06 | verified-path |
|
|
636
|
+
| runtime-code | projects/praxis-dynamic-fields/src/lib/utils/praxis-native-date-adapter.ts | Source of truth for locale-aware manual date parsing. | 2026-05-06 | verified-path |
|
|
@@ -22,8 +22,9 @@ source_of_truth:
|
|
|
22
22
|
- "projects/praxis-dynamic-fields/src/lib/components/material-datepicker/material-datepicker.component.ts"
|
|
23
23
|
- "projects/praxis-core/src/lib/models/material-field-metadata.interface.ts"
|
|
24
24
|
- "projects/praxis-dynamic-fields/src/lib/base/simple-base-input.component.ts"
|
|
25
|
-
|
|
26
|
-
|
|
25
|
+
- "projects/praxis-dynamic-fields/src/lib/utils/praxis-native-date-adapter.ts"
|
|
26
|
+
source_of_truth_last_verified: "2026-05-06"
|
|
27
|
+
last_updated: "2026-05-06"
|
|
27
28
|
toc: true
|
|
28
29
|
sidebar: true
|
|
29
30
|
tags:
|
|
@@ -81,6 +82,7 @@ Este documento e a referencia canonica da API JSON de pdx-material-datepicker.
|
|
|
81
82
|
| projects/praxis-dynamic-fields/src/lib/components/material-datepicker/material-datepicker.component.ts | runtime-code | Arquivo presente no repositorio e usado como evidencia de contrato. |
|
|
82
83
|
| projects/praxis-core/src/lib/models/material-field-metadata.interface.ts | schema-types | Arquivo presente no repositorio e usado como evidencia de contrato. |
|
|
83
84
|
| projects/praxis-dynamic-fields/src/lib/base/simple-base-input.component.ts | runtime-code | Arquivo presente no repositorio e usado como evidencia de contrato. |
|
|
85
|
+
| projects/praxis-dynamic-fields/src/lib/utils/praxis-native-date-adapter.ts | runtime-code | Adapter canonico de parsing manual de datas usado pelos controles Material de data. |
|
|
84
86
|
|
|
85
87
|
## Support legend
|
|
86
88
|
|
|
@@ -158,6 +160,14 @@ Nao ha paths experimentais confirmados no contrato publico desta revisao.
|
|
|
158
160
|
| `metadata.dateFormat` | string | false | n/a | component-defined | Partial; verify per source_of_truth. |
|
|
159
161
|
| `metadata.manualInput` | boolean | false | `true` | `false` blocks manual typing without activating readonly field semantics. | Use for locale-sensitive dates where typed strings would be ambiguous. |
|
|
160
162
|
|
|
163
|
+
### Manual date parsing
|
|
164
|
+
|
|
165
|
+
- Digitacao manual usa `PraxisNativeDateAdapter` e respeita o `LOCALE_ID` do host.
|
|
166
|
+
- Em locales nao ingleses, como `pt-BR`, datas numericas sao interpretadas como `dd/MM/yyyy`.
|
|
167
|
+
- Em locales ingleses, datas numericas sao interpretadas como `MM/dd/yyyy`.
|
|
168
|
+
- Strings ISO date-only (`YYYY-MM-DD`) sao tratadas como data local, sem deslocamento por timezone.
|
|
169
|
+
- Use `metadata.manualInput: false` quando o host quiser bloquear digitacao manual e manter apenas selecao pelo calendario.
|
|
170
|
+
|
|
161
171
|
### Input bindings (inbound data)
|
|
162
172
|
|
|
163
173
|
| Binding/Path | Type | Required | Source | Runtime normalization | Notes |
|
|
@@ -192,6 +202,7 @@ Nao ha paths experimentais confirmados no contrato publico desta revisao.
|
|
|
192
202
|
| `material-datepicker.component.ts` | true | browser/dev/prod/ssr | contract resolution | Refer to `projects/praxis-dynamic-fields/src/lib/components/material-datepicker/material-datepicker.component.ts`. |
|
|
193
203
|
| `material-field-metadata.interface.ts` | true | browser/dev/prod/ssr | contract resolution | Refer to `projects/praxis-core/src/lib/models/material-field-metadata.interface.ts`. |
|
|
194
204
|
| `simple-base-input.component.ts` | true | browser/dev/prod/ssr | contract resolution | Refer to `projects/praxis-dynamic-fields/src/lib/base/simple-base-input.component.ts`. |
|
|
205
|
+
| `praxis-native-date-adapter.ts` | true | browser/dev/prod/ssr | locale-aware date parsing | Refer to `projects/praxis-dynamic-fields/src/lib/utils/praxis-native-date-adapter.ts`. |
|
|
195
206
|
|
|
196
207
|
## Coverage by surface (obrigatorio)
|
|
197
208
|
|
|
@@ -537,3 +548,4 @@ Correcao: validar `validators`/matcher e estado touched/dirty do controle no hos
|
|
|
537
548
|
| runtime-code | projects/praxis-dynamic-fields/src/lib/components/material-datepicker/material-datepicker.component.ts | Primary source of truth for contract and behavior. | 2026-03-06 | verified-path |
|
|
538
549
|
| schema-types | projects/praxis-core/src/lib/models/material-field-metadata.interface.ts | Primary source of truth for contract and behavior. | 2026-03-06 | verified-path |
|
|
539
550
|
| runtime-code | projects/praxis-dynamic-fields/src/lib/base/simple-base-input.component.ts | Primary source of truth for contract and behavior. | 2026-03-06 | verified-path |
|
|
551
|
+
| runtime-code | projects/praxis-dynamic-fields/src/lib/utils/praxis-native-date-adapter.ts | Source of truth for locale-aware manual date parsing. | 2026-05-06 | verified-path |
|
|
@@ -277,6 +277,9 @@ Em conflito entre alias legado e path canonico, priorizar path canonico e regist
|
|
|
277
277
|
|
|
278
278
|
### 1. Visao Geral e Quando Usar
|
|
279
279
|
`pdx-material-price-range` compoe dois `pdx-material-currency` para modelar faixa monetaria (`minPrice`/`maxPrice`).
|
|
280
|
+
O label do grupo identifica a faixa completa, enquanto `startLabel` e
|
|
281
|
+
`endLabel` identificam as entradas internas. `hint` e renderizado como helper
|
|
282
|
+
text abaixo do grupo, com a mesma hierarquia visual dos hints de `mat-form-field`.
|
|
280
283
|
|
|
281
284
|
Use quando precisar:
|
|
282
285
|
- capturar intervalo financeiro com mascara de moeda;
|