@praxisui/expansion 1.0.0-beta.5 → 1.0.0-beta.53
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 +57 -6
- package/fesm2022/praxisui-expansion.mjs +1144 -104
- package/fesm2022/praxisui-expansion.mjs.map +1 -1
- package/index.d.ts +132 -9
- package/package.json +7 -7
package/README.md
CHANGED
|
@@ -1,5 +1,52 @@
|
|
|
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
|
+
## 🔰 Exemplos / Quickstart
|
|
44
|
+
|
|
45
|
+
Para ver esta biblioteca em funcionamento em uma aplicação completa, utilize o projeto de exemplo (Quickstart):
|
|
46
|
+
|
|
47
|
+
- Repositório: https://github.com/codexrodrigues/praxis-ui-quickstart
|
|
48
|
+
- O Quickstart demonstra a integração das bibliotecas `@praxisui/*` em um app Angular, incluindo instalação, configuração e uso em telas reais.
|
|
49
|
+
|
|
3
50
|
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
51
|
|
|
5
52
|
## Instalação e Providers
|
|
@@ -41,9 +88,14 @@ const expansionConfig: ExpansionMetadata = {
|
|
|
41
88
|
```
|
|
42
89
|
|
|
43
90
|
```html
|
|
44
|
-
<praxis-expansion [config]="expansionConfig" [editModeEnabled]="true"></praxis-expansion>
|
|
91
|
+
<praxis-expansion expansionId="expansion-demo" [config]="expansionConfig" [editModeEnabled]="true"></praxis-expansion>
|
|
45
92
|
```
|
|
46
93
|
|
|
94
|
+
## Persistência
|
|
95
|
+
|
|
96
|
+
- Quando `expansionId` é fornecido, a configuração é salva/recuperada em `AsyncConfigStorage` na chave `expansion:<component_id>`.
|
|
97
|
+
- Use `componentInstanceId` quando houver múltiplas instâncias com o mesmo `expansionId` na mesma rota.
|
|
98
|
+
|
|
47
99
|
## Lazy loading de conteúdo (por painel)
|
|
48
100
|
|
|
49
101
|
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 +145,7 @@ const expansionConfig: ExpansionMetadata = {
|
|
|
93
145
|
```
|
|
94
146
|
|
|
95
147
|
```html
|
|
96
|
-
<praxis-expansion
|
|
148
|
+
<praxis-expansion expansionId="expansion-demo"
|
|
97
149
|
[config]="expansionConfig"
|
|
98
150
|
(widgetEvent)="onExpansionEvent($event)">
|
|
99
151
|
</praxis-expansion>
|
|
@@ -112,7 +164,7 @@ onExpansionEvent(ev: { panelId?: string; panelIndex?: number; sourceId: string;
|
|
|
112
164
|
Você pode passar `defaultOptions` direto no componente, que tem precedência sobre os valores providos globalmente via provider.
|
|
113
165
|
|
|
114
166
|
```html
|
|
115
|
-
<praxis-expansion
|
|
167
|
+
<praxis-expansion expansionId="expansion-demo"
|
|
116
168
|
[config]="expansionConfig"
|
|
117
169
|
[defaultOptions]="{ collapsedHeight: '48px', expandedHeight: '64px', hideToggle: false }">
|
|
118
170
|
</praxis-expansion>
|
|
@@ -123,7 +175,7 @@ Você pode passar `defaultOptions` direto no componente, que tem precedência so
|
|
|
123
175
|
O componente expõe métodos para controlar a expansão por índice (numérico) ou por id (string):
|
|
124
176
|
|
|
125
177
|
```html
|
|
126
|
-
<praxis-expansion #expRef [config]="expansionConfig"></praxis-expansion>
|
|
178
|
+
<praxis-expansion expansionId="expansion-demo" #expRef [config]="expansionConfig"></praxis-expansion>
|
|
127
179
|
|
|
128
180
|
<button (click)="expRef.open('general')">Abrir Geral</button>
|
|
129
181
|
<button (click)="expRef.close(1)">Fechar painel 2</button>
|
|
@@ -135,7 +187,7 @@ O componente expõe métodos para controlar a expansão por índice (numérico)
|
|
|
135
187
|
## Eventos suportados
|
|
136
188
|
|
|
137
189
|
```html
|
|
138
|
-
<praxis-expansion
|
|
190
|
+
<praxis-expansion expansionId="expansion-demo"
|
|
139
191
|
[config]="expansionConfig"
|
|
140
192
|
(opened)="onOpened($event)"
|
|
141
193
|
(afterExpand)="onAfterExpand($event)"
|
|
@@ -162,4 +214,3 @@ const expansionConfig: ExpansionMetadata = {
|
|
|
162
214
|
## Integração via Registry / Gridster
|
|
163
215
|
|
|
164
216
|
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
|
-
|