@praxisui/stepper 1.0.0-beta.58 → 1.0.0-beta.59

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.
Files changed (4) hide show
  1. package/fesm2022/praxisui-stepper.mjs +979 -1114
  2. package/fesm2022/praxisui-stepper.mjs.map +1 -1
  3. package/index.d.ts +10 -4
  4. package/package.json +7 -7
package/fesm2022/praxisui-stepper.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as i1$1 from '@angular/common';
2
2
  import { CommonModule } from '@angular/common';
3
3
  import * as i0 from '@angular/core';
4
- import { Inject, Component, inject, signal, ElementRef, Renderer2, EventEmitter, computed, TemplateRef, Output, Input, ContentChild, ChangeDetectionStrategy, ENVIRONMENT_INITIALIZER, isDevMode, effect, ViewChild } from '@angular/core';
4
+ import { Inject, Component, inject, ChangeDetectorRef, signal, ElementRef, Renderer2, EventEmitter, computed, TemplateRef, Output, Input, ContentChild, ChangeDetectionStrategy, ENVIRONMENT_INITIALIZER, isDevMode, effect, ViewChild } from '@angular/core';
5
5
  import { ActivatedRoute } from '@angular/router';
6
6
  import * as i2$1 from '@angular/material/stepper';
7
7
  import { MatStepperModule } from '@angular/material/stepper';
@@ -24,16 +24,11 @@ import * as i8 from '@angular/cdk/drag-drop';
24
24
  import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
25
25
  import * as i9 from '@angular/material/tooltip';
26
26
  import { MatTooltipModule } from '@angular/material/tooltip';
27
- import { MatChipsModule } from '@angular/material/chips';
28
- import * as i10 from '@angular/material/card';
29
- import { MatCardModule } from '@angular/material/card';
30
- import * as i11 from '@angular/material/button-toggle';
31
- import { MatButtonToggleModule } from '@angular/material/button-toggle';
32
27
  import * as i1 from '@angular/material/dialog';
33
28
  import { MAT_DIALOG_DATA, MatDialogModule, MatDialog } from '@angular/material/dialog';
34
- import * as i12 from '@angular/material/menu';
29
+ import * as i10 from '@angular/material/menu';
35
30
  import { MatMenuModule } from '@angular/material/menu';
36
- import * as i13 from '@angular/material/tabs';
31
+ import * as i11 from '@angular/material/tabs';
37
32
  import { MatTabsModule } from '@angular/material/tabs';
38
33
  import { BehaviorSubject } from 'rxjs';
39
34
  import { PraxisListConfigEditor } from '@praxisui/list';
@@ -43,6 +38,8 @@ import * as i5 from '@angular/material/checkbox';
43
38
  import { MatCheckboxModule } from '@angular/material/checkbox';
44
39
  import { BaseAiAdapter, PraxisAiAssistantComponent } from '@praxisui/ai';
45
40
  import { take } from 'rxjs/operators';
41
+ import * as i1$2 from '@angular/material/card';
42
+ import { MatCardModule } from '@angular/material/card';
46
43
 
