@praxisui/expansion 1.0.0-beta.8 → 3.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 +62 -6
- package/fesm2022/praxisui-expansion.mjs +1151 -111
- package/fesm2022/praxisui-expansion.mjs.map +1 -1
- package/index.d.ts +133 -10
- package/package.json +9 -9
package/README.md
CHANGED
|
@@ -1,5 +1,57 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: "Expansion"
|
|
3
|
+
slug: "expansion-overview"
|
|
4
|
+
description: "Visao geral do @praxisui/expansion com metadata-first panels, persistencia, providers e integracao com registry."
|
|
5
|
+
doc_type: "reference"
|
|
6
|
+
document_kind: "component-overview"
|
|
7
|
+
component: "expansion"
|
|
8
|
+
category: "components"
|
|
9
|
+
audience:
|
|
10
|
+
- "frontend"
|
|
11
|
+
- "host"
|
|
12
|
+
- "architect"
|
|
13
|
+
level: "intermediate"
|
|
14
|
+
status: "active"
|
|
15
|
+
owner: "praxis-ui"
|
|
16
|
+
tags:
|
|
17
|
+
- "expansion"
|
|
18
|
+
- "metadata"
|
|
19
|
+
- "accordion"
|
|
20
|
+
- "registry"
|
|
21
|
+
- "providers"
|
|
22
|
+
order: 35
|
|
23
|
+
icon: "expand"
|
|
24
|
+
toc: true
|
|
25
|
+
sidebar: true
|
|
26
|
+
search_boost: 1.0
|
|
27
|
+
reading_time: 8
|
|
28
|
+
estimated_setup_time: 15
|
|
29
|
+
version: "1.0"
|
|
30
|
+
related_docs:
|
|
31
|
+
- "host-integration-guide"
|
|
32
|
+
- "consumer-integration-quickstart"
|
|
33
|
+
keywords:
|
|
34
|
+
- "accordion"
|
|
35
|
+
- "expansion panel"
|
|
36
|
+
- "metadata"
|
|
37
|
+
- "providers"
|
|
38
|
+
last_updated: "2026-03-07"
|
|
39
|
+
---
|
|
40
|
+
|
|
1
41
|
# @praxisui/expansion — Praxis Expansion Panel
|
|
2
42
|
|
|
43
|
+
## Documentation
|
|
44
|
+
|
|
45
|
+
- Official documentation: https://praxisui.dev
|
|
46
|
+
- Quickstart reference app: https://github.com/codexrodrigues/praxis-ui-quickstart
|
|
47
|
+
- Recommended for: accordion and panel layouts driven by metadata with editor integration
|
|
48
|
+
|
|
49
|
+
## When to use
|
|
50
|
+
|
|
51
|
+
- Organizar blocos expansivos em telas configuradas por metadata
|
|
52
|
+
- Reaproveitar paines tipo accordion em fluxos com editor embutido
|
|
53
|
+
- Manter comportamento e defaults de expansion alinhados no ecossistema Praxis UI
|
|
54
|
+
|
|
3
55
|
Widget baseado em Angular Material (MatAccordion/MatExpansionPanel) com configuração via metadata, editor embutido e integração com o `ComponentMetadataRegistry` para uso no `praxis-dynamic-gridster-page`.
|
|
4
56
|
|
|
5
57
|
## Instalação e Providers
|
|
@@ -41,9 +93,14 @@ const expansionConfig: ExpansionMetadata = {
|
|
|
41
93
|
```
|
|
42
94
|
|
|
43
95
|
```html
|
|
44
|
-
<praxis-expansion [config]="expansionConfig" [
|
|
96
|
+
<praxis-expansion expansionId="expansion-demo" [config]="expansionConfig" [enableCustomization]="true"></praxis-expansion>
|
|
45
97
|
```
|
|
46
98
|
|
|
99
|
+
## Persistência
|
|
100
|
+
|
|
101
|
+
- Quando `expansionId` é fornecido, a configuração é salva/recuperada em `AsyncConfigStorage` na chave `expansion:<component_id>`.
|
|
102
|
+
- Use `componentInstanceId` quando houver múltiplas instâncias com o mesmo `expansionId` na mesma rota.
|
|
103
|
+
|
|
47
104
|
## Lazy loading de conteúdo (por painel)
|
|
48
105
|
|
|
49
106
|
O componente utiliza `<ng-template matExpansionPanelContent>`, logo o conteúdo interno de cada painel é criado apenas quando o painel é aberto. Não é necessário habilitar um flag: basta declarar `content` (campos) e/ou `widgets` (widgets dinâmicos) no painel.
|
|
@@ -93,7 +150,7 @@ const expansionConfig: ExpansionMetadata = {
|
|
|
93
150
|
```
|
|
94
151
|
|
|
95
152
|
```html
|
|
96
|
-
<praxis-expansion
|
|
153
|
+
<praxis-expansion expansionId="expansion-demo"
|
|
97
154
|
[config]="expansionConfig"
|
|
98
155
|
(widgetEvent)="onExpansionEvent($event)">
|
|
99
156
|
</praxis-expansion>
|
|
@@ -112,7 +169,7 @@ onExpansionEvent(ev: { panelId?: string; panelIndex?: number; sourceId: string;
|
|
|
112
169
|
Você pode passar `defaultOptions` direto no componente, que tem precedência sobre os valores providos globalmente via provider.
|
|
113
170
|
|
|
114
171
|
```html
|
|
115
|
-
<praxis-expansion
|
|
172
|
+
<praxis-expansion expansionId="expansion-demo"
|
|
116
173
|
[config]="expansionConfig"
|
|
117
174
|
[defaultOptions]="{ collapsedHeight: '48px', expandedHeight: '64px', hideToggle: false }">
|
|
118
175
|
</praxis-expansion>
|
|
@@ -123,7 +180,7 @@ Você pode passar `defaultOptions` direto no componente, que tem precedência so
|
|
|
123
180
|
O componente expõe métodos para controlar a expansão por índice (numérico) ou por id (string):
|
|
124
181
|
|
|
125
182
|
```html
|
|
126
|
-
<praxis-expansion #expRef [config]="expansionConfig"></praxis-expansion>
|
|
183
|
+
<praxis-expansion expansionId="expansion-demo" #expRef [config]="expansionConfig"></praxis-expansion>
|
|
127
184
|
|
|
128
185
|
<button (click)="expRef.open('general')">Abrir Geral</button>
|
|
129
186
|
<button (click)="expRef.close(1)">Fechar painel 2</button>
|
|
@@ -135,7 +192,7 @@ O componente expõe métodos para controlar a expansão por índice (numérico)
|
|
|
135
192
|
## Eventos suportados
|
|
136
193
|
|
|
137
194
|
```html
|
|
138
|
-
<praxis-expansion
|
|
195
|
+
<praxis-expansion expansionId="expansion-demo"
|
|
139
196
|
[config]="expansionConfig"
|
|
140
197
|
(opened)="onOpened($event)"
|
|
141
198
|
(afterExpand)="onAfterExpand($event)"
|
|
@@ -162,4 +219,3 @@ const expansionConfig: ExpansionMetadata = {
|
|
|
162
219
|
## Integração via Registry / Gridster
|
|
163
220
|
|
|
164
221
|
Ao registrar `providePraxisExpansionMetadata()`, o widget `praxis-expansion` fica disponível para o `DynamicWidgetLoader` e pode ser usado em páginas dinâmicas (incl. `praxis-dynamic-gridster-page`). Basta fornecer um `WidgetDefinition` com `id: 'praxis-expansion'` e `inputs.config` com o `ExpansionMetadata` desejado.
|
|
165
|
-
|