@praxisui/expansion 8.0.0-beta.30 → 8.0.0-beta.32
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.
|
@@ -514,7 +514,7 @@ class PraxisExpansion {
|
|
|
514
514
|
if (!this.aiAssistantOpen) {
|
|
515
515
|
this.openAiAssistantFromSession(session);
|
|
516
516
|
}
|
|
517
|
-
}, ...(ngDevMode ? [{ debugName: "aiAssistantSessionEffect" }] : []));
|
|
517
|
+
}, ...(ngDevMode ? [{ debugName: "aiAssistantSessionEffect" }] : /* istanbul ignore next */ []));
|
|
518
518
|
warnedMissingId = false;
|
|
519
519
|
panelForms = new Map();
|
|
520
520
|
aiAdapter = new ExpansionAiAdapter(this);
|
|
@@ -1181,8 +1181,8 @@ class PraxisExpansion {
|
|
|
1181
1181
|
this.warnedMissingId = true;
|
|
1182
1182
|
console.warn('[PraxisExpansion] expansionId is required for config persistence.');
|
|
1183
1183
|
}
|
|
1184
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1185
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1184
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisExpansion, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1185
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisExpansion, isStandalone: true, selector: "praxis-expansion", inputs: { config: "config", expansionId: "expansionId", componentInstanceId: "componentInstanceId", context: "context", strictValidation: "strictValidation", enableCustomization: "enableCustomization", defaultOptions: "defaultOptions" }, outputs: { opened: "opened", closed: "closed", expandedChange: "expandedChange", afterExpand: "afterExpand", afterCollapse: "afterCollapse", destroyed: "destroyed", widgetEvent: "widgetEvent" }, viewQueries: [{ propertyName: "accordionRef", first: true, predicate: ["accordion"], descendants: true }, { propertyName: "panels", predicate: ["panel"], descendants: true, read: MatExpansionPanel }], usesOnChanges: true, ngImport: i0, template: `
|
|
1186
1186
|
<div
|
|
1187
1187
|
class="praxis-expansion-root"
|
|
1188
1188
|
[class.density-compact]="config?.appearance?.density === 'compact'"
|
|
@@ -1190,10 +1190,14 @@ class PraxisExpansion {
|
|
|
1190
1190
|
[class.density-spacious]="config?.appearance?.density === 'spacious'"
|
|
1191
1191
|
[ngClass]="config?.appearance?.themeClass || ''"
|
|
1192
1192
|
[attr.data-expansion-id]="expansionId || 'default'"
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
|
|
1196
|
-
|
|
1193
|
+
>
|
|
1194
|
+
@if (config?.appearance?.customCss) {
|
|
1195
|
+
<style [innerHTML]="config?.appearance?.customCss"></style>
|
|
1196
|
+
}
|
|
1197
|
+
@if (styleCss(); as s) {
|
|
1198
|
+
<style [innerHTML]="s"></style>
|
|
1199
|
+
}
|
|
1200
|
+
|
|
1197
1201
|
@if (enableCustomization) {
|
|
1198
1202
|
<div class="expansion-ai-assistant">
|
|
1199
1203
|
<button
|
|
@@ -1204,40 +1208,41 @@ class PraxisExpansion {
|
|
|
1204
1208
|
aria-label="Abrir copiloto semantico Praxis dos paineis"
|
|
1205
1209
|
data-testid="praxis-expansion-ai-assistant-trigger"
|
|
1206
1210
|
(click)="openAiAssistant()"
|
|
1207
|
-
|
|
1211
|
+
>
|
|
1208
1212
|
<mat-icon [praxisIcon]="'auto_awesome'"></mat-icon>
|
|
1209
1213
|
</button>
|
|
1210
1214
|
</div>
|
|
1211
1215
|
}
|
|
1212
|
-
|
|
1213
|
-
|
|
1214
|
-
|
|
1215
|
-
|
|
1216
|
-
|
|
1217
|
-
|
|
1218
|
-
|
|
1219
|
-
|
|
1220
|
-
|
|
1221
|
-
|
|
1222
|
-
|
|
1223
|
-
|
|
1224
|
-
|
|
1225
|
-
|
|
1226
|
-
|
|
1227
|
-
|
|
1228
|
-
|
|
1229
|
-
|
|
1230
|
-
|
|
1231
|
-
|
|
1232
|
-
|
|
1233
|
-
|
|
1234
|
-
|
|
1235
|
-
|
|
1236
|
-
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
|
|
1240
|
-
|
|
1216
|
+
|
|
1217
|
+
@if (aiAssistantOpen && aiAssistantViewState) {
|
|
1218
|
+
<praxis-ai-assistant-shell
|
|
1219
|
+
[labels]="aiAssistantLabels"
|
|
1220
|
+
[mode]="aiAssistantViewState.mode"
|
|
1221
|
+
[state]="aiAssistantViewState.state"
|
|
1222
|
+
[contextItems]="aiAssistantViewState.contextItems"
|
|
1223
|
+
[attachments]="aiAssistantViewState.attachments"
|
|
1224
|
+
[messages]="aiAssistantViewState.messages"
|
|
1225
|
+
[quickReplies]="aiAssistantViewState.quickReplies"
|
|
1226
|
+
[prompt]="aiAssistantPrompt"
|
|
1227
|
+
[statusText]="aiAssistantViewState.statusText"
|
|
1228
|
+
[errorText]="aiAssistantViewState.errorText"
|
|
1229
|
+
[busy]="aiAssistantViewState.state === 'processing' || aiAssistantViewState.state === 'applying'"
|
|
1230
|
+
[canApply]="aiAssistantViewState.canApply"
|
|
1231
|
+
[layout]="aiAssistantLayout"
|
|
1232
|
+
testIdPrefix="praxis-expansion-ai-assistant"
|
|
1233
|
+
(promptChange)="onAiAssistantPromptChange($event)"
|
|
1234
|
+
(submitPrompt)="onAiAssistantSubmit($event)"
|
|
1235
|
+
(apply)="onAiAssistantApply()"
|
|
1236
|
+
(retryTurn)="onAiAssistantRetry()"
|
|
1237
|
+
(cancelTurn)="onAiAssistantCancel()"
|
|
1238
|
+
(quickReply)="onAiAssistantQuickReply($event)"
|
|
1239
|
+
(editMessage)="onAiAssistantEditMessage($event)"
|
|
1240
|
+
(resendMessage)="onAiAssistantResendMessage($event)"
|
|
1241
|
+
(layoutChange)="onAiAssistantLayoutChange($event)"
|
|
1242
|
+
(close)="closeAiAssistant()"
|
|
1243
|
+
></praxis-ai-assistant-shell>
|
|
1244
|
+
}
|
|
1245
|
+
|
|
1241
1246
|
@if (hasMultiple()) {
|
|
1242
1247
|
<mat-accordion
|
|
1243
1248
|
#accordion
|
|
@@ -1246,7 +1251,7 @@ class PraxisExpansion {
|
|
|
1246
1251
|
[displayMode]="config?.accordion?.displayMode || 'default'"
|
|
1247
1252
|
[togglePosition]="config?.accordion?.togglePosition || 'after'"
|
|
1248
1253
|
[hideToggle]="config?.accordion?.hideToggle || false"
|
|
1249
|
-
|
|
1254
|
+
>
|
|
1250
1255
|
@for (p of (config?.panels || []); let i = $index; track p.id ?? i) {
|
|
1251
1256
|
@let id = panelDomId(p, i);
|
|
1252
1257
|
<mat-expansion-panel
|
|
@@ -1261,16 +1266,20 @@ class PraxisExpansion {
|
|
|
1261
1266
|
(afterExpand)="emitAfterExpand(p, i)"
|
|
1262
1267
|
(afterCollapse)="emitAfterCollapse(p, i)"
|
|
1263
1268
|
(destroyed)="emitDestroyed(p, i)"
|
|
1264
|
-
|
|
1269
|
+
>
|
|
1265
1270
|
<mat-expansion-panel-header
|
|
1266
1271
|
[collapsedHeight]="p.collapsedHeight || (defaultOptions?.collapsedHeight || injectedDefaults?.collapsedHeight) || ''"
|
|
1267
|
-
|
|
1268
|
-
|
|
1269
|
-
|
|
1272
|
+
[expandedHeight]="p.expandedHeight || (defaultOptions?.expandedHeight || injectedDefaults?.expandedHeight) || ''"
|
|
1273
|
+
>
|
|
1274
|
+
@if (p.icon) {
|
|
1275
|
+
<mat-icon [praxisIcon]="p.icon"></mat-icon>
|
|
1276
|
+
}
|
|
1270
1277
|
<mat-panel-title>{{ p.title }}</mat-panel-title>
|
|
1271
|
-
|
|
1278
|
+
@if (p.description) {
|
|
1279
|
+
<mat-panel-description>{{ p.description }}</mat-panel-description>
|
|
1280
|
+
}
|
|
1272
1281
|
</mat-expansion-panel-header>
|
|
1273
|
-
|
|
1282
|
+
|
|
1274
1283
|
<ng-template matExpansionPanelContent>
|
|
1275
1284
|
@if (p.content?.length) {
|
|
1276
1285
|
<ng-container
|
|
@@ -1279,7 +1288,7 @@ class PraxisExpansion {
|
|
|
1279
1288
|
[formGroup]="panelFormFor(p, i)"
|
|
1280
1289
|
></ng-container>
|
|
1281
1290
|
}
|
|
1282
|
-
|
|
1291
|
+
|
|
1283
1292
|
@if (p.widgets?.length) {
|
|
1284
1293
|
@for (w of p.widgets; let wi = $index; track wi) {
|
|
1285
1294
|
<ng-container
|
|
@@ -1290,12 +1299,14 @@ class PraxisExpansion {
|
|
|
1290
1299
|
></ng-container>
|
|
1291
1300
|
}
|
|
1292
1301
|
}
|
|
1293
|
-
|
|
1302
|
+
|
|
1294
1303
|
@if (p.actionButtons?.length) {
|
|
1295
1304
|
<mat-action-row>
|
|
1296
1305
|
@for (a of p.actionButtons; track a.label) {
|
|
1297
1306
|
<button mat-stroked-button (click)="emitAction(p, i, a.action)">
|
|
1298
|
-
|
|
1307
|
+
@if (a.icon) {
|
|
1308
|
+
<mat-icon [praxisIcon]="a.icon"></mat-icon>
|
|
1309
|
+
}
|
|
1299
1310
|
{{ a.label }}
|
|
1300
1311
|
</button>
|
|
1301
1312
|
}
|
|
@@ -1319,16 +1330,20 @@ class PraxisExpansion {
|
|
|
1319
1330
|
(afterExpand)="emitAfterExpand(p, 0)"
|
|
1320
1331
|
(afterCollapse)="emitAfterCollapse(p, 0)"
|
|
1321
1332
|
(destroyed)="emitDestroyed(p, 0)"
|
|
1322
|
-
|
|
1333
|
+
>
|
|
1323
1334
|
<mat-expansion-panel-header
|
|
1324
1335
|
[collapsedHeight]="p.collapsedHeight || (defaultOptions?.collapsedHeight || injectedDefaults?.collapsedHeight) || ''"
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
|
|
1336
|
+
[expandedHeight]="p.expandedHeight || (defaultOptions?.expandedHeight || injectedDefaults?.expandedHeight) || ''"
|
|
1337
|
+
>
|
|
1338
|
+
@if (p.icon) {
|
|
1339
|
+
<mat-icon [praxisIcon]="p.icon"></mat-icon>
|
|
1340
|
+
}
|
|
1328
1341
|
<mat-panel-title>{{ p.title }}</mat-panel-title>
|
|
1329
|
-
|
|
1342
|
+
@if (p.description) {
|
|
1343
|
+
<mat-panel-description>{{ p.description }}</mat-panel-description>
|
|
1344
|
+
}
|
|
1330
1345
|
</mat-expansion-panel-header>
|
|
1331
|
-
|
|
1346
|
+
|
|
1332
1347
|
<ng-template matExpansionPanelContent>
|
|
1333
1348
|
@if (p.content?.length) {
|
|
1334
1349
|
<ng-container
|
|
@@ -1337,7 +1352,7 @@ class PraxisExpansion {
|
|
|
1337
1352
|
[formGroup]="panelFormFor(p, 0)"
|
|
1338
1353
|
></ng-container>
|
|
1339
1354
|
}
|
|
1340
|
-
|
|
1355
|
+
|
|
1341
1356
|
@if (p.widgets?.length) {
|
|
1342
1357
|
@for (w of p.widgets; let wi = $index; track wi) {
|
|
1343
1358
|
<ng-container
|
|
@@ -1348,12 +1363,14 @@ class PraxisExpansion {
|
|
|
1348
1363
|
></ng-container>
|
|
1349
1364
|
}
|
|
1350
1365
|
}
|
|
1351
|
-
|
|
1366
|
+
|
|
1352
1367
|
@if (p.actionButtons?.length) {
|
|
1353
1368
|
<mat-action-row>
|
|
1354
1369
|
@for (a of p.actionButtons; track a.label) {
|
|
1355
1370
|
<button mat-stroked-button (click)="emitAction(p, 0, a.action)">
|
|
1356
|
-
|
|
1371
|
+
@if (a.icon) {
|
|
1372
|
+
<mat-icon [praxisIcon]="a.icon"></mat-icon>
|
|
1373
|
+
}
|
|
1357
1374
|
{{ a.label }}
|
|
1358
1375
|
</button>
|
|
1359
1376
|
}
|
|
@@ -1364,26 +1381,29 @@ class PraxisExpansion {
|
|
|
1364
1381
|
} @else {
|
|
1365
1382
|
<div class="praxis-expansion-empty">
|
|
1366
1383
|
<span>Nenhum painel configurado</span>
|
|
1367
|
-
|
|
1368
|
-
<mat-
|
|
1369
|
-
|
|
1384
|
+
@if (enableCustomization) {
|
|
1385
|
+
<button mat-stroked-button color="primary" (click)="openEditor()">
|
|
1386
|
+
<mat-icon [praxisIcon]="'tune'"></mat-icon> Configurar
|
|
1387
|
+
</button>
|
|
1388
|
+
}
|
|
1370
1389
|
</div>
|
|
1371
1390
|
}
|
|
1372
1391
|
}
|
|
1373
1392
|
</div>
|
|
1374
1393
|
<!-- Edit button -->
|
|
1375
|
-
|
|
1376
|
-
|
|
1377
|
-
|
|
1378
|
-
|
|
1379
|
-
|
|
1380
|
-
|
|
1381
|
-
|
|
1382
|
-
|
|
1383
|
-
|
|
1384
|
-
|
|
1394
|
+
@if (enableCustomization) {
|
|
1395
|
+
<button
|
|
1396
|
+
mat-fab
|
|
1397
|
+
class="edit-fab"
|
|
1398
|
+
aria-label="Editar painéis"
|
|
1399
|
+
(click)="openEditor()"
|
|
1400
|
+
>
|
|
1401
|
+
<mat-icon fontIcon="edit"></mat-icon>
|
|
1402
|
+
</button>
|
|
1403
|
+
}
|
|
1404
|
+
`, isInline: true, styles: [":host{display:block;position:relative;color:var(--md-sys-color-on-surface)}.praxis-expansion-root{display:block;--p-exp-surface: var(--md-sys-color-surface);--p-exp-surface-container: var(--md-sys-color-surface-container);--p-exp-border: var(--md-sys-color-outline-variant);--p-exp-text: var(--md-sys-color-on-surface);--p-exp-text-muted: var(--md-sys-color-on-surface-variant);--p-exp-focus: var(--md-sys-color-primary);--p-exp-radius: 12px}.mat-expansion-panel{background:var(--p-exp-surface);border:1px solid var(--p-exp-border);border-radius:var(--p-exp-radius);overflow:hidden}.mat-expansion-panel:not(:last-child){margin-bottom:var(--p-exp-panel-gap, 12px)}.mat-expansion-panel-header{background:var(--p-exp-surface-container);color:var(--p-exp-text)}.mat-expansion-panel-header:focus-visible{outline:2px solid var(--p-exp-focus);outline-offset:-2px}.mat-expansion-panel-header-title{font-weight:600}.mat-expansion-panel-header-description{color:var(--p-exp-text-muted)}.mat-expansion-panel-body{padding:12px 16px 16px}.mat-action-row{border-top:1px solid var(--p-exp-border)}.density-compact .mat-expansion-panel-body{padding:8px 12px 12px}.density-compact .mat-expansion-panel-header{min-height:40px;padding:0 12px}.density-comfortable .mat-expansion-panel-body{padding:12px 16px 16px}.density-comfortable .mat-expansion-panel-header{min-height:48px;padding:0 16px}.density-spacious .mat-expansion-panel-body{padding:16px 20px 20px}.density-spacious .mat-expansion-panel-header{min-height:56px;padding:0 20px}.praxis-expansion-empty{display:flex;gap:8px;align-items:center;padding:8px 12px;color:var(--p-exp-text-muted)}.edit-fab{position:absolute;right:12px;bottom:12px;z-index:2}.expansion-ai-assistant{position:absolute;right:12px;bottom:72px;z-index:3}.expansion-ai-assistant-trigger{box-shadow:var(--md-sys-elevation-level2, 0 4px 12px rgba(0, 0, 0, .18))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i2.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i2.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i2.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i2.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "directive", type: i2.MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: DynamicFieldLoaderDirective, selector: "[dynamicFieldLoader]", inputs: ["fields", "formGroup", "enableExternalControlBinding", "itemTemplate", "debugTrace", "debugTraceLabel", "readonlyMode", "disabledMode", "presentationMode", "visible", "canvasMode"], outputs: ["componentsCreated", "fieldCreated", "fieldDestroyed", "renderError", "canvasMouseEnter", "canvasMouseLeave", "canvasClick", "canvasFocus"] }, { kind: "directive", type: DynamicWidgetLoaderDirective, selector: "[dynamicWidgetLoader]", inputs: ["dynamicWidgetLoader", "ownerWidgetKey", "context", "strictValidation", "autoWireOutputs"], outputs: ["widgetEvent", "widgetDiagnostic"], exportAs: ["dynamicWidgetLoader"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "component", type: PraxisAiAssistantShellComponent, selector: "praxis-ai-assistant-shell", inputs: ["labels", "mode", "state", "contextItems", "attachments", "messages", "quickReplies", "prompt", "statusText", "errorText", "testIdPrefix", "panelTestId", "submitTestId", "applyTestId", "primaryAction", "secondaryActions", "governanceActions", "busy", "canSubmit", "canApply", "submitOnEnter", "showAttachAction", "enablePastedAttachments", "enableFileAttachments", "attachmentAccept", "attachmentMultiple", "draggable", "resizable", "minWidth", "minHeight", "margin", "layout"], outputs: ["promptChange", "submitPrompt", "apply", "retryTurn", "cancelTurn", "shellAction", "close", "attach", "attachmentsPasted", "attachmentsSelected", "removeAttachment", "messageAction", "editMessage", "resendMessage", "quickReply", "layoutChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1385
1405
|
}
|
|
1386
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1406
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisExpansion, decorators: [{
|
|
1387
1407
|
type: Component,
|
|
1388
1408
|
args: [{ selector: 'praxis-expansion', standalone: true, imports: [
|
|
1389
1409
|
CommonModule,
|
|
@@ -1402,10 +1422,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
1402
1422
|
[class.density-spacious]="config?.appearance?.density === 'spacious'"
|
|
1403
1423
|
[ngClass]="config?.appearance?.themeClass || ''"
|
|
1404
1424
|
[attr.data-expansion-id]="expansionId || 'default'"
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
|
|
1408
|
-
|
|
1425
|
+
>
|
|
1426
|
+
@if (config?.appearance?.customCss) {
|
|
1427
|
+
<style [innerHTML]="config?.appearance?.customCss"></style>
|
|
1428
|
+
}
|
|
1429
|
+
@if (styleCss(); as s) {
|
|
1430
|
+
<style [innerHTML]="s"></style>
|
|
1431
|
+
}
|
|
1432
|
+
|
|
1409
1433
|
@if (enableCustomization) {
|
|
1410
1434
|
<div class="expansion-ai-assistant">
|
|
1411
1435
|
<button
|
|
@@ -1416,40 +1440,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
1416
1440
|
aria-label="Abrir copiloto semantico Praxis dos paineis"
|
|
1417
1441
|
data-testid="praxis-expansion-ai-assistant-trigger"
|
|
1418
1442
|
(click)="openAiAssistant()"
|
|
1419
|
-
|
|
1443
|
+
>
|
|
1420
1444
|
<mat-icon [praxisIcon]="'auto_awesome'"></mat-icon>
|
|
1421
1445
|
</button>
|
|
1422
1446
|
</div>
|
|
1423
1447
|
}
|
|
1424
|
-
|
|
1425
|
-
|
|
1426
|
-
|
|
1427
|
-
|
|
1428
|
-
|
|
1429
|
-
|
|
1430
|
-
|
|
1431
|
-
|
|
1432
|
-
|
|
1433
|
-
|
|
1434
|
-
|
|
1435
|
-
|
|
1436
|
-
|
|
1437
|
-
|
|
1438
|
-
|
|
1439
|
-
|
|
1440
|
-
|
|
1441
|
-
|
|
1442
|
-
|
|
1443
|
-
|
|
1444
|
-
|
|
1445
|
-
|
|
1446
|
-
|
|
1447
|
-
|
|
1448
|
-
|
|
1449
|
-
|
|
1450
|
-
|
|
1451
|
-
|
|
1452
|
-
|
|
1448
|
+
|
|
1449
|
+
@if (aiAssistantOpen && aiAssistantViewState) {
|
|
1450
|
+
<praxis-ai-assistant-shell
|
|
1451
|
+
[labels]="aiAssistantLabels"
|
|
1452
|
+
[mode]="aiAssistantViewState.mode"
|
|
1453
|
+
[state]="aiAssistantViewState.state"
|
|
1454
|
+
[contextItems]="aiAssistantViewState.contextItems"
|
|
1455
|
+
[attachments]="aiAssistantViewState.attachments"
|
|
1456
|
+
[messages]="aiAssistantViewState.messages"
|
|
1457
|
+
[quickReplies]="aiAssistantViewState.quickReplies"
|
|
1458
|
+
[prompt]="aiAssistantPrompt"
|
|
1459
|
+
[statusText]="aiAssistantViewState.statusText"
|
|
1460
|
+
[errorText]="aiAssistantViewState.errorText"
|
|
1461
|
+
[busy]="aiAssistantViewState.state === 'processing' || aiAssistantViewState.state === 'applying'"
|
|
1462
|
+
[canApply]="aiAssistantViewState.canApply"
|
|
1463
|
+
[layout]="aiAssistantLayout"
|
|
1464
|
+
testIdPrefix="praxis-expansion-ai-assistant"
|
|
1465
|
+
(promptChange)="onAiAssistantPromptChange($event)"
|
|
1466
|
+
(submitPrompt)="onAiAssistantSubmit($event)"
|
|
1467
|
+
(apply)="onAiAssistantApply()"
|
|
1468
|
+
(retryTurn)="onAiAssistantRetry()"
|
|
1469
|
+
(cancelTurn)="onAiAssistantCancel()"
|
|
1470
|
+
(quickReply)="onAiAssistantQuickReply($event)"
|
|
1471
|
+
(editMessage)="onAiAssistantEditMessage($event)"
|
|
1472
|
+
(resendMessage)="onAiAssistantResendMessage($event)"
|
|
1473
|
+
(layoutChange)="onAiAssistantLayoutChange($event)"
|
|
1474
|
+
(close)="closeAiAssistant()"
|
|
1475
|
+
></praxis-ai-assistant-shell>
|
|
1476
|
+
}
|
|
1477
|
+
|
|
1453
1478
|
@if (hasMultiple()) {
|
|
1454
1479
|
<mat-accordion
|
|
1455
1480
|
#accordion
|
|
@@ -1458,7 +1483,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
1458
1483
|
[displayMode]="config?.accordion?.displayMode || 'default'"
|
|
1459
1484
|
[togglePosition]="config?.accordion?.togglePosition || 'after'"
|
|
1460
1485
|
[hideToggle]="config?.accordion?.hideToggle || false"
|
|
1461
|
-
|
|
1486
|
+
>
|
|
1462
1487
|
@for (p of (config?.panels || []); let i = $index; track p.id ?? i) {
|
|
1463
1488
|
@let id = panelDomId(p, i);
|
|
1464
1489
|
<mat-expansion-panel
|
|
@@ -1473,16 +1498,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
1473
1498
|
(afterExpand)="emitAfterExpand(p, i)"
|
|
1474
1499
|
(afterCollapse)="emitAfterCollapse(p, i)"
|
|
1475
1500
|
(destroyed)="emitDestroyed(p, i)"
|
|
1476
|
-
|
|
1501
|
+
>
|
|
1477
1502
|
<mat-expansion-panel-header
|
|
1478
1503
|
[collapsedHeight]="p.collapsedHeight || (defaultOptions?.collapsedHeight || injectedDefaults?.collapsedHeight) || ''"
|
|
1479
|
-
|
|
1480
|
-
|
|
1481
|
-
|
|
1504
|
+
[expandedHeight]="p.expandedHeight || (defaultOptions?.expandedHeight || injectedDefaults?.expandedHeight) || ''"
|
|
1505
|
+
>
|
|
1506
|
+
@if (p.icon) {
|
|
1507
|
+
<mat-icon [praxisIcon]="p.icon"></mat-icon>
|
|
1508
|
+
}
|
|
1482
1509
|
<mat-panel-title>{{ p.title }}</mat-panel-title>
|
|
1483
|
-
|
|
1510
|
+
@if (p.description) {
|
|
1511
|
+
<mat-panel-description>{{ p.description }}</mat-panel-description>
|
|
1512
|
+
}
|
|
1484
1513
|
</mat-expansion-panel-header>
|
|
1485
|
-
|
|
1514
|
+
|
|
1486
1515
|
<ng-template matExpansionPanelContent>
|
|
1487
1516
|
@if (p.content?.length) {
|
|
1488
1517
|
<ng-container
|
|
@@ -1491,7 +1520,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
1491
1520
|
[formGroup]="panelFormFor(p, i)"
|
|
1492
1521
|
></ng-container>
|
|
1493
1522
|
}
|
|
1494
|
-
|
|
1523
|
+
|
|
1495
1524
|
@if (p.widgets?.length) {
|
|
1496
1525
|
@for (w of p.widgets; let wi = $index; track wi) {
|
|
1497
1526
|
<ng-container
|
|
@@ -1502,12 +1531,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
1502
1531
|
></ng-container>
|
|
1503
1532
|
}
|
|
1504
1533
|
}
|
|
1505
|
-
|
|
1534
|
+
|
|
1506
1535
|
@if (p.actionButtons?.length) {
|
|
1507
1536
|
<mat-action-row>
|
|
1508
1537
|
@for (a of p.actionButtons; track a.label) {
|
|
1509
1538
|
<button mat-stroked-button (click)="emitAction(p, i, a.action)">
|
|
1510
|
-
|
|
1539
|
+
@if (a.icon) {
|
|
1540
|
+
<mat-icon [praxisIcon]="a.icon"></mat-icon>
|
|
1541
|
+
}
|
|
1511
1542
|
{{ a.label }}
|
|
1512
1543
|
</button>
|
|
1513
1544
|
}
|
|
@@ -1531,16 +1562,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
1531
1562
|
(afterExpand)="emitAfterExpand(p, 0)"
|
|
1532
1563
|
(afterCollapse)="emitAfterCollapse(p, 0)"
|
|
1533
1564
|
(destroyed)="emitDestroyed(p, 0)"
|
|
1534
|
-
|
|
1565
|
+
>
|
|
1535
1566
|
<mat-expansion-panel-header
|
|
1536
1567
|
[collapsedHeight]="p.collapsedHeight || (defaultOptions?.collapsedHeight || injectedDefaults?.collapsedHeight) || ''"
|
|
1537
|
-
|
|
1538
|
-
|
|
1539
|
-
|
|
1568
|
+
[expandedHeight]="p.expandedHeight || (defaultOptions?.expandedHeight || injectedDefaults?.expandedHeight) || ''"
|
|
1569
|
+
>
|
|
1570
|
+
@if (p.icon) {
|
|
1571
|
+
<mat-icon [praxisIcon]="p.icon"></mat-icon>
|
|
1572
|
+
}
|
|
1540
1573
|
<mat-panel-title>{{ p.title }}</mat-panel-title>
|
|
1541
|
-
|
|
1574
|
+
@if (p.description) {
|
|
1575
|
+
<mat-panel-description>{{ p.description }}</mat-panel-description>
|
|
1576
|
+
}
|
|
1542
1577
|
</mat-expansion-panel-header>
|
|
1543
|
-
|
|
1578
|
+
|
|
1544
1579
|
<ng-template matExpansionPanelContent>
|
|
1545
1580
|
@if (p.content?.length) {
|
|
1546
1581
|
<ng-container
|
|
@@ -1549,7 +1584,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
1549
1584
|
[formGroup]="panelFormFor(p, 0)"
|
|
1550
1585
|
></ng-container>
|
|
1551
1586
|
}
|
|
1552
|
-
|
|
1587
|
+
|
|
1553
1588
|
@if (p.widgets?.length) {
|
|
1554
1589
|
@for (w of p.widgets; let wi = $index; track wi) {
|
|
1555
1590
|
<ng-container
|
|
@@ -1560,12 +1595,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
1560
1595
|
></ng-container>
|
|
1561
1596
|
}
|
|
1562
1597
|
}
|
|
1563
|
-
|
|
1598
|
+
|
|
1564
1599
|
@if (p.actionButtons?.length) {
|
|
1565
1600
|
<mat-action-row>
|
|
1566
1601
|
@for (a of p.actionButtons; track a.label) {
|
|
1567
1602
|
<button mat-stroked-button (click)="emitAction(p, 0, a.action)">
|
|
1568
|
-
|
|
1603
|
+
@if (a.icon) {
|
|
1604
|
+
<mat-icon [praxisIcon]="a.icon"></mat-icon>
|
|
1605
|
+
}
|
|
1569
1606
|
{{ a.label }}
|
|
1570
1607
|
</button>
|
|
1571
1608
|
}
|
|
@@ -1576,24 +1613,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
1576
1613
|
} @else {
|
|
1577
1614
|
<div class="praxis-expansion-empty">
|
|
1578
1615
|
<span>Nenhum painel configurado</span>
|
|
1579
|
-
|
|
1580
|
-
<mat-
|
|
1581
|
-
|
|
1616
|
+
@if (enableCustomization) {
|
|
1617
|
+
<button mat-stroked-button color="primary" (click)="openEditor()">
|
|
1618
|
+
<mat-icon [praxisIcon]="'tune'"></mat-icon> Configurar
|
|
1619
|
+
</button>
|
|
1620
|
+
}
|
|
1582
1621
|
</div>
|
|
1583
1622
|
}
|
|
1584
1623
|
}
|
|
1585
1624
|
</div>
|
|
1586
1625
|
<!-- Edit button -->
|
|
1587
|
-
|
|
1588
|
-
|
|
1589
|
-
|
|
1590
|
-
|
|
1591
|
-
|
|
1592
|
-
|
|
1593
|
-
|
|
1594
|
-
|
|
1595
|
-
|
|
1596
|
-
|
|
1626
|
+
@if (enableCustomization) {
|
|
1627
|
+
<button
|
|
1628
|
+
mat-fab
|
|
1629
|
+
class="edit-fab"
|
|
1630
|
+
aria-label="Editar painéis"
|
|
1631
|
+
(click)="openEditor()"
|
|
1632
|
+
>
|
|
1633
|
+
<mat-icon fontIcon="edit"></mat-icon>
|
|
1634
|
+
</button>
|
|
1635
|
+
}
|
|
1636
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;position:relative;color:var(--md-sys-color-on-surface)}.praxis-expansion-root{display:block;--p-exp-surface: var(--md-sys-color-surface);--p-exp-surface-container: var(--md-sys-color-surface-container);--p-exp-border: var(--md-sys-color-outline-variant);--p-exp-text: var(--md-sys-color-on-surface);--p-exp-text-muted: var(--md-sys-color-on-surface-variant);--p-exp-focus: var(--md-sys-color-primary);--p-exp-radius: 12px}.mat-expansion-panel{background:var(--p-exp-surface);border:1px solid var(--p-exp-border);border-radius:var(--p-exp-radius);overflow:hidden}.mat-expansion-panel:not(:last-child){margin-bottom:var(--p-exp-panel-gap, 12px)}.mat-expansion-panel-header{background:var(--p-exp-surface-container);color:var(--p-exp-text)}.mat-expansion-panel-header:focus-visible{outline:2px solid var(--p-exp-focus);outline-offset:-2px}.mat-expansion-panel-header-title{font-weight:600}.mat-expansion-panel-header-description{color:var(--p-exp-text-muted)}.mat-expansion-panel-body{padding:12px 16px 16px}.mat-action-row{border-top:1px solid var(--p-exp-border)}.density-compact .mat-expansion-panel-body{padding:8px 12px 12px}.density-compact .mat-expansion-panel-header{min-height:40px;padding:0 12px}.density-comfortable .mat-expansion-panel-body{padding:12px 16px 16px}.density-comfortable .mat-expansion-panel-header{min-height:48px;padding:0 16px}.density-spacious .mat-expansion-panel-body{padding:16px 20px 20px}.density-spacious .mat-expansion-panel-header{min-height:56px;padding:0 20px}.praxis-expansion-empty{display:flex;gap:8px;align-items:center;padding:8px 12px;color:var(--p-exp-text-muted)}.edit-fab{position:absolute;right:12px;bottom:12px;z-index:2}.expansion-ai-assistant{position:absolute;right:12px;bottom:72px;z-index:3}.expansion-ai-assistant-trigger{box-shadow:var(--md-sys-elevation-level2, 0 4px 12px rgba(0, 0, 0, .18))}\n"] }]
|
|
1597
1637
|
}], propDecorators: { config: [{
|
|
1598
1638
|
type: Input
|
|
1599
1639
|
}], expansionId: [{
|
|
@@ -1800,8 +1840,8 @@ class PraxisExpansionConfigEditor {
|
|
|
1800
1840
|
const current = JSON.stringify(this.config || {});
|
|
1801
1841
|
this.isDirty$.next(current !== this.initialJson);
|
|
1802
1842
|
}
|
|
1803
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1804
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1843
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisExpansionConfigEditor, deps: [{ token: SETTINGS_PANEL_DATA }], target: i0.ɵɵFactoryTarget.Component });
|
|
1844
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisExpansionConfigEditor, isStandalone: true, selector: "praxis-expansion-config-editor", inputs: { config: "config", expansionId: "expansionId" }, usesOnChanges: true, ngImport: i0, template: `
|
|
1805
1845
|
<div class="pdx-expansion-editor" data-testid="expansion-config-editor">
|
|
1806
1846
|
<section class="sec">
|
|
1807
1847
|
<h4>Aparência</h4>
|
|
@@ -1820,7 +1860,7 @@ class PraxisExpansionConfigEditor {
|
|
|
1820
1860
|
</select>
|
|
1821
1861
|
</mat-form-field>
|
|
1822
1862
|
</div>
|
|
1823
|
-
|
|
1863
|
+
|
|
1824
1864
|
<h5>Container</h5>
|
|
1825
1865
|
<div class="grid two">
|
|
1826
1866
|
<mat-form-field appearance="outline">
|
|
@@ -1862,7 +1902,7 @@ class PraxisExpansionConfigEditor {
|
|
|
1862
1902
|
<input matInput [value]="config?.appearance?.container?.panelGap || ''" (input)="setContainer('panelGap', $any($event.target).value)" placeholder="12px" />
|
|
1863
1903
|
</mat-form-field>
|
|
1864
1904
|
</div>
|
|
1865
|
-
|
|
1905
|
+
|
|
1866
1906
|
<h5>Cabeçalho</h5>
|
|
1867
1907
|
<div class="grid two">
|
|
1868
1908
|
<mat-form-field appearance="outline">
|
|
@@ -1922,7 +1962,7 @@ class PraxisExpansionConfigEditor {
|
|
|
1922
1962
|
<input matInput [value]="config?.appearance?.header?.toggleIconSize || ''" (input)="setHeader('toggleIconSize', $any($event.target).value)" placeholder="12px" />
|
|
1923
1963
|
</mat-form-field>
|
|
1924
1964
|
</div>
|
|
1925
|
-
|
|
1965
|
+
|
|
1926
1966
|
<h5>Estados</h5>
|
|
1927
1967
|
<div class="grid two">
|
|
1928
1968
|
<mat-form-field appearance="outline">
|
|
@@ -1968,13 +2008,15 @@ class PraxisExpansionConfigEditor {
|
|
|
1968
2008
|
type="button"
|
|
1969
2009
|
[matTooltip]="'Use tokens M3, por exemplo: var(--md-sys-color-primary)'"
|
|
1970
2010
|
matTooltipPosition="above"
|
|
1971
|
-
|
|
2011
|
+
>
|
|
1972
2012
|
<mat-icon [praxisIcon]="'help_outline'"></mat-icon>
|
|
1973
2013
|
</button>
|
|
1974
2014
|
</mat-form-field>
|
|
1975
|
-
|
|
2015
|
+
@if (tokensError) {
|
|
2016
|
+
<div class="error">{{ tokensError }}</div>
|
|
2017
|
+
}
|
|
1976
2018
|
</section>
|
|
1977
|
-
|
|
2019
|
+
|
|
1978
2020
|
<section class="sec">
|
|
1979
2021
|
<h4>Configuração do acordeão</h4>
|
|
1980
2022
|
<div class="grid two">
|
|
@@ -2005,45 +2047,47 @@ class PraxisExpansionConfigEditor {
|
|
|
2005
2047
|
<button mat-stroked-button color="primary" (click)="addPanel()"><mat-icon [praxisIcon]="'add'"></mat-icon>Adicionar painel</button>
|
|
2006
2048
|
</div>
|
|
2007
2049
|
</section>
|
|
2008
|
-
|
|
2009
|
-
|
|
2010
|
-
<
|
|
2011
|
-
<
|
|
2012
|
-
|
|
2013
|
-
|
|
2014
|
-
|
|
2015
|
-
|
|
2016
|
-
|
|
2017
|
-
|
|
2018
|
-
<
|
|
2050
|
+
|
|
2051
|
+
@for (p of (config?.panels || []); track p; let i = $index) {
|
|
2052
|
+
<section class="sec">
|
|
2053
|
+
<div class="panel-row">
|
|
2054
|
+
<strong>{{ p.title || ('Painel ' + (i + 1)) }}</strong>
|
|
2055
|
+
<span class="grow"></span>
|
|
2056
|
+
<button mat-button (click)="move(i, -1)" [disabled]="i===0"><mat-icon [praxisIcon]="'arrow_upward'"></mat-icon>Subir</button>
|
|
2057
|
+
<button mat-button (click)="move(i, 1)" [disabled]="i>=(config!.panels!.length-1)"><mat-icon [praxisIcon]="'arrow_downward'"></mat-icon>Descer</button>
|
|
2058
|
+
<button mat-button color="warn" (click)="removePanel(i)"><mat-icon [praxisIcon]="'delete'"></mat-icon>Remover</button>
|
|
2059
|
+
</div>
|
|
2060
|
+
<div class="grid two">
|
|
2061
|
+
<mat-form-field appearance="outline"><mat-label>ID</mat-label>
|
|
2019
2062
|
<input matInput [value]="p.id || ''" (input)="setPanel(i, 'id', $any($event.target).value)" />
|
|
2020
2063
|
</mat-form-field>
|
|
2021
2064
|
<mat-form-field appearance="outline"><mat-label>Título</mat-label>
|
|
2022
|
-
|
|
2023
|
-
|
|
2024
|
-
|
|
2025
|
-
|
|
2026
|
-
|
|
2027
|
-
|
|
2028
|
-
|
|
2029
|
-
|
|
2030
|
-
|
|
2031
|
-
|
|
2032
|
-
|
|
2033
|
-
|
|
2034
|
-
|
|
2035
|
-
|
|
2036
|
-
|
|
2037
|
-
|
|
2038
|
-
|
|
2039
|
-
|
|
2040
|
-
|
|
2041
|
-
</div>
|
|
2042
|
-
</section>
|
|
2065
|
+
<input matInput [value]="p.title || ''" (input)="setPanel(i, 'title', $any($event.target).value)" />
|
|
2066
|
+
</mat-form-field>
|
|
2067
|
+
<mat-form-field appearance="outline"><mat-label>Descrição</mat-label>
|
|
2068
|
+
<input matInput [value]="p.description || ''" (input)="setPanel(i, 'description', $any($event.target).value)" />
|
|
2069
|
+
</mat-form-field>
|
|
2070
|
+
<mat-form-field appearance="outline"><mat-label>Ícone</mat-label>
|
|
2071
|
+
<input matInput [value]="p.icon || ''" (input)="setPanel(i, 'icon', $any($event.target).value)" placeholder="info" />
|
|
2072
|
+
</mat-form-field>
|
|
2073
|
+
<mat-form-field appearance="outline"><mat-label>Altura recolhida</mat-label>
|
|
2074
|
+
<input matInput placeholder="48px" [value]="p.collapsedHeight || ''" (input)="setPanel(i, 'collapsedHeight', $any($event.target).value)" />
|
|
2075
|
+
</mat-form-field>
|
|
2076
|
+
<mat-form-field appearance="outline"><mat-label>Altura expandida</mat-label>
|
|
2077
|
+
<input matInput placeholder="64px" [value]="p.expandedHeight || ''" (input)="setPanel(i, 'expandedHeight', $any($event.target).value)" />
|
|
2078
|
+
</mat-form-field>
|
|
2079
|
+
<div class="row wrap">
|
|
2080
|
+
<mat-slide-toggle [checked]="p.disabled || false" (change)="setPanel(i, 'disabled', $event.checked)">Desativado</mat-slide-toggle>
|
|
2081
|
+
<mat-slide-toggle [checked]="p.expanded || false" (change)="setPanel(i, 'expanded', $event.checked)">Expandido</mat-slide-toggle>
|
|
2082
|
+
<mat-slide-toggle [checked]="p.hideToggle || false" (change)="setPanel(i, 'hideToggle', $event.checked)">Ocultar toggle</mat-slide-toggle>
|
|
2083
|
+
</div>
|
|
2043
2084
|
</div>
|
|
2044
|
-
|
|
2085
|
+
</section>
|
|
2086
|
+
}
|
|
2087
|
+
</div>
|
|
2088
|
+
`, isInline: true, styles: [":host{display:block;color:var(--md-sys-color-on-surface)}.pdx-expansion-editor{display:grid;gap:16px}.sec{border:1px solid var(--md-sys-color-outline-variant);padding:12px;border-radius:10px;background:var(--md-sys-color-surface-container-lowest);display:grid;gap:12px}.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.row.wrap{flex-wrap:wrap}.panel-row{display:flex;gap:8px;align-items:center;width:100%}.grow{flex:1 1 auto}.grid{display:grid;gap:10px;align-items:center}.grid.two{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.full{width:100%}.error{color:var(--md-sys-color-error);font-size:12px}.pdx-expansion-editor .mat-mdc-form-field{width:100%;--mdc-outlined-text-field-container-height: 48px;--mdc-outlined-text-field-outline-color: var(--md-sys-color-outline-variant);--mdc-outlined-text-field-hover-outline-color: var(--md-sys-color-outline);--mdc-outlined-text-field-focus-outline-color: var(--md-sys-color-primary);--mdc-outlined-text-field-error-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-focus-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-hover-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-label-text-color: var(--md-sys-color-on-surface-variant);--mdc-outlined-text-field-input-text-color: var(--md-sys-color-on-surface);--mdc-outlined-text-field-supporting-text-color: var(--md-sys-color-on-surface-variant)}.help-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 18px;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;margin-right:-4px}.help-icon-button mat-icon{font-size:18px;width:18px;height:18px}.mat-mdc-form-field-icon-suffix{align-self:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2045
2089
|
}
|
|
2046
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2090
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisExpansionConfigEditor, decorators: [{
|
|
2047
2091
|
type: Component,
|
|
2048
2092
|
args: [{ selector: 'praxis-expansion-config-editor', standalone: true, imports: [
|
|
2049
2093
|
CommonModule,
|
|
@@ -2073,7 +2117,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
2073
2117
|
</select>
|
|
2074
2118
|
</mat-form-field>
|
|
2075
2119
|
</div>
|
|
2076
|
-
|
|
2120
|
+
|
|
2077
2121
|
<h5>Container</h5>
|
|
2078
2122
|
<div class="grid two">
|
|
2079
2123
|
<mat-form-field appearance="outline">
|
|
@@ -2115,7 +2159,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
2115
2159
|
<input matInput [value]="config?.appearance?.container?.panelGap || ''" (input)="setContainer('panelGap', $any($event.target).value)" placeholder="12px" />
|
|
2116
2160
|
</mat-form-field>
|
|
2117
2161
|
</div>
|
|
2118
|
-
|
|
2162
|
+
|
|
2119
2163
|
<h5>Cabeçalho</h5>
|
|
2120
2164
|
<div class="grid two">
|
|
2121
2165
|
<mat-form-field appearance="outline">
|
|
@@ -2175,7 +2219,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
2175
2219
|
<input matInput [value]="config?.appearance?.header?.toggleIconSize || ''" (input)="setHeader('toggleIconSize', $any($event.target).value)" placeholder="12px" />
|
|
2176
2220
|
</mat-form-field>
|
|
2177
2221
|
</div>
|
|
2178
|
-
|
|
2222
|
+
|
|
2179
2223
|
<h5>Estados</h5>
|
|
2180
2224
|
<div class="grid two">
|
|
2181
2225
|
<mat-form-field appearance="outline">
|
|
@@ -2221,13 +2265,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
2221
2265
|
type="button"
|
|
2222
2266
|
[matTooltip]="'Use tokens M3, por exemplo: var(--md-sys-color-primary)'"
|
|
2223
2267
|
matTooltipPosition="above"
|
|
2224
|
-
|
|
2268
|
+
>
|
|
2225
2269
|
<mat-icon [praxisIcon]="'help_outline'"></mat-icon>
|
|
2226
2270
|
</button>
|
|
2227
2271
|
</mat-form-field>
|
|
2228
|
-
|
|
2272
|
+
@if (tokensError) {
|
|
2273
|
+
<div class="error">{{ tokensError }}</div>
|
|
2274
|
+
}
|
|
2229
2275
|
</section>
|
|
2230
|
-
|
|
2276
|
+
|
|
2231
2277
|
<section class="sec">
|
|
2232
2278
|
<h4>Configuração do acordeão</h4>
|
|
2233
2279
|
<div class="grid two">
|
|
@@ -2258,43 +2304,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
2258
2304
|
<button mat-stroked-button color="primary" (click)="addPanel()"><mat-icon [praxisIcon]="'add'"></mat-icon>Adicionar painel</button>
|
|
2259
2305
|
</div>
|
|
2260
2306
|
</section>
|
|
2261
|
-
|
|
2262
|
-
|
|
2263
|
-
<
|
|
2264
|
-
<
|
|
2265
|
-
|
|
2266
|
-
|
|
2267
|
-
|
|
2268
|
-
|
|
2269
|
-
|
|
2270
|
-
|
|
2271
|
-
<
|
|
2307
|
+
|
|
2308
|
+
@for (p of (config?.panels || []); track p; let i = $index) {
|
|
2309
|
+
<section class="sec">
|
|
2310
|
+
<div class="panel-row">
|
|
2311
|
+
<strong>{{ p.title || ('Painel ' + (i + 1)) }}</strong>
|
|
2312
|
+
<span class="grow"></span>
|
|
2313
|
+
<button mat-button (click)="move(i, -1)" [disabled]="i===0"><mat-icon [praxisIcon]="'arrow_upward'"></mat-icon>Subir</button>
|
|
2314
|
+
<button mat-button (click)="move(i, 1)" [disabled]="i>=(config!.panels!.length-1)"><mat-icon [praxisIcon]="'arrow_downward'"></mat-icon>Descer</button>
|
|
2315
|
+
<button mat-button color="warn" (click)="removePanel(i)"><mat-icon [praxisIcon]="'delete'"></mat-icon>Remover</button>
|
|
2316
|
+
</div>
|
|
2317
|
+
<div class="grid two">
|
|
2318
|
+
<mat-form-field appearance="outline"><mat-label>ID</mat-label>
|
|
2272
2319
|
<input matInput [value]="p.id || ''" (input)="setPanel(i, 'id', $any($event.target).value)" />
|
|
2273
2320
|
</mat-form-field>
|
|
2274
2321
|
<mat-form-field appearance="outline"><mat-label>Título</mat-label>
|
|
2275
|
-
|
|
2276
|
-
|
|
2277
|
-
|
|
2278
|
-
|
|
2279
|
-
|
|
2280
|
-
|
|
2281
|
-
|
|
2282
|
-
|
|
2283
|
-
|
|
2284
|
-
|
|
2285
|
-
|
|
2286
|
-
|
|
2287
|
-
|
|
2288
|
-
|
|
2289
|
-
|
|
2290
|
-
|
|
2291
|
-
|
|
2292
|
-
|
|
2293
|
-
|
|
2294
|
-
|
|
2295
|
-
|
|
2322
|
+
<input matInput [value]="p.title || ''" (input)="setPanel(i, 'title', $any($event.target).value)" />
|
|
2323
|
+
</mat-form-field>
|
|
2324
|
+
<mat-form-field appearance="outline"><mat-label>Descrição</mat-label>
|
|
2325
|
+
<input matInput [value]="p.description || ''" (input)="setPanel(i, 'description', $any($event.target).value)" />
|
|
2326
|
+
</mat-form-field>
|
|
2327
|
+
<mat-form-field appearance="outline"><mat-label>Ícone</mat-label>
|
|
2328
|
+
<input matInput [value]="p.icon || ''" (input)="setPanel(i, 'icon', $any($event.target).value)" placeholder="info" />
|
|
2329
|
+
</mat-form-field>
|
|
2330
|
+
<mat-form-field appearance="outline"><mat-label>Altura recolhida</mat-label>
|
|
2331
|
+
<input matInput placeholder="48px" [value]="p.collapsedHeight || ''" (input)="setPanel(i, 'collapsedHeight', $any($event.target).value)" />
|
|
2332
|
+
</mat-form-field>
|
|
2333
|
+
<mat-form-field appearance="outline"><mat-label>Altura expandida</mat-label>
|
|
2334
|
+
<input matInput placeholder="64px" [value]="p.expandedHeight || ''" (input)="setPanel(i, 'expandedHeight', $any($event.target).value)" />
|
|
2335
|
+
</mat-form-field>
|
|
2336
|
+
<div class="row wrap">
|
|
2337
|
+
<mat-slide-toggle [checked]="p.disabled || false" (change)="setPanel(i, 'disabled', $event.checked)">Desativado</mat-slide-toggle>
|
|
2338
|
+
<mat-slide-toggle [checked]="p.expanded || false" (change)="setPanel(i, 'expanded', $event.checked)">Expandido</mat-slide-toggle>
|
|
2339
|
+
<mat-slide-toggle [checked]="p.hideToggle || false" (change)="setPanel(i, 'hideToggle', $event.checked)">Ocultar toggle</mat-slide-toggle>
|
|
2340
|
+
</div>
|
|
2341
|
+
</div>
|
|
2342
|
+
</section>
|
|
2343
|
+
}
|
|
2296
2344
|
</div>
|
|
2297
|
-
|
|
2345
|
+
`, styles: [":host{display:block;color:var(--md-sys-color-on-surface)}.pdx-expansion-editor{display:grid;gap:16px}.sec{border:1px solid var(--md-sys-color-outline-variant);padding:12px;border-radius:10px;background:var(--md-sys-color-surface-container-lowest);display:grid;gap:12px}.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.row.wrap{flex-wrap:wrap}.panel-row{display:flex;gap:8px;align-items:center;width:100%}.grow{flex:1 1 auto}.grid{display:grid;gap:10px;align-items:center}.grid.two{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.full{width:100%}.error{color:var(--md-sys-color-error);font-size:12px}.pdx-expansion-editor .mat-mdc-form-field{width:100%;--mdc-outlined-text-field-container-height: 48px;--mdc-outlined-text-field-outline-color: var(--md-sys-color-outline-variant);--mdc-outlined-text-field-hover-outline-color: var(--md-sys-color-outline);--mdc-outlined-text-field-focus-outline-color: var(--md-sys-color-primary);--mdc-outlined-text-field-error-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-focus-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-hover-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-label-text-color: var(--md-sys-color-on-surface-variant);--mdc-outlined-text-field-input-text-color: var(--md-sys-color-on-surface);--mdc-outlined-text-field-supporting-text-color: var(--md-sys-color-on-surface-variant)}.help-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 18px;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;margin-right:-4px}.help-icon-button mat-icon{font-size:18px;width:18px;height:18px}.mat-mdc-form-field-icon-suffix{align-self:center}\n"] }]
|
|
2298
2346
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
2299
2347
|
type: Inject,
|
|
2300
2348
|
args: [SETTINGS_PANEL_DATA]
|
|
@@ -2348,8 +2396,8 @@ class PraxisExpansionWidgetConfigEditor {
|
|
|
2348
2396
|
},
|
|
2349
2397
|
};
|
|
2350
2398
|
}
|
|
2351
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2352
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2399
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisExpansionWidgetConfigEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2400
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: PraxisExpansionWidgetConfigEditor, isStandalone: true, selector: "praxis-expansion-widget-config-editor", inputs: { inputs: "inputs", widgetKey: "widgetKey" }, viewQueries: [{ propertyName: "expansionEditor", first: true, predicate: ["expansionEditor"], descendants: true }], ngImport: i0, template: `
|
|
2353
2401
|
<section data-testid="expansion-widget-config-editor">
|
|
2354
2402
|
<praxis-expansion-config-editor
|
|
2355
2403
|
#expansionEditor
|
|
@@ -2357,14 +2405,14 @@ class PraxisExpansionWidgetConfigEditor {
|
|
|
2357
2405
|
[expansionId]="expansionId"
|
|
2358
2406
|
/>
|
|
2359
2407
|
</section>
|
|
2360
|
-
`, isInline: true, dependencies: [{ kind: "
|
|
2408
|
+
`, isInline: true, dependencies: [{ kind: "component", type: PraxisExpansionConfigEditor, selector: "praxis-expansion-config-editor", inputs: ["config", "expansionId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2361
2409
|
}
|
|
2362
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2410
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisExpansionWidgetConfigEditor, decorators: [{
|
|
2363
2411
|
type: Component,
|
|
2364
2412
|
args: [{
|
|
2365
2413
|
selector: 'praxis-expansion-widget-config-editor',
|
|
2366
2414
|
standalone: true,
|
|
2367
|
-
imports: [
|
|
2415
|
+
imports: [PraxisExpansionConfigEditor],
|
|
2368
2416
|
template: `
|
|
2369
2417
|
<section data-testid="expansion-widget-config-editor">
|
|
2370
2418
|
<praxis-expansion-config-editor
|
package/package.json
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@praxisui/expansion",
|
|
3
|
-
"version": "8.0.0-beta.
|
|
3
|
+
"version": "8.0.0-beta.32",
|
|
4
4
|
"description": "Expansion panel (accordion) components for Praxis UI with metadata configuration and editor integration.",
|
|
5
5
|
"peerDependencies": {
|
|
6
|
-
"@angular/common": "^
|
|
7
|
-
"@angular/core": "^
|
|
8
|
-
"@angular/material": "^
|
|
9
|
-
"@angular/cdk": "^
|
|
10
|
-
"@praxisui/core": "^8.0.0-beta.
|
|
11
|
-
"@praxisui/dynamic-fields": "^8.0.0-beta.
|
|
12
|
-
"@praxisui/settings-panel": "^8.0.0-beta.
|
|
13
|
-
"@angular/forms": "^
|
|
14
|
-
"@angular/router": "^
|
|
15
|
-
"@praxisui/ai": "^8.0.0-beta.
|
|
6
|
+
"@angular/common": "^21.0.0",
|
|
7
|
+
"@angular/core": "^21.0.0",
|
|
8
|
+
"@angular/material": "^21.0.0",
|
|
9
|
+
"@angular/cdk": "^21.0.0",
|
|
10
|
+
"@praxisui/core": "^8.0.0-beta.32",
|
|
11
|
+
"@praxisui/dynamic-fields": "^8.0.0-beta.32",
|
|
12
|
+
"@praxisui/settings-panel": "^8.0.0-beta.32",
|
|
13
|
+
"@angular/forms": "^21.0.0",
|
|
14
|
+
"@angular/router": "^21.0.0",
|
|
15
|
+
"@praxisui/ai": "^8.0.0-beta.32",
|
|
16
16
|
"rxjs": "~7.8.0"
|
|
17
17
|
},
|
|
18
18
|
"dependencies": {
|
|
@@ -40,14 +40,15 @@
|
|
|
40
40
|
],
|
|
41
41
|
"sideEffects": false,
|
|
42
42
|
"module": "fesm2022/praxisui-expansion.mjs",
|
|
43
|
-
"typings": "
|
|
43
|
+
"typings": "types/praxisui-expansion.d.ts",
|
|
44
44
|
"exports": {
|
|
45
45
|
"./package.json": {
|
|
46
46
|
"default": "./package.json"
|
|
47
47
|
},
|
|
48
48
|
".": {
|
|
49
|
-
"types": "./
|
|
49
|
+
"types": "./types/praxisui-expansion.d.ts",
|
|
50
50
|
"default": "./fesm2022/praxisui-expansion.mjs"
|
|
51
51
|
}
|
|
52
|
-
}
|
|
52
|
+
},
|
|
53
|
+
"type": "module"
|
|
53
54
|
}
|
|
@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { OnChanges, OnDestroy, OnInit, EventEmitter, QueryList, SimpleChanges, AfterViewInit, Provider } from '@angular/core';
|
|
3
3
|
import { FormGroup } from '@angular/forms';
|
|
4
4
|
import { MatAccordionDisplayMode, MatAccordionTogglePosition, MatExpansionPanelDefaultOptions, MatAccordion, MatExpansionPanel } from '@angular/material/expansion';
|
|
5
|
-
import { AiCapability, FieldMetadata, WidgetDefinition, WidgetEventEnvelope, SettingsValueProvider as SettingsValueProvider$1, ComponentDocMeta, AiCapabilityCategory,
|
|
5
|
+
import { AiCapability, FieldMetadata, WidgetDefinition, WidgetEventEnvelope, SettingsValueProvider as SettingsValueProvider$1, ComponentDocMeta, AiCapabilityCategory, AiCapabilityCatalog, AiValueKind, ComponentAuthoringManifest } from '@praxisui/core';
|
|
6
6
|
import { BehaviorSubject } from 'rxjs';
|
|
7
7
|
import { BaseAiAdapter, PatchResult, PraxisAssistantTurnViewState, PraxisAssistantShellLayout, PraxisAssistantShellLabels, PraxisAssistantSessionSnapshot, PraxisAssistantShellQuickReply, PraxisAssistantShellMessage, PraxisAssistantShellContextItem } from '@praxisui/ai';
|
|
8
8
|
import { SettingsValueProvider } from '@praxisui/settings-panel';
|