@praxisui/dynamic-form 3.0.0-beta.5 → 3.0.0-beta.7

package/fesm2022/praxisui-dynamic-form.mjs

@@ -22,7 +22,7 @@ import { MatBadgeModule } from '@angular/material/badge';
 import { firstValueFrom, BehaviorSubject, Subject, debounceTime as debounceTime$1, takeUntil as takeUntil$1 } from 'rxjs';
 import { take, takeUntil, debounceTime, finalize, map } from 'rxjs/operators';
 import * as i1$2 from '@praxisui/core';
-import { PraxisIconDirective, RULE_PROPERTY_SCHEMA, FIELD_METADATA_CAPABILITIES, deepMerge, createDefaultFormConfig, normalizeFormConfig as normalizeFormConfig$1, ensureIds, ASYNC_CONFIG_STORAGE, migrateFormLayoutRule, LoggerService, createCorporateLoggerConfig, ConsoleLoggerSink, ResourceQuickConnectComponent, mapFieldDefinitionsToMetadata, syncWithServerMetadata, PRAXIS_LOADING_CTX, normalizeControlTypeKey, resolveSpan, resolveOffset, resolveOrder, resolveHidden, buildSchemaId, fetchWithETag, resolveControlTypeAlias, getTextTransformer, MemoryCacheAdapter, LocalStorageCacheAdapter, SchemaMetadataClient, CONNECTION_STORAGE, PRAXIS_LOADING_RENDERER, FORM_HOOKS_PRESETS, DynamicWidgetLoaderDirective, EmptyStateCardComponent, isValidFormConfig, ComponentMetadataRegistry, FieldControlType, GLOBAL_ACTION_CATALOG, GLOBAL_ACTION_SPEC_CATALOG, getGlobalActionCatalog, PRAXIS_GLOBAL_ACTION_CATALOG, getGlobalActionUiSchema } from '@praxisui/core';
+import { PraxisIconDirective, RULE_PROPERTY_SCHEMA, FIELD_METADATA_CAPABILITIES, deepMerge, createDefaultFormConfig, normalizeFormConfig as normalizeFormConfig$1, ensureIds, ASYNC_CONFIG_STORAGE, migrateFormLayoutRule, LoggerService, createCorporateLoggerConfig, ConsoleLoggerSink, ResourceQuickConnectComponent, mapFieldDefinitionsToMetadata, syncWithServerMetadata, PRAXIS_LOADING_CTX, normalizeControlTypeKey, resolveSpan, resolveOffset, resolveOrder, resolveHidden, buildSchemaId, fetchWithETag, resolveControlTypeAlias, getTextTransformer, MemoryCacheAdapter, LocalStorageCacheAdapter, SchemaMetadataClient, CONNECTION_STORAGE, PRAXIS_LOADING_RENDERER, FORM_HOOKS_PRESETS, DynamicWidgetLoaderDirective, EmptyStateCardComponent, isValidFormConfig, ComponentMetadataRegistry, FieldControlType, GLOBAL_ACTION_CATALOG, PraxisI18nService, GLOBAL_ACTION_SPEC_CATALOG, getGlobalActionCatalog, PRAXIS_GLOBAL_ACTION_CATALOG, SURFACE_OPEN_I18N_NAMESPACE, getGlobalActionUiSchema, SurfaceOpenActionEditorComponent, providePraxisI18nConfig, SURFACE_OPEN_I18N_CONFIG } from '@praxisui/core';
 import * as i1 from '@praxisui/dynamic-fields';
 import { getControlTypeCatalog, ConfirmDialogComponent, DynamicFieldLoaderDirective } from '@praxisui/dynamic-fields';
 import { BaseAiAdapter, PraxisAiAssistantComponent } from '@praxisui/ai';
@@ -846,7 +846,7 @@ function generateRulePropertyWhenFalseCapabilities(targetType, properties) {
     return result;
 }
 const FORM_AI_CAPABILITIES = {
-    version: 'v1.8', // Adds a semantic before-actions editorial slot.
+    version: 'v1.9', // Adds section header actions and richer section authoring affordances.
     enums: ENUMS$1,
     targets: [
         'praxis-dynamic-form',
@@ -1298,6 +1298,62 @@ const FORM_AI_CAPABILITIES = {
             valueKind: 'string',
             description: 'Texto de tooltip para o cabeçalho da seção.',
         },
+        {
+            path: 'sections[].headerActions',
+            category: 'layout',
+            valueKind: 'array',
+            description: 'Lista de ações iconográficas renderizadas no canto direito do cabeçalho da seção.',
+            safetyNotes: 'Prefira IDs estáveis porque essas ações podem ser alvo de regras e integrações do host.',
+        },
+        {
+            path: 'sections[].headerActions[].id',
+            category: 'layout',
+            valueKind: 'string',
+            description: 'ID estável da ação de cabeçalho da seção.',
+        },
+        {
+            path: 'sections[].headerActions[].label',
+            category: 'layout',
+            valueKind: 'string',
+            description: 'Label acessível usada em tooltip e aria-label da ação.',
+        },
+        {
+            path: 'sections[].headerActions[].icon',
+            category: 'layout',
+            valueKind: 'string',
+            description: 'Ícone renderizado na ação do cabeçalho da seção.',
+        },
+        {
+            path: 'sections[].headerActions[].action',
+            category: 'layout',
+            valueKind: 'string',
+            description: 'Nome opcional da ação emitida no customAction; se ausente, o runtime usa o ID.',
+        },
+        {
+            path: 'sections[].headerActions[].tooltip',
+            category: 'layout',
+            valueKind: 'string',
+            description: 'Tooltip opcional da ação; se ausente, o runtime usa a label.',
+        },
+        {
+            path: 'sections[].headerActions[].color',
+            category: 'appearance',
+            valueKind: 'enum',
+            allowedValues: ['primary', 'accent', 'warn', 'basic'],
+            description: 'Tom visual da ação do cabeçalho da seção.',
+        },
+        {
+            path: 'sections[].headerActions[].visible',
+            category: 'layout',
+            valueKind: 'boolean',
+            description: 'Controla a visibilidade da ação do cabeçalho da seção.',
+        },
+        {
+            path: 'sections[].headerActions[].disabled',
+            category: 'layout',
+            valueKind: 'boolean',
+            description: 'Controla o estado desabilitado da ação do cabeçalho da seção.',
+        },
         {
             path: 'sections[].className',
             category: 'appearance',
@@ -2645,6 +2701,15 @@ const TASK_PRESETS = {
         'sections[].descriptionColor',
         'sections[].headerAlign',
         'sections[].headerTooltip',
+        'sections[].headerActions',
+        'sections[].headerActions[].id',
+        'sections[].headerActions[].label',
+        'sections[].headerActions[].icon',
+        'sections[].headerActions[].action',
+        'sections[].headerActions[].tooltip',
+        'sections[].headerActions[].color',
+        'sections[].headerActions[].visible',
+        'sections[].headerActions[].disabled',
         'sections[].rows[].gap',
         'sections[].rows[].rowGap',
         'sections[].rows[].columns[].fields[]',
@@ -3648,11 +3713,13 @@ function sanitizeRuleEffect(rule) {
 }
 function normalizeTargets$1(rule) {
     const rawTargets = (rule.targets && rule.targets.length ? rule.targets : rule.targetFields) || [];
-    const detectedType = rawTargets.some((t) => t?.startsWith('section:')) ? 'section'
-        : rawTargets.some((t) => t?.startsWith('action:')) ? 'action'
-            : rawTargets.some((t) => t?.startsWith('row:')) ? 'row'
-                : rawTargets.some((t) => t?.startsWith('column:')) ? 'column'
-                    : rule.targetType || 'field';
+    const detectedType = rawTargets.some((t) => isScopedSectionHeaderActionTarget$1(t) || isUnscopedSectionHeaderActionTarget$1(t))
+        ? 'action'
+        : rawTargets.some((t) => t?.startsWith('section:')) ? 'section'
+            : rawTargets.some((t) => t?.startsWith('action:')) ? 'action'
+                : rawTargets.some((t) => t?.startsWith('row:')) ? 'row'
+                    : rawTargets.some((t) => t?.startsWith('column:')) ? 'column'
+                        : rule.targetType || 'field';
     const targets = rawTargets.map((t) => stripPrefix(t));
     const allowed = ['field', 'section', 'action', 'row', 'column'];
     const explicit = allowed.includes(rule.targetType)
@@ -3664,6 +3731,9 @@ function normalizeTargets$1(rule) {
     };
 }
 function stripPrefix(value) {
+    if (isScopedSectionHeaderActionTarget$1(value) || isUnscopedSectionHeaderActionTarget$1(value)) {
+        return value;
+    }
     if (value?.startsWith('section:'))
         return value.substring('section:'.length);
     if (value?.startsWith('action:'))
@@ -3674,6 +3744,12 @@ function stripPrefix(value) {
         return value.substring('column:'.length);
     return value;
 }
+function isScopedSectionHeaderActionTarget$1(value) {
+    return !!value && value.startsWith('section:') && value.includes(':header-action:');
+}
+function isUnscopedSectionHeaderActionTarget$1(value) {
+    return !!value && value.startsWith('header-action:');
+}
 function coerceValue(def, value) {
     // null is treated as an explicit "remove override"
     if (value === null) {
@@ -6435,6 +6511,16 @@ class PraxisDynamicForm {
         const props = this.getSectionRuleProps(section);
         return props.headerTooltip ?? section.headerTooltip;
     }
+    getSectionHeaderActions(section) {
+        const props = this.getSectionRuleProps(section);
+        const source = props.headerActions ?? section.headerActions;
+        if (!Array.isArray(source))
+            return [];
+        return source
+            .filter((action) => !!action && typeof action.id === 'string' && !!action.id.trim())
+            .map((action) => this.applySectionHeaderActionOverrides(section, action))
+            .filter((action) => action.visible !== false);
+    }
     getSectionHeaderAlign(section) {
         const props = this.getSectionRuleProps(section);
         return props.headerAlign ?? section.headerAlign;
@@ -6454,6 +6540,100 @@ class PraxisDynamicForm {
         const gap = props.descriptionGapBottom ?? section.descriptionGapBottom;
         return gap ?? null;
     }
+    getSectionHeaderActionColor(action) {
+        const c = String(action.color || '').toLowerCase();
+        switch (c) {
+            case 'primary':
+                return 'primary';
+            case 'accent':
+            case 'secondary':
+                return 'accent';
+            case 'warn':
+            case 'danger':
+            case 'error':
+                return 'warn';
+            default:
+                return undefined;
+        }
+    }
+    getSectionHeaderActionTooltip(action) {
+        return action.tooltip || action.label;
+    }
+    isSectionHeaderActionDisabled(action) {
+        return this.submitting || !!action.disabled || !!action.loading;
+    }
+    getSectionHeaderActionNgClass(action) {
+        const className = action.className;
+        const tone = String(action.color || 'basic').toLowerCase();
+        return {
+            ...(className ? { [className]: true } : {}),
+            [`tone-${tone}`]: true,
+            loading: !!action.loading,
+        };
+    }
+    getSectionHeaderActionStyles(action) {
+        return action.style && Object.keys(action.style).length ? action.style : null;
+    }
+    getSectionHeaderActionLoadingLabel(action) {
+        return action.tooltip || action.label;
+    }
+    onSectionHeaderActionClick(section, action, event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.isSectionHeaderActionDisabled(action))
+            return;
+        const actionId = this.getSectionHeaderActionEventId(action);
+        if (!actionId)
+            return;
+        const confirmationMessage = this._getConfirmationMessageForAliases(...this.getSectionHeaderActionRuleKeys(section, action), actionId, action.id);
+        const emitAction = () => {
+            this.customAction.emit({
+                actionId,
+                formData: this.form.value,
+                isValid: this.form.valid,
+                source: 'section-header',
+                ...(section.id ? { sectionId: section.id } : {}),
+            });
+        };
+        if (confirmationMessage) {
+            this._showConfirmationDialog(actionId, confirmationMessage, emitAction);
+        }
+        else {
+            emitAction();
+        }
+    }
+    applySectionHeaderActionOverrides(section, action) {
+        const override = this.getSectionHeaderActionRuleKeys(section, action)
+            .map((key) => (key ? this.actionRuleProps?.[key] : undefined))
+            .find((candidate) => !!candidate);
+        if (!override)
+            return action;
+        return {
+            ...action,
+            ...(override.label !== undefined ? { label: override.label } : {}),
+            ...(override.icon !== undefined ? { icon: override.icon } : {}),
+            ...(override.visible !== undefined ? { visible: override.visible } : {}),
+            ...(override.disabled !== undefined ? { disabled: override.disabled } : {}),
+            ...(override.loading !== undefined ? { loading: override.loading } : {}),
+            ...(override.tooltip !== undefined ? { tooltip: override.tooltip } : {}),
+            ...(override.color !== undefined ? { color: override.color } : {}),
+            ...(override.className !== undefined ? { className: override.className } : {}),
+            ...(override.style !== undefined ? { style: override.style } : {}),
+        };
+    }
+    getSectionHeaderActionEventId(action) {
+        return action.action?.trim() || action.id.trim();
+    }
+    getSectionHeaderActionRuleKeys(section, action) {
+        const logicalId = this.getSectionHeaderActionEventId(action);
+        const scopedKey = section.id && logicalId
+            ? `section:${section.id}:header-action:${logicalId}`
+            : undefined;
+        const unscopedHeaderActionKey = logicalId
+            ? `header-action:${logicalId}`
+            : undefined;
+        return [scopedKey, unscopedHeaderActionKey, logicalId, action.id?.trim()].filter((value) => !!value);
+    }
     getRowRuleProps(row) {
         if (!row || !row.id)
             return {};
@@ -6931,14 +7111,23 @@ class PraxisDynamicForm {
         return Object.keys(styles).length ? styles : null;
     }
     _getConfirmationMessage(actionId) {
+        return this._getConfirmationMessageForAliases(actionId);
+    }
+    _getConfirmationMessageForAliases(...actionIds) {
         const messages = this.config.messages;
         if (!messages)
             return undefined;
-        // Priority: customActions > confirmations
-        const customMessage = messages.customActions?.[actionId]?.confirmation;
-        if (customMessage)
-            return customMessage;
-        return messages.confirmations?.[actionId];
+        for (const actionId of actionIds) {
+            if (!actionId)
+                continue;
+            const customMessage = messages.customActions?.[actionId]?.confirmation;
+            if (customMessage)
+                return customMessage;
+            const confirmation = messages.confirmations?.[actionId];
+            if (confirmation)
+                return confirmation;
+        }
+        return undefined;
     }
     _showConfirmationDialog(actionId, message, onConfirm) {
         const dialogRef = this.dialog.open(ConfirmDialogComponent, {
@@ -11054,7 +11243,7 @@ class PraxisDynamicForm {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisDynamicForm, deps: [{ token: i1$2.GenericCrudService }, { token: i1$3.FormBuilder }, { token: i0.ChangeDetectorRef }, { token: FormLayoutService }, { token: FormContextService }, { token: FormRulesService }, { token: i6$1.SettingsPanelService }, { token: i2.MatDialog }, { token: ASYNC_CONFIG_STORAGE }, { token: CONNECTION_STORAGE }, { token: i1$2.DynamicFormService }, { token: i8.MatSnackBar }, { token: CanvasStateService }, { token: DynamicFormLayoutService }, { token: i1$2.ErrorMessageService }, { token: i1$2.SchemaNormalizerService }, { token: i1$2.ComponentMetadataRegistry }, { token: i1$2.GlobalConfigService }, { token: i1$2.ComponentKeyService }, { token: i1$2.LoadingOrchestrator }, { token: PRAXIS_LOADING_RENDERER, optional: true }, { token: i11.Router, optional: true }, { token: i11.ActivatedRoute, optional: true }, { token: i1$2.FormHooksRegistry, optional: true }, { token: FORM_HOOKS_PRESETS, optional: true }, { token: i1$2.LoggerService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PraxisDynamicForm, isStandalone: true, selector: "praxis-dynamic-form", inputs: { resourcePath: "resourcePath", resourceId: "resourceId", editorialContext: "editorialContext", mode: "mode", config: "config", schemaSource: "schemaSource", enableCustomization: "enableCustomization", formId: "formId", componentInstanceId: "componentInstanceId", 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", loadingStateChange: "loadingStateChange", enableCustomizationChange: "enableCustomizationChange", customAction: "customAction", actionConfirmation: "actionConfirmation", schemaStatusChange: "schemaStatusChange", fieldRenderError: "fieldRenderError", widgetEvent: "widgetEvent" }, 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 when customization is enabled) -->\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 && enableCustomization) {\n<div class=\"form-config-controls\">\n  <praxis-ai-assistant [adapter]=\"aiAdapter\"></praxis-ai-assistant>\n  <button type=\"button\" mat-icon-button (click)=\"openConfigEditor()\" [disabled]=\"isLoading\" class=\"config-button\"\n    [matBadge]=\"schemaOutdated ? '!' : ''\" [matBadgeHidden]=\"!schemaOutdated\" matBadgeColor=\"warn\" matBadgeSize=\"small\"\n    matBadgePosition=\"above after\"\n    [matTooltip]=\"schemaOutdated ? 'Schema do servidor mudou \u2014 Reconciliar' : 'Configurar formul\u00E1rio'\">\n    <mat-icon [praxisIcon]=\"'settings'\"></mat-icon>\n  </button>\n  <button type=\"button\" mat-icon-button (click)=\"disconnect()\" matTooltip=\"Desconectar da fonte de dados\"\n    [disabled]=\"isLoading\">\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 icon=\"link\" [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) }\"></praxis-empty-state-card>\n}\n<form #formHost (ngSubmit)=\"onSubmit()\" [attr.aria-busy]=\"submitting ? 'true' : null\"\n  [attr.aria-label]=\"'Formul\u00E1rio ' + (config.metadata?.version || '')\" [class.canvas-mode-enabled]=\"enableCustomization\"\n  [class.presentation-mode]=\"effectivePresentation\" [class.readonly-mode]=\"effectiveReadonly\"\n  [class.editorial-visual-context]=\"hasEditorialVisualContext()\"\n  [class.pfx-mounting]=\"isMounting\" [formGroup]=\"form\"\n  [ngClass]=\"{\n    'pres-compact': presentationVars.compact,\n    'pres-label-left': presentationVars.labelPosition === 'left',\n    'pres-label-above': presentationVars.labelPosition === 'above'\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  [style.--pdx-form-mount-duration]=\"getMountDurationVar()\"\n  [style.--pdx-form-mount-offset]=\"getMountOffsetVar()\"\n  [style.--pdx-form-mount-stagger]=\"getMountStaggerVar()\"\n  class=\"praxis-dynamic-form\">\n  <praxis-canvas-toolbar (editMetadata)=\"openSelectedElementEditor()\" (selectPath)=\"onSelectPath($event)\"\n    (moveUp)=\"onToolbarMove('up')\" (moveDown)=\"onToolbarMove('down')\" (toggleReadonly)=\"onToolbarToggleReadonly()\"\n    (toggleRequired)=\"onToolbarToggleRequired()\" (toggleHidden)=\"onToolbarToggleHidden()\"\n    (toggleDisabled)=\"onToolbarToggleDisabled()\" (requestClose)=\"onToolbarRequestClose()\"\n    *ngIf=\"enableCustomization && selectedElement\" [selectedElement]=\"selectedElement\"\n    [style.transform]=\"toolbarTransform\"></praxis-canvas-toolbar>\n\n  @if (formBlocksBefore.length) {\n    <section class=\"form-editorial-blocks form-editorial-blocks-before\" data-editorial-placement=\"before\">\n      @for (block of formBlocksBefore; track (block.id ?? $index)) {\n        <ng-container\n          [dynamicWidgetLoader]=\"block\"\n          [context]=\"getEditorialWidgetContext()\"\n          [strictValidation]=\"true\"\n          [autoWireOutputs]=\"true\"\n          (widgetEvent)=\"onEditorialWidgetEvent('before', $event)\">\n        </ng-container>\n      }\n    </section>\n  }\n\n  @if (actionPlacement === 'top' && !(effectivePresentation || effectiveReadonly)) {\n  <praxis-form-actions data-actions-placement=\"top\" [actions]=\"config.actions\" [isSubmitting]=\"submitting\"\n    [formIsValid]=\"form.valid\" [submitError]=\"submitError\" [formId]=\"formId\" [actionOverrides]=\"actionRuleProps\"\n    [editorialVisualContext]=\"hasEditorialVisualContext()\"\n    (action)=\"onFormAction($event)\"></praxis-form-actions>\n  }\n\n  @for (section of config.sections; track (section.id ?? $index); let sectionIndex = $index;\n  let last = $last) {\n  <div class=\"section-drop-wrapper\" [attr.data-section-id]=\"section.id\">\n    @if (isSectionVisible(section)) {\n      <div #sectionEl class=\"form-section canvas-element\" data-canvas-type=\"section\" [attr.data-section-id]=\"section.id\"\n        [attr.data-section-index]=\"sectionIndex\" (mouseenter)=\"onElementMouseEnter($event, 'section', section, sectionEl)\"\n        (mouseleave)=\"onElementMouseLeave($event)\" (click)=\"onElementClick($event, 'section', section, sectionEl)\"\n        [class.selected]=\"selectedElement?.domElement === sectionEl\"\n        [class.hovered]=\"hoveredElement?.domElement === sectionEl && selectedElement?.domElement !== sectionEl\"\n        [attr.data-section-appearance]=\"getSectionAppearance(section) || null\"\n        [style.marginBottom.px]=\"!last ? getSectionGapBottom(section) : null\" [ngClass]=\"getSectionClasses(section)\"\n        [ngStyle]=\"getSectionStyles(section)\">\n      <div\n        class=\"section-heading\"\n        [class.align-center]=\"getSectionHeaderAlign(section) === 'center'\"\n        [class.step-appearance]=\"getSectionAppearance(section) === 'step'\"\n      >\n        <div class=\"section-heading-text\" [matTooltip]=\"getSectionHeaderTooltip(section) || null\"\n          [matTooltipDisabled]=\"!getSectionHeaderTooltip(section)\">\n          @if (getSectionStepLabel(section)) {\n          <div class=\"section-step-label\" [class.align-center]=\"getSectionHeaderAlign(section) === 'center'\">\n            {{ getSectionStepLabel(section) }}\n          </div>\n          }\n          @if (getSectionTitle(section)) {\n          <h3 class=\"section-title\" [class.title-large]=\"getSectionTitleStyle(section) === 'titleLarge'\"\n            [class.title-medium]=\"getSectionTitleStyle(section) === 'titleMedium'\"\n            [class.title-small]=\"getSectionTitleStyle(section) === 'titleSmall'\"\n            [class.headline-small]=\"getSectionTitleStyle(section) === 'headlineSmall'\"\n            [style.marginBottom.px]=\"getSectionTitleGapBottom(section) ?? 20\" [style.color]=\"getSectionTitleColor(section) || null\"\n            [class.align-center]=\"getSectionHeaderAlign(section) === 'center'\"\n            [attr.id]=\"sectionPanelId(section, sectionIndex) + '-title'\">\n            @let sectionHeaderVisual = getSectionHeaderVisual(section);\n            @let sectionHeaderAvatarSize = getSectionHeaderAvatarSize(section);\n            @if (sectionHeaderVisual.kind === 'icon') {\n            <mat-icon class=\"section-title-icon\" aria-hidden=\"true\" [praxisIcon]=\"sectionHeaderVisual.icon\"></mat-icon>\n            }\n            @if (sectionHeaderVisual.kind === 'image') {\n            <img class=\"section-title-avatar section-title-avatar-image\" [class.size-sm]=\"sectionHeaderAvatarSize === 'sm'\"\n              [class.size-md]=\"sectionHeaderAvatarSize === 'md'\" [class.size-lg]=\"sectionHeaderAvatarSize === 'lg'\"\n              [src]=\"sectionHeaderVisual.src\" [alt]=\"sectionHeaderVisual.alt\" />\n            }\n            @if (sectionHeaderVisual.kind === 'initials') {\n            <span class=\"section-title-avatar section-title-avatar-text\" [class.size-sm]=\"sectionHeaderAvatarSize === 'sm'\"\n              [class.size-md]=\"sectionHeaderAvatarSize === 'md'\" [class.size-lg]=\"sectionHeaderAvatarSize === 'lg'\" aria-hidden=\"true\">\n              {{ sectionHeaderVisual.text }}\n            </span>\n            @if (sectionHeaderVisual.ariaLabel) {\n            <span class=\"section-title-avatar-sr-only\">{{ sectionHeaderVisual.ariaLabel }}</span>\n            }\n            }\n            @if (sectionHeaderVisual.kind === 'placeholder') {\n            <span class=\"section-title-avatar section-title-avatar-placeholder\" [class.size-sm]=\"sectionHeaderAvatarSize === 'sm'\"\n              [class.size-md]=\"sectionHeaderAvatarSize === 'md'\" [class.size-lg]=\"sectionHeaderAvatarSize === 'lg'\" aria-hidden=\"true\">\n              @if (sectionHeaderVisual.icon) {\n              <mat-icon aria-hidden=\"true\" [praxisIcon]=\"sectionHeaderVisual.icon\"></mat-icon>\n              }\n              @if (sectionHeaderVisual.text) {\n              <span>{{ sectionHeaderVisual.text }}</span>\n              }\n            </span>\n            @if (sectionHeaderVisual.ariaLabel) {\n            <span class=\"section-title-avatar-sr-only\">{{ sectionHeaderVisual.ariaLabel }}</span>\n            }\n            }\n            {{ getSectionTitle(section) }}\n            @if (enableCustomization) {\n            <button type=\"button\" class=\"inline-edit-btn\" mat-icon-button (click)=\"openSectionEditor(section, 'title')\"\n              aria-label=\"Editar t\u00EDtulo da se\u00E7\u00E3o\" matTooltip=\"Editar t\u00EDtulo\">\n              <mat-icon>edit</mat-icon>\n            </button>\n            }\n          </h3>\n          }\n          @if (getSectionDescription(section)) {\n          <p class=\"section-description\" [class.body-large]=\"getSectionDescriptionStyle(section) === 'bodyLarge'\"\n            [class.body-medium]=\"getSectionDescriptionStyle(section) === 'bodyMedium'\"\n            [class.body-small]=\"getSectionDescriptionStyle(section) === 'bodySmall'\"\n            [style.marginBottom.px]=\"getSectionDescriptionGapBottom(section) ?? 8\" [style.color]=\"getSectionDescriptionColor(section) || null\"\n            [class.align-center]=\"getSectionHeaderAlign(section) === 'center'\">\n            {{ getSectionDescription(section) }}\n            @if (enableCustomization) {\n            <button type=\"button\" class=\"inline-edit-btn\" mat-icon-button\n              (click)=\"openSectionEditor(section, 'description')\" aria-label=\"Editar descri\u00E7\u00E3o da se\u00E7\u00E3o\"\n              matTooltip=\"Editar descri\u00E7\u00E3o\">\n              <mat-icon>edit</mat-icon>\n            </button>\n            }\n          </p>\n          }\n        </div>\n        @if (isSectionCollapsible(section)) {\n        <button type=\"button\" class=\"section-collapse-btn\" mat-icon-button\n          (click)=\"toggleSectionCollapse($event, section)\" [attr.aria-expanded]=\"!isSectionCollapsed(section)\"\n          [attr.aria-controls]=\"sectionPanelId(section, sectionIndex)\"\n          [attr.aria-label]=\"isSectionCollapsed(section) ? 'Expandir se\u00E7\u00E3o' : 'Recolher se\u00E7\u00E3o'\">\n          <mat-icon [praxisIcon]=\"isSectionCollapsed(section) ? 'expand_more' : 'expand_less'\"></mat-icon>\n        </button>\n        }\n      </div>\n\n      <div class=\"section-body\" [class.collapsed]=\"isSectionCollapsed(section)\"\n        [attr.id]=\"sectionPanelId(section, sectionIndex)\"\n        [attr.aria-labelledby]=\"getSectionTitle(section) ? sectionPanelId(section, sectionIndex) + '-title' : null\">\n        @if (!isSectionCollapsed(section)) {\n        @for (row of section.rows; track (row.id ?? $index); let rowIndex = $index) {\n        @if (isRowVisible(row)) {\n        <div class=\"row-drop-wrapper\" [attr.data-section-id]=\"section.id\">\n          <div #rowEl class=\"form-row grid-12 canvas-element\" data-canvas-type=\"row\" [attr.data-row-index]=\"rowIndex\"\n            [attr.data-section-id]=\"section.id\" [attr.data-row-id]=\"row.id\" [style.--pfx-grid-gap.px]=\"getRowGap(row)\"\n            [style.--pfx-field-gap.px]=\"getRowRowGap(row)\"\n            [style.--pfx-mount-index]=\"rowIndex\"\n            [style.marginBottom.px]=\"rowIndex < section.rows.length - 1 ? (getRowRowGap(row) ?? null) : null\"\n            [ngClass]=\"getRowClasses(row)\" [ngStyle]=\"getRowStyles(row)\"\n            (mouseenter)=\"onElementMouseEnter($event, 'row', row, rowEl)\" (mouseleave)=\"onElementMouseLeave($event)\"\n            (click)=\"onElementClick($event, 'row', row, rowEl)\" [class.selected]=\"selectedElement?.domElement === rowEl\"\n            [class.hovered]=\"hoveredElement?.domElement === rowEl && selectedElement?.domElement !== rowEl\">\n            @for (column of row.columns; track (column.id ?? $index); let colIndex = $index) {\n            @if (isColumnVisible(column)) {\n            <div class=\"column-drop-wrapper\" [attr.data-section-id]=\"section.id\" [attr.data-row-id]=\"row.id\">\n              <div #colEl class=\"form-column canvas-element\" [ngClass]=\"getColumnClasses(column)\"\n                [style.padding.px]=\"getColumnPadding(column)\" [style.--pfx-field-gap.px]=\"getRowRowGap(row)\"\n                [ngStyle]=\"getColumnStyles(column)\" [attr.data-testid]=\"column.testId || null\"\n                [attr.data-row-gap]=\"getRowRowGap(row)\" data-canvas-type=\"column\" [attr.data-column-index]=\"colIndex\"\n                [attr.data-row-index]=\"rowIndex\" [attr.data-section-id]=\"section.id\" [attr.data-row-id]=\"row.id\"\n                [attr.data-column-id]=\"column.id\" (mouseenter)=\"onElementMouseEnter($event, 'column', column, colEl)\"\n                (mouseleave)=\"onElementMouseLeave($event)\" (click)=\"onElementClick($event, 'column', column, colEl)\"\n                [class.selected]=\"selectedElement?.domElement === colEl\"\n                [class.hovered]=\"hoveredElement?.domElement === colEl && selectedElement?.domElement !== colEl\">\n                <ng-container dynamicFieldLoader [fields]=\"getColumnFields(column)\" [formGroup]=\"form\"\n                  [readonlyMode]=\"readonlyModeGlobal === null ? null : readonlyModeGlobal\"\n                  [disabledMode]=\"disabledModeGlobal === null ? null : disabledModeGlobal\"\n                  [presentationMode]=\"presentationForLoader\" [visible]=\"visibleGlobal === null ? null : visibleGlobal\"\n                  [canvasMode]=\"enableCustomization\" (canvasMouseEnter)=\"onFieldMouseEnter($event)\"\n                  (canvasMouseLeave)=\"onFieldMouseLeave($event)\" (canvasClick)=\"onFieldClick($event)\"\n                  (renderError)=\"onFieldRenderError($event)\">\n                </ng-container>\n              </div>\n            </div>\n            } }\n          </div>\n        </div>\n        }\n        }\n        } @else {\n        <div class=\"section-collapsed-placeholder\">\n          <mat-icon aria-hidden=\"true\" [praxisIcon]=\"'unfold_more'\"></mat-icon>\n          <span>{{ getSectionCollapsedSummary(section) }}</span>\n        </div>\n        }\n        @if (last && beforeActionsPlacement === 'insideLastSection' && formBlocksBeforeActions.length) {\n        <section class=\"form-editorial-blocks form-editorial-blocks-before-actions\" data-editorial-placement=\"beforeActions\">\n          @for (block of formBlocksBeforeActions; track (block.id ?? $index)) {\n            <ng-container\n              [dynamicWidgetLoader]=\"block\"\n              [context]=\"getEditorialWidgetContext()\"\n              [strictValidation]=\"true\"\n              [autoWireOutputs]=\"true\"\n              (widgetEvent)=\"onEditorialWidgetEvent('beforeActions', $event)\">\n            </ng-container>\n          }\n        </section>\n        }\n        @if (actionPlacement === 'insideLastSection' && last && !(effectivePresentation\n        || effectiveReadonly)) {\n        <praxis-form-actions data-actions-placement=\"insideLastSection\" [actions]=\"config.actions\"\n          [isSubmitting]=\"submitting\" [formIsValid]=\"form.valid\" [submitError]=\"submitError\" [formId]=\"formId\"\n          [actionOverrides]=\"actionRuleProps\" [editorialVisualContext]=\"hasEditorialVisualContext()\"\n          (action)=\"onFormAction($event)\"></praxis-form-actions>\n        }\n      </div>\n      <!-- Overlay de bloqueio durante submiss\u00E3o -->\n      @if (submitting) {\n      <div class=\"form-blocking-overlay\" aria-live=\"polite\">\n        <mat-progress-spinner diameter=\"40\" color=\"primary\"></mat-progress-spinner>\n        <p>{{ config.messages?.loading?.submit || 'Salvando...' }}</p>\n      </div>\n      }\n    </div>\n\n    @if (enableCustomization && selectedElement?.domElement === sectionEl) {\n      <div class=\"add-section-container\">\n        <div class=\"add-section-line\"></div>\n        <button mat-fab color=\"primary\" aria-label=\"Adicionar nova se\u00E7\u00E3o\" (click)=\"addNewSectionAfter(sectionIndex)\"\n          matTooltip=\"Adicionar nova se\u00E7\u00E3o aqui\">\n          <mat-icon [praxisIcon]=\"'add'\"></mat-icon>\n        </button>\n        <div class=\"add-section-line\"></div>\n      </div>\n    }\n    }\n  </div>\n  }\n\n  @if (beforeActionsPlacement !== 'insideLastSection' && formBlocksBeforeActions.length) {\n    <section class=\"form-editorial-blocks form-editorial-blocks-before-actions\" data-editorial-placement=\"beforeActions\">\n      @for (block of formBlocksBeforeActions; track (block.id ?? $index)) {\n        <ng-container\n          [dynamicWidgetLoader]=\"block\"\n          [context]=\"getEditorialWidgetContext()\"\n          [strictValidation]=\"true\"\n          [autoWireOutputs]=\"true\"\n          (widgetEvent)=\"onEditorialWidgetEvent('beforeActions', $event)\">\n        </ng-container>\n      }\n    </section>\n  }\n\n  @if (actionPlacement === 'afterSections' && !(effectivePresentation || effectiveReadonly)) {\n    <praxis-form-actions data-actions-placement=\"afterSections\" [actions]=\"config.actions\" [isSubmitting]=\"submitting\"\n      [formIsValid]=\"form.valid\" [submitError]=\"submitError\" [formId]=\"formId\"\n      [actionOverrides]=\"actionRuleProps\" [editorialVisualContext]=\"hasEditorialVisualContext()\"\n      (action)=\"onFormAction($event)\"></praxis-form-actions>\n  }\n\n  @if (formBlocksAfter.length) {\n    <section class=\"form-editorial-blocks form-editorial-blocks-after\" data-editorial-placement=\"after\">\n      @for (block of formBlocksAfter; track (block.id ?? $index)) {\n        <ng-container\n          [dynamicWidgetLoader]=\"block\"\n          [context]=\"getEditorialWidgetContext()\"\n          [strictValidation]=\"true\"\n          [autoWireOutputs]=\"true\"\n          (widgetEvent)=\"onEditorialWidgetEvent('after', $event)\">\n        </ng-container>\n      }\n    </section>\n  }\n</form>\n@if (!enableCustomization && mode === 'view') {\n<div class=\"ai-floating-assistant\">\n  <praxis-ai-assistant [adapter]=\"aiAdapter\"></praxis-ai-assistant>\n</div>\n}\n}\n", styles: ["@charset \"UTF-8\";.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}}.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(--md-sys-color-primary)}.canvas-mode-enabled .canvas-element[data-canvas-type=row]{--outline-color: 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(--md-sys-color-tertiary)}.canvas-mode-enabled .canvas-element[data-canvas-type=actions]{--outline-color: var(--md-sys-color-primary)}.canvas-mode-enabled .canvas-element.hovered:not(.selected){outline-color:var(--outline-color, var(--md-sys-color-primary));outline-style:dashed}.canvas-mode-enabled .canvas-element.selected{outline-color:var(--outline-color, var(--md-sys-color-primary));outline-style:solid;box-shadow:0 0 0 2px var(--outline-color, var(--md-sys-color-primary))}.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)}:host{display:block;position:relative}.form-config-controls{position:sticky;top:10px;margin-left:auto;margin-bottom:10px;display:flex;align-items:center;gap:.35rem;z-index:60;background:color-mix(in srgb,var(--md-sys-color-surface) 92%,transparent);padding:6px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 82%,transparent);border-radius:999px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 10px 22px #0f172a14;min-width:0;justify-content:flex-end;pointer-events:none;opacity:.88;transition:opacity .16s ease,box-shadow .16s ease,border-color .16s ease,transform .16s ease}.form-config-controls>*{pointer-events:auto}.praxis-dynamic-form:hover .form-config-controls,.praxis-dynamic-form:focus-within .form-config-controls{opacity:1;border-color:color-mix(in srgb,var(--md-sys-color-primary) 26%,var(--md-sys-color-outline-variant) 74%);box-shadow:0 14px 28px #0f172a1f;transform:translateY(-1px)}.form-config-controls .mat-icon-button{--mdc-icon-button-state-layer-size: 34px;width:34px;height:34px;color:var(--md-sys-color-on-surface-variant);background:color-mix(in srgb,var(--md-sys-color-surface-container-low) 82%,transparent);border:1px solid transparent}.form-config-controls .mat-icon-button:hover{color:var(--md-sys-color-primary);background:var(--md-sys-color-primary-container);border-color:color-mix(in srgb,var(--md-sys-color-primary) 20%,transparent)}.ai-floating-assistant{position:sticky;right:0;bottom:12px;margin-top:14px;margin-left:auto;width:fit-content;z-index:70;pointer-events:none}.ai-floating-assistant praxis-ai-assistant{pointer-events:auto;display:inline-flex}.ai-floating-assistant .ai-trigger-btn{box-shadow:0 12px 28px #0f172a24}.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;box-shadow:0 12px 30px #7f1d1d1f}.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}.pfx-form-info-banner{margin-bottom:14px;padding:12px 14px;border-radius:16px;border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 18%,var(--md-sys-color-outline-variant) 82%);background:color-mix(in srgb,var(--md-sys-color-primary-container) 24%,var(--md-sys-color-surface) 76%);color:var(--md-sys-color-on-surface);display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.pfx-form-info-banner .text{font-size:.92rem;line-height:1.5;font-weight:600}.pfx-form-info-banner .actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.praxis-dynamic-form{display:flex;flex-direction:column;transition:all .3s ease;position:relative;font-family:inherit;font-size:inherit;color:inherit;--pfx-editorial-form-surface: var( --pfx-form-section-surface, var(--md-sys-color-surface-container) );--pfx-editorial-form-surface-muted: var(--md-sys-color-surface-container-low);--pfx-editorial-form-border: var( --pfx-form-stroke, var(--md-sys-color-outline-variant) );--pfx-editorial-form-text: var(--md-sys-color-on-surface);--pfx-editorial-form-text-muted: var(--md-sys-color-on-surface-variant);--pfx-editorial-form-field-surface: color-mix( in srgb, var(--pfx-editorial-form-surface-muted) 76%, var(--pfx-editorial-form-surface) 24% );--pfx-editorial-form-field-outline: color-mix( in srgb, var(--pfx-editorial-form-border) 88%, transparent );--pfx-editorial-form-accent: var(--md-sys-color-primary);--pfx-editorial-form-accent-text: var(--md-sys-color-on-primary);--pfx-editorial-form-radius: var(--pfx-form-section-radius, 8px);--pfx-editorial-form-field-radius: var(--pfx-form-field-radius, 4px);--pfx-editorial-form-border-width: 1px;--pfx-editorial-form-field-border-width: 1px;--pfx-editorial-form-shadow: none;--pfx-form-shell-surface: color-mix( in srgb, var(--pfx-editorial-form-surface) 36%, transparent );--pfx-form-section-surface-flat: color-mix( in srgb, var(--pfx-editorial-form-surface) 78%, var(--pfx-editorial-form-surface-muted) 22% );--pfx-form-section-divider: color-mix( in srgb, var(--pfx-editorial-form-border) 68%, transparent );--pfx-form-label-strong: color-mix( in srgb, var(--pfx-editorial-form-text) 96%, white 4% );--pfx-form-label-muted: color-mix( in srgb, var(--pfx-editorial-form-text-muted) 92%, var(--pfx-editorial-form-text) 8% );--pfx-form-field-surface-rest: color-mix( in srgb, var(--pfx-editorial-form-field-surface) 82%, var(--pfx-editorial-form-surface) 18% );--pfx-form-field-surface-focus: color-mix( in srgb, var(--pfx-editorial-form-accent) 4%, var(--pfx-form-field-surface-rest) 96% );--pfx-form-field-min-height: 48px;--pfx-form-section-padding: clamp(1.1rem, 1.8vw, 1.5rem);--pfx-form-section-gap: 22px;--pfx-form-footer-surface: color-mix( in srgb, var(--pfx-editorial-form-surface) 70%, var(--pfx-editorial-form-surface-muted) 30% );--pfx-form-footer-border: color-mix( in srgb, var(--pfx-editorial-form-border) 76%, transparent )}.praxis-dynamic-form.editorial-visual-context{font-family:var(--editorial-body-font-family, inherit);font-size:var(--editorial-body-size, 1rem);color:var(--editorial-text-primary, var(--md-sys-color-on-surface));--pfx-editorial-form-surface: var( --editorial-surface-primary, var(--pfx-form-section-surface, var(--md-sys-color-surface-container)) );--pfx-editorial-form-surface-muted: var( --editorial-surface-secondary, var(--md-sys-color-surface-container-low) );--pfx-editorial-form-border: var( --editorial-border-color, var(--pfx-form-stroke, var(--md-sys-color-outline-variant)) );--pfx-editorial-form-text: var( --editorial-text-primary, var(--md-sys-color-on-surface) );--pfx-editorial-form-text-muted: var( --editorial-text-secondary, var(--md-sys-color-on-surface-variant) );--pfx-editorial-form-accent: var( --editorial-cta-primary, var(--editorial-accent, var(--md-sys-color-primary)) );--pfx-editorial-form-accent-text: var( --editorial-cta-primary-text, var(--editorial-accent-contrast, var(--md-sys-color-on-primary)) );--pfx-editorial-form-radius: var(--editorial-card-radius, 18px);--pfx-editorial-form-field-radius: var( --editorial-field-radius, var(--editorial-card-radius, 14px) );--pfx-editorial-form-border-width: var(--editorial-card-border-width, 1px);--pfx-editorial-form-field-border-width: var(--editorial-field-border-width, 1px);--pfx-editorial-form-shadow: var(--editorial-card-shadow, none);--md-sys-color-surface: var( --pfx-editorial-form-surface, var(--md-sys-color-surface) );--md-sys-color-surface-container: var( --pfx-editorial-form-surface, var(--md-sys-color-surface-container) );--md-sys-color-surface-container-low: var( --pfx-editorial-form-surface-muted, var(--md-sys-color-surface-container-low) );--md-sys-color-surface-variant: var( --pfx-editorial-form-field-surface, var(--md-sys-color-surface-variant) );--md-sys-color-outline: var( --pfx-editorial-form-field-outline, var(--md-sys-color-outline) );--md-sys-color-outline-variant: var( --pfx-editorial-form-border, var(--md-sys-color-outline-variant) );--md-sys-color-on-surface: var( --pfx-editorial-form-text, var(--md-sys-color-on-surface) );--md-sys-color-on-surface-variant: var( --pfx-editorial-form-text-muted, var(--md-sys-color-on-surface-variant) );--md-sys-color-primary: var( --pfx-editorial-form-accent, var(--md-sys-color-primary) );--md-sys-color-on-primary: var( --pfx-editorial-form-accent-text, var(--md-sys-color-on-primary) );--md-sys-color-on-surface-rgb: var( --editorial-text-primary-rgb, var(--md-sys-color-on-surface-rgb) );--mat-sys-on-surface: var( --pfx-editorial-form-text, var(--mat-sys-on-surface) );--mat-sys-on-surface-variant: var( --pfx-editorial-form-text-muted, var(--mat-sys-on-surface-variant) );--mat-sys-on-surface-rgb: var( --editorial-text-primary-rgb, var(--mat-sys-on-surface-rgb, var(--md-sys-color-on-surface-rgb)) );color:var(--pfx-editorial-form-text);color-scheme:light}.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-section-divider);border-radius:var(--pfx-editorial-form-radius);padding:var(--pfx-form-section-padding);background:var(--pfx-form-section-surface-flat);box-shadow:none;transition:all .2s ease;position:relative}.praxis-dynamic-form.editorial-visual-context .form-section{border:var(--pfx-editorial-form-border-width) solid var(--pfx-editorial-form-border)!important;background:var(--pfx-editorial-form-surface)!important;box-shadow:var(--editorial-card-shadow, none)}.praxis-dynamic-form.editorial-visual-context .form-section.section-appearance-step{background-color:var(--pfx-editorial-form-surface)!important;background-image:linear-gradient(180deg,color-mix(in srgb,var(--editorial-accent, var(--md-sys-color-primary)) 6%,transparent) 0%,transparent 132px)!important;background-repeat:no-repeat!important}.section-drop-wrapper>.form-section{margin-bottom:var(--pfx-section-gap, 20px)}.section-drop-wrapper:last-of-type>.form-section{margin-bottom:0}.praxis-dynamic-form>praxis-form-actions[data-actions-placement=afterSections] .form-actions{margin-top:var(--pfx-actions-gap-top, var(--pfx-section-gap, 20px))}.section-title{margin:0 0 var(--pfx-section-title-mb, 12px) 0;font-family:var(--editorial-title-font-family, var(--editorial-body-font-family, inherit));font-size:var(--editorial-step-title-size, 1.12rem);font-weight:700;color:var(--pfx-form-label-strong)}.section-heading{display:flex;align-items:flex-start;gap:12px;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--pfx-form-section-divider)}.section-heading.align-center{flex-direction:column;align-items:center;text-align:center}.section-heading.align-center .section-heading-text{display:grid;justify-items:center}.section-step-label{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;margin:0 0 8px;border-radius:999px;background:color-mix(in srgb,var(--pfx-editorial-form-accent) 10%,transparent);color:color-mix(in srgb,var(--pfx-editorial-form-accent) 84%,var(--pfx-form-label-strong) 16%);font-size:.72rem;font-weight:800;font-family:var(--editorial-title-font-family, var(--editorial-body-font-family, inherit));letter-spacing:.08em;text-transform:uppercase}.section-heading-text{flex:1 1 auto;min-width:0}.section-collapse-btn{margin-left:4px;color:var(--pfx-form-label-muted)}.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-title.title-large,.section-title.title-medium,.section-title.title-small,.section-title.headline-small{font-family:var(--editorial-title-font-family, var(--editorial-body-font-family, inherit));font-weight:var(--editorial-title-weight, 600)}.section-description{margin:0;font-family:var(--editorial-body-font-family, inherit);font-size:.93rem;color:var(--pfx-form-label-muted);line-height:1.6}.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)}.section-description.body-large,.section-description.body-medium,.section-description.body-small{font-family:var(--editorial-body-font-family, inherit);font-weight:var(--editorial-body-weight, 400)}.section-title.align-center,.section-description.align-center,.section-step-label.align-center{text-align:center}.form-section.section-appearance-plain{border-color:transparent;border-radius:0;padding:0;background:transparent}.form-section.section-appearance-plain .section-heading{margin-bottom:14px}.form-section.section-appearance-step{border-radius:var(--pfx-editorial-form-radius);padding:var(--pfx-form-section-padding);background:var(--pfx-form-section-surface-flat);border-color:var(--pfx-form-section-divider);box-shadow:none}.praxis-dynamic-form.editorial-visual-context .form-section.section-appearance-step{border-radius:var(--editorial-card-radius, 20px);box-shadow:none}.form-section.section-appearance-step .section-heading{margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--pfx-form-section-divider)}.form-section.section-appearance-step .section-title{font:var(--mdc-typography-title-large, 700 22px/28px system-ui);color:var(--pfx-form-label-strong);margin-bottom:8px}.form-section.section-appearance-step .section-description{color:var(--pfx-form-label-muted);max-width:60ch}.form-section.section-appearance-step .section-step-label{min-height:24px;padding:0 10px;margin-bottom:10px;box-shadow:none}.form-section.section-appearance-step .section-heading.align-center .section-description{max-width:52ch}.form-section.section-appearance-step .section-body{display:grid;gap:8px;padding-top:0}.form-section.section-appearance-step .form-row{margin-bottom:var(--pfx-field-gap, 1rem)}.form-section.section-appearance-step .form-column{gap:var(--pfx-field-gap, 12px)}.form-section .form-editorial-blocks{display:grid;gap:16px}.form-section .form-editorial-blocks[data-editorial-placement=beforeActions]{margin-top:24px;padding-top:18px;border-top:1px solid var(--pfx-form-section-divider)}.form-section.section-appearance-step .form-editorial-blocks[data-editorial-placement=beforeActions]{gap:18px}.form-section.section-appearance-step .form-editorial-blocks[data-editorial-placement=beforeActions]>*+*{margin-top:2px}.praxis-dynamic-form>praxis-form-actions[data-actions-placement=afterSections] .form-actions{margin-top:18px;padding-top:0}.praxis-dynamic-form>.form-editorial-blocks[data-editorial-placement=after]{margin-top:6px}:host-context(.mdc-theme-dark) .form-section.section-appearance-step,:host-context(.theme-dark) .form-section.section-appearance-step{border-color:color-mix(in srgb,var(--pfx-editorial-form-border) 82%,transparent);box-shadow:none}:host-context(.mdc-theme-dark) .form-section.section-appearance-step .section-title,:host-context(.theme-dark) .form-section.section-appearance-step .section-title{color:color-mix(in srgb,var(--pfx-editorial-form-text) 96%,white)}:host-context(.mdc-theme-dark) .form-section.section-appearance-step .section-description,:host-context(.theme-dark) .form-section.section-appearance-step .section-description{color:color-mix(in srgb,var(--pfx-editorial-form-text-muted) 86%,var(--pfx-editorial-form-text) 14%)}:host-context(.mdc-theme-dark) .section-step-label,:host-context(.theme-dark) .section-step-label{background:color-mix(in srgb,var(--md-sys-color-primary-container) 54%,transparent);color:color-mix(in srgb,var(--md-sys-color-primary) 88%,white)}:host-context(.mdc-theme-dark) .form-section .form-editorial-blocks[data-editorial-placement=beforeActions],:host-context(.theme-dark) .form-section .form-editorial-blocks[data-editorial-placement=beforeActions]{border-top-color:color-mix(in srgb,var(--md-sys-color-outline-variant) 90%,transparent)}.inline-edit-btn{margin-left:6px;vertical-align:middle;--mdc-icon-button-size: 28px;--mdc-icon-button-icon-size: 16px}.inline-edit-btn mat-icon{font-size:16px;width:16px;height:16px}.section-body.collapsed{border:1px dashed var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-low);border-radius:6px;padding:8px 10px}.section-collapsed-placeholder{display:flex;align-items:center;gap:8px;color:var(--md-sys-color-on-surface-variant);font-size:.95rem}.section-collapsed-placeholder mat-icon{font-size:20px;width:20px;height:20px}.form-row{display:flex;gap:1.1rem;margin-bottom:var(--pfx-field-gap, 1.1rem);transition:all .2s ease;border-radius:6px;position:relative}.praxis-dynamic-form.pfx-mounting .form-row{opacity:0;transform:translateY(var(--pdx-form-mount-offset, 6px));animation:pdxFormMount var(--pdx-form-mount-duration, .16s) ease-out both;animation-delay:calc(var(--pfx-mount-index, 0) * var(--pdx-form-mount-stagger, 20ms))}@media(prefers-reduced-motion:reduce){.praxis-dynamic-form.pfx-mounting .form-row{animation:none;opacity:1;transform:none}}@keyframes pdxFormMount{to{opacity:1;transform:translateY(0)}}.praxis-dynamic-form .mat-mdc-form-field{width:100%;margin-bottom:var(--pfx-field-gap, 10px);font-family:inherit;--mdc-filled-text-field-container-color: var(--pfx-form-field-surface-rest);--mdc-filled-text-field-focus-active-indicator-color: var(--pfx-editorial-form-accent);--mdc-filled-text-field-active-indicator-color: var(--pfx-editorial-form-field-outline);--mdc-filled-text-field-hover-active-indicator-color: var(--pfx-editorial-form-accent);--mdc-filled-text-field-focus-label-text-color: var(--pfx-editorial-form-accent);--mdc-filled-text-field-label-text-color: var(--pfx-form-label-muted);--mdc-filled-text-field-input-text-color: var(--pfx-editorial-form-text);--mdc-filled-text-field-caret-color: var(--pfx-editorial-form-accent);--mdc-filled-text-field-input-text-placeholder-color: color-mix( in srgb, var(--pfx-editorial-form-text-muted) 82%, transparent );--mdc-outlined-text-field-outline-color: var(--pfx-editorial-form-field-outline);--mdc-outlined-text-field-hover-outline-color: var(--pfx-editorial-form-accent);--mdc-outlined-text-field-focus-outline-color: var(--pfx-editorial-form-accent);--mdc-outlined-text-field-focus-label-text-color: var(--pfx-editorial-form-accent);--mdc-outlined-text-field-label-text-color: var(--pfx-form-label-muted);--mdc-outlined-text-field-input-text-color: var(--pfx-editorial-form-text);--mdc-filled-text-field-container-shape: var(--pfx-editorial-form-field-radius);--mdc-outlined-text-field-container-shape: var(--pfx-editorial-form-field-radius);--mdc-filled-text-field-active-indicator-height: var(--pfx-editorial-form-field-border-width);--mdc-filled-text-field-focus-active-indicator-height: var(--pfx-editorial-form-field-border-width);--mdc-outlined-text-field-outline-width: var(--pfx-editorial-form-field-border-width);--mdc-outlined-text-field-focus-outline-width: var(--pfx-editorial-form-field-border-width);--mat-select-enabled-trigger-text-color: var(--pfx-editorial-form-text);--mat-select-enabled-arrow-color: var(--pfx-form-label-muted);--mat-form-field-enabled-select-arrow-color: var(--pfx-form-label-muted);--mat-form-field-focus-select-arrow-color: var(--pfx-editorial-form-accent);--mat-form-field-hover-state-layer-opacity: 0;--mat-form-field-focus-state-layer-opacity: 0}.praxis-dynamic-form.editorial-visual-context .mat-mdc-form-field{font-family:var(--editorial-body-font-family, inherit)}.praxis-dynamic-form .mat-mdc-text-field-wrapper,.praxis-dynamic-form .mdc-text-field{background:var(--pfx-form-field-surface-rest);border-radius:var(--pfx-editorial-form-field-radius);min-height:var(--pfx-form-field-min-height);transition:background-color .16s ease,box-shadow .16s ease,border-color .16s ease}.praxis-dynamic-form.editorial-visual-context .mat-mdc-text-field-wrapper,.praxis-dynamic-form.editorial-visual-context .mdc-text-field,.praxis-dynamic-form.editorial-visual-context .mdc-text-field--filled,.praxis-dynamic-form.editorial-visual-context .mdc-text-field--outlined{background-color:var(--pfx-form-field-surface-rest)!important;background:var(--pfx-form-field-surface-rest)!important}.praxis-dynamic-form .mat-mdc-form-field .mdc-floating-label,.praxis-dynamic-form .mat-mdc-form-field .mat-mdc-form-field-hint,.praxis-dynamic-form .mat-mdc-form-field .mat-mdc-form-field-error,.praxis-dynamic-form .mat-mdc-form-field .mat-mdc-form-field-required-marker,.praxis-dynamic-form .mat-mdc-form-field .mat-mdc-select-arrow,.praxis-dynamic-form .mat-mdc-form-field .mat-mdc-select-placeholder,.praxis-dynamic-form .mat-mdc-form-field .mat-mdc-form-field-icon-suffix,.praxis-dynamic-form .mat-mdc-form-field .mat-mdc-form-field-icon-prefix{color:var(--pfx-form-label-muted)}.praxis-dynamic-form .mat-mdc-input-element,.praxis-dynamic-form .mat-mdc-select-value-text,.praxis-dynamic-form .mat-mdc-form-field-infix,.praxis-dynamic-form .mat-mdc-select-min-line{color:var(--pfx-editorial-form-text)}.praxis-dynamic-form .mat-mdc-form-field:hover .mat-mdc-text-field-wrapper,.praxis-dynamic-form .mat-mdc-form-field:hover .mdc-text-field,.praxis-dynamic-form .mat-mdc-form-field.mat-focused .mat-mdc-text-field-wrapper,.praxis-dynamic-form .mat-mdc-form-field.mat-focused .mdc-text-field{background:var(--pfx-form-field-surface-focus)}.praxis-dynamic-form.editorial-visual-context .mat-mdc-input-element,.praxis-dynamic-form.editorial-visual-context .mat-mdc-select-value-text,.praxis-dynamic-form.editorial-visual-context .mat-mdc-form-field-infix,.praxis-dynamic-form.editorial-visual-context .mat-mdc-select-min-line,.praxis-dynamic-form.editorial-visual-context .mdc-text-field__input{color:var(--pfx-editorial-form-text)!important;-webkit-text-fill-color:var(--pfx-editorial-form-text)!important}.praxis-dynamic-form.editorial-visual-context .mat-mdc-form-field .mdc-floating-label,.praxis-dynamic-form.editorial-visual-context .mat-mdc-form-field .mat-mdc-form-field-hint,.praxis-dynamic-form.editorial-visual-context .mat-mdc-form-field .mat-mdc-form-field-error,.praxis-dynamic-form.editorial-visual-context .mat-mdc-form-field .mat-mdc-form-field-required-marker,.praxis-dynamic-form.editorial-visual-context .mat-mdc-form-field .mat-mdc-select-arrow,.praxis-dynamic-form.editorial-visual-context .mat-mdc-form-field .mat-mdc-select-placeholder,.praxis-dynamic-form.editorial-visual-context .mat-mdc-form-field .mat-mdc-form-field-icon-suffix,.praxis-dynamic-form.editorial-visual-context .mat-mdc-form-field .mat-mdc-form-field-icon-prefix{color:var(--pfx-editorial-form-text-muted)!important}.praxis-dynamic-form.editorial-visual-context .mat-mdc-floating-label,.praxis-dynamic-form.editorial-visual-context .mdc-floating-label,.praxis-dynamic-form.editorial-visual-context .mdc-text-field__input::placeholder{color:color-mix(in srgb,var(--pfx-editorial-form-text) 68%,transparent)!important}.praxis-dynamic-form.editorial-visual-context .mat-mdc-input-element::placeholder,.praxis-dynamic-form.editorial-visual-context textarea.mat-mdc-input-element::placeholder{color:color-mix(in srgb,var(--pfx-editorial-form-text) 58%,transparent)!important}.praxis-dynamic-form .mat-mdc-radio-button,.praxis-dynamic-form .mat-mdc-checkbox,.praxis-dynamic-form .mat-mdc-slide-toggle{--mdc-radio-selected-icon-color: var(--pfx-editorial-form-accent);--mdc-radio-selected-hover-icon-color: var(--pfx-editorial-form-accent);--mdc-radio-selected-focus-icon-color: var(--pfx-editorial-form-accent);--mdc-checkbox-selected-checkmark-color: var(--pfx-editorial-form-accent-text);--mdc-checkbox-selected-focus-icon-color: var(--pfx-editorial-form-accent);--mdc-checkbox-selected-hover-icon-color: var(--pfx-editorial-form-accent);--mdc-checkbox-selected-icon-color: var(--pfx-editorial-form-accent);--mdc-switch-selected-focus-state-layer-color: var(--pfx-editorial-form-accent);--mdc-switch-selected-handle-color: var(--pfx-editorial-form-accent);--mdc-switch-selected-track-color: color-mix(in srgb, var(--pfx-editorial-form-accent) 45%, #fff)}.praxis-dynamic-form [data-field-type=input],.praxis-dynamic-form [data-field-type=textarea],.praxis-dynamic-form [data-field-type=email],.praxis-dynamic-form [data-field-type=password],.praxis-dynamic-form [data-field-type=url],.praxis-dynamic-form [data-field-type=search],.praxis-dynamic-form [data-field-type=phone],.praxis-dynamic-form [data-field-type=numericTextBox],.praxis-dynamic-form [data-field-type=currency],.praxis-dynamic-form [data-field-type=cpfCnpj],.praxis-dynamic-form [data-field-type=date],.praxis-dynamic-form [data-field-type=dateInput],.praxis-dynamic-form [data-field-type=dateRange],.praxis-dynamic-form [data-field-type=dateTimeLocal],.praxis-dynamic-form [data-field-type=time],.praxis-dynamic-form [data-field-type=timePicker],.praxis-dynamic-form [data-field-type=timeRange],.praxis-dynamic-form [data-field-type=month],.praxis-dynamic-form [data-field-type=week],.praxis-dynamic-form [data-field-type=yearInput],.praxis-dynamic-form [data-field-type=select],.praxis-dynamic-form [data-field-type=multi-select],.praxis-dynamic-form [data-field-type=searchable-select],.praxis-dynamic-form [data-field-type=async-select],.praxis-dynamic-form [data-field-type=autocomplete],.praxis-dynamic-form [data-field-type=tree-select],.praxis-dynamic-form [data-field-type=multi-select-tree],.praxis-dynamic-form [data-field-type=priceRange],.praxis-dynamic-form [data-field-type=file-upload]{display:block;width:100%;min-width:0}.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{display:grid;align-content:start;gap:var(--pfx-field-gap, 10px);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}.form-blocking-overlay{position:absolute;inset:0;background:transparent;color:var(--md-sys-color-on-surface);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}.section-heading{gap:10px;margin-bottom:16px;padding-bottom:14px}}.section-title{display:flex;align-items:center;gap:8px}.section-title .section-title-icon{font-size:1.25em;line-height:1}.section-title-avatar{--_pfx-form-section-avatar-size: var(--pfx-form-section-avatar-size-md, var(--pfx-form-section-avatar-size, 32px));display:inline-flex;align-items:center;justify-content:center;width:var(--_pfx-form-section-avatar-size);height:var(--_pfx-form-section-avatar-size);border-radius:999px;flex:0 0 var(--_pfx-form-section-avatar-size);overflow:hidden}.section-title-avatar.size-sm{--_pfx-form-section-avatar-size: var(--pfx-form-section-avatar-size-sm, 24px)}.section-title-avatar.size-md{--_pfx-form-section-avatar-size: var(--pfx-form-section-avatar-size-md, var(--pfx-form-section-avatar-size, 32px))}.section-title-avatar.size-lg{--_pfx-form-section-avatar-size: var(--pfx-form-section-avatar-size-lg, 40px)}.section-title-avatar-image{object-fit:cover;border:1px solid color-mix(in srgb,var(--pfx-form-section-divider) 72%,transparent);background:var(--pfx-form-section-surface-flat)}.section-title-avatar-text,.section-title-avatar-placeholder{background:color-mix(in srgb,var(--pfx-editorial-form-accent) 14%,var(--pfx-form-section-surface-flat));color:color-mix(in srgb,var(--pfx-editorial-form-accent) 82%,var(--pfx-form-label-strong) 18%);font-size:calc(var(--_pfx-form-section-avatar-size) * .41);font-weight:800;letter-spacing:.04em;text-transform:uppercase}.section-title-avatar-placeholder mat-icon{font-size:calc(var(--_pfx-form-section-avatar-size) * .5625);width:calc(var(--_pfx-form-section-avatar-size) * .5625);height:calc(var(--_pfx-form-section-avatar-size) * .5625);line-height:calc(var(--_pfx-form-section-avatar-size) * .5625)}.section-title-avatar-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: DynamicFieldLoaderDirective, selector: "[dynamicFieldLoader]", inputs: ["fields", "formGroup", "enableExternalControlBinding", "itemTemplate", "debugTrace", "debugTraceLabel", "readonlyMode", "disabledMode", "presentationMode", "visible", "canvasMode"], outputs: ["componentsCreated", "fieldCreated", "fieldDestroyed", "renderError", "canvasMouseEnter", "canvasMouseLeave", "canvasClick"] }, { kind: "directive", type: DynamicWidgetLoaderDirective, selector: "[dynamicWidgetLoader]", inputs: ["dynamicWidgetLoader", "context", "strictValidation", "autoWireOutputs"], outputs: ["widgetEvent"], exportAs: ["dynamicWidgetLoader"] }, { 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: i4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i15.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i17.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", "editorialVisualContext", "isSubmitting", "formIsValid", "submitError", "formId", "actionOverrides"], outputs: ["action"] }, { kind: "component", type: EmptyStateCardComponent, selector: "praxis-empty-state-card", inputs: ["icon", "title", "description", "primaryAction", "secondaryActions", "inline", "tone"] }, { kind: "component", type: PraxisAiAssistantComponent, selector: "praxis-ai-assistant", inputs: ["adapter", "riskPolicy", "allowManualPatchEdit"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PraxisDynamicForm, isStandalone: true, selector: "praxis-dynamic-form", inputs: { resourcePath: "resourcePath", resourceId: "resourceId", editorialContext: "editorialContext", mode: "mode", config: "config", schemaSource: "schemaSource", enableCustomization: "enableCustomization", formId: "formId", componentInstanceId: "componentInstanceId", 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", loadingStateChange: "loadingStateChange", enableCustomizationChange: "enableCustomizationChange", customAction: "customAction", actionConfirmation: "actionConfirmation", schemaStatusChange: "schemaStatusChange", fieldRenderError: "fieldRenderError", widgetEvent: "widgetEvent" }, 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 when customization is enabled) -->\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 && enableCustomization) {\n<div class=\"form-config-controls\">\n  <praxis-ai-assistant [adapter]=\"aiAdapter\"></praxis-ai-assistant>\n  <button type=\"button\" mat-icon-button (click)=\"openConfigEditor()\" [disabled]=\"isLoading\" class=\"config-button\"\n    [matBadge]=\"schemaOutdated ? '!' : ''\" [matBadgeHidden]=\"!schemaOutdated\" matBadgeColor=\"warn\" matBadgeSize=\"small\"\n    matBadgePosition=\"above after\"\n    [matTooltip]=\"schemaOutdated ? 'Schema do servidor mudou \u2014 Reconciliar' : 'Configurar formul\u00E1rio'\">\n    <mat-icon [praxisIcon]=\"'settings'\"></mat-icon>\n  </button>\n  <button type=\"button\" mat-icon-button (click)=\"disconnect()\" matTooltip=\"Desconectar da fonte de dados\"\n    [disabled]=\"isLoading\">\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 icon=\"link\" [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) }\"></praxis-empty-state-card>\n}\n<form #formHost (ngSubmit)=\"onSubmit()\" [attr.aria-busy]=\"submitting ? 'true' : null\"\n  [attr.aria-label]=\"'Formul\u00E1rio ' + (config.metadata?.version || '')\" [class.canvas-mode-enabled]=\"enableCustomization\"\n  [class.presentation-mode]=\"effectivePresentation\" [class.readonly-mode]=\"effectiveReadonly\"\n  [class.editorial-visual-context]=\"hasEditorialVisualContext()\"\n  [class.pfx-mounting]=\"isMounting\" [formGroup]=\"form\"\n  [ngClass]=\"{\n    'pres-compact': presentationVars.compact,\n    'pres-label-left': presentationVars.labelPosition === 'left',\n    'pres-label-above': presentationVars.labelPosition === 'above'\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  [style.--pdx-form-mount-duration]=\"getMountDurationVar()\"\n  [style.--pdx-form-mount-offset]=\"getMountOffsetVar()\"\n  [style.--pdx-form-mount-stagger]=\"getMountStaggerVar()\"\n  class=\"praxis-dynamic-form\">\n  <praxis-canvas-toolbar (editMetadata)=\"openSelectedElementEditor()\" (selectPath)=\"onSelectPath($event)\"\n    (moveUp)=\"onToolbarMove('up')\" (moveDown)=\"onToolbarMove('down')\" (toggleReadonly)=\"onToolbarToggleReadonly()\"\n    (toggleRequired)=\"onToolbarToggleRequired()\" (toggleHidden)=\"onToolbarToggleHidden()\"\n    (toggleDisabled)=\"onToolbarToggleDisabled()\" (requestClose)=\"onToolbarRequestClose()\"\n    *ngIf=\"enableCustomization && selectedElement\" [selectedElement]=\"selectedElement\"\n    [style.transform]=\"toolbarTransform\"></praxis-canvas-toolbar>\n\n  @if (formBlocksBefore.length) {\n    <section class=\"form-editorial-blocks form-editorial-blocks-before\" data-editorial-placement=\"before\">\n      @for (block of formBlocksBefore; track (block.id ?? $index)) {\n        <ng-container\n          [dynamicWidgetLoader]=\"block\"\n          [context]=\"getEditorialWidgetContext()\"\n          [strictValidation]=\"true\"\n          [autoWireOutputs]=\"true\"\n          (widgetEvent)=\"onEditorialWidgetEvent('before', $event)\">\n        </ng-container>\n      }\n    </section>\n  }\n\n  @if (actionPlacement === 'top' && !(effectivePresentation || effectiveReadonly)) {\n  <praxis-form-actions data-actions-placement=\"top\" [actions]=\"config.actions\" [isSubmitting]=\"submitting\"\n    [formIsValid]=\"form.valid\" [submitError]=\"submitError\" [formId]=\"formId\" [actionOverrides]=\"actionRuleProps\"\n    [editorialVisualContext]=\"hasEditorialVisualContext()\"\n    (action)=\"onFormAction($event)\"></praxis-form-actions>\n  }\n\n  @for (section of config.sections; track (section.id ?? $index); let sectionIndex = $index;\n  let last = $last) {\n  <div class=\"section-drop-wrapper\" [attr.data-section-id]=\"section.id\">\n    @if (isSectionVisible(section)) {\n      <div #sectionEl class=\"form-section canvas-element\" data-canvas-type=\"section\" [attr.data-section-id]=\"section.id\"\n        [attr.data-section-index]=\"sectionIndex\" (mouseenter)=\"onElementMouseEnter($event, 'section', section, sectionEl)\"\n        (mouseleave)=\"onElementMouseLeave($event)\" (click)=\"onElementClick($event, 'section', section, sectionEl)\"\n        [class.selected]=\"selectedElement?.domElement === sectionEl\"\n        [class.hovered]=\"hoveredElement?.domElement === sectionEl && selectedElement?.domElement !== sectionEl\"\n        [attr.data-section-appearance]=\"getSectionAppearance(section) || null\"\n        [style.marginBottom.px]=\"!last ? getSectionGapBottom(section) : null\" [ngClass]=\"getSectionClasses(section)\"\n        [ngStyle]=\"getSectionStyles(section)\">\n      <div\n        class=\"section-heading\"\n        [class.align-center]=\"getSectionHeaderAlign(section) === 'center'\"\n        [class.step-appearance]=\"getSectionAppearance(section) === 'step'\"\n      >\n        <div class=\"section-heading-text\" [matTooltip]=\"getSectionHeaderTooltip(section) || null\"\n          [matTooltipDisabled]=\"!getSectionHeaderTooltip(section)\">\n          @if (getSectionStepLabel(section)) {\n          <div class=\"section-step-label\" [class.align-center]=\"getSectionHeaderAlign(section) === 'center'\">\n            {{ getSectionStepLabel(section) }}\n          </div>\n          }\n          @if (getSectionTitle(section)) {\n          <h3 class=\"section-title\" [class.title-large]=\"getSectionTitleStyle(section) === 'titleLarge'\"\n            [class.title-medium]=\"getSectionTitleStyle(section) === 'titleMedium'\"\n            [class.title-small]=\"getSectionTitleStyle(section) === 'titleSmall'\"\n            [class.headline-small]=\"getSectionTitleStyle(section) === 'headlineSmall'\"\n            [style.marginBottom.px]=\"getSectionTitleGapBottom(section) ?? 20\" [style.color]=\"getSectionTitleColor(section) || null\"\n            [class.align-center]=\"getSectionHeaderAlign(section) === 'center'\"\n            [attr.id]=\"sectionPanelId(section, sectionIndex) + '-title'\">\n            @let sectionHeaderVisual = getSectionHeaderVisual(section);\n            @let sectionHeaderAvatarSize = getSectionHeaderAvatarSize(section);\n            @if (sectionHeaderVisual.kind === 'icon') {\n            <mat-icon class=\"section-title-icon\" aria-hidden=\"true\" [praxisIcon]=\"sectionHeaderVisual.icon\"></mat-icon>\n            }\n            @if (sectionHeaderVisual.kind === 'image') {\n            <img class=\"section-title-avatar section-title-avatar-image\" [class.size-sm]=\"sectionHeaderAvatarSize === 'sm'\"\n              [class.size-md]=\"sectionHeaderAvatarSize === 'md'\" [class.size-lg]=\"sectionHeaderAvatarSize === 'lg'\"\n              [src]=\"sectionHeaderVisual.src\" [alt]=\"sectionHeaderVisual.alt\" />\n            }\n            @if (sectionHeaderVisual.kind === 'initials') {\n            <span class=\"section-title-avatar section-title-avatar-text\" [class.size-sm]=\"sectionHeaderAvatarSize === 'sm'\"\n              [class.size-md]=\"sectionHeaderAvatarSize === 'md'\" [class.size-lg]=\"sectionHeaderAvatarSize === 'lg'\" aria-hidden=\"true\">\n              {{ sectionHeaderVisual.text }}\n            </span>\n            @if (sectionHeaderVisual.ariaLabel) {\n            <span class=\"section-title-avatar-sr-only\">{{ sectionHeaderVisual.ariaLabel }}</span>\n            }\n            }\n            @if (sectionHeaderVisual.kind === 'placeholder') {\n            <span class=\"section-title-avatar section-title-avatar-placeholder\" [class.size-sm]=\"sectionHeaderAvatarSize === 'sm'\"\n              [class.size-md]=\"sectionHeaderAvatarSize === 'md'\" [class.size-lg]=\"sectionHeaderAvatarSize === 'lg'\" aria-hidden=\"true\">\n              @if (sectionHeaderVisual.icon) {\n              <mat-icon aria-hidden=\"true\" [praxisIcon]=\"sectionHeaderVisual.icon\"></mat-icon>\n              }\n              @if (sectionHeaderVisual.text) {\n              <span>{{ sectionHeaderVisual.text }}</span>\n              }\n            </span>\n            @if (sectionHeaderVisual.ariaLabel) {\n            <span class=\"section-title-avatar-sr-only\">{{ sectionHeaderVisual.ariaLabel }}</span>\n            }\n            }\n            {{ getSectionTitle(section) }}\n            @if (enableCustomization) {\n            <button type=\"button\" class=\"inline-edit-btn\" mat-icon-button (click)=\"openSectionEditor(section, 'title')\"\n              aria-label=\"Editar t\u00EDtulo da se\u00E7\u00E3o\" matTooltip=\"Editar t\u00EDtulo\">\n              <mat-icon>edit</mat-icon>\n            </button>\n            }\n          </h3>\n          }\n          @if (getSectionDescription(section)) {\n          <p class=\"section-description\" [class.body-large]=\"getSectionDescriptionStyle(section) === 'bodyLarge'\"\n            [class.body-medium]=\"getSectionDescriptionStyle(section) === 'bodyMedium'\"\n            [class.body-small]=\"getSectionDescriptionStyle(section) === 'bodySmall'\"\n            [style.marginBottom.px]=\"getSectionDescriptionGapBottom(section) ?? 8\" [style.color]=\"getSectionDescriptionColor(section) || null\"\n            [class.align-center]=\"getSectionHeaderAlign(section) === 'center'\">\n            {{ getSectionDescription(section) }}\n            @if (enableCustomization) {\n            <button type=\"button\" class=\"inline-edit-btn\" mat-icon-button\n              (click)=\"openSectionEditor(section, 'description')\" aria-label=\"Editar descri\u00E7\u00E3o da se\u00E7\u00E3o\"\n              matTooltip=\"Editar descri\u00E7\u00E3o\">\n              <mat-icon>edit</mat-icon>\n            </button>\n            }\n          </p>\n          }\n        </div>\n        @if (getSectionHeaderActions(section).length) {\n        <div class=\"section-heading-actions\" [class.align-center]=\"getSectionHeaderAlign(section) === 'center'\">\n          @for (action of getSectionHeaderActions(section); track action.id) {\n          <button\n            type=\"button\"\n            class=\"section-heading-action-btn\"\n            mat-icon-button\n            [color]=\"getSectionHeaderActionColor(action)\"\n            [disabled]=\"isSectionHeaderActionDisabled(action)\"\n            [matTooltip]=\"getSectionHeaderActionTooltip(action)\"\n            [attr.aria-label]=\"action.label\"\n            [attr.aria-busy]=\"action.loading ? 'true' : null\"\n            [ngClass]=\"getSectionHeaderActionNgClass(action)\"\n            [ngStyle]=\"getSectionHeaderActionStyles(action)\"\n            (click)=\"onSectionHeaderActionClick(section, action, $event)\"\n          >\n            @if (action.loading) {\n            <mat-progress-spinner diameter=\"16\" mode=\"indeterminate\"></mat-progress-spinner>\n            <span class=\"section-heading-action-sr-only\">{{ getSectionHeaderActionLoadingLabel(action) }}</span>\n            } @else {\n            <mat-icon [praxisIcon]=\"action.icon\"></mat-icon>\n            }\n          </button>\n          }\n        </div>\n        }\n        @if (isSectionCollapsible(section)) {\n        <button type=\"button\" class=\"section-collapse-btn\" mat-icon-button\n          (click)=\"toggleSectionCollapse($event, section)\" [attr.aria-expanded]=\"!isSectionCollapsed(section)\"\n          [attr.aria-controls]=\"sectionPanelId(section, sectionIndex)\"\n          [attr.aria-label]=\"isSectionCollapsed(section) ? 'Expandir se\u00E7\u00E3o' : 'Recolher se\u00E7\u00E3o'\">\n          <mat-icon [praxisIcon]=\"isSectionCollapsed(section) ? 'expand_more' : 'expand_less'\"></mat-icon>\n        </button>\n        }\n      </div>\n\n      <div class=\"section-body\" [class.collapsed]=\"isSectionCollapsed(section)\"\n        [attr.id]=\"sectionPanelId(section, sectionIndex)\"\n        [attr.aria-labelledby]=\"getSectionTitle(section) ? sectionPanelId(section, sectionIndex) + '-title' : null\">\n        @if (!isSectionCollapsed(section)) {\n        @for (row of section.rows; track (row.id ?? $index); let rowIndex = $index) {\n        @if (isRowVisible(row)) {\n        <div class=\"row-drop-wrapper\" [attr.data-section-id]=\"section.id\">\n          <div #rowEl class=\"form-row grid-12 canvas-element\" data-canvas-type=\"row\" [attr.data-row-index]=\"rowIndex\"\n            [attr.data-section-id]=\"section.id\" [attr.data-row-id]=\"row.id\" [style.--pfx-grid-gap.px]=\"getRowGap(row)\"\n            [style.--pfx-field-gap.px]=\"getRowRowGap(row)\"\n            [style.--pfx-mount-index]=\"rowIndex\"\n            [style.marginBottom.px]=\"rowIndex < section.rows.length - 1 ? (getRowRowGap(row) ?? null) : null\"\n            [ngClass]=\"getRowClasses(row)\" [ngStyle]=\"getRowStyles(row)\"\n            (mouseenter)=\"onElementMouseEnter($event, 'row', row, rowEl)\" (mouseleave)=\"onElementMouseLeave($event)\"\n            (click)=\"onElementClick($event, 'row', row, rowEl)\" [class.selected]=\"selectedElement?.domElement === rowEl\"\n            [class.hovered]=\"hoveredElement?.domElement === rowEl && selectedElement?.domElement !== rowEl\">\n            @for (column of row.columns; track (column.id ?? $index); let colIndex = $index) {\n            @if (isColumnVisible(column)) {\n            <div class=\"column-drop-wrapper\" [attr.data-section-id]=\"section.id\" [attr.data-row-id]=\"row.id\">\n              <div #colEl class=\"form-column canvas-element\" [ngClass]=\"getColumnClasses(column)\"\n                [style.padding.px]=\"getColumnPadding(column)\" [style.--pfx-field-gap.px]=\"getRowRowGap(row)\"\n                [ngStyle]=\"getColumnStyles(column)\" [attr.data-testid]=\"column.testId || null\"\n                [attr.data-row-gap]=\"getRowRowGap(row)\" data-canvas-type=\"column\" [attr.data-column-index]=\"colIndex\"\n                [attr.data-row-index]=\"rowIndex\" [attr.data-section-id]=\"section.id\" [attr.data-row-id]=\"row.id\"\n                [attr.data-column-id]=\"column.id\" (mouseenter)=\"onElementMouseEnter($event, 'column', column, colEl)\"\n                (mouseleave)=\"onElementMouseLeave($event)\" (click)=\"onElementClick($event, 'column', column, colEl)\"\n                [class.selected]=\"selectedElement?.domElement === colEl\"\n                [class.hovered]=\"hoveredElement?.domElement === colEl && selectedElement?.domElement !== colEl\">\n                <ng-container dynamicFieldLoader [fields]=\"getColumnFields(column)\" [formGroup]=\"form\"\n                  [readonlyMode]=\"readonlyModeGlobal === null ? null : readonlyModeGlobal\"\n                  [disabledMode]=\"disabledModeGlobal === null ? null : disabledModeGlobal\"\n                  [presentationMode]=\"presentationForLoader\" [visible]=\"visibleGlobal === null ? null : visibleGlobal\"\n                  [canvasMode]=\"enableCustomization\" (canvasMouseEnter)=\"onFieldMouseEnter($event)\"\n                  (canvasMouseLeave)=\"onFieldMouseLeave($event)\" (canvasClick)=\"onFieldClick($event)\"\n                  (renderError)=\"onFieldRenderError($event)\">\n                </ng-container>\n              </div>\n            </div>\n            } }\n          </div>\n        </div>\n        }\n        }\n        } @else {\n        <div class=\"section-collapsed-placeholder\">\n          <mat-icon aria-hidden=\"true\" [praxisIcon]=\"'unfold_more'\"></mat-icon>\n          <span>{{ getSectionCollapsedSummary(section) }}</span>\n        </div>\n        }\n        @if (last && beforeActionsPlacement === 'insideLastSection' && formBlocksBeforeActions.length) {\n        <section class=\"form-editorial-blocks form-editorial-blocks-before-actions\" data-editorial-placement=\"beforeActions\">\n          @for (block of formBlocksBeforeActions; track (block.id ?? $index)) {\n            <ng-container\n              [dynamicWidgetLoader]=\"block\"\n              [context]=\"getEditorialWidgetContext()\"\n              [strictValidation]=\"true\"\n              [autoWireOutputs]=\"true\"\n              (widgetEvent)=\"onEditorialWidgetEvent('beforeActions', $event)\">\n            </ng-container>\n          }\n        </section>\n        }\n        @if (actionPlacement === 'insideLastSection' && last && !(effectivePresentation\n        || effectiveReadonly)) {\n        <praxis-form-actions data-actions-placement=\"insideLastSection\" [actions]=\"config.actions\"\n          [isSubmitting]=\"submitting\" [formIsValid]=\"form.valid\" [submitError]=\"submitError\" [formId]=\"formId\"\n          [actionOverrides]=\"actionRuleProps\" [editorialVisualContext]=\"hasEditorialVisualContext()\"\n          (action)=\"onFormAction($event)\"></praxis-form-actions>\n        }\n      </div>\n      <!-- Overlay de bloqueio durante submiss\u00E3o -->\n      @if (submitting) {\n      <div class=\"form-blocking-overlay\" aria-live=\"polite\">\n        <mat-progress-spinner diameter=\"40\" color=\"primary\"></mat-progress-spinner>\n        <p>{{ config.messages?.loading?.submit || 'Salvando...' }}</p>\n      </div>\n      }\n    </div>\n\n    @if (enableCustomization && selectedElement?.domElement === sectionEl) {\n      <div class=\"add-section-container\">\n        <div class=\"add-section-line\"></div>\n        <button mat-fab color=\"primary\" aria-label=\"Adicionar nova se\u00E7\u00E3o\" (click)=\"addNewSectionAfter(sectionIndex)\"\n          matTooltip=\"Adicionar nova se\u00E7\u00E3o aqui\">\n          <mat-icon [praxisIcon]=\"'add'\"></mat-icon>\n        </button>\n        <div class=\"add-section-line\"></div>\n      </div>\n    }\n    }\n  </div>\n  }\n\n  @if (beforeActionsPlacement !== 'insideLastSection' && formBlocksBeforeActions.length) {\n    <section class=\"form-editorial-blocks form-editorial-blocks-before-actions\" data-editorial-placement=\"beforeActions\">\n      @for (block of formBlocksBeforeActions; track (block.id ?? $index)) {\n        <ng-container\n          [dynamicWidgetLoader]=\"block\"\n          [context]=\"getEditorialWidgetContext()\"\n          [strictValidation]=\"true\"\n          [autoWireOutputs]=\"true\"\n          (widgetEvent)=\"onEditorialWidgetEvent('beforeActions', $event)\">\n        </ng-container>\n      }\n    </section>\n  }\n\n  @if (actionPlacement === 'afterSections' && !(effectivePresentation || effectiveReadonly)) {\n    <praxis-form-actions data-actions-placement=\"afterSections\" [actions]=\"config.actions\" [isSubmitting]=\"submitting\"\n      [formIsValid]=\"form.valid\" [submitError]=\"submitError\" [formId]=\"formId\"\n      [actionOverrides]=\"actionRuleProps\" [editorialVisualContext]=\"hasEditorialVisualContext()\"\n      (action)=\"onFormAction($event)\"></praxis-form-actions>\n  }\n\n  @if (formBlocksAfter.length) {\n    <section class=\"form-editorial-blocks form-editorial-blocks-after\" data-editorial-placement=\"after\">\n      @for (block of formBlocksAfter; track (block.id ?? $index)) {\n        <ng-container\n          [dynamicWidgetLoader]=\"block\"\n          [context]=\"getEditorialWidgetContext()\"\n          [strictValidation]=\"true\"\n          [autoWireOutputs]=\"true\"\n          (widgetEvent)=\"onEditorialWidgetEvent('after', $event)\">\n        </ng-container>\n      }\n    </section>\n  }\n</form>\n@if (!enableCustomization && mode === 'view') {\n<div class=\"ai-floating-assistant\">\n  <praxis-ai-assistant [adapter]=\"aiAdapter\"></praxis-ai-assistant>\n</div>\n}\n}\n", styles: ["@charset \"UTF-8\";.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}}.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(--md-sys-color-primary)}.canvas-mode-enabled .canvas-element[data-canvas-type=row]{--outline-color: 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(--md-sys-color-tertiary)}.canvas-mode-enabled .canvas-element[data-canvas-type=actions]{--outline-color: var(--md-sys-color-primary)}.canvas-mode-enabled .canvas-element.hovered:not(.selected){outline-color:var(--outline-color, var(--md-sys-color-primary));outline-style:dashed}.canvas-mode-enabled .canvas-element.selected{outline-color:var(--outline-color, var(--md-sys-color-primary));outline-style:solid;box-shadow:0 0 0 2px var(--outline-color, var(--md-sys-color-primary))}.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)}:host{display:block;position:relative}.form-config-controls{position:sticky;top:10px;margin-left:auto;margin-bottom:10px;display:flex;align-items:center;gap:.35rem;z-index:60;background:color-mix(in srgb,var(--md-sys-color-surface) 92%,transparent);padding:6px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 82%,transparent);border-radius:999px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 10px 22px #0f172a14;min-width:0;justify-content:flex-end;pointer-events:none;opacity:.88;transition:opacity .16s ease,box-shadow .16s ease,border-color .16s ease,transform .16s ease}.form-config-controls>*{pointer-events:auto}.praxis-dynamic-form:hover .form-config-controls,.praxis-dynamic-form:focus-within .form-config-controls{opacity:1;border-color:color-mix(in srgb,var(--md-sys-color-primary) 26%,var(--md-sys-color-outline-variant) 74%);box-shadow:0 14px 28px #0f172a1f;transform:translateY(-1px)}.form-config-controls .mat-icon-button{--mdc-icon-button-state-layer-size: 34px;width:34px;height:34px;color:var(--md-sys-color-on-surface-variant);background:color-mix(in srgb,var(--md-sys-color-surface-container-low) 82%,transparent);border:1px solid transparent}.form-config-controls .mat-icon-button:hover{color:var(--md-sys-color-primary);background:var(--md-sys-color-primary-container);border-color:color-mix(in srgb,var(--md-sys-color-primary) 20%,transparent)}.ai-floating-assistant{position:sticky;right:0;bottom:12px;margin-top:14px;margin-left:auto;width:fit-content;z-index:70;pointer-events:none}.ai-floating-assistant praxis-ai-assistant{pointer-events:auto;display:inline-flex}.ai-floating-assistant .ai-trigger-btn{box-shadow:0 12px 28px #0f172a24}.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;box-shadow:0 12px 30px #7f1d1d1f}.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}.pfx-form-info-banner{margin-bottom:14px;padding:12px 14px;border-radius:16px;border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 18%,var(--md-sys-color-outline-variant) 82%);background:color-mix(in srgb,var(--md-sys-color-primary-container) 24%,var(--md-sys-color-surface) 76%);color:var(--md-sys-color-on-surface);display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.pfx-form-info-banner .text{font-size:.92rem;line-height:1.5;font-weight:600}.pfx-form-info-banner .actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.praxis-dynamic-form{display:flex;flex-direction:column;transition:all .3s ease;position:relative;font-family:inherit;font-size:inherit;color:inherit;--pfx-editorial-form-surface: var( --pfx-form-section-surface, var(--md-sys-color-surface-container) );--pfx-editorial-form-surface-muted: var(--md-sys-color-surface-container-low);--pfx-editorial-form-border: var( --pfx-form-stroke, var(--md-sys-color-outline-variant) );--pfx-editorial-form-text: var(--md-sys-color-on-surface);--pfx-editorial-form-text-muted: var(--md-sys-color-on-surface-variant);--pfx-editorial-form-field-surface: color-mix( in srgb, var(--pfx-editorial-form-surface-muted) 76%, var(--pfx-editorial-form-surface) 24% );--pfx-editorial-form-field-outline: color-mix( in srgb, var(--pfx-editorial-form-border) 88%, transparent );--pfx-editorial-form-accent: var(--md-sys-color-primary);--pfx-editorial-form-accent-text: var(--md-sys-color-on-primary);--pfx-editorial-form-radius: var(--pfx-form-section-radius, 8px);--pfx-editorial-form-field-radius: var(--pfx-form-field-radius, 4px);--pfx-editorial-form-border-width: 1px;--pfx-editorial-form-field-border-width: 1px;--pfx-editorial-form-shadow: none;--pfx-form-shell-surface: color-mix( in srgb, var(--pfx-editorial-form-surface) 36%, transparent );--pfx-form-section-surface-flat: color-mix( in srgb, var(--pfx-editorial-form-surface) 78%, var(--pfx-editorial-form-surface-muted) 22% );--pfx-form-section-divider: color-mix( in srgb, var(--pfx-editorial-form-border) 68%, transparent );--pfx-form-label-strong: color-mix( in srgb, var(--pfx-editorial-form-text) 96%, white 4% );--pfx-form-label-muted: color-mix( in srgb, var(--pfx-editorial-form-text-muted) 92%, var(--pfx-editorial-form-text) 8% );--pfx-form-field-surface-rest: color-mix( in srgb, var(--pfx-editorial-form-field-surface) 82%, var(--pfx-editorial-form-surface) 18% );--pfx-form-field-surface-focus: color-mix( in srgb, var(--pfx-editorial-form-accent) 4%, var(--pfx-form-field-surface-rest) 96% );--pfx-form-field-min-height: 48px;--pfx-form-section-padding: clamp(1.1rem, 1.8vw, 1.5rem);--pfx-form-section-gap: 22px;--pfx-form-footer-surface: color-mix( in srgb, var(--pfx-editorial-form-surface) 70%, var(--pfx-editorial-form-surface-muted) 30% );--pfx-form-footer-border: color-mix( in srgb, var(--pfx-editorial-form-border) 76%, transparent )}.praxis-dynamic-form.editorial-visual-context{font-family:var(--editorial-body-font-family, inherit);font-size:var(--editorial-body-size, 1rem);color:var(--editorial-text-primary, var(--md-sys-color-on-surface));--pfx-editorial-form-surface: var( --editorial-surface-primary, var(--pfx-form-section-surface, var(--md-sys-color-surface-container)) );--pfx-editorial-form-surface-muted: var( --editorial-surface-secondary, var(--md-sys-color-surface-container-low) );--pfx-editorial-form-border: var( --editorial-border-color, var(--pfx-form-stroke, var(--md-sys-color-outline-variant)) );--pfx-editorial-form-text: var( --editorial-text-primary, var(--md-sys-color-on-surface) );--pfx-editorial-form-text-muted: var( --editorial-text-secondary, var(--md-sys-color-on-surface-variant) );--pfx-editorial-form-accent: var( --editorial-cta-primary, var(--editorial-accent, var(--md-sys-color-primary)) );--pfx-editorial-form-accent-text: var( --editorial-cta-primary-text, var(--editorial-accent-contrast, var(--md-sys-color-on-primary)) );--pfx-editorial-form-radius: var(--editorial-card-radius, 18px);--pfx-editorial-form-field-radius: var( --editorial-field-radius, var(--editorial-card-radius, 14px) );--pfx-editorial-form-border-width: var(--editorial-card-border-width, 1px);--pfx-editorial-form-field-border-width: var(--editorial-field-border-width, 1px);--pfx-editorial-form-shadow: var(--editorial-card-shadow, none);--md-sys-color-surface: var( --pfx-editorial-form-surface, var(--md-sys-color-surface) );--md-sys-color-surface-container: var( --pfx-editorial-form-surface, var(--md-sys-color-surface-container) );--md-sys-color-surface-container-low: var( --pfx-editorial-form-surface-muted, var(--md-sys-color-surface-container-low) );--md-sys-color-surface-variant: var( --pfx-editorial-form-field-surface, var(--md-sys-color-surface-variant) );--md-sys-color-outline: var( --pfx-editorial-form-field-outline, var(--md-sys-color-outline) );--md-sys-color-outline-variant: var( --pfx-editorial-form-border, var(--md-sys-color-outline-variant) );--md-sys-color-on-surface: var( --pfx-editorial-form-text, var(--md-sys-color-on-surface) );--md-sys-color-on-surface-variant: var( --pfx-editorial-form-text-muted, var(--md-sys-color-on-surface-variant) );--md-sys-color-primary: var( --pfx-editorial-form-accent, var(--md-sys-color-primary) );--md-sys-color-on-primary: var( --pfx-editorial-form-accent-text, var(--md-sys-color-on-primary) );--md-sys-color-on-surface-rgb: var( --editorial-text-primary-rgb, var(--md-sys-color-on-surface-rgb) );--mat-sys-on-surface: var( --pfx-editorial-form-text, var(--mat-sys-on-surface) );--mat-sys-on-surface-variant: var( --pfx-editorial-form-text-muted, var(--mat-sys-on-surface-variant) );--mat-sys-on-surface-rgb: var( --editorial-text-primary-rgb, var(--mat-sys-on-surface-rgb, var(--md-sys-color-on-surface-rgb)) );color:var(--pfx-editorial-form-text);color-scheme:light}.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-section-divider);border-radius:var(--pfx-editorial-form-radius);padding:var(--pfx-form-section-padding);background:var(--pfx-form-section-surface-flat);box-shadow:none;transition:all .2s ease;position:relative}.praxis-dynamic-form.editorial-visual-context .form-section{border:var(--pfx-editorial-form-border-width) solid var(--pfx-editorial-form-border)!important;background:var(--pfx-editorial-form-surface)!important;box-shadow:var(--editorial-card-shadow, none)}.praxis-dynamic-form.editorial-visual-context .form-section.section-appearance-step{background-color:var(--pfx-editorial-form-surface)!important;background-image:linear-gradient(180deg,color-mix(in srgb,var(--editorial-accent, var(--md-sys-color-primary)) 6%,transparent) 0%,transparent 132px)!important;background-repeat:no-repeat!important}.section-drop-wrapper>.form-section{margin-bottom:var(--pfx-section-gap, 20px)}.section-drop-wrapper:last-of-type>.form-section{margin-bottom:0}.praxis-dynamic-form>praxis-form-actions[data-actions-placement=afterSections] .form-actions{margin-top:var(--pfx-actions-gap-top, var(--pfx-section-gap, 20px))}.section-title{margin:0 0 var(--pfx-section-title-mb, 12px) 0;font-family:var(--editorial-title-font-family, var(--editorial-body-font-family, inherit));font-size:var(--editorial-step-title-size, 1.12rem);font-weight:700;color:var(--pfx-form-label-strong)}.section-heading{display:flex;align-items:flex-start;gap:12px;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--pfx-form-section-divider)}.section-heading.align-center{flex-direction:column;align-items:center;text-align:center}.section-heading.align-center .section-heading-text{display:grid;justify-items:center}.section-step-label{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;margin:0 0 8px;border-radius:999px;background:color-mix(in srgb,var(--pfx-editorial-form-accent) 10%,transparent);color:color-mix(in srgb,var(--pfx-editorial-form-accent) 84%,var(--pfx-form-label-strong) 16%);font-size:.72rem;font-weight:800;font-family:var(--editorial-title-font-family, var(--editorial-body-font-family, inherit));letter-spacing:.08em;text-transform:uppercase}.section-heading-text{flex:1 1 auto;min-width:0}.section-heading-actions{display:inline-flex;align-items:center;align-self:flex-start;flex-wrap:wrap;gap:4px;margin-left:auto}.section-heading-actions.align-center{align-self:center;margin-left:0}.section-heading-action-btn{color:var(--pfx-form-label-muted)}.section-heading-action-btn .mat-mdc-progress-spinner,.section-heading-action-btn mat-progress-spinner{--mdc-circular-progress-active-indicator-color: currentColor}.section-heading-action-btn.loading{opacity:.72;pointer-events:none}.section-heading-action-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.section-collapse-btn{margin-left:4px;color:var(--pfx-form-label-muted)}.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-title.title-large,.section-title.title-medium,.section-title.title-small,.section-title.headline-small{font-family:var(--editorial-title-font-family, var(--editorial-body-font-family, inherit));font-weight:var(--editorial-title-weight, 600)}.section-description{margin:0;font-family:var(--editorial-body-font-family, inherit);font-size:.93rem;color:var(--pfx-form-label-muted);line-height:1.6}.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)}.section-description.body-large,.section-description.body-medium,.section-description.body-small{font-family:var(--editorial-body-font-family, inherit);font-weight:var(--editorial-body-weight, 400)}.section-title.align-center,.section-description.align-center,.section-step-label.align-center{text-align:center}.form-section.section-appearance-plain{border-color:transparent;border-radius:0;padding:0;background:transparent}.form-section.section-appearance-plain .section-heading{margin-bottom:14px}.form-section.section-appearance-step{border-radius:var(--pfx-editorial-form-radius);padding:var(--pfx-form-section-padding);background:var(--pfx-form-section-surface-flat);border-color:var(--pfx-form-section-divider);box-shadow:none}.praxis-dynamic-form.editorial-visual-context .form-section.section-appearance-step{border-radius:var(--editorial-card-radius, 20px);box-shadow:none}.form-section.section-appearance-step .section-heading{margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--pfx-form-section-divider)}.form-section.section-appearance-step .section-title{font:var(--mdc-typography-title-large, 700 22px/28px system-ui);color:var(--pfx-form-label-strong);margin-bottom:8px}.form-section.section-appearance-step .section-description{color:var(--pfx-form-label-muted);max-width:60ch}.form-section.section-appearance-step .section-step-label{min-height:24px;padding:0 10px;margin-bottom:10px;box-shadow:none}.form-section.section-appearance-step .section-heading.align-center .section-description{max-width:52ch}.form-section.section-appearance-step .section-body{display:grid;gap:8px;padding-top:0}.form-section.section-appearance-step .form-row{margin-bottom:var(--pfx-field-gap, 1rem)}.form-section.section-appearance-step .form-column{gap:var(--pfx-field-gap, 12px)}.form-section .form-editorial-blocks{display:grid;gap:16px}.form-section .form-editorial-blocks[data-editorial-placement=beforeActions]{margin-top:24px;padding-top:18px;border-top:1px solid var(--pfx-form-section-divider)}.form-section.section-appearance-step .form-editorial-blocks[data-editorial-placement=beforeActions]{gap:18px}.form-section.section-appearance-step .form-editorial-blocks[data-editorial-placement=beforeActions]>*+*{margin-top:2px}.praxis-dynamic-form>praxis-form-actions[data-actions-placement=afterSections] .form-actions{margin-top:18px;padding-top:0}.praxis-dynamic-form>.form-editorial-blocks[data-editorial-placement=after]{margin-top:6px}:host-context(.mdc-theme-dark) .form-section.section-appearance-step,:host-context(.theme-dark) .form-section.section-appearance-step{border-color:color-mix(in srgb,var(--pfx-editorial-form-border) 82%,transparent);box-shadow:none}:host-context(.mdc-theme-dark) .form-section.section-appearance-step .section-title,:host-context(.theme-dark) .form-section.section-appearance-step .section-title{color:color-mix(in srgb,var(--pfx-editorial-form-text) 96%,white)}:host-context(.mdc-theme-dark) .form-section.section-appearance-step .section-description,:host-context(.theme-dark) .form-section.section-appearance-step .section-description{color:color-mix(in srgb,var(--pfx-editorial-form-text-muted) 86%,var(--pfx-editorial-form-text) 14%)}:host-context(.mdc-theme-dark) .section-step-label,:host-context(.theme-dark) .section-step-label{background:color-mix(in srgb,var(--md-sys-color-primary-container) 54%,transparent);color:color-mix(in srgb,var(--md-sys-color-primary) 88%,white)}:host-context(.mdc-theme-dark) .form-section .form-editorial-blocks[data-editorial-placement=beforeActions],:host-context(.theme-dark) .form-section .form-editorial-blocks[data-editorial-placement=beforeActions]{border-top-color:color-mix(in srgb,var(--md-sys-color-outline-variant) 90%,transparent)}.inline-edit-btn{margin-left:6px;vertical-align:middle;--mdc-icon-button-size: 28px;--mdc-icon-button-icon-size: 16px}.inline-edit-btn mat-icon{font-size:16px;width:16px;height:16px}.section-body.collapsed{border:1px dashed var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-low);border-radius:6px;padding:8px 10px}.section-collapsed-placeholder{display:flex;align-items:center;gap:8px;color:var(--md-sys-color-on-surface-variant);font-size:.95rem}.section-collapsed-placeholder mat-icon{font-size:20px;width:20px;height:20px}.form-row{display:flex;gap:1.1rem;margin-bottom:var(--pfx-field-gap, 1.1rem);transition:all .2s ease;border-radius:6px;position:relative}.praxis-dynamic-form.pfx-mounting .form-row{opacity:0;transform:translateY(var(--pdx-form-mount-offset, 6px));animation:pdxFormMount var(--pdx-form-mount-duration, .16s) ease-out both;animation-delay:calc(var(--pfx-mount-index, 0) * var(--pdx-form-mount-stagger, 20ms))}@media(prefers-reduced-motion:reduce){.praxis-dynamic-form.pfx-mounting .form-row{animation:none;opacity:1;transform:none}}@keyframes pdxFormMount{to{opacity:1;transform:translateY(0)}}.praxis-dynamic-form .mat-mdc-form-field{width:100%;margin-bottom:var(--pfx-field-gap, 10px);font-family:inherit;--mdc-filled-text-field-container-color: var(--pfx-form-field-surface-rest);--mdc-filled-text-field-focus-active-indicator-color: var(--pfx-editorial-form-accent);--mdc-filled-text-field-active-indicator-color: var(--pfx-editorial-form-field-outline);--mdc-filled-text-field-hover-active-indicator-color: var(--pfx-editorial-form-accent);--mdc-filled-text-field-focus-label-text-color: var(--pfx-editorial-form-accent);--mdc-filled-text-field-label-text-color: var(--pfx-form-label-muted);--mdc-filled-text-field-input-text-color: var(--pfx-editorial-form-text);--mdc-filled-text-field-caret-color: var(--pfx-editorial-form-accent);--mdc-filled-text-field-input-text-placeholder-color: color-mix( in srgb, var(--pfx-editorial-form-text-muted) 82%, transparent );--mdc-outlined-text-field-outline-color: var(--pfx-editorial-form-field-outline);--mdc-outlined-text-field-hover-outline-color: var(--pfx-editorial-form-accent);--mdc-outlined-text-field-focus-outline-color: var(--pfx-editorial-form-accent);--mdc-outlined-text-field-focus-label-text-color: var(--pfx-editorial-form-accent);--mdc-outlined-text-field-label-text-color: var(--pfx-form-label-muted);--mdc-outlined-text-field-input-text-color: var(--pfx-editorial-form-text);--mdc-filled-text-field-container-shape: var(--pfx-editorial-form-field-radius);--mdc-outlined-text-field-container-shape: var(--pfx-editorial-form-field-radius);--mdc-filled-text-field-active-indicator-height: var(--pfx-editorial-form-field-border-width);--mdc-filled-text-field-focus-active-indicator-height: var(--pfx-editorial-form-field-border-width);--mdc-outlined-text-field-outline-width: var(--pfx-editorial-form-field-border-width);--mdc-outlined-text-field-focus-outline-width: var(--pfx-editorial-form-field-border-width);--mat-select-enabled-trigger-text-color: var(--pfx-editorial-form-text);--mat-select-enabled-arrow-color: var(--pfx-form-label-muted);--mat-form-field-enabled-select-arrow-color: var(--pfx-form-label-muted);--mat-form-field-focus-select-arrow-color: var(--pfx-editorial-form-accent);--mat-form-field-hover-state-layer-opacity: 0;--mat-form-field-focus-state-layer-opacity: 0}.praxis-dynamic-form.editorial-visual-context .mat-mdc-form-field{font-family:var(--editorial-body-font-family, inherit)}.praxis-dynamic-form .mat-mdc-text-field-wrapper,.praxis-dynamic-form .mdc-text-field{background:var(--pfx-form-field-surface-rest);border-radius:var(--pfx-editorial-form-field-radius);min-height:var(--pfx-form-field-min-height);transition:background-color .16s ease,box-shadow .16s ease,border-color .16s ease}.praxis-dynamic-form.editorial-visual-context .mat-mdc-text-field-wrapper,.praxis-dynamic-form.editorial-visual-context .mdc-text-field,.praxis-dynamic-form.editorial-visual-context .mdc-text-field--filled,.praxis-dynamic-form.editorial-visual-context .mdc-text-field--outlined{background-color:var(--pfx-form-field-surface-rest)!important;background:var(--pfx-form-field-surface-rest)!important}.praxis-dynamic-form .mat-mdc-form-field .mdc-floating-label,.praxis-dynamic-form .mat-mdc-form-field .mat-mdc-form-field-hint,.praxis-dynamic-form .mat-mdc-form-field .mat-mdc-form-field-error,.praxis-dynamic-form .mat-mdc-form-field .mat-mdc-form-field-required-marker,.praxis-dynamic-form .mat-mdc-form-field .mat-mdc-select-arrow,.praxis-dynamic-form .mat-mdc-form-field .mat-mdc-select-placeholder,.praxis-dynamic-form .mat-mdc-form-field .mat-mdc-form-field-icon-suffix,.praxis-dynamic-form .mat-mdc-form-field .mat-mdc-form-field-icon-prefix{color:var(--pfx-form-label-muted)}.praxis-dynamic-form .mat-mdc-input-element,.praxis-dynamic-form .mat-mdc-select-value-text,.praxis-dynamic-form .mat-mdc-form-field-infix,.praxis-dynamic-form .mat-mdc-select-min-line{color:var(--pfx-editorial-form-text)}.praxis-dynamic-form .mat-mdc-form-field:hover .mat-mdc-text-field-wrapper,.praxis-dynamic-form .mat-mdc-form-field:hover .mdc-text-field,.praxis-dynamic-form .mat-mdc-form-field.mat-focused .mat-mdc-text-field-wrapper,.praxis-dynamic-form .mat-mdc-form-field.mat-focused .mdc-text-field{background:var(--pfx-form-field-surface-focus)}.praxis-dynamic-form.editorial-visual-context .mat-mdc-input-element,.praxis-dynamic-form.editorial-visual-context .mat-mdc-select-value-text,.praxis-dynamic-form.editorial-visual-context .mat-mdc-form-field-infix,.praxis-dynamic-form.editorial-visual-context .mat-mdc-select-min-line,.praxis-dynamic-form.editorial-visual-context .mdc-text-field__input{color:var(--pfx-editorial-form-text)!important;-webkit-text-fill-color:var(--pfx-editorial-form-text)!important}.praxis-dynamic-form.editorial-visual-context .mat-mdc-form-field .mdc-floating-label,.praxis-dynamic-form.editorial-visual-context .mat-mdc-form-field .mat-mdc-form-field-hint,.praxis-dynamic-form.editorial-visual-context .mat-mdc-form-field .mat-mdc-form-field-error,.praxis-dynamic-form.editorial-visual-context .mat-mdc-form-field .mat-mdc-form-field-required-marker,.praxis-dynamic-form.editorial-visual-context .mat-mdc-form-field .mat-mdc-select-arrow,.praxis-dynamic-form.editorial-visual-context .mat-mdc-form-field .mat-mdc-select-placeholder,.praxis-dynamic-form.editorial-visual-context .mat-mdc-form-field .mat-mdc-form-field-icon-suffix,.praxis-dynamic-form.editorial-visual-context .mat-mdc-form-field .mat-mdc-form-field-icon-prefix{color:var(--pfx-editorial-form-text-muted)!important}.praxis-dynamic-form.editorial-visual-context .mat-mdc-floating-label,.praxis-dynamic-form.editorial-visual-context .mdc-floating-label,.praxis-dynamic-form.editorial-visual-context .mdc-text-field__input::placeholder{color:color-mix(in srgb,var(--pfx-editorial-form-text) 68%,transparent)!important}.praxis-dynamic-form.editorial-visual-context .mat-mdc-input-element::placeholder,.praxis-dynamic-form.editorial-visual-context textarea.mat-mdc-input-element::placeholder{color:color-mix(in srgb,var(--pfx-editorial-form-text) 58%,transparent)!important}.praxis-dynamic-form .mat-mdc-radio-button,.praxis-dynamic-form .mat-mdc-checkbox,.praxis-dynamic-form .mat-mdc-slide-toggle{--mdc-radio-selected-icon-color: var(--pfx-editorial-form-accent);--mdc-radio-selected-hover-icon-color: var(--pfx-editorial-form-accent);--mdc-radio-selected-focus-icon-color: var(--pfx-editorial-form-accent);--mdc-checkbox-selected-checkmark-color: var(--pfx-editorial-form-accent-text);--mdc-checkbox-selected-focus-icon-color: var(--pfx-editorial-form-accent);--mdc-checkbox-selected-hover-icon-color: var(--pfx-editorial-form-accent);--mdc-checkbox-selected-icon-color: var(--pfx-editorial-form-accent);--mdc-switch-selected-focus-state-layer-color: var(--pfx-editorial-form-accent);--mdc-switch-selected-handle-color: var(--pfx-editorial-form-accent);--mdc-switch-selected-track-color: color-mix(in srgb, var(--pfx-editorial-form-accent) 45%, #fff)}.praxis-dynamic-form [data-field-type=input],.praxis-dynamic-form [data-field-type=textarea],.praxis-dynamic-form [data-field-type=email],.praxis-dynamic-form [data-field-type=password],.praxis-dynamic-form [data-field-type=url],.praxis-dynamic-form [data-field-type=search],.praxis-dynamic-form [data-field-type=phone],.praxis-dynamic-form [data-field-type=numericTextBox],.praxis-dynamic-form [data-field-type=currency],.praxis-dynamic-form [data-field-type=cpfCnpj],.praxis-dynamic-form [data-field-type=date],.praxis-dynamic-form [data-field-type=dateInput],.praxis-dynamic-form [data-field-type=dateRange],.praxis-dynamic-form [data-field-type=dateTimeLocal],.praxis-dynamic-form [data-field-type=time],.praxis-dynamic-form [data-field-type=timePicker],.praxis-dynamic-form [data-field-type=timeRange],.praxis-dynamic-form [data-field-type=month],.praxis-dynamic-form [data-field-type=week],.praxis-dynamic-form [data-field-type=yearInput],.praxis-dynamic-form [data-field-type=select],.praxis-dynamic-form [data-field-type=multi-select],.praxis-dynamic-form [data-field-type=searchable-select],.praxis-dynamic-form [data-field-type=async-select],.praxis-dynamic-form [data-field-type=autocomplete],.praxis-dynamic-form [data-field-type=tree-select],.praxis-dynamic-form [data-field-type=multi-select-tree],.praxis-dynamic-form [data-field-type=priceRange],.praxis-dynamic-form [data-field-type=file-upload]{display:block;width:100%;min-width:0}.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{display:grid;align-content:start;gap:var(--pfx-field-gap, 10px);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}.form-blocking-overlay{position:absolute;inset:0;background:transparent;color:var(--md-sys-color-on-surface);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}.section-heading{gap:10px;margin-bottom:16px;padding-bottom:14px}}.section-title{display:flex;align-items:center;gap:8px}.section-title .section-title-icon{font-size:1.25em;line-height:1}.section-title-avatar{--_pfx-form-section-avatar-size: var(--pfx-form-section-avatar-size-md, var(--pfx-form-section-avatar-size, 32px));display:inline-flex;align-items:center;justify-content:center;width:var(--_pfx-form-section-avatar-size);height:var(--_pfx-form-section-avatar-size);border-radius:999px;flex:0 0 var(--_pfx-form-section-avatar-size);overflow:hidden}.section-title-avatar.size-sm{--_pfx-form-section-avatar-size: var(--pfx-form-section-avatar-size-sm, 24px)}.section-title-avatar.size-md{--_pfx-form-section-avatar-size: var(--pfx-form-section-avatar-size-md, var(--pfx-form-section-avatar-size, 32px))}.section-title-avatar.size-lg{--_pfx-form-section-avatar-size: var(--pfx-form-section-avatar-size-lg, 40px)}.section-title-avatar-image{object-fit:cover;border:1px solid color-mix(in srgb,var(--pfx-form-section-divider) 72%,transparent);background:var(--pfx-form-section-surface-flat)}.section-title-avatar-text,.section-title-avatar-placeholder{background:color-mix(in srgb,var(--pfx-editorial-form-accent) 14%,var(--pfx-form-section-surface-flat));color:color-mix(in srgb,var(--pfx-editorial-form-accent) 82%,var(--pfx-form-label-strong) 18%);font-size:calc(var(--_pfx-form-section-avatar-size) * .41);font-weight:800;letter-spacing:.04em;text-transform:uppercase}.section-title-avatar-placeholder mat-icon{font-size:calc(var(--_pfx-form-section-avatar-size) * .5625);width:calc(var(--_pfx-form-section-avatar-size) * .5625);height:calc(var(--_pfx-form-section-avatar-size) * .5625);line-height:calc(var(--_pfx-form-section-avatar-size) * .5625)}.section-title-avatar-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: DynamicFieldLoaderDirective, selector: "[dynamicFieldLoader]", inputs: ["fields", "formGroup", "enableExternalControlBinding", "itemTemplate", "debugTrace", "debugTraceLabel", "readonlyMode", "disabledMode", "presentationMode", "visible", "canvasMode"], outputs: ["componentsCreated", "fieldCreated", "fieldDestroyed", "renderError", "canvasMouseEnter", "canvasMouseLeave", "canvasClick"] }, { kind: "directive", type: DynamicWidgetLoaderDirective, selector: "[dynamicWidgetLoader]", inputs: ["dynamicWidgetLoader", "context", "strictValidation", "autoWireOutputs"], outputs: ["widgetEvent"], exportAs: ["dynamicWidgetLoader"] }, { 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: i4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i15.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i17.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", "editorialVisualContext", "isSubmitting", "formIsValid", "submitError", "formId", "actionOverrides"], outputs: ["action"] }, { kind: "component", type: EmptyStateCardComponent, selector: "praxis-empty-state-card", inputs: ["icon", "title", "description", "primaryAction", "secondaryActions", "inline", "tone"] }, { kind: "component", type: PraxisAiAssistantComponent, selector: "praxis-ai-assistant", inputs: ["adapter", "riskPolicy", "allowManualPatchEdit"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisDynamicForm, decorators: [{
             type: Component,
@@ -11075,7 +11264,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         PraxisFormActionsComponent,
                         EmptyStateCardComponent,
                         PraxisAiAssistantComponent,
-                    ], 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 when customization is enabled) -->\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 && enableCustomization) {\n<div class=\"form-config-controls\">\n  <praxis-ai-assistant [adapter]=\"aiAdapter\"></praxis-ai-assistant>\n  <button type=\"button\" mat-icon-button (click)=\"openConfigEditor()\" [disabled]=\"isLoading\" class=\"config-button\"\n    [matBadge]=\"schemaOutdated ? '!' : ''\" [matBadgeHidden]=\"!schemaOutdated\" matBadgeColor=\"warn\" matBadgeSize=\"small\"\n    matBadgePosition=\"above after\"\n    [matTooltip]=\"schemaOutdated ? 'Schema do servidor mudou \u2014 Reconciliar' : 'Configurar formul\u00E1rio'\">\n    <mat-icon [praxisIcon]=\"'settings'\"></mat-icon>\n  </button>\n  <button type=\"button\" mat-icon-button (click)=\"disconnect()\" matTooltip=\"Desconectar da fonte de dados\"\n    [disabled]=\"isLoading\">\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 icon=\"link\" [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) }\"></praxis-empty-state-card>\n}\n<form #formHost (ngSubmit)=\"onSubmit()\" [attr.aria-busy]=\"submitting ? 'true' : null\"\n  [attr.aria-label]=\"'Formul\u00E1rio ' + (config.metadata?.version || '')\" [class.canvas-mode-enabled]=\"enableCustomization\"\n  [class.presentation-mode]=\"effectivePresentation\" [class.readonly-mode]=\"effectiveReadonly\"\n  [class.editorial-visual-context]=\"hasEditorialVisualContext()\"\n  [class.pfx-mounting]=\"isMounting\" [formGroup]=\"form\"\n  [ngClass]=\"{\n    'pres-compact': presentationVars.compact,\n    'pres-label-left': presentationVars.labelPosition === 'left',\n    'pres-label-above': presentationVars.labelPosition === 'above'\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  [style.--pdx-form-mount-duration]=\"getMountDurationVar()\"\n  [style.--pdx-form-mount-offset]=\"getMountOffsetVar()\"\n  [style.--pdx-form-mount-stagger]=\"getMountStaggerVar()\"\n  class=\"praxis-dynamic-form\">\n  <praxis-canvas-toolbar (editMetadata)=\"openSelectedElementEditor()\" (selectPath)=\"onSelectPath($event)\"\n    (moveUp)=\"onToolbarMove('up')\" (moveDown)=\"onToolbarMove('down')\" (toggleReadonly)=\"onToolbarToggleReadonly()\"\n    (toggleRequired)=\"onToolbarToggleRequired()\" (toggleHidden)=\"onToolbarToggleHidden()\"\n    (toggleDisabled)=\"onToolbarToggleDisabled()\" (requestClose)=\"onToolbarRequestClose()\"\n    *ngIf=\"enableCustomization && selectedElement\" [selectedElement]=\"selectedElement\"\n    [style.transform]=\"toolbarTransform\"></praxis-canvas-toolbar>\n\n  @if (formBlocksBefore.length) {\n    <section class=\"form-editorial-blocks form-editorial-blocks-before\" data-editorial-placement=\"before\">\n      @for (block of formBlocksBefore; track (block.id ?? $index)) {\n        <ng-container\n          [dynamicWidgetLoader]=\"block\"\n          [context]=\"getEditorialWidgetContext()\"\n          [strictValidation]=\"true\"\n          [autoWireOutputs]=\"true\"\n          (widgetEvent)=\"onEditorialWidgetEvent('before', $event)\">\n        </ng-container>\n      }\n    </section>\n  }\n\n  @if (actionPlacement === 'top' && !(effectivePresentation || effectiveReadonly)) {\n  <praxis-form-actions data-actions-placement=\"top\" [actions]=\"config.actions\" [isSubmitting]=\"submitting\"\n    [formIsValid]=\"form.valid\" [submitError]=\"submitError\" [formId]=\"formId\" [actionOverrides]=\"actionRuleProps\"\n    [editorialVisualContext]=\"hasEditorialVisualContext()\"\n    (action)=\"onFormAction($event)\"></praxis-form-actions>\n  }\n\n  @for (section of config.sections; track (section.id ?? $index); let sectionIndex = $index;\n  let last = $last) {\n  <div class=\"section-drop-wrapper\" [attr.data-section-id]=\"section.id\">\n    @if (isSectionVisible(section)) {\n      <div #sectionEl class=\"form-section canvas-element\" data-canvas-type=\"section\" [attr.data-section-id]=\"section.id\"\n        [attr.data-section-index]=\"sectionIndex\" (mouseenter)=\"onElementMouseEnter($event, 'section', section, sectionEl)\"\n        (mouseleave)=\"onElementMouseLeave($event)\" (click)=\"onElementClick($event, 'section', section, sectionEl)\"\n        [class.selected]=\"selectedElement?.domElement === sectionEl\"\n        [class.hovered]=\"hoveredElement?.domElement === sectionEl && selectedElement?.domElement !== sectionEl\"\n        [attr.data-section-appearance]=\"getSectionAppearance(section) || null\"\n        [style.marginBottom.px]=\"!last ? getSectionGapBottom(section) : null\" [ngClass]=\"getSectionClasses(section)\"\n        [ngStyle]=\"getSectionStyles(section)\">\n      <div\n        class=\"section-heading\"\n        [class.align-center]=\"getSectionHeaderAlign(section) === 'center'\"\n        [class.step-appearance]=\"getSectionAppearance(section) === 'step'\"\n      >\n        <div class=\"section-heading-text\" [matTooltip]=\"getSectionHeaderTooltip(section) || null\"\n          [matTooltipDisabled]=\"!getSectionHeaderTooltip(section)\">\n          @if (getSectionStepLabel(section)) {\n          <div class=\"section-step-label\" [class.align-center]=\"getSectionHeaderAlign(section) === 'center'\">\n            {{ getSectionStepLabel(section) }}\n          </div>\n          }\n          @if (getSectionTitle(section)) {\n          <h3 class=\"section-title\" [class.title-large]=\"getSectionTitleStyle(section) === 'titleLarge'\"\n            [class.title-medium]=\"getSectionTitleStyle(section) === 'titleMedium'\"\n            [class.title-small]=\"getSectionTitleStyle(section) === 'titleSmall'\"\n            [class.headline-small]=\"getSectionTitleStyle(section) === 'headlineSmall'\"\n            [style.marginBottom.px]=\"getSectionTitleGapBottom(section) ?? 20\" [style.color]=\"getSectionTitleColor(section) || null\"\n            [class.align-center]=\"getSectionHeaderAlign(section) === 'center'\"\n            [attr.id]=\"sectionPanelId(section, sectionIndex) + '-title'\">\n            @let sectionHeaderVisual = getSectionHeaderVisual(section);\n            @let sectionHeaderAvatarSize = getSectionHeaderAvatarSize(section);\n            @if (sectionHeaderVisual.kind === 'icon') {\n            <mat-icon class=\"section-title-icon\" aria-hidden=\"true\" [praxisIcon]=\"sectionHeaderVisual.icon\"></mat-icon>\n            }\n            @if (sectionHeaderVisual.kind === 'image') {\n            <img class=\"section-title-avatar section-title-avatar-image\" [class.size-sm]=\"sectionHeaderAvatarSize === 'sm'\"\n              [class.size-md]=\"sectionHeaderAvatarSize === 'md'\" [class.size-lg]=\"sectionHeaderAvatarSize === 'lg'\"\n              [src]=\"sectionHeaderVisual.src\" [alt]=\"sectionHeaderVisual.alt\" />\n            }\n            @if (sectionHeaderVisual.kind === 'initials') {\n            <span class=\"section-title-avatar section-title-avatar-text\" [class.size-sm]=\"sectionHeaderAvatarSize === 'sm'\"\n              [class.size-md]=\"sectionHeaderAvatarSize === 'md'\" [class.size-lg]=\"sectionHeaderAvatarSize === 'lg'\" aria-hidden=\"true\">\n              {{ sectionHeaderVisual.text }}\n            </span>\n            @if (sectionHeaderVisual.ariaLabel) {\n            <span class=\"section-title-avatar-sr-only\">{{ sectionHeaderVisual.ariaLabel }}</span>\n            }\n            }\n            @if (sectionHeaderVisual.kind === 'placeholder') {\n            <span class=\"section-title-avatar section-title-avatar-placeholder\" [class.size-sm]=\"sectionHeaderAvatarSize === 'sm'\"\n              [class.size-md]=\"sectionHeaderAvatarSize === 'md'\" [class.size-lg]=\"sectionHeaderAvatarSize === 'lg'\" aria-hidden=\"true\">\n              @if (sectionHeaderVisual.icon) {\n              <mat-icon aria-hidden=\"true\" [praxisIcon]=\"sectionHeaderVisual.icon\"></mat-icon>\n              }\n              @if (sectionHeaderVisual.text) {\n              <span>{{ sectionHeaderVisual.text }}</span>\n              }\n            </span>\n            @if (sectionHeaderVisual.ariaLabel) {\n            <span class=\"section-title-avatar-sr-only\">{{ sectionHeaderVisual.ariaLabel }}</span>\n            }\n            }\n            {{ getSectionTitle(section) }}\n            @if (enableCustomization) {\n            <button type=\"button\" class=\"inline-edit-btn\" mat-icon-button (click)=\"openSectionEditor(section, 'title')\"\n              aria-label=\"Editar t\u00EDtulo da se\u00E7\u00E3o\" matTooltip=\"Editar t\u00EDtulo\">\n              <mat-icon>edit</mat-icon>\n            </button>\n            }\n          </h3>\n          }\n          @if (getSectionDescription(section)) {\n          <p class=\"section-description\" [class.body-large]=\"getSectionDescriptionStyle(section) === 'bodyLarge'\"\n            [class.body-medium]=\"getSectionDescriptionStyle(section) === 'bodyMedium'\"\n            [class.body-small]=\"getSectionDescriptionStyle(section) === 'bodySmall'\"\n            [style.marginBottom.px]=\"getSectionDescriptionGapBottom(section) ?? 8\" [style.color]=\"getSectionDescriptionColor(section) || null\"\n            [class.align-center]=\"getSectionHeaderAlign(section) === 'center'\">\n            {{ getSectionDescription(section) }}\n            @if (enableCustomization) {\n            <button type=\"button\" class=\"inline-edit-btn\" mat-icon-button\n              (click)=\"openSectionEditor(section, 'description')\" aria-label=\"Editar descri\u00E7\u00E3o da se\u00E7\u00E3o\"\n              matTooltip=\"Editar descri\u00E7\u00E3o\">\n              <mat-icon>edit</mat-icon>\n            </button>\n            }\n          </p>\n          }\n        </div>\n        @if (isSectionCollapsible(section)) {\n        <button type=\"button\" class=\"section-collapse-btn\" mat-icon-button\n          (click)=\"toggleSectionCollapse($event, section)\" [attr.aria-expanded]=\"!isSectionCollapsed(section)\"\n          [attr.aria-controls]=\"sectionPanelId(section, sectionIndex)\"\n          [attr.aria-label]=\"isSectionCollapsed(section) ? 'Expandir se\u00E7\u00E3o' : 'Recolher se\u00E7\u00E3o'\">\n          <mat-icon [praxisIcon]=\"isSectionCollapsed(section) ? 'expand_more' : 'expand_less'\"></mat-icon>\n        </button>\n        }\n      </div>\n\n      <div class=\"section-body\" [class.collapsed]=\"isSectionCollapsed(section)\"\n        [attr.id]=\"sectionPanelId(section, sectionIndex)\"\n        [attr.aria-labelledby]=\"getSectionTitle(section) ? sectionPanelId(section, sectionIndex) + '-title' : null\">\n        @if (!isSectionCollapsed(section)) {\n        @for (row of section.rows; track (row.id ?? $index); let rowIndex = $index) {\n        @if (isRowVisible(row)) {\n        <div class=\"row-drop-wrapper\" [attr.data-section-id]=\"section.id\">\n          <div #rowEl class=\"form-row grid-12 canvas-element\" data-canvas-type=\"row\" [attr.data-row-index]=\"rowIndex\"\n            [attr.data-section-id]=\"section.id\" [attr.data-row-id]=\"row.id\" [style.--pfx-grid-gap.px]=\"getRowGap(row)\"\n            [style.--pfx-field-gap.px]=\"getRowRowGap(row)\"\n            [style.--pfx-mount-index]=\"rowIndex\"\n            [style.marginBottom.px]=\"rowIndex < section.rows.length - 1 ? (getRowRowGap(row) ?? null) : null\"\n            [ngClass]=\"getRowClasses(row)\" [ngStyle]=\"getRowStyles(row)\"\n            (mouseenter)=\"onElementMouseEnter($event, 'row', row, rowEl)\" (mouseleave)=\"onElementMouseLeave($event)\"\n            (click)=\"onElementClick($event, 'row', row, rowEl)\" [class.selected]=\"selectedElement?.domElement === rowEl\"\n            [class.hovered]=\"hoveredElement?.domElement === rowEl && selectedElement?.domElement !== rowEl\">\n            @for (column of row.columns; track (column.id ?? $index); let colIndex = $index) {\n            @if (isColumnVisible(column)) {\n            <div class=\"column-drop-wrapper\" [attr.data-section-id]=\"section.id\" [attr.data-row-id]=\"row.id\">\n              <div #colEl class=\"form-column canvas-element\" [ngClass]=\"getColumnClasses(column)\"\n                [style.padding.px]=\"getColumnPadding(column)\" [style.--pfx-field-gap.px]=\"getRowRowGap(row)\"\n                [ngStyle]=\"getColumnStyles(column)\" [attr.data-testid]=\"column.testId || null\"\n                [attr.data-row-gap]=\"getRowRowGap(row)\" data-canvas-type=\"column\" [attr.data-column-index]=\"colIndex\"\n                [attr.data-row-index]=\"rowIndex\" [attr.data-section-id]=\"section.id\" [attr.data-row-id]=\"row.id\"\n                [attr.data-column-id]=\"column.id\" (mouseenter)=\"onElementMouseEnter($event, 'column', column, colEl)\"\n                (mouseleave)=\"onElementMouseLeave($event)\" (click)=\"onElementClick($event, 'column', column, colEl)\"\n                [class.selected]=\"selectedElement?.domElement === colEl\"\n                [class.hovered]=\"hoveredElement?.domElement === colEl && selectedElement?.domElement !== colEl\">\n                <ng-container dynamicFieldLoader [fields]=\"getColumnFields(column)\" [formGroup]=\"form\"\n                  [readonlyMode]=\"readonlyModeGlobal === null ? null : readonlyModeGlobal\"\n                  [disabledMode]=\"disabledModeGlobal === null ? null : disabledModeGlobal\"\n                  [presentationMode]=\"presentationForLoader\" [visible]=\"visibleGlobal === null ? null : visibleGlobal\"\n                  [canvasMode]=\"enableCustomization\" (canvasMouseEnter)=\"onFieldMouseEnter($event)\"\n                  (canvasMouseLeave)=\"onFieldMouseLeave($event)\" (canvasClick)=\"onFieldClick($event)\"\n                  (renderError)=\"onFieldRenderError($event)\">\n                </ng-container>\n              </div>\n            </div>\n            } }\n          </div>\n        </div>\n        }\n        }\n        } @else {\n        <div class=\"section-collapsed-placeholder\">\n          <mat-icon aria-hidden=\"true\" [praxisIcon]=\"'unfold_more'\"></mat-icon>\n          <span>{{ getSectionCollapsedSummary(section) }}</span>\n        </div>\n        }\n        @if (last && beforeActionsPlacement === 'insideLastSection' && formBlocksBeforeActions.length) {\n        <section class=\"form-editorial-blocks form-editorial-blocks-before-actions\" data-editorial-placement=\"beforeActions\">\n          @for (block of formBlocksBeforeActions; track (block.id ?? $index)) {\n            <ng-container\n              [dynamicWidgetLoader]=\"block\"\n              [context]=\"getEditorialWidgetContext()\"\n              [strictValidation]=\"true\"\n              [autoWireOutputs]=\"true\"\n              (widgetEvent)=\"onEditorialWidgetEvent('beforeActions', $event)\">\n            </ng-container>\n          }\n        </section>\n        }\n        @if (actionPlacement === 'insideLastSection' && last && !(effectivePresentation\n        || effectiveReadonly)) {\n        <praxis-form-actions data-actions-placement=\"insideLastSection\" [actions]=\"config.actions\"\n          [isSubmitting]=\"submitting\" [formIsValid]=\"form.valid\" [submitError]=\"submitError\" [formId]=\"formId\"\n          [actionOverrides]=\"actionRuleProps\" [editorialVisualContext]=\"hasEditorialVisualContext()\"\n          (action)=\"onFormAction($event)\"></praxis-form-actions>\n        }\n      </div>\n      <!-- Overlay de bloqueio durante submiss\u00E3o -->\n      @if (submitting) {\n      <div class=\"form-blocking-overlay\" aria-live=\"polite\">\n        <mat-progress-spinner diameter=\"40\" color=\"primary\"></mat-progress-spinner>\n        <p>{{ config.messages?.loading?.submit || 'Salvando...' }}</p>\n      </div>\n      }\n    </div>\n\n    @if (enableCustomization && selectedElement?.domElement === sectionEl) {\n      <div class=\"add-section-container\">\n        <div class=\"add-section-line\"></div>\n        <button mat-fab color=\"primary\" aria-label=\"Adicionar nova se\u00E7\u00E3o\" (click)=\"addNewSectionAfter(sectionIndex)\"\n          matTooltip=\"Adicionar nova se\u00E7\u00E3o aqui\">\n          <mat-icon [praxisIcon]=\"'add'\"></mat-icon>\n        </button>\n        <div class=\"add-section-line\"></div>\n      </div>\n    }\n    }\n  </div>\n  }\n\n  @if (beforeActionsPlacement !== 'insideLastSection' && formBlocksBeforeActions.length) {\n    <section class=\"form-editorial-blocks form-editorial-blocks-before-actions\" data-editorial-placement=\"beforeActions\">\n      @for (block of formBlocksBeforeActions; track (block.id ?? $index)) {\n        <ng-container\n          [dynamicWidgetLoader]=\"block\"\n          [context]=\"getEditorialWidgetContext()\"\n          [strictValidation]=\"true\"\n          [autoWireOutputs]=\"true\"\n          (widgetEvent)=\"onEditorialWidgetEvent('beforeActions', $event)\">\n        </ng-container>\n      }\n    </section>\n  }\n\n  @if (actionPlacement === 'afterSections' && !(effectivePresentation || effectiveReadonly)) {\n    <praxis-form-actions data-actions-placement=\"afterSections\" [actions]=\"config.actions\" [isSubmitting]=\"submitting\"\n      [formIsValid]=\"form.valid\" [submitError]=\"submitError\" [formId]=\"formId\"\n      [actionOverrides]=\"actionRuleProps\" [editorialVisualContext]=\"hasEditorialVisualContext()\"\n      (action)=\"onFormAction($event)\"></praxis-form-actions>\n  }\n\n  @if (formBlocksAfter.length) {\n    <section class=\"form-editorial-blocks form-editorial-blocks-after\" data-editorial-placement=\"after\">\n      @for (block of formBlocksAfter; track (block.id ?? $index)) {\n        <ng-container\n          [dynamicWidgetLoader]=\"block\"\n          [context]=\"getEditorialWidgetContext()\"\n          [strictValidation]=\"true\"\n          [autoWireOutputs]=\"true\"\n          (widgetEvent)=\"onEditorialWidgetEvent('after', $event)\">\n        </ng-container>\n      }\n    </section>\n  }\n</form>\n@if (!enableCustomization && mode === 'view') {\n<div class=\"ai-floating-assistant\">\n  <praxis-ai-assistant [adapter]=\"aiAdapter\"></praxis-ai-assistant>\n</div>\n}\n}\n", styles: ["@charset \"UTF-8\";.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}}.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(--md-sys-color-primary)}.canvas-mode-enabled .canvas-element[data-canvas-type=row]{--outline-color: 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(--md-sys-color-tertiary)}.canvas-mode-enabled .canvas-element[data-canvas-type=actions]{--outline-color: var(--md-sys-color-primary)}.canvas-mode-enabled .canvas-element.hovered:not(.selected){outline-color:var(--outline-color, var(--md-sys-color-primary));outline-style:dashed}.canvas-mode-enabled .canvas-element.selected{outline-color:var(--outline-color, var(--md-sys-color-primary));outline-style:solid;box-shadow:0 0 0 2px var(--outline-color, var(--md-sys-color-primary))}.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)}:host{display:block;position:relative}.form-config-controls{position:sticky;top:10px;margin-left:auto;margin-bottom:10px;display:flex;align-items:center;gap:.35rem;z-index:60;background:color-mix(in srgb,var(--md-sys-color-surface) 92%,transparent);padding:6px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 82%,transparent);border-radius:999px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 10px 22px #0f172a14;min-width:0;justify-content:flex-end;pointer-events:none;opacity:.88;transition:opacity .16s ease,box-shadow .16s ease,border-color .16s ease,transform .16s ease}.form-config-controls>*{pointer-events:auto}.praxis-dynamic-form:hover .form-config-controls,.praxis-dynamic-form:focus-within .form-config-controls{opacity:1;border-color:color-mix(in srgb,var(--md-sys-color-primary) 26%,var(--md-sys-color-outline-variant) 74%);box-shadow:0 14px 28px #0f172a1f;transform:translateY(-1px)}.form-config-controls .mat-icon-button{--mdc-icon-button-state-layer-size: 34px;width:34px;height:34px;color:var(--md-sys-color-on-surface-variant);background:color-mix(in srgb,var(--md-sys-color-surface-container-low) 82%,transparent);border:1px solid transparent}.form-config-controls .mat-icon-button:hover{color:var(--md-sys-color-primary);background:var(--md-sys-color-primary-container);border-color:color-mix(in srgb,var(--md-sys-color-primary) 20%,transparent)}.ai-floating-assistant{position:sticky;right:0;bottom:12px;margin-top:14px;margin-left:auto;width:fit-content;z-index:70;pointer-events:none}.ai-floating-assistant praxis-ai-assistant{pointer-events:auto;display:inline-flex}.ai-floating-assistant .ai-trigger-btn{box-shadow:0 12px 28px #0f172a24}.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;box-shadow:0 12px 30px #7f1d1d1f}.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}.pfx-form-info-banner{margin-bottom:14px;padding:12px 14px;border-radius:16px;border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 18%,var(--md-sys-color-outline-variant) 82%);background:color-mix(in srgb,var(--md-sys-color-primary-container) 24%,var(--md-sys-color-surface) 76%);color:var(--md-sys-color-on-surface);display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.pfx-form-info-banner .text{font-size:.92rem;line-height:1.5;font-weight:600}.pfx-form-info-banner .actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.praxis-dynamic-form{display:flex;flex-direction:column;transition:all .3s ease;position:relative;font-family:inherit;font-size:inherit;color:inherit;--pfx-editorial-form-surface: var( --pfx-form-section-surface, var(--md-sys-color-surface-container) );--pfx-editorial-form-surface-muted: var(--md-sys-color-surface-container-low);--pfx-editorial-form-border: var( --pfx-form-stroke, var(--md-sys-color-outline-variant) );--pfx-editorial-form-text: var(--md-sys-color-on-surface);--pfx-editorial-form-text-muted: var(--md-sys-color-on-surface-variant);--pfx-editorial-form-field-surface: color-mix( in srgb, var(--pfx-editorial-form-surface-muted) 76%, var(--pfx-editorial-form-surface) 24% );--pfx-editorial-form-field-outline: color-mix( in srgb, var(--pfx-editorial-form-border) 88%, transparent );--pfx-editorial-form-accent: var(--md-sys-color-primary);--pfx-editorial-form-accent-text: var(--md-sys-color-on-primary);--pfx-editorial-form-radius: var(--pfx-form-section-radius, 8px);--pfx-editorial-form-field-radius: var(--pfx-form-field-radius, 4px);--pfx-editorial-form-border-width: 1px;--pfx-editorial-form-field-border-width: 1px;--pfx-editorial-form-shadow: none;--pfx-form-shell-surface: color-mix( in srgb, var(--pfx-editorial-form-surface) 36%, transparent );--pfx-form-section-surface-flat: color-mix( in srgb, var(--pfx-editorial-form-surface) 78%, var(--pfx-editorial-form-surface-muted) 22% );--pfx-form-section-divider: color-mix( in srgb, var(--pfx-editorial-form-border) 68%, transparent );--pfx-form-label-strong: color-mix( in srgb, var(--pfx-editorial-form-text) 96%, white 4% );--pfx-form-label-muted: color-mix( in srgb, var(--pfx-editorial-form-text-muted) 92%, var(--pfx-editorial-form-text) 8% );--pfx-form-field-surface-rest: color-mix( in srgb, var(--pfx-editorial-form-field-surface) 82%, var(--pfx-editorial-form-surface) 18% );--pfx-form-field-surface-focus: color-mix( in srgb, var(--pfx-editorial-form-accent) 4%, var(--pfx-form-field-surface-rest) 96% );--pfx-form-field-min-height: 48px;--pfx-form-section-padding: clamp(1.1rem, 1.8vw, 1.5rem);--pfx-form-section-gap: 22px;--pfx-form-footer-surface: color-mix( in srgb, var(--pfx-editorial-form-surface) 70%, var(--pfx-editorial-form-surface-muted) 30% );--pfx-form-footer-border: color-mix( in srgb, var(--pfx-editorial-form-border) 76%, transparent )}.praxis-dynamic-form.editorial-visual-context{font-family:var(--editorial-body-font-family, inherit);font-size:var(--editorial-body-size, 1rem);color:var(--editorial-text-primary, var(--md-sys-color-on-surface));--pfx-editorial-form-surface: var( --editorial-surface-primary, var(--pfx-form-section-surface, var(--md-sys-color-surface-container)) );--pfx-editorial-form-surface-muted: var( --editorial-surface-secondary, var(--md-sys-color-surface-container-low) );--pfx-editorial-form-border: var( --editorial-border-color, var(--pfx-form-stroke, var(--md-sys-color-outline-variant)) );--pfx-editorial-form-text: var( --editorial-text-primary, var(--md-sys-color-on-surface) );--pfx-editorial-form-text-muted: var( --editorial-text-secondary, var(--md-sys-color-on-surface-variant) );--pfx-editorial-form-accent: var( --editorial-cta-primary, var(--editorial-accent, var(--md-sys-color-primary)) );--pfx-editorial-form-accent-text: var( --editorial-cta-primary-text, var(--editorial-accent-contrast, var(--md-sys-color-on-primary)) );--pfx-editorial-form-radius: var(--editorial-card-radius, 18px);--pfx-editorial-form-field-radius: var( --editorial-field-radius, var(--editorial-card-radius, 14px) );--pfx-editorial-form-border-width: var(--editorial-card-border-width, 1px);--pfx-editorial-form-field-border-width: var(--editorial-field-border-width, 1px);--pfx-editorial-form-shadow: var(--editorial-card-shadow, none);--md-sys-color-surface: var( --pfx-editorial-form-surface, var(--md-sys-color-surface) );--md-sys-color-surface-container: var( --pfx-editorial-form-surface, var(--md-sys-color-surface-container) );--md-sys-color-surface-container-low: var( --pfx-editorial-form-surface-muted, var(--md-sys-color-surface-container-low) );--md-sys-color-surface-variant: var( --pfx-editorial-form-field-surface, var(--md-sys-color-surface-variant) );--md-sys-color-outline: var( --pfx-editorial-form-field-outline, var(--md-sys-color-outline) );--md-sys-color-outline-variant: var( --pfx-editorial-form-border, var(--md-sys-color-outline-variant) );--md-sys-color-on-surface: var( --pfx-editorial-form-text, var(--md-sys-color-on-surface) );--md-sys-color-on-surface-variant: var( --pfx-editorial-form-text-muted, var(--md-sys-color-on-surface-variant) );--md-sys-color-primary: var( --pfx-editorial-form-accent, var(--md-sys-color-primary) );--md-sys-color-on-primary: var( --pfx-editorial-form-accent-text, var(--md-sys-color-on-primary) );--md-sys-color-on-surface-rgb: var( --editorial-text-primary-rgb, var(--md-sys-color-on-surface-rgb) );--mat-sys-on-surface: var( --pfx-editorial-form-text, var(--mat-sys-on-surface) );--mat-sys-on-surface-variant: var( --pfx-editorial-form-text-muted, var(--mat-sys-on-surface-variant) );--mat-sys-on-surface-rgb: var( --editorial-text-primary-rgb, var(--mat-sys-on-surface-rgb, var(--md-sys-color-on-surface-rgb)) );color:var(--pfx-editorial-form-text);color-scheme:light}.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-section-divider);border-radius:var(--pfx-editorial-form-radius);padding:var(--pfx-form-section-padding);background:var(--pfx-form-section-surface-flat);box-shadow:none;transition:all .2s ease;position:relative}.praxis-dynamic-form.editorial-visual-context .form-section{border:var(--pfx-editorial-form-border-width) solid var(--pfx-editorial-form-border)!important;background:var(--pfx-editorial-form-surface)!important;box-shadow:var(--editorial-card-shadow, none)}.praxis-dynamic-form.editorial-visual-context .form-section.section-appearance-step{background-color:var(--pfx-editorial-form-surface)!important;background-image:linear-gradient(180deg,color-mix(in srgb,var(--editorial-accent, var(--md-sys-color-primary)) 6%,transparent) 0%,transparent 132px)!important;background-repeat:no-repeat!important}.section-drop-wrapper>.form-section{margin-bottom:var(--pfx-section-gap, 20px)}.section-drop-wrapper:last-of-type>.form-section{margin-bottom:0}.praxis-dynamic-form>praxis-form-actions[data-actions-placement=afterSections] .form-actions{margin-top:var(--pfx-actions-gap-top, var(--pfx-section-gap, 20px))}.section-title{margin:0 0 var(--pfx-section-title-mb, 12px) 0;font-family:var(--editorial-title-font-family, var(--editorial-body-font-family, inherit));font-size:var(--editorial-step-title-size, 1.12rem);font-weight:700;color:var(--pfx-form-label-strong)}.section-heading{display:flex;align-items:flex-start;gap:12px;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--pfx-form-section-divider)}.section-heading.align-center{flex-direction:column;align-items:center;text-align:center}.section-heading.align-center .section-heading-text{display:grid;justify-items:center}.section-step-label{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;margin:0 0 8px;border-radius:999px;background:color-mix(in srgb,var(--pfx-editorial-form-accent) 10%,transparent);color:color-mix(in srgb,var(--pfx-editorial-form-accent) 84%,var(--pfx-form-label-strong) 16%);font-size:.72rem;font-weight:800;font-family:var(--editorial-title-font-family, var(--editorial-body-font-family, inherit));letter-spacing:.08em;text-transform:uppercase}.section-heading-text{flex:1 1 auto;min-width:0}.section-collapse-btn{margin-left:4px;color:var(--pfx-form-label-muted)}.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-title.title-large,.section-title.title-medium,.section-title.title-small,.section-title.headline-small{font-family:var(--editorial-title-font-family, var(--editorial-body-font-family, inherit));font-weight:var(--editorial-title-weight, 600)}.section-description{margin:0;font-family:var(--editorial-body-font-family, inherit);font-size:.93rem;color:var(--pfx-form-label-muted);line-height:1.6}.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)}.section-description.body-large,.section-description.body-medium,.section-description.body-small{font-family:var(--editorial-body-font-family, inherit);font-weight:var(--editorial-body-weight, 400)}.section-title.align-center,.section-description.align-center,.section-step-label.align-center{text-align:center}.form-section.section-appearance-plain{border-color:transparent;border-radius:0;padding:0;background:transparent}.form-section.section-appearance-plain .section-heading{margin-bottom:14px}.form-section.section-appearance-step{border-radius:var(--pfx-editorial-form-radius);padding:var(--pfx-form-section-padding);background:var(--pfx-form-section-surface-flat);border-color:var(--pfx-form-section-divider);box-shadow:none}.praxis-dynamic-form.editorial-visual-context .form-section.section-appearance-step{border-radius:var(--editorial-card-radius, 20px);box-shadow:none}.form-section.section-appearance-step .section-heading{margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--pfx-form-section-divider)}.form-section.section-appearance-step .section-title{font:var(--mdc-typography-title-large, 700 22px/28px system-ui);color:var(--pfx-form-label-strong);margin-bottom:8px}.form-section.section-appearance-step .section-description{color:var(--pfx-form-label-muted);max-width:60ch}.form-section.section-appearance-step .section-step-label{min-height:24px;padding:0 10px;margin-bottom:10px;box-shadow:none}.form-section.section-appearance-step .section-heading.align-center .section-description{max-width:52ch}.form-section.section-appearance-step .section-body{display:grid;gap:8px;padding-top:0}.form-section.section-appearance-step .form-row{margin-bottom:var(--pfx-field-gap, 1rem)}.form-section.section-appearance-step .form-column{gap:var(--pfx-field-gap, 12px)}.form-section .form-editorial-blocks{display:grid;gap:16px}.form-section .form-editorial-blocks[data-editorial-placement=beforeActions]{margin-top:24px;padding-top:18px;border-top:1px solid var(--pfx-form-section-divider)}.form-section.section-appearance-step .form-editorial-blocks[data-editorial-placement=beforeActions]{gap:18px}.form-section.section-appearance-step .form-editorial-blocks[data-editorial-placement=beforeActions]>*+*{margin-top:2px}.praxis-dynamic-form>praxis-form-actions[data-actions-placement=afterSections] .form-actions{margin-top:18px;padding-top:0}.praxis-dynamic-form>.form-editorial-blocks[data-editorial-placement=after]{margin-top:6px}:host-context(.mdc-theme-dark) .form-section.section-appearance-step,:host-context(.theme-dark) .form-section.section-appearance-step{border-color:color-mix(in srgb,var(--pfx-editorial-form-border) 82%,transparent);box-shadow:none}:host-context(.mdc-theme-dark) .form-section.section-appearance-step .section-title,:host-context(.theme-dark) .form-section.section-appearance-step .section-title{color:color-mix(in srgb,var(--pfx-editorial-form-text) 96%,white)}:host-context(.mdc-theme-dark) .form-section.section-appearance-step .section-description,:host-context(.theme-dark) .form-section.section-appearance-step .section-description{color:color-mix(in srgb,var(--pfx-editorial-form-text-muted) 86%,var(--pfx-editorial-form-text) 14%)}:host-context(.mdc-theme-dark) .section-step-label,:host-context(.theme-dark) .section-step-label{background:color-mix(in srgb,var(--md-sys-color-primary-container) 54%,transparent);color:color-mix(in srgb,var(--md-sys-color-primary) 88%,white)}:host-context(.mdc-theme-dark) .form-section .form-editorial-blocks[data-editorial-placement=beforeActions],:host-context(.theme-dark) .form-section .form-editorial-blocks[data-editorial-placement=beforeActions]{border-top-color:color-mix(in srgb,var(--md-sys-color-outline-variant) 90%,transparent)}.inline-edit-btn{margin-left:6px;vertical-align:middle;--mdc-icon-button-size: 28px;--mdc-icon-button-icon-size: 16px}.inline-edit-btn mat-icon{font-size:16px;width:16px;height:16px}.section-body.collapsed{border:1px dashed var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-low);border-radius:6px;padding:8px 10px}.section-collapsed-placeholder{display:flex;align-items:center;gap:8px;color:var(--md-sys-color-on-surface-variant);font-size:.95rem}.section-collapsed-placeholder mat-icon{font-size:20px;width:20px;height:20px}.form-row{display:flex;gap:1.1rem;margin-bottom:var(--pfx-field-gap, 1.1rem);transition:all .2s ease;border-radius:6px;position:relative}.praxis-dynamic-form.pfx-mounting .form-row{opacity:0;transform:translateY(var(--pdx-form-mount-offset, 6px));animation:pdxFormMount var(--pdx-form-mount-duration, .16s) ease-out both;animation-delay:calc(var(--pfx-mount-index, 0) * var(--pdx-form-mount-stagger, 20ms))}@media(prefers-reduced-motion:reduce){.praxis-dynamic-form.pfx-mounting .form-row{animation:none;opacity:1;transform:none}}@keyframes pdxFormMount{to{opacity:1;transform:translateY(0)}}.praxis-dynamic-form .mat-mdc-form-field{width:100%;margin-bottom:var(--pfx-field-gap, 10px);font-family:inherit;--mdc-filled-text-field-container-color: var(--pfx-form-field-surface-rest);--mdc-filled-text-field-focus-active-indicator-color: var(--pfx-editorial-form-accent);--mdc-filled-text-field-active-indicator-color: var(--pfx-editorial-form-field-outline);--mdc-filled-text-field-hover-active-indicator-color: var(--pfx-editorial-form-accent);--mdc-filled-text-field-focus-label-text-color: var(--pfx-editorial-form-accent);--mdc-filled-text-field-label-text-color: var(--pfx-form-label-muted);--mdc-filled-text-field-input-text-color: var(--pfx-editorial-form-text);--mdc-filled-text-field-caret-color: var(--pfx-editorial-form-accent);--mdc-filled-text-field-input-text-placeholder-color: color-mix( in srgb, var(--pfx-editorial-form-text-muted) 82%, transparent );--mdc-outlined-text-field-outline-color: var(--pfx-editorial-form-field-outline);--mdc-outlined-text-field-hover-outline-color: var(--pfx-editorial-form-accent);--mdc-outlined-text-field-focus-outline-color: var(--pfx-editorial-form-accent);--mdc-outlined-text-field-focus-label-text-color: var(--pfx-editorial-form-accent);--mdc-outlined-text-field-label-text-color: var(--pfx-form-label-muted);--mdc-outlined-text-field-input-text-color: var(--pfx-editorial-form-text);--mdc-filled-text-field-container-shape: var(--pfx-editorial-form-field-radius);--mdc-outlined-text-field-container-shape: var(--pfx-editorial-form-field-radius);--mdc-filled-text-field-active-indicator-height: var(--pfx-editorial-form-field-border-width);--mdc-filled-text-field-focus-active-indicator-height: var(--pfx-editorial-form-field-border-width);--mdc-outlined-text-field-outline-width: var(--pfx-editorial-form-field-border-width);--mdc-outlined-text-field-focus-outline-width: var(--pfx-editorial-form-field-border-width);--mat-select-enabled-trigger-text-color: var(--pfx-editorial-form-text);--mat-select-enabled-arrow-color: var(--pfx-form-label-muted);--mat-form-field-enabled-select-arrow-color: var(--pfx-form-label-muted);--mat-form-field-focus-select-arrow-color: var(--pfx-editorial-form-accent);--mat-form-field-hover-state-layer-opacity: 0;--mat-form-field-focus-state-layer-opacity: 0}.praxis-dynamic-form.editorial-visual-context .mat-mdc-form-field{font-family:var(--editorial-body-font-family, inherit)}.praxis-dynamic-form .mat-mdc-text-field-wrapper,.praxis-dynamic-form .mdc-text-field{background:var(--pfx-form-field-surface-rest);border-radius:var(--pfx-editorial-form-field-radius);min-height:var(--pfx-form-field-min-height);transition:background-color .16s ease,box-shadow .16s ease,border-color .16s ease}.praxis-dynamic-form.editorial-visual-context .mat-mdc-text-field-wrapper,.praxis-dynamic-form.editorial-visual-context .mdc-text-field,.praxis-dynamic-form.editorial-visual-context .mdc-text-field--filled,.praxis-dynamic-form.editorial-visual-context .mdc-text-field--outlined{background-color:var(--pfx-form-field-surface-rest)!important;background:var(--pfx-form-field-surface-rest)!important}.praxis-dynamic-form .mat-mdc-form-field .mdc-floating-label,.praxis-dynamic-form .mat-mdc-form-field .mat-mdc-form-field-hint,.praxis-dynamic-form .mat-mdc-form-field .mat-mdc-form-field-error,.praxis-dynamic-form .mat-mdc-form-field .mat-mdc-form-field-required-marker,.praxis-dynamic-form .mat-mdc-form-field .mat-mdc-select-arrow,.praxis-dynamic-form .mat-mdc-form-field .mat-mdc-select-placeholder,.praxis-dynamic-form .mat-mdc-form-field .mat-mdc-form-field-icon-suffix,.praxis-dynamic-form .mat-mdc-form-field .mat-mdc-form-field-icon-prefix{color:var(--pfx-form-label-muted)}.praxis-dynamic-form .mat-mdc-input-element,.praxis-dynamic-form .mat-mdc-select-value-text,.praxis-dynamic-form .mat-mdc-form-field-infix,.praxis-dynamic-form .mat-mdc-select-min-line{color:var(--pfx-editorial-form-text)}.praxis-dynamic-form .mat-mdc-form-field:hover .mat-mdc-text-field-wrapper,.praxis-dynamic-form .mat-mdc-form-field:hover .mdc-text-field,.praxis-dynamic-form .mat-mdc-form-field.mat-focused .mat-mdc-text-field-wrapper,.praxis-dynamic-form .mat-mdc-form-field.mat-focused .mdc-text-field{background:var(--pfx-form-field-surface-focus)}.praxis-dynamic-form.editorial-visual-context .mat-mdc-input-element,.praxis-dynamic-form.editorial-visual-context .mat-mdc-select-value-text,.praxis-dynamic-form.editorial-visual-context .mat-mdc-form-field-infix,.praxis-dynamic-form.editorial-visual-context .mat-mdc-select-min-line,.praxis-dynamic-form.editorial-visual-context .mdc-text-field__input{color:var(--pfx-editorial-form-text)!important;-webkit-text-fill-color:var(--pfx-editorial-form-text)!important}.praxis-dynamic-form.editorial-visual-context .mat-mdc-form-field .mdc-floating-label,.praxis-dynamic-form.editorial-visual-context .mat-mdc-form-field .mat-mdc-form-field-hint,.praxis-dynamic-form.editorial-visual-context .mat-mdc-form-field .mat-mdc-form-field-error,.praxis-dynamic-form.editorial-visual-context .mat-mdc-form-field .mat-mdc-form-field-required-marker,.praxis-dynamic-form.editorial-visual-context .mat-mdc-form-field .mat-mdc-select-arrow,.praxis-dynamic-form.editorial-visual-context .mat-mdc-form-field .mat-mdc-select-placeholder,.praxis-dynamic-form.editorial-visual-context .mat-mdc-form-field .mat-mdc-form-field-icon-suffix,.praxis-dynamic-form.editorial-visual-context .mat-mdc-form-field .mat-mdc-form-field-icon-prefix{color:var(--pfx-editorial-form-text-muted)!important}.praxis-dynamic-form.editorial-visual-context .mat-mdc-floating-label,.praxis-dynamic-form.editorial-visual-context .mdc-floating-label,.praxis-dynamic-form.editorial-visual-context .mdc-text-field__input::placeholder{color:color-mix(in srgb,var(--pfx-editorial-form-text) 68%,transparent)!important}.praxis-dynamic-form.editorial-visual-context .mat-mdc-input-element::placeholder,.praxis-dynamic-form.editorial-visual-context textarea.mat-mdc-input-element::placeholder{color:color-mix(in srgb,var(--pfx-editorial-form-text) 58%,transparent)!important}.praxis-dynamic-form .mat-mdc-radio-button,.praxis-dynamic-form .mat-mdc-checkbox,.praxis-dynamic-form .mat-mdc-slide-toggle{--mdc-radio-selected-icon-color: var(--pfx-editorial-form-accent);--mdc-radio-selected-hover-icon-color: var(--pfx-editorial-form-accent);--mdc-radio-selected-focus-icon-color: var(--pfx-editorial-form-accent);--mdc-checkbox-selected-checkmark-color: var(--pfx-editorial-form-accent-text);--mdc-checkbox-selected-focus-icon-color: var(--pfx-editorial-form-accent);--mdc-checkbox-selected-hover-icon-color: var(--pfx-editorial-form-accent);--mdc-checkbox-selected-icon-color: var(--pfx-editorial-form-accent);--mdc-switch-selected-focus-state-layer-color: var(--pfx-editorial-form-accent);--mdc-switch-selected-handle-color: var(--pfx-editorial-form-accent);--mdc-switch-selected-track-color: color-mix(in srgb, var(--pfx-editorial-form-accent) 45%, #fff)}.praxis-dynamic-form [data-field-type=input],.praxis-dynamic-form [data-field-type=textarea],.praxis-dynamic-form [data-field-type=email],.praxis-dynamic-form [data-field-type=password],.praxis-dynamic-form [data-field-type=url],.praxis-dynamic-form [data-field-type=search],.praxis-dynamic-form [data-field-type=phone],.praxis-dynamic-form [data-field-type=numericTextBox],.praxis-dynamic-form [data-field-type=currency],.praxis-dynamic-form [data-field-type=cpfCnpj],.praxis-dynamic-form [data-field-type=date],.praxis-dynamic-form [data-field-type=dateInput],.praxis-dynamic-form [data-field-type=dateRange],.praxis-dynamic-form [data-field-type=dateTimeLocal],.praxis-dynamic-form [data-field-type=time],.praxis-dynamic-form [data-field-type=timePicker],.praxis-dynamic-form [data-field-type=timeRange],.praxis-dynamic-form [data-field-type=month],.praxis-dynamic-form [data-field-type=week],.praxis-dynamic-form [data-field-type=yearInput],.praxis-dynamic-form [data-field-type=select],.praxis-dynamic-form [data-field-type=multi-select],.praxis-dynamic-form [data-field-type=searchable-select],.praxis-dynamic-form [data-field-type=async-select],.praxis-dynamic-form [data-field-type=autocomplete],.praxis-dynamic-form [data-field-type=tree-select],.praxis-dynamic-form [data-field-type=multi-select-tree],.praxis-dynamic-form [data-field-type=priceRange],.praxis-dynamic-form [data-field-type=file-upload]{display:block;width:100%;min-width:0}.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{display:grid;align-content:start;gap:var(--pfx-field-gap, 10px);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}.form-blocking-overlay{position:absolute;inset:0;background:transparent;color:var(--md-sys-color-on-surface);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}.section-heading{gap:10px;margin-bottom:16px;padding-bottom:14px}}.section-title{display:flex;align-items:center;gap:8px}.section-title .section-title-icon{font-size:1.25em;line-height:1}.section-title-avatar{--_pfx-form-section-avatar-size: var(--pfx-form-section-avatar-size-md, var(--pfx-form-section-avatar-size, 32px));display:inline-flex;align-items:center;justify-content:center;width:var(--_pfx-form-section-avatar-size);height:var(--_pfx-form-section-avatar-size);border-radius:999px;flex:0 0 var(--_pfx-form-section-avatar-size);overflow:hidden}.section-title-avatar.size-sm{--_pfx-form-section-avatar-size: var(--pfx-form-section-avatar-size-sm, 24px)}.section-title-avatar.size-md{--_pfx-form-section-avatar-size: var(--pfx-form-section-avatar-size-md, var(--pfx-form-section-avatar-size, 32px))}.section-title-avatar.size-lg{--_pfx-form-section-avatar-size: var(--pfx-form-section-avatar-size-lg, 40px)}.section-title-avatar-image{object-fit:cover;border:1px solid color-mix(in srgb,var(--pfx-form-section-divider) 72%,transparent);background:var(--pfx-form-section-surface-flat)}.section-title-avatar-text,.section-title-avatar-placeholder{background:color-mix(in srgb,var(--pfx-editorial-form-accent) 14%,var(--pfx-form-section-surface-flat));color:color-mix(in srgb,var(--pfx-editorial-form-accent) 82%,var(--pfx-form-label-strong) 18%);font-size:calc(var(--_pfx-form-section-avatar-size) * .41);font-weight:800;letter-spacing:.04em;text-transform:uppercase}.section-title-avatar-placeholder mat-icon{font-size:calc(var(--_pfx-form-section-avatar-size) * .5625);width:calc(var(--_pfx-form-section-avatar-size) * .5625);height:calc(var(--_pfx-form-section-avatar-size) * .5625);line-height:calc(var(--_pfx-form-section-avatar-size) * .5625)}.section-title-avatar-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\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 when customization is enabled) -->\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 && enableCustomization) {\n<div class=\"form-config-controls\">\n  <praxis-ai-assistant [adapter]=\"aiAdapter\"></praxis-ai-assistant>\n  <button type=\"button\" mat-icon-button (click)=\"openConfigEditor()\" [disabled]=\"isLoading\" class=\"config-button\"\n    [matBadge]=\"schemaOutdated ? '!' : ''\" [matBadgeHidden]=\"!schemaOutdated\" matBadgeColor=\"warn\" matBadgeSize=\"small\"\n    matBadgePosition=\"above after\"\n    [matTooltip]=\"schemaOutdated ? 'Schema do servidor mudou \u2014 Reconciliar' : 'Configurar formul\u00E1rio'\">\n    <mat-icon [praxisIcon]=\"'settings'\"></mat-icon>\n  </button>\n  <button type=\"button\" mat-icon-button (click)=\"disconnect()\" matTooltip=\"Desconectar da fonte de dados\"\n    [disabled]=\"isLoading\">\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 icon=\"link\" [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) }\"></praxis-empty-state-card>\n}\n<form #formHost (ngSubmit)=\"onSubmit()\" [attr.aria-busy]=\"submitting ? 'true' : null\"\n  [attr.aria-label]=\"'Formul\u00E1rio ' + (config.metadata?.version || '')\" [class.canvas-mode-enabled]=\"enableCustomization\"\n  [class.presentation-mode]=\"effectivePresentation\" [class.readonly-mode]=\"effectiveReadonly\"\n  [class.editorial-visual-context]=\"hasEditorialVisualContext()\"\n  [class.pfx-mounting]=\"isMounting\" [formGroup]=\"form\"\n  [ngClass]=\"{\n    'pres-compact': presentationVars.compact,\n    'pres-label-left': presentationVars.labelPosition === 'left',\n    'pres-label-above': presentationVars.labelPosition === 'above'\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  [style.--pdx-form-mount-duration]=\"getMountDurationVar()\"\n  [style.--pdx-form-mount-offset]=\"getMountOffsetVar()\"\n  [style.--pdx-form-mount-stagger]=\"getMountStaggerVar()\"\n  class=\"praxis-dynamic-form\">\n  <praxis-canvas-toolbar (editMetadata)=\"openSelectedElementEditor()\" (selectPath)=\"onSelectPath($event)\"\n    (moveUp)=\"onToolbarMove('up')\" (moveDown)=\"onToolbarMove('down')\" (toggleReadonly)=\"onToolbarToggleReadonly()\"\n    (toggleRequired)=\"onToolbarToggleRequired()\" (toggleHidden)=\"onToolbarToggleHidden()\"\n    (toggleDisabled)=\"onToolbarToggleDisabled()\" (requestClose)=\"onToolbarRequestClose()\"\n    *ngIf=\"enableCustomization && selectedElement\" [selectedElement]=\"selectedElement\"\n    [style.transform]=\"toolbarTransform\"></praxis-canvas-toolbar>\n\n  @if (formBlocksBefore.length) {\n    <section class=\"form-editorial-blocks form-editorial-blocks-before\" data-editorial-placement=\"before\">\n      @for (block of formBlocksBefore; track (block.id ?? $index)) {\n        <ng-container\n          [dynamicWidgetLoader]=\"block\"\n          [context]=\"getEditorialWidgetContext()\"\n          [strictValidation]=\"true\"\n          [autoWireOutputs]=\"true\"\n          (widgetEvent)=\"onEditorialWidgetEvent('before', $event)\">\n        </ng-container>\n      }\n    </section>\n  }\n\n  @if (actionPlacement === 'top' && !(effectivePresentation || effectiveReadonly)) {\n  <praxis-form-actions data-actions-placement=\"top\" [actions]=\"config.actions\" [isSubmitting]=\"submitting\"\n    [formIsValid]=\"form.valid\" [submitError]=\"submitError\" [formId]=\"formId\" [actionOverrides]=\"actionRuleProps\"\n    [editorialVisualContext]=\"hasEditorialVisualContext()\"\n    (action)=\"onFormAction($event)\"></praxis-form-actions>\n  }\n\n  @for (section of config.sections; track (section.id ?? $index); let sectionIndex = $index;\n  let last = $last) {\n  <div class=\"section-drop-wrapper\" [attr.data-section-id]=\"section.id\">\n    @if (isSectionVisible(section)) {\n      <div #sectionEl class=\"form-section canvas-element\" data-canvas-type=\"section\" [attr.data-section-id]=\"section.id\"\n        [attr.data-section-index]=\"sectionIndex\" (mouseenter)=\"onElementMouseEnter($event, 'section', section, sectionEl)\"\n        (mouseleave)=\"onElementMouseLeave($event)\" (click)=\"onElementClick($event, 'section', section, sectionEl)\"\n        [class.selected]=\"selectedElement?.domElement === sectionEl\"\n        [class.hovered]=\"hoveredElement?.domElement === sectionEl && selectedElement?.domElement !== sectionEl\"\n        [attr.data-section-appearance]=\"getSectionAppearance(section) || null\"\n        [style.marginBottom.px]=\"!last ? getSectionGapBottom(section) : null\" [ngClass]=\"getSectionClasses(section)\"\n        [ngStyle]=\"getSectionStyles(section)\">\n      <div\n        class=\"section-heading\"\n        [class.align-center]=\"getSectionHeaderAlign(section) === 'center'\"\n        [class.step-appearance]=\"getSectionAppearance(section) === 'step'\"\n      >\n        <div class=\"section-heading-text\" [matTooltip]=\"getSectionHeaderTooltip(section) || null\"\n          [matTooltipDisabled]=\"!getSectionHeaderTooltip(section)\">\n          @if (getSectionStepLabel(section)) {\n          <div class=\"section-step-label\" [class.align-center]=\"getSectionHeaderAlign(section) === 'center'\">\n            {{ getSectionStepLabel(section) }}\n          </div>\n          }\n          @if (getSectionTitle(section)) {\n          <h3 class=\"section-title\" [class.title-large]=\"getSectionTitleStyle(section) === 'titleLarge'\"\n            [class.title-medium]=\"getSectionTitleStyle(section) === 'titleMedium'\"\n            [class.title-small]=\"getSectionTitleStyle(section) === 'titleSmall'\"\n            [class.headline-small]=\"getSectionTitleStyle(section) === 'headlineSmall'\"\n            [style.marginBottom.px]=\"getSectionTitleGapBottom(section) ?? 20\" [style.color]=\"getSectionTitleColor(section) || null\"\n            [class.align-center]=\"getSectionHeaderAlign(section) === 'center'\"\n            [attr.id]=\"sectionPanelId(section, sectionIndex) + '-title'\">\n            @let sectionHeaderVisual = getSectionHeaderVisual(section);\n            @let sectionHeaderAvatarSize = getSectionHeaderAvatarSize(section);\n            @if (sectionHeaderVisual.kind === 'icon') {\n            <mat-icon class=\"section-title-icon\" aria-hidden=\"true\" [praxisIcon]=\"sectionHeaderVisual.icon\"></mat-icon>\n            }\n            @if (sectionHeaderVisual.kind === 'image') {\n            <img class=\"section-title-avatar section-title-avatar-image\" [class.size-sm]=\"sectionHeaderAvatarSize === 'sm'\"\n              [class.size-md]=\"sectionHeaderAvatarSize === 'md'\" [class.size-lg]=\"sectionHeaderAvatarSize === 'lg'\"\n              [src]=\"sectionHeaderVisual.src\" [alt]=\"sectionHeaderVisual.alt\" />\n            }\n            @if (sectionHeaderVisual.kind === 'initials') {\n            <span class=\"section-title-avatar section-title-avatar-text\" [class.size-sm]=\"sectionHeaderAvatarSize === 'sm'\"\n              [class.size-md]=\"sectionHeaderAvatarSize === 'md'\" [class.size-lg]=\"sectionHeaderAvatarSize === 'lg'\" aria-hidden=\"true\">\n              {{ sectionHeaderVisual.text }}\n            </span>\n            @if (sectionHeaderVisual.ariaLabel) {\n            <span class=\"section-title-avatar-sr-only\">{{ sectionHeaderVisual.ariaLabel }}</span>\n            }\n            }\n            @if (sectionHeaderVisual.kind === 'placeholder') {\n            <span class=\"section-title-avatar section-title-avatar-placeholder\" [class.size-sm]=\"sectionHeaderAvatarSize === 'sm'\"\n              [class.size-md]=\"sectionHeaderAvatarSize === 'md'\" [class.size-lg]=\"sectionHeaderAvatarSize === 'lg'\" aria-hidden=\"true\">\n              @if (sectionHeaderVisual.icon) {\n              <mat-icon aria-hidden=\"true\" [praxisIcon]=\"sectionHeaderVisual.icon\"></mat-icon>\n              }\n              @if (sectionHeaderVisual.text) {\n              <span>{{ sectionHeaderVisual.text }}</span>\n              }\n            </span>\n            @if (sectionHeaderVisual.ariaLabel) {\n            <span class=\"section-title-avatar-sr-only\">{{ sectionHeaderVisual.ariaLabel }}</span>\n            }\n            }\n            {{ getSectionTitle(section) }}\n            @if (enableCustomization) {\n            <button type=\"button\" class=\"inline-edit-btn\" mat-icon-button (click)=\"openSectionEditor(section, 'title')\"\n              aria-label=\"Editar t\u00EDtulo da se\u00E7\u00E3o\" matTooltip=\"Editar t\u00EDtulo\">\n              <mat-icon>edit</mat-icon>\n            </button>\n            }\n          </h3>\n          }\n          @if (getSectionDescription(section)) {\n          <p class=\"section-description\" [class.body-large]=\"getSectionDescriptionStyle(section) === 'bodyLarge'\"\n            [class.body-medium]=\"getSectionDescriptionStyle(section) === 'bodyMedium'\"\n            [class.body-small]=\"getSectionDescriptionStyle(section) === 'bodySmall'\"\n            [style.marginBottom.px]=\"getSectionDescriptionGapBottom(section) ?? 8\" [style.color]=\"getSectionDescriptionColor(section) || null\"\n            [class.align-center]=\"getSectionHeaderAlign(section) === 'center'\">\n            {{ getSectionDescription(section) }}\n            @if (enableCustomization) {\n            <button type=\"button\" class=\"inline-edit-btn\" mat-icon-button\n              (click)=\"openSectionEditor(section, 'description')\" aria-label=\"Editar descri\u00E7\u00E3o da se\u00E7\u00E3o\"\n              matTooltip=\"Editar descri\u00E7\u00E3o\">\n              <mat-icon>edit</mat-icon>\n            </button>\n            }\n          </p>\n          }\n        </div>\n        @if (getSectionHeaderActions(section).length) {\n        <div class=\"section-heading-actions\" [class.align-center]=\"getSectionHeaderAlign(section) === 'center'\">\n          @for (action of getSectionHeaderActions(section); track action.id) {\n          <button\n            type=\"button\"\n            class=\"section-heading-action-btn\"\n            mat-icon-button\n            [color]=\"getSectionHeaderActionColor(action)\"\n            [disabled]=\"isSectionHeaderActionDisabled(action)\"\n            [matTooltip]=\"getSectionHeaderActionTooltip(action)\"\n            [attr.aria-label]=\"action.label\"\n            [attr.aria-busy]=\"action.loading ? 'true' : null\"\n            [ngClass]=\"getSectionHeaderActionNgClass(action)\"\n            [ngStyle]=\"getSectionHeaderActionStyles(action)\"\n            (click)=\"onSectionHeaderActionClick(section, action, $event)\"\n          >\n            @if (action.loading) {\n            <mat-progress-spinner diameter=\"16\" mode=\"indeterminate\"></mat-progress-spinner>\n            <span class=\"section-heading-action-sr-only\">{{ getSectionHeaderActionLoadingLabel(action) }}</span>\n            } @else {\n            <mat-icon [praxisIcon]=\"action.icon\"></mat-icon>\n            }\n          </button>\n          }\n        </div>\n        }\n        @if (isSectionCollapsible(section)) {\n        <button type=\"button\" class=\"section-collapse-btn\" mat-icon-button\n          (click)=\"toggleSectionCollapse($event, section)\" [attr.aria-expanded]=\"!isSectionCollapsed(section)\"\n          [attr.aria-controls]=\"sectionPanelId(section, sectionIndex)\"\n          [attr.aria-label]=\"isSectionCollapsed(section) ? 'Expandir se\u00E7\u00E3o' : 'Recolher se\u00E7\u00E3o'\">\n          <mat-icon [praxisIcon]=\"isSectionCollapsed(section) ? 'expand_more' : 'expand_less'\"></mat-icon>\n        </button>\n        }\n      </div>\n\n      <div class=\"section-body\" [class.collapsed]=\"isSectionCollapsed(section)\"\n        [attr.id]=\"sectionPanelId(section, sectionIndex)\"\n        [attr.aria-labelledby]=\"getSectionTitle(section) ? sectionPanelId(section, sectionIndex) + '-title' : null\">\n        @if (!isSectionCollapsed(section)) {\n        @for (row of section.rows; track (row.id ?? $index); let rowIndex = $index) {\n        @if (isRowVisible(row)) {\n        <div class=\"row-drop-wrapper\" [attr.data-section-id]=\"section.id\">\n          <div #rowEl class=\"form-row grid-12 canvas-element\" data-canvas-type=\"row\" [attr.data-row-index]=\"rowIndex\"\n            [attr.data-section-id]=\"section.id\" [attr.data-row-id]=\"row.id\" [style.--pfx-grid-gap.px]=\"getRowGap(row)\"\n            [style.--pfx-field-gap.px]=\"getRowRowGap(row)\"\n            [style.--pfx-mount-index]=\"rowIndex\"\n            [style.marginBottom.px]=\"rowIndex < section.rows.length - 1 ? (getRowRowGap(row) ?? null) : null\"\n            [ngClass]=\"getRowClasses(row)\" [ngStyle]=\"getRowStyles(row)\"\n            (mouseenter)=\"onElementMouseEnter($event, 'row', row, rowEl)\" (mouseleave)=\"onElementMouseLeave($event)\"\n            (click)=\"onElementClick($event, 'row', row, rowEl)\" [class.selected]=\"selectedElement?.domElement === rowEl\"\n            [class.hovered]=\"hoveredElement?.domElement === rowEl && selectedElement?.domElement !== rowEl\">\n            @for (column of row.columns; track (column.id ?? $index); let colIndex = $index) {\n            @if (isColumnVisible(column)) {\n            <div class=\"column-drop-wrapper\" [attr.data-section-id]=\"section.id\" [attr.data-row-id]=\"row.id\">\n              <div #colEl class=\"form-column canvas-element\" [ngClass]=\"getColumnClasses(column)\"\n                [style.padding.px]=\"getColumnPadding(column)\" [style.--pfx-field-gap.px]=\"getRowRowGap(row)\"\n                [ngStyle]=\"getColumnStyles(column)\" [attr.data-testid]=\"column.testId || null\"\n                [attr.data-row-gap]=\"getRowRowGap(row)\" data-canvas-type=\"column\" [attr.data-column-index]=\"colIndex\"\n                [attr.data-row-index]=\"rowIndex\" [attr.data-section-id]=\"section.id\" [attr.data-row-id]=\"row.id\"\n                [attr.data-column-id]=\"column.id\" (mouseenter)=\"onElementMouseEnter($event, 'column', column, colEl)\"\n                (mouseleave)=\"onElementMouseLeave($event)\" (click)=\"onElementClick($event, 'column', column, colEl)\"\n                [class.selected]=\"selectedElement?.domElement === colEl\"\n                [class.hovered]=\"hoveredElement?.domElement === colEl && selectedElement?.domElement !== colEl\">\n                <ng-container dynamicFieldLoader [fields]=\"getColumnFields(column)\" [formGroup]=\"form\"\n                  [readonlyMode]=\"readonlyModeGlobal === null ? null : readonlyModeGlobal\"\n                  [disabledMode]=\"disabledModeGlobal === null ? null : disabledModeGlobal\"\n                  [presentationMode]=\"presentationForLoader\" [visible]=\"visibleGlobal === null ? null : visibleGlobal\"\n                  [canvasMode]=\"enableCustomization\" (canvasMouseEnter)=\"onFieldMouseEnter($event)\"\n                  (canvasMouseLeave)=\"onFieldMouseLeave($event)\" (canvasClick)=\"onFieldClick($event)\"\n                  (renderError)=\"onFieldRenderError($event)\">\n                </ng-container>\n              </div>\n            </div>\n            } }\n          </div>\n        </div>\n        }\n        }\n        } @else {\n        <div class=\"section-collapsed-placeholder\">\n          <mat-icon aria-hidden=\"true\" [praxisIcon]=\"'unfold_more'\"></mat-icon>\n          <span>{{ getSectionCollapsedSummary(section) }}</span>\n        </div>\n        }\n        @if (last && beforeActionsPlacement === 'insideLastSection' && formBlocksBeforeActions.length) {\n        <section class=\"form-editorial-blocks form-editorial-blocks-before-actions\" data-editorial-placement=\"beforeActions\">\n          @for (block of formBlocksBeforeActions; track (block.id ?? $index)) {\n            <ng-container\n              [dynamicWidgetLoader]=\"block\"\n              [context]=\"getEditorialWidgetContext()\"\n              [strictValidation]=\"true\"\n              [autoWireOutputs]=\"true\"\n              (widgetEvent)=\"onEditorialWidgetEvent('beforeActions', $event)\">\n            </ng-container>\n          }\n        </section>\n        }\n        @if (actionPlacement === 'insideLastSection' && last && !(effectivePresentation\n        || effectiveReadonly)) {\n        <praxis-form-actions data-actions-placement=\"insideLastSection\" [actions]=\"config.actions\"\n          [isSubmitting]=\"submitting\" [formIsValid]=\"form.valid\" [submitError]=\"submitError\" [formId]=\"formId\"\n          [actionOverrides]=\"actionRuleProps\" [editorialVisualContext]=\"hasEditorialVisualContext()\"\n          (action)=\"onFormAction($event)\"></praxis-form-actions>\n        }\n      </div>\n      <!-- Overlay de bloqueio durante submiss\u00E3o -->\n      @if (submitting) {\n      <div class=\"form-blocking-overlay\" aria-live=\"polite\">\n        <mat-progress-spinner diameter=\"40\" color=\"primary\"></mat-progress-spinner>\n        <p>{{ config.messages?.loading?.submit || 'Salvando...' }}</p>\n      </div>\n      }\n    </div>\n\n    @if (enableCustomization && selectedElement?.domElement === sectionEl) {\n      <div class=\"add-section-container\">\n        <div class=\"add-section-line\"></div>\n        <button mat-fab color=\"primary\" aria-label=\"Adicionar nova se\u00E7\u00E3o\" (click)=\"addNewSectionAfter(sectionIndex)\"\n          matTooltip=\"Adicionar nova se\u00E7\u00E3o aqui\">\n          <mat-icon [praxisIcon]=\"'add'\"></mat-icon>\n        </button>\n        <div class=\"add-section-line\"></div>\n      </div>\n    }\n    }\n  </div>\n  }\n\n  @if (beforeActionsPlacement !== 'insideLastSection' && formBlocksBeforeActions.length) {\n    <section class=\"form-editorial-blocks form-editorial-blocks-before-actions\" data-editorial-placement=\"beforeActions\">\n      @for (block of formBlocksBeforeActions; track (block.id ?? $index)) {\n        <ng-container\n          [dynamicWidgetLoader]=\"block\"\n          [context]=\"getEditorialWidgetContext()\"\n          [strictValidation]=\"true\"\n          [autoWireOutputs]=\"true\"\n          (widgetEvent)=\"onEditorialWidgetEvent('beforeActions', $event)\">\n        </ng-container>\n      }\n    </section>\n  }\n\n  @if (actionPlacement === 'afterSections' && !(effectivePresentation || effectiveReadonly)) {\n    <praxis-form-actions data-actions-placement=\"afterSections\" [actions]=\"config.actions\" [isSubmitting]=\"submitting\"\n      [formIsValid]=\"form.valid\" [submitError]=\"submitError\" [formId]=\"formId\"\n      [actionOverrides]=\"actionRuleProps\" [editorialVisualContext]=\"hasEditorialVisualContext()\"\n      (action)=\"onFormAction($event)\"></praxis-form-actions>\n  }\n\n  @if (formBlocksAfter.length) {\n    <section class=\"form-editorial-blocks form-editorial-blocks-after\" data-editorial-placement=\"after\">\n      @for (block of formBlocksAfter; track (block.id ?? $index)) {\n        <ng-container\n          [dynamicWidgetLoader]=\"block\"\n          [context]=\"getEditorialWidgetContext()\"\n          [strictValidation]=\"true\"\n          [autoWireOutputs]=\"true\"\n          (widgetEvent)=\"onEditorialWidgetEvent('after', $event)\">\n        </ng-container>\n      }\n    </section>\n  }\n</form>\n@if (!enableCustomization && mode === 'view') {\n<div class=\"ai-floating-assistant\">\n  <praxis-ai-assistant [adapter]=\"aiAdapter\"></praxis-ai-assistant>\n</div>\n}\n}\n", styles: ["@charset \"UTF-8\";.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}}.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(--md-sys-color-primary)}.canvas-mode-enabled .canvas-element[data-canvas-type=row]{--outline-color: 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(--md-sys-color-tertiary)}.canvas-mode-enabled .canvas-element[data-canvas-type=actions]{--outline-color: var(--md-sys-color-primary)}.canvas-mode-enabled .canvas-element.hovered:not(.selected){outline-color:var(--outline-color, var(--md-sys-color-primary));outline-style:dashed}.canvas-mode-enabled .canvas-element.selected{outline-color:var(--outline-color, var(--md-sys-color-primary));outline-style:solid;box-shadow:0 0 0 2px var(--outline-color, var(--md-sys-color-primary))}.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)}:host{display:block;position:relative}.form-config-controls{position:sticky;top:10px;margin-left:auto;margin-bottom:10px;display:flex;align-items:center;gap:.35rem;z-index:60;background:color-mix(in srgb,var(--md-sys-color-surface) 92%,transparent);padding:6px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 82%,transparent);border-radius:999px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 10px 22px #0f172a14;min-width:0;justify-content:flex-end;pointer-events:none;opacity:.88;transition:opacity .16s ease,box-shadow .16s ease,border-color .16s ease,transform .16s ease}.form-config-controls>*{pointer-events:auto}.praxis-dynamic-form:hover .form-config-controls,.praxis-dynamic-form:focus-within .form-config-controls{opacity:1;border-color:color-mix(in srgb,var(--md-sys-color-primary) 26%,var(--md-sys-color-outline-variant) 74%);box-shadow:0 14px 28px #0f172a1f;transform:translateY(-1px)}.form-config-controls .mat-icon-button{--mdc-icon-button-state-layer-size: 34px;width:34px;height:34px;color:var(--md-sys-color-on-surface-variant);background:color-mix(in srgb,var(--md-sys-color-surface-container-low) 82%,transparent);border:1px solid transparent}.form-config-controls .mat-icon-button:hover{color:var(--md-sys-color-primary);background:var(--md-sys-color-primary-container);border-color:color-mix(in srgb,var(--md-sys-color-primary) 20%,transparent)}.ai-floating-assistant{position:sticky;right:0;bottom:12px;margin-top:14px;margin-left:auto;width:fit-content;z-index:70;pointer-events:none}.ai-floating-assistant praxis-ai-assistant{pointer-events:auto;display:inline-flex}.ai-floating-assistant .ai-trigger-btn{box-shadow:0 12px 28px #0f172a24}.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;box-shadow:0 12px 30px #7f1d1d1f}.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}.pfx-form-info-banner{margin-bottom:14px;padding:12px 14px;border-radius:16px;border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 18%,var(--md-sys-color-outline-variant) 82%);background:color-mix(in srgb,var(--md-sys-color-primary-container) 24%,var(--md-sys-color-surface) 76%);color:var(--md-sys-color-on-surface);display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.pfx-form-info-banner .text{font-size:.92rem;line-height:1.5;font-weight:600}.pfx-form-info-banner .actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.praxis-dynamic-form{display:flex;flex-direction:column;transition:all .3s ease;position:relative;font-family:inherit;font-size:inherit;color:inherit;--pfx-editorial-form-surface: var( --pfx-form-section-surface, var(--md-sys-color-surface-container) );--pfx-editorial-form-surface-muted: var(--md-sys-color-surface-container-low);--pfx-editorial-form-border: var( --pfx-form-stroke, var(--md-sys-color-outline-variant) );--pfx-editorial-form-text: var(--md-sys-color-on-surface);--pfx-editorial-form-text-muted: var(--md-sys-color-on-surface-variant);--pfx-editorial-form-field-surface: color-mix( in srgb, var(--pfx-editorial-form-surface-muted) 76%, var(--pfx-editorial-form-surface) 24% );--pfx-editorial-form-field-outline: color-mix( in srgb, var(--pfx-editorial-form-border) 88%, transparent );--pfx-editorial-form-accent: var(--md-sys-color-primary);--pfx-editorial-form-accent-text: var(--md-sys-color-on-primary);--pfx-editorial-form-radius: var(--pfx-form-section-radius, 8px);--pfx-editorial-form-field-radius: var(--pfx-form-field-radius, 4px);--pfx-editorial-form-border-width: 1px;--pfx-editorial-form-field-border-width: 1px;--pfx-editorial-form-shadow: none;--pfx-form-shell-surface: color-mix( in srgb, var(--pfx-editorial-form-surface) 36%, transparent );--pfx-form-section-surface-flat: color-mix( in srgb, var(--pfx-editorial-form-surface) 78%, var(--pfx-editorial-form-surface-muted) 22% );--pfx-form-section-divider: color-mix( in srgb, var(--pfx-editorial-form-border) 68%, transparent );--pfx-form-label-strong: color-mix( in srgb, var(--pfx-editorial-form-text) 96%, white 4% );--pfx-form-label-muted: color-mix( in srgb, var(--pfx-editorial-form-text-muted) 92%, var(--pfx-editorial-form-text) 8% );--pfx-form-field-surface-rest: color-mix( in srgb, var(--pfx-editorial-form-field-surface) 82%, var(--pfx-editorial-form-surface) 18% );--pfx-form-field-surface-focus: color-mix( in srgb, var(--pfx-editorial-form-accent) 4%, var(--pfx-form-field-surface-rest) 96% );--pfx-form-field-min-height: 48px;--pfx-form-section-padding: clamp(1.1rem, 1.8vw, 1.5rem);--pfx-form-section-gap: 22px;--pfx-form-footer-surface: color-mix( in srgb, var(--pfx-editorial-form-surface) 70%, var(--pfx-editorial-form-surface-muted) 30% );--pfx-form-footer-border: color-mix( in srgb, var(--pfx-editorial-form-border) 76%, transparent )}.praxis-dynamic-form.editorial-visual-context{font-family:var(--editorial-body-font-family, inherit);font-size:var(--editorial-body-size, 1rem);color:var(--editorial-text-primary, var(--md-sys-color-on-surface));--pfx-editorial-form-surface: var( --editorial-surface-primary, var(--pfx-form-section-surface, var(--md-sys-color-surface-container)) );--pfx-editorial-form-surface-muted: var( --editorial-surface-secondary, var(--md-sys-color-surface-container-low) );--pfx-editorial-form-border: var( --editorial-border-color, var(--pfx-form-stroke, var(--md-sys-color-outline-variant)) );--pfx-editorial-form-text: var( --editorial-text-primary, var(--md-sys-color-on-surface) );--pfx-editorial-form-text-muted: var( --editorial-text-secondary, var(--md-sys-color-on-surface-variant) );--pfx-editorial-form-accent: var( --editorial-cta-primary, var(--editorial-accent, var(--md-sys-color-primary)) );--pfx-editorial-form-accent-text: var( --editorial-cta-primary-text, var(--editorial-accent-contrast, var(--md-sys-color-on-primary)) );--pfx-editorial-form-radius: var(--editorial-card-radius, 18px);--pfx-editorial-form-field-radius: var( --editorial-field-radius, var(--editorial-card-radius, 14px) );--pfx-editorial-form-border-width: var(--editorial-card-border-width, 1px);--pfx-editorial-form-field-border-width: var(--editorial-field-border-width, 1px);--pfx-editorial-form-shadow: var(--editorial-card-shadow, none);--md-sys-color-surface: var( --pfx-editorial-form-surface, var(--md-sys-color-surface) );--md-sys-color-surface-container: var( --pfx-editorial-form-surface, var(--md-sys-color-surface-container) );--md-sys-color-surface-container-low: var( --pfx-editorial-form-surface-muted, var(--md-sys-color-surface-container-low) );--md-sys-color-surface-variant: var( --pfx-editorial-form-field-surface, var(--md-sys-color-surface-variant) );--md-sys-color-outline: var( --pfx-editorial-form-field-outline, var(--md-sys-color-outline) );--md-sys-color-outline-variant: var( --pfx-editorial-form-border, var(--md-sys-color-outline-variant) );--md-sys-color-on-surface: var( --pfx-editorial-form-text, var(--md-sys-color-on-surface) );--md-sys-color-on-surface-variant: var( --pfx-editorial-form-text-muted, var(--md-sys-color-on-surface-variant) );--md-sys-color-primary: var( --pfx-editorial-form-accent, var(--md-sys-color-primary) );--md-sys-color-on-primary: var( --pfx-editorial-form-accent-text, var(--md-sys-color-on-primary) );--md-sys-color-on-surface-rgb: var( --editorial-text-primary-rgb, var(--md-sys-color-on-surface-rgb) );--mat-sys-on-surface: var( --pfx-editorial-form-text, var(--mat-sys-on-surface) );--mat-sys-on-surface-variant: var( --pfx-editorial-form-text-muted, var(--mat-sys-on-surface-variant) );--mat-sys-on-surface-rgb: var( --editorial-text-primary-rgb, var(--mat-sys-on-surface-rgb, var(--md-sys-color-on-surface-rgb)) );color:var(--pfx-editorial-form-text);color-scheme:light}.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-section-divider);border-radius:var(--pfx-editorial-form-radius);padding:var(--pfx-form-section-padding);background:var(--pfx-form-section-surface-flat);box-shadow:none;transition:all .2s ease;position:relative}.praxis-dynamic-form.editorial-visual-context .form-section{border:var(--pfx-editorial-form-border-width) solid var(--pfx-editorial-form-border)!important;background:var(--pfx-editorial-form-surface)!important;box-shadow:var(--editorial-card-shadow, none)}.praxis-dynamic-form.editorial-visual-context .form-section.section-appearance-step{background-color:var(--pfx-editorial-form-surface)!important;background-image:linear-gradient(180deg,color-mix(in srgb,var(--editorial-accent, var(--md-sys-color-primary)) 6%,transparent) 0%,transparent 132px)!important;background-repeat:no-repeat!important}.section-drop-wrapper>.form-section{margin-bottom:var(--pfx-section-gap, 20px)}.section-drop-wrapper:last-of-type>.form-section{margin-bottom:0}.praxis-dynamic-form>praxis-form-actions[data-actions-placement=afterSections] .form-actions{margin-top:var(--pfx-actions-gap-top, var(--pfx-section-gap, 20px))}.section-title{margin:0 0 var(--pfx-section-title-mb, 12px) 0;font-family:var(--editorial-title-font-family, var(--editorial-body-font-family, inherit));font-size:var(--editorial-step-title-size, 1.12rem);font-weight:700;color:var(--pfx-form-label-strong)}.section-heading{display:flex;align-items:flex-start;gap:12px;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--pfx-form-section-divider)}.section-heading.align-center{flex-direction:column;align-items:center;text-align:center}.section-heading.align-center .section-heading-text{display:grid;justify-items:center}.section-step-label{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;margin:0 0 8px;border-radius:999px;background:color-mix(in srgb,var(--pfx-editorial-form-accent) 10%,transparent);color:color-mix(in srgb,var(--pfx-editorial-form-accent) 84%,var(--pfx-form-label-strong) 16%);font-size:.72rem;font-weight:800;font-family:var(--editorial-title-font-family, var(--editorial-body-font-family, inherit));letter-spacing:.08em;text-transform:uppercase}.section-heading-text{flex:1 1 auto;min-width:0}.section-heading-actions{display:inline-flex;align-items:center;align-self:flex-start;flex-wrap:wrap;gap:4px;margin-left:auto}.section-heading-actions.align-center{align-self:center;margin-left:0}.section-heading-action-btn{color:var(--pfx-form-label-muted)}.section-heading-action-btn .mat-mdc-progress-spinner,.section-heading-action-btn mat-progress-spinner{--mdc-circular-progress-active-indicator-color: currentColor}.section-heading-action-btn.loading{opacity:.72;pointer-events:none}.section-heading-action-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.section-collapse-btn{margin-left:4px;color:var(--pfx-form-label-muted)}.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-title.title-large,.section-title.title-medium,.section-title.title-small,.section-title.headline-small{font-family:var(--editorial-title-font-family, var(--editorial-body-font-family, inherit));font-weight:var(--editorial-title-weight, 600)}.section-description{margin:0;font-family:var(--editorial-body-font-family, inherit);font-size:.93rem;color:var(--pfx-form-label-muted);line-height:1.6}.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)}.section-description.body-large,.section-description.body-medium,.section-description.body-small{font-family:var(--editorial-body-font-family, inherit);font-weight:var(--editorial-body-weight, 400)}.section-title.align-center,.section-description.align-center,.section-step-label.align-center{text-align:center}.form-section.section-appearance-plain{border-color:transparent;border-radius:0;padding:0;background:transparent}.form-section.section-appearance-plain .section-heading{margin-bottom:14px}.form-section.section-appearance-step{border-radius:var(--pfx-editorial-form-radius);padding:var(--pfx-form-section-padding);background:var(--pfx-form-section-surface-flat);border-color:var(--pfx-form-section-divider);box-shadow:none}.praxis-dynamic-form.editorial-visual-context .form-section.section-appearance-step{border-radius:var(--editorial-card-radius, 20px);box-shadow:none}.form-section.section-appearance-step .section-heading{margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--pfx-form-section-divider)}.form-section.section-appearance-step .section-title{font:var(--mdc-typography-title-large, 700 22px/28px system-ui);color:var(--pfx-form-label-strong);margin-bottom:8px}.form-section.section-appearance-step .section-description{color:var(--pfx-form-label-muted);max-width:60ch}.form-section.section-appearance-step .section-step-label{min-height:24px;padding:0 10px;margin-bottom:10px;box-shadow:none}.form-section.section-appearance-step .section-heading.align-center .section-description{max-width:52ch}.form-section.section-appearance-step .section-body{display:grid;gap:8px;padding-top:0}.form-section.section-appearance-step .form-row{margin-bottom:var(--pfx-field-gap, 1rem)}.form-section.section-appearance-step .form-column{gap:var(--pfx-field-gap, 12px)}.form-section .form-editorial-blocks{display:grid;gap:16px}.form-section .form-editorial-blocks[data-editorial-placement=beforeActions]{margin-top:24px;padding-top:18px;border-top:1px solid var(--pfx-form-section-divider)}.form-section.section-appearance-step .form-editorial-blocks[data-editorial-placement=beforeActions]{gap:18px}.form-section.section-appearance-step .form-editorial-blocks[data-editorial-placement=beforeActions]>*+*{margin-top:2px}.praxis-dynamic-form>praxis-form-actions[data-actions-placement=afterSections] .form-actions{margin-top:18px;padding-top:0}.praxis-dynamic-form>.form-editorial-blocks[data-editorial-placement=after]{margin-top:6px}:host-context(.mdc-theme-dark) .form-section.section-appearance-step,:host-context(.theme-dark) .form-section.section-appearance-step{border-color:color-mix(in srgb,var(--pfx-editorial-form-border) 82%,transparent);box-shadow:none}:host-context(.mdc-theme-dark) .form-section.section-appearance-step .section-title,:host-context(.theme-dark) .form-section.section-appearance-step .section-title{color:color-mix(in srgb,var(--pfx-editorial-form-text) 96%,white)}:host-context(.mdc-theme-dark) .form-section.section-appearance-step .section-description,:host-context(.theme-dark) .form-section.section-appearance-step .section-description{color:color-mix(in srgb,var(--pfx-editorial-form-text-muted) 86%,var(--pfx-editorial-form-text) 14%)}:host-context(.mdc-theme-dark) .section-step-label,:host-context(.theme-dark) .section-step-label{background:color-mix(in srgb,var(--md-sys-color-primary-container) 54%,transparent);color:color-mix(in srgb,var(--md-sys-color-primary) 88%,white)}:host-context(.mdc-theme-dark) .form-section .form-editorial-blocks[data-editorial-placement=beforeActions],:host-context(.theme-dark) .form-section .form-editorial-blocks[data-editorial-placement=beforeActions]{border-top-color:color-mix(in srgb,var(--md-sys-color-outline-variant) 90%,transparent)}.inline-edit-btn{margin-left:6px;vertical-align:middle;--mdc-icon-button-size: 28px;--mdc-icon-button-icon-size: 16px}.inline-edit-btn mat-icon{font-size:16px;width:16px;height:16px}.section-body.collapsed{border:1px dashed var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-low);border-radius:6px;padding:8px 10px}.section-collapsed-placeholder{display:flex;align-items:center;gap:8px;color:var(--md-sys-color-on-surface-variant);font-size:.95rem}.section-collapsed-placeholder mat-icon{font-size:20px;width:20px;height:20px}.form-row{display:flex;gap:1.1rem;margin-bottom:var(--pfx-field-gap, 1.1rem);transition:all .2s ease;border-radius:6px;position:relative}.praxis-dynamic-form.pfx-mounting .form-row{opacity:0;transform:translateY(var(--pdx-form-mount-offset, 6px));animation:pdxFormMount var(--pdx-form-mount-duration, .16s) ease-out both;animation-delay:calc(var(--pfx-mount-index, 0) * var(--pdx-form-mount-stagger, 20ms))}@media(prefers-reduced-motion:reduce){.praxis-dynamic-form.pfx-mounting .form-row{animation:none;opacity:1;transform:none}}@keyframes pdxFormMount{to{opacity:1;transform:translateY(0)}}.praxis-dynamic-form .mat-mdc-form-field{width:100%;margin-bottom:var(--pfx-field-gap, 10px);font-family:inherit;--mdc-filled-text-field-container-color: var(--pfx-form-field-surface-rest);--mdc-filled-text-field-focus-active-indicator-color: var(--pfx-editorial-form-accent);--mdc-filled-text-field-active-indicator-color: var(--pfx-editorial-form-field-outline);--mdc-filled-text-field-hover-active-indicator-color: var(--pfx-editorial-form-accent);--mdc-filled-text-field-focus-label-text-color: var(--pfx-editorial-form-accent);--mdc-filled-text-field-label-text-color: var(--pfx-form-label-muted);--mdc-filled-text-field-input-text-color: var(--pfx-editorial-form-text);--mdc-filled-text-field-caret-color: var(--pfx-editorial-form-accent);--mdc-filled-text-field-input-text-placeholder-color: color-mix( in srgb, var(--pfx-editorial-form-text-muted) 82%, transparent );--mdc-outlined-text-field-outline-color: var(--pfx-editorial-form-field-outline);--mdc-outlined-text-field-hover-outline-color: var(--pfx-editorial-form-accent);--mdc-outlined-text-field-focus-outline-color: var(--pfx-editorial-form-accent);--mdc-outlined-text-field-focus-label-text-color: var(--pfx-editorial-form-accent);--mdc-outlined-text-field-label-text-color: var(--pfx-form-label-muted);--mdc-outlined-text-field-input-text-color: var(--pfx-editorial-form-text);--mdc-filled-text-field-container-shape: var(--pfx-editorial-form-field-radius);--mdc-outlined-text-field-container-shape: var(--pfx-editorial-form-field-radius);--mdc-filled-text-field-active-indicator-height: var(--pfx-editorial-form-field-border-width);--mdc-filled-text-field-focus-active-indicator-height: var(--pfx-editorial-form-field-border-width);--mdc-outlined-text-field-outline-width: var(--pfx-editorial-form-field-border-width);--mdc-outlined-text-field-focus-outline-width: var(--pfx-editorial-form-field-border-width);--mat-select-enabled-trigger-text-color: var(--pfx-editorial-form-text);--mat-select-enabled-arrow-color: var(--pfx-form-label-muted);--mat-form-field-enabled-select-arrow-color: var(--pfx-form-label-muted);--mat-form-field-focus-select-arrow-color: var(--pfx-editorial-form-accent);--mat-form-field-hover-state-layer-opacity: 0;--mat-form-field-focus-state-layer-opacity: 0}.praxis-dynamic-form.editorial-visual-context .mat-mdc-form-field{font-family:var(--editorial-body-font-family, inherit)}.praxis-dynamic-form .mat-mdc-text-field-wrapper,.praxis-dynamic-form .mdc-text-field{background:var(--pfx-form-field-surface-rest);border-radius:var(--pfx-editorial-form-field-radius);min-height:var(--pfx-form-field-min-height);transition:background-color .16s ease,box-shadow .16s ease,border-color .16s ease}.praxis-dynamic-form.editorial-visual-context .mat-mdc-text-field-wrapper,.praxis-dynamic-form.editorial-visual-context .mdc-text-field,.praxis-dynamic-form.editorial-visual-context .mdc-text-field--filled,.praxis-dynamic-form.editorial-visual-context .mdc-text-field--outlined{background-color:var(--pfx-form-field-surface-rest)!important;background:var(--pfx-form-field-surface-rest)!important}.praxis-dynamic-form .mat-mdc-form-field .mdc-floating-label,.praxis-dynamic-form .mat-mdc-form-field .mat-mdc-form-field-hint,.praxis-dynamic-form .mat-mdc-form-field .mat-mdc-form-field-error,.praxis-dynamic-form .mat-mdc-form-field .mat-mdc-form-field-required-marker,.praxis-dynamic-form .mat-mdc-form-field .mat-mdc-select-arrow,.praxis-dynamic-form .mat-mdc-form-field .mat-mdc-select-placeholder,.praxis-dynamic-form .mat-mdc-form-field .mat-mdc-form-field-icon-suffix,.praxis-dynamic-form .mat-mdc-form-field .mat-mdc-form-field-icon-prefix{color:var(--pfx-form-label-muted)}.praxis-dynamic-form .mat-mdc-input-element,.praxis-dynamic-form .mat-mdc-select-value-text,.praxis-dynamic-form .mat-mdc-form-field-infix,.praxis-dynamic-form .mat-mdc-select-min-line{color:var(--pfx-editorial-form-text)}.praxis-dynamic-form .mat-mdc-form-field:hover .mat-mdc-text-field-wrapper,.praxis-dynamic-form .mat-mdc-form-field:hover .mdc-text-field,.praxis-dynamic-form .mat-mdc-form-field.mat-focused .mat-mdc-text-field-wrapper,.praxis-dynamic-form .mat-mdc-form-field.mat-focused .mdc-text-field{background:var(--pfx-form-field-surface-focus)}.praxis-dynamic-form.editorial-visual-context .mat-mdc-input-element,.praxis-dynamic-form.editorial-visual-context .mat-mdc-select-value-text,.praxis-dynamic-form.editorial-visual-context .mat-mdc-form-field-infix,.praxis-dynamic-form.editorial-visual-context .mat-mdc-select-min-line,.praxis-dynamic-form.editorial-visual-context .mdc-text-field__input{color:var(--pfx-editorial-form-text)!important;-webkit-text-fill-color:var(--pfx-editorial-form-text)!important}.praxis-dynamic-form.editorial-visual-context .mat-mdc-form-field .mdc-floating-label,.praxis-dynamic-form.editorial-visual-context .mat-mdc-form-field .mat-mdc-form-field-hint,.praxis-dynamic-form.editorial-visual-context .mat-mdc-form-field .mat-mdc-form-field-error,.praxis-dynamic-form.editorial-visual-context .mat-mdc-form-field .mat-mdc-form-field-required-marker,.praxis-dynamic-form.editorial-visual-context .mat-mdc-form-field .mat-mdc-select-arrow,.praxis-dynamic-form.editorial-visual-context .mat-mdc-form-field .mat-mdc-select-placeholder,.praxis-dynamic-form.editorial-visual-context .mat-mdc-form-field .mat-mdc-form-field-icon-suffix,.praxis-dynamic-form.editorial-visual-context .mat-mdc-form-field .mat-mdc-form-field-icon-prefix{color:var(--pfx-editorial-form-text-muted)!important}.praxis-dynamic-form.editorial-visual-context .mat-mdc-floating-label,.praxis-dynamic-form.editorial-visual-context .mdc-floating-label,.praxis-dynamic-form.editorial-visual-context .mdc-text-field__input::placeholder{color:color-mix(in srgb,var(--pfx-editorial-form-text) 68%,transparent)!important}.praxis-dynamic-form.editorial-visual-context .mat-mdc-input-element::placeholder,.praxis-dynamic-form.editorial-visual-context textarea.mat-mdc-input-element::placeholder{color:color-mix(in srgb,var(--pfx-editorial-form-text) 58%,transparent)!important}.praxis-dynamic-form .mat-mdc-radio-button,.praxis-dynamic-form .mat-mdc-checkbox,.praxis-dynamic-form .mat-mdc-slide-toggle{--mdc-radio-selected-icon-color: var(--pfx-editorial-form-accent);--mdc-radio-selected-hover-icon-color: var(--pfx-editorial-form-accent);--mdc-radio-selected-focus-icon-color: var(--pfx-editorial-form-accent);--mdc-checkbox-selected-checkmark-color: var(--pfx-editorial-form-accent-text);--mdc-checkbox-selected-focus-icon-color: var(--pfx-editorial-form-accent);--mdc-checkbox-selected-hover-icon-color: var(--pfx-editorial-form-accent);--mdc-checkbox-selected-icon-color: var(--pfx-editorial-form-accent);--mdc-switch-selected-focus-state-layer-color: var(--pfx-editorial-form-accent);--mdc-switch-selected-handle-color: var(--pfx-editorial-form-accent);--mdc-switch-selected-track-color: color-mix(in srgb, var(--pfx-editorial-form-accent) 45%, #fff)}.praxis-dynamic-form [data-field-type=input],.praxis-dynamic-form [data-field-type=textarea],.praxis-dynamic-form [data-field-type=email],.praxis-dynamic-form [data-field-type=password],.praxis-dynamic-form [data-field-type=url],.praxis-dynamic-form [data-field-type=search],.praxis-dynamic-form [data-field-type=phone],.praxis-dynamic-form [data-field-type=numericTextBox],.praxis-dynamic-form [data-field-type=currency],.praxis-dynamic-form [data-field-type=cpfCnpj],.praxis-dynamic-form [data-field-type=date],.praxis-dynamic-form [data-field-type=dateInput],.praxis-dynamic-form [data-field-type=dateRange],.praxis-dynamic-form [data-field-type=dateTimeLocal],.praxis-dynamic-form [data-field-type=time],.praxis-dynamic-form [data-field-type=timePicker],.praxis-dynamic-form [data-field-type=timeRange],.praxis-dynamic-form [data-field-type=month],.praxis-dynamic-form [data-field-type=week],.praxis-dynamic-form [data-field-type=yearInput],.praxis-dynamic-form [data-field-type=select],.praxis-dynamic-form [data-field-type=multi-select],.praxis-dynamic-form [data-field-type=searchable-select],.praxis-dynamic-form [data-field-type=async-select],.praxis-dynamic-form [data-field-type=autocomplete],.praxis-dynamic-form [data-field-type=tree-select],.praxis-dynamic-form [data-field-type=multi-select-tree],.praxis-dynamic-form [data-field-type=priceRange],.praxis-dynamic-form [data-field-type=file-upload]{display:block;width:100%;min-width:0}.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{display:grid;align-content:start;gap:var(--pfx-field-gap, 10px);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}.form-blocking-overlay{position:absolute;inset:0;background:transparent;color:var(--md-sys-color-on-surface);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}.section-heading{gap:10px;margin-bottom:16px;padding-bottom:14px}}.section-title{display:flex;align-items:center;gap:8px}.section-title .section-title-icon{font-size:1.25em;line-height:1}.section-title-avatar{--_pfx-form-section-avatar-size: var(--pfx-form-section-avatar-size-md, var(--pfx-form-section-avatar-size, 32px));display:inline-flex;align-items:center;justify-content:center;width:var(--_pfx-form-section-avatar-size);height:var(--_pfx-form-section-avatar-size);border-radius:999px;flex:0 0 var(--_pfx-form-section-avatar-size);overflow:hidden}.section-title-avatar.size-sm{--_pfx-form-section-avatar-size: var(--pfx-form-section-avatar-size-sm, 24px)}.section-title-avatar.size-md{--_pfx-form-section-avatar-size: var(--pfx-form-section-avatar-size-md, var(--pfx-form-section-avatar-size, 32px))}.section-title-avatar.size-lg{--_pfx-form-section-avatar-size: var(--pfx-form-section-avatar-size-lg, 40px)}.section-title-avatar-image{object-fit:cover;border:1px solid color-mix(in srgb,var(--pfx-form-section-divider) 72%,transparent);background:var(--pfx-form-section-surface-flat)}.section-title-avatar-text,.section-title-avatar-placeholder{background:color-mix(in srgb,var(--pfx-editorial-form-accent) 14%,var(--pfx-form-section-surface-flat));color:color-mix(in srgb,var(--pfx-editorial-form-accent) 82%,var(--pfx-form-label-strong) 18%);font-size:calc(var(--_pfx-form-section-avatar-size) * .41);font-weight:800;letter-spacing:.04em;text-transform:uppercase}.section-title-avatar-placeholder mat-icon{font-size:calc(var(--_pfx-form-section-avatar-size) * .5625);width:calc(var(--_pfx-form-section-avatar-size) * .5625);height:calc(var(--_pfx-form-section-avatar-size) * .5625);line-height:calc(var(--_pfx-form-section-avatar-size) * .5625)}.section-title-avatar-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.GenericCrudService }, { type: i1$3.FormBuilder }, { type: i0.ChangeDetectorRef }, { type: FormLayoutService }, { type: FormContextService }, { type: FormRulesService }, { type: i6$1.SettingsPanelService }, { type: i2.MatDialog }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [ASYNC_CONFIG_STORAGE]
@@ -13765,11 +13954,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 type: Output
             }] } });
 
+const ACTIONS_EDITOR_I18N_NAMESPACE = 'praxisDynamicFormActionsEditor';
+const ACTIONS_EDITOR_I18N_CONFIG = {
+    namespaces: {
+        [ACTIONS_EDITOR_I18N_NAMESPACE]: {
+            'pt-BR': {
+                'custom.variant': 'Variante',
+                'custom.size': 'Tamanho',
+                'custom.size.small': 'Pequeno',
+                'custom.size.medium': 'Médio',
+                'custom.size.large': 'Grande',
+                'custom.tooltip': 'Tooltip',
+                'custom.shortcut': 'Atalho de Teclado',
+                'custom.shortcut.placeholder': 'Ex.: ctrl+shift+a',
+                'custom.className': 'Classe CSS',
+                'custom.disabled': 'Desabilitado',
+                'custom.loading': 'Loading',
+                'custom.style': 'Estilos do botão (JSON)',
+                'custom.style.placeholder': '{"borderRadius":"999px"}',
+                'custom.order.moveUp': 'Mover "{{label}}" para cima',
+                'custom.order.moveDown': 'Mover "{{label}}" para baixo',
+                'custom.order.moveUp.tooltip': 'Mover para cima',
+                'custom.order.moveDown.tooltip': 'Mover para baixo',
+                'custom.validation.invalidJson': 'JSON inválido.',
+                'custom.validation.objectJson': 'Informe um objeto JSON válido.',
+            },
+            'en-US': {
+                'custom.variant': 'Variant',
+                'custom.size': 'Size',
+                'custom.size.small': 'Small',
+                'custom.size.medium': 'Medium',
+                'custom.size.large': 'Large',
+                'custom.tooltip': 'Tooltip',
+                'custom.shortcut': 'Keyboard shortcut',
+                'custom.shortcut.placeholder': 'Example: ctrl+shift+a',
+                'custom.className': 'CSS class',
+                'custom.disabled': 'Disabled',
+                'custom.loading': 'Loading',
+                'custom.style': 'Button styles (JSON)',
+                'custom.style.placeholder': '{"borderRadius":"999px"}',
+                'custom.order.moveUp': 'Move "{{label}}" up',
+                'custom.order.moveDown': 'Move "{{label}}" down',
+                'custom.order.moveUp.tooltip': 'Move up',
+                'custom.order.moveDown.tooltip': 'Move down',
+                'custom.validation.invalidJson': 'Invalid JSON.',
+                'custom.validation.objectJson': 'Provide a valid JSON object.',
+            },
+        },
+    },
+};
+
 let ActionsEditorComponent$1 = class ActionsEditorComponent {
     config;
     configChange = new EventEmitter();
     containerStylesText = '';
+    customActionStyleTexts = new Map();
+    customActionStyleErrors = new Map();
     globalActionCatalogSource = inject(GLOBAL_ACTION_CATALOG, { optional: true }) ?? [];
+    i18n = inject(PraxisI18nService);
     legacyActionSpecs = GLOBAL_ACTION_SPEC_CATALOG;
     globalActionCatalog = this.buildGlobalActionCatalog();
     customActionValue = '__custom__';
@@ -13789,7 +14031,7 @@ let ActionsEditorComponent$1 = class ActionsEditorComponent {
     onGapTopInput(val) {
         let num = Number(val);
         if (!isFinite(num)) {
-            // limpar volta ao padrão
+            // limpar volta ao padrão
             const styles = { ...this.actions?.containerStyles };
             if (styles) {
                 delete styles.marginTop;
@@ -13831,11 +14073,28 @@ let ActionsEditorComponent$1 = class ActionsEditorComponent {
     }
     ngOnChanges() {
         this.syncContainerStylesText();
+        this.syncCustomActionStyleTexts();
     }
     syncContainerStylesText() {
         const styles = this.config.actions?.containerStyles;
         this.containerStylesText = styles ? JSON.stringify(styles, null, 2) : '';
     }
+    syncCustomActionStyleTexts() {
+        const activeKeys = new Set();
+        for (const [index, action] of (this.actions.custom || []).entries()) {
+            const key = this.getCustomActionStyleKey(action, index);
+            activeKeys.add(key);
+            if (!this.customActionStyleTexts.has(key)) {
+                this.customActionStyleTexts.set(key, this.stringifyJson(action.style));
+            }
+        }
+        for (const key of Array.from(this.customActionStyleTexts.keys())) {
+            if (!activeKeys.has(key)) {
+                this.customActionStyleTexts.delete(key);
+                this.customActionStyleErrors.delete(key);
+            }
+        }
+    }
     getActionSpecById(id) {
         return this.globalActionCatalog.find((item) => item.id === id);
     }
@@ -13918,19 +14177,47 @@ let ActionsEditorComponent$1 = class ActionsEditorComponent {
         }
         return Array.from(merged.values());
     }
+    getActionCatalogLabel(spec) {
+        if (spec?.id === 'surface.open') {
+            return this.i18n.t('action.surfaceOpen.label', undefined, spec.label || '', SURFACE_OPEN_I18N_NAMESPACE);
+        }
+        return spec?.label || '';
+    }
+    tx(key, fallback, params) {
+        return this.i18n.t(key, params, fallback, ACTIONS_EDITOR_I18N_NAMESPACE);
+    }
+    getCustomActionTitle(action) {
+        return action.label || 'Novo Botão Customizado';
+    }
+    getMoveCustomActionAriaLabel(direction, action) {
+        const key = direction === 'up' ? 'custom.order.moveUp' : 'custom.order.moveDown';
+        const fallback = direction === 'up'
+            ? `Mover "${this.getCustomActionTitle(action)}" para cima`
+            : `Mover "${this.getCustomActionTitle(action)}" para baixo`;
+        return this.tx(key, fallback, { label: this.getCustomActionTitle(action) });
+    }
+    getCustomStylePlaceholder() {
+        return this.tx('custom.style.placeholder', '{"borderRadius":"999px"}');
+    }
+    getActionCatalogDescription(spec) {
+        if (spec?.id === 'surface.open') {
+            return this.i18n.t('action.surfaceOpen.description', undefined, spec.description || '', SURFACE_OPEN_I18N_NAMESPACE);
+        }
+        return spec?.description || '';
+    }
     mapCatalogEntryToActionSpec(entry) {
         const hasPayloadSchema = !!entry.payloadSchema;
         return {
             id: entry.id,
-            label: entry.label,
-            description: entry.description || '',
+            label: this.getActionCatalogLabel(entry),
+            description: this.getActionCatalogDescription(entry),
             param: hasPayloadSchema
                 ? {
                     label: 'Payload (JSON opcional)',
                     placeholder: entry.payloadSchema?.example
                         ? JSON.stringify(entry.payloadSchema.example)
                         : '{ }',
-                    hint: 'Use JSON quando a ação global do app exigir payload estruturado.',
+                    hint: 'Use JSON quando a ação global do app exigir payload estruturado.',
                     required: !!entry.payloadSchema?.required?.length,
                 }
                 : undefined,
@@ -13942,6 +14229,16 @@ let ActionsEditorComponent$1 = class ActionsEditorComponent {
             return undefined;
         return getGlobalActionUiSchema(parsed.id);
     }
+    getSurfaceOpenActionPayload(action) {
+        const info = this.getActionParamInfo(action.action);
+        const payload = info.isJson && info.json && typeof info.json === 'object' && !Array.isArray(info.json)
+            ? info.json
+            : undefined;
+        return this.normalizeSurfaceOpenPayload(payload);
+    }
+    onSurfaceOpenActionPayloadChange(action, payload, index) {
+        this.updateCustomAction(index, 'action', `surface.open:${JSON.stringify(this.normalizeSurfaceOpenPayload(payload))}`);
+    }
     shouldShowGlobalActionField(action, field) {
         if (!field.dependsOnKey)
             return true;
@@ -14093,7 +14390,7 @@ let ActionsEditorComponent$1 = class ActionsEditorComponent {
                     this.clearActionFieldError(action, field.key);
                 }
                 catch {
-                    this.setActionFieldError(action, field.key, 'JSON inválido.');
+                    this.setActionFieldError(action, field.key, 'JSON inválido.');
                     return;
                 }
             }
@@ -14151,6 +14448,30 @@ let ActionsEditorComponent$1 = class ActionsEditorComponent {
             return '';
         }
     }
+    normalizeSurfaceOpenPayload(payload) {
+        return {
+            presentation: payload?.presentation === 'drawer' ? 'drawer' : 'modal',
+            title: payload?.title,
+            subtitle: payload?.subtitle,
+            icon: payload?.icon,
+            size: payload?.size && Object.keys(payload.size).length
+                ? { ...payload.size }
+                : undefined,
+            widget: {
+                id: String(payload?.widget?.id || ''),
+                inputs: { ...(payload?.widget?.inputs || {}) },
+                bindingOrder: payload?.widget?.bindingOrder?.length
+                    ? [...payload.widget.bindingOrder]
+                    : undefined,
+            },
+            bindings: payload?.bindings?.length
+                ? payload.bindings.map((binding) => ({ ...binding }))
+                : [],
+            context: payload?.context && typeof payload.context === 'object' && !Array.isArray(payload.context)
+                ? { ...payload.context }
+                : undefined,
+        };
+    }
     setActionFieldError(action, key, message) {
         const draftKey = this.getActionDraftKey(action);
         const errors = this.actionFieldErrors.get(draftKey) || {};
@@ -14479,11 +14800,14 @@ let ActionsEditorComponent$1 = class ActionsEditorComponent {
             },
         };
         this.configChange.emit(newConfig);
+        if (key === 'style') {
+            this.syncCustomActionStyleTexts();
+        }
     }
     addCustomButton() {
         const newButton = {
             id: `custom_${Date.now()}`,
-            label: 'Novo Botão',
+            label: 'Novo Botão',
             visible: true,
             color: 'basic',
             action: `custom_action_${Date.now()}`,
@@ -14498,6 +14822,38 @@ let ActionsEditorComponent$1 = class ActionsEditorComponent {
         };
         this.configChange.emit(newConfig);
     }
+    canMoveCustomActionUp(index) {
+        return index > 0;
+    }
+    canMoveCustomActionDown(index) {
+        return index >= 0 && index < (this.actions.custom?.length || 0) - 1;
+    }
+    moveCustomActionUp(index) {
+        this.reorderCustomAction(index, index - 1);
+    }
+    moveCustomActionDown(index) {
+        this.reorderCustomAction(index, index + 1);
+    }
+    reorderCustomAction(fromIndex, toIndex) {
+        const customActions = [...(this.actions.custom || [])];
+        if (fromIndex < 0
+            || toIndex < 0
+            || fromIndex >= customActions.length
+            || toIndex >= customActions.length
+            || fromIndex === toIndex) {
+            return;
+        }
+        const [moved] = customActions.splice(fromIndex, 1);
+        customActions.splice(toIndex, 0, moved);
+        const newConfig = {
+            ...this.config,
+            actions: {
+                ...this.actions,
+                custom: customActions,
+            },
+        };
+        this.configChange.emit(newConfig);
+    }
     removeCustomButton(index) {
         const customActions = [...(this.actions.custom || [])];
         customActions.splice(index, 1);
@@ -14549,12 +14905,70 @@ let ActionsEditorComponent$1 = class ActionsEditorComponent {
             // keep text; no update on parse error
         }
     }
+    getCustomActionStyleText(action, index) {
+        const key = this.getCustomActionStyleKey(action, index);
+        if (this.customActionStyleTexts.has(key)) {
+            return this.customActionStyleTexts.get(key) || '';
+        }
+        const text = this.stringifyJson(action.style);
+        this.customActionStyleTexts.set(key, text);
+        return text;
+    }
+    onCustomActionStyleTextChange(index, value) {
+        const action = this.actions.custom?.[index];
+        if (!action)
+            return;
+        const key = this.getCustomActionStyleKey(action, index);
+        this.customActionStyleTexts.set(key, value);
+    }
+    applyCustomActionStyleText(action, index) {
+        const key = this.getCustomActionStyleKey(action, index);
+        const raw = (this.customActionStyleTexts.get(key) || '').trim();
+        if (!raw) {
+            this.customActionStyleErrors.delete(key);
+            this.updateCustomAction(index, 'style', undefined);
+            return;
+        }
+        try {
+            const parsed = JSON.parse(raw);
+            if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+                this.customActionStyleErrors.set(key, this.tx('custom.validation.objectJson', 'Informe um objeto JSON válido.'));
+                return;
+            }
+            this.customActionStyleErrors.delete(key);
+            this.updateCustomAction(index, 'style', parsed);
+        }
+        catch {
+            this.customActionStyleErrors.set(key, this.tx('custom.validation.invalidJson', 'JSON inválido.'));
+        }
+    }
+    hasCustomActionStyleError(action, index) {
+        const key = this.getCustomActionStyleKey(action, index);
+        return this.customActionStyleErrors.has(key);
+    }
+    getCustomActionStyleError(action, index) {
+        const key = this.getCustomActionStyleKey(action, index);
+        return this.customActionStyleErrors.get(key) || '';
+    }
+    getCustomActionStyleKey(action, index) {
+        return `custom:${action.id || action.action || action.label || `index-${index}`}`;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ActionsEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: ActionsEditorComponent, isStandalone: true, selector: "praxis-actions-editor", inputs: { config: "config" }, outputs: { configChange: "configChange" }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: ActionsEditorComponent, isStandalone: true, selector: "praxis-actions-editor", inputs: { config: "config" }, outputs: { configChange: "configChange" }, providers: [
+            providePraxisI18nConfig(SURFACE_OPEN_I18N_CONFIG),
+            providePraxisI18nConfig(ACTIONS_EDITOR_I18N_CONFIG),
+        ], usesOnChanges: true, ngImport: i0, template: `
     <ng-template #globalActionFields let-action let-index="index">
       @if (getGlobalActionSchema(action); as schema) {
         <div class="action-global-fields">
-          <div class="action-global-title">Configuração da ação global</div>
+          <div class="action-global-title">Configuração da ação global</div>
+          @if (schema.editorMode === 'surface-open') {
+            <praxis-surface-open-action-editor
+              [value]="getSurfaceOpenActionPayload(action)"
+              hostKind="form"
+              (valueChange)="onSurfaceOpenActionPayloadChange(action, $event, index)"
+            ></praxis-surface-open-action-editor>
+          } @else {
           <div class="action-global-grid">
             @for (field of schema.fields; track field.key) {
               @if (shouldShowGlobalActionField(action, field)) {
@@ -14562,7 +14976,7 @@ let ActionsEditorComponent$1 = class ActionsEditorComponent {
                   <div class="action-section-title">Essencial</div>
                 }
                 @if (schema.id === 'showAlert' && field.key === 'title') {
-                  <div class="action-section-title">Diálogo (opcional)</div>
+                  <div class="action-section-title">Diálogo (opcional)</div>
                 }
                 @if (field.type === 'toggle') {
                   <mat-slide-toggle
@@ -14621,7 +15035,7 @@ let ActionsEditorComponent$1 = class ActionsEditorComponent {
                       matSuffix
                       type="button"
                       class="help-icon-button"
-                      matTooltip="Informe um JSON válido."
+                      matTooltip="Informe um JSON válido."
                     >
                       <mat-icon>help_outline</mat-icon>
                     </button>
@@ -14680,23 +15094,24 @@ let ActionsEditorComponent$1 = class ActionsEditorComponent {
               }
             }
           </div>
+          }
         </div>
       }
     </ng-template>
     <mat-tab-group>
-      <mat-tab label="Botões Padrão">
+      <mat-tab label="Botões Padrão">
         <div class="editor-container">
           <mat-accordion multi>
             <mat-expansion-panel>
               <mat-expansion-panel-header>
-                Botão de Submeter (Submit)
+                Botão de Submeter (Submit)
               </mat-expansion-panel-header>
               <ng-template matExpansionPanelContent>
                 <div class="action-fields">
                   <mat-slide-toggle
                     [checked]="actions.submit.visible"
                     (change)="updateAction('submit', 'visible', $event.checked)"
-                    >Visível</mat-slide-toggle
+                    >Visível</mat-slide-toggle
                   >
                   <mat-form-field>
                     <mat-label>Label</mat-label>
@@ -14713,7 +15128,7 @@ let ActionsEditorComponent$1 = class ActionsEditorComponent {
                     />
                   </mat-form-field>
               <mat-form-field>
-                <mat-label>Ícone</mat-label>
+                <mat-label>Ícone</mat-label>
                 <input
                   matInput
                   [value]="actions.submit.icon"
@@ -14775,14 +15190,14 @@ let ActionsEditorComponent$1 = class ActionsEditorComponent {
             <!-- Repetir para Cancel e Reset -->
             <mat-expansion-panel>
               <mat-expansion-panel-header>
-                Botão de Cancelar (Cancel)
+                Botão de Cancelar (Cancel)
               </mat-expansion-panel-header>
               <ng-template matExpansionPanelContent>
                 <div class="action-fields">
                   <mat-slide-toggle
                     [checked]="actions.cancel.visible"
                     (change)="updateAction('cancel', 'visible', $event.checked)"
-                    >Visível</mat-slide-toggle
+                    >Visível</mat-slide-toggle
                   >
                   <mat-form-field>
                     <mat-label>Label</mat-label>
@@ -14799,7 +15214,7 @@ let ActionsEditorComponent$1 = class ActionsEditorComponent {
                     />
                   </mat-form-field>
               <mat-form-field>
-                <mat-label>Ícone</mat-label>
+                <mat-label>Ícone</mat-label>
                 <input
                   matInput
                   [value]="actions.cancel.icon"
@@ -14856,14 +15271,14 @@ let ActionsEditorComponent$1 = class ActionsEditorComponent {
             </mat-expansion-panel>
             <mat-expansion-panel>
               <mat-expansion-panel-header>
-                Botão de Limpar (Reset)
+                Botão de Limpar (Reset)
               </mat-expansion-panel-header>
               <ng-template matExpansionPanelContent>
                 <div class="action-fields">
                   <mat-slide-toggle
                     [checked]="actions.reset.visible"
                     (change)="updateAction('reset', 'visible', $event.checked)"
-                    >Visível</mat-slide-toggle
+                    >Visível</mat-slide-toggle
                   >
                   <mat-form-field>
                     <mat-label>Label</mat-label>
@@ -14876,7 +15291,7 @@ let ActionsEditorComponent$1 = class ActionsEditorComponent {
                     />
                   </mat-form-field>
               <mat-form-field>
-                <mat-label>Ícone</mat-label>
+                <mat-label>Ícone</mat-label>
                 <input
                   matInput
                   [value]="actions.reset.icon"
@@ -14935,7 +15350,7 @@ let ActionsEditorComponent$1 = class ActionsEditorComponent {
         </div>
       </mat-tab>
 
-      <mat-tab label="Botões Customizados">
+      <mat-tab label="Botões Customizados">
         <div class="editor-container">
           <button
             mat-stroked-button
@@ -14943,7 +15358,7 @@ let ActionsEditorComponent$1 = class ActionsEditorComponent {
             (click)="addCustomButton()"
             class="add-button"
           >
-            <mat-icon>add</mat-icon> Adicionar Botão
+            <mat-icon>add</mat-icon> Adicionar Botão
           </button>
           <mat-accordion multi>
             @for (
@@ -14951,9 +15366,36 @@ let ActionsEditorComponent$1 = class ActionsEditorComponent {
               track customAction.id || customAction.action || $index;
               let i = $index
             ) {
-              <mat-expansion-panel>
+              <div class="custom-action-panel-shell">
+                <div class="custom-action-panel-toolbar">
+                  <div class="custom-action-order-controls">
+                    <button
+                      mat-icon-button
+                      type="button"
+                      [attr.aria-label]="getMoveCustomActionAriaLabel('up', customAction)"
+                      [matTooltip]="tx('custom.order.moveUp.tooltip', 'Mover para cima')"
+                      [disabled]="!canMoveCustomActionUp(i)"
+                      (click)="moveCustomActionUp(i)"
+                    >
+                      <mat-icon>arrow_upward</mat-icon>
+                    </button>
+                    <button
+                      mat-icon-button
+                      type="button"
+                      [attr.aria-label]="getMoveCustomActionAriaLabel('down', customAction)"
+                      [matTooltip]="tx('custom.order.moveDown.tooltip', 'Mover para baixo')"
+                      [disabled]="!canMoveCustomActionDown(i)"
+                      (click)="moveCustomActionDown(i)"
+                    >
+                      <mat-icon>arrow_downward</mat-icon>
+                    </button>
+                  </div>
+                </div>
+                <mat-expansion-panel>
                 <mat-expansion-panel-header>
-                  {{ customAction.label || 'Novo Botão Customizado' }}
+                  <mat-panel-title>
+                    {{ getCustomActionTitle(customAction) }}
+                  </mat-panel-title>
                 </mat-expansion-panel-header>
                 <ng-template matExpansionPanelContent>
                   <div class="action-fields">
@@ -14962,10 +15404,10 @@ let ActionsEditorComponent$1 = class ActionsEditorComponent {
                       (change)="
                         updateCustomAction(i, 'visible', $event.checked)
                       "
-                      >Visível</mat-slide-toggle
+                      >Visível</mat-slide-toggle
                     >
                     <mat-form-field>
-                      <mat-label>ID da Ação</mat-label>
+                      <mat-label>ID da Ação</mat-label>
                       <input
                         matInput
                         [value]="customAction.id"
@@ -14976,7 +15418,7 @@ let ActionsEditorComponent$1 = class ActionsEditorComponent {
                       />
                     </mat-form-field>
                     <mat-form-field>
-                      <mat-label>Ação</mat-label>
+                      <mat-label>Ação</mat-label>
                       <mat-select
                         [value]="getCustomActionSelectValue(customAction.action)"
                         (selectionChange)="onCustomActionSelectChange(i, $event.value)"
@@ -14984,7 +15426,7 @@ let ActionsEditorComponent$1 = class ActionsEditorComponent {
                         <mat-option [value]="customActionValue">Customizada</mat-option>
                         <mat-optgroup label="Acoes globais">
                           @for (spec of globalActionCatalog; track spec.id) {
-                            <mat-option [value]="spec.id">{{ spec.label }}</mat-option>
+                            <mat-option [value]="spec.id">{{ getActionCatalogLabel(spec) }}</mat-option>
                           }
                         </mat-optgroup>
                       </mat-select>
@@ -14993,14 +15435,14 @@ let ActionsEditorComponent$1 = class ActionsEditorComponent {
                         matSuffix
                         type="button"
                         class="help-icon-button"
-                        matTooltip="Ações globais exigem executor no app (ActionResolver). Customizadas só emitem evento. Cor/posição afetam o botão."
+                        matTooltip="Ações globais exigem executor no app (ActionResolver). Customizadas só emitem evento. Cor/posição afetam o botão."
                       >
                         <mat-icon>help_outline</mat-icon>
                       </button>
                     </mat-form-field>
                     @if (getCustomActionSelectValue(customAction.action) === customActionValue) {
                       <mat-form-field>
-                        <mat-label>Ação customizada</mat-label>
+                        <mat-label>Ação customizada</mat-label>
                         <input
                           matInput
                           [value]="getCustomActionCustomValue(customAction.action)"
@@ -15018,7 +15460,7 @@ let ActionsEditorComponent$1 = class ActionsEditorComponent {
                         @if (getActionSpecById(getCustomActionSelectValue(customAction.action)); as actionSpec) {
                           @if (actionSpec.param) {
                             <mat-form-field>
-                              <mat-label>{{ actionSpec.param.label || 'Parâmetro' }}</mat-label>
+                              <mat-label>{{ actionSpec.param.label || 'Parâmetro' }}</mat-label>
                               <input
                                 matInput
                                 [value]="getCustomActionParam(customAction.action)"
@@ -15048,7 +15490,7 @@ let ActionsEditorComponent$1 = class ActionsEditorComponent {
                       />
                     </mat-form-field>
                     <mat-form-field>
-                      <mat-label>Ícone</mat-label>
+                      <mat-label>Ícone</mat-label>
                       <input
                         matInput
                         [value]="customAction.icon"
@@ -15062,7 +15504,7 @@ let ActionsEditorComponent$1 = class ActionsEditorComponent {
                       />
                     </mat-form-field>
                     <mat-form-field>
-                      <mat-label>Cor do botão</mat-label>
+                      <mat-label>Cor do botão</mat-label>
                       <mat-select
                         [value]="customAction.color"
                         (selectionChange)="
@@ -15075,17 +15517,118 @@ let ActionsEditorComponent$1 = class ActionsEditorComponent {
                         <mat-option value="basic">Basic</mat-option>
                       </mat-select>
                     </mat-form-field>
+                    <mat-form-field>
+                      <mat-label>{{ tx('custom.variant', 'Variante') }}</mat-label>
+                      <mat-select
+                        [value]="customAction.variant"
+                        (selectionChange)="
+                          updateCustomAction(i, 'variant', $event.value)
+                        "
+                      >
+                        <mat-option value="raised">Elevado (raised)</mat-option>
+                        <mat-option value="stroked">Contornado (stroked)</mat-option>
+                        <mat-option value="flat">Plano (flat)</mat-option>
+                        <mat-option value="fab">Flutuante (fab)</mat-option>
+                      </mat-select>
+                    </mat-form-field>
+                    <mat-form-field>
+                      <mat-label>{{ tx('custom.size', 'Tamanho') }}</mat-label>
+                      <mat-select
+                        [value]="customAction.size"
+                        (selectionChange)="
+                          updateCustomAction(i, 'size', $event.value)
+                        "
+                      >
+                        <mat-option value="small">{{ tx('custom.size.small', 'Pequeno') }}</mat-option>
+                        <mat-option value="medium">{{ tx('custom.size.medium', 'Médio') }}</mat-option>
+                        <mat-option value="large">{{ tx('custom.size.large', 'Grande') }}</mat-option>
+                      </mat-select>
+                    </mat-form-field>
+                    <mat-form-field>
+                      <mat-label>{{ tx('custom.tooltip', 'Tooltip') }}</mat-label>
+                      <input
+                        matInput
+                        [value]="customAction.tooltip"
+                        (input)="
+                          updateCustomAction(
+                            i,
+                            'tooltip',
+                            $any($event.target).value
+                          )
+                        "
+                      />
+                    </mat-form-field>
+                    <mat-form-field>
+                      <mat-label>{{ tx('custom.shortcut', 'Atalho de Teclado') }}</mat-label>
+                      <input
+                        matInput
+                        [value]="customAction.shortcut"
+                        (input)="
+                          updateCustomAction(
+                            i,
+                            'shortcut',
+                            $any($event.target).value
+                          )
+                        "
+                        [placeholder]="tx('custom.shortcut.placeholder', 'Ex.: ctrl+shift+a')"
+                      />
+                    </mat-form-field>
+                    <mat-form-field>
+                      <mat-label>{{ tx('custom.className', 'Classe CSS') }}</mat-label>
+                      <input
+                        matInput
+                        [value]="$any(customAction).className"
+                        (input)="
+                          updateCustomAction(
+                            i,
+                            'className',
+                            $any($event.target).value
+                          )
+                        "
+                      />
+                    </mat-form-field>
+                    <mat-slide-toggle
+                      [checked]="!!customAction.disabled"
+                      (change)="
+                        updateCustomAction(i, 'disabled', $event.checked)
+                      "
+                    >
+                      {{ tx('custom.disabled', 'Desabilitado') }}
+                    </mat-slide-toggle>
+                    <mat-slide-toggle
+                      [checked]="!!customAction.loading"
+                      (change)="
+                        updateCustomAction(i, 'loading', $event.checked)
+                      "
+                    >
+                      {{ tx('custom.loading', 'Loading') }}
+                    </mat-slide-toggle>
+                    <mat-form-field class="w-100">
+                      <mat-label>{{ tx('custom.style', 'Estilos do botão (JSON)') }}</mat-label>
+                      <textarea
+                        matInput
+                        rows="4"
+                        [ngModel]="getCustomActionStyleText(customAction, i)"
+                        (ngModelChange)="onCustomActionStyleTextChange(i, $event)"
+                        (blur)="applyCustomActionStyleText(customAction, i)"
+                        [placeholder]="getCustomStylePlaceholder()"
+                      ></textarea>
+                      @if (hasCustomActionStyleError(customAction, i)) {
+                        <mat-error>{{ getCustomActionStyleError(customAction, i) }}</mat-error>
+                      }
+                    </mat-form-field>
                   </div>
                   <button
                     mat-icon-button
                     color="warn"
                     (click)="removeCustomButton(i)"
-                    matTooltip="Remover este botão"
+                    matTooltip="Remover este botão"
                   >
                     <mat-icon>delete</mat-icon>
                   </button>
                 </ng-template>
               </mat-expansion-panel>
+              </div>
             }
           </mat-accordion>
         </div>
@@ -15094,19 +15637,19 @@ let ActionsEditorComponent$1 = class ActionsEditorComponent {
       <mat-tab label="Layout">
         <div class="editor-container action-fields">
           <mat-form-field>
-            <mat-label>Posição estrutural</mat-label>
+            <mat-label>Posição estrutural</mat-label>
             <mat-select [value]="actions.placement || 'afterSections'" (selectionChange)="updateLayout('placement', $event.value)">
-              <mat-option value="insideLastSection">Dentro da última seção</mat-option>
-              <mat-option value="afterSections">Após as seções</mat-option>
-              <mat-option value="top">Antes das seções</mat-option>
+              <mat-option value="insideLastSection">Dentro da última seção</mat-option>
+              <mat-option value="afterSections">Após as seções</mat-option>
+              <mat-option value="top">Antes das seções</mat-option>
             </mat-select>
           </mat-form-field>
           <mat-form-field>
-            <mat-label>Espaço acima (px)</mat-label>
-            <input matInput type="number" [value]="getGapTopPx()" (input)="onGapTopInput($any($event.target).value)" placeholder="(padrão)" />
+            <mat-label>Espaço acima (px)</mat-label>
+            <input matInput type="number" [value]="getGapTopPx()" (input)="onGapTopInput($any($event.target).value)" placeholder="(padrão)" />
           </mat-form-field>
           <mat-form-field>
-            <mat-label>Alinhamento dos Botões</mat-label>
+            <mat-label>Alinhamento dos Botões</mat-label>
             <mat-select
               [value]="actions.position"
               (selectionChange)="updateLayout('position', $event.value)"
@@ -15119,7 +15662,7 @@ let ActionsEditorComponent$1 = class ActionsEditorComponent {
             </mat-select>
           </mat-form-field>
           <mat-form-field>
-            <mat-label>Orientação</mat-label>
+            <mat-label>Orientação</mat-label>
             <mat-select
               [value]="actions.orientation"
               (selectionChange)="updateLayout('orientation', $event.value)"
@@ -15129,14 +15672,14 @@ let ActionsEditorComponent$1 = class ActionsEditorComponent {
             </mat-select>
           </mat-form-field>
           <mat-form-field>
-            <mat-label>Espaçamento</mat-label>
+            <mat-label>Espaçamento</mat-label>
             <mat-select
               [value]="actions.spacing"
               (selectionChange)="updateLayout('spacing', $event.value)"
             >
               <mat-option value="compact">Compacto</mat-option>
               <mat-option value="normal">Normal</mat-option>
-              <mat-option value="spacious">Espaçado</mat-option>
+              <mat-option value="spacious">Espaçado</mat-option>
             </mat-select>
           </mat-form-field>
           <mat-slide-toggle
@@ -15155,11 +15698,11 @@ let ActionsEditorComponent$1 = class ActionsEditorComponent {
           <mat-slide-toggle
             [checked]="actions.sticky"
             (change)="updateLayout('sticky', $event.checked)"
-            >Barra de Ações Fixa (Sticky)</mat-slide-toggle
+            >Barra de Ações Fixa (Sticky)</mat-slide-toggle
           >
           <mat-expansion-panel>
             <mat-expansion-panel-header>
-              Configurações Mobile
+              Configurações Mobile
             </mat-expansion-panel-header>
             <ng-template matExpansionPanelContent>
               <div class="action-fields">
@@ -15176,7 +15719,7 @@ let ActionsEditorComponent$1 = class ActionsEditorComponent {
                       updateLayoutMobile('position', $event.value)
                     "
                   >
-                    <mat-option [value]="undefined">Padrão</mat-option>
+                    <mat-option [value]="undefined">Padrão</mat-option>
                     <mat-option value="left">Esquerda</mat-option>
                     <mat-option value="center">Centro</mat-option>
                     <mat-option value="right">Direita</mat-option>
@@ -15184,14 +15727,14 @@ let ActionsEditorComponent$1 = class ActionsEditorComponent {
                   </mat-select>
                 </mat-form-field>
                 <mat-form-field>
-                  <mat-label>Orientação (mobile)</mat-label>
+                  <mat-label>Orientação (mobile)</mat-label>
                   <mat-select
                     [value]="actions.mobile?.orientation"
                     (selectionChange)="
                       updateLayoutMobile('orientation', $event.value)
                     "
                   >
-                    <mat-option [value]="undefined">Padrão</mat-option>
+                    <mat-option [value]="undefined">Padrão</mat-option>
                     <mat-option value="horizontal">Horizontal</mat-option>
                     <mat-option value="vertical">Vertical</mat-option>
                   </mat-select>
@@ -15202,11 +15745,14 @@ let ActionsEditorComponent$1 = class ActionsEditorComponent {
         </div>
       </mat-tab>
     </mat-tab-group>
-  `, isInline: true, styles: [".editor-container{padding:16px;display:flex;flex-direction:column;gap:16px}.action-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;align-items:center}.action-global-fields{grid-column:1 / -1;padding:12px 14px;border:1px dashed var(--md-sys-color-outline-variant, rgba(255, 255, 255, .12));border-radius:10px;background:var(--md-sys-color-surface-container-low)}.action-global-title{font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant, #9aa0a6);margin-bottom:10px}.action-global-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 16px}.help-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 18px;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}.help-icon-button mat-icon{font-size:18px;line-height:18px;width:18px;height:18px}.action-global-fields .mat-mdc-form-field-icon-suffix{align-self:center}.action-section-title{width:100%;margin:10px 0 2px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant, #9aa0a6)}.add-button{margin-bottom:16px;align-self:flex-start}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i6$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6$4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6$4.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i7$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i7$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i3$1.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i3$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i3$1.MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }, { 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: i4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+  `, isInline: true, styles: [".editor-container{padding:16px;display:flex;flex-direction:column;gap:16px}.action-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;align-items:center}.action-global-fields{grid-column:1 / -1;padding:12px 14px;border:1px dashed var(--md-sys-color-outline-variant, rgba(255, 255, 255, .12));border-radius:10px;background:var(--md-sys-color-surface-container-low)}.action-global-title{font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant, #9aa0a6);margin-bottom:10px}.action-global-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 16px}.help-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 18px;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}.help-icon-button mat-icon{font-size:18px;line-height:18px;width:18px;height:18px}.action-global-fields .mat-mdc-form-field-icon-suffix{align-self:center}.action-section-title{width:100%;margin:10px 0 2px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant, #9aa0a6)}.add-button{margin-bottom:16px;align-self:flex-start}.custom-action-panel-shell{display:grid;gap:8px}.custom-action-panel-toolbar{display:flex;justify-content:flex-end}.custom-action-order-controls{display:inline-flex;align-items:center;gap:4px;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i6$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6$4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6$4.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i7$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i7$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i3$1.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i3$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i3$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i3$1.MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }, { 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: i4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: SurfaceOpenActionEditorComponent, selector: "praxis-surface-open-action-editor", inputs: ["value", "hostKind"], outputs: ["valueChange"] }] });
 };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ActionsEditorComponent$1, decorators: [{
             type: Component,
-            args: [{ selector: 'praxis-actions-editor', standalone: true, imports: [
+            args: [{ selector: 'praxis-actions-editor', standalone: true, providers: [
+                        providePraxisI18nConfig(SURFACE_OPEN_I18N_CONFIG),
+                        providePraxisI18nConfig(ACTIONS_EDITOR_I18N_CONFIG),
+                    ], imports: [
                         CommonModule,
                         FormsModule,
                         MatFormFieldModule,
@@ -15218,11 +15764,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         MatIconModule,
                         MatButtonModule,
                         MatTooltipModule,
+                        SurfaceOpenActionEditorComponent,
                     ], template: `
     <ng-template #globalActionFields let-action let-index="index">
       @if (getGlobalActionSchema(action); as schema) {
         <div class="action-global-fields">
-          <div class="action-global-title">Configuração da ação global</div>
+          <div class="action-global-title">Configuração da ação global</div>
+          @if (schema.editorMode === 'surface-open') {
+            <praxis-surface-open-action-editor
+              [value]="getSurfaceOpenActionPayload(action)"
+              hostKind="form"
+              (valueChange)="onSurfaceOpenActionPayloadChange(action, $event, index)"
+            ></praxis-surface-open-action-editor>
+          } @else {
           <div class="action-global-grid">
             @for (field of schema.fields; track field.key) {
               @if (shouldShowGlobalActionField(action, field)) {
@@ -15230,7 +15784,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                   <div class="action-section-title">Essencial</div>
                 }
                 @if (schema.id === 'showAlert' && field.key === 'title') {
-                  <div class="action-section-title">Diálogo (opcional)</div>
+                  <div class="action-section-title">Diálogo (opcional)</div>
                 }
                 @if (field.type === 'toggle') {
                   <mat-slide-toggle
@@ -15289,7 +15843,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                       matSuffix
                       type="button"
                       class="help-icon-button"
-                      matTooltip="Informe um JSON válido."
+                      matTooltip="Informe um JSON válido."
                     >
                       <mat-icon>help_outline</mat-icon>
                     </button>
@@ -15348,23 +15902,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
               }
             }
           </div>
+          }
         </div>
       }
     </ng-template>
     <mat-tab-group>
-      <mat-tab label="Botões Padrão">
+      <mat-tab label="Botões Padrão">
         <div class="editor-container">
           <mat-accordion multi>
             <mat-expansion-panel>
               <mat-expansion-panel-header>
-                Botão de Submeter (Submit)
+                Botão de Submeter (Submit)
               </mat-expansion-panel-header>
               <ng-template matExpansionPanelContent>
                 <div class="action-fields">
                   <mat-slide-toggle
                     [checked]="actions.submit.visible"
                     (change)="updateAction('submit', 'visible', $event.checked)"
-                    >Visível</mat-slide-toggle
+                    >Visível</mat-slide-toggle
                   >
                   <mat-form-field>
                     <mat-label>Label</mat-label>
@@ -15381,7 +15936,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                     />
                   </mat-form-field>
               <mat-form-field>
-                <mat-label>Ícone</mat-label>
+                <mat-label>Ícone</mat-label>
                 <input
                   matInput
                   [value]="actions.submit.icon"
@@ -15443,14 +15998,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             <!-- Repetir para Cancel e Reset -->
             <mat-expansion-panel>
               <mat-expansion-panel-header>
-                Botão de Cancelar (Cancel)
+                Botão de Cancelar (Cancel)
               </mat-expansion-panel-header>
               <ng-template matExpansionPanelContent>
                 <div class="action-fields">
                   <mat-slide-toggle
                     [checked]="actions.cancel.visible"
                     (change)="updateAction('cancel', 'visible', $event.checked)"
-                    >Visível</mat-slide-toggle
+                    >Visível</mat-slide-toggle
                   >
                   <mat-form-field>
                     <mat-label>Label</mat-label>
@@ -15467,7 +16022,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                     />
                   </mat-form-field>
               <mat-form-field>
-                <mat-label>Ícone</mat-label>
+                <mat-label>Ícone</mat-label>
                 <input
                   matInput
                   [value]="actions.cancel.icon"
@@ -15524,14 +16079,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             </mat-expansion-panel>
             <mat-expansion-panel>
               <mat-expansion-panel-header>
-                Botão de Limpar (Reset)
+                Botão de Limpar (Reset)
               </mat-expansion-panel-header>
               <ng-template matExpansionPanelContent>
                 <div class="action-fields">
                   <mat-slide-toggle
                     [checked]="actions.reset.visible"
                     (change)="updateAction('reset', 'visible', $event.checked)"
-                    >Visível</mat-slide-toggle
+                    >Visível</mat-slide-toggle
                   >
                   <mat-form-field>
                     <mat-label>Label</mat-label>
@@ -15544,7 +16099,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                     />
                   </mat-form-field>
               <mat-form-field>
-                <mat-label>Ícone</mat-label>
+                <mat-label>Ícone</mat-label>
                 <input
                   matInput
                   [value]="actions.reset.icon"
@@ -15603,7 +16158,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
         </div>
       </mat-tab>
 
-      <mat-tab label="Botões Customizados">
+      <mat-tab label="Botões Customizados">
         <div class="editor-container">
           <button
             mat-stroked-button
@@ -15611,7 +16166,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             (click)="addCustomButton()"
             class="add-button"
           >
-            <mat-icon>add</mat-icon> Adicionar Botão
+            <mat-icon>add</mat-icon> Adicionar Botão
           </button>
           <mat-accordion multi>
             @for (
@@ -15619,9 +16174,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
               track customAction.id || customAction.action || $index;
               let i = $index
             ) {
-              <mat-expansion-panel>
+              <div class="custom-action-panel-shell">
+                <div class="custom-action-panel-toolbar">
+                  <div class="custom-action-order-controls">
+                    <button
+                      mat-icon-button
+                      type="button"
+                      [attr.aria-label]="getMoveCustomActionAriaLabel('up', customAction)"
+                      [matTooltip]="tx('custom.order.moveUp.tooltip', 'Mover para cima')"
+                      [disabled]="!canMoveCustomActionUp(i)"
+                      (click)="moveCustomActionUp(i)"
+                    >
+                      <mat-icon>arrow_upward</mat-icon>
+                    </button>
+                    <button
+                      mat-icon-button
+                      type="button"
+                      [attr.aria-label]="getMoveCustomActionAriaLabel('down', customAction)"
+                      [matTooltip]="tx('custom.order.moveDown.tooltip', 'Mover para baixo')"
+                      [disabled]="!canMoveCustomActionDown(i)"
+                      (click)="moveCustomActionDown(i)"
+                    >
+                      <mat-icon>arrow_downward</mat-icon>
+                    </button>
+                  </div>
+                </div>
+                <mat-expansion-panel>
                 <mat-expansion-panel-header>
-                  {{ customAction.label || 'Novo Botão Customizado' }}
+                  <mat-panel-title>
+                    {{ getCustomActionTitle(customAction) }}
+                  </mat-panel-title>
                 </mat-expansion-panel-header>
                 <ng-template matExpansionPanelContent>
                   <div class="action-fields">
@@ -15630,10 +16212,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                       (change)="
                         updateCustomAction(i, 'visible', $event.checked)
                       "
-                      >Visível</mat-slide-toggle
+                      >Visível</mat-slide-toggle
                     >
                     <mat-form-field>
-                      <mat-label>ID da Ação</mat-label>
+                      <mat-label>ID da Ação</mat-label>
                       <input
                         matInput
                         [value]="customAction.id"
@@ -15644,7 +16226,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                       />
                     </mat-form-field>
                     <mat-form-field>
-                      <mat-label>Ação</mat-label>
+                      <mat-label>Ação</mat-label>
                       <mat-select
                         [value]="getCustomActionSelectValue(customAction.action)"
                         (selectionChange)="onCustomActionSelectChange(i, $event.value)"
@@ -15652,7 +16234,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         <mat-option [value]="customActionValue">Customizada</mat-option>
                         <mat-optgroup label="Acoes globais">
                           @for (spec of globalActionCatalog; track spec.id) {
-                            <mat-option [value]="spec.id">{{ spec.label }}</mat-option>
+                            <mat-option [value]="spec.id">{{ getActionCatalogLabel(spec) }}</mat-option>
                           }
                         </mat-optgroup>
                       </mat-select>
@@ -15661,14 +16243,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         matSuffix
                         type="button"
                         class="help-icon-button"
-                        matTooltip="Ações globais exigem executor no app (ActionResolver). Customizadas só emitem evento. Cor/posição afetam o botão."
+                        matTooltip="Ações globais exigem executor no app (ActionResolver). Customizadas só emitem evento. Cor/posição afetam o botão."
                       >
                         <mat-icon>help_outline</mat-icon>
                       </button>
                     </mat-form-field>
                     @if (getCustomActionSelectValue(customAction.action) === customActionValue) {
                       <mat-form-field>
-                        <mat-label>Ação customizada</mat-label>
+                        <mat-label>Ação customizada</mat-label>
                         <input
                           matInput
                           [value]="getCustomActionCustomValue(customAction.action)"
@@ -15686,7 +16268,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         @if (getActionSpecById(getCustomActionSelectValue(customAction.action)); as actionSpec) {
                           @if (actionSpec.param) {
                             <mat-form-field>
-                              <mat-label>{{ actionSpec.param.label || 'Parâmetro' }}</mat-label>
+                              <mat-label>{{ actionSpec.param.label || 'Parâmetro' }}</mat-label>
                               <input
                                 matInput
                                 [value]="getCustomActionParam(customAction.action)"
@@ -15716,7 +16298,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                       />
                     </mat-form-field>
                     <mat-form-field>
-                      <mat-label>Ícone</mat-label>
+                      <mat-label>Ícone</mat-label>
                       <input
                         matInput
                         [value]="customAction.icon"
@@ -15730,7 +16312,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                       />
                     </mat-form-field>
                     <mat-form-field>
-                      <mat-label>Cor do botão</mat-label>
+                      <mat-label>Cor do botão</mat-label>
                       <mat-select
                         [value]="customAction.color"
                         (selectionChange)="
@@ -15743,38 +16325,139 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         <mat-option value="basic">Basic</mat-option>
                       </mat-select>
                     </mat-form-field>
-                  </div>
-                  <button
-                    mat-icon-button
-                    color="warn"
-                    (click)="removeCustomButton(i)"
-                    matTooltip="Remover este botão"
-                  >
-                    <mat-icon>delete</mat-icon>
-                  </button>
-                </ng-template>
-              </mat-expansion-panel>
-            }
-          </mat-accordion>
-        </div>
+                    <mat-form-field>
+                      <mat-label>{{ tx('custom.variant', 'Variante') }}</mat-label>
+                      <mat-select
+                        [value]="customAction.variant"
+                        (selectionChange)="
+                          updateCustomAction(i, 'variant', $event.value)
+                        "
+                      >
+                        <mat-option value="raised">Elevado (raised)</mat-option>
+                        <mat-option value="stroked">Contornado (stroked)</mat-option>
+                        <mat-option value="flat">Plano (flat)</mat-option>
+                        <mat-option value="fab">Flutuante (fab)</mat-option>
+                      </mat-select>
+                    </mat-form-field>
+                    <mat-form-field>
+                      <mat-label>{{ tx('custom.size', 'Tamanho') }}</mat-label>
+                      <mat-select
+                        [value]="customAction.size"
+                        (selectionChange)="
+                          updateCustomAction(i, 'size', $event.value)
+                        "
+                      >
+                        <mat-option value="small">{{ tx('custom.size.small', 'Pequeno') }}</mat-option>
+                        <mat-option value="medium">{{ tx('custom.size.medium', 'Médio') }}</mat-option>
+                        <mat-option value="large">{{ tx('custom.size.large', 'Grande') }}</mat-option>
+                      </mat-select>
+                    </mat-form-field>
+                    <mat-form-field>
+                      <mat-label>{{ tx('custom.tooltip', 'Tooltip') }}</mat-label>
+                      <input
+                        matInput
+                        [value]="customAction.tooltip"
+                        (input)="
+                          updateCustomAction(
+                            i,
+                            'tooltip',
+                            $any($event.target).value
+                          )
+                        "
+                      />
+                    </mat-form-field>
+                    <mat-form-field>
+                      <mat-label>{{ tx('custom.shortcut', 'Atalho de Teclado') }}</mat-label>
+                      <input
+                        matInput
+                        [value]="customAction.shortcut"
+                        (input)="
+                          updateCustomAction(
+                            i,
+                            'shortcut',
+                            $any($event.target).value
+                          )
+                        "
+                        [placeholder]="tx('custom.shortcut.placeholder', 'Ex.: ctrl+shift+a')"
+                      />
+                    </mat-form-field>
+                    <mat-form-field>
+                      <mat-label>{{ tx('custom.className', 'Classe CSS') }}</mat-label>
+                      <input
+                        matInput
+                        [value]="$any(customAction).className"
+                        (input)="
+                          updateCustomAction(
+                            i,
+                            'className',
+                            $any($event.target).value
+                          )
+                        "
+                      />
+                    </mat-form-field>
+                    <mat-slide-toggle
+                      [checked]="!!customAction.disabled"
+                      (change)="
+                        updateCustomAction(i, 'disabled', $event.checked)
+                      "
+                    >
+                      {{ tx('custom.disabled', 'Desabilitado') }}
+                    </mat-slide-toggle>
+                    <mat-slide-toggle
+                      [checked]="!!customAction.loading"
+                      (change)="
+                        updateCustomAction(i, 'loading', $event.checked)
+                      "
+                    >
+                      {{ tx('custom.loading', 'Loading') }}
+                    </mat-slide-toggle>
+                    <mat-form-field class="w-100">
+                      <mat-label>{{ tx('custom.style', 'Estilos do botão (JSON)') }}</mat-label>
+                      <textarea
+                        matInput
+                        rows="4"
+                        [ngModel]="getCustomActionStyleText(customAction, i)"
+                        (ngModelChange)="onCustomActionStyleTextChange(i, $event)"
+                        (blur)="applyCustomActionStyleText(customAction, i)"
+                        [placeholder]="getCustomStylePlaceholder()"
+                      ></textarea>
+                      @if (hasCustomActionStyleError(customAction, i)) {
+                        <mat-error>{{ getCustomActionStyleError(customAction, i) }}</mat-error>
+                      }
+                    </mat-form-field>
+                  </div>
+                  <button
+                    mat-icon-button
+                    color="warn"
+                    (click)="removeCustomButton(i)"
+                    matTooltip="Remover este botão"
+                  >
+                    <mat-icon>delete</mat-icon>
+                  </button>
+                </ng-template>
+              </mat-expansion-panel>
+              </div>
+            }
+          </mat-accordion>
+        </div>
       </mat-tab>
 
       <mat-tab label="Layout">
         <div class="editor-container action-fields">
           <mat-form-field>
-            <mat-label>Posição estrutural</mat-label>
+            <mat-label>Posição estrutural</mat-label>
             <mat-select [value]="actions.placement || 'afterSections'" (selectionChange)="updateLayout('placement', $event.value)">
-              <mat-option value="insideLastSection">Dentro da última seção</mat-option>
-              <mat-option value="afterSections">Após as seções</mat-option>
-              <mat-option value="top">Antes das seções</mat-option>
+              <mat-option value="insideLastSection">Dentro da última seção</mat-option>
+              <mat-option value="afterSections">Após as seções</mat-option>
+              <mat-option value="top">Antes das seções</mat-option>
             </mat-select>
           </mat-form-field>
           <mat-form-field>
-            <mat-label>Espaço acima (px)</mat-label>
-            <input matInput type="number" [value]="getGapTopPx()" (input)="onGapTopInput($any($event.target).value)" placeholder="(padrão)" />
+            <mat-label>Espaço acima (px)</mat-label>
+            <input matInput type="number" [value]="getGapTopPx()" (input)="onGapTopInput($any($event.target).value)" placeholder="(padrão)" />
           </mat-form-field>
           <mat-form-field>
-            <mat-label>Alinhamento dos Botões</mat-label>
+            <mat-label>Alinhamento dos Botões</mat-label>
             <mat-select
               [value]="actions.position"
               (selectionChange)="updateLayout('position', $event.value)"
@@ -15787,7 +16470,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             </mat-select>
           </mat-form-field>
           <mat-form-field>
-            <mat-label>Orientação</mat-label>
+            <mat-label>Orientação</mat-label>
             <mat-select
               [value]="actions.orientation"
               (selectionChange)="updateLayout('orientation', $event.value)"
@@ -15797,14 +16480,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             </mat-select>
           </mat-form-field>
           <mat-form-field>
-            <mat-label>Espaçamento</mat-label>
+            <mat-label>Espaçamento</mat-label>
             <mat-select
               [value]="actions.spacing"
               (selectionChange)="updateLayout('spacing', $event.value)"
             >
               <mat-option value="compact">Compacto</mat-option>
               <mat-option value="normal">Normal</mat-option>
-              <mat-option value="spacious">Espaçado</mat-option>
+              <mat-option value="spacious">Espaçado</mat-option>
             </mat-select>
           </mat-form-field>
           <mat-slide-toggle
@@ -15823,11 +16506,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
           <mat-slide-toggle
             [checked]="actions.sticky"
             (change)="updateLayout('sticky', $event.checked)"
-            >Barra de Ações Fixa (Sticky)</mat-slide-toggle
+            >Barra de Ações Fixa (Sticky)</mat-slide-toggle
           >
           <mat-expansion-panel>
             <mat-expansion-panel-header>
-              Configurações Mobile
+              Configurações Mobile
             </mat-expansion-panel-header>
             <ng-template matExpansionPanelContent>
               <div class="action-fields">
@@ -15844,7 +16527,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                       updateLayoutMobile('position', $event.value)
                     "
                   >
-                    <mat-option [value]="undefined">Padrão</mat-option>
+                    <mat-option [value]="undefined">Padrão</mat-option>
                     <mat-option value="left">Esquerda</mat-option>
                     <mat-option value="center">Centro</mat-option>
                     <mat-option value="right">Direita</mat-option>
@@ -15852,14 +16535,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                   </mat-select>
                 </mat-form-field>
                 <mat-form-field>
-                  <mat-label>Orientação (mobile)</mat-label>
+                  <mat-label>Orientação (mobile)</mat-label>
                   <mat-select
                     [value]="actions.mobile?.orientation"
                     (selectionChange)="
                       updateLayoutMobile('orientation', $event.value)
                     "
                   >
-                    <mat-option [value]="undefined">Padrão</mat-option>
+                    <mat-option [value]="undefined">Padrão</mat-option>
                     <mat-option value="horizontal">Horizontal</mat-option>
                     <mat-option value="vertical">Vertical</mat-option>
                   </mat-select>
@@ -15870,7 +16553,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
         </div>
       </mat-tab>
     </mat-tab-group>
-  `, styles: [".editor-container{padding:16px;display:flex;flex-direction:column;gap:16px}.action-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;align-items:center}.action-global-fields{grid-column:1 / -1;padding:12px 14px;border:1px dashed var(--md-sys-color-outline-variant, rgba(255, 255, 255, .12));border-radius:10px;background:var(--md-sys-color-surface-container-low)}.action-global-title{font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant, #9aa0a6);margin-bottom:10px}.action-global-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 16px}.help-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 18px;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}.help-icon-button mat-icon{font-size:18px;line-height:18px;width:18px;height:18px}.action-global-fields .mat-mdc-form-field-icon-suffix{align-self:center}.action-section-title{width:100%;margin:10px 0 2px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant, #9aa0a6)}.add-button{margin-bottom:16px;align-self:flex-start}\n"] }]
+  `, styles: [".editor-container{padding:16px;display:flex;flex-direction:column;gap:16px}.action-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;align-items:center}.action-global-fields{grid-column:1 / -1;padding:12px 14px;border:1px dashed var(--md-sys-color-outline-variant, rgba(255, 255, 255, .12));border-radius:10px;background:var(--md-sys-color-surface-container-low)}.action-global-title{font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant, #9aa0a6);margin-bottom:10px}.action-global-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 16px}.help-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 18px;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}.help-icon-button mat-icon{font-size:18px;line-height:18px;width:18px;height:18px}.action-global-fields .mat-mdc-form-field-icon-suffix{align-self:center}.action-section-title{width:100%;margin:10px 0 2px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant, #9aa0a6)}.add-button{margin-bottom:16px;align-self:flex-start}.custom-action-panel-shell{display:grid;gap:8px}.custom-action-panel-toolbar{display:flex;justify-content:flex-end}.custom-action-order-controls{display:inline-flex;align-items:center;gap:4px;justify-content:flex-end}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], configChange: [{
@@ -16930,6 +17613,9 @@ function normalizeTargets(rawTargets, explicitTargetType) {
     };
 }
 function detectTarget(value) {
+    if (isScopedSectionHeaderActionTarget(value) || isUnscopedSectionHeaderActionTarget(value)) {
+        return { type: 'action', value };
+    }
     if (value?.startsWith('section:')) {
         return { type: 'section', value: value.substring('section:'.length) };
     }
@@ -16945,6 +17631,10 @@ function detectTarget(value) {
     return { type: 'field', value };
 }
 function prefixTarget(targetType, value) {
+    if (targetType === 'action' &&
+        (isScopedSectionHeaderActionTarget(value) || isUnscopedSectionHeaderActionTarget(value))) {
+        return value;
+    }
     if (targetType === 'section')
         return `section:${value}`;
     if (targetType === 'action')
@@ -16955,6 +17645,12 @@ function prefixTarget(targetType, value) {
         return `column:${value}`;
     return value;
 }
+function isScopedSectionHeaderActionTarget(value) {
+    return !!value && value.startsWith('section:') && value.includes(':header-action:');
+}
+function isUnscopedSectionHeaderActionTarget(value) {
+    return !!value && value.startsWith('header-action:');
+}
 function parseSimpleCondition(condition) {
     const trimmed = condition.trim();
     const match = trimmed.match(/^(.+?)\s+(eq|equals|==|=|neq|notequals|!=|<>|lt|lessthan|<|lte|lessthanorequal|<=|gt|greaterthan|>|gte|greaterthanorequal|>=|contains|startswith|endswith|in)\s+(.+)$/iu);
@@ -17475,6 +18171,21 @@ class PraxisDynamicFormConfigEditor {
         });
         // Expose actions as rule targets (prefixed)
         const allActions = [];
+        sections.forEach((section) => {
+            (section.headerActions || []).forEach((action) => {
+                const actionId = (action.action || action.id || '').trim();
+                if (!actionId)
+                    return;
+                const scopedActionId = section.id
+                    ? `section:${section.id}:header-action:${actionId}`
+                    : `header-action:${actionId}`;
+                allActions.push({
+                    id: scopedActionId,
+                    label: action.label ||
+                        `${section.title || section.id} • ${actionId}`,
+                });
+            });
+        });
         if (actions?.submit)
             allActions.push({ id: actions.submit.id || 'submit', label: actions.submit.label });
         if (actions?.cancel)
@@ -17994,7 +18705,7 @@ const PRAXIS_DYNAMIC_FORM_COMPONENT_METADATA = {
             name: 'config',
             type: 'FormConfig',
             label: 'Configuração',
-            description: 'Configuração completa do formulário (layout, metadados, ações, regras e headers de seção com `sectionHeader` para ícone/avatar dinâmico).',
+            description: 'Configuração completa do formulário (layout, metadados, ações, regras e headers de seção com `sectionHeader` para ícone/avatar dinâmico e `headerActions` para ações contextuais).',
         },
         { name: 'schemaSource', type: "'resource' | 'filter'", default: 'resource', description: 'Fonte do schema de campos' },
         { name: 'enableCustomization', type: 'boolean', default: false, description: 'Habilita modo de customização do layout (canvas)' },
@@ -18079,9 +18790,10 @@ const PRAXIS_DYNAMIC_FORM_COMPONENT_METADATA = {
                     formData: { type: 'object', description: 'Dados do formulário' },
                     isValid: { type: 'boolean', description: 'Validade do formulário' },
                     source: { type: 'string', description: 'Origem da ação' },
+                    sectionId: { type: 'string', description: 'ID da seção quando a ação veio do header de uma seção' },
                 },
                 required: ['actionId', 'formData', 'isValid', 'source'],
-                example: { actionId: 'save', formData: {}, isValid: true, source: 'button' },
+                example: { actionId: 'help', formData: {}, isValid: true, source: 'section-header', sectionId: 'identification' },
             },
             scope: 'shell',
         },
@@ -18163,6 +18875,134 @@ function provideSettingsPanelDynamicForm() {
     return SETTINGS_PANEL_DYNAMIC_FORM_PROVIDER;
 }
 
+const SECTION_EDITOR_I18N_NAMESPACE = 'praxisDynamicFormSectionEditor';
+const SECTION_EDITOR_I18N_CONFIG = {
+    namespaces: {
+        [SECTION_EDITOR_I18N_NAMESPACE]: {
+            'pt-BR': {
+                'dynamicForm.sectionEditor.header.presets.title': 'Presets rápidos',
+                'dynamicForm.sectionEditor.header.presets.default': 'Padrão',
+                'dynamicForm.sectionEditor.header.presets.simple': 'Simples',
+                'dynamicForm.sectionEditor.header.presets.collapsible': 'Colapsável',
+                'dynamicForm.sectionEditor.header.fields.title': 'Título',
+                'dynamicForm.sectionEditor.header.fields.description': 'Descrição',
+                'dynamicForm.sectionEditor.header.fields.appearance': 'Aparência',
+                'dynamicForm.sectionEditor.header.fields.titleColor': 'Cor do título',
+                'dynamicForm.sectionEditor.header.fields.descriptionColor': 'Cor da descrição',
+                'dynamicForm.sectionEditor.header.fields.customColor': 'Cor personalizada (CSS)',
+                'dynamicForm.sectionEditor.header.fields.titleGapBottom': 'Gap do título (px)',
+                'dynamicForm.sectionEditor.header.fields.descriptionGapBottom': 'Gap da descrição (px)',
+                'dynamicForm.sectionEditor.header.fields.gapBottom': 'Gap abaixo da seção (px)',
+                'dynamicForm.sectionEditor.header.fields.collapsible': 'Colapsável',
+                'dynamicForm.sectionEditor.header.fields.collapsed': 'Iniciar recolhida',
+                'dynamicForm.sectionEditor.header.fields.headerTooltip': 'Tooltip do cabeçalho',
+                'dynamicForm.sectionEditor.header.placeholders.description': 'Resumo curto do conteúdo da seção',
+                'dynamicForm.sectionEditor.header.placeholders.customColor': 'ex.: #3366ff ou rgb(...)',
+                'dynamicForm.sectionEditor.header.placeholders.headerTooltip': 'Dica ao passar o mouse no título',
+                'dynamicForm.sectionEditor.header.options.titleColor.default': 'Padrão (on-surface)',
+                'dynamicForm.sectionEditor.header.options.titleColor.primary': 'Primária',
+                'dynamicForm.sectionEditor.header.options.titleColor.secondary': 'Secundária',
+                'dynamicForm.sectionEditor.header.options.descriptionColor.default': 'Padrão (on-surface-variant)',
+                'dynamicForm.sectionEditor.header.options.descriptionColor.primary': 'Primária',
+                'dynamicForm.sectionEditor.header.options.descriptionColor.secondary': 'Secundária',
+                'headerActions.title': 'Ações do cabeçalho',
+                'headerActions.description': 'Adicione ícones acionáveis no canto direito do cabeçalho da seção para affordances contextuais como ajuda, refresh ou drill-down.',
+                'headerActions.add': 'Adicionar ação',
+                'headerActions.empty': 'Nenhuma ação configurada para este cabeçalho.',
+                'headerActions.item': 'Ação {{index}}',
+                'headerActions.remove': 'Remover ação',
+                'headerActions.moveUp': 'Mover ação para cima',
+                'headerActions.moveDown': 'Mover ação para baixo',
+                'headerActions.fields.id': 'ID',
+                'headerActions.fields.label': 'Label acessível',
+                'headerActions.fields.icon': 'Ícone',
+                'headerActions.fields.action': 'Action emitida',
+                'headerActions.fields.tooltip': 'Tooltip',
+                'headerActions.fields.color': 'Cor',
+                'headerActions.fields.color.default': 'Padrão',
+                'headerActions.fields.color.basic': 'Basic',
+                'headerActions.fields.color.primary': 'Primária',
+                'headerActions.fields.color.accent': 'Accent',
+                'headerActions.fields.color.warn': 'Warn',
+                'headerActions.fields.visible': 'Visível',
+                'headerActions.fields.disabled': 'Desabilitada',
+                'headerActions.fields.loading': 'Loading',
+                'headerActions.fields.className': 'Classe CSS',
+                'headerActions.fields.style': 'Estilo (JSON)',
+                'headerActions.validation.invalidJson': 'JSON inválido.',
+                'headerActions.validation.objectJson': 'Informe um objeto JSON válido.',
+                'headerActions.placeholders.id': 'ex.: help',
+                'headerActions.placeholders.label': 'ex.: Ajuda da seção',
+                'headerActions.placeholders.icon': 'ex.: help_outline',
+                'headerActions.placeholders.action': 'Opcional. Se vazio, usa o ID',
+                'headerActions.placeholders.tooltip': 'Opcional. Se vazio, usa a label',
+                'headerActions.placeholders.className': 'ex.: section-help-action',
+                'headerActions.placeholders.style': '{"marginLeft":"4px"}',
+            },
+            'en-US': {
+                'dynamicForm.sectionEditor.header.presets.title': 'Quick presets',
+                'dynamicForm.sectionEditor.header.presets.default': 'Default',
+                'dynamicForm.sectionEditor.header.presets.simple': 'Simple',
+                'dynamicForm.sectionEditor.header.presets.collapsible': 'Collapsible',
+                'dynamicForm.sectionEditor.header.fields.title': 'Title',
+                'dynamicForm.sectionEditor.header.fields.description': 'Description',
+                'dynamicForm.sectionEditor.header.fields.appearance': 'Appearance',
+                'dynamicForm.sectionEditor.header.fields.titleColor': 'Title color',
+                'dynamicForm.sectionEditor.header.fields.descriptionColor': 'Description color',
+                'dynamicForm.sectionEditor.header.fields.customColor': 'Custom color (CSS)',
+                'dynamicForm.sectionEditor.header.fields.titleGapBottom': 'Title gap (px)',
+                'dynamicForm.sectionEditor.header.fields.descriptionGapBottom': 'Description gap (px)',
+                'dynamicForm.sectionEditor.header.fields.gapBottom': 'Section bottom gap (px)',
+                'dynamicForm.sectionEditor.header.fields.collapsible': 'Collapsible',
+                'dynamicForm.sectionEditor.header.fields.collapsed': 'Start collapsed',
+                'dynamicForm.sectionEditor.header.fields.headerTooltip': 'Header tooltip',
+                'dynamicForm.sectionEditor.header.placeholders.description': 'Short summary of the section content',
+                'dynamicForm.sectionEditor.header.placeholders.customColor': 'e.g. #3366ff or rgb(...)',
+                'dynamicForm.sectionEditor.header.placeholders.headerTooltip': 'Hint shown when hovering the title',
+                'dynamicForm.sectionEditor.header.options.titleColor.default': 'Default (on-surface)',
+                'dynamicForm.sectionEditor.header.options.titleColor.primary': 'Primary',
+                'dynamicForm.sectionEditor.header.options.titleColor.secondary': 'Secondary',
+                'dynamicForm.sectionEditor.header.options.descriptionColor.default': 'Default (on-surface-variant)',
+                'dynamicForm.sectionEditor.header.options.descriptionColor.primary': 'Primary',
+                'dynamicForm.sectionEditor.header.options.descriptionColor.secondary': 'Secondary',
+                'headerActions.title': 'Header actions',
+                'headerActions.description': 'Add clickable icons to the right side of the section header for contextual affordances such as help, refresh or drill-down.',
+                'headerActions.add': 'Add action',
+                'headerActions.empty': 'No actions configured for this header.',
+                'headerActions.item': 'Action {{index}}',
+                'headerActions.remove': 'Remove action',
+                'headerActions.moveUp': 'Move action up',
+                'headerActions.moveDown': 'Move action down',
+                'headerActions.fields.id': 'ID',
+                'headerActions.fields.label': 'Accessible label',
+                'headerActions.fields.icon': 'Icon',
+                'headerActions.fields.action': 'Emitted action',
+                'headerActions.fields.tooltip': 'Tooltip',
+                'headerActions.fields.color': 'Color',
+                'headerActions.fields.color.default': 'Default',
+                'headerActions.fields.color.basic': 'Basic',
+                'headerActions.fields.color.primary': 'Primary',
+                'headerActions.fields.color.accent': 'Accent',
+                'headerActions.fields.color.warn': 'Warn',
+                'headerActions.fields.visible': 'Visible',
+                'headerActions.fields.disabled': 'Disabled',
+                'headerActions.fields.loading': 'Loading',
+                'headerActions.fields.className': 'CSS class',
+                'headerActions.fields.style': 'Style (JSON)',
+                'headerActions.validation.invalidJson': 'Invalid JSON.',
+                'headerActions.validation.objectJson': 'Provide a valid JSON object.',
+                'headerActions.placeholders.id': 'e.g. help',
+                'headerActions.placeholders.label': 'e.g. Section help',
+                'headerActions.placeholders.icon': 'e.g. help_outline',
+                'headerActions.placeholders.action': 'Optional. If empty, the ID is used',
+                'headerActions.placeholders.tooltip': 'Optional. If empty, the label is used',
+                'headerActions.placeholders.className': 'e.g. section-help-action',
+                'headerActions.placeholders.style': '{"marginLeft":"4px"}',
+            },
+        },
+    },
+};
+
 class SectionEditorComponent {
     fb;
     data;
@@ -18231,6 +19071,7 @@ class SectionEditorComponent {
             className: [this.section.className ?? ''],
             testId: [this.section.testId ?? ''],
             headerTooltip: [this.section.headerTooltip ?? ''],
+            headerActions: this.fb.array((this.normalizeHeaderActions(this.section.headerActions) ?? []).map((action) => this.createHeaderActionGroup(action))),
         });
         this.syncCollapsedControlState(!!this.form.get('collapsible')?.value);
         this.form.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(() => {
@@ -18262,6 +19103,12 @@ class SectionEditorComponent {
     getSettingsValue() {
         return this.normalizeSectionFormValue(this.form.getRawValue());
     }
+    get headerActionsArray() {
+        return this.form.get('headerActions');
+    }
+    getHeaderActionStylePlaceholder() {
+        return this.tx('headerActions.placeholders.style', '{"marginLeft":"4px"}');
+    }
     async pickIcon() {
         const current = this.form.value.icon;
         // Use dialog to avoid replacing the settings panel content.
@@ -18287,6 +19134,30 @@ class SectionEditorComponent {
     clearFallbackIcon() {
         this.form.get('sectionHeader.fallbackIcon')?.setValue('');
     }
+    addHeaderAction() {
+        this.headerActionsArray.push(this.createHeaderActionGroup({
+            id: '',
+            label: '',
+            icon: '',
+            visible: true,
+            disabled: false,
+        }));
+        this.applyNormalizedFormValue();
+        this.isDirty$.next(true);
+    }
+    removeHeaderAction(index) {
+        if (index < 0 || index >= this.headerActionsArray.length)
+            return;
+        this.headerActionsArray.removeAt(index);
+        this.applyNormalizedFormValue();
+        this.isDirty$.next(true);
+    }
+    moveHeaderActionUp(index) {
+        this.moveHeaderAction(index, index - 1);
+    }
+    moveHeaderActionDown(index) {
+        this.moveHeaderAction(index, index + 1);
+    }
     syncCollapsedControlState(canCollapse) {
         const collapsedControl = this.form.get('collapsed');
         if (!collapsedControl)
@@ -18379,8 +19250,8 @@ class SectionEditorComponent {
     trackFieldOption(index, field) {
         return field.value || String(index);
     }
-    tx(key, fallback) {
-        return this.i18n.t(key, undefined, fallback, 'praxis-dynamic-form');
+    tx(key, fallback, params) {
+        return this.i18n.t(key, params, fallback, SECTION_EDITOR_I18N_NAMESPACE);
     }
     applyNormalizedFormValue() {
         const normalized = this.normalizeSectionFormValue(this.form.getRawValue());
@@ -18406,6 +19277,7 @@ class SectionEditorComponent {
             'className',
             'testId',
             'headerTooltip',
+            'headerActions',
         ];
         for (const key of managedKeys) {
             const value = normalized[key];
@@ -18440,12 +19312,138 @@ class SectionEditorComponent {
             className: this.normalizeOptionalString(raw.className),
             testId: this.normalizeOptionalString(raw.testId),
             headerTooltip: this.normalizeOptionalString(raw.headerTooltip),
+            headerActions: this.normalizeHeaderActions(raw.headerActions),
         };
         return normalized;
     }
     normalizeSectionHeader(raw) {
         return normalizeSectionHeaderConfig(raw);
     }
+    createHeaderActionGroup(action) {
+        return this.fb.group({
+            id: [action?.id ?? ''],
+            label: [action?.label ?? ''],
+            icon: [action?.icon ?? ''],
+            action: [action?.action ?? ''],
+            tooltip: [action?.tooltip ?? ''],
+            color: [action?.color ?? ''],
+            visible: [action?.visible ?? true],
+            disabled: [action?.disabled ?? false],
+            loading: [action?.loading ?? false],
+            className: [action?.className ?? ''],
+            styleJson: [
+                this.stringifyHeaderActionStyle(action?.style),
+                this.headerActionStyleValidator,
+            ],
+        });
+    }
+    moveHeaderAction(fromIndex, toIndex) {
+        if (fromIndex < 0 ||
+            fromIndex >= this.headerActionsArray.length ||
+            toIndex < 0 ||
+            toIndex >= this.headerActionsArray.length ||
+            fromIndex === toIndex) {
+            return;
+        }
+        const control = this.headerActionsArray.at(fromIndex);
+        this.headerActionsArray.removeAt(fromIndex);
+        this.headerActionsArray.insert(toIndex, control);
+        this.applyNormalizedFormValue();
+        this.isDirty$.next(true);
+    }
+    normalizeHeaderActions(raw) {
+        if (!Array.isArray(raw))
+            return undefined;
+        const normalized = [];
+        raw.forEach((item) => {
+            const id = this.normalizeOptionalString(item?.id);
+            const icon = this.normalizeOptionalString(item?.icon);
+            const label = this.normalizeOptionalString(item?.label) || id;
+            if (!id || !icon || !label)
+                return;
+            const color = this.normalizeOptionalString(item?.color);
+            const nextAction = {
+                id,
+                label,
+                icon,
+            };
+            const action = this.normalizeOptionalString(item?.action);
+            const tooltip = this.normalizeOptionalString(item?.tooltip);
+            const normalizedColor = color === 'primary' ||
+                color === 'accent' ||
+                color === 'warn' ||
+                color === 'basic'
+                ? color
+                : undefined;
+            const className = this.normalizeOptionalString(item?.className);
+            const style = this.parseHeaderActionStyle(item?.styleJson ?? item?.style);
+            if (action !== undefined)
+                nextAction.action = action;
+            if (tooltip !== undefined)
+                nextAction.tooltip = tooltip;
+            if (normalizedColor !== undefined)
+                nextAction.color = normalizedColor;
+            if (item?.visible === false)
+                nextAction.visible = false;
+            if (item?.disabled === true)
+                nextAction.disabled = true;
+            if (item?.loading === true)
+                nextAction.loading = true;
+            if (className !== undefined)
+                nextAction.className = className;
+            if (style !== undefined)
+                nextAction.style = style;
+            normalized.push(nextAction);
+        });
+        return normalized.length ? normalized : undefined;
+    }
+    headerActionStyleValidator = (control) => {
+        const rawValue = control.value;
+        if (rawValue === null || rawValue === undefined || rawValue === '') {
+            return null;
+        }
+        try {
+            const parsed = typeof rawValue === 'string' ? JSON.parse(rawValue) : rawValue;
+            if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+                return { invalidObjectJson: true };
+            }
+            return null;
+        }
+        catch {
+            return { invalidJson: true };
+        }
+    };
+    stringifyHeaderActionStyle(value) {
+        if (!value || !Object.keys(value).length)
+            return '';
+        try {
+            return JSON.stringify(value, null, 2);
+        }
+        catch {
+            return '';
+        }
+    }
+    parseHeaderActionStyle(value) {
+        if (value === null || value === undefined || value === '')
+            return undefined;
+        if (typeof value === 'object' && !Array.isArray(value)) {
+            return Object.keys(value).length
+                ? value
+                : undefined;
+        }
+        if (typeof value !== 'string')
+            return undefined;
+        try {
+            const parsed = JSON.parse(value);
+            if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+                return undefined;
+            }
+            return Object.keys(parsed).length ? parsed : undefined;
+        }
+        catch {
+            return undefined;
+        }
+    }
     normalizeOptionalString(value) {
         if (typeof value !== 'string')
             return undefined;
@@ -18459,7 +19457,7 @@ class SectionEditorComponent {
         return Number.isFinite(numeric) ? numeric : undefined;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SectionEditorComponent, deps: [{ token: i1$3.FormBuilder }, { token: SETTINGS_PANEL_DATA }, { token: i1$2.IconPickerService }, { token: i1$2.PraxisI18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: SectionEditorComponent, isStandalone: true, selector: "praxis-section-editor", inputs: { focusTarget: "focusTarget", fieldMetadata: "fieldMetadata" }, viewQueries: [{ propertyName: "titleInput", first: true, predicate: ["titleInput"], descendants: true }, { propertyName: "descriptionInput", first: true, predicate: ["descriptionInput"], descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: SectionEditorComponent, isStandalone: true, selector: "praxis-section-editor", inputs: { focusTarget: "focusTarget", fieldMetadata: "fieldMetadata" }, providers: [providePraxisI18nConfig(SECTION_EDITOR_I18N_CONFIG)], viewQueries: [{ propertyName: "titleInput", first: true, predicate: ["titleInput"], descendants: true }, { propertyName: "descriptionInput", first: true, predicate: ["descriptionInput"], descendants: true }], ngImport: i0, template: `
     <div class="editor-container" *ngIf="form">
       <mat-tab-group>
         <mat-tab [label]="tx('dynamicForm.sectionEditor.tabs.header', 'Cabeçalho')">
@@ -18469,15 +19467,15 @@ class SectionEditorComponent {
           </div>
           <form [formGroup]="form" class="stack">
             <div class="preset-row">
-              <span class="preset-title">Presets rápidos</span>
-              <button mat-stroked-button type="button" (click)="applyPreset('default')">Padrão</button>
-              <button mat-stroked-button type="button" (click)="applyPreset('simple')">Simples</button>
-              <button mat-stroked-button type="button" (click)="applyPreset('collapsible')">Colapsável</button>
+              <span class="preset-title">{{ tx('dynamicForm.sectionEditor.header.presets.title', 'Presets rápidos') }}</span>
+              <button mat-stroked-button type="button" (click)="applyPreset('default')">{{ tx('dynamicForm.sectionEditor.header.presets.default', 'Padrão') }}</button>
+              <button mat-stroked-button type="button" (click)="applyPreset('simple')">{{ tx('dynamicForm.sectionEditor.header.presets.simple', 'Simples') }}</button>
+              <button mat-stroked-button type="button" (click)="applyPreset('collapsible')">{{ tx('dynamicForm.sectionEditor.header.presets.collapsible', 'Colapsável') }}</button>
             </div>
 
             <div class="row-2">
               <mat-form-field appearance="fill">
-                <mat-label>Título</mat-label>
+                <mat-label>{{ tx('dynamicForm.sectionEditor.header.fields.title', 'Título') }}</mat-label>
                 <input matInput #titleInput formControlName="title" />
               </mat-form-field>
 
@@ -18523,13 +19521,13 @@ class SectionEditorComponent {
             </div>
 
             <mat-form-field appearance="fill">
-              <mat-label>Descrição</mat-label>
-              <textarea matInput #descriptionInput formControlName="description" placeholder="Resumo curto do conteúdo da seção"></textarea>
+              <mat-label>{{ tx('dynamicForm.sectionEditor.header.fields.description', 'Descrição') }}</mat-label>
+              <textarea matInput #descriptionInput formControlName="description" [placeholder]="tx('dynamicForm.sectionEditor.header.placeholders.description', 'Resumo curto do conteúdo da seção')"></textarea>
             </mat-form-field>
 
             <div class="row-3">
               <mat-form-field appearance="fill">
-                <mat-label>Aparência</mat-label>
+                <mat-label>{{ tx('dynamicForm.sectionEditor.header.fields.appearance', 'Aparência') }}</mat-label>
                 <mat-select formControlName="appearance">
                   <mat-option value="card">Card</mat-option>
                   <mat-option value="plain">Plain</mat-option>
@@ -18572,40 +19570,40 @@ class SectionEditorComponent {
             <mat-divider></mat-divider>
             <div class="row-3">
               <mat-form-field appearance="fill">
-                <mat-label>Cor do título</mat-label>
+                <mat-label>{{ tx('dynamicForm.sectionEditor.header.fields.titleColor', 'Cor do título') }}</mat-label>
                 <mat-select formControlName="titleColor">
-                  <mat-option value="">Padrão (on-surface)</mat-option>
-                  <mat-option value="var(--md-sys-color-primary)">Primária</mat-option>
-                  <mat-option value="var(--md-sys-color-secondary)">Secundária</mat-option>
+                  <mat-option value="">{{ tx('dynamicForm.sectionEditor.header.options.titleColor.default', 'Padrão (on-surface)') }}</mat-option>
+                  <mat-option value="var(--md-sys-color-primary)">{{ tx('dynamicForm.sectionEditor.header.options.titleColor.primary', 'Primária') }}</mat-option>
+                  <mat-option value="var(--md-sys-color-secondary)">{{ tx('dynamicForm.sectionEditor.header.options.titleColor.secondary', 'Secundária') }}</mat-option>
                   <mat-option value="var(--md-sys-color-on-surface-variant)">On surface variant</mat-option>
                 </mat-select>
               </mat-form-field>
               <mat-form-field appearance="fill">
-                <mat-label>Cor da descrição</mat-label>
+                <mat-label>{{ tx('dynamicForm.sectionEditor.header.fields.descriptionColor', 'Cor da descrição') }}</mat-label>
                 <mat-select formControlName="descriptionColor">
-                  <mat-option value="">Padrão (on-surface-variant)</mat-option>
-                  <mat-option value="var(--md-sys-color-primary)">Primária</mat-option>
-                  <mat-option value="var(--md-sys-color-secondary)">Secundária</mat-option>
+                  <mat-option value="">{{ tx('dynamicForm.sectionEditor.header.options.descriptionColor.default', 'Padrão (on-surface-variant)') }}</mat-option>
+                  <mat-option value="var(--md-sys-color-primary)">{{ tx('dynamicForm.sectionEditor.header.options.descriptionColor.primary', 'Primária') }}</mat-option>
+                  <mat-option value="var(--md-sys-color-secondary)">{{ tx('dynamicForm.sectionEditor.header.options.descriptionColor.secondary', 'Secundária') }}</mat-option>
                   <mat-option value="var(--md-sys-color-on-surface)">On surface</mat-option>
                 </mat-select>
               </mat-form-field>
               <mat-form-field appearance="fill">
-                <mat-label>Cor personalizada (CSS)</mat-label>
-                <input matInput placeholder="ex.: #3366ff ou rgb(...)" (input)="setCustomColors($any($event.target).value)" />
+                <mat-label>{{ tx('dynamicForm.sectionEditor.header.fields.customColor', 'Cor personalizada (CSS)') }}</mat-label>
+                <input matInput [placeholder]="tx('dynamicForm.sectionEditor.header.placeholders.customColor', 'ex.: #3366ff ou rgb(...)')" (input)="setCustomColors($any($event.target).value)" />
               </mat-form-field>
             </div>
 
             <div class="row-3">
               <mat-form-field appearance="fill">
-                <mat-label>Gap do título (px)</mat-label>
+                <mat-label>{{ tx('dynamicForm.sectionEditor.header.fields.titleGapBottom', 'Gap do título (px)') }}</mat-label>
                 <input matInput type="number" formControlName="titleGapBottom" min="0" />
               </mat-form-field>
               <mat-form-field appearance="fill">
-                <mat-label>Gap da descrição (px)</mat-label>
+                <mat-label>{{ tx('dynamicForm.sectionEditor.header.fields.descriptionGapBottom', 'Gap da descrição (px)') }}</mat-label>
                 <input matInput type="number" formControlName="descriptionGapBottom" min="0" />
               </mat-form-field>
               <mat-form-field appearance="fill">
-                <mat-label>Gap abaixo da seção (px)</mat-label>
+                <mat-label>{{ tx('dynamicForm.sectionEditor.header.fields.gapBottom', 'Gap abaixo da seção (px)') }}</mat-label>
                 <input matInput type="number" min="0" formControlName="gapBottom" />
               </mat-form-field>
             </div>
@@ -18613,19 +19611,148 @@ class SectionEditorComponent {
             <mat-divider></mat-divider>
             <div class="row-2">
               <mat-slide-toggle formControlName="collapsible">
-                Colapsável
+                {{ tx('dynamicForm.sectionEditor.header.fields.collapsible', 'Colapsável') }}
               </mat-slide-toggle>
 
               <mat-slide-toggle formControlName="collapsed">
-                Iniciar recolhida
+                {{ tx('dynamicForm.sectionEditor.header.fields.collapsed', 'Iniciar recolhida') }}
               </mat-slide-toggle>
             </div>
 
             <mat-form-field appearance="fill">
-              <mat-label>Tooltip do cabeçalho</mat-label>
-              <input matInput formControlName="headerTooltip" placeholder="Dica ao passar o mouse no título" />
+              <mat-label>{{ tx('dynamicForm.sectionEditor.header.fields.headerTooltip', 'Tooltip do cabeçalho') }}</mat-label>
+              <input matInput formControlName="headerTooltip" [placeholder]="tx('dynamicForm.sectionEditor.header.placeholders.headerTooltip', 'Dica ao passar o mouse no título')" />
             </mat-form-field>
 
+            <mat-divider></mat-divider>
+            <div class="inline-section-header">
+              <div>
+                <div class="inline-section-title">{{ tx('headerActions.title', 'Ações do cabeçalho') }}</div>
+                <p class="inline-section-description">
+                  {{ tx('headerActions.description', 'Adicione ícones acionáveis no canto direito do cabeçalho da seção para affordances contextuais como ajuda, refresh ou drill-down.') }}
+                </p>
+              </div>
+              <button mat-stroked-button type="button" (click)="addHeaderAction()">
+                {{ tx('headerActions.add', 'Adicionar ação') }}
+              </button>
+            </div>
+
+            @if (!headerActionsArray.length) {
+            <p class="empty-inline-state">
+              {{ tx('headerActions.empty', 'Nenhuma ação configurada para este cabeçalho.') }}
+            </p>
+            }
+
+            <div class="header-actions-list" formArrayName="headerActions">
+              <div class="header-action-card" *ngFor="let actionGroup of headerActionsArray.controls; let index = index" [formGroupName]="index">
+                <div class="header-action-toolbar">
+                  <div class="header-action-title">
+                    {{ tx('headerActions.item', 'Ação {{index}}', { index: index + 1 }) }}
+                  </div>
+                  <div class="header-action-toolbar-buttons">
+                    <button
+                      mat-icon-button
+                      type="button"
+                      (click)="moveHeaderActionUp(index)"
+                      [disabled]="index === 0"
+                      [attr.aria-label]="tx('headerActions.moveUp', 'Mover ação para cima')"
+                    >
+                      <mat-icon [praxisIcon]="'arrow_upward'"></mat-icon>
+                    </button>
+                    <button
+                      mat-icon-button
+                      type="button"
+                      (click)="moveHeaderActionDown(index)"
+                      [disabled]="index === headerActionsArray.length - 1"
+                      [attr.aria-label]="tx('headerActions.moveDown', 'Mover ação para baixo')"
+                    >
+                      <mat-icon [praxisIcon]="'arrow_downward'"></mat-icon>
+                    </button>
+                    <button
+                      mat-icon-button
+                      type="button"
+                      color="warn"
+                      (click)="removeHeaderAction(index)"
+                      [attr.aria-label]="tx('headerActions.remove', 'Remover ação')"
+                    >
+                      <mat-icon [praxisIcon]="'delete'"></mat-icon>
+                    </button>
+                  </div>
+                </div>
+
+                <div class="row-3">
+                  <mat-form-field appearance="fill">
+                    <mat-label>{{ tx('headerActions.fields.id', 'ID') }}</mat-label>
+                    <input matInput formControlName="id" [placeholder]="tx('headerActions.placeholders.id', 'ex.: help')" />
+                  </mat-form-field>
+
+                  <mat-form-field appearance="fill">
+                    <mat-label>{{ tx('headerActions.fields.label', 'Label acessível') }}</mat-label>
+                    <input matInput formControlName="label" [placeholder]="tx('headerActions.placeholders.label', 'ex.: Ajuda da seção')" />
+                  </mat-form-field>
+
+                  <mat-form-field appearance="fill">
+                    <mat-label>{{ tx('headerActions.fields.icon', 'Ícone') }}</mat-label>
+                    <input matInput formControlName="icon" [placeholder]="tx('headerActions.placeholders.icon', 'ex.: help_outline')" />
+                  </mat-form-field>
+                </div>
+
+                <div class="row-3">
+                  <mat-form-field appearance="fill">
+                    <mat-label>{{ tx('headerActions.fields.action', 'Action emitida') }}</mat-label>
+                    <input matInput formControlName="action" [placeholder]="tx('headerActions.placeholders.action', 'Opcional. Se vazio, usa o ID')" />
+                  </mat-form-field>
+
+                  <mat-form-field appearance="fill">
+                    <mat-label>{{ tx('headerActions.fields.tooltip', 'Tooltip') }}</mat-label>
+                    <input matInput formControlName="tooltip" [placeholder]="tx('headerActions.placeholders.tooltip', 'Opcional. Se vazio, usa a label')" />
+                  </mat-form-field>
+
+                  <mat-form-field appearance="fill">
+                    <mat-label>{{ tx('headerActions.fields.color', 'Cor') }}</mat-label>
+                    <mat-select formControlName="color">
+                      <mat-option value="">{{ tx('headerActions.fields.color.default', 'Padrão') }}</mat-option>
+                      <mat-option value="basic">{{ tx('headerActions.fields.color.basic', 'Basic') }}</mat-option>
+                      <mat-option value="primary">{{ tx('headerActions.fields.color.primary', 'Primária') }}</mat-option>
+                      <mat-option value="accent">{{ tx('headerActions.fields.color.accent', 'Accent') }}</mat-option>
+                      <mat-option value="warn">{{ tx('headerActions.fields.color.warn', 'Warn') }}</mat-option>
+                    </mat-select>
+                  </mat-form-field>
+                </div>
+
+                <div class="row-2">
+                  <mat-form-field appearance="fill">
+                    <mat-label>{{ tx('headerActions.fields.className', 'Classe CSS') }}</mat-label>
+                    <input matInput formControlName="className" [placeholder]="tx('headerActions.placeholders.className', 'ex.: section-help-action')" />
+                  </mat-form-field>
+
+                  <mat-form-field appearance="fill">
+                    <mat-label>{{ tx('headerActions.fields.style', 'Estilo (JSON)') }}</mat-label>
+                    <textarea matInput rows="3" formControlName="styleJson" [placeholder]="getHeaderActionStylePlaceholder()"></textarea>
+                    @if (actionGroup.get('styleJson')?.hasError('invalidJson')) {
+                    <mat-error>{{ tx('headerActions.validation.invalidJson', 'JSON inválido.') }}</mat-error>
+                    } @else if (actionGroup.get('styleJson')?.hasError('invalidObjectJson')) {
+                    <mat-error>{{ tx('headerActions.validation.objectJson', 'Informe um objeto JSON válido.') }}</mat-error>
+                    }
+                  </mat-form-field>
+                </div>
+
+                <div class="row-3">
+                  <mat-slide-toggle formControlName="visible">
+                    {{ tx('headerActions.fields.visible', 'Visível') }}
+                  </mat-slide-toggle>
+
+                  <mat-slide-toggle formControlName="disabled">
+                    {{ tx('headerActions.fields.disabled', 'Desabilitada') }}
+                  </mat-slide-toggle>
+
+                  <mat-slide-toggle formControlName="loading">
+                    {{ tx('headerActions.fields.loading', 'Loading') }}
+                  </mat-slide-toggle>
+                </div>
+              </div>
+            </div>
+
             <div class="row-2">
               <mat-form-field appearance="fill">
                 <mat-label>Classe CSS</mat-label>
@@ -18775,11 +19902,11 @@ class SectionEditorComponent {
         </mat-tab>
       </mat-tab-group>
     </div>
-  `, isInline: true, styles: [".editor-container{padding:16px}.preset-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}.preset-title{font-weight:600;color:var(--md-sys-color-on-surface-variant)}.bp-group{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.stack{display:flex;flex-direction:column;gap:12px}.row-2,.row-3{display:grid;gap:10px;align-items:start}.row-2{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.row-3{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}mat-form-field{width:100%;margin-bottom:12px}.help-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 18px;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}.help-icon-button mat-icon{font-size:18px;line-height:18px;width:18px;height:18px}.avatar-guidance{border-radius:12px;padding:12px 14px;background:color-mix(in srgb,var(--md-sys-color-primary) 6%,white);border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 14%,transparent)}.avatar-guidance p{margin:0 0 6px;font-size:12px;line-height:1.5;color:var(--md-sys-color-on-surface-variant)}.avatar-guidance p:last-child{margin-bottom:0}.tips p{margin:0 0 6px;font-size:13px;color:var(--md-sys-color-on-surface-variant)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i7$2.MatTabContent, selector: "[matTabContent]" }, { kind: "component", type: i7$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i7$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i6$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i11$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6$4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }] });
+  `, isInline: true, styles: [".editor-container{padding:16px}.preset-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}.preset-title{font-weight:600;color:var(--md-sys-color-on-surface-variant)}.bp-group{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.inline-section-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}.inline-section-title{font-size:14px;font-weight:700;color:var(--md-sys-color-on-surface)}.inline-section-description{margin:4px 0 0;font-size:12px;line-height:1.5;color:var(--md-sys-color-on-surface-variant);max-width:72ch}.empty-inline-state{margin:0;font-size:12px;color:var(--md-sys-color-on-surface-variant)}.header-actions-list{display:flex;flex-direction:column;gap:12px}.header-action-card{border:1px solid var(--md-sys-color-outline-variant);border-radius:14px;padding:12px;background:color-mix(in srgb,var(--md-sys-color-surface-container-low) 82%,white 18%)}.header-action-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.header-action-title{font-size:13px;font-weight:700;color:var(--md-sys-color-on-surface)}.header-action-toolbar-buttons{display:inline-flex;align-items:center;gap:4px}.stack{display:flex;flex-direction:column;gap:12px}.row-2,.row-3{display:grid;gap:10px;align-items:start}.row-2{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.row-3{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}mat-form-field{width:100%;margin-bottom:12px}.help-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 18px;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}.help-icon-button mat-icon{font-size:18px;line-height:18px;width:18px;height:18px}.avatar-guidance{border-radius:12px;padding:12px 14px;background:color-mix(in srgb,var(--md-sys-color-primary) 6%,white);border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 14%,transparent)}.avatar-guidance p{margin:0 0 6px;font-size:12px;line-height:1.5;color:var(--md-sys-color-on-surface-variant)}.avatar-guidance p:last-child{margin-bottom:0}.tips p{margin:0 0 6px;font-size:13px;color:var(--md-sys-color-on-surface-variant)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i7$2.MatTabContent, selector: "[matTabContent]" }, { kind: "component", type: i7$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i7$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i6$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i11$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6$4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SectionEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'praxis-section-editor', standalone: true, imports: [
+            args: [{ selector: 'praxis-section-editor', standalone: true, providers: [providePraxisI18nConfig(SECTION_EDITOR_I18N_CONFIG)], imports: [
                         CommonModule,
                         ReactiveFormsModule,
                         MatFormFieldModule,
@@ -18803,15 +19930,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
           </div>
           <form [formGroup]="form" class="stack">
             <div class="preset-row">
-              <span class="preset-title">Presets rápidos</span>
-              <button mat-stroked-button type="button" (click)="applyPreset('default')">Padrão</button>
-              <button mat-stroked-button type="button" (click)="applyPreset('simple')">Simples</button>
-              <button mat-stroked-button type="button" (click)="applyPreset('collapsible')">Colapsável</button>
+              <span class="preset-title">{{ tx('dynamicForm.sectionEditor.header.presets.title', 'Presets rápidos') }}</span>
+              <button mat-stroked-button type="button" (click)="applyPreset('default')">{{ tx('dynamicForm.sectionEditor.header.presets.default', 'Padrão') }}</button>
+              <button mat-stroked-button type="button" (click)="applyPreset('simple')">{{ tx('dynamicForm.sectionEditor.header.presets.simple', 'Simples') }}</button>
+              <button mat-stroked-button type="button" (click)="applyPreset('collapsible')">{{ tx('dynamicForm.sectionEditor.header.presets.collapsible', 'Colapsável') }}</button>
             </div>
 
             <div class="row-2">
               <mat-form-field appearance="fill">
-                <mat-label>Título</mat-label>
+                <mat-label>{{ tx('dynamicForm.sectionEditor.header.fields.title', 'Título') }}</mat-label>
                 <input matInput #titleInput formControlName="title" />
               </mat-form-field>
 
@@ -18857,13 +19984,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             </div>
 
             <mat-form-field appearance="fill">
-              <mat-label>Descrição</mat-label>
-              <textarea matInput #descriptionInput formControlName="description" placeholder="Resumo curto do conteúdo da seção"></textarea>
+              <mat-label>{{ tx('dynamicForm.sectionEditor.header.fields.description', 'Descrição') }}</mat-label>
+              <textarea matInput #descriptionInput formControlName="description" [placeholder]="tx('dynamicForm.sectionEditor.header.placeholders.description', 'Resumo curto do conteúdo da seção')"></textarea>
             </mat-form-field>
 
             <div class="row-3">
               <mat-form-field appearance="fill">
-                <mat-label>Aparência</mat-label>
+                <mat-label>{{ tx('dynamicForm.sectionEditor.header.fields.appearance', 'Aparência') }}</mat-label>
                 <mat-select formControlName="appearance">
                   <mat-option value="card">Card</mat-option>
                   <mat-option value="plain">Plain</mat-option>
@@ -18906,40 +20033,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             <mat-divider></mat-divider>
             <div class="row-3">
               <mat-form-field appearance="fill">
-                <mat-label>Cor do título</mat-label>
+                <mat-label>{{ tx('dynamicForm.sectionEditor.header.fields.titleColor', 'Cor do título') }}</mat-label>
                 <mat-select formControlName="titleColor">
-                  <mat-option value="">Padrão (on-surface)</mat-option>
-                  <mat-option value="var(--md-sys-color-primary)">Primária</mat-option>
-                  <mat-option value="var(--md-sys-color-secondary)">Secundária</mat-option>
+                  <mat-option value="">{{ tx('dynamicForm.sectionEditor.header.options.titleColor.default', 'Padrão (on-surface)') }}</mat-option>
+                  <mat-option value="var(--md-sys-color-primary)">{{ tx('dynamicForm.sectionEditor.header.options.titleColor.primary', 'Primária') }}</mat-option>
+                  <mat-option value="var(--md-sys-color-secondary)">{{ tx('dynamicForm.sectionEditor.header.options.titleColor.secondary', 'Secundária') }}</mat-option>
                   <mat-option value="var(--md-sys-color-on-surface-variant)">On surface variant</mat-option>
                 </mat-select>
               </mat-form-field>
               <mat-form-field appearance="fill">
-                <mat-label>Cor da descrição</mat-label>
+                <mat-label>{{ tx('dynamicForm.sectionEditor.header.fields.descriptionColor', 'Cor da descrição') }}</mat-label>
                 <mat-select formControlName="descriptionColor">
-                  <mat-option value="">Padrão (on-surface-variant)</mat-option>
-                  <mat-option value="var(--md-sys-color-primary)">Primária</mat-option>
-                  <mat-option value="var(--md-sys-color-secondary)">Secundária</mat-option>
+                  <mat-option value="">{{ tx('dynamicForm.sectionEditor.header.options.descriptionColor.default', 'Padrão (on-surface-variant)') }}</mat-option>
+                  <mat-option value="var(--md-sys-color-primary)">{{ tx('dynamicForm.sectionEditor.header.options.descriptionColor.primary', 'Primária') }}</mat-option>
+                  <mat-option value="var(--md-sys-color-secondary)">{{ tx('dynamicForm.sectionEditor.header.options.descriptionColor.secondary', 'Secundária') }}</mat-option>
                   <mat-option value="var(--md-sys-color-on-surface)">On surface</mat-option>
                 </mat-select>
               </mat-form-field>
               <mat-form-field appearance="fill">
-                <mat-label>Cor personalizada (CSS)</mat-label>
-                <input matInput placeholder="ex.: #3366ff ou rgb(...)" (input)="setCustomColors($any($event.target).value)" />
+                <mat-label>{{ tx('dynamicForm.sectionEditor.header.fields.customColor', 'Cor personalizada (CSS)') }}</mat-label>
+                <input matInput [placeholder]="tx('dynamicForm.sectionEditor.header.placeholders.customColor', 'ex.: #3366ff ou rgb(...)')" (input)="setCustomColors($any($event.target).value)" />
               </mat-form-field>
             </div>
 
             <div class="row-3">
               <mat-form-field appearance="fill">
-                <mat-label>Gap do título (px)</mat-label>
+                <mat-label>{{ tx('dynamicForm.sectionEditor.header.fields.titleGapBottom', 'Gap do título (px)') }}</mat-label>
                 <input matInput type="number" formControlName="titleGapBottom" min="0" />
               </mat-form-field>
               <mat-form-field appearance="fill">
-                <mat-label>Gap da descrição (px)</mat-label>
+                <mat-label>{{ tx('dynamicForm.sectionEditor.header.fields.descriptionGapBottom', 'Gap da descrição (px)') }}</mat-label>
                 <input matInput type="number" formControlName="descriptionGapBottom" min="0" />
               </mat-form-field>
               <mat-form-field appearance="fill">
-                <mat-label>Gap abaixo da seção (px)</mat-label>
+                <mat-label>{{ tx('dynamicForm.sectionEditor.header.fields.gapBottom', 'Gap abaixo da seção (px)') }}</mat-label>
                 <input matInput type="number" min="0" formControlName="gapBottom" />
               </mat-form-field>
             </div>
@@ -18947,19 +20074,148 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             <mat-divider></mat-divider>
             <div class="row-2">
               <mat-slide-toggle formControlName="collapsible">
-                Colapsável
+                {{ tx('dynamicForm.sectionEditor.header.fields.collapsible', 'Colapsável') }}
               </mat-slide-toggle>
 
               <mat-slide-toggle formControlName="collapsed">
-                Iniciar recolhida
+                {{ tx('dynamicForm.sectionEditor.header.fields.collapsed', 'Iniciar recolhida') }}
               </mat-slide-toggle>
             </div>
 
             <mat-form-field appearance="fill">
-              <mat-label>Tooltip do cabeçalho</mat-label>
-              <input matInput formControlName="headerTooltip" placeholder="Dica ao passar o mouse no título" />
+              <mat-label>{{ tx('dynamicForm.sectionEditor.header.fields.headerTooltip', 'Tooltip do cabeçalho') }}</mat-label>
+              <input matInput formControlName="headerTooltip" [placeholder]="tx('dynamicForm.sectionEditor.header.placeholders.headerTooltip', 'Dica ao passar o mouse no título')" />
             </mat-form-field>
 
+            <mat-divider></mat-divider>
+            <div class="inline-section-header">
+              <div>
+                <div class="inline-section-title">{{ tx('headerActions.title', 'Ações do cabeçalho') }}</div>
+                <p class="inline-section-description">
+                  {{ tx('headerActions.description', 'Adicione ícones acionáveis no canto direito do cabeçalho da seção para affordances contextuais como ajuda, refresh ou drill-down.') }}
+                </p>
+              </div>
+              <button mat-stroked-button type="button" (click)="addHeaderAction()">
+                {{ tx('headerActions.add', 'Adicionar ação') }}
+              </button>
+            </div>
+
+            @if (!headerActionsArray.length) {
+            <p class="empty-inline-state">
+              {{ tx('headerActions.empty', 'Nenhuma ação configurada para este cabeçalho.') }}
+            </p>
+            }
+
+            <div class="header-actions-list" formArrayName="headerActions">
+              <div class="header-action-card" *ngFor="let actionGroup of headerActionsArray.controls; let index = index" [formGroupName]="index">
+                <div class="header-action-toolbar">
+                  <div class="header-action-title">
+                    {{ tx('headerActions.item', 'Ação {{index}}', { index: index + 1 }) }}
+                  </div>
+                  <div class="header-action-toolbar-buttons">
+                    <button
+                      mat-icon-button
+                      type="button"
+                      (click)="moveHeaderActionUp(index)"
+                      [disabled]="index === 0"
+                      [attr.aria-label]="tx('headerActions.moveUp', 'Mover ação para cima')"
+                    >
+                      <mat-icon [praxisIcon]="'arrow_upward'"></mat-icon>
+                    </button>
+                    <button
+                      mat-icon-button
+                      type="button"
+                      (click)="moveHeaderActionDown(index)"
+                      [disabled]="index === headerActionsArray.length - 1"
+                      [attr.aria-label]="tx('headerActions.moveDown', 'Mover ação para baixo')"
+                    >
+                      <mat-icon [praxisIcon]="'arrow_downward'"></mat-icon>
+                    </button>
+                    <button
+                      mat-icon-button
+                      type="button"
+                      color="warn"
+                      (click)="removeHeaderAction(index)"
+                      [attr.aria-label]="tx('headerActions.remove', 'Remover ação')"
+                    >
+                      <mat-icon [praxisIcon]="'delete'"></mat-icon>
+                    </button>
+                  </div>
+                </div>
+
+                <div class="row-3">
+                  <mat-form-field appearance="fill">
+                    <mat-label>{{ tx('headerActions.fields.id', 'ID') }}</mat-label>
+                    <input matInput formControlName="id" [placeholder]="tx('headerActions.placeholders.id', 'ex.: help')" />
+                  </mat-form-field>
+
+                  <mat-form-field appearance="fill">
+                    <mat-label>{{ tx('headerActions.fields.label', 'Label acessível') }}</mat-label>
+                    <input matInput formControlName="label" [placeholder]="tx('headerActions.placeholders.label', 'ex.: Ajuda da seção')" />
+                  </mat-form-field>
+
+                  <mat-form-field appearance="fill">
+                    <mat-label>{{ tx('headerActions.fields.icon', 'Ícone') }}</mat-label>
+                    <input matInput formControlName="icon" [placeholder]="tx('headerActions.placeholders.icon', 'ex.: help_outline')" />
+                  </mat-form-field>
+                </div>
+
+                <div class="row-3">
+                  <mat-form-field appearance="fill">
+                    <mat-label>{{ tx('headerActions.fields.action', 'Action emitida') }}</mat-label>
+                    <input matInput formControlName="action" [placeholder]="tx('headerActions.placeholders.action', 'Opcional. Se vazio, usa o ID')" />
+                  </mat-form-field>
+
+                  <mat-form-field appearance="fill">
+                    <mat-label>{{ tx('headerActions.fields.tooltip', 'Tooltip') }}</mat-label>
+                    <input matInput formControlName="tooltip" [placeholder]="tx('headerActions.placeholders.tooltip', 'Opcional. Se vazio, usa a label')" />
+                  </mat-form-field>
+
+                  <mat-form-field appearance="fill">
+                    <mat-label>{{ tx('headerActions.fields.color', 'Cor') }}</mat-label>
+                    <mat-select formControlName="color">
+                      <mat-option value="">{{ tx('headerActions.fields.color.default', 'Padrão') }}</mat-option>
+                      <mat-option value="basic">{{ tx('headerActions.fields.color.basic', 'Basic') }}</mat-option>
+                      <mat-option value="primary">{{ tx('headerActions.fields.color.primary', 'Primária') }}</mat-option>
+                      <mat-option value="accent">{{ tx('headerActions.fields.color.accent', 'Accent') }}</mat-option>
+                      <mat-option value="warn">{{ tx('headerActions.fields.color.warn', 'Warn') }}</mat-option>
+                    </mat-select>
+                  </mat-form-field>
+                </div>
+
+                <div class="row-2">
+                  <mat-form-field appearance="fill">
+                    <mat-label>{{ tx('headerActions.fields.className', 'Classe CSS') }}</mat-label>
+                    <input matInput formControlName="className" [placeholder]="tx('headerActions.placeholders.className', 'ex.: section-help-action')" />
+                  </mat-form-field>
+
+                  <mat-form-field appearance="fill">
+                    <mat-label>{{ tx('headerActions.fields.style', 'Estilo (JSON)') }}</mat-label>
+                    <textarea matInput rows="3" formControlName="styleJson" [placeholder]="getHeaderActionStylePlaceholder()"></textarea>
+                    @if (actionGroup.get('styleJson')?.hasError('invalidJson')) {
+                    <mat-error>{{ tx('headerActions.validation.invalidJson', 'JSON inválido.') }}</mat-error>
+                    } @else if (actionGroup.get('styleJson')?.hasError('invalidObjectJson')) {
+                    <mat-error>{{ tx('headerActions.validation.objectJson', 'Informe um objeto JSON válido.') }}</mat-error>
+                    }
+                  </mat-form-field>
+                </div>
+
+                <div class="row-3">
+                  <mat-slide-toggle formControlName="visible">
+                    {{ tx('headerActions.fields.visible', 'Visível') }}
+                  </mat-slide-toggle>
+
+                  <mat-slide-toggle formControlName="disabled">
+                    {{ tx('headerActions.fields.disabled', 'Desabilitada') }}
+                  </mat-slide-toggle>
+
+                  <mat-slide-toggle formControlName="loading">
+                    {{ tx('headerActions.fields.loading', 'Loading') }}
+                  </mat-slide-toggle>
+                </div>
+              </div>
+            </div>
+
             <div class="row-2">
               <mat-form-field appearance="fill">
                 <mat-label>Classe CSS</mat-label>
@@ -19109,7 +20365,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
         </mat-tab>
       </mat-tab-group>
     </div>
-  `, styles: [".editor-container{padding:16px}.preset-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}.preset-title{font-weight:600;color:var(--md-sys-color-on-surface-variant)}.bp-group{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.stack{display:flex;flex-direction:column;gap:12px}.row-2,.row-3{display:grid;gap:10px;align-items:start}.row-2{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.row-3{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}mat-form-field{width:100%;margin-bottom:12px}.help-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 18px;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}.help-icon-button mat-icon{font-size:18px;line-height:18px;width:18px;height:18px}.avatar-guidance{border-radius:12px;padding:12px 14px;background:color-mix(in srgb,var(--md-sys-color-primary) 6%,white);border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 14%,transparent)}.avatar-guidance p{margin:0 0 6px;font-size:12px;line-height:1.5;color:var(--md-sys-color-on-surface-variant)}.avatar-guidance p:last-child{margin-bottom:0}.tips p{margin:0 0 6px;font-size:13px;color:var(--md-sys-color-on-surface-variant)}\n"] }]
+  `, styles: [".editor-container{padding:16px}.preset-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}.preset-title{font-weight:600;color:var(--md-sys-color-on-surface-variant)}.bp-group{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.inline-section-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}.inline-section-title{font-size:14px;font-weight:700;color:var(--md-sys-color-on-surface)}.inline-section-description{margin:4px 0 0;font-size:12px;line-height:1.5;color:var(--md-sys-color-on-surface-variant);max-width:72ch}.empty-inline-state{margin:0;font-size:12px;color:var(--md-sys-color-on-surface-variant)}.header-actions-list{display:flex;flex-direction:column;gap:12px}.header-action-card{border:1px solid var(--md-sys-color-outline-variant);border-radius:14px;padding:12px;background:color-mix(in srgb,var(--md-sys-color-surface-container-low) 82%,white 18%)}.header-action-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.header-action-title{font-size:13px;font-weight:700;color:var(--md-sys-color-on-surface)}.header-action-toolbar-buttons{display:inline-flex;align-items:center;gap:4px}.stack{display:flex;flex-direction:column;gap:12px}.row-2,.row-3{display:grid;gap:10px;align-items:start}.row-2{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.row-3{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}mat-form-field{width:100%;margin-bottom:12px}.help-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 18px;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}.help-icon-button mat-icon{font-size:18px;line-height:18px;width:18px;height:18px}.avatar-guidance{border-radius:12px;padding:12px 14px;background:color-mix(in srgb,var(--md-sys-color-primary) 6%,white);border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 14%,transparent)}.avatar-guidance p{margin:0 0 6px;font-size:12px;line-height:1.5;color:var(--md-sys-color-on-surface-variant)}.avatar-guidance p:last-child{margin-bottom:0}.tips p{margin:0 0 6px;font-size:13px;color:var(--md-sys-color-on-surface-variant)}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.FormBuilder }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [SETTINGS_PANEL_DATA]