npm - @praxisui/dynamic-form - Versions diffs - 1.0.0-beta.13 → 1.0.0-beta.15 - Mend

@praxisui/dynamic-form 1.0.0-beta.13 → 1.0.0-beta.15

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 (5) hide show

package/README.md +11 -0
package/fesm2022/praxisui-dynamic-form.mjs +26 -9
package/fesm2022/praxisui-dynamic-form.mjs.map +1 -1
package/index.d.ts +6 -1
package/package.json +7 -7

package/README.md CHANGED Viewed

@@ -113,6 +113,17 @@ Alternatively, when `editModeEnabled` is true, `praxis-dynamic-form` renders a g
 See public exports: `projects/praxis-dynamic-form/src/public-api.ts`.
+## Layout padrão (sem FormConfig)
+Quando o componente não recebe uma `FormConfig` prévia (primeira execução), ele gera um layout padrão a partir do metadata do backend:
+- Linhas/colunas: 2 campos por linha (padrão). Em telas pequenas (xs/sm) os campos empilham (1 por linha), e a partir de md ficam lado a lado.
+- Responsividade do grid (12 colunas):
+  - xs: 12, sm: 12, md: 6, lg: 6, xl: 6 (para 2 por linha). Para outros valores, a regra é `base = floor(12 / fieldsPerRow)`.
+- Largura dos campos: `mat-form-field { width: 100% }` dentro do `praxis-dynamic-form`, garantindo que o campo ocupe toda a coluna.
+- Editor de Configuração: ao abrir a aba “Layout”, o editor reflete esse layout padrão; ao aplicar/salvar, persiste a `FormConfig` no storage do host.
+- Personalização: você pode ajustar o layout pelo Editor (arrastar/seções/linhas/colunas, alterar spans) ou fornecer uma `FormConfig` completa via `[config]`.
 ## Form Actions — Layout & Styling
 A barra de ações (onde ficam "ENVIAR", "Cancelar", etc.) é configurável via `config.actions` e pelo Editor (aba "Ações").

package/fesm2022/praxisui-dynamic-form.mjs CHANGED Viewed

