@praxisui/dynamic-form 1.0.0-beta.21 → 1.0.0-beta.23

package/fesm2022/praxisui-dynamic-form.mjs

@@ -4776,7 +4776,7 @@ class PraxisFormActionsComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PraxisFormActionsComponent, deps: [{ token: i1$1.KeyboardShortcutService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: PraxisFormActionsComponent, isStandalone: true, selector: "praxis-form-actions", inputs: { actions: "actions", isSubmitting: "isSubmitting", formIsValid: "formIsValid", submitError: "submitError", formId: "formId" }, outputs: { action: "action" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"form-actions\"\n  [ngClass]=\"viewClassMap\"\n  [ngStyle]=\"actions?.containerStyles\"\n>\n  @if (submitError) {\n    <div class=\"alert alert--error\" role=\"alert\" aria-live=\"polite\">\n      <mat-icon class=\"alert__icon\" aria-hidden=\"true\">error_outline</mat-icon>\n      <div>\n        <h4 class=\"alert__title\">Erro ao salvar</h4>\n        <p class=\"alert__text\">{{ submitError }}</p>\n      </div>\n    </div>\n  }\n  <div class=\"desktop-actions\">\n    @for (button of getActionButtons(); track button.id) {\n      @if (button.visible) {\n        @switch (button.variant || 'raised') {\n          @case ('stroked') {\n            <button mat-stroked-button\n              [type]=\"button.type || 'button'\"\n              [color]=\"getMatColor(button)\"\n              [disabled]=\"isSubmitting || button.disabled || (button.type === 'submit' && !formIsValid)\"\n              [matTooltip]=\"button.tooltip\"\n              (click)=\"onActionButtonClick(button, $event)\">\n              @if (button.icon) { <mat-icon>{{ button.icon }}</mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n          @case ('flat') {\n            <button mat-flat-button\n              [type]=\"button.type || 'button'\"\n              [color]=\"getMatColor(button)\"\n              [disabled]=\"isSubmitting || button.disabled || (button.type === 'submit' && !formIsValid)\"\n              [matTooltip]=\"button.tooltip\"\n              (click)=\"onActionButtonClick(button, $event)\">\n              @if (button.icon) { <mat-icon>{{ button.icon }}</mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n          @case ('fab') {\n            <button mat-fab\n              [type]=\"button.type || 'button'\"\n              [color]=\"getMatColor(button)\"\n              [disabled]=\"isSubmitting || button.disabled || (button.type === 'submit' && !formIsValid)\"\n              [matTooltip]=\"button.tooltip\"\n              (click)=\"onActionButtonClick(button, $event)\">\n              @if (button.icon) { <mat-icon>{{ button.icon }}</mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n          @default {\n            <button mat-raised-button\n              [type]=\"button.type || 'button'\"\n              [color]=\"getMatColor(button)\"\n              [disabled]=\"isSubmitting || button.disabled || (button.type === 'submit' && !formIsValid)\"\n              [matTooltip]=\"button.tooltip\"\n              (click)=\"onActionButtonClick(button, $event)\">\n              @if (button.icon) { <mat-icon>{{ button.icon }}</mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n        }\n      }\n    }\n  </div>\n  @if (actions?.mobile?.collapseToMenu) {\n    <div class=\"mobile-actions\">\n      @for (button of getVisibleButtons(); track button.id) {\n        @switch (button.variant || 'raised') {\n          @case ('stroked') {\n            <button mat-stroked-button [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isSubmitting || button.disabled || (button.type === 'submit' && !formIsValid)\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\">\n              @if (button.icon) { <mat-icon>{{ button.icon }}</mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n          @case ('flat') {\n            <button mat-flat-button [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isSubmitting || button.disabled || (button.type === 'submit' && !formIsValid)\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\">\n              @if (button.icon) { <mat-icon>{{ button.icon }}</mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n          @case ('fab') {\n            <button mat-fab [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isSubmitting || button.disabled || (button.type === 'submit' && !formIsValid)\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\">\n              @if (button.icon) { <mat-icon>{{ button.icon }}</mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n          @default {\n            <button mat-raised-button [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isSubmitting || button.disabled || (button.type === 'submit' && !formIsValid)\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\">\n              @if (button.icon) { <mat-icon>{{ button.icon }}</mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n        }\n      }\n      @if (getCollapsedButtons().length > 0) {\n        <button\n          mat-icon-button\n          [matMenuTriggerFor]=\"actionsMenu\"\n          aria-label=\"More actions\"\n        >\n          <mat-icon>more_vert</mat-icon>\n        </button>\n        <mat-menu #actionsMenu=\"matMenu\">\n          @for (button of getCollapsedButtons(); track button.id) {\n            <button\n              mat-menu-item\n              (click)=\"onActionButtonClick(button, $event)\"\n              [disabled]=\"button.disabled\"\n            >\n              @if (button.icon) {\n                <mat-icon>{{ button.icon }}</mat-icon>\n              }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n        </mat-menu>\n      }\n    </div>\n  }\n</div>\n", styles: [".form-actions{display:flex;justify-content:flex-end;align-items:center;gap:.5rem;padding:1rem;border-top:1px solid var(--md-sys-color-outline-variant);z-index:1}.form-actions.sticky{position:sticky;bottom:0}.form-actions.position-left{justify-content:flex-start}.form-actions.position-center{justify-content:center}.form-actions.position-right{justify-content:flex-end}.form-actions.position-justified,.form-actions.position-split{justify-content:space-between}.form-actions.orientation-vertical .desktop-actions{display:flex;flex-direction:column}.form-actions.orientation-horizontal .desktop-actions{display:flex;flex-direction:row}.form-actions.spacing-compact{gap:.25rem}.form-actions.spacing-normal{gap:.5rem}.form-actions.spacing-spacious{gap:1rem}.form-actions.spacing-compact .desktop-actions{gap:.25rem}.form-actions.spacing-normal .desktop-actions{gap:.5rem}.form-actions.spacing-spacious .desktop-actions{gap:1rem}.form-actions.loading{pointer-events:none;opacity:.7}.mobile-actions{display:none}.desktop-actions{display:flex;flex-wrap:wrap;gap:.5rem}@media (max-width: 768px){.form-actions{padding:.75rem}.form-actions.mobile-menu-active .desktop-actions{display:none}.form-actions.mobile-menu-active .mobile-actions{display:flex;align-items:center;gap:.5rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: 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"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: PraxisFormActionsComponent, isStandalone: true, selector: "praxis-form-actions", inputs: { actions: "actions", isSubmitting: "isSubmitting", formIsValid: "formIsValid", submitError: "submitError", formId: "formId" }, outputs: { action: "action" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"form-actions\"\n  [ngClass]=\"viewClassMap\"\n  [ngStyle]=\"actions?.containerStyles\"\n>\n  @if (submitError) {\n    <div class=\"alert alert--error\" role=\"alert\" aria-live=\"polite\">\n      <mat-icon class=\"alert__icon\" aria-hidden=\"true\">error_outline</mat-icon>\n      <div>\n        <h4 class=\"alert__title\">Erro ao salvar</h4>\n        <p class=\"alert__text\">{{ submitError }}</p>\n      </div>\n    </div>\n  }\n  <div class=\"desktop-actions\">\n    @for (button of getActionButtons(); track button.id) {\n      @if (button.visible) {\n        @switch (button.variant || 'raised') {\n          @case ('stroked') {\n            <button mat-stroked-button\n              [type]=\"button.type || 'button'\"\n              [color]=\"getMatColor(button)\"\n              [disabled]=\"isSubmitting || button.disabled || (button.type === 'submit' && !formIsValid)\"\n              [matTooltip]=\"button.tooltip\"\n              (click)=\"onActionButtonClick(button, $event)\">\n              @if (button.icon) { <mat-icon [praxisIcon]=\"button.icon\"></mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n          @case ('flat') {\n            <button mat-flat-button\n              [type]=\"button.type || 'button'\"\n              [color]=\"getMatColor(button)\"\n              [disabled]=\"isSubmitting || button.disabled || (button.type === 'submit' && !formIsValid)\"\n              [matTooltip]=\"button.tooltip\"\n              (click)=\"onActionButtonClick(button, $event)\">\n              @if (button.icon) { <mat-icon [praxisIcon]=\"button.icon\"></mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n          @case ('fab') {\n            <button mat-fab\n              [type]=\"button.type || 'button'\"\n              [color]=\"getMatColor(button)\"\n              [disabled]=\"isSubmitting || button.disabled || (button.type === 'submit' && !formIsValid)\"\n              [matTooltip]=\"button.tooltip\"\n              (click)=\"onActionButtonClick(button, $event)\">\n              @if (button.icon) { <mat-icon [praxisIcon]=\"button.icon\"></mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n          @default {\n            <button mat-raised-button\n              [type]=\"button.type || 'button'\"\n              [color]=\"getMatColor(button)\"\n              [disabled]=\"isSubmitting || button.disabled || (button.type === 'submit' && !formIsValid)\"\n              [matTooltip]=\"button.tooltip\"\n              (click)=\"onActionButtonClick(button, $event)\">\n              @if (button.icon) { <mat-icon [praxisIcon]=\"button.icon\"></mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n        }\n      }\n    }\n  </div>\n  @if (actions?.mobile?.collapseToMenu) {\n    <div class=\"mobile-actions\">\n      @for (button of getVisibleButtons(); track button.id) {\n        @switch (button.variant || 'raised') {\n          @case ('stroked') {\n            <button mat-stroked-button [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isSubmitting || button.disabled || (button.type === 'submit' && !formIsValid)\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\">\n              @if (button.icon) { <mat-icon [praxisIcon]=\"button.icon\"></mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n          @case ('flat') {\n            <button mat-flat-button [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isSubmitting || button.disabled || (button.type === 'submit' && !formIsValid)\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\">\n              @if (button.icon) { <mat-icon [praxisIcon]=\"button.icon\"></mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n          @case ('fab') {\n            <button mat-fab [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isSubmitting || button.disabled || (button.type === 'submit' && !formIsValid)\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\">\n              @if (button.icon) { <mat-icon>{{ button.icon }}</mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n          @default {\n            <button mat-raised-button [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isSubmitting || button.disabled || (button.type === 'submit' && !formIsValid)\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\">\n              @if (button.icon) { <mat-icon>{{ button.icon }}</mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n        }\n      }\n      @if (getCollapsedButtons().length > 0) {\n        <button\n          mat-icon-button\n          [matMenuTriggerFor]=\"actionsMenu\"\n          aria-label=\"More actions\"\n        >\n          <mat-icon>more_vert</mat-icon>\n        </button>\n        <mat-menu #actionsMenu=\"matMenu\">\n          @for (button of getCollapsedButtons(); track button.id) {\n            <button\n              mat-menu-item\n              (click)=\"onActionButtonClick(button, $event)\"\n              [disabled]=\"button.disabled\"\n            >\n              @if (button.icon) { <mat-icon [praxisIcon]=\"button.icon\"></mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n        </mat-menu>\n      }\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.form-actions{display:flex;justify-content:flex-end;align-items:center;gap:.5rem;padding:1rem;border-top:1px solid var(--md-sys-color-outline-variant);z-index:1}.form-actions.sticky{position:sticky;bottom:0}.form-actions.position-left{justify-content:flex-start}.form-actions.position-center{justify-content:center}.form-actions.position-right{justify-content:flex-end}.form-actions.position-justified,.form-actions.position-split{justify-content:space-between}.form-actions.orientation-vertical .desktop-actions{display:flex;flex-direction:column}.form-actions.orientation-horizontal .desktop-actions{display:flex;flex-direction:row}.form-actions.spacing-compact{gap:.25rem}.form-actions.spacing-normal{gap:.5rem}.form-actions.spacing-spacious{gap:1rem}.form-actions.spacing-compact .desktop-actions{gap:.25rem}.form-actions.spacing-normal .desktop-actions{gap:.5rem}.form-actions.spacing-spacious .desktop-actions{gap:1rem}.form-actions.loading{pointer-events:none;opacity:.7}.mobile-actions{display:none}.desktop-actions{display:flex;flex-wrap:wrap;gap:.5rem}.form-actions button .mat-icon{font-size:20px;width:20px;height:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.form-actions button .mat-icon+span{margin-left:8px}@media (max-width: 768px){.form-actions{padding:.75rem}.form-actions.mobile-menu-active .desktop-actions{display:none}.form-actions.mobile-menu-active .mobile-actions{display:flex;align-items:center;gap:.5rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: 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"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PraxisFormActionsComponent, decorators: [{
             type: Component,
@@ -4786,7 +4786,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                         MatIconModule,
                         MatTooltipModule,
                         MatMenuModule,
-                    ], template: "<div\n  class=\"form-actions\"\n  [ngClass]=\"viewClassMap\"\n  [ngStyle]=\"actions?.containerStyles\"\n>\n  @if (submitError) {\n    <div class=\"alert alert--error\" role=\"alert\" aria-live=\"polite\">\n      <mat-icon class=\"alert__icon\" aria-hidden=\"true\">error_outline</mat-icon>\n      <div>\n        <h4 class=\"alert__title\">Erro ao salvar</h4>\n        <p class=\"alert__text\">{{ submitError }}</p>\n      </div>\n    </div>\n  }\n  <div class=\"desktop-actions\">\n    @for (button of getActionButtons(); track button.id) {\n      @if (button.visible) {\n        @switch (button.variant || 'raised') {\n          @case ('stroked') {\n            <button mat-stroked-button\n              [type]=\"button.type || 'button'\"\n              [color]=\"getMatColor(button)\"\n              [disabled]=\"isSubmitting || button.disabled || (button.type === 'submit' && !formIsValid)\"\n              [matTooltip]=\"button.tooltip\"\n              (click)=\"onActionButtonClick(button, $event)\">\n              @if (button.icon) { <mat-icon>{{ button.icon }}</mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n          @case ('flat') {\n            <button mat-flat-button\n              [type]=\"button.type || 'button'\"\n              [color]=\"getMatColor(button)\"\n              [disabled]=\"isSubmitting || button.disabled || (button.type === 'submit' && !formIsValid)\"\n              [matTooltip]=\"button.tooltip\"\n              (click)=\"onActionButtonClick(button, $event)\">\n              @if (button.icon) { <mat-icon>{{ button.icon }}</mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n          @case ('fab') {\n            <button mat-fab\n              [type]=\"button.type || 'button'\"\n              [color]=\"getMatColor(button)\"\n              [disabled]=\"isSubmitting || button.disabled || (button.type === 'submit' && !formIsValid)\"\n              [matTooltip]=\"button.tooltip\"\n              (click)=\"onActionButtonClick(button, $event)\">\n              @if (button.icon) { <mat-icon>{{ button.icon }}</mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n          @default {\n            <button mat-raised-button\n              [type]=\"button.type || 'button'\"\n              [color]=\"getMatColor(button)\"\n              [disabled]=\"isSubmitting || button.disabled || (button.type === 'submit' && !formIsValid)\"\n              [matTooltip]=\"button.tooltip\"\n              (click)=\"onActionButtonClick(button, $event)\">\n              @if (button.icon) { <mat-icon>{{ button.icon }}</mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n        }\n      }\n    }\n  </div>\n  @if (actions?.mobile?.collapseToMenu) {\n    <div class=\"mobile-actions\">\n      @for (button of getVisibleButtons(); track button.id) {\n        @switch (button.variant || 'raised') {\n          @case ('stroked') {\n            <button mat-stroked-button [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isSubmitting || button.disabled || (button.type === 'submit' && !formIsValid)\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\">\n              @if (button.icon) { <mat-icon>{{ button.icon }}</mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n          @case ('flat') {\n            <button mat-flat-button [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isSubmitting || button.disabled || (button.type === 'submit' && !formIsValid)\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\">\n              @if (button.icon) { <mat-icon>{{ button.icon }}</mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n          @case ('fab') {\n            <button mat-fab [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isSubmitting || button.disabled || (button.type === 'submit' && !formIsValid)\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\">\n              @if (button.icon) { <mat-icon>{{ button.icon }}</mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n          @default {\n            <button mat-raised-button [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isSubmitting || button.disabled || (button.type === 'submit' && !formIsValid)\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\">\n              @if (button.icon) { <mat-icon>{{ button.icon }}</mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n        }\n      }\n      @if (getCollapsedButtons().length > 0) {\n        <button\n          mat-icon-button\n          [matMenuTriggerFor]=\"actionsMenu\"\n          aria-label=\"More actions\"\n        >\n          <mat-icon>more_vert</mat-icon>\n        </button>\n        <mat-menu #actionsMenu=\"matMenu\">\n          @for (button of getCollapsedButtons(); track button.id) {\n            <button\n              mat-menu-item\n              (click)=\"onActionButtonClick(button, $event)\"\n              [disabled]=\"button.disabled\"\n            >\n              @if (button.icon) {\n                <mat-icon>{{ button.icon }}</mat-icon>\n              }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n        </mat-menu>\n      }\n    </div>\n  }\n</div>\n", styles: [".form-actions{display:flex;justify-content:flex-end;align-items:center;gap:.5rem;padding:1rem;border-top:1px solid var(--md-sys-color-outline-variant);z-index:1}.form-actions.sticky{position:sticky;bottom:0}.form-actions.position-left{justify-content:flex-start}.form-actions.position-center{justify-content:center}.form-actions.position-right{justify-content:flex-end}.form-actions.position-justified,.form-actions.position-split{justify-content:space-between}.form-actions.orientation-vertical .desktop-actions{display:flex;flex-direction:column}.form-actions.orientation-horizontal .desktop-actions{display:flex;flex-direction:row}.form-actions.spacing-compact{gap:.25rem}.form-actions.spacing-normal{gap:.5rem}.form-actions.spacing-spacious{gap:1rem}.form-actions.spacing-compact .desktop-actions{gap:.25rem}.form-actions.spacing-normal .desktop-actions{gap:.5rem}.form-actions.spacing-spacious .desktop-actions{gap:1rem}.form-actions.loading{pointer-events:none;opacity:.7}.mobile-actions{display:none}.desktop-actions{display:flex;flex-wrap:wrap;gap:.5rem}@media (max-width: 768px){.form-actions{padding:.75rem}.form-actions.mobile-menu-active .desktop-actions{display:none}.form-actions.mobile-menu-active .mobile-actions{display:flex;align-items:center;gap:.5rem}}\n"] }]
+                        PraxisIconDirective,
+                    ], template: "<div\n  class=\"form-actions\"\n  [ngClass]=\"viewClassMap\"\n  [ngStyle]=\"actions?.containerStyles\"\n>\n  @if (submitError) {\n    <div class=\"alert alert--error\" role=\"alert\" aria-live=\"polite\">\n      <mat-icon class=\"alert__icon\" aria-hidden=\"true\">error_outline</mat-icon>\n      <div>\n        <h4 class=\"alert__title\">Erro ao salvar</h4>\n        <p class=\"alert__text\">{{ submitError }}</p>\n      </div>\n    </div>\n  }\n  <div class=\"desktop-actions\">\n    @for (button of getActionButtons(); track button.id) {\n      @if (button.visible) {\n        @switch (button.variant || 'raised') {\n          @case ('stroked') {\n            <button mat-stroked-button\n              [type]=\"button.type || 'button'\"\n              [color]=\"getMatColor(button)\"\n              [disabled]=\"isSubmitting || button.disabled || (button.type === 'submit' && !formIsValid)\"\n              [matTooltip]=\"button.tooltip\"\n              (click)=\"onActionButtonClick(button, $event)\">\n              @if (button.icon) { <mat-icon [praxisIcon]=\"button.icon\"></mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n          @case ('flat') {\n            <button mat-flat-button\n              [type]=\"button.type || 'button'\"\n              [color]=\"getMatColor(button)\"\n              [disabled]=\"isSubmitting || button.disabled || (button.type === 'submit' && !formIsValid)\"\n              [matTooltip]=\"button.tooltip\"\n              (click)=\"onActionButtonClick(button, $event)\">\n              @if (button.icon) { <mat-icon [praxisIcon]=\"button.icon\"></mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n          @case ('fab') {\n            <button mat-fab\n              [type]=\"button.type || 'button'\"\n              [color]=\"getMatColor(button)\"\n              [disabled]=\"isSubmitting || button.disabled || (button.type === 'submit' && !formIsValid)\"\n              [matTooltip]=\"button.tooltip\"\n              (click)=\"onActionButtonClick(button, $event)\">\n              @if (button.icon) { <mat-icon [praxisIcon]=\"button.icon\"></mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n          @default {\n            <button mat-raised-button\n              [type]=\"button.type || 'button'\"\n              [color]=\"getMatColor(button)\"\n              [disabled]=\"isSubmitting || button.disabled || (button.type === 'submit' && !formIsValid)\"\n              [matTooltip]=\"button.tooltip\"\n              (click)=\"onActionButtonClick(button, $event)\">\n              @if (button.icon) { <mat-icon [praxisIcon]=\"button.icon\"></mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n        }\n      }\n    }\n  </div>\n  @if (actions?.mobile?.collapseToMenu) {\n    <div class=\"mobile-actions\">\n      @for (button of getVisibleButtons(); track button.id) {\n        @switch (button.variant || 'raised') {\n          @case ('stroked') {\n            <button mat-stroked-button [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isSubmitting || button.disabled || (button.type === 'submit' && !formIsValid)\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\">\n              @if (button.icon) { <mat-icon [praxisIcon]=\"button.icon\"></mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n          @case ('flat') {\n            <button mat-flat-button [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isSubmitting || button.disabled || (button.type === 'submit' && !formIsValid)\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\">\n              @if (button.icon) { <mat-icon [praxisIcon]=\"button.icon\"></mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n          @case ('fab') {\n            <button mat-fab [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isSubmitting || button.disabled || (button.type === 'submit' && !formIsValid)\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\">\n              @if (button.icon) { <mat-icon>{{ button.icon }}</mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n          @default {\n            <button mat-raised-button [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isSubmitting || button.disabled || (button.type === 'submit' && !formIsValid)\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\">\n              @if (button.icon) { <mat-icon>{{ button.icon }}</mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n        }\n      }\n      @if (getCollapsedButtons().length > 0) {\n        <button\n          mat-icon-button\n          [matMenuTriggerFor]=\"actionsMenu\"\n          aria-label=\"More actions\"\n        >\n          <mat-icon>more_vert</mat-icon>\n        </button>\n        <mat-menu #actionsMenu=\"matMenu\">\n          @for (button of getCollapsedButtons(); track button.id) {\n            <button\n              mat-menu-item\n              (click)=\"onActionButtonClick(button, $event)\"\n              [disabled]=\"button.disabled\"\n            >\n              @if (button.icon) { <mat-icon [praxisIcon]=\"button.icon\"></mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n        </mat-menu>\n      }\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.form-actions{display:flex;justify-content:flex-end;align-items:center;gap:.5rem;padding:1rem;border-top:1px solid var(--md-sys-color-outline-variant);z-index:1}.form-actions.sticky{position:sticky;bottom:0}.form-actions.position-left{justify-content:flex-start}.form-actions.position-center{justify-content:center}.form-actions.position-right{justify-content:flex-end}.form-actions.position-justified,.form-actions.position-split{justify-content:space-between}.form-actions.orientation-vertical .desktop-actions{display:flex;flex-direction:column}.form-actions.orientation-horizontal .desktop-actions{display:flex;flex-direction:row}.form-actions.spacing-compact{gap:.25rem}.form-actions.spacing-normal{gap:.5rem}.form-actions.spacing-spacious{gap:1rem}.form-actions.spacing-compact .desktop-actions{gap:.25rem}.form-actions.spacing-normal .desktop-actions{gap:.5rem}.form-actions.spacing-spacious .desktop-actions{gap:1rem}.form-actions.loading{pointer-events:none;opacity:.7}.mobile-actions{display:none}.desktop-actions{display:flex;flex-wrap:wrap;gap:.5rem}.form-actions button .mat-icon{font-size:20px;width:20px;height:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.form-actions button .mat-icon+span{margin-left:8px}@media (max-width: 768px){.form-actions{padding:.75rem}.form-actions.mobile-menu-active .desktop-actions{display:none}.form-actions.mobile-menu-active .mobile-actions{display:flex;align-items:center;gap:.5rem}}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.KeyboardShortcutService }], propDecorators: { actions: [{
                 type: Input
             }], isSubmitting: [{
@@ -10129,7 +10130,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]=\"effectivePresentation\"\n  [class.readonly-mode]=\"effectiveReadonly\"\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' && !(effectivePresentation || effectiveReadonly)) {\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]=\"presentationForLoader\"\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 && !(effectivePresentation || effectiveReadonly)) {\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' && !(effectivePresentation || effectiveReadonly)) {\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"] }] });
+    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@if (initializationStatus === 'success') {\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]=\"effectivePresentation\"\n  [class.readonly-mode]=\"effectiveReadonly\"\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' && !(effectivePresentation || effectiveReadonly)) {\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]=\"presentationForLoader\"\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 && !(effectivePresentation || effectiveReadonly)) {\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' && !(effectivePresentation || effectiveReadonly)) {\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}\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,
@@ -10148,7 +10149,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]=\"effectivePresentation\"\n  [class.readonly-mode]=\"effectiveReadonly\"\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' && !(effectivePresentation || effectiveReadonly)) {\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]=\"presentationForLoader\"\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 && !(effectivePresentation || effectiveReadonly)) {\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' && !(effectivePresentation || effectiveReadonly)) {\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"] }]
+                    ], 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@if (initializationStatus === 'success') {\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]=\"effectivePresentation\"\n  [class.readonly-mode]=\"effectiveReadonly\"\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' && !(effectivePresentation || effectiveReadonly)) {\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]=\"presentationForLoader\"\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 && !(effectivePresentation || effectiveReadonly)) {\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' && !(effectivePresentation || effectiveReadonly)) {\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}\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]