47
44
  class SelectQuickConfigDialogComponent {
48
45
  ref;
@@ -477,7 +474,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
477
474
 
478
475
  class PraxisStepperConfigEditor {
479
476
  config = { steps: [], orientation: 'horizontal', headerPosition: 'top', linear: false };
480
- activeIndex = 0;
477
+ activeStepRef = null;
481
478
  // SettingsValueProvider observables
482
479
  isDirty$ = new BehaviorSubject(false);
483
480
  isValid$ = new BehaviorSubject(true);
@@ -485,6 +482,7 @@ class PraxisStepperConfigEditor {
485
482
  settings = inject(SettingsPanelService);
486
483
  dialog = inject(MatDialog);
487
484
  iconPicker = inject(IconPickerService);
485
+ cdr = inject(ChangeDetectorRef);
488
486
  constructor(data) {
489
487
  let seed = data?.config ?? data;
490
488
  // Normalize when seed is a JSON string
@@ -507,6 +505,7 @@ class PraxisStepperConfigEditor {
507
505
  this.config.steps = [{ id: 'step1', label: 'Novo passo' }];
508
506
  this.isDirty$.next(true);
509
507
  }
508
+ this.ensureActiveStep();
510
509
  }
511
510
  markDirty() { this.isDirty$.next(true); this.validate(); }
512
511
  validate() {
@@ -693,21 +692,77 @@ class PraxisStepperConfigEditor {
693
692
  }
694
693
  drop(ev) {
695
694
  moveItemInArray(this.config.steps, ev.previousIndex, ev.currentIndex);
695
+ this.ensureActiveStep();
696
696
  this.markDirty();
697
697
  }
698
- setActive(i) { this.activeIndex = i; }
699
- onActiveIndexChange() { this.activeIndex = Math.max(0, Math.min(this.activeIndex, (this.config.steps.length || 1) - 1)); }
698
+ setActive(step) {
699
+ if (this.activeStepRef === step)
700
+ return;
701
+ this.commitFocusedFieldBeforeSwitch();
702
+ this.activeStepRef = null;
703
+ this.cdr.detectChanges();
704
+ queueMicrotask(() => {
705
+ this.activeStepRef = step;
706
+ this.cdr.markForCheck();
707
+ });
708
+ }
709
+ onStepItemEnter(event, step) {
710
+ event.preventDefault();
711
+ this.setActive(step);
712
+ }
713
+ onStepItemSpace(event, step) {
714
+ event.preventDefault();
715
+ this.setActive(step);
716
+ }
717
+ focusAdjacentStep(event, index, delta) {
718
+ event.preventDefault();
719
+ const nextIndex = Math.max(0, Math.min(index + delta, this.config.steps.length - 1));
720
+ const nextStep = this.config.steps[nextIndex];
721
+ if (!nextStep)
722
+ return;
723
+ this.setActive(nextStep);
724
+ queueMicrotask(() => {
725
+ const currentItem = event.currentTarget;
726
+ const nextItem = currentItem?.parentElement?.children.item(nextIndex);
727
+ nextItem?.focus();
728
+ });
729
+ }
700
730
  addStep() {
701
731
  const n = this.config.steps.length + 1;
702
- this.config.steps.push({ id: `step${n}`, label: `Passo ${n}` });
732
+ const step = { id: `step${n}`, label: `Passo ${n}` };
733
+ this.config.steps.push(step);
734
+ this.activeStepRef = step;
703
735
  this.markDirty();
704
736
  }
705
737
  removeStep(idx) {
738
+ const removed = this.config.steps[idx];
706
739
  this.config.steps.splice(idx, 1);
740
+ if (removed && this.activeStepRef === removed) {
741
+ this.activeStepRef = this.config.steps[idx] || this.config.steps[idx - 1] || null;
742
+ }
743
+ this.ensureActiveStep();
707
744
  this.markDirty();
708
745
  }
709
746
  // ------- Active step helpers -------
710
- get activeStep() { return this.config.steps?.[this.activeIndex] || null; }
747
+ get activeIndex() {
748
+ this.ensureActiveStep();
749
+ return this.activeStepRef ? this.config.steps.indexOf(this.activeStepRef) : -1;
750
+ }
751
+ get activeStep() {
752
+ this.ensureActiveStep();
753
+ return this.activeStepRef;
754
+ }
755
+ ensureActiveStep() {
756
+ if (this.activeStepRef && this.config.steps.includes(this.activeStepRef))
757
+ return;
758
+ this.activeStepRef = this.config.steps[0] || null;
759
+ }
760
+ commitFocusedFieldBeforeSwitch() {
761
+ const activeElement = typeof document !== 'undefined' ? document.activeElement : null;
762
+ if (activeElement?.closest('.pdx-active-step')) {
763
+ activeElement.blur();
764
+ }
765
+ }
711
766
  ensureWidgets() { const s = this.activeStep; if (!s.widgets)
712
767
  s.widgets = []; return s.widgets; }
713
768
  ensureWidgetsBeforeForm() { const s = this.activeStep; if (!s.widgetsBeforeForm)
@@ -1182,305 +1237,215 @@ class PraxisStepperConfigEditor {
1182
1237
  <mat-tab-group>
1183
1238
  <mat-tab label="Geral">
1184
1239
  <div class="tab-pad">
1185
- <div class="help">Configure o funcionamento e a aparência básica do passo a passo.</div>
1186
- <div class="pdx-grid">
1187
- <mat-form-field appearance="outline">
1188
- <mat-label>Orientação</mat-label>
1189
- <select matNativeControl [(ngModel)]="config.orientation" (ngModelChange)="markDirty()">
1190
- <option value="horizontal">Horizontal</option>
1191
- <option value="vertical">Vertical</option>
1192
- </select>
1193
- <button
1194
- mat-icon-button
1195
- matSuffix
1196
- class="help-icon-button"
1197
- type="button"
1198
- [matTooltip]="'Horizontal: cabeçalho no topo • Vertical: lista à esquerda'"
1199
- matTooltipPosition="above"
1200
- >
1201
- <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
1202
- </button>
1203
- </mat-form-field>
1204
- <mat-form-field appearance="outline">
1205
- <mat-label>Posição dos títulos</mat-label>
1206
- <select matNativeControl [(ngModel)]="config.headerPosition" (ngModelChange)="markDirty()">
1207
- <option value="top">Acima</option>
1208
- <option value="bottom">Abaixo</option>
1209
- </select>
1210
- <button
1211
- mat-icon-button
1212
- matSuffix
1213
- class="help-icon-button"
1214
- type="button"
1215
- [matTooltip]="'Válido na orientação horizontal'"
1216
- matTooltipPosition="above"
1217
- >
1218
- <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
1219
- </button>
1220
- </mat-form-field>
1221
- <mat-form-field appearance="outline">
1222
- <mat-label>Posição do rótulo</mat-label>
1223
- <select matNativeControl [(ngModel)]="config.labelPosition" (ngModelChange)="markDirty()" [disabled]="config.orientation !== 'horizontal'">
1224
- <option value="end">Ao lado</option>
1225
- <option value="bottom">Abaixo</option>
1226
- </select>
1227
- <button
1228
- mat-icon-button
1229
- matSuffix
1230
- class="help-icon-button"
1231
- type="button"
1232
- [matTooltip]="'Como o texto aparece no cabeçalho'"
1233
- matTooltipPosition="above"
1234
- >
1235
- <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
1236
- </button>
1237
- </mat-form-field>
1238
- <mat-form-field appearance="outline">
1239
- <mat-label>Cor</mat-label>
1240
- <select matNativeControl [(ngModel)]="config.color" (ngModelChange)="markDirty()">
1241
- <option [ngValue]="undefined">Padrão</option>
1242
- <option value="primary">Primária</option>
1243
- <option value="accent">Acento</option>
1244
- <option value="warn">Alerta</option>
1245
- </select>
1246
- <button
1247
- mat-icon-button
1248
- matSuffix
1249
- class="help-icon-button"
1250
- type="button"
1251
- [matTooltip]="'Aplicável a temas Material 2 (M2)'"
1252
- matTooltipPosition="above"
1253
- >
1254
- <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
1255
- </button>
1256
- </mat-form-field>
1257
- <mat-form-field appearance="outline">
1258
- <mat-label>Duração da animação</mat-label>
1259
- <input matInput [(ngModel)]="config.animationDuration" (ngModelChange)="markDirty()" placeholder="Ex.: 300ms" />
1260
- <button
1261
- mat-icon-button
1262
- matSuffix
1263
- class="help-icon-button"
1264
- type="button"
1265
- [matTooltip]="'Tempo da transição entre etapas'"
1266
- matTooltipPosition="above"
1267
- >
1268
- <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
1269
- </button>
1270
- </mat-form-field>
1271
- <mat-form-field appearance="outline">
1272
- <mat-label>Etapa selecionada</mat-label>
1273
- <input matInput type="number" [(ngModel)]="config.selectedIndex" (ngModelChange)="markDirty()" />
1274
- <button
1275
- mat-icon-button
1276
- matSuffix
1277
- class="help-icon-button"
1278
- type="button"
1279
- [matTooltip]="'Índice inicia em 0 (primeira etapa)'"
1280
- matTooltipPosition="above"
1281
- >
1282
- <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
1283
- </button>
1284
- </mat-form-field>
1285
- <mat-form-field appearance="outline">
1286
- <mat-label>Densidade</mat-label>
1287
- <select matNativeControl [(ngModel)]="config.density" (ngModelChange)="markDirty()">
1288
- <option [ngValue]="undefined">Padrão</option>
1289
- <option value="comfortable">Confortável</option>
1290
- <option value="compact">Compacta</option>
1291
- </select>
1292
- <button
1293
- mat-icon-button
1294
- matSuffix
1295
- class="help-icon-button"
1296
- type="button"
1297
- [matTooltip]="'Controla espaçamentos e alturas'"
1298
- matTooltipPosition="above"
1299
- >
1300
- <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
1301
- </button>
1302
- </mat-form-field>
1303
- <mat-form-field appearance="outline" class="w-full">
1304
- <mat-label>Classe do stepper (opcional)</mat-label>
1305
- <input matInput [(ngModel)]="config.stepperClass" (ngModelChange)="markDirty()" placeholder="Ex.: meu-stepper" />
1306
- <button
1307
- mat-icon-button
1308
- matSuffix
1309
- class="help-icon-button"
1310
- type="button"
1311
- [matTooltip]="'Permite estilizar com CSS escopado'"
1312
- matTooltipPosition="above"
1313
- >
1314
- <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
1315
- </button>
1316
- </mat-form-field>
1317
- <mat-form-field appearance="outline" class="w-full">
1318
- <mat-label>Classe do cabeçalho (opcional)</mat-label>
1319
- <input matInput [(ngModel)]="config.headerClass" (ngModelChange)="markDirty()" placeholder="Ex.: stepper-header" />
1320
- <button
1321
- mat-icon-button
1322
- matSuffix
1323
- class="help-icon-button"
1324
- type="button"
1325
- [matTooltip]="'Use para ajustes finos de aparência'"
1326
- matTooltipPosition="above"
1327
- >
1328
- <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
1329
- </button>
1330
- </mat-form-field>
1331
- <mat-form-field appearance="outline" class="w-full">
1332
- <mat-label>Classe do conteúdo (opcional)</mat-label>
1333
- <input matInput [(ngModel)]="config.contentClass" (ngModelChange)="markDirty()" placeholder="Ex.: stepper-content" />
1334
- <button
1335
- mat-icon-button
1336
- matSuffix
1337
- class="help-icon-button"
1338
- type="button"
1339
- [matTooltip]="'Aplica uma classe à área de conteúdo'"
1340
- matTooltipPosition="above"
1341
- >
1342
- <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
1343
- </button>
1344
- </mat-form-field>
1240
+ <div class="editor-intro">
1241
+ <div class="editor-intro-copy">
1242
+ <div class="eyebrow">Fundamentos</div>
1243
+ <div class="editor-title">Defina o comportamento base do stepper</div>
1244
+ <div class="editor-subtitle">Ajuste orientação, densidade, animação e classes utilitárias sem misturar decisões estruturais com customização avançada.</div>
1245
+ </div>
1345
1246
  </div>
1346
- <div class="pdx-toggles">
1347
- <mat-slide-toggle [(ngModel)]="config.linear" (ngModelChange)="markDirty()">Respeitar ordem (linear)</mat-slide-toggle>
1348
- <mat-slide-toggle [(ngModel)]="config.disableRipple" (ngModelChange)="markDirty()">Desativar efeitos de clique</mat-slide-toggle>
1247
+ <div class="settings-group">
1248
+ <div class="group-head">
1249
+ <div class="section-title">Layout e navegação</div>
1250
+ <div class="section-subtitle">Controla como as etapas aparecem e como o usuário percorre o fluxo.</div>
1251
+ </div>
1252
+ <div class="pdx-grid">
1253
+ <mat-form-field appearance="outline">
1254
+ <mat-label>Orientação</mat-label>
1255
+ <select matNativeControl [(ngModel)]="config.orientation" (ngModelChange)="markDirty()">
1256
+ <option value="horizontal">Horizontal</option>
1257
+ <option value="vertical">Vertical</option>
1258
+ </select>
1259
+ </mat-form-field>
1260
+ <mat-form-field appearance="outline">
1261
+ <mat-label>Posição dos títulos</mat-label>
1262
+ <select matNativeControl [(ngModel)]="config.headerPosition" (ngModelChange)="markDirty()">
1263
+ <option value="top">Acima</option>
1264
+ <option value="bottom">Abaixo</option>
1265
+ </select>
1266
+ </mat-form-field>
1267
+ <mat-form-field appearance="outline">
1268
+ <mat-label>Posição do rótulo</mat-label>
1269
+ <select matNativeControl [(ngModel)]="config.labelPosition" (ngModelChange)="markDirty()" [disabled]="config.orientation !== 'horizontal'">
1270
+ <option value="end">Ao lado</option>
1271
+ <option value="bottom">Abaixo</option>
1272
+ </select>
1273
+ </mat-form-field>
1274
+ <mat-form-field appearance="outline">
1275
+ <mat-label>Densidade</mat-label>
1276
+ <select matNativeControl [(ngModel)]="config.density" (ngModelChange)="markDirty()">
1277
+ <option [ngValue]="undefined">Padrão</option>
1278
+ <option value="comfortable">Confortável</option>
1279
+ <option value="compact">Compacta</option>
1280
+ </select>
1281
+ </mat-form-field>
1282
+ <mat-form-field appearance="outline">
1283
+ <mat-label>Duração da animação</mat-label>
1284
+ <input matInput [(ngModel)]="config.animationDuration" (ngModelChange)="markDirty()" placeholder="Ex.: 300ms" />
1285
+ </mat-form-field>
1286
+ <mat-form-field appearance="outline">
1287
+ <mat-label>Etapa inicial</mat-label>
1288
+ <input matInput type="number" [(ngModel)]="config.selectedIndex" (ngModelChange)="markDirty()" />
1289
+ </mat-form-field>
1290
+ </div>
1291
+ <div class="toggle-group">
1292
+ <mat-slide-toggle [(ngModel)]="config.linear" (ngModelChange)="markDirty()">Respeitar ordem (linear)</mat-slide-toggle>
1293
+ <mat-slide-toggle [(ngModel)]="config.disableRipple" (ngModelChange)="markDirty()">Desativar efeitos de clique</mat-slide-toggle>
1294
+ </div>
1349
1295
  </div>
1296
+ <details class="disclosure">
1297
+ <summary>
1298
+ <span class="section-title">Classes e integração visual</span>
1299
+ <span class="section-subtitle">Use apenas quando precisar aplicar CSS escopado no host.</span>
1300
+ </summary>
1301
+ <div class="detail-grid disclosure-body">
1302
+ <mat-form-field appearance="outline" class="field-span-2">
1303
+ <mat-label>Classe do stepper</mat-label>
1304
+ <input matInput [(ngModel)]="config.stepperClass" (ngModelChange)="markDirty()" placeholder="Ex.: meu-stepper" />
1305
+ </mat-form-field>
1306
+ <mat-form-field appearance="outline">
1307
+ <mat-label>Classe do cabeçalho</mat-label>
1308
+ <input matInput [(ngModel)]="config.headerClass" (ngModelChange)="markDirty()" placeholder="Ex.: stepper-header" />
1309
+ </mat-form-field>
1310
+ <mat-form-field appearance="outline">
1311
+ <mat-label>Classe do conteúdo</mat-label>
1312
+ <input matInput [(ngModel)]="config.contentClass" (ngModelChange)="markDirty()" placeholder="Ex.: stepper-content" />
1313
+ </mat-form-field>
1314
+ </div>
1315
+ </details>
1350
1316
  </div>
1351
1317
  </mat-tab>
1352
1318
 
1353
1319
  <mat-tab label="Etapas">
1354
1320
  <div class="tab-pad">
1355
- <div class="help">Gerencie as etapas: nomes, mensagens e conteúdo. Arraste para reordenar.</div>
1321
+ <div class="editor-intro">
1322
+ <div class="editor-intro-copy">
1323
+ <div class="eyebrow">Estrutura do fluxo</div>
1324
+ <div class="editor-title">Defina a narrativa de cada etapa</div>
1325
+ <div class="editor-subtitle">Organize títulos, estados e conteúdo da etapa sem misturar configuração técnica com ações de montagem.</div>
1326
+ </div>
1327
+ <div class="editor-intro-meta">
1328
+ <div class="meta-pill">
1329
+ <span class="meta-label">Etapas</span>
1330
+ <strong>{{ config.steps.length }}</strong>
1331
+ </div>
1332
+ </div>
1333
+ </div>
1356
1334
  <div class="pdx-steps">
1357
1335
  <div class="pdx-steps-header">
1358
- <div class="title">Etapas ({{ config.steps.length }})</div>
1359
- <button mat-button (click)="addStep()"><mat-icon [praxisIcon]="'add'"></mat-icon>Adicionar etapa</button>
1336
+ <div>
1337
+ <div class="section-title">Mapa de etapas</div>
1338
+ <div class="section-subtitle">Arraste para reordenar e selecione uma etapa para editar o conteúdo.</div>
1339
+ </div>
1340
+ <button mat-flat-button color="primary" (click)="addStep()"><mat-icon [praxisIcon]="'add'"></mat-icon>Adicionar etapa</button>
1360
1341
  </div>
1361
- <div cdkDropList (cdkDropListDropped)="drop($event)" class="pdx-step-list">
1362
- <div class="pdx-step-item" *ngFor="let s of config.steps; let i = index" cdkDrag [class.active]="activeIndex === i" (click)="setActive(i)">
1363
- <div class="drag-handle" cdkDragHandle><mat-icon [praxisIcon]="'drag_indicator'"></mat-icon></div>
1364
- <div class="pdx-fields">
1365
- <mat-form-field appearance="outline" class="min-180">
1366
- <mat-label>Título da etapa</mat-label>
1367
- <input matInput [(ngModel)]="s.label" (ngModelChange)="markDirty()" />
1368
- <button
1369
- mat-icon-button
1370
- matSuffix
1371
- class="help-icon-button"
1372
- type="button"
1373
- [matTooltip]="'Como aparecerá no cabeçalho'"
1374
- matTooltipPosition="above"
1375
- >
1376
- <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
1377
- </button>
1378
- </mat-form-field>
1379
- <mat-form-field appearance="outline">
1380
- <mat-label>Identificador (opcional)</mat-label>
1381
- <input matInput [(ngModel)]="s.id" (ngModelChange)="markDirty()" />
1382
- <button
1383
- mat-icon-button
1384
- matSuffix
1385
- class="help-icon-button"
1386
- type="button"
1387
- [matTooltip]="'Útil para automações'"
1388
- matTooltipPosition="above"
1389
- >
1390
- <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
1391
- </button>
1392
- </mat-form-field>
1393
- <mat-form-field appearance="outline">
1394
- <mat-label>Texto alternativo (acessibilidade)</mat-label>
1395
- <input matInput [(ngModel)]="s.ariaLabel" (ngModelChange)="markDirty()" />
1396
- <button
1397
- mat-icon-button
1398
- matSuffix
1399
- class="help-icon-button"
1400
- type="button"
1401
- [matTooltip]="'Lido por leitores de tela'"
1402
- matTooltipPosition="above"
1403
- >
1404
- <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
1405
- </button>
1406
- </mat-form-field>
1407
- <mat-form-field appearance="outline">
1408
- <mat-label>ID que descreve (opcional)</mat-label>
1409
- <input matInput [(ngModel)]="s.ariaLabelledby" (ngModelChange)="markDirty()" />
1410
- <button
1411
- mat-icon-button
1412
- matSuffix
1413
- class="help-icon-button"
1414
- type="button"
1415
- [matTooltip]="'ID de um elemento que descreve a etapa'"
1416
- matTooltipPosition="above"
1417
- >
1418
- <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
1419
- </button>
1420
- </mat-form-field>
1421
- <mat-form-field appearance="outline">
1422
- <mat-label>Ícone/estado do marcador</mat-label>
1423
- <input matInput [(ngModel)]="s.state" (ngModelChange)="markDirty()" placeholder="Ex.: number, done, edit" />
1424
- <button
1425
- mat-icon-button
1426
- matSuffix
1427
- class="help-icon-button"
1428
- type="button"
1429
- [matTooltip]="'Controla o ícone do passo (quando aplicável)'"
1430
- matTooltipPosition="above"
1431
- >
1432
- <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
1433
- </button>
1434
- </mat-form-field>
1435
- <mat-form-field appearance="outline">
1436
- <mat-label>Mensagem de erro</mat-label>
1437
- <input matInput [(ngModel)]="s.errorMessage" (ngModelChange)="markDirty()" />
1438
- <button
1439
- mat-icon-button
1440
- matSuffix
1441
- class="help-icon-button"
1442
- type="button"
1443
- [matTooltip]="'Mostrada quando há erro na etapa'"
1444
- matTooltipPosition="above"
1445
- >
1446
- <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
1342
+ <div class="steps-workspace" *ngIf="activeStep as step; else noSteps">
1343
+ <div
1344
+ cdkDropList
1345
+ role="listbox"
1346
+ aria-label="Lista de etapas"
1347
+ (cdkDropListDropped)="drop($event)"
1348
+ class="pdx-step-list">
1349
+ <div
1350
+ class="pdx-step-item"
1351
+ *ngFor="let s of config.steps; let i = index"
1352
+ cdkDrag
1353
+ role="option"
1354
+ [attr.aria-selected]="activeStep === s"
1355
+ [attr.tabindex]="activeStep === s ? 0 : -1"
1356
+ [class.active]="activeStep === s"
1357
+ (click)="setActive(s)"
1358
+ (keydown.enter)="onStepItemEnter($event, s)"
1359
+ (keydown.space)="onStepItemSpace($event, s)"
1360
+ (keydown.arrowdown)="focusAdjacentStep($event, i, 1)"
1361
+ (keydown.arrowup)="focusAdjacentStep($event, i, -1)">
1362
+ <div class="drag-handle" cdkDragHandle><mat-icon [praxisIcon]="'drag_indicator'"></mat-icon></div>
1363
+ <div class="step-summary">
1364
+ <div class="step-summary-head">
1365
+ <div class="step-summary-index">Etapa {{ i + 1 }}</div>
1366
+ <div class="step-summary-title">{{ s.label || 'Sem título' }}</div>
1367
+ </div>
1368
+ <div class="step-summary-sub">{{ s.id || 'Sem identificador' }}</div>
1369
+ <div class="step-summary-flags">
1370
+ <span class="summary-chip" *ngIf="s.optional">Opcional</span>
1371
+ <span class="summary-chip" *ngIf="s.completed">Concluída</span>
1372
+ <span class="summary-chip summary-chip-warn" *ngIf="s.hasError">Erro</span>
1373
+ <span class="summary-chip" *ngIf="s.form">Formulário</span>
1374
+ </div>
1375
+ </div>
1376
+ <div class="pdx-actions">
1377
+ <button mat-icon-button color="warn" (click)="removeStep(i); $event.stopPropagation()" matTooltip="Remover" [attr.aria-label]="'Remover etapa ' + (s.label || (i + 1))">
1378
+ <mat-icon [praxisIcon]="'delete'"></mat-icon>
1447
1379
  </button>
1448
- </mat-form-field>
1449
- <div class="pdx-flag-group">
1450
- <mat-slide-toggle [(ngModel)]="s.optional" (ngModelChange)="markDirty()">Etapa opcional</mat-slide-toggle>
1451
- <mat-slide-toggle [(ngModel)]="s.editable" (ngModelChange)="markDirty()">Permitir voltar e editar</mat-slide-toggle>
1452
- <mat-slide-toggle [(ngModel)]="s.completed" (ngModelChange)="markDirty()">Marcar como concluída</mat-slide-toggle>
1453
- <mat-slide-toggle [(ngModel)]="s.hasError" (ngModelChange)="markDirty()">Marcar como com erro</mat-slide-toggle>
1454
1380
  </div>
1455
1381
  </div>
1456
- <div class="pdx-actions">
1457
- <button mat-icon-button color="warn" (click)="removeStep(i)" matTooltip="Remover">
1458
- <mat-icon [praxisIcon]="'delete'"></mat-icon>
1459
- </button>
1460
- </div>
1461
1382
  </div>
1462
- </div>
1463
- </div>
1464
1383
 
1465
- <div class="pdx-active-step" *ngIf="activeStep as step; else noSteps">
1466
- <div class="hdr">
1467
- <div class="title">Editando: {{ step.label }}</div>
1468
- <mat-button-toggle-group [(ngModel)]="activeIndex" (ngModelChange)="onActiveIndexChange()" [hideSingleSelectionIndicator]="true">
1469
- <mat-button-toggle *ngFor="let s of config.steps; let i = index" [value]="i">{{ i + 1 }}</mat-button-toggle>
1470
- </mat-button-toggle-group>
1471
- </div>
1384
+ <div class="pdx-active-step">
1385
+ <div class="hdr">
1386
+ <div class="active-step-head">
1387
+ <div class="eyebrow">Etapa selecionada</div>
1388
+ <div class="title">Editando: {{ step.label }}</div>
1389
+ <div class="section-subtitle">Ajuste conteúdo principal primeiro. Configurações secundárias ficam recolhidas para reduzir ruído.</div>
1390
+ </div>
1391
+ </div>
1392
+
1393
+ <div class="section">
1394
+ <div class="section-title">Dados principais</div>
1395
+ <div class="detail-grid">
1396
+ <mat-form-field appearance="outline" class="field-span-2">
1397
+ <mat-label>Título da etapa</mat-label>
1398
+ <input matInput [(ngModel)]="step.label" (ngModelChange)="markDirty()" />
1399
+ </mat-form-field>
1400
+ <mat-form-field appearance="outline">
1401
+ <mat-label>Identificador</mat-label>
1402
+ <input matInput [(ngModel)]="step.id" (ngModelChange)="markDirty()" />
1403
+ </mat-form-field>
1404
+ <mat-form-field appearance="outline">
1405
+ <mat-label>Ícone ou estado</mat-label>
1406
+ <input matInput [(ngModel)]="step.state" (ngModelChange)="markDirty()" placeholder="Ex.: number, done, edit" />
1407
+ </mat-form-field>
1408
+ <mat-form-field appearance="outline" class="field-span-2">
1409
+ <mat-label>Mensagem de erro</mat-label>
1410
+ <input matInput [(ngModel)]="step.errorMessage" (ngModelChange)="markDirty()" />
1411
+ </mat-form-field>
1412
+ </div>
1413
+ <div class="toggle-group">
1414
+ <mat-slide-toggle [(ngModel)]="step.optional" (ngModelChange)="markDirty()">Etapa opcional</mat-slide-toggle>
1415
+ <mat-slide-toggle [(ngModel)]="step.editable" (ngModelChange)="markDirty()">Permitir voltar e editar</mat-slide-toggle>
1416
+ <mat-slide-toggle [(ngModel)]="step.completed" (ngModelChange)="markDirty()">Marcar como concluída</mat-slide-toggle>
1417
+ <mat-slide-toggle [(ngModel)]="step.hasError" (ngModelChange)="markDirty()">Marcar como com erro</mat-slide-toggle>
1418
+ </div>
1419
+ </div>
1420
+
1421
+ <details class="disclosure">
1422
+ <summary>
1423
+ <span class="section-title">Acessibilidade e detalhes técnicos</span>
1424
+ <span class="section-subtitle">Rótulos auxiliares e metadados menos usados.</span>
1425
+ </summary>
1426
+ <div class="detail-grid disclosure-body">
1427
+ <mat-form-field appearance="outline">
1428
+ <mat-label>Texto alternativo</mat-label>
1429
+ <input matInput [(ngModel)]="step.ariaLabel" (ngModelChange)="markDirty()" />
1430
+ </mat-form-field>
1431
+ <mat-form-field appearance="outline">
1432
+ <mat-label>ID que descreve</mat-label>
1433
+ <input matInput [(ngModel)]="step.ariaLabelledby" (ngModelChange)="markDirty()" />
1434
+ </mat-form-field>
1435
+ </div>
1436
+ </details>
1472
1437
 
1473
- <div class="pdx-content-editor">
1438
+ <div class="pdx-content-editor">
1474
1439
  <div class="section editorial-section">
1475
1440
  <div class="section-head">
1476
1441
  <div>
1477
1442
  <div class="section-title">Conteúdo editorial</div>
1478
- <div class="section-subtitle">Organize os blocos narrativos da etapa antes ou depois do formulário.</div>
1443
+ <div class="section-subtitle">Use blocos de apoio para contextualizar a etapa antes ou depois do formulário.</div>
1479
1444
  </div>
1480
1445
  </div>
1481
1446
 
1482
1447
  <div class="zone-grid">
1483
- <div class="zone-card">
1448
+ <div class="zone-column">
1484
1449
  <div class="zone-head">
1485
1450
  <div class="zone-title">Antes do formulário</div>
1486
1451
  <div class="zone-actions">
@@ -1518,21 +1483,17 @@ class PraxisStepperConfigEditor {
1518
1483
  <div class="meta" *ngIf="widgetBlockId(w) as blockId">ID: {{ blockId }}</div>
1519
1484
  </div>
1520
1485
  <div class="actions">
1521
- <button mat-button (click)="editWidget(w)">
1486
+ <button mat-icon-button (click)="editWidget(w)" matTooltip="Editar bloco">
1522
1487
  <mat-icon [praxisIcon]="'tune'"></mat-icon>
1523
- Editar
1524
1488
  </button>
1525
- <button mat-button (click)="moveEditorialWidget(w, 'before', 'after')">
1526
- <mat-icon [praxisIcon]="'arrow_downward'"></mat-icon>
1527
- Mover para depois
1489
+ <button mat-icon-button (click)="moveEditorialWidget(w, 'before', 'after')" matTooltip="Mover para depois do formulário">
1490
+ <mat-icon [praxisIcon]="'south'"></mat-icon>
1528
1491
  </button>
1529
- <button mat-button (click)="duplicateEditorialWidget(w, 'before')">
1492
+ <button mat-icon-button (click)="duplicateEditorialWidget(w, 'before')" matTooltip="Duplicar bloco">
1530
1493
  <mat-icon [praxisIcon]="'content_copy'"></mat-icon>
1531
- Duplicar
1532
1494
  </button>
1533
- <button mat-button color="warn" (click)="removeEditorialWidget(w, 'before')">
1495
+ <button mat-icon-button color="warn" (click)="removeEditorialWidget(w, 'before')" matTooltip="Remover bloco">
1534
1496
  <mat-icon [praxisIcon]="'delete'"></mat-icon>
1535
- Remover
1536
1497
  </button>
1537
1498
  </div>
1538
1499
  </div>
@@ -1540,7 +1501,7 @@ class PraxisStepperConfigEditor {
1540
1501
  </div>
1541
1502
  </div>
1542
1503
 
1543
- <div class="zone-card">
1504
+ <div class="zone-column">
1544
1505
  <div class="zone-head">
1545
1506
  <div class="zone-title">Depois do formulário</div>
1546
1507
  <div class="zone-actions">
@@ -1578,21 +1539,17 @@ class PraxisStepperConfigEditor {
1578
1539
  <div class="meta" *ngIf="widgetBlockId(w) as blockId">ID: {{ blockId }}</div>
1579
1540
  </div>
1580
1541
  <div class="actions">
1581
- <button mat-button (click)="editWidget(w)">
1542
+ <button mat-icon-button (click)="editWidget(w)" matTooltip="Editar bloco">
1582
1543
  <mat-icon [praxisIcon]="'tune'"></mat-icon>
1583
- Editar
1584
1544
  </button>
1585
- <button mat-button (click)="moveEditorialWidget(w, 'after', 'before')">
1586
- <mat-icon [praxisIcon]="'arrow_upward'"></mat-icon>
1587
- Mover para antes
1545
+ <button mat-icon-button (click)="moveEditorialWidget(w, 'after', 'before')" matTooltip="Mover para antes do formulário">
1546
+ <mat-icon [praxisIcon]="'north'"></mat-icon>
1588
1547
  </button>
1589
- <button mat-button (click)="duplicateEditorialWidget(w, 'after')">
1548
+ <button mat-icon-button (click)="duplicateEditorialWidget(w, 'after')" matTooltip="Duplicar bloco">
1590
1549
  <mat-icon [praxisIcon]="'content_copy'"></mat-icon>
1591
- Duplicar
1592
1550
  </button>
1593
- <button mat-button color="warn" (click)="removeEditorialWidget(w, 'after')">
1551
+ <button mat-icon-button color="warn" (click)="removeEditorialWidget(w, 'after')" matTooltip="Remover bloco">
1594
1552
  <mat-icon [praxisIcon]="'delete'"></mat-icon>
1595
- Remover
1596
1553
  </button>
1597
1554
  </div>
1598
1555
  </div>
@@ -1606,17 +1563,19 @@ class PraxisStepperConfigEditor {
1606
1563
  <div class="section-title">Formulário da etapa</div>
1607
1564
  <div class="section-body">
1608
1565
  <ng-container *ngIf="step.form; else addFormBtn">
1609
- <mat-card appearance="outlined" class="mini-card">
1610
- <mat-card-header>
1611
- <mat-icon mat-card-avatar [praxisIcon]="'dynamic_form'"></mat-icon>
1612
- <mat-card-title>Formulário principal</mat-card-title>
1613
- <mat-card-subtitle>{{ step.form.formId || step.id || '—' }}</mat-card-subtitle>
1614
- </mat-card-header>
1615
- <mat-card-actions align="end">
1566
+ <div class="form-row-card">
1567
+ <div class="form-row-main">
1568
+ <mat-icon [praxisIcon]="'dynamic_form'"></mat-icon>
1569
+ <div>
1570
+ <div class="name">Formulário principal</div>
1571
+ <div class="sub">{{ step.form.formId || step.id || '—' }}</div>
1572
+ </div>
1573
+ </div>
1574
+ <div class="form-row-actions">
1616
1575
  <button mat-button (click)="editMainForm()"><mat-icon [praxisIcon]="'tune'"></mat-icon> Editar</button>
1617
1576
  <button mat-button color="warn" (click)="removeMainForm()"><mat-icon [praxisIcon]="'delete'"></mat-icon> Remover</button>
1618
- </mat-card-actions>
1619
- </mat-card>
1577
+ </div>
1578
+ </div>
1620
1579
  </ng-container>
1621
1580
  <ng-template #addFormBtn>
1622
1581
  <button mat-stroked-button color="primary" (click)="addMainForm()"><mat-icon [praxisIcon]="'add'"></mat-icon> Adicionar formulário</button>
@@ -1628,7 +1587,7 @@ class PraxisStepperConfigEditor {
1628
1587
  <div class="section-head">
1629
1588
  <div>
1630
1589
  <div class="section-title">Componentes avançados</div>
1631
- <div class="section-subtitle">Use para cenários de seleção e integrações específicas.</div>
1590
+ <div class="section-subtitle">Atalhos para montar experiências mais ricas sem perder clareza no fluxo.</div>
1632
1591
  </div>
1633
1592
  <button mat-stroked-button (click)="openMoreComponents()">
1634
1593
  <mat-icon [praxisIcon]="'add'"></mat-icon>
@@ -1637,12 +1596,14 @@ class PraxisStepperConfigEditor {
1637
1596
  </div>
1638
1597
  <div class="section-body">
1639
1598
  <div class="cta-grid">
1640
- <div class="cta-card mat-elevation-z2">
1599
+ <div class="cta-row-item">
1641
1600
  <div class="cta-head">
1642
1601
  <mat-icon [praxisIcon]="'account_tree'"></mat-icon>
1643
- <div class="cta-title">Lista em árvore</div>
1602
+ <div>
1603
+ <div class="cta-title">Lista em árvore</div>
1604
+ <div class="cta-desc">Dados hierárquicos com seleção simples.</div>
1605
+ </div>
1644
1606
  </div>
1645
- <div class="cta-desc">Exiba dados hierárquicos com seleção simples.</div>
1646
1607
  <div class="cta-actions">
1647
1608
  <button mat-stroked-button (click)="addTreeList()">
1648
1609
  <mat-icon [praxisIcon]="'add'"></mat-icon>
@@ -1650,12 +1611,14 @@ class PraxisStepperConfigEditor {
1650
1611
  </button>
1651
1612
  </div>
1652
1613
  </div>
1653
- <div class="cta-card mat-elevation-z2">
1614
+ <div class="cta-row-item">
1654
1615
  <div class="cta-head">
1655
1616
  <mat-icon [praxisIcon]="'swap_horiz'"></mat-icon>
1656
- <div class="cta-title">Transferência de itens</div>
1617
+ <div>
1618
+ <div class="cta-title">Transferência de itens</div>
1619
+ <div class="cta-desc">Mover itens entre listas para seleção múltipla.</div>
1620
+ </div>
1657
1621
  </div>
1658
- <div class="cta-desc">Mover itens entre listas (ideal para múltipla seleção).</div>
1659
1622
  <div class="cta-actions">
1660
1623
  <button mat-stroked-button (click)="addTransferListQuick()">
1661
1624
  <mat-icon [praxisIcon]="'add'"></mat-icon>
@@ -1663,12 +1626,14 @@ class PraxisStepperConfigEditor {
1663
1626
  </button>
1664
1627
  </div>
1665
1628
  </div>
1666
- <div class="cta-card mat-elevation-z2">
1629
+ <div class="cta-row-item">
1667
1630
  <div class="cta-head">
1668
1631
  <mat-icon [praxisIcon]="'search'"></mat-icon>
1669
- <div class="cta-title">Seleção com busca</div>
1632
+ <div>
1633
+ <div class="cta-title">Seleção com busca</div>
1634
+ <div class="cta-desc">Seleção com busca local ou remota.</div>
1635
+ </div>
1670
1636
  </div>
1671
- <div class="cta-desc">Campo de seleção com busca remota/local.</div>
1672
1637
  <div class="cta-actions">
1673
1638
  <button mat-stroked-button (click)="addSearchableSelect()">
1674
1639
  <mat-icon [praxisIcon]="'add'"></mat-icon>
@@ -1676,12 +1641,14 @@ class PraxisStepperConfigEditor {
1676
1641
  </button>
1677
1642
  </div>
1678
1643
  </div>
1679
- <div class="cta-card mat-elevation-z2">
1644
+ <div class="cta-row-item">
1680
1645
  <div class="cta-head">
1681
1646
  <mat-icon [praxisIcon]="'upload_file'"></mat-icon>
1682
- <div class="cta-title">Upload de arquivos</div>
1647
+ <div>
1648
+ <div class="cta-title">Upload de arquivos</div>
1649
+ <div class="cta-desc">Anexos com validação e fluxo de upload.</div>
1650
+ </div>
1683
1651
  </div>
1684
- <div class="cta-desc">Anexe documentos com validação de upload.</div>
1685
1652
  <div class="cta-actions">
1686
1653
  <button mat-stroked-button (click)="addFilesUpload()">
1687
1654
  <mat-icon [praxisIcon]="'add'"></mat-icon>
@@ -1699,13 +1666,11 @@ class PraxisStepperConfigEditor {
1699
1666
  <div class="sub">{{ w.id }}</div>
1700
1667
  </div>
1701
1668
  <div class="actions">
1702
- <button mat-button (click)="editWidget(w)" [disabled]="!canEditWidget(w)">
1669
+ <button mat-icon-button (click)="editWidget(w)" [disabled]="!canEditWidget(w)" matTooltip="Editar componente">
1703
1670
  <mat-icon [praxisIcon]="'tune'"></mat-icon>
1704
- Editar
1705
1671
  </button>
1706
- <button mat-button color="warn" (click)="removeAdvancedWidget(w)">
1672
+ <button mat-icon-button color="warn" (click)="removeAdvancedWidget(w)" matTooltip="Remover componente">
1707
1673
  <mat-icon [praxisIcon]="'delete'"></mat-icon>
1708
- Remover
1709
1674
  </button>
1710
1675
  </div>
1711
1676
  </div>
@@ -1713,78 +1678,95 @@ class PraxisStepperConfigEditor {
1713
1678
  </div>
1714
1679
  </div>
1715
1680
  </div>
1716
- </div>
1717
- </div>
1718
- <ng-template #noSteps>
1719
- <div class="muted">Nenhuma etapa definida.</div>
1720
- </ng-template>
1721
- </div>
1681
+ </div>
1682
+ </div>
1683
+ </div>
1684
+ </div>
1685
+ <ng-template #noSteps>
1686
+ <div class="muted">Nenhuma etapa definida.</div>
1687
+ </ng-template>
1688
+ </div>
1722
1689
  </mat-tab>
1723
1690
 
1724
1691
  <mat-tab label="Navegação">
1725
1692
  <div class="tab-pad">
1726
- <div class="help">Personalize os botões de avançar e voltar exibidos em cada etapa.</div>
1727
- <div class="pdx-grid">
1728
- <mat-form-field appearance="outline">
1729
- <mat-label>Estilo dos botões</mat-label>
1730
- <select matNativeControl [(ngModel)]="navigationCfg.variant" (ngModelChange)="markDirty()">
1731
- <option [ngValue]="undefined">Padrão (elevado)</option>
1732
- <option value="basic">Texto</option>
1733
- <option value="flat">Plano</option>
1734
- <option value="stroked">Contornado</option>
1735
- <option value="raised">Elevado</option>
1736
- </select>
1737
- </mat-form-field>
1738
- <mat-form-field appearance="outline">
1739
- <mat-label>Cor</mat-label>
1740
- <select matNativeControl [(ngModel)]="navigationCfg.color" (ngModelChange)="markDirty()">
1741
- <option [ngValue]="undefined">Padrão</option>
1742
- <option value="primary">Primária</option>
1743
- <option value="accent">Acento</option>
1744
- <option value="warn">Alerta</option>
1745
- </select>
1746
- </mat-form-field>
1747
- <mat-form-field appearance="outline">
1748
- <mat-label>Alinhamento</mat-label>
1749
- <select matNativeControl [(ngModel)]="navigationCfg.align" (ngModelChange)="markDirty()">
1750
- <option [ngValue]="undefined">Direita</option>
1751
- <option value="start">Esquerda</option>
1752
- <option value="center">Centro</option>
1753
- <option value="space-between">Espaçado</option>
1754
- <option value="end">Direita</option>
1755
- </select>
1756
- </mat-form-field>
1757
- </div>
1758
-
1759
- <div class="pdx-toggles">
1760
- <mat-slide-toggle [(ngModel)]="navigationCfg.visible" (ngModelChange)="markDirty()">Mostrar navegação padrão</mat-slide-toggle>
1693
+ <div class="editor-intro">
1694
+ <div class="editor-intro-copy">
1695
+ <div class="eyebrow">Ações padrão</div>
1696
+ <div class="editor-title">Configure a navegação entre etapas</div>
1697
+ <div class="editor-subtitle">Defina quando os botões padrão aparecem e como eles se apresentam visualmente no fluxo.</div>
1698
+ </div>
1761
1699
  </div>
1762
-
1763
- <div class="pdx-grid">
1764
- <mat-form-field appearance="outline">
1765
- <mat-label>Texto do botão Voltar</mat-label>
1766
- <input matInput [(ngModel)]="navigationCfg.prevLabel" (ngModelChange)="markDirty()" placeholder="Ex.: Voltar" />
1767
- </mat-form-field>
1768
- <mat-form-field appearance="outline">
1769
- <mat-label>Texto do botão Próximo</mat-label>
1770
- <input matInput [(ngModel)]="navigationCfg.nextLabel" (ngModelChange)="markDirty()" placeholder="Ex.: Próximo" />
1771
- </mat-form-field>
1700
+ <div class="settings-group">
1701
+ <div class="group-head">
1702
+ <div class="section-title">Comportamento dos botões</div>
1703
+ <div class="section-subtitle">Aparência e alinhamento da navegação padrão do stepper.</div>
1704
+ </div>
1705
+ <div class="toggle-group">
1706
+ <mat-slide-toggle [(ngModel)]="navigationCfg.visible" (ngModelChange)="markDirty()">Mostrar navegação padrão</mat-slide-toggle>
1707
+ </div>
1708
+ <div class="pdx-grid">
1709
+ <mat-form-field appearance="outline">
1710
+ <mat-label>Estilo dos botões</mat-label>
1711
+ <select matNativeControl [(ngModel)]="navigationCfg.variant" (ngModelChange)="markDirty()" [disabled]="!navigationCfg.visible">
1712
+ <option [ngValue]="undefined">Padrão (elevado)</option>
1713
+ <option value="basic">Texto</option>
1714
+ <option value="flat">Plano</option>
1715
+ <option value="stroked">Contornado</option>
1716
+ <option value="raised">Elevado</option>
1717
+ </select>
1718
+ </mat-form-field>
1719
+ <mat-form-field appearance="outline">
1720
+ <mat-label>Cor</mat-label>
1721
+ <select matNativeControl [(ngModel)]="navigationCfg.color" (ngModelChange)="markDirty()" [disabled]="!navigationCfg.visible">
1722
+ <option [ngValue]="undefined">Padrão</option>
1723
+ <option value="primary">Primária</option>
1724
+ <option value="accent">Acento</option>
1725
+ <option value="warn">Alerta</option>
1726
+ </select>
1727
+ </mat-form-field>
1728
+ <mat-form-field appearance="outline">
1729
+ <mat-label>Alinhamento</mat-label>
1730
+ <select matNativeControl [(ngModel)]="navigationCfg.align" (ngModelChange)="markDirty()" [disabled]="!navigationCfg.visible">
1731
+ <option [ngValue]="undefined">Direita</option>
1732
+ <option value="start">Esquerda</option>
1733
+ <option value="center">Centro</option>
1734
+ <option value="space-between">Espaçado</option>
1735
+ <option value="end">Direita</option>
1736
+ </select>
1737
+ </mat-form-field>
1738
+ </div>
1772
1739
  </div>
1773
-
1774
- <div class="icons-grid">
1775
- <div class="icon-item">
1776
- <div class="icon-head">Ícone de Voltar</div>
1777
- <button mat-stroked-button type="button" (click)="pickNavIcon('prevIcon')">
1778
- <mat-icon *ngIf="navigationCfg.prevIcon" [praxisIcon]="navigationCfg.prevIcon"></mat-icon>
1779
- <ng-container *ngIf="!navigationCfg.prevIcon">Escolher</ng-container>
1780
- </button>
1740
+ <div class="settings-group">
1741
+ <div class="group-head">
1742
+ <div class="section-title">Rótulos e ícones</div>
1743
+ <div class="section-subtitle">Ajuste a cópia e os ícones usados nas ações de voltar e avançar.</div>
1781
1744
  </div>
1782
- <div class="icon-item">
1783
- <div class="icon-head">Ícone de Próximo</div>
1784
- <button mat-stroked-button type="button" (click)="pickNavIcon('nextIcon')">
1785
- <mat-icon *ngIf="navigationCfg.nextIcon" [praxisIcon]="navigationCfg.nextIcon"></mat-icon>
1786
- <ng-container *ngIf="!navigationCfg.nextIcon">Escolher</ng-container>
1787
- </button>
1745
+ <div class="pdx-grid">
1746
+ <mat-form-field appearance="outline">
1747
+ <mat-label>Texto do botão Voltar</mat-label>
1748
+ <input matInput [(ngModel)]="navigationCfg.prevLabel" (ngModelChange)="markDirty()" placeholder="Ex.: Voltar" [disabled]="!navigationCfg.visible" />
1749
+ </mat-form-field>
1750
+ <mat-form-field appearance="outline">
1751
+ <mat-label>Texto do botão Próximo</mat-label>
1752
+ <input matInput [(ngModel)]="navigationCfg.nextLabel" (ngModelChange)="markDirty()" placeholder="Ex.: Próximo" [disabled]="!navigationCfg.visible" />
1753
+ </mat-form-field>
1754
+ </div>
1755
+ <div class="inline-actions-grid">
1756
+ <div class="inline-action-item">
1757
+ <div class="section-title">Ícone de Voltar</div>
1758
+ <button mat-stroked-button type="button" (click)="pickNavIcon('prevIcon')" [disabled]="!navigationCfg.visible" aria-label="Escolher ícone do botão Voltar">
1759
+ <mat-icon *ngIf="navigationCfg.prevIcon" [fontIcon]="navigationCfg.prevIcon"></mat-icon>
1760
+ <ng-container *ngIf="!navigationCfg.prevIcon">Escolher</ng-container>
1761
+ </button>
1762
+ </div>
1763
+ <div class="inline-action-item">
1764
+ <div class="section-title">Ícone de Próximo</div>
1765
+ <button mat-stroked-button type="button" (click)="pickNavIcon('nextIcon')" [disabled]="!navigationCfg.visible" aria-label="Escolher ícone do botão Próximo">
1766
+ <mat-icon *ngIf="navigationCfg.nextIcon" [fontIcon]="navigationCfg.nextIcon"></mat-icon>
1767
+ <ng-container *ngIf="!navigationCfg.nextIcon">Escolher</ng-container>
1768
+ </button>
1769
+ </div>
1788
1770
  </div>
1789
1771
  </div>
1790
1772
  </div>
@@ -1792,141 +1774,119 @@ class PraxisStepperConfigEditor {
1792
1774
 
1793
1775
  <mat-tab label="Aparência">
1794
1776
  <div class="tab-pad">
1795
- <div class="help">Personalize cores, tipografia e ícones. Para ajustes comuns, use os campos abaixo; para maior controle, edite os tokens. Copie o SCSS e cole no arquivo de tema.</div>
1796
- <div class="quick-grid">
1797
- <mat-form-field appearance="outline">
1798
- <mat-label>Altura do cabeçalho (px)</mat-label>
1799
- <input matInput type="number" [ngModel]="headerHeightPx" (ngModelChange)="setHeaderHeightPx($event)" placeholder="Ex.: 48" />
1800
- <button
1801
- mat-icon-button
1802
- matSuffix
1803
- class="help-icon-button"
1804
- type="button"
1805
- [matTooltip]="'Altura do item do cabeçalho'"
1806
- matTooltipPosition="above"
1807
- >
1808
- <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
1809
- </button>
1810
- </mat-form-field>
1811
- <mat-form-field appearance="outline">
1812
- <mat-label>Tamanho do texto (px)</mat-label>
1813
- <input matInput type="number" [ngModel]="headerLabelTextSizePx" (ngModelChange)="setHeaderLabelTextSizePx($event)" placeholder="Ex.: 14" />
1814
- <button
1815
- mat-icon-button
1816
- matSuffix
1817
- class="help-icon-button"
1818
- type="button"
1819
- [matTooltip]="'Tamanho do título da etapa'"
1820
- matTooltipPosition="above"
1821
- >
1822
- <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
1823
- </button>
1824
- </mat-form-field>
1825
- <mat-form-field appearance="outline">
1826
- <mat-label>Peso do texto</mat-label>
1827
- <select matNativeControl [ngModel]="headerLabelTextWeight" (ngModelChange)="setHeaderLabelTextWeight($event)">
1828
- <option [ngValue]="undefined">Padrão</option>
1829
- <option value="400">Normal</option>
1830
- <option value="500">Médio</option>
1831
- <option value="600">Seminegrito</option>
1832
- <option value="700">Negrito</option>
1833
- </select>
1834
- </mat-form-field>
1835
- </div>
1836
- <div class="pdx-grid">
1837
- <mat-form-field appearance="outline" class="w-full">
1838
- <mat-label>Classe de tema (opcional)</mat-label>
1839
- <input matInput [(ngModel)]="appearance.themeClass" (ngModelChange)="onAppearanceChange()" placeholder="Ex.: theme-stepper-custom" />
1840
- <button
1841
- mat-icon-button
1842
- matSuffix
1843
- class="help-icon-button"
1844
- type="button"
1845
- [matTooltip]="'Aplica as cores apenas dentro desse seletor'"
1846
- matTooltipPosition="above"
1847
- >
1848
- <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
1849
- </button>
1850
- </mat-form-field>
1851
- <mat-form-field appearance="outline">
1852
- <mat-label>Conjunto de ícones</mat-label>
1853
- <select matNativeControl [(ngModel)]="appearance.iconsSet" (ngModelChange)="onAppearanceChange()">
1854
- <option [ngValue]="undefined">Material Icons (padrão)</option>
1855
- <option value="material-symbols-outlined">Material Symbols (Outlined)</option>
1856
- <option value="material-symbols-rounded">Material Symbols (Rounded)</option>
1857
- <option value="material-symbols-sharp">Material Symbols (Sharp)</option>
1858
- </select>
1859
- <button
1860
- mat-icon-button
1861
- matSuffix
1862
- class="help-icon-button"
1863
- type="button"
1864
- [matTooltip]="'Selecione se usar ícones do Material Symbols'"
1865
- matTooltipPosition="above"
1866
- >
1867
- <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
1868
- </button>
1869
- </mat-form-field>
1777
+ <div class="editor-intro">
1778
+ <div class="editor-intro-copy">
1779
+ <div class="eyebrow">Tema visual</div>
1780
+ <div class="editor-title">Personalize aparência sem perder consistência</div>
1781
+ <div class="editor-subtitle">Comece pelos ajustes rápidos. Tokens e snippet SCSS ficam recolhidos para cenários avançados.</div>
1782
+ </div>
1870
1783
  </div>
1871
- <div class="icons-grid">
1872
- <div class="icon-item">
1873
- <div class="icon-head">Ícone do número</div>
1874
- <button mat-stroked-button type="button" (click)="pickIcon('number')">
1875
- <mat-icon *ngIf="icons.number; else pick" [praxisIcon]="icons.number"></mat-icon>
1876
- <ng-template #pick>Escolher</ng-template>
1877
- </button>
1784
+ <div class="settings-group">
1785
+ <div class="group-head">
1786
+ <div class="section-title">Ajustes rápidos</div>
1787
+ <div class="section-subtitle">Controles mais comuns para tamanho, peso tipográfico e tema.</div>
1878
1788
  </div>
1879
- <div class="icon-item">
1880
- <div class="icon-head">Ícone concluído</div>
1881
- <button mat-stroked-button type="button" (click)="pickIcon('done')">
1882
- <mat-icon *ngIf="icons.done; else pick2" [praxisIcon]="icons.done"></mat-icon>
1883
- <ng-template #pick2>Escolher</ng-template>
1884
- </button>
1789
+ <div class="quick-grid">
1790
+ <mat-form-field appearance="outline">
1791
+ <mat-label>Altura do cabeçalho (px)</mat-label>
1792
+ <input matInput type="number" [ngModel]="headerHeightPx" (ngModelChange)="setHeaderHeightPx($event)" placeholder="Ex.: 48" />
1793
+ </mat-form-field>
1794
+ <mat-form-field appearance="outline">
1795
+ <mat-label>Tamanho do texto (px)</mat-label>
1796
+ <input matInput type="number" [ngModel]="headerLabelTextSizePx" (ngModelChange)="setHeaderLabelTextSizePx($event)" placeholder="Ex.: 14" />
1797
+ </mat-form-field>
1798
+ <mat-form-field appearance="outline">
1799
+ <mat-label>Peso do texto</mat-label>
1800
+ <select matNativeControl [ngModel]="headerLabelTextWeight" (ngModelChange)="setHeaderLabelTextWeight($event)">
1801
+ <option [ngValue]="undefined">Padrão</option>
1802
+ <option value="400">Normal</option>
1803
+ <option value="500">Médio</option>
1804
+ <option value="600">Seminegrito</option>
1805
+ <option value="700">Negrito</option>
1806
+ </select>
1807
+ </mat-form-field>
1808
+ <mat-form-field appearance="outline" class="field-span-2">
1809
+ <mat-label>Classe de tema</mat-label>
1810
+ <input matInput [(ngModel)]="appearance.themeClass" (ngModelChange)="onAppearanceChange()" placeholder="Ex.: theme-stepper-custom" />
1811
+ </mat-form-field>
1812
+ <mat-form-field appearance="outline">
1813
+ <mat-label>Conjunto de ícones</mat-label>
1814
+ <select matNativeControl [(ngModel)]="appearance.iconsSet" (ngModelChange)="onAppearanceChange()">
1815
+ <option [ngValue]="undefined">Material Icons (padrão)</option>
1816
+ <option value="material-symbols-outlined">Material Symbols (Outlined)</option>
1817
+ <option value="material-symbols-rounded">Material Symbols (Rounded)</option>
1818
+ <option value="material-symbols-sharp">Material Symbols (Sharp)</option>
1819
+ </select>
1820
+ </mat-form-field>
1885
1821
  </div>
1886
- <div class="icon-item">
1887
- <div class="icon-head">Ícone edição</div>
1888
- <button mat-stroked-button type="button" (click)="pickIcon('edit')">
1889
- <mat-icon *ngIf="icons.edit; else pick3" [praxisIcon]="icons.edit"></mat-icon>
1890
- <ng-template #pick3>Escolher</ng-template>
1891
- </button>
1822
+ <div class="inline-actions-grid icon-picker-grid">
1823
+ <div class="inline-action-item">
1824
+ <div class="section-title">Ícone do número</div>
1825
+ <button mat-stroked-button type="button" (click)="pickIcon('number')" aria-label="Escolher ícone do número">
1826
+ <mat-icon *ngIf="icons.number; else pick" [fontIcon]="icons.number"></mat-icon>
1827
+ <ng-template #pick>Escolher</ng-template>
1828
+ </button>
1829
+ </div>
1830
+ <div class="inline-action-item">
1831
+ <div class="section-title">Ícone concluído</div>
1832
+ <button mat-stroked-button type="button" (click)="pickIcon('done')" aria-label="Escolher ícone de concluído">
1833
+ <mat-icon *ngIf="icons.done; else pick2" [fontIcon]="icons.done"></mat-icon>
1834
+ <ng-template #pick2>Escolher</ng-template>
1835
+ </button>
1836
+ </div>
1837
+ <div class="inline-action-item">
1838
+ <div class="section-title">Ícone edição</div>
1839
+ <button mat-stroked-button type="button" (click)="pickIcon('edit')" aria-label="Escolher ícone de edição">
1840
+ <mat-icon *ngIf="icons.edit; else pick3" [fontIcon]="icons.edit"></mat-icon>
1841
+ <ng-template #pick3>Escolher</ng-template>
1842
+ </button>
1843
+ </div>
1844
+ <div class="inline-action-item">
1845
+ <div class="section-title">Ícone de erro</div>
1846
+ <button mat-stroked-button type="button" (click)="pickIcon('error')" aria-label="Escolher ícone de erro">
1847
+ <mat-icon *ngIf="icons.error; else pick4" [fontIcon]="icons.error"></mat-icon>
1848
+ <ng-template #pick4>Escolher</ng-template>
1849
+ </button>
1850
+ </div>
1892
1851
  </div>
1893
- <div class="icon-item">
1894
- <div class="icon-head">Ícone de erro</div>
1895
- <button mat-stroked-button type="button" (click)="pickIcon('error')">
1896
- <mat-icon *ngIf="icons.error; else pick4" [praxisIcon]="icons.error"></mat-icon>
1897
- <ng-template #pick4>Escolher</ng-template>
1898
- </button>
1852
+ <div class="icons-hint" *ngIf="symbolsLikelySelected.length && !appearance.iconsSet">
1853
+ <div class="muted">
1854
+ Dica: {{ symbolsLikelySelected.join(', ') }} são ícones do Material Symbols. Selecione um conjunto Symbols abaixo ou clique em
1855
+ <button mat-button color="primary" type="button" (click)="setIconsSetToSymbols()">Usar Material Symbols (Outlined)</button>.
1856
+ </div>
1899
1857
  </div>
1900
- </div>
1901
- <div class="icons-hint" *ngIf="symbolsLikelySelected.length && !appearance.iconsSet">
1902
- <div class="muted">
1903
- Dica: {{ symbolsLikelySelected.join(', ') }} são ícones do Material Symbols. Selecione um conjunto Symbols abaixo ou clique em
1904
- <button mat-button color="primary" type="button" (click)="setIconsSetToSymbols()">Usar Material Symbols (Outlined)</button>.
1858
+ <div class="pdx-appearance-actions">
1859
+ <button mat-stroked-button color="primary" type="button" (click)="applyPreset('neutral')">Preset: neutro</button>
1860
+ <button mat-stroked-button color="primary" type="button" (click)="applyPreset('primary')">Preset: primário</button>
1861
+ <button mat-stroked-button color="primary" type="button" (click)="applyPreset('high-contrast')">Preset: alto contraste</button>
1862
+ <button mat-button type="button" (click)="clearTokens()">Limpar tokens</button>
1905
1863
  </div>
1906
1864
  </div>
1907
- <div class="tokens-grid">
1908
- <div class="token-item" *ngFor="let key of stepperTokenKeys">
1909
- <mat-form-field appearance="outline" class="w-full">
1910
- <mat-label>{{ key }}</mat-label>
1911
- <input matInput [ngModel]="appearance.tokens?.[key]" (ngModelChange)="onTokenChange(key, $event)" placeholder="valor CSS ou var(--token)" />
1912
- </mat-form-field>
1865
+ <details class="disclosure">
1866
+ <summary>
1867
+ <span class="section-title">Tokens avançados e snippet SCSS</span>
1868
+ <span class="section-subtitle">Use quando precisar sair do ajuste rápido e controlar o tema com granularidade.</span>
1869
+ </summary>
1870
+ <div class="disclosure-body">
1871
+ <div class="tokens-grid">
1872
+ <div class="token-item" *ngFor="let key of stepperTokenKeys">
1873
+ <mat-form-field appearance="outline" class="w-full">
1874
+ <mat-label>{{ key }}</mat-label>
1875
+ <input matInput [ngModel]="appearance.tokens?.[key]" (ngModelChange)="onTokenChange(key, $event)" placeholder="valor CSS ou var(--token)" />
1876
+ </mat-form-field>
1877
+ </div>
1878
+ </div>
1879
+ <div class="code-card">
1880
+ <div class="code-head">Snippet SCSS</div>
1881
+ <pre class="code"><code>{{ scssSnippet() }}</code></pre>
1882
+ </div>
1913
1883
  </div>
1914
- </div>
1915
- <div class="pdx-appearance-actions">
1916
- <button mat-stroked-button color="primary" type="button" (click)="applyPreset('neutral')">Preset: neutro</button>
1917
- <button mat-stroked-button color="primary" type="button" (click)="applyPreset('primary')">Preset: primário</button>
1918
- <button mat-stroked-button color="primary" type="button" (click)="applyPreset('high-contrast')">Preset: alto contraste</button>
1919
- <button mat-button type="button" (click)="clearTokens()">Limpar tokens</button>
1920
- </div>
1921
- <mat-card appearance="outlined" class="code-card">
1922
- <div class="code-head">Snippet SCSS</div>
1923
- <pre class="code"><code>{{ scssSnippet() }}</code></pre>
1924
- </mat-card>
1884
+ </details>
1925
1885
  </div>
1926
1886
  </mat-tab>
1927
1887
  </mat-tab-group>
1928
1888
  </div>
1929
- `, isInline: true, styles: [".pdx-editor{display:grid;gap:16px}.pdx-editor .mat-mdc-form-field{width:100%}.pdx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}.pdx-toggles{display:flex;gap:12px;flex-wrap:wrap}.tab-pad{padding:12px;display:grid;gap:12px;background:var(--md-sys-color-surface);border:1px solid var(--md-sys-color-outline-variant);border-radius:12px}.help{color:var(--md-sys-color-on-surface-variant);font-size:13px}.quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:6px}.icons-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:8px 0}.icon-item{display:grid;gap:6px;align-content:start}.icons-hint{margin-top:4px}.pdx-steps{display:grid;gap:8px}.pdx-steps-header{display:flex;justify-content:space-between;align-items:center}.pdx-step-list{display:grid;gap:8px}.pdx-step-item{display:grid;grid-template-columns:24px 1fr auto;gap:8px;align-items:start;padding:8px;border:1px solid var(--md-sys-color-outline-variant);border-radius:10px;background:var(--md-sys-color-surface);cursor:pointer}.pdx-step-item.active{border-color:var(--md-sys-color-primary);box-shadow:var(--mat-elevation-level2)}.drag-handle{display:flex;align-items:center;color:var(--md-sys-color-on-surface-variant)}.pdx-fields{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}.pdx-flag-group{display:flex;gap:10px;align-items:center}.pdx-active-step{display:grid;gap:12px;padding-top:8px;border-top:1px dashed var(--md-sys-color-outline-variant)}.pdx-active-step .hdr{display:flex;gap:12px;align-items:center;justify-content:space-between}.pdx-content-editor{display:grid;gap:16px}.section{display:grid;gap:8px;padding:12px;border:1px solid var(--md-sys-color-outline-variant);border-radius:12px;background:var(--md-sys-color-surface-container-lowest)}.section-body{display:grid;gap:8px}.section-title{font-weight:600;opacity:.85}.section-subtitle{font-size:12px;color:var(--md-sys-color-on-surface-variant)}.section-head{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}.editorial-section{background:var(--md-sys-color-surface-container-low);border-color:var(--md-sys-color-primary)}.mini-card{display:block}.widget-list{display:grid;gap:8px}.widget-item{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:8px;padding:8px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;background:var(--md-sys-color-surface)}.widget-item .info{display:grid;gap:2px;min-width:0}.widget-item .info .name{font-weight:600}.widget-item .info .sub{font-size:12px;color:var(--md-sys-color-on-surface-variant)}.widget-item .info .meta{font-size:11px;color:var(--md-sys-color-on-surface-variant);font-family:var(--md-ref-typeface-plain, monospace);opacity:.85}.widget-item .actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.editorial-item{align-items:start}.editorial-item .actions{justify-content:flex-start}.cta-row{display:flex;gap:8px;align-items:center}.spacer{flex:1 1 auto}.muted{color:var(--md-sys-color-on-surface-variant)}.cta-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-bottom:8px}.cta-card{display:grid;gap:8px;padding:12px;border-radius:12px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface)}.cta-card .cta-head{display:flex;align-items:center;gap:8px}.cta-card .cta-title{font-weight:600}.cta-card .cta-desc{font-size:12px;color:var(--md-sys-color-on-surface-variant)}.cta-card .cta-actions{display:flex;gap:8px;align-items:center}.tokens-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:8px 0}.token-item{display:contents}.pdx-appearance{margin-top:8px;display:grid;gap:8px}.pdx-appearance-actions{display:flex;gap:8px;flex-wrap:wrap}.zone-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}.zone-card{display:grid;gap:8px;padding:12px;border-radius:10px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface)}.zone-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.zone-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.zone-title{font-weight:600}.zone-count{font-size:12px;padding:2px 8px;border-radius:999px;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface)}.advanced-list{margin-top:4px}.code-card{margin-top:8px}.code-head{font-weight:600;margin-bottom:4px}.code{white-space:pre;overflow:auto;background:var(--md-sys-color-surface-container-highest)}.w-full{grid-column:1 / -1}.min-180{min-width:180px}.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}@media(max-width:900px){.pdx-step-item{grid-template-columns:20px 1fr}.pdx-actions{grid-column:1 / -1;justify-self:end}.widget-item{grid-template-columns:20px 1fr}.widget-item .actions{grid-column:1 / -1;justify-content:flex-start}}@media(max-width:640px){.pdx-active-step .hdr{align-items:flex-start;flex-direction:column}.pdx-flag-group{flex-direction:column;align-items:flex-start}.zone-head{align-items:flex-start;flex-direction:column}.zone-actions{justify-content:flex-start}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.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: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.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: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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: DragDropModule }, { kind: "directive", type: i8.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i8.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i8.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i10.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i10.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i10.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "component", type: i10.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i10.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i10.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i11.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i11.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i12.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i12.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i12.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i13.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i13.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }] });
1889
+ `, isInline: true, styles: [".pdx-editor{display:grid;gap:16px}.pdx-editor .mat-mdc-form-field{width:100%}.pdx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}.pdx-toggles{display:flex;gap:12px;flex-wrap:wrap}.tab-pad{padding:16px;display:grid;gap:16px;background:var(--md-sys-color-surface);border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 78%,transparent);border-radius:16px}.help{color:var(--md-sys-color-on-surface-variant);font-size:13px}.editor-intro{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:4px 2px 2px}.editor-intro-copy{display:grid;gap:6px;max-width:760px}.eyebrow{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant);font-weight:600}.editor-title{font-size:22px;line-height:1.15;font-weight:650;color:var(--md-sys-color-on-surface)}.editor-subtitle{max-width:72ch;color:var(--md-sys-color-on-surface-variant);line-height:1.45;font-size:14px}.editor-intro-meta{display:flex;gap:8px;align-items:flex-start}.meta-pill{display:grid;gap:2px;min-width:88px;padding:10px 12px;border-radius:14px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 70%,transparent);background:var(--md-sys-color-surface-container-low)}.meta-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--md-sys-color-on-surface-variant)}.quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:6px}.icons-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:8px 0}.icon-item{display:grid;gap:6px;align-content:start}.icons-hint{margin-top:4px}.settings-group{display:grid;gap:14px;padding:2px 0 4px}.settings-group+.settings-group,.settings-group+.disclosure,.disclosure+.settings-group{padding-top:18px;border-top:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 60%,transparent)}.group-head{display:grid;gap:4px;max-width:72ch}.inline-actions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;align-items:start}.inline-action-item{display:grid;gap:8px;align-content:start;min-width:0}.pdx-steps{display:grid;gap:12px;padding:4px 0 2px}.steps-workspace{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:24px;align-items:start}.pdx-steps-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.pdx-step-list{display:grid;gap:10px}.pdx-step-item{display:grid;grid-template-columns:20px 1fr auto;gap:10px;align-items:start;padding:12px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 68%,transparent);border-radius:14px;background:var(--md-sys-color-surface);cursor:pointer;outline:none}.pdx-step-item.active{border-color:color-mix(in srgb,var(--md-sys-color-primary) 55%,var(--md-sys-color-outline-variant));background:color-mix(in srgb,var(--md-sys-color-primary-container) 26%,var(--md-sys-color-surface));box-shadow:none}.pdx-step-item:focus-visible{border-color:var(--md-sys-color-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--md-sys-color-primary) 22%,transparent)}.drag-handle{display:flex;align-items:center;color:var(--md-sys-color-on-surface-variant)}.step-summary{display:grid;gap:8px;min-width:0}.step-summary-head{display:grid;gap:2px}.step-summary-index{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--md-sys-color-on-surface-variant);font-weight:600}.step-summary-title{font-size:15px;line-height:1.3;font-weight:600;color:var(--md-sys-color-on-surface)}.step-summary-sub{font-size:12px;color:var(--md-sys-color-on-surface-variant);font-family:var(--md-ref-typeface-plain, monospace);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.step-summary-flags{display:flex;gap:6px;flex-wrap:wrap}.summary-chip{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border-radius:999px;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface-variant);font-size:11px;font-weight:600}.summary-chip-warn{background:color-mix(in srgb,var(--md-sys-color-error-container) 60%,transparent);color:var(--md-sys-color-on-error-container)}.pdx-active-step{display:grid;gap:18px;min-width:0}.pdx-active-step .hdr{display:flex;gap:12px;align-items:flex-start;justify-content:space-between}.active-step-head{display:grid;gap:4px}.pdx-content-editor{display:grid;gap:16px}.section{display:grid;gap:12px;padding:0;border:none;border-radius:0;background:transparent}.section-body{display:grid;gap:12px}.section-title{font-weight:600;font-size:15px;color:var(--md-sys-color-on-surface)}.section-subtitle{font-size:13px;color:var(--md-sys-color-on-surface-variant);line-height:1.45}.section-head{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}.editorial-section{padding-bottom:6px;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 68%,transparent)}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.field-span-2{grid-column:span 2}.toggle-group{display:flex;gap:10px;flex-wrap:wrap;padding-top:4px}.disclosure{padding:0 0 12px;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 62%,transparent)}.disclosure summary{list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:16px;cursor:pointer;padding:0;position:relative}.disclosure summary::-webkit-details-marker{display:none}.disclosure summary:after{content:\"expand_more\";font-family:Material Icons;font-size:18px;color:var(--md-sys-color-on-surface-variant);transition:transform .16s ease}.disclosure[open] summary:after{transform:rotate(180deg)}.disclosure summary:focus-visible{outline:2px solid color-mix(in srgb,var(--md-sys-color-primary) 58%,transparent);outline-offset:4px;border-radius:8px}.disclosure-body{padding-top:12px}.widget-list{display:grid;gap:8px}.widget-item{display:grid;grid-template-columns:20px 1fr auto;align-items:start;gap:12px;padding:10px 0;border:none;border-radius:0;background:transparent;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.widget-item .info{display:grid;gap:2px;min-width:0}.widget-item .info .name{font-weight:600}.widget-item .info .sub{font-size:12px;color:var(--md-sys-color-on-surface-variant);line-height:1.45}.widget-item .info .meta{margin-top:2px;font-size:11px;color:var(--md-sys-color-on-surface-variant);font-family:var(--md-ref-typeface-plain, monospace);opacity:.85}.widget-item .actions{display:flex;gap:2px;flex-wrap:nowrap;justify-content:flex-end;align-items:flex-start;opacity:.92}.editorial-item{align-items:start}.editorial-item .actions{justify-content:flex-end}.cta-row{display:flex;gap:8px;align-items:center}.spacer{flex:1 1 auto}.muted{color:var(--md-sys-color-on-surface-variant)}.cta-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin-bottom:4px}.cta-row-item{display:grid;gap:10px;padding:12px 0;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.tokens-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:8px 0}.token-item{display:contents}.pdx-appearance{margin-top:8px;display:grid;gap:8px}.pdx-appearance-actions{display:flex;gap:8px;flex-wrap:wrap}.zone-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}.zone-column{display:grid;gap:10px;min-width:0}.zone-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.zone-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.zone-title{font-weight:600}.zone-column+.zone-column{padding-left:16px;border-left:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.zone-count{font-size:12px;padding:2px 8px;border-radius:999px;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface)}.advanced-list{margin-top:4px}.form-row-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.form-row-main{display:flex;align-items:center;gap:12px;min-width:0}.form-row-actions{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}.code-card{margin-top:8px}.code-head{font-weight:600;margin-bottom:4px}.code{white-space:pre;overflow:auto;background:var(--md-sys-color-surface-container-highest)}.w-full{grid-column:1 / -1}.min-180{min-width:180px}.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}.cta-row-item .cta-head{display:grid;grid-template-columns:20px 1fr;align-items:start;gap:10px}.cta-row-item .cta-title{font-weight:600;color:var(--md-sys-color-on-surface)}.cta-row-item .cta-desc{font-size:12px;color:var(--md-sys-color-on-surface-variant);line-height:1.45;margin-top:2px}.cta-row-item .cta-actions{display:flex;gap:8px;align-items:center}.widget-item:last-child,.cta-row-item:last-child,.form-row-card:last-child{border-bottom:none}@media(max-width:900px){.editor-intro{flex-direction:column}.steps-workspace{grid-template-columns:1fr;gap:20px}.pdx-step-item{grid-template-columns:20px 1fr}.pdx-actions{grid-column:1 / -1;justify-self:end}.widget-item{grid-template-columns:20px 1fr}.widget-item .actions{grid-column:1 / -1;justify-content:flex-end}.form-row-card{flex-direction:column;align-items:flex-start}.form-row-actions{justify-content:flex-start}.zone-column+.zone-column{padding-left:0;border-left:none;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}}@media(max-width:640px){.tab-pad{padding:14px}.editor-title{font-size:20px}.pdx-active-step .hdr{align-items:flex-start;flex-direction:column}.detail-grid{grid-template-columns:1fr}.field-span-2{grid-column:auto}.toggle-group{flex-direction:column;align-items:flex-start}.zone-head{align-items:flex-start;flex-direction:column}.zone-actions,.widget-item .actions{justify-content:flex-start}.disclosure summary{flex-direction:column;align-items:flex-start}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.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: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.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: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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: DragDropModule }, { kind: "directive", type: i8.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i8.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i8.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i10.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i10.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i11.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i11.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }] });
1930
1890
  }
1931
1891
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisStepperConfigEditor, decorators: [{
1932
1892
  type: Component,
@@ -1941,9 +1901,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
1941
1901
  MatSlideToggleModule,
1942
1902
  DragDropModule,
1943
1903
  MatTooltipModule,
1944
- MatChipsModule,
1945
- MatCardModule,
1946
- MatButtonToggleModule,
1947
1904
  MatDialogModule,
1948
1905
  MatMenuModule,
1949
1906
  MatTabsModule,
@@ -1952,305 +1909,215 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
1952
1909
  <mat-tab-group>
1953
1910
  <mat-tab label="Geral">
1954
1911
  <div class="tab-pad">
1955
- <div class="help">Configure o funcionamento e a aparência básica do passo a passo.</div>
1956
- <div class="pdx-grid">
1957
- <mat-form-field appearance="outline">
1958
- <mat-label>Orientação</mat-label>
1959
- <select matNativeControl [(ngModel)]="config.orientation" (ngModelChange)="markDirty()">
1960
- <option value="horizontal">Horizontal</option>
1961
- <option value="vertical">Vertical</option>
1962
- </select>
1963
- <button
1964
- mat-icon-button
1965
- matSuffix
1966
- class="help-icon-button"
1967
- type="button"
1968
- [matTooltip]="'Horizontal: cabeçalho no topo • Vertical: lista à esquerda'"
1969
- matTooltipPosition="above"
1970
- >
1971
- <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
1972
- </button>
1973
- </mat-form-field>
1974
- <mat-form-field appearance="outline">
1975
- <mat-label>Posição dos títulos</mat-label>
1976
- <select matNativeControl [(ngModel)]="config.headerPosition" (ngModelChange)="markDirty()">
1977
- <option value="top">Acima</option>
1978
- <option value="bottom">Abaixo</option>
1979
- </select>
1980
- <button
1981
- mat-icon-button
1982
- matSuffix
1983
- class="help-icon-button"
1984
- type="button"
1985
- [matTooltip]="'Válido na orientação horizontal'"
1986
- matTooltipPosition="above"
1987
- >
1988
- <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
1989
- </button>
1990
- </mat-form-field>
1991
- <mat-form-field appearance="outline">
1992
- <mat-label>Posição do rótulo</mat-label>
1993
- <select matNativeControl [(ngModel)]="config.labelPosition" (ngModelChange)="markDirty()" [disabled]="config.orientation !== 'horizontal'">
1994
- <option value="end">Ao lado</option>
1995
- <option value="bottom">Abaixo</option>
1996
- </select>
1997
- <button
1998
- mat-icon-button
1999
- matSuffix
2000
- class="help-icon-button"
2001
- type="button"
2002
- [matTooltip]="'Como o texto aparece no cabeçalho'"
2003
- matTooltipPosition="above"
2004
- >
2005
- <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
2006
- </button>
2007
- </mat-form-field>
2008
- <mat-form-field appearance="outline">
2009
- <mat-label>Cor</mat-label>
2010
- <select matNativeControl [(ngModel)]="config.color" (ngModelChange)="markDirty()">
2011
- <option [ngValue]="undefined">Padrão</option>
2012
- <option value="primary">Primária</option>
2013
- <option value="accent">Acento</option>
2014
- <option value="warn">Alerta</option>
2015
- </select>
2016
- <button
2017
- mat-icon-button
2018
- matSuffix
2019
- class="help-icon-button"
2020
- type="button"
2021
- [matTooltip]="'Aplicável a temas Material 2 (M2)'"
2022
- matTooltipPosition="above"
2023
- >
2024
- <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
2025
- </button>
2026
- </mat-form-field>
2027
- <mat-form-field appearance="outline">
2028
- <mat-label>Duração da animação</mat-label>
2029
- <input matInput [(ngModel)]="config.animationDuration" (ngModelChange)="markDirty()" placeholder="Ex.: 300ms" />
2030
- <button
2031
- mat-icon-button
2032
- matSuffix
2033
- class="help-icon-button"
2034
- type="button"
2035
- [matTooltip]="'Tempo da transição entre etapas'"
2036
- matTooltipPosition="above"
2037
- >
2038
- <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
2039
- </button>
2040
- </mat-form-field>
2041
- <mat-form-field appearance="outline">
2042
- <mat-label>Etapa selecionada</mat-label>
2043
- <input matInput type="number" [(ngModel)]="config.selectedIndex" (ngModelChange)="markDirty()" />
2044
- <button
2045
- mat-icon-button
2046
- matSuffix
2047
- class="help-icon-button"
2048
- type="button"
2049
- [matTooltip]="'Índice inicia em 0 (primeira etapa)'"
2050
- matTooltipPosition="above"
2051
- >
2052
- <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
2053
- </button>
2054
- </mat-form-field>
2055
- <mat-form-field appearance="outline">
2056
- <mat-label>Densidade</mat-label>
2057
- <select matNativeControl [(ngModel)]="config.density" (ngModelChange)="markDirty()">
2058
- <option [ngValue]="undefined">Padrão</option>
2059
- <option value="comfortable">Confortável</option>
2060
- <option value="compact">Compacta</option>
2061
- </select>
2062
- <button
2063
- mat-icon-button
2064
- matSuffix
2065
- class="help-icon-button"
2066
- type="button"
2067
- [matTooltip]="'Controla espaçamentos e alturas'"
2068
- matTooltipPosition="above"
2069
- >
2070
- <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
2071
- </button>
2072
- </mat-form-field>
2073
- <mat-form-field appearance="outline" class="w-full">
2074
- <mat-label>Classe do stepper (opcional)</mat-label>
2075
- <input matInput [(ngModel)]="config.stepperClass" (ngModelChange)="markDirty()" placeholder="Ex.: meu-stepper" />
2076
- <button
2077
- mat-icon-button
2078
- matSuffix
2079
- class="help-icon-button"
2080
- type="button"
2081
- [matTooltip]="'Permite estilizar com CSS escopado'"
2082
- matTooltipPosition="above"
2083
- >
2084
- <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
2085
- </button>
2086
- </mat-form-field>
2087
- <mat-form-field appearance="outline" class="w-full">
2088
- <mat-label>Classe do cabeçalho (opcional)</mat-label>
2089
- <input matInput [(ngModel)]="config.headerClass" (ngModelChange)="markDirty()" placeholder="Ex.: stepper-header" />
2090
- <button
2091
- mat-icon-button
2092
- matSuffix
2093
- class="help-icon-button"
2094
- type="button"
2095
- [matTooltip]="'Use para ajustes finos de aparência'"
2096
- matTooltipPosition="above"
2097
- >
2098
- <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
2099
- </button>
2100
- </mat-form-field>
2101
- <mat-form-field appearance="outline" class="w-full">
2102
- <mat-label>Classe do conteúdo (opcional)</mat-label>
2103
- <input matInput [(ngModel)]="config.contentClass" (ngModelChange)="markDirty()" placeholder="Ex.: stepper-content" />
2104
- <button
2105
- mat-icon-button
2106
- matSuffix
2107
- class="help-icon-button"
2108
- type="button"
2109
- [matTooltip]="'Aplica uma classe à área de conteúdo'"
2110
- matTooltipPosition="above"
2111
- >
2112
- <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
2113
- </button>
2114
- </mat-form-field>
1912
+ <div class="editor-intro">
1913
+ <div class="editor-intro-copy">
1914
+ <div class="eyebrow">Fundamentos</div>
1915
+ <div class="editor-title">Defina o comportamento base do stepper</div>
1916
+ <div class="editor-subtitle">Ajuste orientação, densidade, animação e classes utilitárias sem misturar decisões estruturais com customização avançada.</div>
1917
+ </div>
2115
1918
  </div>
2116
- <div class="pdx-toggles">
2117
- <mat-slide-toggle [(ngModel)]="config.linear" (ngModelChange)="markDirty()">Respeitar ordem (linear)</mat-slide-toggle>
2118
- <mat-slide-toggle [(ngModel)]="config.disableRipple" (ngModelChange)="markDirty()">Desativar efeitos de clique</mat-slide-toggle>
1919
+ <div class="settings-group">
1920
+ <div class="group-head">
1921
+ <div class="section-title">Layout e navegação</div>
1922
+ <div class="section-subtitle">Controla como as etapas aparecem e como o usuário percorre o fluxo.</div>
1923
+ </div>
1924
+ <div class="pdx-grid">
1925
+ <mat-form-field appearance="outline">
1926
+ <mat-label>Orientação</mat-label>
1927
+ <select matNativeControl [(ngModel)]="config.orientation" (ngModelChange)="markDirty()">
1928
+ <option value="horizontal">Horizontal</option>
1929
+ <option value="vertical">Vertical</option>
1930
+ </select>
1931
+ </mat-form-field>
1932
+ <mat-form-field appearance="outline">
1933
+ <mat-label>Posição dos títulos</mat-label>
1934
+ <select matNativeControl [(ngModel)]="config.headerPosition" (ngModelChange)="markDirty()">
1935
+ <option value="top">Acima</option>
1936
+ <option value="bottom">Abaixo</option>
1937
+ </select>
1938
+ </mat-form-field>
1939
+ <mat-form-field appearance="outline">
1940
+ <mat-label>Posição do rótulo</mat-label>
1941
+ <select matNativeControl [(ngModel)]="config.labelPosition" (ngModelChange)="markDirty()" [disabled]="config.orientation !== 'horizontal'">
1942
+ <option value="end">Ao lado</option>
1943
+ <option value="bottom">Abaixo</option>
1944
+ </select>
1945
+ </mat-form-field>
1946
+ <mat-form-field appearance="outline">
1947
+ <mat-label>Densidade</mat-label>
1948
+ <select matNativeControl [(ngModel)]="config.density" (ngModelChange)="markDirty()">
1949
+ <option [ngValue]="undefined">Padrão</option>
1950
+ <option value="comfortable">Confortável</option>
1951
+ <option value="compact">Compacta</option>
1952
+ </select>
1953
+ </mat-form-field>
1954
+ <mat-form-field appearance="outline">
1955
+ <mat-label>Duração da animação</mat-label>
1956
+ <input matInput [(ngModel)]="config.animationDuration" (ngModelChange)="markDirty()" placeholder="Ex.: 300ms" />
1957
+ </mat-form-field>
1958
+ <mat-form-field appearance="outline">
1959
+ <mat-label>Etapa inicial</mat-label>
1960
+ <input matInput type="number" [(ngModel)]="config.selectedIndex" (ngModelChange)="markDirty()" />
1961
+ </mat-form-field>
1962
+ </div>
1963
+ <div class="toggle-group">
1964
+ <mat-slide-toggle [(ngModel)]="config.linear" (ngModelChange)="markDirty()">Respeitar ordem (linear)</mat-slide-toggle>
1965
+ <mat-slide-toggle [(ngModel)]="config.disableRipple" (ngModelChange)="markDirty()">Desativar efeitos de clique</mat-slide-toggle>
1966
+ </div>
2119
1967
  </div>
1968
+ <details class="disclosure">
1969
+ <summary>
1970
+ <span class="section-title">Classes e integração visual</span>
1971
+ <span class="section-subtitle">Use apenas quando precisar aplicar CSS escopado no host.</span>
1972
+ </summary>
1973
+ <div class="detail-grid disclosure-body">
1974
+ <mat-form-field appearance="outline" class="field-span-2">
1975
+ <mat-label>Classe do stepper</mat-label>
1976
+ <input matInput [(ngModel)]="config.stepperClass" (ngModelChange)="markDirty()" placeholder="Ex.: meu-stepper" />
1977
+ </mat-form-field>
1978
+ <mat-form-field appearance="outline">
1979
+ <mat-label>Classe do cabeçalho</mat-label>
1980
+ <input matInput [(ngModel)]="config.headerClass" (ngModelChange)="markDirty()" placeholder="Ex.: stepper-header" />
1981
+ </mat-form-field>
1982
+ <mat-form-field appearance="outline">
1983
+ <mat-label>Classe do conteúdo</mat-label>
1984
+ <input matInput [(ngModel)]="config.contentClass" (ngModelChange)="markDirty()" placeholder="Ex.: stepper-content" />
1985
+ </mat-form-field>
1986
+ </div>
1987
+ </details>
2120
1988
  </div>
2121
1989
  </mat-tab>
2122
1990
 
2123
1991
  <mat-tab label="Etapas">
2124
1992
  <div class="tab-pad">
2125
- <div class="help">Gerencie as etapas: nomes, mensagens e conteúdo. Arraste para reordenar.</div>
1993
+ <div class="editor-intro">
1994
+ <div class="editor-intro-copy">
1995
+ <div class="eyebrow">Estrutura do fluxo</div>
1996
+ <div class="editor-title">Defina a narrativa de cada etapa</div>
1997
+ <div class="editor-subtitle">Organize títulos, estados e conteúdo da etapa sem misturar configuração técnica com ações de montagem.</div>
1998
+ </div>
1999
+ <div class="editor-intro-meta">
2000
+ <div class="meta-pill">
2001
+ <span class="meta-label">Etapas</span>
2002
+ <strong>{{ config.steps.length }}</strong>
2003
+ </div>
2004
+ </div>
2005
+ </div>
2126
2006
  <div class="pdx-steps">
2127
2007
  <div class="pdx-steps-header">
2128
- <div class="title">Etapas ({{ config.steps.length }})</div>
2129
- <button mat-button (click)="addStep()"><mat-icon [praxisIcon]="'add'"></mat-icon>Adicionar etapa</button>
2008
+ <div>
2009
+ <div class="section-title">Mapa de etapas</div>
2010
+ <div class="section-subtitle">Arraste para reordenar e selecione uma etapa para editar o conteúdo.</div>
2011
+ </div>
2012
+ <button mat-flat-button color="primary" (click)="addStep()"><mat-icon [praxisIcon]="'add'"></mat-icon>Adicionar etapa</button>
2130
2013
  </div>
2131
- <div cdkDropList (cdkDropListDropped)="drop($event)" class="pdx-step-list">
2132
- <div class="pdx-step-item" *ngFor="let s of config.steps; let i = index" cdkDrag [class.active]="activeIndex === i" (click)="setActive(i)">
2133
- <div class="drag-handle" cdkDragHandle><mat-icon [praxisIcon]="'drag_indicator'"></mat-icon></div>
2134
- <div class="pdx-fields">
2135
- <mat-form-field appearance="outline" class="min-180">
2136
- <mat-label>Título da etapa</mat-label>
2137
- <input matInput [(ngModel)]="s.label" (ngModelChange)="markDirty()" />
2138
- <button
2139
- mat-icon-button
2140
- matSuffix
2141
- class="help-icon-button"
2142
- type="button"
2143
- [matTooltip]="'Como aparecerá no cabeçalho'"
2144
- matTooltipPosition="above"
2145
- >
2146
- <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
2147
- </button>
2148
- </mat-form-field>
2149
- <mat-form-field appearance="outline">
2150
- <mat-label>Identificador (opcional)</mat-label>
2151
- <input matInput [(ngModel)]="s.id" (ngModelChange)="markDirty()" />
2152
- <button
2153
- mat-icon-button
2154
- matSuffix
2155
- class="help-icon-button"
2156
- type="button"
2157
- [matTooltip]="'Útil para automações'"
2158
- matTooltipPosition="above"
2159
- >
2160
- <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
2161
- </button>
2162
- </mat-form-field>
2163
- <mat-form-field appearance="outline">
2164
- <mat-label>Texto alternativo (acessibilidade)</mat-label>
2165
- <input matInput [(ngModel)]="s.ariaLabel" (ngModelChange)="markDirty()" />
2166
- <button
2167
- mat-icon-button
2168
- matSuffix
2169
- class="help-icon-button"
2170
- type="button"
2171
- [matTooltip]="'Lido por leitores de tela'"
2172
- matTooltipPosition="above"
2173
- >
2174
- <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
2175
- </button>
2176
- </mat-form-field>
2177
- <mat-form-field appearance="outline">
2178
- <mat-label>ID que descreve (opcional)</mat-label>
2179
- <input matInput [(ngModel)]="s.ariaLabelledby" (ngModelChange)="markDirty()" />
2180
- <button
2181
- mat-icon-button
2182
- matSuffix
2183
- class="help-icon-button"
2184
- type="button"
2185
- [matTooltip]="'ID de um elemento que descreve a etapa'"
2186
- matTooltipPosition="above"
2187
- >
2188
- <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
2189
- </button>
2190
- </mat-form-field>
2191
- <mat-form-field appearance="outline">
2192
- <mat-label>Ícone/estado do marcador</mat-label>
2193
- <input matInput [(ngModel)]="s.state" (ngModelChange)="markDirty()" placeholder="Ex.: number, done, edit" />
2194
- <button
2195
- mat-icon-button
2196
- matSuffix
2197
- class="help-icon-button"
2198
- type="button"
2199
- [matTooltip]="'Controla o ícone do passo (quando aplicável)'"
2200
- matTooltipPosition="above"
2201
- >
2202
- <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
2203
- </button>
2204
- </mat-form-field>
2205
- <mat-form-field appearance="outline">
2206
- <mat-label>Mensagem de erro</mat-label>
2207
- <input matInput [(ngModel)]="s.errorMessage" (ngModelChange)="markDirty()" />
2208
- <button
2209
- mat-icon-button
2210
- matSuffix
2211
- class="help-icon-button"
2212
- type="button"
2213
- [matTooltip]="'Mostrada quando há erro na etapa'"
2214
- matTooltipPosition="above"
2215
- >
2216
- <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
2014
+ <div class="steps-workspace" *ngIf="activeStep as step; else noSteps">
2015
+ <div
2016
+ cdkDropList
2017
+ role="listbox"
2018
+ aria-label="Lista de etapas"
2019
+ (cdkDropListDropped)="drop($event)"
2020
+ class="pdx-step-list">
2021
+ <div
2022
+ class="pdx-step-item"
2023
+ *ngFor="let s of config.steps; let i = index"
2024
+ cdkDrag
2025
+ role="option"
2026
+ [attr.aria-selected]="activeStep === s"
2027
+ [attr.tabindex]="activeStep === s ? 0 : -1"
2028
+ [class.active]="activeStep === s"
2029
+ (click)="setActive(s)"
2030
+ (keydown.enter)="onStepItemEnter($event, s)"
2031
+ (keydown.space)="onStepItemSpace($event, s)"
2032
+ (keydown.arrowdown)="focusAdjacentStep($event, i, 1)"
2033
+ (keydown.arrowup)="focusAdjacentStep($event, i, -1)">
2034
+ <div class="drag-handle" cdkDragHandle><mat-icon [praxisIcon]="'drag_indicator'"></mat-icon></div>
2035
+ <div class="step-summary">
2036
+ <div class="step-summary-head">
2037
+ <div class="step-summary-index">Etapa {{ i + 1 }}</div>
2038
+ <div class="step-summary-title">{{ s.label || 'Sem título' }}</div>
2039
+ </div>
2040
+ <div class="step-summary-sub">{{ s.id || 'Sem identificador' }}</div>
2041
+ <div class="step-summary-flags">
2042
+ <span class="summary-chip" *ngIf="s.optional">Opcional</span>
2043
+ <span class="summary-chip" *ngIf="s.completed">Concluída</span>
2044
+ <span class="summary-chip summary-chip-warn" *ngIf="s.hasError">Erro</span>
2045
+ <span class="summary-chip" *ngIf="s.form">Formulário</span>
2046
+ </div>
2047
+ </div>
2048
+ <div class="pdx-actions">
2049
+ <button mat-icon-button color="warn" (click)="removeStep(i); $event.stopPropagation()" matTooltip="Remover" [attr.aria-label]="'Remover etapa ' + (s.label || (i + 1))">
2050
+ <mat-icon [praxisIcon]="'delete'"></mat-icon>
2217
2051
  </button>
2218
- </mat-form-field>
2219
- <div class="pdx-flag-group">
2220
- <mat-slide-toggle [(ngModel)]="s.optional" (ngModelChange)="markDirty()">Etapa opcional</mat-slide-toggle>
2221
- <mat-slide-toggle [(ngModel)]="s.editable" (ngModelChange)="markDirty()">Permitir voltar e editar</mat-slide-toggle>
2222
- <mat-slide-toggle [(ngModel)]="s.completed" (ngModelChange)="markDirty()">Marcar como concluída</mat-slide-toggle>
2223
- <mat-slide-toggle [(ngModel)]="s.hasError" (ngModelChange)="markDirty()">Marcar como com erro</mat-slide-toggle>
2224
2052
  </div>
2225
2053
  </div>
2226
- <div class="pdx-actions">
2227
- <button mat-icon-button color="warn" (click)="removeStep(i)" matTooltip="Remover">
2228
- <mat-icon [praxisIcon]="'delete'"></mat-icon>
2229
- </button>
2230
- </div>
2231
2054
  </div>
2232
- </div>
2233
- </div>
2234
2055
 
2235
- <div class="pdx-active-step" *ngIf="activeStep as step; else noSteps">
2236
- <div class="hdr">
2237
- <div class="title">Editando: {{ step.label }}</div>
2238
- <mat-button-toggle-group [(ngModel)]="activeIndex" (ngModelChange)="onActiveIndexChange()" [hideSingleSelectionIndicator]="true">
2239
- <mat-button-toggle *ngFor="let s of config.steps; let i = index" [value]="i">{{ i + 1 }}</mat-button-toggle>
2240
- </mat-button-toggle-group>
2241
- </div>
2056
+ <div class="pdx-active-step">
2057
+ <div class="hdr">
2058
+ <div class="active-step-head">
2059
+ <div class="eyebrow">Etapa selecionada</div>
2060
+ <div class="title">Editando: {{ step.label }}</div>
2061
+ <div class="section-subtitle">Ajuste conteúdo principal primeiro. Configurações secundárias ficam recolhidas para reduzir ruído.</div>
2062
+ </div>
2063
+ </div>
2064
+
2065
+ <div class="section">
2066
+ <div class="section-title">Dados principais</div>
2067
+ <div class="detail-grid">
2068
+ <mat-form-field appearance="outline" class="field-span-2">
2069
+ <mat-label>Título da etapa</mat-label>
2070
+ <input matInput [(ngModel)]="step.label" (ngModelChange)="markDirty()" />
2071
+ </mat-form-field>
2072
+ <mat-form-field appearance="outline">
2073
+ <mat-label>Identificador</mat-label>
2074
+ <input matInput [(ngModel)]="step.id" (ngModelChange)="markDirty()" />
2075
+ </mat-form-field>
2076
+ <mat-form-field appearance="outline">
2077
+ <mat-label>Ícone ou estado</mat-label>
2078
+ <input matInput [(ngModel)]="step.state" (ngModelChange)="markDirty()" placeholder="Ex.: number, done, edit" />
2079
+ </mat-form-field>
2080
+ <mat-form-field appearance="outline" class="field-span-2">
2081
+ <mat-label>Mensagem de erro</mat-label>
2082
+ <input matInput [(ngModel)]="step.errorMessage" (ngModelChange)="markDirty()" />
2083
+ </mat-form-field>
2084
+ </div>
2085
+ <div class="toggle-group">
2086
+ <mat-slide-toggle [(ngModel)]="step.optional" (ngModelChange)="markDirty()">Etapa opcional</mat-slide-toggle>
2087
+ <mat-slide-toggle [(ngModel)]="step.editable" (ngModelChange)="markDirty()">Permitir voltar e editar</mat-slide-toggle>
2088
+ <mat-slide-toggle [(ngModel)]="step.completed" (ngModelChange)="markDirty()">Marcar como concluída</mat-slide-toggle>
2089
+ <mat-slide-toggle [(ngModel)]="step.hasError" (ngModelChange)="markDirty()">Marcar como com erro</mat-slide-toggle>
2090
+ </div>
2091
+ </div>
2092
+
2093
+ <details class="disclosure">
2094
+ <summary>
2095
+ <span class="section-title">Acessibilidade e detalhes técnicos</span>
2096
+ <span class="section-subtitle">Rótulos auxiliares e metadados menos usados.</span>
2097
+ </summary>
2098
+ <div class="detail-grid disclosure-body">
2099
+ <mat-form-field appearance="outline">
2100
+ <mat-label>Texto alternativo</mat-label>
2101
+ <input matInput [(ngModel)]="step.ariaLabel" (ngModelChange)="markDirty()" />
2102
+ </mat-form-field>
2103
+ <mat-form-field appearance="outline">
2104
+ <mat-label>ID que descreve</mat-label>
2105
+ <input matInput [(ngModel)]="step.ariaLabelledby" (ngModelChange)="markDirty()" />
2106
+ </mat-form-field>
2107
+ </div>
2108
+ </details>
2242
2109
 
2243
- <div class="pdx-content-editor">
2110
+ <div class="pdx-content-editor">
2244
2111
  <div class="section editorial-section">
2245
2112
  <div class="section-head">
2246
2113
  <div>
2247
2114
  <div class="section-title">Conteúdo editorial</div>
2248
- <div class="section-subtitle">Organize os blocos narrativos da etapa antes ou depois do formulário.</div>
2115
+ <div class="section-subtitle">Use blocos de apoio para contextualizar a etapa antes ou depois do formulário.</div>
2249
2116
  </div>
2250
2117
  </div>
2251
2118
 
2252
2119
  <div class="zone-grid">
2253
- <div class="zone-card">
2120
+ <div class="zone-column">
2254
2121
  <div class="zone-head">
2255
2122
  <div class="zone-title">Antes do formulário</div>
2256
2123
  <div class="zone-actions">
@@ -2288,21 +2155,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
2288
2155
  <div class="meta" *ngIf="widgetBlockId(w) as blockId">ID: {{ blockId }}</div>
2289
2156
  </div>
2290
2157
  <div class="actions">
2291
- <button mat-button (click)="editWidget(w)">
2158
+ <button mat-icon-button (click)="editWidget(w)" matTooltip="Editar bloco">
2292
2159
  <mat-icon [praxisIcon]="'tune'"></mat-icon>
2293
- Editar
2294
2160
  </button>
2295
- <button mat-button (click)="moveEditorialWidget(w, 'before', 'after')">
2296
- <mat-icon [praxisIcon]="'arrow_downward'"></mat-icon>
2297
- Mover para depois
2161
+ <button mat-icon-button (click)="moveEditorialWidget(w, 'before', 'after')" matTooltip="Mover para depois do formulário">
2162
+ <mat-icon [praxisIcon]="'south'"></mat-icon>
2298
2163
  </button>
2299
- <button mat-button (click)="duplicateEditorialWidget(w, 'before')">
2164
+ <button mat-icon-button (click)="duplicateEditorialWidget(w, 'before')" matTooltip="Duplicar bloco">
2300
2165
  <mat-icon [praxisIcon]="'content_copy'"></mat-icon>
2301
- Duplicar
2302
2166
  </button>
2303
- <button mat-button color="warn" (click)="removeEditorialWidget(w, 'before')">
2167
+ <button mat-icon-button color="warn" (click)="removeEditorialWidget(w, 'before')" matTooltip="Remover bloco">
2304
2168
  <mat-icon [praxisIcon]="'delete'"></mat-icon>
2305
- Remover
2306
2169
  </button>
2307
2170
  </div>
2308
2171
  </div>
@@ -2310,7 +2173,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
2310
2173
  </div>
2311
2174
  </div>
2312
2175
 
2313
- <div class="zone-card">
2176
+ <div class="zone-column">
2314
2177
  <div class="zone-head">
2315
2178
  <div class="zone-title">Depois do formulário</div>
2316
2179
  <div class="zone-actions">
@@ -2348,21 +2211,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
2348
2211
  <div class="meta" *ngIf="widgetBlockId(w) as blockId">ID: {{ blockId }}</div>
2349
2212
  </div>
2350
2213
  <div class="actions">
2351
- <button mat-button (click)="editWidget(w)">
2214
+ <button mat-icon-button (click)="editWidget(w)" matTooltip="Editar bloco">
2352
2215
  <mat-icon [praxisIcon]="'tune'"></mat-icon>
2353
- Editar
2354
2216
  </button>
2355
- <button mat-button (click)="moveEditorialWidget(w, 'after', 'before')">
2356
- <mat-icon [praxisIcon]="'arrow_upward'"></mat-icon>
2357
- Mover para antes
2217
+ <button mat-icon-button (click)="moveEditorialWidget(w, 'after', 'before')" matTooltip="Mover para antes do formulário">
2218
+ <mat-icon [praxisIcon]="'north'"></mat-icon>
2358
2219
  </button>
2359
- <button mat-button (click)="duplicateEditorialWidget(w, 'after')">
2220
+ <button mat-icon-button (click)="duplicateEditorialWidget(w, 'after')" matTooltip="Duplicar bloco">
2360
2221
  <mat-icon [praxisIcon]="'content_copy'"></mat-icon>
2361
- Duplicar
2362
2222
  </button>
2363
- <button mat-button color="warn" (click)="removeEditorialWidget(w, 'after')">
2223
+ <button mat-icon-button color="warn" (click)="removeEditorialWidget(w, 'after')" matTooltip="Remover bloco">
2364
2224
  <mat-icon [praxisIcon]="'delete'"></mat-icon>
2365
- Remover
2366
2225
  </button>
2367
2226
  </div>
2368
2227
  </div>
@@ -2376,17 +2235,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
2376
2235
  <div class="section-title">Formulário da etapa</div>
2377
2236
  <div class="section-body">
2378
2237
  <ng-container *ngIf="step.form; else addFormBtn">
2379
- <mat-card appearance="outlined" class="mini-card">
2380
- <mat-card-header>
2381
- <mat-icon mat-card-avatar [praxisIcon]="'dynamic_form'"></mat-icon>
2382
- <mat-card-title>Formulário principal</mat-card-title>
2383
- <mat-card-subtitle>{{ step.form.formId || step.id || '—' }}</mat-card-subtitle>
2384
- </mat-card-header>
2385
- <mat-card-actions align="end">
2238
+ <div class="form-row-card">
2239
+ <div class="form-row-main">
2240
+ <mat-icon [praxisIcon]="'dynamic_form'"></mat-icon>
2241
+ <div>
2242
+ <div class="name">Formulário principal</div>
2243
+ <div class="sub">{{ step.form.formId || step.id || '—' }}</div>
2244
+ </div>
2245
+ </div>
2246
+ <div class="form-row-actions">
2386
2247
  <button mat-button (click)="editMainForm()"><mat-icon [praxisIcon]="'tune'"></mat-icon> Editar</button>
2387
2248
  <button mat-button color="warn" (click)="removeMainForm()"><mat-icon [praxisIcon]="'delete'"></mat-icon> Remover</button>
2388
- </mat-card-actions>
2389
- </mat-card>
2249
+ </div>
2250
+ </div>
2390
2251
  </ng-container>
2391
2252
  <ng-template #addFormBtn>
2392
2253
  <button mat-stroked-button color="primary" (click)="addMainForm()"><mat-icon [praxisIcon]="'add'"></mat-icon> Adicionar formulário</button>
@@ -2398,7 +2259,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
2398
2259
  <div class="section-head">
2399
2260
  <div>
2400
2261
  <div class="section-title">Componentes avançados</div>
2401
- <div class="section-subtitle">Use para cenários de seleção e integrações específicas.</div>
2262
+ <div class="section-subtitle">Atalhos para montar experiências mais ricas sem perder clareza no fluxo.</div>
2402
2263
  </div>
2403
2264
  <button mat-stroked-button (click)="openMoreComponents()">
2404
2265
  <mat-icon [praxisIcon]="'add'"></mat-icon>
@@ -2407,12 +2268,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
2407
2268
  </div>
2408
2269
  <div class="section-body">
2409
2270
  <div class="cta-grid">
2410
- <div class="cta-card mat-elevation-z2">
2271
+ <div class="cta-row-item">
2411
2272
  <div class="cta-head">
2412
2273
  <mat-icon [praxisIcon]="'account_tree'"></mat-icon>
2413
- <div class="cta-title">Lista em árvore</div>
2274
+ <div>
2275
+ <div class="cta-title">Lista em árvore</div>
2276
+ <div class="cta-desc">Dados hierárquicos com seleção simples.</div>
2277
+ </div>
2414
2278
  </div>
2415
- <div class="cta-desc">Exiba dados hierárquicos com seleção simples.</div>
2416
2279
  <div class="cta-actions">
2417
2280
  <button mat-stroked-button (click)="addTreeList()">
2418
2281
  <mat-icon [praxisIcon]="'add'"></mat-icon>
@@ -2420,12 +2283,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
2420
2283
  </button>
2421
2284
  </div>
2422
2285
  </div>
2423
- <div class="cta-card mat-elevation-z2">
2286
+ <div class="cta-row-item">
2424
2287
  <div class="cta-head">
2425
2288
  <mat-icon [praxisIcon]="'swap_horiz'"></mat-icon>
2426
- <div class="cta-title">Transferência de itens</div>
2289
+ <div>
2290
+ <div class="cta-title">Transferência de itens</div>
2291
+ <div class="cta-desc">Mover itens entre listas para seleção múltipla.</div>
2292
+ </div>
2427
2293
  </div>
2428
- <div class="cta-desc">Mover itens entre listas (ideal para múltipla seleção).</div>
2429
2294
  <div class="cta-actions">
2430
2295
  <button mat-stroked-button (click)="addTransferListQuick()">
2431
2296
  <mat-icon [praxisIcon]="'add'"></mat-icon>
@@ -2433,12 +2298,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
2433
2298
  </button>
2434
2299
  </div>
2435
2300
  </div>
2436
- <div class="cta-card mat-elevation-z2">
2301
+ <div class="cta-row-item">
2437
2302
  <div class="cta-head">
2438
2303
  <mat-icon [praxisIcon]="'search'"></mat-icon>
2439
- <div class="cta-title">Seleção com busca</div>
2304
+ <div>
2305
+ <div class="cta-title">Seleção com busca</div>
2306
+ <div class="cta-desc">Seleção com busca local ou remota.</div>
2307
+ </div>
2440
2308
  </div>
2441
- <div class="cta-desc">Campo de seleção com busca remota/local.</div>
2442
2309
  <div class="cta-actions">
2443
2310
  <button mat-stroked-button (click)="addSearchableSelect()">
2444
2311
  <mat-icon [praxisIcon]="'add'"></mat-icon>
@@ -2446,12 +2313,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
2446
2313
  </button>
2447
2314
  </div>
2448
2315
  </div>
2449
- <div class="cta-card mat-elevation-z2">
2316
+ <div class="cta-row-item">
2450
2317
  <div class="cta-head">
2451
2318
  <mat-icon [praxisIcon]="'upload_file'"></mat-icon>
2452
- <div class="cta-title">Upload de arquivos</div>
2319
+ <div>
2320
+ <div class="cta-title">Upload de arquivos</div>
2321
+ <div class="cta-desc">Anexos com validação e fluxo de upload.</div>
2322
+ </div>
2453
2323
  </div>
2454
- <div class="cta-desc">Anexe documentos com validação de upload.</div>
2455
2324
  <div class="cta-actions">
2456
2325
  <button mat-stroked-button (click)="addFilesUpload()">
2457
2326
  <mat-icon [praxisIcon]="'add'"></mat-icon>
@@ -2469,13 +2338,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
2469
2338
  <div class="sub">{{ w.id }}</div>
2470
2339
  </div>
2471
2340
  <div class="actions">
2472
- <button mat-button (click)="editWidget(w)" [disabled]="!canEditWidget(w)">
2341
+ <button mat-icon-button (click)="editWidget(w)" [disabled]="!canEditWidget(w)" matTooltip="Editar componente">
2473
2342
  <mat-icon [praxisIcon]="'tune'"></mat-icon>
2474
- Editar
2475
2343
  </button>
2476
- <button mat-button color="warn" (click)="removeAdvancedWidget(w)">
2344
+ <button mat-icon-button color="warn" (click)="removeAdvancedWidget(w)" matTooltip="Remover componente">
2477
2345
  <mat-icon [praxisIcon]="'delete'"></mat-icon>
2478
- Remover
2479
2346
  </button>
2480
2347
  </div>
2481
2348
  </div>
@@ -2483,78 +2350,95 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
2483
2350
  </div>
2484
2351
  </div>
2485
2352
  </div>
2486
- </div>
2487
- </div>
2488
- <ng-template #noSteps>
2489
- <div class="muted">Nenhuma etapa definida.</div>
2490
- </ng-template>
2491
- </div>
2353
+ </div>
2354
+ </div>
2355
+ </div>
2356
+ </div>
2357
+ <ng-template #noSteps>
2358
+ <div class="muted">Nenhuma etapa definida.</div>
2359
+ </ng-template>
2360
+ </div>
2492
2361
  </mat-tab>
2493
2362
 
2494
2363
  <mat-tab label="Navegação">
2495
2364
  <div class="tab-pad">
2496
- <div class="help">Personalize os botões de avançar e voltar exibidos em cada etapa.</div>
2497
- <div class="pdx-grid">
2498
- <mat-form-field appearance="outline">
2499
- <mat-label>Estilo dos botões</mat-label>
2500
- <select matNativeControl [(ngModel)]="navigationCfg.variant" (ngModelChange)="markDirty()">
2501
- <option [ngValue]="undefined">Padrão (elevado)</option>
2502
- <option value="basic">Texto</option>
2503
- <option value="flat">Plano</option>
2504
- <option value="stroked">Contornado</option>
2505
- <option value="raised">Elevado</option>
2506
- </select>
2507
- </mat-form-field>
2508
- <mat-form-field appearance="outline">
2509
- <mat-label>Cor</mat-label>
2510
- <select matNativeControl [(ngModel)]="navigationCfg.color" (ngModelChange)="markDirty()">
2511
- <option [ngValue]="undefined">Padrão</option>
2512
- <option value="primary">Primária</option>
2513
- <option value="accent">Acento</option>
2514
- <option value="warn">Alerta</option>
2515
- </select>
2516
- </mat-form-field>
2517
- <mat-form-field appearance="outline">
2518
- <mat-label>Alinhamento</mat-label>
2519
- <select matNativeControl [(ngModel)]="navigationCfg.align" (ngModelChange)="markDirty()">
2520
- <option [ngValue]="undefined">Direita</option>
2521
- <option value="start">Esquerda</option>
2522
- <option value="center">Centro</option>
2523
- <option value="space-between">Espaçado</option>
2524
- <option value="end">Direita</option>
2525
- </select>
2526
- </mat-form-field>
2527
- </div>
2528
-
2529
- <div class="pdx-toggles">
2530
- <mat-slide-toggle [(ngModel)]="navigationCfg.visible" (ngModelChange)="markDirty()">Mostrar navegação padrão</mat-slide-toggle>
2365
+ <div class="editor-intro">
2366
+ <div class="editor-intro-copy">
2367
+ <div class="eyebrow">Ações padrão</div>
2368
+ <div class="editor-title">Configure a navegação entre etapas</div>
2369
+ <div class="editor-subtitle">Defina quando os botões padrão aparecem e como eles se apresentam visualmente no fluxo.</div>
2370
+ </div>
2531
2371
  </div>
2532
-
2533
- <div class="pdx-grid">
2534
- <mat-form-field appearance="outline">
2535
- <mat-label>Texto do botão Voltar</mat-label>
2536
- <input matInput [(ngModel)]="navigationCfg.prevLabel" (ngModelChange)="markDirty()" placeholder="Ex.: Voltar" />
2537
- </mat-form-field>
2538
- <mat-form-field appearance="outline">
2539
- <mat-label>Texto do botão Próximo</mat-label>
2540
- <input matInput [(ngModel)]="navigationCfg.nextLabel" (ngModelChange)="markDirty()" placeholder="Ex.: Próximo" />
2541
- </mat-form-field>
2372
+ <div class="settings-group">
2373
+ <div class="group-head">
2374
+ <div class="section-title">Comportamento dos botões</div>
2375
+ <div class="section-subtitle">Aparência e alinhamento da navegação padrão do stepper.</div>
2376
+ </div>
2377
+ <div class="toggle-group">
2378
+ <mat-slide-toggle [(ngModel)]="navigationCfg.visible" (ngModelChange)="markDirty()">Mostrar navegação padrão</mat-slide-toggle>
2379
+ </div>
2380
+ <div class="pdx-grid">
2381
+ <mat-form-field appearance="outline">
2382
+ <mat-label>Estilo dos botões</mat-label>
2383
+ <select matNativeControl [(ngModel)]="navigationCfg.variant" (ngModelChange)="markDirty()" [disabled]="!navigationCfg.visible">
2384
+ <option [ngValue]="undefined">Padrão (elevado)</option>
2385
+ <option value="basic">Texto</option>
2386
+ <option value="flat">Plano</option>
2387
+ <option value="stroked">Contornado</option>
2388
+ <option value="raised">Elevado</option>
2389
+ </select>
2390
+ </mat-form-field>
2391
+ <mat-form-field appearance="outline">
2392
+ <mat-label>Cor</mat-label>
2393
+ <select matNativeControl [(ngModel)]="navigationCfg.color" (ngModelChange)="markDirty()" [disabled]="!navigationCfg.visible">
2394
+ <option [ngValue]="undefined">Padrão</option>
2395
+ <option value="primary">Primária</option>
2396
+ <option value="accent">Acento</option>
2397
+ <option value="warn">Alerta</option>
2398
+ </select>
2399
+ </mat-form-field>
2400
+ <mat-form-field appearance="outline">
2401
+ <mat-label>Alinhamento</mat-label>
2402
+ <select matNativeControl [(ngModel)]="navigationCfg.align" (ngModelChange)="markDirty()" [disabled]="!navigationCfg.visible">
2403
+ <option [ngValue]="undefined">Direita</option>
2404
+ <option value="start">Esquerda</option>
2405
+ <option value="center">Centro</option>
2406
+ <option value="space-between">Espaçado</option>
2407
+ <option value="end">Direita</option>
2408
+ </select>
2409
+ </mat-form-field>
2410
+ </div>
2542
2411
  </div>
2543
-
2544
- <div class="icons-grid">
2545
- <div class="icon-item">
2546
- <div class="icon-head">Ícone de Voltar</div>
2547
- <button mat-stroked-button type="button" (click)="pickNavIcon('prevIcon')">
2548
- <mat-icon *ngIf="navigationCfg.prevIcon" [praxisIcon]="navigationCfg.prevIcon"></mat-icon>
2549
- <ng-container *ngIf="!navigationCfg.prevIcon">Escolher</ng-container>
2550
- </button>
2412
+ <div class="settings-group">
2413
+ <div class="group-head">
2414
+ <div class="section-title">Rótulos e ícones</div>
2415
+ <div class="section-subtitle">Ajuste a cópia e os ícones usados nas ações de voltar e avançar.</div>
2551
2416
  </div>
2552
- <div class="icon-item">
2553
- <div class="icon-head">Ícone de Próximo</div>
2554
- <button mat-stroked-button type="button" (click)="pickNavIcon('nextIcon')">
2555
- <mat-icon *ngIf="navigationCfg.nextIcon" [praxisIcon]="navigationCfg.nextIcon"></mat-icon>
2556
- <ng-container *ngIf="!navigationCfg.nextIcon">Escolher</ng-container>
2557
- </button>
2417
+ <div class="pdx-grid">
2418
+ <mat-form-field appearance="outline">
2419
+ <mat-label>Texto do botão Voltar</mat-label>
2420
+ <input matInput [(ngModel)]="navigationCfg.prevLabel" (ngModelChange)="markDirty()" placeholder="Ex.: Voltar" [disabled]="!navigationCfg.visible" />
2421
+ </mat-form-field>
2422
+ <mat-form-field appearance="outline">
2423
+ <mat-label>Texto do botão Próximo</mat-label>
2424
+ <input matInput [(ngModel)]="navigationCfg.nextLabel" (ngModelChange)="markDirty()" placeholder="Ex.: Próximo" [disabled]="!navigationCfg.visible" />
2425
+ </mat-form-field>
2426
+ </div>
2427
+ <div class="inline-actions-grid">
2428
+ <div class="inline-action-item">
2429
+ <div class="section-title">Ícone de Voltar</div>
2430
+ <button mat-stroked-button type="button" (click)="pickNavIcon('prevIcon')" [disabled]="!navigationCfg.visible" aria-label="Escolher ícone do botão Voltar">
2431
+ <mat-icon *ngIf="navigationCfg.prevIcon" [fontIcon]="navigationCfg.prevIcon"></mat-icon>
2432
+ <ng-container *ngIf="!navigationCfg.prevIcon">Escolher</ng-container>
2433
+ </button>
2434
+ </div>
2435
+ <div class="inline-action-item">
2436
+ <div class="section-title">Ícone de Próximo</div>
2437
+ <button mat-stroked-button type="button" (click)="pickNavIcon('nextIcon')" [disabled]="!navigationCfg.visible" aria-label="Escolher ícone do botão Próximo">
2438
+ <mat-icon *ngIf="navigationCfg.nextIcon" [fontIcon]="navigationCfg.nextIcon"></mat-icon>
2439
+ <ng-container *ngIf="!navigationCfg.nextIcon">Escolher</ng-container>
2440
+ </button>
2441
+ </div>
2558
2442
  </div>
2559
2443
  </div>
2560
2444
  </div>
@@ -2562,141 +2446,119 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
2562
2446
 
2563
2447
  <mat-tab label="Aparência">
2564
2448
  <div class="tab-pad">
2565
- <div class="help">Personalize cores, tipografia e ícones. Para ajustes comuns, use os campos abaixo; para maior controle, edite os tokens. Copie o SCSS e cole no arquivo de tema.</div>
2566
- <div class="quick-grid">
2567
- <mat-form-field appearance="outline">
2568
- <mat-label>Altura do cabeçalho (px)</mat-label>
2569
- <input matInput type="number" [ngModel]="headerHeightPx" (ngModelChange)="setHeaderHeightPx($event)" placeholder="Ex.: 48" />
2570
- <button
2571
- mat-icon-button
2572
- matSuffix
2573
- class="help-icon-button"
2574
- type="button"
2575
- [matTooltip]="'Altura do item do cabeçalho'"
2576
- matTooltipPosition="above"
2577
- >
2578
- <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
2579
- </button>
2580
- </mat-form-field>
2581
- <mat-form-field appearance="outline">
2582
- <mat-label>Tamanho do texto (px)</mat-label>
2583
- <input matInput type="number" [ngModel]="headerLabelTextSizePx" (ngModelChange)="setHeaderLabelTextSizePx($event)" placeholder="Ex.: 14" />
2584
- <button
2585
- mat-icon-button
2586
- matSuffix
2587
- class="help-icon-button"
2588
- type="button"
2589
- [matTooltip]="'Tamanho do título da etapa'"
2590
- matTooltipPosition="above"
2591
- >
2592
- <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
2593
- </button>
2594
- </mat-form-field>
2595
- <mat-form-field appearance="outline">
2596
- <mat-label>Peso do texto</mat-label>
2597
- <select matNativeControl [ngModel]="headerLabelTextWeight" (ngModelChange)="setHeaderLabelTextWeight($event)">
2598
- <option [ngValue]="undefined">Padrão</option>
2599
- <option value="400">Normal</option>
2600
- <option value="500">Médio</option>
2601
- <option value="600">Seminegrito</option>
2602
- <option value="700">Negrito</option>
2603
- </select>
2604
- </mat-form-field>
2605
- </div>
2606
- <div class="pdx-grid">
2607
- <mat-form-field appearance="outline" class="w-full">
2608
- <mat-label>Classe de tema (opcional)</mat-label>
2609
- <input matInput [(ngModel)]="appearance.themeClass" (ngModelChange)="onAppearanceChange()" placeholder="Ex.: theme-stepper-custom" />
2610
- <button
2611
- mat-icon-button
2612
- matSuffix
2613
- class="help-icon-button"
2614
- type="button"
2615
- [matTooltip]="'Aplica as cores apenas dentro desse seletor'"
2616
- matTooltipPosition="above"
2617
- >
2618
- <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
2619
- </button>
2620
- </mat-form-field>
2621
- <mat-form-field appearance="outline">
2622
- <mat-label>Conjunto de ícones</mat-label>
2623
- <select matNativeControl [(ngModel)]="appearance.iconsSet" (ngModelChange)="onAppearanceChange()">
2624
- <option [ngValue]="undefined">Material Icons (padrão)</option>
2625
- <option value="material-symbols-outlined">Material Symbols (Outlined)</option>
2626
- <option value="material-symbols-rounded">Material Symbols (Rounded)</option>
2627
- <option value="material-symbols-sharp">Material Symbols (Sharp)</option>
2628
- </select>
2629
- <button
2630
- mat-icon-button
2631
- matSuffix
2632
- class="help-icon-button"
2633
- type="button"
2634
- [matTooltip]="'Selecione se usar ícones do Material Symbols'"
2635
- matTooltipPosition="above"
2636
- >
2637
- <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
2638
- </button>
2639
- </mat-form-field>
2449
+ <div class="editor-intro">
2450
+ <div class="editor-intro-copy">
2451
+ <div class="eyebrow">Tema visual</div>
2452
+ <div class="editor-title">Personalize aparência sem perder consistência</div>
2453
+ <div class="editor-subtitle">Comece pelos ajustes rápidos. Tokens e snippet SCSS ficam recolhidos para cenários avançados.</div>
2454
+ </div>
2640
2455
  </div>
2641
- <div class="icons-grid">
2642
- <div class="icon-item">
2643
- <div class="icon-head">Ícone do número</div>
2644
- <button mat-stroked-button type="button" (click)="pickIcon('number')">
2645
- <mat-icon *ngIf="icons.number; else pick" [praxisIcon]="icons.number"></mat-icon>
2646
- <ng-template #pick>Escolher</ng-template>
2647
- </button>
2456
+ <div class="settings-group">
2457
+ <div class="group-head">
2458
+ <div class="section-title">Ajustes rápidos</div>
2459
+ <div class="section-subtitle">Controles mais comuns para tamanho, peso tipográfico e tema.</div>
2648
2460
  </div>
2649
- <div class="icon-item">
2650
- <div class="icon-head">Ícone concluído</div>
2651
- <button mat-stroked-button type="button" (click)="pickIcon('done')">
2652
- <mat-icon *ngIf="icons.done; else pick2" [praxisIcon]="icons.done"></mat-icon>
2653
- <ng-template #pick2>Escolher</ng-template>
2654
- </button>
2461
+ <div class="quick-grid">
2462
+ <mat-form-field appearance="outline">
2463
+ <mat-label>Altura do cabeçalho (px)</mat-label>
2464
+ <input matInput type="number" [ngModel]="headerHeightPx" (ngModelChange)="setHeaderHeightPx($event)" placeholder="Ex.: 48" />
2465
+ </mat-form-field>
2466
+ <mat-form-field appearance="outline">
2467
+ <mat-label>Tamanho do texto (px)</mat-label>
2468
+ <input matInput type="number" [ngModel]="headerLabelTextSizePx" (ngModelChange)="setHeaderLabelTextSizePx($event)" placeholder="Ex.: 14" />
2469
+ </mat-form-field>
2470
+ <mat-form-field appearance="outline">
2471
+ <mat-label>Peso do texto</mat-label>
2472
+ <select matNativeControl [ngModel]="headerLabelTextWeight" (ngModelChange)="setHeaderLabelTextWeight($event)">
2473
+ <option [ngValue]="undefined">Padrão</option>
2474
+ <option value="400">Normal</option>
2475
+ <option value="500">Médio</option>
2476
+ <option value="600">Seminegrito</option>
2477
+ <option value="700">Negrito</option>
2478
+ </select>
2479
+ </mat-form-field>
2480
+ <mat-form-field appearance="outline" class="field-span-2">
2481
+ <mat-label>Classe de tema</mat-label>
2482
+ <input matInput [(ngModel)]="appearance.themeClass" (ngModelChange)="onAppearanceChange()" placeholder="Ex.: theme-stepper-custom" />
2483
+ </mat-form-field>
2484
+ <mat-form-field appearance="outline">
2485
+ <mat-label>Conjunto de ícones</mat-label>
2486
+ <select matNativeControl [(ngModel)]="appearance.iconsSet" (ngModelChange)="onAppearanceChange()">
2487
+ <option [ngValue]="undefined">Material Icons (padrão)</option>
2488
+ <option value="material-symbols-outlined">Material Symbols (Outlined)</option>
2489
+ <option value="material-symbols-rounded">Material Symbols (Rounded)</option>
2490
+ <option value="material-symbols-sharp">Material Symbols (Sharp)</option>
2491
+ </select>
2492
+ </mat-form-field>
2655
2493
  </div>
2656
- <div class="icon-item">
2657
- <div class="icon-head">Ícone edição</div>
2658
- <button mat-stroked-button type="button" (click)="pickIcon('edit')">
2659
- <mat-icon *ngIf="icons.edit; else pick3" [praxisIcon]="icons.edit"></mat-icon>
2660
- <ng-template #pick3>Escolher</ng-template>
2661
- </button>
2494
+ <div class="inline-actions-grid icon-picker-grid">
2495
+ <div class="inline-action-item">
2496
+ <div class="section-title">Ícone do número</div>
2497
+ <button mat-stroked-button type="button" (click)="pickIcon('number')" aria-label="Escolher ícone do número">
2498
+ <mat-icon *ngIf="icons.number; else pick" [fontIcon]="icons.number"></mat-icon>
2499
+ <ng-template #pick>Escolher</ng-template>
2500
+ </button>
2501
+ </div>
2502
+ <div class="inline-action-item">
2503
+ <div class="section-title">Ícone concluído</div>
2504
+ <button mat-stroked-button type="button" (click)="pickIcon('done')" aria-label="Escolher ícone de concluído">
2505
+ <mat-icon *ngIf="icons.done; else pick2" [fontIcon]="icons.done"></mat-icon>
2506
+ <ng-template #pick2>Escolher</ng-template>
2507
+ </button>
2508
+ </div>
2509
+ <div class="inline-action-item">
2510
+ <div class="section-title">Ícone edição</div>
2511
+ <button mat-stroked-button type="button" (click)="pickIcon('edit')" aria-label="Escolher ícone de edição">
2512
+ <mat-icon *ngIf="icons.edit; else pick3" [fontIcon]="icons.edit"></mat-icon>
2513
+ <ng-template #pick3>Escolher</ng-template>
2514
+ </button>
2515
+ </div>
2516
+ <div class="inline-action-item">
2517
+ <div class="section-title">Ícone de erro</div>
2518
+ <button mat-stroked-button type="button" (click)="pickIcon('error')" aria-label="Escolher ícone de erro">
2519
+ <mat-icon *ngIf="icons.error; else pick4" [fontIcon]="icons.error"></mat-icon>
2520
+ <ng-template #pick4>Escolher</ng-template>
2521
+ </button>
2522
+ </div>
2662
2523
  </div>
2663
- <div class="icon-item">
2664
- <div class="icon-head">Ícone de erro</div>
2665
- <button mat-stroked-button type="button" (click)="pickIcon('error')">
2666
- <mat-icon *ngIf="icons.error; else pick4" [praxisIcon]="icons.error"></mat-icon>
2667
- <ng-template #pick4>Escolher</ng-template>
2668
- </button>
2524
+ <div class="icons-hint" *ngIf="symbolsLikelySelected.length && !appearance.iconsSet">
2525
+ <div class="muted">
2526
+ Dica: {{ symbolsLikelySelected.join(', ') }} são ícones do Material Symbols. Selecione um conjunto Symbols abaixo ou clique em
2527
+ <button mat-button color="primary" type="button" (click)="setIconsSetToSymbols()">Usar Material Symbols (Outlined)</button>.
2528
+ </div>
2669
2529
  </div>
2670
- </div>
2671
- <div class="icons-hint" *ngIf="symbolsLikelySelected.length && !appearance.iconsSet">
2672
- <div class="muted">
2673
- Dica: {{ symbolsLikelySelected.join(', ') }} são ícones do Material Symbols. Selecione um conjunto Symbols abaixo ou clique em
2674
- <button mat-button color="primary" type="button" (click)="setIconsSetToSymbols()">Usar Material Symbols (Outlined)</button>.
2530
+ <div class="pdx-appearance-actions">
2531
+ <button mat-stroked-button color="primary" type="button" (click)="applyPreset('neutral')">Preset: neutro</button>
2532
+ <button mat-stroked-button color="primary" type="button" (click)="applyPreset('primary')">Preset: primário</button>
2533
+ <button mat-stroked-button color="primary" type="button" (click)="applyPreset('high-contrast')">Preset: alto contraste</button>
2534
+ <button mat-button type="button" (click)="clearTokens()">Limpar tokens</button>
2675
2535
  </div>
2676
2536
  </div>
2677
- <div class="tokens-grid">
2678
- <div class="token-item" *ngFor="let key of stepperTokenKeys">
2679
- <mat-form-field appearance="outline" class="w-full">
2680
- <mat-label>{{ key }}</mat-label>
2681
- <input matInput [ngModel]="appearance.tokens?.[key]" (ngModelChange)="onTokenChange(key, $event)" placeholder="valor CSS ou var(--token)" />
2682
- </mat-form-field>
2537
+ <details class="disclosure">
2538
+ <summary>
2539
+ <span class="section-title">Tokens avançados e snippet SCSS</span>
2540
+ <span class="section-subtitle">Use quando precisar sair do ajuste rápido e controlar o tema com granularidade.</span>
2541
+ </summary>
2542
+ <div class="disclosure-body">
2543
+ <div class="tokens-grid">
2544
+ <div class="token-item" *ngFor="let key of stepperTokenKeys">
2545
+ <mat-form-field appearance="outline" class="w-full">
2546
+ <mat-label>{{ key }}</mat-label>
2547
+ <input matInput [ngModel]="appearance.tokens?.[key]" (ngModelChange)="onTokenChange(key, $event)" placeholder="valor CSS ou var(--token)" />
2548
+ </mat-form-field>
2549
+ </div>
2550
+ </div>
2551
+ <div class="code-card">
2552
+ <div class="code-head">Snippet SCSS</div>
2553
+ <pre class="code"><code>{{ scssSnippet() }}</code></pre>
2554
+ </div>
2683
2555
  </div>
2684
- </div>
2685
- <div class="pdx-appearance-actions">
2686
- <button mat-stroked-button color="primary" type="button" (click)="applyPreset('neutral')">Preset: neutro</button>
2687
- <button mat-stroked-button color="primary" type="button" (click)="applyPreset('primary')">Preset: primário</button>
2688
- <button mat-stroked-button color="primary" type="button" (click)="applyPreset('high-contrast')">Preset: alto contraste</button>
2689
- <button mat-button type="button" (click)="clearTokens()">Limpar tokens</button>
2690
- </div>
2691
- <mat-card appearance="outlined" class="code-card">
2692
- <div class="code-head">Snippet SCSS</div>
2693
- <pre class="code"><code>{{ scssSnippet() }}</code></pre>
2694
- </mat-card>
2556
+ </details>
2695
2557
  </div>
2696
2558
  </mat-tab>
2697
2559
  </mat-tab-group>
2698
2560
  </div>
2699
- `, styles: [".pdx-editor{display:grid;gap:16px}.pdx-editor .mat-mdc-form-field{width:100%}.pdx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}.pdx-toggles{display:flex;gap:12px;flex-wrap:wrap}.tab-pad{padding:12px;display:grid;gap:12px;background:var(--md-sys-color-surface);border:1px solid var(--md-sys-color-outline-variant);border-radius:12px}.help{color:var(--md-sys-color-on-surface-variant);font-size:13px}.quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:6px}.icons-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:8px 0}.icon-item{display:grid;gap:6px;align-content:start}.icons-hint{margin-top:4px}.pdx-steps{display:grid;gap:8px}.pdx-steps-header{display:flex;justify-content:space-between;align-items:center}.pdx-step-list{display:grid;gap:8px}.pdx-step-item{display:grid;grid-template-columns:24px 1fr auto;gap:8px;align-items:start;padding:8px;border:1px solid var(--md-sys-color-outline-variant);border-radius:10px;background:var(--md-sys-color-surface);cursor:pointer}.pdx-step-item.active{border-color:var(--md-sys-color-primary);box-shadow:var(--mat-elevation-level2)}.drag-handle{display:flex;align-items:center;color:var(--md-sys-color-on-surface-variant)}.pdx-fields{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}.pdx-flag-group{display:flex;gap:10px;align-items:center}.pdx-active-step{display:grid;gap:12px;padding-top:8px;border-top:1px dashed var(--md-sys-color-outline-variant)}.pdx-active-step .hdr{display:flex;gap:12px;align-items:center;justify-content:space-between}.pdx-content-editor{display:grid;gap:16px}.section{display:grid;gap:8px;padding:12px;border:1px solid var(--md-sys-color-outline-variant);border-radius:12px;background:var(--md-sys-color-surface-container-lowest)}.section-body{display:grid;gap:8px}.section-title{font-weight:600;opacity:.85}.section-subtitle{font-size:12px;color:var(--md-sys-color-on-surface-variant)}.section-head{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}.editorial-section{background:var(--md-sys-color-surface-container-low);border-color:var(--md-sys-color-primary)}.mini-card{display:block}.widget-list{display:grid;gap:8px}.widget-item{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:8px;padding:8px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;background:var(--md-sys-color-surface)}.widget-item .info{display:grid;gap:2px;min-width:0}.widget-item .info .name{font-weight:600}.widget-item .info .sub{font-size:12px;color:var(--md-sys-color-on-surface-variant)}.widget-item .info .meta{font-size:11px;color:var(--md-sys-color-on-surface-variant);font-family:var(--md-ref-typeface-plain, monospace);opacity:.85}.widget-item .actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.editorial-item{align-items:start}.editorial-item .actions{justify-content:flex-start}.cta-row{display:flex;gap:8px;align-items:center}.spacer{flex:1 1 auto}.muted{color:var(--md-sys-color-on-surface-variant)}.cta-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-bottom:8px}.cta-card{display:grid;gap:8px;padding:12px;border-radius:12px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface)}.cta-card .cta-head{display:flex;align-items:center;gap:8px}.cta-card .cta-title{font-weight:600}.cta-card .cta-desc{font-size:12px;color:var(--md-sys-color-on-surface-variant)}.cta-card .cta-actions{display:flex;gap:8px;align-items:center}.tokens-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:8px 0}.token-item{display:contents}.pdx-appearance{margin-top:8px;display:grid;gap:8px}.pdx-appearance-actions{display:flex;gap:8px;flex-wrap:wrap}.zone-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}.zone-card{display:grid;gap:8px;padding:12px;border-radius:10px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface)}.zone-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.zone-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.zone-title{font-weight:600}.zone-count{font-size:12px;padding:2px 8px;border-radius:999px;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface)}.advanced-list{margin-top:4px}.code-card{margin-top:8px}.code-head{font-weight:600;margin-bottom:4px}.code{white-space:pre;overflow:auto;background:var(--md-sys-color-surface-container-highest)}.w-full{grid-column:1 / -1}.min-180{min-width:180px}.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}@media(max-width:900px){.pdx-step-item{grid-template-columns:20px 1fr}.pdx-actions{grid-column:1 / -1;justify-self:end}.widget-item{grid-template-columns:20px 1fr}.widget-item .actions{grid-column:1 / -1;justify-content:flex-start}}@media(max-width:640px){.pdx-active-step .hdr{align-items:flex-start;flex-direction:column}.pdx-flag-group{flex-direction:column;align-items:flex-start}.zone-head{align-items:flex-start;flex-direction:column}.zone-actions{justify-content:flex-start}}\n"] }]
2561
+ `, styles: [".pdx-editor{display:grid;gap:16px}.pdx-editor .mat-mdc-form-field{width:100%}.pdx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}.pdx-toggles{display:flex;gap:12px;flex-wrap:wrap}.tab-pad{padding:16px;display:grid;gap:16px;background:var(--md-sys-color-surface);border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 78%,transparent);border-radius:16px}.help{color:var(--md-sys-color-on-surface-variant);font-size:13px}.editor-intro{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:4px 2px 2px}.editor-intro-copy{display:grid;gap:6px;max-width:760px}.eyebrow{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant);font-weight:600}.editor-title{font-size:22px;line-height:1.15;font-weight:650;color:var(--md-sys-color-on-surface)}.editor-subtitle{max-width:72ch;color:var(--md-sys-color-on-surface-variant);line-height:1.45;font-size:14px}.editor-intro-meta{display:flex;gap:8px;align-items:flex-start}.meta-pill{display:grid;gap:2px;min-width:88px;padding:10px 12px;border-radius:14px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 70%,transparent);background:var(--md-sys-color-surface-container-low)}.meta-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--md-sys-color-on-surface-variant)}.quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:6px}.icons-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:8px 0}.icon-item{display:grid;gap:6px;align-content:start}.icons-hint{margin-top:4px}.settings-group{display:grid;gap:14px;padding:2px 0 4px}.settings-group+.settings-group,.settings-group+.disclosure,.disclosure+.settings-group{padding-top:18px;border-top:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 60%,transparent)}.group-head{display:grid;gap:4px;max-width:72ch}.inline-actions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;align-items:start}.inline-action-item{display:grid;gap:8px;align-content:start;min-width:0}.pdx-steps{display:grid;gap:12px;padding:4px 0 2px}.steps-workspace{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:24px;align-items:start}.pdx-steps-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.pdx-step-list{display:grid;gap:10px}.pdx-step-item{display:grid;grid-template-columns:20px 1fr auto;gap:10px;align-items:start;padding:12px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 68%,transparent);border-radius:14px;background:var(--md-sys-color-surface);cursor:pointer;outline:none}.pdx-step-item.active{border-color:color-mix(in srgb,var(--md-sys-color-primary) 55%,var(--md-sys-color-outline-variant));background:color-mix(in srgb,var(--md-sys-color-primary-container) 26%,var(--md-sys-color-surface));box-shadow:none}.pdx-step-item:focus-visible{border-color:var(--md-sys-color-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--md-sys-color-primary) 22%,transparent)}.drag-handle{display:flex;align-items:center;color:var(--md-sys-color-on-surface-variant)}.step-summary{display:grid;gap:8px;min-width:0}.step-summary-head{display:grid;gap:2px}.step-summary-index{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--md-sys-color-on-surface-variant);font-weight:600}.step-summary-title{font-size:15px;line-height:1.3;font-weight:600;color:var(--md-sys-color-on-surface)}.step-summary-sub{font-size:12px;color:var(--md-sys-color-on-surface-variant);font-family:var(--md-ref-typeface-plain, monospace);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.step-summary-flags{display:flex;gap:6px;flex-wrap:wrap}.summary-chip{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border-radius:999px;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface-variant);font-size:11px;font-weight:600}.summary-chip-warn{background:color-mix(in srgb,var(--md-sys-color-error-container) 60%,transparent);color:var(--md-sys-color-on-error-container)}.pdx-active-step{display:grid;gap:18px;min-width:0}.pdx-active-step .hdr{display:flex;gap:12px;align-items:flex-start;justify-content:space-between}.active-step-head{display:grid;gap:4px}.pdx-content-editor{display:grid;gap:16px}.section{display:grid;gap:12px;padding:0;border:none;border-radius:0;background:transparent}.section-body{display:grid;gap:12px}.section-title{font-weight:600;font-size:15px;color:var(--md-sys-color-on-surface)}.section-subtitle{font-size:13px;color:var(--md-sys-color-on-surface-variant);line-height:1.45}.section-head{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}.editorial-section{padding-bottom:6px;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 68%,transparent)}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.field-span-2{grid-column:span 2}.toggle-group{display:flex;gap:10px;flex-wrap:wrap;padding-top:4px}.disclosure{padding:0 0 12px;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 62%,transparent)}.disclosure summary{list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:16px;cursor:pointer;padding:0;position:relative}.disclosure summary::-webkit-details-marker{display:none}.disclosure summary:after{content:\"expand_more\";font-family:Material Icons;font-size:18px;color:var(--md-sys-color-on-surface-variant);transition:transform .16s ease}.disclosure[open] summary:after{transform:rotate(180deg)}.disclosure summary:focus-visible{outline:2px solid color-mix(in srgb,var(--md-sys-color-primary) 58%,transparent);outline-offset:4px;border-radius:8px}.disclosure-body{padding-top:12px}.widget-list{display:grid;gap:8px}.widget-item{display:grid;grid-template-columns:20px 1fr auto;align-items:start;gap:12px;padding:10px 0;border:none;border-radius:0;background:transparent;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.widget-item .info{display:grid;gap:2px;min-width:0}.widget-item .info .name{font-weight:600}.widget-item .info .sub{font-size:12px;color:var(--md-sys-color-on-surface-variant);line-height:1.45}.widget-item .info .meta{margin-top:2px;font-size:11px;color:var(--md-sys-color-on-surface-variant);font-family:var(--md-ref-typeface-plain, monospace);opacity:.85}.widget-item .actions{display:flex;gap:2px;flex-wrap:nowrap;justify-content:flex-end;align-items:flex-start;opacity:.92}.editorial-item{align-items:start}.editorial-item .actions{justify-content:flex-end}.cta-row{display:flex;gap:8px;align-items:center}.spacer{flex:1 1 auto}.muted{color:var(--md-sys-color-on-surface-variant)}.cta-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin-bottom:4px}.cta-row-item{display:grid;gap:10px;padding:12px 0;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.tokens-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:8px 0}.token-item{display:contents}.pdx-appearance{margin-top:8px;display:grid;gap:8px}.pdx-appearance-actions{display:flex;gap:8px;flex-wrap:wrap}.zone-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}.zone-column{display:grid;gap:10px;min-width:0}.zone-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.zone-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.zone-title{font-weight:600}.zone-column+.zone-column{padding-left:16px;border-left:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.zone-count{font-size:12px;padding:2px 8px;border-radius:999px;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface)}.advanced-list{margin-top:4px}.form-row-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.form-row-main{display:flex;align-items:center;gap:12px;min-width:0}.form-row-actions{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}.code-card{margin-top:8px}.code-head{font-weight:600;margin-bottom:4px}.code{white-space:pre;overflow:auto;background:var(--md-sys-color-surface-container-highest)}.w-full{grid-column:1 / -1}.min-180{min-width:180px}.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}.cta-row-item .cta-head{display:grid;grid-template-columns:20px 1fr;align-items:start;gap:10px}.cta-row-item .cta-title{font-weight:600;color:var(--md-sys-color-on-surface)}.cta-row-item .cta-desc{font-size:12px;color:var(--md-sys-color-on-surface-variant);line-height:1.45;margin-top:2px}.cta-row-item .cta-actions{display:flex;gap:8px;align-items:center}.widget-item:last-child,.cta-row-item:last-child,.form-row-card:last-child{border-bottom:none}@media(max-width:900px){.editor-intro{flex-direction:column}.steps-workspace{grid-template-columns:1fr;gap:20px}.pdx-step-item{grid-template-columns:20px 1fr}.pdx-actions{grid-column:1 / -1;justify-self:end}.widget-item{grid-template-columns:20px 1fr}.widget-item .actions{grid-column:1 / -1;justify-content:flex-end}.form-row-card{flex-direction:column;align-items:flex-start}.form-row-actions{justify-content:flex-start}.zone-column+.zone-column{padding-left:0;border-left:none;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}}@media(max-width:640px){.tab-pad{padding:14px}.editor-title{font-size:20px}.pdx-active-step .hdr{align-items:flex-start;flex-direction:column}.detail-grid{grid-template-columns:1fr}.field-span-2{grid-column:auto}.toggle-group{flex-direction:column;align-items:flex-start}.zone-head{align-items:flex-start;flex-direction:column}.zone-actions,.widget-item .actions{justify-content:flex-start}.disclosure summary{flex-direction:column;align-items:flex-start}}\n"] }]
2700
2562
  }], ctorParameters: () => [{ type: undefined, decorators: [{
2701
2563
  type: Inject,
2702
2564
  args: [SETTINGS_PANEL_DATA]
@@ -3482,7 +3344,7 @@ class PraxisStepper {
3482
3344
  >
3483
3345
  <mat-icon fontIcon="edit"></mat-icon>
3484
3346
  </button>
3485
- `, isInline: true, styles: [":host{display:block;position:relative}.praxis-stepper{width:100%;background:var(--md-sys-color-surface);border:1px solid var(--md-sys-color-outline-variant);border-radius:16px;padding:12px;box-shadow:var(--mat-elevation-level1)}.praxis-stepper.pdx-stepper-ft-light{background:transparent;border:none;border-radius:0;padding:0;box-shadow:none}:host(.density-compact) ::ng-deep .mat-step-header{min-height:36px}:host(.density-compact) .pdx-step-actions{padding-top:4px;gap:6px}:host(.density-comfortable) ::ng-deep .mat-step-header{min-height:44px}.pdx-step-content{padding:12px 4px 8px;color:var(--md-sys-color-on-surface)}.pdx-step-actions{display:flex;gap:8px;padding-top:8px}::ng-deep .praxis-stepper .mat-step-header{border-radius:999px;margin:4px 0;color:var(--md-sys-color-on-surface)}::ng-deep .praxis-stepper .mat-step-label{color:var(--md-sys-color-on-surface)}::ng-deep .praxis-stepper .mat-step-label.mat-step-label-selected{color:var(--md-sys-color-on-surface);font-weight:600}::ng-deep .praxis-stepper .mat-step-header:hover{background:var(--md-sys-color-primary-container)}::ng-deep .praxis-stepper .mat-step-header.cdk-keyboard-focused,::ng-deep .praxis-stepper .mat-step-header.cdk-program-focused{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}::ng-deep .praxis-stepper .mat-step-icon{background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface)}::ng-deep .praxis-stepper .mat-step-icon-selected{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}::ng-deep .praxis-stepper .mat-step-icon-state-done{background:var(--md-sys-color-tertiary);color:var(--md-sys-color-on-tertiary)}::ng-deep .praxis-stepper .mat-step-icon-state-error{background:var(--md-sys-color-error);color:var(--md-sys-color-on-error)}::ng-deep .praxis-stepper .mat-stepper-horizontal-line{border-top-color:var(--md-sys-color-outline-variant)}::ng-deep .praxis-stepper .mat-stepper-vertical-line:before{border-left-color:var(--md-sys-color-outline-variant)}::ng-deep .pdx-stepper-ft-light .mat-stepper-horizontal{background:transparent}::ng-deep .pdx-stepper-ft-light .mat-horizontal-stepper-header-container{margin-bottom:14px;justify-content:flex-start;align-items:center}::ng-deep .pdx-stepper-ft-light .mat-step-header{min-height:28px;font-size:.75rem;color:var(--praxis-wizard-muted, var(--md-sys-color-on-surface-variant))}::ng-deep .pdx-stepper-ft-light .mat-step-label.mat-step-label-active,::ng-deep .pdx-stepper-ft-light .mat-step-label.mat-step-label-selected{color:var(--md-sys-color-on-surface);font-weight:600}::ng-deep .pdx-stepper-ft-light .mat-step-icon{height:16px;width:16px;font-size:9px;background:transparent;border:1px solid var(--md-sys-color-outline-variant);color:var(--praxis-wizard-muted, var(--md-sys-color-on-surface-variant))}::ng-deep .pdx-stepper-ft-light .mat-step-icon .mat-icon{display:none}::ng-deep .pdx-stepper-ft-light .mat-step-icon-content{font-weight:600;font-size:9px;line-height:1}::ng-deep .pdx-stepper-ft-light .mat-step-icon-state-done,::ng-deep .pdx-stepper-ft-light .mat-step-icon-selected{background:var(--praxis-wizard-accent, var(--md-sys-color-primary, currentColor));border-color:var(--praxis-wizard-accent, var(--md-sys-color-primary, currentColor));color:var(--praxis-wizard-accent-on, var(--md-sys-color-on-primary, #ffffff))}::ng-deep .pdx-stepper-ft-light .mat-stepper-horizontal-line{border-top-color:var(--md-sys-color-outline-variant);border-top-width:1px;margin:0 8px;flex:1 1 0}::ng-deep .pdx-stepper-ft-light .mat-step-header{padding:0 6px;flex:0 0 auto}::ng-deep .pdx-stepper-ft-light .mat-step-header.cdk-keyboard-focused,::ng-deep .pdx-stepper-ft-light .mat-step-header.cdk-program-focused,::ng-deep .pdx-stepper-ft-light .mat-step-header.cdk-focused,::ng-deep .pdx-stepper-ft-light .mat-step-header.cdk-mouse-focused{outline:none;box-shadow:none;background:transparent}::ng-deep .pdx-stepper-ft-light .mat-step-header:hover{background:transparent}::ng-deep .ft-stepper{background:transparent}::ng-deep .ft-stepper .mat-horizontal-stepper-header-container{margin-bottom:16px}::ng-deep .ft-stepper .mat-step-header{font-size:.8rem;color:var(--praxis-wizard-muted, var(--md-sys-color-on-surface-variant))}::ng-deep .ft-stepper .mat-step-label.mat-step-label-active,::ng-deep .ft-stepper .mat-step-label.mat-step-label-selected{color:var(--md-sys-color-on-surface);font-weight:600}::ng-deep .ft-stepper .mat-step-icon{height:22px;width:22px;font-size:11px;background:var(--praxis-wizard-card-bg, var(--md-sys-color-surface));border:2px solid var(--md-sys-color-outline-variant);color:var(--praxis-wizard-muted, var(--md-sys-color-on-surface-variant))}::ng-deep .ft-stepper .mat-step-icon-state-done,::ng-deep .ft-stepper .mat-step-icon-selected{background:var(--praxis-wizard-accent, var(--md-sys-color-primary, currentColor));border-color:var(--praxis-wizard-accent, var(--md-sys-color-primary, currentColor));color:var(--praxis-wizard-accent-on, var(--md-sys-color-on-primary, #ffffff))}::ng-deep .ft-stepper .mat-stepper-horizontal-line{border-top-color:var(--md-sys-color-outline-variant)}.ft-stepper-content{padding:0}.ft-stepper-content .form-section{border:none;padding:0;background:transparent}.nav-align-start{justify-content:flex-start}.nav-align-center{justify-content:center}.nav-align-end{justify-content:flex-end}.nav-align-space-between{justify-content:space-between}.edit-fab{position:absolute;right:12px;bottom:12px;z-index:2}.stepper-ai-assistant{position:absolute;right:12px;bottom:72px;z-index:3}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatStepperModule }, { kind: "component", type: i2$1.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i2$1.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i2$1.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: i2$1.MatStepperIcon, selector: "ng-template[matStepperIcon]", inputs: ["matStepperIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.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: i6.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "component", type: PraxisDynamicForm, selector: "praxis-dynamic-form", inputs: ["resourcePath", "resourceId", "mode", "config", "schemaSource", "editModeEnabled", "formId", "componentInstanceId", "layout", "backConfig", "hooks", "removeEmptyContainersOnSave", "reactiveValidation", "reactiveValidationDebounceMs", "notifyIfOutdated", "snoozeMs", "autoOpenSettingsOnOutdated", "readonlyModeGlobal", "disabledModeGlobal", "presentationModeGlobal", "visibleGlobal", "customEndpoints"], outputs: ["formSubmit", "formCancel", "formReset", "configChange", "formReady", "valueChange", "syncCompleted", "initializationError", "loadingStateChange", "editModeEnabledChange", "customAction", "actionConfirmation", "schemaStatusChange", "fieldRenderError"] }, { kind: "directive", type: DynamicWidgetLoaderDirective, selector: "[dynamicWidgetLoader]", inputs: ["dynamicWidgetLoader", "context", "strictValidation", "autoWireOutputs"], outputs: ["widgetEvent"], exportAs: ["dynamicWidgetLoader"] }, { kind: "component", type: EmptyStateCardComponent, selector: "praxis-empty-state-card", inputs: ["icon", "title", "description", "primaryAction", "secondaryActions", "inline", "tone"] }, { kind: "component", type: PraxisAiAssistantComponent, selector: "praxis-ai-assistant", inputs: ["adapter", "riskPolicy", "allowManualPatchEdit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3347
+ `, isInline: true, styles: [":host{display:block;position:relative}.praxis-stepper{width:100%;background:var(--md-sys-color-surface);border:1px solid var(--md-sys-color-outline-variant);border-radius:16px;padding:12px;box-shadow:var(--mat-elevation-level1)}.praxis-stepper.pdx-stepper-ft-light{background:transparent;border:none;border-radius:0;padding:0;box-shadow:none}:host(.density-compact) ::ng-deep .mat-step-header{min-height:36px}:host(.density-compact) .pdx-step-actions{padding-top:4px;gap:6px}:host(.density-comfortable) ::ng-deep .mat-step-header{min-height:44px}.pdx-step-content{padding:12px 4px 8px;color:var(--md-sys-color-on-surface)}.pdx-step-actions{display:flex;gap:8px;padding-top:8px}::ng-deep .praxis-stepper .mat-step-header{border-radius:999px;margin:4px 0;color:var(--md-sys-color-on-surface)}::ng-deep .praxis-stepper .mat-step-label{color:var(--md-sys-color-on-surface)}::ng-deep .praxis-stepper .mat-step-label.mat-step-label-selected{color:var(--md-sys-color-on-surface);font-weight:600}::ng-deep .praxis-stepper .mat-step-header.cdk-keyboard-focused,::ng-deep .praxis-stepper .mat-step-header.cdk-program-focused{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}::ng-deep .praxis-stepper .mat-step-icon{background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface)}::ng-deep .praxis-stepper .mat-step-icon-selected{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}::ng-deep .praxis-stepper .mat-step-icon-state-done{background:var(--md-sys-color-tertiary);color:var(--md-sys-color-on-tertiary)}::ng-deep .praxis-stepper .mat-step-icon-state-error{background:var(--md-sys-color-error);color:var(--md-sys-color-on-error)}::ng-deep .praxis-stepper .mat-stepper-horizontal-line{border-top-color:var(--md-sys-color-outline-variant)}::ng-deep .praxis-stepper .mat-stepper-vertical-line:before{border-left-color:var(--md-sys-color-outline-variant)}::ng-deep .pdx-stepper-ft-light .mat-stepper-horizontal{background:transparent;--mat-stepper-header-hover-state-layer-color: color-mix( in srgb, var(--md-sys-color-on-surface) 8%, transparent );--mat-stepper-header-focus-state-layer-color: transparent;--mat-stepper-header-hover-state-layer-shape: 14px;--mat-stepper-header-focus-state-layer-shape: 14px}::ng-deep .pdx-stepper-ft-light .mat-step-header{margin:0}::ng-deep .pdx-stepper-ft-light .mat-step-header .mat-step-header-ripple{display:none}::ng-deep .ft-stepper{background:transparent}.ft-stepper-content{padding:0}.ft-stepper-content .form-section{border:none;padding:0;background:transparent}.nav-align-start{justify-content:flex-start}.nav-align-center{justify-content:center}.nav-align-end{justify-content:flex-end}.nav-align-space-between{justify-content:space-between}.edit-fab{position:absolute;right:12px;bottom:12px;z-index:2}.stepper-ai-assistant{position:absolute;right:12px;bottom:72px;z-index:3}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatStepperModule }, { kind: "component", type: i2$1.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i2$1.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i2$1.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: i2$1.MatStepperIcon, selector: "ng-template[matStepperIcon]", inputs: ["matStepperIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.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: i6.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "component", type: PraxisDynamicForm, selector: "praxis-dynamic-form", inputs: ["resourcePath", "resourceId", "mode", "config", "schemaSource", "editModeEnabled", "formId", "componentInstanceId", "layout", "backConfig", "hooks", "removeEmptyContainersOnSave", "reactiveValidation", "reactiveValidationDebounceMs", "notifyIfOutdated", "snoozeMs", "autoOpenSettingsOnOutdated", "readonlyModeGlobal", "disabledModeGlobal", "presentationModeGlobal", "visibleGlobal", "customEndpoints"], outputs: ["formSubmit", "formCancel", "formReset", "configChange", "formReady", "valueChange", "syncCompleted", "initializationError", "loadingStateChange", "editModeEnabledChange", "customAction", "actionConfirmation", "schemaStatusChange", "fieldRenderError"] }, { kind: "directive", type: DynamicWidgetLoaderDirective, selector: "[dynamicWidgetLoader]", inputs: ["dynamicWidgetLoader", "context", "strictValidation", "autoWireOutputs"], outputs: ["widgetEvent"], exportAs: ["dynamicWidgetLoader"] }, { kind: "component", type: EmptyStateCardComponent, selector: "praxis-empty-state-card", inputs: ["icon", "title", "description", "primaryAction", "secondaryActions", "inline", "tone"] }, { kind: "component", type: PraxisAiAssistantComponent, selector: "praxis-ai-assistant", inputs: ["adapter", "riskPolicy", "allowManualPatchEdit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3486
3348
  }
3487
3349
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisStepper, decorators: [{
3488
3350
  type: Component,
@@ -3640,7 +3502,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
3640
3502
  >
3641
3503
  <mat-icon fontIcon="edit"></mat-icon>
3642
3504
  </button>
3643
- `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;position:relative}.praxis-stepper{width:100%;background:var(--md-sys-color-surface);border:1px solid var(--md-sys-color-outline-variant);border-radius:16px;padding:12px;box-shadow:var(--mat-elevation-level1)}.praxis-stepper.pdx-stepper-ft-light{background:transparent;border:none;border-radius:0;padding:0;box-shadow:none}:host(.density-compact) ::ng-deep .mat-step-header{min-height:36px}:host(.density-compact) .pdx-step-actions{padding-top:4px;gap:6px}:host(.density-comfortable) ::ng-deep .mat-step-header{min-height:44px}.pdx-step-content{padding:12px 4px 8px;color:var(--md-sys-color-on-surface)}.pdx-step-actions{display:flex;gap:8px;padding-top:8px}::ng-deep .praxis-stepper .mat-step-header{border-radius:999px;margin:4px 0;color:var(--md-sys-color-on-surface)}::ng-deep .praxis-stepper .mat-step-label{color:var(--md-sys-color-on-surface)}::ng-deep .praxis-stepper .mat-step-label.mat-step-label-selected{color:var(--md-sys-color-on-surface);font-weight:600}::ng-deep .praxis-stepper .mat-step-header:hover{background:var(--md-sys-color-primary-container)}::ng-deep .praxis-stepper .mat-step-header.cdk-keyboard-focused,::ng-deep .praxis-stepper .mat-step-header.cdk-program-focused{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}::ng-deep .praxis-stepper .mat-step-icon{background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface)}::ng-deep .praxis-stepper .mat-step-icon-selected{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}::ng-deep .praxis-stepper .mat-step-icon-state-done{background:var(--md-sys-color-tertiary);color:var(--md-sys-color-on-tertiary)}::ng-deep .praxis-stepper .mat-step-icon-state-error{background:var(--md-sys-color-error);color:var(--md-sys-color-on-error)}::ng-deep .praxis-stepper .mat-stepper-horizontal-line{border-top-color:var(--md-sys-color-outline-variant)}::ng-deep .praxis-stepper .mat-stepper-vertical-line:before{border-left-color:var(--md-sys-color-outline-variant)}::ng-deep .pdx-stepper-ft-light .mat-stepper-horizontal{background:transparent}::ng-deep .pdx-stepper-ft-light .mat-horizontal-stepper-header-container{margin-bottom:14px;justify-content:flex-start;align-items:center}::ng-deep .pdx-stepper-ft-light .mat-step-header{min-height:28px;font-size:.75rem;color:var(--praxis-wizard-muted, var(--md-sys-color-on-surface-variant))}::ng-deep .pdx-stepper-ft-light .mat-step-label.mat-step-label-active,::ng-deep .pdx-stepper-ft-light .mat-step-label.mat-step-label-selected{color:var(--md-sys-color-on-surface);font-weight:600}::ng-deep .pdx-stepper-ft-light .mat-step-icon{height:16px;width:16px;font-size:9px;background:transparent;border:1px solid var(--md-sys-color-outline-variant);color:var(--praxis-wizard-muted, var(--md-sys-color-on-surface-variant))}::ng-deep .pdx-stepper-ft-light .mat-step-icon .mat-icon{display:none}::ng-deep .pdx-stepper-ft-light .mat-step-icon-content{font-weight:600;font-size:9px;line-height:1}::ng-deep .pdx-stepper-ft-light .mat-step-icon-state-done,::ng-deep .pdx-stepper-ft-light .mat-step-icon-selected{background:var(--praxis-wizard-accent, var(--md-sys-color-primary, currentColor));border-color:var(--praxis-wizard-accent, var(--md-sys-color-primary, currentColor));color:var(--praxis-wizard-accent-on, var(--md-sys-color-on-primary, #ffffff))}::ng-deep .pdx-stepper-ft-light .mat-stepper-horizontal-line{border-top-color:var(--md-sys-color-outline-variant);border-top-width:1px;margin:0 8px;flex:1 1 0}::ng-deep .pdx-stepper-ft-light .mat-step-header{padding:0 6px;flex:0 0 auto}::ng-deep .pdx-stepper-ft-light .mat-step-header.cdk-keyboard-focused,::ng-deep .pdx-stepper-ft-light .mat-step-header.cdk-program-focused,::ng-deep .pdx-stepper-ft-light .mat-step-header.cdk-focused,::ng-deep .pdx-stepper-ft-light .mat-step-header.cdk-mouse-focused{outline:none;box-shadow:none;background:transparent}::ng-deep .pdx-stepper-ft-light .mat-step-header:hover{background:transparent}::ng-deep .ft-stepper{background:transparent}::ng-deep .ft-stepper .mat-horizontal-stepper-header-container{margin-bottom:16px}::ng-deep .ft-stepper .mat-step-header{font-size:.8rem;color:var(--praxis-wizard-muted, var(--md-sys-color-on-surface-variant))}::ng-deep .ft-stepper .mat-step-label.mat-step-label-active,::ng-deep .ft-stepper .mat-step-label.mat-step-label-selected{color:var(--md-sys-color-on-surface);font-weight:600}::ng-deep .ft-stepper .mat-step-icon{height:22px;width:22px;font-size:11px;background:var(--praxis-wizard-card-bg, var(--md-sys-color-surface));border:2px solid var(--md-sys-color-outline-variant);color:var(--praxis-wizard-muted, var(--md-sys-color-on-surface-variant))}::ng-deep .ft-stepper .mat-step-icon-state-done,::ng-deep .ft-stepper .mat-step-icon-selected{background:var(--praxis-wizard-accent, var(--md-sys-color-primary, currentColor));border-color:var(--praxis-wizard-accent, var(--md-sys-color-primary, currentColor));color:var(--praxis-wizard-accent-on, var(--md-sys-color-on-primary, #ffffff))}::ng-deep .ft-stepper .mat-stepper-horizontal-line{border-top-color:var(--md-sys-color-outline-variant)}.ft-stepper-content{padding:0}.ft-stepper-content .form-section{border:none;padding:0;background:transparent}.nav-align-start{justify-content:flex-start}.nav-align-center{justify-content:center}.nav-align-end{justify-content:flex-end}.nav-align-space-between{justify-content:space-between}.edit-fab{position:absolute;right:12px;bottom:12px;z-index:2}.stepper-ai-assistant{position:absolute;right:12px;bottom:72px;z-index:3}\n"] }]
3505
+ `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;position:relative}.praxis-stepper{width:100%;background:var(--md-sys-color-surface);border:1px solid var(--md-sys-color-outline-variant);border-radius:16px;padding:12px;box-shadow:var(--mat-elevation-level1)}.praxis-stepper.pdx-stepper-ft-light{background:transparent;border:none;border-radius:0;padding:0;box-shadow:none}:host(.density-compact) ::ng-deep .mat-step-header{min-height:36px}:host(.density-compact) .pdx-step-actions{padding-top:4px;gap:6px}:host(.density-comfortable) ::ng-deep .mat-step-header{min-height:44px}.pdx-step-content{padding:12px 4px 8px;color:var(--md-sys-color-on-surface)}.pdx-step-actions{display:flex;gap:8px;padding-top:8px}::ng-deep .praxis-stepper .mat-step-header{border-radius:999px;margin:4px 0;color:var(--md-sys-color-on-surface)}::ng-deep .praxis-stepper .mat-step-label{color:var(--md-sys-color-on-surface)}::ng-deep .praxis-stepper .mat-step-label.mat-step-label-selected{color:var(--md-sys-color-on-surface);font-weight:600}::ng-deep .praxis-stepper .mat-step-header.cdk-keyboard-focused,::ng-deep .praxis-stepper .mat-step-header.cdk-program-focused{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}::ng-deep .praxis-stepper .mat-step-icon{background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface)}::ng-deep .praxis-stepper .mat-step-icon-selected{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}::ng-deep .praxis-stepper .mat-step-icon-state-done{background:var(--md-sys-color-tertiary);color:var(--md-sys-color-on-tertiary)}::ng-deep .praxis-stepper .mat-step-icon-state-error{background:var(--md-sys-color-error);color:var(--md-sys-color-on-error)}::ng-deep .praxis-stepper .mat-stepper-horizontal-line{border-top-color:var(--md-sys-color-outline-variant)}::ng-deep .praxis-stepper .mat-stepper-vertical-line:before{border-left-color:var(--md-sys-color-outline-variant)}::ng-deep .pdx-stepper-ft-light .mat-stepper-horizontal{background:transparent;--mat-stepper-header-hover-state-layer-color: color-mix( in srgb, var(--md-sys-color-on-surface) 8%, transparent );--mat-stepper-header-focus-state-layer-color: transparent;--mat-stepper-header-hover-state-layer-shape: 14px;--mat-stepper-header-focus-state-layer-shape: 14px}::ng-deep .pdx-stepper-ft-light .mat-step-header{margin:0}::ng-deep .pdx-stepper-ft-light .mat-step-header .mat-step-header-ripple{display:none}::ng-deep .ft-stepper{background:transparent}.ft-stepper-content{padding:0}.ft-stepper-content .form-section{border:none;padding:0;background:transparent}.nav-align-start{justify-content:flex-start}.nav-align-center{justify-content:center}.nav-align-end{justify-content:flex-end}.nav-align-space-between{justify-content:space-between}.edit-fab{position:absolute;right:12px;bottom:12px;z-index:2}.stepper-ai-assistant{position:absolute;right:12px;bottom:72px;z-index:3}\n"] }]
3644
3506
  }], propDecorators: { stepLabelTpl: [{
3645
3507
  type: ContentChild,
3646
3508
  args: ['stepLabelTpl', { read: TemplateRef }]
@@ -3705,7 +3567,7 @@ class PraxisWizardBenefitsGridComponent {
3705
3567
  </div>
3706
3568
  </div>
3707
3569
  </section>
3708
- `, isInline: true, styles: [":host{display:block}.pwx-benefits{display:flex;flex-direction:column;gap:10px}.pwx-benefits-title{margin:0;font-size:.9rem;font-weight:600;color:var(--md-sys-color-on-surface);letter-spacing:.02em;display:flex;align-items:center;gap:12px}.pwx-benefits-title:before,.pwx-benefits-title:after{content:\"\";height:1px;flex:1;background:var(--md-sys-color-outline-variant)}.pwx-benefits-grid{display:grid;grid-template-columns:repeat(var(--pwx-columns),minmax(0,1fr));gap:14px 18px}.pwx-benefits-grid.is-boxed{padding:10px 12px;border:1px solid var(--md-sys-color-outline-variant);border-radius:6px;background:var(--md-sys-color-surface)}.pwx-benefit{display:flex;gap:10px;align-items:flex-start}.pwx-benefit-icon{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;color:var(--praxis-wizard-accent, var(--md-sys-color-primary))}.pwx-benefit-title{font-weight:600;font-size:.88rem;color:var(--md-sys-color-on-surface)}.pwx-benefit-text{font-size:.82rem;color:var(--praxis-wizard-muted, var(--md-sys-color-on-surface-variant));line-height:1.35}@media(max-width:720px){.pwx-benefits-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:480px){.pwx-benefits-grid{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3570
+ `, isInline: true, styles: [":host{display:block}.pwx-benefits{display:flex;flex-direction:column;gap:10px}.pwx-benefits-title{margin:0;font-size:.9rem;font-weight:600;color:var(--md-sys-color-on-surface);letter-spacing:.02em;display:flex;align-items:center;gap:12px}.pwx-benefits-title:before,.pwx-benefits-title:after{content:\"\";height:1px;flex:1;background:var(--md-sys-color-outline-variant)}.pwx-benefits-grid{display:grid;grid-template-columns:repeat(var(--pwx-columns),minmax(0,1fr));gap:12px 16px;align-items:start}.pwx-benefits-grid.is-boxed{padding:12px 14px;border:1px solid var(--md-sys-color-outline-variant);border-radius:6px;background:var(--md-sys-color-surface)}.pwx-benefit{display:flex;gap:10px;align-items:flex-start;min-height:0}.pwx-benefit-icon{width:24px;min-width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;line-height:1;color:var(--praxis-wizard-accent, var(--md-sys-color-primary))}.pwx-benefit-icon mat-icon{width:24px;height:24px;font-size:24px;line-height:24px;display:block;overflow:visible}.pwx-benefit-title{font-weight:600;font-size:.88rem;color:var(--md-sys-color-on-surface)}.pwx-benefit-text{font-size:.82rem;color:var(--praxis-wizard-muted, var(--md-sys-color-on-surface-variant));line-height:1.35}@media(max-width:720px){.pwx-benefits-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:480px){.pwx-benefits-grid{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3709
3571
  }
3710
3572
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisWizardBenefitsGridComponent, decorators: [{
3711
3573
  type: Component,
@@ -3728,7 +3590,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
3728
3590
  </div>
3729
3591
  </div>
3730
3592
  </section>
3731
- `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.pwx-benefits{display:flex;flex-direction:column;gap:10px}.pwx-benefits-title{margin:0;font-size:.9rem;font-weight:600;color:var(--md-sys-color-on-surface);letter-spacing:.02em;display:flex;align-items:center;gap:12px}.pwx-benefits-title:before,.pwx-benefits-title:after{content:\"\";height:1px;flex:1;background:var(--md-sys-color-outline-variant)}.pwx-benefits-grid{display:grid;grid-template-columns:repeat(var(--pwx-columns),minmax(0,1fr));gap:14px 18px}.pwx-benefits-grid.is-boxed{padding:10px 12px;border:1px solid var(--md-sys-color-outline-variant);border-radius:6px;background:var(--md-sys-color-surface)}.pwx-benefit{display:flex;gap:10px;align-items:flex-start}.pwx-benefit-icon{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;color:var(--praxis-wizard-accent, var(--md-sys-color-primary))}.pwx-benefit-title{font-weight:600;font-size:.88rem;color:var(--md-sys-color-on-surface)}.pwx-benefit-text{font-size:.82rem;color:var(--praxis-wizard-muted, var(--md-sys-color-on-surface-variant));line-height:1.35}@media(max-width:720px){.pwx-benefits-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:480px){.pwx-benefits-grid{grid-template-columns:1fr}}\n"] }]
3593
+ `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.pwx-benefits{display:flex;flex-direction:column;gap:10px}.pwx-benefits-title{margin:0;font-size:.9rem;font-weight:600;color:var(--md-sys-color-on-surface);letter-spacing:.02em;display:flex;align-items:center;gap:12px}.pwx-benefits-title:before,.pwx-benefits-title:after{content:\"\";height:1px;flex:1;background:var(--md-sys-color-outline-variant)}.pwx-benefits-grid{display:grid;grid-template-columns:repeat(var(--pwx-columns),minmax(0,1fr));gap:12px 16px;align-items:start}.pwx-benefits-grid.is-boxed{padding:12px 14px;border:1px solid var(--md-sys-color-outline-variant);border-radius:6px;background:var(--md-sys-color-surface)}.pwx-benefit{display:flex;gap:10px;align-items:flex-start;min-height:0}.pwx-benefit-icon{width:24px;min-width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;line-height:1;color:var(--praxis-wizard-accent, var(--md-sys-color-primary))}.pwx-benefit-icon mat-icon{width:24px;height:24px;font-size:24px;line-height:24px;display:block;overflow:visible}.pwx-benefit-title{font-weight:600;font-size:.88rem;color:var(--md-sys-color-on-surface)}.pwx-benefit-text{font-size:.82rem;color:var(--praxis-wizard-muted, var(--md-sys-color-on-surface-variant));line-height:1.35}@media(max-width:720px){.pwx-benefits-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:480px){.pwx-benefits-grid{grid-template-columns:1fr}}\n"] }]
3732
3594
  }], propDecorators: { blockId: [{
3733
3595
  type: Input
3734
3596
  }], title: [{
@@ -4004,34 +3866,34 @@ function providePraxisStepperMetadata() {
4004
3866
  }
4005
3867
 
4006
3868
  const FT_WIZARD_JSON = `{
4007
- "id": "ft-edit-wizard",
4008
- "brand": "FINANCIAL TIMES",
3869
+ "id": "advanced-onboarding-wizard",
3870
+ "brand": "PRAXIS UI",
4009
3871
  "progress": {
4010
3872
  "variant": "line",
4011
3873
  "showLabels": true,
4012
3874
  "labelPosition": "bottom"
4013
3875
  },
4014
3876
  "cta": {
4015
- "label": "Continue",
3877
+ "label": "Continuar",
4016
3878
  "action": "next",
4017
- "secondaryLabel": "Back",
3879
+ "secondaryLabel": "Voltar",
4018
3880
  "secondaryAction": "prev",
4019
3881
  "sticky": true
4020
3882
  },
4021
3883
  "preferences": {
4022
3884
  "stepId": "preferences",
4023
- "storageKey": "praxis:ft-wizard",
4024
- "persistFields": ["topStories", "invitesOffers", "recommendations"]
3885
+ "storageKey": "praxis:advanced-wizard",
3886
+ "persistFields": ["novidadesProduto", "eventosConteudo", "recomendacoes"]
4025
3887
  },
4026
3888
  "theme": {
4027
- "praxis-wizard-card-bg": "#fff1e5",
4028
- "md-sys-color-surface": "#fff1e5",
3889
+ "praxis-wizard-card-bg": "#fff7ef",
3890
+ "md-sys-color-surface": "#fff7ef",
4029
3891
  "md-sys-color-on-surface": "#33302e",
4030
3892
  "praxis-wizard-accent": "#0d7680",
4031
3893
  "praxis-wizard-border": "#cfcfcf",
4032
3894
  "md-sys-color-outline-variant": "#cfcfcf",
4033
- "ft-font-head": "\\\"Financier Display\\\", Georgia, serif",
4034
- "ft-font-body": "\\\"Metric\\\", \\\"Helvetica Neue\\\", Helvetica, Arial, sans-serif",
3895
+ "ft-font-head": "Georgia, \\\"Times New Roman\\\", serif",
3896
+ "ft-font-body": "\\\"Source Sans 3\\\", \\\"Segoe UI\\\", Arial, sans-serif",
4035
3897
  "ft-radius": "0",
4036
3898
  "ft-shadow": "none",
4037
3899
  "ft-header-border": "1px solid #cfcfcf"
@@ -4039,36 +3901,36 @@ const FT_WIZARD_JSON = `{
4039
3901
  "steps": [
4040
3902
  {
4041
3903
  "id": "access",
4042
- "label": "Access",
4043
- "title": "Create an FT Edit account",
4044
- "subtitle": "Get access in a couple of steps and upgrade later for the full FT experience.",
3904
+ "label": "Acesso",
3905
+ "title": "Crie sua conta",
3906
+ "subtitle": "Ative seu acesso em poucos passos e personalize a experiência desde o início.",
4045
3907
  "zones": {
4046
3908
  "intro": [
4047
3909
  {
4048
3910
  "type": "benefitsGrid",
4049
- "title": "Why register?",
3911
+ "title": "Por que se cadastrar?",
4050
3912
  "columns": 4,
4051
3913
  "boxed": true,
4052
3914
  "items": [
4053
3915
  {
4054
3916
  "icon": "format_quote",
4055
- "title": "Beyond the headlines",
4056
- "text": "Insightful news, thought-provoking opinion and fascinating features."
3917
+ "title": "Conteúdo relevante",
3918
+ "text": "Receba atualizações, novidades e materiais selecionados para o seu perfil."
4057
3919
  },
4058
3920
  {
4059
3921
  "icon": "edit_note",
4060
- "title": "Curated daily editions",
4061
- "text": "Eight fresh articles a day chosen for you by our senior editors."
3922
+ "title": "Fluxo guiado",
3923
+ "text": "Conclua o cadastro com uma jornada simples, clara e orientada por etapas."
4062
3924
  },
4063
3925
  {
4064
3926
  "icon": "bookmarks",
4065
- "title": "Never miss a great story",
4066
- "text": "Explore previous editions from the past week."
3927
+ "title": "Preferências salvas",
3928
+ "text": "Defina suas escolhas iniciais e retome o processo sem perder o progresso."
4067
3929
  },
4068
3930
  {
4069
3931
  "icon": "mail",
4070
- "title": "Receive the FT Edit newsletter",
4071
- "text": "A daily round-up delivered straight to your inbox."
3932
+ "title": "Comunicação sob controle",
3933
+ "text": "Escolha como deseja receber novidades, alertas e recomendações."
4072
3934
  }
4073
3935
  ]
4074
3936
  }
@@ -4076,12 +3938,12 @@ const FT_WIZARD_JSON = `{
4076
3938
  "footer": [
4077
3939
  {
4078
3940
  "type": "inlineNotice",
4079
- "text": "For more information about how we use your data, please refer to our privacy and cookie policies."
3941
+ "text": "Ao continuar, você concorda com os termos de uso e com a política de privacidade da plataforma."
4080
3942
  }
4081
3943
  ]
4082
3944
  },
4083
3945
  "cta": {
4084
- "label": "Register with email",
3946
+ "label": "Começar cadastro",
4085
3947
  "action": "next"
4086
3948
  },
4087
3949
  "form": {
@@ -4093,7 +3955,7 @@ const FT_WIZARD_JSON = `{
4093
3955
  {
4094
3956
  "columns": [
4095
3957
  {
4096
- "fields": ["confirmAge", "editNewsletter"]
3958
+ "fields": ["confirmAge", "receberNovidades"]
4097
3959
  }
4098
3960
  ]
4099
3961
  }
@@ -4109,44 +3971,44 @@ const FT_WIZARD_JSON = `{
4109
3971
  "layout": "horizontal",
4110
3972
  "options": [
4111
3973
  {
4112
- "label": "I confirm I am 16+ years old and agree to the Terms & Conditions.",
3974
+ "label": "Confirmo que li e aceito os termos de uso e a política de privacidade.",
4113
3975
  "value": true
4114
3976
  }
4115
3977
  ]
4116
3978
  },
4117
3979
  {
4118
- "name": "editNewsletter",
4119
- "label": "FT Edit newsletter",
3980
+ "name": "receberNovidades",
3981
+ "label": "Receber novidades por e-mail",
4120
3982
  "controlType": "toggle",
4121
3983
  "defaultValue": true,
4122
- "hint": "All new members also start receiving our daily FT Edit newsletter."
3984
+ "hint": "Você pode alterar essa preferência a qualquer momento nas configurações da conta."
4123
3985
  }
4124
3986
  ],
4125
3987
  "actions": {
4126
- "submit": { "visible": false, "label": "Submit" },
4127
- "cancel": { "visible": false, "label": "Cancel" },
4128
- "reset": { "visible": false, "label": "Reset" }
3988
+ "submit": { "visible": false, "label": "Salvar" },
3989
+ "cancel": { "visible": false, "label": "Cancelar" },
3990
+ "reset": { "visible": false, "label": "Limpar" }
4129
3991
  }
4130
3992
  }
4131
3993
  }
4132
3994
  },
4133
3995
  {
4134
3996
  "id": "account",
4135
- "label": "Account",
4136
- "title": "Create an FT Edit account",
4137
- "subtitle": "This address will be used to create your account.",
3997
+ "label": "Conta",
3998
+ "title": "Configure seu acesso",
3999
+ "subtitle": "Esses dados serão usados para criar e proteger sua conta.",
4138
4000
  "zones": {
4139
4001
  "intro": [
4140
4002
  {
4141
4003
  "type": "inlineNotice",
4142
- "text": "All new members also start receiving our daily FT Edit newsletter.",
4004
+ "text": "Use um e-mail válido para confirmar o cadastro e recuperar o acesso quando necessário.",
4143
4005
  "tone": "info"
4144
4006
  }
4145
4007
  ],
4146
4008
  "footer": [
4147
4009
  {
4148
4010
  "type": "inlineNotice",
4149
- "text": "We will send you service messages about your account, security or legal notifications."
4011
+ "text": "Mensagens de segurança e comunicações operacionais continuam ativas mesmo se você desativar novidades."
4150
4012
  }
4151
4013
  ]
4152
4014
  },
@@ -4159,7 +4021,7 @@ const FT_WIZARD_JSON = `{
4159
4021
  {
4160
4022
  "columns": [
4161
4023
  { "fields": ["email", "password"] },
4162
- { "fields": ["newsletterOptIn"] }
4024
+ { "fields": ["aceitaComunicacoes"] }
4163
4025
  ]
4164
4026
  }
4165
4027
  ]
@@ -4168,51 +4030,53 @@ const FT_WIZARD_JSON = `{
4168
4030
  "fieldMetadata": [
4169
4031
  {
4170
4032
  "name": "email",
4171
- "label": "Email address",
4033
+ "label": "E-mail",
4172
4034
  "controlType": "email",
4173
4035
  "required": true,
4174
- "placeholder": "Enter your email address"
4036
+ "placeholder": "Digite seu e-mail"
4175
4037
  },
4176
4038
  {
4177
4039
  "name": "password",
4178
- "label": "Password",
4040
+ "label": "Senha",
4179
4041
  "controlType": "password",
4180
4042
  "required": true,
4181
- "placeholder": "Enter a password",
4182
- "hint": "Use 8 or more characters. You can use letters, numbers or symbols.",
4043
+ "placeholder": "Crie uma senha",
4044
+ "hint": "Use 8 ou mais caracteres, combinando letras, números e símbolos.",
4183
4045
  "validators": {
4184
4046
  "minLength": 8
4185
4047
  },
4186
4048
  "revealToggle": {
4187
4049
  "enabled": true,
4188
- "style": "text",
4189
- "showLabel": "Show password",
4190
- "hideLabel": "Hide password",
4191
- "ariaLabel": "Toggle password visibility"
4050
+ "style": "icon",
4051
+ "showLabel": "Mostrar senha",
4052
+ "hideLabel": "Ocultar senha",
4053
+ "ariaLabel": "Alternar visibilidade da senha",
4054
+ "iconShow": "visibility",
4055
+ "iconHide": "visibility_off"
4192
4056
  }
4193
4057
  },
4194
4058
  {
4195
- "name": "newsletterOptIn",
4196
- "label": "Stay up to date",
4059
+ "name": "aceitaComunicacoes",
4060
+ "label": "Receber comunicações da plataforma",
4197
4061
  "controlType": "toggle",
4198
4062
  "defaultValue": true,
4199
- "hint": "All new members also start receiving our daily FT Edit newsletter."
4063
+ "hint": "Inclui novidades de produto, convites para eventos e conteúdos de apoio."
4200
4064
  }
4201
4065
  ],
4202
4066
  "actions": {
4203
- "submit": { "visible": false, "label": "Submit" },
4204
- "cancel": { "visible": false, "label": "Cancel" },
4205
- "reset": { "visible": false, "label": "Reset" }
4067
+ "submit": { "visible": false, "label": "Salvar" },
4068
+ "cancel": { "visible": false, "label": "Cancelar" },
4069
+ "reset": { "visible": false, "label": "Limpar" }
4206
4070
  }
4207
4071
  }
4208
4072
  }
4209
4073
  },
4210
4074
  {
4211
4075
  "id": "preferences",
4212
- "label": "Preferences",
4213
- "title": "Stay up to date",
4214
- "subtitle": "You can update these any time in your Contact Preferences.",
4215
- "description": "We will send you service messages about your account, security or legal notifications.",
4076
+ "label": "Preferências",
4077
+ "title": "Personalize sua experiência",
4078
+ "subtitle": "Você pode alterar essas configurações a qualquer momento no painel da conta.",
4079
+ "description": "Escolha quais comunicações e recomendações fazem sentido para o seu contexto.",
4216
4080
  "zones": {
4217
4081
  "footer": [
4218
4082
  {
@@ -4220,14 +4084,14 @@ const FT_WIZARD_JSON = `{
4220
4084
  },
4221
4085
  {
4222
4086
  "type": "inlineNotice",
4223
- "text": "We will send you service messages about your account, security or legal notifications."
4087
+ "text": "Alertas de segurança e mensagens essenciais sobre a conta permanecem ativos para garantir a operação."
4224
4088
  }
4225
4089
  ]
4226
4090
  },
4227
4091
  "cta": {
4228
- "label": "Create an FT Edit account",
4092
+ "label": "Concluir cadastro",
4229
4093
  "action": "submit",
4230
- "secondaryLabel": "Back",
4094
+ "secondaryLabel": "Voltar",
4231
4095
  "secondaryAction": "prev"
4232
4096
  },
4233
4097
  "form": {
@@ -4238,9 +4102,9 @@ const FT_WIZARD_JSON = `{
4238
4102
  "rows": [
4239
4103
  {
4240
4104
  "columns": [
4241
- { "fields": ["topStories"] },
4242
- { "fields": ["invitesOffers"] },
4243
- { "fields": ["recommendations"] }
4105
+ { "fields": ["novidadesProduto"] },
4106
+ { "fields": ["eventosConteudo"] },
4107
+ { "fields": ["recomendacoes"] }
4244
4108
  ]
4245
4109
  }
4246
4110
  ]
@@ -4248,31 +4112,31 @@ const FT_WIZARD_JSON = `{
4248
4112
  ],
4249
4113
  "fieldMetadata": [
4250
4114
  {
4251
- "name": "topStories",
4252
- "label": "Top stories & features",
4115
+ "name": "novidadesProduto",
4116
+ "label": "Novidades de produto",
4253
4117
  "controlType": "toggle",
4254
4118
  "defaultValue": true,
4255
- "hint": "Get the most from the Financial Times with personalised special reports, recommended reads and latest feature announcements."
4119
+ "hint": "Receba lancamentos, melhorias e comunicados importantes sobre a plataforma."
4256
4120
  },
4257
4121
  {
4258
- "name": "invitesOffers",
4259
- "label": "Invites & offers from the FT",
4122
+ "name": "eventosConteudo",
4123
+ "label": "Eventos e conteúdos especiais",
4260
4124
  "controlType": "toggle",
4261
4125
  "defaultValue": true,
4262
- "hint": "Receive exclusive personalised event invitations, carefully-curated offers and promotions from the Financial Times."
4126
+ "hint": "Seja avisado sobre webinars, materiais técnicos e convites para trilhas de capacitação."
4263
4127
  },
4264
4128
  {
4265
- "name": "recommendations",
4266
- "label": "Personal recommendations",
4129
+ "name": "recomendacoes",
4130
+ "label": "Recomendações personalizadas",
4267
4131
  "controlType": "toggle",
4268
4132
  "defaultValue": false,
4269
- "hint": "Tailored reading lists based on what you follow."
4133
+ "hint": "Receba sugestões de recursos e exemplos com base nas suas preferências de uso."
4270
4134
  }
4271
4135
  ],
4272
4136
  "actions": {
4273
- "submit": { "visible": false, "label": "Submit" },
4274
- "cancel": { "visible": false, "label": "Cancel" },
4275
- "reset": { "visible": false, "label": "Reset" }
4137
+ "submit": { "visible": false, "label": "Salvar" },
4138
+ "cancel": { "visible": false, "label": "Cancelar" },
4139
+ "reset": { "visible": false, "label": "Limpar" }
4276
4140
  }
4277
4141
  }
4278
4142
  }
@@ -4305,6 +4169,7 @@ function buildStepperConfig(wizard) {
4305
4169
  linear: true,
4306
4170
  headerPosition: 'top',
4307
4171
  labelPosition: wizard.progress?.labelPosition ?? 'bottom',
4172
+ disableRipple: true,
4308
4173
  density: 'compact',
4309
4174
  stepperClass: 'ft-stepper',
4310
4175
  headerClass: 'ft-stepper-header',
@@ -4619,7 +4484,7 @@ class PraxisWizardFormComponent {
4619
4484
  const w = this.wizard();
4620
4485
  return w?.steps?.[this.selectedIndex()] || null;
4621
4486
  }, ...(ngDevMode ? [{ debugName: "activeStep" }] : []));
4622
- wizardBrand = computed(() => this.wizard()?.brand || 'FINANCIAL TIMES', ...(ngDevMode ? [{ debugName: "wizardBrand" }] : []));
4487
+ wizardBrand = computed(() => this.wizard()?.brand || 'PRAXIS UI', ...(ngDevMode ? [{ debugName: "wizardBrand" }] : []));
4623
4488
  activeTitle = computed(() => this.activeStep()?.title || this.wizard()?.title || '', ...(ngDevMode ? [{ debugName: "activeTitle" }] : []));
4624
4489
  activeSubtitle = computed(() => this.activeStep()?.subtitle || this.wizard()?.subtitle || '', ...(ngDevMode ? [{ debugName: "activeSubtitle" }] : []));
4625
4490
  activeDescription = computed(() => this.activeStep()?.description || this.wizard()?.description || '', ...(ngDevMode ? [{ debugName: "activeDescription" }] : []));
@@ -4795,7 +4660,7 @@ class PraxisWizardFormComponent {
4795
4660
  ></praxis-wizard-cta-bar>
4796
4661
  </mat-card>
4797
4662
  </section>
4798
- `, isInline: true, styles: [":host{display:block;min-height:100vh;background:var(--md-sys-color-surface-container-low);color:var(--md-sys-color-on-surface);font-family:\"Source Sans 3\",Segoe UI,system-ui,-apple-system,sans-serif;--praxis-wizard-accent: var(--md-sys-color-primary);--praxis-wizard-accent-on: var(--md-sys-color-on-primary);--praxis-wizard-muted: var(--md-sys-color-on-surface-variant);--praxis-wizard-card-bg: var(--md-sys-color-surface);--praxis-wizard-border: var(--md-sys-color-outline-variant);--pfx-section-gap: 12px;--pfx-form-section-surface: var(--md-sys-color-surface);--pfx-form-stroke: var(--md-sys-color-outline-variant)}.ft-wizard-shell{max-width:700px;margin:0 auto;padding:28px 16px 64px;display:flex;flex-direction:column;gap:12px}.ft-wizard-header{text-align:center;border-bottom:var(--ft-header-border, none);padding-bottom:var(--ft-header-spacing, 0px);margin-bottom:var(--ft-header-spacing, 0px)}.ft-brand{font-family:Iowan Old Style,Palatino Linotype,Book Antiqua,Palatino,serif;letter-spacing:.22em;font-size:17px;text-transform:uppercase;color:var(--md-sys-color-on-surface)}.ft-wizard-card{padding:20px 22px 16px;border-radius:var(--ft-radius, 10px);box-shadow:var(--ft-shadow, 0 6px 16px rgba(33, 24, 16, .05));border:1px solid var(--praxis-wizard-border);background:var(--praxis-wizard-card-bg)}:host ::ng-deep .ft-stepper{background:transparent}:host ::ng-deep .ft-stepper .mat-stepper-horizontal{background:transparent}:host ::ng-deep .ft-stepper-content{padding-bottom:12px}:host ::ng-deep .ft-stepper-content .form-section{border-radius:var(--ft-radius, 6px);background:var(--pfx-form-section-surface);border-color:var(--pfx-form-stroke)!important;padding:10px 12px;box-shadow:var(--ft-shadow, none)!important}:host ::ng-deep .ft-stepper-content .form-section:focus-within{border-color:var(--pfx-form-stroke);box-shadow:none}:host ::ng-deep .ft-stepper-content .mat-mdc-form-field{width:100%;--mdc-outlined-text-field-container-height: 40px;--mdc-outlined-text-field-container-shape: var(--ft-radius, 4px);--mdc-outlined-text-field-outline-color: var(--md-sys-color-outline-variant);--mdc-outlined-text-field-focus-outline-color: var(--praxis-wizard-accent)}.ft-card-header h2{margin:0;font-family:var(--ft-font-head, inherit);font-size:1.32rem;font-weight:600;color:var(--md-sys-color-on-surface)}:host ::ng-deep .ft-stepper-content .mat-mdc-form-field-infix{min-height:40px;padding-top:8px;padding-bottom:6px}:host ::ng-deep .ft-stepper-content .mat-mdc-form-field-subscript-wrapper{margin-top:4px}:host ::ng-deep .ft-stepper-content .mat-mdc-floating-label,:host ::ng-deep .ft-stepper-content .mat-mdc-form-field-label{font-size:.88rem}:host ::ng-deep .ft-stepper-content .mat-mdc-form-field-hint,:host ::ng-deep .ft-stepper-content .mat-mdc-form-field-error{font-size:.78rem}:host ::ng-deep .ft-stepper-content .mat-mdc-checkbox,:host ::ng-deep .ft-stepper-content .mat-mdc-slide-toggle{margin:4px 0}:host ::ng-deep .ft-stepper-content .mat-mdc-slide-toggle .mdc-form-field,:host ::ng-deep .ft-stepper-content .mat-mdc-checkbox .mdc-form-field{gap:10px}:host ::ng-deep .ft-stepper-content .pdx-checkbox-group-wrapper{display:flex;flex-direction:column;gap:6px}:host ::ng-deep .ft-stepper-content .pdx-checkbox-label{font-size:.82rem;font-weight:600;color:var(--md-sys-color-on-surface);margin-bottom:2px}:host ::ng-deep .ft-stepper-content .pdx-checkbox-options{display:flex;flex-direction:column;gap:4px}:host ::ng-deep .ft-stepper-content .pdx-checkbox-options.pdx-checkbox-horizontal{flex-direction:row;flex-wrap:wrap;gap:12px}:host ::ng-deep .ft-stepper-content .pdx-slide-toggle-wrapper{min-height:40px;padding:2px 0}:host ::ng-deep .ft-stepper-content .mat-mdc-slide-toggle{--mdc-switch-handle-height: 16px;--mdc-switch-handle-width: 16px;--mdc-switch-track-height: 20px;--mdc-switch-track-width: 36px}:host ::ng-deep .ft-stepper-content .pdx-slide-toggle-wrapper mat-slide-toggle{justify-content:space-between}:host ::ng-deep .ft-stepper-content .pdx-hint,:host ::ng-deep .ft-stepper-content .pdx-error{font-size:.78rem;color:var(--praxis-wizard-muted, var(--md-sys-color-on-surface-variant))}.ft-card-header{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}:host ::ng-deep .ft-stepper .mat-horizontal-stepper-header-container{margin-bottom:6px}.ft-card-header h2{margin:0;font-size:1.32rem;font-weight:600;color:var(--md-sys-color-on-surface)}.ft-card-header p{margin:0;color:var(--praxis-wizard-muted);font-size:.88rem}.ft-card-description{font-size:.84rem}.ft-card-description{color:var(--praxis-wizard-muted);font-size:.88rem}:host ::ng-deep .ft-card-title{font-weight:600;color:var(--md-sys-color-on-surface)}:host ::ng-deep .ft-card-desc{color:var(--praxis-wizard-muted);font-size:.84rem}@media(max-width:600px){.ft-wizard-shell{padding:22px 12px 48px}.ft-wizard-card{padding:16px 14px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i10.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: PraxisStepper, selector: "praxis-stepper", inputs: ["stepperId", "componentInstanceId", "config", "selectedIndexInput", "selectedIndex", "disableRippleInput", "editModeEnabled", "labelPosition", "color", "serverValidate", "stepperContext"], outputs: ["selectedIndexChange", "widgetEvent", "stepFormReady", "stepFormValueChange", "animationDone", "selectionChange"] }, { kind: "component", type: PraxisWizardCtaBarComponent, selector: "praxis-wizard-cta-bar", inputs: ["primaryLabel", "primaryDisabled", "secondaryLabel", "showSecondary", "sticky"], outputs: ["primaryClick", "secondaryClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4663
+ `, isInline: true, styles: [":host{display:block;min-height:100vh;background:var(--md-sys-color-surface-container-low);color:var(--md-sys-color-on-surface);font-family:\"Source Sans 3\",Segoe UI,system-ui,-apple-system,sans-serif;--praxis-wizard-accent: var(--md-sys-color-primary);--praxis-wizard-accent-on: var(--md-sys-color-on-primary);--praxis-wizard-muted: var(--md-sys-color-on-surface-variant);--praxis-wizard-card-bg: var(--md-sys-color-surface);--praxis-wizard-border: var(--md-sys-color-outline-variant);--pfx-section-gap: 12px;--pfx-form-section-surface: var(--md-sys-color-surface);--pfx-form-stroke: var(--md-sys-color-outline-variant)}.ft-wizard-shell{max-width:700px;margin:0 auto;padding:28px 16px 64px;display:flex;flex-direction:column;gap:12px}.ft-wizard-header{text-align:center;border-bottom:var(--ft-header-border, none);padding-bottom:var(--ft-header-spacing, 0px);margin-bottom:var(--ft-header-spacing, 0px)}.ft-brand{font-family:Iowan Old Style,Palatino Linotype,Book Antiqua,Palatino,serif;letter-spacing:.22em;font-size:17px;text-transform:uppercase;color:var(--md-sys-color-on-surface)}.ft-wizard-card{padding:20px 22px 16px;border-radius:var(--ft-radius, 10px);box-shadow:var(--ft-shadow, 0 6px 16px rgba(33, 24, 16, .05));border:1px solid var(--praxis-wizard-border);background:var(--praxis-wizard-card-bg)}:host ::ng-deep .ft-stepper{background:transparent}:host ::ng-deep .ft-stepper .mat-stepper-horizontal{background:transparent}:host ::ng-deep .ft-stepper-content{display:grid;gap:10px;padding-bottom:12px}:host ::ng-deep .ft-stepper-content .form-section{border:none!important;border-radius:0;background:transparent;padding:0;box-shadow:none!important}:host ::ng-deep .ft-stepper-content .form-section:focus-within{border-color:var(--pfx-form-stroke);box-shadow:none}:host ::ng-deep .ft-stepper-content .mat-mdc-form-field{width:100%;--mdc-outlined-text-field-container-height: 40px;--mdc-outlined-text-field-container-shape: var(--ft-radius, 4px);--mdc-outlined-text-field-outline-color: var(--md-sys-color-outline-variant);--mdc-outlined-text-field-focus-outline-color: var(--praxis-wizard-accent)}.ft-card-header h2{margin:0;font-family:var(--ft-font-head, inherit);font-size:1.32rem;font-weight:600;color:var(--md-sys-color-on-surface)}:host ::ng-deep .ft-stepper-content .mat-mdc-form-field-subscript-wrapper{margin-top:4px}:host ::ng-deep .ft-stepper-content .mat-mdc-floating-label,:host ::ng-deep .ft-stepper-content .mat-mdc-form-field-label{font-size:.88rem}:host ::ng-deep .ft-stepper-content .mat-mdc-form-field-hint,:host ::ng-deep .ft-stepper-content .mat-mdc-form-field-error{font-size:.78rem}:host ::ng-deep .ft-stepper-content .mat-mdc-checkbox,:host ::ng-deep .ft-stepper-content .mat-mdc-slide-toggle{margin:4px 0}:host ::ng-deep .ft-stepper-content .mat-mdc-slide-toggle .mdc-form-field,:host ::ng-deep .ft-stepper-content .mat-mdc-checkbox .mdc-form-field{gap:10px}:host ::ng-deep .ft-stepper-content .pdx-checkbox-group-wrapper{display:flex;flex-direction:column;gap:4px}:host ::ng-deep .ft-stepper-content .pdx-checkbox-label{font-size:.82rem;font-weight:600;color:var(--md-sys-color-on-surface);margin-bottom:2px}:host ::ng-deep .ft-stepper-content .pdx-checkbox-options{display:flex;flex-direction:column;gap:4px}:host ::ng-deep .ft-stepper-content .pdx-checkbox-options.pdx-checkbox-horizontal{flex-direction:row;flex-wrap:wrap;gap:12px}:host ::ng-deep .ft-stepper-content .pdx-slide-toggle-wrapper{min-height:32px;padding:0}:host ::ng-deep .ft-stepper-content .mat-mdc-slide-toggle{--mdc-switch-handle-height: 16px;--mdc-switch-handle-width: 16px;--mdc-switch-track-height: 20px;--mdc-switch-track-width: 36px}:host ::ng-deep .ft-stepper-content .pdx-slide-toggle-wrapper mat-slide-toggle{justify-content:space-between}:host ::ng-deep .ft-stepper-content .praxis-dynamic-form{display:block}:host ::ng-deep .ft-stepper-content .form-column{display:grid;align-content:start;gap:10px}:host ::ng-deep .ft-stepper-content .form-row{margin-bottom:0!important}:host ::ng-deep .ft-stepper-content .form-column>:is(.pdx-checkbox-group-wrapper,.pdx-slide-toggle-wrapper)+:is(.pdx-checkbox-group-wrapper,.pdx-slide-toggle-wrapper){padding-top:2px;border-top:1px solid var(--pfx-form-stroke)}:host ::ng-deep .ft-stepper-content .pdx-hint,:host ::ng-deep .ft-stepper-content .pdx-error{font-size:.78rem;color:var(--praxis-wizard-muted, var(--md-sys-color-on-surface-variant))}.ft-card-header{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}.ft-card-header h2{margin:0;font-size:1.32rem;font-weight:600;color:var(--md-sys-color-on-surface)}.ft-card-header p{margin:0;color:var(--praxis-wizard-muted);font-size:.88rem}.ft-card-description{font-size:.84rem}.ft-card-description{color:var(--praxis-wizard-muted);font-size:.88rem}:host ::ng-deep .ft-card-title{font-weight:600;color:var(--md-sys-color-on-surface)}:host ::ng-deep .ft-card-desc{color:var(--praxis-wizard-muted);font-size:.84rem}@media(max-width:600px){.ft-wizard-shell{padding:22px 12px 48px}.ft-wizard-card{padding:16px 14px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: PraxisStepper, selector: "praxis-stepper", inputs: ["stepperId", "componentInstanceId", "config", "selectedIndexInput", "selectedIndex", "disableRippleInput", "editModeEnabled", "labelPosition", "color", "serverValidate", "stepperContext"], outputs: ["selectedIndexChange", "widgetEvent", "stepFormReady", "stepFormValueChange", "animationDone", "selectionChange"] }, { kind: "component", type: PraxisWizardCtaBarComponent, selector: "praxis-wizard-cta-bar", inputs: ["primaryLabel", "primaryDisabled", "secondaryLabel", "showSecondary", "sticky"], outputs: ["primaryClick", "secondaryClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4799
4664
  }
4800
4665
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisWizardFormComponent, decorators: [{
4801
4666
  type: Component,
@@ -4837,7 +4702,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
4837
4702
  ></praxis-wizard-cta-bar>
4838
4703
  </mat-card>
4839
4704
  </section>
4840
- `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-height:100vh;background:var(--md-sys-color-surface-container-low);color:var(--md-sys-color-on-surface);font-family:\"Source Sans 3\",Segoe UI,system-ui,-apple-system,sans-serif;--praxis-wizard-accent: var(--md-sys-color-primary);--praxis-wizard-accent-on: var(--md-sys-color-on-primary);--praxis-wizard-muted: var(--md-sys-color-on-surface-variant);--praxis-wizard-card-bg: var(--md-sys-color-surface);--praxis-wizard-border: var(--md-sys-color-outline-variant);--pfx-section-gap: 12px;--pfx-form-section-surface: var(--md-sys-color-surface);--pfx-form-stroke: var(--md-sys-color-outline-variant)}.ft-wizard-shell{max-width:700px;margin:0 auto;padding:28px 16px 64px;display:flex;flex-direction:column;gap:12px}.ft-wizard-header{text-align:center;border-bottom:var(--ft-header-border, none);padding-bottom:var(--ft-header-spacing, 0px);margin-bottom:var(--ft-header-spacing, 0px)}.ft-brand{font-family:Iowan Old Style,Palatino Linotype,Book Antiqua,Palatino,serif;letter-spacing:.22em;font-size:17px;text-transform:uppercase;color:var(--md-sys-color-on-surface)}.ft-wizard-card{padding:20px 22px 16px;border-radius:var(--ft-radius, 10px);box-shadow:var(--ft-shadow, 0 6px 16px rgba(33, 24, 16, .05));border:1px solid var(--praxis-wizard-border);background:var(--praxis-wizard-card-bg)}:host ::ng-deep .ft-stepper{background:transparent}:host ::ng-deep .ft-stepper .mat-stepper-horizontal{background:transparent}:host ::ng-deep .ft-stepper-content{padding-bottom:12px}:host ::ng-deep .ft-stepper-content .form-section{border-radius:var(--ft-radius, 6px);background:var(--pfx-form-section-surface);border-color:var(--pfx-form-stroke)!important;padding:10px 12px;box-shadow:var(--ft-shadow, none)!important}:host ::ng-deep .ft-stepper-content .form-section:focus-within{border-color:var(--pfx-form-stroke);box-shadow:none}:host ::ng-deep .ft-stepper-content .mat-mdc-form-field{width:100%;--mdc-outlined-text-field-container-height: 40px;--mdc-outlined-text-field-container-shape: var(--ft-radius, 4px);--mdc-outlined-text-field-outline-color: var(--md-sys-color-outline-variant);--mdc-outlined-text-field-focus-outline-color: var(--praxis-wizard-accent)}.ft-card-header h2{margin:0;font-family:var(--ft-font-head, inherit);font-size:1.32rem;font-weight:600;color:var(--md-sys-color-on-surface)}:host ::ng-deep .ft-stepper-content .mat-mdc-form-field-infix{min-height:40px;padding-top:8px;padding-bottom:6px}:host ::ng-deep .ft-stepper-content .mat-mdc-form-field-subscript-wrapper{margin-top:4px}:host ::ng-deep .ft-stepper-content .mat-mdc-floating-label,:host ::ng-deep .ft-stepper-content .mat-mdc-form-field-label{font-size:.88rem}:host ::ng-deep .ft-stepper-content .mat-mdc-form-field-hint,:host ::ng-deep .ft-stepper-content .mat-mdc-form-field-error{font-size:.78rem}:host ::ng-deep .ft-stepper-content .mat-mdc-checkbox,:host ::ng-deep .ft-stepper-content .mat-mdc-slide-toggle{margin:4px 0}:host ::ng-deep .ft-stepper-content .mat-mdc-slide-toggle .mdc-form-field,:host ::ng-deep .ft-stepper-content .mat-mdc-checkbox .mdc-form-field{gap:10px}:host ::ng-deep .ft-stepper-content .pdx-checkbox-group-wrapper{display:flex;flex-direction:column;gap:6px}:host ::ng-deep .ft-stepper-content .pdx-checkbox-label{font-size:.82rem;font-weight:600;color:var(--md-sys-color-on-surface);margin-bottom:2px}:host ::ng-deep .ft-stepper-content .pdx-checkbox-options{display:flex;flex-direction:column;gap:4px}:host ::ng-deep .ft-stepper-content .pdx-checkbox-options.pdx-checkbox-horizontal{flex-direction:row;flex-wrap:wrap;gap:12px}:host ::ng-deep .ft-stepper-content .pdx-slide-toggle-wrapper{min-height:40px;padding:2px 0}:host ::ng-deep .ft-stepper-content .mat-mdc-slide-toggle{--mdc-switch-handle-height: 16px;--mdc-switch-handle-width: 16px;--mdc-switch-track-height: 20px;--mdc-switch-track-width: 36px}:host ::ng-deep .ft-stepper-content .pdx-slide-toggle-wrapper mat-slide-toggle{justify-content:space-between}:host ::ng-deep .ft-stepper-content .pdx-hint,:host ::ng-deep .ft-stepper-content .pdx-error{font-size:.78rem;color:var(--praxis-wizard-muted, var(--md-sys-color-on-surface-variant))}.ft-card-header{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}:host ::ng-deep .ft-stepper .mat-horizontal-stepper-header-container{margin-bottom:6px}.ft-card-header h2{margin:0;font-size:1.32rem;font-weight:600;color:var(--md-sys-color-on-surface)}.ft-card-header p{margin:0;color:var(--praxis-wizard-muted);font-size:.88rem}.ft-card-description{font-size:.84rem}.ft-card-description{color:var(--praxis-wizard-muted);font-size:.88rem}:host ::ng-deep .ft-card-title{font-weight:600;color:var(--md-sys-color-on-surface)}:host ::ng-deep .ft-card-desc{color:var(--praxis-wizard-muted);font-size:.84rem}@media(max-width:600px){.ft-wizard-shell{padding:22px 12px 48px}.ft-wizard-card{padding:16px 14px}}\n"] }]
4705
+ `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-height:100vh;background:var(--md-sys-color-surface-container-low);color:var(--md-sys-color-on-surface);font-family:\"Source Sans 3\",Segoe UI,system-ui,-apple-system,sans-serif;--praxis-wizard-accent: var(--md-sys-color-primary);--praxis-wizard-accent-on: var(--md-sys-color-on-primary);--praxis-wizard-muted: var(--md-sys-color-on-surface-variant);--praxis-wizard-card-bg: var(--md-sys-color-surface);--praxis-wizard-border: var(--md-sys-color-outline-variant);--pfx-section-gap: 12px;--pfx-form-section-surface: var(--md-sys-color-surface);--pfx-form-stroke: var(--md-sys-color-outline-variant)}.ft-wizard-shell{max-width:700px;margin:0 auto;padding:28px 16px 64px;display:flex;flex-direction:column;gap:12px}.ft-wizard-header{text-align:center;border-bottom:var(--ft-header-border, none);padding-bottom:var(--ft-header-spacing, 0px);margin-bottom:var(--ft-header-spacing, 0px)}.ft-brand{font-family:Iowan Old Style,Palatino Linotype,Book Antiqua,Palatino,serif;letter-spacing:.22em;font-size:17px;text-transform:uppercase;color:var(--md-sys-color-on-surface)}.ft-wizard-card{padding:20px 22px 16px;border-radius:var(--ft-radius, 10px);box-shadow:var(--ft-shadow, 0 6px 16px rgba(33, 24, 16, .05));border:1px solid var(--praxis-wizard-border);background:var(--praxis-wizard-card-bg)}:host ::ng-deep .ft-stepper{background:transparent}:host ::ng-deep .ft-stepper .mat-stepper-horizontal{background:transparent}:host ::ng-deep .ft-stepper-content{display:grid;gap:10px;padding-bottom:12px}:host ::ng-deep .ft-stepper-content .form-section{border:none!important;border-radius:0;background:transparent;padding:0;box-shadow:none!important}:host ::ng-deep .ft-stepper-content .form-section:focus-within{border-color:var(--pfx-form-stroke);box-shadow:none}:host ::ng-deep .ft-stepper-content .mat-mdc-form-field{width:100%;--mdc-outlined-text-field-container-height: 40px;--mdc-outlined-text-field-container-shape: var(--ft-radius, 4px);--mdc-outlined-text-field-outline-color: var(--md-sys-color-outline-variant);--mdc-outlined-text-field-focus-outline-color: var(--praxis-wizard-accent)}.ft-card-header h2{margin:0;font-family:var(--ft-font-head, inherit);font-size:1.32rem;font-weight:600;color:var(--md-sys-color-on-surface)}:host ::ng-deep .ft-stepper-content .mat-mdc-form-field-subscript-wrapper{margin-top:4px}:host ::ng-deep .ft-stepper-content .mat-mdc-floating-label,:host ::ng-deep .ft-stepper-content .mat-mdc-form-field-label{font-size:.88rem}:host ::ng-deep .ft-stepper-content .mat-mdc-form-field-hint,:host ::ng-deep .ft-stepper-content .mat-mdc-form-field-error{font-size:.78rem}:host ::ng-deep .ft-stepper-content .mat-mdc-checkbox,:host ::ng-deep .ft-stepper-content .mat-mdc-slide-toggle{margin:4px 0}:host ::ng-deep .ft-stepper-content .mat-mdc-slide-toggle .mdc-form-field,:host ::ng-deep .ft-stepper-content .mat-mdc-checkbox .mdc-form-field{gap:10px}:host ::ng-deep .ft-stepper-content .pdx-checkbox-group-wrapper{display:flex;flex-direction:column;gap:4px}:host ::ng-deep .ft-stepper-content .pdx-checkbox-label{font-size:.82rem;font-weight:600;color:var(--md-sys-color-on-surface);margin-bottom:2px}:host ::ng-deep .ft-stepper-content .pdx-checkbox-options{display:flex;flex-direction:column;gap:4px}:host ::ng-deep .ft-stepper-content .pdx-checkbox-options.pdx-checkbox-horizontal{flex-direction:row;flex-wrap:wrap;gap:12px}:host ::ng-deep .ft-stepper-content .pdx-slide-toggle-wrapper{min-height:32px;padding:0}:host ::ng-deep .ft-stepper-content .mat-mdc-slide-toggle{--mdc-switch-handle-height: 16px;--mdc-switch-handle-width: 16px;--mdc-switch-track-height: 20px;--mdc-switch-track-width: 36px}:host ::ng-deep .ft-stepper-content .pdx-slide-toggle-wrapper mat-slide-toggle{justify-content:space-between}:host ::ng-deep .ft-stepper-content .praxis-dynamic-form{display:block}:host ::ng-deep .ft-stepper-content .form-column{display:grid;align-content:start;gap:10px}:host ::ng-deep .ft-stepper-content .form-row{margin-bottom:0!important}:host ::ng-deep .ft-stepper-content .form-column>:is(.pdx-checkbox-group-wrapper,.pdx-slide-toggle-wrapper)+:is(.pdx-checkbox-group-wrapper,.pdx-slide-toggle-wrapper){padding-top:2px;border-top:1px solid var(--pfx-form-stroke)}:host ::ng-deep .ft-stepper-content .pdx-hint,:host ::ng-deep .ft-stepper-content .pdx-error{font-size:.78rem;color:var(--praxis-wizard-muted, var(--md-sys-color-on-surface-variant))}.ft-card-header{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}.ft-card-header h2{margin:0;font-size:1.32rem;font-weight:600;color:var(--md-sys-color-on-surface)}.ft-card-header p{margin:0;color:var(--praxis-wizard-muted);font-size:.88rem}.ft-card-description{font-size:.84rem}.ft-card-description{color:var(--praxis-wizard-muted);font-size:.88rem}:host ::ng-deep .ft-card-title{font-weight:600;color:var(--md-sys-color-on-surface)}:host ::ng-deep .ft-card-desc{color:var(--praxis-wizard-muted);font-size:.84rem}@media(max-width:600px){.ft-wizard-shell{padding:22px 12px 48px}.ft-wizard-card{padding:16px 14px}}\n"] }]
4841
4706
  }], ctorParameters: () => [], propDecorators: { stepper: [{
4842
4707
  type: ViewChild,
4843
4708
  args: ['stepper', { static: true }]