@@ -4485,6 +4485,9 @@ class CanvasToolbarComponent {
     selectPath = new EventEmitter();
     /** Emite quando o usuário solicita fechar a toolbar (ESC). */
     requestClose = new EventEmitter();
+    /** Estado interno para animar o fechamento. */
+    closing = false;
+    closeAnimMs = 140; // manter em sincronia com o SCSS
     // Quick actions for field-level metadata
     toggleReadonly = new EventEmitter();
     toggleRequired = new EventEmitter();
@@ -4537,18 +4540,27 @@ class CanvasToolbarComponent {
         const d = this.selectedElement?.data || {};
         return d.disabled ? 'toggle_on' : 'toggle_off';
     }
-    /** Fecha a toolbar com a tecla ESC quando o componente está visível. */
+    /** Fecha a toolbar com a tecla ESC quando o componente está visível (com animação). */
     onGlobalKeydown(ev) {
         if (ev.key === 'Escape' || ev.key === 'Esc') {
-            this.requestClose.emit();
+            this.triggerClose();
         }
     }
+    /** Inicia animação de saída e emite o evento ao final. */
+    triggerClose() {
+        if (this.closing)
+            return;
+        this.closing = true;
+        setTimeout(() => {
+            this.requestClose.emit();
+        }, this.closeAnimMs);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: CanvasToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: CanvasToolbarComponent, isStandalone: true, selector: "praxis-canvas-toolbar", inputs: { selectedElement: "selectedElement" }, outputs: { editMetadata: "editMetadata", delete: "delete", moveUp: "moveUp", moveDown: "moveDown", selectPath: "selectPath", requestClose: "requestClose", toggleReadonly: "toggleReadonly", toggleRequired: "toggleRequired", toggleHidden: "toggleHidden", toggleDisabled: "toggleDisabled" }, host: { listeners: { "document:keydown": "onGlobalKeydown($event)" } }, ngImport: i0, template: "<div class=\"canvas-toolbar-container\" role=\"toolbar\" aria-label=\"Toolbar de configura\u00E7\u00E3o do canvas\">\n  <!-- Bot\u00E3o discreto para fechar a toolbar -->\n  <button\n    type=\"button\"\n    class=\"toolbar-close\"\n    mat-icon-button\n    (click)=\"requestClose.emit()\"\n    matTooltip=\"Fechar\"\n    [matTooltipShowDelay]=\"300\"\n    aria-label=\"Fechar toolbar\"\n  >\n    <mat-icon>close</mat-icon>\n  </button>\n  <!-- Breadcrumb em linha superior, discreto -->\n  <div class=\"breadcrumb-row\">\n    <div class=\"pfx-breadcrumb\" role=\"navigation\" aria-label=\"Caminho do formul\u00E1rio\">\n      @for (part of selectedElement?.path; track part.type + part.name; let i = $index; let isLast = $last) {\n        @if (!isLast) {\n          <button\n            type=\"button\"\n            class=\"pfx-bc is-link breadcrumb-link\"\n            (click)=\"selectPath.emit(part)\"\n            [style.zIndex]=\"(selectedElement?.path?.length ?? 0) - i\"\n            [attr.aria-current]=\"null\"\n          >\n            {{ part.name }}\n          </button>\n        } @else {\n          <span\n            class=\"pfx-bc is-active breadcrumb-current\"\n            [style.zIndex]=\"(selectedElement?.path?.length ?? 0) - i\"\n            aria-current=\"page\"\n          >\n            {{ part.name }}\n          </span>\n        }\n      }\n    </div>\n  </div>\n\n  <!-- Barra de a\u00E7\u00F5es separada em grupos l\u00F3gicos -->\n  <div class=\"actions-row\">\n    @if (isSection) {\n      <div class=\"action-group group-move\" aria-label=\"Mover\">\n        <button type=\"button\" mat-icon-button (click)=\"moveUp.emit()\" matTooltip=\"Mover para cima\" [matTooltipShowDelay]=\"300\" aria-label=\"Mover para cima\">\n          <mat-icon>arrow_upward</mat-icon>\n        </button>\n        <button type=\"button\" mat-icon-button (click)=\"moveDown.emit()\" matTooltip=\"Mover para baixo\" [matTooltipShowDelay]=\"300\" aria-label=\"Mover para baixo\">\n          <mat-icon>arrow_downward</mat-icon>\n        </button>\n      </div>\n    }\n\n    <!-- Configura\u00E7\u00E3o para qualquer elemento selecionado (se\u00E7\u00E3o/linha/coluna/campo) -->\n    @if (selectedLastType && selectedLastType !== 'actions') {\n      <div class=\"action-group group-config\" aria-label=\"Configura\u00E7\u00E3o\">\n        <button\n          type=\"button\"\n          mat-icon-button\n          (click)=\"editMetadata.emit()\"\n          [matTooltip]=\"configTooltip\"\n          [matTooltipShowDelay]=\"300\"\n          [attr.aria-label]=\"configTooltip\"\n        >\n          <mat-icon>tune</mat-icon>\n        </button>\n      </div>\n    }\n\n    @if (isField) {\n      <!-- Visibilidade e estados -->\n      <div class=\"action-group group-visibility\" aria-label=\"Visibilidade e estados\">\n        <button type=\"button\" mat-icon-button (click)=\"toggleReadonly.emit()\" matTooltip=\"Alternar somente leitura\" [matTooltipShowDelay]=\"300\" aria-label=\"Alternar somente leitura\">\n          <mat-icon>{{ readonlyIcon }}</mat-icon>\n        </button>\n        <button type=\"button\" mat-icon-button (click)=\"toggleHidden.emit()\" matTooltip=\"Alternar visibilidade\" [matTooltipShowDelay]=\"300\" aria-label=\"Alternar visibilidade\">\n          <mat-icon>{{ visibilityIcon }}</mat-icon>\n        </button>\n        <button type=\"button\" mat-icon-button (click)=\"toggleDisabled.emit()\" matTooltip=\"Alternar desabilitado\" [matTooltipShowDelay]=\"300\" aria-label=\"Alternar desabilitado\">\n          <mat-icon>{{ disabledIcon }}</mat-icon>\n        </button>\n      </div>\n\n      <!-- Valida\u00E7\u00E3o / Obrigat\u00F3rio -->\n      <div class=\"action-group group-validation\" aria-label=\"Valida\u00E7\u00E3o\">\n        <button type=\"button\" mat-icon-button (click)=\"toggleRequired.emit()\" matTooltip=\"Alternar obrigat\u00F3rio\" [matTooltipShowDelay]=\"300\" aria-label=\"Alternar obrigat\u00F3rio\">\n          <mat-icon>{{ requiredIcon }}</mat-icon>\n        </button>\n      </div>\n    }\n\n    <!-- A\u00E7\u00E3o destrutiva isolada -->\n    <div class=\"action-group group-danger\" aria-label=\"A\u00E7\u00F5es perigosas\">\n      <button type=\"button\" mat-icon-button color=\"warn\" (click)=\"delete.emit()\" matTooltip=\"Remover\" [matTooltipShowDelay]=\"300\" aria-label=\"Remover\">\n        <mat-icon>delete</mat-icon>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;position:absolute;top:0;left:0;z-index:2001;pointer-events:none;--canvas-primary: var( --mat-sys-primary, var(--md-sys-color-primary, var(--sicoob-primary-default, #3f51b5)) );--canvas-surface: var( --mat-sys-surface, var(--md-sys-color-surface, var(--sicoob-bg-elev-1, var(--md-sys-color-surface))) );--canvas-on-surface: var( --mat-sys-on-surface, var(--md-sys-color-on-surface, var(--sicoob-text-high, #1f1f1f)) );--canvas-error: var( --mat-sys-error, var(--md-sys-color-error, var(--sicoob-error-default, #b00020)) );--canvas-border-color: var(--pfx-surface-border, rgba(0,0,0,.08));--primary: var(--mat-sys-primary, var(--md-sys-color-primary, var(--canvas-primary)));--on-primary: var(--mat-sys-on-primary, var(--md-sys-color-on-primary, #fff));--surface: var(--mat-sys-surface, var(--md-sys-color-surface, var(--canvas-surface)));--surface-variant: var( --mat-sys-surface-variant, color-mix(in srgb, var(--canvas-primary) 6%, var(--canvas-surface)) );--on-surface-variant: var( --mat-sys-on-surface-variant, color-mix(in srgb, var(--canvas-on-surface) 86%, transparent) );--bc-h: 28px;--bc-aw: 18px;--bc-divider: color-mix(in srgb, var(--canvas-on-surface) 14%, transparent);--bc-bg: var(--surface-variant);--bc-fg: var(--on-surface-variant);--bc-active-bg: var(--primary);--bc-active-fg: var(--on-primary);--bc-label-inset: 24px;--bc-bg-tone-1: var(--bc-bg);--bc-bg-tone-2: color-mix(in srgb, var(--bc-bg) 88%, var(--canvas-on-surface) 12%)}.canvas-toolbar-container{display:grid;grid-template-rows:auto auto;align-items:stretch;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:var(--canvas-on-surface);border-radius:10px;box-shadow:0 6px 16px #0000002e;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;pointer-events:all;transform:translateY(-100%);margin-top:-6px;position:relative;background:linear-gradient(0deg,color-mix(in srgb,var(--canvas-primary) 5%,var(--canvas-surface)) 0%,var(--canvas-surface) 100%);overflow:hidden;animation:toolbarIn .14s ease-out}.toolbar-close{position:absolute;top:2px;right:2px;z-index:3;--mdc-icon-button-state-layer-size: 28px;width:28px;height:28px;color:var(--mat-sys-on-surface, var(--md-sys-color-on-surface))}.toolbar-close .mat-icon{width:18px;height:18px;font-size:18px;line-height:18px}@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)){.canvas-toolbar-container{border:2px solid transparent;background:linear-gradient(0deg,color-mix(in srgb,var(--canvas-primary) 5%,var(--canvas-surface)) 0%,var(--canvas-surface) 100%) padding-box,var(--p-primary-gradient, linear-gradient(90deg, color-mix(in srgb, var(--mat-sys-primary) 75%, var(--mat-sys-tertiary) 25%), var(--mat-sys-tertiary))) border-box}.canvas-toolbar-container:after{display:none}}.canvas-toolbar-container:after{content:\"\";position:absolute;inset:0;border-radius:inherit;padding:2px;background:var(--p-primary-gradient, linear-gradient(90deg, color-mix(in srgb, var(--mat-sys-primary) 75%, var(--mat-sys-tertiary) 25%), var(--mat-sys-tertiary)));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}@keyframes toolbarIn{0%{opacity:0;transform:translateY(calc(-100% - 4px)) scale(.98)}to{opacity:1;transform:translateY(-100%) scale(1)}}.breadcrumb-row{display:flex;align-items:center;min-height:22px;padding-block:2px;padding-inline:8px calc(8px + var(--bc-aw, 18px));border-bottom:0;background:var(--surface)}.breadcrumb-bar{display:flex;align-items:center;white-space:nowrap}.breadcrumb-separator{display:none}.actions-row{display:flex;align-items:center;padding:4px;gap:6px;background:linear-gradient(0deg,color-mix(in srgb,var(--canvas-primary) 5%,var(--canvas-surface)) 0%,var(--canvas-surface) 80%)}.action-group{display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:6px;background:color-mix(in srgb,var(--canvas-primary) 3%,transparent);border:0}.pfx-breadcrumb{display:flex;align-items:center;white-space:nowrap;font-size:.85rem;line-height:1}.pfx-bc{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:max-content;height:var(--bc-h, 28px);padding-inline:16px 14px;padding-inline-start:calc(var(--bc-label-inset, 24px) + var(--bc-aw, 18px));margin-inline-end:calc(-1 * var(--bc-aw, 18px));--bc-bg-local: var(--bc-bg, var(--surface-variant));background:var(--bc-bg-local);color:var(--bc-fg, var(--on-surface-variant));border:0;border-radius:6px 0 0 6px;box-shadow:none!important;outline:0;background-clip:padding-box;cursor:default}.pfx-bc:after{content:\"\";position:absolute;top:0;bottom:0;right:calc(-1 * var(--bc-aw, 18px));border-top:calc(var(--bc-h, 28px) / 2) solid transparent;border-bottom:calc(var(--bc-h, 28px) / 2) solid transparent;border-left:var(--bc-aw, 18px) solid var(--bc-bg-local);transform:translate(-1px);pointer-events:none}.pfx-bc:before{display:none}.pfx-bc.is-link{cursor:pointer}.pfx-bc.is-link:hover{background:var(--surface)}.pfx-bc.is-link:hover:after{border-left-color:var(--surface)}.pfx-bc.is-active{background:var(--bc-active-bg, var(--primary));color:var(--bc-active-fg, var(--on-primary));cursor:default;font-weight:600;margin-inline-end:0;border-radius:6px 0 0 6px}.pfx-bc.is-active:after{border-left-color:var(--bc-active-bg, var(--primary))}.pfx-bc:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 35%,transparent)}.pfx-bc:first-child{border-top-left-radius:12px;border-bottom-left-radius:12px;padding-inline-start:16px}.pfx-bc:not(.is-active):nth-child(odd){--bc-bg-local: var(--bc-bg-tone-1)}.pfx-bc:not(.is-active):nth-child(2n){--bc-bg-local: var(--bc-bg-tone-2)}[dir=rtl] .pfx-bc{margin-inline-end:0;margin-inline-start:calc(-1 * var(--bc-aw, 18px))}[dir=rtl] .pfx-bc.is-active{margin-inline-start:0}[dir=rtl] .pfx-bc:after{right:auto;left:calc(-1 * var(--bc-aw, 18px));border-left:0;border-right:var(--bc-aw, 18px) solid var(--bc-bg-local);transform:translate(1px)}[dir=rtl] .pfx-bc.is-active:after{border-right-color:var(--bc-active-bg, var(--primary))}[dir=rtl] .pfx-bc:before{right:auto;left:calc(-1px - var(--bc-aw, 18px))}.action-group+.action-group{margin-left:4px}.group-danger{margin-left:8px;background:color-mix(in srgb,var(--canvas-error) 10%,transparent);border-color:color-mix(in srgb,var(--canvas-error) 16%,transparent)}.actions-row button{width:32px;height:32px;line-height:32px;display:inline-flex;align-items:center;justify-content:center;color:var(--canvas-on-surface)}.actions-row mat-icon{font-size:18px;width:18px;height:18px;line-height:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: CanvasToolbarComponent, isStandalone: true, selector: "praxis-canvas-toolbar", inputs: { selectedElement: "selectedElement" }, outputs: { editMetadata: "editMetadata", delete: "delete", moveUp: "moveUp", moveDown: "moveDown", selectPath: "selectPath", requestClose: "requestClose", toggleReadonly: "toggleReadonly", toggleRequired: "toggleRequired", toggleHidden: "toggleHidden", toggleDisabled: "toggleDisabled" }, host: { listeners: { "document:keydown": "onGlobalKeydown($event)" } }, ngImport: i0, template: "<div class=\"canvas-toolbar-container\" [class.closing]=\"closing\" role=\"toolbar\" aria-label=\"Toolbar de configura\u00E7\u00E3o do canvas\">\n  <!-- Bot\u00E3o discreto para fechar a toolbar -->\n  <button\n    type=\"button\"\n    class=\"toolbar-close\"\n    mat-icon-button\n    (click)=\"triggerClose()\"\n    matTooltip=\"Fechar\"\n    [matTooltipShowDelay]=\"300\"\n    aria-label=\"Fechar toolbar\"\n  >\n    <mat-icon>close</mat-icon>\n  </button>\n  <div class=\"toolbar-surface\">\n  <!-- Breadcrumb em linha superior, discreto -->\n  <div class=\"breadcrumb-row\">\n    <div class=\"pfx-breadcrumb\" role=\"navigation\" aria-label=\"Caminho do formul\u00E1rio\">\n      @for (part of selectedElement?.path; track part.type + part.name; let i = $index; let isLast = $last) {\n        @if (!isLast) {\n          <button\n            type=\"button\"\n            class=\"pfx-bc is-link breadcrumb-link\"\n            (click)=\"selectPath.emit(part)\"\n            [style.zIndex]=\"(selectedElement?.path?.length ?? 0) - i\"\n            [attr.aria-current]=\"null\"\n          >\n            {{ part.name }}\n          </button>\n        } @else {\n          <span\n            class=\"pfx-bc is-active breadcrumb-current\"\n            [style.zIndex]=\"(selectedElement?.path?.length ?? 0) - i\"\n            aria-current=\"page\"\n          >\n            {{ part.name }}\n          </span>\n        }\n      }\n    </div>\n  </div>\n\n  <!-- Barra de a\u00E7\u00F5es separada em grupos l\u00F3gicos -->\n  <div class=\"actions-row\">\n    @if (isSection) {\n      <div class=\"action-group group-move\" aria-label=\"Mover\">\n        <button type=\"button\" mat-icon-button (click)=\"moveUp.emit()\" matTooltip=\"Mover para cima\" [matTooltipShowDelay]=\"300\" aria-label=\"Mover para cima\">\n          <mat-icon>arrow_upward</mat-icon>\n        </button>\n        <button type=\"button\" mat-icon-button (click)=\"moveDown.emit()\" matTooltip=\"Mover para baixo\" [matTooltipShowDelay]=\"300\" aria-label=\"Mover para baixo\">\n          <mat-icon>arrow_downward</mat-icon>\n        </button>\n      </div>\n    }\n\n    <!-- Configura\u00E7\u00E3o para qualquer elemento selecionado (se\u00E7\u00E3o/linha/coluna/campo) -->\n    @if (selectedLastType && selectedLastType !== 'actions') {\n      <div class=\"action-group group-config\" aria-label=\"Configura\u00E7\u00E3o\">\n        <button\n          type=\"button\"\n          mat-icon-button\n          (click)=\"editMetadata.emit()\"\n          [matTooltip]=\"configTooltip\"\n          [matTooltipShowDelay]=\"300\"\n          [attr.aria-label]=\"configTooltip\"\n        >\n          <mat-icon>tune</mat-icon>\n        </button>\n      </div>\n    }\n\n    @if (isField) {\n      <!-- Visibilidade e estados -->\n      <div class=\"action-group group-visibility\" aria-label=\"Visibilidade e estados\">\n        <button type=\"button\" mat-icon-button (click)=\"toggleReadonly.emit()\" matTooltip=\"Alternar somente leitura\" [matTooltipShowDelay]=\"300\" aria-label=\"Alternar somente leitura\">\n          <mat-icon>{{ readonlyIcon }}</mat-icon>\n        </button>\n        <button type=\"button\" mat-icon-button (click)=\"toggleHidden.emit()\" matTooltip=\"Alternar visibilidade\" [matTooltipShowDelay]=\"300\" aria-label=\"Alternar visibilidade\">\n          <mat-icon>{{ visibilityIcon }}</mat-icon>\n        </button>\n        <button type=\"button\" mat-icon-button (click)=\"toggleDisabled.emit()\" matTooltip=\"Alternar desabilitado\" [matTooltipShowDelay]=\"300\" aria-label=\"Alternar desabilitado\">\n          <mat-icon>{{ disabledIcon }}</mat-icon>\n        </button>\n      </div>\n\n      <!-- Valida\u00E7\u00E3o / Obrigat\u00F3rio -->\n      <div class=\"action-group group-validation\" aria-label=\"Valida\u00E7\u00E3o\">\n        <button type=\"button\" mat-icon-button (click)=\"toggleRequired.emit()\" matTooltip=\"Alternar obrigat\u00F3rio\" [matTooltipShowDelay]=\"300\" aria-label=\"Alternar obrigat\u00F3rio\">\n          <mat-icon>{{ requiredIcon }}</mat-icon>\n        </button>\n      </div>\n    }\n\n    <!-- A\u00E7\u00E3o destrutiva isolada -->\n    <div class=\"action-group group-danger\" aria-label=\"A\u00E7\u00F5es perigosas\">\n      <button type=\"button\" mat-icon-button color=\"warn\" (click)=\"delete.emit()\" matTooltip=\"Remover\" [matTooltipShowDelay]=\"300\" aria-label=\"Remover\">\n        <mat-icon>delete</mat-icon>\n      </button>\n    </div>\n  </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;position:absolute;top:0;left:0;z-index:2001;pointer-events:none;--canvas-primary: var( --mat-sys-primary, var(--md-sys-color-primary, var(--sicoob-primary-default, #3f51b5)) );--canvas-surface: var( --mat-sys-surface, var(--md-sys-color-surface, var(--sicoob-bg-elev-1, var(--md-sys-color-surface))) );--canvas-on-surface: var( --mat-sys-on-surface, var(--md-sys-color-on-surface, var(--sicoob-text-high, #1f1f1f)) );--canvas-error: var( --mat-sys-error, var(--md-sys-color-error, var(--sicoob-error-default, #b00020)) );--canvas-border-color: var(--pfx-surface-border, rgba(0,0,0,.08));--primary: var(--mat-sys-primary, var(--md-sys-color-primary, var(--canvas-primary)));--on-primary: var(--mat-sys-on-primary, var(--md-sys-color-on-primary, #fff));--surface: var(--mat-sys-surface, var(--md-sys-color-surface, var(--canvas-surface)));--surface-variant: var( --mat-sys-surface-variant, color-mix(in srgb, var(--canvas-primary) 6%, var(--canvas-surface)) );--on-surface-variant: var( --mat-sys-on-surface-variant, color-mix(in srgb, var(--canvas-on-surface) 86%, transparent) );--bc-h: 28px;--bc-aw: 18px;--bc-divider: color-mix(in srgb, var(--canvas-on-surface) 14%, transparent);--bc-bg: var(--surface-variant);--bc-fg: var(--on-surface-variant);--bc-active-bg: var(--primary);--bc-active-fg: var(--on-primary);--bc-label-inset: 24px;--bc-bg-tone-1: var(--bc-bg);--bc-bg-tone-2: color-mix(in srgb, var(--bc-bg) 88%, var(--canvas-on-surface) 12%)}.canvas-toolbar-container{display:grid;grid-template-rows:auto auto;align-items:stretch;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:var(--canvas-on-surface);border-radius:10px;box-shadow:0 6px 16px #0000002e;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;pointer-events:all;transform:translateY(-100%);margin-top:-6px;position:relative;overflow:visible;animation:toolbarIn .14s ease-out}.toolbar-surface{display:grid;grid-template-rows:auto auto;border-radius:inherit;overflow:hidden;background:linear-gradient(0deg,color-mix(in srgb,var(--canvas-primary) 5%,var(--canvas-surface)) 0%,var(--canvas-surface) 100%)}.canvas-toolbar-container.closing{pointer-events:none;animation:toolbarOut .14s ease-in forwards}.toolbar-close{--p-close-size: 36px;--p-close-icon: 20px;position:absolute;top:-18px;right:-18px;z-index:10;width:var(--p-close-size);height:var(--p-close-size);border-radius:999px;display:inline-flex;align-items:center;justify-content:center;pointer-events:auto;background:color-mix(in srgb,var(--canvas-surface) 88%,var(--canvas-on-surface) 12%);border:1px solid color-mix(in srgb,var(--canvas-on-surface) 24%,transparent);box-shadow:0 1px 2px #0000004d;color:var(--mat-sys-on-surface, var(--md-sys-color-on-surface));--mdc-icon-button-state-layer-size: calc(var(--p-close-size) + 4px);opacity:0;pointer-events:none;transition:background-color .15s ease,box-shadow .15s ease,transform .06s ease,opacity .12s ease}.canvas-toolbar-container:hover .toolbar-close,.canvas-toolbar-container:focus-within .toolbar-close,.toolbar-close:focus-visible,.canvas-toolbar-container.closing .toolbar-close{opacity:1;pointer-events:auto}.toolbar-close:hover{background:color-mix(in srgb,var(--canvas-surface) 96%,var(--canvas-on-surface) 4%);box-shadow:0 2px 6px #00000047}.toolbar-close:active{transform:scale(.98)}.toolbar-close:focus-visible{outline:2px solid var(--mat-sys-primary, var(--md-sys-color-primary));outline-offset:2px}.toolbar-close .mat-icon{width:var(--p-close-icon);height:var(--p-close-icon);font-size:var(--p-close-icon);line-height:var(--p-close-icon)}@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)){.canvas-toolbar-container{border:2px solid transparent;background:linear-gradient(0deg,color-mix(in srgb,var(--canvas-primary) 5%,var(--canvas-surface)) 0%,var(--canvas-surface) 100%) padding-box,var(--p-primary-gradient, linear-gradient(90deg, color-mix(in srgb, var(--mat-sys-primary) 75%, var(--mat-sys-tertiary) 25%), var(--mat-sys-tertiary))) border-box}.canvas-toolbar-container:after{display:none}}.canvas-toolbar-container:after{content:\"\";position:absolute;inset:0;border-radius:inherit;padding:2px;background:var(--p-primary-gradient, linear-gradient(90deg, color-mix(in srgb, var(--mat-sys-primary) 75%, var(--mat-sys-tertiary) 25%), var(--mat-sys-tertiary)));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}@keyframes toolbarIn{0%{opacity:0;transform:translateY(calc(-100% - 4px)) scale(.98)}to{opacity:1;transform:translateY(-100%) scale(1)}}@keyframes toolbarOut{0%{opacity:1;transform:translateY(-100%) scale(1)}to{opacity:0;transform:translateY(calc(-100% - 4px)) scale(.98)}}.breadcrumb-row{display:flex;align-items:center;min-height:22px;padding-block:2px;padding-inline:8px calc(8px + var(--bc-aw, 18px));border-bottom:0;background:var(--surface)}.breadcrumb-bar{display:flex;align-items:center;white-space:nowrap}.breadcrumb-separator{display:none}.actions-row{display:flex;align-items:center;padding:4px;gap:6px;background:linear-gradient(0deg,color-mix(in srgb,var(--canvas-primary) 5%,var(--canvas-surface)) 0%,var(--canvas-surface) 80%)}.action-group{display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:6px;background:color-mix(in srgb,var(--canvas-primary) 3%,transparent);border:0}.pfx-breadcrumb{display:flex;align-items:center;white-space:nowrap;font-size:.85rem;line-height:1}.pfx-bc{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:max-content;height:var(--bc-h, 28px);padding-inline:16px 14px;padding-inline-start:calc(var(--bc-label-inset, 24px) + var(--bc-aw, 18px));margin-inline-end:calc(-1 * var(--bc-aw, 18px));--bc-bg-local: var(--bc-bg, var(--surface-variant));background:var(--bc-bg-local);color:var(--bc-fg, var(--on-surface-variant));border:0;border-radius:6px 0 0 6px;box-shadow:none!important;outline:0;background-clip:padding-box;cursor:default}.pfx-bc:after{content:\"\";position:absolute;top:0;bottom:0;right:calc(-1 * var(--bc-aw, 18px));border-top:calc(var(--bc-h, 28px) / 2) solid transparent;border-bottom:calc(var(--bc-h, 28px) / 2) solid transparent;border-left:var(--bc-aw, 18px) solid var(--bc-bg-local);transform:translate(-1px);pointer-events:none}.pfx-bc:before{display:none}.pfx-bc.is-link{cursor:pointer}.pfx-bc.is-link:hover{background:var(--surface)}.pfx-bc.is-link:hover:after{border-left-color:var(--surface)}.pfx-bc.is-active{background:var(--bc-active-bg, var(--primary));color:var(--bc-active-fg, var(--on-primary));cursor:default;font-weight:600;margin-inline-end:0;border-radius:6px 0 0 6px}.pfx-bc.is-active:after{border-left-color:var(--bc-active-bg, var(--primary))}.pfx-bc:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 35%,transparent)}.pfx-bc:first-child{border-top-left-radius:12px;border-bottom-left-radius:12px;padding-inline-start:16px}.pfx-bc:not(.is-active):nth-child(odd){--bc-bg-local: var(--bc-bg-tone-1)}.pfx-bc:not(.is-active):nth-child(2n){--bc-bg-local: var(--bc-bg-tone-2)}[dir=rtl] .pfx-bc{margin-inline-end:0;margin-inline-start:calc(-1 * var(--bc-aw, 18px))}[dir=rtl] .pfx-bc.is-active{margin-inline-start:0}[dir=rtl] .pfx-bc:after{right:auto;left:calc(-1 * var(--bc-aw, 18px));border-left:0;border-right:var(--bc-aw, 18px) solid var(--bc-bg-local);transform:translate(1px)}[dir=rtl] .pfx-bc.is-active:after{border-right-color:var(--bc-active-bg, var(--primary))}[dir=rtl] .pfx-bc:before{right:auto;left:calc(-1px - var(--bc-aw, 18px))}.action-group+.action-group{margin-left:4px}.group-danger{margin-left:8px;background:color-mix(in srgb,var(--canvas-error) 10%,transparent);border-color:color-mix(in srgb,var(--canvas-error) 16%,transparent)}.actions-row button{width:32px;height:32px;line-height:32px;display:inline-flex;align-items:center;justify-content:center;color:var(--canvas-on-surface)}.actions-row mat-icon{font-size:18px;width:18px;height:18px;line-height:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: CanvasToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'praxis-canvas-toolbar', standalone: true, imports: [CommonModule, MatButtonModule, MatIconModule, MatTooltipModule], template: "<div class=\"canvas-toolbar-container\" role=\"toolbar\" aria-label=\"Toolbar de configura\u00E7\u00E3o do canvas\">\n  <!-- Bot\u00E3o discreto para fechar a toolbar -->\n  <button\n    type=\"button\"\n    class=\"toolbar-close\"\n    mat-icon-button\n    (click)=\"requestClose.emit()\"\n    matTooltip=\"Fechar\"\n    [matTooltipShowDelay]=\"300\"\n    aria-label=\"Fechar toolbar\"\n  >\n    <mat-icon>close</mat-icon>\n  </button>\n  <!-- Breadcrumb em linha superior, discreto -->\n  <div class=\"breadcrumb-row\">\n    <div class=\"pfx-breadcrumb\" role=\"navigation\" aria-label=\"Caminho do formul\u00E1rio\">\n      @for (part of selectedElement?.path; track part.type + part.name; let i = $index; let isLast = $last) {\n        @if (!isLast) {\n          <button\n            type=\"button\"\n            class=\"pfx-bc is-link breadcrumb-link\"\n            (click)=\"selectPath.emit(part)\"\n            [style.zIndex]=\"(selectedElement?.path?.length ?? 0) - i\"\n            [attr.aria-current]=\"null\"\n          >\n            {{ part.name }}\n          </button>\n        } @else {\n          <span\n            class=\"pfx-bc is-active breadcrumb-current\"\n            [style.zIndex]=\"(selectedElement?.path?.length ?? 0) - i\"\n            aria-current=\"page\"\n          >\n            {{ part.name }}\n          </span>\n        }\n      }\n    </div>\n  </div>\n\n  <!-- Barra de a\u00E7\u00F5es separada em grupos l\u00F3gicos -->\n  <div class=\"actions-row\">\n    @if (isSection) {\n      <div class=\"action-group group-move\" aria-label=\"Mover\">\n        <button type=\"button\" mat-icon-button (click)=\"moveUp.emit()\" matTooltip=\"Mover para cima\" [matTooltipShowDelay]=\"300\" aria-label=\"Mover para cima\">\n          <mat-icon>arrow_upward</mat-icon>\n        </button>\n        <button type=\"button\" mat-icon-button (click)=\"moveDown.emit()\" matTooltip=\"Mover para baixo\" [matTooltipShowDelay]=\"300\" aria-label=\"Mover para baixo\">\n          <mat-icon>arrow_downward</mat-icon>\n        </button>\n      </div>\n    }\n\n    <!-- Configura\u00E7\u00E3o para qualquer elemento selecionado (se\u00E7\u00E3o/linha/coluna/campo) -->\n    @if (selectedLastType && selectedLastType !== 'actions') {\n      <div class=\"action-group group-config\" aria-label=\"Configura\u00E7\u00E3o\">\n        <button\n          type=\"button\"\n          mat-icon-button\n          (click)=\"editMetadata.emit()\"\n          [matTooltip]=\"configTooltip\"\n          [matTooltipShowDelay]=\"300\"\n          [attr.aria-label]=\"configTooltip\"\n        >\n          <mat-icon>tune</mat-icon>\n        </button>\n      </div>\n    }\n\n    @if (isField) {\n      <!-- Visibilidade e estados -->\n      <div class=\"action-group group-visibility\" aria-label=\"Visibilidade e estados\">\n        <button type=\"button\" mat-icon-button (click)=\"toggleReadonly.emit()\" matTooltip=\"Alternar somente leitura\" [matTooltipShowDelay]=\"300\" aria-label=\"Alternar somente leitura\">\n          <mat-icon>{{ readonlyIcon }}</mat-icon>\n        </button>\n        <button type=\"button\" mat-icon-button (click)=\"toggleHidden.emit()\" matTooltip=\"Alternar visibilidade\" [matTooltipShowDelay]=\"300\" aria-label=\"Alternar visibilidade\">\n          <mat-icon>{{ visibilityIcon }}</mat-icon>\n        </button>\n        <button type=\"button\" mat-icon-button (click)=\"toggleDisabled.emit()\" matTooltip=\"Alternar desabilitado\" [matTooltipShowDelay]=\"300\" aria-label=\"Alternar desabilitado\">\n          <mat-icon>{{ disabledIcon }}</mat-icon>\n        </button>\n      </div>\n\n      <!-- Valida\u00E7\u00E3o / Obrigat\u00F3rio -->\n      <div class=\"action-group group-validation\" aria-label=\"Valida\u00E7\u00E3o\">\n        <button type=\"button\" mat-icon-button (click)=\"toggleRequired.emit()\" matTooltip=\"Alternar obrigat\u00F3rio\" [matTooltipShowDelay]=\"300\" aria-label=\"Alternar obrigat\u00F3rio\">\n          <mat-icon>{{ requiredIcon }}</mat-icon>\n        </button>\n      </div>\n    }\n\n    <!-- A\u00E7\u00E3o destrutiva isolada -->\n    <div class=\"action-group group-danger\" aria-label=\"A\u00E7\u00F5es perigosas\">\n      <button type=\"button\" mat-icon-button color=\"warn\" (click)=\"delete.emit()\" matTooltip=\"Remover\" [matTooltipShowDelay]=\"300\" aria-label=\"Remover\">\n        <mat-icon>delete</mat-icon>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;position:absolute;top:0;left:0;z-index:2001;pointer-events:none;--canvas-primary: var( --mat-sys-primary, var(--md-sys-color-primary, var(--sicoob-primary-default, #3f51b5)) );--canvas-surface: var( --mat-sys-surface, var(--md-sys-color-surface, var(--sicoob-bg-elev-1, var(--md-sys-color-surface))) );--canvas-on-surface: var( --mat-sys-on-surface, var(--md-sys-color-on-surface, var(--sicoob-text-high, #1f1f1f)) );--canvas-error: var( --mat-sys-error, var(--md-sys-color-error, var(--sicoob-error-default, #b00020)) );--canvas-border-color: var(--pfx-surface-border, rgba(0,0,0,.08));--primary: var(--mat-sys-primary, var(--md-sys-color-primary, var(--canvas-primary)));--on-primary: var(--mat-sys-on-primary, var(--md-sys-color-on-primary, #fff));--surface: var(--mat-sys-surface, var(--md-sys-color-surface, var(--canvas-surface)));--surface-variant: var( --mat-sys-surface-variant, color-mix(in srgb, var(--canvas-primary) 6%, var(--canvas-surface)) );--on-surface-variant: var( --mat-sys-on-surface-variant, color-mix(in srgb, var(--canvas-on-surface) 86%, transparent) );--bc-h: 28px;--bc-aw: 18px;--bc-divider: color-mix(in srgb, var(--canvas-on-surface) 14%, transparent);--bc-bg: var(--surface-variant);--bc-fg: var(--on-surface-variant);--bc-active-bg: var(--primary);--bc-active-fg: var(--on-primary);--bc-label-inset: 24px;--bc-bg-tone-1: var(--bc-bg);--bc-bg-tone-2: color-mix(in srgb, var(--bc-bg) 88%, var(--canvas-on-surface) 12%)}.canvas-toolbar-container{display:grid;grid-template-rows:auto auto;align-items:stretch;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:var(--canvas-on-surface);border-radius:10px;box-shadow:0 6px 16px #0000002e;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;pointer-events:all;transform:translateY(-100%);margin-top:-6px;position:relative;background:linear-gradient(0deg,color-mix(in srgb,var(--canvas-primary) 5%,var(--canvas-surface)) 0%,var(--canvas-surface) 100%);overflow:hidden;animation:toolbarIn .14s ease-out}.toolbar-close{position:absolute;top:2px;right:2px;z-index:3;--mdc-icon-button-state-layer-size: 28px;width:28px;height:28px;color:var(--mat-sys-on-surface, var(--md-sys-color-on-surface))}.toolbar-close .mat-icon{width:18px;height:18px;font-size:18px;line-height:18px}@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)){.canvas-toolbar-container{border:2px solid transparent;background:linear-gradient(0deg,color-mix(in srgb,var(--canvas-primary) 5%,var(--canvas-surface)) 0%,var(--canvas-surface) 100%) padding-box,var(--p-primary-gradient, linear-gradient(90deg, color-mix(in srgb, var(--mat-sys-primary) 75%, var(--mat-sys-tertiary) 25%), var(--mat-sys-tertiary))) border-box}.canvas-toolbar-container:after{display:none}}.canvas-toolbar-container:after{content:\"\";position:absolute;inset:0;border-radius:inherit;padding:2px;background:var(--p-primary-gradient, linear-gradient(90deg, color-mix(in srgb, var(--mat-sys-primary) 75%, var(--mat-sys-tertiary) 25%), var(--mat-sys-tertiary)));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}@keyframes toolbarIn{0%{opacity:0;transform:translateY(calc(-100% - 4px)) scale(.98)}to{opacity:1;transform:translateY(-100%) scale(1)}}.breadcrumb-row{display:flex;align-items:center;min-height:22px;padding-block:2px;padding-inline:8px calc(8px + var(--bc-aw, 18px));border-bottom:0;background:var(--surface)}.breadcrumb-bar{display:flex;align-items:center;white-space:nowrap}.breadcrumb-separator{display:none}.actions-row{display:flex;align-items:center;padding:4px;gap:6px;background:linear-gradient(0deg,color-mix(in srgb,var(--canvas-primary) 5%,var(--canvas-surface)) 0%,var(--canvas-surface) 80%)}.action-group{display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:6px;background:color-mix(in srgb,var(--canvas-primary) 3%,transparent);border:0}.pfx-breadcrumb{display:flex;align-items:center;white-space:nowrap;font-size:.85rem;line-height:1}.pfx-bc{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:max-content;height:var(--bc-h, 28px);padding-inline:16px 14px;padding-inline-start:calc(var(--bc-label-inset, 24px) + var(--bc-aw, 18px));margin-inline-end:calc(-1 * var(--bc-aw, 18px));--bc-bg-local: var(--bc-bg, var(--surface-variant));background:var(--bc-bg-local);color:var(--bc-fg, var(--on-surface-variant));border:0;border-radius:6px 0 0 6px;box-shadow:none!important;outline:0;background-clip:padding-box;cursor:default}.pfx-bc:after{content:\"\";position:absolute;top:0;bottom:0;right:calc(-1 * var(--bc-aw, 18px));border-top:calc(var(--bc-h, 28px) / 2) solid transparent;border-bottom:calc(var(--bc-h, 28px) / 2) solid transparent;border-left:var(--bc-aw, 18px) solid var(--bc-bg-local);transform:translate(-1px);pointer-events:none}.pfx-bc:before{display:none}.pfx-bc.is-link{cursor:pointer}.pfx-bc.is-link:hover{background:var(--surface)}.pfx-bc.is-link:hover:after{border-left-color:var(--surface)}.pfx-bc.is-active{background:var(--bc-active-bg, var(--primary));color:var(--bc-active-fg, var(--on-primary));cursor:default;font-weight:600;margin-inline-end:0;border-radius:6px 0 0 6px}.pfx-bc.is-active:after{border-left-color:var(--bc-active-bg, var(--primary))}.pfx-bc:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 35%,transparent)}.pfx-bc:first-child{border-top-left-radius:12px;border-bottom-left-radius:12px;padding-inline-start:16px}.pfx-bc:not(.is-active):nth-child(odd){--bc-bg-local: var(--bc-bg-tone-1)}.pfx-bc:not(.is-active):nth-child(2n){--bc-bg-local: var(--bc-bg-tone-2)}[dir=rtl] .pfx-bc{margin-inline-end:0;margin-inline-start:calc(-1 * var(--bc-aw, 18px))}[dir=rtl] .pfx-bc.is-active{margin-inline-start:0}[dir=rtl] .pfx-bc:after{right:auto;left:calc(-1 * var(--bc-aw, 18px));border-left:0;border-right:var(--bc-aw, 18px) solid var(--bc-bg-local);transform:translate(1px)}[dir=rtl] .pfx-bc.is-active:after{border-right-color:var(--bc-active-bg, var(--primary))}[dir=rtl] .pfx-bc:before{right:auto;left:calc(-1px - var(--bc-aw, 18px))}.action-group+.action-group{margin-left:4px}.group-danger{margin-left:8px;background:color-mix(in srgb,var(--canvas-error) 10%,transparent);border-color:color-mix(in srgb,var(--canvas-error) 16%,transparent)}.actions-row button{width:32px;height:32px;line-height:32px;display:inline-flex;align-items:center;justify-content:center;color:var(--canvas-on-surface)}.actions-row mat-icon{font-size:18px;width:18px;height:18px;line-height:1}\n"] }]
+            args: [{ selector: 'praxis-canvas-toolbar', standalone: true, imports: [CommonModule, MatButtonModule, MatIconModule, MatTooltipModule], template: "<div class=\"canvas-toolbar-container\" [class.closing]=\"closing\" role=\"toolbar\" aria-label=\"Toolbar de configura\u00E7\u00E3o do canvas\">\n  <!-- Bot\u00E3o discreto para fechar a toolbar -->\n  <button\n    type=\"button\"\n    class=\"toolbar-close\"\n    mat-icon-button\n    (click)=\"triggerClose()\"\n    matTooltip=\"Fechar\"\n    [matTooltipShowDelay]=\"300\"\n    aria-label=\"Fechar toolbar\"\n  >\n    <mat-icon>close</mat-icon>\n  </button>\n  <div class=\"toolbar-surface\">\n  <!-- Breadcrumb em linha superior, discreto -->\n  <div class=\"breadcrumb-row\">\n    <div class=\"pfx-breadcrumb\" role=\"navigation\" aria-label=\"Caminho do formul\u00E1rio\">\n      @for (part of selectedElement?.path; track part.type + part.name; let i = $index; let isLast = $last) {\n        @if (!isLast) {\n          <button\n            type=\"button\"\n            class=\"pfx-bc is-link breadcrumb-link\"\n            (click)=\"selectPath.emit(part)\"\n            [style.zIndex]=\"(selectedElement?.path?.length ?? 0) - i\"\n            [attr.aria-current]=\"null\"\n          >\n            {{ part.name }}\n          </button>\n        } @else {\n          <span\n            class=\"pfx-bc is-active breadcrumb-current\"\n            [style.zIndex]=\"(selectedElement?.path?.length ?? 0) - i\"\n            aria-current=\"page\"\n          >\n            {{ part.name }}\n          </span>\n        }\n      }\n    </div>\n  </div>\n\n  <!-- Barra de a\u00E7\u00F5es separada em grupos l\u00F3gicos -->\n  <div class=\"actions-row\">\n    @if (isSection) {\n      <div class=\"action-group group-move\" aria-label=\"Mover\">\n        <button type=\"button\" mat-icon-button (click)=\"moveUp.emit()\" matTooltip=\"Mover para cima\" [matTooltipShowDelay]=\"300\" aria-label=\"Mover para cima\">\n          <mat-icon>arrow_upward</mat-icon>\n        </button>\n        <button type=\"button\" mat-icon-button (click)=\"moveDown.emit()\" matTooltip=\"Mover para baixo\" [matTooltipShowDelay]=\"300\" aria-label=\"Mover para baixo\">\n          <mat-icon>arrow_downward</mat-icon>\n        </button>\n      </div>\n    }\n\n    <!-- Configura\u00E7\u00E3o para qualquer elemento selecionado (se\u00E7\u00E3o/linha/coluna/campo) -->\n    @if (selectedLastType && selectedLastType !== 'actions') {\n      <div class=\"action-group group-config\" aria-label=\"Configura\u00E7\u00E3o\">\n        <button\n          type=\"button\"\n          mat-icon-button\n          (click)=\"editMetadata.emit()\"\n          [matTooltip]=\"configTooltip\"\n          [matTooltipShowDelay]=\"300\"\n          [attr.aria-label]=\"configTooltip\"\n        >\n          <mat-icon>tune</mat-icon>\n        </button>\n      </div>\n    }\n\n    @if (isField) {\n      <!-- Visibilidade e estados -->\n      <div class=\"action-group group-visibility\" aria-label=\"Visibilidade e estados\">\n        <button type=\"button\" mat-icon-button (click)=\"toggleReadonly.emit()\" matTooltip=\"Alternar somente leitura\" [matTooltipShowDelay]=\"300\" aria-label=\"Alternar somente leitura\">\n          <mat-icon>{{ readonlyIcon }}</mat-icon>\n        </button>\n        <button type=\"button\" mat-icon-button (click)=\"toggleHidden.emit()\" matTooltip=\"Alternar visibilidade\" [matTooltipShowDelay]=\"300\" aria-label=\"Alternar visibilidade\">\n          <mat-icon>{{ visibilityIcon }}</mat-icon>\n        </button>\n        <button type=\"button\" mat-icon-button (click)=\"toggleDisabled.emit()\" matTooltip=\"Alternar desabilitado\" [matTooltipShowDelay]=\"300\" aria-label=\"Alternar desabilitado\">\n          <mat-icon>{{ disabledIcon }}</mat-icon>\n        </button>\n      </div>\n\n      <!-- Valida\u00E7\u00E3o / Obrigat\u00F3rio -->\n      <div class=\"action-group group-validation\" aria-label=\"Valida\u00E7\u00E3o\">\n        <button type=\"button\" mat-icon-button (click)=\"toggleRequired.emit()\" matTooltip=\"Alternar obrigat\u00F3rio\" [matTooltipShowDelay]=\"300\" aria-label=\"Alternar obrigat\u00F3rio\">\n          <mat-icon>{{ requiredIcon }}</mat-icon>\n        </button>\n      </div>\n    }\n\n    <!-- A\u00E7\u00E3o destrutiva isolada -->\n    <div class=\"action-group group-danger\" aria-label=\"A\u00E7\u00F5es perigosas\">\n      <button type=\"button\" mat-icon-button color=\"warn\" (click)=\"delete.emit()\" matTooltip=\"Remover\" [matTooltipShowDelay]=\"300\" aria-label=\"Remover\">\n        <mat-icon>delete</mat-icon>\n      </button>\n    </div>\n  </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;position:absolute;top:0;left:0;z-index:2001;pointer-events:none;--canvas-primary: var( --mat-sys-primary, var(--md-sys-color-primary, var(--sicoob-primary-default, #3f51b5)) );--canvas-surface: var( --mat-sys-surface, var(--md-sys-color-surface, var(--sicoob-bg-elev-1, var(--md-sys-color-surface))) );--canvas-on-surface: var( --mat-sys-on-surface, var(--md-sys-color-on-surface, var(--sicoob-text-high, #1f1f1f)) );--canvas-error: var( --mat-sys-error, var(--md-sys-color-error, var(--sicoob-error-default, #b00020)) );--canvas-border-color: var(--pfx-surface-border, rgba(0,0,0,.08));--primary: var(--mat-sys-primary, var(--md-sys-color-primary, var(--canvas-primary)));--on-primary: var(--mat-sys-on-primary, var(--md-sys-color-on-primary, #fff));--surface: var(--mat-sys-surface, var(--md-sys-color-surface, var(--canvas-surface)));--surface-variant: var( --mat-sys-surface-variant, color-mix(in srgb, var(--canvas-primary) 6%, var(--canvas-surface)) );--on-surface-variant: var( --mat-sys-on-surface-variant, color-mix(in srgb, var(--canvas-on-surface) 86%, transparent) );--bc-h: 28px;--bc-aw: 18px;--bc-divider: color-mix(in srgb, var(--canvas-on-surface) 14%, transparent);--bc-bg: var(--surface-variant);--bc-fg: var(--on-surface-variant);--bc-active-bg: var(--primary);--bc-active-fg: var(--on-primary);--bc-label-inset: 24px;--bc-bg-tone-1: var(--bc-bg);--bc-bg-tone-2: color-mix(in srgb, var(--bc-bg) 88%, var(--canvas-on-surface) 12%)}.canvas-toolbar-container{display:grid;grid-template-rows:auto auto;align-items:stretch;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:var(--canvas-on-surface);border-radius:10px;box-shadow:0 6px 16px #0000002e;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;pointer-events:all;transform:translateY(-100%);margin-top:-6px;position:relative;overflow:visible;animation:toolbarIn .14s ease-out}.toolbar-surface{display:grid;grid-template-rows:auto auto;border-radius:inherit;overflow:hidden;background:linear-gradient(0deg,color-mix(in srgb,var(--canvas-primary) 5%,var(--canvas-surface)) 0%,var(--canvas-surface) 100%)}.canvas-toolbar-container.closing{pointer-events:none;animation:toolbarOut .14s ease-in forwards}.toolbar-close{--p-close-size: 36px;--p-close-icon: 20px;position:absolute;top:-18px;right:-18px;z-index:10;width:var(--p-close-size);height:var(--p-close-size);border-radius:999px;display:inline-flex;align-items:center;justify-content:center;pointer-events:auto;background:color-mix(in srgb,var(--canvas-surface) 88%,var(--canvas-on-surface) 12%);border:1px solid color-mix(in srgb,var(--canvas-on-surface) 24%,transparent);box-shadow:0 1px 2px #0000004d;color:var(--mat-sys-on-surface, var(--md-sys-color-on-surface));--mdc-icon-button-state-layer-size: calc(var(--p-close-size) + 4px);opacity:0;pointer-events:none;transition:background-color .15s ease,box-shadow .15s ease,transform .06s ease,opacity .12s ease}.canvas-toolbar-container:hover .toolbar-close,.canvas-toolbar-container:focus-within .toolbar-close,.toolbar-close:focus-visible,.canvas-toolbar-container.closing .toolbar-close{opacity:1;pointer-events:auto}.toolbar-close:hover{background:color-mix(in srgb,var(--canvas-surface) 96%,var(--canvas-on-surface) 4%);box-shadow:0 2px 6px #00000047}.toolbar-close:active{transform:scale(.98)}.toolbar-close:focus-visible{outline:2px solid var(--mat-sys-primary, var(--md-sys-color-primary));outline-offset:2px}.toolbar-close .mat-icon{width:var(--p-close-icon);height:var(--p-close-icon);font-size:var(--p-close-icon);line-height:var(--p-close-icon)}@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)){.canvas-toolbar-container{border:2px solid transparent;background:linear-gradient(0deg,color-mix(in srgb,var(--canvas-primary) 5%,var(--canvas-surface)) 0%,var(--canvas-surface) 100%) padding-box,var(--p-primary-gradient, linear-gradient(90deg, color-mix(in srgb, var(--mat-sys-primary) 75%, var(--mat-sys-tertiary) 25%), var(--mat-sys-tertiary))) border-box}.canvas-toolbar-container:after{display:none}}.canvas-toolbar-container:after{content:\"\";position:absolute;inset:0;border-radius:inherit;padding:2px;background:var(--p-primary-gradient, linear-gradient(90deg, color-mix(in srgb, var(--mat-sys-primary) 75%, var(--mat-sys-tertiary) 25%), var(--mat-sys-tertiary)));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}@keyframes toolbarIn{0%{opacity:0;transform:translateY(calc(-100% - 4px)) scale(.98)}to{opacity:1;transform:translateY(-100%) scale(1)}}@keyframes toolbarOut{0%{opacity:1;transform:translateY(-100%) scale(1)}to{opacity:0;transform:translateY(calc(-100% - 4px)) scale(.98)}}.breadcrumb-row{display:flex;align-items:center;min-height:22px;padding-block:2px;padding-inline:8px calc(8px + var(--bc-aw, 18px));border-bottom:0;background:var(--surface)}.breadcrumb-bar{display:flex;align-items:center;white-space:nowrap}.breadcrumb-separator{display:none}.actions-row{display:flex;align-items:center;padding:4px;gap:6px;background:linear-gradient(0deg,color-mix(in srgb,var(--canvas-primary) 5%,var(--canvas-surface)) 0%,var(--canvas-surface) 80%)}.action-group{display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:6px;background:color-mix(in srgb,var(--canvas-primary) 3%,transparent);border:0}.pfx-breadcrumb{display:flex;align-items:center;white-space:nowrap;font-size:.85rem;line-height:1}.pfx-bc{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:max-content;height:var(--bc-h, 28px);padding-inline:16px 14px;padding-inline-start:calc(var(--bc-label-inset, 24px) + var(--bc-aw, 18px));margin-inline-end:calc(-1 * var(--bc-aw, 18px));--bc-bg-local: var(--bc-bg, var(--surface-variant));background:var(--bc-bg-local);color:var(--bc-fg, var(--on-surface-variant));border:0;border-radius:6px 0 0 6px;box-shadow:none!important;outline:0;background-clip:padding-box;cursor:default}.pfx-bc:after{content:\"\";position:absolute;top:0;bottom:0;right:calc(-1 * var(--bc-aw, 18px));border-top:calc(var(--bc-h, 28px) / 2) solid transparent;border-bottom:calc(var(--bc-h, 28px) / 2) solid transparent;border-left:var(--bc-aw, 18px) solid var(--bc-bg-local);transform:translate(-1px);pointer-events:none}.pfx-bc:before{display:none}.pfx-bc.is-link{cursor:pointer}.pfx-bc.is-link:hover{background:var(--surface)}.pfx-bc.is-link:hover:after{border-left-color:var(--surface)}.pfx-bc.is-active{background:var(--bc-active-bg, var(--primary));color:var(--bc-active-fg, var(--on-primary));cursor:default;font-weight:600;margin-inline-end:0;border-radius:6px 0 0 6px}.pfx-bc.is-active:after{border-left-color:var(--bc-active-bg, var(--primary))}.pfx-bc:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 35%,transparent)}.pfx-bc:first-child{border-top-left-radius:12px;border-bottom-left-radius:12px;padding-inline-start:16px}.pfx-bc:not(.is-active):nth-child(odd){--bc-bg-local: var(--bc-bg-tone-1)}.pfx-bc:not(.is-active):nth-child(2n){--bc-bg-local: var(--bc-bg-tone-2)}[dir=rtl] .pfx-bc{margin-inline-end:0;margin-inline-start:calc(-1 * var(--bc-aw, 18px))}[dir=rtl] .pfx-bc.is-active{margin-inline-start:0}[dir=rtl] .pfx-bc:after{right:auto;left:calc(-1 * var(--bc-aw, 18px));border-left:0;border-right:var(--bc-aw, 18px) solid var(--bc-bg-local);transform:translate(1px)}[dir=rtl] .pfx-bc.is-active:after{border-right-color:var(--bc-active-bg, var(--primary))}[dir=rtl] .pfx-bc:before{right:auto;left:calc(-1px - var(--bc-aw, 18px))}.action-group+.action-group{margin-left:4px}.group-danger{margin-left:8px;background:color-mix(in srgb,var(--canvas-error) 10%,transparent);border-color:color-mix(in srgb,var(--canvas-error) 16%,transparent)}.actions-row button{width:32px;height:32px;line-height:32px;display:inline-flex;align-items:center;justify-content:center;color:var(--canvas-on-surface)}.actions-row mat-icon{font-size:18px;width:18px;height:18px;line-height:1}\n"] }]
         }], propDecorators: { selectedElement: [{
                 type: Input
             }], editMetadata: [{
@@ -5073,6 +5085,7 @@ class DynamicFormLayoutService {
         return { valid: errors.length === 0, errors };
     }
     generateFormConfigFromMetadata(fields, options) {
+        // Padrão explícito: 2 campos por linha
         const fieldsPerRow = options?.fieldsPerRow ?? 2;
         const defaultSectionTitle = options?.defaultSectionTitle ?? 'Informações';
         const groupedFields = new Map();
@@ -5320,9 +5333,14 @@ class DynamicFormLayoutService {
         const rows = [];
         for (let i = 0; i < fields.length; i += fieldsPerRow) {
             const rowFields = fields.slice(i, i + fieldsPerRow);
+            // Calcular span padrão por coluna para preencher 12 colunas do grid
+            // Objetivo: 2 campos por linha em telas md+ (6/12 cada) e 1 por linha em xs/sm (12/12)
+            const perRow = Math.max(1, fieldsPerRow || 2);
+            const base = Math.max(1, Math.floor(12 / perRow));
             const columns = rowFields.map((field) => ({
                 id: this.genId('col'),
                 fields: [field.name],
+                span: { xs: 12, sm: 12, md: base, lg: base, xl: base },
             }));
             rows.push({ id: this.genId('row'), columns });
         }
@@ -6586,9 +6604,8 @@ class PraxisDynamicForm {
             if (!fieldMetadata || fieldMetadata.length === 0) {
                 throw new Error('No field metadata received from server');
             }
-            // Generate default layout from metadata
-            this.config =
-                this.dynamicLayout.generateFormConfigFromMetadata(fieldMetadata);
+            // Generate default layout from metadata (padrão: 2 campos por linha)
+            this.config = this.dynamicLayout.generateFormConfigFromMetadata(fieldMetadata, { fieldsPerRow: 2 });
             // Attach form-level hooks from server schema (if any)
             if (this.schemaRootHooks) {
                 this.config.hooks = this.schemaRootHooks;
@@ -10056,7 +10073,7 @@ class PraxisDynamicForm {
         catch { }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PraxisDynamicForm, deps: [{ token: i1$2.GenericCrudService }, { token: i1.FormBuilder }, { token: i0.ChangeDetectorRef }, { token: FormLayoutService }, { token: FormContextService }, { token: FormRulesService }, { token: i6$4.SettingsPanelService }, { token: i2$2.MatDialog }, { token: CONFIG_STORAGE }, { token: CONNECTION_STORAGE }, { token: i1$2.DynamicFormService }, { token: i8$3.MatSnackBar }, { token: CanvasStateService }, { token: DynamicFormLayoutService }, { token: i1$2.ErrorMessageService }, { token: i1$2.SchemaNormalizerService }, { token: i1$2.ComponentMetadataRegistry }, { token: i1$2.GlobalConfigService }, { token: i1$2.FormHooksRegistry, optional: true }, { token: FORM_HOOKS_PRESETS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: PraxisDynamicForm, isStandalone: true, selector: "praxis-dynamic-form", inputs: { resourcePath: "resourcePath", resourceId: "resourceId", mode: "mode", config: "config", schemaSource: "schemaSource", editModeEnabled: "editModeEnabled", formId: "formId", layout: "layout", backConfig: "backConfig", hooks: "hooks", removeEmptyContainersOnSave: "removeEmptyContainersOnSave", reactiveValidation: "reactiveValidation", reactiveValidationDebounceMs: "reactiveValidationDebounceMs", notifyIfOutdated: "notifyIfOutdated", snoozeMs: "snoozeMs", autoOpenSettingsOnOutdated: "autoOpenSettingsOnOutdated", readonlyModeGlobal: "readonlyModeGlobal", disabledModeGlobal: "disabledModeGlobal", presentationModeGlobal: "presentationModeGlobal", visibleGlobal: "visibleGlobal", customEndpoints: "customEndpoints" }, outputs: { formSubmit: "formSubmit", formCancel: "formCancel", formReset: "formReset", configChange: "configChange", formReady: "formReady", valueChange: "valueChange", syncCompleted: "syncCompleted", initializationError: "initializationError", editModeEnabledChange: "editModeEnabledChange", customAction: "customAction", actionConfirmation: "actionConfirmation", schemaStatusChange: "schemaStatusChange" }, viewQueries: [{ propertyName: "formHost", first: true, predicate: ["formHost"], descendants: true }, { propertyName: "fieldLoaders", predicate: DynamicFieldLoaderDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (isLoading) {\n<!-- Loading State -->\n<div class=\"form-loading\">\n  <mat-progress-spinner diameter=\"40\"></mat-progress-spinner>\n  <p>Carregando formul\u00E1rio...</p>\n</div>\n} @else if (initializationStatus === 'error') {\n<!-- Error State -->\n<div class=\"form-error\">\n  <mat-icon color=\"warn\" [praxisIcon]=\"'error'\"></mat-icon>\n  <h3>{{ getErrorTitle() }}</h3>\n  <p>{{ currentErrorMessage }}</p>\n  @if (isRecoverable) {\n  <button mat-stroked-button (click)=\"retryInitialization()\">\n    <mat-icon [praxisIcon]=\"'refresh'\"></mat-icon>\n    Tentar Novamente\n  </button>\n  }\n  <button mat-button (click)=\"showDetailedError()\" class=\"show-details\">\n    Ver Detalhes T\u00E9cnicos\n  </button>\n  <!-- Permitir corre\u00E7\u00E3o do resourcePath diretamente do estado de erro -->\n  <button mat-flat-button color=\"primary\" (click)=\"openQuickConnect()\" class=\"connect-action\">\n    <mat-icon [praxisIcon]=\"'bolt'\"></mat-icon>\n    Conectar a recurso\n  </button>\n</div>\n} @else if (initializationStatus === 'success') {\n<!-- Inline banner for schema change (only in edit mode) -->\n@if (shouldShowOutdatedInline()) {\n<div class=\"pfx-form-info-banner\" role=\"status\" aria-live=\"polite\">\n  <div class=\"text\">O schema do servidor mudou. Reconciliar agora?</div>\n  <div class=\"actions\">\n    <button mat-stroked-button color=\"primary\" (click)=\"openConfigEditor()\">\n      <mat-icon [praxisIcon]=\"'sync'\"></mat-icon>\n      Reconciliar\n    </button>\n    <button mat-button (click)=\"onSnoozeOutdated()\">Lembrar depois</button>\n    <button mat-button (click)=\"onIgnoreOutdated()\">Ignorar</button>\n  </div>\n  </div>\n}\n\n<!-- Configuration Controls -->\n@if (shouldShowConfigControls && editModeEnabled) {\n<div class=\"form-config-controls\">\n  <button\n    type=\"button\"\n    mat-icon-button\n    (click)=\"openConfigEditor()\"\n    [disabled]=\"isLoading\"\n    class=\"config-button\"\n    [matBadge]=\"schemaOutdated ? '!' : ''\"\n    [matBadgeHidden]=\"!schemaOutdated\"\n    matBadgeColor=\"warn\" matBadgeSize=\"small\" matBadgePosition=\"above after\"\n    [matTooltip]=\"schemaOutdated ? 'Schema do servidor mudou \u2014 Reconciliar' : 'Configurar formul\u00E1rio'\"\n  >\n    <mat-icon [praxisIcon]=\"'settings'\"></mat-icon>\n  </button>\n  <button\n    type=\"button\"\n    mat-icon-button\n    (click)=\"disconnect()\"\n    matTooltip=\"Desconectar da fonte de dados\"\n    [disabled]=\"isLoading\"\n  >\n    <mat-icon [praxisIcon]=\"'link_off'\"></mat-icon>\n  </button>\n</div>\n} }\n\n<!-- Form Content -->\n@if (!resourcePath && (!config.sections || config.sections.length === 0)) {\n  <praxis-empty-state-card\n    icon=\"link\"\n    [title]=\"'Conecte o formul\u00E1rio \u00E0 fonte de dados'\"\n    [description]=\"'Informe a rota do recurso da API para gerar automaticamente os campos do formul\u00E1rio.'\"\n    [primaryAction]=\"{ label: 'Conectar \u00E0 fonte de dados', icon: 'bolt', action: openQuickConnect.bind(this) }\"\n  ></praxis-empty-state-card>\n}\n<form\n  #formHost\n  (ngSubmit)=\"onSubmit()\"\n  [attr.aria-busy]=\"submitting ? 'true' : null\"\n  [attr.aria-label]=\"'Formul\u00E1rio ' + (config.metadata?.version || '')\"\n  [class.canvas-mode-enabled]=\"editModeEnabled\"\n  [class.presentation-mode]=\"!!presentationModeGlobal\"\n  [class.readonly-mode]=\"!!readonlyModeGlobal\"\n  [formGroup]=\"form\"\n  [ngClass]=\"{\n    'pres-compact': presentationVars.compact,\n    'pres-label-left': presentationVars.labelPosition === 'left',\n    'pres-label-above': presentationVars.labelPosition === 'above'\n  }\"\n  [style.--pfx-pres-label-align]=\"presentationVars.labelAlign\"\n  [style.--pfx-pres-label-size]=\"presentationVars.labelSize\"\n  [style.--pfx-pres-label-width]=\"presentationVars.labelWidth\"\n  [style.--pfx-pres-row-gap]=\"presentationVars.density === 'compact' ? '6px' : (presentationVars.density === 'cozy' ? '8px' : '10px')\"\n  [style.--pfx-pres-row-padding]=\"presentationVars.density === 'compact' ? '2px 0' : (presentationVars.density === 'cozy' ? '6px 0' : '8px 0')\"\n  [style.--pfx-pres-value-align]=\"presentationVars.valueAlign\"\n  [style.--pfx-pres-value-size]=\"presentationVars.valueSize\"\n  class=\"praxis-dynamic-form\"\n>\n  <praxis-canvas-toolbar\n    (editMetadata)=\"openSelectedElementEditor()\"\n    (selectPath)=\"onSelectPath($event)\"\n    (moveUp)=\"onToolbarMove('up')\"\n    (moveDown)=\"onToolbarMove('down')\"\n    (toggleReadonly)=\"onToolbarToggleReadonly()\"\n    (toggleRequired)=\"onToolbarToggleRequired()\"\n    (toggleHidden)=\"onToolbarToggleHidden()\"\n    (toggleDisabled)=\"onToolbarToggleDisabled()\"\n    (requestClose)=\"onToolbarRequestClose()\"\n    *ngIf=\"editModeEnabled && selectedElement\"\n    [selectedElement]=\"selectedElement\"\n    [style.transform]=\"toolbarTransform\"\n  ></praxis-canvas-toolbar>\n\n@if ((config.actions?.placement || 'afterSections') === 'top' && !(presentationModeGlobal || readonlyModeGlobal)) {\n    <praxis-form-actions\n      [actions]=\"config.actions\"\n      [isSubmitting]=\"submitting\"\n      [formIsValid]=\"form.valid\"\n      [submitError]=\"submitError\"\n      [formId]=\"formId\"\n      (action)=\"onFormAction($event)\"\n    ></praxis-form-actions>\n  }\n\n  @for (section of config.sections; track (section.id ?? $index); let sectionIndex = $index;\n  let last = $last) {\n  <div\n    class=\"section-drop-wrapper\"\n    [attr.data-section-id]=\"section.id\"\n  >\n    <div\n      #sectionEl\n      class=\"form-section canvas-element\"\n      data-canvas-type=\"section\"\n      [attr.data-section-id]=\"section.id\"\n      [attr.data-section-index]=\"sectionIndex\"\n      (mouseenter)=\"onElementMouseEnter($event, 'section', section, sectionEl)\"\n      (mouseleave)=\"onElementMouseLeave($event)\"\n      (click)=\"onElementClick($event, 'section', section, sectionEl)\"\n      [class.selected]=\"selectedElement?.domElement === sectionEl\"\n      [class.hovered]=\"hoveredElement?.domElement === sectionEl && selectedElement?.domElement !== sectionEl\"\n      [style.marginBottom.px]=\"!last ? (section.gapBottom || null) : null\"\n    >\n      @if (section.title) {\n      <h3\n        class=\"section-title\"\n        [class.title-large]=\"section.titleStyle === 'titleLarge'\"\n        [class.title-medium]=\"section.titleStyle === 'titleMedium'\"\n        [class.title-small]=\"section.titleStyle === 'titleSmall'\"\n        [class.headline-small]=\"section.titleStyle === 'headlineSmall'\"\n        [style.marginBottom.px]=\"section.titleGapBottom || null\"\n      >\n        @if (section.icon) {\n          <mat-icon class=\"section-title-icon\" aria-hidden=\"true\" [praxisIcon]=\"section.icon\"></mat-icon>\n        }\n        {{ section.title }}\n      </h3>\n      } @if (section.description) {\n        <p\n          class=\"section-description\"\n          [class.body-large]=\"section.descriptionStyle === 'bodyLarge'\"\n          [class.body-medium]=\"section.descriptionStyle === 'bodyMedium'\"\n          [class.body-small]=\"section.descriptionStyle === 'bodySmall'\"\n          [style.marginBottom.px]=\"section.descriptionGapBottom || null\"\n        >\n          {{ section.description }}\n        </p>\n      } @for (row of section.rows; track (row.id ?? $index); let rowIndex = $index) {\n      <div\n        class=\"row-drop-wrapper\"\n        [attr.data-section-id]=\"section.id\"\n      >\n        <div\n          #rowEl\n          class=\"form-row grid-12 canvas-element\"\n          data-canvas-type=\"row\"\n          [attr.data-row-index]=\"rowIndex\"\n          [attr.data-section-id]=\"section.id\"\n          [attr.data-row-id]=\"row.id\"\n          [style.--pfx-grid-gap.px]=\"row.gap || null\"\n          [style.marginBottom.px]=\"row.rowGap || null\"\n          (mouseenter)=\"onElementMouseEnter($event, 'row', row, rowEl)\"\n          (mouseleave)=\"onElementMouseLeave($event)\"\n          (click)=\"onElementClick($event, 'row', row, rowEl)\"\n          [class.selected]=\"selectedElement?.domElement === rowEl\"\n          [class.hovered]=\"hoveredElement?.domElement === rowEl && selectedElement?.domElement !== rowEl\"\n        >\n          @for (column of row.columns; track (column.id ?? $index); let colIndex = $index) {\n          @if (isColumnVisible(column)) {\n          <div\n            class=\"column-drop-wrapper\"\n            [attr.data-section-id]=\"section.id\"\n            [attr.data-row-id]=\"row.id\"\n          >\n            <div\n              #colEl\n              class=\"form-column canvas-element\"\n              [ngClass]=\"getColumnClasses(column)\"\n              [style.padding.px]=\"column.padding\"\n              [attr.data-testid]=\"column.testId || null\"\n              data-canvas-type=\"column\"\n              [attr.data-column-index]=\"colIndex\"\n              [attr.data-row-index]=\"rowIndex\"\n              [attr.data-section-id]=\"section.id\"\n              [attr.data-row-id]=\"row.id\"\n              [attr.data-column-id]=\"column.id\"\n              (mouseenter)=\"onElementMouseEnter($event, 'column', column, colEl)\"\n              (mouseleave)=\"onElementMouseLeave($event)\"\n              (click)=\"onElementClick($event, 'column', column, colEl)\"\n              [class.selected]=\"selectedElement?.domElement === colEl\"\n              [class.hovered]=\"hoveredElement?.domElement === colEl && selectedElement?.domElement !== colEl\"\n            >\n              <ng-container\n                dynamicFieldLoader\n                [fields]=\"getColumnFields(column)\"\n                [formGroup]=\"form\"\n                [readonlyMode]=\"readonlyModeGlobal === null ? null : readonlyModeGlobal\"\n                [disabledMode]=\"disabledModeGlobal === null ? null : disabledModeGlobal\"\n                [presentationMode]=\"presentationModeGlobal === null ? null : presentationModeGlobal\"\n                [visible]=\"visibleGlobal === null ? null : visibleGlobal\"\n                [canvasMode]=\"editModeEnabled\"\n                (canvasMouseEnter)=\"onFieldMouseEnter($event)\"\n                (canvasMouseLeave)=\"onFieldMouseLeave($event)\"\n                (canvasClick)=\"onFieldClick($event)\"\n              >\n              </ng-container>\n            </div>\n          </div>\n          } }\n        </div>\n      </div>\n\n      }\n      @if ((config.actions?.placement || 'afterSections') === 'insideLastSection' && last && !(presentationModeGlobal || readonlyModeGlobal)) {\n        <praxis-form-actions\n          [actions]=\"config.actions\"\n          [isSubmitting]=\"submitting\"\n          [formIsValid]=\"form.valid\"\n          [submitError]=\"submitError\"\n          [formId]=\"formId\"\n          (action)=\"onFormAction($event)\"\n        ></praxis-form-actions>\n      }\n      <!-- Overlay de bloqueio durante submiss\u00E3o -->\n      @if (submitting) {\n      <div class=\"form-blocking-overlay\" aria-live=\"polite\">\n        <mat-progress-spinner\n          diameter=\"40\"\n          color=\"primary\"\n        ></mat-progress-spinner>\n        <p>{{ config.messages?.loading?.submit || 'Salvando...' }}</p>\n      </div>\n      }\n  </div>\n  </div>\n\n  @if (editModeEnabled && selectedElement?.domElement === sectionEl) {\n  <div class=\"add-section-container\">\n    <div class=\"add-section-line\"></div>\n    <button\n      mat-fab\n      color=\"primary\"\n      aria-label=\"Adicionar nova se\u00E7\u00E3o\"\n      (click)=\"addNewSectionAfter(sectionIndex)\"\n      matTooltip=\"Adicionar nova se\u00E7\u00E3o aqui\"\n    >\n      <mat-icon [praxisIcon]=\"'add'\"></mat-icon>\n    </button>\n    <div class=\"add-section-line\"></div>\n  </div>\n  } }\n@if ((config.actions?.placement || 'afterSections') === 'afterSections' && !(presentationModeGlobal || readonlyModeGlobal)) {\n    <praxis-form-actions\n      [actions]=\"config.actions\"\n      [isSubmitting]=\"submitting\"\n      [formIsValid]=\"form.valid\"\n      [submitError]=\"submitError\"\n      [formId]=\"formId\"\n      (action)=\"onFormAction($event)\"\n    ></praxis-form-actions>\n  }\n</form>\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative}.form-config-controls{position:absolute;top:4px;right:4px;display:flex;gap:.25rem;z-index:100;background:transparent;padding:0;border:0;min-width:0;justify-content:flex-end;pointer-events:none}.form-config-controls>*{pointer-events:auto}.form-config-controls .mat-icon-button{--mdc-icon-button-state-layer-size: 36px;width:36px;height:36px;color:var(--md-sys-color-on-surface-variant)}.form-config-controls .mat-icon-button:hover{color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary),transparent 90%)}.config-button{color:var(--md-sys-color-primary)}.form-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;text-align:center;color:var(--md-sys-color-on-surface);gap:1rem}.form-loading p{margin:0;font-size:.875rem;opacity:.7}.form-error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;text-align:center;color:var(--md-sys-color-error);gap:1rem;border:1px solid var(--md-sys-color-error);border-radius:8px;background-color:var(--md-sys-color-error-container);margin:1rem}.form-error h3{margin:0;color:var(--md-sys-color-on-error-container)}.form-error p{margin:0;color:var(--md-sys-color-on-error-container);opacity:.8}.form-error button{margin-top:.5rem}.praxis-dynamic-form{display:flex;flex-direction:column;transition:all .3s ease;position:relative}.praxis-dynamic-form.presentation-mode .form-row,.praxis-dynamic-form.readonly-mode .form-row{gap:.5rem;margin-bottom:.5rem}.praxis-dynamic-form.presentation-mode .form-section,.praxis-dynamic-form.readonly-mode .form-section{padding:.75rem .875rem}.praxis-dynamic-form.pres-compact .form-row{gap:.35rem;margin-bottom:.35rem}.praxis-dynamic-form.pres-compact .form-section{padding:.5rem .75rem}.praxis-dynamic-form.pres-label-left .praxis-presentation{display:grid;grid-template-columns:var(--pfx-presentation-label-w, 220px) 1fr;align-items:baseline;column-gap:10px}.praxis-dynamic-form.pres-label-left .praxis-presentation__label{text-align:right;margin-bottom:0}.form-section{border:1px solid var(--pfx-form-stroke, var(--md-sys-color-outline-variant));border-radius:8px;padding:1rem;background:var(--pfx-form-section-surface, var(--md-sys-color-surface-container));transition:all .2s ease;position:relative}.section-drop-wrapper>.form-section{margin-bottom:var(--pfx-section-gap, 20px)}.section-drop-wrapper:last-of-type>.form-section{margin-bottom:0}.section-title{margin:0 0 var(--pfx-section-title-mb, 20px) 0;font-size:1.05rem;font-weight:500;color:var(--md-sys-color-on-surface)}.section-title.title-large{font:var(--mdc-typography-title-large, 500 22px/28px system-ui)}.section-title.title-medium{font:var(--mdc-typography-title-medium, 500 16px/24px system-ui)}.section-title.title-small{font:var(--mdc-typography-title-small, 500 14px/20px system-ui)}.section-title.headline-small{font:var(--mdc-typography-headline-small, 600 24px/32px system-ui)}.section-description{margin:0 0 8px;font-size:.875rem;color:var(--md-sys-color-on-surface-variant)}.section-description.body-large{font:var(--mdc-typography-body-large, 400 16px/24px system-ui)}.section-description.body-medium{font:var(--mdc-typography-body-medium, 400 14px/20px system-ui)}.section-description.body-small{font:var(--mdc-typography-body-small, 400 12px/16px system-ui)}.form-row{display:flex;gap:1rem;margin-bottom:1rem;transition:all .2s ease;border-radius:6px;position:relative}.praxis-dynamic-form .mat-mdc-form-field{margin-bottom:var(--pfx-field-gap, 10px)}.praxis-dynamic-form .mat-mdc-form-field-subscript-wrapper{min-height:var(--pfx-subscript-min-h, 22px)}.form-row:last-child{margin-bottom:0}.form-column{flex:1;min-width:0;transition:all .2s ease;border-radius:4px;position:relative}.form-row.grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--pfx-grid-gap, 16px)}.align-start{align-self:flex-start}.align-center{align-self:center}.align-end{align-self:flex-end}.align-stretch{align-self:stretch}.span-xs-1{grid-column:span 1}.span-xs-2{grid-column:span 2}.span-xs-3{grid-column:span 3}.span-xs-4{grid-column:span 4}.span-xs-5{grid-column:span 5}.span-xs-6{grid-column:span 6}.span-xs-7{grid-column:span 7}.span-xs-8{grid-column:span 8}.span-xs-9{grid-column:span 9}.span-xs-10{grid-column:span 10}.span-xs-11{grid-column:span 11}.span-xs-12{grid-column:span 12}.offset-xs-0{margin-left:0%}.offset-xs-1{margin-left:calc(1 / 12 * 100%)}.offset-xs-2{margin-left:calc(2 / 12 * 100%)}.offset-xs-3{margin-left:25%}.offset-xs-4{margin-left:calc(4 / 12 * 100%)}.offset-xs-5{margin-left:calc(5 / 12 * 100%)}.offset-xs-6{margin-left:50%}.offset-xs-7{margin-left:calc(7 / 12 * 100%)}.offset-xs-8{margin-left:calc(8 / 12 * 100%)}.offset-xs-9{margin-left:75%}.offset-xs-10{margin-left:calc(10 / 12 * 100%)}.offset-xs-11{margin-left:calc(11 / 12 * 100%)}.order-xs--12{order:-12}.order-xs--11{order:-11}.order-xs--10{order:-10}.order-xs--9{order:-9}.order-xs--8{order:-8}.order-xs--7{order:-7}.order-xs--6{order:-6}.order-xs--5{order:-5}.order-xs--4{order:-4}.order-xs--3{order:-3}.order-xs--2{order:-2}.order-xs--1{order:-1}.order-xs-0{order:0}.order-xs-1{order:1}.order-xs-2{order:2}.order-xs-3{order:3}.order-xs-4{order:4}.order-xs-5{order:5}.order-xs-6{order:6}.order-xs-7{order:7}.order-xs-8{order:8}.order-xs-9{order:9}.order-xs-10{order:10}.order-xs-11{order:11}.order-xs-12{order:12}.hidden-xs{display:none}@media (min-width: 600px){.span-sm-1{grid-column:span 1}.span-sm-2{grid-column:span 2}.span-sm-3{grid-column:span 3}.span-sm-4{grid-column:span 4}.span-sm-5{grid-column:span 5}.span-sm-6{grid-column:span 6}.span-sm-7{grid-column:span 7}.span-sm-8{grid-column:span 8}.span-sm-9{grid-column:span 9}.span-sm-10{grid-column:span 10}.span-sm-11{grid-column:span 11}.span-sm-12{grid-column:span 12}.offset-sm-0{margin-left:0%}.offset-sm-1{margin-left:calc(1 / 12 * 100%)}.offset-sm-2{margin-left:calc(2 / 12 * 100%)}.offset-sm-3{margin-left:25%}.offset-sm-4{margin-left:calc(4 / 12 * 100%)}.offset-sm-5{margin-left:calc(5 / 12 * 100%)}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:calc(7 / 12 * 100%)}.offset-sm-8{margin-left:calc(8 / 12 * 100%)}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:calc(10 / 12 * 100%)}.offset-sm-11{margin-left:calc(11 / 12 * 100%)}.order-sm--12{order:-12}.order-sm--11{order:-11}.order-sm--10{order:-10}.order-sm--9{order:-9}.order-sm--8{order:-8}.order-sm--7{order:-7}.order-sm--6{order:-6}.order-sm--5{order:-5}.order-sm--4{order:-4}.order-sm--3{order:-3}.order-sm--2{order:-2}.order-sm--1{order:-1}.order-sm-0{order:0}.order-sm-1{order:1}.order-sm-2{order:2}.order-sm-3{order:3}.order-sm-4{order:4}.order-sm-5{order:5}.order-sm-6{order:6}.order-sm-7{order:7}.order-sm-8{order:8}.order-sm-9{order:9}.order-sm-10{order:10}.order-sm-11{order:11}.order-sm-12{order:12}.hidden-sm{display:none}}@media (min-width: 900px){.span-md-1{grid-column:span 1}.span-md-2{grid-column:span 2}.span-md-3{grid-column:span 3}.span-md-4{grid-column:span 4}.span-md-5{grid-column:span 5}.span-md-6{grid-column:span 6}.span-md-7{grid-column:span 7}.span-md-8{grid-column:span 8}.span-md-9{grid-column:span 9}.span-md-10{grid-column:span 10}.span-md-11{grid-column:span 11}.span-md-12{grid-column:span 12}.offset-md-0{margin-left:0%}.offset-md-1{margin-left:calc(1 / 12 * 100%)}.offset-md-2{margin-left:calc(2 / 12 * 100%)}.offset-md-3{margin-left:25%}.offset-md-4{margin-left:calc(4 / 12 * 100%)}.offset-md-5{margin-left:calc(5 / 12 * 100%)}.offset-md-6{margin-left:50%}.offset-md-7{margin-left:calc(7 / 12 * 100%)}.offset-md-8{margin-left:calc(8 / 12 * 100%)}.offset-md-9{margin-left:75%}.offset-md-10{margin-left:calc(10 / 12 * 100%)}.offset-md-11{margin-left:calc(11 / 12 * 100%)}.order-md--12{order:-12}.order-md--11{order:-11}.order-md--10{order:-10}.order-md--9{order:-9}.order-md--8{order:-8}.order-md--7{order:-7}.order-md--6{order:-6}.order-md--5{order:-5}.order-md--4{order:-4}.order-md--3{order:-3}.order-md--2{order:-2}.order-md--1{order:-1}.order-md-0{order:0}.order-md-1{order:1}.order-md-2{order:2}.order-md-3{order:3}.order-md-4{order:4}.order-md-5{order:5}.order-md-6{order:6}.order-md-7{order:7}.order-md-8{order:8}.order-md-9{order:9}.order-md-10{order:10}.order-md-11{order:11}.order-md-12{order:12}.hidden-md{display:none}}@media (min-width: 1200px){.span-lg-1{grid-column:span 1}.span-lg-2{grid-column:span 2}.span-lg-3{grid-column:span 3}.span-lg-4{grid-column:span 4}.span-lg-5{grid-column:span 5}.span-lg-6{grid-column:span 6}.span-lg-7{grid-column:span 7}.span-lg-8{grid-column:span 8}.span-lg-9{grid-column:span 9}.span-lg-10{grid-column:span 10}.span-lg-11{grid-column:span 11}.span-lg-12{grid-column:span 12}.offset-lg-0{margin-left:0%}.offset-lg-1{margin-left:calc(1 / 12 * 100%)}.offset-lg-2{margin-left:calc(2 / 12 * 100%)}.offset-lg-3{margin-left:25%}.offset-lg-4{margin-left:calc(4 / 12 * 100%)}.offset-lg-5{margin-left:calc(5 / 12 * 100%)}.offset-lg-6{margin-left:50%}.offset-lg-7{margin-left:calc(7 / 12 * 100%)}.offset-lg-8{margin-left:calc(8 / 12 * 100%)}.offset-lg-9{margin-left:75%}.offset-lg-10{margin-left:calc(10 / 12 * 100%)}.offset-lg-11{margin-left:calc(11 / 12 * 100%)}.order-lg--12{order:-12}.order-lg--11{order:-11}.order-lg--10{order:-10}.order-lg--9{order:-9}.order-lg--8{order:-8}.order-lg--7{order:-7}.order-lg--6{order:-6}.order-lg--5{order:-5}.order-lg--4{order:-4}.order-lg--3{order:-3}.order-lg--2{order:-2}.order-lg--1{order:-1}.order-lg-0{order:0}.order-lg-1{order:1}.order-lg-2{order:2}.order-lg-3{order:3}.order-lg-4{order:4}.order-lg-5{order:5}.order-lg-6{order:6}.order-lg-7{order:7}.order-lg-8{order:8}.order-lg-9{order:9}.order-lg-10{order:10}.order-lg-11{order:11}.order-lg-12{order:12}.hidden-lg{display:none}}@media (min-width: 1536px){.span-xl-1{grid-column:span 1}.span-xl-2{grid-column:span 2}.span-xl-3{grid-column:span 3}.span-xl-4{grid-column:span 4}.span-xl-5{grid-column:span 5}.span-xl-6{grid-column:span 6}.span-xl-7{grid-column:span 7}.span-xl-8{grid-column:span 8}.span-xl-9{grid-column:span 9}.span-xl-10{grid-column:span 10}.span-xl-11{grid-column:span 11}.span-xl-12{grid-column:span 12}.offset-xl-0{margin-left:0%}.offset-xl-1{margin-left:calc(1 / 12 * 100%)}.offset-xl-2{margin-left:calc(2 / 12 * 100%)}.offset-xl-3{margin-left:25%}.offset-xl-4{margin-left:calc(4 / 12 * 100%)}.offset-xl-5{margin-left:calc(5 / 12 * 100%)}.offset-xl-6{margin-left:50%}.offset-xl-7{margin-left:calc(7 / 12 * 100%)}.offset-xl-8{margin-left:calc(8 / 12 * 100%)}.offset-xl-9{margin-left:75%}.offset-xl-10{margin-left:calc(10 / 12 * 100%)}.offset-xl-11{margin-left:calc(11 / 12 * 100%)}.order-xl--12{order:-12}.order-xl--11{order:-11}.order-xl--10{order:-10}.order-xl--9{order:-9}.order-xl--8{order:-8}.order-xl--7{order:-7}.order-xl--6{order:-6}.order-xl--5{order:-5}.order-xl--4{order:-4}.order-xl--3{order:-3}.order-xl--2{order:-2}.order-xl--1{order:-1}.order-xl-0{order:0}.order-xl-1{order:1}.order-xl-2{order:2}.order-xl-3{order:3}.order-xl-4{order:4}.order-xl-5{order:5}.order-xl-6{order:6}.order-xl-7{order:7}.order-xl-8{order:8}.order-xl-9{order:9}.order-xl-10{order:10}.order-xl-11{order:11}.order-xl-12{order:12}.hidden-xl{display:none}}.form-blocking-overlay{position:absolute;inset:0;background:transparent;color:var(--md-sys-color-on-surface, #000);backdrop-filter:blur(2px) saturate(103%);-webkit-backdrop-filter:blur(2px) saturate(103%);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;z-index:10;pointer-events:all}@media (max-width: 768px){.form-row{flex-direction:column;gap:.5rem}.form-section{padding:1rem}}.canvas-mode-enabled{--canvas-hit: 14px}.canvas-mode-enabled .canvas-element{position:relative;z-index:0;border-radius:8px;outline:2px solid transparent;outline-offset:2px;transition:outline-color .2s ease,outline-style .2s ease}.canvas-mode-enabled .canvas-element:before{content:\"\";position:absolute;inset:calc(-1 * var(--canvas-hit));pointer-events:none;border-radius:inherit;background:transparent}.canvas-mode-enabled .canvas-element[data-canvas-type=section]{--outline-color: var(--mat-sys-primary, var(--md-sys-color-primary))}.canvas-mode-enabled .canvas-element[data-canvas-type=row]{--outline-color: var(--mat-sys-secondary, var(--md-sys-color-secondary))}.canvas-mode-enabled .canvas-element[data-canvas-type=column],.canvas-mode-enabled .canvas-element[data-canvas-type=field]{--outline-color: var(--mat-sys-tertiary, var(--md-sys-color-tertiary))}.canvas-mode-enabled .canvas-element[data-canvas-type=actions]{--outline-color: color-mix( in srgb, var(--mat-sys-primary, var(--md-sys-color-primary)) 70%, var(--mat-sys-secondary, var(--md-sys-color-secondary)) 30% )}.canvas-mode-enabled .canvas-element.hovered:not(.selected){outline-color:var(--outline-color, var(--mat-sys-primary, var(--md-sys-color-primary)));outline-style:dashed}.canvas-mode-enabled .canvas-element.selected{outline-color:var(--outline-color, var(--mat-sys-primary, var(--md-sys-color-primary)));outline-style:solid;box-shadow:0 0 0 2px color-mix(in oklab,var(--outline-color, var(--mat-sys-primary, var(--md-sys-color-primary))) 70%,transparent),0 0 8px color-mix(in oklab,var(--outline-color, var(--mat-sys-primary, var(--md-sys-color-primary))) 60%,transparent),0 0 18px color-mix(in oklab,var(--outline-color, var(--mat-sys-primary, var(--md-sys-color-primary))) 35%,transparent)}.canvas-mode-enabled .canvas-element.hovered{z-index:1000}.canvas-mode-enabled .canvas-element.selected{z-index:2000}.section-drop-wrapper,.row-drop-wrapper,.column-drop-wrapper{display:contents}.add-section-container{display:flex;align-items:center;justify-content:center;padding:.5rem 0;margin:-.5rem 0;position:relative;z-index:500}.add-section-container .add-section-line{flex-grow:1;height:1px;background:repeating-linear-gradient(90deg,var(--md-sys-color-outline-variant),var(--md-sys-color-outline-variant) 4px,transparent 4px,transparent 8px)}.add-section-container button{margin:0 1rem;transform:scale(.85)}.section-title{display:flex;align-items:center;gap:8px}.section-title .section-title-icon{font-size:1.25em;line-height:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: DynamicFieldLoaderDirective, selector: "[dynamicFieldLoader]", inputs: ["fields", "formGroup", "enableExternalControlBinding", "itemTemplate", "readonlyMode", "disabledMode", "presentationMode", "visible", "canvasMode"], outputs: ["componentsCreated", "fieldCreated", "fieldDestroyed", "canvasMouseEnter", "canvasMouseLeave", "canvasClick"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.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: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i14.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i16.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "component", type: CanvasToolbarComponent, selector: "praxis-canvas-toolbar", inputs: ["selectedElement"], outputs: ["editMetadata", "delete", "moveUp", "moveDown", "selectPath", "requestClose", "toggleReadonly", "toggleRequired", "toggleHidden", "toggleDisabled"] }, { kind: "component", type: PraxisFormActionsComponent, selector: "praxis-form-actions", inputs: ["actions", "isSubmitting", "formIsValid", "submitError", "formId"], outputs: ["action"] }, { kind: "component", type: EmptyStateCardComponent, selector: "praxis-empty-state-card", inputs: ["icon", "title", "description", "primaryAction", "secondaryActions", "inline"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: PraxisDynamicForm, isStandalone: true, selector: "praxis-dynamic-form", inputs: { resourcePath: "resourcePath", resourceId: "resourceId", mode: "mode", config: "config", schemaSource: "schemaSource", editModeEnabled: "editModeEnabled", formId: "formId", layout: "layout", backConfig: "backConfig", hooks: "hooks", removeEmptyContainersOnSave: "removeEmptyContainersOnSave", reactiveValidation: "reactiveValidation", reactiveValidationDebounceMs: "reactiveValidationDebounceMs", notifyIfOutdated: "notifyIfOutdated", snoozeMs: "snoozeMs", autoOpenSettingsOnOutdated: "autoOpenSettingsOnOutdated", readonlyModeGlobal: "readonlyModeGlobal", disabledModeGlobal: "disabledModeGlobal", presentationModeGlobal: "presentationModeGlobal", visibleGlobal: "visibleGlobal", customEndpoints: "customEndpoints" }, outputs: { formSubmit: "formSubmit", formCancel: "formCancel", formReset: "formReset", configChange: "configChange", formReady: "formReady", valueChange: "valueChange", syncCompleted: "syncCompleted", initializationError: "initializationError", editModeEnabledChange: "editModeEnabledChange", customAction: "customAction", actionConfirmation: "actionConfirmation", schemaStatusChange: "schemaStatusChange" }, viewQueries: [{ propertyName: "formHost", first: true, predicate: ["formHost"], descendants: true }, { propertyName: "fieldLoaders", predicate: DynamicFieldLoaderDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (isLoading) {\n<!-- Loading State -->\n<div class=\"form-loading\">\n  <mat-progress-spinner diameter=\"40\"></mat-progress-spinner>\n  <p>Carregando formul\u00E1rio...</p>\n</div>\n} @else if (initializationStatus === 'error') {\n<!-- Error State -->\n<div class=\"form-error\">\n  <mat-icon color=\"warn\" [praxisIcon]=\"'error'\"></mat-icon>\n  <h3>{{ getErrorTitle() }}</h3>\n  <p>{{ currentErrorMessage }}</p>\n  @if (isRecoverable) {\n  <button mat-stroked-button (click)=\"retryInitialization()\">\n    <mat-icon [praxisIcon]=\"'refresh'\"></mat-icon>\n    Tentar Novamente\n  </button>\n  }\n  <button mat-button (click)=\"showDetailedError()\" class=\"show-details\">\n    Ver Detalhes T\u00E9cnicos\n  </button>\n  <!-- Permitir corre\u00E7\u00E3o do resourcePath diretamente do estado de erro -->\n  <button mat-flat-button color=\"primary\" (click)=\"openQuickConnect()\" class=\"connect-action\">\n    <mat-icon [praxisIcon]=\"'bolt'\"></mat-icon>\n    Conectar a recurso\n  </button>\n</div>\n} @else if (initializationStatus === 'success') {\n<!-- Inline banner for schema change (only in edit mode) -->\n@if (shouldShowOutdatedInline()) {\n<div class=\"pfx-form-info-banner\" role=\"status\" aria-live=\"polite\">\n  <div class=\"text\">O schema do servidor mudou. Reconciliar agora?</div>\n  <div class=\"actions\">\n    <button mat-stroked-button color=\"primary\" (click)=\"openConfigEditor()\">\n      <mat-icon [praxisIcon]=\"'sync'\"></mat-icon>\n      Reconciliar\n    </button>\n    <button mat-button (click)=\"onSnoozeOutdated()\">Lembrar depois</button>\n    <button mat-button (click)=\"onIgnoreOutdated()\">Ignorar</button>\n  </div>\n  </div>\n}\n\n<!-- Configuration Controls -->\n@if (shouldShowConfigControls && editModeEnabled) {\n<div class=\"form-config-controls\">\n  <button\n    type=\"button\"\n    mat-icon-button\n    (click)=\"openConfigEditor()\"\n    [disabled]=\"isLoading\"\n    class=\"config-button\"\n    [matBadge]=\"schemaOutdated ? '!' : ''\"\n    [matBadgeHidden]=\"!schemaOutdated\"\n    matBadgeColor=\"warn\" matBadgeSize=\"small\" matBadgePosition=\"above after\"\n    [matTooltip]=\"schemaOutdated ? 'Schema do servidor mudou \u2014 Reconciliar' : 'Configurar formul\u00E1rio'\"\n  >\n    <mat-icon [praxisIcon]=\"'settings'\"></mat-icon>\n  </button>\n  <button\n    type=\"button\"\n    mat-icon-button\n    (click)=\"disconnect()\"\n    matTooltip=\"Desconectar da fonte de dados\"\n    [disabled]=\"isLoading\"\n  >\n    <mat-icon [praxisIcon]=\"'link_off'\"></mat-icon>\n  </button>\n</div>\n} }\n\n<!-- Form Content -->\n@if (!resourcePath && (!config.sections || config.sections.length === 0)) {\n  <praxis-empty-state-card\n    icon=\"link\"\n    [title]=\"'Conecte o formul\u00E1rio \u00E0 fonte de dados'\"\n    [description]=\"'Informe a rota do recurso da API para gerar automaticamente os campos do formul\u00E1rio.'\"\n    [primaryAction]=\"{ label: 'Conectar \u00E0 fonte de dados', icon: 'bolt', action: openQuickConnect.bind(this) }\"\n  ></praxis-empty-state-card>\n}\n<form\n  #formHost\n  (ngSubmit)=\"onSubmit()\"\n  [attr.aria-busy]=\"submitting ? 'true' : null\"\n  [attr.aria-label]=\"'Formul\u00E1rio ' + (config.metadata?.version || '')\"\n  [class.canvas-mode-enabled]=\"editModeEnabled\"\n  [class.presentation-mode]=\"!!presentationModeGlobal\"\n  [class.readonly-mode]=\"!!readonlyModeGlobal\"\n  [formGroup]=\"form\"\n  [ngClass]=\"{\n    'pres-compact': presentationVars.compact,\n    'pres-label-left': presentationVars.labelPosition === 'left',\n    'pres-label-above': presentationVars.labelPosition === 'above'\n  }\"\n  [style.--pfx-pres-label-align]=\"presentationVars.labelAlign\"\n  [style.--pfx-pres-label-size]=\"presentationVars.labelSize\"\n  [style.--pfx-pres-label-width]=\"presentationVars.labelWidth\"\n  [style.--pfx-pres-row-gap]=\"presentationVars.density === 'compact' ? '6px' : (presentationVars.density === 'cozy' ? '8px' : '10px')\"\n  [style.--pfx-pres-row-padding]=\"presentationVars.density === 'compact' ? '2px 0' : (presentationVars.density === 'cozy' ? '6px 0' : '8px 0')\"\n  [style.--pfx-pres-value-align]=\"presentationVars.valueAlign\"\n  [style.--pfx-pres-value-size]=\"presentationVars.valueSize\"\n  class=\"praxis-dynamic-form\"\n>\n  <praxis-canvas-toolbar\n    (editMetadata)=\"openSelectedElementEditor()\"\n    (selectPath)=\"onSelectPath($event)\"\n    (moveUp)=\"onToolbarMove('up')\"\n    (moveDown)=\"onToolbarMove('down')\"\n    (toggleReadonly)=\"onToolbarToggleReadonly()\"\n    (toggleRequired)=\"onToolbarToggleRequired()\"\n    (toggleHidden)=\"onToolbarToggleHidden()\"\n    (toggleDisabled)=\"onToolbarToggleDisabled()\"\n    (requestClose)=\"onToolbarRequestClose()\"\n    *ngIf=\"editModeEnabled && selectedElement\"\n    [selectedElement]=\"selectedElement\"\n    [style.transform]=\"toolbarTransform\"\n  ></praxis-canvas-toolbar>\n\n@if ((config.actions?.placement || 'afterSections') === 'top' && !(presentationModeGlobal || readonlyModeGlobal)) {\n    <praxis-form-actions\n      [actions]=\"config.actions\"\n      [isSubmitting]=\"submitting\"\n      [formIsValid]=\"form.valid\"\n      [submitError]=\"submitError\"\n      [formId]=\"formId\"\n      (action)=\"onFormAction($event)\"\n    ></praxis-form-actions>\n  }\n\n  @for (section of config.sections; track (section.id ?? $index); let sectionIndex = $index;\n  let last = $last) {\n  <div\n    class=\"section-drop-wrapper\"\n    [attr.data-section-id]=\"section.id\"\n  >\n    <div\n      #sectionEl\n      class=\"form-section canvas-element\"\n      data-canvas-type=\"section\"\n      [attr.data-section-id]=\"section.id\"\n      [attr.data-section-index]=\"sectionIndex\"\n      (mouseenter)=\"onElementMouseEnter($event, 'section', section, sectionEl)\"\n      (mouseleave)=\"onElementMouseLeave($event)\"\n      (click)=\"onElementClick($event, 'section', section, sectionEl)\"\n      [class.selected]=\"selectedElement?.domElement === sectionEl\"\n      [class.hovered]=\"hoveredElement?.domElement === sectionEl && selectedElement?.domElement !== sectionEl\"\n      [style.marginBottom.px]=\"!last ? (section.gapBottom || null) : null\"\n    >\n      @if (section.title) {\n      <h3\n        class=\"section-title\"\n        [class.title-large]=\"section.titleStyle === 'titleLarge'\"\n        [class.title-medium]=\"section.titleStyle === 'titleMedium'\"\n        [class.title-small]=\"section.titleStyle === 'titleSmall'\"\n        [class.headline-small]=\"section.titleStyle === 'headlineSmall'\"\n        [style.marginBottom.px]=\"section.titleGapBottom || null\"\n      >\n        @if (section.icon) {\n          <mat-icon class=\"section-title-icon\" aria-hidden=\"true\" [praxisIcon]=\"section.icon\"></mat-icon>\n        }\n        {{ section.title }}\n      </h3>\n      } @if (section.description) {\n        <p\n          class=\"section-description\"\n          [class.body-large]=\"section.descriptionStyle === 'bodyLarge'\"\n          [class.body-medium]=\"section.descriptionStyle === 'bodyMedium'\"\n          [class.body-small]=\"section.descriptionStyle === 'bodySmall'\"\n          [style.marginBottom.px]=\"section.descriptionGapBottom || null\"\n        >\n          {{ section.description }}\n        </p>\n      } @for (row of section.rows; track (row.id ?? $index); let rowIndex = $index) {\n      <div\n        class=\"row-drop-wrapper\"\n        [attr.data-section-id]=\"section.id\"\n      >\n        <div\n          #rowEl\n          class=\"form-row grid-12 canvas-element\"\n          data-canvas-type=\"row\"\n          [attr.data-row-index]=\"rowIndex\"\n          [attr.data-section-id]=\"section.id\"\n          [attr.data-row-id]=\"row.id\"\n          [style.--pfx-grid-gap.px]=\"row.gap || null\"\n          [style.marginBottom.px]=\"row.rowGap || null\"\n          (mouseenter)=\"onElementMouseEnter($event, 'row', row, rowEl)\"\n          (mouseleave)=\"onElementMouseLeave($event)\"\n          (click)=\"onElementClick($event, 'row', row, rowEl)\"\n          [class.selected]=\"selectedElement?.domElement === rowEl\"\n          [class.hovered]=\"hoveredElement?.domElement === rowEl && selectedElement?.domElement !== rowEl\"\n        >\n          @for (column of row.columns; track (column.id ?? $index); let colIndex = $index) {\n          @if (isColumnVisible(column)) {\n          <div\n            class=\"column-drop-wrapper\"\n            [attr.data-section-id]=\"section.id\"\n            [attr.data-row-id]=\"row.id\"\n          >\n            <div\n              #colEl\n              class=\"form-column canvas-element\"\n              [ngClass]=\"getColumnClasses(column)\"\n              [style.padding.px]=\"column.padding\"\n              [attr.data-testid]=\"column.testId || null\"\n              data-canvas-type=\"column\"\n              [attr.data-column-index]=\"colIndex\"\n              [attr.data-row-index]=\"rowIndex\"\n              [attr.data-section-id]=\"section.id\"\n              [attr.data-row-id]=\"row.id\"\n              [attr.data-column-id]=\"column.id\"\n              (mouseenter)=\"onElementMouseEnter($event, 'column', column, colEl)\"\n              (mouseleave)=\"onElementMouseLeave($event)\"\n              (click)=\"onElementClick($event, 'column', column, colEl)\"\n              [class.selected]=\"selectedElement?.domElement === colEl\"\n              [class.hovered]=\"hoveredElement?.domElement === colEl && selectedElement?.domElement !== colEl\"\n            >\n              <ng-container\n                dynamicFieldLoader\n                [fields]=\"getColumnFields(column)\"\n                [formGroup]=\"form\"\n                [readonlyMode]=\"readonlyModeGlobal === null ? null : readonlyModeGlobal\"\n                [disabledMode]=\"disabledModeGlobal === null ? null : disabledModeGlobal\"\n                [presentationMode]=\"presentationModeGlobal === null ? null : presentationModeGlobal\"\n                [visible]=\"visibleGlobal === null ? null : visibleGlobal\"\n                [canvasMode]=\"editModeEnabled\"\n                (canvasMouseEnter)=\"onFieldMouseEnter($event)\"\n                (canvasMouseLeave)=\"onFieldMouseLeave($event)\"\n                (canvasClick)=\"onFieldClick($event)\"\n              >\n              </ng-container>\n            </div>\n          </div>\n          } }\n        </div>\n      </div>\n\n      }\n      @if ((config.actions?.placement || 'afterSections') === 'insideLastSection' && last && !(presentationModeGlobal || readonlyModeGlobal)) {\n        <praxis-form-actions\n          [actions]=\"config.actions\"\n          [isSubmitting]=\"submitting\"\n          [formIsValid]=\"form.valid\"\n          [submitError]=\"submitError\"\n          [formId]=\"formId\"\n          (action)=\"onFormAction($event)\"\n        ></praxis-form-actions>\n      }\n      <!-- Overlay de bloqueio durante submiss\u00E3o -->\n      @if (submitting) {\n      <div class=\"form-blocking-overlay\" aria-live=\"polite\">\n        <mat-progress-spinner\n          diameter=\"40\"\n          color=\"primary\"\n        ></mat-progress-spinner>\n        <p>{{ config.messages?.loading?.submit || 'Salvando...' }}</p>\n      </div>\n      }\n  </div>\n  </div>\n\n  @if (editModeEnabled && selectedElement?.domElement === sectionEl) {\n  <div class=\"add-section-container\">\n    <div class=\"add-section-line\"></div>\n    <button\n      mat-fab\n      color=\"primary\"\n      aria-label=\"Adicionar nova se\u00E7\u00E3o\"\n      (click)=\"addNewSectionAfter(sectionIndex)\"\n      matTooltip=\"Adicionar nova se\u00E7\u00E3o aqui\"\n    >\n      <mat-icon [praxisIcon]=\"'add'\"></mat-icon>\n    </button>\n    <div class=\"add-section-line\"></div>\n  </div>\n  } }\n@if ((config.actions?.placement || 'afterSections') === 'afterSections' && !(presentationModeGlobal || readonlyModeGlobal)) {\n    <praxis-form-actions\n      [actions]=\"config.actions\"\n      [isSubmitting]=\"submitting\"\n      [formIsValid]=\"form.valid\"\n      [submitError]=\"submitError\"\n      [formId]=\"formId\"\n      (action)=\"onFormAction($event)\"\n    ></praxis-form-actions>\n  }\n</form>\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative}.form-config-controls{position:absolute;top:4px;right:4px;display:flex;gap:.25rem;z-index:100;background:transparent;padding:0;border:0;min-width:0;justify-content:flex-end;pointer-events:none}.form-config-controls>*{pointer-events:auto}.form-config-controls .mat-icon-button{--mdc-icon-button-state-layer-size: 36px;width:36px;height:36px;color:var(--md-sys-color-on-surface-variant)}.form-config-controls .mat-icon-button:hover{color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary),transparent 90%)}.config-button{color:var(--md-sys-color-primary)}.form-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;text-align:center;color:var(--md-sys-color-on-surface);gap:1rem}.form-loading p{margin:0;font-size:.875rem;opacity:.7}.form-error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;text-align:center;color:var(--md-sys-color-error);gap:1rem;border:1px solid var(--md-sys-color-error);border-radius:8px;background-color:var(--md-sys-color-error-container);margin:1rem}.form-error h3{margin:0;color:var(--md-sys-color-on-error-container)}.form-error p{margin:0;color:var(--md-sys-color-on-error-container);opacity:.8}.form-error button{margin-top:.5rem}.praxis-dynamic-form{display:flex;flex-direction:column;transition:all .3s ease;position:relative}.praxis-dynamic-form.presentation-mode .form-row,.praxis-dynamic-form.readonly-mode .form-row{gap:.5rem;margin-bottom:.5rem}.praxis-dynamic-form.presentation-mode .form-section,.praxis-dynamic-form.readonly-mode .form-section{padding:.75rem .875rem}.praxis-dynamic-form.pres-compact .form-row{gap:.35rem;margin-bottom:.35rem}.praxis-dynamic-form.pres-compact .form-section{padding:.5rem .75rem}.praxis-dynamic-form.pres-label-left .praxis-presentation{display:grid;grid-template-columns:var(--pfx-presentation-label-w, 220px) 1fr;align-items:baseline;column-gap:10px}.praxis-dynamic-form.pres-label-left .praxis-presentation__label{text-align:right;margin-bottom:0}.form-section{border:1px solid var(--pfx-form-stroke, var(--md-sys-color-outline-variant));border-radius:8px;padding:1rem;background:var(--pfx-form-section-surface, var(--md-sys-color-surface-container));transition:all .2s ease;position:relative}.section-drop-wrapper>.form-section{margin-bottom:var(--pfx-section-gap, 20px)}.section-drop-wrapper:last-of-type>.form-section{margin-bottom:0}.section-title{margin:0 0 var(--pfx-section-title-mb, 20px) 0;font-size:1.05rem;font-weight:500;color:var(--md-sys-color-on-surface)}.section-title.title-large{font:var(--mdc-typography-title-large, 500 22px/28px system-ui)}.section-title.title-medium{font:var(--mdc-typography-title-medium, 500 16px/24px system-ui)}.section-title.title-small{font:var(--mdc-typography-title-small, 500 14px/20px system-ui)}.section-title.headline-small{font:var(--mdc-typography-headline-small, 600 24px/32px system-ui)}.section-description{margin:0 0 8px;font-size:.875rem;color:var(--md-sys-color-on-surface-variant)}.section-description.body-large{font:var(--mdc-typography-body-large, 400 16px/24px system-ui)}.section-description.body-medium{font:var(--mdc-typography-body-medium, 400 14px/20px system-ui)}.section-description.body-small{font:var(--mdc-typography-body-small, 400 12px/16px system-ui)}.form-row{display:flex;gap:1rem;margin-bottom:1rem;transition:all .2s ease;border-radius:6px;position:relative}.praxis-dynamic-form .mat-mdc-form-field{width:100%;margin-bottom:var(--pfx-field-gap, 10px)}.praxis-dynamic-form .mat-mdc-form-field-subscript-wrapper{min-height:var(--pfx-subscript-min-h, 22px)}.form-row:last-child{margin-bottom:0}.form-column{flex:1;min-width:0;transition:all .2s ease;border-radius:4px;position:relative}.form-row.grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--pfx-grid-gap, 16px)}.align-start{align-self:flex-start}.align-center{align-self:center}.align-end{align-self:flex-end}.align-stretch{align-self:stretch}.span-xs-1{grid-column:span 1}.span-xs-2{grid-column:span 2}.span-xs-3{grid-column:span 3}.span-xs-4{grid-column:span 4}.span-xs-5{grid-column:span 5}.span-xs-6{grid-column:span 6}.span-xs-7{grid-column:span 7}.span-xs-8{grid-column:span 8}.span-xs-9{grid-column:span 9}.span-xs-10{grid-column:span 10}.span-xs-11{grid-column:span 11}.span-xs-12{grid-column:span 12}.offset-xs-0{margin-left:0%}.offset-xs-1{margin-left:calc(1 / 12 * 100%)}.offset-xs-2{margin-left:calc(2 / 12 * 100%)}.offset-xs-3{margin-left:25%}.offset-xs-4{margin-left:calc(4 / 12 * 100%)}.offset-xs-5{margin-left:calc(5 / 12 * 100%)}.offset-xs-6{margin-left:50%}.offset-xs-7{margin-left:calc(7 / 12 * 100%)}.offset-xs-8{margin-left:calc(8 / 12 * 100%)}.offset-xs-9{margin-left:75%}.offset-xs-10{margin-left:calc(10 / 12 * 100%)}.offset-xs-11{margin-left:calc(11 / 12 * 100%)}.order-xs--12{order:-12}.order-xs--11{order:-11}.order-xs--10{order:-10}.order-xs--9{order:-9}.order-xs--8{order:-8}.order-xs--7{order:-7}.order-xs--6{order:-6}.order-xs--5{order:-5}.order-xs--4{order:-4}.order-xs--3{order:-3}.order-xs--2{order:-2}.order-xs--1{order:-1}.order-xs-0{order:0}.order-xs-1{order:1}.order-xs-2{order:2}.order-xs-3{order:3}.order-xs-4{order:4}.order-xs-5{order:5}.order-xs-6{order:6}.order-xs-7{order:7}.order-xs-8{order:8}.order-xs-9{order:9}.order-xs-10{order:10}.order-xs-11{order:11}.order-xs-12{order:12}.hidden-xs{display:none}@media (min-width: 600px){.span-sm-1{grid-column:span 1}.span-sm-2{grid-column:span 2}.span-sm-3{grid-column:span 3}.span-sm-4{grid-column:span 4}.span-sm-5{grid-column:span 5}.span-sm-6{grid-column:span 6}.span-sm-7{grid-column:span 7}.span-sm-8{grid-column:span 8}.span-sm-9{grid-column:span 9}.span-sm-10{grid-column:span 10}.span-sm-11{grid-column:span 11}.span-sm-12{grid-column:span 12}.offset-sm-0{margin-left:0%}.offset-sm-1{margin-left:calc(1 / 12 * 100%)}.offset-sm-2{margin-left:calc(2 / 12 * 100%)}.offset-sm-3{margin-left:25%}.offset-sm-4{margin-left:calc(4 / 12 * 100%)}.offset-sm-5{margin-left:calc(5 / 12 * 100%)}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:calc(7 / 12 * 100%)}.offset-sm-8{margin-left:calc(8 / 12 * 100%)}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:calc(10 / 12 * 100%)}.offset-sm-11{margin-left:calc(11 / 12 * 100%)}.order-sm--12{order:-12}.order-sm--11{order:-11}.order-sm--10{order:-10}.order-sm--9{order:-9}.order-sm--8{order:-8}.order-sm--7{order:-7}.order-sm--6{order:-6}.order-sm--5{order:-5}.order-sm--4{order:-4}.order-sm--3{order:-3}.order-sm--2{order:-2}.order-sm--1{order:-1}.order-sm-0{order:0}.order-sm-1{order:1}.order-sm-2{order:2}.order-sm-3{order:3}.order-sm-4{order:4}.order-sm-5{order:5}.order-sm-6{order:6}.order-sm-7{order:7}.order-sm-8{order:8}.order-sm-9{order:9}.order-sm-10{order:10}.order-sm-11{order:11}.order-sm-12{order:12}.hidden-sm{display:none}}@media (min-width: 900px){.span-md-1{grid-column:span 1}.span-md-2{grid-column:span 2}.span-md-3{grid-column:span 3}.span-md-4{grid-column:span 4}.span-md-5{grid-column:span 5}.span-md-6{grid-column:span 6}.span-md-7{grid-column:span 7}.span-md-8{grid-column:span 8}.span-md-9{grid-column:span 9}.span-md-10{grid-column:span 10}.span-md-11{grid-column:span 11}.span-md-12{grid-column:span 12}.offset-md-0{margin-left:0%}.offset-md-1{margin-left:calc(1 / 12 * 100%)}.offset-md-2{margin-left:calc(2 / 12 * 100%)}.offset-md-3{margin-left:25%}.offset-md-4{margin-left:calc(4 / 12 * 100%)}.offset-md-5{margin-left:calc(5 / 12 * 100%)}.offset-md-6{margin-left:50%}.offset-md-7{margin-left:calc(7 / 12 * 100%)}.offset-md-8{margin-left:calc(8 / 12 * 100%)}.offset-md-9{margin-left:75%}.offset-md-10{margin-left:calc(10 / 12 * 100%)}.offset-md-11{margin-left:calc(11 / 12 * 100%)}.order-md--12{order:-12}.order-md--11{order:-11}.order-md--10{order:-10}.order-md--9{order:-9}.order-md--8{order:-8}.order-md--7{order:-7}.order-md--6{order:-6}.order-md--5{order:-5}.order-md--4{order:-4}.order-md--3{order:-3}.order-md--2{order:-2}.order-md--1{order:-1}.order-md-0{order:0}.order-md-1{order:1}.order-md-2{order:2}.order-md-3{order:3}.order-md-4{order:4}.order-md-5{order:5}.order-md-6{order:6}.order-md-7{order:7}.order-md-8{order:8}.order-md-9{order:9}.order-md-10{order:10}.order-md-11{order:11}.order-md-12{order:12}.hidden-md{display:none}}@media (min-width: 1200px){.span-lg-1{grid-column:span 1}.span-lg-2{grid-column:span 2}.span-lg-3{grid-column:span 3}.span-lg-4{grid-column:span 4}.span-lg-5{grid-column:span 5}.span-lg-6{grid-column:span 6}.span-lg-7{grid-column:span 7}.span-lg-8{grid-column:span 8}.span-lg-9{grid-column:span 9}.span-lg-10{grid-column:span 10}.span-lg-11{grid-column:span 11}.span-lg-12{grid-column:span 12}.offset-lg-0{margin-left:0%}.offset-lg-1{margin-left:calc(1 / 12 * 100%)}.offset-lg-2{margin-left:calc(2 / 12 * 100%)}.offset-lg-3{margin-left:25%}.offset-lg-4{margin-left:calc(4 / 12 * 100%)}.offset-lg-5{margin-left:calc(5 / 12 * 100%)}.offset-lg-6{margin-left:50%}.offset-lg-7{margin-left:calc(7 / 12 * 100%)}.offset-lg-8{margin-left:calc(8 / 12 * 100%)}.offset-lg-9{margin-left:75%}.offset-lg-10{margin-left:calc(10 / 12 * 100%)}.offset-lg-11{margin-left:calc(11 / 12 * 100%)}.order-lg--12{order:-12}.order-lg--11{order:-11}.order-lg--10{order:-10}.order-lg--9{order:-9}.order-lg--8{order:-8}.order-lg--7{order:-7}.order-lg--6{order:-6}.order-lg--5{order:-5}.order-lg--4{order:-4}.order-lg--3{order:-3}.order-lg--2{order:-2}.order-lg--1{order:-1}.order-lg-0{order:0}.order-lg-1{order:1}.order-lg-2{order:2}.order-lg-3{order:3}.order-lg-4{order:4}.order-lg-5{order:5}.order-lg-6{order:6}.order-lg-7{order:7}.order-lg-8{order:8}.order-lg-9{order:9}.order-lg-10{order:10}.order-lg-11{order:11}.order-lg-12{order:12}.hidden-lg{display:none}}@media (min-width: 1536px){.span-xl-1{grid-column:span 1}.span-xl-2{grid-column:span 2}.span-xl-3{grid-column:span 3}.span-xl-4{grid-column:span 4}.span-xl-5{grid-column:span 5}.span-xl-6{grid-column:span 6}.span-xl-7{grid-column:span 7}.span-xl-8{grid-column:span 8}.span-xl-9{grid-column:span 9}.span-xl-10{grid-column:span 10}.span-xl-11{grid-column:span 11}.span-xl-12{grid-column:span 12}.offset-xl-0{margin-left:0%}.offset-xl-1{margin-left:calc(1 / 12 * 100%)}.offset-xl-2{margin-left:calc(2 / 12 * 100%)}.offset-xl-3{margin-left:25%}.offset-xl-4{margin-left:calc(4 / 12 * 100%)}.offset-xl-5{margin-left:calc(5 / 12 * 100%)}.offset-xl-6{margin-left:50%}.offset-xl-7{margin-left:calc(7 / 12 * 100%)}.offset-xl-8{margin-left:calc(8 / 12 * 100%)}.offset-xl-9{margin-left:75%}.offset-xl-10{margin-left:calc(10 / 12 * 100%)}.offset-xl-11{margin-left:calc(11 / 12 * 100%)}.order-xl--12{order:-12}.order-xl--11{order:-11}.order-xl--10{order:-10}.order-xl--9{order:-9}.order-xl--8{order:-8}.order-xl--7{order:-7}.order-xl--6{order:-6}.order-xl--5{order:-5}.order-xl--4{order:-4}.order-xl--3{order:-3}.order-xl--2{order:-2}.order-xl--1{order:-1}.order-xl-0{order:0}.order-xl-1{order:1}.order-xl-2{order:2}.order-xl-3{order:3}.order-xl-4{order:4}.order-xl-5{order:5}.order-xl-6{order:6}.order-xl-7{order:7}.order-xl-8{order:8}.order-xl-9{order:9}.order-xl-10{order:10}.order-xl-11{order:11}.order-xl-12{order:12}.hidden-xl{display:none}}.form-blocking-overlay{position:absolute;inset:0;background:transparent;color:var(--md-sys-color-on-surface, #000);backdrop-filter:blur(2px) saturate(103%);-webkit-backdrop-filter:blur(2px) saturate(103%);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;z-index:10;pointer-events:all}@media (max-width: 768px){.form-row{flex-direction:column;gap:.5rem}.form-section{padding:1rem}}.canvas-mode-enabled{--canvas-hit: 14px}.canvas-mode-enabled .canvas-element{position:relative;z-index:0;border-radius:8px;outline:2px solid transparent;outline-offset:2px;transition:outline-color .2s ease,outline-style .2s ease}.canvas-mode-enabled .canvas-element:before{content:\"\";position:absolute;inset:calc(-1 * var(--canvas-hit));pointer-events:none;border-radius:inherit;background:transparent}.canvas-mode-enabled .canvas-element[data-canvas-type=section]{--outline-color: var(--mat-sys-primary, var(--md-sys-color-primary))}.canvas-mode-enabled .canvas-element[data-canvas-type=row]{--outline-color: var(--mat-sys-secondary, var(--md-sys-color-secondary))}.canvas-mode-enabled .canvas-element[data-canvas-type=column],.canvas-mode-enabled .canvas-element[data-canvas-type=field]{--outline-color: var(--mat-sys-tertiary, var(--md-sys-color-tertiary))}.canvas-mode-enabled .canvas-element[data-canvas-type=actions]{--outline-color: color-mix( in srgb, var(--mat-sys-primary, var(--md-sys-color-primary)) 70%, var(--mat-sys-secondary, var(--md-sys-color-secondary)) 30% )}.canvas-mode-enabled .canvas-element.hovered:not(.selected){outline-color:var(--outline-color, var(--mat-sys-primary, var(--md-sys-color-primary)));outline-style:dashed}.canvas-mode-enabled .canvas-element.selected{outline-color:var(--outline-color, var(--mat-sys-primary, var(--md-sys-color-primary)));outline-style:solid;box-shadow:0 0 0 2px color-mix(in oklab,var(--outline-color, var(--mat-sys-primary, var(--md-sys-color-primary))) 70%,transparent),0 0 8px color-mix(in oklab,var(--outline-color, var(--mat-sys-primary, var(--md-sys-color-primary))) 60%,transparent),0 0 18px color-mix(in oklab,var(--outline-color, var(--mat-sys-primary, var(--md-sys-color-primary))) 35%,transparent)}.canvas-mode-enabled .canvas-element.hovered{z-index:1000}.canvas-mode-enabled .canvas-element.selected{z-index:2000}.section-drop-wrapper,.row-drop-wrapper,.column-drop-wrapper{display:contents}.add-section-container{display:flex;align-items:center;justify-content:center;padding:.5rem 0;margin:-.5rem 0;position:relative;z-index:500}.add-section-container .add-section-line{flex-grow:1;height:1px;background:repeating-linear-gradient(90deg,var(--md-sys-color-outline-variant),var(--md-sys-color-outline-variant) 4px,transparent 4px,transparent 8px)}.add-section-container button{margin:0 1rem;transform:scale(.85)}.section-title{display:flex;align-items:center;gap:8px}.section-title .section-title-icon{font-size:1.25em;line-height:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: DynamicFieldLoaderDirective, selector: "[dynamicFieldLoader]", inputs: ["fields", "formGroup", "enableExternalControlBinding", "itemTemplate", "readonlyMode", "disabledMode", "presentationMode", "visible", "canvasMode"], outputs: ["componentsCreated", "fieldCreated", "fieldDestroyed", "canvasMouseEnter", "canvasMouseLeave", "canvasClick"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.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: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i14.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i16.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "component", type: CanvasToolbarComponent, selector: "praxis-canvas-toolbar", inputs: ["selectedElement"], outputs: ["editMetadata", "delete", "moveUp", "moveDown", "selectPath", "requestClose", "toggleReadonly", "toggleRequired", "toggleHidden", "toggleDisabled"] }, { kind: "component", type: PraxisFormActionsComponent, selector: "praxis-form-actions", inputs: ["actions", "isSubmitting", "formIsValid", "submitError", "formId"], outputs: ["action"] }, { kind: "component", type: EmptyStateCardComponent, selector: "praxis-empty-state-card", inputs: ["icon", "title", "description", "primaryAction", "secondaryActions", "inline"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PraxisDynamicForm, decorators: [{
             type: Component,
@@ -10075,7 +10092,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                         CanvasToolbarComponent,
                         PraxisFormActionsComponent,
                         EmptyStateCardComponent,
-                    ], template: "@if (isLoading) {\n<!-- Loading State -->\n<div class=\"form-loading\">\n  <mat-progress-spinner diameter=\"40\"></mat-progress-spinner>\n  <p>Carregando formul\u00E1rio...</p>\n</div>\n} @else if (initializationStatus === 'error') {\n<!-- Error State -->\n<div class=\"form-error\">\n  <mat-icon color=\"warn\" [praxisIcon]=\"'error'\"></mat-icon>\n  <h3>{{ getErrorTitle() }}</h3>\n  <p>{{ currentErrorMessage }}</p>\n  @if (isRecoverable) {\n  <button mat-stroked-button (click)=\"retryInitialization()\">\n    <mat-icon [praxisIcon]=\"'refresh'\"></mat-icon>\n    Tentar Novamente\n  </button>\n  }\n  <button mat-button (click)=\"showDetailedError()\" class=\"show-details\">\n    Ver Detalhes T\u00E9cnicos\n  </button>\n  <!-- Permitir corre\u00E7\u00E3o do resourcePath diretamente do estado de erro -->\n  <button mat-flat-button color=\"primary\" (click)=\"openQuickConnect()\" class=\"connect-action\">\n    <mat-icon [praxisIcon]=\"'bolt'\"></mat-icon>\n    Conectar a recurso\n  </button>\n</div>\n} @else if (initializationStatus === 'success') {\n<!-- Inline banner for schema change (only in edit mode) -->\n@if (shouldShowOutdatedInline()) {\n<div class=\"pfx-form-info-banner\" role=\"status\" aria-live=\"polite\">\n  <div class=\"text\">O schema do servidor mudou. Reconciliar agora?</div>\n  <div class=\"actions\">\n    <button mat-stroked-button color=\"primary\" (click)=\"openConfigEditor()\">\n      <mat-icon [praxisIcon]=\"'sync'\"></mat-icon>\n      Reconciliar\n    </button>\n    <button mat-button (click)=\"onSnoozeOutdated()\">Lembrar depois</button>\n    <button mat-button (click)=\"onIgnoreOutdated()\">Ignorar</button>\n  </div>\n  </div>\n}\n\n<!-- Configuration Controls -->\n@if (shouldShowConfigControls && editModeEnabled) {\n<div class=\"form-config-controls\">\n  <button\n    type=\"button\"\n    mat-icon-button\n    (click)=\"openConfigEditor()\"\n    [disabled]=\"isLoading\"\n    class=\"config-button\"\n    [matBadge]=\"schemaOutdated ? '!' : ''\"\n    [matBadgeHidden]=\"!schemaOutdated\"\n    matBadgeColor=\"warn\" matBadgeSize=\"small\" matBadgePosition=\"above after\"\n    [matTooltip]=\"schemaOutdated ? 'Schema do servidor mudou \u2014 Reconciliar' : 'Configurar formul\u00E1rio'\"\n  >\n    <mat-icon [praxisIcon]=\"'settings'\"></mat-icon>\n  </button>\n  <button\n    type=\"button\"\n    mat-icon-button\n    (click)=\"disconnect()\"\n    matTooltip=\"Desconectar da fonte de dados\"\n    [disabled]=\"isLoading\"\n  >\n    <mat-icon [praxisIcon]=\"'link_off'\"></mat-icon>\n  </button>\n</div>\n} }\n\n<!-- Form Content -->\n@if (!resourcePath && (!config.sections || config.sections.length === 0)) {\n  <praxis-empty-state-card\n    icon=\"link\"\n    [title]=\"'Conecte o formul\u00E1rio \u00E0 fonte de dados'\"\n    [description]=\"'Informe a rota do recurso da API para gerar automaticamente os campos do formul\u00E1rio.'\"\n    [primaryAction]=\"{ label: 'Conectar \u00E0 fonte de dados', icon: 'bolt', action: openQuickConnect.bind(this) }\"\n  ></praxis-empty-state-card>\n}\n<form\n  #formHost\n  (ngSubmit)=\"onSubmit()\"\n  [attr.aria-busy]=\"submitting ? 'true' : null\"\n  [attr.aria-label]=\"'Formul\u00E1rio ' + (config.metadata?.version || '')\"\n  [class.canvas-mode-enabled]=\"editModeEnabled\"\n  [class.presentation-mode]=\"!!presentationModeGlobal\"\n  [class.readonly-mode]=\"!!readonlyModeGlobal\"\n  [formGroup]=\"form\"\n  [ngClass]=\"{\n    'pres-compact': presentationVars.compact,\n    'pres-label-left': presentationVars.labelPosition === 'left',\n    'pres-label-above': presentationVars.labelPosition === 'above'\n  }\"\n  [style.--pfx-pres-label-align]=\"presentationVars.labelAlign\"\n  [style.--pfx-pres-label-size]=\"presentationVars.labelSize\"\n  [style.--pfx-pres-label-width]=\"presentationVars.labelWidth\"\n  [style.--pfx-pres-row-gap]=\"presentationVars.density === 'compact' ? '6px' : (presentationVars.density === 'cozy' ? '8px' : '10px')\"\n  [style.--pfx-pres-row-padding]=\"presentationVars.density === 'compact' ? '2px 0' : (presentationVars.density === 'cozy' ? '6px 0' : '8px 0')\"\n  [style.--pfx-pres-value-align]=\"presentationVars.valueAlign\"\n  [style.--pfx-pres-value-size]=\"presentationVars.valueSize\"\n  class=\"praxis-dynamic-form\"\n>\n  <praxis-canvas-toolbar\n    (editMetadata)=\"openSelectedElementEditor()\"\n    (selectPath)=\"onSelectPath($event)\"\n    (moveUp)=\"onToolbarMove('up')\"\n    (moveDown)=\"onToolbarMove('down')\"\n    (toggleReadonly)=\"onToolbarToggleReadonly()\"\n    (toggleRequired)=\"onToolbarToggleRequired()\"\n    (toggleHidden)=\"onToolbarToggleHidden()\"\n    (toggleDisabled)=\"onToolbarToggleDisabled()\"\n    (requestClose)=\"onToolbarRequestClose()\"\n    *ngIf=\"editModeEnabled && selectedElement\"\n    [selectedElement]=\"selectedElement\"\n    [style.transform]=\"toolbarTransform\"\n  ></praxis-canvas-toolbar>\n\n@if ((config.actions?.placement || 'afterSections') === 'top' && !(presentationModeGlobal || readonlyModeGlobal)) {\n    <praxis-form-actions\n      [actions]=\"config.actions\"\n      [isSubmitting]=\"submitting\"\n      [formIsValid]=\"form.valid\"\n      [submitError]=\"submitError\"\n      [formId]=\"formId\"\n      (action)=\"onFormAction($event)\"\n    ></praxis-form-actions>\n  }\n\n  @for (section of config.sections; track (section.id ?? $index); let sectionIndex = $index;\n  let last = $last) {\n  <div\n    class=\"section-drop-wrapper\"\n    [attr.data-section-id]=\"section.id\"\n  >\n    <div\n      #sectionEl\n      class=\"form-section canvas-element\"\n      data-canvas-type=\"section\"\n      [attr.data-section-id]=\"section.id\"\n      [attr.data-section-index]=\"sectionIndex\"\n      (mouseenter)=\"onElementMouseEnter($event, 'section', section, sectionEl)\"\n      (mouseleave)=\"onElementMouseLeave($event)\"\n      (click)=\"onElementClick($event, 'section', section, sectionEl)\"\n      [class.selected]=\"selectedElement?.domElement === sectionEl\"\n      [class.hovered]=\"hoveredElement?.domElement === sectionEl && selectedElement?.domElement !== sectionEl\"\n      [style.marginBottom.px]=\"!last ? (section.gapBottom || null) : null\"\n    >\n      @if (section.title) {\n      <h3\n        class=\"section-title\"\n        [class.title-large]=\"section.titleStyle === 'titleLarge'\"\n        [class.title-medium]=\"section.titleStyle === 'titleMedium'\"\n        [class.title-small]=\"section.titleStyle === 'titleSmall'\"\n        [class.headline-small]=\"section.titleStyle === 'headlineSmall'\"\n        [style.marginBottom.px]=\"section.titleGapBottom || null\"\n      >\n        @if (section.icon) {\n          <mat-icon class=\"section-title-icon\" aria-hidden=\"true\" [praxisIcon]=\"section.icon\"></mat-icon>\n        }\n        {{ section.title }}\n      </h3>\n      } @if (section.description) {\n        <p\n          class=\"section-description\"\n          [class.body-large]=\"section.descriptionStyle === 'bodyLarge'\"\n          [class.body-medium]=\"section.descriptionStyle === 'bodyMedium'\"\n          [class.body-small]=\"section.descriptionStyle === 'bodySmall'\"\n          [style.marginBottom.px]=\"section.descriptionGapBottom || null\"\n        >\n          {{ section.description }}\n        </p>\n      } @for (row of section.rows; track (row.id ?? $index); let rowIndex = $index) {\n      <div\n        class=\"row-drop-wrapper\"\n        [attr.data-section-id]=\"section.id\"\n      >\n        <div\n          #rowEl\n          class=\"form-row grid-12 canvas-element\"\n          data-canvas-type=\"row\"\n          [attr.data-row-index]=\"rowIndex\"\n          [attr.data-section-id]=\"section.id\"\n          [attr.data-row-id]=\"row.id\"\n          [style.--pfx-grid-gap.px]=\"row.gap || null\"\n          [style.marginBottom.px]=\"row.rowGap || null\"\n          (mouseenter)=\"onElementMouseEnter($event, 'row', row, rowEl)\"\n          (mouseleave)=\"onElementMouseLeave($event)\"\n          (click)=\"onElementClick($event, 'row', row, rowEl)\"\n          [class.selected]=\"selectedElement?.domElement === rowEl\"\n          [class.hovered]=\"hoveredElement?.domElement === rowEl && selectedElement?.domElement !== rowEl\"\n        >\n          @for (column of row.columns; track (column.id ?? $index); let colIndex = $index) {\n          @if (isColumnVisible(column)) {\n          <div\n            class=\"column-drop-wrapper\"\n            [attr.data-section-id]=\"section.id\"\n            [attr.data-row-id]=\"row.id\"\n          >\n            <div\n              #colEl\n              class=\"form-column canvas-element\"\n              [ngClass]=\"getColumnClasses(column)\"\n              [style.padding.px]=\"column.padding\"\n              [attr.data-testid]=\"column.testId || null\"\n              data-canvas-type=\"column\"\n              [attr.data-column-index]=\"colIndex\"\n              [attr.data-row-index]=\"rowIndex\"\n              [attr.data-section-id]=\"section.id\"\n              [attr.data-row-id]=\"row.id\"\n              [attr.data-column-id]=\"column.id\"\n              (mouseenter)=\"onElementMouseEnter($event, 'column', column, colEl)\"\n              (mouseleave)=\"onElementMouseLeave($event)\"\n              (click)=\"onElementClick($event, 'column', column, colEl)\"\n              [class.selected]=\"selectedElement?.domElement === colEl\"\n              [class.hovered]=\"hoveredElement?.domElement === colEl && selectedElement?.domElement !== colEl\"\n            >\n              <ng-container\n                dynamicFieldLoader\n                [fields]=\"getColumnFields(column)\"\n                [formGroup]=\"form\"\n                [readonlyMode]=\"readonlyModeGlobal === null ? null : readonlyModeGlobal\"\n                [disabledMode]=\"disabledModeGlobal === null ? null : disabledModeGlobal\"\n                [presentationMode]=\"presentationModeGlobal === null ? null : presentationModeGlobal\"\n                [visible]=\"visibleGlobal === null ? null : visibleGlobal\"\n                [canvasMode]=\"editModeEnabled\"\n                (canvasMouseEnter)=\"onFieldMouseEnter($event)\"\n                (canvasMouseLeave)=\"onFieldMouseLeave($event)\"\n                (canvasClick)=\"onFieldClick($event)\"\n              >\n              </ng-container>\n            </div>\n          </div>\n          } }\n        </div>\n      </div>\n\n      }\n      @if ((config.actions?.placement || 'afterSections') === 'insideLastSection' && last && !(presentationModeGlobal || readonlyModeGlobal)) {\n        <praxis-form-actions\n          [actions]=\"config.actions\"\n          [isSubmitting]=\"submitting\"\n          [formIsValid]=\"form.valid\"\n          [submitError]=\"submitError\"\n          [formId]=\"formId\"\n          (action)=\"onFormAction($event)\"\n        ></praxis-form-actions>\n      }\n      <!-- Overlay de bloqueio durante submiss\u00E3o -->\n      @if (submitting) {\n      <div class=\"form-blocking-overlay\" aria-live=\"polite\">\n        <mat-progress-spinner\n          diameter=\"40\"\n          color=\"primary\"\n        ></mat-progress-spinner>\n        <p>{{ config.messages?.loading?.submit || 'Salvando...' }}</p>\n      </div>\n      }\n  </div>\n  </div>\n\n  @if (editModeEnabled && selectedElement?.domElement === sectionEl) {\n  <div class=\"add-section-container\">\n    <div class=\"add-section-line\"></div>\n    <button\n      mat-fab\n      color=\"primary\"\n      aria-label=\"Adicionar nova se\u00E7\u00E3o\"\n      (click)=\"addNewSectionAfter(sectionIndex)\"\n      matTooltip=\"Adicionar nova se\u00E7\u00E3o aqui\"\n    >\n      <mat-icon [praxisIcon]=\"'add'\"></mat-icon>\n    </button>\n    <div class=\"add-section-line\"></div>\n  </div>\n  } }\n@if ((config.actions?.placement || 'afterSections') === 'afterSections' && !(presentationModeGlobal || readonlyModeGlobal)) {\n    <praxis-form-actions\n      [actions]=\"config.actions\"\n      [isSubmitting]=\"submitting\"\n      [formIsValid]=\"form.valid\"\n      [submitError]=\"submitError\"\n      [formId]=\"formId\"\n      (action)=\"onFormAction($event)\"\n    ></praxis-form-actions>\n  }\n</form>\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative}.form-config-controls{position:absolute;top:4px;right:4px;display:flex;gap:.25rem;z-index:100;background:transparent;padding:0;border:0;min-width:0;justify-content:flex-end;pointer-events:none}.form-config-controls>*{pointer-events:auto}.form-config-controls .mat-icon-button{--mdc-icon-button-state-layer-size: 36px;width:36px;height:36px;color:var(--md-sys-color-on-surface-variant)}.form-config-controls .mat-icon-button:hover{color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary),transparent 90%)}.config-button{color:var(--md-sys-color-primary)}.form-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;text-align:center;color:var(--md-sys-color-on-surface);gap:1rem}.form-loading p{margin:0;font-size:.875rem;opacity:.7}.form-error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;text-align:center;color:var(--md-sys-color-error);gap:1rem;border:1px solid var(--md-sys-color-error);border-radius:8px;background-color:var(--md-sys-color-error-container);margin:1rem}.form-error h3{margin:0;color:var(--md-sys-color-on-error-container)}.form-error p{margin:0;color:var(--md-sys-color-on-error-container);opacity:.8}.form-error button{margin-top:.5rem}.praxis-dynamic-form{display:flex;flex-direction:column;transition:all .3s ease;position:relative}.praxis-dynamic-form.presentation-mode .form-row,.praxis-dynamic-form.readonly-mode .form-row{gap:.5rem;margin-bottom:.5rem}.praxis-dynamic-form.presentation-mode .form-section,.praxis-dynamic-form.readonly-mode .form-section{padding:.75rem .875rem}.praxis-dynamic-form.pres-compact .form-row{gap:.35rem;margin-bottom:.35rem}.praxis-dynamic-form.pres-compact .form-section{padding:.5rem .75rem}.praxis-dynamic-form.pres-label-left .praxis-presentation{display:grid;grid-template-columns:var(--pfx-presentation-label-w, 220px) 1fr;align-items:baseline;column-gap:10px}.praxis-dynamic-form.pres-label-left .praxis-presentation__label{text-align:right;margin-bottom:0}.form-section{border:1px solid var(--pfx-form-stroke, var(--md-sys-color-outline-variant));border-radius:8px;padding:1rem;background:var(--pfx-form-section-surface, var(--md-sys-color-surface-container));transition:all .2s ease;position:relative}.section-drop-wrapper>.form-section{margin-bottom:var(--pfx-section-gap, 20px)}.section-drop-wrapper:last-of-type>.form-section{margin-bottom:0}.section-title{margin:0 0 var(--pfx-section-title-mb, 20px) 0;font-size:1.05rem;font-weight:500;color:var(--md-sys-color-on-surface)}.section-title.title-large{font:var(--mdc-typography-title-large, 500 22px/28px system-ui)}.section-title.title-medium{font:var(--mdc-typography-title-medium, 500 16px/24px system-ui)}.section-title.title-small{font:var(--mdc-typography-title-small, 500 14px/20px system-ui)}.section-title.headline-small{font:var(--mdc-typography-headline-small, 600 24px/32px system-ui)}.section-description{margin:0 0 8px;font-size:.875rem;color:var(--md-sys-color-on-surface-variant)}.section-description.body-large{font:var(--mdc-typography-body-large, 400 16px/24px system-ui)}.section-description.body-medium{font:var(--mdc-typography-body-medium, 400 14px/20px system-ui)}.section-description.body-small{font:var(--mdc-typography-body-small, 400 12px/16px system-ui)}.form-row{display:flex;gap:1rem;margin-bottom:1rem;transition:all .2s ease;border-radius:6px;position:relative}.praxis-dynamic-form .mat-mdc-form-field{margin-bottom:var(--pfx-field-gap, 10px)}.praxis-dynamic-form .mat-mdc-form-field-subscript-wrapper{min-height:var(--pfx-subscript-min-h, 22px)}.form-row:last-child{margin-bottom:0}.form-column{flex:1;min-width:0;transition:all .2s ease;border-radius:4px;position:relative}.form-row.grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--pfx-grid-gap, 16px)}.align-start{align-self:flex-start}.align-center{align-self:center}.align-end{align-self:flex-end}.align-stretch{align-self:stretch}.span-xs-1{grid-column:span 1}.span-xs-2{grid-column:span 2}.span-xs-3{grid-column:span 3}.span-xs-4{grid-column:span 4}.span-xs-5{grid-column:span 5}.span-xs-6{grid-column:span 6}.span-xs-7{grid-column:span 7}.span-xs-8{grid-column:span 8}.span-xs-9{grid-column:span 9}.span-xs-10{grid-column:span 10}.span-xs-11{grid-column:span 11}.span-xs-12{grid-column:span 12}.offset-xs-0{margin-left:0%}.offset-xs-1{margin-left:calc(1 / 12 * 100%)}.offset-xs-2{margin-left:calc(2 / 12 * 100%)}.offset-xs-3{margin-left:25%}.offset-xs-4{margin-left:calc(4 / 12 * 100%)}.offset-xs-5{margin-left:calc(5 / 12 * 100%)}.offset-xs-6{margin-left:50%}.offset-xs-7{margin-left:calc(7 / 12 * 100%)}.offset-xs-8{margin-left:calc(8 / 12 * 100%)}.offset-xs-9{margin-left:75%}.offset-xs-10{margin-left:calc(10 / 12 * 100%)}.offset-xs-11{margin-left:calc(11 / 12 * 100%)}.order-xs--12{order:-12}.order-xs--11{order:-11}.order-xs--10{order:-10}.order-xs--9{order:-9}.order-xs--8{order:-8}.order-xs--7{order:-7}.order-xs--6{order:-6}.order-xs--5{order:-5}.order-xs--4{order:-4}.order-xs--3{order:-3}.order-xs--2{order:-2}.order-xs--1{order:-1}.order-xs-0{order:0}.order-xs-1{order:1}.order-xs-2{order:2}.order-xs-3{order:3}.order-xs-4{order:4}.order-xs-5{order:5}.order-xs-6{order:6}.order-xs-7{order:7}.order-xs-8{order:8}.order-xs-9{order:9}.order-xs-10{order:10}.order-xs-11{order:11}.order-xs-12{order:12}.hidden-xs{display:none}@media (min-width: 600px){.span-sm-1{grid-column:span 1}.span-sm-2{grid-column:span 2}.span-sm-3{grid-column:span 3}.span-sm-4{grid-column:span 4}.span-sm-5{grid-column:span 5}.span-sm-6{grid-column:span 6}.span-sm-7{grid-column:span 7}.span-sm-8{grid-column:span 8}.span-sm-9{grid-column:span 9}.span-sm-10{grid-column:span 10}.span-sm-11{grid-column:span 11}.span-sm-12{grid-column:span 12}.offset-sm-0{margin-left:0%}.offset-sm-1{margin-left:calc(1 / 12 * 100%)}.offset-sm-2{margin-left:calc(2 / 12 * 100%)}.offset-sm-3{margin-left:25%}.offset-sm-4{margin-left:calc(4 / 12 * 100%)}.offset-sm-5{margin-left:calc(5 / 12 * 100%)}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:calc(7 / 12 * 100%)}.offset-sm-8{margin-left:calc(8 / 12 * 100%)}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:calc(10 / 12 * 100%)}.offset-sm-11{margin-left:calc(11 / 12 * 100%)}.order-sm--12{order:-12}.order-sm--11{order:-11}.order-sm--10{order:-10}.order-sm--9{order:-9}.order-sm--8{order:-8}.order-sm--7{order:-7}.order-sm--6{order:-6}.order-sm--5{order:-5}.order-sm--4{order:-4}.order-sm--3{order:-3}.order-sm--2{order:-2}.order-sm--1{order:-1}.order-sm-0{order:0}.order-sm-1{order:1}.order-sm-2{order:2}.order-sm-3{order:3}.order-sm-4{order:4}.order-sm-5{order:5}.order-sm-6{order:6}.order-sm-7{order:7}.order-sm-8{order:8}.order-sm-9{order:9}.order-sm-10{order:10}.order-sm-11{order:11}.order-sm-12{order:12}.hidden-sm{display:none}}@media (min-width: 900px){.span-md-1{grid-column:span 1}.span-md-2{grid-column:span 2}.span-md-3{grid-column:span 3}.span-md-4{grid-column:span 4}.span-md-5{grid-column:span 5}.span-md-6{grid-column:span 6}.span-md-7{grid-column:span 7}.span-md-8{grid-column:span 8}.span-md-9{grid-column:span 9}.span-md-10{grid-column:span 10}.span-md-11{grid-column:span 11}.span-md-12{grid-column:span 12}.offset-md-0{margin-left:0%}.offset-md-1{margin-left:calc(1 / 12 * 100%)}.offset-md-2{margin-left:calc(2 / 12 * 100%)}.offset-md-3{margin-left:25%}.offset-md-4{margin-left:calc(4 / 12 * 100%)}.offset-md-5{margin-left:calc(5 / 12 * 100%)}.offset-md-6{margin-left:50%}.offset-md-7{margin-left:calc(7 / 12 * 100%)}.offset-md-8{margin-left:calc(8 / 12 * 100%)}.offset-md-9{margin-left:75%}.offset-md-10{margin-left:calc(10 / 12 * 100%)}.offset-md-11{margin-left:calc(11 / 12 * 100%)}.order-md--12{order:-12}.order-md--11{order:-11}.order-md--10{order:-10}.order-md--9{order:-9}.order-md--8{order:-8}.order-md--7{order:-7}.order-md--6{order:-6}.order-md--5{order:-5}.order-md--4{order:-4}.order-md--3{order:-3}.order-md--2{order:-2}.order-md--1{order:-1}.order-md-0{order:0}.order-md-1{order:1}.order-md-2{order:2}.order-md-3{order:3}.order-md-4{order:4}.order-md-5{order:5}.order-md-6{order:6}.order-md-7{order:7}.order-md-8{order:8}.order-md-9{order:9}.order-md-10{order:10}.order-md-11{order:11}.order-md-12{order:12}.hidden-md{display:none}}@media (min-width: 1200px){.span-lg-1{grid-column:span 1}.span-lg-2{grid-column:span 2}.span-lg-3{grid-column:span 3}.span-lg-4{grid-column:span 4}.span-lg-5{grid-column:span 5}.span-lg-6{grid-column:span 6}.span-lg-7{grid-column:span 7}.span-lg-8{grid-column:span 8}.span-lg-9{grid-column:span 9}.span-lg-10{grid-column:span 10}.span-lg-11{grid-column:span 11}.span-lg-12{grid-column:span 12}.offset-lg-0{margin-left:0%}.offset-lg-1{margin-left:calc(1 / 12 * 100%)}.offset-lg-2{margin-left:calc(2 / 12 * 100%)}.offset-lg-3{margin-left:25%}.offset-lg-4{margin-left:calc(4 / 12 * 100%)}.offset-lg-5{margin-left:calc(5 / 12 * 100%)}.offset-lg-6{margin-left:50%}.offset-lg-7{margin-left:calc(7 / 12 * 100%)}.offset-lg-8{margin-left:calc(8 / 12 * 100%)}.offset-lg-9{margin-left:75%}.offset-lg-10{margin-left:calc(10 / 12 * 100%)}.offset-lg-11{margin-left:calc(11 / 12 * 100%)}.order-lg--12{order:-12}.order-lg--11{order:-11}.order-lg--10{order:-10}.order-lg--9{order:-9}.order-lg--8{order:-8}.order-lg--7{order:-7}.order-lg--6{order:-6}.order-lg--5{order:-5}.order-lg--4{order:-4}.order-lg--3{order:-3}.order-lg--2{order:-2}.order-lg--1{order:-1}.order-lg-0{order:0}.order-lg-1{order:1}.order-lg-2{order:2}.order-lg-3{order:3}.order-lg-4{order:4}.order-lg-5{order:5}.order-lg-6{order:6}.order-lg-7{order:7}.order-lg-8{order:8}.order-lg-9{order:9}.order-lg-10{order:10}.order-lg-11{order:11}.order-lg-12{order:12}.hidden-lg{display:none}}@media (min-width: 1536px){.span-xl-1{grid-column:span 1}.span-xl-2{grid-column:span 2}.span-xl-3{grid-column:span 3}.span-xl-4{grid-column:span 4}.span-xl-5{grid-column:span 5}.span-xl-6{grid-column:span 6}.span-xl-7{grid-column:span 7}.span-xl-8{grid-column:span 8}.span-xl-9{grid-column:span 9}.span-xl-10{grid-column:span 10}.span-xl-11{grid-column:span 11}.span-xl-12{grid-column:span 12}.offset-xl-0{margin-left:0%}.offset-xl-1{margin-left:calc(1 / 12 * 100%)}.offset-xl-2{margin-left:calc(2 / 12 * 100%)}.offset-xl-3{margin-left:25%}.offset-xl-4{margin-left:calc(4 / 12 * 100%)}.offset-xl-5{margin-left:calc(5 / 12 * 100%)}.offset-xl-6{margin-left:50%}.offset-xl-7{margin-left:calc(7 / 12 * 100%)}.offset-xl-8{margin-left:calc(8 / 12 * 100%)}.offset-xl-9{margin-left:75%}.offset-xl-10{margin-left:calc(10 / 12 * 100%)}.offset-xl-11{margin-left:calc(11 / 12 * 100%)}.order-xl--12{order:-12}.order-xl--11{order:-11}.order-xl--10{order:-10}.order-xl--9{order:-9}.order-xl--8{order:-8}.order-xl--7{order:-7}.order-xl--6{order:-6}.order-xl--5{order:-5}.order-xl--4{order:-4}.order-xl--3{order:-3}.order-xl--2{order:-2}.order-xl--1{order:-1}.order-xl-0{order:0}.order-xl-1{order:1}.order-xl-2{order:2}.order-xl-3{order:3}.order-xl-4{order:4}.order-xl-5{order:5}.order-xl-6{order:6}.order-xl-7{order:7}.order-xl-8{order:8}.order-xl-9{order:9}.order-xl-10{order:10}.order-xl-11{order:11}.order-xl-12{order:12}.hidden-xl{display:none}}.form-blocking-overlay{position:absolute;inset:0;background:transparent;color:var(--md-sys-color-on-surface, #000);backdrop-filter:blur(2px) saturate(103%);-webkit-backdrop-filter:blur(2px) saturate(103%);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;z-index:10;pointer-events:all}@media (max-width: 768px){.form-row{flex-direction:column;gap:.5rem}.form-section{padding:1rem}}.canvas-mode-enabled{--canvas-hit: 14px}.canvas-mode-enabled .canvas-element{position:relative;z-index:0;border-radius:8px;outline:2px solid transparent;outline-offset:2px;transition:outline-color .2s ease,outline-style .2s ease}.canvas-mode-enabled .canvas-element:before{content:\"\";position:absolute;inset:calc(-1 * var(--canvas-hit));pointer-events:none;border-radius:inherit;background:transparent}.canvas-mode-enabled .canvas-element[data-canvas-type=section]{--outline-color: var(--mat-sys-primary, var(--md-sys-color-primary))}.canvas-mode-enabled .canvas-element[data-canvas-type=row]{--outline-color: var(--mat-sys-secondary, var(--md-sys-color-secondary))}.canvas-mode-enabled .canvas-element[data-canvas-type=column],.canvas-mode-enabled .canvas-element[data-canvas-type=field]{--outline-color: var(--mat-sys-tertiary, var(--md-sys-color-tertiary))}.canvas-mode-enabled .canvas-element[data-canvas-type=actions]{--outline-color: color-mix( in srgb, var(--mat-sys-primary, var(--md-sys-color-primary)) 70%, var(--mat-sys-secondary, var(--md-sys-color-secondary)) 30% )}.canvas-mode-enabled .canvas-element.hovered:not(.selected){outline-color:var(--outline-color, var(--mat-sys-primary, var(--md-sys-color-primary)));outline-style:dashed}.canvas-mode-enabled .canvas-element.selected{outline-color:var(--outline-color, var(--mat-sys-primary, var(--md-sys-color-primary)));outline-style:solid;box-shadow:0 0 0 2px color-mix(in oklab,var(--outline-color, var(--mat-sys-primary, var(--md-sys-color-primary))) 70%,transparent),0 0 8px color-mix(in oklab,var(--outline-color, var(--mat-sys-primary, var(--md-sys-color-primary))) 60%,transparent),0 0 18px color-mix(in oklab,var(--outline-color, var(--mat-sys-primary, var(--md-sys-color-primary))) 35%,transparent)}.canvas-mode-enabled .canvas-element.hovered{z-index:1000}.canvas-mode-enabled .canvas-element.selected{z-index:2000}.section-drop-wrapper,.row-drop-wrapper,.column-drop-wrapper{display:contents}.add-section-container{display:flex;align-items:center;justify-content:center;padding:.5rem 0;margin:-.5rem 0;position:relative;z-index:500}.add-section-container .add-section-line{flex-grow:1;height:1px;background:repeating-linear-gradient(90deg,var(--md-sys-color-outline-variant),var(--md-sys-color-outline-variant) 4px,transparent 4px,transparent 8px)}.add-section-container button{margin:0 1rem;transform:scale(.85)}.section-title{display:flex;align-items:center;gap:8px}.section-title .section-title-icon{font-size:1.25em;line-height:1}\n"] }]
+                    ], template: "@if (isLoading) {\n<!-- Loading State -->\n<div class=\"form-loading\">\n  <mat-progress-spinner diameter=\"40\"></mat-progress-spinner>\n  <p>Carregando formul\u00E1rio...</p>\n</div>\n} @else if (initializationStatus === 'error') {\n<!-- Error State -->\n<div class=\"form-error\">\n  <mat-icon color=\"warn\" [praxisIcon]=\"'error'\"></mat-icon>\n  <h3>{{ getErrorTitle() }}</h3>\n  <p>{{ currentErrorMessage }}</p>\n  @if (isRecoverable) {\n  <button mat-stroked-button (click)=\"retryInitialization()\">\n    <mat-icon [praxisIcon]=\"'refresh'\"></mat-icon>\n    Tentar Novamente\n  </button>\n  }\n  <button mat-button (click)=\"showDetailedError()\" class=\"show-details\">\n    Ver Detalhes T\u00E9cnicos\n  </button>\n  <!-- Permitir corre\u00E7\u00E3o do resourcePath diretamente do estado de erro -->\n  <button mat-flat-button color=\"primary\" (click)=\"openQuickConnect()\" class=\"connect-action\">\n    <mat-icon [praxisIcon]=\"'bolt'\"></mat-icon>\n    Conectar a recurso\n  </button>\n</div>\n} @else if (initializationStatus === 'success') {\n<!-- Inline banner for schema change (only in edit mode) -->\n@if (shouldShowOutdatedInline()) {\n<div class=\"pfx-form-info-banner\" role=\"status\" aria-live=\"polite\">\n  <div class=\"text\">O schema do servidor mudou. Reconciliar agora?</div>\n  <div class=\"actions\">\n    <button mat-stroked-button color=\"primary\" (click)=\"openConfigEditor()\">\n      <mat-icon [praxisIcon]=\"'sync'\"></mat-icon>\n      Reconciliar\n    </button>\n    <button mat-button (click)=\"onSnoozeOutdated()\">Lembrar depois</button>\n    <button mat-button (click)=\"onIgnoreOutdated()\">Ignorar</button>\n  </div>\n  </div>\n}\n\n<!-- Configuration Controls -->\n@if (shouldShowConfigControls && editModeEnabled) {\n<div class=\"form-config-controls\">\n  <button\n    type=\"button\"\n    mat-icon-button\n    (click)=\"openConfigEditor()\"\n    [disabled]=\"isLoading\"\n    class=\"config-button\"\n    [matBadge]=\"schemaOutdated ? '!' : ''\"\n    [matBadgeHidden]=\"!schemaOutdated\"\n    matBadgeColor=\"warn\" matBadgeSize=\"small\" matBadgePosition=\"above after\"\n    [matTooltip]=\"schemaOutdated ? 'Schema do servidor mudou \u2014 Reconciliar' : 'Configurar formul\u00E1rio'\"\n  >\n    <mat-icon [praxisIcon]=\"'settings'\"></mat-icon>\n  </button>\n  <button\n    type=\"button\"\n    mat-icon-button\n    (click)=\"disconnect()\"\n    matTooltip=\"Desconectar da fonte de dados\"\n    [disabled]=\"isLoading\"\n  >\n    <mat-icon [praxisIcon]=\"'link_off'\"></mat-icon>\n  </button>\n</div>\n} }\n\n<!-- Form Content -->\n@if (!resourcePath && (!config.sections || config.sections.length === 0)) {\n  <praxis-empty-state-card\n    icon=\"link\"\n    [title]=\"'Conecte o formul\u00E1rio \u00E0 fonte de dados'\"\n    [description]=\"'Informe a rota do recurso da API para gerar automaticamente os campos do formul\u00E1rio.'\"\n    [primaryAction]=\"{ label: 'Conectar \u00E0 fonte de dados', icon: 'bolt', action: openQuickConnect.bind(this) }\"\n  ></praxis-empty-state-card>\n}\n<form\n  #formHost\n  (ngSubmit)=\"onSubmit()\"\n  [attr.aria-busy]=\"submitting ? 'true' : null\"\n  [attr.aria-label]=\"'Formul\u00E1rio ' + (config.metadata?.version || '')\"\n  [class.canvas-mode-enabled]=\"editModeEnabled\"\n  [class.presentation-mode]=\"!!presentationModeGlobal\"\n  [class.readonly-mode]=\"!!readonlyModeGlobal\"\n  [formGroup]=\"form\"\n  [ngClass]=\"{\n    'pres-compact': presentationVars.compact,\n    'pres-label-left': presentationVars.labelPosition === 'left',\n    'pres-label-above': presentationVars.labelPosition === 'above'\n  }\"\n  [style.--pfx-pres-label-align]=\"presentationVars.labelAlign\"\n  [style.--pfx-pres-label-size]=\"presentationVars.labelSize\"\n  [style.--pfx-pres-label-width]=\"presentationVars.labelWidth\"\n  [style.--pfx-pres-row-gap]=\"presentationVars.density === 'compact' ? '6px' : (presentationVars.density === 'cozy' ? '8px' : '10px')\"\n  [style.--pfx-pres-row-padding]=\"presentationVars.density === 'compact' ? '2px 0' : (presentationVars.density === 'cozy' ? '6px 0' : '8px 0')\"\n  [style.--pfx-pres-value-align]=\"presentationVars.valueAlign\"\n  [style.--pfx-pres-value-size]=\"presentationVars.valueSize\"\n  class=\"praxis-dynamic-form\"\n>\n  <praxis-canvas-toolbar\n    (editMetadata)=\"openSelectedElementEditor()\"\n    (selectPath)=\"onSelectPath($event)\"\n    (moveUp)=\"onToolbarMove('up')\"\n    (moveDown)=\"onToolbarMove('down')\"\n    (toggleReadonly)=\"onToolbarToggleReadonly()\"\n    (toggleRequired)=\"onToolbarToggleRequired()\"\n    (toggleHidden)=\"onToolbarToggleHidden()\"\n    (toggleDisabled)=\"onToolbarToggleDisabled()\"\n    (requestClose)=\"onToolbarRequestClose()\"\n    *ngIf=\"editModeEnabled && selectedElement\"\n    [selectedElement]=\"selectedElement\"\n    [style.transform]=\"toolbarTransform\"\n  ></praxis-canvas-toolbar>\n\n@if ((config.actions?.placement || 'afterSections') === 'top' && !(presentationModeGlobal || readonlyModeGlobal)) {\n    <praxis-form-actions\n      [actions]=\"config.actions\"\n      [isSubmitting]=\"submitting\"\n      [formIsValid]=\"form.valid\"\n      [submitError]=\"submitError\"\n      [formId]=\"formId\"\n      (action)=\"onFormAction($event)\"\n    ></praxis-form-actions>\n  }\n\n  @for (section of config.sections; track (section.id ?? $index); let sectionIndex = $index;\n  let last = $last) {\n  <div\n    class=\"section-drop-wrapper\"\n    [attr.data-section-id]=\"section.id\"\n  >\n    <div\n      #sectionEl\n      class=\"form-section canvas-element\"\n      data-canvas-type=\"section\"\n      [attr.data-section-id]=\"section.id\"\n      [attr.data-section-index]=\"sectionIndex\"\n      (mouseenter)=\"onElementMouseEnter($event, 'section', section, sectionEl)\"\n      (mouseleave)=\"onElementMouseLeave($event)\"\n      (click)=\"onElementClick($event, 'section', section, sectionEl)\"\n      [class.selected]=\"selectedElement?.domElement === sectionEl\"\n      [class.hovered]=\"hoveredElement?.domElement === sectionEl && selectedElement?.domElement !== sectionEl\"\n      [style.marginBottom.px]=\"!last ? (section.gapBottom || null) : null\"\n    >\n      @if (section.title) {\n      <h3\n        class=\"section-title\"\n        [class.title-large]=\"section.titleStyle === 'titleLarge'\"\n        [class.title-medium]=\"section.titleStyle === 'titleMedium'\"\n        [class.title-small]=\"section.titleStyle === 'titleSmall'\"\n        [class.headline-small]=\"section.titleStyle === 'headlineSmall'\"\n        [style.marginBottom.px]=\"section.titleGapBottom || null\"\n      >\n        @if (section.icon) {\n          <mat-icon class=\"section-title-icon\" aria-hidden=\"true\" [praxisIcon]=\"section.icon\"></mat-icon>\n        }\n        {{ section.title }}\n      </h3>\n      } @if (section.description) {\n        <p\n          class=\"section-description\"\n          [class.body-large]=\"section.descriptionStyle === 'bodyLarge'\"\n          [class.body-medium]=\"section.descriptionStyle === 'bodyMedium'\"\n          [class.body-small]=\"section.descriptionStyle === 'bodySmall'\"\n          [style.marginBottom.px]=\"section.descriptionGapBottom || null\"\n        >\n          {{ section.description }}\n        </p>\n      } @for (row of section.rows; track (row.id ?? $index); let rowIndex = $index) {\n      <div\n        class=\"row-drop-wrapper\"\n        [attr.data-section-id]=\"section.id\"\n      >\n        <div\n          #rowEl\n          class=\"form-row grid-12 canvas-element\"\n          data-canvas-type=\"row\"\n          [attr.data-row-index]=\"rowIndex\"\n          [attr.data-section-id]=\"section.id\"\n          [attr.data-row-id]=\"row.id\"\n          [style.--pfx-grid-gap.px]=\"row.gap || null\"\n          [style.marginBottom.px]=\"row.rowGap || null\"\n          (mouseenter)=\"onElementMouseEnter($event, 'row', row, rowEl)\"\n          (mouseleave)=\"onElementMouseLeave($event)\"\n          (click)=\"onElementClick($event, 'row', row, rowEl)\"\n          [class.selected]=\"selectedElement?.domElement === rowEl\"\n          [class.hovered]=\"hoveredElement?.domElement === rowEl && selectedElement?.domElement !== rowEl\"\n        >\n          @for (column of row.columns; track (column.id ?? $index); let colIndex = $index) {\n          @if (isColumnVisible(column)) {\n          <div\n            class=\"column-drop-wrapper\"\n            [attr.data-section-id]=\"section.id\"\n            [attr.data-row-id]=\"row.id\"\n          >\n            <div\n              #colEl\n              class=\"form-column canvas-element\"\n              [ngClass]=\"getColumnClasses(column)\"\n              [style.padding.px]=\"column.padding\"\n              [attr.data-testid]=\"column.testId || null\"\n              data-canvas-type=\"column\"\n              [attr.data-column-index]=\"colIndex\"\n              [attr.data-row-index]=\"rowIndex\"\n              [attr.data-section-id]=\"section.id\"\n              [attr.data-row-id]=\"row.id\"\n              [attr.data-column-id]=\"column.id\"\n              (mouseenter)=\"onElementMouseEnter($event, 'column', column, colEl)\"\n              (mouseleave)=\"onElementMouseLeave($event)\"\n              (click)=\"onElementClick($event, 'column', column, colEl)\"\n              [class.selected]=\"selectedElement?.domElement === colEl\"\n              [class.hovered]=\"hoveredElement?.domElement === colEl && selectedElement?.domElement !== colEl\"\n            >\n              <ng-container\n                dynamicFieldLoader\n                [fields]=\"getColumnFields(column)\"\n                [formGroup]=\"form\"\n                [readonlyMode]=\"readonlyModeGlobal === null ? null : readonlyModeGlobal\"\n                [disabledMode]=\"disabledModeGlobal === null ? null : disabledModeGlobal\"\n                [presentationMode]=\"presentationModeGlobal === null ? null : presentationModeGlobal\"\n                [visible]=\"visibleGlobal === null ? null : visibleGlobal\"\n                [canvasMode]=\"editModeEnabled\"\n                (canvasMouseEnter)=\"onFieldMouseEnter($event)\"\n                (canvasMouseLeave)=\"onFieldMouseLeave($event)\"\n                (canvasClick)=\"onFieldClick($event)\"\n              >\n              </ng-container>\n            </div>\n          </div>\n          } }\n        </div>\n      </div>\n\n      }\n      @if ((config.actions?.placement || 'afterSections') === 'insideLastSection' && last && !(presentationModeGlobal || readonlyModeGlobal)) {\n        <praxis-form-actions\n          [actions]=\"config.actions\"\n          [isSubmitting]=\"submitting\"\n          [formIsValid]=\"form.valid\"\n          [submitError]=\"submitError\"\n          [formId]=\"formId\"\n          (action)=\"onFormAction($event)\"\n        ></praxis-form-actions>\n      }\n      <!-- Overlay de bloqueio durante submiss\u00E3o -->\n      @if (submitting) {\n      <div class=\"form-blocking-overlay\" aria-live=\"polite\">\n        <mat-progress-spinner\n          diameter=\"40\"\n          color=\"primary\"\n        ></mat-progress-spinner>\n        <p>{{ config.messages?.loading?.submit || 'Salvando...' }}</p>\n      </div>\n      }\n  </div>\n  </div>\n\n  @if (editModeEnabled && selectedElement?.domElement === sectionEl) {\n  <div class=\"add-section-container\">\n    <div class=\"add-section-line\"></div>\n    <button\n      mat-fab\n      color=\"primary\"\n      aria-label=\"Adicionar nova se\u00E7\u00E3o\"\n      (click)=\"addNewSectionAfter(sectionIndex)\"\n      matTooltip=\"Adicionar nova se\u00E7\u00E3o aqui\"\n    >\n      <mat-icon [praxisIcon]=\"'add'\"></mat-icon>\n    </button>\n    <div class=\"add-section-line\"></div>\n  </div>\n  } }\n@if ((config.actions?.placement || 'afterSections') === 'afterSections' && !(presentationModeGlobal || readonlyModeGlobal)) {\n    <praxis-form-actions\n      [actions]=\"config.actions\"\n      [isSubmitting]=\"submitting\"\n      [formIsValid]=\"form.valid\"\n      [submitError]=\"submitError\"\n      [formId]=\"formId\"\n      (action)=\"onFormAction($event)\"\n    ></praxis-form-actions>\n  }\n</form>\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative}.form-config-controls{position:absolute;top:4px;right:4px;display:flex;gap:.25rem;z-index:100;background:transparent;padding:0;border:0;min-width:0;justify-content:flex-end;pointer-events:none}.form-config-controls>*{pointer-events:auto}.form-config-controls .mat-icon-button{--mdc-icon-button-state-layer-size: 36px;width:36px;height:36px;color:var(--md-sys-color-on-surface-variant)}.form-config-controls .mat-icon-button:hover{color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary),transparent 90%)}.config-button{color:var(--md-sys-color-primary)}.form-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;text-align:center;color:var(--md-sys-color-on-surface);gap:1rem}.form-loading p{margin:0;font-size:.875rem;opacity:.7}.form-error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;text-align:center;color:var(--md-sys-color-error);gap:1rem;border:1px solid var(--md-sys-color-error);border-radius:8px;background-color:var(--md-sys-color-error-container);margin:1rem}.form-error h3{margin:0;color:var(--md-sys-color-on-error-container)}.form-error p{margin:0;color:var(--md-sys-color-on-error-container);opacity:.8}.form-error button{margin-top:.5rem}.praxis-dynamic-form{display:flex;flex-direction:column;transition:all .3s ease;position:relative}.praxis-dynamic-form.presentation-mode .form-row,.praxis-dynamic-form.readonly-mode .form-row{gap:.5rem;margin-bottom:.5rem}.praxis-dynamic-form.presentation-mode .form-section,.praxis-dynamic-form.readonly-mode .form-section{padding:.75rem .875rem}.praxis-dynamic-form.pres-compact .form-row{gap:.35rem;margin-bottom:.35rem}.praxis-dynamic-form.pres-compact .form-section{padding:.5rem .75rem}.praxis-dynamic-form.pres-label-left .praxis-presentation{display:grid;grid-template-columns:var(--pfx-presentation-label-w, 220px) 1fr;align-items:baseline;column-gap:10px}.praxis-dynamic-form.pres-label-left .praxis-presentation__label{text-align:right;margin-bottom:0}.form-section{border:1px solid var(--pfx-form-stroke, var(--md-sys-color-outline-variant));border-radius:8px;padding:1rem;background:var(--pfx-form-section-surface, var(--md-sys-color-surface-container));transition:all .2s ease;position:relative}.section-drop-wrapper>.form-section{margin-bottom:var(--pfx-section-gap, 20px)}.section-drop-wrapper:last-of-type>.form-section{margin-bottom:0}.section-title{margin:0 0 var(--pfx-section-title-mb, 20px) 0;font-size:1.05rem;font-weight:500;color:var(--md-sys-color-on-surface)}.section-title.title-large{font:var(--mdc-typography-title-large, 500 22px/28px system-ui)}.section-title.title-medium{font:var(--mdc-typography-title-medium, 500 16px/24px system-ui)}.section-title.title-small{font:var(--mdc-typography-title-small, 500 14px/20px system-ui)}.section-title.headline-small{font:var(--mdc-typography-headline-small, 600 24px/32px system-ui)}.section-description{margin:0 0 8px;font-size:.875rem;color:var(--md-sys-color-on-surface-variant)}.section-description.body-large{font:var(--mdc-typography-body-large, 400 16px/24px system-ui)}.section-description.body-medium{font:var(--mdc-typography-body-medium, 400 14px/20px system-ui)}.section-description.body-small{font:var(--mdc-typography-body-small, 400 12px/16px system-ui)}.form-row{display:flex;gap:1rem;margin-bottom:1rem;transition:all .2s ease;border-radius:6px;position:relative}.praxis-dynamic-form .mat-mdc-form-field{width:100%;margin-bottom:var(--pfx-field-gap, 10px)}.praxis-dynamic-form .mat-mdc-form-field-subscript-wrapper{min-height:var(--pfx-subscript-min-h, 22px)}.form-row:last-child{margin-bottom:0}.form-column{flex:1;min-width:0;transition:all .2s ease;border-radius:4px;position:relative}.form-row.grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--pfx-grid-gap, 16px)}.align-start{align-self:flex-start}.align-center{align-self:center}.align-end{align-self:flex-end}.align-stretch{align-self:stretch}.span-xs-1{grid-column:span 1}.span-xs-2{grid-column:span 2}.span-xs-3{grid-column:span 3}.span-xs-4{grid-column:span 4}.span-xs-5{grid-column:span 5}.span-xs-6{grid-column:span 6}.span-xs-7{grid-column:span 7}.span-xs-8{grid-column:span 8}.span-xs-9{grid-column:span 9}.span-xs-10{grid-column:span 10}.span-xs-11{grid-column:span 11}.span-xs-12{grid-column:span 12}.offset-xs-0{margin-left:0%}.offset-xs-1{margin-left:calc(1 / 12 * 100%)}.offset-xs-2{margin-left:calc(2 / 12 * 100%)}.offset-xs-3{margin-left:25%}.offset-xs-4{margin-left:calc(4 / 12 * 100%)}.offset-xs-5{margin-left:calc(5 / 12 * 100%)}.offset-xs-6{margin-left:50%}.offset-xs-7{margin-left:calc(7 / 12 * 100%)}.offset-xs-8{margin-left:calc(8 / 12 * 100%)}.offset-xs-9{margin-left:75%}.offset-xs-10{margin-left:calc(10 / 12 * 100%)}.offset-xs-11{margin-left:calc(11 / 12 * 100%)}.order-xs--12{order:-12}.order-xs--11{order:-11}.order-xs--10{order:-10}.order-xs--9{order:-9}.order-xs--8{order:-8}.order-xs--7{order:-7}.order-xs--6{order:-6}.order-xs--5{order:-5}.order-xs--4{order:-4}.order-xs--3{order:-3}.order-xs--2{order:-2}.order-xs--1{order:-1}.order-xs-0{order:0}.order-xs-1{order:1}.order-xs-2{order:2}.order-xs-3{order:3}.order-xs-4{order:4}.order-xs-5{order:5}.order-xs-6{order:6}.order-xs-7{order:7}.order-xs-8{order:8}.order-xs-9{order:9}.order-xs-10{order:10}.order-xs-11{order:11}.order-xs-12{order:12}.hidden-xs{display:none}@media (min-width: 600px){.span-sm-1{grid-column:span 1}.span-sm-2{grid-column:span 2}.span-sm-3{grid-column:span 3}.span-sm-4{grid-column:span 4}.span-sm-5{grid-column:span 5}.span-sm-6{grid-column:span 6}.span-sm-7{grid-column:span 7}.span-sm-8{grid-column:span 8}.span-sm-9{grid-column:span 9}.span-sm-10{grid-column:span 10}.span-sm-11{grid-column:span 11}.span-sm-12{grid-column:span 12}.offset-sm-0{margin-left:0%}.offset-sm-1{margin-left:calc(1 / 12 * 100%)}.offset-sm-2{margin-left:calc(2 / 12 * 100%)}.offset-sm-3{margin-left:25%}.offset-sm-4{margin-left:calc(4 / 12 * 100%)}.offset-sm-5{margin-left:calc(5 / 12 * 100%)}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:calc(7 / 12 * 100%)}.offset-sm-8{margin-left:calc(8 / 12 * 100%)}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:calc(10 / 12 * 100%)}.offset-sm-11{margin-left:calc(11 / 12 * 100%)}.order-sm--12{order:-12}.order-sm--11{order:-11}.order-sm--10{order:-10}.order-sm--9{order:-9}.order-sm--8{order:-8}.order-sm--7{order:-7}.order-sm--6{order:-6}.order-sm--5{order:-5}.order-sm--4{order:-4}.order-sm--3{order:-3}.order-sm--2{order:-2}.order-sm--1{order:-1}.order-sm-0{order:0}.order-sm-1{order:1}.order-sm-2{order:2}.order-sm-3{order:3}.order-sm-4{order:4}.order-sm-5{order:5}.order-sm-6{order:6}.order-sm-7{order:7}.order-sm-8{order:8}.order-sm-9{order:9}.order-sm-10{order:10}.order-sm-11{order:11}.order-sm-12{order:12}.hidden-sm{display:none}}@media (min-width: 900px){.span-md-1{grid-column:span 1}.span-md-2{grid-column:span 2}.span-md-3{grid-column:span 3}.span-md-4{grid-column:span 4}.span-md-5{grid-column:span 5}.span-md-6{grid-column:span 6}.span-md-7{grid-column:span 7}.span-md-8{grid-column:span 8}.span-md-9{grid-column:span 9}.span-md-10{grid-column:span 10}.span-md-11{grid-column:span 11}.span-md-12{grid-column:span 12}.offset-md-0{margin-left:0%}.offset-md-1{margin-left:calc(1 / 12 * 100%)}.offset-md-2{margin-left:calc(2 / 12 * 100%)}.offset-md-3{margin-left:25%}.offset-md-4{margin-left:calc(4 / 12 * 100%)}.offset-md-5{margin-left:calc(5 / 12 * 100%)}.offset-md-6{margin-left:50%}.offset-md-7{margin-left:calc(7 / 12 * 100%)}.offset-md-8{margin-left:calc(8 / 12 * 100%)}.offset-md-9{margin-left:75%}.offset-md-10{margin-left:calc(10 / 12 * 100%)}.offset-md-11{margin-left:calc(11 / 12 * 100%)}.order-md--12{order:-12}.order-md--11{order:-11}.order-md--10{order:-10}.order-md--9{order:-9}.order-md--8{order:-8}.order-md--7{order:-7}.order-md--6{order:-6}.order-md--5{order:-5}.order-md--4{order:-4}.order-md--3{order:-3}.order-md--2{order:-2}.order-md--1{order:-1}.order-md-0{order:0}.order-md-1{order:1}.order-md-2{order:2}.order-md-3{order:3}.order-md-4{order:4}.order-md-5{order:5}.order-md-6{order:6}.order-md-7{order:7}.order-md-8{order:8}.order-md-9{order:9}.order-md-10{order:10}.order-md-11{order:11}.order-md-12{order:12}.hidden-md{display:none}}@media (min-width: 1200px){.span-lg-1{grid-column:span 1}.span-lg-2{grid-column:span 2}.span-lg-3{grid-column:span 3}.span-lg-4{grid-column:span 4}.span-lg-5{grid-column:span 5}.span-lg-6{grid-column:span 6}.span-lg-7{grid-column:span 7}.span-lg-8{grid-column:span 8}.span-lg-9{grid-column:span 9}.span-lg-10{grid-column:span 10}.span-lg-11{grid-column:span 11}.span-lg-12{grid-column:span 12}.offset-lg-0{margin-left:0%}.offset-lg-1{margin-left:calc(1 / 12 * 100%)}.offset-lg-2{margin-left:calc(2 / 12 * 100%)}.offset-lg-3{margin-left:25%}.offset-lg-4{margin-left:calc(4 / 12 * 100%)}.offset-lg-5{margin-left:calc(5 / 12 * 100%)}.offset-lg-6{margin-left:50%}.offset-lg-7{margin-left:calc(7 / 12 * 100%)}.offset-lg-8{margin-left:calc(8 / 12 * 100%)}.offset-lg-9{margin-left:75%}.offset-lg-10{margin-left:calc(10 / 12 * 100%)}.offset-lg-11{margin-left:calc(11 / 12 * 100%)}.order-lg--12{order:-12}.order-lg--11{order:-11}.order-lg--10{order:-10}.order-lg--9{order:-9}.order-lg--8{order:-8}.order-lg--7{order:-7}.order-lg--6{order:-6}.order-lg--5{order:-5}.order-lg--4{order:-4}.order-lg--3{order:-3}.order-lg--2{order:-2}.order-lg--1{order:-1}.order-lg-0{order:0}.order-lg-1{order:1}.order-lg-2{order:2}.order-lg-3{order:3}.order-lg-4{order:4}.order-lg-5{order:5}.order-lg-6{order:6}.order-lg-7{order:7}.order-lg-8{order:8}.order-lg-9{order:9}.order-lg-10{order:10}.order-lg-11{order:11}.order-lg-12{order:12}.hidden-lg{display:none}}@media (min-width: 1536px){.span-xl-1{grid-column:span 1}.span-xl-2{grid-column:span 2}.span-xl-3{grid-column:span 3}.span-xl-4{grid-column:span 4}.span-xl-5{grid-column:span 5}.span-xl-6{grid-column:span 6}.span-xl-7{grid-column:span 7}.span-xl-8{grid-column:span 8}.span-xl-9{grid-column:span 9}.span-xl-10{grid-column:span 10}.span-xl-11{grid-column:span 11}.span-xl-12{grid-column:span 12}.offset-xl-0{margin-left:0%}.offset-xl-1{margin-left:calc(1 / 12 * 100%)}.offset-xl-2{margin-left:calc(2 / 12 * 100%)}.offset-xl-3{margin-left:25%}.offset-xl-4{margin-left:calc(4 / 12 * 100%)}.offset-xl-5{margin-left:calc(5 / 12 * 100%)}.offset-xl-6{margin-left:50%}.offset-xl-7{margin-left:calc(7 / 12 * 100%)}.offset-xl-8{margin-left:calc(8 / 12 * 100%)}.offset-xl-9{margin-left:75%}.offset-xl-10{margin-left:calc(10 / 12 * 100%)}.offset-xl-11{margin-left:calc(11 / 12 * 100%)}.order-xl--12{order:-12}.order-xl--11{order:-11}.order-xl--10{order:-10}.order-xl--9{order:-9}.order-xl--8{order:-8}.order-xl--7{order:-7}.order-xl--6{order:-6}.order-xl--5{order:-5}.order-xl--4{order:-4}.order-xl--3{order:-3}.order-xl--2{order:-2}.order-xl--1{order:-1}.order-xl-0{order:0}.order-xl-1{order:1}.order-xl-2{order:2}.order-xl-3{order:3}.order-xl-4{order:4}.order-xl-5{order:5}.order-xl-6{order:6}.order-xl-7{order:7}.order-xl-8{order:8}.order-xl-9{order:9}.order-xl-10{order:10}.order-xl-11{order:11}.order-xl-12{order:12}.hidden-xl{display:none}}.form-blocking-overlay{position:absolute;inset:0;background:transparent;color:var(--md-sys-color-on-surface, #000);backdrop-filter:blur(2px) saturate(103%);-webkit-backdrop-filter:blur(2px) saturate(103%);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;z-index:10;pointer-events:all}@media (max-width: 768px){.form-row{flex-direction:column;gap:.5rem}.form-section{padding:1rem}}.canvas-mode-enabled{--canvas-hit: 14px}.canvas-mode-enabled .canvas-element{position:relative;z-index:0;border-radius:8px;outline:2px solid transparent;outline-offset:2px;transition:outline-color .2s ease,outline-style .2s ease}.canvas-mode-enabled .canvas-element:before{content:\"\";position:absolute;inset:calc(-1 * var(--canvas-hit));pointer-events:none;border-radius:inherit;background:transparent}.canvas-mode-enabled .canvas-element[data-canvas-type=section]{--outline-color: var(--mat-sys-primary, var(--md-sys-color-primary))}.canvas-mode-enabled .canvas-element[data-canvas-type=row]{--outline-color: var(--mat-sys-secondary, var(--md-sys-color-secondary))}.canvas-mode-enabled .canvas-element[data-canvas-type=column],.canvas-mode-enabled .canvas-element[data-canvas-type=field]{--outline-color: var(--mat-sys-tertiary, var(--md-sys-color-tertiary))}.canvas-mode-enabled .canvas-element[data-canvas-type=actions]{--outline-color: color-mix( in srgb, var(--mat-sys-primary, var(--md-sys-color-primary)) 70%, var(--mat-sys-secondary, var(--md-sys-color-secondary)) 30% )}.canvas-mode-enabled .canvas-element.hovered:not(.selected){outline-color:var(--outline-color, var(--mat-sys-primary, var(--md-sys-color-primary)));outline-style:dashed}.canvas-mode-enabled .canvas-element.selected{outline-color:var(--outline-color, var(--mat-sys-primary, var(--md-sys-color-primary)));outline-style:solid;box-shadow:0 0 0 2px color-mix(in oklab,var(--outline-color, var(--mat-sys-primary, var(--md-sys-color-primary))) 70%,transparent),0 0 8px color-mix(in oklab,var(--outline-color, var(--mat-sys-primary, var(--md-sys-color-primary))) 60%,transparent),0 0 18px color-mix(in oklab,var(--outline-color, var(--mat-sys-primary, var(--md-sys-color-primary))) 35%,transparent)}.canvas-mode-enabled .canvas-element.hovered{z-index:1000}.canvas-mode-enabled .canvas-element.selected{z-index:2000}.section-drop-wrapper,.row-drop-wrapper,.column-drop-wrapper{display:contents}.add-section-container{display:flex;align-items:center;justify-content:center;padding:.5rem 0;margin:-.5rem 0;position:relative;z-index:500}.add-section-container .add-section-line{flex-grow:1;height:1px;background:repeating-linear-gradient(90deg,var(--md-sys-color-outline-variant),var(--md-sys-color-outline-variant) 4px,transparent 4px,transparent 8px)}.add-section-container button{margin:0 1rem;transform:scale(.85)}.section-title{display:flex;align-items:center;gap:8px}.section-title .section-title-icon{font-size:1.25em;line-height:1}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.GenericCrudService }, { type: i1.FormBuilder }, { type: i0.ChangeDetectorRef }, { type: FormLayoutService }, { type: FormContextService }, { type: FormRulesService }, { type: i6$4.SettingsPanelService }, { type: i2$2.MatDialog }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [CONFIG_STORAGE]